<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>

ECサイトで使えそうなjQueryプラグイン snipe.js

<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/4314010479/sackoh71-22/" target="_blank" ><img decoding="async" src="http://ecx.images-amazon.com/images/I/51oNT1FOu3L._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/4314010479/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;">マッテオ モッテルリーニ 紀伊國屋書店 2008-04-17    </div>
<div class="booklink-link" style="margin-top: 5px"><a href="http://www.amazon.co.jp/exec/obidos/ASIN/4314010479/sackoh71-22/" name="booklink" rel="nofollow" target="_blank">Amazon.co.jp で詳細を見る</a></div>
</div>
<div class="booklink-footer" style="clear: left"></div>
</div>
<p>行動経済学の先駆けの本。</p>
<p>合理的に判断をしないという人間の価値判断が非常に参考になります。</p>
<h2> 抜粋</h3>
<p>・お金に勝手に相対的価値を付けてしまう。娯楽費4万円と名目のない2万円+娯楽費2万円は違う。</p>
<p>・三つあると真ん中を選ぶ<br />
寿司屋のランチメニューで「特上・上・並」とあれば、「上」の注文がいちばん多い。一般に、三つの選択肢では真ん中が好まれる。売る立場でいうと、4000円と5000円の類似商品があって、値段の高いほうを「売りたい」と思えば、6000円という選択肢を追加すればよい。</p>
<p>・自分のものになると値が上がる<br />
通販での試供品の提供「使ってダメなら一週間以内に返品して下さい。お値段は無料です」。通販業者はめったに返品されないことを知っている。――買ってもいないのに、手元に来ただけで「保有効果」がはたらきます。</p>
<p>・進むも地獄、退くも地獄の…<br />
巨額の先行投資をしている。さらに追加の投資が必要。しかし、先行きの展望は「暗い」。これは、「コンコルドの誤謬」と呼ばれるもので、展望がないなら、いま、手を引くべきなのです。</p>
<p>・ダメな会議の典型とは…<br />
会議の結論がなかなか出ない。話がグルグル回っている気がする。これは最初の発言者の発言にひっぱられ、新しい話題が出てこなくなっているのです。これを、「アンカリング効果」といいます。</p>
<p>・交渉は最後の一言で決まる<br />
交渉事でメインの話が終わったら、安心したりしていませんか。締めの一言が、契約にこぎつけるには重要です。人の記憶はメインのことと、最後の一言で印象の良し悪しが決まります。これを「ピーク・エンドの法則」といいます(同様に、恋人とのデートは、別れ際の一言が最重要です)。</p>


経済は感情で動く

<p>JQUERY 1.9 BETA 1が12月17日にリリースされた。<br />
<a href="http://blog.jquery.com/2012/12/17/jquery-1-9-beta-1-released/" target="_blank">http://blog.jquery.com/2012/12/17/jquery-1-9-beta-1-released/</a></p>
<p><a href="http://jquery.com/upgrade-guide/1.9/" target="_blank">http://jquery.com/upgrade-guide/1.9/</a></p>
<p>&nbsp;</p>
<p>・変更点は全てjQuery 2.0に継承される<br />
・多くの不要と判断された機能が削除された<br />
・移行支援ツールjQuery Migrateを提供<br />
・一時しのぎなので新しいプロジェクトには採用しないように</p>
<p>という2.0へ向けてのお試しのような内容のようだ。</p>
<p>例として記載があった新セレクタのサンプル。</p>
<div>


		<div id="crayon-64953fd581fd0805814648" 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;!DOCTYPE&gt;
&lt;html&gt;
&lt;head&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt;
&lt;script src=" http://code.jquery.com/jquery-1.9.0b1.js "&gt;&lt;/script&gt; 
&lt;script src=" http://code.jquery.com/jquery-migrate-1.0.0b1.js "&gt;&lt;/script&gt; 
&lt;title&gt;&lt;/title&gt;
&lt;style&gt;
div
{
	background-color: red;
	width: 100%;
	height: 200px;
}
&lt;/style&gt;
&lt;script&gt;
$( document ).ready(function(e)
{
	var dm = $( 'div' ).css( [ 'width', 'height', 'backgroundColor' ] );
	alert(dm.width);
});
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div class="wrap"&gt;
    &lt;div&gt;&lt;/div&gt;
&lt;/body&gt;
&lt;/html&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-64953fd581fd0805814648-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd581fd0805814648-2">2</div><div class="crayon-num" data-line="crayon-64953fd581fd0805814648-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd581fd0805814648-4">4</div><div class="crayon-num" data-line="crayon-64953fd581fd0805814648-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd581fd0805814648-6">6</div><div class="crayon-num" data-line="crayon-64953fd581fd0805814648-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd581fd0805814648-8">8</div><div class="crayon-num" data-line="crayon-64953fd581fd0805814648-9">9</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd581fd0805814648-10">10</div><div class="crayon-num" data-line="crayon-64953fd581fd0805814648-11">11</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd581fd0805814648-12">12</div><div class="crayon-num" data-line="crayon-64953fd581fd0805814648-13">13</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd581fd0805814648-14">14</div><div class="crayon-num" data-line="crayon-64953fd581fd0805814648-15">15</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd581fd0805814648-16">16</div><div class="crayon-num" data-line="crayon-64953fd581fd0805814648-17">17</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd581fd0805814648-18">18</div><div class="crayon-num" data-line="crayon-64953fd581fd0805814648-19">19</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd581fd0805814648-20">20</div><div class="crayon-num" data-line="crayon-64953fd581fd0805814648-21">21</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd581fd0805814648-22">22</div><div class="crayon-num" data-line="crayon-64953fd581fd0805814648-23">23</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd581fd0805814648-24">24</div><div class="crayon-num" data-line="crayon-64953fd581fd0805814648-25">25</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd581fd0805814648-26">26</div><div class="crayon-num" data-line="crayon-64953fd581fd0805814648-27">27</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd581fd0805814648-28">28</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-64953fd581fd0805814648-1"><span class="crayon-n">&lt;!DOCTYPE&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd581fd0805814648-2"><span class="crayon-r ">&lt;html&gt;</span></div><div class="crayon-line" id="crayon-64953fd581fd0805814648-3"><span class="crayon-r ">&lt;head&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd581fd0805814648-4"><span class="crayon-r ">&lt;meta </span><span class="crayon-e ">http-equiv</span>=<span class="crayon-s ">"Content-Type"</span><span class="crayon-h"> </span><span class="crayon-e ">content</span>=<span class="crayon-s ">"text/html; charset=utf-8"</span><span class="crayon-r ">&gt;</span></div><div class="crayon-line" id="crayon-64953fd581fd0805814648-5"><span class="crayon-i "><span class="crayon-ta">&lt;script </span><span class="crayon-e ">src</span>=<span class="crayon-s">" http://code.jquery.com/jquery-1.9.0b1.js "</span><span class="crayon-h">&gt;</span><span class="crayon-ta">&lt;/script&gt;</span> </span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd581fd0805814648-6"><span class="crayon-i "><span class="crayon-ta">&lt;script </span><span class="crayon-e ">src</span>=<span class="crayon-s">" http://code.jquery.com/jquery-migrate-1.0.0b1.js "</span><span class="crayon-h">&gt;</span><span class="crayon-ta">&lt;/script&gt;</span> </span></div><div class="crayon-line" id="crayon-64953fd581fd0805814648-7"><span class="crayon-r ">&lt;title&gt;</span><span class="crayon-r ">&lt;/title&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd581fd0805814648-8"><span class="crayon-i "><span class="crayon-ta">&lt;style&gt;</span></div><div class="crayon-line" id="crayon-64953fd581fd0805814648-9"><span class="crayon-k ">div</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd581fd0805814648-10"><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-64953fd581fd0805814648-11"><span class="crayon-h">	</span><span class="crayon-e ">background-color</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">red</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd581fd0805814648-12"><span class="crayon-h">	</span><span class="crayon-e ">width</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">100%</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-64953fd581fd0805814648-13"><span class="crayon-h">	</span><span class="crayon-e ">height</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">200px</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd581fd0805814648-14"><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-64953fd581fd0805814648-15"><span class="crayon-ta">&lt;/style&gt;</span></span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd581fd0805814648-16"><span class="crayon-i "><span class="crayon-ta">&lt;script&gt;</span></div><div class="crayon-line" id="crayon-64953fd581fd0805814648-17"><span class="crayon-sy">$</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-r">document</span><span class="crayon-h"> </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-i">e</span><span class="crayon-sy">)</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd581fd0805814648-18"><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-64953fd581fd0805814648-19"><span class="crayon-h">	</span><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-i">dm</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-sy">$</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-s">'div'</span><span class="crayon-h"> </span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-e">css</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-sy">[</span><span class="crayon-h"> </span><span class="crayon-s">'width'</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-s">'height'</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-s">'backgroundColor'</span><span class="crayon-h"> </span><span class="crayon-sy">]</span><span class="crayon-h"> </span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd581fd0805814648-20"><span class="crayon-h">	</span><span class="crayon-r">alert</span><span class="crayon-sy">(</span><span class="crayon-i">dm</span><span class="crayon-sy">.</span><span class="crayon-i">width</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-64953fd581fd0805814648-21"><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-64953fd581fd0805814648-22"><span class="crayon-ta">&lt;/script&gt;</span></span></div><div class="crayon-line" id="crayon-64953fd581fd0805814648-23"><span class="crayon-r ">&lt;/head&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd581fd0805814648-24"><span class="crayon-r ">&lt;body&gt;</span></div><div class="crayon-line" id="crayon-64953fd581fd0805814648-25"><span class="crayon-r ">&lt;div </span><span class="crayon-e ">class</span>=<span class="crayon-s ">"wrap"</span><span class="crayon-r ">&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd581fd0805814648-26"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r ">&lt;div&gt;</span><span class="crayon-r ">&lt;/div&gt;</span></div><div class="crayon-line" id="crayon-64953fd581fd0805814648-27"><span class="crayon-r ">&lt;/body&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd581fd0805814648-28"><span class="crayon-r ">&lt;/html&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<br />
cssプロパティを複数取得して連想配列で返してくれるようだ。</p>
<p>&nbsp;</p>
</div>
<div></div>

JQUERY 1.9 BETA 1

<p>最近の若い人達では、縦書ではなく、横書が主になっているようで、<br />
年賀状や、結婚式の受付の記帳なども横書きになっていたりするとか。。。<br />
なんでも縦書だとバランスが取れなくて、バラバラになってしまうです。</p>
<p>そんなこんなで、縦書の美しさを普及するために(特に縦書が好きってわけではないですがww)、<br />
今回は、テキストを自動的に縦書にしてくれるjavascriptのプラグインを紹介したいと思います。</p>
<p>その名も<strong>「竹取.js」</strong>というものです。</p>
<p>プラグインのサイトは以下のURLです。</p>
<p><a href="http://taketori.org/js.html" target="_blank">竹取 JS</a></p>
<p>簡単なデモサイトを作ってみましたので、<br />
よろしければご覧ください。</p>
<p><a href="/demo/abe/22/" class="demo" target="_blank">DEMO</a><br />
(chromeでご覧ください。)</p>
<p>使い方はシンプルで簡単なんですが、<br />
レイアウトが難しい感じでした。<br />
横と縦の捉え方がこんがらがって混乱しながら作っていました・・・笑</p>
<h2>竹取.jsの使い方</h3>
<p>まずは、ダウンロードしたファイルを読み込みます。</p>
<p></p>

		<div id="crayon-64953fd581da7044631577" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover wrap" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 18px !important;">
		
			<div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><span class="crayon-title"></span>
			<div class="crayon-tools" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div><span class="crayon-language">XHTML</span></div></div>
			<div class="crayon-info" style="min-height: 19.5px !important; line-height: 19.5px !important;"></div>
			<div class="crayon-plain-wrap"><textarea  class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 13px !important; line-height: 18px !important;">
&lt;link rel="stylesheet" href="css/taketori.css" &gt;
&lt;script src="js/taketori.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-64953fd581da7044631577-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd581da7044631577-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-64953fd581da7044631577-1"><span class="crayon-r ">&lt;link </span><span class="crayon-e ">rel</span>=<span class="crayon-s ">"stylesheet"</span><span class="crayon-h"> </span><span class="crayon-e ">href</span>=<span class="crayon-s ">"css/taketori.css"</span><span class="crayon-r "> &gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd581da7044631577-2"><span class="crayon-ta">&lt;script </span><span class="crayon-e ">src</span>=<span class="crayon-s">"js/taketori.js"</span><span class="crayon-h">&gt;</span><span class="crayon-ta">&lt;/script&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p> </p>
<p>あとは、</p>

		<div id="crayon-64953fd581dac313463174" 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;">
&lt;script type="text/javascript"&gt;
//&lt;![CDATA[
//(new Taketori()).set({設定項目:'値',設定項目:'値'}).element('縦書き対象要素ID').toVertical(画面の読み込み待ちをするかどうか);
//DEMOは以下のように設定しました
(new Taketori()).set({fontFamily:'serif',height:'auto'}).element('msg','nav','logo').toVertical();
//]]&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-64953fd581dac313463174-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd581dac313463174-2">2</div><div class="crayon-num" data-line="crayon-64953fd581dac313463174-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd581dac313463174-4">4</div><div class="crayon-num" data-line="crayon-64953fd581dac313463174-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd581dac313463174-6">6</div><div class="crayon-num" data-line="crayon-64953fd581dac313463174-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-64953fd581dac313463174-1"><span class="crayon-ta">&lt;script </span><span class="crayon-e ">type</span>=<span class="crayon-s">"text/javascript"</span><span class="crayon-h">&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd581dac313463174-2"><span class="crayon-c">//&lt;![CDATA[</span></div><div class="crayon-line" id="crayon-64953fd581dac313463174-3"><span class="crayon-c">//(new Taketori()).set({設定項目:'値',設定項目:'値'}).element('縦書き対象要素ID').toVertical(画面の読み込み待ちをするかどうか);</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd581dac313463174-4"><span class="crayon-c">//DEMOは以下のように設定しました</span></div><div class="crayon-line" id="crayon-64953fd581dac313463174-5"><span class="crayon-sy">(</span><span class="crayon-r">new</span><span class="crayon-h"> </span><span class="crayon-e">Taketori</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-e">set</span><span class="crayon-sy">(</span><span class="crayon-sy">{</span><span class="crayon-i">fontFamily</span><span class="crayon-sy">:</span><span class="crayon-s">'serif'</span><span class="crayon-sy">,</span><span class="crayon-i">height</span><span class="crayon-sy">:</span><span class="crayon-s">'auto'</span><span class="crayon-sy">}</span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-e">element</span><span class="crayon-sy">(</span><span class="crayon-s">'msg'</span><span class="crayon-sy">,</span><span class="crayon-s">'nav'</span><span class="crayon-sy">,</span><span class="crayon-s">'logo'</span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-e">toVertical</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-64953fd581dac313463174-6"><span class="crayon-c">//]]&gt;</span></div><div class="crayon-line" id="crayon-64953fd581dac313463174-7"><span class="crayon-ta">&lt;/script&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p> </p>
<p>とすればOK!</p>
<p>エレメントを複数指定できるようです。<br />
設定がいろいろありますが、全部把握できておりません。。。</p>
<p>設定は、サイトをご覧下さい。</p>
<p><a href="http://taketori.org/js.html" target="_blank">竹取 JS</a></p>
<p>縦と横との切り替えを簡単に設定できたりするようです。</p>
<p>縦書は和風のようなデザインに適していると思います。<br />
他にも小説のようなテイストにもできますし、<br />
使うシーンはいろいろありそうですね！</p>

テキストを自動的に縦書にしてくれるjavascript

CodeIgniterの基本的な設定

<p>仕事の需要で、Ethnaのフレームワークを使ってみました。</p>
<h2>バージョン</h3>
<p>Ethnaというのは、グリー社が開発したPHPフレームワークの一種で、最終バージョンは2.6のようです。<br />
とは言え、バージョン2.6が出てきたのは2011年の春のようで、もう1年ぐらい更新はしていなくて、開発が止まっているかなと思います。</p>
<p>今回使うのは、バージョン2.3ぐらいで、2007年ごろのものです。</p>
<h2>Ethnaの特徴</h3>
<p>自分がSymfonyもCakeもの経験者であり、Ethnaを見て、「こういう使い方もありえるか」と思いました。</p>
<p>下記は、自分が思ったEthnaの特徴を書きます。<br />
１、MVCとはいえ、わざわざview表示（smartyに渡る）のため処理を作っていて、Controller（action）との分けが曖昧になっている<br />
２、routingの設定がない。そのかわりに、urlに「acton_xxx」という名前のパラメーターがあって、その「xxx」は処理を担当するactionの名前になり、なんか微妙に頼れない感じ。<br />
３、actionごと、action_formというものがあって、urlで使えるパラメーターの名前と種類（数字や文字列など）の定義をしている。これはなかなか興味深い！<br />
４、Model側では、DBとのORM連携をしていなくて、直接SQL文を発行してDB操作をしているらしい。</p>
<h2>まとめ</h3>
<p>最近フレームワーク（symfonyなど）の進化が激しくて、いろいろ開発に便利な機能（考え）も取り込まれて、よいものになっています。<br />
それらと比べると、Ethnaはもう時代遅れになっているかもしりません。</p>


Ethnaを使ってみました

<div>何か参考になる記事を見つけたのでメモと、</div>
<div>今後のために今ECソリューションの営業をしていて思ったことのまとめ。</div>
<div><a href="http://web-tan.forum.impressrd.jp/e/2012/11/16/14171" target="_blank">http://web-tan.forum.impressrd.jp/e/2012/11/16/14171</a></div>
<div></div>
<h2>リニューアルを検討している人の要望</h3>
<h3>1. 運用方法を変更したい</h4>
<div>・受注〜管理のフローを最適化したい</div>
<div>・新たに倉庫会社と連携したい</div>
<div>・コールセンターで注文を受けるようにしたい</div>
<p>&nbsp;</p>
<div>サイトの成長や扱う商品の変化など、</div>
<div>フェーズによって現行システムに不満を持ち出すケースが多い模様。</div>
<div></div>
<div>
<h3>2. 機能を拡張したい</h4>
<div>・メルマガ、ステップメール</div>
<div>・決済手段を増やしたい</div>
<div>・定期購入、ブログ連携</div>
<p>&nbsp;</p>
<div>初期の売上をとにかく増やすというフェーズを越え</div>
<div>コンバージョン率の向上や多方面のニーズへの対応など</div>
<div>サービスの拡張としての機能拡張が多い模様。</div>
<div></div>
<h3>3. プラットフォーム</h4>
<div>・スマホ、タブレット対応</div>
<div>・Facebookページと連携</div>
</div>
<div>・モールからの脱却</div>
<p>&nbsp;</p>
<div>時代の変化に伴う改修。</div>
<div>ユーザーが集まる、若しくはよりよいサービスを提供するためのニーズ。</div>
<div></div>
<h3>4. 露出を増やしたい</h4>
<div>・LPなど特設ページを増設したい</div>
<div>・複数のアフィリエイトをやりたい</div>
<div>・SEOやアクセス解析</div>
<p>&nbsp;</p>
<div>アクセスやコンバージョンを高めたいというニーズ。</div>
<div>次のステップへサイトを成長させるための施策としてリニューアルを検討するケースが多い模様。</div>
<div></div>
<h2>現状システムへの不満</h3>
<div>1. 機能の拡張ができない、運用が合わない</div>
<div>2. 広告、アフィリエイトとの連携がとれない</div>
<div>3. デザインの縛り、テンプレートの拡張ができない</div>
<p>&nbsp;</p>
<div>ASPやオープンソースを使っているECサイトに多いが</div>
<div>やはりやりたいことが出来ないという悩み。</div>
<div>独自システム構築済みのECサイトでは、コールセンターや物流センターの新設や</div>
<div>新たなプラットフォームへの対応きっかけでリニューアルを検討する模様。</div>
<div></div>
<h2>リニューアル後に期待すること</h3>
<div>1. 運用効率の向上 = コスト削減</div>
<div>2. アクセス数、広告効果向上 = 売上アップ</div>
<div>3. ブランディング</div>
<p>&nbsp;</p>
<div>当たり前だが、システムのリプレイスはEC事業者にとってコストでしかない。</div>
<div>コストに見合う成果 = 運用コストダウン、売上の向上が伴わなければする意味が無い。</div>
<div>逆に、そこら辺を可視化して説明すれば、大抵は納得してくれる。</div>
<div>例えば、スマホ最適化するとスマホ経由の売上が倍になるとか、</div>
<div>Facebookページと連携すると10%アクセス伸びるとか。</div>
<div></div>
<h2>越境ECについて</h3>
<div>正直ニーズとしてはほとんどない。</div>
<div>あったとしても淘宝網などの海外のモール系サービスへの出店について検討しているくらい。</div>
<div>ただ、ここのニーズは今はまだ無い方が良い。</div>
<div>ここは当社がプラットフォームを創りニーズを掘り起こす！</div>
<div></div>
<h2>まとめ</h3>
<div>冒頭で紹介したサイトの文言を引用すると</div>
<div>「成功しているECサイトは、ベンダーと夫婦のような関係を築いている」</div>
<div>ということ。</div>
<div>技術やプラットフォームは時代と共に変化するもの。</div>
<div>変化に迅速に、且つ上手に対応していくことはとても大事。</div>
<div>ベンダーもこれらの対応がソフトウェアの価値を向上させる。</div>
<div>要はECサイトの成長がベンダーの成長にもつながる関係の構築を作ることが両者にとって一番よいことですね。</div>
<p>&nbsp;</p>
<div>あと、すごく驚いたのが、上記の要望や不満</div>
<div><a href="/launchcart" target="_blank">LaunchCart</a>は全て無料で対応してくれること。</div>
<div>LaunchCart すごい…</div>


ECサイトのリニューアルを検討している人の要望まとめ

<h3>ミャンマーの交通機関</h4>
<p>最近、ミャンマーのビジネスニュースやいろいろな情報を探したり、</p>
<p>まとめたりしています。</p>
<p>今回はミャンマーの交通機関について記述したいと思います。</p>
<p>ミャンマーでは電車よりバスが使われております。<br />
日本の山手線みたいな、都心を回る電車はありますが、<br />
１時間４回ぐらいしか走っていません。</p>
<p>料金は２円ぐらい（２０チャット（２年前））です。<br />
会社から交通費がもらえないため、交通費に余りお金使えない人たちが利用しています。</p>
<p>ミャンマー国民が利用しているバスはだいたい日本の中古車です。</p>
<p>最近は中国や韓国からも輸入されているみたいです。<br />
料金はバスによって違いますが、200チャット（20円）〜700チャット（70円）ぐらいです。<br />
発車する時間が決めておりず、社内に客がいっぱいにならないと、発車しないような感じです。<br />
一つのバス停に何人の客が入らないと発車しないということはドライバーが決めます。<br />
自分がいく目的地は１時間で行けるとしても２時間前ぐらいから出ないと間に合うかどうかは心配です。<br />
ミャンマーのバス停の雰囲気は以下のサイトをご覧ください。</p>
<p><a href="http://www.caplogue.com/archives/7416116.html" target="_blank">http://www.caplogue.com/archives/7416116.html</a></p>
<p>私もミャンマーにいるときは、毎日交通時間が一番嫌に感じていました。</p>
<p>これからはビジネスが発展しつづあり、毎日渋滞に悩む人が増えています。</p>
<p>その問題の対策のために、政府やスーチーさんのグループがロシアの協力でヤンゴンや首都ネイピードーに地下鉄やモノレールの建設計画を立てているみたいです。</p>
<p>この計画が早めに実現できれば、ビジネスが発展につながると思っています。<br />
<a href="http://blogs.yahoo.co.jp/winjapn1789/20922647.html" target="_blank">http://blogs.yahoo.co.jp/winjapn1789/20922647.html</a><br />
<a href="http://blogs.yahoo.co.jp/winjapn1789/22023587.html" target="_blank">http://blogs.yahoo.co.jp/winjapn1789/22023587.html</a></p>


ミャンマーの交通機関

<p>Illustratorにできて、Photoshopにできない表現方法のひとつに、</p>
<p>「グラデーションメッシュ」があります。</p>
<p>グラデーションメッシュを使うと、細かにグラデーションの設定ができるので、</p>
<p>かなり繊細な表現が可能となります。</p>
<p>しかし、このグラデーションメッシュは、使い方に癖があり、複雑な形のものでは思い通りに操作することが難しいため、</p>
<p>なかなか手が出せずにいました。</p>
<p>&nbsp;</p>
<p>そんなときに、<a href="http://www.amazon.co.jp/dp/4861006406" target="_blank">「Illustratorグラデーションメッシュらくらく操作ガイド」</a>という本を見つけました。</p>
<p>こちらの本には、Illustratorのグラデーションメッシュでのソフトウェアの癖を理解したうえで、</p>
<p>それを回避しながら、思い通りにグラデーションメッシュを扱う方法が紹介されていました。</p>
<p>&nbsp;</p>
<p>その中でも、文字の装飾について載っていたので、ご紹介いたします。</p>
<p>&nbsp;</p>
<p>まず、私のこれまで知っていた方法でグラデーションメッシュを文字に適用するとします。</p>
<p>1.グラデーションメッシュを適用するオブジェクトを選択して</p>
<p>2.「オブジェクト」→「グラデーションメッシュを作成」</p>
<p>この方法でグラデーションメッシュを作ると</p>
<p><img decoding="async" alt="" src="/uploads-archive/2012/12/grd_img02.jpg" /></p>
<p>↑こちらのように、メッシュがグチャグチャになってしまい、</p>
<p>この状態のメッシュでグラデーションをかけようとすると、</p>
<p><img decoding="async" alt="" src="/uploads-archive/2012/12/grd_img03.jpg" /></p>
<p>↑このようによくわからないグラデーションになってしまいます。</p>
<p>これではグラデーションメッシュで思い通りに製作することは、到底できません。</p>
<p>これは、単純な形では便利に使えるようになっているIllustratorにおけるグラデーションメッシュの</p>
<p>作成の仕組みによるものだそうです。</p>
<p>&nbsp;</p>
<p>これを回避する方法のひとつとして、本では３つ程方法が紹介されていましたが、</p>
<p>今回は文字のような、既に形が出来上がっているもので、複雑な図形の編集で有効な方法である、</p>
<p>「ダイレクト選択メッシュ法」について、紹介いたします。</p>
<p>&nbsp;</p>
<p>まずは、文字をアウトライン化したものを用意します。</p>
<p>これを、ナイフツールを使い、とめ・はねのような動きのあるところを切り分けていきます。</p>
<p><img decoding="async" alt="" src="/uploads-archive/2012/12/grd_img04.jpg" /></p>
<p>次に、切り分けた、それぞれのオブジェクトの、4隅に当たる4つのアンカーポイントを、</p>
<p>ダイレクト選択ツールを使って選択します。</p>
<p><img decoding="async" alt="" src="/uploads-archive/2012/12/grd_img05.jpg" /></p>
<p>この状態で、「オブジェクト」→「グラデーションメッシュを作成」の手順で、メッシュを作成します。<br />
<img decoding="async" alt="" src="/uploads-archive/2012/12/grd_img06.jpg" /></p>
<p>そうすると、次の画像のように、形に沿ったグラデーションメッシュが出来上がります。</p>
<p><img decoding="async" alt="" src="/uploads-archive/2012/12/grd_img07.jpg" /></p>
<p>これを切り分けたオブジェクトすべてに行うことで、</p>
<p>きれいなグラデーションメッシュが出来上がりました。</p>
<p><img decoding="async" alt="" src="/uploads-archive/2012/12/grd_img08.jpg" /></p>
<p>形に沿ったグラデーションメッシュができるので、</p>
<p>次の画像のように、思い通りにグラデーションをかけることができました。</p>
<p><img decoding="async" alt="" src="/uploads-archive/2012/12/grd_img09.jpg" /></p>
<p>&nbsp;</p>
<p>こちらと似たようなグラデーションを、アウトライン化した文字に、</p>
<p>「効果」→「スタイライズ」→「光彩(内側)」を乗算でかけることでもできますが、</p>
<p>細かな設定はできないので、凝った表現が必要なときは、この方法が表現を広げてくれそうです。</p>
<p><img decoding="async" alt="" src="/uploads-archive/2012/12/grd_img10.jpg" width="100%" /></p>
<p>&nbsp;</p>
<p>ちなみに、グラデーションメッシュは現状のSVG1.1ではサポートされていないため、</p>
<p>Illustratorでグラデーションメッシュを使ったオブジェクトは、jpgやpng等と同じラスターデータに変換されてしまいます。</p>
<p>次世代のSVGである、開発中のSVG2.0ではグラデーションメッシュが採用される予定のようですので、</p>
<p>SVG2.0の普及が待ち遠しいところです。</p>


Illustratorの「グラデーションメッシュ」で、少し凝った文字の装飾

<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>

Company

Our Solutions

Support

News

Blog

Blogブログ

カテゴリーから探す

年別から見る

記事一覧

2013/01/10

2013/01/10

2013/01/09

2013/01/09

2012/12/27

2012/12/20

2012/12/20

2012/12/20

2012/12/20

2012/12/20

2012/12/19

2012/12/19

2012/12/13

2012/12/13

2012/12/13

2012/12/13

2012/12/13

2012/12/12