D3.jsでアニメーション付き棒グラフを作ってみました

<p>中国の省/州を選択すると該当の城市(区/县)の一覧を表示するデータを整理した。</p>
<p>ECサイトを運営するにあたり住所が間違っていると届かず、最悪の場合往復の送料を売り主が負担しなければならない。</p>
<p>越境だとかなりの額になってしまうこともあり、カートとしては極限まで間違いを減らす努力をしなければならない。</p>
<p>&nbsp;</p>
<p>実際のフォームがこちら。</p>
<p><a href="https://sterfield.co.jp/demo/hoshino/74/" target="_blank" rel="noopener">https://sterfield.co.jp/demo/hoshino/74/</a></p>
<p>&nbsp;</p>
<p>データは中国EMSから取得したので正しいはず、、</p>
<p>&nbsp;</p>
<p>こちらは香港の区の一覧。</p>
<p><a href="https://sterfield.co.jp/demo/hoshino/74/hk.html" target="_blank" rel="noopener">https://sterfield.co.jp/demo/hoshino/74/hk.html</a></p>


中国の省/州→城市(区/县)の一覧を取得するAjax

CodePenでReactを試してToDoリストを作ってみた

<h3>はじめに</h3>
<div style="padding-left: 15px;">
  PHPの日付演算の親切仕様について書きます。</p>
<p>  PHPの日付演算に於いて、下記のような言語仕様があります。</p>
<blockquote><p>  1月31日の一ヶ月後 → 3月2日</p></blockquote>
<p>  1月31日の一ヶ月後は2月31日、、、ですが存在しません。<br />
  なので自動的に足りない2日間を翌月の繰り越すというふうになっています。</p>
<p>  しかし、これでは月末処理などの際にとても困る！と言ったことがあることへの対応です。</p></div>
<h3>対応策</h3>
<div style="padding-left: 15px;">
  結論としては以下のような関数を挟むことで解消しました。<br />
  ただしこれは未来の日付なので加減算ではなく加算に対してのみ有効です。<br />


		<div id="crayon-649540264b471557855706" 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">PHP</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;">
    public static function addMonth($dd, $int)
    {
        // 初日
        $first = date('Y-m-1', strtotime($dd));
        // 加算した初日
        $calc_first = date('Y-m-d', strtotime($first." +".$int." month"));
        // 月のみ計算した仮の日にち
        $kari_yy = date('Y', strtotime($calc_first));
        $kari_mm = date('m', strtotime($calc_first));

        $kari_date_str = $kari_yy."-".$kari_mm."-".date('d', strtotime($dd));

        $ret = $kari_date_str;
        if ($kari_date_str != date('Y-m-d', strtotime($kari_date_str))) {
            $ff = date('Y-m-1', strtotime($dd.' +'.$int.' month'));
            $last = date('Y-m-d', strtotime($ff.' -1 day'));
            $ret = $last;
        }

        return $ret;
    }</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-649540264b471557855706-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540264b471557855706-2">2</div><div class="crayon-num" data-line="crayon-649540264b471557855706-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540264b471557855706-4">4</div><div class="crayon-num" data-line="crayon-649540264b471557855706-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540264b471557855706-6">6</div><div class="crayon-num" data-line="crayon-649540264b471557855706-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540264b471557855706-8">8</div><div class="crayon-num" data-line="crayon-649540264b471557855706-9">9</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540264b471557855706-10">10</div><div class="crayon-num" data-line="crayon-649540264b471557855706-11">11</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540264b471557855706-12">12</div><div class="crayon-num" data-line="crayon-649540264b471557855706-13">13</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540264b471557855706-14">14</div><div class="crayon-num" data-line="crayon-649540264b471557855706-15">15</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540264b471557855706-16">16</div><div class="crayon-num" data-line="crayon-649540264b471557855706-17">17</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540264b471557855706-18">18</div><div class="crayon-num" data-line="crayon-649540264b471557855706-19">19</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540264b471557855706-20">20</div><div class="crayon-num" data-line="crayon-649540264b471557855706-21">21</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-649540264b471557855706-1"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-m">public</span><span class="crayon-h"> </span><span class="crayon-m">static</span><span class="crayon-h"> </span><span class="crayon-t">function</span><span class="crayon-h"> </span><span class="crayon-e">addMonth</span><span class="crayon-sy">(</span><span class="crayon-v">$dd</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-v">$int</span><span class="crayon-sy">)</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540264b471557855706-2"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-649540264b471557855706-3"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-c">// 初日</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540264b471557855706-4"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">$first</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-e">date</span><span class="crayon-sy">(</span><span class="crayon-s">'Y-m-1'</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-e">strtotime</span><span class="crayon-sy">(</span><span class="crayon-v">$dd</span><span class="crayon-sy">)</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-649540264b471557855706-5"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-c">// 加算した初日</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540264b471557855706-6"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">$calc_first</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-e">date</span><span class="crayon-sy">(</span><span class="crayon-s">'Y-m-d'</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-e">strtotime</span><span class="crayon-sy">(</span><span class="crayon-v">$first</span><span class="crayon-sy">.</span><span class="crayon-s">" +"</span><span class="crayon-sy">.</span><span class="crayon-v">$int</span><span class="crayon-sy">.</span><span class="crayon-s">" month"</span><span class="crayon-sy">)</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-649540264b471557855706-7"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-c">// 月のみ計算した仮の日にち</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540264b471557855706-8"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">$kari_yy</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-e">date</span><span class="crayon-sy">(</span><span class="crayon-s">'Y'</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-e">strtotime</span><span class="crayon-sy">(</span><span class="crayon-v">$calc_first</span><span class="crayon-sy">)</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-649540264b471557855706-9"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">$kari_mm</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-e">date</span><span class="crayon-sy">(</span><span class="crayon-s">'m'</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-e">strtotime</span><span class="crayon-sy">(</span><span class="crayon-v">$calc_first</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-649540264b471557855706-10">&nbsp;</div><div class="crayon-line" id="crayon-649540264b471557855706-11"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">$kari_date_str</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-v">$kari_yy</span><span class="crayon-sy">.</span><span class="crayon-s">"-"</span><span class="crayon-sy">.</span><span class="crayon-v">$kari_mm</span><span class="crayon-sy">.</span><span class="crayon-s">"-"</span><span class="crayon-sy">.</span><span class="crayon-e">date</span><span class="crayon-sy">(</span><span class="crayon-s">'d'</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-e">strtotime</span><span class="crayon-sy">(</span><span class="crayon-v">$dd</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-649540264b471557855706-12">&nbsp;</div><div class="crayon-line" id="crayon-649540264b471557855706-13"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">$ret</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-v">$kari_date_str</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540264b471557855706-14"><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-v">$kari_date_str</span><span class="crayon-h"> </span><span class="crayon-sy">!</span>=<span class="crayon-h"> </span><span class="crayon-e">date</span><span class="crayon-sy">(</span><span class="crayon-s">'Y-m-d'</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-e">strtotime</span><span class="crayon-sy">(</span><span class="crayon-v">$kari_date_str</span><span class="crayon-sy">)</span><span class="crayon-sy">)</span><span class="crayon-sy">)</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-649540264b471557855706-15"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">$ff</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-e">date</span><span class="crayon-sy">(</span><span class="crayon-s">'Y-m-1'</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-e">strtotime</span><span class="crayon-sy">(</span><span class="crayon-v">$dd</span><span class="crayon-sy">.</span><span class="crayon-s">' +'</span><span class="crayon-sy">.</span><span class="crayon-v">$int</span><span class="crayon-sy">.</span><span class="crayon-s">' month'</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-649540264b471557855706-16"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">$last</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-e">date</span><span class="crayon-sy">(</span><span class="crayon-s">'Y-m-d'</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-e">strtotime</span><span class="crayon-sy">(</span><span class="crayon-v">$ff</span><span class="crayon-sy">.</span><span class="crayon-s">' -1 day'</span><span class="crayon-sy">)</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-649540264b471557855706-17"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">$ret</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-v">$last</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540264b471557855706-18"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-649540264b471557855706-19">&nbsp;</div><div class="crayon-line crayon-striped-line" id="crayon-649540264b471557855706-20"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-k ">return</span><span class="crayon-h"> </span><span class="crayon-v">$ret</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-649540264b471557855706-21"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">}</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

</div>
<h3>どういう仕組みか</h3>
<div style="padding-left: 15px;">
  上記で処理している内容ですが、、、</p>
<p>  処理する日付を &#8220;YYYY-mm-dd&#8221; 形式の文字列で渡します。<br />
  それに対して何ヶ月足すかを一緒に関数に渡します。</p>
<p>  前述で受け取った日付をAとします。何ヶ月後をzとします。</p>
<p>  そのAを一旦ついたちにした日付Bを生成。<br />
  Bからzヶ月後をまず算出。1日は加算時はズレることがないので確実に正確なものが演算で取得出来ます。<br />
  これをCとする。<br />
  このCの日付のみAの日付に置き換えます。これをDとします。</p>
<blockquote><p>  例)<br />
  A : 2017-01-31<br />
  z : 1<br />
  B : 2017-01-01<br />
  C : 2017-02-01<br />
  D : 2017-02-31</p></blockquote>
<p>  この場合Dが存在しない日付となります。<br />
  PHPの演算を中継すると &#8220;2017-03-02&#8221; となってしまいますが、、、</p>
<p>  このDと、演算後の2017-03-02が異なる場合だけ<br />
  「誤っているであろう&#8221;算出後の日付の前月末&#8221;」に設定するようにします。</p>
<p>  今回の &#8220;2017-03-02&#8221; が求めるものではなかったため<br />
  &#8220;2017-03&#8243;の前月である&#8221;2017-02&#8243;の月末、、、つまり&#8221;2017-02-28&#8243;を求めることが出来ました。</p></div>
<h3>概念としての抜け</h3>
<div style="padding-left: 15px;">
  この方法だと減算が考慮されていませんが、実装は難しくないでしょう。</p>
<p>  ただし、この加算処理を繰り返していくことで<br />
  「月末がズレていってしまう！」<br />
  という「末日」という概念にまでは対応しきれていません。</p>
<p>  これを考慮するには日付演算を使わずに「月末」というステータスを持つしかないのでは、といった所感です。</p></div>

PHPの日付演算を改良してみる

<h3>第五話</h3>
<p><img decoding="async" loading="lazy" src="/uploads-archive/2017/10/479089b78010423b5702baaaa414bf52-709x1024.jpg" alt="" width="709" height="1024" class="alignleft size-large wp-image-13359" srcset="/uploads-archive/2017/10/479089b78010423b5702baaaa414bf52-709x1024.jpg 709w, /uploads-archive/2017/10/479089b78010423b5702baaaa414bf52-208x300.jpg 208w, /uploads-archive/2017/10/479089b78010423b5702baaaa414bf52-228x329.jpg 228w, /uploads-archive/2017/10/479089b78010423b5702baaaa414bf52.jpg 720w" sizes="(max-width: 709px) 100vw, 709px" /></p>
<p><img decoding="async" loading="lazy" src="/uploads-archive/2017/10/40e3078c472ee171d679268e4eda7e8b-709x1024.jpg" alt="" width="709" height="1024" class="alignleft size-large wp-image-13360" srcset="/uploads-archive/2017/10/40e3078c472ee171d679268e4eda7e8b-709x1024.jpg 709w, /uploads-archive/2017/10/40e3078c472ee171d679268e4eda7e8b-208x300.jpg 208w, /uploads-archive/2017/10/40e3078c472ee171d679268e4eda7e8b-228x329.jpg 228w, /uploads-archive/2017/10/40e3078c472ee171d679268e4eda7e8b.jpg 720w" sizes="(max-width: 709px) 100vw, 709px" /></p>
<p><img decoding="async" loading="lazy" src="/uploads-archive/2017/10/820aabd45e8d2549f8f78c60f073ca77-709x1024.jpg" alt="" width="709" height="1024" class="alignleft size-large wp-image-13361" srcset="/uploads-archive/2017/10/820aabd45e8d2549f8f78c60f073ca77-709x1024.jpg 709w, /uploads-archive/2017/10/820aabd45e8d2549f8f78c60f073ca77-208x300.jpg 208w, /uploads-archive/2017/10/820aabd45e8d2549f8f78c60f073ca77-228x329.jpg 228w, /uploads-archive/2017/10/820aabd45e8d2549f8f78c60f073ca77.jpg 720w" sizes="(max-width: 709px) 100vw, 709px" /></p>
<p><img decoding="async" loading="lazy" src="/uploads-archive/2017/10/131578614b787d6411b449b59efa1e88-709x1024.jpg" alt="" width="709" height="1024" class="alignleft size-large wp-image-13362" srcset="/uploads-archive/2017/10/131578614b787d6411b449b59efa1e88-709x1024.jpg 709w, /uploads-archive/2017/10/131578614b787d6411b449b59efa1e88-208x300.jpg 208w, /uploads-archive/2017/10/131578614b787d6411b449b59efa1e88-228x329.jpg 228w, /uploads-archive/2017/10/131578614b787d6411b449b59efa1e88.jpg 720w" sizes="(max-width: 709px) 100vw, 709px" /></p>
<p><img decoding="async" loading="lazy" src="/uploads-archive/2017/10/5620f8b95d8dc21a55807a504975eb0a-709x1024.jpg" alt="" width="709" height="1024" class="alignleft size-large wp-image-13363" srcset="/uploads-archive/2017/10/5620f8b95d8dc21a55807a504975eb0a-709x1024.jpg 709w, /uploads-archive/2017/10/5620f8b95d8dc21a55807a504975eb0a-208x300.jpg 208w, /uploads-archive/2017/10/5620f8b95d8dc21a55807a504975eb0a-228x329.jpg 228w, /uploads-archive/2017/10/5620f8b95d8dc21a55807a504975eb0a.jpg 720w" sizes="(max-width: 709px) 100vw, 709px" /></p>
<p><img decoding="async" loading="lazy" src="/uploads-archive/2017/10/35704bb83de8f5267c45aabef3030536-709x1024.jpg" alt="" width="709" height="1024" class="alignleft size-large wp-image-13364" srcset="/uploads-archive/2017/10/35704bb83de8f5267c45aabef3030536-709x1024.jpg 709w, /uploads-archive/2017/10/35704bb83de8f5267c45aabef3030536-208x300.jpg 208w, /uploads-archive/2017/10/35704bb83de8f5267c45aabef3030536-228x329.jpg 228w, /uploads-archive/2017/10/35704bb83de8f5267c45aabef3030536.jpg 720w" sizes="(max-width: 709px) 100vw, 709px" /></p>
<p><img decoding="async" loading="lazy" src="/uploads-archive/2017/10/ff4c568dca7310c532b051c5cdea2dd8-709x1024.jpg" alt="" width="709" height="1024" class="alignleft size-large wp-image-13365" srcset="/uploads-archive/2017/10/ff4c568dca7310c532b051c5cdea2dd8-709x1024.jpg 709w, /uploads-archive/2017/10/ff4c568dca7310c532b051c5cdea2dd8-208x300.jpg 208w, /uploads-archive/2017/10/ff4c568dca7310c532b051c5cdea2dd8-228x329.jpg 228w, /uploads-archive/2017/10/ff4c568dca7310c532b051c5cdea2dd8.jpg 720w" sizes="(max-width: 709px) 100vw, 709px" /></p>
<p><img decoding="async" loading="lazy" src="/uploads-archive/2017/10/86be8dc5397ea32bd7c8f4459bff7210-709x1024.jpg" alt="" width="709" height="1024" class="alignleft size-large wp-image-13366" srcset="/uploads-archive/2017/10/86be8dc5397ea32bd7c8f4459bff7210-709x1024.jpg 709w, /uploads-archive/2017/10/86be8dc5397ea32bd7c8f4459bff7210-208x300.jpg 208w, /uploads-archive/2017/10/86be8dc5397ea32bd7c8f4459bff7210-228x329.jpg 228w, /uploads-archive/2017/10/86be8dc5397ea32bd7c8f4459bff7210.jpg 720w" sizes="(max-width: 709px) 100vw, 709px" /></p>
<p><img decoding="async" loading="lazy" src="/uploads-archive/2017/10/68b2946214c35490fd52ed23a46ab952-709x1024.jpg" alt="" width="709" height="1024" class="alignleft size-large wp-image-13367" srcset="/uploads-archive/2017/10/68b2946214c35490fd52ed23a46ab952-709x1024.jpg 709w, /uploads-archive/2017/10/68b2946214c35490fd52ed23a46ab952-208x300.jpg 208w, /uploads-archive/2017/10/68b2946214c35490fd52ed23a46ab952-228x329.jpg 228w, /uploads-archive/2017/10/68b2946214c35490fd52ed23a46ab952.jpg 720w" sizes="(max-width: 709px) 100vw, 709px" /></p>
<p><img decoding="async" loading="lazy" src="/uploads-archive/2017/10/55b7d252371e7e37c3a44ccf8143ac2c-709x1024.jpg" alt="" width="709" height="1024" class="alignleft size-large wp-image-13368" srcset="/uploads-archive/2017/10/55b7d252371e7e37c3a44ccf8143ac2c-709x1024.jpg 709w, /uploads-archive/2017/10/55b7d252371e7e37c3a44ccf8143ac2c-208x300.jpg 208w, /uploads-archive/2017/10/55b7d252371e7e37c3a44ccf8143ac2c-228x329.jpg 228w, /uploads-archive/2017/10/55b7d252371e7e37c3a44ccf8143ac2c.jpg 720w" sizes="(max-width: 709px) 100vw, 709px" /></p>
<p><img decoding="async" loading="lazy" src="/uploads-archive/2017/10/beb696158d384441ea46728c4350ba69-709x1024.jpg" alt="" width="709" height="1024" class="alignleft size-large wp-image-13369" srcset="/uploads-archive/2017/10/beb696158d384441ea46728c4350ba69-709x1024.jpg 709w, /uploads-archive/2017/10/beb696158d384441ea46728c4350ba69-208x300.jpg 208w, /uploads-archive/2017/10/beb696158d384441ea46728c4350ba69-228x329.jpg 228w, /uploads-archive/2017/10/beb696158d384441ea46728c4350ba69.jpg 720w" sizes="(max-width: 709px) 100vw, 709px" /></p>
<p><img decoding="async" loading="lazy" src="/uploads-archive/2017/10/ce41a13b6a14932bef6aacec3bcf4529-709x1024.jpg" alt="" width="709" height="1024" class="alignleft size-large wp-image-13370" srcset="/uploads-archive/2017/10/ce41a13b6a14932bef6aacec3bcf4529-709x1024.jpg 709w, /uploads-archive/2017/10/ce41a13b6a14932bef6aacec3bcf4529-208x300.jpg 208w, /uploads-archive/2017/10/ce41a13b6a14932bef6aacec3bcf4529-228x329.jpg 228w, /uploads-archive/2017/10/ce41a13b6a14932bef6aacec3bcf4529.jpg 720w" sizes="(max-width: 709px) 100vw, 709px" /></p>
<p><img decoding="async" loading="lazy" src="/uploads-archive/2017/10/1d2490d6be293d397574ecc5b66eb1ff-709x1024.jpg" alt="" width="709" height="1024" class="alignleft size-large wp-image-13371" srcset="/uploads-archive/2017/10/1d2490d6be293d397574ecc5b66eb1ff-709x1024.jpg 709w, /uploads-archive/2017/10/1d2490d6be293d397574ecc5b66eb1ff-208x300.jpg 208w, /uploads-archive/2017/10/1d2490d6be293d397574ecc5b66eb1ff-228x329.jpg 228w, /uploads-archive/2017/10/1d2490d6be293d397574ecc5b66eb1ff.jpg 720w" sizes="(max-width: 709px) 100vw, 709px" /></p>
<h3>ブラックジャックによろしくを二次利用させていただきました</h3>
<p>下記利用規約に則り、作品を二次利用させていただきました。</p>
<p><a href="http://mangaonweb.com/satoshuho/download/#kiyaku">利用規約</a></p>
<table>
<tbody>
<tr>
<td>タイトル</td>
<td>ブラックジャックによろしく</td>
</tr>
<tr>
<td>著者名</td>
<td>佐藤秀峰</td>
</tr>
<tr>
<td>サイト名</td>
<td>漫画 on web</td>
</tr>
</tbody>
</table>


large_スライド20.jpg

medium_スライド20.jpg

small_スライド20.jpg

thumbnail_スライド20.jpg

スライド20.jpg

(5)漫画でわかる越境EC！越境EC担当者によろしく！

Nginxリバースプロキ設定

small_switch.png

thumbnail_switch.png

switch.png

デバイスで見かけるON,OFFのボタンをhtmlとcssで実装してみる

<p>郵便番号を入力 → 都道府県 + 市区町村を自動入力</p>
<p>というのは日本ではよく見る。</p>
<p>ajaxzip3、ajaxzip2、jquery.jpostal.jsなどjQueryのプラグインが複数公開されているようだ。</p>
<p>&nbsp;</p>
<p>海外、特に台湾香港でもこのようなことをしたいという声を多々頂いていたのだが、なかなかできないでいた。</p>
<p>以下はその理由。</p>
<p>&nbsp;</p>
<h3>情報が少ない</h3>
<p>そもそも独自ドメインのECサイトが非常に少ないので、郵便番号を入力させるという必要があるサイトを作る機会があまり無いと思われ、そのようなjQueryプラグインはもちろん、まとまったデータなども全然見当たらなかった。</p>
<p>&nbsp;</p>
<h3>ルールが曖昧</h3>
<p>台湾の郵便番号は本当は5桁なのだが、そこまで細かくしなくてOKという暗黙のルールがあるらしく、「最初の3桁だけで送る」場合が多いようだ。</p>
<p>特にECサイトで極力お客様の手間を省きたい場合など5桁入力させるメリットは少ないようだ。</p>
<p>&nbsp;</p>
<h3>そもそも香港は郵便番号がない</h3>
<p>「香港は狭いので郵便番号が無くても配達可能」なのだそう。。</p>
<p>&nbsp;</p>
<h3>台湾人は自分の郵便番号を知らない</h3>
<p>これは良く言われるのだが、9月に初めて台灣に行ってみて改めて感じたのが、「台湾人は自分の郵便番号を知らない」。</p>
<p>なので入力のさせ方が特殊で、</p>
<p>日本：郵便番号入力 → 住所自動入力</p>
<p>台灣：住所入力 → 郵便番号自動入力</p>
<p>というように作らなければ入力できずに離脱してしまうそうだ。</p>
<p>&nbsp;</p>
<h3>以上をふまえて作ってみたのがこちら</h3>
<p><a class="demo" href="https://sterfield.co.jp/demo/hoshino/73/" target="_blank" rel="noopener">台灣郵便番号デモ</a></p>
<p>※データ整形がとても大変だったのでサンプルとなっています。(LaunchCarユーザーはご利用可！)</p>
<p>&nbsp;</p>
<h3>最後に</h3>
<p>郵便番号は国によってかなり違うようで、現地に詳しい方のサポートが欠かせないと改めて実感した。</p>
<p>(郵便番号にアルファベットを含む国もあるらしい、、)</p>
<p>台灣版の開発は<a href="http://www.asian-bridge.com/" target="_blank" rel="noopener">アジアンブリッジ社</a>のご協力により実現できました。</p>
<p>ありがとうございました！</p>


large_1280px-Flag_of_the_Republic_of_China.svg_-1024x682.png

medium_1280px-Flag_of_the_Republic_of_China.svg_-1024x682.png

small_1280px-Flag_of_the_Republic_of_China.svg_-1024x682.png

thumbnail_1280px-Flag_of_the_Republic_of_China.svg_-1024x682.png

1280px-Flag_of_the_Republic_of_China.svg_-1024x682.png

台湾の郵便番号を住所から逆引きするjQueryサンプル

<p>毎回iOSのメジャーバージョンアップには、影響を受けております。</p>
<p>去年のsafari10のバージョンアップの時には、ISO-2022-JPという文字コードのサポートが切られ、古いシステムを継続利用していたサイトがsafariのみ動作に異常を来たす状態になりました。</p>
<p>古いシステムと利用の少ないであろう文字コードということで、同様の事例自体がWeb上でも見当たらず、対応に四苦八苦したのを覚えています。</p>
<p>そして、今年のバージョンアップでも仕様が大きく変更になりました。</p>
<p>今回新たに搭載されるのITP（Intelligent Tracking Prevention)という機能は広告のトラッキングに影響を及ぼすということで広告業界全体で対応が迫られており、情報もたくさん出回っておりますので、今回は勉強メモ代わりにシェアします。</p>
<h2>ITP機能による広告配信の影響概要</h2>
<p>ITP機能におけるCookie情報の取扱い変更により、Safariブラウザでのウェブサイトコンバージョントラッキングの計測や<br />
リマケーティングの配信量に影響を及ぼす可能性がある</p>
<h3>変更内容</h3>
<p>過去24時間以内 ：3rdPartyがCookie情報へアクセス可能<br />
24時間～30日以内：3rdPartyがCookie情報へアクセス不可<br />
30日以降　　　　：Cookieが削除</p>
<h3>適用時期</h3>
<p>最新版OSにアップデートされた端末のSafariブラウザ</p>
<p>初期設定としてトラッキング（追跡）防止機能「ITP（Intelligent　Tracking Prevention）」がオン</p>
<h3>想定される影響範囲</h3>
<p>下記の各種コンバージョンの24時間以降のCookie情報に基づく計測が不可に<br />
-クリックスルー/ビュースルー/クロスデバイス コンバージョン<br />
⇒24時間以降のコンバージョン件数の減少(媒体の戻りCV数が減る)</p>
<p>24時間以降のCookie情報に基づく配信が不可に<br />
-リマーケティング<br />
⇒リーセンシーが2日以降のリストにおける配信数の減少</p>
<p>※影響の大きさは Safariの比率に依存</p>
<p>想定としては全体に対する30%(リマーケの配信数)が減ると予測。<br />
ただ、safariをアップデートしたユーザーから反映されるため急に30%減る訳ではなく徐々に減っていくと想定</p>
<h2>ITPに関する参考記事</h2>
<p><a href="https://quartet-communications.com/info/listing/market/40122" target="_blank" rel="noopener">https://quartet-communications.com/info/listing/market/40122</a></p>
<p>詳細なデータに基づく開設記事は上記サイトがよくまとまっています。</p>
<h2>広告効果測定ツール各社の対応</h2>
<h3>アドエビス</h3>
<p><a href="https://www.ebis.ne.jp/news/" target="_blank" rel="noopener">https://www.ebis.ne.jp/news/</a></p>
<p>11月末対応</p>
<h3>Webアンテナ</h3>
<p><a href="http://www.bebit.co.jp/wanote/column/7323/" target="_blank" rel="noopener">http://www.bebit.co.jp/wanote/column/7323/</a></p>
<p>ファーストパーティCookieのみを利用した計測方法にする修正を9月21日に実施</p>
<h3>ADプラン</h3>
<p><a href="http://www.opt.ne.jp/news/pr/detail/id=4123" target="_blank" rel="noopener">http://www.opt.ne.jp/news/pr/detail/id=4123</a></p>
<p>ファーストパーティ Cookie を優先して計測する対応で9月26日に実施</p>
<p>「ランディングページとコンバージョンページのドメインが異なるサイト」は10月末対応</p>
<p>3社ほど開示されている情報を抜粋しました。それぞれ対応に関するアナウンスが出ております。</p>


iOS11のsafariで広告効果測定が出来なくなる？ITP機能

【jQuery】放物線を使ったカートインアニメーション

<p>ブラウザベースのテストツールにseleniumというものがあります。ざっくり説明すれば、chromeやFirefoxの操作を自動化するツールです。しかもpython、ruby等さまざまなプログラミング言語から制御できるというお手軽さ。今回はWindows + Visual Studio Code + python3の環境で簡単な動作を交えて解説します。</p>
<p>VSCodeで任意のフォルダをプロジェクトフォルダとし、seleniumからchromeを制御するための<a href="https://sites.google.com/a/chromium.org/chromedriver/downloads">chromederiver</a>をダウンロードして任意のフォルダへ設置します。</p>
<p>あわせてコマンドプロンプトから</p>

		<div id="crayon-649540264aa99358496941" 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></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;">
pip install selenium</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-649540264aa99358496941-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-649540264aa99358496941-1"><span class="crayon-e">pip </span><span class="crayon-e">install </span><span class="crayon-i">selenium</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>を実行してpython用のseleniumをインストールします。これで基本的な準備は終わりました。</p>
<p>今回は、googleでキーワード検索結果のスクリーンショットを5ページぶん撮影する、という操作を自動化してみます。以下がそのプログラムです。</p>

		<div id="crayon-649540264aa9e340810849" 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></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;">
import os
from selenium import webdriver
from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.support import expected_conditions as EC
from selenium.webdriver.common.keys import Keys
from selenium.webdriver.common.by import By
driver = webdriver.Chrome("./chromedriver.exe") #chromedriverのパスを指定
driver.get("https://www.google.com/") # googleを開く
driver.find_element_by_css_selector('input[name="q"]').send_keys("sterfield") # 検索キーワードを指定
driver.find_element_by_css_selector('input[name="q"]').send_keys(Keys.RETURN) # ENTERキー押下で検索実行
for i in range(0, 4):
    # 検索結果ページの「次へ」リンクが表示されるまで最大10秒待機する
    wait = WebDriverWait(driver, 10)
    next_page = wait.until(EC.element_to_be_clickable((By.ID, "pnnext")))
    # スクリーンショット用のファイル名を生成
    basename = "screen_shot{0:02d}.png".format(i)
    filename = os.path.join(os.path.dirname(os.path.abspath(__file__)), basename)
    driver.save_screenshot(filename)
    # 次の検索結果ページへ遷移する
    next_page.click()
driver.quit()</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-649540264aa9e340810849-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540264aa9e340810849-2">2</div><div class="crayon-num" data-line="crayon-649540264aa9e340810849-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540264aa9e340810849-4">4</div><div class="crayon-num" data-line="crayon-649540264aa9e340810849-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540264aa9e340810849-6">6</div><div class="crayon-num" data-line="crayon-649540264aa9e340810849-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540264aa9e340810849-8">8</div><div class="crayon-num" data-line="crayon-649540264aa9e340810849-9">9</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540264aa9e340810849-10">10</div><div class="crayon-num" data-line="crayon-649540264aa9e340810849-11">11</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540264aa9e340810849-12">12</div><div class="crayon-num" data-line="crayon-649540264aa9e340810849-13">13</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540264aa9e340810849-14">14</div><div class="crayon-num" data-line="crayon-649540264aa9e340810849-15">15</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540264aa9e340810849-16">16</div><div class="crayon-num" data-line="crayon-649540264aa9e340810849-17">17</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540264aa9e340810849-18">18</div><div class="crayon-num" data-line="crayon-649540264aa9e340810849-19">19</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540264aa9e340810849-20">20</div><div class="crayon-num" data-line="crayon-649540264aa9e340810849-21">21</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-649540264aa9e340810849-1"><span class="crayon-e">import </span><span class="crayon-e">os</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540264aa9e340810849-2"><span class="crayon-e">from </span><span class="crayon-e">selenium </span><span class="crayon-e">import </span><span class="crayon-e">webdriver</span></div><div class="crayon-line" id="crayon-649540264aa9e340810849-3"><span class="crayon-e">from </span><span class="crayon-i">selenium</span><span class="crayon-sy">.</span><span class="crayon-i">webdriver</span><span class="crayon-sy">.</span><span class="crayon-i">support</span><span class="crayon-sy">.</span><span class="crayon-e">ui </span><span class="crayon-e">import </span><span class="crayon-e">WebDriverWait</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540264aa9e340810849-4"><span class="crayon-e">from </span><span class="crayon-i">selenium</span><span class="crayon-sy">.</span><span class="crayon-i">webdriver</span><span class="crayon-sy">.</span><span class="crayon-e">support </span><span class="crayon-e">import </span><span class="crayon-e">expected_conditions </span><span class="crayon-st">as</span><span class="crayon-h"> </span><span class="crayon-e">EC</span></div><div class="crayon-line" id="crayon-649540264aa9e340810849-5"><span class="crayon-e">from </span><span class="crayon-i">selenium</span><span class="crayon-sy">.</span><span class="crayon-i">webdriver</span><span class="crayon-sy">.</span><span class="crayon-i">common</span><span class="crayon-sy">.</span><span class="crayon-e">keys </span><span class="crayon-e">import </span><span class="crayon-e">Keys</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540264aa9e340810849-6"><span class="crayon-e">from </span><span class="crayon-i">selenium</span><span class="crayon-sy">.</span><span class="crayon-i">webdriver</span><span class="crayon-sy">.</span><span class="crayon-i">common</span><span class="crayon-sy">.</span><span class="crayon-e">by </span><span class="crayon-e">import </span><span class="crayon-e">By</span></div><div class="crayon-line" id="crayon-649540264aa9e340810849-7"><span class="crayon-i">driver</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-i">webdriver</span><span class="crayon-sy">.</span><span class="crayon-e">Chrome</span><span class="crayon-sy">(</span><span class="crayon-s">"./chromedriver.exe"</span><span class="crayon-sy">)</span><span class="crayon-h"> </span><span class="crayon-p">#chromedriverのパスを指定</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540264aa9e340810849-8"><span class="crayon-i">driver</span><span class="crayon-sy">.</span><span class="crayon-e">get</span><span class="crayon-sy">(</span><span class="crayon-s">"https://www.google.com/"</span><span class="crayon-sy">)</span><span class="crayon-h"> </span><span class="crayon-p"># googleを開く</span></div><div class="crayon-line" id="crayon-649540264aa9e340810849-9"><span class="crayon-i">driver</span><span class="crayon-sy">.</span><span class="crayon-e">find_element_by_css_selector</span><span class="crayon-sy">(</span><span class="crayon-s">'input[name="q"]'</span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-e">send_keys</span><span class="crayon-sy">(</span><span class="crayon-s">"sterfield"</span><span class="crayon-sy">)</span><span class="crayon-h"> </span><span class="crayon-p"># 検索キーワードを指定</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540264aa9e340810849-10"><span class="crayon-i">driver</span><span class="crayon-sy">.</span><span class="crayon-e">find_element_by_css_selector</span><span class="crayon-sy">(</span><span class="crayon-s">'input[name="q"]'</span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-e">send_keys</span><span class="crayon-sy">(</span><span class="crayon-i">Keys</span><span class="crayon-sy">.</span><span class="crayon-st">RETURN</span><span class="crayon-sy">)</span><span class="crayon-h"> </span><span class="crayon-p"># ENTERキー押下で検索実行</span></div><div class="crayon-line" id="crayon-649540264aa9e340810849-11"><span class="crayon-st">for</span><span class="crayon-h"> </span><span class="crayon-i">i</span><span class="crayon-h"> </span><span class="crayon-st">in</span><span class="crayon-h"> </span><span class="crayon-e">range</span><span class="crayon-sy">(</span><span class="crayon-cn">0</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-cn">4</span><span class="crayon-sy">)</span><span class="crayon-sy">:</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540264aa9e340810849-12"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-p"># 検索結果ページの「次へ」リンクが表示されるまで最大10秒待機する</span></div><div class="crayon-line" id="crayon-649540264aa9e340810849-13"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-i">wait</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-e">WebDriverWait</span><span class="crayon-sy">(</span><span class="crayon-i">driver</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-cn">10</span><span class="crayon-sy">)</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540264aa9e340810849-14"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-i">next_page</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-i">wait</span><span class="crayon-sy">.</span><span class="crayon-e">until</span><span class="crayon-sy">(</span><span class="crayon-i">EC</span><span class="crayon-sy">.</span><span class="crayon-e">element_to_be_clickable</span><span class="crayon-sy">(</span><span class="crayon-sy">(</span><span class="crayon-i">By</span><span class="crayon-sy">.</span><span class="crayon-i">ID</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-s">"pnnext"</span><span class="crayon-sy">)</span><span class="crayon-sy">)</span><span class="crayon-sy">)</span></div><div class="crayon-line" id="crayon-649540264aa9e340810849-15"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-p"># スクリーンショット用のファイル名を生成</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540264aa9e340810849-16"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-i">basename</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-s">"screen_shot{0:02d}.png"</span><span class="crayon-sy">.</span><span class="crayon-e">format</span><span class="crayon-sy">(</span><span class="crayon-i">i</span><span class="crayon-sy">)</span></div><div class="crayon-line" id="crayon-649540264aa9e340810849-17"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-i">filename</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-i">os</span><span class="crayon-sy">.</span><span class="crayon-i">path</span><span class="crayon-sy">.</span><span class="crayon-e">join</span><span class="crayon-sy">(</span><span class="crayon-i">os</span><span class="crayon-sy">.</span><span class="crayon-i">path</span><span class="crayon-sy">.</span><span class="crayon-e">dirname</span><span class="crayon-sy">(</span><span class="crayon-i">os</span><span class="crayon-sy">.</span><span class="crayon-i">path</span><span class="crayon-sy">.</span><span class="crayon-e">abspath</span><span class="crayon-sy">(</span><span class="crayon-i">__file__</span><span class="crayon-sy">)</span><span class="crayon-sy">)</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-i">basename</span><span class="crayon-sy">)</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540264aa9e340810849-18"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-i">driver</span><span class="crayon-sy">.</span><span class="crayon-e">save_screenshot</span><span class="crayon-sy">(</span><span class="crayon-i">filename</span><span class="crayon-sy">)</span></div><div class="crayon-line" id="crayon-649540264aa9e340810849-19"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-p"># 次の検索結果ページへ遷移する</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540264aa9e340810849-20"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-i">next_page</span><span class="crayon-sy">.</span><span class="crayon-e">click</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span></div><div class="crayon-line" id="crayon-649540264aa9e340810849-21"><span class="crayon-i">driver</span><span class="crayon-sy">.</span><span class="crayon-e">quit</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>これを実行すると専用のプロファイルを持ったchromeが勝手に起動して、あっという間に検索、スクリーンショット撮影を終わらせてくれます。pythonのプログラムがあるフォルダにスクリーンショットも保存されました。</p>
<p><img decoding="async" loading="lazy" class="alignnone wp-image-13306 size-medium" src="/uploads-archive/2017/10/screen_shot00-300x287.png" alt="" width="300" height="287" srcset="/uploads-archive/2017/10/screen_shot00-300x287.png 300w, /uploads-archive/2017/10/screen_shot00-768x734.png 768w, /uploads-archive/2017/10/screen_shot00-228x218.png 228w, /uploads-archive/2017/10/screen_shot00.png 929w" sizes="(max-width: 300px) 100vw, 300px" /></p>
<p>今回はデモなので踏み込んだ使い方はしていませんが、サイト内全ページのスクリーンショット撮影自動化や、サイトの負荷テストなどかなり広範囲に応用が利くと思います。</p>

seleniumを使ってみよう

CSS3のPerspectiveを使ったパララックス

BeautifulSoup以外でのスクレイピング

Tomcat + Nginx + MariaDbに設定しよ(CentOS 7)

<h3>前回までのお話</h3>
<p>私立EC大学を卒業して、新任越境EC担当者に任命された斎藤くん。<br />
独自サイトに活路を見出すものの、中国のサーバ問題が立ちはだかる。<br />
その解決策として橋本から告げられた香港サーバとは…？！</p>

<h3>第四話</h3>
<p><img decoding="async" loading="lazy" class="alignleft size-large wp-image-13251" src="/uploads-archive/2017/09/ccfaf531cfe3bd76729c9024de6815a8-709x1024.jpg" alt="" width="709" height="1024" srcset="/uploads-archive/2017/09/ccfaf531cfe3bd76729c9024de6815a8-709x1024.jpg 709w, /uploads-archive/2017/09/ccfaf531cfe3bd76729c9024de6815a8-208x300.jpg 208w, /uploads-archive/2017/09/ccfaf531cfe3bd76729c9024de6815a8-228x329.jpg 228w, /uploads-archive/2017/09/ccfaf531cfe3bd76729c9024de6815a8.jpg 720w" sizes="(max-width: 709px) 100vw, 709px" /></p>
<p><img decoding="async" loading="lazy" class="alignleft size-large wp-image-13252" src="/uploads-archive/2017/09/6f89200a233102a09ad3b260eee61445-709x1024.jpg" alt="" width="709" height="1024" srcset="/uploads-archive/2017/09/6f89200a233102a09ad3b260eee61445-709x1024.jpg 709w, /uploads-archive/2017/09/6f89200a233102a09ad3b260eee61445-208x300.jpg 208w, /uploads-archive/2017/09/6f89200a233102a09ad3b260eee61445-228x329.jpg 228w, /uploads-archive/2017/09/6f89200a233102a09ad3b260eee61445.jpg 720w" sizes="(max-width: 709px) 100vw, 709px" /></p>
<p><img decoding="async" loading="lazy" class="alignleft size-large wp-image-13253" src="/uploads-archive/2017/09/e19a3fc06b040784e999b95d2f032e0b-709x1024.jpg" alt="" width="709" height="1024" srcset="/uploads-archive/2017/09/e19a3fc06b040784e999b95d2f032e0b-709x1024.jpg 709w, /uploads-archive/2017/09/e19a3fc06b040784e999b95d2f032e0b-208x300.jpg 208w, /uploads-archive/2017/09/e19a3fc06b040784e999b95d2f032e0b-228x329.jpg 228w, /uploads-archive/2017/09/e19a3fc06b040784e999b95d2f032e0b.jpg 720w" sizes="(max-width: 709px) 100vw, 709px" /></p>
<p><img decoding="async" loading="lazy" class="alignleft size-large wp-image-13254" src="/uploads-archive/2017/09/1dc4d19d2886d8dd5d75a53eed27a1bc-709x1024.jpg" alt="" width="709" height="1024" srcset="/uploads-archive/2017/09/1dc4d19d2886d8dd5d75a53eed27a1bc-709x1024.jpg 709w, /uploads-archive/2017/09/1dc4d19d2886d8dd5d75a53eed27a1bc-208x300.jpg 208w, /uploads-archive/2017/09/1dc4d19d2886d8dd5d75a53eed27a1bc-228x329.jpg 228w, /uploads-archive/2017/09/1dc4d19d2886d8dd5d75a53eed27a1bc.jpg 720w" sizes="(max-width: 709px) 100vw, 709px" /></p>
<p><img decoding="async" loading="lazy" class="alignleft size-large wp-image-13255" src="/uploads-archive/2017/09/6d3eceb04d96c11441a0f84b5d8cb6b0-709x1024.jpg" alt="" width="709" height="1024" srcset="/uploads-archive/2017/09/6d3eceb04d96c11441a0f84b5d8cb6b0-709x1024.jpg 709w, /uploads-archive/2017/09/6d3eceb04d96c11441a0f84b5d8cb6b0-208x300.jpg 208w, /uploads-archive/2017/09/6d3eceb04d96c11441a0f84b5d8cb6b0-228x329.jpg 228w, /uploads-archive/2017/09/6d3eceb04d96c11441a0f84b5d8cb6b0.jpg 720w" sizes="(max-width: 709px) 100vw, 709px" /></p>
<p><img decoding="async" loading="lazy" class="alignleft size-large wp-image-13256" src="/uploads-archive/2017/09/6e8b190971b60a89390f6275696650f9-709x1024.jpg" alt="" width="709" height="1024" srcset="/uploads-archive/2017/09/6e8b190971b60a89390f6275696650f9-709x1024.jpg 709w, /uploads-archive/2017/09/6e8b190971b60a89390f6275696650f9-208x300.jpg 208w, /uploads-archive/2017/09/6e8b190971b60a89390f6275696650f9-228x329.jpg 228w, /uploads-archive/2017/09/6e8b190971b60a89390f6275696650f9.jpg 720w" sizes="(max-width: 709px) 100vw, 709px" /></p>
<p><img decoding="async" loading="lazy" class="alignleft size-large wp-image-13257" src="/uploads-archive/2017/09/0102562b58277cf46fa1af23c664ffc5-709x1024.jpg" alt="" width="709" height="1024" srcset="/uploads-archive/2017/09/0102562b58277cf46fa1af23c664ffc5-709x1024.jpg 709w, /uploads-archive/2017/09/0102562b58277cf46fa1af23c664ffc5-208x300.jpg 208w, /uploads-archive/2017/09/0102562b58277cf46fa1af23c664ffc5-228x329.jpg 228w, /uploads-archive/2017/09/0102562b58277cf46fa1af23c664ffc5.jpg 720w" sizes="(max-width: 709px) 100vw, 709px" /></p>
<p><img decoding="async" loading="lazy" class="alignleft size-large wp-image-13258" src="/uploads-archive/2017/09/c6db9b558a62d1c26990297d28cc6901-709x1024.jpg" alt="" width="709" height="1024" srcset="/uploads-archive/2017/09/c6db9b558a62d1c26990297d28cc6901-709x1024.jpg 709w, /uploads-archive/2017/09/c6db9b558a62d1c26990297d28cc6901-208x300.jpg 208w, /uploads-archive/2017/09/c6db9b558a62d1c26990297d28cc6901-228x329.jpg 228w, /uploads-archive/2017/09/c6db9b558a62d1c26990297d28cc6901.jpg 720w" sizes="(max-width: 709px) 100vw, 709px" /></p>
<p><img decoding="async" loading="lazy" class="alignleft size-large wp-image-13259" src="/uploads-archive/2017/09/7d90b81ae27a13938e211e1ed1f9a2dc-709x1024.jpg" alt="" width="709" height="1024" srcset="/uploads-archive/2017/09/7d90b81ae27a13938e211e1ed1f9a2dc-709x1024.jpg 709w, /uploads-archive/2017/09/7d90b81ae27a13938e211e1ed1f9a2dc-208x300.jpg 208w, /uploads-archive/2017/09/7d90b81ae27a13938e211e1ed1f9a2dc-228x329.jpg 228w, /uploads-archive/2017/09/7d90b81ae27a13938e211e1ed1f9a2dc.jpg 720w" sizes="(max-width: 709px) 100vw, 709px" /></p>
<h3>ブラックジャックによろしくを二次利用させていただきました</h3>
<p>下記利用規約に則り、作品を二次利用させていただきました。</p>
<p><a href="http://mangaonweb.com/satoshuho/download/#kiyaku">利用規約</a></p>
<table>
<tbody>
<tr>
<td>タイトル</td>
<td>ブラックジャックによろしく</td>
</tr>
<tr>
<td>著者名</td>
<td>佐藤秀峰</td>
</tr>
<tr>
<td>サイト名</td>
<td>漫画 on web</td>
</tr>
</tbody>
</table>


large_スライド02.jpg

medium_スライド02.jpg

small_スライド02.jpg

thumbnail_スライド02.jpg

スライド02.jpg

(4)漫画でわかる越境EC！越境EC担当者によろしく！

<p>商品やサービスを紹介するためにアニメーションを使った映像が活用されますが、イラストを動かしてアニメーションを作成するのは結構骨の折れる作業です。</p>
<p>キャラクターを登場させて、説明させるような場合は1フレームずつ画を作らなくてはいけない事もあります。</p>
<p>そこで少しでも簡単にキャラクターをキャラクターを動かすことはできないかな？とリサーチしたところ、「どうやらadobe Animateが良さそうだぞ」という所にたどり着きました。</p>
<h2>adobe Animateってなに？</h2>
<p>そもそも何じゃそりゃ？ということですが、元の名前は「Adobe Flash Professional」でした。</p>
<p>「Flashは完全に消える事に…」というようなタイトルの記事がここ数か月のうちにたくさん出ていたので、これから始めるのはリスクがあるかなと思ったのですが、最近ではアニメ制作会社の一部でも使用しているとの事だったので、とりあえずどんな物か調べてみることに。</p>
<p><img decoding="async" loading="lazy" class="alignnone size-full wp-image-13242" src="/uploads-archive/2017/09/1.jpg" alt="" width="640" height="348" srcset="/uploads-archive/2017/09/1.jpg 640w, /uploads-archive/2017/09/1-300x163.jpg 300w, /uploads-archive/2017/09/1-228x124.jpg 228w" sizes="(max-width: 640px) 100vw, 640px" /></p>
<p>簡単にいうとFlashで良く行われていたアニメーションやゲームをHTML5やwebGlで吐き出せるというアプリケーションです。</p>
<p>そういえば、なぜadobe Animateが良さそうだと思ったかというと、1コマずつ作成しなくても、初めと終わりを設定すれば途中の画は自動で作ってくれるという、素晴らしい機能があります。</p>
<h2>アニメーションをpremiereに取り込む方法</h2>
<p><img decoding="async" loading="lazy" class="alignnone size-full wp-image-13265" src="/uploads-archive/2017/09/2.jpg" alt="" width="640" height="554" srcset="/uploads-archive/2017/09/2.jpg 640w, /uploads-archive/2017/09/2-300x260.jpg 300w, /uploads-archive/2017/09/2-228x197.jpg 228w" sizes="(max-width: 640px) 100vw, 640px" /></p>
<p>書き出しから「ムービーの書き出し」を選択します。</p>
<p>premiere側はメディアの読み込み時に一番最初の画像を選択して、画像シーケンスにチェックを入れれば読み込む事ができます。</p>
<p>&nbsp;</p>
<p>&nbsp;</p>


「adobe animate CC」が結構使える！Premiereにアニメーションを読み込む方法

<p>顔認証の技術が実用段階に達しており、様々な場所で使われるようになると言われている。<br />
本日発表される最新のiPhoneにも顔認証によるロック解除機能が搭載されるとされており、もし本当であればこれを機に急速に普及する可能性が高い。</p>
<p>最新の本人認証手段としていろんなことが便利になりそうな予感がするが、<br />
私はこの顔認証という技術の本当の利用価値は決済にあると思う。</p>
<p>そもそも端末を持ち歩く必要が無いので利便性としては従来のQRコードなどとは比べ物にならないほど高い。<br />
今までも例えば指紋認証という手段はあったが、認証に時間がかかっていたり汚れや傷で認証できないこともあったようだ。<br />
具体的な技術は分からないが多くの技術情報サイトでは指紋認証よりも顔認証の精度の方が高いとしている。</p>
<p>このような取り組みはすでに世界中で始まっているようだ。</p>
<p>https://matsunosuke.jp/post-39021/<br />
三井住友FGが顔パス決済を推進しており、2017年に実証実験を開始するとのこと。</p>
<p>http://jp.techcrunch.com/2017/09/05/20170903alibaba-debuts-smile-to-pay/<br />
世界一の電子決済サービスAlipayは既に「smile to pay」としてサービスを提供しており、杭州のKFCで実証実験を始めているようだ。</p>
<p style="text-align: center;"><iframe loading="lazy" width="300" height="150" src="https://players.brightcove.net/5392214352001/default_default/index.html?videoId=5561006420001" allowfullscreen="allowfullscreen" frameborder="0"></iframe></p>
<p>日本では電子決済が全く普及しないが、さすがにここまで便利になったら使われるようになるだろう。</p>


【顔決済】次の決済の主流は顔認証決済か

<p>今や、webサイトの開発・制作には欠かせない存在といっても過言ではないchromeのデベロッパーツールですが、<br />
もしかしたら意外と知られてないかもしれないという機能を紹介したいと思います。<br />
こんなの当たり前だよ！って感じでしたらすみません&#8230;</p>
<p>早速紹介したいと思いますが、chromeのデベロッパーツール自体の説明については省略させて頂きます。<br />
一応初心者向けの方を対象にした記事を貼っておきます。</p>
<p><a href="https://saruwakakun.com/html-css/basic/chrome-dev-tool">初心者向け！Chromeの検証機能（デベロッパーツール）の使い方</a><br />
&nbsp;<br />
記事にもありますが、<br />
ツールを開くにはショートカットも使用でき、<br />
<strong>「option」 + 「command」 + 「i」</strong>(Macの場合)<br />
<strong>「F12」</strong>(Windowsの場合)<br />
で開くことができます。</p>
<ol>
<li><a href="#i1">テーマ変更</a></li>
<li><a href="#i2">ルーラー表示</a></li>
<li><a href="#i3">要素の疑似状態を確認</a></li>
<li><a href="#i4">背景画像のチェック</a></li>
<li><a href="#i5">検証ツール表示の時だけできる「再読み込み」</a></li>
<li><a href="#i6">使用していないcssやjavascriptをチェック</a></li>
<li><a href="#i7">デバイスモード(PC)</a></li>
<li><a href="#i8">キャプチャを撮る</a></li>
</ol>
<p>&nbsp;</p>
<h2 id="i1">1.テーマ変更</h2>
<p>テーマといっても通常白い画面を黒に変更するといっただけです。<br />
ツールを開いている状態で、右上の「︙」をクリックして表示される「<strong>Setting</strong>」を選択します。</p>
<p><img decoding="async" loading="lazy" class="alignnone wp-image-13212" src="/uploads-archive/2017/09/d5e6b04ca2ec57983a3327c383b21617.png" alt="" width="448" height="324" srcset="/uploads-archive/2017/09/d5e6b04ca2ec57983a3327c383b21617.png 723w, /uploads-archive/2017/09/d5e6b04ca2ec57983a3327c383b21617-300x217.png 300w, /uploads-archive/2017/09/d5e6b04ca2ec57983a3327c383b21617-228x165.png 228w" sizes="(max-width: 448px) 100vw, 448px" /><br />
※すでに黒くしている画面です</p>
<p>Setting画面の<strong>PreferencesのAppearance</strong>の項目で、<br />
<strong>Theme</strong>というのがあるので、それをDarkに変更するだけでOKです。</p>
<p><img decoding="async" loading="lazy" class="alignnone wp-image-13213" src="/uploads-archive/2017/09/6a9e8f608532336a5c60a706a2bf57d3.png" alt="" width="453" height="330" srcset="/uploads-archive/2017/09/6a9e8f608532336a5c60a706a2bf57d3.png 716w, /uploads-archive/2017/09/6a9e8f608532336a5c60a706a2bf57d3-300x219.png 300w, /uploads-archive/2017/09/6a9e8f608532336a5c60a706a2bf57d3-228x166.png 228w" sizes="(max-width: 453px) 100vw, 453px" /></p>
<p>ターミナルに慣れている人にはこの黒い画面が良かったりするかもしれませんね。</p>
<p>&nbsp;</p>
<h2 id="i2">2.ルーラー表示</h2>
<p>ルーラーを表示させることができますが、<br />
先程のテーマ変更の時に表示した<strong>Setting画面のPreferencesのElements</strong>の項目にある、<br />
「Show rulers」にチェックを入れるだけです。<br />
ちょうど上の画像の下のほうに映っています。</p>
<p>チェックを入れると、<br />
ツールを開いてElementsのソースにマウスオーバーしている時に以下のように表示されます。</p>
<p><img decoding="async" loading="lazy" width="1024" height="803" class="alignnone size-large wp-image-13214" src="/uploads-archive/2017/09/5be3024d83687e1e82e760c26ef80c3c-1024x803.png" alt="" /></p>
<p>ツールを開いてたら表示されるようにしてくれたほうが使い勝手がいい気がしますが&#8230;</p>
<p>&nbsp;</p>
<h2 id="i3">3.要素の疑似状態を確認</h2>
<p>要素の疑似状態というのはcssの、<strong>active,hover,focus,visited</strong>のことで、<br />
サイトを実際に触っていなくてもその状態にできるようになります。</p>
<p>疑似状態にさせたいタグを選択して右クリックを押すと以下のパネルが表示されるので任意のものを選択します。</p>
<p><img decoding="async" loading="lazy" class="alignnone wp-image-13215" src="/uploads-archive/2017/09/bc5bc6a112d73add49bae52b663d2826.png" alt="" width="451" height="341" srcset="/uploads-archive/2017/09/bc5bc6a112d73add49bae52b663d2826.png 718w, /uploads-archive/2017/09/bc5bc6a112d73add49bae52b663d2826-300x227.png 300w, /uploads-archive/2017/09/bc5bc6a112d73add49bae52b663d2826-228x172.png 228w" sizes="(max-width: 451px) 100vw, 451px" /></p>
<p>右クリックじゃなく、右上にある「<strong>:hov</strong>」をクリックすることでも可能です。</p>
<p><img decoding="async" loading="lazy" class="alignnone size-full wp-image-13216" src="/uploads-archive/2017/09/7c420322aec0f3e81a794a1f027c139e.png" alt="" width="335" height="150" srcset="/uploads-archive/2017/09/7c420322aec0f3e81a794a1f027c139e.png 335w, /uploads-archive/2017/09/7c420322aec0f3e81a794a1f027c139e-300x134.png 300w, /uploads-archive/2017/09/7c420322aec0f3e81a794a1f027c139e-228x102.png 228w" sizes="(max-width: 335px) 100vw, 335px" /></p>
<p>最近は特にhoverの処理が盛んなので、これは制作時、もしくは他のサイトを見たりする時によく使用します。</p>
<p>&nbsp;</p>
<h2 id="i4">4.背景画像のチェック</h2>
<p>imgタグで置いている画像はElementsのタグをマウスオーバーすればサイズが表示されますが、背景画像では、cssのurlの箇所をマウスオーバーしても表示されません。<br />
その場合は、右クリックを押すと、以下のような項目が表示されます。</p>
<p><img decoding="async" loading="lazy" class="alignnone size-large wp-image-13217" src="/uploads-archive/2017/09/591602f8df74f98091d0c09794712df0-1024x363.png" alt="" width="1024" height="363" srcset="/uploads-archive/2017/09/591602f8df74f98091d0c09794712df0-1024x363.png 1024w, /uploads-archive/2017/09/591602f8df74f98091d0c09794712df0-300x106.png 300w, /uploads-archive/2017/09/591602f8df74f98091d0c09794712df0-768x273.png 768w, /uploads-archive/2017/09/591602f8df74f98091d0c09794712df0-228x81.png 228w, /uploads-archive/2017/09/591602f8df74f98091d0c09794712df0.png 1834w" sizes="(max-width: 1024px) 100vw, 1024px" /></p>
<p>これで「<strong>Sources Panel</strong>」もしくは「<strong>Application Panel</strong>」を選択すると、画像の重さやサイズがわかるようになります。</p>
<p><img decoding="async" loading="lazy" class="alignnone wp-image-13218" src="/uploads-archive/2017/09/017254b58b285665e417a02a7731cfa7.png" alt="" width="368" height="286" srcset="/uploads-archive/2017/09/017254b58b285665e417a02a7731cfa7.png 702w, /uploads-archive/2017/09/017254b58b285665e417a02a7731cfa7-300x233.png 300w, /uploads-archive/2017/09/017254b58b285665e417a02a7731cfa7-228x177.png 228w" sizes="(max-width: 368px) 100vw, 368px" /></p>
<p>サイズが0×0に表示されることがあるので。その場合はもう１つの方で見ればわかるかと思います。</p>
<p>&nbsp;</p>
<h2 id="i5">5.検証ツール表示の時だけできる「再読み込み」</h2>
<p>ツールを表示してる時だけ再読込のボタンを長押しすると、違った再読込をすることが出来ます。<br />
「<strong>ハード再読み込み</strong>」と「<strong>キャッシュの消去とハード再読み込み</strong>」の2つができるようになります。</p>
<p><img decoding="async" loading="lazy" class="alignnone wp-image-13220" src="/uploads-archive/2017/09/4a47bc9754d3131aab52fa5eaad54f0e-1024x756.jpg" alt="" width="688" height="517" /></p>
<p>ハード再読み込みってなんでしょうね&#8230;</p>
<p>キャッシュが残っている、残ってしまいそうな時はこの読み込み方法をするといいかもしれません。</p>
<p>&nbsp;</p>
<h2 id="i6">使用していないcssやjavascriptをチェック</h2>
<p>ツールを開いてる状態で、console drawerが表示されている時(開いてない場合escボタンを押すと表示されます)<br />
consoleの左になる「<strong>︙</strong>」をクリックすると、以下の項目が表示されます。</p>
<p><img decoding="async" loading="lazy" class="alignnone wp-image-13228" src="/uploads-archive/2017/09/4cc9690ae118909bb7b356b67bb8f536.png" alt="" width="450" height="337" srcset="/uploads-archive/2017/09/4cc9690ae118909bb7b356b67bb8f536.png 699w, /uploads-archive/2017/09/4cc9690ae118909bb7b356b67bb8f536-300x225.png 300w, /uploads-archive/2017/09/4cc9690ae118909bb7b356b67bb8f536-228x171.png 228w" sizes="(max-width: 450px) 100vw, 450px" /></p>
<p>ここで、「<strong>Coverage</strong>」というのを選択すると、</p>
<p><img decoding="async" loading="lazy" class="alignnone wp-image-13229" src="/uploads-archive/2017/09/e036c790288afdd93df1da398e181233.png" alt="" width="449" height="429" srcset="/uploads-archive/2017/09/e036c790288afdd93df1da398e181233.png 700w, /uploads-archive/2017/09/e036c790288afdd93df1da398e181233-300x287.png 300w, /uploads-archive/2017/09/e036c790288afdd93df1da398e181233-228x218.png 228w" sizes="(max-width: 449px) 100vw, 449px" /></p>
<p>このような画面が出てるので、reloadボタンを押すと、チェックが始まります。<br />
チェック完了すると以下のような画面になります。</p>
<p><img decoding="async" loading="lazy" class="alignnone wp-image-13230" src="/uploads-archive/2017/09/ef8857e83410be36a40d7656d41c84c3.png" alt="" width="451" height="481" srcset="/uploads-archive/2017/09/ef8857e83410be36a40d7656d41c84c3.png 700w, /uploads-archive/2017/09/ef8857e83410be36a40d7656d41c84c3-282x300.png 282w, /uploads-archive/2017/09/ef8857e83410be36a40d7656d41c84c3-228x243.png 228w" sizes="(max-width: 451px) 100vw, 451px" /></p>
<p>緑が使用されている、赤が使用されていないものになります。<br />
下の画面でファイルを選択すると、上でさらに詳細がわかります。</p>
<p>いらないコードを削除したい場合良いかもしれません。</p>
<p>&nbsp;</p>
<h2 id="i6">6.デバイスモード</h2>
<p>iPhoneやAndroidのシミュレート出来るのはもうご存知かと思いますが、PCのモードがあるのは意外と知らないのでは？と思ったので紹介します。</p>
<p>Settings画面の「<strong>Devices</strong>」を選択すると、いろんなデバイスを追加出来る画面があります。<br />
この中で、「<strong>Laptop with HiDPI screen</strong>」「<strong>Laptop with MDPI screen</strong>」にチェックをいれるだけです。</p>
<p><img decoding="async" loading="lazy" class="alignnone wp-image-13221" src="/uploads-archive/2017/09/62904e6dc378931045337c87372d3eb2.png" alt="" width="379" height="357" srcset="/uploads-archive/2017/09/62904e6dc378931045337c87372d3eb2.png 702w, /uploads-archive/2017/09/62904e6dc378931045337c87372d3eb2-300x282.png 300w, /uploads-archive/2017/09/62904e6dc378931045337c87372d3eb2-228x215.png 228w" sizes="(max-width: 379px) 100vw, 379px" /></p>
<p>そして、デバイスモードの画面で、モードを変更しようとすると、</p>
<p><img decoding="async" loading="lazy" class="alignnone size-large wp-image-13222" src="/uploads-archive/2017/09/e9453bff22c20e760b41d3f96f5f2972-1024x684.png" alt="" width="1024" height="684" srcset="/uploads-archive/2017/09/e9453bff22c20e760b41d3f96f5f2972-1024x684.png 1024w, /uploads-archive/2017/09/e9453bff22c20e760b41d3f96f5f2972-300x200.png 300w, /uploads-archive/2017/09/e9453bff22c20e760b41d3f96f5f2972-768x513.png 768w, /uploads-archive/2017/09/e9453bff22c20e760b41d3f96f5f2972-228x152.png 228w, /uploads-archive/2017/09/e9453bff22c20e760b41d3f96f5f2972.png 1101w" sizes="(max-width: 1024px) 100vw, 1024px" /></p>
<p>追加した2つが表示されており、これで確認することができます。<br />
「<strong>Laptop with HiDPI screen</strong>」は、1440×900<br />
「<strong>Laptop with MDPI screen</strong>」は、1280×800<br />
のサイズで表示してくれます。</p>
<p>PCモードいる？とか最初は思ったのですが、<br />
このサイズで見たい時や、ノートPCしかない時は便利です。</p>
<p>また、HiDPIはRetinaみたいなものなので、<br />
Retina対応のPCでない場合、Retinaでどういう風に見えているかみたいなのがチェック出来るようです(どこまで本物と同じかはわかりませんが&#8230;)</p>
<p>&nbsp;</p>
<h2 id="i7">7.キャプチャを撮る</h2>
<p>キャプチャは拡張機能やfirefoxのアドオンでしかできなかったのですが、<br />
このツールの機能で撮ることができます。</p>
<p>撮り方は私が把握してるのでは2つありますが、<br />
まずは先程紹介したデバイスモードの続きのものを紹介したいと思います。</p>
<p>デバイスモードを開いている時、右上の「<strong>︙</strong>」をクリックすると、以下の項目が出てきます。</p>
<p><img decoding="async" loading="lazy" class="alignnone size-large wp-image-13224" src="/uploads-archive/2017/09/d8d17aead1b4b4162abe970abe689f36-1024x660.png" alt="" width="1024" height="660" srcset="/uploads-archive/2017/09/d8d17aead1b4b4162abe970abe689f36-1024x660.png 1024w, /uploads-archive/2017/09/d8d17aead1b4b4162abe970abe689f36-300x193.png 300w, /uploads-archive/2017/09/d8d17aead1b4b4162abe970abe689f36-768x495.png 768w, /uploads-archive/2017/09/d8d17aead1b4b4162abe970abe689f36-228x147.png 228w, /uploads-archive/2017/09/d8d17aead1b4b4162abe970abe689f36.png 1169w" sizes="(max-width: 1024px) 100vw, 1024px" /></p>
<p>「<strong>Capture screenshot</strong>」もしくは「<strong>Capture full size screenshot</strong>」を選択すればキャプチャが撮れてしまいます。<br />
ただ、フルサイズの場合はサイトによっては上手く撮れない場合があります。</p>
<p>pc.verもスマホ.verも撮れるので便利ですね〜</p>
<p>いちいちデバイスモードにするのが面倒くさいなという方にはもう一つの方法が良いかと思います。</p>
<p>それはツールを表示し、ツール上で<strong>「command」+「shift」+「p」</strong>を押すと、以下のような画面が表示されます。</p>
<p><img decoding="async" loading="lazy" class="alignnone wp-image-13225" src="/uploads-archive/2017/09/5349447e2fec40ef2bd248a9637906eb.png" alt="" width="451" height="366" srcset="/uploads-archive/2017/09/5349447e2fec40ef2bd248a9637906eb.png 703w, /uploads-archive/2017/09/5349447e2fec40ef2bd248a9637906eb-300x244.png 300w, /uploads-archive/2017/09/5349447e2fec40ef2bd248a9637906eb-228x185.png 228w" sizes="(max-width: 451px) 100vw, 451px" /></p>
<p>ここでcapと打つと、</p>
<p><img decoding="async" loading="lazy" class="alignnone wp-image-13226" src="/uploads-archive/2017/09/286e50a66450e014bf9ba490f0b407a1.png" alt="" width="450" height="367" srcset="/uploads-archive/2017/09/286e50a66450e014bf9ba490f0b407a1.png 701w, /uploads-archive/2017/09/286e50a66450e014bf9ba490f0b407a1-300x245.png 300w, /uploads-archive/2017/09/286e50a66450e014bf9ba490f0b407a1-228x186.png 228w" sizes="(max-width: 450px) 100vw, 450px" /></p>
<p>先ほどと同じ文言のキャプチャを撮る項目が表示されるので、選択すればOKです！<br />
Mobileと表示されていますが、デバイスモードにしていない時は、PCの見ている画面でキャプチャを撮ることができます。</p>
<p>Chromeのデベロッパーツールでキャプチャを撮ろうと思ったら、<br />
ショートカットでツールを表示して(「command」+「option」+「i」)、<br />
<strong>「command」+「shift」+「p」</strong>を押して、<br />
capと打って、<br />
フルサイズか今開いている画面を選ぶ<br />
の4段階で完了しますね。</p>
<p>まぁちょっとプロセス面倒くさいかもしれないですね笑</p>
<p>今回はちょっとした機能の紹介でしたが、デベロッパーツールはまだまだ機能を持っています。</p>
<p>NetworkやPerformanceで、サイトをもっと速く表示させるためにチェックしたり等、<br />
まだまだ私自身も使いこなせていないので勉強したいと思います。</p>


large_5be3024d83687e1e82e760c26ef80c3c-1024x803.png

medium_5be3024d83687e1e82e760c26ef80c3c-1024x803.png

small_5be3024d83687e1e82e760c26ef80c3c-1024x803.png

thumbnail_5be3024d83687e1e82e760c26ef80c3c-1024x803.png

5be3024d83687e1e82e760c26ef80c3c-1024x803.png

意外と知らないかもしれないchromeのデベロッパーツールの機能

Company

Our Solutions

Support

News

Blog

Blogブログ

カテゴリーから探す

年別から見る

記事一覧

2017/11/15

2017/11/15

2017/11/14

2017/10/11

2017/10/11

2017/10/11

2017/10/11

2017/10/11

2017/10/11

2017/10/11

2017/10/10

2017/09/30

2017/09/13

2017/09/13

2017/09/13

2017/09/13

2017/09/13

2017/09/12