横幅だけじゃない！Media Queryでの指定の方法

nino-eye (5).jpg

「Matter.js」を使ってCanvasの物理演算をやってみました

<p>前回はフィルターの設定を飛ばして、送り状の印刷を説明してしまったので、今回はフィルターの設定方法をご紹介します。</p>
<p>フィルターを作るにはまずスタートメニューのフィルタ設定を開きます。</p>
<p><a href="/uploads-archive/2014/10/yupuri1.gif"><img decoding="async" loading="lazy" class="alignnone  wp-image-6066" src="/uploads-archive/2014/10/yupuri1.gif" alt="yupuri1" width="377" height="299" /></a></p>
<p>&nbsp;</p>
<p>フィルタ設定を開くの下のような画面になります。</p>
<p>フィルタには取込フィルタと出力フィルタがあります。今回は取込フィルタを作成するので、タブを取込にして下さい。</p>
<p>&nbsp;</p>
<p><a href="/uploads-archive/2014/10/yuupaket1.gif"><img decoding="async" loading="lazy" class="alignnone  wp-image-6133" src="/uploads-archive/2014/10/yuupaket1.gif" alt="yuupaket1" width="621" height="437" /></a></p>
<p>「新規」をクリックすると下の様なポップアップが出てくるので、フィルタの種類を「発送データ」、詳細設定にチェックを入れてＯＫをクリックして下さい。簡易編集でも大丈夫ですが、色んなモールの管理ツールと情報をリンクさせる場合には詳細でフィルタを作成する方が汎用性があるのでオススメします。</p>
<p><a href="/uploads-archive/2014/10/yuupaket2.gif"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-6134" src="/uploads-archive/2014/10/yuupaket2.gif" alt="yuupaket2" width="282" height="179" /></a></p>
<p>&nbsp;</p>
<p>するとこんな画面になります。取込ファイルパスにはこれから作るフィルタを介して取込ファイルを指定します。</p>
<p>フォーマット種別には「フリーフォーマット」の他に「楽天」「e-決済」「yahoo」「amazon」が既に用意されています。</p>
<p>モールの管理ツールから直接出力したCSVに合わせて作ったフィルタですが、yahooは最近仕様が変わっていますし、楽天については何等かのツールを使って出力している方も多いと思います。デフォルトで用意されたフィルタをコピーして使うのがイイかもしれません。今回はとりあえずフリーフォーマットで作ります。</p>
<p>データ形式、列見出し、区切り文字、囲み文字についても設定が必要です。通常のCSVなら画像の通りで良いと思います。</p>
<p>&nbsp;</p>
<p>画面の下部にはかなりの数の項目が出てきます。画面のサイズを変更できないので正直かなり見難いです。</p>
<p><a href="/uploads-archive/2014/10/yuupaket3.gif"><img decoding="async" loading="lazy" class="alignnone  wp-image-6137" src="/uploads-archive/2014/10/yuupaket3.gif" alt="yuupaket3" width="624" height="439" /></a></p>
<p>ゆうパケットで仕様する際には印刷できる内容が限られているので、一部の項目だけ紐づける事になります。</p>
<p>まず「郵便種別」の項目の固定値のセルに「9」を入力します。9はゆうパケットを意味しています。</p>
<p>「元／着払／代引」の項目は「0」を入力します。ゆうパケットは着払いも代引きも対応していないので元払いを意味する0にしておきます。</p>
<p>続いて「送り状種別」は「1800800001」と入力して下さい。これは送り状の形式で「ゆうパケットタックシール」というものを意味していいます。基本的にゆうパケットは「ゆうパケットタックシール」に印刷をします。基本設定で使用する送り状を「ゆうパケットタックシール」にしておく必要があります。</p>
<p><a href="/uploads-archive/2014/10/yuupaket4.gif"><img decoding="async" loading="lazy" class="alignnone  wp-image-6140" src="/uploads-archive/2014/10/yuupaket4.gif" alt="yuupaket4" width="621" height="182" /></a></p>
<p>送り先の情報については補助情報のセルをクリックします。ここで取込ファイルパスに指定したデータを元に取り込む項目を設定します。</p>
<p><a href="/uploads-archive/2014/10/yuupaket5.gif"><img decoding="async" loading="lazy" class="alignnone  wp-image-6147" src="/uploads-archive/2014/10/yuupaket5.gif" alt="yuupaket5" width="630" height="444" /></a></p>
<p>「取込データから選択」にチェックをいれて、送り先紐づける項目を選択します。</p>
<p>ゆうパケットタックシールに必要な項目は以下になります。</p>
<p>・お届け先郵便番号</p>
<p>・お届け先住所　（※ＣＳＶの仕様によって住所２、住所３の紐づけが必要になる場合もあります。）</p>
<p>・お届け先名称　（※ＣＳＶの仕様によって名称２の紐づけが必要になる場合もあります。）</p>
<p>&nbsp;</p>
<p>以下の内容は固定値にで入力しておくと楽です。</p>
<p>・お届け先敬称区分　→　基本的は「様」となる「0」で良いと思います。</p>
<p>・ご依頼主郵便番号</p>
<p>・ご依頼主住所</p>
<p>・ご依頼主名称</p>
<p>・ご依頼主敬称区分　→様をつける必要がないので空欄で大丈夫です。</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>


ゆうプリＲでゆうパケット用のフィルターを作成する方法

<p>WebGLなどCanvas上でグラフィックを扱う場合、</p>
<p>JSON化されたデータを読み込んで、表示するという手順がよく使われることになると思います。</p>
<p>このJSON化されたグラフィックデータなのどデータには、ユーザーにダウンロードされて流用されることを避けたいものも多いかと思います。</p>
<p>Flashなどのプラグインを使った場合は、コードをユーザーに見られないようにすることができるので、このリスクを避けられますが、</p>
<p>HTML5でJSONを扱う場合はJavaScriptを使って読み込むことになるため、</p>
<p>ユーザーがHTMLやJavaScriptからデータの場所をたどってJSONデータがダウンロードされるリスクが高まります。</p>
<p>&nbsp;</p>
<p>そこで、JSONデータを難読化して、簡単にはJSONデータが利用できないような仕組みについて、</p>
<p>調べて実際にやってみました。</p>
<p>&nbsp;</p>
<p>↓こちらが作ってみたものです。</p>
<p><a class="demo" href="/demo/ninomiya/55/" target="_blank">DEMO</a></p>
<p>&nbsp;</p>
<h2>方法</h2>
<h3>1.JSONコードを暗号化する。</h3>
<p><a class="link" href="http://www.broadband-xp.com/obfuscation/crypt.html" target="_blank">参考サイト： JavaScript難読化のためのヒント</a></p>
<p>今回はこちらの記事を参考に、暗号化を試みてみました。</p>
<p>&nbsp;</p>
<h3>2. 暗号化前のJSON本体はPHPで読み込み、URLを伏せる</h3>
<p>暗号化前のJSONデータはPHPで記述したURLからアクセスするようにして、</p>
<p>ユーザーからは直接URLがわからないようにしました。</p>
<p>&nbsp;</p>
<h3>3.暗号解読のJavaScriptコードも暗号化する。</h3>
<p>JavaScriptコード自体も暗号化して、より難読生を高めます。</p>
<p>ただ、暗号解読のコードは記述せざるを得なかったりするので、</p>
<p>飽くまでも、解読するための手間を多くするのが限界です。</p>
<p>&nbsp;</p>
<p>その他参考サイト</p>
<p><a class="link" href="http://ja.wikipedia.org/wiki/%E3%82%B7%E3%83%BC%E3%82%B6%E3%83%BC%E6%9A%97%E5%8F%B7" target="_blank">シーザー暗号 &#8211; Wikipedia</a></p>
<p><a class="link" href="http://www.php-ref.com/bapi/02_ord.html" target="_blank">ＰＨＰリファレンス（ord()）</a></p>
<p>&nbsp;</p>


JSONデータの難読化について調べてみました

HTML5のCanvasで画像をリサイズ＆トリミングして中央表示する方法

<p>運営するネットショップの配送方法として「ゆうパケット」の利用を新たに開始しました。</p>
<p>ゆうパケットのサービス自体は最近始まったばかりなので今後利用される方もいると思い、送り状を作成するツールの使い方についてまとめます。</p>
<p>ゆうパケット用の送り状を作成するソフトは「ゆうプリＲ」を使用します。</p>
<p><a href="/uploads-archive/2014/10/yupuri1.gif"><img decoding="async" loading="lazy" class="alignnone  wp-image-6066" src="/uploads-archive/2014/10/yupuri1.gif" alt="yupuri1" width="406" height="322" /></a></p>
<p>&nbsp;</p>
<p>ゆうプリＲは日本郵便にゆうパケット等の申し込みをした後にダウンロードページを送ってもらえます。</p>
<p>IDとパスワードがパソコン1台ずつに必要なので、ゆうプリＲを利用するパソコンの台数を伝えておく必要があります。</p>
<p>&nbsp;</p>
<p>ゆうプリＲ自体はかなり汎用性の高いツールでCSVの取込・出力フォーマットを自由に変えられます。</p>
<p>その分、設定には時間がかかるので、はじめは複雑に感じるかもしれません。</p>
<h6>ゆうプリＲで送り状を作成・印刷する</h6>
<p>「スタートメニュー」の「発送管理」をクリックすると「発送予定データ一覧」の画面が開きます</p>
<p><a href="/uploads-archive/2014/10/yupuri2.gif"><img decoding="async" loading="lazy" class="alignnone  wp-image-6065" src="/uploads-archive/2014/10/yupuri2.gif" alt="yupuri2" width="615" height="433" /></a></p>
<p>「ファイル取り込み」から発送先のデータを取込ます。</p>
<p>まずは取込フィルタを選択しますが、このフィルタはスタートメニューの「フィルタ設定」で作成します。</p>
<p>取込フィルタと出力フィルタのタブがあるので、取込フィルタを選択してから設定してください。</p>
<p>&nbsp;</p>
<p>入力元パスに取り込みたいファイルを指定して「取込」を行います。</p>
<p><a href="/uploads-archive/2014/10/yupuri4.gif"><img decoding="async" loading="lazy" class="alignnone  wp-image-6069" src="/uploads-archive/2014/10/yupuri4.gif" alt="yupuri4" width="630" height="443" /></a></p>
<p>取り込んだファイルの内容が発送予定データ一覧に反映されます。</p>
<p>発送する対象を選択すると「印刷」のボタンがクリックできるようになります。</p>
<p>後はプリンターに用紙を入れて印刷をするだけです。</p>
<p>&nbsp;</p>
<p>どのプリンターを使用するのかについては、スタートメニューの「送り状設定」＞「プリンタ設定マスタ」で設定が可能です。</p>
<h6>送り状番号のデータを出力する</h6>
<p>モール管理ツールなどに送り状の番号を戻してあげる為のCSVは「発送履歴」から出力できます。<a href="/uploads-archive/2014/10/yupuri5.gif"><img decoding="async" loading="lazy" class="alignnone  wp-image-6073" src="/uploads-archive/2014/10/yupuri5.gif" alt="yupuri5" width="648" height="456" /></a></p>
<p>出力したい送り先の情報を処理日などで絞り込んで出力をクリック、この際に出力フィルタを設定しておく必要があります。</p>
<p>出力フィルタに関してもスタートメニューのフィルタ設定で行えます。</p>


ゆうプリＲでゆうパケット用の送り状を印刷する方法

<p>webサイトのコーディングをしている際、複数のページを製作途中でヘッターやフッターといった共通の部分が変更になることがよくあります。</p>
<p>結局はCMS化する部分なんですが、変更になった部分を全ページに反映させてほしいという要望があります。（そういう要望の方が多いです。）こちらとしては、どこかのページさえあってればもう十分だとは思うのですが、CMS化の概念がわからないと十分だということもよくわからないかと思います。</p>
<p>とはいえ、全ページを反映させるのは手間なので、コーディングの段階からCMSっぽくパーツ化してしまう方がいいのかもしれないと思う次第になってきました。</p>
<p>いろいろな方法があるのですが、今ままで僕が知っていたものは、phpで書く、javascriptで無理矢理挿入するといったものですが、それぞれ問題点がありました。</p>
<p>今回は、手間も問題も少ないものを紹介したいと思います。</p>
<p>それは、jqueryのajaxを使用する方法です。</p>
<p>デモは以下になります。</p>
<p><a href="/demo/abe/48/" target="_blank" class="demo">DEMO</a></p>
<p>DEMOではload.jsに読み込ませる記述があります。</p>
<h2>jqueryのajaxを使って共通部分をパーツ化する</h2>
<p>まずは、当たり前ですが、jqueryを読み込みます。</p>
<p></p>

		<div id="crayon-649540157d9ac746072290" 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">XHTML</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;">
&lt;script src="js/jquery.min.js"&gt;&lt;/script&gt;</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-649540157d9ac746072290-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-649540157d9ac746072290-1"><span class="crayon-ta">&lt;script </span><span class="crayon-e ">src</span>=<span class="crayon-s">"js/jquery.min.js"</span><span class="crayon-h">&gt;</span><span class="crayon-ta">&lt;/script&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p> </p>
<p>そして,head内に、以下のように書き込みます。</p>
<p></p>

		<div id="crayon-649540157d9b1835063871" 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;">
$.ajax({
            type: 'GET',
            url: "header.html",
            dataType: 'html',
            success: function(data){
                $('body').prepend(data);
            },
            error:function() {
                       alert('問題がありました。');
                   }
        });</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-649540157d9b1835063871-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540157d9b1835063871-2">2</div><div class="crayon-num" data-line="crayon-649540157d9b1835063871-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540157d9b1835063871-4">4</div><div class="crayon-num" data-line="crayon-649540157d9b1835063871-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540157d9b1835063871-6">6</div><div class="crayon-num" data-line="crayon-649540157d9b1835063871-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540157d9b1835063871-8">8</div><div class="crayon-num" data-line="crayon-649540157d9b1835063871-9">9</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540157d9b1835063871-10">10</div><div class="crayon-num" data-line="crayon-649540157d9b1835063871-11">11</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-649540157d9b1835063871-1"><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-649540157d9b1835063871-2"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-i">type</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-649540157d9b1835063871-3"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-i">url</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-s">"header.html"</span><span class="crayon-sy">,</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540157d9b1835063871-4"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-i">dataType</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-s">'html'</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-649540157d9b1835063871-5"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-i">success</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">data</span><span class="crayon-sy">)</span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540157d9b1835063871-6"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">$</span><span class="crayon-sy">(</span><span class="crayon-s">'body'</span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-e">prepend</span><span class="crayon-sy">(</span><span class="crayon-i">data</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-649540157d9b1835063871-7"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">}</span><span class="crayon-sy">,</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540157d9b1835063871-8"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-i">error</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-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-649540157d9b1835063871-9"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span><span class="crayon-r">alert</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-649540157d9b1835063871-10"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-649540157d9b1835063871-11"><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-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p> </p>
<p>これだと、<body>の直後に入る感じですね。<br />
これだけです。</p>
<p>header.htmlのリンクは、読み込んでいるファイルからになります。</p>
<p>jQueryのloadだともっと簡単にできますが、エラーの処理等はないのと、読み込ませる場所の指定がajaxの方がしやすい感じがするので、こちらの方がいいのかと思ってます。</p>
<h3>問題点</h3>
<p>問題点としては、<br />
google chromeのローカル環境で見られないことです。<br />
(errorの処理になってしまいます)</p>
<p>それぐらいなので、他の方法よりは問題は少ないと思います。<br />
CMS化する際もパスを変更するぐらいでそのまま移行できますしけっこう良いかと思います。</p>
<p>一応chromeでも見れるようにする方法があるようです。</p>
<p><a href="http://dev.classmethod.jp/etc/chrome-localfile-security/" target="_blank">【小ネタ】Chromeのローカルセキュリティポリシーの回避 ｜ Developers.IO</a></p>
<p><a href="http://www.finefinefine.jp/web/jquery/kiji861/" target="_blank">Google Chromeの起動オプション</a></p>
<p>ちなみに共通化させる他の方法としては、以下があります。<br />
<a href="http://webdrawer.net/other/templates.html" target="_blank">更新するのが面倒！サイトの共通部分を簡単に作る様々な方法｜WEB Drawer</a></p>
<p>いずれはもっと簡単な方法がなにか出てきそうな気がしますね。。。</p>
<p>余談ですが、<br />
アイキャッチの画像は、<br />
以下からダウンロードしてきました。</p>
<p><a href="http://jeshoots.com/" target="_blank">JÉSHOOTS | Photos for business or personal use in high resolution for free</a></p>
<p>以下から発見しました。<br />
<a href="http://designinstruct.com/roundups/10-websites-free-stock-photos/" target="_blank">10 More Websites for Free Stock Photos</a></p>

jqueryを使ってwebサイトの共通部分をパーツ化する

<p>CSS2では、:first-childを使って最初の要素を選択することができますが、</p>
<p>CSS3では、:nth-child(n)を使って、特定の順番にある要素を選択することができます。</p>
<p>ただ、この:nth-child(n)は指定した要素の親要素からみた子要素が、<strong>要素の種類(タイプ)に関係なくカウントの対象となる</strong>ため、</p>
<p>例えば</p>

		<div id="crayon-649540157d5a6692001151" 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">XHTML</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;">
&lt;div&gt;
	&lt;h2&gt;h2の要素&lt;/h2&gt;
	&lt;h3&gt;h3の要素&lt;/h3&gt;
	&lt;p&gt;1&lt;/p&gt;
	&lt;p&gt;2&lt;/p&gt;
	&lt;p&gt;3&lt;/p&gt;
	&lt;p&gt;4&lt;/p&gt;
	&lt;p&gt;5&lt;/p&gt;
&lt;/div&gt;</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-649540157d5a6692001151-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540157d5a6692001151-2">2</div><div class="crayon-num" data-line="crayon-649540157d5a6692001151-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540157d5a6692001151-4">4</div><div class="crayon-num" data-line="crayon-649540157d5a6692001151-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540157d5a6692001151-6">6</div><div class="crayon-num" data-line="crayon-649540157d5a6692001151-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540157d5a6692001151-8">8</div><div class="crayon-num" data-line="crayon-649540157d5a6692001151-9">9</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-649540157d5a6692001151-1"><span class="crayon-r ">&lt;div&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540157d5a6692001151-2"><span class="crayon-i ">	</span><span class="crayon-r ">&lt;h2&gt;</span><span class="crayon-i ">h2の要素</span><span class="crayon-r ">&lt;/h2&gt;</span></div><div class="crayon-line" id="crayon-649540157d5a6692001151-3"><span class="crayon-i ">	</span><span class="crayon-r ">&lt;h3&gt;</span><span class="crayon-i ">h3の要素</span><span class="crayon-r ">&lt;/h3&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540157d5a6692001151-4"><span class="crayon-i ">	</span><span class="crayon-r ">&lt;p&gt;</span><span class="crayon-i ">1</span><span class="crayon-r ">&lt;/p&gt;</span></div><div class="crayon-line" id="crayon-649540157d5a6692001151-5"><span class="crayon-i ">	</span><span class="crayon-r ">&lt;p&gt;</span><span class="crayon-i ">2</span><span class="crayon-r ">&lt;/p&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540157d5a6692001151-6"><span class="crayon-i ">	</span><span class="crayon-r ">&lt;p&gt;</span><span class="crayon-i ">3</span><span class="crayon-r ">&lt;/p&gt;</span></div><div class="crayon-line" id="crayon-649540157d5a6692001151-7"><span class="crayon-i ">	</span><span class="crayon-r ">&lt;p&gt;</span><span class="crayon-i ">4</span><span class="crayon-r ">&lt;/p&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540157d5a6692001151-8"><span class="crayon-i ">	</span><span class="crayon-r ">&lt;p&gt;</span><span class="crayon-i ">5</span><span class="crayon-r ">&lt;/p&gt;</span></div><div class="crayon-line" id="crayon-649540157d5a6692001151-9"><span class="crayon-r ">&lt;/div&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>このようなHTMLで2番目の&lt;p&gt;を選択したいと思って、</p>
<p>「p:nth-child(2)」</p>
<p>としてしまった場合、pの親要素である&lt;div&gt;の子要素にはpの前に&lt;h2&gt;と&lt;h3&gt;があり、</p>
<p>この親要素の&lt;div&gt;の2番目の子要素はh3になるので、</p>
<p>p:nth-child(2)という要素は存在しないことになり、この指定は無効になってしまいます。</p>
<p>&nbsp;</p>
<p>そのため、2番目の要素の&lt;p&gt;を選ぶ場合は、</p>
<p>「p:nth-child(4)」</p>
<p>としなければならず、少しわかりづらいだけでなく、以後の更新作業において要素の位置がずれてしまい、</p>
<p>意図しない崩れが起きてしまう可能性も出てきてしまします。</p>
<p>&nbsp;</p>
<p>こんな場合に便利なのが、nth-childと同様にCSS3で使うことができるようになった、<strong>nth-of-type</strong>です。</p>
<p>nth-of-typeでは、先ほどと同じ</p>

		<div id="crayon-649540157d5aa568033988" 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">XHTML</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;">
&lt;div&gt;
	&lt;h2&gt;h2の要素&lt;/h2&gt;
	&lt;h3&gt;h3の要素&lt;/h3&gt;
	&lt;p&gt;1&lt;/p&gt;
	&lt;p&gt;2&lt;/p&gt;
	&lt;p&gt;3&lt;/p&gt;
	&lt;p&gt;4&lt;/p&gt;
	&lt;p&gt;5&lt;/p&gt;
&lt;/div&gt;</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-649540157d5aa568033988-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540157d5aa568033988-2">2</div><div class="crayon-num" data-line="crayon-649540157d5aa568033988-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540157d5aa568033988-4">4</div><div class="crayon-num" data-line="crayon-649540157d5aa568033988-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540157d5aa568033988-6">6</div><div class="crayon-num" data-line="crayon-649540157d5aa568033988-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540157d5aa568033988-8">8</div><div class="crayon-num" data-line="crayon-649540157d5aa568033988-9">9</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-649540157d5aa568033988-1"><span class="crayon-r ">&lt;div&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540157d5aa568033988-2"><span class="crayon-i ">	</span><span class="crayon-r ">&lt;h2&gt;</span><span class="crayon-i ">h2の要素</span><span class="crayon-r ">&lt;/h2&gt;</span></div><div class="crayon-line" id="crayon-649540157d5aa568033988-3"><span class="crayon-i ">	</span><span class="crayon-r ">&lt;h3&gt;</span><span class="crayon-i ">h3の要素</span><span class="crayon-r ">&lt;/h3&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540157d5aa568033988-4"><span class="crayon-i ">	</span><span class="crayon-r ">&lt;p&gt;</span><span class="crayon-i ">1</span><span class="crayon-r ">&lt;/p&gt;</span></div><div class="crayon-line" id="crayon-649540157d5aa568033988-5"><span class="crayon-i ">	</span><span class="crayon-r ">&lt;p&gt;</span><span class="crayon-i ">2</span><span class="crayon-r ">&lt;/p&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540157d5aa568033988-6"><span class="crayon-i ">	</span><span class="crayon-r ">&lt;p&gt;</span><span class="crayon-i ">3</span><span class="crayon-r ">&lt;/p&gt;</span></div><div class="crayon-line" id="crayon-649540157d5aa568033988-7"><span class="crayon-i ">	</span><span class="crayon-r ">&lt;p&gt;</span><span class="crayon-i ">4</span><span class="crayon-r ">&lt;/p&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540157d5aa568033988-8"><span class="crayon-i ">	</span><span class="crayon-r ">&lt;p&gt;</span><span class="crayon-i ">5</span><span class="crayon-r ">&lt;/p&gt;</span></div><div class="crayon-line" id="crayon-649540157d5aa568033988-9"><span class="crayon-r ">&lt;/div&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>のようはHTMLにおいて、</p>
<p>「p:nth-of-type(2)」</p>
<p>と指定した場合、&lt;p&gt;以外の要素が同じ親要素内に子要素として存在する場合でも、それらはカウントされず、</p>
<p><strong>指定した要素と同じタイプの要素だけを対象にカウントが行われる</strong>ため、</p>
<p>2番目にある&lt;p&gt;を選択することができます。</p>
<p>&nbsp;</p>
<p><a class="demo" href="/demo/ninomiya/53/" target="_blank">DEMO</a></p>
<p>&nbsp;</p>
<p>ちなみにこの:nth-of-typeは:nth-childと同じく、スマホのブラウザやChrome, FIreFox, Opera, IE9以上のブラウザで利用できます。</p>
<p>:nth-of-type(n)の類似の要素として、:first-of-type、:last-of-type、:nth-last-of-type(n)があります。</p>
<p>特定の種類の要素を対象にカウントするか、種類に関係なくカウントするかで、</p>
<p>使い分けするといいと思います。</p>

CSS3の:nth-child(n)と:nth-of-type(n)

<p>レスポンシブデザインでのコーディングをする際、PCとSPで同じ画像にするのが理想なのですが、<br />
やはり別の画像にしないと行けなくなるときがあります。</p>
<p>その際は、背景画像であれば、cssで変更できますが、<br />
通常の画像は,javascriptで横の幅のサイズを取得してそれにより、imgを変更したりしていますが、<br />
便利なsrcsetというタグがあるようです。<br />
srcsetは必要のない画像はロードしないので、いいですね。</p>
<p>以下のような使い方になるようです。</p>
<p></p>

		<div id="crayon-649540157d3b6527202210" 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">XHTML</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;">
&lt;img src="img/sample.jpg"
     srcset="img/sample.jpg 1x,
             img/sample2.jpg 2x"&gt;</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-649540157d3b6527202210-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540157d3b6527202210-2">2</div><div class="crayon-num" data-line="crayon-649540157d3b6527202210-3">3</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-649540157d3b6527202210-1"><span class="crayon-r ">&lt;img </span><span class="crayon-e ">src</span>=<span class="crayon-s ">"img/sample.jpg"</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540157d3b6527202210-2"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp; </span><span class="crayon-e ">srcset</span>=<span class="crayon-s ">"img/sample.jpg 1x,</span></div><div class="crayon-line" id="crayon-649540157d3b6527202210-3"><span class="crayon-s ">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; img/sample2.jpg 2x"</span><span class="crayon-r ">&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>srcsetに対応していないブラウザの場合は、srcを読み込んで、<br />
srcsetを読み込む場合、通常の場合はsample.jpgが読み込まれ、Retinaディスプレイではsample2.jpgを読み込むようです。</p>
<p>また、</p>
<p></p>

		<div id="crayon-649540157d3ba756041532" 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">XHTML</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;">
&lt;img src="img/sample.jpg"
     srcset="img/sample_sp.jpg 320w,
             img/sample2.jpg 640w"</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-649540157d3ba756041532-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540157d3ba756041532-2">2</div><div class="crayon-num" data-line="crayon-649540157d3ba756041532-3">3</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-649540157d3ba756041532-1"><span class="crayon-r ">&lt;img </span><span class="crayon-e ">src</span>=<span class="crayon-s ">"img/sample.jpg"</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540157d3ba756041532-2"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp; </span><span class="crayon-e ">srcset</span>=<span class="crayon-s ">"img/sample_sp.jpg 320w,</span></div><div class="crayon-line" id="crayon-649540157d3ba756041532-3"><span class="crayon-s ">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; img/sample2.jpg 640w"</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>このように記述すると、<br />
ウィンドウサイズが320px以下ならsample_sp.jpgが、640px以下かそれ以上ならsample2.jpgが読み込まれます。</p>
<p>まだ全てのブラウザで対応している訳じゃないとのことですが、<br />
<a href="http://scottjehl.github.io/picturefill/" target="_blank">Picturefill</a>を使えば対応出来るとのことです。</p>
<p>これがしっかり使えるようであれば便利ですね〜・・・<br />
とも思いますが、PCとSPで画像が簡単に変更が出来るという点では、作業量がちょっと増えるのかなとも思います。</p>
<p>ここでは書いてませんが、pictureというタグも同じように使用可能なようで、<br />
レスポンシブサイトの要望に対応したタグができているようです。。。</p>
<p>参考にさせていただいたサイトは以下になります。<br />
<a href="http://kia-king.com/blog/tutorial/responsive-images-with-srcset/" target="_blank">HTMLのsrcsetを使って画像をレスポンシブにRetina対応させてみよう</a><br />
<a href="http://havelog.ayumusato.com/develop/html/e617-picture_element_and_srcset_attribute.html">picture要素の関連仕様って今どうなってるんだっけ？を調べたメモ ::ハブろぐ</a></p>

レスポンシブデザインのコーディングには、srcsetを使う!?

<p>I was talking last week about <a href="http://www.awwwards.com/">AWWWARDS</a>, one of the most popular online awards that recognise the talent and effort of the best web designers, developers and agencies in the world.</p>
<p>Awwwards promise to be the meeting point where web professionals from across the world can come to find inspiration, to debate and share knowledge and experience.</p>
<p>Indeed they can proclaimed themselves as the <a href="http://www.awwwards.com/awwwards-the-most-visited-online-awards-platform-in-the-world.html">“The most visited online awards platform in the world”</a>. Awwwards recently broke the 2,000 barrier on <strong>Alexa</strong> and it is currently ranked at 1,919.</p>
<p>Worth a check, their most prestigious peers and competitors ranking is respectively: The <a href="http://www.webbyawards.com/">Webby Awards </a>(21,128), The <a href="http://www.thefwa.com/">FWA </a>(25, 943) and other important awards sites such as <a href="http://www.dandad.org/">D&amp;AD Awards</a>, <a href="http://fitc.ca/awards/">Fitc</a> and <a href="https://thenetawards.com/">The Net Awards.</a> <em>(Source: Alexa 2014).<a style="font-style: normal;" href="/uploads-archive/2014/10/awwwards-statistics-2015.png"><br />
</a></em></p>
<p><a href="/uploads-archive/2014/10/awwwards-statistics-2015.png"><img decoding="async" loading="lazy" class="alignnone wp-image-5956 " src="/uploads-archive/2014/10/awwwards-statistics-2015.png" alt="awwwards-statistics-2015" width="649" height="482" srcset="/uploads-archive/2014/10/awwwards-statistics-2015.png 938w, /uploads-archive/2014/10/awwwards-statistics-2015-300x222.png 300w, /uploads-archive/2014/10/awwwards-statistics-2015-228x169.png 228w" sizes="(max-width: 649px) 100vw, 649px" /></a></p>
<p><a href="http://www.awwwards.com/blog/"><strong>BLOG </strong></a></p>
<p>One of the things I like the most in Awwwards it&#8217;s the blog, as I think is a good resource to keep up with the web/UI/UX  trends, top web design topics, tutorials, events and specially the latest tools for web-designers.</p>
<p><a href="/uploads-archive/2014/10/Screen-Shot-2014-10-07-at-16.15.22.png"><img decoding="async" loading="lazy" class="alignnone wp-image-5955 " src="/uploads-archive/2014/10/Screen-Shot-2014-10-07-at-16.15.22-1024x491.png" alt="Screen Shot 2014-10-07 at 16.15.22" width="644" height="309" srcset="/uploads-archive/2014/10/Screen-Shot-2014-10-07-at-16.15.22-1024x491.png 1024w, /uploads-archive/2014/10/Screen-Shot-2014-10-07-at-16.15.22-300x144.png 300w, /uploads-archive/2014/10/Screen-Shot-2014-10-07-at-16.15.22-228x109.png 228w" sizes="(max-width: 644px) 100vw, 644px" /></a></p>
<p><strong><a href="http://www.awwwards.com/awwwards-interviews-simon-collison.html">INTERVIEWS</a></strong></p>
<p>In the blog you&#8217;ll find a couple of interviews as well. This one I picked features Keitaro Suzuki,<span style="color: #313131;"> Art Director and Head of Web Design, UI, UX at </span><a style="color: #3c948b;" href="http://www.shiftbrain.co.jp/">ShiftBrain</a><span style="color: #313131;">, Japan, who explains about the design scene in Japan, and where he thinks the web will take us in a few years&#8217; time.</span></p>
<p><iframe loading="lazy" width="500" height="281" src="//player.vimeo.com/video/99006791" frameborder="0" webkitallowfullscreen="webkitallowfullscreen" mozallowfullscreen="mozallowfullscreen" allowfullscreen="allowfullscreen"></iframe></p>
<p><strong><a href="http://www.awwwards.com/events/">EVENTS</a></strong></p>
<p>You can also keep updated with the latest events of the industry happening worldwide. Currently there is none happening soon in Japan, but on November 5th there&#8217;s an event about User Experience:<a href="http://www.awwwards.com/events/ux-futures-summit-2014.html"> UX Futures Summit 2014</a> which is online, no travel hassle!.</p>
<p><a href="/uploads-archive/2014/10/Screen-Shot-2014-10-07-at-16.51.59.png"><img decoding="async" loading="lazy" class="wp-image-5957 alignleft" src="/uploads-archive/2014/10/Screen-Shot-2014-10-07-at-16.51.59.png" alt="Screen Shot 2014-10-07 at 16.51.59" width="637" height="218" srcset="/uploads-archive/2014/10/Screen-Shot-2014-10-07-at-16.51.59.png 2382w, /uploads-archive/2014/10/Screen-Shot-2014-10-07-at-16.51.59-300x102.png 300w, /uploads-archive/2014/10/Screen-Shot-2014-10-07-at-16.51.59-1024x350.png 1024w, /uploads-archive/2014/10/Screen-Shot-2014-10-07-at-16.51.59-228x78.png 228w" sizes="(max-width: 637px) 100vw, 637px" /></a></p>
<p>&nbsp;</p>


AWWWARDS : The web awards for design, creativity and innovation

jQueryプラグインFullCalendarのイベントをフィルターで絞り込む方法

<p>飲食店や商業施設などで無料で利用できるWIFIは暗号化されていないためにのぞき見られる危険性がある場合もあります。</p>
<p>こういった場合に便利なのが「Private　VPN」と言われるものです。</p>
<p><a href="/uploads-archive/2014/10/VPN1.jpg"><img decoding="async" loading="lazy" class="alignnone  wp-image-5942" src="/uploads-archive/2014/10/VPN1.jpg" alt="VPN1" width="524" height="262" srcset="/uploads-archive/2014/10/VPN1.jpg 600w, /uploads-archive/2014/10/VPN1-300x150.jpg 300w, /uploads-archive/2014/10/VPN1-228x114.jpg 228w" sizes="(max-width: 524px) 100vw, 524px" /></a></p>
<p>目的のサーバにアクセスする際に、Private VPNのサーバを経由します。</p>
<p>Priveate VPNサーバまでのアクセスは暗号化されるので安全性が保たれます。</p>
<p>ＶＰＮサーバから目的のサーバまでのアクセスは完全に暗号化されませんが、元々のクライアントがわからないので情報を特定されないという仕組みです。</p>
<p>&nbsp;</p>
<p>実際にこのようなPrivate VPN サーバを経由した場合、本来とは異なるIPアドレスから</p>
<p>アクセスしたことになります。IPアドレスを確認できるサイトにアクセスすると海外のIPアドレスになっていたりします。</p>
<p>&nbsp;</p>
<p>この機能を利用して安全性を確保する目的以外で利用している人もいるようです。</p>
<p>日本からのアクセスを制限しているアメリカのサイトに、海外のサーバを経由してアクセスする事が可能です。</p>
<p>&nbsp;</p>
<p><a href="/uploads-archive/2014/10/VPN3.jpg"><img decoding="async" loading="lazy" class="alignnone  wp-image-5945" src="/uploads-archive/2014/10/VPN3.jpg" alt="VPN3" width="524" height="262" srcset="/uploads-archive/2014/10/VPN3.jpg 600w, /uploads-archive/2014/10/VPN3-300x150.jpg 300w, /uploads-archive/2014/10/VPN3-228x114.jpg 228w" sizes="(max-width: 524px) 100vw, 524px" /></a></p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>VPNのサービスでメジャーどころをご紹介します。</p>
<p>基本的にＶＰＮを利用すると速度が遅くなるようです、特に無料のサービスは遅くなる印象があります。</p>
<p>中には何か危ないものが仕込んであるとの噂がある無料サービスもあるので、メジャーどころを利用する事をオススメします。</p>
<p>&nbsp;</p>
<h4>Hot Spot Shield</h6>
<p><a href="http://www.hotspotshield.com/jp"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-5946" src="/uploads-archive/2014/10/hotspotshield.jpg" alt="hotspotshield" width="600" height="269" srcset="/uploads-archive/2014/10/hotspotshield.jpg 600w, /uploads-archive/2014/10/hotspotshield-300x134.jpg 300w, /uploads-archive/2014/10/hotspotshield-228x102.jpg 228w" sizes="(max-width: 600px) 100vw, 600px" /></a></p>
<p>ここのサービスは「世界で最も信頼されているVPNサービス。 2億回以上のダウンロード数」と謳っているだけあって速度にもあまり影響がなくかなり使いやすいと思います。無料版でも十分使えると思います。</p>
<p>サービス利用時はブラウザのツールバー上にあるアイコンの色が緑色に変わります。すぐに現在のIPアドレスを確認する事もできます。上の画面でもわかるように日本語に対応しているのも魅力です。</p>
<p>&nbsp;</p>
<p>無料版ではアクセス元をアメリカとイギリスのみ選択可能ですが、有料版だと日本やオーストラリア、カナダ、ドイツに変更できます。</p>
<p>有料版は1年間で2400円程度です。1ヶ月400円というのもあります。</p>
<p>&nbsp;</p>
<h4>ZenMate</h6>
<p>こちらは無料で現在300万人ほどのユーザーがいるとのこと。</p>
<p>ChromeとOperaにインストールできます。</p>
<p><a href="https://zenmate.com/"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-5947" src="/uploads-archive/2014/10/zenmate.jpg" alt="zenmate" width="600" height="289" srcset="/uploads-archive/2014/10/zenmate.jpg 600w, /uploads-archive/2014/10/zenmate-300x144.jpg 300w, /uploads-archive/2014/10/zenmate-228x109.jpg 228w" sizes="(max-width: 600px) 100vw, 600px" /></a></p>
<p>こちらについては使っていないので速度はわかりませんが、ロケーションとして以下の５つが利用できます。</p>
<p>「香港 – 九龍」「ドイツ – フランクフルト」「イギリス – ロンドン」「スイス – チューリッヒ」「アメリカ – ニューヨーク」</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>


思いのほか便利な「Private　VPN」とは？

<p>この存在は前から知っていたものの使用する事は今までなかった「FontAwesome」。</p>
<p>アイコンフォントをcssで簡単に設置できるというものですが、<br />
ちょっと試してみようということでデモ作ってみたんですが、いいですね！</p>
<p>こんなに簡単に設置でき、アイコンの種類も豊富で、ライセンスもGPL。<br />
なぜもっと早く使用しなかったんだと思ってます。</p>
<p><a href="http://fortawesome.github.io/Font-Awesome/" target="_blank">Font Awesome, the iconic font and CSS toolkit</a></p>
<p><a class="demo" href="/demo/abe/47/" target="_blank">DEMO</a></p>
<p>僕がいいと思った点は以下になります。</p>
<p>・アイコンの種類が豊富<br />
・サイズも自由に変更(大きくしてもキレイ)<br />
・回転させたり、色変更もできる<br />
・独自の方法で設定もできる</p>
<h2>FontAwesomeの使い方</h2>
<p>まず上記にあるサイトからダウンロードしてきます。<br />
ダウンロードしたファイルの中に、font-awesome.min.cssがありますのでそれを読み込みます。</p>
<p></p>

		<div id="crayon-649540157cba1179194096" 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">XHTML</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;">
&lt;link type="text/css" href="css/font-awesome.min.css" rel="stylesheet" /&gt;</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-649540157cba1179194096-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-649540157cba1179194096-1"><span class="crayon-r ">&lt;link </span><span class="crayon-e ">type</span>=<span class="crayon-s ">"text/css"</span><span class="crayon-h"> </span><span class="crayon-e ">href</span>=<span class="crayon-s ">"css/font-awesome.min.css"</span><span class="crayon-h"> </span><span class="crayon-e ">rel</span>=<span class="crayon-s ">"stylesheet"</span><span class="crayon-r "> /&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p> </p>
<p>このcssからフォントのファイルを読み込んでいるので,「fonts」フォルダを適切なディレクトリに設置してください。</p>
<p>普通のcssで設定する場合はもうこれでOKです！<br />
あとはsassとかlessでも設定ができるそうです。</p>
<p>あとは下記のようにアイコンを付けたいタグに、<br />
class名「fa」と、あとはアイコンの種類のclassを設定すれば大丈夫です。</p>
<p></p>

		<div id="crayon-649540157cba5433351069" 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">XHTML</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;">
&lt;p&gt;&lt;i class="fa fa-shopping-cart"&gt;&lt;/i&gt;株式会社スターフィールドです。&lt;/p&gt;</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-649540157cba5433351069-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-649540157cba5433351069-1"><span class="crayon-r ">&lt;p&gt;</span><span class="crayon-r ">&lt;i </span><span class="crayon-e ">class</span>=<span class="crayon-s ">"fa fa-shopping-cart"</span><span class="crayon-r ">&gt;</span><span class="crayon-r ">&lt;/i&gt;</span><span class="crayon-i ">株式会社スターフィールドです。</span><span class="crayon-r ">&lt;/p&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p> </p>
<p>サイトでは、iタグで説明がなされていますが、spanタグでも(の方が?)よいようです。</p>
<h2>FontAwesomeを独自のルールで設定する方法</h2>
<p>classを指定すれば簡単にできるのですが、中には空のタグを作りたくないという方もいらっしゃると思います。</p>
<p>その場合、独自にフォント指定するためのclassを設定し、cssの疑似要素(before)でアイコンを指定するという方法があります。<br />
例えば下記のようになります。</p>
<p></p>

		<div id="crayon-649540157cba6135572285" 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">CSS</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;">
.icon:before {
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;
    color: #000;
    font-size: 18px;
    margin-right: 0.5em;
}
.iconCart:before {
  content: "\f07a";
}</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-649540157cba6135572285-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540157cba6135572285-2">2</div><div class="crayon-num" data-line="crayon-649540157cba6135572285-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540157cba6135572285-4">4</div><div class="crayon-num" data-line="crayon-649540157cba6135572285-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540157cba6135572285-6">6</div><div class="crayon-num" data-line="crayon-649540157cba6135572285-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540157cba6135572285-8">8</div><div class="crayon-num" data-line="crayon-649540157cba6135572285-9">9</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540157cba6135572285-10">10</div><div class="crayon-num" data-line="crayon-649540157cba6135572285-11">11</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540157cba6135572285-12">12</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-649540157cba6135572285-1"><span class="crayon-k ">.icon:before </span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540157cba6135572285-2"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-e ">font-family</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">FontAwesome</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-649540157cba6135572285-3"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-e ">font-style</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">normal</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540157cba6135572285-4"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-e ">font-weight</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">normal</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-649540157cba6135572285-5"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-e ">text-decoration</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">inherit</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540157cba6135572285-6"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-e ">color</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">#000</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-649540157cba6135572285-7"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-e ">font-size</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">18px</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540157cba6135572285-8"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-e ">margin-right</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">0.5em</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-649540157cba6135572285-9"><span class="crayon-sy">}</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540157cba6135572285-10"><span class="crayon-k ">.iconCart:before </span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-649540157cba6135572285-11"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-e ">content</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-s">"\f07a"</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540157cba6135572285-12"><span class="crayon-sy">}</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p> </p>
<p>icon:beforeの設定は例なので、各々の好きなようにしてもらうのですが、<br />
contentの中身を自分自身で使うアイコン分設定する必要があります。</p>
<p>このcontentの書き方が特殊なので、下記URLを見ると簡単に設置できます。</p>
<p><a href="http://astronautweb.co/snippet/font-awesome/" target="_blank">Complete list of Font Awesome icons with their CSS content values</a></p>
<p>これで自分の好きな案配でアイコンの設定が出来るようになります。</p>
<p>アイコンはwebサイトの中で重要な要素なので、これは便利ですね！！</p>

ちょっとしたアイコンにいい「FontAwesome」

<p><a href="http://usepanda.com/">Panda</a>  is the fastest way to get your daily design inspiration and news. This website (or Chrome extension, as you prefer) helps you keep up with industry news and inspiration from a variety of sources in one interface. From the moment you installed it, Panda is going to appear every time you open a new tab.</p>
<p>It can likely fit well with Web Workers of all stripes, but it is probably more oriented to front-end designers.</p>
<p>&nbsp;</p>
<p><a href="/uploads-archive/2014/09/Screen-Shot-2014-09-30-at-17.10.28.png"><img decoding="async" loading="lazy" class="alignnone wp-image-5899 " src="/uploads-archive/2014/09/Screen-Shot-2014-09-30-at-17.10.28-1024x549.png" alt="Panda" width="621" height="333" srcset="/uploads-archive/2014/09/Screen-Shot-2014-09-30-at-17.10.28-1024x549.png 1024w, /uploads-archive/2014/09/Screen-Shot-2014-09-30-at-17.10.28-300x160.png 300w, /uploads-archive/2014/09/Screen-Shot-2014-09-30-at-17.10.28-228x122.png 228w" sizes="(max-width: 621px) 100vw, 621px" /></a></p>
<p>On the left hand side of the interface we have Panda’s news feeds playing the latest and most popular info from Hacker News, Designers News, Growth Hackers among others (classified by popular or latest).</p>
<p>On the right you can get some visual inspiration, featuring acclaimed sites like : <a href="http://www.awwwards.com/">Awwwards</a> , <a href="https://dribbble.com/">Dribbble</a> and <a href="https://www.behance.net/">Behance</a> .</p>
<p><a href="/uploads-archive/2014/09/Screen-Shot-2014-09-30-at-17.54.43.png"><img decoding="async" loading="lazy" class="alignnone wp-image-5903 " src="/uploads-archive/2014/09/Screen-Shot-2014-09-30-at-17.54.43-1024x546.png" alt="Panda" width="619" height="330" srcset="/uploads-archive/2014/09/Screen-Shot-2014-09-30-at-17.54.43-1024x546.png 1024w, /uploads-archive/2014/09/Screen-Shot-2014-09-30-at-17.54.43-300x160.png 300w, /uploads-archive/2014/09/Screen-Shot-2014-09-30-at-17.54.43-228x121.png 228w" sizes="(max-width: 619px) 100vw, 619px" /></a></p>
<p>&nbsp;</p>
<p>The overall goal is to filter the content from around the web and present it nicely, without having to click around to countless websites. Never miss anything, again.</p>
<p>&nbsp;</p>
<p>Panda doesn’t allow users to submit their own sources. Instead, co-founder William Channer, explains that the focus is on quality not customization. By sourcing sites where the community has already voted on what’s on trend.</p>
<p>&nbsp;</p>
<p>Panda is nicely done and is probably worth a bookmark.</p>
<p>&nbsp;</p>


PANDA: Relaxed Buzzfeed for Web Design

多機能のカレンダーを実装するjQueryプラグインのFullCalendar

<p>最近、飲食チェーンのテレビＣＭなどで「ネットで注文できるようになりました！」という内容のものが増えている気がします。 いわゆるオムニチャネル化というやつですが、このオムニチャネル化を進めたいと考える飲食店が増えているのだと思います。 この流れは流行りからなのかもしれませんが、実際に売り上げにつながっているのからオムニチャネル化を進めていると考えられます。</p>
<h4>オムニチャネル化を進める外食・中食チェーン</h6>
<p>最近始まったサービスを中心にいくつかネット注文できる店をあげてみます。 <strong><a href="http://mos.jp/">モスのネット注文</a></strong> 丁度本日９月１６日からサービスを始めたのはモスバーガーの「モスのネット注文」。 <a href="/uploads-archive/2014/09/www.mos_.co_.jp-company-pr_pdf-pr_140826_1.jpg"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-5870" src="/uploads-archive/2014/09/www.mos_.co_.jp-company-pr_pdf-pr_140826_1.jpg" alt="www.mos.co.jp-company-pr_pdf-pr_140826_1" width="471" height="281" srcset="/uploads-archive/2014/09/www.mos_.co_.jp-company-pr_pdf-pr_140826_1.jpg 471w, /uploads-archive/2014/09/www.mos_.co_.jp-company-pr_pdf-pr_140826_1-300x178.jpg 300w, /uploads-archive/2014/09/www.mos_.co_.jp-company-pr_pdf-pr_140826_1-228x136.jpg 228w" sizes="(max-width: 471px) 100vw, 471px" /></a> 事前決済や受け取り時間を指定できるサービスで、現時点では２４店舗でのみ利用可能です。（2015年4月までの全店導入を予定）   <strong><a href="https://nettomotto.jp/">netmotto</a></strong> デリバリーとお弁当の事前予約ができるサービス。昼時の込み合う時間は使えそうです。 <a href="/uploads-archive/2014/09/1fab857ca00bea02c293f197337003f4.jpg"><img decoding="async" loading="lazy" class="alignnone  wp-image-5865" src="/uploads-archive/2014/09/1fab857ca00bea02c293f197337003f4.jpg" alt="ほっともっとの新・ネットサービス-│NettoMotto" width="542" height="301" srcset="/uploads-archive/2014/09/1fab857ca00bea02c293f197337003f4.jpg 1008w, /uploads-archive/2014/09/1fab857ca00bea02c293f197337003f4-300x166.jpg 300w, /uploads-archive/2014/09/1fab857ca00bea02c293f197337003f4-228x126.jpg 228w" sizes="(max-width: 542px) 100vw, 542px" /></a>   <a href="https://delivery.dmkt-sp.jp/">dデリバリー</a> あまり使わないので知りませんでしたがドコモは「<a href="https://delivery.dmkt-sp.jp/">dデリバリー</a>」という宅配をまとめたサービスを行っているようです。 dデリバリーからピザ、寿司、ファミレスなどの注文が可能です。 <a href="https://delivery.dmkt-sp.jp/"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-5864" src="/uploads-archive/2014/09/414c12d91ff740a1ad52b226099f7ef9.jpg" alt="dデリバリー：出前・宅配・ケータリングの総合注文サイト-ピザ・弁当・寿司・カレー・中華・ケータリングなど" width="400" height="514" srcset="/uploads-archive/2014/09/414c12d91ff740a1ad52b226099f7ef9.jpg 400w, /uploads-archive/2014/09/414c12d91ff740a1ad52b226099f7ef9-233x300.jpg 233w, /uploads-archive/2014/09/414c12d91ff740a1ad52b226099f7ef9-228x292.jpg 228w" sizes="(max-width: 400px) 100vw, 400px" /></a>   <a href="http://delivery.rakuten.co.jp/g/kfc/">ケンタッキー・デリバリー</a> ケンタッキーについては以前からデリバリーのネット注文を行っているようですが、 自社のサービスではなく上のdデリバリーや<a href="http://delivery.rakuten.co.jp/">楽天デリバリー</a>に出店しているという形です。 <a href="http://delivery.rakuten.co.jp/g/kfc/"><img decoding="async" loading="lazy" class="alignnone  wp-image-5871" src="/uploads-archive/2014/09/adc8e16b61fee08680d545830a987653.jpg" alt="ケンタッキーフライドチキン-の出前・宅配---楽天デリバリー" width="406" height="119" srcset="/uploads-archive/2014/09/adc8e16b61fee08680d545830a987653.jpg 692w, /uploads-archive/2014/09/adc8e16b61fee08680d545830a987653-300x88.jpg 300w, /uploads-archive/2014/09/adc8e16b61fee08680d545830a987653-228x66.jpg 228w" sizes="(max-width: 406px) 100vw, 406px" /></a> さすが楽天は何でもやっているなという感じです。 楽天デリバリーは決算もネット上で行えるサービスで、楽天市場で買い物をするのと変わらない印象です。 それほど大きくない個人経営などの小規模店も出店しています。</p>
<h4>小規模経営の飲食店向けのネット注文・決済システムはウケる？？</h6>
<p>現時点でネット注文のサービスを行っているのは大手の企業だけという印象です。 システムの構築にかなりコストがかかるので小規模経営の店には難しいというのが現実でしょう。   小規模でネット注文を受け付けているというお店もいくらかあるようですが、決算までネット上を完了できるサービスは少ないです。   しかしネット注文ができるようにしたいと考える小規模店は多いはずです、もしコストを抑えられるシステムがあればユーザーはかなり見込めるのではないでしょうか。イメージでいうとリクルートのAirレジのような感じです。スタンダードになってしまえば勝ち目があるのではと思います。</p>


ネット注文できる飲食店が増えている件

<p>僕自身はあまりペンツールを使用することが少ないため、あんまり得意ではないです。<br />
台形を作る時ぐらいしか使わないかもしれません笑</p>
<p>サイトをちょっと利用してみましたが、ペンツールを使用する感覚がほぼ本物に近い感じで、最初にチュートリアルステージがあり、方法を説明してくれるのでいい練習になると思います。</p>
<p>僕もまだまだなので、もっと突っ込んで練習してみたいと思います。</p>
<p><a href="http://bezier.method.ac/#">The Bézier Game</a></p>


ベジェ曲線の練習が出来るwebサービス「The Bézier Game」」

<p>１０月２８日からヤマト運輸が「国際クール宅急便」を開始すると発表しました。</p>
<p>日本と香港との間でサービスを利用でき、国内で展開されているクール宅急便と同様に冷蔵と冷凍の荷物を送る事ができるという事です。</p>
<p>日本の魚介類や和牛はアジアで人気ですから、このサービスを利用すれば食品の生産者や、小規模に展開する加工業者が海外を相手にビジネスを展開できます。</p>
<h4>午前中に集荷で翌日香港へ届く</h6>
<p><a href="/uploads-archive/2014/09/kokusai_cool_flow.jpg"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-5821" src="/uploads-archive/2014/09/kokusai_cool_flow.jpg" alt="kokusai_cool_flow" width="680" height="288" srcset="/uploads-archive/2014/09/kokusai_cool_flow.jpg 680w, /uploads-archive/2014/09/kokusai_cool_flow-300x127.jpg 300w, /uploads-archive/2014/09/kokusai_cool_flow-228x96.jpg 228w" sizes="(max-width: 680px) 100vw, 680px" /></a></p>
<p>参考：<a href="http://www.kuronekoyamato.co.jp/kokusaicooltakkyubin/kokusaicooltakkyubin_b.html">クロネコヤマト国際クール宅急便</a>より</p>
<p>日本から荷物を送る場合は沖縄を経由して香港に届けられるという経路になります。荷物を午前中に集荷あるいは持ち込みすれば、翌日の午後２時以降には荷物が届くそうです。沖縄からなら夕方までに集荷・持ち込みで大丈夫。</p>
<p>ほとんど国内に発送するのと変わらないスピードです。ただ送料がやはり高い！</p>
<p>最も小さいサイズの６０サイズ（縦・横・高さの３辺の合計６０ｃｍ以内、重さ２キロまで）でも送料６０５０円、１２０サイズ（計１２０ｃｍ以内、重さが１５キロまで）だと送料２６９５０円。</p>
<p>富裕層相手に単価の高い物を送るというスタイルしか通販では難しい感じです。ブランド牛なんかを扱えば勝算があるかも。</p>
<h4>配送状況も確認できる</h6>
<p>国をまたぐ場合、荷物が今どこにあるのかを状況を確認することは困難です。海外旅行に行った際に同じ飛行機に乗っていたはずの自分の荷物が行方不明になるなんて事もざらにあるくらいです。</p>
<p>単価の高い商品を香港へ販売しても、ちゃんと届かないなんて事があったら損失大です。しかし国際クール宅急便は、香港にあるヤマト運輸と日本のヤマト運輸のみで荷物の配送が行われるので、荷物がどこにあるのか配送状況を確認もできるそうです。</p>
<p>&nbsp;</p>
<p>国際宅急便はすでにシンガポール、マレーシア、台湾、中国（上海）で展開しているので、国際クール宅急便も今後さらにサービスを利用できる地域が広がると思われます。</p>
<p>&nbsp;</p>
<p>&nbsp;</p>


Company

Our Solutions

Support

News

Blog

Blogブログ

カテゴリーから探す

年別から見る

記事一覧 - タグ: #デザイナー

2014/11/06

2014/11/05

2014/10/29

2014/10/29

2014/10/22

2014/10/22

2014/10/21

2014/10/15

2014/10/15

2014/10/08

2014/10/08

2014/10/08

2014/10/07

2014/10/01

2014/09/17

2014/09/17

2014/09/17

2014/09/10