<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」

CSS3のtransform3dを使った奥行きの効果

<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>こちらの「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>
<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>


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

SVGを使った面白そうなテキストのアニメーションを再現してみました

jQeuryで横にはみ出させた要素をフリックでスライドさせる

<p>以前、Project Cometについてブログを書きましたが、<br />
<a class="link" href="/designer/web%e3%82%b5%e3%82%a4%e3%83%88%e3%83%bb%e3%82%a2%e3%83%97%e3%83%aa%e3%81%ae%e3%83%a2%e3%83%83%e3%82%af%e3%82%a2%e3%83%83%e3%83%97%e3%80%81%e3%83%87%e3%82%b6%e3%82%a4%e3%83%b3%e3%81%ae%e3%83%84/">webサイト・アプリのモックアップ、デザインのツールはAdobeに期待！！ | スターフィールド株式会社</a><br />
とうとう、3月14日に「Adobe Experience Design CC」と名前を変え、登場しました。</p>
<p><a class="link" href="http://www.adobe.com/products/experience-design.html" target="_blank">Adobe Experience Design CC</a></p>
<h2>Adobe Experience Design CC</h2>
<p>以前お伝えした通り、こちらはモックアップ制作のためのツールになり、<br />
UX設計のためのツールとのことです。<br />
今はPreviewってことなのか、Adobeのアカウントがあれば無料で使えます。</p>
<p>実際に使ってみましょう！</p>
<p><img decoding="async" loading="lazy" class="alignnone  wp-image-9904" src="/uploads-archive/2016/03/05436cf30b0ae6abc0d60f24de4fff86.png" alt="スクリーンショット 2016-03-15 14.32.04" width="463" height="269" srcset="/uploads-archive/2016/03/05436cf30b0ae6abc0d60f24de4fff86.png 801w, /uploads-archive/2016/03/05436cf30b0ae6abc0d60f24de4fff86-300x175.png 300w, /uploads-archive/2016/03/05436cf30b0ae6abc0d60f24de4fff86-768x447.png 768w, /uploads-archive/2016/03/05436cf30b0ae6abc0d60f24de4fff86-228x133.png 228w" sizes="(max-width: 463px) 100vw, 463px" /></p>
<p>スマホ、タブレット、webのサイズで作ることができます。</p>
<p>元々のサンプルや、iOSやGoogle Materialのkitがあるので、そちらを用いるのいいかもしれません。</p>
<p>とりあえず,iPhoneを選んで作成してみます。</p>
<p><img decoding="async" src="/uploads-archive/2016/03/7VVRdbaNEe.gif" alt="7VVRdbaNEe" width="640"  class="alignnone size-large wp-image-9905" /></p>
<h2>Design</h2>
<p>まずはDesign画面。<br />
スッキリしたインターフェイスで、ちょっとsketchっぽい感じもします。<br />
直線、図形、ペンツール、テキストが使え、画像はドラッグ＆ドロップで使えます。</p>
<p>図形やテキストに関しては、色、透明度、ボーダー、シャドウを適用することができます。<br />
Photoshopのように多くのスタイルは用意されていないようです。</p>
<p>ただ、モックアップはもちろん、最近のアプリのデザインのためにはそこまでスタイルは必要ないかもしれないので充分かもしれません。</p>
<p>Adobeということで、aiとpsdとの連携は抜群なので、このツールで作れない部分は、aiやpsdで作ると良いと思います。</p>
<p>同じようなパターンが続く場合は以下のようにサクッと作ることができます。</p>
<p><img decoding="async" src="/uploads-archive/2016/03/01Hl7bnhpo.gif" alt="01Hl7bnhpo" width="640" class="alignnone size-large wp-image-9908" /></p>
<p>これはスゴいですね！！</p>
<h2>Prototype</h2>
<p>次にPrototype画面。<br />
これもスゴいですね。</p>
<p>Prototype設定画面に行って、選択して遷移させたい箇所につなげるだけでOKです。<br />
遷移のアニメーションも5つ(スライドレフト・ライト・アップ・ダウン、ディゾルブ)用意されています。</p>
<p><img decoding="async" src="/demo/abe/gif/20160315.gif" alt="01Hl7bnhpo" width="640" /></p>
<p>実際画面がどの用意に遷移していくのか、リンク先はどこなのかこれを作って共有すれば基本理解出来ますね！</p>
<h2>終わりに</h2>
<p>いや〜、遂に登場しましたが、今後毎月新しい機能を追加していくとのことですが、<br />
どのようになっていくのでしょうか？<br />
現状webサイトのデザインをするという視点からは見るとPhotoshopの方がいいかなという感じです。<br />
それはなぜかというと、</p>
<h3>個人的に気になる点</h3>
<p>・レイヤー機能がない<br />
・スライス機能がない<br />
・スタイルが少ない</p>
<p>まぁこのツールはそもそも「UXデザイナーのため」と謳っているので、上記の機能は必要ないのかもしれません。</p>
<p>しかし、今後の機能次第では、web・アプリの制作の定番ツールになりそうな気もします。</p>
<p>今後に期待です！！</p>


遂に来た！Adobe Experience Design CCがいい！

<p>知り合いにimport.ioというスクレイピングツールといことを教えていただきました。</p>
<p><a href="https://www.import.io/" target="_blank" class="link">Import.io | Web Data Platform &amp; Free Web Scraping Tool</a></p>
<p>スクレイピングという言葉自体を知りませんでした。</p>
<blockquote><p>
ウェブスクレイピング（Web scraping）とは、ウェブサイトから情報を抽出するコンピュータソフトウェア技術のこと。ウェブ・クローラー(Web crawler) あるいはウェブ・スパイダー(Web spider)とも呼ばれる。 通常このようなソフトウェアプログラムは低レベルのHTTP（Hypertext Transfer Protocol）を実装することで、もしくはInternet ExplorerまたはMozilla FirefoxなどのWebブラウザを埋め込むことによって、人間によるWWWのブラウジングをシミュレートする。<br />
<a href="https://ja.wikipedia.org/wiki/%E3%82%A6%E3%82%A7%E3%83%96%E3%82%B9%E3%82%AF%E3%83%AC%E3%82%A4%E3%83%94%E3%83%B3%E3%82%B0">ウェブスクレイピング &#8211; Wikipedia</a>より
</p></blockquote>
<p>要は、サイトのデータを一括で情報を取得できるということでしょうか。<br />
例えばECサイトの商品の一覧ページの情報を取得したりとか&#8230;</p>
<h3>コンペナビで試してみた</h3>
<p>とりあえず、弊社の<a href="http://compe.sterfield.jp/" target="_blank">コンペナビ</a>で試してみました。</p>
<p><img decoding="async" src="/uploads-archive/2016/03/import.io-Magic-Web-Data-Platform-Free-Web-Scraping-Tool2-1024x598.jpg" alt="import.io Magic  Web Data Platform &amp; Free Web Scraping Tool2" width="500"  class="alignnone size-large wp-image-9882" srcset="/uploads-archive/2016/03/import.io-Magic-Web-Data-Platform-Free-Web-Scraping-Tool2-1024x598.jpg 1024w, /uploads-archive/2016/03/import.io-Magic-Web-Data-Platform-Free-Web-Scraping-Tool2-300x175.jpg 300w, /uploads-archive/2016/03/import.io-Magic-Web-Data-Platform-Free-Web-Scraping-Tool2-768x448.jpg 768w, /uploads-archive/2016/03/import.io-Magic-Web-Data-Platform-Free-Web-Scraping-Tool2-228x133.jpg 228w, /uploads-archive/2016/03/import.io-Magic-Web-Data-Platform-Free-Web-Scraping-Tool2.jpg 1141w" sizes="(max-width: 1024px) 100vw, 1024px" /><br />
(一部ぼかしてます)</p>
<p>いい感じで取得出来ている感じです。<br />
CSVで保存したり、APIにしたりすることが出来るようです！</p>
<p>webサイトのリニューアルで「現行サイトのデータを持って来といて」なんて言われることがあるんですが、そういう時使えそうな感じがします。</p>


Company

Our Solutions

Support

News

Blog

Blogブログ

カテゴリーから探す

年別から見る

記事一覧 - カテゴリー: 開発ナレッジ

2016/04/06

2016/04/06

2016/04/06

2016/04/06

2016/04/06

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

2016/03/09