<p>Subversion（svn）でどうやって前のバージョンに戻す方法について調べてみました。<br />
実際に使ったわけではなく、メモになります。</p>
<h2>ツール</h2>
<h3>svnコマンド（Macのターミナル）</h3>
<p>Xcodeをインストールしたついてくるらしいです。<br />
brewやmacportsでインストールこともあり。</p>
<p></p>

		<div id="crayon-649540157f6c5387415407" 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;">
which svn
/usr/bin/svn</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-649540157f6c5387415407-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540157f6c5387415407-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-649540157f6c5387415407-1"><span class="crayon-e">which </span><span class="crayon-i">svn</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540157f6c5387415407-2">/<span class="crayon-i">usr</span>/<span class="crayon-i">bin</span>/<span class="crayon-i">svn</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p> </p>
<h3> TortoiseSVN（Windows）</h3>
<p>GUI（フォルダの窓になる）。<br />
WindowsのShellでコマンドラインが使えるらしい。</p>
<h3>Eclipse</h3>
<p>Subversionプラグインをインストールすること。<br />
GUI。コマンドラインは使えないらしい。</p>
<h2>やり方</h2>
<p>コマンドラインでコマンドを打つか、EclipseのGUIで操作をするかでやり方が分けられます。</p>
<p>コマンドラインでコマンドを打つ方法で、svn merge と svn updateの２つの方法を紹介しますが、<br />
個人的にはsvn updateのほうが使えたとしても、ローカルファイルの更新のみになるので、もう一回svn commitが必要かと思います。</p>
<h3>svn merge</h3>
<p>リビジョン 31 を破棄して 30 に戻す例である。</p>

		<div id="crayon-649540157f6c9792510396" 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;">
svn merge -r 31:30 http://svn.example.com/repos/calc/trunk
svn commit -m "Undoing change committed in r31."</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-649540157f6c9792510396-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540157f6c9792510396-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-649540157f6c9792510396-1"><span class="crayon-e">svn </span><span class="crayon-i">merge</span><span class="crayon-h"> </span>-<span class="crayon-i">r</span><span class="crayon-h"> </span><span class="crayon-cn">31</span><span class="crayon-sy">:</span><span class="crayon-cn">30</span><span class="crayon-h"> </span><span class="crayon-i">http</span><span class="crayon-sy">:</span><span class="crayon-c">//svn.example.com/repos/calc/trunk</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540157f6c9792510396-2"><span class="crayon-e">svn </span><span class="crayon-i">commit</span><span class="crayon-h"> </span>-<span class="crayon-i">m</span><span class="crayon-h"> </span><span class="crayon-s">"Undoing change committed in r31."</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p> </p>
<h3>svn update</h3>
<p></p>

		<div id="crayon-649540157f6cb742467329" 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;">
svn update -r 30</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-649540157f6cb742467329-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-649540157f6cb742467329-1"><span class="crayon-e">svn </span><span class="crayon-i">update</span><span class="crayon-h"> </span>-<span class="crayon-i">r</span><span class="crayon-h"> </span><span class="crayon-cn">30</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p> </p>
<h2>おわり</h2>
<p>けっこう前からSubversionを使ってきましたが、やはりSubversionの機能全部は使えこなせていなかったのようです。<br />
Subversionサーバー構築もあるから、少し奥深い感じますね。</p>

svnを前のバージョンに戻す方法

<p>私がHTMLについて勉強を始めた頃はXHTML1.0が主流として使われており、</p>
<p>XHTMLでは要素（タグ）がインライン要素とブロック要素の2種類だけに分かれていて、</p>
<p>「インライン要素の中にブロック要素を入れてはいけない」「インライン要素は意味を持つブロック要素で囲む必要がある」といったことを念頭に入れていればコーディングで大きな間違いはなかったのですが、</p>
<p>&nbsp;</p>
<p>HTML5でコンテンツモデルという新たな要素の分類基準が設けられてからは、</p>
<p>a要素でブロック要素と呼ばれていたグループの要素を囲むことが可能になったりするなど、</p>
<p>要素の囲み方のルールが複雑になりました。</p>
<p>&nbsp;</p>
<p>tableの直下にはtbody, thead, trのいずれかしか配置してはいけないなど、</p>
<p>基本的な各要素の囲み方のルールはXHTMLと替わらないのですが、</p>
<p>「a要素で囲むことができるのはどこまで？」「spanやstrongのルールは変わったの？」</p>
<p>といった、HTML5からの新たなルールがどのようなものかわからないと、</p>
<p>間違ったコーディングをしてしまうことは避けられないので、</p>
<p>今回具体的に調べてみることにしました。</p>
<p>&nbsp;</p>
<p>参考サイト</p>
<p><a class="link" href="http://ascii.jp/elem/000/000/628/628869/" target="_blank">浜 俊太朗のHTML5マークアップ移行ガイド</a></p>
<p><a class="link" href="http://www.htmq.com/html5/007.shtml" target="_blank">HTML5における要素の分類（コンテンツ・モデル）－HTML5リファレンス</a></p>
<p><a class="link" href="http://www.w3.org/TR/2010/WD-html5-20101019/content-models.html" target="_blank">3.2.5 Content models — HTML5 </a></p>
<p>&nbsp;</p>
<p>参考図書</p>
<p><a class="link" href="http://www.amazon.co.jp/dp/4048660705" target="_blank">『HTML5マークアップ 現場で使える最短攻略ガイド』 浜俊太朗(著) 2013.12</a></p>
<p>&nbsp;</p>
<h2>HTML5のコンテンツモデルとは？</h2>
<p>コンテンツモデルとは、簡単に言うと、</p>
<p>「どの分類の要素が、どの分類の要素を含むことができるのか」というルールのことです。</p>
<p>HTML5では要素が14種類に分類されています。</p>
<p>&nbsp;</p>
<p>とはいえ、それぞれの要素が1つずつ分類を持っているのではなく、複数の分類を持ちます。</p>
<p>たとえば、h1要素は「フレージングコンテンツ」という<strong>コンテンツモデル</strong>に分類されており、</p>
<p>「フローコンテンツ」、「ヘッディングコンテンツ」という<strong>カテゴリー</strong>に属します。</p>
<p>&nbsp;</p>
<p>h1要素の場合、フレージングコンテンツというコンテンツモデルであり、</p>
<p>フレージングコンテンツのカテゴリーに属する要素のみを含むことができます。</p>
<p>&nbsp;</p>
<p>つまり、「どのコンテンツモデルが、どのカテゴリーの要素を含むことができるか」というルールが、</p>
<p>コンテンツモデルの基本になります。</p>
<p>&nbsp;</p>
<p>しかしながら、HTML5のコンテンツモデルはこの限りではなく、全部で次の７つのパターンがあります。</p>
<ol>
<li>カテゴリー単位で定義: h1, span etc.</li>
<li>カテゴリー単位で定義(条件つき): header, button etc.</li>
<li>特定の内容のみ入れられる: table, ul etc.</li>
<li>特定の内容のみ入れられる(条件つき): dl etc.</li>
<li>他の要素を入れられない: img, br etc.</li>
<li>親要素の条件を引き継ぐ: del, ins etc.</li>
<li>親要素の条件を引き継ぐ(条件付き): a, iframe etc.</li>
</ol>
<p>つまり、ある程度の基本的なルールはあるが、</p>
<p>各要素の特性によって含むことができる要素がそれぞれ限られているということのようです。</p>
<p>&nbsp;</p>
<p>とはいっても、この特性は、</p>
<p>「tableの直下にはtrやtbodyのようなテーブル関係の要素しか入れられない」</p>
<p>「dlには最低1つのdtとそれに続く１つ以上のddを入れなければならない」</p>
<p>「フレージングコンテンツのコンテンツモデルであるbuttonのような操作できる要素(インタラクティブコンテンツ)には、</p>
<p>フレージングコンテンツのカテゴリであってもaやiframeのような同じく操作できる要素を含むことはできない」</p>
<p>といった、</p>
<p>それぞれの要素の意味や基本的な使い方が理解できていれば迷うことのないものばかりですので、</p>
<p>そこまで複雑に考える必要はないと言えます。</p>
<p>&nbsp;</p>
<p>それでは、コンテンツモデルの基本になるカテゴリーとコンテンツモデルについて、具体的にご紹介いたします。</p>
<h2>カテゴリーと要素</h2>
<h3>メタデータコンテンツ(Metadata content)</h3>
<p>おもにhead要素に入る、メタデータやスタイル・スクリプトといった、基本的に描画されない要素です。</p>
<p>このカテゴリの要素: base, link, meta, noscript, script, style, title</p>
<p>&nbsp;</p>
<h3>フローコンテンツ(Flow content)</h3>
<p>文書に使われるほとんどの要素です。</p>
<p>このカテゴリーの要素: <em>a, abbr, address, area, article, aside, audio, b, bdo, blockquote, br, button, canvas, cite, code, command, datalist, del, details, dfn, div, dl, em, embed, fieldset, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, hr, i, iframe, img, input, ins, kbd, keygen, label, link, map, mark, math, menu, meta, meter, nav, noscript, object, ol, output, p, pre, progress, q, ruby, s, samp, script, section, select, small, span, strong, style, sub, sup, svg, table, textarea, time, ul, var, video, wbr, テキスト</em></p>
<p>&nbsp;</p>
<h3>セクショニングコンテンツ(Sectioning content)</h3>
<p>セクションの範囲を定義する要素です。</p>
<p>このカテゴリの要素: <em>article, aside, nav, section</em></p>
<p>&nbsp;</p>
<h3>ヘッディングコンテンツ(Heading content)</h3>
<p>セクションのヘッダー(見出し)を表す要素です</p>
<p>このカテゴリの要素:<em> h1, h2, h3, h4, h5, h6 (hgroupは廃止)</em></p>
<p>&nbsp;</p>
<h3>フレージングコンテンツ(Phrasing content)</h3>
<p>文書のテキストを表す要素です。この要素の多くがフレージングコンテンツのコンテンツモデルとなります。</p>
<p>以前インライン要素と呼ばれていた要素の多くがこの要素にあたります。</p>
<p>このカテゴリの要素: <em>a, abbr, area, audio, b, bdo, br, button, canvas, cite, code, command, datalist, del, dfn, em, embed, i, iframe, img, input, ins, kbd, keygen, label, link, map, mark, math, meta, meter, noscript, object, output, progress, q, ruby, s, samp, script, select, small, span, strong, sub, sup, svg, textarea, time, var, video, wbr, テキスト</em></p>
<p>&nbsp;</p>
<h3>エンベッディッドコンテンツ(Embedded content)</h3>
<p>文書に他のリソース(画像や動画)を埋め込んだり、他の語彙(svgなど)を挿入したりする要素です。</p>
<p>このカテゴリの要素: <em>audio, canvas, embed, iframe, img, math, object, svg, video</em></p>
<p>&nbsp;</p>
<h3>インタラクティブコンテンツ(Iteractive content)</h3>
<p>ユーザーが操作できる要素です。</p>
<p>このカテゴリの要素: <em>a, audio, button, details, embed, iframe, img, input, keygen, label, menu, object, select, textarea, video</em></p>
<p>&nbsp;</p>
<h3>パルパブルコンテンツ(Palpable content)</h3>
<p>具体的な意味を持つ要素のことです。</p>
<p>br要素やhr要素のような、具体的な意味を持たない要素はこのコンテンツから省かれます。</p>
<p>フローティングコンテンツやフレージングコンテンツのコンテンツモデルをもつ要素は、</p>
<p>hidden属性の指定されていないパルパブルコンテンツを含まなければならないと定義されています。</p>
<p>このカテゴリの要素: <em>a, abbr, address, article, aside, audio(controls属性を持つ場合), b, bdi, bdo, blockquote, button, canvas, cite, code, data, details, dfn, div, dl(dtとddが一組以上ある場合), em, embed, fieldset, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, i, iframe, img, input(type属性の値がhiddenでない場合), ins, kbd, keygen, label, map, mark, math, menu(type属性の値がtoolbarかlistの場合), meter, nav, object, ol(子要素に一つ以上のli要素を持つ場合), output, p, pre, progress, q, ruby, s, samp, section, select, small, span, strong, sub, sup, svg, table, textarea, time, u, ul(子要素に一つ以上のli要素を持つ場合), var, video, テキスト(半角スペースのみは除く)</em></p>
<p>&nbsp;</p>
<p><a href="http://ascii.jp/elem/000/000/628/628869/" target="_blank">こちら</a>のサイトで、それぞれの要素の具体的なルールが紹介されていますので、</p>
<p>是非、参考になされてください。</p>


インライン要素・ブロック要素に替わるHTML5のコンテンツモデルとは？

SQLセキュリティ対策

クールでカッコイイいろんな機能満載のスライダー「Slider Pro」jqueryプラグイン

<p><a class="link" href="http://briangonzalez.github.io/jquery.adaptive-backgrounds.js/" target="_blank">jquery.adaptive-backgrounds.js</a></p>
<p><a href="http://briangonzalez.github.io/jquery.adaptive-backgrounds.js/" target="_blank">jquery.adaptive-backgrounds.js</a>はimgの画像のドミナントカラーを調べて、</p>
<p>背景色にしてくれるjQueryのプラグインです。</p>
<p>写真に合わせて背景色を変えるデザインなどで使えそうです。</p>
<p>&nbsp;</p>
<p>ちなみにこちらのjQueryプラグインでは、色の取得にHTML5のCanvasを使っているため、</p>
<p>HTML5に対応したブラウザで動作します。</p>
<p>&nbsp;</p>
<p><a class="demo" href="/demo/ninomiya/57/" target="_blank">DEMO</a></p>
<p>&nbsp;</p>
<h2>使い方</h2>
<p><a href="https://github.com/briangonzalez/jquery.adaptive-backgrounds.js" target="_blank">こちら</a>からファイルをダウンロードし、htmlのheadでjqueryと一緒にJSファイルを読み込みます。</p>

		<div id="crayon-649540157eea3068449914" 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">HTML</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;head&gt;
・・・
&lt;script type="text/javascript" src="js/jquery-1.11.1.min.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="js/jquery.adaptive-backgrounds.js"&gt;&lt;/script&gt;
・・・
&lt;/head&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-649540157eea3068449914-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540157eea3068449914-2">2</div><div class="crayon-num" data-line="crayon-649540157eea3068449914-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540157eea3068449914-4">4</div><div class="crayon-num" data-line="crayon-649540157eea3068449914-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540157eea3068449914-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-649540157eea3068449914-1"><span class="crayon-r ">&lt;head&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540157eea3068449914-2"><span class="crayon-i ">・・・</span></div><div class="crayon-line" id="crayon-649540157eea3068449914-3"><span class="crayon-i "><span class="crayon-ta">&lt;script </span><span class="crayon-e ">type</span>=<span class="crayon-s">"text/javascript"</span><span class="crayon-h"> </span><span class="crayon-e ">src</span>=<span class="crayon-s">"js/jquery-1.11.1.min.js"</span><span class="crayon-h">&gt;</span><span class="crayon-ta">&lt;/script&gt;</span></span></div><div class="crayon-line crayon-striped-line" id="crayon-649540157eea3068449914-4"><span class="crayon-i "><span class="crayon-ta">&lt;script </span><span class="crayon-e ">type</span>=<span class="crayon-s">"text/javascript"</span><span class="crayon-h"> </span><span class="crayon-e ">src</span>=<span class="crayon-s">"js/jquery.adaptive-backgrounds.js"</span><span class="crayon-h">&gt;</span><span class="crayon-ta">&lt;/script&gt;</span></span></div><div class="crayon-line" id="crayon-649540157eea3068449914-5"><span class="crayon-i ">・・・</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540157eea3068449914-6"><span class="crayon-r ">&lt;/head&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>&nbsp;</p>
<p>色を取得するターゲットとなるimg要素に「data-adaptive-background=&#8217;1&#8217;」を、</p>
<p>背景色を設定する親要素に「data-ab-css-background=&#8217;1&#8217;」を設定します。</p>

		<div id="crayon-649540157eea7595854631" 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">HTML</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;li class="image" data-ab-css-background='1'&gt;&lt;img src="images/spring1.jpg" alt="image" data-adaptive-background='1'&gt;&lt;/li&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-649540157eea7595854631-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-649540157eea7595854631-1"><span class="crayon-r ">&lt;li </span><span class="crayon-e ">class</span>=<span class="crayon-s ">"image"</span><span class="crayon-h"> </span><span class="crayon-e ">data-ab-css-background</span>=<span class="crayon-s ">'1'</span><span class="crayon-r ">&gt;</span><span class="crayon-r ">&lt;img </span><span class="crayon-e ">src</span>=<span class="crayon-s ">"images/spring1.jpg"</span><span class="crayon-h"> </span><span class="crayon-e ">alt</span>=<span class="crayon-s ">"image"</span><span class="crayon-h"> </span><span class="crayon-e ">data-adaptive-background</span>=<span class="crayon-s ">'1'</span><span class="crayon-r ">&gt;</span><span class="crayon-r ">&lt;/li&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>&nbsp;</p>
<p>以下のコードでプラグインを実行します。</p>

		<div id="crayon-649540157eea9978137669" 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">JavaScript</span>
			<div class="crayon-tools" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div><span class="crayon-language">JavaScript</span></div></div>
			<div class="crayon-info" style="min-height: 19.5px !important; line-height: 19.5px !important;"></div>
			<div class="crayon-plain-wrap"><textarea  class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 13px !important; line-height: 18px !important;">
$(function(){
	$.adaptiveBackground.run();
});</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-649540157eea9978137669-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540157eea9978137669-2">2</div><div class="crayon-num" data-line="crayon-649540157eea9978137669-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-649540157eea9978137669-1"><span class="crayon-sy">$</span><span class="crayon-sy">(</span><span class="crayon-t">function</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540157eea9978137669-2"><span class="crayon-h">	</span><span class="crayon-sy">$</span><span class="crayon-sy">.</span><span class="crayon-i">adaptiveBackground</span><span class="crayon-sy">.</span><span class="crayon-e">run</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-649540157eea9978137669-3"><span class="crayon-sy">}</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>&nbsp;</p>
<p>取得した色の情報などは、以下のように記述することで取得が可能です。</p>

		<div id="crayon-649540157eeaa951081602" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover wrap" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 18px !important;">
		
			<div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><span class="crayon-title"></span>
			<div class="crayon-tools" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div><span class="crayon-language">JavaScript</span></div></div>
			<div class="crayon-info" style="min-height: 19.5px !important; line-height: 19.5px !important;"></div>
			<div class="crayon-plain-wrap"><textarea  class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 13px !important; line-height: 18px !important;">
$(function(){
	$.adaptiveBackground.run({
		success: function($img, data) {
			console.log("color-code: " + data.color);
		}
	});
});</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-649540157eeaa951081602-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540157eeaa951081602-2">2</div><div class="crayon-num" data-line="crayon-649540157eeaa951081602-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540157eeaa951081602-4">4</div><div class="crayon-num" data-line="crayon-649540157eeaa951081602-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540157eeaa951081602-6">6</div><div class="crayon-num" data-line="crayon-649540157eeaa951081602-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-649540157eeaa951081602-1"><span class="crayon-sy">$</span><span class="crayon-sy">(</span><span class="crayon-t">function</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540157eeaa951081602-2"><span class="crayon-h">	</span><span class="crayon-sy">$</span><span class="crayon-sy">.</span><span class="crayon-i">adaptiveBackground</span><span class="crayon-sy">.</span><span class="crayon-e">run</span><span class="crayon-sy">(</span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-649540157eeaa951081602-3"><span class="crayon-h">		</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-sy">$</span><span class="crayon-i">img</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-i">data</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-649540157eeaa951081602-4"><span class="crayon-h">			</span><span class="crayon-i">console</span><span class="crayon-sy">.</span><span class="crayon-e">log</span><span class="crayon-sy">(</span><span class="crayon-s">"color-code: "</span><span class="crayon-h"> </span>+<span class="crayon-h"> </span><span class="crayon-i">data</span><span class="crayon-sy">.</span><span class="crayon-i">color</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-649540157eeaa951081602-5"><span class="crayon-h">		</span><span class="crayon-sy">}</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540157eeaa951081602-6"><span class="crayon-h">	</span><span class="crayon-sy">}</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-649540157eeaa951081602-7"><span class="crayon-sy">}</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>背景色に反映される色の data.color以外に、data.palette[0]〜data.palette[19]に画像からサンプリングした色が入っていますので、</p>
<p>こちらも合わせて使うと、もっとデザインの幅が広がるかもしれません。</p>
<p>&nbsp;</p>

写真のドミナントカラーを親要素の背景色にするjQueryプラグイン「jquery.adaptive-backgrounds.js」

ajaxの書き方

JSON形式のデータを返すAPI

横幅だけじゃない！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>

Company

Our Solutions

Support

News

Blog

Blogブログ

カテゴリーから探す

年別から見る

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

2014/11/19

2014/11/19

2014/11/12

2014/11/12

2014/11/12

2014/11/11

2014/11/06

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