<p>http://dainfagerholm.blogspot.jp/</p>
<p>こちらのサイトで紹介されている作品は、</p>
<p>「ステレオグラフィック・ドローイング」という手法で製作されています。</p>
<p>平面で描かれたイラストが、左右に振れるGIFアニメーションによって、</p>
<p>立体的に浮かび上がります。</p>
<p>&nbsp;</p>
<p>今回はこちらを写真で作ってみることにしました。</p>
<p>&nbsp;</p>
<h2>作り方</h3>
<h3>手順１　写真をステレオグラム化する</h4>
<p>「ステレオグラム」とは、２枚並んだ画像を、平行法・交差法といった特殊な見方をすることで、</p>
<p>裸眼で立体的に見ることができるものです。</p>
<p>&nbsp;</p>
<p>もちろん普通の同じ写真をただ横に並べただけでは立体的には見えません。</p>
<p>人が立体を感じることができるのは、右目と左目でものを見たときにズレがあり、</p>
<p>そのズレを元に、脳が立体だと感じるようになっているためです。</p>
<p>そのため、ステレオグラムを実現するためには、</p>
<p>この左右の見え方のズレを再現した２枚の画像が必要になります。</p>
<p>&nbsp;</p>
<p>今回は、<a href="http://www1.axfc.net/uploader/so/1149833" target="_blank">seeneon</a>というソフトを使って、このステレオグラムを製作しました。</p>
<h4>seeneonを使ったステレオグラムの作成手順</h6>
<p>1.　立体化する画像を準備します</p>
<p>今回はこの２枚の画像を立体化します。</p>
<p><img decoding="async" loading="lazy" alt="リス" src="/uploads-archive/2013/01/867880_27859284.jpg" width="400" height="286" /><img decoding="async" loading="lazy" alt="犬" src="/uploads-archive/2013/01/1142381_49316099.jpg" width="400" height="291" /></p>
<p>&nbsp;</p>
<p>2.　深度マップを作成する</p>
<p>写真を元に、深度マップを作成します。</p>
<p>こちらのソフトでは、赤・緑・青のいずれかを選び、その濃さから深度を判定します。</p>
<p>今回は赤を使いました。赤が濃いところほど近く、赤が薄いところほど遠くになります。</p>
<p><img decoding="async" loading="lazy" alt="リス深度マップ" src="/uploads-archive/2013/01/867880_27859284_dp.jpg" width="400" height="286" /></p>
<p><img decoding="async" loading="lazy" alt="犬深度マップ" src="/uploads-archive/2013/01/1142381_49316099_dp.jpg" width="400" height="291" /></p>
<p>&nbsp;</p>
<p>3.　 seeneonを使ってステレオグラム化する</p>
<p>i.　元の画像と、深度マップの画像のファイルをドラッグ＆ドロップします</p>
<p><img decoding="async" loading="lazy" alt="使い方1" src="/uploads-archive/2013/01/flow1.jpg" width="338" height="223" /></p>
<p>ii.　 深度マップに使った色を選びます（今回は赤なので&#8217;R&#8217;）</p>
<p><img decoding="async" loading="lazy" alt="使い方2" src="/uploads-archive/2013/01/flow2.jpg" width="338" height="223" /></p>
<p>iii.　生成ボタンを押します</p>
<p><img decoding="async" loading="lazy" alt="使い方3" src="/uploads-archive/2013/01/flow3.jpg" width="338" height="223" /></p>
<p>これでステレオグラムが完成しました。</p>
<p><img decoding="async" loading="lazy" alt="リスのステレオグラム" src="/uploads-archive/2013/01/867880_27859284_parallel.png" width="716" height="255" /></p>
<p><img decoding="async" loading="lazy" alt="犬のステレオグラム" src="/uploads-archive/2013/01/1142381_49316099_parallel.png" width="716" height="260" /></p>
<p>今回は平行法で作っているので、平行法(画像の真ん中にしきいをつけて、画像が重なって見えるようにする)で見ると、</p>
<p>この状態でも立体的に見えます。</p>
<p>しかし、GIFアニメーションを利用して、２つを重ねて表示すると、特殊な見方をしなくても立体的に見ることができるので、</p>
<p>今度はPhotoshopを使ってGIFアニメーションを作ります。</p>
<p>&nbsp;</p>
<h3>手順2　Photoshopでアニメーションにする</h4>
<p>1.　「作った画像の半分の幅」×「作った画像と同じ高さ」の大きさで「ファイル」→「新規作成」</p>
<p>2.　作った画像を右、左それぞれが枠内に収まるようにして、レイヤーで重ねます</p>
<p><img decoding="async" loading="lazy" alt="重ねる" src="/uploads-archive/2013/01/pt_flow1.jpg" width="400" height="305" /></p>
<p>3.　「ウィンドウ」→「アニメーション」でフレームを表示</p>
<p><img decoding="async" loading="lazy" alt="フレーム" src="/uploads-archive/2013/01/pt_flow2.jpg" width="400" height="177" /></p>
<p>4.秒数を指定します（今回は0.1秒）</p>
<p><img decoding="async" loading="lazy" alt="フレーム秒数" src="/uploads-archive/2013/01/pt_flow3.jpg" width="205" height="178" /></p>
<p>5.　フレームを新規作成し、新規作成したほうの表になっていたレイヤーを非表示にして、アニメーションの完成です。</p>
<p><img decoding="async" loading="lazy" alt="フレーム追加" src="/uploads-archive/2013/01/pt_flow4.jpg" width="400" height="125" /></p>
<p>&nbsp;</p>
<h3>手順3　GIFに出力する</h4>
<p>「ファイル」→「Webおよびデバイス用に保存」でGIF形式で書き出せば、完成です。</p>
<p><img decoding="async" loading="lazy" alt="GIF書き出し" src="/uploads-archive/2013/01/pt_flow5.jpg" width="400" height="296" /></p>
<h3>完成</h4>
<p>↓↓できあがったもの↓↓</p>
<p><img decoding="async" loading="lazy" alt="3DりすGIFアニメーション" src="/demo/ninomiya/11/squirrel.gif" width="400" height="285" /></p>
<p><img decoding="async" loading="lazy" alt="3D犬IGFアニメーション" src="/demo/ninomiya/11/dog.gif" width="400" height="291" /></p>


3DなアニメーションGIF作ってみた

<p>あまり有名ではないですが、一世風靡した「ゲームボーイ」の産みの親、横井軍平さん。</p>
<p>任天堂という大企業から発売されたのは最先端技術の塊ではなく、電卓の液晶を流用したちょっと発想を転換したものでした。</p>
<p>「ものづくり」をどういうふうにとらえるべきか、改めて考えさせられる「<a href="http://www.amazon.co.jp/決定版・ゲームの神様-横井軍平のことば-ものづくりのイノベーション「枯れた技術の水平思考」とは何か-P-Vine-Books/dp/4906700470/ref=sr_1_1?s=books&#038;ie=UTF8&#038;qid=1358926548&#038;sr=1-1" title="枯れた技術の水平思考" target="_blank">枯れた技術の水平思考</a>」という一冊です。</p>
<p>ゲームに限らずどれもどの業界でも以下のことを考えて「ものづくり」をしています。</p>
<p>・お客様に提供する商品は何がいいのか？</p>
<p>・どういったサービスを求めているのか？</p>
<p>・それに対するコストは？</p>
<p>原点に立ち返るため、考えをほぐすのにおすすめの一冊です。</p>
<p>求めるもの商品、サービスとコスト。すべてを成り立たせるためのは難しいですが、発想の転換によって可能になるかもしれない、と私も意識をしてお客様にご案内できるよう勉強していきます。</p>
<p>&nbsp;</p>
<p>&nbsp;</p>


「ものづくり」の発想

<p>前回のTwitterCardsに引き続き、OGPも設定してみました。</p>
<p>普通OGPのほうが先に出ているんだから、先に設定すべきだろうというツッコミは予想しつつ、内容と設定を簡単にまとめます。</p>
<p>OGP＝Open Graph Protocolです。各種ソーシャルメディアで、各種ウォール、ニュースフィードに「こういうサイトです」と明言するために必要な仕様です。</p>
<p>OGPの公式サイトはこちらから<strong><br />
</strong><a href="http://ogp.me/">http://ogp.me/</a></p>
<h2>基本設定</h3>
<p>HTMLヘッダーにmetaタグとして以下の設定します。</p>
<table>
<thead>
<tr>
<th>プロパティ</th>
<th>概要</th>
</tr>
</thead>
<tbody>
<tr>
<td>og:type</td>
<td>blog, website, cafe, hotel, restaurantなど</td>
</tr>
<tr>
<td>og:url</td>
<td>ページのURL</td>
</tr>
<tr>
<td>og:title</td>
<td>ページのタイトル</td>
</tr>
<tr>
<td><tt>og:description</tt></td>
<td>ページの概要</td>
</tr>
<tr>
<td><tt>og:image</tt></td>
<td>記事に掲載される写真画像やサムネイルなど</td>
</tr>
<tr>
<td>og:site_name</td>
<td>サイトの名称</td>
</tr>
</tbody>
</table>
<p>ということでサイト上では以下のように記述しました。</p>

		<div id="crayon-64953fd5832f5344111454" 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;meta property="og:type" content="website"&gt;
&lt;meta property="og:title" content="キャッツアイ｜カラコン通販サイト"&gt;
&lt;meta property="og:url" content="http://catseye-store.com"&gt;
&lt;meta property="og:description" content="カラコン通販専門キャッツアイはワンデーから1年使用、ナチュラルからメガ盛りカラコンまで、豊富なラインナップ。3150円以上で送料無料、5250円以上でもれなくケア用品プレゼント、7350円以上で代引き手数料無料とお客様第一のサービスを展開！"&gt;
&lt;meta property="og:image" content="http://catseye-store.com/images/big.jpg"&gt;
&lt;meta property="og:site_name" content="キャッツアイ｜カラコン通販サイト"&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-64953fd5832f5344111454-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd5832f5344111454-2">2</div><div class="crayon-num" data-line="crayon-64953fd5832f5344111454-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd5832f5344111454-4">4</div><div class="crayon-num" data-line="crayon-64953fd5832f5344111454-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd5832f5344111454-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-64953fd5832f5344111454-1"><span class="crayon-h">&lt;</span><span class="crayon-e">meta </span><span class="crayon-m">property</span>=<span class="crayon-s">"og:type"</span><span class="crayon-h"> </span><span class="crayon-i">content</span>=<span class="crayon-s">"website"</span><span class="crayon-h">&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd5832f5344111454-2"><span class="crayon-h">&lt;</span><span class="crayon-e">meta </span><span class="crayon-m">property</span>=<span class="crayon-s">"og:title"</span><span class="crayon-h"> </span><span class="crayon-i">content</span>=<span class="crayon-s">"キャッツアイ｜カラコン通販サイト"</span><span class="crayon-h">&gt;</span></div><div class="crayon-line" id="crayon-64953fd5832f5344111454-3"><span class="crayon-h">&lt;</span><span class="crayon-e">meta </span><span class="crayon-m">property</span>=<span class="crayon-s">"og:url"</span><span class="crayon-h"> </span><span class="crayon-i">content</span>=<span class="crayon-s">"http://catseye-store.com"</span><span class="crayon-h">&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd5832f5344111454-4"><span class="crayon-h">&lt;</span><span class="crayon-e">meta </span><span class="crayon-m">property</span>=<span class="crayon-s">"og:description"</span><span class="crayon-h"> </span><span class="crayon-i">content</span>=<span class="crayon-s">"カラコン通販専門キャッツアイはワンデーから1年使用、ナチュラルからメガ盛りカラコンまで、豊富なラインナップ。3150円以上で送料無料、5250円以上でもれなくケア用品プレゼント、7350円以上で代引き手数料無料とお客様第一のサービスを展開！"</span><span class="crayon-h">&gt;</span></div><div class="crayon-line" id="crayon-64953fd5832f5344111454-5"><span class="crayon-h">&lt;</span><span class="crayon-e">meta </span><span class="crayon-m">property</span>=<span class="crayon-s">"og:image"</span><span class="crayon-h"> </span><span class="crayon-i">content</span>=<span class="crayon-s">"http://catseye-store.com/images/big.jpg"</span><span class="crayon-h">&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd5832f5344111454-6"><span class="crayon-h">&lt;</span><span class="crayon-e">meta </span><span class="crayon-m">property</span>=<span class="crayon-s">"og:site_name"</span><span class="crayon-h"> </span><span class="crayon-i">content</span>=<span class="crayon-s">"キャッツアイ｜カラコン通販サイト"</span><span class="crayon-h">&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>さらに、TwitterCardsは共存が可能（TwitterCardsがOGPを吸収できる）ということですので、先日に設定したものとマージします。</p>
<p>ちなみにTwitterCardsの基本設定は以下の通りです。</p>
<table>
<thead>
<tr>
<th>Cardプロパティ</th>
<th>概要</th>
</tr>
</thead>
<tbody>
<tr>
<td><tt>twitter:card</tt></td>
<td>タイプ, &#8220;summary&#8221;, &#8220;photo&#8221;, または &#8220;player&#8221;か指定します</td>
</tr>
<tr>
<td><tt>twitter:url</tt></td>
<td>ページのURL</td>
</tr>
<tr>
<td><tt>twitter:title</tt></td>
<td>ページのタイトル</td>
</tr>
<tr>
<td><tt>twitter:description</tt></td>
<td>ページの概要</td>
</tr>
<tr>
<td><tt>twitter:image</tt></td>
<td>記事に掲載される写真画像やサムネイルなど</td>
</tr>
<tr>
<td><tt>twitter:site</tt></td>
<td>@username<br />
カードのフッターに表示されます。Webサイトのツイッターアカウントです（例えば企業アカウントとか）</td>
</tr>
<tr>
<td><tt>twitter:creator</tt></td>
<td>@username<br />
カードに表示されるページの制作者のツイッターアカウントです</td>
</tr>
</tbody>
</table>
<p>ということで、cardの種類とTwitterアカウント2つ計3項目を追記しました。</p>

		<div id="crayon-64953fd5832f9814771371" 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;meta property="og:type" content="website"&gt;
&lt;meta property="og:title" content="キャッツアイ｜カラコン通販サイト"&gt;
&lt;meta property="og:url" content="http://catseye-store.com"&gt;
&lt;meta property="og:description" content="カラコン通販専門キャッツアイはワンデーから1年使用、ナチュラルからメガ盛りカラコンまで、豊富なラインナップ。3150円以上で送料無料、5250円以上でもれなくケア用品プレゼント、7350円以上で代引き手数料無料とお客様第一のサービスを展開！"&gt;
&lt;meta property="og:image" content="http://catseye-store.com/images/big.jpg"&gt;
&lt;meta property="og:site_name" content="キャッツアイ｜カラコン通販サイト"&gt;
&lt;meta name="twitter:card" content="summary"&gt;
&lt;meta name="twitter:site" content="@catseye_store"&gt;
&lt;meta name="twitter:creator" content="@catseye_store"&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-64953fd5832f9814771371-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd5832f9814771371-2">2</div><div class="crayon-num" data-line="crayon-64953fd5832f9814771371-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd5832f9814771371-4">4</div><div class="crayon-num" data-line="crayon-64953fd5832f9814771371-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd5832f9814771371-6">6</div><div class="crayon-num" data-line="crayon-64953fd5832f9814771371-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd5832f9814771371-8">8</div><div class="crayon-num" data-line="crayon-64953fd5832f9814771371-9">9</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 13px !important; line-height: 18px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-64953fd5832f9814771371-1"><span class="crayon-h">&lt;</span><span class="crayon-e">meta </span><span class="crayon-m">property</span>=<span class="crayon-s">"og:type"</span><span class="crayon-h"> </span><span class="crayon-i">content</span>=<span class="crayon-s">"website"</span><span class="crayon-h">&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd5832f9814771371-2"><span class="crayon-h">&lt;</span><span class="crayon-e">meta </span><span class="crayon-m">property</span>=<span class="crayon-s">"og:title"</span><span class="crayon-h"> </span><span class="crayon-i">content</span>=<span class="crayon-s">"キャッツアイ｜カラコン通販サイト"</span><span class="crayon-h">&gt;</span></div><div class="crayon-line" id="crayon-64953fd5832f9814771371-3"><span class="crayon-h">&lt;</span><span class="crayon-e">meta </span><span class="crayon-m">property</span>=<span class="crayon-s">"og:url"</span><span class="crayon-h"> </span><span class="crayon-i">content</span>=<span class="crayon-s">"http://catseye-store.com"</span><span class="crayon-h">&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd5832f9814771371-4"><span class="crayon-h">&lt;</span><span class="crayon-e">meta </span><span class="crayon-m">property</span>=<span class="crayon-s">"og:description"</span><span class="crayon-h"> </span><span class="crayon-i">content</span>=<span class="crayon-s">"カラコン通販専門キャッツアイはワンデーから1年使用、ナチュラルからメガ盛りカラコンまで、豊富なラインナップ。3150円以上で送料無料、5250円以上でもれなくケア用品プレゼント、7350円以上で代引き手数料無料とお客様第一のサービスを展開！"</span><span class="crayon-h">&gt;</span></div><div class="crayon-line" id="crayon-64953fd5832f9814771371-5"><span class="crayon-h">&lt;</span><span class="crayon-e">meta </span><span class="crayon-m">property</span>=<span class="crayon-s">"og:image"</span><span class="crayon-h"> </span><span class="crayon-i">content</span>=<span class="crayon-s">"http://catseye-store.com/images/big.jpg"</span><span class="crayon-h">&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd5832f9814771371-6"><span class="crayon-h">&lt;</span><span class="crayon-e">meta </span><span class="crayon-m">property</span>=<span class="crayon-s">"og:site_name"</span><span class="crayon-h"> </span><span class="crayon-i">content</span>=<span class="crayon-s">"キャッツアイ｜カラコン通販サイト"</span><span class="crayon-h">&gt;</span></div><div class="crayon-line" id="crayon-64953fd5832f9814771371-7"><span class="crayon-h">&lt;</span><span class="crayon-e">meta </span><span class="crayon-i">name</span>=<span class="crayon-s">"twitter:card"</span><span class="crayon-h"> </span><span class="crayon-i">content</span>=<span class="crayon-s">"summary"</span><span class="crayon-h">&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd5832f9814771371-8"><span class="crayon-h">&lt;</span><span class="crayon-e">meta </span><span class="crayon-i">name</span>=<span class="crayon-s">"twitter:site"</span><span class="crayon-h"> </span><span class="crayon-i">content</span>=<span class="crayon-s">"@catseye_store"</span><span class="crayon-h">&gt;</span></div><div class="crayon-line" id="crayon-64953fd5832f9814771371-9"><span class="crayon-h">&lt;</span><span class="crayon-e">meta </span><span class="crayon-i">name</span>=<span class="crayon-s">"twitter:creator"</span><span class="crayon-h"> </span><span class="crayon-i">content</span>=<span class="crayon-s">"@catseye_store"</span><span class="crayon-h">&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p></p>
<h2> 確認</h3>
<p>TwitterCardsの時のようにプレビューツールはないので、実際にFacebookに行き、URLのシェアなどを行います。</p>
<p><a href="/officer/ogp%e3%82%92%e8%a8%ad%e5%ae%9a%e3%81%97%e3%81%a6%e3%81%bf%e3%81%9f%e3%80%82.html/attachment/%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88_2013_01_23_15_01" rel="attachment wp-att-1192"><img decoding="async" loading="lazy" class="aligncenter size-medium wp-image-1192" alt="スクリーンショット_2013_01_23_15_01" src="/uploads-archive/2013/01/e655c3c309ac0ee711eae259f479cced-300x164.jpg" width="300" height="164" srcset="/uploads-archive/2013/01/e655c3c309ac0ee711eae259f479cced-300x164.jpg 300w, /uploads-archive/2013/01/e655c3c309ac0ee711eae259f479cced-228x125.jpg 228w, /uploads-archive/2013/01/e655c3c309ac0ee711eae259f479cced.jpg 522w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<p>&nbsp;</p>
<p>上記のように設定した画像、文言が含まれていれば成功です。</p>
<p>&nbsp;</p>

OGPを設定してみた。

ECサイトで使えそうなjQueryプラグイン elevatezoom

<p>ECサイトというと馴染みが薄いかもしれませんが、インターネットで通信販売を申し込んだことがある、という人は結構いらっしゃるのではないでしょうか？</p>
<p>乱暴にいえば、お買い物する時カートのマークがついていればECサイトです。</p>
<p>半年ほど前になりますが経産省から発表された電子商取引実態調査では、週1回以上ECを利用する割合が日本では7.4％とまだ少なめですが、市場自体は8.5兆円で前年比＋8.6%と着実に増加しています。</p>
<p>http://www.meti.go.jp/policy/it_policy/statistics/outlook/ie_outlook.htm</p>
<p>日常生活にも少しずつ浸透しつつあるECサイト。簡単にではありますがどういった種類があるのか、メリット・デメリットを今回説明したいと思います。</p>
<p>●ASP:アプリケーションで提供しているサービス</p>
<p>●パッケージ製品：一定の機能を備えたソフト</p>
<p>●受託開発：要望を聞いて作成する</p>
<p>・ASPは安価で作成・運営を行えますが、提供されているアプリケーションなのでカスタマイズが難しく、類似したサイトデザインになりがちです。機能を追加したい場合は提供者側のバージョンアップを待つか、別途で作成する必要があります。</p>
<p>・パッケージ製品は欲しい内容をある程度変更でき、ASPよりもサイトの幅が広がっています。販売金額は数万円～数百万円です。また金額により変更できる内容もさまざまですので、ある程度選別する必要があります。</p>
<p>・受託開発はかゆいところまで手が届く発注側の要望をそのまま作成することができます。ただ１からの作成となるのでパッケージ製品と比べても高額で、準備作成に時間が必要となります。</p>
<p>ECサイト作成当初には現在の規模・予算・機能で考えがちですが、機能追加などのカスタマイズが難しい場合もあるので、今後のサイト運営をふまえて選択することで実質コスト削減にもつながります。</p>


ECサイトとはなんぞや

CSS3のアニメーションを使ったボタン

<p>wordpressの案件を今抱えており、なかなか思い通りにならなくて、<br />
まだまだだなぁと思いつつ、懸命に頑張っております。</p>
<p>調べながらやっていると、できないと認識していた複数検索ができるというプラグインを発見しました。</p>
<p><a href="http://wordpress.org/extend/plugins/wp-custom-fields-search/" target="_blank">WP Custom Fields Search</a></p>
<p>でも最終アップデートが、2年以上も前だ・・・</p>
<p>っていうか２年前からできたのか・・・</p>
<p>以前調べてた時はそういうものが見つからなかったんですが・・・</p>
<p>こちらのプラグインを日本語化にもできるようです。</p>
<p><a href="http://lovelog.eternal-tears.com/wordpress/wp-plugin-ja/wp-custom-fields-search/" target="_blank"><br />
WP Custom Fields Searchの日本語版配布</a></p>
<p>使い方はこちらをご覧ください。</p>
<p><a href="http://kotori-blog.com/wordpress/customfieldssearch/" target="_blank">WordPressで絞り込み検索を可能にするプラグイン「Custom Fields Search」[WordPress(WP)]</a></p>
<p>3.5のverでも使えることは使えました。</p>
<p>ただ、現在確認できたのは、テキスト、カテゴリ、タグでした。</p>
<p>カテゴリをチェックボックスで複数選択可にして、<br />
検索っていうのはまだわかりません。</p>
<p>うまくやればできるかと思うので、<br />
今後試して見たいと思います。</p>


wordpressで複数検索ができるようになってることを知りました

<p>OGPのTwitter版ともいうべき、機能「Twitter Cards」を弊社運営サイトに今更ながら設定してみました。</p>
<p>公式の説明はこちらです。</p>
<p><a href="https://dev.twitter.com/docs/cards" target="_blank">https://dev.twitter.com/docs/cards</a></p>
<p>&nbsp;</p>
<p>このTwitter Cardsを設定すると、該当のURLが紹介された時に、意図した画像や表現を設定することが出来ます。</p>
<p>設定は、弊社運営の<a title="カラコン通販キャッツアイ" href="http://catseye-store.com/" target="_blank">カラコン通販サイト「キャッツアイ」</a>にて行いました。</p>
<p>&nbsp;</p>
<h2>基本設定</h3>
<p>HTMLヘッダーにmetaタグとして以下の設定します。</p>
<table>
<thead>
<tr>
<th>Cardプロパティ</th>
<th>概要</th>
</tr>
</thead>
<tbody>
<tr>
<td><tt>twitter:card</tt></td>
<td>タイプ, &#8220;summary&#8221;, &#8220;photo&#8221;, または &#8220;player&#8221;か指定します</td>
</tr>
<tr>
<td><tt>twitter:url</tt></td>
<td>ページのURL</td>
</tr>
<tr>
<td><tt>twitter:title</tt></td>
<td>ページのタイトル</td>
</tr>
<tr>
<td><tt>twitter:description</tt></td>
<td>ページの概要</td>
</tr>
<tr>
<td><tt>twitter:image</tt></td>
<td>記事に掲載される写真画像やサムネイルなど</td>
</tr>
<tr>
<td><tt>twitter:site</tt></td>
<td>@username<br />
カードのフッターに表示されます。Webサイトのツイッターアカウントです（例えば企業アカウントとか）</td>
</tr>
<tr>
<td><tt>twitter:creator</tt></td>
<td>@username<br />
カードに表示されるページの制作者のツイッターアカウントです</td>
</tr>
</tbody>
</table>
<p>ということでサイト上では以下のように記述しました。</p>

		<div id="crayon-64953fd582c74684623125" 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;meta name="twitter:card" content="summary"&gt;
    &lt;meta name="twitter:title" content="キャッツアイ｜カラコン通販サイト"&gt;
    &lt;meta name="twitter:url" content="http://catseye-store.com"&gt;
    &lt;meta name="twitter:description" content="カラコン通販専門キャッツアイはワンデーから1年使用、ナチュラルからメガ盛りカラコンまで、豊富なラインナップ。3150円以上で送料無料、5250円以上でもれなくケア用品プレゼント、7350円以上で代引き手数料無料とお客様第一のサービスを展開！"&gt;
    &lt;meta name="twitter:image" content="http://catseye-store.com/images/big.jpg"&gt;
    &lt;meta name="twitter:site" content="@catseye_store"&gt;
    &lt;meta name="twitter:creator" content="@catseye_store"&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-64953fd582c74684623125-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd582c74684623125-2">2</div><div class="crayon-num" data-line="crayon-64953fd582c74684623125-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd582c74684623125-4">4</div><div class="crayon-num" data-line="crayon-64953fd582c74684623125-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd582c74684623125-6">6</div><div class="crayon-num" data-line="crayon-64953fd582c74684623125-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-64953fd582c74684623125-1"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-h">&lt;</span><span class="crayon-e">meta </span><span class="crayon-i">name</span>=<span class="crayon-s">"twitter:card"</span><span class="crayon-h"> </span><span class="crayon-i">content</span>=<span class="crayon-s">"summary"</span><span class="crayon-h">&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd582c74684623125-2"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-h">&lt;</span><span class="crayon-e">meta </span><span class="crayon-i">name</span>=<span class="crayon-s">"twitter:title"</span><span class="crayon-h"> </span><span class="crayon-i">content</span>=<span class="crayon-s">"キャッツアイ｜カラコン通販サイト"</span><span class="crayon-h">&gt;</span></div><div class="crayon-line" id="crayon-64953fd582c74684623125-3"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-h">&lt;</span><span class="crayon-e">meta </span><span class="crayon-i">name</span>=<span class="crayon-s">"twitter:url"</span><span class="crayon-h"> </span><span class="crayon-i">content</span>=<span class="crayon-s">"http://catseye-store.com"</span><span class="crayon-h">&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd582c74684623125-4"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-h">&lt;</span><span class="crayon-e">meta </span><span class="crayon-i">name</span>=<span class="crayon-s">"twitter:description"</span><span class="crayon-h"> </span><span class="crayon-i">content</span>=<span class="crayon-s">"カラコン通販専門キャッツアイはワンデーから1年使用、ナチュラルからメガ盛りカラコンまで、豊富なラインナップ。3150円以上で送料無料、5250円以上でもれなくケア用品プレゼント、7350円以上で代引き手数料無料とお客様第一のサービスを展開！"</span><span class="crayon-h">&gt;</span></div><div class="crayon-line" id="crayon-64953fd582c74684623125-5"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-h">&lt;</span><span class="crayon-e">meta </span><span class="crayon-i">name</span>=<span class="crayon-s">"twitter:image"</span><span class="crayon-h"> </span><span class="crayon-i">content</span>=<span class="crayon-s">"http://catseye-store.com/images/big.jpg"</span><span class="crayon-h">&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd582c74684623125-6"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-h">&lt;</span><span class="crayon-e">meta </span><span class="crayon-i">name</span>=<span class="crayon-s">"twitter:site"</span><span class="crayon-h"> </span><span class="crayon-i">content</span>=<span class="crayon-s">"@catseye_store"</span><span class="crayon-h">&gt;</span></div><div class="crayon-line" id="crayon-64953fd582c74684623125-7"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-h">&lt;</span><span class="crayon-e">meta </span><span class="crayon-i">name</span>=<span class="crayon-s">"twitter:creator"</span><span class="crayon-h"> </span><span class="crayon-i">content</span>=<span class="crayon-s">"@catseye_store"</span><span class="crayon-h">&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>&nbsp;</p>
<h2>プレビュー</h3>
<p>Twitterのデベロッパーサイトで確認が出来ます。</p>
<p><a href="https://dev.twitter.com/docs/cards/preview">preview tool</a>にいき、URLを入力します。</p>
<p><a href="/officer/twitter-cards%e3%82%92%e8%a8%ad%e5%ae%9a%e3%81%97%e3%81%a6%e3%81%bf%e3%81%9f%e3%80%82.html/attachment/%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88_2013_01_16_17_03" rel="attachment wp-att-1153"><img decoding="async" loading="lazy" class="aligncenter size-medium wp-image-1153" alt="スクリーンショット_2013_01_16_17_03" src="/uploads-archive/2013/01/a839bdb09859a2c182c0b6e03a59af1c-265x300.jpg" width="265" height="300" /></a></p>
<p>&nbsp;</p>
<p>設定できました。</p>
<h2>TwiiterCards利用申請</h3>
<p>最後にTwitterにCardの利用を設定する必要があります。</p>
<p>再び、Twitterのデベロッパーサイト<a href="https://dev.twitter.com/form/participate-twitter-cards">Apply to participate</a>にいき設定します。</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>

Twitter Cardsを設定してみた。

tableをExcelみたいにかっこ良くしてくれる jQueryプラグイン

<p>今回紹介したいのは、データ表示にめちゃ便利なプラグイン<strong>jQuery Grid Plugin</strong>です。</p>
<p>まず<a href="/demo/jeff/grid/index.htm" target="_blank">デモ</a>を見てください。</p>
<p>ドキュメントが少々複雑で、また見終わっていないですが、これがなかなか使えるに気がします。<br />
大きな特徴として、下記があります。</p>
<h2>特徴</h3>
<p>・ソート対応<br />
・ページングも対応<br />
・各種データ（HTML、配列、JSONなど）を使って表示することができる<br />
・列の表示・非表示の制御ができる<br />
・少々複雑になるが、値の編集もできる（tabキーもしくはshiftキーで編集結果を保存）<br />
・テーマ(css)を作るなら、見た目も変わる</p>
<p>今回のデモはページング機能を実装してみましたが、<br />
他いろいろな機能があるみたいで、詳しくは<a href="http://paramquery.com/" target="_blank">公式サイト</a>まで。</p>


【jQuery】データ表示にめちゃ便利なプラグイン

<p>表示までのスピードはやや気になるが、</p>
<p>何かあった時に使えそうなプラグインを見つけたのでメモ。</p>
<p>デモはこちら。</p>
<p><a class="demo" href="/demo/hoshino/25/">demo</a></p>
<p>&nbsp;</p>
<p>js</p>

		<div id="crayon-64953fd582870798256485" 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;">
var scrapper_total_width = 403;
var scrapper_image_width = 100;
var scrapper_image_height = 100;

var scrapperLinkURL;
var scrapperLinkTitle;
var scrapperLinkDescription;
var scrapperLinkImageURL;
var scrapperText;

function displayScrapperData()
{
	$('#displayArea').prepend('&lt;hr/&gt;&lt;br/&gt;&lt;div style="margin:0px auto; text-align:center;"&gt;&lt;img src="'+scrapperLinkImageURL+'"/&gt;&lt;/div&gt;'+'&lt;br/&gt;&lt;b&gt;Text: &lt;/b&gt;'+scrapperText+'&lt;br/&gt;&lt;b&gt;URL: &lt;/b&gt;'+scrapperLinkURL+'&lt;br/&gt;&lt;b&gt;Title: &lt;/b&gt;'+scrapperLinkTitle+'&lt;br/&gt;&lt;b&gt;Description: &lt;/b&gt;'+scrapperLinkDescription+'&lt;br/&gt;&lt;b&gt;Image Source: &lt;/b&gt;'+scrapperLinkImageURL+'&lt;br/&gt;&lt;br/&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-64953fd582870798256485-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd582870798256485-2">2</div><div class="crayon-num" data-line="crayon-64953fd582870798256485-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd582870798256485-4">4</div><div class="crayon-num" data-line="crayon-64953fd582870798256485-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd582870798256485-6">6</div><div class="crayon-num" data-line="crayon-64953fd582870798256485-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd582870798256485-8">8</div><div class="crayon-num" data-line="crayon-64953fd582870798256485-9">9</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd582870798256485-10">10</div><div class="crayon-num" data-line="crayon-64953fd582870798256485-11">11</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd582870798256485-12">12</div><div class="crayon-num" data-line="crayon-64953fd582870798256485-13">13</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd582870798256485-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-64953fd582870798256485-1"><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-i">scrapper_total_width</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-cn">403</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd582870798256485-2"><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-i">scrapper_image_width</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-cn">100</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-64953fd582870798256485-3"><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-i">scrapper_image_height</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-cn">100</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd582870798256485-4">&nbsp;</div><div class="crayon-line" id="crayon-64953fd582870798256485-5"><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-i">scrapperLinkURL</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd582870798256485-6"><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-i">scrapperLinkTitle</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-64953fd582870798256485-7"><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-i">scrapperLinkDescription</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd582870798256485-8"><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-i">scrapperLinkImageURL</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-64953fd582870798256485-9"><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-i">scrapperText</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd582870798256485-10">&nbsp;</div><div class="crayon-line" id="crayon-64953fd582870798256485-11"><span class="crayon-t">function</span><span class="crayon-h"> </span><span class="crayon-e">displayScrapperData</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd582870798256485-12"><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-64953fd582870798256485-13"><span class="crayon-h">	</span><span class="crayon-sy">$</span><span class="crayon-sy">(</span><span class="crayon-s">'#displayArea'</span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-e">prepend</span><span class="crayon-sy">(</span><span class="crayon-s">'&lt;hr/&gt;&lt;br/&gt;&lt;div style="margin:0px auto; text-align:center;"&gt;&lt;img src="'</span>+<span class="crayon-i">scrapperLinkImageURL</span>+<span class="crayon-s">'"/&gt;&lt;/div&gt;'</span>+<span class="crayon-s">'&lt;br/&gt;&lt;b&gt;Text: &lt;/b&gt;'</span>+<span class="crayon-i">scrapperText</span>+<span class="crayon-s">'&lt;br/&gt;&lt;b&gt;URL: &lt;/b&gt;'</span>+<span class="crayon-i">scrapperLinkURL</span>+<span class="crayon-s">'&lt;br/&gt;&lt;b&gt;Title: &lt;/b&gt;'</span>+<span class="crayon-i">scrapperLinkTitle</span>+<span class="crayon-s">'&lt;br/&gt;&lt;b&gt;Description: &lt;/b&gt;'</span>+<span class="crayon-i">scrapperLinkDescription</span>+<span class="crayon-s">'&lt;br/&gt;&lt;b&gt;Image Source: &lt;/b&gt;'</span>+<span class="crayon-i">scrapperLinkImageURL</span>+<span class="crayon-s">'&lt;br/&gt;&lt;br/&gt;'</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd582870798256485-14"><span class="crayon-sy">}</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>scrapper_total_width</p>
<p>これは自動生成されるテキストエリアの横幅。</p>
<p>&nbsp;</p>
<p>scrapper_image_width</p>
<p>URL入力後に出てくるサムネイルの横幅。</p>
<p>&nbsp;</p>
<p>scrapper_image_height</p>
<p>URL入力後に出てくるサムネイルの高さ。</p>
<p>&nbsp;</p>
<p>scrapperLinkURL<br />
scrapperLinkTitle<br />
var scrapperLinkDescription<br />
scrapperLinkImageURL<br />
scrapperText</p>
<p>それぞれ取得したサイトの情報が格納されるが、</p>
<p>変数名が固定のようなので、変更しない方が良い。</p>
<p>&nbsp;</p>
<p>上記に格納されたそれぞれの要素を</p>
<p>prepend()</p>
<p>の引数にHTMLの文字列として代入すると出力される。</p>
<p>このHTMLを変更してCSS調整すればオリジナルにもなるのがとてありがたい。</p>
<p>&nbsp;</p>
<p>html</p>

		<div id="crayon-64953fd582875364597126" 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="container"&gt;
    &lt;div id="box"&gt;
        &lt;h1&gt;FacebookのようにURLを打ち込むとサイトの情報がでてくるjQueryプラグイン&lt;/h1&gt;
        URLを入れてちょっと待ってね&lt;br/&gt;
        &lt;div id="linkScrapper"&gt;&lt;/div&gt;
    &lt;/div&gt;
    &lt;div id="displayArea"&gt;&lt;/div&gt;
&lt;/div&gt;</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 13px !important; line-height: 18px !important;"><div class="crayon-num" data-line="crayon-64953fd582875364597126-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd582875364597126-2">2</div><div class="crayon-num" data-line="crayon-64953fd582875364597126-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd582875364597126-4">4</div><div class="crayon-num" data-line="crayon-64953fd582875364597126-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd582875364597126-6">6</div><div class="crayon-num" data-line="crayon-64953fd582875364597126-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd582875364597126-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-64953fd582875364597126-1"><span class="crayon-r ">&lt;div </span><span class="crayon-e ">id</span>=<span class="crayon-s ">"container"</span><span class="crayon-r ">&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd582875364597126-2"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r ">&lt;div </span><span class="crayon-e ">id</span>=<span class="crayon-s ">"box"</span><span class="crayon-r ">&gt;</span></div><div class="crayon-line" id="crayon-64953fd582875364597126-3"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r ">&lt;h1&gt;</span><span class="crayon-i ">FacebookのようにURLを打ち込むとサイトの情報がでてくるjQueryプラグイン</span><span class="crayon-r ">&lt;/h1&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd582875364597126-4"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;URLを入れてちょっと待ってね</span><span class="crayon-r ">&lt;br/&gt;</span></div><div class="crayon-line" id="crayon-64953fd582875364597126-5"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r ">&lt;div </span><span class="crayon-e ">id</span>=<span class="crayon-s ">"linkScrapper"</span><span class="crayon-r ">&gt;</span><span class="crayon-r ">&lt;/div&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd582875364597126-6"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r ">&lt;/div&gt;</span></div><div class="crayon-line" id="crayon-64953fd582875364597126-7"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r ">&lt;div </span><span class="crayon-e ">id</span>=<span class="crayon-s ">"displayArea"</span><span class="crayon-r ">&gt;</span><span class="crayon-r ">&lt;/div&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd582875364597126-8"><span class="crayon-r ">&lt;/div&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>&nbsp;</p>
<p>#linkScrapperにはURL入力用のテキストエリアが入り</p>
<p>#displayAreaには決定ボタンを押した時の結果が表示される。</p>
<p>&nbsp;</p>
<p>各要素の見た目は</p>
<p>linkScrapper.min.js</p>
<p>の中にベタ書きなので、書き換えればどんなデザインにも変更できそうなのがありがたい。</p>
<p>URL入力後結果がでるのが少し遅いのが玉に瑕だが</p>
<p>要望などでそうなので、何かあった時にはつかえそうだ。</p>

FacebookのようにURLを打ち込むとサイトの情報がでてくるjQueryプラグイン

<p>2013年初のブログということで、簡単にwebデザインのトレンドのお話をしたいと思います。</p>
<p>まずは、昨年のwebデザインから。</p>
<p>海外の方の好みなのでしょうか。<br />
数多くのwebサイトが掲載されています。</p>
<p><a href="http://webdesignledger.com/inspiration/best-of-web-design-in-2012" target="_blank">Best of Web Design in 2012 | Inspiration</a></p>
<p>簡単に大きく分けていうと、</p>
<p style="color: #70440e;"><span style="font-size: medium;">・ベタ塗り</span><br />
<span style="font-size: medium;"> ・大きな写真を背景としてブラウザいっぱいに表示</span><br />
<span style="font-size: medium;"> ・背景にちょっとしたテクスチャ(紙等)</span><br />
<span style="font-size: medium;"> ・レトロな配色</span><br />
<span style="font-size: medium;"> ・ワンカラム</span><br />
<span style="font-size: medium;"> ・スクロールによるアニメーション</span><br />
<span style="font-size: medium;"> ・大きなキャッチコピー</span></p>
<p>こんな感じでしょうか。<br />
(もっと細かくみたら他にもあると思います・・・)</p>
<p>海外の方のものなので、<br />
日本のWEBサイトで見かけるのとは違うかも知れませんが、<br />
僕個人としては、確かに上記のようなサイトが多くあった感じがします。</p>
<p>そして、今年のデザインのトレンドですが、<br />
こちらも海外の方のブログですが、<br />
トレンドを20個紹介してくれています。</p>
<p><a href="http://www.hongkiat.com/blog/web-design-trend-2013/" target="_blank">Web Design: 20 Hottest Trends To Watch Out For in 2013</a><br />
箇条書きにすると以下の様な感じです。</p>
<p style="color: #70440e;"><span style="font-size: medium;">１．レスポンシブデザイン</span><br />
<span style="font-size: medium;"> ２．Retinaの対応</span><br />
<span style="font-size: medium;"> ３．ヘッダーの固定</span><br />
<span style="font-size: medium;"> ４．背景に大きな写真</span><br />
<span style="font-size: medium;"> ５．CSSでの透過</span><br />
<span style="font-size: medium;"> ６．ミニマルなランディングページ</span><br />
<span style="font-size: medium;"> ７．QRコードの掲載</span><br />
<span style="font-size: medium;"> ８．ソーシャルメディアのバッジ</span><br />
<span style="font-size: medium;"> ９．細かいイラスト</span><br />
<span style="font-size: medium;"> １０．無限スクロール(インフィニットスクロール)</span><br />
<span style="font-size: medium;"> １１．HPのチュートリアル</span><br />
<span style="font-size: medium;"> １２．スライドでコンテンツ移動させる</span><br />
<span style="font-size: medium;"> １３．クリックで開閉、表示・非表示になるナビーゲーション</span><br />
<span style="font-size: medium;"> １４．画面いっぱいのタイポグラフィー</span><br />
<span style="font-size: medium;"> １５．オープンソースやAPIの使用</span><br />
<span style="font-size: medium;"> １６．ボックスの影(ドロップシャドウ)</span><br />
<span style="font-size: medium;"> １７．CSS３によるアニメーション</span><br />
<span style="font-size: medium;"> １８．縦のナビゲーション</span><br />
<span style="font-size: medium;"> １９．１ページのwebデザイン</span><br />
<span style="font-size: medium;"> ２０．円形の要素を使用したデザイン</span></p>
<p>ざっと書いてしまうとこんな感じです。</p>
<p>昨年から見られるトレンドもありますが、<br />
今年もトレンドとして引き続きあるってことですねー</p>
<p>僕として、今は、「ベタ塗り」や「テクスチャ」が好みではありますが、<br />
今年のトレンドには見当たらないのシフトしていかないとダメかもしれませんww</p>


2012年のベストwebデザインと、2013年に予想されるwebデザイン

CSS3で伊勢丹の紙袋を作ってみた

<p>今までテキストエディタがmi使ってました。別に不満などないですが、何となくダサいなあと感じました。</p>
<p>また、開発にはeclipse使ってますが、重いから、ちょっとしたファイルの編集には使いたくないんです。</p>
<p>新年を機に、テキストエディタを<a href="http://www.sublimetext.com/">sublime</a>に変えてみました。<br />
かなり高機能なエディタですが、気が向くまで全機能使っていいのは素晴らしいです。</p>
<p>ちょっと使ってみた感想と機能紹介になります。</p>
<h2>便利なビュー機能</h3>
<p>・minimap<br />
現在の画面はファイル全体から見てどのあたりにあるのかが分かる機能。<br />
必要ないときはこの機能をoffにする。<br />
.sidebar<br />
現在のworkspaceにあるファイルが簡単に開ける。<br />
デフォルトはoffになっているが、必要なとき（複数ファイルで作業するとき）にonに切り替えると便利。</p>
<h2>デフォルト設定が簡単にoverwriteできる</h3>
<p>見た目とショットキーのデフォルト設定ファイル（JSON形式で書いてる）があって、それに対するユーザ設定ファイルに設定したい項目を書くだけで、デフォルト設定がoverwriteされるのは、斬新といえば斬新だ。。</p>
<h2>マルチカーソル</h3>
<p>編集に便利みたい<br />
自分にとってどうでもいい機能</p>
<h2>command palette</h3>
<p>macでcmd+shift+pを押すだけで、実行できるコマンドリストが出てくる。</p>
<h2>goto anything</h3>
<p>macでのショットキーはcmd+p。<br />
workspaceで別のファイルを見たい場合がこれが便利。<br />
ファイルの行数とシンボル（例えば、関数名）まで直接行ける。</p>
<h2>project機能</h3>
<p>workspaceをproject単位で保存できる。<br />
さらに、workspace内特定なファイル（例えば、phpファイル）だけ表示するような設定までもできる。<br />
どうやって保存したprojectを探し出せるのがはいまいち分からない。</p>
<h2>snippet</h3>
<p>既存や自作のテンプレートをショットカットで呼び出す機能</p>
<h2>build system</h3>
<p>phpなどのファイルをエディタ内のconsoleで実行し、結果を知らせてくれる機能。<br />
自分にとってどうでもいい機能</p>
<h2>package</h3>
<p>package controlをインストールすると、かなりな数のpackageがインストール可能になる。<br />
「sublime package control」で検索すること。</p>
<h2>windowの分割</h3>
<p>windowを任意数に分割できるらしい。<br />
ファイルを見比べながら作業するに便利。</p>


新しい年に、テキストエディタをsublimeに変えた

<div class="booklink-box" style="text-align:left;padding-bottom:20px;font-size:small;/zoom: 1;overflow: hidden;">
<div class="booklink-image" style="float:left;margin:0 15px 10px 0;"><a href="http://www.amazon.co.jp/exec/obidos/asin/4822282295/sackoh71-22/" target="_blank" ><img decoding="async" src="http://ecx.images-amazon.com/images/I/51HKFQD123L._SL160_.jpg" style="border: none;" /></a></div>
<div class="booklink-info" style="line-height:120%;/zoom: 1;overflow: hidden;">
<div class="booklink-name" style="margin-bottom:10px;line-height:120%"><a href="http://www.amazon.co.jp/exec/obidos/asin/4822282295/sackoh71-22/" target="_blank" >アジャイルプロジェクトマネジメント</a></p>
<div class="booklink-powered-date" style="font-size:8pt;margin-top:5px;font-family:verdana;line-height:120%">posted with <a href="http://yomereba.com" rel="nofollow" target="_blank">ヨメレバ</a></div>
</div>
<div class="booklink-detail" style="margin-bottom:5px;">ジム ハイスミス 日経BP出版センター 2005-06-09    </div>
<div class="booklink-link" style="margin-top: 5px"><a href="http://www.amazon.co.jp/exec/obidos/ASIN/4822282295/sackoh71-22/" name="booklink" rel="nofollow" target="_blank">Amazon.co.jp で詳細を見る</a></div>
</div>
<div class="booklink-footer" style="clear: left"></div>
</div>
<p>先日、<a title="アジャイルソフトウェア開発という手法" href="/officer/%e3%82%a2%e3%82%b8%e3%83%a3%e3%82%a4%e3%83%ab%e3%82%bd%e3%83%95%e3%83%88%e3%82%a6%e3%82%a7%e3%82%a2%e9%96%8b%e7%99%ba%e3%81%a8%e3%81%84%e3%81%86%e6%89%8b%e6%b3%95.html">アジャイルサムライ</a>というアジャイル開発のプロセスをまとめた本をご紹介してから引き続き、「アジャイル開発」について考察を深めているなかでの一冊です。なんとこの本も2005年出版なんですね。長い間、アジャイル開発という開発手法を知らなかったことがお恥ずかしい限りです。</p>
<p>アジャイルサムライが、プロセスの説明を重視していて、こちらの本はどちらかというとアジャイルプロジェクトマネジメント（APM）という概念からどのようにマネジメントを改善出来るかということを述べています。</p>
<h2>抜粋</h2>
<h3>■アジャイルプロジェクトマネジメントの価値</h3>
<ol>
<li>プロセスやツール　＜　個人との対話</li>
<li>包括的なドキュメント　＜　動作するソフトウェア</li>
<li>契約の交渉　＜　顧客との協調</li>
<li>計画に従う　＜　変化への対応</li>
</ol>
<h3>■アジャイルプロジェクトマネジメント（APM）の原則</h3>
<ul>
<li>製品提供と顧客価値
<ol>
<li>顧客価値の提供</li>
<li>反復型で機能ベースの提供</li>
<li>技術的優位性の重視</li>
</ol>
</li>
<li>リーダーシップ－コラボレーション
<ol>
<li>探索の奨励</li>
<li>適応型（自己組織的、自発的規律）チームの構築</li>
<li>シンプル</li>
</ol>
</li>
</ul>
<h3>■APMプロセスフレームワーク（APMモデル）</h3>
<ol>
<li>適応(Envision)
<ol>
<li>何を提供するかについての構想を立てる。</li>
<li>プロジェクトのスコープを決める。</li>
<li>ステークホルダも含めたチーム体制を決める。</li>
<li>チームメンバーがどのように協力し合って作業を進めるかの構想を立てる。</li>
</ol>
</li>
<li>思索(Speculate)
<ol>
<li>最初の要求を幅広く収集する。</li>
<li>機能リストを作り、その作業負荷を見積もる。</li>
<li>リソース計画とリリース計画（リリース、マイルストーン、イテレーション）を立てる。</li>
<li>計画にリスク軽減策を盛り込む。</li>
</ol>
</li>
<li>探索(Explore)
<ol>
<li>機能を実際にリリースする。</li>
<li>協力的で自己組織的なプロジェクトコミュニティを作り出す。</li>
<li>機能を実際にリリースする。</li>
<li>ステークホルダ間の対話を取り持つ。</li>
</ol>
</li>
<li>適応(Adapt)
<ol>
<li>計画し、結果を監視し、軌道修正する。</li>
<li>変更や変化に対応する。</li>
<li>学習した事を組み込み、それを教訓として覚えておく。</li>
<li>思索・探索・適応のループをたどり、各イテレーションで機能を洗練させていく。</li>
<li>チームが新しい情報を集めながら、構想フェーズに立ち戻って見直す。</li>
<li>顧客の観点、技術的観点、プロセスパフォーマンスの観点、プロジェクトステータスの観点から、成果を見直す。</li>
<li>最新の情報に基づいて修正されたプロジェクトの展望と、実情を対比して考察する。</li>
<li>適応によって得られた結果は次のイテレーションを開始する際の再計画に組み込まれる。</li>
</ol>
</li>
<li>終結(Close)
<ol>
<li>プロジェクトの終了を見極める。</li>
<li>学習し、学習した内容を次のイテレーションの作業に組み込む。</li>
<li>次のプロジェクトチームに引き継ぐ。</li>
</ol>
</li>
</ol>
<h2>まとめ</h2>
<p>アジャイルサムライだけでは、正直、ピンとこないというか腹にしっかり落ちた感覚はなかったのですが、私が携わるプロジェクトマネジメントという目線での本書であったので、非常にわかりやすかった。スポーツをやるにしても、茶道や書道などの芸術をやるにしても、先人が積み上げてきたものが基本、手本となっていて、それを習って習得することが最も早くレベルが上がるものと考えています。この考え方は、ビジネスにおいても当てはまるので、このようなフレームワーク、概念は積極的に取り入れて行きたいと思います。</p>


アジャイルプロジェクトマネジメント 最高のチームづくりと革新的な製品の法則

<h2>postfix</h3>
<p>・aliases設定<br />
vi /etc/aliases<br />
newaliases<br />
/etc/init.d/postfix restart</p>
<h2>dovecot</h3>
<p>vi /etc/dovecot/conf.d/10-auth.conf<br />
#disable_plaintext_auth = yes→disable_plaintext_auth = no<br />
/etc/init.d/dovecot restart</p>


【自分用】centOS6でメール設定での注意点

CSS3を使って、背景パターンをつくる

<p>ECサイトで使えそうなjQueryプラグイン snipe.jsを使ってみた。</p>
<p><a class="demo" href="/demo/hoshino/24/">デモ</a></p>
<p>設置方法は3種類。</p>
<p>&nbsp;</p>
<p>パターン1</p>

		<div id="crayon-64953fd5821c8085230295" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover wrap" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 18px !important;">
		
			<div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><span class="crayon-title"></span>
			<div class="crayon-tools" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div><span class="crayon-language">XHTML</span></div></div>
			<div class="crayon-info" style="min-height: 19.5px !important; line-height: 19.5px !important;"></div>
			<div class="crayon-plain-wrap"><textarea  class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 13px !important; line-height: 18px !important;">
&lt;img src="jeff.jpg" id="demo1" data-zoom="jeff_large.jpg" alt=""&gt;
&lt;script type="text/javascript"&gt;
$(function(){
    $('#demo1').snipe();
});
&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-64953fd5821c8085230295-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd5821c8085230295-2">2</div><div class="crayon-num" data-line="crayon-64953fd5821c8085230295-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd5821c8085230295-4">4</div><div class="crayon-num" data-line="crayon-64953fd5821c8085230295-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd5821c8085230295-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-64953fd5821c8085230295-1"><span class="crayon-r ">&lt;img </span><span class="crayon-e ">src</span>=<span class="crayon-s ">"jeff.jpg"</span><span class="crayon-h"> </span><span class="crayon-e ">id</span>=<span class="crayon-s ">"demo1"</span><span class="crayon-h"> </span><span class="crayon-e ">data-zoom</span>=<span class="crayon-s ">"jeff_large.jpg"</span><span class="crayon-h"> </span><span class="crayon-e ">alt</span>=<span class="crayon-s ">""</span><span class="crayon-r ">&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd5821c8085230295-2"><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" id="crayon-64953fd5821c8085230295-3"><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-64953fd5821c8085230295-4"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">$</span><span class="crayon-sy">(</span><span class="crayon-s">'#demo1'</span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-e">snipe</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-64953fd5821c8085230295-5"><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-64953fd5821c8085230295-6"><span class="crayon-ta">&lt;/script&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>&nbsp;</p>
<p>パターン2</p>

		<div id="crayon-64953fd5821d1109646063" 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;img src="jeff.jpg" id="demo2" alt=""&gt;
&lt;script type="text/javascript"&gt;
$(function(){
    $('#demo2').snipe({
        image: 'jeff_large.jpg'
    });
});
&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-64953fd5821d1109646063-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd5821d1109646063-2">2</div><div class="crayon-num" data-line="crayon-64953fd5821d1109646063-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd5821d1109646063-4">4</div><div class="crayon-num" data-line="crayon-64953fd5821d1109646063-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd5821d1109646063-6">6</div><div class="crayon-num" data-line="crayon-64953fd5821d1109646063-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd5821d1109646063-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-64953fd5821d1109646063-1"><span class="crayon-h">&lt;</span><span class="crayon-e">img </span><span class="crayon-i">src</span>=<span class="crayon-s">"jeff.jpg"</span><span class="crayon-h"> </span><span class="crayon-i">id</span>=<span class="crayon-s">"demo2"</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-64953fd5821d1109646063-2"><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" id="crayon-64953fd5821d1109646063-3"><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-64953fd5821d1109646063-4"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">$</span><span class="crayon-sy">(</span><span class="crayon-s">'#demo2'</span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-e">snipe</span><span class="crayon-sy">(</span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-64953fd5821d1109646063-5"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-i">image</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-s">'jeff_large.jpg'</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd5821d1109646063-6"><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-64953fd5821d1109646063-7"><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-64953fd5821d1109646063-8"><span class="crayon-ta">&lt;/script&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>&nbsp;</p>
<p>パターン3</p>

		<div id="crayon-64953fd5821d3851199759" 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;a href="jeff_large.jpg" id="demo3"&gt;&lt;img src="jeff.jpg" alt=""&gt;&lt;/a&gt;
&lt;script type="text/javascript"&gt;
$(function(){
    $('#demo3').snipe();
});
&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-64953fd5821d3851199759-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd5821d3851199759-2">2</div><div class="crayon-num" data-line="crayon-64953fd5821d3851199759-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd5821d3851199759-4">4</div><div class="crayon-num" data-line="crayon-64953fd5821d3851199759-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd5821d3851199759-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-64953fd5821d3851199759-1"><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">"jeff_large.jpg"</span><span class="crayon-h"> </span><span class="crayon-i">id</span>=<span class="crayon-s">"demo3"</span><span class="crayon-h">&gt;</span><span class="crayon-h">&lt;</span><span class="crayon-e">img </span><span class="crayon-i">src</span>=<span class="crayon-s">"jeff.jpg"</span><span class="crayon-h"> </span><span class="crayon-i">alt</span>=<span class="crayon-s">""</span><span class="crayon-h">&gt;</span><span class="crayon-h">&lt;</span>/<span class="crayon-e">a</span><span class="crayon-h">&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd5821d3851199759-2"><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" id="crayon-64953fd5821d3851199759-3"><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-64953fd5821d3851199759-4"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">$</span><span class="crayon-sy">(</span><span class="crayon-s">'#demo3'</span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-e">snipe</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-64953fd5821d3851199759-5"><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-64953fd5821d3851199759-6"><span class="crayon-ta">&lt;/script&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>&nbsp;</p>
<p>jsは共通で</p>

		<div id="crayon-64953fd5821d4748923199" 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;script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="js/jquery.snipe.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-64953fd5821d4748923199-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd5821d4748923199-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-64953fd5821d4748923199-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">"//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.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-64953fd5821d4748923199-2"><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.snipe.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>&nbsp;</p>
<p>ECサイトでは</p>
<p><a class="demo" href="/demo/hoshino/24/ec.html">デモ</a></p>
<p>と思ったけどバグってる、、</p>
<p>ソースを見たが直りそうになかったのでとりあえず保留。</p>

Company

Our Solutions

Support

News

Blog

Blogブログ

カテゴリーから探す

年別から見る

記事一覧

2013/01/24

2013/01/24

2013/01/24

2013/01/23

2013/01/17

2013/01/17

2013/01/17

2013/01/17

2013/01/17

2013/01/16

2013/01/10

2013/01/10

2013/01/10

2013/01/09

2013/01/09

2012/12/27

2012/12/20

2012/12/20