<p>Sometimes, you&#8217;re setting up your web server(Apache, Nginx etc) in your local computer. It means your web server is running locally and outside world can&#8217;t access to it, other computer in same intranet can access your IP though.</p>
<p>Let&#8217;s say, you have developed a web project in your local. You haven&#8217;t uploaded projects files and folders to remote hosting server. At that time, your client wanna check the project&#8217;s progress at once.</p>
<p>No need to worry in such case. You can immediately setup a localtunnel that can be accessed by outside world with a URL link.</p>
<p>So simple steps you need to do:</p>
<h2>Step 1: Download ngrok</h3>
<p style="padding-left: 30px;">https://ngrok.com/download</p>
<h2>Step 2: Unzip it</h3>
<p style="padding-left: 30px;"><code>$ unzip /path/to/ngrok.zip</code></p>
<h2>Step 3: Run it! (in terminal)</h3>
<p style="padding-left: 30px;"><code>$ ./ngrok -help</code> [if you wanna check how does it work]</p>
<p style="padding-left: 30px;">$ ./ngrok <code>80</code> [eg; local web server is running in port <code>80</code>]</p>
<p>Sample command line output:</p>

		<div id="crayon-64953fd59721c252203341" 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;">
ngrok

Tunnel Status               online
Version                     1.3/1.3
Forwarding                  http://3a4bfceb.ngrok.com -&amp;gt; 127.0.0.1:80
Forwarding                  https://3a4bfceb.ngrok.com -&amp;gt; 127.0.0.1:80
Web Interface               http://127.0.0.1:4040
# Conn                      0
Avg Conn Time               0.00ms</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-64953fd59721c252203341-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd59721c252203341-2">2</div><div class="crayon-num" data-line="crayon-64953fd59721c252203341-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd59721c252203341-4">4</div><div class="crayon-num" data-line="crayon-64953fd59721c252203341-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd59721c252203341-6">6</div><div class="crayon-num" data-line="crayon-64953fd59721c252203341-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd59721c252203341-8">8</div><div class="crayon-num" data-line="crayon-64953fd59721c252203341-9">9</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 13px !important; line-height: 18px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-64953fd59721c252203341-1"><span class="crayon-e">ngrok</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd59721c252203341-2">&nbsp;</div><div class="crayon-line" id="crayon-64953fd59721c252203341-3"><span class="crayon-e">Tunnel </span><span class="crayon-e">Status&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span><span class="crayon-e">online</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd59721c252203341-4"><span class="crayon-i">Version</span><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span><span class="crayon-cn">1.3</span>/<span class="crayon-cn">1.3</span></div><div class="crayon-line" id="crayon-64953fd59721c252203341-5"><span class="crayon-e">Forwarding&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-i">http</span><span class="crayon-sy">:</span><span class="crayon-c">//3a4bfceb.ngrok.com -&amp;gt; 127.0.0.1:80</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd59721c252203341-6"><span class="crayon-e">Forwarding&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-i">https</span><span class="crayon-sy">:</span><span class="crayon-c">//3a4bfceb.ngrok.com -&amp;gt; 127.0.0.1:80</span></div><div class="crayon-line" id="crayon-64953fd59721c252203341-7"><span class="crayon-e">Web </span><span class="crayon-t">Interface</span><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span><span class="crayon-i">http</span><span class="crayon-sy">:</span><span class="crayon-c">//127.0.0.1:4040</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd59721c252203341-8"><span class="crayon-p"># Conn&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;0</span></div><div class="crayon-line" id="crayon-64953fd59721c252203341-9"><span class="crayon-e">Avg </span><span class="crayon-e">Conn </span><span class="crayon-i">Time</span><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span><span class="crayon-cn">0.00ms</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>Local running web server: http://127.0.0.1:80</p>
<p>Share this URL to client: <code>http://3a4bfceb.ngrok.com</code></p>
<p>Web traffic checking: http://127.0.0.1:4040</p>
<p><img decoding="async" alt="web-interface-checking-point" src="/uploads-archive/2014/01/inspect.png" /></p>
<p><span style="font-size: small;">[Ref img: from</span> https://ngrok.com/usage]</p>
<h2>Requiring passwords to access your tunnels</h3>
<p>By default, ngrok tunnels do not require any username or password to access them. This means anyone who knows or guesses the URL or your tunnel can make requests to it. You can secure your tunnels with a username and password by specifying the <code>-httpauth</code> option when creating your tunnel. This will force HTTP basic authentication on all incoming requests to your tunnels and require that the credentials match those you specify on the command line.</p>

		<div id="crayon-64953fd597220542547685" 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;">
$ ngrok -httpauth="username:12345" 80</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-64953fd597220542547685-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-64953fd597220542547685-1"><span class="crayon-sy">$</span><span class="crayon-h"> </span><span class="crayon-i">ngrok</span><span class="crayon-h"> </span>-<span class="crayon-i">httpauth</span>=<span class="crayon-s">"username:12345"</span><span class="crayon-h"> </span><span class="crayon-cn">80</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>If you developer guy wanna quit running instance after checking the developed project by client, you just need to use simple command in terminal: [ Ctrl+C ]<br />
Outside world can not be available to access your shared link: <code>http://3a4bfceb.ngrok.com</code> anymore.</p>
<p>In next time, you will run ./ngrok 80 in terminal and you will get another shared link: eg; http://xxxxx.ngrok.com. Just send that new link to client or others else you want to send again.</p>
<p>Enjoy!!!</p>

Exposing your local web server to the Internet

<p>PCで画像をクリックしてポップアップウィンドウが出てくるhtmlですが、<br />
スマートフォンだとスクリーンが狭いから、普通にページの下部（上部）に行くつもりですが、<br />
画像をタッチしたら、ポップアップウィンドウが出てきて困ったことがあります。</p>
<p>これは、jqueryのtouchstartイベントを使うではなく、<br />
touchstartからtouchmoveイベントがあるかをチェックする工夫で解決できます。</p>
<p></p>

		<div id="crayon-64953fd59704e336696693" 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()
{
	$( 'div' ).on(
	{
		'touchstart': function() {
			this.isTouch = true;
		},
		'touchmove': function() {
			this.isTouch = false;
		},
		'touchend': function() {
			if(this.isTouch == true){
				// popupイベントを発生させる
			}
		}
	});
});</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-64953fd59704e336696693-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd59704e336696693-2">2</div><div class="crayon-num" data-line="crayon-64953fd59704e336696693-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd59704e336696693-4">4</div><div class="crayon-num" data-line="crayon-64953fd59704e336696693-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd59704e336696693-6">6</div><div class="crayon-num" data-line="crayon-64953fd59704e336696693-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd59704e336696693-8">8</div><div class="crayon-num" data-line="crayon-64953fd59704e336696693-9">9</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd59704e336696693-10">10</div><div class="crayon-num" data-line="crayon-64953fd59704e336696693-11">11</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd59704e336696693-12">12</div><div class="crayon-num" data-line="crayon-64953fd59704e336696693-13">13</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd59704e336696693-14">14</div><div class="crayon-num" data-line="crayon-64953fd59704e336696693-15">15</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd59704e336696693-16">16</div><div class="crayon-num" data-line="crayon-64953fd59704e336696693-17">17</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-64953fd59704e336696693-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></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd59704e336696693-2"><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-64953fd59704e336696693-3"><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">on</span><span class="crayon-sy">(</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd59704e336696693-4"><span class="crayon-h">	</span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-64953fd59704e336696693-5"><span class="crayon-h">		</span><span class="crayon-s">'touchstart'</span><span class="crayon-sy">:</span><span class="crayon-h"> </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-64953fd59704e336696693-6"><span class="crayon-h">			</span><span class="crayon-r">this</span><span class="crayon-sy">.</span><span class="crayon-i">isTouch</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-t">true</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-64953fd59704e336696693-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-64953fd59704e336696693-8"><span class="crayon-h">		</span><span class="crayon-s">'touchmove'</span><span class="crayon-sy">:</span><span class="crayon-h"> </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-64953fd59704e336696693-9"><span class="crayon-h">			</span><span class="crayon-r">this</span><span class="crayon-sy">.</span><span class="crayon-i">isTouch</span><span class="crayon-h"> </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-64953fd59704e336696693-10"><span class="crayon-h">		</span><span class="crayon-sy">}</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-64953fd59704e336696693-11"><span class="crayon-h">		</span><span class="crayon-s">'touchend'</span><span class="crayon-sy">:</span><span class="crayon-h"> </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-64953fd59704e336696693-12"><span class="crayon-h">			</span><span class="crayon-st">if</span><span class="crayon-sy">(</span><span class="crayon-r">this</span><span class="crayon-sy">.</span><span class="crayon-i">isTouch</span><span class="crayon-h"> </span>==<span class="crayon-h"> </span><span class="crayon-t">true</span><span class="crayon-sy">)</span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-64953fd59704e336696693-13"><span class="crayon-h">				</span><span class="crayon-c">// popupイベントを発生させる</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd59704e336696693-14"><span class="crayon-h">			</span><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-64953fd59704e336696693-15"><span class="crayon-h">		</span><span class="crayon-sy">}</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd59704e336696693-16"><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-64953fd59704e336696693-17"><span class="crayon-sy">}</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p> </p>

スマートフォンでのタッチイベントと移動を区別する方法

<p>金融系などの固めのデザインを必要とするサイトでは、<br />
今流行っているデザインを使いづらく、<br />
どうしても２〜３年前に流行ったデザインなど、時代遅れなデザインになりがちです。</p>
<p>この１〜２年でのフラットデザインの流行により<br />
PCメインだった２〜３年前のデザインと、タブレットPCやスマホを重要視した最近のデザインでは使い勝手も変わってくるため、<br />
できれば今の時代にあったデザインにすることが理想的です。</p>
<p>今回は固めの印象を残しつつも、今の時代に合わせたデザインのサイトを探してみましたので、ご紹介いたします。</p>
<p>&nbsp;</p>
<p><a class="link" href="http://www.nakazawa-kenpan.co.jp/" target="_blank">ナカザワ建販株式会社</a></p>
<p><a style="display: block; width: 328px; height: 300px; overflow: hidden;" href="http://www.nakazawa-kenpan.co.jp/" target="_blank"><img decoding="async" loading="lazy" alt="" src="/uploads-archive/2014/01/80c6415fdff63a9c46f01b2e6aec3138.png" width="328" height="428" /></a></p>
<p>フラット系。</p>
<p>スライドアニメーショが凝っていて、横画面いっぱいに広がるメインビジュアルが今っぽいです。</p>
<p><a class="link" href="http://id-credit.com/index_pc.html" target="_blank">ドコモの「iD」</a></p>
<p><a style="display: block; width: 328px; height: 300px; overflow: hidden;" href="http://id-credit.com/index_pc.html" target="_blank"><img decoding="async" loading="lazy" alt="ドコモの「iD」" src="/uploads-archive/2014/01/f560c3cb99651db3bb705064d4939b07.png" width="328" height="663" /></a></p>
<p>グリッド系。</p>
<p>こちらはにぎやかで、固めのサイトから少し外れる気もしましたが、ヒントになりそうでしたので載せました。</p>
<p>グリッド系をイメージしたデザインですが、基本２カラムで構成されていて、安定感があります。各ボックスに小さめのドロップシャドウと小さめの角丸をつけ、落ち着いた印象を与えています。リンクを示す矢印のアイコンや、一番下のよくある質問のQのアイコンは、真円の小さなアイコンで統一されています。</p>
<p>&nbsp;</p>
<p><a class="link" href="http://www.brotherearth.com/ja/" target="_blank">Brother Earth</a></p>
<p><a style="display: block; width: 328px; height: 300px; overflow: hidden;" href="http://www.brotherearth.com/ja/" target="_blank"><img decoding="async" loading="lazy" alt="Brother Earth" src="/uploads-archive/2014/01/Brother-Earth.jpg" width="328" height="226" /></a></p>
<p>フラット系＋グリッド系。</p>
<p>今風のデザインですが、堅実な印象も感じさせてくれます。レスポンシブデザインになっていて、各要素が無駄なく、見やすく配置されています。</p>
<p>&nbsp;</p>
<p><a class="link" href="http://www.rohto.jp/" target="_blank">ROHTO</a></p>
<p><a style="display: block; width: 328px; height: 300px; overflow: hidden;" href="http://www.rohto.jp/" target="_blank"><img decoding="async" loading="lazy" alt="ROHTO" src="/uploads-archive/2014/01/c3b73f751bf87b8c72a4bd25d9f15ab1.png" width="328" height="531" /></a></p>
<p>フラット系。</p>
<p>青色のラインや小さなアイコン、テキストなどで堅実な印象を感じさせて筒も、画面横いっぱいに広がるニュース表示や縦スクロールのスライダーを２つ並べるなど今風の大胆な印象も感じます。商品などが数多く並べられていますが、全体が青と小さめの赤で統一されているので、うるさく感じません。</p>
<p>&nbsp;</p>
<h2>ポイント</h3>
<p>固めのサイトの印象を与えるものとしては、</p>
<ul>
<li>ヘッダートップの横方向のライン</li>
<li>文字とラインのみで構成されたシンプルなメインビジュアル</li>
<li>小さめのフォント・アイコン</li>
</ul>
<p>といったものがあるように思います。</p>
<p>また、グリッド系のデザインにする場合も、全体にグリッド要素を使わずに、</p>
<p>メインコンテンツに添える形で使うと、イメージを崩さないようです。</p>
<p>&nbsp;</p>
<p>固めの印象を与える要素を全体に散りばめつつ、基本的にはフラット系やグリッド系、レスポンシブといった今の時代に合わせた構成のデザインにすることで、</p>
<p>固めでも今風のデザインのサイトにすることができるのではないかと思います。</p>
<p>&nbsp;</p>


今風(2014年はじめ)の少し固めのデザイン

AngularJSのリピートを利用した都道府県のセレクトボックス

<p>そんなタイトルですが、あくまで予防です。</p>
<p>最近wordpressの管理画面への不正アクセスが相次いでるとのことで、<br />
僕も気になり、プラグインを入れてみることにしました。<br />
そのプラグインを紹介したいと思います。</p>
<p>&nbsp;</p>
<h2>crazybone</h3>
<p>&nbsp;</p>
<p>まず、管理画面への不正アクセスを調べるプラグインから入れます。<br />
こちらのcrazyboneというプラグインは、ログインの履歴が取れるというもので、<br />
いつどこから、IPアドレス,エラー時のユーザー名/パスワード等が取れます。<br />
これはアクセスログが取れるということで、クライアントワークにもいいかと思います。</p>
<p>&nbsp;</p>
<p><a class="link" href="http://wordpress.org/plugins/crazy-bone/" target="_blank">Crazy Bone</a></p>
<p>&nbsp;</p>
<p>実際の画面のキャプチャはこちら</p>
<p><img decoding="async" loading="lazy" class="alignnone size-full wp-image-4079" alt="スクリーンショット 2014-01-22 0.00.40" src="/uploads-archive/2014/01/4f5416971a791385cc8de5ff709b893e.png" width="644" height="371" srcset="/uploads-archive/2014/01/4f5416971a791385cc8de5ff709b893e.png 1013w, /uploads-archive/2014/01/4f5416971a791385cc8de5ff709b893e-300x172.png 300w, /uploads-archive/2014/01/4f5416971a791385cc8de5ff709b893e-228x131.png 228w" sizes="(max-width: 644px) 100vw, 644px" /></p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>不正アクセスされてました。</p>
<p>&nbsp;</p>
<p>めちゃめちゃ来てますね・・・韓国から・・・<br />
なんのためにこんなことをするのかわかりませんが怖いですね・・・</p>
<p>&nbsp;</p>
<p>後で紹介するブログにも書かれているのですが、<br />
こちらを出来る限り防ぐ方法は、</p>
<p>&nbsp;</p>
<p><strong>・ユーザー名をadminやドメイン名にしない</strong><br />
<strong> ・パスワードは英数字記号を使い、14文字以上</strong><br />
<strong> ・wordpressを常に最新ver.にする</strong></p>
<p>&nbsp;</p>
<p>です。（あくまでされにくくされるもので、されなくなるわけではないです・・・・）</p>
<p>これは設定の段階での予防ですので、<br />
次に予防のためのプラグインを紹介します。</p>
<p>&nbsp;</p>
<h2>Simple Login Lockdown</h3>
<p>こちらのプラグインは、<br />
同一IPアドレスからのアクセスで連続してログイン失敗すると、<br />
一定期間経過するまでは、そのIPアドレスからのログイン操作をできなくするというものです。</p>
<p>こちらは連続でアタックさせないためのものなので、<br />
気休め程度かもしれませんが、やっておいて損はないと思います。</p>
<p>&nbsp;</p>
<h2>WP Admin Basic Auth</h3>
<p>こちらはログイン、管理画面にbasic認証をかけるというもので、<br />
basic認証のID/パスワードは、現段階ではwordpressで設定したユーザー名/パスワードがそのまま適応されるようです。<br />
同じだと突破されるのでは？と思ってしまいますが、<br />
botではBasic認証を突破しようするものはないようです。</p>
<p>&nbsp;</p>
<p><a class="link" href="http://stocker.jp/diary/wp-admin-basic-auth/" target="_blank">WordPressのログイン・管理画面にBasic認証をかけるプラグイン「WP Admin Basic Auth」を作りました | Stocker.jp / diary</a></p>
<p>&nbsp;</p>
<p>こちらそれぞれ単体だけでなく、複数入れると、<br />
セキュリティもより強固なものになっていくと思います。</p>
<p>&nbsp;</p>
<p>ちなみに、管理画面以外の部分にBasic認証をかけたい場合は、<br />
以下のプラグインがあります。</p>
<p><a class="link" href="http://dogmap.jp/2013/03/09/wp-basic-auth/" target="_blank">WordPress サイトに Basic 認証をかけるプラグイン「WP Basic Auth」 | dogmap.jp</a></p>
<p>&nbsp;</p>
<p>あとは、「<strong>Members Only</strong>」というwordpressにログインしていないとサイトを見れなくするプラグインもあります。</p>
<p>&nbsp;</p>
<p>それにしても不正アクセスは怖いですね。<br />
セキュリティに関しては、慎重になって損なことはないので、<br />
しっかりと対応したいです。</p>


wordpressのサイトを不正アクセスから守るためのプラグイン

<p>RAID（Redundant Arrays of Independent Disks）、いわゆる複数台のハードディスクを組み合わせて1つの仮想ハードディスクとして運用する冗長化技術です。</p>
<h2>RAID 0</h3>
<p>複数台のハードディスクにデータを分散して読み書きし高速化したものです。<br />
冗長化はしていません。<br />
最低必要なドライブ数は2台です。<br />
<a href="/uploads-archive/2014/01/Raid-0.jpg"><img decoding="async" loading="lazy" src="/uploads-archive/2014/01/Raid-0-300x278.jpg" alt="Raid-0" width="300" height="278" class="aligncenter size-medium wp-image-4062" srcset="/uploads-archive/2014/01/Raid-0-300x278.jpg 300w, /uploads-archive/2014/01/Raid-0-1024x950.jpg 1024w, /uploads-archive/2014/01/Raid-0-228x211.jpg 228w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<h2>RAID 1</h3>
<p>複数台のハードディスクに、同時に同じ内容を書き込みます。<br />
最低必要なドライブ数は2台です。<br />
<a href="/uploads-archive/2014/01/Raid1.jpg"><img decoding="async" loading="lazy" src="/uploads-archive/2014/01/Raid1-300x278.jpg" alt="Raid1" width="300" height="278" class="aligncenter size-medium wp-image-4063" srcset="/uploads-archive/2014/01/Raid1-300x278.jpg 300w, /uploads-archive/2014/01/Raid1-1024x950.jpg 1024w, /uploads-archive/2014/01/Raid1-228x211.jpg 228w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<h2>RAID 2~4</h3>
<p>現在あまり使われていないものです。</p>
<h3>RAID 2</h4>
<p><a href="http://e-words.jp/w/E3838FE3839FE383B3E382B0E7ACA6E58FB7.html" target="_blank">ハミング符号</a>によるビット単位で冗長化するものです。<br />
ドライブが専用なもの（ECC）を使います。</p>
<h3>RAID 3</h4>
<p><a href="http://e-words.jp/w/E38391E383AAE38386E382A3E38381E382A7E38383E382AF.html" target="_blank">パリティ</a>によるバイト単位で冗長化するものです。<br />
専用パリティドライブを使います。</p>
<h3>RAID 4</h4>
<p>ブロック単位で冗長化するものです。<br />
専用パリティドライブを使います。</p>
<h2>RAID 5</h3>
<p>水平パリティを使用して複数のハードディスクに誤り訂正符号データと共に分散させて記録ものです。<br />
最低必要なドライブ数は3台です。<br />
<a href="/uploads-archive/2014/01/raid5.gif"><img decoding="async" loading="lazy" src="/uploads-archive/2014/01/raid5-300x230.gif" alt="raid5" width="300" height="230" class="aligncenter size-medium wp-image-4064" srcset="/uploads-archive/2014/01/raid5-300x230.gif 300w, /uploads-archive/2014/01/raid5-228x175.gif 228w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<h2>組み合わせ</h3>
<p>よく使うRAIDの組み合わせを紹介します。</p>
<h3>RAID 10</h4>
<p>RAID 1 + RAID 0の組み合わせです。<br />
最低必要なドライブ数は4台です。<br />
<a href="/uploads-archive/2014/01/80071b36ee2a8011d8f157fc291e2b00.gif"><img decoding="async" loading="lazy" src="/uploads-archive/2014/01/80071b36ee2a8011d8f157fc291e2b00-300x190.gif" alt="raid_1+0_image" width="300" height="190" class="aligncenter size-medium wp-image-4065" srcset="/uploads-archive/2014/01/80071b36ee2a8011d8f157fc291e2b00-300x190.gif 300w, /uploads-archive/2014/01/80071b36ee2a8011d8f157fc291e2b00-228x144.gif 228w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<h3>RAID 50</h4>
<p>RAID 5 + RAID 0の組み合わせです。<br />
最低必要なドライブ数は6台です。<br />
<a href="/uploads-archive/2014/01/raid50.png"><img decoding="async" loading="lazy" src="/uploads-archive/2014/01/raid50-300x193.png" alt="raid50" width="300" height="193" class="aligncenter size-medium wp-image-4066" srcset="/uploads-archive/2014/01/raid50-300x193.png 300w, /uploads-archive/2014/01/raid50-228x147.png 228w, /uploads-archive/2014/01/raid50.png 576w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>


【レイド】RAID入門

2014年要注目のJavaScriptフレームワーク「AngularJS」を使ってフォーム作ってみました

<p>といいましても、<br />
僕の予想ではなく、海外の記事を紹介し、<br />
その中で僕が思ったことを少し述べたいと思います。</p>
<h2>2013年のデザイントレンド</h3>
<p>まずは、2013年のデザイントレンドですが、<br />
以下のサイトになります。</p>
<p><a href="http://www.creativebloq.com/web-design/2013-trends-121310199" target="_blank">The 10 hottest web design trends of 2013 | Web design | Creative Bloq</a></p>
<p>簡単に羅列すると、<br />
以下のようになります。</p>
<p><strong>1.レスポンシブデザイン<br />
2.フラットデザイン<br />
3.固定ヘッダー<br />
4.パララックス<br />
5.無限スクロール<br />
6.Retina対応<br />
7.タイポグラフィーデザイン<br />
8.丸いデザイン要素<br />
9.css3アニメーション<br />
10.大きなボタン</strong></p>
<h2>2014年のデザイントレンド予想</h3>
<p>次は2014年のデザイントレンド予想は以下になります。</p>
<p><a href="http://www.hongkiat.com/blog/web-design-trends-2014/" target="_blank">Web Design: 20 Hottest Trends To Watch Out For In 2014</a></p>
<p>簡単に羅列すると、<br />
以下のようになります。</p>
<p><strong>1.グリッドスタイルレイアウト<br />
2.狡猾な画像ホバーキャプション機能<br />
3.フォームの拡張機能<br />
4.深く考えられたランディングページ<br />
5.HTML5ビデオプレーヤー<br />
6.3Dエフェクト<br />
7.フラットデザインのパーツ・素材<br />
8.個人のポートレート<br />
9.SVG画像・アイコン<br />
10.特異なwebフォント<br />
11.Lazy-Loadingアニメーション<br />
12.カズタマイズされたイメージギャラリー<br />
13.メガナビゲーションメニュー<br />
14.伸びる検索バー<br />
15.特長をアイコン付きで紹介<br />
16.モバイルファースト<br />
17.html5キャンバス<br />
18.webブラウザゲーム<br />
19.素早い会員登録<br />
20.css3アニメーションキーフレーム</strong></p>
<p>以上のような感じですが、</p>
<p>2013年,2014年のトレンドをみて、<br />
僕的には、<br />
<strong>フラットデザイン、<br />
レスポンシブデザイン、<br />
css3のアニメーション(ホバー等)<br />
ランディングページ(パララックス,フラット,アニメーション)</strong></p>
<p>といったものを注目しています。</p>
<p>フラットデザインはいうまでもなく、2013年流行ったデザインであり、<br />
段々と日本語サイトでもフラットデザインを取り入れたサイトも見かけるようになりました。<br />
また、フラットデザインはレスポンシブデザインやランディングページは相性がいいと思うので、<br />
今後しばらくこの流れは継続されていくのではないかと思います。</p>
<p>css3については、段々と利用できるブラウザがメインになりつつある中で、<br />
制作者側からすると、やっといろいろできるなといった感じかと思います。<br />
特にホバーでは、本当に様々なことができるので、<br />
どんなものが出来るかこれから楽しみですね！</p>
<p>個人的には、「錯視」に興味があるのですが、<br />
それがwebサイトで使われるのはまだまだなのかなという気がします。<br />
使い方も限定されちゃうような気もします。。。</p>
<p>おまけに、<br />
上記で注目されいるような素材を提供してくれるサイトを紹介します。</p>
<p><strong>15個のフラットUIの素材キット</strong><br />
<a href="http://graphicdesignjunction.com/2014/01/creative-flat-ui-kits/" target="_blank">Flat UI Kits for Designers | Design | Graphic Design Junction</a></p>
<p><strong>30個のフリーのwebサイトテンプレートPSD素材</strong><br />
<a href="http://www.splashnology.com/article/free-psd-website-templates/11229/" target="_blank">30 Fresh and Free PSD Website Templates | Splashnology.com</a></p>
<p><strong>40個の美しいランディングページ</strong><br />
<a href="http://www.designzzz.com/landing-page-templates/" target="_blank">40 Beautiful Landing Page Templates</a></p>
<p><strong>150以上のフリーのアニメーションもあるSVGアイコン(フラットデザイン)</strong><br />
<a href="http://www.pencilscoop.com/2013/12/150-free-animated-svg-icons/">150+ Free Animated SVG Icons | Pencil Scoop | Design &amp; Creative Blog</a></p>


2013年のデザイントレンドを振り返り、2014年を予想する

<p>今回は、gitを使うチーム作業の流れを紹介したいと思います。</p>
<h2>git flow</h3>
<p>gitを使ってブランチを分けて作業する運用手法です。<br />
feature(機能追加、このブランチは複数ある)、develop、master、release（複数）、hotfix（緊急の修正、masterにマージしたら削除される）という全部５つ種類のブランチを使います。<br />
フローの概要をつかむため、<a href="http://danielkummer.github.io/git-flow-cheatsheet/index.ja_JP.html" target="_blank">ここ</a>をまず見るのをお勧めします。<br />
<a href="http://www.sourcetreeapp.com/" target="_blank">sourceTree</a>の機能を利用すると、簡単に実現できるのようです。</p>
<h3>基本的な流れ</h4>
<ol>
<li>developをベースに開発用ブランチを作成して（これがfeatureにあたる）開発者それぞれが開発をスタート</li>
<li>他の人が開発したコードを自分の開発用ブランチにマージ</li>
<li>開発が終われば編集内容をdevelopにマージして、開発者用ブランチを削除</li>
<li>developブランチをremoteブランチにpush</li>
<li>4を繰り返して開発を進める</li>
<li>開発が終了したらリリースのための作業を始める(developをベースにreleaseブランチを利用、 軽微なバグフィックス、リリース向けのコードや設定の編集)</li>
<li>releaseの編集を終えたら、developとmasterに内容をマージして、releaseブランチを削除</li>
<li>リリースを行う(masterブランチのデプロイ)</li>
<li>リリース後に、緊急バグが発生したらmasterをベースにhotfixブランチを作成し、対応</li>
<li>対応できたらmasterにマージし、hotfixブランチを削除</li>
<li>10を繰り返してバージョン管理を運用する</li>
</ol>
<h3>参考リンク</h4>
<p><a href="http://nvie.com/posts/a-successful-git-branching-model/" target="_blank">git flow cheatsheet（英語）</a><br />
<a href="http://danielkummer.github.io/git-flow-cheatsheet/index.ja_JP.html" target="_blank">git flow cheatsheet（日本語訳）</a><br />
<a href="http://www.slideshare.net/KatokichiSoft/git-flow-16616440" target="_blank">運用事例</a></p>
<h2>github flow</h3>
<p>githubを使う運用手法、ではなく、<br />
github開発チーム内部で使っているgit flowをカスタマイズしたものです。<br />
開発の一時ブランチ（複数）と、masterブランチの2種類のブランチのみ使います。</p>
<h3>git flowの短所</h4>
<ul>
<li>ブランチの切替えはやや複雑</li>
<li>短時間に繰り返すデプロイには不向き</li>
</ul>
<h3>github flowの特徴</h4>
<ul>
<li>masterブランチは常にデプロイ可能な状態にしておく</li>
<li>新しい開発などは、masterからブランチを作成して名前をつけ、そこで行う（一時ブランチ）</li>
<li>作成したブランチにローカルでコミットし、サーバー上の同じ名前のブランチにも定期的に作業内容をpushする</li>
<li>フィードバックや助言が欲しい時、ブランチをマージしてもよいと思ったときは、 pull request を作成する</li>
<li>他の誰かがレビューをして機能にOKを出してくれたら、あなたはコードをmasterへマージすることができる（プレビュー前のマージが発生しない→ルールとして強制）</li>
<li>マージをしてmasterへpushしたら、直ちにデプロイをする</li>
</ul>
<h3>参考リンク</h4>
<p><a href="http://scottchacon.com/2011/08/31/github-flow.html" target="_blank">github flow（英語）</a><br />
<a href="https://gist.github.com/Gab-km/3705015" target="_blank">github flow（日本語訳）</a></p>


git flowとgithub flow

<h2>そもそもどういうサービス？</h3>
<p>githubはリポジトリ（プロジェクトの意味）を公開するためのwebサービスです。<br />
開発チームがgitを使って開発を行うために、必ずしもgithubに登録することがありません。<br />
あくまで公開（リリース）に向けてチーム（もちろん個人も）作業用のものになります。<br />
※公開したくないもの（private repo）でもgithubで管理できますが、有料になります。</p>
<p>今回は、自分の作品を公開するためのgithubを利用した手順を紹介したいと思います。</p>
<h2>githubに登録する前</h3>
<h3>gitがインストールされてるかを確認</h4>
<p>Macなら、ターミナルから </p>
<p></p>

		<div id="crayon-64953fd596976585381177" 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;">
which git</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-64953fd596976585381177-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-64953fd596976585381177-1"><span class="crayon-e">which </span><span class="crayon-i">git</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p> </p>
<p>のコマンドを実行し確認できます。</p>
<h3>gitをインストール</h4>
<p>まだインストールしていない場合は、<a href="http://git-scm.com/" target="_blank">gitの公式サイト</a>からgitをダウンロードしてインストールすることができます。</p>
<h3>gitの初期設定</h4>
<p><a href="/programmer/git%E5%86%8D%E5%85%A5%E9%96%80.html" target="_blank">ここ</a>を参考してください。</p>
<h2>ユーザー登録</h3>
<p><a href="http://github.com" target="_blank">github</a>にアクセスして、ログインしていない状態なら、登録画面がでてくるので、フローに従って登録してください。</p>
<h2>SSH公開鍵登録</h3>
<p>githubにSSH公開鍵を登録しはじめて、SSHでgithubで管理するリポジトリを取得できるようになります。<br />
また作業を進み、ローカルのものをgithubにpushするため、やはりSSH公開鍵の登録が避けられません。</p>
<p>公開鍵の作成とアップロードは、<a href="https://help.github.com/articles/generating-ssh-keys" target="_blank">ここ</a>を参考してください。</p>
<h2>githubでリポジトリを作成</h3>
<p>公開するのはこのリポジトリになります。まずgithubの上で作成しなければなりません。</p>
<p>githubの画面（ログインしている状態で）の右上にから「+」のボタンをクリックして「New Repository」を選択し、容易に新しいリポジトリを作成できます。</p>
<h2>作成したリポジトリをローカルにcloneする</h3>
<p>実際にファイル追加・編集作業に使うのはローカルのリポジトリになります。<br />
cloneするのに、下記コマンドを実行すればいいと思います。</p>
<p></p>

		<div id="crayon-64953fd59697a502712875" 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;">
git clone git@github.com:youraccount/the_new_repo.git</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-64953fd59697a502712875-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-64953fd59697a502712875-1"><span class="crayon-e">git </span><span class="crayon-r">clone</span><span class="crayon-h"> </span><span class="crayon-i">git</span><span class="crayon-sy">@</span><span class="crayon-i">github</span><span class="crayon-sy">.</span><span class="crayon-i">com</span><span class="crayon-sy">:</span><span class="crayon-i">youraccount</span>/<span class="crayon-i">the_new_repo</span><span class="crayon-sy">.</span><span class="crayon-i">git</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p> </p>
<h2>ローカルでの作業を進む</h3>
<p>ファイルを追加し、gitの管理上に置きます。（git add）<br />
ある程度作業が進んだら、ローカルでcommitします。（git commit）</p>
<p>gitのコマンドについて、<a href="/programmer/git%E5%86%8D%E5%85%A5%E9%96%80.html" target="_blank">ここ</a>を参考してください。</p>
<p>または、「git cheatsheet」で検索してみてください。</p>
<h2>githubに、ローカルの作業をpushする</h3>
<p>ローカルの作業をgithubにあげるため、 下記コマンドを実行します。</p>

		<div id="crayon-64953fd59697c718448901" 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;">
git push origin current_branch</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-64953fd59697c718448901-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-64953fd59697c718448901-1"><span class="crayon-e">git </span><span class="crayon-e">push </span><span class="crayon-e">origin </span><span class="crayon-i">current_branch</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p> </p>
<p>※　masterブランチにのpushは、避けたほうが無難かと思います。<br />
※　pushが成功するなら、この時点でもうgithubで見えるようになります（正式なものではなく、あくまで別ブランチ）。</p>
<h2>githubでpull requestを実行</h3>
<p><a href="https://help.github.com/articles/using-pull-requests" target="_blank">pull request</a>は、リポジトリの管理者に、「自分のソースコードを確認して使ってください」というリクエストです。<br />
当たり前なことですが、このリクエストはgithubでしか行えません。<br />
新しいpushがあるとき、「pull request」のボタンが自動的に現れます。</p>
<h2>githubでブランチをmergeする</h3>
<p>自分が管理者なので、「pull request」があったらページに表示されます。<br />
ソースコードの差分が確認できたら、それを最新のバージョンとして取り込むことができます。<br />
「merge pull request」のボタンを押せば、「pull request」されてきたものが正式なもの（masterブランチ）になります。</p>
<h2>おまけ</h3>
<p>Macなら、「github for Mac」という公式アプリがあります。<br />
使い方は<a href="http://kuroigamen.com/48" target="_blank">ここ</a>を参考してください。</p>

【自分の作品を公開するため】github入門

<p>バーコードを生成してくれるというコアなニーズに答えてくれるjQueryプラグインを発見したので</p>
<p>ジェネレーターを作ってみた。</p>
<p><a href="http://barcode-coder.com/en/barcode-jquery-plugin-201.html" target="_blank">http://barcode-coder.com/en/barcode-jquery-plugin-201.html</a></p>
<p>&nbsp;</p>
<p><a class="demo" href="/demo/hoshino/50/">demo</a></p>
<p>&nbsp;</p>
<p>ジャンコード(?)のようなコードとバーコード自体の大きさを入力後</p>
<p>エンコードのようなタイプが幾つかあるようで、選択して出力ボタンを押せばバーコードが生成される。</p>
<p>&nbsp;</p>
<p>基本的には</p>

		<div id="crayon-64953fd5967a5409966642" 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;">
$("#bcTarget").barcode("1234567890128", "ean13",{barWidth:2, barHeight:30});</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-64953fd5967a5409966642-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-64953fd5967a5409966642-1"><span class="crayon-sy">$</span><span class="crayon-sy">(</span><span class="crayon-s">"#bcTarget"</span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-e">barcode</span><span class="crayon-sy">(</span><span class="crayon-s">"1234567890128"</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-s">"ean13"</span><span class="crayon-sy">,</span><span class="crayon-sy">{</span><span class="crayon-i">barWidth</span><span class="crayon-sy">:</span><span class="crayon-cn">2</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-i">barHeight</span><span class="crayon-sy">:</span><span class="crayon-cn">30</span><span class="crayon-sy">}</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>のようなコードを実行している。</p>
<p>&nbsp;</p>
<p>実はある案件でISBNコードからバーコードを生成できないかという依頼があり探していたのだが、</p>
<p>こちらのプラグインはPHPやJAVAのライブラリも公開している。</p>
<p><a href="http://barcode-coder.com/en/barcode-source-list-200.html" target="_blank">http://barcode-coder.com/en/barcode-source-list-200.html</a></p>
<p>&nbsp;</p>

バーコードを生成してくれるjQueryプラグイン

<p>csvファイルをアップロードして、中身のデータをデータベースに挿入する。</p>
<p>しかし、全部のデータを挿入するのではなくて、必要な項目だけを取ってデータベースに入れる。</p>
<p>まず、csvファイルをアップロードして、ある場所にファイルを保存する。</p>
<p>次はデータを配列に入れる。</p>
<p>配列に入っているデータからどこの項目をデータベースに入れるかを決めて、挿入する。</p>
<p>sprintf を利用して書きます。</p>
<p></p>

		<div id="crayon-64953fd5965b0732000193" 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">php</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;">
$sql = sprintf("INSERT INTO testingcsv (test1,test2,test3) VALUES('%d','%s','%s');",$csv_array[0],$csv_array[1],$csv_array[2]);</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-64953fd5965b0732000193-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-64953fd5965b0732000193-1"><span class="crayon-sy">$</span><span class="crayon-i">sql</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-e">sprintf</span><span class="crayon-sy">(</span><span class="crayon-s">"INSERT INTO testingcsv (test1,test2,test3) VALUES('%d','%s','%s');"</span><span class="crayon-sy">,</span><span class="crayon-sy">$</span><span class="crayon-i">csv_array</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-sy">$</span><span class="crayon-i">csv_array</span><span class="crayon-sy">[</span><span class="crayon-cn">1</span><span class="crayon-sy">]</span><span class="crayon-sy">,</span><span class="crayon-sy">$</span><span class="crayon-i">csv_array</span><span class="crayon-sy">[</span><span class="crayon-cn">2</span><span class="crayon-sy">]</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p> </p>
<p>sprintf の形式は</p>
<p></p>

		<div id="crayon-64953fd5965b4406158772" 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;">
int sprintf ( string $format [, mixed $args [, mixed $... ]] )</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-64953fd5965b4406158772-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-64953fd5965b4406158772-1"><span class="crayon-t">int</span><span class="crayon-h"> </span><span class="crayon-e">sprintf</span><span class="crayon-h"> </span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-t">string</span><span class="crayon-h"> </span><span class="crayon-sy">$</span><span class="crayon-i">format</span><span class="crayon-h"> </span><span class="crayon-sy">[</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-i">mixed</span><span class="crayon-h"> </span><span class="crayon-sy">$</span><span class="crayon-i">args</span><span class="crayon-h"> </span><span class="crayon-sy">[</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-i">mixed</span><span class="crayon-h"> </span><span class="crayon-sy">$</span><span class="crayon-sy">.</span><span class="crayon-sy">.</span><span class="crayon-sy">.</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></td>
					</tr>
				</table>
			</div>
		</div>

<p> </p>
<p>型指定子として指定できる値をまとめました。</p>
<table>
<tr>
<td>b</td>
<td>引数を整数として扱い、バイナリの数値として表現します。</td>
</tr>
<tr>
<td>c</td>
<td>引数を整数として扱い、その ASCII 値の文字として表現します。</td>
</tr>
<tr>
<td>d</td>
<td>引数を整数として扱い、 10 進数として表現します。</td>
</tr>
<tr>
<td>e</td>
<td>引数を科学記法として扱います (例 1.2e+2)。精度の指定子は、PHP 5.2.1<br />
                     以降では小数点以下の桁数を表します。</td>
</tr>
<tr>
<td>u</td>
<td>引数を整数として扱い、符号無しの 10 進数として表現します。</td>
</tr>
<tr>
<td>f</td>
<td>引数を double として扱い、浮動小数点数として表現します。</td>
</tr>
<tr>
<td>F</td>
<td>引数を float として扱い、浮動小数点数として表現します。</td>
</tr>
<tr>
<td>o</td>
<td>引数を整数として扱い、 8 進数として表現します。</td>
</tr>
<tr>
<td>s</td>
<td>引数を文字列として扱い、表現します。</td>
</tr>
<tr>
<td>x</td>
<td>引数を整数として扱い、16 進数として(小文字で)表現します。</td>
</tr>
<tr>
<td>X</td>
<td>引数を整数として扱い、16 進数として(大文字で)表現します。</td>
</tr>
</table>
<p>例えば：以下のように書きます。</p>
<p></p>

		<div id="crayon-64953fd5965b6015315011" 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;">
%d
%s
%x</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-64953fd5965b6015315011-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd5965b6015315011-2">2</div><div class="crayon-num" data-line="crayon-64953fd5965b6015315011-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd5965b6015315011-4">4</div><div class="crayon-num" data-line="crayon-64953fd5965b6015315011-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-64953fd5965b6015315011-1"><span class="crayon-ta">%</span><span class="crayon-i">d</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd5965b6015315011-2">&nbsp;</div><div class="crayon-line" id="crayon-64953fd5965b6015315011-3"><span class="crayon-ta">%</span><span class="crayon-i">s</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd5965b6015315011-4">&nbsp;</div><div class="crayon-line" id="crayon-64953fd5965b6015315011-5"><span class="crayon-sy">%</span><span class="crayon-i">x</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p> </p>

csvアップロードとsprintf

Fancyboxのようにサムネイルから飛び出してくるようなjQueryを組んでみる

<p>営業の方ならきっと気持ちが分かるはず！</p>
<p>アポイントの時間をメール等で調整をするときに、空き時間を見て、移動時間を計算して1行ずつ文字に起こしていくという作業をするかと思います。</p>
<p>ちょうど、下記の文章のような形に記載をすると思います。</p>
<p>&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8211;</p>
<p>◯/◯(火) 00:00-00:00</p>
<p>◯/◯(水) 00:00-00:00</p>
<p>&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8211;</p>
<p>Googleカレンダーなどスケジューラーはグラフィカルになっているので、</p>
<p>途端にメールになると空き時間を文章化しなくてはならず、煩わしさをずっと感じておりました。</p>
<p>そんなことを何年間も思っていたところ、つい先日、このサービスを知りました！</p>
<p><a href="https://cu-hacker.com/">Cu-hacker | アポイント調整を10倍速くするツール「クウハッカー」</a></p>
<p>&nbsp;</p>
<p>アポイント調整を10倍速くするという挑戦的なキャッチフレーズがタイトルに入っておりますが、使ってみた後はまんざらでもありません！</p>
<h2>使い方</h3>
<p><a href="/uploads-archive/2013/12/screenshot.png"><img decoding="async" loading="lazy" class="alignnone size-medium wp-image-3853" alt="screenshot" src="/uploads-archive/2013/12/screenshot-300x268.png" width="300" height="268" srcset="/uploads-archive/2013/12/screenshot-300x268.png 300w, /uploads-archive/2013/12/screenshot-228x204.png 228w, /uploads-archive/2013/12/screenshot.png 1013w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<p>使い方は簡単です。</p>
<p><a href="https://cu-hacker.com" target="_blank">トップページ</a>にアクセスするとGoogleアカウントでログインを促されます。</p>
<p>もちろん、GoogleAppsアカウントでも対応しております。</p>
<p><a href="/uploads-archive/2013/12/5e5c389856d465b1f0d26d6392fcb6a9.jpg"><img decoding="async" loading="lazy" class="alignnone size-medium wp-image-3858" alt="Cu-hacker___カレンダー-3" src="/uploads-archive/2013/12/5e5c389856d465b1f0d26d6392fcb6a9-300x157.jpg" width="300" height="157" srcset="/uploads-archive/2013/12/5e5c389856d465b1f0d26d6392fcb6a9-300x157.jpg 300w, /uploads-archive/2013/12/5e5c389856d465b1f0d26d6392fcb6a9-1024x538.jpg 1024w, /uploads-archive/2013/12/5e5c389856d465b1f0d26d6392fcb6a9-228x119.jpg 228w, /uploads-archive/2013/12/5e5c389856d465b1f0d26d6392fcb6a9.jpg 1353w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<p>ログインをするとGoogleカレンダーライクの画面が表示されます。</p>
<p>それでは早速、その真価を試しましょう。</p>
<p><a href="/uploads-archive/2013/12/607e955f64969a9296ebed93db7ba0a3.jpg"><img decoding="async" loading="lazy" class="alignnone size-medium wp-image-3866" alt="Cu-hacker___カレンダー-4-2" src="/uploads-archive/2013/12/607e955f64969a9296ebed93db7ba0a3-300x155.jpg" width="300" height="155" srcset="/uploads-archive/2013/12/607e955f64969a9296ebed93db7ba0a3-300x155.jpg 300w, /uploads-archive/2013/12/607e955f64969a9296ebed93db7ba0a3-1024x529.jpg 1024w, /uploads-archive/2013/12/607e955f64969a9296ebed93db7ba0a3-228x117.jpg 228w, /uploads-archive/2013/12/607e955f64969a9296ebed93db7ba0a3.jpg 1351w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<p>適当な時間帯をGoogleカレンダーのようにドラッグして伸ばします。</p>
<p>すると、左上のテキスト欄に日時が範囲が指定された状態で反映されます。</p>
<p>これで、あとはメールにコピペするだけで終了です。</p>
<p>すごく簡単です。</p>
<p><img decoding="async" loading="lazy" class="alignnone size-medium wp-image-3857" alt="Cu-hacker___カレンダー-2" src="/uploads-archive/2013/12/9dcba189f8e6a5e80b71dc1e87f8365a-300x199.jpg" width="300" height="199" srcset="/uploads-archive/2013/12/9dcba189f8e6a5e80b71dc1e87f8365a-300x199.jpg 300w, /uploads-archive/2013/12/9dcba189f8e6a5e80b71dc1e87f8365a-1024x680.jpg 1024w, /uploads-archive/2013/12/9dcba189f8e6a5e80b71dc1e87f8365a-228x151.jpg 228w, /uploads-archive/2013/12/9dcba189f8e6a5e80b71dc1e87f8365a.jpg 1353w" sizes="(max-width: 300px) 100vw, 300px" /></p>
<p>設定画面では、ビジネスタイムの指定などが細かく出来ます。</p>
<p><a href="/uploads-archive/2013/12/b215bbdb4fd107b2e47fc103f32888c1.jpg"><img decoding="async" loading="lazy" class="alignnone size-medium wp-image-3867" alt="Cu-hacker___カレンダー-5-2" src="/uploads-archive/2013/12/b215bbdb4fd107b2e47fc103f32888c1-300x160.jpg" width="300" height="160" srcset="/uploads-archive/2013/12/b215bbdb4fd107b2e47fc103f32888c1-300x160.jpg 300w, /uploads-archive/2013/12/b215bbdb4fd107b2e47fc103f32888c1-1024x549.jpg 1024w, /uploads-archive/2013/12/b215bbdb4fd107b2e47fc103f32888c1-228x122.jpg 228w, /uploads-archive/2013/12/b215bbdb4fd107b2e47fc103f32888c1.jpg 1348w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<p>終日を選択すると、先ほど、指定したビジネスタイムが反映されます。</p>
<p>かゆいところに手が届く仕様になっております〜。素晴らしいです。</p>
<p>そして、テキストのところをご覧頂くと分かるのですが、短縮URLが発行されます。</p>
<p><a href="/uploads-archive/2013/12/57e64c63c0fc9c3a99817873d032a7c0.jpg"><img decoding="async" loading="lazy" class="alignnone size-medium wp-image-3861" alt="Cu-hacker___Yuji_Mezakiさんからの提案日程-4" src="/uploads-archive/2013/12/57e64c63c0fc9c3a99817873d032a7c0-300x149.jpg" width="300" height="149" srcset="/uploads-archive/2013/12/57e64c63c0fc9c3a99817873d032a7c0-300x149.jpg 300w, /uploads-archive/2013/12/57e64c63c0fc9c3a99817873d032a7c0-1024x508.jpg 1024w, /uploads-archive/2013/12/57e64c63c0fc9c3a99817873d032a7c0-228x113.jpg 228w, /uploads-archive/2013/12/57e64c63c0fc9c3a99817873d032a7c0.jpg 1352w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<p>こちらは、相手に送るためのもので短縮URLにアクセスをすると、候補日をFIXさせるフローが出来ております。</p>
<p>相手もGoogleカレンダーを利用していることを知っている場合は、更に、調整が簡単な仕様になっております。</p>
<p>相手がGoogleカレンダーを利用しているか分からない場合は、混乱を招く恐れがあるので、短縮URLは削除するのが無難かと思います。</p>
<h2>まとめ</h3>
<p>こんなの待ってた！</p>


Googleカレンダーユーザー必見！スケジュール調整が劇的に簡単になる「Cu-hacker」

<p>パララックスのサイトが少し前に流行り、今ではいろんなサイトで見られるようになり一般的になってきたような感じがする昨今ですが、簡単にパララックスっぽい動きをつけられることを今更ながら発見しましたので、試してみました。<br />
&nbsp;<br />
早速ですが、デモをご覧下さい。</p>
<p>&nbsp;</p>
<p><a href="/demo/abe/37/" target="_blank" class="demo">DEMO</a></p>
<p>どうでしょうか？<br />
パララックスっぽい感じがでてますでしょうか？？</p>
<h2>background-attachmentの実装</h3>
<p>設定自体はとても簡単で、<br />
背景画像を設定した箇所に、</p>
<p></p>

		<div id="crayon-64953fd595eb1667674691" 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">CSS</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;">
background-attachment: fixed;</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-64953fd595eb1667674691-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-64953fd595eb1667674691-1"><span class="crayon-e ">background-attachment</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">fixed</span><span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p> </p>
<p>と追加しているだけです。</p>
<p>要は、背景画像の位置を固定にしているため、<br />
背景画像を設定した要素がスクロールで動いても、<br />
背景画像は動かないため、このような見え方になっています。</p>
<p>ちなみに背景画像の位置は、ブラウザを起点に位置されます。</p>
<p>対応ブラウザはIE8からですので、<br />
クライアント案件でも結構使えると思います。</p>
<p>なにより簡単にできるのでいいですね！写真とコンテンツの組み合わせ次第でいいサイトが出来上がるんではないでしょうか？</p>
<p>今度はもっと上級なパララックスも試してみたいと思います！</p>

background-attachmentでパララックスもどきの動きをつけてみる

Webフォント×CSS3でロングシャドウアイコンを作ってみよう

<p>Facebook上のウォールにプログラムからGraph APIを使って画像を投稿する時</p>
<div>ちょっとかっこよく見せるためのテクニックをご紹介。</div>
<div></div>
<div>こちらはよくあるパターン</div>
<div><a href="/uploads-archive/2013/12/ed91c375302043dc5679b77b8dce26f0.png"><img decoding="async" loading="lazy" class="size-full wp-image-3811 aligncenter" alt="スクリーンショット 2013-12-10 16.04.08" src="/uploads-archive/2013/12/ed91c375302043dc5679b77b8dce26f0.png" width="513" height="404" srcset="/uploads-archive/2013/12/ed91c375302043dc5679b77b8dce26f0.png 513w, /uploads-archive/2013/12/ed91c375302043dc5679b77b8dce26f0-300x236.png 300w, /uploads-archive/2013/12/ed91c375302043dc5679b77b8dce26f0-228x179.png 228w" sizes="(max-width: 513px) 100vw, 513px" /></a></div>
<div></div>
<div>今回のものは</div>
<div> <a href="/uploads-archive/2013/12/d48ad5368c81ec17cbc00cfc8af24a8a.png"><img decoding="async" loading="lazy" class="size-full wp-image-3812 aligncenter" alt="スクリーンショット 2013-12-10 16.02.10" src="/uploads-archive/2013/12/d48ad5368c81ec17cbc00cfc8af24a8a.png" width="513" height="281" srcset="/uploads-archive/2013/12/d48ad5368c81ec17cbc00cfc8af24a8a.png 513w, /uploads-archive/2013/12/d48ad5368c81ec17cbc00cfc8af24a8a-300x164.png 300w, /uploads-archive/2013/12/d48ad5368c81ec17cbc00cfc8af24a8a-228x124.png 228w" sizes="(max-width: 513px) 100vw, 513px" /></a></div>
<div>こんな感じ。</div>
<div></div>
<div>あまり変わらないが、コンパクトにまとまっていて情報がわかりやすいのと、</div>
<div>あとは大きな理由としてAPI経由での投稿でユーザーが入力した内容以外で定型文を入れることが原則禁止されているため</div>
<div>そのような時の対処法としても便利な方法だ。</div>
<div></div>
<div>方法は、画像を投稿させるのではなく、指定の画像をOGPで指定した動的なダミーページを用意して、そのURLをシェアするイメージ。</div>
<div></div>
<div>上記の例では</div>
<div>


		<div id="crayon-64953fd595882277741596" 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 html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;meta charset="UTF-8"&gt;
&lt;meta property="og:title" content="ソチオリンピック日本代表を応援しよう！" /&gt;
&lt;meta property="og:type" content="article" /&gt;
&lt;meta property="og:description" content="ソチオリンピック日本代表を応援しよう！ソチオリンピック日本代表を応援しよう！" /&gt;
&lt;meta property="og:image" content="http://img.hoge.com/1.png" /&gt;
&lt;meta property="og:site_name" content="ソチオリンピック日本代表を応援しよう！" /&gt;

&lt;meta name="keywords" content="ソチオリンピック、オリンピック、ソチ" /&gt;
&lt;meta name="description" content="ソチオリンピック日本代表を応援しよう！ソチオリンピック日本代表を応援しよう！" /&gt;
&lt;title&gt;ソチオリンピック日本代表を応援しよう！&lt;/title&gt;

&lt;/head&gt;
&lt;body　onload="window.location.href='/';"&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-64953fd595882277741596-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd595882277741596-2">2</div><div class="crayon-num" data-line="crayon-64953fd595882277741596-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd595882277741596-4">4</div><div class="crayon-num" data-line="crayon-64953fd595882277741596-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd595882277741596-6">6</div><div class="crayon-num" data-line="crayon-64953fd595882277741596-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd595882277741596-8">8</div><div class="crayon-num" data-line="crayon-64953fd595882277741596-9">9</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd595882277741596-10">10</div><div class="crayon-num" data-line="crayon-64953fd595882277741596-11">11</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd595882277741596-12">12</div><div class="crayon-num" data-line="crayon-64953fd595882277741596-13">13</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd595882277741596-14">14</div><div class="crayon-num" data-line="crayon-64953fd595882277741596-15">15</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd595882277741596-16">16</div><div class="crayon-num" data-line="crayon-64953fd595882277741596-17">17</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd595882277741596-18">18</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-64953fd595882277741596-1"><span class="crayon-n">&lt;!doctype html&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd595882277741596-2"><span class="crayon-r ">&lt;html&gt;</span></div><div class="crayon-line" id="crayon-64953fd595882277741596-3"><span class="crayon-r ">&lt;head&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd595882277741596-4"><span class="crayon-r ">&lt;meta </span><span class="crayon-e ">charset</span>=<span class="crayon-s ">"UTF-8"</span><span class="crayon-r ">&gt;</span></div><div class="crayon-line" id="crayon-64953fd595882277741596-5"><span class="crayon-r ">&lt;meta </span><span class="crayon-e ">property</span>=<span class="crayon-s ">"og:title"</span><span class="crayon-h"> </span><span class="crayon-e ">content</span>=<span class="crayon-s ">"ソチオリンピック日本代表を応援しよう！"</span><span class="crayon-r "> /&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd595882277741596-6"><span class="crayon-r ">&lt;meta </span><span class="crayon-e ">property</span>=<span class="crayon-s ">"og:type"</span><span class="crayon-h"> </span><span class="crayon-e ">content</span>=<span class="crayon-s ">"article"</span><span class="crayon-r "> /&gt;</span></div><div class="crayon-line" id="crayon-64953fd595882277741596-7"><span class="crayon-r ">&lt;meta </span><span class="crayon-e ">property</span>=<span class="crayon-s ">"og:description"</span><span class="crayon-h"> </span><span class="crayon-e ">content</span>=<span class="crayon-s ">"ソチオリンピック日本代表を応援しよう！ソチオリンピック日本代表を応援しよう！"</span><span class="crayon-r "> /&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd595882277741596-8"><span class="crayon-r ">&lt;meta </span><span class="crayon-e ">property</span>=<span class="crayon-s ">"og:image"</span><span class="crayon-h"> </span><span class="crayon-e ">content</span>=<span class="crayon-s ">"http://img.hoge.com/1.png"</span><span class="crayon-r "> /&gt;</span></div><div class="crayon-line" id="crayon-64953fd595882277741596-9"><span class="crayon-r ">&lt;meta </span><span class="crayon-e ">property</span>=<span class="crayon-s ">"og:site_name"</span><span class="crayon-h"> </span><span class="crayon-e ">content</span>=<span class="crayon-s ">"ソチオリンピック日本代表を応援しよう！"</span><span class="crayon-r "> /&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd595882277741596-10">&nbsp;</div><div class="crayon-line" id="crayon-64953fd595882277741596-11"><span class="crayon-r ">&lt;meta </span><span class="crayon-e ">name</span>=<span class="crayon-s ">"keywords"</span><span class="crayon-h"> </span><span class="crayon-e ">content</span>=<span class="crayon-s ">"ソチオリンピック、オリンピック、ソチ"</span><span class="crayon-r "> /&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd595882277741596-12"><span class="crayon-r ">&lt;meta </span><span class="crayon-e ">name</span>=<span class="crayon-s ">"description"</span><span class="crayon-h"> </span><span class="crayon-e ">content</span>=<span class="crayon-s ">"ソチオリンピック日本代表を応援しよう！ソチオリンピック日本代表を応援しよう！"</span><span class="crayon-r "> /&gt;</span></div><div class="crayon-line" id="crayon-64953fd595882277741596-13"><span class="crayon-r ">&lt;title&gt;</span><span class="crayon-i ">ソチオリンピック日本代表を応援しよう！</span><span class="crayon-r ">&lt;/title&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd595882277741596-14">&nbsp;</div><div class="crayon-line" id="crayon-64953fd595882277741596-15"><span class="crayon-r ">&lt;/head&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd595882277741596-16"><span class="crayon-r ">&lt;body　onload="window.location.href='/';"&gt;</span></div><div class="crayon-line" id="crayon-64953fd595882277741596-17"><span class="crayon-r ">&lt;/body&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd595882277741596-18"><span class="crayon-r ">&lt;/html&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>


</div>
<div>のようなHTMLを動的に生成し、ユーザーごとの画像と定型文を記載している。</div>
<div>こちらは動的なページなので、例えばhttp://hoge.com/?id=xxx</div>
<div>などとなってしまい、直接アクセスされるとよくわからないページが表示されてしまう。</div>
<div>それを回避するために、16行目のように</div>
<div>


		<div id="crayon-64953fd595886097209395" 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;body　onload="window.location.href='/';"&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-64953fd595886097209395-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-64953fd595886097209395-1"><span class="crayon-r ">&lt;body　onload="window.location.href='/';"&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>


</div>
<div>と、ここではトッページにリダイレクトさせている。</div>
<div></div>
<div>余談だが、スマホを重視する場合投稿する画像のサイズは</div>
<div>468 x 245がベストらしい。</div>
<p>&nbsp;</p>

【Facebook】Graph APIでかっこ良く画像を投稿する方法

<p>先日のお仕事でつまづくことがありましたので備忘録までに共有です。</p>
<p>とあるサイトをローンチする際、Facebookのフィードにいいねが流れてこないということで分かりました。</p>
<p>現在、fb:app_idやfb:adminsが設置されていないサイトでのいいねボタンはユーザのタイムラインやアクティビティログに表示されません。</p>
<p>それはつまり、他のユーザーの目に触れることがなく、いいねボタンはソーシャル要素がない単なるいいねカウンターと化します。</p>
<p>&nbsp;</p>
<p>詳しくは、以下のブログで詳細と見解が記載されています。</p>
<p><a href="http://snowadays.jp/2012/09/788" target="_blank">「fb:app_id」とか「fb:admins」って何のために必要なの？（OGP的な意味で）</a></p>
<p>&nbsp;</p>
<blockquote><p>ここからはあくまで一説でしかありませんが、どうやらFacebookは、世の中のいいね！ボタンの管理者を把握しておきたいようです。</p>
<p>どういうことかと言うと、海外ではこのいいね！ボタン、結構裁判沙汰になったりとかいろいろトラブルも起きてます。「いいね！詐欺」みたいな。<br />
で、いわゆる「不正ないいね！ボタン」とでもいいましょうか、そういうやつの監視に苦労してるわけです。<br />
例えば、外部のアフィサイトにプラグインのいいね！ボタンがあって、スクリプト組んでそのボタンを押せばポイントがもらえる、とか。<br />
そんなの簡単に作れちゃうわけで。</p>
<p>そういう輩の対策として、Facebookが考えた作戦が、この「Facebookアプリ必須」作戦。<br />
現状、Facebookアプリを作成するにはアカウントの認証作業が必要になります。<br />
認証作業は、クレジットカードもしくは携帯電話が必要です。</p></blockquote>
<p>上記ブログから引用させて頂きましたが、こちらの見解がしっくりと来ました。</p>
<p>&nbsp;</p>
<p>Facebookのデバッカーを通して、エラーが出なければ問題ありません。</p>
<p><a href="https://developers.facebook.com/tools/debug" target="_blank">https://developers.facebook.com/tools/debug</a></p>
<p>&nbsp;</p>


Company

Our Solutions

Support

News

Blog

Blogブログ

カテゴリーから探す

年別から見る

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

2014/01/29

2014/01/29

2014/01/29

2014/01/22

2014/01/22

2014/01/21

2014/01/15

2014/01/15

2014/01/14

2014/01/08

2014/01/08

2014/01/07

2014/01/07

2013/12/18

2013/12/18

2013/12/18

2013/12/11

2013/12/11