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

<p>After approximately a year in public beta version, <a href="http://froont.com/">FROONT</a> version one came live this October 13<sup>th</sup>.</p>
<p><a href="http://froont.com/">FROONT</a>  is a tool for designers to <strong>speed up the process of protytype and design responsive web sites</strong>.</p>
<p>Take elements from other pages to build your own. Work in the environment you&#8217;re designing for – the browser. You have full control over desktop and mobile layouts, which are responsive from the start. Deliver fully working code without writing it. Connect it to the web, or simply zip the code and send to your client or developer.</p>
<p>&nbsp;</p>
<p><iframe loading="lazy" width="500" height="281" src="//player.vimeo.com/video/95264559" frameborder="0" webkitallowfullscreen="webkitallowfullscreen" mozallowfullscreen="mozallowfullscreen" allowfullscreen="allowfullscreen"></iframe></p>
<p><a href="http://vimeo.com/95264559">Intro to FROONT</a> from <a href="http://vimeo.com/froont">Froont</a> on <a href="https://vimeo.com">Vimeo</a>.</p>
<p>In other words, rather than designing in a page layout program or designing in Photoshop, designers can actually work right in the browser thanks to Froont’s pre-existing <a href="http://techcrunch.com/2013/05/06/froont/">browser-based visual editor</a>. You can explore FROONT web designs library and get inspired or literally take elements from pages you like to build your own.</p>
<p>This tools allows designers to actually build for various layouts at the same time. So any time of your design process you can check how your design looks in various devices: PC, tablet screen, phone screen&#8230;making much faster the process to build for different environments.</p>
<p><a href="/uploads-archive/2014/10/froont-editor-595x329.jpg"><img decoding="async" loading="lazy" class="wp-image-6082 size-full aligncenter" src="/uploads-archive/2014/10/froont-editor-595x329.jpg" alt="froont-editor-595x329" width="595" height="329" srcset="/uploads-archive/2014/10/froont-editor-595x329.jpg 595w, /uploads-archive/2014/10/froont-editor-595x329-300x165.jpg 300w, /uploads-archive/2014/10/froont-editor-595x329-228x126.jpg 228w" sizes="(max-width: 595px) 100vw, 595px" /></a></p>
<p>&nbsp;</p>
<p>The usual way of designing websites is that the design of the website is given to the developer, this approach however, can involve a lot of unnecessary back and forth as the design gets lost in translation. The responsive designs of FROONT, built using HTML/CSS and hosted in the cloud, can be viewed and shared instantly in a web browser, on any device being targeted. And when it’s time to hand off the design to a developer, instead of a static PNG file or something similar, in theory they’re given “nice, clean HTML/CSS or the ‘face’ of the website already made,” says the company.</p>
<p>Froont isn’t so much aiming at simplifying coding but providing better tools for design. It can be used for production, however, designs usually need to be customised in several ways upon client requests, but it is definitely a good starting point.</p>
<p>&nbsp;</p>
<p>In some ways it’s similar to how something like Github works for raw code, and the wider open source movement as a whole, but for visual web designers. As Froont co-founder and CEO Sandijs Ruluks says “The same applies for Github, where people are embracing the community and reuse code made by others. The interesting part is that open-sourced coding is now perceived as something totally normal and its benefits can’t be denied. Open-sourced design on the other hand, isn’t there yet, although we see the excitement around it”.</p>
<p>&nbsp;</p>
<p>Pages created by non-paying users are always public and can be cloned, edited and reused by others. If you want to keep your work private you pay a subscription. Or, as Ruluks puts it, “for free you pay with sharing, for privacy you pay with money”. Here you have the pricing list.</p>
<p><a href="/uploads-archive/2014/10/Screen-Shot-2014-10-21-at-17.28.38.png"><img decoding="async" loading="lazy" class="wp-image-6085 aligncenter" src="/uploads-archive/2014/10/Screen-Shot-2014-10-21-at-17.28.38-1024x412.png" alt="Screen Shot 2014-10-21 at 17.28.38" width="619" height="249" srcset="/uploads-archive/2014/10/Screen-Shot-2014-10-21-at-17.28.38-1024x412.png 1024w, /uploads-archive/2014/10/Screen-Shot-2014-10-21-at-17.28.38-300x120.png 300w, /uploads-archive/2014/10/Screen-Shot-2014-10-21-at-17.28.38-228x91.png 228w" sizes="(max-width: 619px) 100vw, 619px" /></a></p>
<p>&nbsp;</p>
<p>Actually FROONT is not the only tool to create professional Responsive Website without code, but it is the only &#8220;free&#8221; version.</p>
<p>There&#8217;s also <a href="https://webflow.com/">Webflow</a>, <a href="https://creative.adobe.com/products/reflow">Adobe Edge Reflow</a> and <a href="http://macaw.co/">Macaw </a>. If you want to read more about the topic you might like to <a href="http://www.awwwards.com/4-tools-that-enable-small-town-designers-to-sell-an-idea-to-companies-like-coca-cola.html">read this post of Awwwards.</a></p>


FROONT:  Sharing Responsive Web Design As Easy As Sharing Code

<h2>NoSQLとは</h2>
<p>データベース管理システム(DBMS)の種類を表す用語で、現在最も普及しているリレーショナルデータベース(RDB/RDBMS → Mysql,PostGre,Oracleなど)とは異なる新しい方式の総称。RDBでデータの問い合わせや操作に用いる言語であるSQLを用いない(使えない)ことからこのように呼ばれる。主にビッグデータを扱うときに用いる。</p>
<h2>NoSQLの種類</h2>
<h4>KVS（Key-Value Store型）</h4>
<p>キーと値をペアにして保持するシンプルなデータ構造を持つ。キーと、格納したいデータを紐付け、キーを指定することでそれに対応したデータを格納／取得することができる。<br />
例：Memcashed</p>
<h4>列指向型（テーブル指向型）</h4>
<p>列方向のデータのまとまりを効率的に扱えるように設計されたデータベース。列データをファイルシステム上の連続した位置に格納することによって、大量の行に対する少数の列の集約処理や、同一の値をまとめるデータ圧縮などを効率的に行うことができる。大量のデータを対象とした分析やデータマイニングなどに特に適していると言われている。<br />
例：Cassandra</p>
<h4>ドキュメント指向型</h4>
<p>XMLやJSONなどのように半構造化されたドキュメントデータの格納に特化したデータベース。ドキュメント自体に関するメタデータも含め、全てドキュメント内に保存される点が特徴となっている。<br />
例：MongoDB</p>
<h4>グラフ指向型</h4>
<p>ノード、エッジ、プロパティから構成されるグラフ構造でデータを格納するデータベース。データ同士の複雑な関連性を表現することができる。<br />
例：Neo4j</p>
<h2>NoSQLの特徴</h2>
<p>・RDBMSと比べて高速に動作する(大量のデータの読み書きが得意)<br />
・スケールアウト(サーバを増加させることで性能をアップ)をすることを想定した作り<br />
・トランザクションやテーブル間のジョインのような仕組みがないものが多く、シンプルな設計＆機能</p>


NoSQL基本

<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>Symfony2のデフォルトでは、キャッシュフォルダはapp/フォルダの下にあります。<br />
時々いろな理由（例えば、ソースコード管理）で、キャッシュフォルダをプロジェクトフォルダの外に置きたい場合があります。<br />
その状況のために、キャッシュフォルダを変更する方法を調べてみました。</p>
<h2>キャッシュフォルダの変更</h2>
<p>一見難しそうなタスクですが、Symfony2では簡単なやり方を提供しています（画像などのリソースファイルをweb/フォルダの下からプロジェクトフォルダの外に移動するほうが手間かかる気がします）。<br />
app/AppKernel.phpのファイルに、getCacheDirの関数を追加すればよいです。</p>
<p></p>

		<div id="crayon-649540157dba6052766325" 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;">
    public function getCacheDir()
    {
        return $this-&gt;rootDir.'/../cache/[project_name]/'.$this-&gt;environment;
    }</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-649540157dba6052766325-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540157dba6052766325-2">2</div><div class="crayon-num" data-line="crayon-649540157dba6052766325-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540157dba6052766325-4">4</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-649540157dba6052766325-1"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-m">public</span><span class="crayon-h"> </span><span class="crayon-t">function</span><span class="crayon-h"> </span><span class="crayon-e">getCacheDir</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540157dba6052766325-2"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-649540157dba6052766325-3"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-st">return</span><span class="crayon-h"> </span><span class="crayon-sy">$</span><span class="crayon-r">this</span>-<span class="crayon-h">&gt;</span><span class="crayon-i">rootDir</span><span class="crayon-sy">.</span><span class="crayon-s">'/../cache/[project_name]/'</span><span class="crayon-sy">.</span><span class="crayon-sy">$</span><span class="crayon-r">this</span>-<span class="crayon-h">&gt;</span><span class="crayon-i">environment</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540157dba6052766325-4"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">}</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p> </p>
<p>上記の例では、プロジェクトフォルダと同じ階層にcacheを作って、その中にプロジェクトごと環境を分けてcacheを保存するイメージです。</p>
<h2>リソースフォルダの変更</h2>
<p>画像の容量を小さくするため、画像を違うサイズの小画像を自動作成しキャッシュ化するバンドル<a href="https://github.com/avalanche123/AvalancheImagineBundle" target="_blank">AvalancheImagineBundle</a>を使います。<br />
初回目画像を作成するため時間がかかって重いのは難点ですが。</p>
<p>app/config.ymlに設定すれば、デフォルトの設定を上書きできるようになっています。</p>
<p></p>

		<div id="crayon-649540157dbaa460413710" 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;">
avalanche_imagine:
    source_root:  処理したい画像フォルダの絶対パス
    web_root:     処理したい画像フォルダの（webルートから）相対パス
    cache_prefix: media/cache
    driver:       gd
    filters:      []</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-649540157dbaa460413710-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540157dbaa460413710-2">2</div><div class="crayon-num" data-line="crayon-649540157dbaa460413710-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540157dbaa460413710-4">4</div><div class="crayon-num" data-line="crayon-649540157dbaa460413710-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540157dbaa460413710-6">6</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-649540157dbaa460413710-1"><span class="crayon-i">avalanche_imagine</span><span class="crayon-sy">:</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540157dbaa460413710-2"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-i">source_root</span><span class="crayon-sy">:</span><span class="crayon-h">&nbsp;&nbsp;</span>処理したい画像フォルダの絶対パス</div><div class="crayon-line" id="crayon-649540157dbaa460413710-3"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-i">web_root</span><span class="crayon-sy">:</span><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp; </span>処理したい画像フォルダの（<span class="crayon-i">web</span>ルートから）相対パス</div><div class="crayon-line crayon-striped-line" id="crayon-649540157dbaa460413710-4"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-i">cache_prefix</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i">media</span>/<span class="crayon-e">cache</span></div><div class="crayon-line" id="crayon-649540157dbaa460413710-5"><span class="crayon-e">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-i">driver</span><span class="crayon-sy">:</span><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span><span class="crayon-e">gd</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540157dbaa460413710-6"><span class="crayon-e">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-i">filters</span><span class="crayon-sy">:</span><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">[</span><span class="crayon-sy">]</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p> </p>

【Symfony2】キャッシュフォルダの変更

<p>良さそうなEC系サービスのご紹介。</p>
<p><a href="http://openlogi.com/" target="_blank"> openlogi.com</a></p>
<p>料金体系がわかりやすく、シンプルな管理画面から入庫と配送ができる物流サービス。</p>
<p>&nbsp;</p>
<h2>料金体系</h2>
<p>&nbsp;</p>
<table>
<tbody>
<tr>
<th></th>
<th>メール便</th>
<th colspan="5">宅配便</th>
</tr>
<tr>
<th>サイズ3辺合計</th>
<td>SSサイズ60cm(高さ2cm)以内</p>
<p>重さ：1kg以内</td>
<td>Sサイズ60cm(高さ3.5cm)以内</p>
<p>重さ：2kg以内</td>
<td>Mサイズ60cm以内</p>
<p>重さ：2kg以内</td>
<td>Lサイズ80cm以内</p>
<p>重さ：5kg以内</td>
<td>LLサイズ100cm以内</p>
<p>重さ：10kg以内</td>
<td>3Lサイズ140cm以内</p>
<p>重さ：20kg以内</td>
</tr>
<tr>
<th>入庫料単位：1個</th>
<td colspan="6">15円</td>
</tr>
<tr>
<th>保管料単位：日額1個</th>
<td>0.2円</td>
<td>0.7円</td>
<td>1円</td>
<td>2.5円</td>
<td>6円</td>
<td>10円</td>
</tr>
<tr>
<th>配送料単位：1個口</th>
<td>220円</td>
<td>450円</td>
<td>550円</td>
<td>600円</td>
<td>700円</td>
<td>780円</td>
</tr>
</tbody>
</table>
<p>&nbsp;</p>
<h2>管理画面</h2>
<p>登録は1〜2分程度で完了</p>
<p>シンプルでわかりやすいダッシュボード</p>
<p><a href="/uploads-archive/2014/10/1.png"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-6056" src="/uploads-archive/2014/10/1.png" alt="1" width="656" height="651" srcset="/uploads-archive/2014/10/1.png 656w, /uploads-archive/2014/10/1-150x150.png 150w, /uploads-archive/2014/10/1-300x297.png 300w, /uploads-archive/2014/10/1-228x226.png 228w" sizes="(max-width: 656px) 100vw, 656px" /></a></p>
<p>&nbsp;</p>
<h2>商品登録</h2>
<p>こちらで商品を登録できるもよう。</p>
<p><a href="/uploads-archive/2014/10/2.png"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-6057" src="/uploads-archive/2014/10/2.png" alt="2" width="656" height="559" srcset="/uploads-archive/2014/10/2.png 656w, /uploads-archive/2014/10/2-300x255.png 300w, /uploads-archive/2014/10/2-228x194.png 228w" sizes="(max-width: 656px) 100vw, 656px" /></a></p>
<p>&nbsp;</p>
<h2>入庫依頼</h2>
<p>登録した商品を実際にこちらで入庫する。</p>
<p>伝票を出力して着払いで送れば入庫完了とのこと。</p>
<p><a href="/uploads-archive/2014/10/3.png"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-6059" src="/uploads-archive/2014/10/3.png" alt="3" width="656" height="557" srcset="/uploads-archive/2014/10/3.png 656w, /uploads-archive/2014/10/3-300x254.png 300w, /uploads-archive/2014/10/3-228x193.png 228w" sizes="(max-width: 656px) 100vw, 656px" /></a></p>
<p>&nbsp;</p>
<p>この先は実際にやってみないとわからないが、</p>
<p>おそらくは入庫済み商品一覧から出庫依頼をかけるようになると思われる。</p>
<p>非常にシンプルでわかりやすく、料金も安く小回りがきくので</p>
<p>良い切り口だと思ったサービスだったので共有しました</p>


【EC】良さそうなサービス

<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>リリース初日に新MacOS10.10Yosemiteをインストールしました。</p>
<p>ほとんどのソフトウェアは影響を受けずに起動出来ている中、一つだけ致命的なものがありました。</p>
<p>それがVMwareFusion5です。</p>
<p>OSがバージョンされるごとにメジャーバージョンアップをして下位バージョンのサポートをやめていくのは、当然の流れなので致し方ないですね。</p>
<p>現在は、VMwareFusion7がリリースされており、私が購入したものは、MountainLionの時でした。情報によるとVMwareFusion6はまだ動くようですね。要は、2年周期では買い替えろよということで、今まではWindowsを毎日起動していたのですが、今は業務内容が変り、起動回数が減ってきたのですが、アップグレード版で7500円は費用対効果が微妙だな〜と思っていたので、ここで無料のVirtualBoxに移行を決めました。</p>
<p>ちなみに、仮想化ソフトの2強としてVMwareFusionとParallelsDesktopがありますが、両方共ライセンスを買いました（笑）どちらも、2世代くらいのOSでは使えるのですが、メジャーバージョンアップごとにサポートを切っていくので、ParallelsDesktopが使えなくなった時点でVMwareFusionに移行していました。</p>
<p>OSが無料になった今、仮想化ソフトは今後もお金を払い続けるのは何だかな〜と思っていたので、オープンソースに移行するちょうどよいタイミングだったのかもしれません。</p>
<h2>VmwareFusionからVirtualBoxの移行手順</h2>
<ol>
<li>VNwareツールをアンイストールしてウィンドウズをシャットダウンする</li>
<li>VMWare imageを新しいフォルダにコピーする
<ol>
<li>ドキュメント内（\Documents\Virtual Machines.localized\*****.vmwarevm）にて右クリックでコンテキストメニューの「パッケージの内容を表示」</li>
<li>全ての*.vmdkファイルを新しいフォルダにコピー</li>
</ol>
</li>
<li>新しいVirtualBox Machineを同じ設定で作成する
<ol>
<li>Windows 7 64ビットを使っているならば確認をする</li>
<li>VirtualBoxの設定で先にコピーしておいたメインのファイル（仮想ディスク.vmdk）を選択する</li>
</ol>
</li>
</ol>
<p>これでOK！</p>
<p>あとは普通に起動できました。</p>
<p>いろいろ調べるとブルースクリーンエラーが出たりと一筋縄ではいかない記述も出てくるのですが、</p>
<p>私が使っていたWindows8.1 64ビット環境では一発で起動出来ました。</p>


MacOS10.10 YosemiteでVMwareFusion5からVirtualboxに移行する手順

<p>URLを操作して、様々な用途に使用できるmodRewiteについて書きました。</p>
<h3>mod_rewriteとは</h4>
<p>WebサーバーであるApache上で利用することができる機能です。<br />
機能内容を簡単にいえば、ユーザー（又は検索エンジン）からのリクエストにあるURL情報を、変更し「リダイレクト」する事ができます。</p>
<p>&nbsp;</p>
<h3>mod_rewriteの初期設定</h4>
<p>mod_rewriteはApacheのモジュールなので設定ファイルで有効にする必要があります。</p>

		<div id="crayon-649540157d7a2153226191" 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;">
vi /etc/httpd/conf/httpd.conf

  #LoadModule rewrite_module modules/mod_rewrite.so
  LoadModule rewrite_module modules/mod_rewrite.so

/etc/init.d/httpd/restart</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-649540157d7a2153226191-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540157d7a2153226191-2">2</div><div class="crayon-num" data-line="crayon-649540157d7a2153226191-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540157d7a2153226191-4">4</div><div class="crayon-num" data-line="crayon-649540157d7a2153226191-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540157d7a2153226191-6">6</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-649540157d7a2153226191-1"><span class="crayon-i">vi</span><span class="crayon-h"> </span>/<span class="crayon-i">etc</span>/<span class="crayon-i">httpd</span>/<span class="crayon-i">conf</span>/<span class="crayon-i">httpd</span><span class="crayon-sy">.</span><span class="crayon-i">conf</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540157d7a2153226191-2">&nbsp;</div><div class="crayon-line" id="crayon-649540157d7a2153226191-3"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-p">#LoadModule rewrite_module modules/mod_rewrite.so</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540157d7a2153226191-4"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-e">LoadModule </span><span class="crayon-e">rewrite_module </span><span class="crayon-i">modules</span>/<span class="crayon-i">mod_rewrite</span><span class="crayon-sy">.</span><span class="crayon-i">so</span></div><div class="crayon-line" id="crayon-649540157d7a2153226191-5">&nbsp;</div><div class="crayon-line crayon-striped-line" id="crayon-649540157d7a2153226191-6">/<span class="crayon-i">etc</span>/<span class="crayon-i">init</span><span class="crayon-sy">.</span><span class="crayon-i">d</span>/<span class="crayon-i">httpd</span>/<span class="crayon-i">restart</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>これでmodRewiteが使えます。</p>
<p>&nbsp;</p>
<h3>使用例</h4>
<p>1, サイトの引越し（リニューアル）の時にリダイレクトする方法。<br />
例：<br />
http://www.aaa.com/ から http://www.bbb.com/ にドメインが変更になった場合に<br />
http://www.bbb.com/ にリダイレクトさせることができます。<br />
・設置場所 → http://www.aaa.com/ のドキュメントルートに.htaccessを設置</p>

		<div id="crayon-649540157d7a6869719857" 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;">
RewriteEngine on
RewriteRule ^/(.*)$ http://www.bbb.com/$1 [R=301,L]</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-649540157d7a6869719857-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540157d7a6869719857-2">2</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-649540157d7a6869719857-1"><span class="crayon-e">RewriteEngine </span><span class="crayon-e">on</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540157d7a6869719857-2"><span class="crayon-i">RewriteRule</span><span class="crayon-h"> </span>^/<span class="crayon-sy">(</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">http</span><span class="crayon-sy">:</span><span class="crayon-c">//www.bbb.com/$1 [R=301,L]</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>2, 動的ページを静的ページに見せる<br />
SEO対策でよく使われます。<br />
動的ページを静的ページに見せることによって、検索エンジンにインデックスされやすくなるらしいです。<br />
例：<br />
http://www.aaa.com/search.php?id=123&#038;name=bob<br />
↓<br />
http://www.aaa.com/123_bob.html</p>

		<div id="crayon-649540157d7a8687247126" 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;">
Options FollowSymLinks
RewriteEngine on

RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^([0-9A-Za-z]+)_([0-9A-Za-z]+).html$ search.php?id=$1&amp;amp;name=$2</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-649540157d7a8687247126-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540157d7a8687247126-2">2</div><div class="crayon-num" data-line="crayon-649540157d7a8687247126-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540157d7a8687247126-4">4</div><div class="crayon-num" data-line="crayon-649540157d7a8687247126-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540157d7a8687247126-6">6</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-649540157d7a8687247126-1"><span class="crayon-e">Options</span><span class="crayon-h"> </span><span class="crayon-e">FollowSymLinks</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540157d7a8687247126-2"><span class="crayon-e">RewriteEngine</span><span class="crayon-h"> </span><span class="crayon-e">on</span></div><div class="crayon-line" id="crayon-649540157d7a8687247126-3">&nbsp;</div><div class="crayon-line crayon-striped-line" id="crayon-649540157d7a8687247126-4"><span class="crayon-e">RewriteCond</span><span class="crayon-h"> </span><span class="crayon-sy">%</span><span class="crayon-sy">{</span><span class="crayon-i">REQUEST_FILENAME</span><span class="crayon-sy">}</span><span class="crayon-h"> </span><span class="crayon-sy">!</span>-<span class="crayon-e">f</span></div><div class="crayon-line" id="crayon-649540157d7a8687247126-5"><span class="crayon-e">RewriteCond</span><span class="crayon-h"> </span><span class="crayon-sy">%</span><span class="crayon-sy">{</span><span class="crayon-i">REQUEST_FILENAME</span><span class="crayon-sy">}</span><span class="crayon-h"> </span><span class="crayon-sy">!</span>-<span class="crayon-i">d</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540157d7a8687247126-6"><span class="crayon-i">RewriteRule</span><span class="crayon-h"> </span>^<span class="crayon-sy">(</span><span class="crayon-sy">[</span><span class="crayon-cn">0</span>-<span class="crayon-cn">9A</span>-<span class="crayon-i">Za</span>-<span class="crayon-i">z</span><span class="crayon-sy">]</span>+<span class="crayon-sy">)</span><span class="crayon-e">_</span><span class="crayon-sy">(</span><span class="crayon-sy">[</span><span class="crayon-cn">0</span>-<span class="crayon-cn">9A</span>-<span class="crayon-i">Za</span>-<span class="crayon-i">z</span><span class="crayon-sy">]</span>+<span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-i">html</span><span class="crayon-sy">$</span><span class="crayon-h"> </span><span class="crayon-i">search</span><span class="crayon-sy">.</span><span class="crayon-i">php</span><span class="crayon-sy">?</span><span class="crayon-i">id</span>=<span class="crayon-sy">$</span><span class="crayon-cn">1</span><span class="crayon-sy">&amp;amp;</span><span class="crayon-i">name</span>=<span class="crayon-sy">$</span><span class="crayon-cn">2</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>3, wwwありをwwwなしに301リダイレクト<br />
SEOの基本ですが、wwwありか、なしで統一する方法です。<br />
例：<br />
http://www.aaa.com/ (あり)から http://aaa.com/ (なし)へ統一する。</p>

		<div id="crayon-649540157d7a9819016847" 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;">
RewriteEngine on

RewriteCond %{HTTP_HOST} www\.aaa\.com
RewriteRule ^(.*)$ http://aaa.com/$1 [R=301,L]</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-649540157d7a9819016847-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540157d7a9819016847-2">2</div><div class="crayon-num" data-line="crayon-649540157d7a9819016847-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540157d7a9819016847-4">4</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-649540157d7a9819016847-1"><span class="crayon-e">RewriteEngine</span><span class="crayon-h"> </span><span class="crayon-e">on</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540157d7a9819016847-2">&nbsp;</div><div class="crayon-line" id="crayon-649540157d7a9819016847-3"><span class="crayon-e">RewriteCond</span><span class="crayon-h"> </span><span class="crayon-sy">%</span><span class="crayon-sy">{</span><span class="crayon-i">HTTP_HOST</span><span class="crayon-sy">}</span><span class="crayon-h"> </span><span class="crayon-i">www</span><span class="crayon-sy">\</span><span class="crayon-sy">.</span><span class="crayon-i">aaa</span><span class="crayon-sy">\</span><span class="crayon-sy">.</span><span class="crayon-e">com</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540157d7a9819016847-4"><span class="crayon-i">RewriteRule</span><span class="crayon-h"> </span>^<span class="crayon-sy">(</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">http</span><span class="crayon-sy">:</span><span class="crayon-c">//aaa.com/$1 [R=301,L]</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>他にも様々な方法があります。<br />
気になる方はこちらチェックしてみてください。<br />
<a href="http://snipsnaptmae.wordpress.com/2013/02/28/modrewrite/" target="_brank">http://snipsnaptmae.wordpress.com/2013/02/28/modrewrite/</a></p>

URLを操作する　modRewite

<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>ＥＣサイトのＳＥＯ対策として被リンクを増やしたりする手法は効果が無くなっている現状で</p>
<p>最近はどんな手法が取り入れられているのかについて調べてみました。</p>
<p>良く出てくるは、オウンメディアを持つというやり方です。</p>
<p>しかし、実際ＥＣサイトを運営していると別サイト（オウンメディア）の運営・更新にまで手が回らないという問題が出てきます。</p>
<h4>ＥＣサイト自体をメディア化しているサイト</h6>
<p>そこでＥＣサイト自体をメディア化しているサイトが増えているようです。</p>
<p>その中でも成功している事例としてあげられているサイト「<a href="http://hokuohkurashi.com/">北欧、暮らしの道具店</a>」です。</p>
<p>「読みもの」と「お買いもの」が混在していて、サイトを見てみるとコンテンツとしては約３分の１が「読みもの」になっています。</p>
<p>イメージとしてはライフスタイルを提案する雑誌とＥＣサイトが一緒になった感じです。</p>
<p><a href="/uploads-archive/2014/10/e63ecb466731e4b3946ab2e46b3a36ff.png"><img decoding="async" loading="lazy" class="alignnone wp-image-5987" src="/uploads-archive/2014/10/e63ecb466731e4b3946ab2e46b3a36ff.png" alt="北欧雑貨と北欧食器の通販サイト  北欧、暮らしの道具店" width="679" height="526" srcset="/uploads-archive/2014/10/e63ecb466731e4b3946ab2e46b3a36ff.png 969w, /uploads-archive/2014/10/e63ecb466731e4b3946ab2e46b3a36ff-300x232.png 300w, /uploads-archive/2014/10/e63ecb466731e4b3946ab2e46b3a36ff-228x176.png 228w" sizes="(max-width: 679px) 100vw, 679px" /></a></p>
<p>&nbsp;</p>
<p>消費者が興味を持つコンテンツを提供する事でサイト対して好感をもってもらう事ができ、さらにgoogleからの評価も良くなるという事になります。</p>
<p>欲しい情報が入るサイトという認識を持ってもらえればリピート率が上がるというメリットがあります。</p>
<p>&nbsp;</p>
<p>「お買いもの」のページもおしゃれなブログっぽい作りになっているので商品に対しての情報を伝えやすく、</p>
<p>良さをしっかり伝える事で購買意欲につながるそうです。</p>
<p>&nbsp;</p>
<h4>メディアがＥＣサイト化するパターン</h6>
<p>「<a href="https://antenna.jp/">antenna</a>」はキュレーションメディアだと思っていましたが、最近はＥＣサイトみたいになっています。</p>
<p>「イタリアで話題の香水が日本初上陸」というニュース記事のページの中に購入できるカートがあったりします。</p>
<p>あたかもニュースのように商品を紹介していて上手いなと感じます。</p>
<p><a href="/uploads-archive/2014/10/4db83fcb67e202e273ca76032b095686.png"><img decoding="async" loading="lazy" class="alignnone  wp-image-5988" src="/uploads-archive/2014/10/4db83fcb67e202e273ca76032b095686.png" alt="キュレーションマガジン Antenna［アンテナ］" width="678" height="349" srcset="/uploads-archive/2014/10/4db83fcb67e202e273ca76032b095686.png 1903w, /uploads-archive/2014/10/4db83fcb67e202e273ca76032b095686-300x154.png 300w, /uploads-archive/2014/10/4db83fcb67e202e273ca76032b095686-1024x526.png 1024w, /uploads-archive/2014/10/4db83fcb67e202e273ca76032b095686-228x117.png 228w" sizes="(max-width: 678px) 100vw, 678px" /></a></p>
<p>キュレーションメディアとしての在り方として、広告を載せるなどの方法よりもスマートに感じます。</p>
<p>面白い記事でれば商品ページ自体が良質なコンテンツという事になります。</p>
<p>もちろん内容が伴わないといけませんが「メルマガ配信」「商品ページの作成」「オウンメディアの更新」に相当する作業が記事を書くという事だけで済んでしまいます。</p>
<p>&nbsp;</p>


ＥＣサイトをメディア化してＳＥＯ対策に成功した事例

<p>WordPressですと翻訳プラグインが多様にあるとは思いますが、今回はプラグインに頼らずに設置を試みました。<br />
結果、Wordpressに限らず、およそ所用時間5分ほど、Google翻訳ツールを設定、設置できることが分かりました。</p>
<ul>
<li>コストをかけずに対応したい。（人間翻訳相場が大体1文字〜10円で質や量に応じて増減）</li>
<li>もっとたくさんの言語に対応したい</li>
</ul>
<p>というニーズって結構あると思います。</p>
<p>本当にECサイトを進出をする気概があるならば、きちんと翻訳をして、現地との物流網（配送業者、倉庫）を整理して、商慣習に合わせて、といわゆるローカライズをしなければならないと思いますが、スモールビジネスに近くなるとどうしてもそこまでコストを回せないというパターンがあります。</p>
<p>配送は多少高くてもEMS、じゃあ、サイトはどうしようという場合に、このGoogle翻訳ツールも一つの選択肢としてありえます。</p>
<h2>設定方法</h2>
<p><a href="http://translate.google.com/translate_tools?hl=ja" target="_blank">http://translate.google.com/translate_tools?hl=ja</a></p>
<p>まずは、上記URLにアクセスします。</p>
<p><a href="/uploads-archive/2014/10/screenshot.png"><img decoding="async" loading="lazy" class="alignnone wp-image-5974 size-medium" src="/uploads-archive/2014/10/screenshot-300x95.png" alt="screenshot" width="300" height="95" srcset="/uploads-archive/2014/10/screenshot-300x95.png 300w, /uploads-archive/2014/10/screenshot-1024x326.png 1024w, /uploads-archive/2014/10/screenshot-228x72.png 228w, /uploads-archive/2014/10/screenshot.png 1370w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<p>「今すぐウェブサイトに追加」をします。</p>
<h2>ウェブサイト情報</h2>
<p><img decoding="async" loading="lazy" class="alignnone size-medium wp-image-5975" src="/uploads-archive/2014/10/screenshot1-300x128.png" alt="screenshot" width="300" height="128" srcset="/uploads-archive/2014/10/screenshot1-300x128.png 300w, /uploads-archive/2014/10/screenshot1-1024x439.png 1024w, /uploads-archive/2014/10/screenshot1-228x97.png 228w, /uploads-archive/2014/10/screenshot1.png 1355w" sizes="(max-width: 300px) 100vw, 300px" /></p>
<p>追加するWebサイトの情報を記載します。<br />
今回は当社のコーポレートサイトのURLを記述します。</p>
<h2>プラグインの設定</h2>
<p><img decoding="async" loading="lazy" class="alignnone size-medium wp-image-5976" src="/uploads-archive/2014/10/screenshot2-300x187.png" alt="screenshot" width="300" height="187" srcset="/uploads-archive/2014/10/screenshot2-300x187.png 300w, /uploads-archive/2014/10/screenshot2-1024x640.png 1024w, /uploads-archive/2014/10/screenshot2-228x142.png 228w, /uploads-archive/2014/10/screenshot2.png 1357w" sizes="(max-width: 300px) 100vw, 300px" /></p>
<p>今回はインラインを選択しました。</p>
<p>他にもGoogleアナリティクスの紐付けなどの詳細設定が可能です。こちらも調査のためアナリティクスも記載</p>
<p>コードを取得</p>
<h2>プラグイン追加</h2>
<p><img decoding="async" loading="lazy" class="alignnone size-medium wp-image-5977" src="/uploads-archive/2014/10/screenshot3-300x194.png" alt="screenshot" width="300" height="194" srcset="/uploads-archive/2014/10/screenshot3-300x194.png 300w, /uploads-archive/2014/10/screenshot3-1024x663.png 1024w, /uploads-archive/2014/10/screenshot3-228x147.png 228w, /uploads-archive/2014/10/screenshot3.png 1355w" sizes="(max-width: 300px) 100vw, 300px" /></p>
<p>あっさりとコードが発行されました。<br />
ここまで所要時間3分程度</p>
<p>上段のコードをタグの前に下段を表示させたい任意の場所に設置します。</p>
<h2>ウェブサイト翻訳ツール</h2>
<p><img decoding="async" loading="lazy" class="alignnone size-medium wp-image-5980" src="/uploads-archive/2014/10/screenshot6-300x208.png" alt="screenshot" width="300" height="208" srcset="/uploads-archive/2014/10/screenshot6-300x208.png 300w, /uploads-archive/2014/10/screenshot6-1024x713.png 1024w, /uploads-archive/2014/10/screenshot6-228x158.png 228w, /uploads-archive/2014/10/screenshot6.png 1305w" sizes="(max-width: 300px) 100vw, 300px" /></p>
<p>一度コードを発行すると同URLで管理画面が表示されるようになります。<br />
ここで、別の表示モードに変更をすることを出来ますのでお試し下さい。</p>
<h2>実際にやってみた</h2>
<p><img decoding="async" loading="lazy" class="alignnone size-medium wp-image-5978" src="/uploads-archive/2014/10/screenshot4-300x180.png" alt="screenshot" width="300" height="180" srcset="/uploads-archive/2014/10/screenshot4-300x180.png 300w, /uploads-archive/2014/10/screenshot4-228x137.png 228w, /uploads-archive/2014/10/screenshot4.png 1021w" sizes="(max-width: 300px) 100vw, 300px" /></p>
<p>デザインを崩さないようにフッターのほうにさっと置きました。<br />
タグの前にもちゃんと忘れずに設置しました。</p>
<p><img decoding="async" loading="lazy" class="alignnone size-medium wp-image-5979" src="/uploads-archive/2014/10/screenshot5-300x245.png" alt="screenshot" width="300" height="245" srcset="/uploads-archive/2014/10/screenshot5-300x245.png 300w, /uploads-archive/2014/10/screenshot5-228x186.png 228w, /uploads-archive/2014/10/screenshot5.png 982w" sizes="(max-width: 300px) 100vw, 300px" /></p>
<p>英語に翻訳してみました。</p>
<p>メインビジュアルは画像ですので、翻訳は当然されません。</p>
<p>「新宿区高田馬場のECサイト開発会社」は「EC site development company Takadanobaba, Shinjuku-ku」となり、<br />
「世界をもっと身近に」という企業理念は「The more familiar to the world.」という何とも響きがよい感じになりました。</p>


Google翻訳ツールをWordPressに設置してみた

<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

<p>wordpressで、webhookの通知を受けて自動処理をする仕組みを調べてみました。</p>
<h2>結論から言うと</h3>
<p>wordpressでwebhookの通知を受けるのに、下記hook（両方、もしくはどちらか）を定義して、任意実行したいPHPコードを書けばいいです。<br />
・「wp_ajax_アクションの名前」<br />
・「wp_ajax_nopriv_アクションの名前」</p>
<h2>webhook通知を受ける流れ</h3>
<p>１、（webhookだから他のサイトから）javascriptで/wp-admin/admin-ajax.php?action=hogeをへリスエストする。<br />
※今回ではアクションの名前をhogeとしている。<br />
２、admin-ajax.phpが登録しているhookを探して実行する。<br />
具体的には下記2種類があります。<br />
・「wp_ajax_アクションの名前」：ログインしているユーザ用<br />
・「wp_ajax_nopriv_アクションの名前」：ログインしていないユーザ用<br />
※今回は追加するhookの名前は、「wp_ajax_hoge」と「wp_ajax_nopriv_hoge」になるます。</p>
<p>下記のように、hookを追加することが必要になる。</p>

		<div id="crayon-649540157d1d8717818036" 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;">
add_action( 'wp_ajax_hoge', 'hoge' );
add_action( 'wp_ajax_nopriv_hoge', 'hoge' );
function hoge() {
  // この関数を実装必要
  // 任意phpコード
  // json形式で返すことも可、ページを遷移せずに表示を更新することが可能になる。
}</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-649540157d1d8717818036-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540157d1d8717818036-2">2</div><div class="crayon-num" data-line="crayon-649540157d1d8717818036-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540157d1d8717818036-4">4</div><div class="crayon-num" data-line="crayon-649540157d1d8717818036-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540157d1d8717818036-6">6</div><div class="crayon-num" data-line="crayon-649540157d1d8717818036-7">7</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-649540157d1d8717818036-1"><span class="crayon-e">add_action</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-s">'wp_ajax_hoge'</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-s">'hoge'</span><span class="crayon-h"> </span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540157d1d8717818036-2"><span class="crayon-e">add_action</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-s">'wp_ajax_nopriv_hoge'</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-s">'hoge'</span><span class="crayon-h"> </span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-649540157d1d8717818036-3"><span class="crayon-t">function</span><span class="crayon-h"> </span><span class="crayon-e">hoge</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 crayon-striped-line" id="crayon-649540157d1d8717818036-4"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-c">// この関数を実装必要</span></div><div class="crayon-line" id="crayon-649540157d1d8717818036-5"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-c">// 任意phpコード</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540157d1d8717818036-6"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-c">// json形式で返すことも可、ページを遷移せずに表示を更新することが可能になる。</span></div><div class="crayon-line" id="crayon-649540157d1d8717818036-7"><span class="crayon-sy">}</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>３、hookを実行することは、上記のhoge()関数を実行すること。</p>
<h2>おまけ</h3>
<p>wordpressでは、通知を受けるだけではなく、通知を起こすこともできます。<br />
通知を起こすことができるイベントは公式では、「記事を公開する」、「ページを公開する」、「コメントをする」この３つだけのようです。<br />
<a href="http://en.support.wordpress.com/webhooks/" target="_blank">wordpress webhook</a></p>

【wordpress】webhookを受ける仕組み

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

Smarty3 特徴など

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


Company

Our Solutions

Support

News

Blog

Blogブログ

カテゴリーから探す

年別から見る

記事一覧

2014/10/22

2014/10/22

2014/10/22

2014/10/22

2014/10/22

2014/10/21

2014/10/21

2014/10/19

2014/10/15

2014/10/15

2014/10/15

2014/10/14

2014/10/14

2014/10/08

2014/10/08

2014/10/08

2014/10/08

2014/10/08