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


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

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

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


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

多機能なスライダー sly.js

<p>先日ソーシャルメディアマーケティングを得意とする会社のとあるセミナーに参加して来ました。</p>
<p>内容の核心に触れてしまうといけないかもしれないので、具体名は伏せつつ流れを紹介します。</p>
<p>&nbsp;</p>
<p>一般の主婦が年商3,000万円まで駆け上った軌跡を教えて頂きました。</p>
<h2>お店を作ったきっかけ</h3>
<p>旦那さんにプレゼントされたエプロン。</p>
<p>しかし、可愛くなくデザインに不満があった。</p>
<p>なんで可愛いデザインのエプロンがないのだろうと自分で作って販売することを決心。</p>
<h2>店長ブログで認知度を</h3>
<p>まず、この方は、独自サイトでショップを構築する。</p>
<p>独自サイトであれば、モールと違い、お客さんを呼び込む必要がありますので、まず、商品を認知してもらおうと店長ブログを開始</p>
<h2>ブロガーとの交流から自然と口コミが発生</h3>
<p>せっかく良い商品を作っても、埋もれてしまうことは往々にしてあります。</p>
<p>良い商品をしっかりと宣伝してこそ、商品は売れます。</p>
<h2>ソーシャルメディアの時代へ</h3>
<p>言わずもがなの昨今。オリジナル商品こそ、ソーシャルメディアとの相性がいいとのことで。同社のサービスを使いながら効果的に口コミを発生。</p>
<p>年商3,000万円へ。</p>
<h2>まとめ</h3>
<p>オリジナル商品を独自ショップでしっかりとブランディングすることが出来たモデルケースであると考えます。</p>
<p>モールで同様のキーワードで検索を欠けるとブランドものか極端に安いものが検索結果上位に上がってきているようです。</p>
<p>モールという特性上、人気のあるものを少しでも安くお探しのお客様が多いので、オリジナル商品の価値を認識してもらうことが</p>
<p>よに難しいと思います。</p>
<p>そこで、独自ショップという展開を取ったのだと思われますが、良い物をきちんとプロモーションして、認知を経てブランディングに</p>
<p>成功しています。</p>
<p>最初に取り組んだのが店長ブログというのも本質を得ている気がします。Googleの検索エンジンの数年先をよんでいたのでしょうか？</p>
<p>今でこそ、質の良いコンテンツがSEOで重要視されるアルゴリズムになっていますが、数年前は外部リンクが全盛の時代であったと思います。</p>
<p>最初から最後まで戦略がハマっているのが素晴らしいですね。</p>
<p>いろいろ試行錯誤の上、現在の形になって語られているのだろうとは思いますが、弊社でもこのようなモデルケースとなりうるECサイトを支援出来るように取り組んでいきたいと強く思いました。</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>


オリジナル商品はソーシャルメディアを！

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

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

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

<p>css niteのセミナーに初めて参加してきました！</p>
<p><a href="http://cssnite.jp/coedo/vol12/" target="_blank">『CSS Nite @Co-Edo, Vol.12<br />
あると便利！コンセプトシートの重要性と具体的な作り方＆伝え方』</a><br />
講師は、<a href="http://web-d.navigater.info/" target="_blank">Webディレクターズマニュアル</a>の運営者である<br />
中村さん。</p>
<p>僕もよく拝見させていただいています。</p>
<p>ということで、webサイト、webサービスを制作する際に必要な心得というか、<br />
フローを学んで来ました。</p>
<p>この記事では、ディレクターとコンセプトについて、<br />
簡単にかいつまんで説明したいと思います。</p>
<h2>ディレクターの重要性</h3>
<p>&nbsp;</p>
<p style="text-align: center;"><span style="font-size: large;"><strong>「Webディレクターの本来の職域」</strong></span></p>
<p>&nbsp;<br />
<span style="font-size: medium;"><strong>■商談・見積もり作成</strong></span><br />
<span style="font-size: medium;"> <strong> ■スケジュールの管理</strong></span><br />
<span style="font-size: medium;"> <strong> ■制作の運用・進行管理</strong></span><br />
<span style="font-size: medium;"> <strong> ■成果物の品質管理</strong></span><br />
<span style="font-size: medium;"> <strong> ■システムの要件定義</strong></span><br />
<span style="font-size: medium;"> <strong> ■実装のチェック</strong></span></p>
<p>これは、会社によって違うと思いますが、だいたいこのぐらいの領域だと僕も思います。</p>
<p>簡単にいうと、ディレクターは</p>
<p>プロジェクトの<span style="color: #ff0000;"><strong>「中心」</strong></span>にいて、<br />
プロジェクトを<span style="color: #ff0000;"><strong>成功に導く役割</strong></span>を担っているとのことです。</p>
<h2>ディレクターがいないと？</h3>
<p>&nbsp;<br />
<span style="font-size: large;"><strong>「悲劇が生まれる」</strong></span></p>
<p>&nbsp;</p>
<p><span style="font-size: medium;"><strong>■クライアントや担当者の意見に流され延々修正</strong></span><br />
<span style="font-size: medium;"> <strong> ■デザイナー、プログラマーは大変、イライラが募る</strong></span><br />
<span style="font-size: medium;"> <strong> ■だんだんと成果物も悪くなる</strong></span><br />
<span style="font-size: medium;"> <strong> ■半端なままリリース</strong></span><br />
<span style="font-size: medium;"> <strong> ■ユーザーはもちろん集まらない</strong></span><br />
<span style="font-size: medium;"> <strong> ■結果、売上も成果も出ない</strong></span></p>
<p>&nbsp;<br />
&nbsp;</p>
<p>うん、こういうのは経験もあるので、うなづきながら聞いていました。</p>
<p>そしてこんな悲劇が起こらないようにするためには、、、</p>
<p>&nbsp;</p>
<p><span style="font-size: medium;">「ディレクターがサイトの</span><br />
<span style="font-size: medium;"> コンセプトを作成する必要がある」</span></p>
<p>&nbsp;</p>
<p>とのことで、<br />
こんなこともおっしゃっていました。</p>
<p>&nbsp;</p>
<p style="text-align: center;"><span style="font-size: large;"><strong>「コンセプトを作るか</strong></span><br />
<span style="font-size: large;"> <strong> プロジェクトを破綻させるか」</strong></span></p>
<p>&nbsp;</p>
<p>これは極端ではありますが、<br />
このぐらいの気持ちを持ってやっていく必要があるということですね！！</p>
<p>&nbsp;</p>
<h2>コンセプトとは？</h3>
<p>&nbsp;</p>
<p style="text-align: center;"><span style="font-size: large;">「何かしらのサービスや商材を</span><br />
<span style="font-size: large;"> Webを通じてユーザーに届けるための</span><br />
<span style="font-size: large;"> 企画・設計・制作・運用を貫く</span><br />
<span style="font-size: large;"> 大きなテーマのようなもの」</span></p>
<p style="text-align: center;"><span style="font-size: large;">『そのテーマを</span><br />
<span style="color: #ff0000; font-size: large;"> 誰もが覚えられるキャッチーなカタチ</span><br />
<span style="font-size: large;"> にしたもの』</span></p>
<p>&nbsp;</p>
<h3>コンセプトがあると？</h4>
<p>&nbsp;<br />
<strong>1．何のためのコンテンツか？の根拠がハッキリする</strong><br />
<strong> 2．制作チームと「最終的に目指すところ」を共有しやすくなる</strong><br />
<strong> 3．クライアント担当とも目線を同じくできる</strong><br />
<strong> 4．ディレクターが主導権を握りやすくなる</strong><br />
&nbsp;</p>
<h3>もしもプロジェクトにコンセプトが無かったら</h4>
<p>&nbsp;<br />
<strong>・クライアントは「格好いいかどうか？」で判断して</strong><br />
<strong> ・デザイナーは「俺のやりたい事かどうか？」で判断して</strong><br />
<strong> ・プログラマーは「仕様書の通り」にしか作ってくれなくて</strong><br />
<strong> ・ライターは「その場のノリ」で原稿を書いて</strong><br />
&nbsp;<br />
うんうん、つまり、自分の作業を言われたことや自分の勝手な考えの範囲でしかやらなくなるって<br />
ことですね。</p>
<p>何のためにやるのかという目的がわからない、理解していないので、目先のことしか考えられず、<br />
プロジェクトの成功を意識しなくなってしまうわけですね。<br />
というか成功するかなんてどうでもいいのかもしれません。</p>
<p>なので、自発的に、<strong>「ここはこうしたほうがいいんじゃないか？」</strong>という意見や、<br />
<strong>制作物に対するこだわり</strong>なんてものは出て来なくなりますね。</p>
<p>そうなると、いいものなんて出来上がるわけがないですよね。</p>
<p><span style="font-size: large;">ディレクターは、プロジェクトを成功に導くために、</span><br />
<span style="font-size: large;"> 軸となるコンセプトを設定し、メンバーの意識を高め、</span><br />
<span style="font-size: large;"> メンバーが力を発揮できるよう、裏方で汗をかく</span>、ってことでしょうか。</p>
<p>こうすることによって、絶対上手く行く！ってわけではないけれど、<br />
主導権握って進めることができるので、<br />
コンセプトを立てて、提案していきましょう！とのことでした。</p>
<p>今後も参考にさせてもらいます！！</p>


『CSS Nite @Co-Edo, Vol.12 あると便利！コンセプトシートの重要性と具体的な作り方＆伝え方』に参加してきました

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

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

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

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


PHP正規表現

<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/4797363045/sackoh71-22/" target="_blank" ><img decoding="async" src="http://ecx.images-amazon.com/images/I/41XCQ9Ka97L._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/4797363045/sackoh71-22/" target="_blank" >1分間ドラッカー 最高の成果を生み出す77の原則</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;">西村 克己 ソフトバンククリエイティブ 2010-12-18    </div>
<div class="booklink-link" style="margin-top: 5px"><a href="http://www.amazon.co.jp/exec/obidos/ASIN/4797363045/sackoh71-22/" name="booklink" rel="nofollow" target="_blank">Amazon.co.jp で詳細を見る</a></div>
</div>
<div class="booklink-footer" style="clear: left"></div>
</div>
<p>ドラッカーの名言を見開き77個にまとめたもの。<br />
各ページに具体例も添えられていて。常に手元に置いておきたい一冊。</p>
<h2><span style="font-size: 1em;">キーワード</span></h3>
<p>「仕事」「自分」「人」「変化」「学び」「組織」「創造」「意思決定」</p>
<h2> 抜粋</h3>
<ul>
<li>会議の５原則</li>
</ul>
<ol>
<ol>
<li>論争せよ。報告や説明の場にするな。</li>
<li>1対1で立ち向かえ。発言しないなら去れ。</li>
<li>全員発言せよ。発言しないなら去れ。</li>
<li>１時間でやれ。職場の椅子を空けるな。</li>
<li>立ったままでやれ。</li>
</ol>
</ol>
<ul>
<li>意見の適切な<strong>不一致が必要</strong></li>
<li>質の向上なくして成長はない</li>
<li><strong>状況を変える行動をとらない限</strong>り、日常業務に追われ続ける。</li>
<li><strong>廃止しても困らないもの</strong>がいかに多いかは驚くほどである。</li>
<li>神々しか見ていなくとも、完全を求めていかなければならない。</li>
<li>いつでも迎え入れられる準備をしてこその運であり、ツキである。</li>
<li>組織はごく平凡な人間から強みを引き出し、成果をあげる必要がある。
<ol>
<li>人が強みを発揮出来る場所に配属する</li>
<li>人に敬意を払う</li>
<li>人に時間を使う</li>
<li>人に投資する</li>
</ol>
</li>
<li>偉大なソロを集めたオーケストラが最高のオーケストラではない。</li>
<li>モデルチェンジは<strong>売れている時にやれ</strong></li>
<li>成功している時にこそ、<strong>我々の事業は何か</strong>を考える</li>
<li>日々新た</li>
<li>教育は経験や知恵を与えることができません。</li>
<li>知識あるものは常に理解されるように努力する責任がある。</li>
<li>部下は上司を<strong>3日で見抜く</strong>。</li>
<li>イノベーションの成果は、普通の人間が利用出来るものでなければならない。</li>
<li>成功するには最初からトップの座を狙わなければならない。</li>
<li>知識労働者は<strong>意思決定</strong>をしなければならない。</li>
<li>リーダーたることの要件は、リーダーシップを、地位や特権ではなく責任と見ることである。</li>
<li><strong>私はでななく、我々は。</strong></li>
</ul>
<h2>まとめ</h3>
<p>非常に端的にまとまっているので、様々なジャンルの本を読む中で定期的に、このような啓発ジャンルの本を挟み込むことで、モチベーションの維持、自身の振り返りを行うことができるので、今後も実践していこうと思います。</p>
<p>&nbsp;</p>
<p>&nbsp;</p>


1分間ドラッカー

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


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

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

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

<p>ECサイトを作っており、複数の店舗がある場合など</p>
<p>DBに緯度経度の情報を持たなければいけない場合が多く、手間削減のため作ってみた。</p>
<p>&nbsp;</p>
<p><a class="demo" href="/demo/hoshino/38/">デモ</a></p>
<p>&nbsp;</p>
<p>Google Maps API v3を使用。</p>
<p>http://maps.google.com/maps/api/js?sensor=false&amp;region=JP</p>
<p>を読み込み、</p>
<p>google.maps.Geocoder()</p>
<p>をnewしてインスタンス化する。</p>
<p>その後インスタンスのgeocodeメソッドを、引数に住所などの情報、戻り関数の順に入れて呼び出す。</p>
<p>&nbsp;</p>
<p>戻り関数には緯度経度情報とステータスが返ってくる。</p>
<p>&nbsp;</p>
<p>詳しくはこちら</p>
<p><a href="https://developers.google.com/maps/documentation/javascript/geocoding?hl=ja" target="_blank">https://developers.google.com/maps/documentation/javascript/geocoding?hl=ja</a></p>
<p>&nbsp;</p>
<p>実際はこのような処理。</p>
<p>&nbsp;</p>

		<div id="crayon-64953fd58a156804812474" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover wrap" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 18px !important;">
		
			<div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><span class="crayon-title"></span>
			<div class="crayon-tools" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div><span class="crayon-language">JavaScript</span></div></div>
			<div class="crayon-info" style="min-height: 19.5px !important; line-height: 19.5px !important;"></div>
			<div class="crayon-plain-wrap"><textarea  class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 13px !important; line-height: 18px !important;">
function getCode()
{
	var geocoder = new google.maps.Geocoder();
	geocoder.geocode(
	{
		address: "東京都新宿区高田馬場1-25-32"
	},
	function( data, status )
	{
		data[0].geometry.location.lat(); // 緯度
		data[0].geometry.location.lng(); // 経度
	});
}</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 13px !important; line-height: 18px !important;"><div class="crayon-num" data-line="crayon-64953fd58a156804812474-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd58a156804812474-2">2</div><div class="crayon-num" data-line="crayon-64953fd58a156804812474-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd58a156804812474-4">4</div><div class="crayon-num" data-line="crayon-64953fd58a156804812474-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd58a156804812474-6">6</div><div class="crayon-num" data-line="crayon-64953fd58a156804812474-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd58a156804812474-8">8</div><div class="crayon-num" data-line="crayon-64953fd58a156804812474-9">9</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd58a156804812474-10">10</div><div class="crayon-num" data-line="crayon-64953fd58a156804812474-11">11</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd58a156804812474-12">12</div><div class="crayon-num" data-line="crayon-64953fd58a156804812474-13">13</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 13px !important; line-height: 18px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-64953fd58a156804812474-1"><span class="crayon-t">function</span><span class="crayon-h"> </span><span class="crayon-e">getCode</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd58a156804812474-2"><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-64953fd58a156804812474-3"><span class="crayon-h">	</span><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-i">geocoder</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-r">new</span><span class="crayon-h"> </span><span class="crayon-i">google</span><span class="crayon-sy">.</span><span class="crayon-i">maps</span><span class="crayon-sy">.</span><span class="crayon-e">Geocoder</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd58a156804812474-4"><span class="crayon-h">	</span><span class="crayon-i">geocoder</span><span class="crayon-sy">.</span><span class="crayon-e">geocode</span><span class="crayon-sy">(</span></div><div class="crayon-line" id="crayon-64953fd58a156804812474-5"><span class="crayon-h">	</span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd58a156804812474-6"><span class="crayon-h">		</span><span class="crayon-i">address</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-s">"東京都新宿区高田馬場1-25-32"</span></div><div class="crayon-line" id="crayon-64953fd58a156804812474-7"><span class="crayon-h">	</span><span class="crayon-sy">}</span><span class="crayon-sy">,</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd58a156804812474-8"><span class="crayon-h">	</span><span class="crayon-t">function</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-i">data</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-r">status</span><span class="crayon-h"> </span><span class="crayon-sy">)</span></div><div class="crayon-line" id="crayon-64953fd58a156804812474-9"><span class="crayon-h">	</span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd58a156804812474-10"><span class="crayon-h">		</span><span class="crayon-i">data</span><span class="crayon-sy">[</span><span class="crayon-cn">0</span><span class="crayon-sy">]</span><span class="crayon-sy">.</span><span class="crayon-i">geometry</span><span class="crayon-sy">.</span><span class="crayon-i">location</span><span class="crayon-sy">.</span><span class="crayon-e">lat</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span><span class="crayon-h"> </span><span class="crayon-c">// 緯度</span></div><div class="crayon-line" id="crayon-64953fd58a156804812474-11"><span class="crayon-h">		</span><span class="crayon-i">data</span><span class="crayon-sy">[</span><span class="crayon-cn">0</span><span class="crayon-sy">]</span><span class="crayon-sy">.</span><span class="crayon-i">geometry</span><span class="crayon-sy">.</span><span class="crayon-i">location</span><span class="crayon-sy">.</span><span class="crayon-e">lng</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span><span class="crayon-h"> </span><span class="crayon-c">// 経度</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd58a156804812474-12"><span class="crayon-h">	</span><span class="crayon-sy">}</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-64953fd58a156804812474-13"><span class="crayon-sy">}</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>&nbsp;</p>

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

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


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

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


Company

Our Solutions

Support

News

Blog

Blogブログ

カテゴリーから探す

年別から見る

記事一覧

2013/06/13

2013/06/12

2013/06/06

2013/06/06

2013/06/06

2013/06/06

2013/06/05

2013/06/05

2013/05/30

2013/05/30

2013/05/30

2013/05/30

2013/05/29

2013/05/29

2013/05/23

2013/05/23

2013/05/23

2013/05/22