<h2>VR動画ってどうなってるの？</h2>
<p>以前にご紹介したCineversityで提供しているプラグインを使ってCINEMA4DでVRのレンダリングができたので、動画をyoutubeにアップしてみました。</p>
<p>youtube向けのVR動画は上が左目、下が右目で見るための映像になっています。アスペクト比は１６：９、解像度は3840×2160です。いわゆる4Kという事になるので、短い尺でもかなりのレンダリング時間になってしまいます。</p>
<p><a href="/uploads-archive/2016/04/1-1.jpg" rel="attachment wp-att-10469"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-10469" src="/uploads-archive/2016/04/1-1.jpg" alt="1" width="640" height="360" srcset="/uploads-archive/2016/04/1-1.jpg 640w, /uploads-archive/2016/04/1-1-300x169.jpg 300w, /uploads-archive/2016/04/1-1-228x128.jpg 228w" sizes="(max-width: 640px) 100vw, 640px" /></a></p>
<p>CINEMA4Dから書き出したファイルが画像の場合はをafter effects やpremiereに取込み動画に変換します。このとき、after effectsの場合ならコンポジット設定で解像度3840×2160、premiereならシーケンス設定で解像度3840×2160にしておいてください。</p>
<h2>VR動画のレンダリング時間を短縮する方法</h2>
<p>繰り返しになりますが、4Kのレンダリングは恐ろしいほど時間がかかるのでカメラなどをアニメーションさせている場合は最終的な尺の2分の１くらいになるように、倍の速さでアニメーションさせてレンダリングします。premiereに取込んでからタイムリマップでスローをかけて最終的なアニメーションのスピードに戻します。思いついたので実際にやってみたところレンダリング質を下げたり、解像度を落としてレンダリングするよりも品質は良いようです。（ボーカロイドなど音に合わせて動きを付ける時には向かない方法かもしれません。）</p>
<h2>メタデータを張り付ける</h2>
<p>youtubeに360度動画という事を認識させるためにメタデータを動画に張り付ける必要がります。</p>
<p>まずはyoutubeのヘルプページから専用のアプリケーションをダウンロードします。</p>
<p><a href="https://support.google.com/youtube/answer/6316263?hl=ja">https://support.google.com/youtube/answer/6316263?hl=ja</a></p>
<p><a href="/uploads-archive/2016/04/2.jpg" rel="attachment wp-att-10476"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-10476" src="/uploads-archive/2016/04/2.jpg" alt="2" width="640" height="406" srcset="/uploads-archive/2016/04/2.jpg 640w, /uploads-archive/2016/04/2-300x190.jpg 300w, /uploads-archive/2016/04/2-228x145.jpg 228w" sizes="(max-width: 640px) 100vw, 640px" /></a></p>
<p>アプリケーションを立ち上げて、動画を開き、全てにチェックをいれてから「Save as」で保存し直せばメタデータの添付が完了です。</p>
<h2>VR動画をyoutubeにアップロードする</h2>
<p>通常の動画と同様に「動画をアップロード」でVR動画を選択します。</p>
<p><a href="/uploads-archive/2016/04/3.jpg" rel="attachment wp-att-10477"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-10477" src="/uploads-archive/2016/04/3.jpg" alt="3" width="640" height="327" srcset="/uploads-archive/2016/04/3.jpg 640w, /uploads-archive/2016/04/3-300x153.jpg 300w, /uploads-archive/2016/04/3-228x116.jpg 228w" sizes="(max-width: 640px) 100vw, 640px" /></a></p>
<p>処理済みになったら、「情報と設定」から３D動画にチェックを入れて、「Top to Bottom Left on Top」を選択して更新します。</p>
<p><a href="/uploads-archive/2016/04/4.jpg" rel="attachment wp-att-10478"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-10478" src="/uploads-archive/2016/04/4.jpg" alt="4" width="640" height="598" srcset="/uploads-archive/2016/04/4.jpg 640w, /uploads-archive/2016/04/4-300x280.jpg 300w, /uploads-archive/2016/04/4-228x213.jpg 228w" sizes="(max-width: 640px) 100vw, 640px" /></a></p>
<p>動画をアップしてからVR動画として認識されるまで多少時間がかかります。</p>
<h2>完成したVR動画</h2>
<p>アニメーションがない動画</p>
<p><iframe loading="lazy" width="500" height="281" src="https://www.youtube.com/embed/qG0Ud7T7zJI?feature=oembed" frameborder="0" allowfullscreen></iframe></p>
<p>カメラにアニメーションを付けた動画</p>
<p><iframe loading="lazy" width="500" height="281" src="https://www.youtube.com/embed/AbjdkgmNSWM?feature=oembed" frameborder="0" allowfullscreen></iframe></p>
<p>カメラにアニメーションをつけた動画はレンダリング時間短縮の為、マテリアルが貼ってありません。この動画をCINEMA4Dでレンダリングした際にかかった時間は約7時間でした。</p>


CINEMA4Dで作ったVR動画をyoutubeにアップする

<p>郵便番号から住所を取得するAPIは多く存在しますが、今回は<strong>Google Maps Geocoding API</strong>を利用して取得してみました。</p>
<h2>特徴</h2>
<p>Google Maps Geocoding APIを使用すると、<strong>日本の住所だけでなく、日本以外の国の住所も取得できます</strong>。特定の国の住所だけを取得したい場合は、 2文字のISO 3166-1国コードも一緒に送られてきているので、それで限定すればいいかもしれません。</p>
<p>サポートされているものに限られますが、<strong>住所を返してくれるときの言語も指定できます</strong>。ただし、すべて網羅してその言語に対応しているわけではなく、対応していない部分は英語で返ってきます（<a href="https://developers.google.com/maps/faq?hl=ja#languagesupport" target="_blank">サポートされるドメイン言語のリスト</a>）。</p>
<p>日本の郵便番号はハイフンが入っていますが、Google Maps Geocoding APIは<strong>ハイフンあり、なし両方対応してくれます</strong>。</p>
<p><strong>LaunchCartは、海外発送や多言語対応が簡単にできるECシステム</strong>ですが、登録画面でこれを利用すれば、ユーザビリティが高まりそうですね！</p>
<h2>デモ</h2>
<p><a href="/demo/mizutani/04/search_address_via_geocodig/search_address.html" class="demo" target="_blank">デモ</a></p>
<p></p>

		<div id="crayon-649540263c3e8444165969" 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">Google Maps Geocoding API</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;">
$('#search_address_ja').bind('input propertychange',function(){
  var zipcode = $('#search_address_ja').val();
  $.ajax({
    type : 'get',
    url : 'https://maps.googleapis.com/maps/api/geocode/json',
    crossDomain : true,
    dataType : 'json',
    data : {
      address : zipcode,
      language : 'ja',　//ここで言語を指定できる
      sensor : false
    },
    success : function(resp){
      if(resp.status == "OK"){
        var object = resp.results[0].address_components;
        if (object.length &lt; 5) {
        $('#address_ja').text("");
          return false;
          }
        $('#address_ja').text(object[4]['long_name'] + " " +  object[3]['long_name'] + " " + object[2]['long_name'] + " " + object[1]['long_name']);
      }else{
        $('#address_ja').text("");
        return false;
      }
    }
  });
});</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-649540263c3e8444165969-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540263c3e8444165969-2">2</div><div class="crayon-num" data-line="crayon-649540263c3e8444165969-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540263c3e8444165969-4">4</div><div class="crayon-num" data-line="crayon-649540263c3e8444165969-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540263c3e8444165969-6">6</div><div class="crayon-num" data-line="crayon-649540263c3e8444165969-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540263c3e8444165969-8">8</div><div class="crayon-num" data-line="crayon-649540263c3e8444165969-9">9</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540263c3e8444165969-10">10</div><div class="crayon-num" data-line="crayon-649540263c3e8444165969-11">11</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540263c3e8444165969-12">12</div><div class="crayon-num" data-line="crayon-649540263c3e8444165969-13">13</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540263c3e8444165969-14">14</div><div class="crayon-num" data-line="crayon-649540263c3e8444165969-15">15</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540263c3e8444165969-16">16</div><div class="crayon-num" data-line="crayon-649540263c3e8444165969-17">17</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540263c3e8444165969-18">18</div><div class="crayon-num" data-line="crayon-649540263c3e8444165969-19">19</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540263c3e8444165969-20">20</div><div class="crayon-num" data-line="crayon-649540263c3e8444165969-21">21</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540263c3e8444165969-22">22</div><div class="crayon-num" data-line="crayon-649540263c3e8444165969-23">23</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540263c3e8444165969-24">24</div><div class="crayon-num" data-line="crayon-649540263c3e8444165969-25">25</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540263c3e8444165969-26">26</div><div class="crayon-num" data-line="crayon-649540263c3e8444165969-27">27</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-649540263c3e8444165969-1"><span class="crayon-sy">$</span><span class="crayon-sy">(</span><span class="crayon-s">'#search_address_ja'</span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-e">bind</span><span class="crayon-sy">(</span><span class="crayon-s">'input propertychange'</span><span class="crayon-sy">,</span><span class="crayon-t">function</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-649540263c3e8444165969-2"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-i">zipcode</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-sy">$</span><span class="crayon-sy">(</span><span class="crayon-s">'#search_address_ja'</span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-e">val</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-649540263c3e8444165969-3"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-sy">$</span><span class="crayon-sy">.</span><span class="crayon-e">ajax</span><span class="crayon-sy">(</span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540263c3e8444165969-4"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-i">type</span><span class="crayon-h"> </span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-s">'get'</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-649540263c3e8444165969-5"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-i">url</span><span class="crayon-h"> </span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-s">'https://maps.googleapis.com/maps/api/geocode/json'</span><span class="crayon-sy">,</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540263c3e8444165969-6"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-i">crossDomain</span><span class="crayon-h"> </span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-t">true</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-649540263c3e8444165969-7"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-i">dataType</span><span class="crayon-h"> </span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-s">'json'</span><span class="crayon-sy">,</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540263c3e8444165969-8"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-i">data</span><span class="crayon-h"> </span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-649540263c3e8444165969-9"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-i">address</span><span class="crayon-h"> </span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i">zipcode</span><span class="crayon-sy">,</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540263c3e8444165969-10"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-i">language</span><span class="crayon-h"> </span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-s">'ja'</span><span class="crayon-sy">,</span>　<span class="crayon-c">//ここで言語を指定できる</span></div><div class="crayon-line" id="crayon-649540263c3e8444165969-11"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-i">sensor</span><span class="crayon-h"> </span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-t">false</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540263c3e8444165969-12"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">}</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-649540263c3e8444165969-13"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-i">success</span><span class="crayon-h"> </span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-t">function</span><span class="crayon-sy">(</span><span class="crayon-i">resp</span><span class="crayon-sy">)</span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540263c3e8444165969-14"><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">resp</span><span class="crayon-sy">.</span><span class="crayon-i">status</span><span class="crayon-h"> </span>==<span class="crayon-h"> </span><span class="crayon-s">"OK"</span><span class="crayon-sy">)</span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-649540263c3e8444165969-15"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-t">object</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-i">resp</span><span class="crayon-sy">.</span><span class="crayon-i">results</span><span class="crayon-sy">[</span><span class="crayon-cn">0</span><span class="crayon-sy">]</span><span class="crayon-sy">.</span><span class="crayon-i">address_components</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540263c3e8444165969-16"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-st">if</span><span class="crayon-h"> </span><span class="crayon-sy">(</span><span class="crayon-t">object</span><span class="crayon-sy">.</span><span class="crayon-i">length</span><span class="crayon-h"> </span><span class="crayon-h">&lt;</span><span class="crayon-h"> </span><span class="crayon-cn">5</span><span class="crayon-sy">)</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-649540263c3e8444165969-17"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">$</span><span class="crayon-sy">(</span><span class="crayon-s">'#address_ja'</span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-e">text</span><span class="crayon-sy">(</span><span class="crayon-s">""</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540263c3e8444165969-18"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-st">return</span><span class="crayon-h"> </span><span class="crayon-t">false</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-649540263c3e8444165969-19"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">}</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540263c3e8444165969-20"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">$</span><span class="crayon-sy">(</span><span class="crayon-s">'#address_ja'</span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-e">text</span><span class="crayon-sy">(</span><span class="crayon-t">object</span><span class="crayon-sy">[</span><span class="crayon-cn">4</span><span class="crayon-sy">]</span><span class="crayon-sy">[</span><span class="crayon-s">'long_name'</span><span class="crayon-sy">]</span><span class="crayon-h"> </span>+<span class="crayon-h"> </span><span class="crayon-s">" "</span><span class="crayon-h"> </span>+<span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-t">object</span><span class="crayon-sy">[</span><span class="crayon-cn">3</span><span class="crayon-sy">]</span><span class="crayon-sy">[</span><span class="crayon-s">'long_name'</span><span class="crayon-sy">]</span><span class="crayon-h"> </span>+<span class="crayon-h"> </span><span class="crayon-s">" "</span><span class="crayon-h"> </span>+<span class="crayon-h"> </span><span class="crayon-t">object</span><span class="crayon-sy">[</span><span class="crayon-cn">2</span><span class="crayon-sy">]</span><span class="crayon-sy">[</span><span class="crayon-s">'long_name'</span><span class="crayon-sy">]</span><span class="crayon-h"> </span>+<span class="crayon-h"> </span><span class="crayon-s">" "</span><span class="crayon-h"> </span>+<span class="crayon-h"> </span><span class="crayon-t">object</span><span class="crayon-sy">[</span><span class="crayon-cn">1</span><span class="crayon-sy">]</span><span class="crayon-sy">[</span><span class="crayon-s">'long_name'</span><span class="crayon-sy">]</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-649540263c3e8444165969-21"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">}</span><span class="crayon-st">else</span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540263c3e8444165969-22"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">$</span><span class="crayon-sy">(</span><span class="crayon-s">'#address_ja'</span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-e">text</span><span class="crayon-sy">(</span><span class="crayon-s">""</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-649540263c3e8444165969-23"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-st">return</span><span class="crayon-h"> </span><span class="crayon-t">false</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540263c3e8444165969-24"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-649540263c3e8444165969-25"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">}</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540263c3e8444165969-26"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-sy">}</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-649540263c3e8444165969-27"><span class="crayon-sy">}</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p></p>
<h2>参考</h2>
<p><a href="https://developers.google.com/maps/documentation/geocoding/intro?hl=ja" class="link" target="_blank">Google Maps Geocoding API &#8211; Google Developers</a></p>

Google Maps Geocoding APIを利用して郵便番号から住所を取得する

<p>海外のブログになりますが、<br />
イラストにて、デザインをする上で重要な知識、スキルとも言える「要素と原則」を丁寧に説明してくれています。</p>
<p><a href="https://designschool.canva.com/design-elements-principles/" target="_blank">Design Elements &amp; Principles</a></p>
<p><img decoding="async" src="/uploads-archive/2016/04/20DP_Infographic-662x3091.jpg" alt="20DP_Infographic-662x3091" width="500" class="aligncenter size-full wp-image-10423" srcset="/uploads-archive/2016/04/20DP_Infographic-662x3091.jpg 662w, /uploads-archive/2016/04/20DP_Infographic-662x3091-64x300.jpg 64w, /uploads-archive/2016/04/20DP_Infographic-662x3091-219x1024.jpg 219w, /uploads-archive/2016/04/20DP_Infographic-662x3091-228x1065.jpg 228w" sizes="(max-width: 662px) 100vw, 662px" /></p>
<p>ブログ内でそれぞれについて詳しく説明してくれていますが、<br />
僕はこの量の英語を読むのはさすがに苦労するので、翻訳したブログが出ることを期待します笑</p>
<p>この大元のブログがいろんなタメになる記事をいっぱい書いているので要チェックですね。</p>
<p><a href="https://designschool.canva.com/" target="_blank" class="link">Canva Design School Blog</a></p>


わかりやすいイラストによるデザインに大事な「要素と原則」

<p>MOOCという大学の講義を無料でも学べるサービスには有名なところでCoursera、edX等がありますが、Courseraにて今秋からData ScienceのMasterを取得できるプログラムが始まるらしいです。<br />
ただし、これは有料です。</p>
<p>公式<br />
<a href="https://www.coursera.org/university-programs/masters-in-computer-data-science" class="link">Master of Computer Science in Data Science (MCS-DS)</a></p>
<p>関連ニュース<br />
<a href="http://qz.com/650283/coursera-is-offering-a-way-to-get-a-real-masters-degree-for-a-lot-less-money/"　　class="link">&#8211; Coursera is offering a way to get a real master’s degree for a lot less money</a><br />
<a href="http://www.marketwired.com/press-release/first-mooc-based-masters-degree-data-science-presents-new-model-meeting-market-demand-2110101.htm"　　class="link">&#8211; The First MOOC-Based Master&#8217;s Degree in Data Science Presents a New Model for Meeting the Market Demand for Highly Skilled Data Scientists</a></p>
<p>Admissionを見てみると</p>
<blockquote><p>
Applicants must hold a bachelor’s degree. If it is not in computer science, applicants must have sufficient background in computer programming as well as data structures and algorithms. The recommended undergraduate GPA for applicants applying to the MCS-DS is a 3.2/4.0 or higher. All applicants must submit an application form, three letters of reference, a statement of purpose, resume, and official transcripts from all completed university coursework. TOEFL / IELTS scores may be required for international applicants.
</p></blockquote>
<p>とあり、学士号は必要なようですが、必ずしもcomputer scienceである必要はないようです。</p>
<p>これなら働きながら取得できるかもしれません。</p>
<p>Couseraといえば、最近流行り乗っかり、Machine Learningのコースを受講してみていますが、気軽に機械学習を学べるコンテンツは他にあまりないと思うので、とても恩恵を受けています。<br />
<a href="https://www.coursera.org/learn/machine-learning"　 class="link">Machine Learning</a></p>


CourseraでMasterが取れるようになるかもらしい

スパゲッティコードを整理してみる

bc39ab4aa42da2e300a76b020e249067-1024x574.jpg

css3のflexboxを使うとすごい簡単になるレイアウトを試してみた

<p>CINEMA4Dを使っているなら一度は見た事があるかもしれませんが、Cineversityというチュートリアルサイトが存在します。Cineversityはできたらカッコイイ表現のチュートリアルを動画でいくつもアップしています。</p>
<p>基本的に全て英語ですが、操作方法を解説してくれる部分については動画の通りに設定をすれば良いので、きちんと聞き取れなくても利用できると思います。</p>
<p>Cineversityにはこちらからどうぞ<a href="http://www.cineversity.com">http://www.cineversity.com</a></p>
<h2>membership option</h2>
<p>Cineversityのメンバーシップにはフリーとプレミアムが存在します。</p>
<p><a href="/uploads-archive/2016/04/2-1.gif" rel="attachment wp-att-10332"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-10332" src="/uploads-archive/2016/04/2-1.gif" alt="2" width="640" height="361" /></a></p>
<p>フリーでもチュートリアルを観る事はできるのですが内容に制限があります。</p>
<p>プレミアムは一年間で約1万円さらに初年度は約3万円とかなり割高ですが、結構便利なプラグインをいくつもダウンロードできるので、プラグインを購入したと思えば安いかもしれません。とはいえプレミアムに入るのは高い！という方がほとんどだと思います。約4万円をポンと出すのはかなり厳しい物があります。</p>
<p>しかし、MSAに加入しているユーザーなら無料でプレミアムメンバーとしてCineversityを利用できます。キャンペーンなどでCINEMA4Dを購入した方はMSAがついてくる事がよくあるみたいなので、MSAに加入している方は是非利用してみてください。</p>
<h2>プレミアムへのクーポンコード</h2>
<p>MSA加入者にはMAXONからCineversityをプレミアムで利用するためのクーポンコードがメールで送られます。おそらくMSAに加入した時点で送られているようなので確認してみてください。</p>
<p>メールの内容は全て英語表記で「Free Cineversity voucher for MSA customers」というタイトルで送られてきます。</p>
<p>&nbsp;</p>
<p>送られてきたクーポンコードをUse Couponから入力し、名前や住所などを入力すればプレミアムメンバーに変更できます。</p>
<h2>便利なプラグインをダウンロードできるCV-TOOLBOX</h2>
<p>TOOLBOXがどんな物かこちらを見て頂ければ分かりやすいと思います。</p>
<p>http://www.cineversity.com/vidplaylist/cineversity_resources/cv_toolbox</p>
<p>TOOLBOXはCineversityからダウンロードして、他のプラグインと同様に「プラグイン」のフォルダに入れてください。その後、CINEMA4Dを立ち上げ直すとCineversityの登録アドレスとパスを入力してログインすればOKです。</p>
<p><a href="/uploads-archive/2016/04/3-1.gif" rel="attachment wp-att-10333"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-10333" src="/uploads-archive/2016/04/3-1.gif" alt="3" width="640" height="382" /></a></p>
<p>プラグインにCV-Toolboxという名前で入っています。</p>
<p><a href="/uploads-archive/2016/04/4.gif" rel="attachment wp-att-10334"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-10334" src="/uploads-archive/2016/04/4.gif" alt="4" width="536" height="225" /></a></p>
<p>CV-Toolbox開き、ここから必要なプラグインにチェックを入れる事でダウンロードができます。</p>
<p><a href="/uploads-archive/2016/04/5.gif" rel="attachment wp-att-10335"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-10335" src="/uploads-archive/2016/04/5.gif" alt="5" width="640" height="370" /></a></p>


CINEMA4D 最新のチュートリアルとプラグインを利用できるCineversity

スマホに合ったステップリストをインラインSVGで

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


Company

Our Solutions

Support

News

Blog

Blogブログ

カテゴリーから探す

年別から見る

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

2016/04/20

2016/04/20

2016/04/19

2016/04/13

2016/04/13

2016/04/13

2016/04/12

2016/04/06

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