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

small_nino-eye (5).jpg

thumbnail_nino-eye (5).jpg

nino-eye (5).jpg

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

CentOS 6から7にアップグレード

<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データの難読化について調べてみました

<p>AdobeさんからついにCreative Cloudライブラリなるものがでていました。</p>
<p>これは簡単にいうと、Creative Cloudのアカウントでクラウド上にお気に入りのアセット（ブラシ、グラフィック、フォント、カラー、スタイル）を保存しておき、別のデバイスでも同じように利用できるというものです。</p>
<p><a href="http://www.adobe.com/jp/creativecloud/libraries.html" target="_blank">アドビのファイル＆アプリでアセットを同期 | Creative Cloudライブラリ</a></p>
<p><a href="https://helpx.adobe.com/jp/creative-cloud/how-to/creative-cloud-libraries.html" target="_blank">Creative Cloudライブラリの使い方入門 | Adobe Creative Cloudチュートリアル</a></p>
<p>僕はCCはphotoshopを持っているので、早速導入してみました。<br />
まぁ導入といっても、photoshopの更新をしたら、ライブラリが勝手に入っていたんですが・・・</p>
<p><img decoding="async" loading="lazy" class="alignnone wp-image-6123" src="/uploads-archive/2014/10/2fab95d7a81fa10bbabef0cfc2fc5287-1024x648.png" alt="" width="640" height="406" /></p>
<p>こんな感じでサイドにライブラリが追加されていました。</p>
<p>&nbsp;<br />
ちなみにライブラリの作成は制限がなく、ライブラリには1000個までアセットが登録できます。<br />
自分なりにライブラリを作って、分類分けをするのがいいですね！</p>
<p>さっそく、フラットアイコンというライブラリを作り、フリーのアイコンを追加してみました。</p>
<p><img decoding="async" loading="lazy" src="/uploads-archive/2014/10/31b7d5c68b080c96dabbb11c0aaad4a8.png" alt="スクリーンショット 2014-10-28 14.47.00" width="399" height="509" class="alignnone size-full wp-image-6124" srcset="/uploads-archive/2014/10/31b7d5c68b080c96dabbb11c0aaad4a8.png 399w, /uploads-archive/2014/10/31b7d5c68b080c96dabbb11c0aaad4a8-235x300.png 235w, /uploads-archive/2014/10/31b7d5c68b080c96dabbb11c0aaad4a8-228x290.png 228w" sizes="(max-width: 399px) 100vw, 399px" /><br />
&nbsp;<br />
このライブラリは簡単にドラッグ&#038;ドロップで簡単に使用することができます。</p>
<p><img decoding="async" src="/demo/abe/sample/201410281500.gif" alt="スクリーンショット 2014-10-28 14.47.00" width="640" /><br />
&nbsp;</p>
<p>簡単に、よく使用してる素材を呼び出すことができますね！<br />
以前こんなプラグインがないかと探し、<a href="http://pixeldropr.com/" target="_blank">Pixel Dropr</a><br />
というものを見つけて買おうかどうか迷ったんですが、もう必要ないかもしれません。</p>
<p>ユーザーによって使い方は様々あると思うので、この機能はけっこうありがたいですね！</p>
<p>ちなみに少し前にアプリがいろいろ出ていたのですが、<br />
<a href="http://www.adobe.com/jp/creativecloud/catalog/mobile.html" target="_blank">アドビモバイルおよびタブレットアプリ | Adobe Creative Cloud</a><br />
iPhoneやiPadでブラシやシェイプを作り、ライブラリと連携することができるようです。<br />
どこでも制作ができるようになったみたいなふれ込みですが、それがいいのか悪いか・・・笑</p>
<h2>おまけ、、、</h2>
<p>先週の記事の中で、<br />
興味ある記事がありました。<br />
<a href="http://liginc.co.jp/web/js/other-js/121082" target="_blank">LIGのソースコードレビュー会で使用している共有ツールとライブラリの活用方法の紹介 | 株式会社LIG</a></p>
<p>このツールもさることながら、ソースコードレビュー会、これはいいなぁと思いました。会社としてレベルアップするためにもこういう会は必要だと思うので、弊社でも実践してみようかな。。。と思います。</p>


求めていた機能がついに！AdobeのCreative Cloudライブラリ

easyABのユニバーサルアナリティクスに対応した実装方法

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

Company

Our Solutions

Support

News

Blog

Blogブログ

カテゴリーから探す

年別から見る

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

2014/11/06

2014/11/05

2014/11/04

2014/10/29

2014/10/29

2014/10/28

2014/10/22

2014/10/22

2014/10/22

2014/10/22

2014/10/21

2014/10/19

2014/10/15

2014/10/15

2014/10/15

2014/10/14

2014/10/08

2014/10/08