<h3>vimで連番を作る！</h3>
<div style="padding-left: 15px;">
  併せて小技紹介です。</p>
<p>  普段vimmerだけど連番を使う時だけExcelを開いてrowを使っていませんか？</p>
<p>  そんな貴方にこんな技を紹介です。</p>
<p>  vimにはインクリメント機能が実は存在します。<br />
  Ctrl+a<br />
  を数値に合わせて押すだけです。<br />
  (設定次第では英字も対応可能です。必要性があれば。)</p>
<p>  上記を活用してやってみましょう</p></div>
<h3>実例</h3>
<div style="padding-left: 15px;">
  1を入力します。ここまではいつもどおりです。<br />
<a href="/uploads-archive/2016/04/dcf9ac55a7e8a6d43d3d1e157d450e63.png" rel="attachment wp-att-10267"><img decoding="async" loading="lazy" src="/uploads-archive/2016/04/dcf9ac55a7e8a6d43d3d1e157d450e63-300x183.png" alt="スクリーンショット 2016-04-05 17.53.12" width="300" height="183" class="alignnone size-medium wp-image-10267" srcset="/uploads-archive/2016/04/dcf9ac55a7e8a6d43d3d1e157d450e63-300x183.png 300w, /uploads-archive/2016/04/dcf9ac55a7e8a6d43d3d1e157d450e63-228x139.png 228w, /uploads-archive/2016/04/dcf9ac55a7e8a6d43d3d1e157d450e63.png 733w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<p>  マクロを作るためにレコードモードに変更します。<br />
  qを押したあと、適当な文字(ここではaとします)を押すとレコーディングスタート！</p>
<p>  yyを押して今の行をコピー。<br />
  pを押して次の行へペースト。(自動的に次の行へ移動されます)<br />
<a href="/uploads-archive/2016/04/110b343fc1022218563beb6906a08cb3.png" rel="attachment wp-att-10268"><img decoding="async" loading="lazy" src="/uploads-archive/2016/04/110b343fc1022218563beb6906a08cb3-300x173.png" alt="スクリーンショット 2016-04-05 17.55.42" width="300" height="173" class="alignnone size-medium wp-image-10268" srcset="/uploads-archive/2016/04/110b343fc1022218563beb6906a08cb3-300x173.png 300w, /uploads-archive/2016/04/110b343fc1022218563beb6906a08cb3-768x443.png 768w, /uploads-archive/2016/04/110b343fc1022218563beb6906a08cb3-228x131.png 228w, /uploads-archive/2016/04/110b343fc1022218563beb6906a08cb3.png 831w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<p>  ここで Ctrl+a を押す！すると！<br />
<a href="/uploads-archive/2016/04/ba3007594f18c7991a91c1c46e388d4a.png" rel="attachment wp-att-10269"><img decoding="async" loading="lazy" src="/uploads-archive/2016/04/ba3007594f18c7991a91c1c46e388d4a-300x176.png" alt="スクリーンショット 2016-04-05 17.55.49" width="300" height="176" class="alignnone size-medium wp-image-10269" srcset="/uploads-archive/2016/04/ba3007594f18c7991a91c1c46e388d4a-300x176.png 300w, /uploads-archive/2016/04/ba3007594f18c7991a91c1c46e388d4a-768x450.png 768w, /uploads-archive/2016/04/ba3007594f18c7991a91c1c46e388d4a-228x134.png 228w, /uploads-archive/2016/04/ba3007594f18c7991a91c1c46e388d4a.png 844w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<p>  そして再びqを押してレコーディング終了です。</p>
<p>  では、スタートを3でやってみましょう。<br />
<a href="/uploads-archive/2016/04/4bdba9bd943839c289532d2586e600ff.png" rel="attachment wp-att-10270"><img decoding="async" loading="lazy" src="/uploads-archive/2016/04/4bdba9bd943839c289532d2586e600ff-300x184.png" alt="スクリーンショット 2016-04-05 17.56.45" width="300" height="184" class="alignnone size-medium wp-image-10270" srcset="/uploads-archive/2016/04/4bdba9bd943839c289532d2586e600ff-300x184.png 300w, /uploads-archive/2016/04/4bdba9bd943839c289532d2586e600ff-768x471.png 768w, /uploads-archive/2016/04/4bdba9bd943839c289532d2586e600ff-228x140.png 228w, /uploads-archive/2016/04/4bdba9bd943839c289532d2586e600ff.png 891w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<p>  さらにここからがポイント。<br />
  10@a<br />
  と入力してReturnキーを押下！<br />
<a href="/uploads-archive/2016/04/39252324e310b79aaeea1fcbfe28c0a5.png" rel="attachment wp-att-10271"><img decoding="async" loading="lazy" src="/uploads-archive/2016/04/39252324e310b79aaeea1fcbfe28c0a5-300x193.png" alt="スクリーンショット 2016-04-05 17.57.40" width="300" height="193" class="alignnone size-medium wp-image-10271" srcset="/uploads-archive/2016/04/39252324e310b79aaeea1fcbfe28c0a5-300x193.png 300w, /uploads-archive/2016/04/39252324e310b79aaeea1fcbfe28c0a5-228x147.png 228w, /uploads-archive/2016/04/39252324e310b79aaeea1fcbfe28c0a5.png 754w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<p>  10回分、インクリメント(連番増加)された行が増えましたね。<br />
  アットマーク前が実行回数、最後のaはマクロに登録した文字と言う意味です。</p></div>


vimの小技紹介

<h3>スプレッドシートのスクリプト活用方法紹介</h3>
<div style="padding-left: 15px;">
  <a href="https://developers.google.com/apps-script/">GAS(Google Apps Script)</a>で実現出来る手軽なシート活用方法です。</p>
<p>  課題管理などを更新日を入れ忘れてどれが最新か解らなくなったことは無いでしょうか？</p>
<p>  GASを活用すれば、そんな記載漏れからおさらば出来ます！</p></div>
<h3>具体的な例</h3>
<div style="padding-left: 15px;">
  スプレッドシートを開いた状態で上部のメニューから<br />
  「ツール」「スクリプトエディタ」<br />
  を選択してください。</p>
<p>  すると新しいウィンドウが出てきます。<br />
  エクセルで言うところのVBAマクロエディタのようなものです。<br />
  (実際はVBAほど実行範囲は広くありません)</p>
<p>  「コード.gs」というスクリプトがデフォルトで表示されています。<br />
  右側のペインのテキストエリアに以下のように入力してみましょう。</p>
<p></p>

		<div id="crayon-649540263b44f887222715" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover wrap" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 18px !important;">
		
			<div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><span class="crayon-title"></span>
			<div class="crayon-tools" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div><span class="crayon-language">JavaScript</span></div></div>
			<div class="crayon-info" style="min-height: 19.5px !important; line-height: 19.5px !important;"></div>
			<div class="crayon-plain-wrap"><textarea  class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 13px !important; line-height: 18px !important;">
  function onEdit(event){
    var ss = event.source.getActiveSheet(); //編集したシート
    var us = Session.getActiveUser().getEmail(); //編集者のメールアドレス

    if (ss.getName() == "課題管理") {
      var Row;
      Row = ss.getActiveCell().getRow();
      Col = ss.getActiveCell().getColumn();
      if(Row&gt;2 &amp;&amp; Col &lt; 9 &amp;&amp; Col &gt; 2){ //2行目までがタイトルヘッダーなので
        ss.getRange(Row, 10).setValue(new Date()); // JカラムにDateを突っ込みます
      }
    }
  }</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 13px !important; line-height: 18px !important;"><div class="crayon-num" data-line="crayon-649540263b44f887222715-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540263b44f887222715-2">2</div><div class="crayon-num" data-line="crayon-649540263b44f887222715-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540263b44f887222715-4">4</div><div class="crayon-num" data-line="crayon-649540263b44f887222715-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540263b44f887222715-6">6</div><div class="crayon-num" data-line="crayon-649540263b44f887222715-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540263b44f887222715-8">8</div><div class="crayon-num" data-line="crayon-649540263b44f887222715-9">9</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540263b44f887222715-10">10</div><div class="crayon-num" data-line="crayon-649540263b44f887222715-11">11</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540263b44f887222715-12">12</div><div class="crayon-num" data-line="crayon-649540263b44f887222715-13">13</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 13px !important; line-height: 18px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-649540263b44f887222715-1"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-t">function</span><span class="crayon-h"> </span><span class="crayon-e">onEdit</span><span class="crayon-sy">(</span><span class="crayon-i">event</span><span class="crayon-sy">)</span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540263b44f887222715-2"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-i">ss</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-i">event</span><span class="crayon-sy">.</span><span class="crayon-i">source</span><span class="crayon-sy">.</span><span class="crayon-e">getActiveSheet</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span><span class="crayon-h"> </span><span class="crayon-c">//編集したシート</span></div><div class="crayon-line" id="crayon-649540263b44f887222715-3"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-i">us</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-i">Session</span><span class="crayon-sy">.</span><span class="crayon-e">getActiveUser</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-e">getEmail</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span><span class="crayon-h"> </span><span class="crayon-c">//編集者のメールアドレス</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540263b44f887222715-4">&nbsp;</div><div class="crayon-line" id="crayon-649540263b44f887222715-5"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-st">if</span><span class="crayon-h"> </span><span class="crayon-sy">(</span><span class="crayon-i">ss</span><span class="crayon-sy">.</span><span class="crayon-e">getName</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-h"> </span>==<span class="crayon-h"> </span><span class="crayon-s">"課題管理"</span><span class="crayon-sy">)</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540263b44f887222715-6"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-i">Row</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-649540263b44f887222715-7"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-i">Row</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-i">ss</span><span class="crayon-sy">.</span><span class="crayon-e">getActiveCell</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-e">getRow</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540263b44f887222715-8"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-i">Col</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-i">ss</span><span class="crayon-sy">.</span><span class="crayon-e">getActiveCell</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-e">getColumn</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-649540263b44f887222715-9"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-st">if</span><span class="crayon-sy">(</span><span class="crayon-i">Row</span><span class="crayon-h">&gt;</span><span class="crayon-cn">2</span><span class="crayon-h"> </span><span class="crayon-sy">&amp;&amp; Col &lt; 9 &amp;&amp; Col &gt; 2){ //2行目までがタイトルヘッダーなので</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540263b44f887222715-10"><span class="crayon-sy">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ss.getRange(Row, 10).setValue(new Date());</span><span class="crayon-h"> </span><span class="crayon-c">// JカラムにDateを突っ込みます</span></div><div class="crayon-line" id="crayon-649540263b44f887222715-11"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">}</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540263b44f887222715-12"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-649540263b44f887222715-13"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-sy">}</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p> </p>
<p>  上の例だと列の番号がベタ書き(数字をそのまま直接書いて)しています。</p>
<p>  内容は<br />
  「編集したシートが」「&#8221;課題管理&#8221;と言う名前なら」<br />
  かつ<br />
  「編集したセルが」「2行目以降」かつ「3列目から8列目までの範囲」<br />
  の時、<br />
  「編集したセルの」「10列目に」「現在の時刻を」「代入する」<br />
  です。</p>
<p>  これだけでは何も動きません。</p>
<p>  上部メニューから<br />
  「リソース」「現在のプロジェクトのトリガー」<br />
  を選択すると以下の様なダイアログが表示されます。<br />
<a href="/uploads-archive/2016/04/c505062ae4aaeea195260000a8cc2544.png" rel="attachment wp-att-10250"><img decoding="async" loading="lazy" src="/uploads-archive/2016/04/c505062ae4aaeea195260000a8cc2544-300x92.png" alt="スクリーンショット 2016-04-05 17.41.29" width="300" height="92" class="alignnone size-medium wp-image-10250" srcset="/uploads-archive/2016/04/c505062ae4aaeea195260000a8cc2544-300x92.png 300w, /uploads-archive/2016/04/c505062ae4aaeea195260000a8cc2544-768x236.png 768w, /uploads-archive/2016/04/c505062ae4aaeea195260000a8cc2544-228x70.png 228w, /uploads-archive/2016/04/c505062ae4aaeea195260000a8cc2544.png 896w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<p>  参照画像の例だと<br />
  「onEditという関数を」「スプレッドシートの」「値が変更された時」<br />
  に実行されるという内容となります。</p>
<p>  つまりイベントに対して自分の好きな命令をGASが定めた範囲内で自由に自動化出来るという仕組みです。</p></div>

スプレッドシート管理の小技紹介

<p>JavaScriptのエラーが発生した場合、エラーを通知してくれるChromeの拡張機能の紹介です。<br />
Chromeを使用していれば、JavaScriptのエラーが発生した際に、コンソールに表示してくれるのですが、コンソールを開かない限り気づくことができません。<br />
そこで、JavaScript Errors Notifierという拡張機能を追加すると、コンソールを開かなくても、ツールバーや画面の右下にエラーを通知してくれます。</p>
<h2>追加方法</h2>
<p><a href="https://chrome.google.com/webstore/detail/javascript-errors-notifie/jafmfknfnkoekkdocjiaipcnmkklaajd/related?hl=ja" class="link">JavaScript Errors Notifier</a><br />
にて、追加する。</p>
<h2>使用例</h2>
<p>下のような形でエラーを通知してくれます。<br />
 &#8211; ツールバー上：<br />
<a href="/uploads-archive/2016/04/28792698317dd3d510fa90ee302bde1f.png" rel="attachment wp-att-10230"><img decoding="async" loading="lazy" src="/uploads-archive/2016/04/28792698317dd3d510fa90ee302bde1f-300x52.png" alt="スクリーンショット 2016-04-05 17.20.34" width="300" height="52" class="alignnone size-medium wp-image-10230" srcset="/uploads-archive/2016/04/28792698317dd3d510fa90ee302bde1f-300x52.png 300w, /uploads-archive/2016/04/28792698317dd3d510fa90ee302bde1f-228x40.png 228w, /uploads-archive/2016/04/28792698317dd3d510fa90ee302bde1f.png 389w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<p> &#8211; 画面右下：<br />
<a href="/uploads-archive/2016/04/cfc05b21b03413488632549b51866111.png" rel="attachment wp-att-10231"><img decoding="async" loading="lazy" src="/uploads-archive/2016/04/cfc05b21b03413488632549b51866111.png" alt="スクリーンショット 2016-04-05 17.20.55" width="193" height="169" class="alignnone size-full wp-image-10231" /></a></p>
<h2>補足</h2>
<p>以前に作られて以降、アップデートは行われていなかったのですが、今年に入ってから開発が行なわれているようです。<br />
<a href="https://github.com/barbushin/javascript-errors-notifier" class="link">barbushin/javascript-errors-notifier</a></p>
<p>Angular.jsのエラーにも対応してきているようです。</p>


JavaScript Errors Notifier

<p>花びらが散る様子を表現する方法としてはいくつかあるようですが、今回はシミュレーションのパーティクルとモディファイアを使用して制作してみました。</p>
<p>ちなみに事前に桜の木と花びらのオブジェクトがある前提の説明になります。</p>
<h2>エミッタから花びらを出す</h2>
<p>エミッタから花びらが出すための設定です。</p>
<p>まず花びらのオブジェクトをエミッタの子にします。</p>
<p><a href="/uploads-archive/2016/04/1.gif" rel="attachment wp-att-10225"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-10225" src="/uploads-archive/2016/04/1.gif" alt="1" width="284" height="60" /></a></p>
<p>エミッタ（吹き出し口）の角度を下向きにして、エミッタの「パーティクル」から「進行方向を向く」と「エディタにオブジェクトを表示」にチェックを入れます。その他の要素については必要に応じて変更してみてください。</p>
<p>次にエミッタのサイズと位置を木のオブジェクトに合わせて調整します。</p>
<h2>風モディファイアを設定する</h2>
<p>花びらが風に乗って散る様子を表現するために風のモディファイアを使います。</p>
<p>モディファイアを効かせるためにはエミッタの「含む」にモディファイアをドラッグ&amp;ドロップしてあげればOKです。モディファイアを複数使用する場合には「含む」の上から順番に効いていきます。</p>
<p><a href="/uploads-archive/2016/04/2.gif" rel="attachment wp-att-10242"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-10242" src="/uploads-archive/2016/04/2.gif" alt="2" width="312" height="204" /></a></p>
<p>風モディファイアの「オブジェクト」で風速をいじって花びらが風に流される強さを調整します、タービュランスを少し上げると単純な直線上に吹く風ではなく、実際の気流のように曲線を描く風を吹かせる事ができます。モードは加速度で良いかと思います。</p>
<h2>重力モディファイアを設定する</h2>
<p>風だけですと花びらが舞う感じがあまり出ませんので重力を追加します。先ほど同様にエミッタの「含む」に追加します。</p>
<p><a href="/uploads-archive/2016/04/3.gif" rel="attachment wp-att-10244"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-10244" src="/uploads-archive/2016/04/3.gif" alt="3" width="276" height="136" /></a></p>
<p>「オブジェクト」の重力加速度を低めに調整して軽い物が落ちるようにします。</p>
<h2>シミュレーションにスプラインを使った動きを追加する</h2>
<p>花びらが散るようなシミュレーションの場合、来てほしい位置や角度にタイミングよく花びらが来てくれません。アニメーションを走らせる度に異なるので、カメラ前に1枚だけ丁度良く来てほしいなどの演出は狙い通りになりません。</p>
<p>こういう場合は「スプラインに沿う」のタグを使うなどして、狙い通りにオブジェクト（花びら）を動かしてあげる必要がります。</p>
<p>自然に見せるのがなかなか難しいので、スプラインの引き方など工夫が必要です。</p>
<h2>出来上がり</h2>
<p>花びらがヒラヒラする感じが足りないのと、花びらが落ちる速度が速すぎました。次はMographなど他の方法も試してみようと思います。</p>
<div style="width: 720px;" class="wp-video"><video class="wp-video-shortcode" id="video-10216-7" width="720" height="404" preload="metadata" controls="controls"><source type="video/mp4" src="/uploads-archive/2016/04/sakura_final2.mp4?_=7" /><a href="/uploads-archive/2016/04/sakura_final2.mp4">/uploads-archive/2016/04/sakura_final2.mp4</a></video></div>
<p>&nbsp;</p>


CINEMA4D　桜が散るシーンを作ってみた

<p>「あらゆる Web ページを友達とともに即座にブラウジングできます。」</p>
<p>というキャッチコピーで、webページの共有が出来るサービスがいつの間にかFirefoxに追加されていました。</p>
<p>その名も「<a href="https://www.mozilla.org/ja/firefox/hello/" target="_blank">Firefox Hello</a>」。</p>
<p>skypeの画面共有みたいな感じでしょうか？</p>
<p>ブラウザにもしれっとアイコンが追加されていました。</p>
<p><img decoding="async" loading="lazy" class="alignnone size-full wp-image-10212" src="/uploads-archive/2016/04/726b7e2b9a87490fbc1e61b5bd9d4714.png" alt="スクリーンショット 2016-04-05 15.43.23" width="196" height="112" /></p>
<p>ニコちゃんマークみたいなやつです。</p>
<p>ログイン等は必要なく、Firefoxをインストールしていれば使えるようです。<br />
(相手がFirefoxを使っていなくてもできるとのこと！)<br />
※カメラやマイクがないと無理そうかも・・・</p>
<p>開始する方法は、<br />
<strong>・URLを相手に送る</strong><br />
<strong>・Facebookメッセージで送る</strong><br />
の2つで、アイコンをクリックすると、<br />
「このページを共有しますか？」的なメッセージが表示されるので、<br />
そちらをクリックすると以下の様な画面になります。</p>
<p>開始するときの画面はこちら↓<br />
<a href="/uploads-archive/2016/04/16a2123400bf9dbc1d2f521c47d16438-1024x704.png" class="modal"><img decoding="async" class="alignnone size-large wp-image-10213" src="/uploads-archive/2016/04/16a2123400bf9dbc1d2f521c47d16438-1024x704.png" alt="スクリーンショット 2016-04-05 15.49.38" width="640" srcset="/uploads-archive/2016/04/16a2123400bf9dbc1d2f521c47d16438-1024x704.png 1024w, /uploads-archive/2016/04/16a2123400bf9dbc1d2f521c47d16438-300x206.png 300w, /uploads-archive/2016/04/16a2123400bf9dbc1d2f521c47d16438-768x528.png 768w, /uploads-archive/2016/04/16a2123400bf9dbc1d2f521c47d16438-228x157.png 228w, /uploads-archive/2016/04/16a2123400bf9dbc1d2f521c47d16438.png 1221w" sizes="(max-width: 1024px) 100vw, 1024px" /></a></p>
<p>webカメラでお互いを映しながら同じページを閲覧するようです。<br />
Skypeとはまた少し違う感じですね。</p>
<p>僕らの業界では結構webサイトを見ながらなんて事が多いかと思うので、<br />
もしかしたらskypeよりいいかもしれませんね。<br />
ただ、開始するのがskypeよりひと手間かかります。</p>
<p>これを使えば、遠隔で、<br />
webサイトの使い方を教えたり、<br />
一緒の旅行サイトを見たり、<br />
ECサイトみたり、<br />
ぐるなびとか食べログみたり、<br />
いろいろ同じものを見ながら決められそうですね！<br />
(skypeでも出来るか・・・)</p>
<p>今はまだBeta版みたいなので、今後どのように機能が追加されていくか楽しみですね！</p>
<p><a class="link" href="https://www.mozilla.org/ja/firefox/hello/" target="_blank">Firefox Hello — 友達と一緒に Web ブラウジング — Mozilla</a></p>


あらゆる Web ページを友達とともに即座にブラウジングできる「Firefox Hello」

<p>前回に引き続き、ECについて</p>
<h2>中国で新制度 開始</h2>
<p>中国の財政部は越境ECに関する税制度改革を断行し、4月8日から新たな制度をスタートさせることを公表しました。その新制度というのは、中国の消費者が越境ECサイトで商品を購入した場合「しっかり税金を徴収すること」というもの。</p>
<p>この新制度は商品によって実質増税になったり、減税になったりするケースが生まれるらしいですが「税制度改革＝中国向けECが冷え込む」なんて悲観的な考えではありません。どちらかというと、<strong>中国政府自身が越境ECという新たなビジネスを活用し、税関の検閲がきちんと届く範囲内で暫定的に海外商品を国内に流通させる仕組みを提供する</strong>という思惑があるからです。</p>
<p>つまり中国政府が「越境ECに力を入れていく」と宣言したのだと思います。</p>
<h2>越境EC税制変更のポイント</h2>
<p>・1度の購入金額上限を2000元まで引き上げ（現状は1000元）　2000元＝約34,542円（4月4日時点）<br />
・1人の年間購入金額の上限は2万元（現状通り）<br />
・購入金額の上限以下の購入商品に関し関税率は0％とする。ただし、上限金額を超える場合は一般貿易と同じ税率を適用する。<br />
・輸入に関する増値税を30％減額し、すべてに適用（増値税17％×70＝11.9％）<br />
・消費税がかかる場合（商品によっては消費税がかかるケースがある）、30％減額で適用する（消費税30％の商品の場合、30％×70％＝21％）<br />
・行郵税を廃止し、現状の個人輸入関税50元までの免税措置を廃止</p>
<p>行郵税が廃止され、免税範囲がなくなることが大きな変更点となります。商品によっては実質減税となったり増税となったりします。</p>
<h2>現状の運用状況</h2>
<p>「行郵税」やら「増値税」など中国の税制度には、日本人になじみのないワードがあります。言葉を解読すると、主に中国では物販（海外からの輸入）において下記の税金が発生します。</p>
<table style="height: 150px;" width="1188">
<tbody>
<tr>
<td>税の種類</td>
<td>内容</td>
</tr>
<tr>
<td> 関税</td>
<td> 中国に輸入される商品に対して中国政府より課せられる税金。いわゆる一般的な関税。</td>
</tr>
<tr>
<td>増値税</td>
<td>流通段階で商品に対して課税される税金。 日本でいう消費税に当たるもの。</p>
<p>増値税は基本税率が17％となっています。</p>
<p>（生活インフラの穀物、食用油などの特定の品目への増値税には低減税率13％が適用される）</td>
</tr>
<tr>
<td>消費税</td>
<td>特定の嗜好品や贅沢品に対して、工場出荷時か輸入時に課税される税金。品目によって3％～45％が課税される。</p>
<p>ちなみに、越境ECなどで売れ筋のカテゴリである化粧品は30％の消費税がかかる。</p>
<p>日本の酒税などに類似する、一部の「贅沢品」だけにかかる特別税。</td>
</tr>
<tr>
<td>行郵税</td>
<td>個人携帯輸入物品（個人が海外から買ってきたもの）や個人輸入輸送品（個人輸入したもの）に対して課税される税金。</p>
<p>商品ジャンルにより10％～50％が課税。</p>
<p>今の越境ECではこの行郵税が課税の基本となっている。</td>
</tr>
</tbody>
</table>
<p>以上が必要なワード。これらを踏まえて現状の体制を解説 ↓</p>
<p>中国向けに商品を送る場合は「一般貨物」「個人輸入」の2通りに分類されます。「一般貨物」は、企業から企業に荷物を送る、「個人輸入」は中国の消費者が海外のECサイトで購入というイメージ。</p>
<p>1. 一般貨物の場合･･･貿易としての扱いとなり、中国に輸入する際は「関税」「消費税」「増値税」の3種類の税金が課せられる。商品検査、植物検査、衛生検査を受ける必要があります。</p>
<p>2. 個人輸入の場合･･･郵便物や手荷物などに対する管理が対象。「行郵税」が課せられる。自己使用や合理的な数量ではないと判断された場合は、貨物としての扱いとなる。</p>
<p>一般貨物の場合、多くのケースで中間流通分のマージンが販売価格に転嫁されます。「関税」「消費税」「増値税」に加えて、流通分のコストなどが上乗せされるので、最終的には越境ECで購入した方が安い、という構図になっています。また、課税額が50元以下であれば免税になるという規定もあり、「一般貨物」と「個人輸入」の価格差が生じていました。そのため、以下の内容で越境ECの税制改革が始まるようになりました。</p>
<blockquote><p>越境ECの取引は貿易の属性が備わっており、「行郵税」を徴収しても全体的な税負担が、国内販売されている一般貿易輸入貨物や国産貨物の税負担レベルより も低い。不公平な競争を形成した。これにより、政策として越境EC小売輸入商品に対して貨物に応じて「関税」「増値税」「消費税」を徴収する。（<strong>中国の財政部の発表を要約</strong>）</p></blockquote>
<h2>気になる影響は？</h2>
<p>1.新制度で今までよりも減税となるジャンルに関しては、販売が伸びるので購入上限の引き上げも好影響</p>
<p>2.低価格商品は実質増税となりますが、一般貿易に課せられる税率とは差があるため、引き続き越境ECのメリットは大きい</p>
<p>3.直送モデル（EMS）は、取引限度額が上がったことにより個人輸入貨物の検査が強化されることが考えられるので、すべての越境ECの流通に対して課金が可能になる。より直送商品に対する課税（検査）が厳しくなる可能性が浮上</p>
<p>4.保全区の活用から直送モデルに一部シフトするという見方もあり。だが2016/6/1から、中国向けEMSの料金値上げなどもあるため、保全区活用から直送へシフトするとは考えにくい</p>
<p>5.一般貿易と関税の課税に関しての差は縮まったが、それ以外の「商品申請費用」「申請資料」の作成の手間、「中間流通業者利益」などを考えるとまだまだ越境ECモデルの方が有利。今まで通り、直送に加え、保全区を活用した越境商品は流通量が拡大すると考えられる</p>
<p>参考資料　<a href="https://netshop.impress.co.jp/node/2808" target="_blank">【詳報】中国でついに始まる越境ECの新税収制度。増税? 減税? 日本企業への影響は?</a></p>
<p>越境EC特化運用カートシステム　<a href="http://launchcart.jp/" target="_blank">Launchcart</a></p>


新しく始まる越境ECの新税収制度は日本企業への影響はあるのか

<h3>2038年問題とは</h3>
<div style="padding-left: 15px;">
<a href="/uploads-archive/2016/03/bokan.jpg" rel="attachment wp-att-10172"><img decoding="async" loading="lazy" src="/uploads-archive/2016/03/bokan-150x150.jpg" alt="bokan" width="150" height="150" class="alignnone size-thumbnail wp-image-10172" /></a></p>
<p><a href="/uploads-archive/2016/03/0b9e6668fe87cec06e4d85b7a5e29221.jpg" rel="attachment wp-att-10174"><img decoding="async" loading="lazy" src="/uploads-archive/2016/03/0b9e6668fe87cec06e4d85b7a5e29221.jpg" alt="Bannière-Unix-linux" width="960" height="370" class="alignnone size-large wp-image-10174" srcset="/uploads-archive/2016/03/0b9e6668fe87cec06e4d85b7a5e29221.jpg 960w, /uploads-archive/2016/03/0b9e6668fe87cec06e4d85b7a5e29221-300x116.jpg 300w, /uploads-archive/2016/03/0b9e6668fe87cec06e4d85b7a5e29221-768x296.jpg 768w, /uploads-archive/2016/03/0b9e6668fe87cec06e4d85b7a5e29221-228x88.jpg 228w" sizes="(max-width: 960px) 100vw, 960px" /></a><br />
  現在色んなサイトを見ることが出来るサーバーの多くは<br />
  UNIXというOSをベースにしたLinuxに属するマシンの中で動いています。</p>
<p>  UNIXはC言語というプログラミング言語で組まれており<br />
  このC言語に限らず、多くの(当初の)プログラミング言語では<br />
  時間の基点を1970年1月1日0時0分0秒となっています。</p>
<p>  2038年1月19日を過ぎた時点で、この「経過時間」を表すことが32bitでは不可能となるのが原因です。</p>
<p>  32bitとは、今でも稼働しているPCのCPUが一回の処理で演算できる単位量です。<br />
  32bit=2^32 です。つまり (2^31 = 2,147,483,648)です。</p>
<p>  同時に1970年1月1日0時0分0秒からの経過時刻が、これを超えると0に戻ってしまうのです。</p></div>
<h3>対策とか</h3>
<div style="padding-left: 15px;">
<a href="/uploads-archive/2016/03/32-64.jpeg" rel="attachment wp-att-10171"><img decoding="async" loading="lazy" src="/uploads-archive/2016/03/32-64-150x150.jpeg" alt="32-64" width="150" height="150" class="alignnone size-thumbnail wp-image-10171" /></a><br />
  簡単(？)な対策は、この世の全てのマシンを64bitOSにすることです。</p>
<p>  厳密には32bitOSでもOSの基底部分(カーネル)を、それに対応させたものに書き換えれば<br />
  数十年は先までしのげるとの説もあります。(理論上は確かに出来そうだけど&#8230;)</p>
<p>  ただし、64bitOSとマシンが普及したとしても他の周辺機器のドライバ問題(例えばどうしても使いたい古い機器)や、<br />
  32bitで作られているアプリケーションが残り続けること。<br />
  安定性や今までの普及性によって32bitの方が使いやすいアプリケーションは現在も色々とあります。</p>
<p>  あと20余年の間に、そのような移行が問題なく実施されるかは実際にその節目に合わないと解らないかと思います。</p></div>
<h3>余談</h3>
<div style="padding-left: 15px;">
  古いバージョンの(所謂)Web言語(PHP 5.1.x系など)は、対応出来ていないようです。</p>
<p>  古いインフラにずっと固執している企業などはどうなるのか。。若干その辺りが心配です。</p>
<p>  2000年問題の時のように、特に大きな問題なく過ぎるといいのですが・・・と言った共有の日記です。</p></div>


2038年問題の共有

Oracle 11gでキャラクタセットをSJISに変更する

<p>よく久しぶりに会う友人などに「今、なんの仕事してんの？」と聞かれたとき、私は「ECサイトに関わった仕事してるよ」など答えるのですが、決まって言われる台詞は</p>
<p><strong>「ECサイトって何？」</strong>　です。</p>
<p>一般的にまずECという言葉自体が聞きなれないのかもしれないと思ったので今回の題材は「ECサイト」にしました。</p>
<h2>ECサイトって何？</h2>
<blockquote><p>ECサイトとは、Eコマース（EC）のサービスを提供するWebサイトの通称である。オンラインショップやウェブストアなどと呼ばれることも多い。</p>
<p>ECサイトの多くは商品説明、ショッピングカート、決済システムなどが備えられており、Webサイト上で商品の購入、発注などが行えるようになっている。いわゆるネット通販を提供するオンラインショップや、音楽や動画などのネットワーク配信、インターネットバンキングなどを提供するサービスもECサイトに含まれる。</p></blockquote>
<p>正直、そんなに難しい説明は出来ないので簡単に「通信販売ですね」と答える事が多いです。</p>
<p>それを聞いた人が次に返してくる言葉は「楽天とか？」</p>
<p>使用した事がある方もたくさんいらっしゃると思いますが、インターネットには様々なショッピングモールがあります。その一つが有名な”楽天市場”、その他にもyahooモール、Amazon、ポンパレ…など数えきれない程の出店型や出品型などのモールサービスがあります。</p>
<p>これらもECサイト。また知名度も高く利用者数もかなり多いので、ここに出店する店舗はとても多いです。後は、独自店舗でECサイトを開くことが出来ます。そう考えると今ではインターネットでお店を持つなんて簡単かも…？</p>
<p>個人的にECサイトを開こうと思えば開けるこの時代ですから、どこに出店または出品したら良いか見極めてぜひトライしてみるのも良いと思いますよ。</p>
<h2>自分のお店や商品の世界展開も夢ではない「LaunchCart」</h2>
<p>弊社でも　<strong>世界へ</strong>　展開できるカートシステムをEC事業として展開しています。</p>
<p><a href="/uploads-archive/2016/03/launchcart-e1459240586673.jpg" rel="attachment wp-att-10124"><img decoding="async" loading="lazy" src="/uploads-archive/2016/03/launchcart-e1459240586673.jpg" alt="launchcart" width="600" height="377" class="alignnone size-full wp-image-10124" /></a></p>
<p>左カラムにもご紹介させて頂いておりますが、せっかくなので<a href="http://launchcart.jp/">こちら</a>からも飛べるようにしておきます(笑)</p>
<p>LaunchCartは、中国に強く越境ECに特化したシステムとなっております。さらに、中国などに出店・出品した事がない方にもうれしいマーケティングサポートがついているプランもあります。</p>
<p>（LaunchCartの紹介ブログを株式会社LIGさんに書いていただきました⇒　<a href="http://liginc.co.jp/254637">【1兆円市場がみえてきた中国越境EC】始める前に知っておきたいリスクと対策</a>）</p>
<p>さあ、ここでまた新しい言葉が出てきましたね。そうです！「越境EC」です！これは私も弊社で初めて聞いた言葉だったので、ついどういう意味か調べてしまいました、雰囲気でなんとなく分かりますけどね(笑)</p>
<h2>越境ECって何？</h2>
<blockquote><p>越境EC（えっきょうイーシー）とは、国際的な電子商取引のことである。 ECとは&#8221;electronic commerce&#8221;（エレクトロニックコマース=電子商取引）の略。 クロスボーダーECとも呼ばれることがある。</p></blockquote>
<p>越境は、境界線を越えることや国境を超えることを意味しています。その越境がECとつながる事で簡単に言えば「国際的な通信販売」みたいな感じですね。この越境ECの凄いところは、経済産業省が消費国としての推計市場規模を試算したところ、2014年から2018年までの間に日本は約1.4倍、米国は約1.6倍、中国は約2.3倍の規模になると推計されているのです。</p>
<p>日米中3カ国間における越境ECの購入総額合計（日本円換算）で見てみると、2020年までに約4.1兆円にまで拡大する可能性も秘めている…とか…（額が大きすぎてあまり私はパッとしていませんが）</p>
<p>これからも国の境界を越えて、ECがよりグローバル化していくことでしょう。</p>
<h2>まとめ</h2>
<p>ざっくりではありますがECサイトについてちょっと知ってもらうことが出来ましたでしょうか。私もまだまだ勉強することがありますので、また何か深いな～～～！なんて思う事があったらブログで紹介したいと思います。もうずっとそう思いっぱなしなんですけどね(笑)</p>
<p>EC業界について詳しく書かれている本がありましたので、ご興味あればぜひ。</p>
<p><a href="http://www.amazon.co.jp/2015%E5%B9%B4%E3%81%AEEC%E6%A5%AD%E7%95%8C%E3%82%92%E7%B7%8F%E3%81%BE%E3%81%A8%E3%82%81-EC%E6%A5%AD%E7%95%8C%E5%A4%A7%E5%9B%B3%E9%91%91-%E7%9B%A3%E4%BF%AE%E8%80%85-%E7%B7%A8%E8%91%97%E8%80%85-EC%E3%81%AE%E3%83%9F%E3%82%AB%E3%82%BF/dp/4286159361" target="_blank">2015年のEC業界を総まとめ! ! 最新 EC業界大図鑑</a></p>


「ECサイト」という言葉の認知度が一部の層で低い件について

<p>こちらの「Bootstrap Editor」はブラウザで使用できるエディタで、<br />
Bootstrapをベースにしたサイトを制作するのに適したツールになります。</p>
<p>このツール自体もBootstrapを元に作成されてますね！！</p>
<p>Bootstrap自体、CSSのフレームワークとして有名で比較的簡単に、カッコイイデザイン、レイアウトを実装することができるツールです。</p>
<p>ただし、Bootstrap自体の記述ルールみたいなものがあり、使いはじめるには少し学習しないといけません。</p>
<p>初心者やエンジニア向けのBootstrapですが(個人の見解です笑)、ちょっと手間がかかってしまいます。</p>
<p>しかし、この「Bootstrap Editor」は、ブラウザ上でコードの編集ができ、結果も右に即時反映されますので直ぐに使用することができます！！</p>
<p>さらに、テンプレートも用意されているのでそのまま作るのはもちろん、ローカルで作っているコードに、「Bootstrap Editor」で呼び出したテンプレートの一部を持ってきたりとかいろんな使い方ができますね。</p>
<h2>Bootstrapの使い方</h2>
<p><img decoding="async" src="/uploads-archive/2016/03/Bootstrap-Editor.jpg" alt="Bootstrap Editor" width="640" class="alignnone size-full wp-image-10125" srcset="/uploads-archive/2016/03/Bootstrap-Editor.jpg 994w, /uploads-archive/2016/03/Bootstrap-Editor-300x221.jpg 300w, /uploads-archive/2016/03/Bootstrap-Editor-768x566.jpg 768w, /uploads-archive/2016/03/Bootstrap-Editor-228x168.jpg 228w" sizes="(max-width: 994px) 100vw, 994px" /></p>
<p><a href="http://www.venezia-works.com/bst/index.html" target="_blank">Bootstrap Editor</a>を開き、「Let&#8217;s Start」ボタンを押します。</p>
<p>それだけでもう使えます！</p>
<p><img decoding="async" src="/uploads-archive/2016/03/Bootstrap-Editor2-1024x689.jpg" alt="Bootstrap Editor2" width="640" class="alignnone size-large wp-image-10126" srcset="/uploads-archive/2016/03/Bootstrap-Editor2-1024x689.jpg 1024w, /uploads-archive/2016/03/Bootstrap-Editor2-300x202.jpg 300w, /uploads-archive/2016/03/Bootstrap-Editor2-768x517.jpg 768w, /uploads-archive/2016/03/Bootstrap-Editor2-228x153.jpg 228w, /uploads-archive/2016/03/Bootstrap-Editor2.jpg 1268w" sizes="(max-width: 1024px) 100vw, 1024px" /></p>
<p>あとはこの画面でLet&#8217;s コーディングです！！</p>
<h2>Bootstrapの機能</h2>
<p>主な機能は以下になります。</p>
<p><a href="#menu01">１．CODE</a><br />
エディタの色を選択（Emmet使用可能）</p>
<p><a href="#menu02">２．Template</a><br />
Bootstrapテンプレートを選択</p>
<p><a href="#menu03">3. Nomal(Theme)</a><br />
Bootstrapテンプレートの色(Theme)を選択</p>
<p><a href="#menu04">４．Live View</a><br />
編集中のCODEをプレビュー（PC,Tablet,Phone,CodeOnry）</p>
<p><a href="#menu05">５．Save/Open</a><br />
「Save」は編集中のデータを一時保存します。「Open」は保存データを再表示します。</p>
<p><a href="#menu06">６．Download</a><br />
編集中データをHTMLファイルダウンロード</p>
<h3 id="menu01">CODE</h3>
<p><img decoding="async" src="/uploads-archive/2016/03/Bootstrap-Editor3-1024x714.jpg" alt="Bootstrap Editor3" width="640" class="alignnone size-large wp-image-10117" srcset="/uploads-archive/2016/03/Bootstrap-Editor3-1024x714.jpg 1024w, /uploads-archive/2016/03/Bootstrap-Editor3-300x209.jpg 300w, /uploads-archive/2016/03/Bootstrap-Editor3-768x536.jpg 768w, /uploads-archive/2016/03/Bootstrap-Editor3-228x159.jpg 228w, /uploads-archive/2016/03/Bootstrap-Editor3.jpg 1153w" sizes="(max-width: 1024px) 100vw, 1024px" /><br />
コードを書くスタイルを、Chrome,github,tommorrow_night_bright,dreamweaverから選択できます。</p>
<h3 id="menu02">Template</h3>
<p>テンプレートが予め用意されていますので、それを元にコーディングを開始することができます。<br />
テンプレートの一部分のパーツをコピーして使うという方法もいいですね！</p>
<p><img decoding="async" src="/uploads-archive/2016/03/ibLdlBsdRf.gif" alt="ibLdlBsdRf" width="640" class="alignnone size-large wp-image-10118" /></p>
<h3 id="menu03">Nomal(Theme)</h3>
<p>サイトに色（テーマ）を変更することができます。豊富に用意されています。<br />
<img decoding="async" src="/uploads-archive/2016/03/oQN8i8LUAg.gif" alt="oQN8i8LUAg" width="640"class="alignnone size-large wp-image-10119" /></p>
<p>ちなみに、<a href="https://bootswatch.com/">Bootswatch: Free themes for Bootstrap</a>のテーマを使用しているようです。テーマのサイトのプレビューをみるより、このエディタで切り替えた方が断然早くテーマの中身をチェックできますね！</p>
<h3 id="menu04">Live View</h3>
<p>左側でソースを編集し、その編集した結果が即時右側でプレビューとして表示されています。<br />
直感的に幅を変えられるのが素晴らしく、スマホ、PCのチェックもラクにできます！</p>
<p><a href="/uploads-archive/2016/03/9Gjh4CWqxM.gif" rel="attachment wp-att-10121"><img decoding="async" src="/uploads-archive/2016/03/9Gjh4CWqxM.gif" alt="9Gjh4CWqxM" width="640" class="alignnone size-large wp-image-10121" /></a></p>
<h3 id="menu05">Save/Open</h3>
<p>「Save」で今編集しているコードを一時保存します。<br />
「Open」で一時保存したコードを表示します。</p>
<p>ブラウザの「localstorage」に保存しているので、<br />
違うブラウザを使用すると保存されてないので注意！(当たり前か&#8230;)</p>
<h3 id="menu06">Download</h3>
<p>編集したhtmlをダウンロードします。<br />
bootstrap.htmlがダウンロードできます。</p>
<p>こんなに簡単に無料で使用できるツールはなかなかないと思います。（しかも日本製）<br />
おそらく今後もパワーアップしそうな予感がありますので、ますます期待です！！</p>
<p>Bootstrapを扱う方はぜひ使用してみると良いと思います！！</p>


無料かつログイン不要のブラウザエディタ「Bootstrap Editor」

<p>商品CGを作る場合やリアルな実写合成を行う場合にライティングとしてHDRIを用いた方法がよく行われます。</p>
<p>HDRIとは「ハイダイナミックレンジイメージ」の事で、文字通りダイナミックレンジが大きい画像を意味します。</p>
<p>ダイナミックレンジとは輝度の幅の事で、詳しく説明しようとすると複雑になってしまうので、無理やりかみ砕くと、「普段よく目にするJPEG画像なんかよりも明るさについての情報量が多い画像の事だな」ととりあえずは思って下さい。</p>
<p>詳しい事はこちらのサイトが丁寧に解説してくれてますので参考にしてください。（結構奥が深いです。）<a href="http://vig.is.env.kitakyu-u.ac.jp/Japanese/tutorial/hdri.html">http://vig.is.env.kitakyu-u.ac.jp/Japanese/tutorial/hdri.html</a></p>
<h2>HDRIでライティングを行う</h2>
<p>まずはHDRIが必要になりますが、CINEMA4Dのプリセットの中にいくつか用意されていますので、コンテンツブラウザから探してみてください。</p>
<p>続いてマテリアルの設定を行います、新規でマテリアルを作成して、発行チャンネルのみにチェックを入れてテクスチャにHDRIを適用します。</p>
<p><a href="/uploads-archive/2016/03/1-3.jpg" rel="attachment wp-att-10123"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-10123" src="/uploads-archive/2016/03/1-3.jpg" alt="1" width="640" height="672" srcset="/uploads-archive/2016/03/1-3.jpg 640w, /uploads-archive/2016/03/1-3-286x300.jpg 286w, /uploads-archive/2016/03/1-3-228x239.jpg 228w" sizes="(max-width: 640px) 100vw, 640px" /></a></p>
<p>このマテリアルを空オブジェクトに張り付けて、ライティングの設定は完成です。</p>
<p>ちなみに主役になるオブジェクトについては詳しく書きませんが、これもプリセットにいくつか用意してあるので好きな物を設置してみてください。</p>
<p><a href="/uploads-archive/2016/03/2-3.jpg" rel="attachment wp-att-10127"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-10127" src="/uploads-archive/2016/03/2-3.jpg" alt="2" width="640" height="442" srcset="/uploads-archive/2016/03/2-3.jpg 640w, /uploads-archive/2016/03/2-3-300x207.jpg 300w, /uploads-archive/2016/03/2-3-228x157.jpg 228w" sizes="(max-width: 640px) 100vw, 640px" /></a></p>
<h2>GI（グローバルイルミネーション）の設定を行う</h2>
<p>HDRIライティングでフォトリアルな画像や動画を作成するにはGI（グローバルイルミネーション）を用いてレンダリングする必要があります。</p>
<p>レンダリング設定から特殊効果を選択してグローバルイルミネーションを適用します。</p>
<p><a href="/uploads-archive/2016/03/3-3.jpg" rel="attachment wp-att-10128"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-10128" src="/uploads-archive/2016/03/3-3.jpg" alt="3" width="640" height="479" srcset="/uploads-archive/2016/03/3-3.jpg 640w, /uploads-archive/2016/03/3-3-300x225.jpg 300w, /uploads-archive/2016/03/3-3-228x171.jpg 228w" sizes="(max-width: 640px) 100vw, 640px" /></a></p>
<p>あとはレンダリングするだけです。</p>
<p>設定によってはかなり時間がかかると思いますので、調整が必要です。</p>
<p>下の画像が完成した画像です。</p>
<p><a href="/uploads-archive/2016/03/test_6.jpg" rel="attachment wp-att-10180"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-10180" src="/uploads-archive/2016/03/test_6.jpg" alt="test_6" width="800" height="600" srcset="/uploads-archive/2016/03/test_6.jpg 800w, /uploads-archive/2016/03/test_6-300x225.jpg 300w, /uploads-archive/2016/03/test_6-768x576.jpg 768w, /uploads-archive/2016/03/test_6-228x171.jpg 228w" sizes="(max-width: 800px) 100vw, 800px" /></a></p>
<p>&nbsp;</p>


CINEMA4D HDRIをつかってフォトリアルなレンダリングを行う

<h3>はじめに</h3>
<div style="padding-left: 15px;">
<p>今更！と思われるかもしれませんがAndroid OSをLollipoop(5.0)へ移行してみました。元に戻すのは通常は無理な代物なので、慎重に情報収集した結果、決行に至ったレポートを記載します。</p>
</div>
<h3>今までとの違いは？</h3>
<div style="padding-left: 15px;">
<p>各所で聞くところによると、</p>
<ul>
<li>軽量な動作になった</li>
<li>アプリはある程度すでに対応されているものが多い</li>
<li>SDカードへの書き込みはアプリによって対応</li>
</ul>
<p>と魅力的な情報が満載！<br />
ですが、、、ここは慎重に。</p>
</div>
<h3>移行前の手順</h3>
<div style="padding-left: 15px;">まずはバックアップを取ります。<br />
「設定」＞「バックアップと復元」あたりで「バックアップ」をタップし実行します。<br />
(端末によって細かな違いはあります)※ それでもカバーしきれないデータ(主にソーシャルゲーム系)はPCと繋いでadbバックアップなど応用的な処置が必要なので注意しましょう。<br />
※ adb: Android Developer Bridge (Android開発者用のドライバ)違いを解りやすく数値化しておくことで比較がしやすくなります。<br />
端末の動きを細かく比較したい方は、デジカメなどの外部メディア機器を使用して動画を撮るのもオススメです。筆者は比較用に &#8220;AnTuTu Benchmark&#8221; というアプリを使用してみました。無料です。<br />
<a href="https://play.google.com/store/apps/details?id=com.antutu.ABenchMark&amp;hl=ja">Antutu Benchmark &#8211; Google Play の Android アプリ</a>移行前のベンチ結果です。<br />
<a href="/uploads-archive/2016/03/Screenshot_2016-03-12-15-23-16.png" rel="attachment wp-att-10055"><img decoding="async" loading="lazy" class="alignnone size-large wp-image-10055" src="/uploads-archive/2016/03/Screenshot_2016-03-12-15-23-16-576x1024.png" alt="Screenshot_2016-03-12-15-23-16" width="576" height="1024" srcset="/uploads-archive/2016/03/Screenshot_2016-03-12-15-23-16-576x1024.png 576w, /uploads-archive/2016/03/Screenshot_2016-03-12-15-23-16-169x300.png 169w, /uploads-archive/2016/03/Screenshot_2016-03-12-15-23-16-768x1365.png 768w, /uploads-archive/2016/03/Screenshot_2016-03-12-15-23-16-228x405.png 228w, /uploads-archive/2016/03/Screenshot_2016-03-12-15-23-16.png 1080w" sizes="(max-width: 576px) 100vw, 576px" /></a></p>
</div>
<h3>移行時の手順</h3>
<div style="padding-left: 15px;">通知バーに常に自己主張してくる「システムアップデート」をタップするか<br />
「設定」の「バージョン情報」から「ソフトウェア・アップデート」を手動で実行するかOKです。</div>
<h3>違いを比較！</h3>
<div style="padding-left: 15px;">数値的には以下の様な違いとなっています。<br />
<a href="/uploads-archive/2016/03/before.png" rel="attachment wp-att-10057"><img decoding="async" loading="lazy" class="alignnone size-large wp-image-10057" src="/uploads-archive/2016/03/before-576x1024.png" alt="before" width="576" height="1024" srcset="/uploads-archive/2016/03/before-576x1024.png 576w, /uploads-archive/2016/03/before-169x300.png 169w, /uploads-archive/2016/03/before-768x1365.png 768w, /uploads-archive/2016/03/before-228x405.png 228w, /uploads-archive/2016/03/before.png 1080w" sizes="(max-width: 576px) 100vw, 576px" /></a><a href="/uploads-archive/2016/03/after.png" rel="attachment wp-att-10058"><img decoding="async" loading="lazy" class="alignnone size-large wp-image-10058" src="/uploads-archive/2016/03/after-576x1024.png" alt="after" width="576" height="1024" srcset="/uploads-archive/2016/03/after-576x1024.png 576w, /uploads-archive/2016/03/after-169x300.png 169w, /uploads-archive/2016/03/after-768x1365.png 768w, /uploads-archive/2016/03/after-228x405.png 228w, /uploads-archive/2016/03/after.png 1080w" sizes="(max-width: 576px) 100vw, 576px" /></a>あくまでも数値上での比較。</div>
<div style="padding-left: 15px;">体感としては、スワイプなどの動作がヌルサクからちょっぴりサクを削減した感じです。<br />
起動してから認証パターンからホームに移行するまで<br />
<strong><span style="color: #ff0000;">・Before：0.8秒〜0.9秒くらい？</span></strong><br />
<strong><span style="color: #ff0000;"> ・After：0.3秒〜0.4秒くらい？</span></strong><br />
な感じでした。エビデンスはありません。</p>
<p>今のところ特にデメリットや不具合は無さそうです。</p></div>
<h3>まとめ</h3>
<div style="padding-left: 15px;">
<p>筆者は初期化時にROMに支障をきたしたのか、CPUベンチが落ちました。。。(移行前の時点で総合スコアが45000ほどありました&#8230;)</p>
<p>バックアップしたものの、復元がグレーアウトして復元も出来ず！SDカードの初期化やキャッシュクリアなど試行錯誤していますが、未だ原因解らず。<br />
これはショップに持ち込まないと解らないレベルなので原因判明したら追記しようかと思います。</p>
<p>初期化すると軽くなるというのは本当だと思いますが、慎重に行いましょう！！！ lol</p>
</div>


Android Lollipop導入・検証結果レポート

<p>前回に引き続き、シミュレーションタグの使用方法を簡単に説明させて頂きます。</p>
<p>物が落下するようなアニメーションはキーフレームだけでも可能ですが、複雑なものになるとシミュレーションによって動きをつけた方が何倍も作業が楽になります。</p>
<p>CINEMA４Dの中でオブジェクトに質量を与えて落下させたり、場合にはシミュレーションタグの「リジットボディ」を適用します。</p>
<p><a href="/uploads-archive/2016/03/1.gif" rel="attachment wp-att-10049"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-10049" src="/uploads-archive/2016/03/1.gif" alt="1" width="640" height="492" /></a></p>
<p>作業的にはこれだけで、「現実世界の物」と同様に落下していきます。</p>
<p>逆に落ちてくるものを受け止めるには「衝突」タグを適用します。これは落下してくるオブジェクトをその位置で止めるように作用するので、床を表現する際などに使います。</p>
<div style="width: 720px;" class="wp-video"><video class="wp-video-shortcode" id="video-10048-5" width="720" height="404" preload="metadata" controls="controls"><source type="video/mp4" src="/uploads-archive/2016/03/test_5.mp4?_=5" /><a href="/uploads-archive/2016/03/test_5.mp4">/uploads-archive/2016/03/test_5.mp4</a></video></div>
<p>こうしたシミュレーションタグを使えば、簡単にピタゴラスイッチ的な表現が可能です。</p>
<p>ちなみにソフトボディを適用させて場合は、液体のような表現ができます。</p>
<div style="width: 720px;" class="wp-video"><video class="wp-video-shortcode" id="video-10048-6" width="720" height="404" preload="metadata" controls="controls"><source type="video/mp4" src="/uploads-archive/2016/03/test_5_2.mp4?_=6" /><a href="/uploads-archive/2016/03/test_5_2.mp4">/uploads-archive/2016/03/test_5_2.mp4</a></video></div>


CINEMA4D　シミュレーションタグを使ってピタゴラスイッチを作る

<p></p>

		<div id="crayon-649540263ad95666248220" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover wrap" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 18px !important;">
		
			<div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><span class="crayon-title">weather</span>
			<div class="crayon-tools" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div></div></div>
			<div class="crayon-info" style="min-height: 19.5px !important; line-height: 19.5px !important;"></div>
			<div class="crayon-plain-wrap"><textarea  class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 13px !important; line-height: 18px !important;">
curl wttr.in</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 13px !important; line-height: 18px !important;"><div class="crayon-num" data-line="crayon-649540263ad95666248220-1">1</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 13px !important; line-height: 18px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-649540263ad95666248220-1"><span class="crayon-e">curl </span><span class="crayon-i">wttr</span><span class="crayon-sy">.</span><span class="crayon-st">in</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>と打つことで、コンソール上に天気を表示させることができます。<br />
<a href="/uploads-archive/2016/03/0dc5850cfd12f3fdf4063cc1552b9908.png" rel="attachment wp-att-10036"><img decoding="async" loading="lazy" src="/uploads-archive/2016/03/0dc5850cfd12f3fdf4063cc1552b9908-300x169.png" alt="スクリーンショット 2016-03-25 16.49.55" width="300" height="169" class="alignnone size-medium wp-image-10036" srcset="/uploads-archive/2016/03/0dc5850cfd12f3fdf4063cc1552b9908-300x169.png 300w, /uploads-archive/2016/03/0dc5850cfd12f3fdf4063cc1552b9908-768x432.png 768w, /uploads-archive/2016/03/0dc5850cfd12f3fdf4063cc1552b9908-1024x576.png 1024w, /uploads-archive/2016/03/0dc5850cfd12f3fdf4063cc1552b9908-228x128.png 228w, /uploads-archive/2016/03/0dc5850cfd12f3fdf4063cc1552b9908.png 1920w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<p></p>

		<div id="crayon-649540263ad9a620058105" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover wrap" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 18px !important;">
		
			<div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><span class="crayon-title">Tokyo, weather</span>
			<div class="crayon-tools" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div></div></div>
			<div class="crayon-info" style="min-height: 19.5px !important; line-height: 19.5px !important;"></div>
			<div class="crayon-plain-wrap"><textarea  class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 13px !important; line-height: 18px !important;">
curl wttr.in/Tokyo</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 13px !important; line-height: 18px !important;"><div class="crayon-num" data-line="crayon-649540263ad9a620058105-1">1</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 13px !important; line-height: 18px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-649540263ad9a620058105-1"><span class="crayon-e">curl </span><span class="crayon-i">wttr</span><span class="crayon-sy">.</span><span class="crayon-st">in</span>/<span class="crayon-i">Tokyo</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>と打つことで場所を指定して天気を表示させることができます。<br />
curl wttr.in/Moscow<br />
と打てば、プログラム作成中にモスクワの天気もチェックできます。</p>
<p>他にも空港コードや</p>

		<div id="crayon-649540263ad9c899761731" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover wrap" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 18px !important;">
		
			<div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><span class="crayon-title">Doha International Airport, Qatar, weather</span>
			<div class="crayon-tools" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div></div></div>
			<div class="crayon-info" style="min-height: 19.5px !important; line-height: 19.5px !important;"></div>
			<div class="crayon-plain-wrap"><textarea  class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 13px !important; line-height: 18px !important;">
curl wttr.in/doh</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 13px !important; line-height: 18px !important;"><div class="crayon-num" data-line="crayon-649540263ad9c899761731-1">1</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 13px !important; line-height: 18px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-649540263ad9c899761731-1"><span class="crayon-e">curl </span><span class="crayon-i">wttr</span><span class="crayon-sy">.</span><span class="crayon-st">in</span>/<span class="crayon-i">doh</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>IPアドレス</p>

		<div id="crayon-649540263ad9e738781411" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover wrap" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 18px !important;">
		
			<div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><span class="crayon-title">sterfield co. ltd. webserver, weather</span>
			<div class="crayon-tools" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div></div></div>
			<div class="crayon-info" style="min-height: 19.5px !important; line-height: 19.5px !important;"></div>
			<div class="crayon-plain-wrap"><textarea  class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 13px !important; line-height: 18px !important;">
curl wttr.in/@sterfield.co.jp</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 13px !important; line-height: 18px !important;"><div class="crayon-num" data-line="crayon-649540263ad9e738781411-1">1</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 13px !important; line-height: 18px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-649540263ad9e738781411-1"><span class="crayon-e">curl </span><span class="crayon-i">wttr</span><span class="crayon-sy">.</span><span class="crayon-st">in</span>/<span class="crayon-sy">@</span><span class="crayon-i">sterfield</span><span class="crayon-sy">.</span><span class="crayon-i">co</span><span class="crayon-sy">.</span><span class="crayon-i">jp</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>にも対応しているようです。</p>
<p>また、天気の他にも、月の満ち欠けも確認できます。</p>

		<div id="crayon-649540263ad9f020339767" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover wrap" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 18px !important;">
		
			<div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><span class="crayon-title">moon</span>
			<div class="crayon-tools" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div></div></div>
			<div class="crayon-info" style="min-height: 19.5px !important; line-height: 19.5px !important;"></div>
			<div class="crayon-plain-wrap"><textarea  class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 13px !important; line-height: 18px !important;">
curl wttr.in/Moon</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 13px !important; line-height: 18px !important;"><div class="crayon-num" data-line="crayon-649540263ad9f020339767-1">1</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 13px !important; line-height: 18px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-649540263ad9f020339767-1"><span class="crayon-e">curl </span><span class="crayon-i">wttr</span><span class="crayon-sy">.</span><span class="crayon-st">in</span>/<span class="crayon-i">Moon</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p></p>

		<div id="crayon-649540263ada2752104946" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover wrap" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 18px !important;">
		
			<div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><span class="crayon-title">moon</span>
			<div class="crayon-tools" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div></div></div>
			<div class="crayon-info" style="min-height: 19.5px !important; line-height: 19.5px !important;"></div>
			<div class="crayon-plain-wrap"><textarea  class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 13px !important; line-height: 18px !important;">
curl wttr.in/Moon@2016-Mar-23</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 13px !important; line-height: 18px !important;"><div class="crayon-num" data-line="crayon-649540263ada2752104946-1">1</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 13px !important; line-height: 18px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-649540263ada2752104946-1"><span class="crayon-e">curl </span><span class="crayon-i">wttr</span><span class="crayon-sy">.</span><span class="crayon-st">in</span>/<span class="crayon-i">Moon</span><span class="crayon-sy">@</span><span class="crayon-cn">2016</span>-<span class="crayon-i">Mar</span>-<span class="crayon-cn">23</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p><a href="/uploads-archive/2016/03/025bb0ecb9c34a6fcc1937db73a4c126.png" rel="attachment wp-att-10041"><img decoding="async" loading="lazy" src="/uploads-archive/2016/03/025bb0ecb9c34a6fcc1937db73a4c126-300x195.png" alt="スクリーンショット 2016-03-25 17.06.38" width="300" height="195" class="alignnone size-medium wp-image-10041" srcset="/uploads-archive/2016/03/025bb0ecb9c34a6fcc1937db73a4c126-300x195.png 300w, /uploads-archive/2016/03/025bb0ecb9c34a6fcc1937db73a4c126-768x500.png 768w, /uploads-archive/2016/03/025bb0ecb9c34a6fcc1937db73a4c126-1024x667.png 1024w, /uploads-archive/2016/03/025bb0ecb9c34a6fcc1937db73a4c126-228x149.png 228w, /uploads-archive/2016/03/025bb0ecb9c34a6fcc1937db73a4c126.png 1906w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<p>ちなみにアドレス直打ちでも見れます。<br />
<a href="http://wttr.in/tokyo">http://wttr.in/tokyo</a></p>
<h2>参考</h2>
<p><a href="https://github.com/chubin/wttr.in">chubin/wttr.in</a></p>

もしコンソールを叩いているときに天気が気になったら

<p>弊社では、毎週火曜日（たまに前後）にナレッジシェアとして、皆でブログを更新しています。ブログを見るのは好きな私ですが、書くのは苦手なんだなーと最近気付きました。</p>
<h2>そう思う主な原因</h2>
<p>・全体的にまとまっていない<br />
・何を伝えたいか自分はハッキリしているのに表現力がない<br />
・ぐだついている</p>
<p>などなど。</p>
<p>個人的に、弊社の目崎さんが書かれるブログはとても簡潔でピシッとまとまっていて分かりやすいので羨ましい。コンペナビ編集長の橋本さんは、編集長だけあってとてもユニークで言葉のセンスが良いのでリスペクト。</p>
<p>私は面白いブログというよりも分かりやすいブログを、まず書けるようにしたいと思っています。そのために実行すべき事はどんな事なんでしょうか。今更なのかもしれないですが、ブログの書き方を勉強しようと思います。</p>
<h2>ブログを書くのに最低限するべきこと</h2>
<p>長くなってしまうので、<strong>なるべく簡潔に</strong>します。</p>
<h3>タイトルにはキーワードを必ず入れていく</h3>
<p>弊社のブログページはアイキャッチ画像とタイトルが表示されて並んでいます。</p>
<p><a href="/uploads-archive/2016/03/sterfield01.jpg" rel="attachment wp-att-10000"><img decoding="async" loading="lazy" src="/uploads-archive/2016/03/sterfield01.jpg" alt="sterfield01" width="1000" height="503" class="alignnone size-full wp-image-10000" srcset="/uploads-archive/2016/03/sterfield01.jpg 1000w, /uploads-archive/2016/03/sterfield01-300x151.jpg 300w, /uploads-archive/2016/03/sterfield01-768x386.jpg 768w, /uploads-archive/2016/03/sterfield01-228x115.jpg 228w" sizes="(max-width: 1000px) 100vw, 1000px" /></a></p>
<p>アイキャッチ画像はとても大事な要素ですが、やはりタイトルにも興味を持ってもらえないとスルーされてしまうと思うのです。<br />
なので抽象的なタイトルはやめておきましょう。</p>
<p>（例）「今日は良いお買い物が出来たよ」</p>
<p>では、<strong>「コンビニクーポンを使って4,600円引きでiqosが買える方法」</strong>というタイトルに変更してみましょう。さらに、<strong>「禁煙がしたいあなたに。コンビニクーポンを使って4,600円引きでiqosが買える方法」</strong>などにしてみると、ターゲットも絞れますね。例のタイトルにも含まれるように数字を入れるのも効果があるそうです。</p>
<p>大事なことは、<strong>中身を読んでみたくなるキーワード</strong>がタイトルにいれる！　ですね。</p>
<h3>見出しにキーワードを入れる</h3>
<p>タイトルと同様に見出しにもキーワードをいれましょう。でもタイトルで使ったキーワードを繰り返し使うのはNG。</p>
<p>タイトルが「初心者でも出来るおいしいレモンケーキの作り方」、見出しを「ケーキの作り方その1」とかにはしないこと。また、このブログでも使っていますが見出しはhタグを使うととても見やすくなります。私の場合、メイン見出しにはh2、サブ見出しにはh3にしています。</p>
<h2>見やすいように、改行・段落をうまく使う</h2>
<p>私がいつも悩む「改行・段落」、どこで切ったらいいのか正直分かりません。ですが、これはブログを読んでくれている方の環境にもよりますが、大体段落は3～4行を目安にすると見やすいとのこと。それ以上になると読むのが面倒という印象を与えてしまうそうです。</p>
<p>また、漢字を多用するのも同様の印象を与えてしまうので、ひらがなとカタカナを織り交ぜてバランスよく書きましょう。</p>
<h2>一文の長さでテンポをつける</h2>
<p>文章中の一文を短く区切ることにより、テンポが生まれます。</p>
<p>何も考えずに書くと、無駄な文がいつの間にか増えてしまう事がありませんか？「しかし」や「だから」といった接続詞を思い切って消してみるとすっきりした文章になります。ただ削りすぎてしまうのも個性を失うので、適度なバランスをひたすら書いて感覚を磨いていきましょう。</p>
<p>私はコレがとても苦手なので、これを意識するようにします。</p>
<h2>文中は共起語と関連語をメインに使う</h2>
<p>キーワード中心に考えてしまうと、あちこちで使いたくなってしまいますが、文章の中に同じ単語が出てくるのは見ている方がウンザリします。</p>
<p>検索エンジンに拾われるかどうかよりも読みやすさです。「ブログの書き方」という言葉が段落ごとに出てきたら、だんだん見るのも嫌になってきますよね。</p>
<p>最適な量は全体の文章に対して･･･なんて決まりはありませんので、文中に無理矢理キーワードを差し込むのではなくキーワードはタイトルと見出しにいれて、記事内は関連語や共起語をメインに使いましょう。自分で思いつくワードに限界がある！という方には、こちらの<a href="http://neoinspire.net/cooccur/" target="_blank">共起語抽出ツール</a>や<a href="http://goodkeyword.net/" target="_blank">関連キーワードツール</a>で調べてみましょう。</p>
<p>※共起語<br />
メインとなるキーワードと共に使われる言葉。</p>
<p>※関連語<br />
メインが「ブログ」なら「アクセス」「ランキング」など。</p>
<p>共起語という言葉は初めて知りました･･･（；＾ω＾）</p>
<h2>色や太さなどの装飾はなるべく控える</h2>
<p>キーワードや強調したい言葉の文字色を変えたり、太さや大きさを変えすぎてしまうと<font color="red">どこを強調したい</font>のか<em>分かりません</em>よね。<font size="6">大きさ</font>や<strong>太さ</strong>がまちまちだと読みづらくなります。（書いているこちらも疲れます）</p>
<p>私はあまり装飾自体を使うことはありませんが、使っても太さの変更ぐらいかと思います。また、色を変える際は背景色にもよりますが、弊社のブログのように白の場合は「黄色」や「薄い灰色」などは読みづらく、また青色は「青＝リンク」という認識が強いので、読者に無駄なクリックを誘ってしまうかもしれません。イラついてしまう原因にもなりますのでご注意を。</p>
<h3>画像や動画は装飾の中でも一番良い</h3>
<p>画像や動画は、文章で伝えきれないものを補足してくれます。また、画像を見ることで見ている側は無意識に小休止することが出来るので、読み疲れを抑える効果があります。</p>
<p><a href="/uploads-archive/2016/03/9e2e4adcffa79c4df161f62e18b1f108_s.jpg" rel="attachment wp-att-10012"><img decoding="async" loading="lazy" src="/uploads-archive/2016/03/9e2e4adcffa79c4df161f62e18b1f108_s.jpg" alt="9e2e4adcffa79c4df161f62e18b1f108_s" width="640" height="427" class="alignnone size-full wp-image-10012" srcset="/uploads-archive/2016/03/9e2e4adcffa79c4df161f62e18b1f108_s.jpg 640w, /uploads-archive/2016/03/9e2e4adcffa79c4df161f62e18b1f108_s-300x200.jpg 300w, /uploads-archive/2016/03/9e2e4adcffa79c4df161f62e18b1f108_s-228x152.jpg 228w" sizes="(max-width: 640px) 100vw, 640px" /></a></p>
<p>言葉だけでは自分の意志を100％伝えるのは難しいです。頭で考えたことを言葉に変換する時、それが相手の目や耳に届いたとき、相手が解釈するロスが生じますよね。そのロスを動画像は軽減してくれるのです。</p>
<h2>まとめ</h2>
<p>みなさん、どうでしょうか。<br />
ちなみに今回の記事は、こちら　<a href="http://naifix.com/blog-beginner/" target="_blank">ブログ初心者が最低限覚えておくべきブログの書き方10ヶ条</a> をものすごく参考にさせて頂きました。</p>
<p>理解しながらまとめていくことで、勉強になったのは誰よりも私かもしれません。これをスタートに通販事業部のブログもすらすら～～～っと書けるように頑張りたいですね！</p>


読みやすいブログの書き方を学ぶ

<p>テクニカルクリエイターってご存じですか？？</p>
<p>2015年末から2016年頭にかけてサイバーエージェントさんで定義された新しい職種の名称のようです。</p>
<p><a href="http://ameblo.jp/shibuya/entry-12114099278.html" target="_blank">テクニカルクリエイター｜渋谷ではたらく社長のアメブロ</a></p>
<h2>テクニカルクリエイターとは？</h2>
<p>要は、エンジニアとデザイナーの両方の技術・仕事をする人達を呼ぶそうです。<br />
（プログラミングとデザインの両方の知識・技術を持ち合わせた人）</p>
<p>確かに最近は、その垣根がなくなりつつあり、webデザイナーといっても、<br />
ただデザインするだけでなく、コーディングはもちろん、wordpressの構築をも担当するようになっています。</p>
<p>その中で、なんと名乗ればいいのか困る時もあります。<br />
（僕自身もそんな感じで、いつも幅広くやってますと説明していました笑）</p>
<p>そういう時にこのような名称があるとちょっと説明しやすくなるかもしれません。</p>
<p>ただ、「フルスタックエンジニア」なんて言葉もありましたが浸透もいまいちだったので、<br />
(というかフルスタックエンジニアはフロントエンドとサーバサイドの技術を持った人に近いかも)<br />
この名称が定着するかはわかりません。</p>
<p>今回の「テクニカルクリエイター」はサイバーエージェントさん発信なのでもしかしたらこの名称が定着するようになるかもしれません。</p>
<p>こんなサイトもあります。<br />
（これはサイバーエージェントさんが発表する前からあったようです。偶然？？）</p>
<p><a href="http://technical-creator.com/" target="_blank" class="link">テクニカルクリエイター.com</a></p>
<p>このサイトの運営は、今では有名な「UI Crunch」の管理人の小島芳樹さんなので、こちらもどんどん浸透していく可能性は高いです。</p>
<p>テクニカルクリエイター関係ではこんなスライドも。</p>
<p><a href="http://www.slideshare.net/keisukeimura/ss-57090547" target="_blank">テクニカルクリエイターの憂鬱</a></p>
<p>うーん、今後どうなっていくんでしょうか？</p>
<p>この名称、奥さんに言ったら一言だけこう言われました。</p>
<p>「逆にださい」</p>
<p>なんの逆かはわかりませんが、あまりカッコイイ名称とは思えなかったようです笑</p>


テクニカルクリエイターという名称は定着するのだろうか？？

<p>CINEMA4Dではシミュレーションタグを使用する事で簡単に風でなびく旗のCGを作成する事が出来ます。</p>
<p>まずプリミティブの平面など旗の布になるオブジェクトにシミュレーションタグのクロスを設置します。</p>
<p>本来このクロスタグは名前の通り、キャラクターなどに服を着させるためのシミュレーションタグになりますが、色んな使い方ができます。</p>
<p>シミュレーションさせるオブジェクトはこのとき、編集可能なオブジェクトに変更しておく必要があります。</p>
<p><a href="/uploads-archive/2016/03/1-2.jpg" rel="attachment wp-att-9945"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-9945" src="/uploads-archive/2016/03/1-2.jpg" alt="1" width="640" height="386" srcset="/uploads-archive/2016/03/1-2.jpg 640w, /uploads-archive/2016/03/1-2-300x181.jpg 300w, /uploads-archive/2016/03/1-2-228x138.jpg 228w" sizes="(max-width: 640px) 100vw, 640px" /></a></p>
<p>続いてクロスタグの「着付け」から固定するポイント（またはポリゴン）を設定します。</p>
<p>ポイント選択またはポリゴン選択で棒に固定される部分を選択し、「着付け」の固定ポイントから「記録」します。</p>
<p>これで選択した部分は動かなくなります。</p>
<p><a href="/uploads-archive/2016/03/2-2.jpg" rel="attachment wp-att-9946"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-9946" src="/uploads-archive/2016/03/2-2.jpg" alt="2" width="640" height="350" srcset="/uploads-archive/2016/03/2-2.jpg 640w, /uploads-archive/2016/03/2-2-300x164.jpg 300w, /uploads-archive/2016/03/2-2-228x125.jpg 228w" sizes="(max-width: 640px) 100vw, 640px" /></a></p>
<p>風を吹かせるにはフォースのパラメータを調整します。</p>
<p><a href="/uploads-archive/2016/03/3-2.jpg" rel="attachment wp-att-9950"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-9950" src="/uploads-archive/2016/03/3-2.jpg" alt="3" width="640" height="578" srcset="/uploads-archive/2016/03/3-2.jpg 640w, /uploads-archive/2016/03/3-2-300x271.jpg 300w, /uploads-archive/2016/03/3-2-228x206.jpg 228w" sizes="(max-width: 640px) 100vw, 640px" /></a></p>
<p>旗の硬さなどはタグから調整する事ができます。</p>
<p><a href="/uploads-archive/2016/03/4-2.jpg" rel="attachment wp-att-9951"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-9951" src="/uploads-archive/2016/03/4-2.jpg" alt="4" width="640" height="581" srcset="/uploads-archive/2016/03/4-2.jpg 640w, /uploads-archive/2016/03/4-2-300x272.jpg 300w, /uploads-archive/2016/03/4-2-228x207.jpg 228w" sizes="(max-width: 640px) 100vw, 640px" /></a></p>
<p>出来上がった物がこちらになります。</p>
<div style="width: 720px;" class="wp-video"><video class="wp-video-shortcode" id="video-9944-4" width="720" height="404" preload="metadata" controls="controls"><source type="video/mp4" src="/uploads-archive/2016/03/test_4.mp4?_=4" /><a href="/uploads-archive/2016/03/test_4.mp4">/uploads-archive/2016/03/test_4.mp4</a></video></div>


Company

Our Solutions

Support

News

Blog

Blogブログ

カテゴリーから探す

年別から見る

記事一覧 - Author: スターフィールド編集部

2016/04/06

2016/04/06

2016/04/06

2016/04/06

2016/04/06

2016/04/05

2016/03/30

2016/03/30

2016/03/30

2016/03/30

2016/03/30

2016/03/26

2016/03/26

2016/03/26

2016/03/26

2016/03/26

2016/03/16

2016/03/16