<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/4062124963/sackoh71-22/" target="_blank" ><img decoding="async" src="http://ecx.images-amazon.com/images/I/41VAQSZE03L._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/4062124963/sackoh71-22/" target="_blank" >魔法の発音 カタカナ英語</a></p>
<div class="booklink-powered-date" style="font-size:8pt;margin-top:5px;font-family:verdana;line-height:120%">posted with <a href="http://yomereba.com" rel="nofollow" target="_blank">ヨメレバ</a></div>
</div>
<div class="booklink-detail" style="margin-bottom:5px;">池谷 裕二 講談社 2004-10-23    </div>
<div class="booklink-link" style="margin-top: 5px"><a href="http://www.amazon.co.jp/exec/obidos/ASIN/4062124963/sackoh71-22/" name="booklink" rel="nofollow" target="_blank">Amazon.co.jp で詳細を見る</a></div>
</div>
<div class="booklink-footer" style="clear: left"></div>
</div>
<p>脳科学者として有名な池谷裕二さんが脳科学の延長で何故日本人は英語が苦手なのか？に対する回答です。</p>
<p>他の著作も非常に面白く、守備範囲の広さに脱帽です。</p>
<p>社内で英語が飛び交うようになり、お恥ずかしながら本の紹介です。</p>
<h2>抜粋</h3>
<ul>
<li>推理の言語の日本語。同音異義語がたくさんある。</li>
<li><span style="line-height: 1.5em;">そもそも発音の数が少ない。</span></li>
</ul>
<p>この2つが日本人が英語を不得意とする理由。</p>
<p>日本語の発音の数が少ないので、もう英語のようにたくさんの発音を使い分けることは難しい。</p>
<p>逆に発音の数が少ない＝パターンが少ないため、同音で異なる意味の言葉が多いのが特徴だ。</p>
<p>それを推理しながら、的確に文脈を捉えることが出来るのは日本人独特の能力である。</p>
<p>以上のことを踏まえて、正しいカタカナ英語を覚えようというのが趣旨である。</p>
<ul>
<li>Can I have&#8230;? （～をください） は「ケナヤブ」</li>
<li>Do you have&#8230;? （～はありますか？） は「ジュヤブ」</li>
<li>Do you want to&#8230;? （～したいですか？） は「ジュワナ」</li>
<li>I want you to&#8230; （～してください） は「アイワニュル」</li>
<li>Do you mind if I&#8230;? （～してもよいですか？） は「ジュマインデファイ」</li>
<li>Can you take our picture? （シャッターを押してください？） は「ケニュテイカワペクチョ」</li>
</ul>


魔法の発音 カタカナ英語 &#8211; 池谷裕二

<p>少し前から流行っているフラットデザインですが、最近は日本のサイトでも多く見かけるようになりました。</p>
<p>勉強のために、いろいろ見てきたものをここでは７つ紹介したいと思います。</p>
<h2>フラットデザインのサイト7選</h3>
<h3>株式会社ユニオンネット</h4>
<p>大阪の制作会社さんのサイトです。<br />
横幅いっぱいの写真を使用し、ちょっとした動きもありいい感じです。</p>
<p>&nbsp;</p>
<p><a href="/uploads-archive/2014/02/d416efe8d5de2b80300be706e602d1bb.jpg"><img decoding="async" loading="lazy" class="alignnone  wp-image-4255" alt="ホームページ制作│大阪│株式会社ユニオンネット" src="/uploads-archive/2014/02/d416efe8d5de2b80300be706e602d1bb.jpg" width="650" height="488" srcset="/uploads-archive/2014/02/d416efe8d5de2b80300be706e602d1bb.jpg 1007w, /uploads-archive/2014/02/d416efe8d5de2b80300be706e602d1bb-300x225.jpg 300w, /uploads-archive/2014/02/d416efe8d5de2b80300be706e602d1bb-228x171.jpg 228w" sizes="(max-width: 650px) 100vw, 650px" /></a></p>
<p>&nbsp;</p>
<p><a class="link" href="http://www.unionnet.jp/" target="_blank">ホームページ制作│大阪│株式会社ユニオンネット</a></p>
<p>&nbsp;</p>
<h3>DEMONO（デモノ）体験をモノに。</h4>
<p>ECサイトのツールを手がけている会社さんで、色合いがいい感じですね！<br />
スクロールと連動した動きもつけられています。</p>
<p><a href="/uploads-archive/2014/02/0095e64a6ea4d783f9175e6fe7b0b000.jpg"><img decoding="async" loading="lazy" class="alignnone  wp-image-4250" alt="DEMONO（デモノ）体験をモノに。" src="/uploads-archive/2014/02/0095e64a6ea4d783f9175e6fe7b0b000.jpg" width="650" height="488" srcset="/uploads-archive/2014/02/0095e64a6ea4d783f9175e6fe7b0b000.jpg 1007w, /uploads-archive/2014/02/0095e64a6ea4d783f9175e6fe7b0b000-300x225.jpg 300w, /uploads-archive/2014/02/0095e64a6ea4d783f9175e6fe7b0b000-228x171.jpg 228w" sizes="(max-width: 650px) 100vw, 650px" /></a></p>
<p>&nbsp;</p>
<p><a class="link" href="http://demono.co.jp/" target="_blank">DEMONO（デモノ）体験をモノに。</a></p>
<p>&nbsp;</p>
<h3>みんなのマーケット株式会社</h4>
<p>まだ創立3年程の会社です。<br />
くらしのマーケットというサイトを運営しています。<br />
シンプルな形で、円形の写真を使い人物を紹介しています。</p>
<p><a href="/uploads-archive/2014/02/7a1d52a1a1321362d9f08c035a6dabb3.jpg"><img decoding="async" loading="lazy" class="alignnone  wp-image-4256" alt="みんなのマーケット株式会社 - みんなのマーケット株式会社" src="/uploads-archive/2014/02/7a1d52a1a1321362d9f08c035a6dabb3.jpg" width="650" height="488" srcset="/uploads-archive/2014/02/7a1d52a1a1321362d9f08c035a6dabb3.jpg 1007w, /uploads-archive/2014/02/7a1d52a1a1321362d9f08c035a6dabb3-300x225.jpg 300w, /uploads-archive/2014/02/7a1d52a1a1321362d9f08c035a6dabb3-228x171.jpg 228w" sizes="(max-width: 650px) 100vw, 650px" /></a></p>
<p>&nbsp;</p>
<p><a class="link" href="http://www.minma.jp/" target="_blank">みんなのマーケット株式会社</a></p>
<p>&nbsp;</p>
<h3>株式会社ワノコト</h4>
<p>埼玉にあるweb制作会社さんです。<br />
ブルーとオレンジを基調にしたサイトで、いいフラット感です。</p>
<p><a href="/uploads-archive/2014/02/851e1f12c68500da5a4bc38efe98633d.jpg"><img decoding="async" loading="lazy" class="alignnone  wp-image-4254" alt="ホームページ制作・システム開発 埼玉県（入間市・所沢市・飯能市・川越市）・東京中心のサイト制作 - 株式会社ワノコト" src="/uploads-archive/2014/02/851e1f12c68500da5a4bc38efe98633d.jpg" width="650" height="488" srcset="/uploads-archive/2014/02/851e1f12c68500da5a4bc38efe98633d.jpg 1007w, /uploads-archive/2014/02/851e1f12c68500da5a4bc38efe98633d-300x225.jpg 300w, /uploads-archive/2014/02/851e1f12c68500da5a4bc38efe98633d-228x171.jpg 228w" sizes="(max-width: 650px) 100vw, 650px" /></a></p>
<p>&nbsp;</p>
<p><a class="link" href="http://www.wanokoto.jp/" target="_blank">ホームページ制作・システム開発 埼玉県（入間市・所沢市・飯能市・川越市）・東京中心のサイト制作 &#8211; 株式会社ワノコト</a></p>
<p>&nbsp;</p>
<h3>サイバーエージェント・クラウドファンディング</h4>
<p>クラウドファウンディングを運営しているサイバー系の会社さんです。<br />
カラフルで大きな写真を使用しています。こちらも人物紹介が円形の写真を使用していますね。</p>
<p><a href="/uploads-archive/2014/02/9d1a3bcfbd099922d2f84023f0268c33.jpg"><img decoding="async" loading="lazy" class="alignnone  wp-image-4253" alt="サイバーエージェント・クラウドファンディング" src="/uploads-archive/2014/02/9d1a3bcfbd099922d2f84023f0268c33-1024x731.jpg" width="650" height="464" srcset="/uploads-archive/2014/02/9d1a3bcfbd099922d2f84023f0268c33-1024x731.jpg 1024w, /uploads-archive/2014/02/9d1a3bcfbd099922d2f84023f0268c33-300x214.jpg 300w, /uploads-archive/2014/02/9d1a3bcfbd099922d2f84023f0268c33-228x162.jpg 228w, /uploads-archive/2014/02/9d1a3bcfbd099922d2f84023f0268c33.jpg 1162w" sizes="(max-width: 650px) 100vw, 650px" /></a></p>
<p>&nbsp;</p>
<p><a class="link" href="http://www.ca-crowdfunding.com/" target="_blank">サイバーエージェント・クラウドファンディング</a></p>
<p>&nbsp;</p>
<h3>株式会社フォーデジットデザイン</h4>
<p>都内にあるweb制作会社さんです。<br />
横幅いっぱいの写真を使っていますが、フラットというよりミニマルに近いでしょうか？<br />
ホワイトを基調としておりキレイにできています。<br />
ページの切り替わりもオシャレです。</p>
<p><a href="/uploads-archive/2014/02/12546e8883696b2ec72adfb01082e9a4.jpg"><img decoding="async" loading="lazy" class="alignnone  wp-image-4251" alt="FOURDIGIT DESIGN Inc.  株式会社フォーデジットデザイン" src="/uploads-archive/2014/02/12546e8883696b2ec72adfb01082e9a4-1024x731.jpg" width="650" height="464" srcset="/uploads-archive/2014/02/12546e8883696b2ec72adfb01082e9a4-1024x731.jpg 1024w, /uploads-archive/2014/02/12546e8883696b2ec72adfb01082e9a4-300x214.jpg 300w, /uploads-archive/2014/02/12546e8883696b2ec72adfb01082e9a4-228x162.jpg 228w, /uploads-archive/2014/02/12546e8883696b2ec72adfb01082e9a4.jpg 1162w" sizes="(max-width: 650px) 100vw, 650px" /></a></p>
<p>&nbsp;</p>
<p><a class="link" href="http://4dd.jp/" target="_blank">FOURDIGIT DESIGN Inc. | 株式会社フォーデジットデザイン</a></p>
<p>&nbsp;</p>
<h3>LIVESENSE made*</h4>
<p>リブセンスさんの採用専用サイトです。<br />
大きな写真をメインにしようし、アクセントがブルー、グレーを基調としています。<br />
スッキリしていてみやすいですね。<br />
こちらも人物紹介に円形の写真を使用しています。</p>
<p><a href="/uploads-archive/2014/02/LIVESENSE-made.jpg"><img decoding="async" loading="lazy" class="alignnone  wp-image-4252" alt="LIVESENSE made" src="/uploads-archive/2014/02/LIVESENSE-made-1024x731.jpg" width="651" height="464" srcset="/uploads-archive/2014/02/LIVESENSE-made-1024x731.jpg 1024w, /uploads-archive/2014/02/LIVESENSE-made-300x214.jpg 300w, /uploads-archive/2014/02/LIVESENSE-made-228x162.jpg 228w, /uploads-archive/2014/02/LIVESENSE-made.jpg 1162w" sizes="(max-width: 651px) 100vw, 651px" /></a></p>
<p>&nbsp;</p>
<p><a class="link" href="http://made.livesense.co.jp/" target="_blank">LIVESENSE made*</a></p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>上記のサイトを見て思ったのが、<br />
サイトの横幅はブラウザいっぱいで枠を設けてなく、<br />
コンテンツ毎の区切りで色を変更したり、<br />
写真を横幅いっぱいで使用したりしていますね。</p>
<p>基本的には縦長で、余白を十分にとり、<br />
スクロールと連動させた動きをつけているサイトも多くありました。</p>
<p>人物紹介で写真を円形にしているサイトが多くあったのがちょっと気になりました。</p>


フラットデザインで制作されたワンカラムの縦長ページサイト7選

<p>地味だけどありがたい機能を提供してくれるプラグイン。</p>
<p>今でも印刷を想定してほしいとの依頼は時々あり、昔は印刷用に別ページを作ってポップアップさせたこともあった。</p>
<p><a class="demo" href="/demo/hoshino/51/">デモ</a></p>
<p>設定は簡単で、まずはこちらからjsファイルをダウンロード。</p>
<p><a href="/demo/hoshino/51/js/jquery.jPrintArea.js" target="_blank">/demo/hoshino/51/js/jquery.jPrintArea.js</a></p>
<p>あとはHTMLに対し</p>

		<div id="crayon-64953fd597c57071736409" 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="area1"&gt;
    &lt;img src="images/1.jpg"&gt;
hogehogehogehogehogehogehogehoge
    &lt;p&gt;&lt;input type="button" value="ここまでを印刷" id="btn1"&gt;&lt;/p&gt;
&lt;/div&gt;</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 13px !important; line-height: 18px !important;"><div class="crayon-num" data-line="crayon-64953fd597c57071736409-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd597c57071736409-2">2</div><div class="crayon-num" data-line="crayon-64953fd597c57071736409-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd597c57071736409-4">4</div><div class="crayon-num" data-line="crayon-64953fd597c57071736409-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-64953fd597c57071736409-1"><span class="crayon-r ">&lt;div </span><span class="crayon-e ">id</span>=<span class="crayon-s ">"area1"</span><span class="crayon-r ">&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd597c57071736409-2"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r ">&lt;img </span><span class="crayon-e ">src</span>=<span class="crayon-s ">"images/1.jpg"</span><span class="crayon-r ">&gt;</span></div><div class="crayon-line" id="crayon-64953fd597c57071736409-3"><span class="crayon-i ">hogehogehogehogehogehogehogehoge</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd597c57071736409-4"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r ">&lt;p&gt;</span><span class="crayon-r ">&lt;input </span><span class="crayon-e ">type</span>=<span class="crayon-s ">"button"</span><span class="crayon-h"> </span><span class="crayon-e ">value</span>=<span class="crayon-s ">"ここまでを印刷"</span><span class="crayon-h"> </span><span class="crayon-e ">id</span>=<span class="crayon-s ">"btn1"</span><span class="crayon-r ">&gt;</span><span class="crayon-r ">&lt;/p&gt;</span></div><div class="crayon-line" id="crayon-64953fd597c57071736409-5"><span class="crayon-r ">&lt;/div&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>JSはこのように実行する。</p>

		<div id="crayon-64953fd597c5b218972402" 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;">
$( '#btn1' ).click( function()
{
	$.jPrintArea( '#area1' );
});</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-64953fd597c5b218972402-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd597c5b218972402-2">2</div><div class="crayon-num" data-line="crayon-64953fd597c5b218972402-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd597c5b218972402-4">4</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-64953fd597c5b218972402-1"><span class="crayon-sy">$</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-s">'#btn1'</span><span class="crayon-h"> </span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-e">click</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></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd597c5b218972402-2"><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-64953fd597c5b218972402-3"><span class="crayon-h">	</span><span class="crayon-sy">$</span><span class="crayon-sy">.</span><span class="crayon-e">jPrintArea</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-s">'#area1'</span><span class="crayon-h"> </span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd597c5b218972402-4"><span class="crayon-sy">}</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>&nbsp;</p>
<p>製品一覧とかマニュアルとかスペック表などでわざわざPDFにしていた場合も使えそう。</p>
<p>&nbsp;</p>
<p>&nbsp;</p>

印刷範囲を指定できるjQueryプラグイン

<h2>ミャンマーへの国別入国者数</h3>
<p><img decoding="async" src="/uploads-archive/2014/02/yangon.png" alt="" width="650"></p>
<p>日本人の数は一年間で倍以上増えて2位まで登りました。</p>
<h2>ヤンゴン日本人商工会議所の会員数推移</h3>
<p><img decoding="async" src="/uploads-archive/2014/02/yangon_nihon.png" alt="" width="650"></p>
<h2>外国投資の国別認可額(1989年~2013年10月末)</h3>
<p><img decoding="async" src="/uploads-archive/2014/02/bunya1.png" alt="" width="350"></p>
<h2>外国投資の分野別認可額(1989年~2013年10月末)</h3>
<p><img decoding="async" src="/uploads-archive/2014/02/bunya2.png" alt="" width="350"></p>


ミャンマービジネス変化の調査

<p>There are many ways to set up a Android mobile development environment.</p>
<p><strong>1) Android Studio(based on IntelliJ IDEA IDE)</strong></p>
<p>http://developer.android.com/sdk/installing/studio.html</p>
<p>This is the easiest way to start an Android dev env as a beginner. Please just download:</p>
<p><em>For window,</em></p>
<p><span style="font-family: Arial, Helvetica, sans-serif; font-size: small;"> android-studio-bundle-&lt;version&gt;.exe</span></p>
<p><em>For Mac,</em></p>
<p>android-studio-bundle-&lt;version&gt;.dmg</p>
<p><em>For Linux,</em></p>
<p>android-studio-bundle-&lt;version&gt;.tgz</p>
<ol>
<li>Unpack the downloaded Tar file</li>
<li>To launch Android Studio, navigate to the <code>android-studio/bin/</code> directory in a terminal and execute <code>studio.sh</code>. [Ref: http://developer.android.com/sdk/installing/studio.html]</li>
</ol>
<p><strong>2) Android Developer Tools (ADT Bundle &#8211; Eclipse with the ADT Plugin)</strong></p>
<p>http://developer.android.com/sdk/index.html</p>
<p>Please just download respective .zip file for selected OS.</p>
<p><strong>3) Eclipse (IDE) + Android SDK</strong></p>
<p>You need to install Eclipse IDE. Assume that you have already install JAVA SDK (http://www.oracle.com/technetwork/java/javase/downloads/index.html).</p>
<p>You need to download Android SDK from &#8220;<strong>SDK Tools Only</strong>&#8221; sections of http://developer.android.com/sdk/index.html.</p>
<p>When you set up Eclipse for android development, you need to link Eclipse with respective JAVA SDK and android SDK manually.</p>
<p><strong>4) IntelliJ (IDE) + Android SDK</strong></p>
<p>Download IntelliJ IDE from this link: http://www.jetbrains.com/idea/</p>
<p>You are assumed that you&#8217;ve already installed JAVA SDK.</p>
<p>Download Android SDK from &#8220;<strong>SDK Tools Only</strong>&#8221; section of http://developer.android.com/sdk/index.html</p>
<p>When you set up IntelliJ for android development, you need to link IntelliJ with respective JAVA SDK and android SDK manually.</p>
<p>Enjoy!!!</p>


Easy ways to setting up an Android Dev

<p>日本語フォントでは、基本一つ一つの文字が等幅で作られていることがほとんどで、</p>
<p>ウェブサイト上でテキストによって文字組をした場合に、不自然な文字間隔になってしまう場所が出てきます。</p>
<p>フラットデザインやレスポンシブデザインが標準化傾向にある今、</p>
<p>ウェブサイトでの文字は文章はもちろんのこと、テキストにおいても画像を使わずテキストを使う必要性が高まってきており、</p>
<p>日本語フォント独特の文字間隔の不自然さが、ウェブデザインでの障害となることもあります。</p>
<p>&nbsp;</p>
<p>そんな中、ウェブページのテキストの文字詰めを自動でしてくれるJSが公開されていましたので、</p>
<p>こちらをご紹介いたします。</p>
<p><a class="link" href="http://fladdict.net/blog/2011/02/auto-kerning.html" target="_blank">HTMLで文字詰めするタイポグラフィー用JS</a></p>
<p>ファイルはこちらのサイトよりダウンロードください。</p>
<p>&nbsp;</p>
<p>↓DEMO作ってみました。</p>
<p><a class="demo" title="DEMO" href="/demo/ninomiya/40/" target="_blank">DEMO</a></p>
<p>&nbsp;</p>
<h2>使い方</h3>
<p>まず、jQueryとダウンロードした文字詰めのJSファイルを読み込みます。</p>

		<div id="crayon-64953fd597a64243774703" 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><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;script type="text/javascript" src="js/jquery-1.9.1.min.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="js/FLAutoKerning.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-64953fd597a64243774703-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd597a64243774703-2">2</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 13px !important; line-height: 18px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-64953fd597a64243774703-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-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-64953fd597a64243774703-2"><span class="crayon-ta">&lt;script </span><span class="crayon-e ">type</span>=<span class="crayon-s">"text/javascript"</span><span class="crayon-h"> </span><span class="crayon-e ">src</span>=<span class="crayon-s">"js/FLAutoKerning.js"</span><span class="crayon-h">&gt;</span><span class="crayon-ta">&lt;/script&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>&nbsp;</p>
<p>次に、文字詰めを行うHTML要素に、</p>
<p>FLAutoKerning.process($(&#8216;対象の要素&#8217;));</p>
<p>と行った形でスクリプトをあてます。</p>

		<div id="crayon-64953fd597a68292024937" 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(){
	FLAutoKerning.process($('.group2 h1'));
	FLAutoKerning.process($('.group2 nav li a'));
	FLAutoKerning.process($('.group2 h2'));
	FLAutoKerning.process($('.group2 section .text'));
});</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-64953fd597a68292024937-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd597a68292024937-2">2</div><div class="crayon-num" data-line="crayon-64953fd597a68292024937-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd597a68292024937-4">4</div><div class="crayon-num" data-line="crayon-64953fd597a68292024937-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd597a68292024937-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-64953fd597a68292024937-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-64953fd597a68292024937-2"><span class="crayon-h">	</span><span class="crayon-i">FLAutoKerning</span><span class="crayon-sy">.</span><span class="crayon-e">process</span><span class="crayon-sy">(</span><span class="crayon-sy">$</span><span class="crayon-sy">(</span><span class="crayon-s">'.group2 h1'</span><span class="crayon-sy">)</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-64953fd597a68292024937-3"><span class="crayon-h">	</span><span class="crayon-i">FLAutoKerning</span><span class="crayon-sy">.</span><span class="crayon-e">process</span><span class="crayon-sy">(</span><span class="crayon-sy">$</span><span class="crayon-sy">(</span><span class="crayon-s">'.group2 nav li a'</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-64953fd597a68292024937-4"><span class="crayon-h">	</span><span class="crayon-i">FLAutoKerning</span><span class="crayon-sy">.</span><span class="crayon-e">process</span><span class="crayon-sy">(</span><span class="crayon-sy">$</span><span class="crayon-sy">(</span><span class="crayon-s">'.group2 h2'</span><span class="crayon-sy">)</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-64953fd597a68292024937-5"><span class="crayon-h">	</span><span class="crayon-i">FLAutoKerning</span><span class="crayon-sy">.</span><span class="crayon-e">process</span><span class="crayon-sy">(</span><span class="crayon-sy">$</span><span class="crayon-sy">(</span><span class="crayon-s">'.group2 section .text'</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-64953fd597a68292024937-6"><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>文字詰めを行う文字一つ一つが&lt;span&gt;で囲まれますので、&lt;span&gt;で文字の大きさや色などを指定していたりする場合は注意が必要です。</p>
<p>&nbsp;</p>
<p>全体として文字の間にできる不自然な空白が抑えられ、</p>
<p>特に句読点や括弧などの前後にできる大きな空白が抑えられているので、</p>
<p>まとまった感じがします。</p>
<p>&nbsp;</p>
<p>等幅でなくなるため、行の終わりが揃わなくなるという問題が出てくるため、</p>
<p>タイトルやキャッチコピーなどでの利用に抑えたり、</p>
<p>センタリングや右寄せした文章のような、行の終わりをそろえる必要がないような箇所に使うなどの利用法がいいかもしれません。</p>

日本語の文字詰め(カーニング)を自動で調整してくれるjQuery

vagrant

<p>wordpressでお問い合わせを設置するとなれば、高い確率でこのプラグインが導入されますが、</p>
<p>ちょっといろいろ問題とまでは言いませんが、引っかかるポイントがあります。</p>
<p>&nbsp;</p>
<p>・確認画面がでない</p>
<p>・スパムがけっこうくる</p>
<p>・メール返信がなんか変</p>
<p>&nbsp;</p>
<p>地味に困ることがありますね笑</p>
<p>&nbsp;</p>
<p>その対策をすることがあるので、その解決で参考になったブログを紹介したいと思います。</p>
<p>&nbsp;</p>
<h2>確認画面がでない</h3>
<p>まずこちらですが、確認画面を出すようにすることができるという噂を聞いたことがあるのですが、<br />
まだ試してことはありません。</p>
<p>確認画面が出るプラグインもあるみたいので、<br />
どうしても確認画面が欲しい人は以下のプラグインを使ってみてはいかがでしょうか。</p>
<p><a href="http://hinagata.biz/plugin/inquiry-form-creator/">【inquiry form creator】簡単３ステップで確認画面付きの問い合わせフォームが設置できるWordPressプラグイン &#8211; ひなログ</a></p>
<p>次の項目とかぶるのですが、<br />
確認画面を表示しなくても以下のブログのようにすれば十分な気がします。</p>
<p><a href="http://bizvektor.com/plugins/contactform7/" target="_blank">意外と知らない !? お問い合わせフォーム「Contact Form 7」をもっと便利に使いこなすための3つのポイント | プラグイン紹介 | BizVektor [ ビズベクトル ] スマホ対応無料WordPressテーマ（テンプレート）</a></p>
<h2>スパムがけっこうくる</h3>
<p>こちらも少々やっかいで、通常通り設置すると、<br />
スパムがどんどん来ます。</p>
<p>うちのサイトもよく来ていたので、画像認証的なものを導入しました。<br />
ただ、これはもうひとつ別のプラグインを入れないといけないし、<br />
ユーザーもめんどくさいかと思います。</p>
<p>こちらのブログのようにすれば僕が行った対策より簡単です！</p>
<p><a href="http://curious-everything.com/1089-entry.html">Contact Form 7 に追加すればスパムが届かなくなる魔法の1行 | 毎日興味津々</a></p>
<h2>メール返信がなんか変</h3>
<p>これはお問い合わせからくるメールのfromがおかしかったり、<br />
迷惑メールに届いちゃったりということが起こってしまう件です。</p>
<p>これはこのプラグインの設定でサーバーを経由してしまうからうんぬんかんぬんらしいですが、<br />
そこらへんのことはよくわからないので、完璧に理解していませんが、そちらを解決するためのブログが以下になります。</p>
<p><a href="http://www.ssw2005.net/968" target="_blank">ContactForm7から送信すると迷惑メールと判別される場合の対応方法 | えびす商売繁盛マーケティング</a></p>
<p><a href="http://coneta.jp/2579.html" target="_blank">WordPress(ワードプレス) SMTPサーバを変更できるプラグイン「WP Mail SMTP」 | CONETA.JP</a></p>
<p>もっといいプラグインが現れるようなそんな気がします。。。</p>


wordpressの『contact form 7』プラグインをもっと使いこなすためのTIPS

<p>前回、リストバンド型のウェアラブルデバイスを紹介しましたので、今回は、Googleグラスといったデバイスが話題沸騰しているメガネ型ウェアラブルデバイスをまとめてみました。</p>
<article>
<h2>Googleグラス</h3>
<p><a href="/uploads-archive/2014/02/imgres1.jpg"><img decoding="async" loading="lazy" alt="imgres" src="/uploads-archive/2014/02/imgres1.jpg" width="300" height="168" /></a></p>
<p>言わずとしれたGoogleのスマートグラス</p>
<p>網膜に映像を映しだすバーチャルディスプレイ</p>
<p><a href="http://www.google.com/glass/start/ " target="_blank">http://www.google.com/glass/start/ </a></p>
<h2>Telepathy One</h3>
<p><a href="/uploads-archive/2014/02/imgres2.jpg"><img decoding="async" loading="lazy" alt="imgres" src="/uploads-archive/2014/02/imgres2-300x157.jpg" width="300" height="157" /></a></p>
<p>セカイカメラで知られた頓智ドットの元代表が新たに手がける国産のスマートグラス</p>
<p>コミュニケーションツールとしての映像を残すといったところを売りに出している。GoogleGlass同様にバーチャルディスプレイ</p>
<p><a href="http://tele-pathy.org/" target="_blank">http://tele-pathy.org/</a></p>
<h2>MOVERIO BT-200</h3>
<p><a href="/uploads-archive/2014/02/imgres4.jpg"><img decoding="async" loading="lazy" alt="imgres" src="/uploads-archive/2014/02/imgres4.jpg" width="275" height="183" /></a></p>
<p>日本のメーカーEPSONもスマートグラスに参戦</p>
<p>映像が投影されるパーソナルシアターを強調しています。</p>
<p><a href="http://www.epson.jp/products/moverio/bt200/" target="_blank">http://www.epson.jp/products/moverio/bt200/</a></p>
<p>&nbsp;</p>
<h2>M100スマートグラス</h3>
<p><a href="/uploads-archive/2014/02/imgres3.jpg"><img decoding="async" loading="lazy" alt="imgres" src="/uploads-archive/2014/02/imgres3.jpg" width="286" height="176" /></a></p>
<p>こちらもどちらかというと、Android端末でできることを強調しているスマートグラス</p>
<p><a href="http://www.vuzix.co.jp/shop/item_detail?category_id=0&amp;item_id=925952" target="_blank">http://www.vuzix.co.jp/shop/item_detail?category_id=0&amp;item_id=925952</a></p>
<h2>まとめ</h3>
<p>やはり本命はGoogleGlassといったところでしょうか？</p>
<p>こうしてみると前者の２つがコミュニケーションを売りにしているのに対し、後者の２つは映像を目の前に投影する、メガネ型のAndroid機といったところを強調しており、目指すべきところが全く異なることが分かった。</p>
</article>
<div></div>


メガネ型ウェアラブルデバイスもいよいよ流行の兆し

<p>ZNAPとはQRを使った決済プラットフォーム。</p>
<p><a href="http://consumer.znap.com/" target="_blank">http://consumer.znap.com/</a></p>
<p>香港に拠点を置くMPayMe社が展開するサービスで、実は昨年から日本版が公開されていたとのことだが</p>
<p>知らなかったので使ってみた。</p>
<p>&nbsp;</p>
<p>まずはアプリをダウンロードする。</p>
<p><a href="/uploads-archive/2014/02/36c8c9261c98e7c1b7d7d5e14410cdda.png"><img decoding="async" loading="lazy" class="aligncenter size-medium wp-image-4183" alt="写真 1" src="/uploads-archive/2014/02/36c8c9261c98e7c1b7d7d5e14410cdda-200x300.png" width="200" height="300" srcset="/uploads-archive/2014/02/36c8c9261c98e7c1b7d7d5e14410cdda-200x300.png 200w, /uploads-archive/2014/02/36c8c9261c98e7c1b7d7d5e14410cdda-228x342.png 228w, /uploads-archive/2014/02/36c8c9261c98e7c1b7d7d5e14410cdda.png 640w" sizes="(max-width: 200px) 100vw, 200px" /></a></p>
<p>&nbsp;</p>
<p>個人情報を登録して会員登録。</p>
<p>登録後クレジットカード情報を予め登録しておくとすぐに使える模様。</p>
<p>ただし現在はVISAとMasterのみ対応しているらしい。(今後はその他カードと銀行引き落としも対応するとのこと)</p>
<p><a href="/uploads-archive/2014/02/d97c50263c64191b4a87e849b78211fe.png"><img decoding="async" loading="lazy" class="aligncenter size-medium wp-image-4185" alt="写真 2" src="/uploads-archive/2014/02/d97c50263c64191b4a87e849b78211fe-200x300.png" width="200" height="300" srcset="/uploads-archive/2014/02/d97c50263c64191b4a87e849b78211fe-200x300.png 200w, /uploads-archive/2014/02/d97c50263c64191b4a87e849b78211fe-228x342.png 228w, /uploads-archive/2014/02/d97c50263c64191b4a87e849b78211fe.png 640w" sizes="(max-width: 200px) 100vw, 200px" /></a></p>
<p>&nbsp;</p>
<p>QRを読み込む画面はこんな感じ</p>
<p><a href="/uploads-archive/2014/02/cb21c53e01edf9fb25f6ab527a681e99.png"><img decoding="async" loading="lazy" class="aligncenter size-medium wp-image-4186" alt="写真 3" src="/uploads-archive/2014/02/cb21c53e01edf9fb25f6ab527a681e99-200x300.png" width="200" height="300" srcset="/uploads-archive/2014/02/cb21c53e01edf9fb25f6ab527a681e99-200x300.png 200w, /uploads-archive/2014/02/cb21c53e01edf9fb25f6ab527a681e99-228x342.png 228w, /uploads-archive/2014/02/cb21c53e01edf9fb25f6ab527a681e99.png 640w" sizes="(max-width: 200px) 100vw, 200px" /></a>デモ用のQRがなかったのでキャプチャはここまで。</p>
<p>&nbsp;</p>
<p>買う方としては簡単に取り出して決済ができて、なおかつポイントがたまるので便利。</p>
<p>何がすごいかというのを以下自分なりにまとめてみた。</p>
<p>&nbsp;</p>
<h2> ポスターから直購入</h3>
<p>電車の待ち時間に目の前のポスターから直接購入できる。</p>
<p>また、これはポスターだけではなくカタログやフライヤーなど全ての紙媒体に言えることだ。</p>
<p>今まで成果が見えづらかった屋外広告がトレースできるだけでなく直接売上につながるのは新しい感覚だ。</p>
<p>&nbsp;</p>
<h2>小規模小売店で</h3>
<p>SquareやCoineyは結局設備投資を抑えたい小さな小売店に強いニーズがあるが<br />
ZNAPはそれらに必要な一切の端末が不要。</p>
<p>お品書きにQRをそれぞれ記載しておくこともできるし、<br />
合計金額を計算後画面にQRが出るようにすればトータルでの会計もきる。</p>
<p>むしろクレジットカードを持っている必要はない。</p>
<p>実は飲食店バージョンはZNAP自らコンセプトショップをやっているとのこと。</p>
<p><a href="http://consumer.znap.com/ja_JP/znap-news-press.html#znap-qrbar_16" target="_blank"> http://consumer.znap.com/ja_JP/znap-news-press.html#znap-qrbar_16</a></p>
<p>手数料も安く、3.24％とのこと。</p>
<p>&nbsp;</p>
<h2>販促</h3>
<p>提携店舗のクーポン情報を受け取れる。(使い込んでいないがおそらく位置情報でクーポンを受け取れる)</p>
<p>また、購入履歴には商品情報の他に位置情報も記憶されており、ニーズを抽出してクーポンをレコメンドできる。</p>
<p>あとはポイントがたまるので利用価値も高くなる。</p>
<p>&nbsp;</p>
<h2>まとめ</h3>
<p>非常によく出来た良い仕組みと思うが、最終的には対応店舗がネックになると思うので</p>
<p>これからはマーケティングが最も重要と感じた。</p>
<p>過去記事などを見ると計画的にマーケティングをしているようで、トータルで期待できる気がする。</p>
<p>あとはどこか大規模な超有名店が対応するなどして一気に広がるかもしれない。</p>
<p>ジャンルはわからないが、動きやすく競争過多である飲食店などで導入されるかもしれない。</p>


あらゆる場所が店になるZNAP

jQueryとWebフォントでスマホの傾きで色の変わるアイコンを作ってみる

<p>PHPには、関数の引数の対象が変数のみになるものがあります。<br />
一番よく使うのは多分issetやemptyになります。<br />
ありがちかつ訳分からないミスは、関数を引数として、issetやemptyに渡すことです。<br />
サンプルコードを見てみましょう。</p>
<p></p>

		<div id="crayon-64953fd597400981650628" 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">PHP</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;?php
$user = new User();
// 正
if (isset($user-&gt;name) &amp;&amp; !empty($user-&gt;name)) {
	// 直接属性(変数)を使うならOK→nameはpublicだから外部からもアクセスできる
}
// 誤
if (isset($user-&gt;getAge()) &amp;&amp; !empty($user-&gt;getAge())) {
	// issetやemptyに関数（メソッド）は使えない→syntax errorになる
	// Fatal error: Can't use function return value in write context 
}
// これならOK
$age = $user-&gt;getAge();
if (isset($age) &amp;&amp; !empty($age)) {

}

class User
{
	public $name;

	private $age;

    public function getName()
    {
        return $this-&gt;name;
    }

    public function setName($name)
    {
        $this-&gt;name = $name;
    }


    public function getAge()
    {
        return $this-&gt;age;
    }

    public function setAge($age)
    {
        $this-&gt;age = $age;
    }

}</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-64953fd597400981650628-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd597400981650628-2">2</div><div class="crayon-num" data-line="crayon-64953fd597400981650628-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd597400981650628-4">4</div><div class="crayon-num" data-line="crayon-64953fd597400981650628-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd597400981650628-6">6</div><div class="crayon-num" data-line="crayon-64953fd597400981650628-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd597400981650628-8">8</div><div class="crayon-num" data-line="crayon-64953fd597400981650628-9">9</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd597400981650628-10">10</div><div class="crayon-num" data-line="crayon-64953fd597400981650628-11">11</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd597400981650628-12">12</div><div class="crayon-num" data-line="crayon-64953fd597400981650628-13">13</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd597400981650628-14">14</div><div class="crayon-num" data-line="crayon-64953fd597400981650628-15">15</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd597400981650628-16">16</div><div class="crayon-num" data-line="crayon-64953fd597400981650628-17">17</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd597400981650628-18">18</div><div class="crayon-num" data-line="crayon-64953fd597400981650628-19">19</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd597400981650628-20">20</div><div class="crayon-num" data-line="crayon-64953fd597400981650628-21">21</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd597400981650628-22">22</div><div class="crayon-num" data-line="crayon-64953fd597400981650628-23">23</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd597400981650628-24">24</div><div class="crayon-num" data-line="crayon-64953fd597400981650628-25">25</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd597400981650628-26">26</div><div class="crayon-num" data-line="crayon-64953fd597400981650628-27">27</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd597400981650628-28">28</div><div class="crayon-num" data-line="crayon-64953fd597400981650628-29">29</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd597400981650628-30">30</div><div class="crayon-num" data-line="crayon-64953fd597400981650628-31">31</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd597400981650628-32">32</div><div class="crayon-num" data-line="crayon-64953fd597400981650628-33">33</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd597400981650628-34">34</div><div class="crayon-num" data-line="crayon-64953fd597400981650628-35">35</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd597400981650628-36">36</div><div class="crayon-num" data-line="crayon-64953fd597400981650628-37">37</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd597400981650628-38">38</div><div class="crayon-num" data-line="crayon-64953fd597400981650628-39">39</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd597400981650628-40">40</div><div class="crayon-num" data-line="crayon-64953fd597400981650628-41">41</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd597400981650628-42">42</div><div class="crayon-num" data-line="crayon-64953fd597400981650628-43">43</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd597400981650628-44">44</div><div class="crayon-num" data-line="crayon-64953fd597400981650628-45">45</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-64953fd597400981650628-1"><span class="crayon-ta">&lt;?php</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd597400981650628-2"><span class="crayon-v">$user</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-e">User</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-64953fd597400981650628-3"><span class="crayon-c">// 正</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd597400981650628-4"><span class="crayon-st">if</span><span class="crayon-h"> </span><span class="crayon-sy">(</span><span class="crayon-k ">isset</span><span class="crayon-sy">(</span><span class="crayon-v">$user</span>-<span class="crayon-h">&gt;</span><span class="crayon-i">name</span><span class="crayon-sy">)</span><span class="crayon-h"> </span><span class="crayon-sy">&amp;&amp; !empty($user-&gt;name)) {</span></div><div class="crayon-line" id="crayon-64953fd597400981650628-5"><span class="crayon-sy">	// 直接属性(変数)を使うならOK→nameはpublicだから外部からもアクセスできる</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd597400981650628-6"><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-64953fd597400981650628-7"><span class="crayon-sy">// 誤</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd597400981650628-8"><span class="crayon-sy">if (isset($user-&gt;getAge()) &amp;&amp; !empty($user-&gt;getAge())) {</span></div><div class="crayon-line" id="crayon-64953fd597400981650628-9"><span class="crayon-sy">	// issetやemptyに関数（メソッド）は使えない→syntax errorになる</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd597400981650628-10"><span class="crayon-sy">	// Fatal error: Can't use function return value in write context </span></div><div class="crayon-line" id="crayon-64953fd597400981650628-11"><span class="crayon-sy">}</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd597400981650628-12"><span class="crayon-sy">// これならOK</span></div><div class="crayon-line" id="crayon-64953fd597400981650628-13"><span class="crayon-sy">$age = $user-&gt;getAge();</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd597400981650628-14"><span class="crayon-st">if</span><span class="crayon-h"> </span><span class="crayon-sy">(</span><span class="crayon-k ">isset</span><span class="crayon-sy">(</span><span class="crayon-v">$age</span><span class="crayon-sy">)</span><span class="crayon-h"> </span><span class="crayon-sy">&amp;&amp; !empty($age)) {</span></div><div class="crayon-line" id="crayon-64953fd597400981650628-15">&nbsp;</div><div class="crayon-line crayon-striped-line" id="crayon-64953fd597400981650628-16"><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-64953fd597400981650628-17">&nbsp;</div><div class="crayon-line crayon-striped-line" id="crayon-64953fd597400981650628-18"><span class="crayon-sy">class User</span></div><div class="crayon-line" id="crayon-64953fd597400981650628-19"><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd597400981650628-20"><span class="crayon-sy">	public $name;</span></div><div class="crayon-line" id="crayon-64953fd597400981650628-21">&nbsp;</div><div class="crayon-line crayon-striped-line" id="crayon-64953fd597400981650628-22"><span class="crayon-h">	</span><span class="crayon-m">private</span><span class="crayon-h"> </span><span class="crayon-v">$age</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-64953fd597400981650628-23">&nbsp;</div><div class="crayon-line crayon-striped-line" id="crayon-64953fd597400981650628-24"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-m">public</span><span class="crayon-h"> </span><span class="crayon-t">function</span><span class="crayon-h"> </span><span class="crayon-e">getName</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span></div><div class="crayon-line" id="crayon-64953fd597400981650628-25"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd597400981650628-26"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-k ">return</span><span class="crayon-h"> </span><span class="crayon-v">$this</span>-<span class="crayon-h">&gt;</span><span class="crayon-i">name</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-64953fd597400981650628-27"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">}</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd597400981650628-28">&nbsp;</div><div class="crayon-line" id="crayon-64953fd597400981650628-29"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-m">public</span><span class="crayon-h"> </span><span class="crayon-t">function</span><span class="crayon-h"> </span><span class="crayon-e">setName</span><span class="crayon-sy">(</span><span class="crayon-v">$name</span><span class="crayon-sy">)</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd597400981650628-30"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-64953fd597400981650628-31"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">$this</span>-<span class="crayon-h">&gt;</span><span class="crayon-i">name</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-v">$name</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd597400981650628-32"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-64953fd597400981650628-33">&nbsp;</div><div class="crayon-line crayon-striped-line" id="crayon-64953fd597400981650628-34">&nbsp;</div><div class="crayon-line" id="crayon-64953fd597400981650628-35"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-m">public</span><span class="crayon-h"> </span><span class="crayon-t">function</span><span class="crayon-h"> </span><span class="crayon-e">getAge</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd597400981650628-36"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-64953fd597400981650628-37"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-k ">return</span><span class="crayon-h"> </span><span class="crayon-v">$this</span>-<span class="crayon-h">&gt;</span><span class="crayon-i">age</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd597400981650628-38"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-64953fd597400981650628-39">&nbsp;</div><div class="crayon-line crayon-striped-line" id="crayon-64953fd597400981650628-40"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-m">public</span><span class="crayon-h"> </span><span class="crayon-t">function</span><span class="crayon-h"> </span><span class="crayon-e">setAge</span><span class="crayon-sy">(</span><span class="crayon-v">$age</span><span class="crayon-sy">)</span></div><div class="crayon-line" id="crayon-64953fd597400981650628-41"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd597400981650628-42"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">$this</span>-<span class="crayon-h">&gt;</span><span class="crayon-i">age</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-v">$age</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-64953fd597400981650628-43"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">}</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd597400981650628-44">&nbsp;</div><div class="crayon-line" id="crayon-64953fd597400981650628-45"><span class="crayon-sy">}</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p> </p>
<p>これらの関数の一覧は<a href="http://www.php.net/manual/ja/ref.var.php" target="_blank">ここ</a>です。</p>

【PHP】変数操作関数

<p>サーバ監視の観点でツール調べてみましたが、<br />
需要がクライアントごと違いますので、カスタマイズせずに直接使うのは難しいかと思います。<br />
Linuxサーバが付いている無料のツールlogwatchを使って、レポートの内容をカスタマイズするやり方がいいかと思います。<br />
※ただし、レポートは英語と、たまにログの内容そのままが出てくるのは難点です。</p>
<h2>インストールおよび設定</h3>
<p><a href="http://blog.thingslabo.com/archives/000054.html">こちら</a>が分かりやすいかと思います。<br />
設定項目が多いので、また調査中です。</p>
<h2>レポートの内容</h3>
<p>レポートが指定されたメールアドレスに送信されますので、下記はその内容の抜粋です。</p>
<h3>cron</h4>
<p>実行のスクリプトとその回数</p>
<h3>mail（dovecot→受信、postfix→送信）</h4>
<p>１、受信をするため、ユーザごとのログイン回数（IP付き）<br />
２、送信メールの数、および拒否したRelay（こちらのサーバを使ってメールを転送すること）</p>
<h3>httpd</h4>
<p>１、転送総量とタイプ別（Image/Document/Archive/Sound file/Content page/Redirect/Font/Other）の転送量<br />
２、検知したハッキング（回数、IP付き）<br />
３、レスポンスエラー（エラーコード別でurlと回数がでてくる）<br />
４、robotの訪問回数（UA付き）</p>
<h3>sshd</h4>
<p>不正ログインしようとしていたIPと回数（アカウント別、使ったパスワードまで分かる）</p>
<h3>disk space</h4>
<p>どれぐらい残っているかが分かる</p>
<h2>レポートを見た感想</h3>
<p>・文字だけで少々分かりにくい<br />
・ハッキングが多いからセキュリティを許可すべく</p>


logwatch

<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>ナイキの「FuelBand（日本未上陸）」「UP by JAWBONE」「Fitbit One」らが昨年あたりから出始め、ライフログを残す、ヘルスケアを行うために日々の活動を記録していくリストバンド型の活動量計が流行っています。各社から製品が続々と登場しており、興味を持ってみましたので調べてみました。</p>
<h2>定番</h3>
<p>ヘルスケアバンドの火付け役ともいうべきモデル</p>
<h3>NIKE『 FUELBAND SE』</h4>
<p><a href="/uploads-archive/2014/01/fuelband.jpeg"><img decoding="async" loading="lazy" class="aligncenter size-medium wp-image-4151" alt="fuelband" src="/uploads-archive/2014/01/fuelband-300x168.jpeg" width="300" height="168" srcset="/uploads-archive/2014/01/fuelband-300x168.jpeg 300w, /uploads-archive/2014/01/fuelband-1024x576.jpeg 1024w, /uploads-archive/2014/01/fuelband-228x128.jpeg 228w, /uploads-archive/2014/01/fuelband.jpeg 1600w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<p><a href="http://www.nike.com/jp/ja_jp/c/nikeplus-fuelband" target="_blank">http://www.nike.com/jp/ja_jp/c/nikeplus-fuelband</a></p>
<p>&nbsp;</p>
<h3>JAWBONE『UP by JAWBONE』</h4>
<p><a href="/uploads-archive/2014/01/Jawbone-Up.jpg"><img decoding="async" loading="lazy" class="aligncenter size-medium wp-image-4152" alt="Jawbone-Up" src="/uploads-archive/2014/01/Jawbone-Up-300x168.jpg" width="300" height="168" srcset="/uploads-archive/2014/01/Jawbone-Up-300x168.jpg 300w, /uploads-archive/2014/01/Jawbone-Up-1024x576.jpg 1024w, /uploads-archive/2014/01/Jawbone-Up-228x128.jpg 228w, /uploads-archive/2014/01/Jawbone-Up.jpg 1200w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<p><a href="https://jawbone.com/up/international" target="_blank">https://jawbone.com/up/international</a></p>
<p>&nbsp;</p>
<h3>Fitbit One</h4>
<p><a href="/uploads-archive/2014/01/fitbit-one.jpg"><img decoding="async" loading="lazy" class="aligncenter size-medium wp-image-4153" alt="fitbit-one" src="/uploads-archive/2014/01/fitbit-one-300x183.jpg" width="300" height="183" srcset="/uploads-archive/2014/01/fitbit-one-300x183.jpg 300w, /uploads-archive/2014/01/fitbit-one-228x139.jpg 228w, /uploads-archive/2014/01/fitbit-one.jpg 600w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<p><a href="http://www.fitbit.com/jp/one" target="_blank">http://www.fitbit.com/jp/one</a></p>
<p>&nbsp;</p>
<h2>新規参入</h3>
<p>2014年の世界最大の家電市CESでは続々と大手企業が発表をしています。</p>
<h3>SONY『SmartBand』</h4>
<p><a href="/uploads-archive/2014/01/SmartBand.jpg"><img decoding="async" loading="lazy" class="aligncenter size-medium wp-image-4154" alt="SmartBand" src="/uploads-archive/2014/01/SmartBand-300x225.jpg" width="300" height="225" srcset="/uploads-archive/2014/01/SmartBand-300x225.jpg 300w, /uploads-archive/2014/01/SmartBand-228x171.jpg 228w, /uploads-archive/2014/01/SmartBand.jpg 620w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<p><a href="http://www.gizmodo.jp/2014/01/ces_smartband_swr10.html">感情も追跡する!?　ソニーのフィットネスバンド「SmartBand SWR10」</a></p>
<h3>ガーミン『Vívofit』</h4>
<p><a href="/uploads-archive/2014/01/Garmin.jpg"><img decoding="async" loading="lazy" class="aligncenter size-medium wp-image-4155" alt="Garmin" src="/uploads-archive/2014/01/Garmin-300x168.jpg" width="300" height="168" srcset="/uploads-archive/2014/01/Garmin-300x168.jpg 300w, /uploads-archive/2014/01/Garmin-228x128.jpg 228w, /uploads-archive/2014/01/Garmin.jpg 640w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<p><a href="http://www.gizmodo.jp/2014/01/ces_5.html">運動マニアじゃない人にこそオススメ！　ガーミンがフィットネスバンド市場に参入</a></p>
<h2>携帯キャリア</h3>
<p>日本の3キャリアも漏れなく発表しております。smartphoneを売りたいキャリアと相性がいいガジェットなんでしょうね。</p>
<h3>ドコモ・ヘルスケア『ムーヴバンド』</h4>
<p><a href="/uploads-archive/2014/01/moveband_img_2.jpg"><img decoding="async" loading="lazy" class="aligncenter size-medium wp-image-4157" alt="moveband_img_2" src="/uploads-archive/2014/01/moveband_img_2-300x120.jpg" width="300" height="120" srcset="/uploads-archive/2014/01/moveband_img_2-300x120.jpg 300w, /uploads-archive/2014/01/moveband_img_2-228x91.jpg 228w, /uploads-archive/2014/01/moveband_img_2.jpg 929w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<p><a href="http://www.d-healthcare.co.jp/products/moveband/" target="_blank">http://www.d-healthcare.co.jp/products/moveband/</a></p>
<h3>au『SHINE™』</h4>
<p><a href="/uploads-archive/2014/01/shine-img-03.jpg"><img decoding="async" loading="lazy" class="aligncenter size-medium wp-image-4158" alt="shine-img-03" src="/uploads-archive/2014/01/shine-img-03-300x298.jpg" width="300" height="298" srcset="/uploads-archive/2014/01/shine-img-03-300x298.jpg 300w, /uploads-archive/2014/01/shine-img-03-150x150.jpg 150w, /uploads-archive/2014/01/shine-img-03-228x226.jpg 228w, /uploads-archive/2014/01/shine-img-03-120x120.jpg 120w, /uploads-archive/2014/01/shine-img-03.jpg 316w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<p><a href="http://www.au.kddi.com/mobile/product/plus-one/iphone/special-shine/" target="_blank">http://www.au.kddi.com/mobile/product/plus-one/iphone/special-shine/</a></p>
<h3>SoftBank 『HealthCare』</h4>
<p><a href="/uploads-archive/2014/01/maxresdefault.jpg"><img decoding="async" loading="lazy" class="aligncenter size-medium wp-image-4156" alt="maxresdefault" src="/uploads-archive/2014/01/maxresdefault-300x168.jpg" width="300" height="168" srcset="/uploads-archive/2014/01/maxresdefault-300x168.jpg 300w, /uploads-archive/2014/01/maxresdefault-1024x576.jpg 1024w, /uploads-archive/2014/01/maxresdefault-228x128.jpg 228w, /uploads-archive/2014/01/maxresdefault.jpg 1280w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<p><a href="http://www.softbank.jp/mobile/service/softbankhealthcare/" target="_blank">http://www.softbank.jp/mobile/service/softbankhealthcare/</a></p>
<h2>まとめ</h3>
<p>デザインはnike,up,sonyが抜けていますね。あとは、本来の機能や、閲覧のためのアプリの出来といったところの比較となるのでしょうがまだ情報が出揃っておらず、発売を控えている商品が多いため引き続きウォッチしていきたいと思います。</p>
<div id="extensionsWeblioEjBx" style="position: absolute; z-index: 2147483647; left: 298px; top: 2041px;"><iframe loading="lazy" src="//api.weblio.jp/act/quote/v_1_0/e/?q=moveband&amp;type=emicro&amp;opul=chrome-extension%3A%2F%2Foingodpdjohhkelnginmkagmkbplgema%2Foptions.html" name="weblioExtensionsFrame" width="380" height="60" border="0" frameborder="0" scrolling="no"></iframe></div>
<div id="extensionsWeblioEjBx" style="position: absolute; z-index: 2147483647; left: 22px; top: 570px;"><iframe loading="lazy" src="//api.weblio.jp/act/quote/v_1_0/e/?q=UP&amp;type=emicro&amp;opul=chrome-extension%3A%2F%2Foingodpdjohhkelnginmkagmkbplgema%2Foptions.html" name="weblioExtensionsFrame" width="380" height="60" border="0" frameborder="0" scrolling="no"></iframe></div>


2014年はフィットネスバンド元年？

<p>&nbsp;</p>
<p><a href="/uploads-archive/2014/01/9784534051271-B-1-L.jpg"><img decoding="async" loading="lazy" class="aligncenter size-medium wp-image-4131" alt="9784534051271-B-1-L" src="/uploads-archive/2014/01/9784534051271-B-1-L-207x300.jpg" width="207" height="300" srcset="/uploads-archive/2014/01/9784534051271-B-1-L-207x300.jpg 207w, /uploads-archive/2014/01/9784534051271-B-1-L-228x329.jpg 228w, /uploads-archive/2014/01/9784534051271-B-1-L.jpg 346w" sizes="(max-width: 207px) 100vw, 207px" /></a></p>
<p><a href="http://www.amazon.co.jp/%E4%B8%80%E7%94%9F%E3%81%8A%E9%87%91%E3%81%AB%E5%9B%B0%E3%82%89%E3%81%AA%E3%81%84%E3%80%8C%E8%8F%AF%E5%83%91%E3%80%8D%E3%81%AE%E6%80%9D%E8%80%83%E6%B3%95%E5%89%87-%E5%A4%A7%E5%9F%8E-%E5%A4%AA/dp/4534051271/" target="_blank">http://www.amazon.co.jp/%E4%B8%80%E7%94%9F%E3%81%8A%E9%87%91%E3%81%AB%E5%9B%B0%E3%82%89%E3%81%AA%E3%81%84%E3%80%8C%E8%8F%AF%E5%83%91%E3%80%8D%E3%81%AE%E6%80%9D%E8%80%83%E6%B3%95%E5%89%87-%E5%A4%A7%E5%9F%8E-%E5%A4%AA/dp/4534051271/</a></p>
<p>&nbsp;</p>
<p>を読みました。</p>
<p>シリコンバレーなどのワークスタイルなどはよく耳にしますが、近そうで意外と遠いこういった特定の集団のビジネスに対する考え方はなかなか耳にしたことがなく、新鮮に感じたので少しまとめてみました。</p>
<p>&nbsp;</p>
<h2>考え方</h3>
<p>◯◯になれると思っている。から焦りが無い<br />
1人でやらない。考える人、実行する人、金を出す人<br />
とりあえずやる。やりながら成功への道筋を考える<br />
失敗はない。失うのはお金だけ、勇気を失わなければ失敗でない<br />
小さな失敗の積み重ねが成功。ただ致命傷はだめ<br />
ものさしは2本。直近と未来、同時にみなければならない</p>
<h2>人</h3>
<p>できない人をあえて使う。できない人が他の人を伸ばし、できる新たな方向が見える<br />
同じ価値観の者が集まっても意味が無い。多様な発想を持った組織が強い<br />
食事を共にするのは3大欲求で唯一共有できるから<br />
貴人という考え方。それは自分を高めてくれる人。その人との出会いまでは自分を磨く準備期間<br />
嫌いな人をあえてまぜる。嫌いな人は自分と違う考え方、人脈を持っている<br />
好き、嫌いと付き合いは違う<br />
メールはエビデンスが残るから使わない。エビデンスがあれば相手を許せない<br />
教育は放置。致命傷だけは負うな。失敗は後で説明</p>
<h2>金</h3>
<p>自分の身の回りには金を使わなず周りに使う。それは周りに貯金しているという感覚<br />
徹底して純利益を計算。時間や伝票1枚まで計算する<br />
回収するお金、貸すお金、あげるお金の考え方と未来予想が明確<br />
回収する時間もお金である<br />
金は天下の回りもの。天下は大事な仲間という意味<br />
親子でもお金の貸借概念。教育は貸すであり返すことを徹底</p>
<h2>営業</h3>
<p>スケジュールを入れない。休日、時間は関係なくチャンスは一瞬<br />
大事のためにはそれ以外をシャットアウト<br />
ダブルブッキングをあえてする。マッチングさせ相乗効果を<br />
結果のためなら土下座も余裕。日本人はかっこつけすぎ</p>
<h2>ライフハック</h3>
<p>大きな声をださない。大きな声より小さな声の方が相手に届く<br />
目を見て話さない。口を見る<br />
メールは使わない。メールは最も決断が遅いツール<br />
直接会う &gt; 電話 &gt; チャット &gt; メール<br />
である<br />
昼寝をする。午前中は頭が良く働く。昼寝でそれがもう一度できる</p>
<p>&nbsp;</p>
<p>自分としては、自分と違う価値観のネットワークを築くこと、特に嫌いな人に焦点を当てているところが勉強になりました。</p>


読書感想 一生お金に困らない華僑の思考方法

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


Company

Our Solutions

Support

News

Blog

Blogブログ

カテゴリーから探す

年別から見る

記事一覧

2014/02/14

2014/02/14

2014/02/14

2014/02/13

2014/02/13

2014/02/13

2014/02/13

2014/02/05

2014/02/05

2014/02/05

2014/02/05

2014/02/04

2014/01/29

2014/01/29

2014/01/29

2014/01/29

2014/01/29

2014/01/29