ドラッグ&#038;ドロップで移動できるライトボックス風のjQueryプラグインを作ってみた(改良その１)

【iptables】ファイアーウォール設定研究

<p>phpの作業で数値の正規表現をチェックする時にいつも検索してコピーして使っていました。</p>
<p>しかし、自分で自由に修正したい場合は、正規表現書き方や人が書いてあるものを理解していないと困る。</p>
<p>今日はいつも面倒見てくれているエンジニアが説明してくれたので、理解できるようになりました。</p>
<p>理解しておくと効率がいいですね（^_^）</p>
<p>少しだけですが、今日覚えたことを書きたいと思います。</p>
<table>
<tbody>
<tr>
<td>&#8211;</td>
<td>範囲</td>
</tr>
<tr>
<td>^</td>
<td>文字列の先頭</td>
</tr>
<tr>
<td>$</td>
<td>文字列の末尾</td>
</tr>
<tr>
<td>a-z </td>
<td>小文字の半角英文字</td>
</tr>
<tr>
<td>A-Z</td>
<td>大文字の半角英文字</td>
</tr>
<tr>
<td>0-9</td>
<td>数字</td>
</tr>
<tr>
<td>^0-9</td>
<td>数字以外</td>
</tr>
<tr>
<td>*</td>
<td>0回以上の連続する文字</td>
</tr>
<tr>
<td>+</td>
<td>1回以上の連続する文字</td>
</tr>
<tr>
<td>? </td>
<td>0または1回だけの文字</td>
</tr>
<tr>
<td>{n}?</td>
<td>n回の連続する文字</td>
</tr>
<tr>
<td>{n,}?</td>
<td>n回以上の連続する文字</td>
</tr>
<tr>
<td>{n, m}?</td>
<td>n回以上、m回以下の連続する文字</td>
</tr>
</tbody>
</table>


PHP正規表現

<p>先日、たまたまチケットを頂く機会があり<br />
熱々！東南アジアの現代美術<br />
<a href="http://www.yaf.or.jp/yma/jiu/2013/jungle/" target="_blank">http://www.yaf.or.jp/yma/jiu/2013/jungle/</a><br />
に行ってきた。</p>
<p>正直特に興味があるわけでもなく、期待せず気まぐれで行ったのだが<br />
結構良かったので、出品作家のなかで良いなと思った方についてまとめてみた。</p>
<h2>イー・イラン</h3>
<p><a href="/uploads-archive/2013/05/228871f243f12715ec67c9b2fd751504.jpg"><img decoding="async" loading="lazy" class="aligncenter size-full wp-image-2280" alt="イー・イラン" src="/uploads-archive/2013/05/228871f243f12715ec67c9b2fd751504.jpg" width="656" height="425" srcset="/uploads-archive/2013/05/228871f243f12715ec67c9b2fd751504.jpg 656w, /uploads-archive/2013/05/228871f243f12715ec67c9b2fd751504-228x148.jpg 228w, /uploads-archive/2013/05/228871f243f12715ec67c9b2fd751504-300x194.jpg 300w" sizes="(max-width: 656px) 100vw, 656px" /></a></p>
<p>作家のアイデンティティを表現した作品だそう。<br />
個人的には写実的なシュールレアリスムの延長のような感じがする中<br />
東南アジア独特の世界観が神秘的な印象を受けた。</p>
<h2>ニェ・レイ</h3>
<p><a href="/uploads-archive/2013/05/f410d625b22c6b299c079890c5e0b9bb.jpg"><img decoding="async" loading="lazy" class="aligncenter size-full wp-image-2283" alt="ニェ・レイ" src="/uploads-archive/2013/05/f410d625b22c6b299c079890c5e0b9bb.jpg" width="656" height="1024" srcset="/uploads-archive/2013/05/f410d625b22c6b299c079890c5e0b9bb.jpg 656w, /uploads-archive/2013/05/f410d625b22c6b299c079890c5e0b9bb-228x356.jpg 228w, /uploads-archive/2013/05/f410d625b22c6b299c079890c5e0b9bb-192x300.jpg 192w" sizes="(max-width: 656px) 100vw, 656px" /></a></p>
<p>自国の混乱と作家の家庭環境を重ねあわせ、作家の心理状況を投影させた作品だそう。<br />
西洋的で高貴な雰囲気と、東南アジア的な雰囲気が新鮮な印象を受けた。</p>
<h2>ロベルト・フェレオ</h3>
<p><a href="/uploads-archive/2013/05/ec679311c2ef026e94b92780182377e5.jpg"><img decoding="async" loading="lazy" class="aligncenter size-full wp-image-2286" alt="ロベルト・フェレオ" src="/uploads-archive/2013/05/ec679311c2ef026e94b92780182377e5.jpg" width="656" height="450" srcset="/uploads-archive/2013/05/ec679311c2ef026e94b92780182377e5.jpg 656w, /uploads-archive/2013/05/ec679311c2ef026e94b92780182377e5-300x206.jpg 300w, /uploads-archive/2013/05/ec679311c2ef026e94b92780182377e5-228x156.jpg 228w" sizes="(max-width: 656px) 100vw, 656px" /></a></p>
<p>神話や宗教的な物語を織り交ぜたテーマで構成されている。<br />
伝統的なモチーフを現代風にアレンジしており、これも単純な欧米的な現代観とは違った雰囲気を持つとても惹かれる作品だった。</p>
<h2>ポクロン・アナディン</h3>
<p><a href="/uploads-archive/2013/05/7c72e03a78185973e13f529121360c61.jpeg"><img decoding="async" loading="lazy" class="aligncenter size-full wp-image-2285" alt="ポクロン・アナディン" src="/uploads-archive/2013/05/7c72e03a78185973e13f529121360c61.jpeg" width="656" height="748" srcset="/uploads-archive/2013/05/7c72e03a78185973e13f529121360c61.jpeg 656w, /uploads-archive/2013/05/7c72e03a78185973e13f529121360c61-228x260.jpeg 228w, /uploads-archive/2013/05/7c72e03a78185973e13f529121360c61-263x300.jpeg 263w" sizes="(max-width: 656px) 100vw, 656px" /></a></p>
<p>シリーズ作品。撮影地の風俗習慣が作品を通して伝わる作品。</p>
<h2>スティーヴ・ティロナ</h3>
<p><a href="/uploads-archive/2013/05/b34995b4879614efce251e06917a5abb.jpg"><img decoding="async" loading="lazy" class="aligncenter size-full wp-image-2282" alt="スティーヴ・ティロナ" src="/uploads-archive/2013/05/b34995b4879614efce251e06917a5abb.jpg" width="656" height="333" srcset="/uploads-archive/2013/05/b34995b4879614efce251e06917a5abb.jpg 656w, /uploads-archive/2013/05/b34995b4879614efce251e06917a5abb-228x116.jpg 228w, /uploads-archive/2013/05/b34995b4879614efce251e06917a5abb-300x152.jpg 300w" sizes="(max-width: 656px) 100vw, 656px" /></a></p>
<p>有名らしい。皮肉感あふれるシリーズだった。<br />
色彩が豊富でポップアートのようだが風刺絵のように見えてならない。</p>
<h2>シャノン・リー・キャッスルマン、フランク・カリャガン、フランシス・ン</h2>
<p><a href="/uploads-archive/2013/05/384910f0c19be54e11789393fc3b7d85.jpeg"><img decoding="async" loading="lazy" class="aligncenter size-full wp-image-2284" alt="フランシス・ン" src="/uploads-archive/2013/05/384910f0c19be54e11789393fc3b7d85.jpeg" width="656" height="226" srcset="/uploads-archive/2013/05/384910f0c19be54e11789393fc3b7d85.jpeg 656w, /uploads-archive/2013/05/384910f0c19be54e11789393fc3b7d85-228x79.jpeg 228w, /uploads-archive/2013/05/384910f0c19be54e11789393fc3b7d85-300x103.jpeg 300w" sizes="(max-width: 656px) 100vw, 656px" /></a></p>
<p><a href="/uploads-archive/2013/05/b77f14f1babdbb73ed9385aee6bd83c0.jpg"><img decoding="async" loading="lazy" class="aligncenter size-full wp-image-2281" alt="シャノン・リー・キャッスルマン" src="/uploads-archive/2013/05/b77f14f1babdbb73ed9385aee6bd83c0.jpg" width="656" height="500" srcset="/uploads-archive/2013/05/b77f14f1babdbb73ed9385aee6bd83c0.jpg 656w, /uploads-archive/2013/05/b77f14f1babdbb73ed9385aee6bd83c0-300x229.jpg 300w, /uploads-archive/2013/05/b77f14f1babdbb73ed9385aee6bd83c0-228x174.jpg 228w" sizes="(max-width: 656px) 100vw, 656px" /></a></p>
<p>それぞれ写真の作品。<br />
急速に発展する東南アジア諸国の陰と陽を美しく切り取っており<br />
エネルギーが伝わってくる作品。</p>
<p>全体としては、内乱、民族問題、政治問題など、陰な要素と<br />
熱帯的でトロピカルな陽な部分が混在して独特な雰囲気を醸し出していることと<br />
東南アジアの伝統とグローバルで現代的な要素が入り混じり、新鮮な印象を受けた。</p>
<p>ほとんどの作家がwikipediaにも載っていないまだまだ知られざる領域だが<br />
今後も機会があれば注目して行きたいと思う、良い出会いだった。</p>


東南アジアの現代美術 がとても良かった件

<p>Googleドライブで画像を表示したとき、</p>
<p>画像を拡大した場合に、ドラッグ&amp;ドロップで移動させることで、</p>
<p>画像の画面外に隠れて見えなくなっていた場所を表示させることができるのが便利と思い、</p>
<p>jQueryのプラグインぽいものを作ってみました、</p>
<p>&nbsp;</p>
<p>追記：改良しました！→<a href="/designer/%E3%83%89%E3%83%A9%E3%83%83%E3%82%B0%E3%83%89%E3%83%AD%E3%83%83%E3%83%97%E3%81%A7%E7%A7%BB%E5%8B%95%E3%81%A7%E3%81%8D%E3%82%8B%E3%83%A9%E3%82%A4%E3%83%88%E3%83%9C%E3%83%83%E3%82%AF%E3%82%B9%E9%A2%A8-2.html">ドラッグ&amp;ドロップで移動できるライトボックス風のjQueryプラグインを作ってみた(改良その１)</a></p>
<p>&nbsp;</p>
<p>↓こちらがデモ</p>
<p><a href="/demo/ninomiya/20/" target="_blank">DEMO</a></p>
<p>&nbsp;</p>
<h2>実装方法</h3>
<p>１．必要なJS、CSSのダウンロード</p>
<p><a href="http://jquery.com/" target="_blank">jQuery</a> (jQuery-1.9.1を推奨します)</p>
<p><a href="http://pep.briangonzalez.org/" target="_blank">jQuery.pep.js</a> (画像のドラッグ&amp;ドロップに利用)</p>
<p><a href="/demo/ninomiya/20/js/jquery-fiview.js" target="_blank">jquery-fiview.js</a> (今回作ったもの)</p>
<p><a href="/demo/ninomiya/20/css/jquery-fiview.css" target="_blank">jquery-fiview.css</a></p>
<p>&nbsp;</p>
<p>2.HTML</p>

		<div id="crayon-64953fd58a330645391417" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover wrap" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 18px !important;">
		
			<div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><span class="crayon-title"></span>
			<div class="crayon-tools" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div><span class="crayon-language">XHTML</span></div></div>
			<div class="crayon-info" style="min-height: 19.5px !important; line-height: 19.5px !important;"></div>
			<div class="crayon-plain-wrap"><textarea  class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 13px !important; line-height: 18px !important;">
&lt;link href="css/jquery-fiview.css" rel="stylesheet" type="text/css"&gt;

&lt;script type="text/javascript" src="js/jquery-1.9.1.min.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="js/jquery.pep.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="js/jquery-fiview.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-64953fd58a330645391417-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd58a330645391417-2">2</div><div class="crayon-num" data-line="crayon-64953fd58a330645391417-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd58a330645391417-4">4</div><div class="crayon-num" data-line="crayon-64953fd58a330645391417-5">5</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-64953fd58a330645391417-1"><span class="crayon-r ">&lt;link </span><span class="crayon-e ">href</span>=<span class="crayon-s ">"css/jquery-fiview.css"</span><span class="crayon-h"> </span><span class="crayon-e ">rel</span>=<span class="crayon-s ">"stylesheet"</span><span class="crayon-h"> </span><span class="crayon-e ">type</span>=<span class="crayon-s ">"text/css"</span><span class="crayon-r ">&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd58a330645391417-2">&nbsp;</div><div class="crayon-line" id="crayon-64953fd58a330645391417-3"><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.9.1.min.js"</span><span class="crayon-h">&gt;</span><span class="crayon-ta">&lt;/script&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd58a330645391417-4"><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.pep.js"</span><span class="crayon-h">&gt;</span><span class="crayon-ta">&lt;/script&gt;</span></div><div class="crayon-line" id="crayon-64953fd58a330645391417-5"><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-fiview.js"</span><span class="crayon-h">&gt;</span><span class="crayon-ta">&lt;/script&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>ダウンロードしたJSやCSSをヘッダで読み込みます。</p>

		<div id="crayon-64953fd58a335178121043" 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 id="wrapper"&gt;
	&lt;p class="bwWrapper"&gt;&lt;a href="images/img01_big.jpg"&gt;&lt;img src="images/img01.jpg" alt="image1"&gt;&lt;/a&gt;&lt;/p&gt;
	&lt;p class="bwWrapper"&gt;&lt;a href="images/img02_big.jpg"&gt;&lt;img src="images/img02.jpg" alt="image2"&gt;&lt;/a&gt;&lt;/p&gt;
	&lt;p class="bwWrapper"&gt;&lt;a href="images/img03_big.jpg"&gt;&lt;img src="images/img03.jpg" alt="image3"&gt;&lt;/a&gt;&lt;/p&gt;
	&lt;p class="bwWrapper"&gt;&lt;a href="images/img04_big.jpg"&gt;&lt;img src="images/img04.jpg" alt="image4"&gt;&lt;/a&gt;&lt;/p&gt;
	&lt;p class="bwWrapper"&gt;&lt;a href="images/img05_big.jpg"&gt;&lt;img src="images/img05.jpg" alt="image5"&gt;&lt;/a&gt;&lt;/p&gt;
	&lt;p class="bwWrapper"&gt;&lt;a href="images/img06_big.jpg"&gt;&lt;img src="images/img06.jpg" alt="image6"&gt;&lt;/a&gt;&lt;/p&gt;
&lt;/div&gt;&lt;!-- wrapper end --&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-64953fd58a335178121043-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd58a335178121043-2">2</div><div class="crayon-num" data-line="crayon-64953fd58a335178121043-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd58a335178121043-4">4</div><div class="crayon-num" data-line="crayon-64953fd58a335178121043-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd58a335178121043-6">6</div><div class="crayon-num" data-line="crayon-64953fd58a335178121043-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd58a335178121043-8">8</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-64953fd58a335178121043-1"><span class="crayon-r ">&lt;div </span><span class="crayon-e ">id</span>=<span class="crayon-s ">"wrapper"</span><span class="crayon-r ">&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd58a335178121043-2"><span class="crayon-i ">	</span><span class="crayon-r ">&lt;p </span><span class="crayon-e ">class</span>=<span class="crayon-s ">"bwWrapper"</span><span class="crayon-r ">&gt;</span><span class="crayon-r ">&lt;a </span><span class="crayon-e ">href</span>=<span class="crayon-s ">"images/img01_big.jpg"</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/img01.jpg"</span><span class="crayon-h"> </span><span class="crayon-e ">alt</span>=<span class="crayon-s ">"image1"</span><span class="crayon-r ">&gt;</span><span class="crayon-r ">&lt;/a&gt;</span><span class="crayon-r ">&lt;/p&gt;</span></div><div class="crayon-line" id="crayon-64953fd58a335178121043-3"><span class="crayon-i ">	</span><span class="crayon-r ">&lt;p </span><span class="crayon-e ">class</span>=<span class="crayon-s ">"bwWrapper"</span><span class="crayon-r ">&gt;</span><span class="crayon-r ">&lt;a </span><span class="crayon-e ">href</span>=<span class="crayon-s ">"images/img02_big.jpg"</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/img02.jpg"</span><span class="crayon-h"> </span><span class="crayon-e ">alt</span>=<span class="crayon-s ">"image2"</span><span class="crayon-r ">&gt;</span><span class="crayon-r ">&lt;/a&gt;</span><span class="crayon-r ">&lt;/p&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd58a335178121043-4"><span class="crayon-i ">	</span><span class="crayon-r ">&lt;p </span><span class="crayon-e ">class</span>=<span class="crayon-s ">"bwWrapper"</span><span class="crayon-r ">&gt;</span><span class="crayon-r ">&lt;a </span><span class="crayon-e ">href</span>=<span class="crayon-s ">"images/img03_big.jpg"</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/img03.jpg"</span><span class="crayon-h"> </span><span class="crayon-e ">alt</span>=<span class="crayon-s ">"image3"</span><span class="crayon-r ">&gt;</span><span class="crayon-r ">&lt;/a&gt;</span><span class="crayon-r ">&lt;/p&gt;</span></div><div class="crayon-line" id="crayon-64953fd58a335178121043-5"><span class="crayon-i ">	</span><span class="crayon-r ">&lt;p </span><span class="crayon-e ">class</span>=<span class="crayon-s ">"bwWrapper"</span><span class="crayon-r ">&gt;</span><span class="crayon-r ">&lt;a </span><span class="crayon-e ">href</span>=<span class="crayon-s ">"images/img04_big.jpg"</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/img04.jpg"</span><span class="crayon-h"> </span><span class="crayon-e ">alt</span>=<span class="crayon-s ">"image4"</span><span class="crayon-r ">&gt;</span><span class="crayon-r ">&lt;/a&gt;</span><span class="crayon-r ">&lt;/p&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd58a335178121043-6"><span class="crayon-i ">	</span><span class="crayon-r ">&lt;p </span><span class="crayon-e ">class</span>=<span class="crayon-s ">"bwWrapper"</span><span class="crayon-r ">&gt;</span><span class="crayon-r ">&lt;a </span><span class="crayon-e ">href</span>=<span class="crayon-s ">"images/img05_big.jpg"</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/img05.jpg"</span><span class="crayon-h"> </span><span class="crayon-e ">alt</span>=<span class="crayon-s ">"image5"</span><span class="crayon-r ">&gt;</span><span class="crayon-r ">&lt;/a&gt;</span><span class="crayon-r ">&lt;/p&gt;</span></div><div class="crayon-line" id="crayon-64953fd58a335178121043-7"><span class="crayon-i ">	</span><span class="crayon-r ">&lt;p </span><span class="crayon-e ">class</span>=<span class="crayon-s ">"bwWrapper"</span><span class="crayon-r ">&gt;</span><span class="crayon-r ">&lt;a </span><span class="crayon-e ">href</span>=<span class="crayon-s ">"images/img06_big.jpg"</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/img06.jpg"</span><span class="crayon-h"> </span><span class="crayon-e ">alt</span>=<span class="crayon-s ">"image6"</span><span class="crayon-r ">&gt;</span><span class="crayon-r ">&lt;/a&gt;</span><span class="crayon-r ">&lt;/p&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd58a335178121043-8"><span class="crayon-r ">&lt;/div&gt;</span><span class="crayon-c">&lt;!-- wrapper end --&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>任意の場所に画像へのリンクをはります。</p>
<p>&nbsp;</p>
<p>3.JSの設定</p>

		<div id="crayon-64953fd58a336076392917" 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(){
	$("#wrapper a").fiview();
});</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-64953fd58a336076392917-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd58a336076392917-2">2</div><div class="crayon-num" data-line="crayon-64953fd58a336076392917-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-64953fd58a336076392917-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-64953fd58a336076392917-2"><span class="crayon-h">	</span><span class="crayon-sy">$</span><span class="crayon-sy">(</span><span class="crayon-s">"#wrapper a"</span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-e">fiview</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-64953fd58a336076392917-3"><span class="crayon-sy">}</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>$(function(){</p>
<p>$(セレクタ).fiview();</p>
<p>});</p>
<p>をJSに書き込みます。</p>
<p>セレクタは、画像へのリンクの場所を設定してください。</p>
<p>4.close画像の設置（調整中）</p>
<p>現時点では、HTMLのあるディレクトリ下のimageフォルダに設置する必要があります。</p>
<p>画像の場所を変える場合は、jquery-fiview.jsの8行目にある&lt;img class=&#8217;fivClose&#8217; src=&#8217;images/close.png&#8217;&gt;</p>
<p>のsrcのパスを変更する必要があります。現在調整の必要がないように改良予定です。</p>
<p>&nbsp;</p>
<h3>今後の課題</h4>
<p>・画像の拡大縮小に対応</p>
<p>・close画像の調整が不要になるようにする</p>
<p>・画像の移動範囲の限定</p>

ドラッグ&#038;ドロップで移動できるライトボックス風のjQueryプラグインを作ってみた

<p>ECサイトを作っており、複数の店舗がある場合など</p>
<p>DBに緯度経度の情報を持たなければいけない場合が多く、手間削減のため作ってみた。</p>
<p>&nbsp;</p>
<p><a class="demo" href="/demo/hoshino/38/">デモ</a></p>
<p>&nbsp;</p>
<p>Google Maps API v3を使用。</p>
<p>http://maps.google.com/maps/api/js?sensor=false&amp;region=JP</p>
<p>を読み込み、</p>
<p>google.maps.Geocoder()</p>
<p>をnewしてインスタンス化する。</p>
<p>その後インスタンスのgeocodeメソッドを、引数に住所などの情報、戻り関数の順に入れて呼び出す。</p>
<p>&nbsp;</p>
<p>戻り関数には緯度経度情報とステータスが返ってくる。</p>
<p>&nbsp;</p>
<p>詳しくはこちら</p>
<p><a href="https://developers.google.com/maps/documentation/javascript/geocoding?hl=ja" target="_blank">https://developers.google.com/maps/documentation/javascript/geocoding?hl=ja</a></p>
<p>&nbsp;</p>
<p>実際はこのような処理。</p>
<p>&nbsp;</p>

		<div id="crayon-64953fd58a156804812474" 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 getCode()
{
	var geocoder = new google.maps.Geocoder();
	geocoder.geocode(
	{
		address: "東京都新宿区高田馬場1-25-32"
	},
	function( data, status )
	{
		data[0].geometry.location.lat(); // 緯度
		data[0].geometry.location.lng(); // 経度
	});
}</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-64953fd58a156804812474-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd58a156804812474-2">2</div><div class="crayon-num" data-line="crayon-64953fd58a156804812474-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd58a156804812474-4">4</div><div class="crayon-num" data-line="crayon-64953fd58a156804812474-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd58a156804812474-6">6</div><div class="crayon-num" data-line="crayon-64953fd58a156804812474-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd58a156804812474-8">8</div><div class="crayon-num" data-line="crayon-64953fd58a156804812474-9">9</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd58a156804812474-10">10</div><div class="crayon-num" data-line="crayon-64953fd58a156804812474-11">11</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd58a156804812474-12">12</div><div class="crayon-num" data-line="crayon-64953fd58a156804812474-13">13</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-64953fd58a156804812474-1"><span class="crayon-t">function</span><span class="crayon-h"> </span><span class="crayon-e">getCode</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd58a156804812474-2"><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-64953fd58a156804812474-3"><span class="crayon-h">	</span><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-i">geocoder</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-r">new</span><span class="crayon-h"> </span><span class="crayon-i">google</span><span class="crayon-sy">.</span><span class="crayon-i">maps</span><span class="crayon-sy">.</span><span class="crayon-e">Geocoder</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-64953fd58a156804812474-4"><span class="crayon-h">	</span><span class="crayon-i">geocoder</span><span class="crayon-sy">.</span><span class="crayon-e">geocode</span><span class="crayon-sy">(</span></div><div class="crayon-line" id="crayon-64953fd58a156804812474-5"><span class="crayon-h">	</span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd58a156804812474-6"><span class="crayon-h">		</span><span class="crayon-i">address</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-s">"東京都新宿区高田馬場1-25-32"</span></div><div class="crayon-line" id="crayon-64953fd58a156804812474-7"><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-64953fd58a156804812474-8"><span class="crayon-h">	</span><span class="crayon-t">function</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-r">status</span><span class="crayon-h"> </span><span class="crayon-sy">)</span></div><div class="crayon-line" id="crayon-64953fd58a156804812474-9"><span class="crayon-h">	</span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd58a156804812474-10"><span class="crayon-h">		</span><span class="crayon-i">data</span><span class="crayon-sy">[</span><span class="crayon-cn">0</span><span class="crayon-sy">]</span><span class="crayon-sy">.</span><span class="crayon-i">geometry</span><span class="crayon-sy">.</span><span class="crayon-i">location</span><span class="crayon-sy">.</span><span class="crayon-e">lat</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span><span class="crayon-h"> </span><span class="crayon-c">// 緯度</span></div><div class="crayon-line" id="crayon-64953fd58a156804812474-11"><span class="crayon-h">		</span><span class="crayon-i">data</span><span class="crayon-sy">[</span><span class="crayon-cn">0</span><span class="crayon-sy">]</span><span class="crayon-sy">.</span><span class="crayon-i">geometry</span><span class="crayon-sy">.</span><span class="crayon-i">location</span><span class="crayon-sy">.</span><span class="crayon-e">lng</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span><span class="crayon-h"> </span><span class="crayon-c">// 経度</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd58a156804812474-12"><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-64953fd58a156804812474-13"><span class="crayon-sy">}</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>&nbsp;</p>

複数の住所から緯度経度を一括で取得するツール

<p>またものすごいアプリを見つけました。</p>
<p>macのトラックパッドに様々なジェスチャーを追加出来ます。また、Windows7の機能である「Aeroスナップ」というのもついています。</p>
<p>11inchのmacbookairを集中して覗きこんでいると、どうしても肩が凝ってしまうので、オフィスでは、積極的に外部ディスプレイに接続して、視点の高さと画面の広さを整え、無理な姿勢にならないようにしています。</p>
<p>しかしながら、ディスプレイの解像度が違うので、毎回、ウィンドウサイズを変更していました。前にも述べましたが、どうもカーソルを合わせてボタンを押すであったり、画面端からウィンドウを引っ張ってサイズを調整するということにストレスを感じます。</p>
<p>そんな中でWindows7のように画面の最大化が簡単だったりしないかなぁということで、ツールを探していたところ、まず、上述の「Aeroスナップ」というツールで「<a href="http://www.boastr.de/" target="_blank">BetterTouchTool</a>」が引っかかりました。</p>
<h2>Macで「Aeroスナップ」のような機能</h3>
<p><a href="/uploads-archive/2013/05/ddcb287968896adb4a78ed0f1ecf812c.png"><img decoding="async" loading="lazy" alt="空白_Skitch_キャンバス" src="/uploads-archive/2013/05/ddcb287968896adb4a78ed0f1ecf812c-300x221.png" width="300" height="221" /></a></p>
<p>&nbsp;</p>
<p>Windows7から標準でついている機能ですが、ウィンドウを画面の上端へドラッグで最大化、左端へドラッグで画面全体の左半分、右端へドラッグで右半分へ自動的にリサイズしてくれます。</p>
<p>これだけでも、緑ボタンを押す煩わしさから抜け出すことが出来ます。また、Excelを複数並べて処理をする時などでも、左右に整列させるのが非常に簡単です。</p>
<h2>Global設定で3本指のジェスチャーの追加がよい</h3>
<p><a href="/uploads-archive/2013/05/dfb134d88aebbd8e7e12beb22f8586c8.png"><img decoding="async" loading="lazy" class="alignnone size-medium wp-image-2244" alt="空白_Skitch_キャンバス_3" src="/uploads-archive/2013/05/dfb134d88aebbd8e7e12beb22f8586c8-300x219.png" width="300" height="219" /></a></p>
<p>ジェスチャーは上記のような設定画面で追加できます。今実際に設定している画面と下が内容です。</p>
<table>
<tbody>
<tr>
<th>ジェスチャー</th>
<th>割り当てた動作</th>
</tr>
<tr>
<td>Three Finger Swipe Up</p>
<p>3本指で上へスワイプ</td>
<td>Command + T新規作成</td>
</tr>
<tr>
<td>Three Finger Swipe Down</p>
<p><span style="line-height: 19px;">3本指で下へスワイプ</span></td>
<td>Command + W&nbsp;</p>
<p>閉じる</td>
</tr>
<tr>
<td>Three Finger Tap<span style="line-height: 19px;">3本指でタップ</span></td>
<td>Command + R&nbsp;</p>
<p>更新</td>
</tr>
<tr>
<td>Four Finger Tap</p>
<p><span style="line-height: 19px;">4本指でタップ</span></td>
<td>Zoom Window Below Cursor&nbsp;</p>
<p>緑ボタンをクリック</td>
</tr>
</tbody>
</table>
<p>Global設定でOS全体に対して、ジェスチャーを設定します。サイトの確認などでよく使う更新もジェスチャーで設定しました。</p>
<p>さらに、これの素晴らしいところは、ショートカットのみならず、アプリケーションを切り替えるといったアクションも設定出来るところです。</p>
<p>そこで、私は、4本指のタップで「Zoom Window Below Cursor」を設定し、これは左上の緑ボタンをクリックしたアクションに相当します。</p>
<p>これで、ディスプレイの上部に持って行ったら最大化が出来るし、4本指タップで最適化が出来るという状態になりました。</p>
<h2> Chromeのタブ切り替えもお手のもの</h3>
<p><a href="/uploads-archive/2013/05/beffb4fafaaab0dca49b1fe35622bb84.png"><img decoding="async" loading="lazy" class="alignnone size-medium wp-image-2245" alt="空白_Skitch_キャンバス_1" src="/uploads-archive/2013/05/beffb4fafaaab0dca49b1fe35622bb84-300x219.png" width="300" height="219" /></a></p>
<p>&nbsp;</p>
<table>
<tbody>
<tr>
<th>ジェスチャー</th>
<th>割り当てた動作</th>
</tr>
<tr>
<td>Three Finger Swipe Left</p>
<p>3本指で左へスワイプ</td>
<td>Control + Tab次のタブへ移動</td>
</tr>
<tr>
<td>Three Finger Swipe Right</p>
<p><span style="line-height: 19px;">3本指で右へスワイプ</span></td>
<td>Shift + Control + Tab前のタブへ移動</td>
</tr>
</tbody>
</table>
<p>さらに、アプリケーション単位で設定ができます。これは、Global設定よりも優先順位が高く設定されます。</p>
<p>ここでは、Chromeにのみタブの切り替えを設定しました。</p>
<p>Global設定と合わせて、タブを閉じる、開く、更新、切り替えという最も使う操作BEST4を全てジェスチャーで設定することが出来ました。</p>
<h2>VMwareへの設定で神アプリへ</h3>
<p><a href="/uploads-archive/2013/05/7129b3c2a6d1c35547a2f83c6f44e378.png"><img decoding="async" loading="lazy" class="alignnone size-medium wp-image-2246" alt="空白_Skitch_キャンバス_2" src="/uploads-archive/2013/05/7129b3c2a6d1c35547a2f83c6f44e378-300x219.png" width="300" height="219" /></a></p>
<table>
<tbody>
<tr>
<th>ジェスチャー</th>
<th>割り当てた動作</th>
</tr>
<tr>
<td>Two Finger Swipe Left&nbsp;</p>
<p>2本指で左へスワイプ</td>
<td><span style="line-height: 19px;">Alt + →</span>&nbsp;</p>
<p>進む</td>
</tr>
<tr>
<td>Two Finger Swipe Right&nbsp;</p>
<p>2本指で右へスワイプ</td>
<td>Alt + ←<br />
戻る</td>
</tr>
<tr>
<td>Three Finger Swipe Up&nbsp;</p>
<p>3本指で上へスワイプ</td>
<td>Control + T&nbsp;</p>
<p>新規作成</td>
</tr>
<tr>
<td>Three Finger Swipe Down&nbsp;</p>
<p>3本指で下へスワイプ</td>
<td>Control + W&nbsp;</p>
<p>閉じる</td>
</tr>
<tr>
<td>Three Finger Swipe Left&nbsp;</p>
<p>3本指で左へスワイプ</td>
<td>Control + Tab&nbsp;</p>
<p>次のタブへ移動<span style="line-height: 19px;"> </span></td>
</tr>
<tr>
<td>Three Finger Swipe Right&nbsp;</p>
<p>3本指で右へスワイプ</td>
<td>Shift + Control + Tab&nbsp;</p>
<p>前のタブへ移動</td>
</tr>
</tbody>
</table>
<p>最後の紹介になりますが、実は解決が出来て一番良かったのが、このVMwareへの設定です。</p>
<p>ECサイトを運営しているとツールがWindowsにしか対応していないことが多々あり、毎日、Windows環境を同時に立ち上げています。</p>
<p>しかしながら、VMwareがトラックパッドのジェスチャーに対応しておらず、一番ストレスを抱える状況を一年以上継続しておりました。</p>
<p>ここに来て、アプリケーション単位でジェスチャーが設定出来るという神仕様により、全てが解決することが出来ました。</p>
<p>Mac側の最低限のジェスチャーを同じように設定、スクロールのナチュラルな動き等も再現することで、VMware上のWindowsでも</p>
<p>ほぼ同じ操作感保つことが出来ました。</p>
<h2>まとめ</h3>
<p>日々、生産性を上げるためにこういったツールを探しているのですが、久しぶりにこのアプリはすごいと思いました。しかも<strong>無料</strong>です。以前に、「<a href="/officer/macbook%E3%83%88%E3%83%A9%E3%83%83%E3%82%AF%E3%83%91%E3%83%83%E3%83%89%E3%82%92%E6%8B%A1%E5%BC%B5%E3%81%99%E3%82%8B%E3%82%A2%E3%83%97%E3%83%AA%E3%80%8Cnex-tab%E3%80%8D%E3%81%A7%E7%94%9F%E7%94%A3.html">nex Tab</a>」という有料アプリを紹介したのですが、「BetterTouchTool」はそのジェスチャーすらも全て内包してしまっているんですよね。</p>
<p>その時点では、このツールを知らなかったのでお金を出してでも欲しいと思ったのですが、ソフトウェアの値段、価値ってどういう風に捉えたらいいんですかね。</p>
<p>人それぞれ好みやもっとよい設定などもあると思いますが、設定のインポート・エクスポートも備えておりますので、複数台のMacをお持ちの方は、Dropbox等で設定を共有すれば、全てが同じ操作にすることが出来ます。</p>


「BetterTouchTool」で劇的生産性アップ！VMwareもジェスチャー対応

<p>最近、コーディング案件が多く、<br />
せっせとやらせてもらっているのですが、<br />
コーディングの際、意外と手間取るのが、<br />
<strong>画像のスライス</strong>、かつ<strong>画像の命名</strong>です。</p>
<p>画像の命名については<br />
どういう名前にしようか、<br />
少し手が止まったりしちゃう時もあります。</p>
<p>一応自分の中でルールを決めつつやるのですが、<br />
なんだかんだで曖昧になって統一されてないものになっちゃいます。</p>
<p>ですので、今後画像命名をスムーズにするため、<br />
命名ルールを決めたいと思います。</p>
<h2>命名ルールを決めるメリット</h3>
<p>メリットとしては、<br />
<span style="font-size: medium;"><strong>１．画像切り出しがちょっと早くなるかも</strong></span><br />
<span style="font-size: medium;"><strong> ２．後々画像が増えた場合も悩まなくて済む</strong></span><br />
<span style="font-size: medium;"><strong> ３．画像ファイルを探しやすくなる</strong></span><br />
<span style="font-size: medium;"><strong> ４．動的に出力する際に便利かも</strong></span></p>
<p>と言った感じでしょうか。</p>
<p>画像の命名ルールに関しては、<br />
<strong>WebDesigning2013/4号</strong><br />
にコーディングガイドラインについての記事がありましたので、<br />
それを思いっきり参考にさせてもらいます。</p>
<p>まずは、下のイメージが、基本的なルールです。</p>
<p><img decoding="async" loading="lazy" class="alignnone size-full wp-image-2254" alt="file_rule" src="/uploads-archive/2013/05/file_rule.png" width="656" height="300" srcset="/uploads-archive/2013/05/file_rule.png 656w, /uploads-archive/2013/05/file_rule-300x137.png 300w, /uploads-archive/2013/05/file_rule-228x104.png 228w" sizes="(max-width: 656px) 100vw, 656px" /><br />
例：btn_top01.jpg</p>
<p>識別名の一覧は以下になります。</p>
<table>
<tbody>
<tr>
<th>識別名</th>
<th>用途</th>
<th>命名サンプル</th>
</tr>
<tr>
<td>bg</td>
<td>背景や、ボーダ用にリピートされて使われる画像</td>
<td>bg_top01.jpg<br />
bg_dotx01.jpg<br />
bg_dotx_3x1.jpg</td>
</tr>
<tr>
<td>btn</td>
<td>ボタンとして使われる画像</td>
<td>btn_contact01.jpg<br />
btn_contact01_on.jpg</td>
</tr>
<tr>
<td>ico</td>
<td>アイコンとして使われる画像</td>
<td>ico_arrow01.jpg<br />
ico_square01.jpg</td>
</tr>
<tr>
<td>bnr</td>
<td>バナーとして使われる画像</td>
<td>bdr_top01.jpg<br />
bnr_side01.jpg</td>
</tr>
<tr>
<td>h1-h6</td>
<td>h1タグなどの論理タグで囲まれる見出し画像</td>
<td>h2_business01.jpg<br />
h3_service01.jpg</td>
</tr>
<tr>
<td>tit</td>
<td>h1-h6等に用途が限られない見出し画像</td>
<td>tit_blog01.jpg<br />
tit_news01.jpg</td>
</tr>
<tr>
<td>txt</td>
<td>デザイン上、画像化するテキストの画像</td>
<td>txt_blog01.jpg<br />
txt_news01.jpg</td>
</tr>
<tr>
<td>pic</td>
<td>商品や人物、風景などの写真画像</td>
<td>pic_blog01.jpg<br />
pic_news01.jpg</td>
</tr>
<tr>
<td>thumb</td>
<td>写真と連動するサムネイル(小さい)画像</td>
<td>thumb_blog01.jpg<br />
thumb_news01.jpg</td>
</tr>
<tr>
<td>img</td>
<td>写真以外のイラストや図表などの画像</td>
<td>img_blog01.jpg<br />
img_news01.jpg</td>
</tr>
<tr>
<td>mainimg</td>
<td>ページのメイン画像</td>
<td>mainimg_top.jpg<br />
mainimg_news.jpg</td>
</tr>
</tbody>
</table>
<p>識別名はこれだけではなく、いろいろまた追加もあると思います。</p>
<p>とりあえず、このルール上で今後、<br />
やって行きたいと思います。</p>
<p>これが載っている雑誌はこちらです。</p>
<p><iframe loading="lazy" width="320" height="240" style="width: 120px; height: 240px;" src="http://rcm-jp.amazon.co.jp/e/cm?lt1=_blank&amp;bc1=FFFFFF&amp;IS2=1&amp;bg1=FFFFFF&amp;fc1=000000&amp;lc1=0000FF&amp;t=alantrigger-22&amp;o=9&amp;p=8&amp;l=as1&amp;m=amazon&amp;f=ifr&amp;ref=qf_sp_asin_til&amp;asins=B00BPBUZU8" marginwidth="0" marginheight="0" frameborder="0" scrolling="no"></iframe></p>


コーディングの際の画像ファイルの命名ルールについて

<p><a href="/programmer/%E3%80%90%E6%9C%AA%E6%A4%9C%E8%A8%BC%E3%80%91mac%E3%81%A7ppk%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%82%92%E4%BD%BF%E3%81%A3%E3%81%A6centos%E3%81%AEssh%E3%81%AB%E6%8E%A5%E7%B6%9A%E3%81%99%E3%82%8B.html" target="_blank">前回</a>はppkファイルからMacが使える鍵ファイルを作り、CentOSにログインするまでに書きましたが。実はよくわかりませんでした。。</p>
<p>弊社では、<a href="/launchcart" target="_blank">LaunchCart</a>の開発を行うとき、さくらのVPSを使うケースが多いです。<br />
その場合は、強度が十分なパスワードを用意してサーバにログインをしています。<br />
開発の流れ（鍵の作成や配布など）が変わりますが、なりすましを防止する意味で、パスワードでのログインを廃止して、鍵認証を導入したいと思います。</p>
<p>その基本手順を整理してみたいと思います。</p>
<h2>鍵認証の設定</h3>
<h3>VPS側で公開鍵の保管場所を作る</h4>
<p></p>

		<div id="crayon-64953fd589f2c543620177" 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">Shell</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;">
mkdir ~/.ssh
chmod 700 ~/.ssh</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-64953fd589f2c543620177-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd589f2c543620177-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-64953fd589f2c543620177-1"><span class="crayon-r">mkdir</span><span class="crayon-h"> </span><span class="crayon-sy">~</span>/<span class="crayon-e">.ssh</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd589f2c543620177-2"><span class="crayon-r">chmod</span><span class="crayon-h"> </span><span class="crayon-cn">700</span><span class="crayon-h"> </span><span class="crayon-sy">~</span>/<span class="crayon-e">.ssh</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p> </p>
<h3>Mac側で鍵のペアを生成</h4>
<p></p>

		<div id="crayon-64953fd589f30201234961" 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">Shell</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;">
ssh-keygen -t rsa -v　// id_rsa（秘密鍵）、id_rsa.pub（公開鍵）を作成
chmod 600 ~/.ssh/id_rsa.pub</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-64953fd589f30201234961-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd589f30201234961-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-64953fd589f30201234961-1"><span class="crayon-i">ssh</span>-<span class="crayon-i">keygen</span><span class="crayon-h"> </span>-<span class="crayon-i">t</span><span class="crayon-h"> </span><span class="crayon-i">rsa</span><span class="crayon-h"> </span>-<span class="crayon-i">v</span>　//<span class="crayon-h"> </span><span class="crayon-i">id_rsa</span>（秘密鍵）、<span class="crayon-i">id_rsa</span><span class="crayon-e">.pub</span>（公開鍵）を作成</div><div class="crayon-line crayon-striped-line" id="crayon-64953fd589f30201234961-2"><span class="crayon-r">chmod</span><span class="crayon-h"> </span><span class="crayon-cn">600</span><span class="crayon-h"> </span><span class="crayon-sy">~</span>/<span class="crayon-e">.ssh</span>/<span class="crayon-i">id_rsa</span><span class="crayon-e">.pub</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p> </p>
<h3>公開鍵をVPSに転送</h4>
<p></p>

		<div id="crayon-64953fd589f31344556116" 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">Shell</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;">
scp ~/.ssh/id_rsa.pub USER_NAME@IP_ADDRESS:~/.ssh/authorized_keys</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-64953fd589f31344556116-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-64953fd589f31344556116-1"><span class="crayon-i">scp</span><span class="crayon-h"> </span><span class="crayon-sy">~</span>/<span class="crayon-e">.ssh</span>/<span class="crayon-i">id_rsa</span><span class="crayon-e">.pub</span><span class="crayon-h"> </span><span class="crayon-i">USER_NAME</span><span class="crayon-sy">@</span><span class="crayon-i">IP_ADDRESS</span><span class="crayon-sy">:</span><span class="crayon-sy">~</span>/<span class="crayon-e">.ssh</span>/<span class="crayon-i">authorized_keys</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>ここでscpコマンドを使いましたが、もちろんファイル転送ツールでも行けます。<br />
また注意点として、すでにauthorized_keysファイルが存在する場合は、ファイルの最後から追加する必要があります。</p>
<h3>Mac側で秘密鍵を使ってログイン</h4>
<p></p>

		<div id="crayon-64953fd589f33206045470" 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">Shell</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;">
ssh -i ~/.ssh/id_rsa USER_NAME@IP_ADDRESS</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-64953fd589f33206045470-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-64953fd589f33206045470-1"><span class="crayon-i">ssh</span><span class="crayon-h"> </span>-<span class="crayon-i">i</span><span class="crayon-h"> </span><span class="crayon-sy">~</span>/<span class="crayon-e">.ssh</span>/<span class="crayon-e">id_rsa </span><span class="crayon-i">USER_NAME</span><span class="crayon-sy">@</span><span class="crayon-i">IP_ADDRESS</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>-iオプションが省略可能です。</p>
<h2>SSHの設定</h3>
<p>VPSにログインしてから、SSHの設定ファイルを変更します。</p>
<h3>パスワードログインの禁止</h4>
<p></p>

		<div id="crayon-64953fd589f34011521200" 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">Shell</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;">
vi /etc/ssh/sshd_config</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-64953fd589f34011521200-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-64953fd589f34011521200-1"><span class="crayon-r">vi</span><span class="crayon-h"> </span>/<span class="crayon-i">etc</span>/<span class="crayon-i">ssh</span>/<span class="crayon-i">sshd_config</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>「PasswordAuth」で検索して、該当するオプションをNOに設定する<br />
sshd_configを編集するのに、root(sudo -s)権限が必要です。</p>
<h3>sshd再起動</h4>
<p></p>

		<div id="crayon-64953fd589f35957686721" 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">Shell</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;">
service sshd 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-64953fd589f35957686721-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-64953fd589f35957686721-1"><span class="crayon-e">service </span><span class="crayon-e">sshd </span><span class="crayon-i">restart</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p> </p>

【SSH】Macで出来る！CentOSへの鍵認証設定

wordpressについて

<p>Prime Strategy Bread Crumb を使って、ぱんくずナビの作成！<br />
ページ階層をユーザーに分かりやすく表示するために、利用します。</p>
<p>下のサンプル画像のように、今どこのページにいるのかを分かるように、表示します。<br />
<a href="/uploads-archive/2013/05/5995504678ef8f2effffa57332a38a1f.png"><img decoding="async" loading="lazy" src="/uploads-archive/2013/05/5995504678ef8f2effffa57332a38a1f-300x28.png" alt="スクリーンショット 2013-05-15 17.48.31" width="300" height="28" class="alignnone size-medium wp-image-2190" srcset="/uploads-archive/2013/05/5995504678ef8f2effffa57332a38a1f-300x28.png 300w, /uploads-archive/2013/05/5995504678ef8f2effffa57332a38a1f-228x21.png 228w, /uploads-archive/2013/05/5995504678ef8f2effffa57332a38a1f.png 310w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<p>まず、「管理画面->プラグイン->新規追加」からPrime Strategy Bread Crumbを検索し、<br />
インストールする。</p>
<p>インストール終わったら、有効化する。</p>
<p><a href="/uploads-archive/2013/05/603cdfa980822d8882a9b510fa17bf04.png"><img decoding="async" loading="lazy" src="/uploads-archive/2013/05/603cdfa980822d8882a9b510fa17bf04.png" alt="スクリーンショット 2013-05-15 17.45.24" width="267" height="95" class="alignnone size-full wp-image-2187" srcset="/uploads-archive/2013/05/603cdfa980822d8882a9b510fa17bf04.png 267w, /uploads-archive/2013/05/603cdfa980822d8882a9b510fa17bf04-228x81.png 228w" sizes="(max-width: 267px) 100vw, 267px" /></a></p>
<p>テンプレートに以下のように出力するだけで、ぱんくずナビが出来ます。</p>
<p></p>

		<div id="crayon-64953fd589ae9613689539" 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;">
&lt;?php
if (!is_front_page() &amp;&amp; function_exists('bread_crumb')):
	//bread_crumb()でぱんくずナビを出力します。
	//パラメータで、出力全体を囲む要素にnav タグを指定し、navタグのid属性にbread-crumbを指定します。
	bread_crumb('navi_element=nav&amp;elm_id=bread-crumb');
	//function_exists()では、bread_crumb()が使えるか(プラグインが有効化されているか)をチェックしています。
endif;
?&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-64953fd589ae9613689539-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd589ae9613689539-2">2</div><div class="crayon-num" data-line="crayon-64953fd589ae9613689539-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd589ae9613689539-4">4</div><div class="crayon-num" data-line="crayon-64953fd589ae9613689539-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd589ae9613689539-6">6</div><div class="crayon-num" data-line="crayon-64953fd589ae9613689539-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd589ae9613689539-8">8</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-64953fd589ae9613689539-1"><span class="crayon-ta">&lt;?php</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd589ae9613689539-2"><span class="crayon-st">if</span><span class="crayon-h"> </span><span class="crayon-sy">(</span><span class="crayon-sy">!</span><span class="crayon-e">is_front_page</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-h"> </span><span class="crayon-sy">&amp;&amp; function_exists('bread_crumb')):</span></div><div class="crayon-line" id="crayon-64953fd589ae9613689539-3"><span class="crayon-sy">	//bread_crumb()でぱんくずナビを出力します。</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd589ae9613689539-4"><span class="crayon-sy">	//パラメータで、出力全体を囲む要素にnav タグを指定し、navタグのid属性にbread-crumbを指定します。</span></div><div class="crayon-line" id="crayon-64953fd589ae9613689539-5"><span class="crayon-sy">	bread_crumb('navi_element=nav&amp;elm_id=bread-crumb');</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd589ae9613689539-6"><span class="crayon-h">	</span><span class="crayon-c">//function_exists()では、bread_crumb()が使えるか(プラグインが有効化されているか)をチェックしています。</span></div><div class="crayon-line" id="crayon-64953fd589ae9613689539-7"><span class="crayon-st">endif</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd589ae9613689539-8"><span class="crayon-ta">?&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p> </p>

「ぱんくずナビ」、Prime Strategy Bread Crumb

【未検証】Macでppkファイルを使ってCentOSのSSHに接続する件

<p>先日、スマートフォンを活用した○○という企画のキャンペーンを考えておりまして、キャンペーンの事例を探していたのですが、その中で久しぶりに度肝を抜かれるGoogleサービスを見つけました。相当な難易度で工数が必要だと直感して、感服です。さすがGoogleというところですが、PCとスマートフォンを連動させた迷路が公開されていました。</p>
<h4 id="watch-headline-title">Chrome World Wide Maze</h3>
<p><a href="http://chrome.com/maze/" target="_blank">http://chrome.com/maze/</a></p>
<h3>特徴</h4>
<ul>
<li>PC、スマートフォン共にGoogle Chromeでなければ遊べない</li>
<li><b>WebGL</b>で描かれた3Dグラフィック</li>
<li>スマートフォンを傾けてボールを動かす</li>
<li>どんなサイトでも迷路にできる</li>
</ul>
<p>とにかくすごいです。度肝を抜かれるクオリティです。</p>
<p>WebGLによる3D迷路だけでも難易度が高いと思いますが、サイトのURLを入力すると、どんなサイトでも迷路になるし、操作はスマートフォンを用いてほぼ遅延なく操作をすることが出来ます。</p>
<p>参考の動画ありましたので、以下をどうぞ。</p>
<p><iframe loading="lazy" width="640" height="360" src="http://www.youtube.com/embed/7AvTl9aU5D8?feature=player_detailpage" frameborder="0" allowfullscreen=""></iframe></p>
<h2>その他の連動サイト</h3>
<p>株式会社キャッチボール公式サイト</p>
<p><a href="http://catch-ball.co.jp/" target="_blank">http://catch-ball.co.jp/</a></p>
<p>&nbsp;</p>
<p>キャッチボールさんってECをやっていると「後払い.com」が有名なのですが、全く別の会社さんでした。</p>
<p>親会社はバスキュールさんでこのようなコンテンツの制作能力に納得しました。</p>
<p>HTML5が普及する、今から5年ほど前からFLASHを用いてガラケーと連動させる釣りゲームを展開して、驚嘆したのを今でも覚えています。</p>
<p><a href="http://gyorol.bascule.co.jp/" target="_blank">http://gyorol.bascule.co.jp/</a></p>
<p>&nbsp;</p>
<p>&nbsp;</p>


PCとスマートフォンが連動した3D迷路のブラウザゲーム

<p>今回お仕事で<strong>地球</strong>の<strong>イラスト</strong>画像が必要になったのですが、</p>
<p>日本を真ん中にあるものを選んだり、光のかかり方がイメージに合うものなど、</p>
<p>デザインの都合に合わせたものを、素材の中から探す出すのは、</p>
<p>とても大変な作業となります。</p>
<p>&nbsp;</p>
<p><strong>Illustrator</strong>では、「効果」→「3D」の機能を使って、</p>
<p>簡単な<strong>3D</strong>の<strong>イラスト</strong>を制作することができるのですが、</p>
<p>この機能を使えば、比較的簡単に都合に合わせた地球のイラストを制作することができます。</p>
<p>&nbsp;</p>
<p>そこで、今回はその方法をご紹介いたします。</p>
<p>&nbsp;</p>
<h2>手順</h3>
<ol>
<li>世界地図のベクター画像(AI、EPSなど)を準備する</li>
<li>世界地図の画像をシンボルに追加する</li>
<li>半円を作る</li>
<li>「効果」の「3D」で回転体を作成する</li>
<li>シンボル化した世界地図をマッピングする</li>
<li>位置や影のかかり方などを調整する</li>
</ol>
<p>&nbsp;</p>
<h2>方法</h3>
<h3>1.世界地図のベクター画像(AI、EPSなど)を準備する</h4>
<p>世界地図のAIやEPSなどのベクター画像は、フリーの素材で入手することが可能です。</p>
<p>ここでは、データを紹介しているサイトをご紹介いたします。</p>
<p>→「<a href="http://photoshopvip.net/archives/15537" target="_blank">ベクターアートでデザインされた高品質な世界地図の無料素材25個まとめ</a>」</p>
<p>&nbsp;</p>
<h3>2.世界地図の画像をシンボル化する</h4>
<p>Illustratorでファイルを新規作成し、</p>
<p>先程入手したデータをアートボードの外に、配置します。</p>
<p>配置できたら、「シンボル」パネルの「新規シンボル」のアイコンをクリックします。</p>
<p><img decoding="async" loading="lazy" alt="step1-1" src="/uploads-archive/2013/05/nino_image01.jpg" width="430" height="300" /></p>
<p>シンボルオプションが表示されたら、「種類」を「グラフィック」に変更して、「OK」をクリックします。</p>
<p><img decoding="async" loading="lazy" alt="1-2" src="/uploads-archive/2013/05/nino_image02.jpg" width="430" height="300" /></p>
<p>これで、世界地図のデータをシンボルに追加することができました。</p>
<p><img decoding="async" loading="lazy" alt="1-3" src="/uploads-archive/2013/05/nino_image03.jpg" width="430" height="300" /></p>
<p>&nbsp;</p>
<h3>3.半円を作る</h4>
<p>次に、半円を作ります。</p>
<p>半円を作る方法は多くありますが、「円ツール」を使った方法が一番簡単です。</p>
<p>まず、「円ツール」を選択し、[Shift]キーを押したままドラッグし、正円を描きます。</p>
<p><img decoding="async" loading="lazy" alt="2-1" src="/uploads-archive/2013/05/nino_image04.jpg" width="428" height="300" /></p>
<p>そして、「ダイレクト選択ツール」に切り替えて、円のアンカーポイントをひとつだけ選択します（左右のどちらかがいいです）。</p>
<p><img decoding="async" loading="lazy" alt="2-2" src="/uploads-archive/2013/05/nino_image05.jpg" width="428" height="300" /></p>
<p>[Delete]キーを押して選択したアンカーポイントを削除すれば、半円が出来上がります。</p>
<p><img decoding="async" loading="lazy" alt="2-3" src="/uploads-archive/2013/05/nino_image06.jpg" width="428" height="300" /></p>
<p>&nbsp;</p>
<h3>4.「効果」の「3D」で回転体を作成する</h4>
<p>「選択ツール」に切り替えてこの半円を選択した後で、</p>
<p>上のメニューから、「効果」→「3D」→「回転体」を選択します。</p>
<p><img decoding="async" loading="lazy" alt="4-1" src="/uploads-archive/2013/05/nino_image08.jpg" width="500" height="400" /></p>
<p>3D回転オプションが表示されますので、右の「プレビュー」にチェックを入れて、</p>
<p>作成される球体の状態を確認しながら、各種オプションを調整します。</p>
<p><img decoding="async" loading="lazy" alt="4-2" src="/uploads-archive/2013/05/nino_image09.jpg" width="500" height="400" /></p>
<p>地球のベースとなる球体はこれで出来上がりです。</p>
<p>&nbsp;</p>
<h3>5.シンボル化した世界地図をマッピングする</h4>
<p>続いて、先程準備した世界時図を球体の上に描きます。</p>
<p>まずは、先程の3D回転体オプションで、右にある「マッピング」をクリックします。</p>
<p><img decoding="async" loading="lazy" alt="5-1" src="/uploads-archive/2013/05/nino_image10.jpg" width="500" height="400" /></p>
<p>上の「シンボル」から、手順２で制作した世界地図のシンボルを選択します。</p>
<p><img decoding="async" loading="lazy" alt="5-2" src="/uploads-archive/2013/05/nino_image11.jpg" width="500" height="400" /></p>
<p>下の「面にあわせる」、「アートワークに陰影を適用」をクリックし、右の「プレビュー」にチェックを入れて、</p>
<p>状態を確認し、よければ「OK」をクリックします。</p>
<p><img decoding="async" loading="lazy" alt="5-3" src="/uploads-archive/2013/05/nino_image12_2.jpg" width="500" height="400" /></p>
<p>これで世界地図を球体上に描くことができました。</p>
<p>&nbsp;</p>
<h3>6.位置や影のかかり方などを調整する</h4>
<p>最後に、プレビューで状態を確認しながら、</p>
<p>3D回転体オプションの上側にある「位置」の立方体をドラッグで操作して、</p>
<p>マッピングの位置を調整したり、</p>
<p>&nbsp;</p>
<p>下側にある「表面」（こちらが表示されていない場合は、右側の「詳細オプション」をクリック）にある球体上にある</p>
<p>ポイントを調整して、陰影の位置を調整したりするなどして、</p>
<p>好みの状態に調整します。</p>
<p><img decoding="async" loading="lazy" alt="6-1" src="/uploads-archive/2013/05/nino_image12.jpg" width="500" height="400" /></p>
<p>これで、地球の3Dイラストが完成しました。</p>
<p><img decoding="async" loading="lazy" alt="6-2" src="/uploads-archive/2013/05/nino_image13.jpg" width="500" height="400" /></p>
<p>ベクターデータなので、大きさや状態を後から自由に変えることができますので、</p>
<p>一つ作っておくと便利です。</p>
<p>&nbsp;</p>
<h3>おまけ 海を半透明にする</h4>
<p>地球の海の部分を半透明にしたイラストもよく見られますが、</p>
<p>こちらも簡単に制作できます。</p>
<p>&nbsp;</p>
<p>世界地図をシンボル化する前に、世界地図に半透明の背景を配置しておき、</p>
<p>一緒にシンボル化します。</p>
<p>&nbsp;</p>
<p>そしてこれをマッピングで指定するのですが、</p>
<p>このままでは、ベースになっている球体の色により、</p>
<p>半透明ではなくなってしまいます。</p>
<p>&nbsp;</p>
<p>そこで、マッピングのオプションにある、下の「構造体を表示しない」にチェックを入れます。</p>
<p>これにより、球体の色が反映されなくなり、マッピングのみが表示されるようになります。</p>
<p>これで、海が半透明になった地球の3Dイラストを制作することができました。</p>
<p><img decoding="async" loading="lazy" alt="6-3" src="/uploads-archive/2013/05/nino_image14.jpg" width="500" height="400" /></p>
<p><img decoding="async" loading="lazy" alt="地球の3Dイラスト" src="/uploads-archive/2013/05/nino_eye.jpg" width="656" height="398" /></p>


Illustratorを使った地球の3Dイラストの作り方

<p>Webフォントは、最新のブラウザやスマートフォンやタブレットPCで利用できるだけでなく、</p>
<p>形式によってはIE6などでも利用することができます。</p>
<p>&nbsp;</p>
<p>なんとなくとっつきにくいイメージがあったのですが、調べてみると、</p>
<p>サービスも広がっていて、今後実際に自分で使う機会も増えていくように感じました。</p>
<p>&nbsp;</p>
<p>今回調べた中で、自作したアイコンをWebフォントに変換して利用する方法がありましたので、</p>
<p>実際にやってみることにしました。</p>
<p>（参考サイト：<a href="http://www.slideshare.net/r360studio/css-nite68-iconv3" target="_blank">仕事で使える、アイコン作画のコツとSVG変換のススメ</a>）</p>
<p>↓こちらが作ってみたものです</p>
<p><a class="demo" href="/demo/ninomiya/19/" target="_blank">DEMO</a></p>
<p>&nbsp;</p>
<h2>方法</h3>
<h3> 1.SVGのアイコン画像を準備する</h4>
<p>参考のサイトでは、Fireworksを使った方法でしたが、</p>
<p>今回はIllustratorでアイコンを制作し、SVGで出力する方法を使いました。</p>
<h4>i.画像の準備</h6>
<p><img decoding="async" loading="lazy" alt="Illustratorでアイコンを制作" src="/uploads-archive/2013/05/nino_image_01.jpg" width="640" height="497" /></p>
<p>パスツールなどを使って画像を制作します。</p>
<p>ポイントは、シルエットにし、重なった部分は「パスファインダー」などを使って合体させておくことです。</p>
<p>合体させておかないと、Webフォントにしたときに、意図した形にならないことがあります。</p>
<p>&nbsp;</p>
<p>また、Webフォントに変換してしまうと、グラデーションはもちろん、色の情報はなくなってしまうので、</p>
<p>黒一色で制作するとわかりやすいです。</p>
<p>&nbsp;</p>
<h4>ii.SVGで出力</h6>
<p>できたら、「ファイル」→「Webおよびデバイス用に保存」で、保存形式をSVGに設定し、書き出します。</p>
<p><img decoding="async" loading="lazy" alt="SVG形式で出力" src="/uploads-archive/2013/05/nino_image_02.jpg" width="716" height="549" /></p>
<p>&nbsp;</p>
<h3>2.SVGをWebフォントに変換</h4>
<p>IcoMoonのWebアプリを使ってWebフォントに変換します。</p>
<p>サイトはこちら→<a href="http://icomoon.io/app/" target="_blank">http://icomoon.io/app/</a></p>
<h4>i.ファイルを選択する</h6>
<p><img decoding="async" loading="lazy" alt="IcoMoon　ファイルを選択" src="/uploads-archive/2013/05/nino_image_03.jpg" width="640" height="442" /></p>
<p>「import Icons」をクリックして画像を選択して（複数選択可）、</p>
<p>その後下に表示されたアイコンをクリックして選択します。</p>
<p>&nbsp;</p>
<h4>ii.アイコンをあてる文字を選択し、データをダウンロード</h6>
<p><img decoding="async" loading="lazy" alt="フォントをあてる文字を選択" src="/uploads-archive/2013/05/nino_image_04.jpg" width="656" height="385" /></p>
<p>アイコンをあてる文字をそれぞれ選択します。</p>
<p>ここで選択した文字を入力したときに、その文字にあてたアイコンが表示されることになります。</p>
<p>フォント名を「Preferences」から指定することができます。</p>
<p>入力が終わったら、下のDownloadのボタンからデータをダウンロードしてください。</p>
<p>&nbsp;</p>
<h3>3.HTML+CSSで実装する</h4>
<p>IcoMoonでダウンロードしたデータに、フォントのセットと、CSS等のサンプルが入っています。</p>
<p>こちらを利用して、Webフォントを指定していきます。</p>
<p>HTML</p>

		<div id="crayon-64953fd5894a6118355911" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover wrap" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 18px !important;">
		
			<div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><span class="crayon-title"></span>
			<div class="crayon-tools" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div><span class="crayon-language">XHTML</span></div></div>
			<div class="crayon-info" style="min-height: 19.5px !important; line-height: 19.5px !important;"></div>
			<div class="crayon-plain-wrap"><textarea  class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 13px !important; line-height: 18px !important;">
&lt;p&gt;&lt;span class="icon"&gt;m&lt;/span&gt;&amp;nbsp;桃&amp;nbsp;-m-&lt;/p&gt;
&lt;p&gt;&lt;span class="icon"&gt;y&lt;/span&gt;&amp;nbsp;ヨット&amp;nbsp;-y-&lt;/p&gt;
&lt;p&gt;&lt;span class="icon"&gt;p&lt;/span&gt;&amp;nbsp;鉛筆&amp;nbsp;-p-&lt;/p&gt;</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 13px !important; line-height: 18px !important;"><div class="crayon-num" data-line="crayon-64953fd5894a6118355911-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd5894a6118355911-2">2</div><div class="crayon-num" data-line="crayon-64953fd5894a6118355911-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-64953fd5894a6118355911-1"><span class="crayon-r ">&lt;p&gt;</span><span class="crayon-r ">&lt;span </span><span class="crayon-e ">class</span>=<span class="crayon-s ">"icon"</span><span class="crayon-r ">&gt;</span><span class="crayon-i ">m</span><span class="crayon-r ">&lt;/span&gt;</span><span class="crayon-i ">&amp;nbsp;桃&amp;nbsp;-m-</span><span class="crayon-r ">&lt;/p&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd5894a6118355911-2"><span class="crayon-r ">&lt;p&gt;</span><span class="crayon-r ">&lt;span </span><span class="crayon-e ">class</span>=<span class="crayon-s ">"icon"</span><span class="crayon-r ">&gt;</span><span class="crayon-i ">y</span><span class="crayon-r ">&lt;/span&gt;</span><span class="crayon-i ">&amp;nbsp;ヨット&amp;nbsp;-y-</span><span class="crayon-r ">&lt;/p&gt;</span></div><div class="crayon-line" id="crayon-64953fd5894a6118355911-3"><span class="crayon-r ">&lt;p&gt;</span><span class="crayon-r ">&lt;span </span><span class="crayon-e ">class</span>=<span class="crayon-s ">"icon"</span><span class="crayon-r ">&gt;</span><span class="crayon-i ">p</span><span class="crayon-r ">&lt;/span&gt;</span><span class="crayon-i ">&amp;nbsp;鉛筆&amp;nbsp;-p-</span><span class="crayon-r ">&lt;/p&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>アイコンをあてる文字のみ、&lt;span&gt;などでクラスをつけます。</p>
<p>CSS</p>

		<div id="crayon-64953fd5894aa728540308" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover wrap" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 18px !important;">
		
			<div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><span class="crayon-title"></span>
			<div class="crayon-tools" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div><span class="crayon-language">CSS</span></div></div>
			<div class="crayon-info" style="min-height: 19.5px !important; line-height: 19.5px !important;"></div>
			<div class="crayon-plain-wrap"><textarea  class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 13px !important; line-height: 18px !important;">
@font-face {
	font-family: 'testicon';
	src:url('fonts/testicon.eot');
	src:url('fonts/testicon.eot?#iefix') format('embedded-opentype'),
		url('fonts/testicon.woff') format('woff'),
		url('fonts/testicon.ttf') format('truetype'),
		url('fonts/testicon.svg#testicon') format('svg');
	font-weight: normal;
	font-style: normal;
}
.icon{
	font-family: "testicon";
}</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-64953fd5894aa728540308-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd5894aa728540308-2">2</div><div class="crayon-num" data-line="crayon-64953fd5894aa728540308-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd5894aa728540308-4">4</div><div class="crayon-num" data-line="crayon-64953fd5894aa728540308-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd5894aa728540308-6">6</div><div class="crayon-num" data-line="crayon-64953fd5894aa728540308-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd5894aa728540308-8">8</div><div class="crayon-num" data-line="crayon-64953fd5894aa728540308-9">9</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd5894aa728540308-10">10</div><div class="crayon-num" data-line="crayon-64953fd5894aa728540308-11">11</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd5894aa728540308-12">12</div><div class="crayon-num" data-line="crayon-64953fd5894aa728540308-13">13</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-64953fd5894aa728540308-1"><span class="crayon-n">@font-face </span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd5894aa728540308-2"><span class="crayon-h">	</span><span class="crayon-e ">font-family</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-s">'testicon'</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-64953fd5894aa728540308-3"><span class="crayon-h">	</span><span class="crayon-e ">src</span><span class="crayon-sy">:</span><span class="crayon-i ">url</span><span class="crayon-sy">(</span><span class="crayon-s">'fonts/testicon.eot'</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd5894aa728540308-4"><span class="crayon-h">	</span><span class="crayon-e ">src</span><span class="crayon-sy">:</span><span class="crayon-i ">url</span><span class="crayon-sy">(</span><span class="crayon-s">'fonts/testicon.eot?#iefix'</span><span class="crayon-sy">)</span><span class="crayon-h"> </span><span class="crayon-i ">format</span><span class="crayon-sy">(</span><span class="crayon-s">'embedded-opentype'</span><span class="crayon-sy">)</span><span class="crayon-i ">,</span></div><div class="crayon-line" id="crayon-64953fd5894aa728540308-5"><span class="crayon-h">		</span><span class="crayon-i ">url</span><span class="crayon-sy">(</span><span class="crayon-s">'fonts/testicon.woff'</span><span class="crayon-sy">)</span><span class="crayon-h"> </span><span class="crayon-i ">format</span><span class="crayon-sy">(</span><span class="crayon-s">'woff'</span><span class="crayon-sy">)</span><span class="crayon-i ">,</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd5894aa728540308-6"><span class="crayon-h">		</span><span class="crayon-i ">url</span><span class="crayon-sy">(</span><span class="crayon-s">'fonts/testicon.ttf'</span><span class="crayon-sy">)</span><span class="crayon-h"> </span><span class="crayon-i ">format</span><span class="crayon-sy">(</span><span class="crayon-s">'truetype'</span><span class="crayon-sy">)</span><span class="crayon-i ">,</span></div><div class="crayon-line" id="crayon-64953fd5894aa728540308-7"><span class="crayon-h">		</span><span class="crayon-i ">url</span><span class="crayon-sy">(</span><span class="crayon-s">'fonts/testicon.svg#testicon'</span><span class="crayon-sy">)</span><span class="crayon-h"> </span><span class="crayon-i ">format</span><span class="crayon-sy">(</span><span class="crayon-s">'svg'</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd5894aa728540308-8"><span class="crayon-h">	</span><span class="crayon-e ">font-weight</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">normal</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-64953fd5894aa728540308-9"><span class="crayon-h">	</span><span class="crayon-e ">font-style</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">normal</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd5894aa728540308-10"><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-64953fd5894aa728540308-11"><span class="crayon-k ">.icon</span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd5894aa728540308-12"><span class="crayon-h">	</span><span class="crayon-e ">font-family</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-s">"testicon"</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-64953fd5894aa728540308-13"><span class="crayon-sy">}</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>ダウンロードしたデータに入っているstyle.cssにある「@font-face」をコピー&amp;ペーストし、</p>
<p>対象のクラスにフォント名を指定します。</p>
<p>あとは装飾などをCSSで指定すれば実装が完了します。</p>
<p>大きさを自由に変えられるので、Retinaなどの高解像度のデバイスでも安心です。</p>
<p>&nbsp;</p>
<p>アイコンを制作する時間や手間が取れないときは、多くのWebフォントアイコンを公開しているサイトもありますので、</p>
<p>是非ご利用してみてください。</p>
<p>「<a href="http://weboook.blog22.fc2.com/blog-entry-332.html" target="_blank">画像の代わりに使えるアイコンタイプのWebフォントのまとめ</a>」</p>
<p>&nbsp;</p>
<p>参考サイト：</p>
<p>アイコンのWebフォント化：</p>
<p><a href="http://www.slideshare.net/r360studio/css-nite68-iconv3" target="_blank">http://www.slideshare.net/r360studio/css-nite68-iconv3</a></p>
<p>Webフォントの形式と対応状況：</p>
<p><a href="http://tech.nitoyon.com/ja/blog/2012/04/26/web-font-popularity/">http://tech.nitoyon.com/ja/blog/2012/04/26/web-font-popularity/</a></p>
<p>&nbsp;</p>
<p>&nbsp;</p>

オリジナルアイコンをWebフォントで使ってみよう

<p>wordpressのプラグインのTOP108個を元素記号表に見立て紹介しているサイトです。</p>
<p>よく使うものや、知らないプラグインもありますね〜<br />
こういう風に紹介しようと思った発想が素晴らしいですよねー</p>
<p>このサイトではどんなプラグインかはわからないんですけど、よく使われてるプラグインなので、<br />
きっと便利なプラグインなんでしょう！</p>
<p>いろいろと試してみてみたいですね〜</p>
<p><a href="http://plugintable.com/" target="_blank"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-2092" alt="The Periodic Table of WordPress Plugins" src="/uploads-archive/2013/05/The-Periodic-Table-of-WordPress-Plugins.jpg" width="641" height="400" srcset="/uploads-archive/2013/05/The-Periodic-Table-of-WordPress-Plugins.jpg 1361w, /uploads-archive/2013/05/The-Periodic-Table-of-WordPress-Plugins-300x188.jpg 300w, /uploads-archive/2013/05/The-Periodic-Table-of-WordPress-Plugins-768x481.jpg 768w, /uploads-archive/2013/05/The-Periodic-Table-of-WordPress-Plugins-228x143.jpg 228w, /uploads-archive/2013/05/The-Periodic-Table-of-WordPress-Plugins-1024x641.jpg 1024w" sizes="(max-width: 641px) 100vw, 641px" /></a><br />
<a href="http://plugintable.com/" target="_blank">The Periodic Table of WordPress Plugins</a></p>
<p>&nbsp;</p>
<p>この108個の中にはなかったんですが、<br />
僕がたまに使うプラグインを紹介します。</p>
<p><a href="http://wordpress.org/extend/plugins/custom-field-template/" target="_blank">Custom Field Template</a></p>
<p>名前の通り、カスタムフィールドを使ったものですが、<br />
ページや記事に一定の要素をカスタムフィールドで登録したい場合、テンプレートにして、<br />
自動的に表示してくれたり、カテゴリ等で、表示するテンプレートを切り替えたりなんてこともできます。</p>
<p>カスタムフィールドの値を wp_postmetaテーブルに保持するので、<br />
特に専用のタグを使うことなく、通常のカスタムフィールドを呼び出す感じで、使用できるのも良い点です。</p>
<p>もちろん、テキストフィールドだけでなく、テキストエリア、ラジオボタン、チェックボックス、セレクト、ファイルアップロードも使用できます。</p>
<p>詳しい使い方は、このサイトをご覧ください。</p>
<p><a href="http://komodo.arrow.jp/wp/46" target="_blank">Custom Field Template（カスタムフィールドテンプレート） | WordPress 編</a></p>


wordpressのプラグインを元素記号表に見立てTOP108個紹介しているサイト

<p>普段はPHPの<a href="http://www.php.net/manual/ja/function.exec.php" target="_blank">exec</a>や<a href="http://php.net/manual/ja/function.system.php" target="_blank">system</a>関数はあまり使わないですが、<br />
今回は外部ファイルを取得するため、OSの<a href="http://itpro.nikkeibp.co.jp/article/COLUMN/20060228/230995/" target="_blank">wget</a>コマンドを使いたいと思います。<br />
execとsystem関数の比較をしてみたいと思います。</p>
<h2>exec</h3>
<p></p>

		<div id="crayon-64953fd58928f284191255" 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;">
string exec ( string $command [, array &amp;$output [, int &amp;$return_var ]] )</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-64953fd58928f284191255-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-64953fd58928f284191255-1"><span class="crayon-t">string</span><span class="crayon-h"> </span><span class="crayon-e">exec</span><span class="crayon-h"> </span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-t">string</span><span class="crayon-h"> </span><span class="crayon-sy">$</span><span class="crayon-i">command</span><span class="crayon-h"> </span><span class="crayon-sy">[</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-t">array</span><span class="crayon-h"> </span>&<span class="crayon-sy">$</span><span class="crayon-i">output</span><span class="crayon-h"> </span><span class="crayon-sy">[</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-t">int</span><span class="crayon-h"> </span>&<span class="crayon-sy">$</span><span class="crayon-i">return_var</span><span class="crayon-h"> </span><span class="crayon-sy">]</span><span class="crayon-sy">]</span><span class="crayon-h"> </span><span class="crayon-sy">)</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>・戻り値<br />
マニュアルには、「コマンド結果の最後の行を返します」と書いてありますが、<br />
実は何か返してくるのが微妙に分かりません。</p>
<p>・$command<br />
実行したいコマンド</p>
<p>・$output<br />
コマンドの出力内容が、$outputに配列として格納します。<br />
実行結果の出力内容を調べるのに、このパラメーターを使えばいいと思います。</p>
<p>・$return_var<br />
コマンドの実行結果が正常の場合は数字の0、 異常野場合は数字の1になります。</p>
<h2>system</h3>
<p></p>

		<div id="crayon-64953fd589294690286249" 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;">
string system ( string $command [, int &amp;$return_var ] )</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-64953fd589294690286249-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-64953fd589294690286249-1"><span class="crayon-t">string</span><span class="crayon-h"> </span><span class="crayon-e">system</span><span class="crayon-h"> </span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-t">string</span><span class="crayon-h"> </span><span class="crayon-sy">$</span><span class="crayon-i">command</span><span class="crayon-h"> </span><span class="crayon-sy">[</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-t">int</span><span class="crayon-h"> </span>&<span class="crayon-sy">$</span><span class="crayon-i">return_var</span><span class="crayon-h"> </span><span class="crayon-sy">]</span><span class="crayon-h"> </span><span class="crayon-sy">)</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>・戻り値<br />
マニュアルには、「成功時はコマンド出力の最後の行を返し、失敗時は FALSE を返します。」と書いてありますが、<br />
実はexecの$outputを配列ではなく文字列で返す感じです。</p>
<p>・$command<br />
実行したいコマンド</p>
<p>・$return_var<br />
コマンドの実行結果が正常の場合は数字の0、 異常野場合は数字の1になります。</p>
<h2>おまけ：Linuxの標準出力と標準エラー出力</h3>
<p>Linuxの標準出力は1番、標準エラー出力は2番です。<br />
標準エラー出力に標準出力にまとめるに、</p>
<p></p>

		<div id="crayon-64953fd589295620446433" 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">Shell</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;">
command 2 &gt; &amp;1</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-64953fd589295620446433-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-64953fd589295620446433-1"><span class="crayon-r">command</span><span class="crayon-h"> </span><span class="crayon-cn">2</span><span class="crayon-h"> </span><span class="crayon-h">&gt;</span><span class="crayon-h"> </span><span class="crayon-h">&amp;1</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>と書きます。</p>
<p>それを利用して、execやsystemの出力結果に、正常の場合でも異常の場合でも、結果を取得することができます。</p>
<p></p>

		<div id="crayon-64953fd589296029197668" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover wrap" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 18px !important;">
		
			<div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><span class="crayon-title"></span>
			<div class="crayon-tools" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div><span class="crayon-language">PHP</span></div></div>
			<div class="crayon-info" style="min-height: 19.5px !important; line-height: 19.5px !important;"></div>
			<div class="crayon-plain-wrap"><textarea  class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 13px !important; line-height: 18px !important;">
$cmd = "ls -al 2&gt;&amp;1";

// execの場合
exec( $cmd, $output);
var_dump($output);// 結果出力

// systemの場合
$res = system($cmd);
var_dump($res);// 結果出力</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-64953fd589296029197668-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd589296029197668-2">2</div><div class="crayon-num" data-line="crayon-64953fd589296029197668-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd589296029197668-4">4</div><div class="crayon-num" data-line="crayon-64953fd589296029197668-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd589296029197668-6">6</div><div class="crayon-num" data-line="crayon-64953fd589296029197668-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd589296029197668-8">8</div><div class="crayon-num" data-line="crayon-64953fd589296029197668-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-64953fd589296029197668-1"><span class="crayon-v">$cmd</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-s">"ls -al 2&gt;&amp;1"</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd589296029197668-2">&nbsp;</div><div class="crayon-line" id="crayon-64953fd589296029197668-3"><span class="crayon-c">// execの場合</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd589296029197668-4"><span class="crayon-e">exec</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-v">$cmd</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-v">$output</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-64953fd589296029197668-5"><span class="crayon-e">var_dump</span><span class="crayon-sy">(</span><span class="crayon-v">$output</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span><span class="crayon-c">// 結果出力</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd589296029197668-6">&nbsp;</div><div class="crayon-line" id="crayon-64953fd589296029197668-7"><span class="crayon-c">// systemの場合</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd589296029197668-8"><span class="crayon-v">$res</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-e">system</span><span class="crayon-sy">(</span><span class="crayon-v">$cmd</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-64953fd589296029197668-9"><span class="crayon-e">var_dump</span><span class="crayon-sy">(</span><span class="crayon-v">$res</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span><span class="crayon-c">// 結果出力</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p> </p>

Company

Our Solutions

Support

News

Blog

Blogブログ

カテゴリーから探す

年別から見る

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

2013/05/30

2013/05/30

2013/05/30

2013/05/29

2013/05/23

2013/05/23

2013/05/23

2013/05/22

2013/05/22

2013/05/22

2013/05/16

2013/05/16

2013/05/16

2013/05/15

2013/05/09

2013/05/08

2013/05/08

2013/05/02