<p>スマホ対応などでCSS3を使う機会が増えているが</p>
<p>理論的には理解していてもグラデーションなどはソースだけではなかなかうまくできない。</p>
<p>視覚的に微調整できる便利なツールのメモ。</p>
<p>&nbsp;</p>
<h3>css3で単純なグラデーションを生成してくれるサービス</h4>
<p><a href="http://codologic.com/page/sites/all/files/gradx/demo.html" target="_blank">http://codologic.com/page/sites/all/files/gradx/demo.html</a></p>
<p>jQueryのプラグインとしても提供されており、無いと思うがユーザーにグラデーション方法を入力させることも可能。</p>
<p>サイトの装飾部分に使える感じ。</p>
<p>&nbsp;</p>
<p><a href="/uploads-archive/2013/06/3.png"><img decoding="async" loading="lazy" class="aligncenter size-full wp-image-2430" alt="3" src="/uploads-archive/2013/06/3.png" width="869" height="637" srcset="/uploads-archive/2013/06/3.png 869w, /uploads-archive/2013/06/3-300x220.png 300w, /uploads-archive/2013/06/3-768x563.png 768w, /uploads-archive/2013/06/3-228x167.png 228w" sizes="(max-width: 869px) 100vw, 869px" /></a></p>
<p>Linerの例</p>
<p>&nbsp;</p>
<p><a href="/uploads-archive/2013/06/1.png"><img decoding="async" loading="lazy" class="aligncenter size-full wp-image-2418" alt="1" src="/uploads-archive/2013/06/1.png" width="869" height="637" srcset="/uploads-archive/2013/06/1.png 869w, /uploads-archive/2013/06/1-300x220.png 300w, /uploads-archive/2013/06/1-768x563.png 768w, /uploads-archive/2013/06/1-228x167.png 228w" sizes="(max-width: 869px) 100vw, 869px" /></a></p>
<p>Circleの例</p>
<p>&nbsp;</p>
<p><a href="/uploads-archive/2013/06/2.png"><img decoding="async" loading="lazy" class="aligncenter size-full wp-image-2416" alt="2" src="/uploads-archive/2013/06/2.png" width="869" height="637" srcset="/uploads-archive/2013/06/2.png 869w, /uploads-archive/2013/06/2-300x220.png 300w, /uploads-archive/2013/06/2-768x563.png 768w, /uploads-archive/2013/06/2-228x167.png 228w" sizes="(max-width: 869px) 100vw, 869px" /></a></p>
<p>Ellipseの例</p>
<p>&nbsp;</p>
<p>どれもかなり簡単にできるし、どのプロパティがどうゆう動きをするか勉強にもなる。</p>
<p>&nbsp;</p>
<h3>css3でボタンを生成してくれるサービス</h4>
<p><a href="http://css-button-generator.com/" target="_blank">http://css-button-generator.com/<a href="/uploads-archive/2013/06/4.png"><img decoding="async" loading="lazy" class="aligncenter size-full wp-image-2417" alt="4" src="/uploads-archive/2013/06/4.png" width="1239" height="603" srcset="/uploads-archive/2013/06/4.png 1239w, /uploads-archive/2013/06/4-768x374.png 768w, /uploads-archive/2013/06/4-228x111.png 228w, /uploads-archive/2013/06/4-300x146.png 300w, /uploads-archive/2013/06/4-1024x498.png 1024w" sizes="(max-width: 1239px) 100vw, 1239px" /></a></a></p>
<p>&nbsp;</p>
<p>角丸やシャドウなど、細かく設定できるので便利。</p>
<p>&nbsp;</p>
<p>ソースから見た目はなんとなくイメージできれば良いと思うので</p>
<p>詳細はこのようなツールを使ったほうがよさそうだ。</p>


便利。css3グラデーション生成ツール2つ

<p>２週続けてcssniteに参加して参りました！</p>
<p>今回は<strong>『webデザイナーのための配色セオリー』</strong>ということで、<br />
最近悩まされているテーマ「配色」についてのセミナーでした。</p>
<p>講師は伊達千代さんという方で、<br />
<a href="http://www.amazon.co.jp/gp/product/4844361309/ref=as_li_qf_sp_asin_il_tl?ie=UTF8&amp;camp=247&amp;creative=1211&amp;creativeASIN=4844361309&amp;linkCode=as2&amp;tag=alantrigger-22" target="_blank">デザインのルール、レイアウトのセオリー。</a><br />
<a href="http://www.amazon.co.jp/gp/product/4844358421/ref=as_li_qf_sp_asin_il_tl?ie=UTF8&amp;camp=247&amp;creative=1211&amp;creativeASIN=4844358421&amp;linkCode=as2&amp;tag=alantrigger-22" target="_blank">デザイン・ルールズ デザインをはじめる前に知っておきたいこと</a><br />
<a href="http://www.amazon.co.jp/gp/product/4844360493/ref=as_li_qf_sp_asin_il_tl?ie=UTF8&amp;camp=247&amp;creative=1211&amp;creativeASIN=4844360493&amp;linkCode=as2&amp;tag=alantrigger-22" target="_blank">デザイン、現場の作法。デザイン力を鍛える仕事術</a></p>
<p>といった著書があり、学校で講師をしていたりと素晴らしい方でした。</p>
<h2>webデザイナーのための配色セオリー</h3>
<p>内容としては、<br />
配色に関するセオリーや論理的に配色を組み立ていくための講義で、<br />
本でしか学んだことがなかったので、知っている内容であっても、<br />
人に教えてもらうのはまた違うなぁと感じました。</p>
<p>本記事で、どんなセオリーを学んだかは説明しませんが、<br />
(他に説明しているブログもいっぱいあるので・・・)</p>
<p>ちょっとした気づき、ハッとしたことを綴らさせてもらいます。</p>
<h3>配色はセンスがいい、悪いではなく、セオリーや知識を知っているかどうか</h4>
<p>→これは自分自身センスがいいとは思わないので、元気になるお話でした。<br />
先生自身もセンスはよくないとおっしゃっていたので、ホッとした記憶があります。</p>
<p>&nbsp;</p>
<h3>配色を裏付ける言葉と説明の重要さ</h4>
<p>→これはクライアントにデザインが「どうしたこうなったのか」を説明することは大事だということですが、<br />
認識はしていましたが、一つのデザインに対して２通りの説明をしてくれたことにより、<br />
その重要さを再認識しました。これは大事だな〜</p>
<p>&nbsp;</p>
<h3>配色スキルは磨くほど高くなる</h4>
<p>これはまとめでおっしゃっていたことですが、<br />
まぁ一朝一夕で身につくことではないですよね。。。<br />
まず、セオリーを把握、理解し、そこから実践し、<br />
いいものを研究することによって、どんどんスキルは高くなっていくということですね。</p>
<p>&nbsp;</p>
<h3>イメージの言語化、イメージマップの作成</h4>
<p>なにかのデザイン、配色をしようとしたら、まずそのイメージを言語化します。<br />
言語化することによって、相手に伝えやすくなりますし、自分の理解もすすみます。<br />
イメージマップとは、<br />
その言語化したものを元に見合った写真をたくさん集め、<br />
それをphotoshopに貼り、モザイクをかけることにより、<br />
イメージしたものの色のパレットが出来上がるというものです。<br />
今回これが一番タメになり、次の案件でぜひ試してみたいと思います。</p>
<p>&nbsp;</p>
<p>最後に</p>
<p>途中、スキルと言う言葉出てきたように、</p>
<p>配色は<strong>「センス」</strong>ではなく、<strong>『スキル』</strong>ということでしょうか。</p>
<p>頑張って磨いて、良い配色ができるよう精進したいと思います。</p>


Css Nite @Coedo vol.13 webデザイナーのための配色セオリーに参加してきました！

redmineをインストールしてみた

<p>海に周りを囲まれ、陸地の大半を野山が占める日本では、</p>
<p>青と緑は好まれ、デザインでも使われることが多い色です。</p>
<p>&nbsp;</p>
<p>青と緑は類似色で相性もいいので、共に使われることも多いですが、</p>
<p>サイトのデザインに使う場合、ほのぼのとした印象が強くなりがちなので、</p>
<p>スタイリッシュにまとめるのは難しい印象があります。</p>
<p>&nbsp;</p>
<p>今回は、この２色を使ったスタイリッシュなサイトを</p>
<p>青を多く使ったものを中心にまとめてみました。</p>
<p>&nbsp;</p>
<h4>アクアシャボン</h6>
<p><a href="/uploads-archive/2013/06/ss_site01.jpg" target="_blank"><img decoding="async" loading="lazy" alt="site1" src="/uploads-archive/2013/06/ss_site01_thum.jpg" width="656" height="472" /></a><br />
<a href="http://www.aquasavon.jp/" target="_blank">http://www.aquasavon.jp/</a></p>
<p>メインビジュアルがグラデーションの効果で、きれいにまとめられています。</p>
<p>&nbsp;</p>
<h4>株式会社田部</h6>
<p><a href="/uploads-archive/2013/06/ss_site02.jpg" target="_blank"><img decoding="async" loading="lazy" alt="site2" src="/uploads-archive/2013/06/ss_site02_thum.jpg" width="656" height="472" /></a><br />
<a href="http://www.tanabeco.com/" target="_blank">http://www.tanabeco.com/</a></p>
<p>サイト自体にはほとんど青が使われていませんが、</p>
<p>緑を中心とした写真を多く配置して、</p>
<p>緑を自然に感じることができます。</p>
<p>&nbsp;</p>
<h4>アクアセレクト</h6>
<p><a href="/uploads-archive/2013/06/ss_site03.jpg" target="_blank"><img decoding="async" loading="lazy" alt="site3" src="/uploads-archive/2013/06/ss_site03_thum.jpg" width="656" height="472" /></a><br />
<a href="http://www.aquaselect.jp/" target="_blank">http://www.aquaselect.jp/</a></p>
<p>ロゴに軽く添えたり、写真に緑のあるものを使うことで、水と緑を感じられます。</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<h4>住まいのGood News</h6>
<p><a href="/uploads-archive/2013/06/ss_site04.jpg" target="_blank"><img decoding="async" loading="lazy" alt="site4" src="/uploads-archive/2013/06/ss_site04_thum.jpg" width="656" height="472" /></a><br />
<a href="http://sumai.goodnews.jp/" target="_blank">http://sumai.goodnews.jp/</a></p>
<p>こちらも緑は写真メインといった感じです。</p>
<p>&nbsp;</p>
<h4>特定医療法人清翠会</h6>
<p><a href="/uploads-archive/2013/06/ss_site05.jpg" target="_blank"><img decoding="async" loading="lazy" alt="site5" src="/uploads-archive/2013/06/ss_site05_thum.jpg" width="656" height="472" /></a><br />
<a href="http://www.maki-group.jp/" target="_blank">http://www.maki-group.jp/</a></p>
<p>写真や、アイコンで緑を感じられます。</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>青をメインにした場合、緑は写真で配置したり、軽く添えるくらいが</p>
<p>スタイリッシュにする方法としてよいようです。</p>
<p>&nbsp;</p>


青と緑を使ったスタイリッシュなサイトまとめ

【symfony2】symfony2.3がリリースされました

<p>まず、作成するページのheader部分に以下のjqueryを読み込みます。</p>
<p></p>

		<div id="crayon-64953fd58ac20205927015" 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">header</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;script type="text/javascript" src="js/jquery.min.js"&gt;&lt;/script&gt;</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 13px !important; line-height: 18px !important;"><div class="crayon-num" data-line="crayon-64953fd58ac20205927015-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-64953fd58ac20205927015-1"><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.min.js"</span><span class="crayon-h">&gt;</span><span class="crayon-ta">&lt;/script&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p> </p>
<p>さらに</p>
<p></p>

		<div id="crayon-64953fd58ac25340143111" 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">header</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;script type="text/javascript"&gt;
$(function() {
    var topBtn = $('.totop'); 
	 
    //スクロールしてトップに戻る
    //500の数字を大きくするとスクロール速度が遅くなる
    topBtn.click(function () {
        $('body,html').animate({
            scrollTop: 0
        }, 500);
        return false;
    });
});
&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-64953fd58ac25340143111-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd58ac25340143111-2">2</div><div class="crayon-num" data-line="crayon-64953fd58ac25340143111-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd58ac25340143111-4">4</div><div class="crayon-num" data-line="crayon-64953fd58ac25340143111-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd58ac25340143111-6">6</div><div class="crayon-num" data-line="crayon-64953fd58ac25340143111-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd58ac25340143111-8">8</div><div class="crayon-num" data-line="crayon-64953fd58ac25340143111-9">9</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd58ac25340143111-10">10</div><div class="crayon-num" data-line="crayon-64953fd58ac25340143111-11">11</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd58ac25340143111-12">12</div><div class="crayon-num" data-line="crayon-64953fd58ac25340143111-13">13</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd58ac25340143111-14">14</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-64953fd58ac25340143111-1"><span class="crayon-ta">&lt;script </span><span class="crayon-e ">type</span>=<span class="crayon-s">"text/javascript"</span><span class="crayon-h">&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd58ac25340143111-2"><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-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-64953fd58ac25340143111-3"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-i">topBtn</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-sy">$</span><span class="crayon-sy">(</span><span class="crayon-s">'.totop'</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span><span class="crayon-h"> </span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd58ac25340143111-4"><span class="crayon-h">	 </span></div><div class="crayon-line" id="crayon-64953fd58ac25340143111-5"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-c">//スクロールしてトップに戻る</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd58ac25340143111-6"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-c">//500の数字を大きくするとスクロール速度が遅くなる</span></div><div class="crayon-line" id="crayon-64953fd58ac25340143111-7"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-i">topBtn</span><span class="crayon-sy">.</span><span class="crayon-e">click</span><span class="crayon-sy">(</span><span class="crayon-t">function</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 class="crayon-line crayon-striped-line" id="crayon-64953fd58ac25340143111-8"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">$</span><span class="crayon-sy">(</span><span class="crayon-s">'body,html'</span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-e">animate</span><span class="crayon-sy">(</span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-64953fd58ac25340143111-9"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-i">scrollTop</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-cn">0</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd58ac25340143111-10"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">}</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-cn">500</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-64953fd58ac25340143111-11"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-st">return</span><span class="crayon-h"> </span><span class="crayon-t">false</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd58ac25340143111-12"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">}</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-64953fd58ac25340143111-13"><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-64953fd58ac25340143111-14"><span class="crayon-ta">&lt;/script&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p> </p>
<p>「上へ戻る」ボタンを置きたい場所に以下のソースを挿入。<br />
デザインはお好みにcssで調整してください。</p>
<p></p>

		<div id="crayon-64953fd58ac26426104124" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover wrap" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 18px !important;">
		
			<div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><span class="crayon-title">HTML</span>
			<div class="crayon-tools" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div></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 class="totop"&gt;
　&lt;a href="#header"&gt;
　　&lt;img src="/*表示したいボタンの画像*/" alt="上へ戻る"&gt;
　&lt;/a&gt;
&lt;/p&gt;
//ベッダー部分にあるheaderというidのところまでスクロールする</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-64953fd58ac26426104124-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd58ac26426104124-2">2</div><div class="crayon-num" data-line="crayon-64953fd58ac26426104124-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd58ac26426104124-4">4</div><div class="crayon-num" data-line="crayon-64953fd58ac26426104124-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd58ac26426104124-6">6</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 13px !important; line-height: 18px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-64953fd58ac26426104124-1"><span class="crayon-h">&lt;</span><span class="crayon-i">p</span><span class="crayon-h"> </span><span class="crayon-t">class</span>=<span class="crayon-s">"totop"</span><span class="crayon-h">&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd58ac26426104124-2">　<span class="crayon-h">&lt;</span><span class="crayon-i">a</span><span class="crayon-h"> </span><span class="crayon-i">href</span>=<span class="crayon-s">"#header"</span><span class="crayon-h">&gt;</span></div><div class="crayon-line" id="crayon-64953fd58ac26426104124-3">　　<span class="crayon-h">&lt;</span><span class="crayon-e">img </span><span class="crayon-i">src</span>=<span class="crayon-s">"/*表示したいボタンの画像*/"</span><span class="crayon-h"> </span><span class="crayon-i">alt</span>=<span class="crayon-s">"上へ戻る"</span><span class="crayon-h">&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd58ac26426104124-4">　<span class="crayon-h">&lt;</span>/<span class="crayon-i">a</span><span class="crayon-h">&gt;</span></div><div class="crayon-line" id="crayon-64953fd58ac26426104124-5"><span class="crayon-h">&lt;</span>/<span class="crayon-i">p</span><span class="crayon-h">&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd58ac26426104124-6"><span class="crayon-c">//ベッダー部分にあるheaderというidのところまでスクロールする</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p> </p>

jQuery スクロールでページトップへ

チェックボックス、ラジオボタン、セレクトボックスをカスタマイズしてカッコよくするjQueryプラグイン

ドラッグ&#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>

Company

Our Solutions

Support

News

Blog

Blogブログ

カテゴリーから探す

年別から見る

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

2013/06/13

2013/06/13

2013/06/12

2013/06/06

2013/06/06

2013/06/05

2013/05/30

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