<p>みなさんは、マウスジェスチャーを使用しますか？</p>
<p>私は、Windows、Firefoxを メインに使っていた数年前から、マウスジェスチャーを多用していました。</p>
<p>ブラウジングなどでは、マウスを持つ片手のみで完結し、戻るためにフォーカスを合わせる必要もないので捗ります。</p>
<p>mac、chromeに移行をしてからもSmooth Gestureというプラグインを利用していたのですが、</p>
<p>突然、Chrome Web Storeから削除されるという事態が起こりました。</p>
<p><del><span style="font-size: x-large;"><a href="/uploads-archive/2012/12/smooth-gesture-8.png"><img decoding="async" loading="lazy" class=" wp-image-1549 alignnone" alt="smooth-gesture-8" src="/uploads-archive/2012/12/smooth-gesture-8.png" width="24" height="24" /></a>Smooth Gesture</span></del></p>
<p>当時の流れなどは↓のブログに書かれております。</p>
<p><a href="http://blog.livedoor.jp/protanuki/archives/13931688.html" target="_blank">http://blog.livedoor.jp/protanuki/archives/13931688.html</a></p>
<p>&nbsp;</p>
<p>その他にも</p>
<p><a href="https://chrome.google.com/webstore/detail/gestures-for-chrometm/jpkfjicglakibpenojifdiepckckakgk?hl=ja" target="_blank">Gestures for Chrome(TM)</a></p>
<p>などのマウスジェスチャーのプラグインがあるのですが、残念ながら現時点でmacには、対応しておりません。</p>
<p>マウスジェスチャーが失われてから数ヶ月、chromeを離れられる訳にもいかず、今でも長年の癖で空振りジェスチャーをしてしまっていましたが、ふと思い立って調べてみると、<strong>Smooth Gesture</strong>が復活していることが分かりました！</p>
<p>問題となったマルウェア削除したバージョンということですが、ご利用は自己責任でお願い致します。</p>
<h2>リンク</h3>
<p><span style="font-size: large;"><a href="http://nisza.org/" target="_blank">http://nisza.org/</a></span></p>
<p><a href="/uploads-archive/2012/12/fde42154af135f9fec5ec34d7c11da85.jpg"><img decoding="async" loading="lazy" class="aligncenter size-medium wp-image-1550" alt="スクリーンショット_2013_02_20_12_15-3" src="/uploads-archive/2012/12/fde42154af135f9fec5ec34d7c11da85-300x123.jpg" width="300" height="123" /></a></p>
<blockquote><p>Smooth Gestures 0.15.4 &#8211; Hacked clean version (no malware)</p></blockquote>
<p>と書いてある箇所からダウンロードが出来ます。</p>
<h3>インストールの注意点</h4>
<p>Chrome Web Store外からの拡張機能をインストールするためには「拡張機能の管理」を開き、</p>
<p>ダウンロードしたファイルを「拡張機能の管理」の画面にドラッグ＆ドロップでインストールをすることが出来ます。</p>
<p>&nbsp;</p>


mac版chromeでマウスジェスチャーが動作する拡張機能「Smooth Gesture」

サンプルECサイトを作ってみました。~heightLineプラグインの使用~

<p>サイト構築に使えそうなjQueryプラグインを見つかりましたので、紹介いたします。</p>
<p>動画を背景にして、サイトの見栄えをよくするものです。</p>
<p><a href="/demo/jeff/videoBG.html" target="_blank">デモ</a>を見てください。</p>
<p>プラグインは<a href="https://github.com/sydlawrence/jquery.videoBG" target="_blank">ここ</a>からダウンロードできます。</p>
<h2>よいところ</h3>
<p>・簡単に使える</p>

		<div id="crayon-64953fd581622372030492" 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;">
$(document).ready(function() {
	$('body').videoBG({
		position:"fixed",
		zIndex:0,
		mp4:'assets/christmas_snow.mp4',
		ogv:'assets/christmas_snow.ogv',
		webm:'assets/christmas_snow.webm',
		poster:'assets/christmas_snow.jpg',
		opacity:1,
		fullscreen:true,
	});
})</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-64953fd581622372030492-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd581622372030492-2">2</div><div class="crayon-num" data-line="crayon-64953fd581622372030492-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd581622372030492-4">4</div><div class="crayon-num" data-line="crayon-64953fd581622372030492-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd581622372030492-6">6</div><div class="crayon-num" data-line="crayon-64953fd581622372030492-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd581622372030492-8">8</div><div class="crayon-num" data-line="crayon-64953fd581622372030492-9">9</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd581622372030492-10">10</div><div class="crayon-num" data-line="crayon-64953fd581622372030492-11">11</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd581622372030492-12">12</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-64953fd581622372030492-1"><span class="crayon-sy">$</span><span class="crayon-sy">(</span><span class="crayon-r">document</span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-e">ready</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 crayon-striped-line" id="crayon-64953fd581622372030492-2"><span class="crayon-h">	</span><span class="crayon-sy">$</span><span class="crayon-sy">(</span><span class="crayon-s">'body'</span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-e">videoBG</span><span class="crayon-sy">(</span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-64953fd581622372030492-3"><span class="crayon-h">		</span><span class="crayon-i">position</span><span class="crayon-sy">:</span><span class="crayon-s">"fixed"</span><span class="crayon-sy">,</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd581622372030492-4"><span class="crayon-h">		</span><span class="crayon-i">zIndex</span><span class="crayon-sy">:</span><span class="crayon-cn">0</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-64953fd581622372030492-5"><span class="crayon-h">		</span><span class="crayon-i">mp4</span><span class="crayon-sy">:</span><span class="crayon-s">'assets/christmas_snow.mp4'</span><span class="crayon-sy">,</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd581622372030492-6"><span class="crayon-h">		</span><span class="crayon-i">ogv</span><span class="crayon-sy">:</span><span class="crayon-s">'assets/christmas_snow.ogv'</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-64953fd581622372030492-7"><span class="crayon-h">		</span><span class="crayon-i">webm</span><span class="crayon-sy">:</span><span class="crayon-s">'assets/christmas_snow.webm'</span><span class="crayon-sy">,</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd581622372030492-8"><span class="crayon-h">		</span><span class="crayon-i">poster</span><span class="crayon-sy">:</span><span class="crayon-s">'assets/christmas_snow.jpg'</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-64953fd581622372030492-9"><span class="crayon-h">		</span><span class="crayon-i">opacity</span><span class="crayon-sy">:</span><span class="crayon-cn">1</span><span class="crayon-sy">,</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd581622372030492-10"><span class="crayon-h">		</span><span class="crayon-i">fullscreen</span><span class="crayon-sy">:</span><span class="crayon-t">true</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-64953fd581622372030492-11"><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 crayon-striped-line" id="crayon-64953fd581622372030492-12"><span class="crayon-sy">}</span><span class="crayon-sy">)</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p></p>
<h2>よくないところ</h3>
<p>・ブラウザによる対応できる動画のフォーマットが違う<br />
動画ファイルをいっぱい作らなければならない<br />
・意味不明なオプションがいっぱいある<br />
textReplacementなど、使う気がしない<br />
・apacheの設定にも関係あるに気がする。<br />
httpd.confもしくは.htaccessにAddTypeでmimetypeを追加する必要ある？</p>

		<div id="crayon-64953fd581626328942766" 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">Apache</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;">
AddType video/ogg .ogm
AddType video/ogg .ogv
AddType video/ogg .ogg
AddType video/webm .webm
AddType audio/webm .weba
AddType video/mp4 .mp4
AddType video/x-m4v .m4v</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-64953fd581626328942766-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd581626328942766-2">2</div><div class="crayon-num" data-line="crayon-64953fd581626328942766-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd581626328942766-4">4</div><div class="crayon-num" data-line="crayon-64953fd581626328942766-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd581626328942766-6">6</div><div class="crayon-num" data-line="crayon-64953fd581626328942766-7">7</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 13px !important; line-height: 18px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-64953fd581626328942766-1"><span class="crayon-r">AddType</span><span class="crayon-h"> </span><span class="crayon-i ">video</span>/<span class="crayon-i ">ogg</span><span class="crayon-h"> </span><span class="crayon-sy">.</span><span class="crayon-i ">ogm</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd581626328942766-2"><span class="crayon-r">AddType</span><span class="crayon-h"> </span><span class="crayon-i ">video</span>/<span class="crayon-i ">ogg</span><span class="crayon-h"> </span><span class="crayon-sy">.</span><span class="crayon-i ">ogv</span></div><div class="crayon-line" id="crayon-64953fd581626328942766-3"><span class="crayon-r">AddType</span><span class="crayon-h"> </span><span class="crayon-i ">video</span>/<span class="crayon-i ">ogg</span><span class="crayon-h"> </span><span class="crayon-sy">.</span><span class="crayon-i ">ogg</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd581626328942766-4"><span class="crayon-r">AddType</span><span class="crayon-h"> </span><span class="crayon-i ">video</span>/<span class="crayon-i ">webm</span><span class="crayon-h"> </span><span class="crayon-sy">.</span><span class="crayon-i ">webm</span></div><div class="crayon-line" id="crayon-64953fd581626328942766-5"><span class="crayon-r">AddType</span><span class="crayon-h"> </span><span class="crayon-i ">audio</span>/<span class="crayon-i ">webm</span><span class="crayon-h"> </span><span class="crayon-sy">.</span><span class="crayon-i ">weba</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd581626328942766-6"><span class="crayon-r">AddType</span><span class="crayon-h"> </span><span class="crayon-i ">video</span>/<span class="crayon-i ">mp4</span><span class="crayon-h"> </span><span class="crayon-sy">.</span><span class="crayon-i ">mp4</span></div><div class="crayon-line" id="crayon-64953fd581626328942766-7"><span class="crayon-r">AddType</span><span class="crayon-h"> </span><span class="crayon-i ">video</span>/<span class="crayon-i ">x-m4v</span><span class="crayon-h"> </span><span class="crayon-sy">.</span><span class="crayon-i ">m4v</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p></p>

【jQuery】動画を背景にするには？

<p>白は、Webサイトのデザインの中で、最も多く使う色なのではないかと思います。</p>
<p>今回、白をメインテーマにしたサイトのデザインをすることになったので、</p>
<p>ただ白を使ったサイトではなく、白をうまく引き立てたデザインのWebサイトを探してみました。<br />
<a title="website01" href="/uploads-archive/2012/12/website01.jpg"><img decoding="async" loading="lazy" class="attachment-medium" title="website01" src="/uploads-archive/2012/12/website01-300x223.jpg" alt="website01" width="300" height="223" /></a><br />
<a href="http://www.storia-wedding.jp/" target="_blank">http://www.storia-wedding.jp/</a></p>
<p><strong></strong>上品な空の青が、新婦さんのドレスの白を綺麗に引き立てています。<br />
<a title="website02" href="/uploads-archive/2012/12/website02.jpg"><img decoding="async" loading="lazy" class="attachment-medium" title="website02" src="/uploads-archive/2012/12/website02-300x223.jpg" alt="website02" width="300" height="223" /></a><br />
<a href="http://kuad-entrance.com/" target="_blank">http://kuad-entrance.com/</a></p>
<p>余白を多く使い、白のイメージを強め、</p>
<p>淡いグレーが白の邪魔をすることなく、白の一部のようにして、白を引き立てています。<br />
<a title="website03" href="/uploads-archive/2012/12/website03.jpg"><img decoding="async" loading="lazy" class="attachment-medium" title="website03" src="/uploads-archive/2012/12/website03-300x223.jpg" alt="website03" width="300" height="223" /></a><br />
<a href="http://g-u-k.jp/" target="_blank">http://g-u-k.jp/</a></p>
<p>極端に余白を大きくし、有彩色の色を使わないことで、白のイメージが印象に残ります。</p>
<p>&nbsp;</p>
<h3>まとめ</h4>
<p>白を引き立てたサイトの特徴として、次のような印象を感じました。</p>
<p><strong><span style="font-size: medium;">・余白を大きく取り、白の印象を強める(色のついた場所を極力小さくする)</span></strong></p>
<p><strong><span style="font-size: medium;">・上品な有彩色を背景に使って、白の白さを引き立てる</span></strong></p>
<p><strong><span style="font-size: medium;">・淡いグレーやベージュを用いて、白を邪魔することなく、白の陰影のような印象にすることで、メリハリを付ける。</span></strong></p>
<p>&nbsp;</p>
<p>以上のようなことを、参考に、白のサイトのデザインをしてみたいと思います。</p>
<p>&nbsp;</p>


白を引き立てる白のサイト

<p>JSPとServletの開発をMacで行うため、Java開発環境の整備を行ってみました。</p>
<h2>１、JDKのダウンロード</h3>
<p>Oracleの公式サイトでは、Mac版のJavaEEを提供していないのようです。</p>
<p>JavaSEのダウンロードはできますが、servletの開発で必要なpackage（javax.servlet.http.HttpServletなど）がないから困りました。</p>
<p>Appleの開発者になったら、Appleの開発者サイトからJavaEEのダウンロードができるようですが、もうちょっと調べたら、下記のURLからMacのJavaEEもダウンロードできるからびっくりしました。</p>
<p><a href="http://jdk7.java.net/macportpreview/" target="_blank">http://jdk7.java.net/macportpreview/</a></p>
<h2>２、JDKのインストール</h3>
<p>ダウンロードしたdmgファイルをインストールしたら、/Library/Java/JavaVirtualMachines/の下にJDKがインストールしていることが確認できます。</p>
<h2>３、Eclipseでの設定</h3>
<p>Eclipseで開発を行うから、JDKパスを設定する必要です。</p>
<p>Eclipseの環境設定から、Java&gt;Installed JREsに「Add..」ボタンを押し、先インストールしたJDKのパスを入力して追加して、その設定の先頭のチェックボックをチェックすれば完了です。</p>
<p>※</p>
<p>EclipseでJSPとServletの開発を行うなら、WTPツールをインストールしたほうが便利です。</p>
<p>Eclipseのメニューで、Help&gt;Install New Softwareから、Indigo(Eclipse3.7)の更新サイト（http://download.eclipse.org/releases/indigo） で「Web, XML, Java EE Development and OSGi Enterprise Development」の部分をチェックし進めば、インストールが自動に開始します。</p>
<h2>４、Tomcatのインストール</h3>
<p><a href="http://tomcat.apache.org/download-70.cgi" target="_blank">Tomcatのサイト</a>から、好きなバージョンをダウンロードできます。</p>
<p>自分がtomcat7.0のFull documentation版をダウンロードしました。</p>
<p>ダウンロードしたファイルを展開して、好きなパスに置きましたら、インストール完了になります。</p>
<h2>５、Tomcatの起動と停止</h3>
<p>コマンドラインで行います。</p>
<p>・起動</p>

		<div id="crayon-64953fd58143f820866620" 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;">
cd (tomcat path)
bin/startup.sh</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-64953fd58143f820866620-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd58143f820866620-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-64953fd58143f820866620-1"><span class="crayon-r">cd</span><span class="crayon-h"> </span><span class="crayon-sy">(</span><span class="crayon-e">tomcat </span><span class="crayon-i">path</span><span class="crayon-sy">)</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd58143f820866620-2"><span class="crayon-i">bin</span>/<span class="crayon-i">startup</span><span class="crayon-e">.sh</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>・停止</p>

		<div id="crayon-64953fd581443118290606" 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;">
cd (tomcat path)
bin/shutdown.sh</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-64953fd581443118290606-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd581443118290606-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-64953fd581443118290606-1"><span class="crayon-r">cd</span><span class="crayon-h"> </span><span class="crayon-sy">(</span><span class="crayon-e">tomcat </span><span class="crayon-i">path</span><span class="crayon-sy">)</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd581443118290606-2"><span class="crayon-i">bin</span>/<span class="crayon-i">shutdown</span><span class="crayon-e">.sh</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p></p>

【Mac】Java開発環境の整備

jQueryプラグインを作ってみました

HTML5でWebカメラ &#8211; Photobooth.js

インラインSVGを利用した棒グラフ

カルーセル・スライダーになる万能jQueryプラグイン「carouFredSel」

jQueryで簡単にグラフを作る！

【これだけ覚えてほしい】mysqlのちょっとした技

medium_blogtop.jpg

small_blogtop.jpg

thumbnail_blogtop.jpg

blogtop.jpg

インラインSVGの基本まとめ

jQuery 3D画像スライドエフェクト

<p>今回で2回目になりますが、<br />
弊社サイトのリニューアルに際し、wordpressを使用し、<br />
つまづいたコトを書かせて頂きます。</p>
<p>今回は、<br />
「関連記事の表示」です。</p>
<h2>関連記事の表示</h3>
<p>まずは、関連記事の表示ですが、<br />
これは下のプラグインを使いました。</p>
<p><a href="http://wordpress.org/extend/plugins/yet-another-related-posts-plugin/" target="_blank">Yet Another Related Posts Plugin</a></p>
<p>人気があり、評価も高いプラグインです。</p>
<h3>設定方法</h4>
<p>インストール自体はとても簡単で、</p>
<p><strong>メニュー　＞　プラグイン</strong></p>
<p>からインストールできます。</p>
<p>プラグインを有効化した後は、</p>
<p><strong>メニュー　＞　設定　＞　関連記事(YARPP)</strong></p>
<p>からいろいろと設定できます。</p>
<p><a href="/uploads-archive/2012/11/スクリーンショット（2012-11-14-15.17.06）.png"><img decoding="async" loading="lazy" class="alignnone  wp-image-760" title="スクリーンショット（2012-11-14 15.17.06）" src="/uploads-archive/2012/11/スクリーンショット（2012-11-14-15.17.06）.png" alt="" width="645" height="406" srcset="/uploads-archive/2012/11/スクリーンショット（2012-11-14-15.17.06）.png 727w, /uploads-archive/2012/11/スクリーンショット（2012-11-14-15.17.06）-300x188.png 300w, /uploads-archive/2012/11/スクリーンショット（2012-11-14-15.17.06）-228x143.png 228w" sizes="(max-width: 645px) 100vw, 645px" /></a></p>
<p>自動的に表示するか、表示記事数をいくつだすか、表示記事のHTML部分を変更したり、といった感じで<br />
いろいろと設定できます。<br />
(自動的に表示するをチェックしたい場合、おそらく<strong></strong>の直後にでてくる設定になると思います。自分で位置を決めたい人は、<strong></strong>を任意の箇所に記載してください。)</p>
<p>これでOK！</p>
<p>あとは記事がいくつかできれば、関連記事として表示してくれます。</p>
<p>と思ったんですが・・・・<br />
記事が十分あり、似たような記事もあるにもかかわらず出てこない・・・</p>
<p>なぜだろうと思って調べたら、<br />
<strong>「関連スコア」</strong>というものを設定しているらしく、<br />
このスコアによって関連記事を表示をコントロールしているようです。</p>
<p>設定のページ上の右上の<strong>「表示オプション」</strong>を開くと、<br />
<strong>「関連スコア設定」</strong>という項目があります。<br />
そいつをチェックすると、</p>
<p>以下の画面が追加されます。</p>
<p><a href="/uploads-archive/2012/11/スクリーンショット（2012-11-14-15.16.08）.png"><img decoding="async" loading="lazy" class="alignnone  wp-image-762" title="スクリーンショット（2012-11-14 15.16.08）" src="/uploads-archive/2012/11/スクリーンショット（2012-11-14-15.16.08）.png" alt="" width="645" height="329" srcset="/uploads-archive/2012/11/スクリーンショット（2012-11-14-15.16.08）.png 729w, /uploads-archive/2012/11/スクリーンショット（2012-11-14-15.16.08）-300x153.png 300w, /uploads-archive/2012/11/スクリーンショット（2012-11-14-15.16.08）-228x116.png 228w" sizes="(max-width: 645px) 100vw, 645px" /></a></p>
<p>初期状態では、表示する最低関連スコアが5に設定されています。<br />
<strong>5</strong>っていうのは、そうとう一致していないと表示されないみたいなので、<br />
<strong>2</strong>か<strong>3</strong>ぐらいに設定すると良いかと思います。</p>
<p>スコアを下げたら、無事表示されました！！<br />
結果的に非常に簡単な話でした・・・</p>
<p>ついでですが、<br />
その表示オプションには<strong>「フィルター設定」</strong>という項目もあり、<br />
それをチェックすると以下の画面が表示されます。</p>
<p><a href="/uploads-archive/2012/11/スクリーンショット（2012-11-21-14.37.49）.png"><img decoding="async" loading="lazy" class="alignnone  wp-image-767" title="スクリーンショット（2012-11-21 14.37.49）" src="/uploads-archive/2012/11/スクリーンショット（2012-11-21-14.37.49）.png" alt="" width="644" height="237" srcset="/uploads-archive/2012/11/スクリーンショット（2012-11-21-14.37.49）.png 892w, /uploads-archive/2012/11/スクリーンショット（2012-11-21-14.37.49）-300x109.png 300w, /uploads-archive/2012/11/スクリーンショット（2012-11-21-14.37.49）-768x282.png 768w, /uploads-archive/2012/11/スクリーンショット（2012-11-21-14.37.49）-228x83.png 228w" sizes="(max-width: 644px) 100vw, 644px" /></a></p>
<p>ここでは、その名の通り、関連記事の箇所に、表示させたくない、カテゴリーやタグを設定できるようです。</p>
<p>使用してみると、<br />
非常に便利ですね、このプラグイン。</p>
<p>これで、ブログを見た方が、さらに違うブログを見て、<br />
サイトを回遊してくれると、このサイトでブログをやっている冥利につきます。</p>
<h4>〜おまけ〜</h6>
<p>記事とは全然関係ないんですが、<br />
最近、おぉーすごいなぁ〜と思ったwebサイトをご紹介します。</p>
<p><a href="http://ikuze-tohoku.jp/kitchen/" target="_blank">行くぜ、東北。2012 秋</a></p>
<p><a href="http://ikuze-tohoku.jp/kitchen/" target="_blank"><img decoding="async" loading="lazy" class="alignnone  wp-image-769" title="行くぜ、東北。2012 秋" src="/uploads-archive/2012/11/行くぜ、東北。2012-秋.jpg" alt="" width="644" height="483" srcset="/uploads-archive/2012/11/行くぜ、東北。2012-秋.jpg 1176w, /uploads-archive/2012/11/行くぜ、東北。2012-秋-300x225.jpg 300w, /uploads-archive/2012/11/行くぜ、東北。2012-秋-768x577.jpg 768w, /uploads-archive/2012/11/行くぜ、東北。2012-秋-1024x769.jpg 1024w, /uploads-archive/2012/11/行くぜ、東北。2012-秋-228x171.jpg 228w" sizes="(max-width: 644px) 100vw, 644px" /></a></p>
<p>ちょっと重いですが、パララックス効果が駆使されてます。<br />
色使いやデザインなんか素敵です。</p>

サイトリニューアルに際し、wordpressでつまづいたコト②　〜関連記事表示について〜

symfony2でcsvを出力してみた

facebookアプリ（iframe）を作成してみた（アプリ開発編）

サイトリニューアルに際し、wordpressでつまづいたコト　〜投稿者情報について〜

ナビゲーションを上部に隠すjQueryを実装してみました

Company

Our Solutions

Support

News

Blog

Blogブログ

カテゴリーから探す

年別から見る

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

2012/12/13

2012/12/13

2012/12/12

2012/12/06

2012/12/06

2012/12/06

2012/12/06

2012/11/29

2012/11/29

2012/11/29

2012/11/29

2012/11/22

2012/11/22

2012/11/22

2012/11/21

2012/11/15

2012/11/15

2012/11/08