<h2>はじめに</h2>
<div style="padding-left: 15px;">
スキャンデータなど傾きの多い画像を<br />
筆者が以前よく扱っていた際に「楽して一括補正出来ないだろうか」と思い勉強した内容です。</p>
<p>※残念ながら完成間近にしてソースが全て消えたため、頓挫しました。</p></div>
<h2>線の検出の仕方</h2>
<div style="padding-left: 15px;">
本稿では「ハフ変換」と言う座標変換を使った方法を扱います。<br />
直交座標(x-y座標)と極座標(ρ-θ)を行ったり来たりすることで傾きを検出します。</p>
<p>円の検出も出来るのですが、今回は割愛します。</p></div>
<h2>ハフ変換の導入</h2>
<div style="padding-left: 15px;">
まず、直交座標上に(x, y)と言う点があるとき、<br />
この点を通る全ての直線は<br />
<div id="attachment_8275" style="width: 310px" class="wp-caption alignnone"><a href="/uploads-archive/2015/10/image01.png"><img aria-describedby="caption-attachment-8275" decoding="async" loading="lazy" src="/uploads-archive/2015/10/image01-300x49.png" alt="ハフ変換式" width="300" height="49" class="size-medium wp-image-8275" srcset="/uploads-archive/2015/10/image01-300x49.png 300w, /uploads-archive/2015/10/image01-228x37.png 228w, /uploads-archive/2015/10/image01.png 800w" sizes="(max-width: 300px) 100vw, 300px" /></a><p id="caption-attachment-8275" class="wp-caption-text">ハフ変換式</p></div></p>
<p>のように表すことが出来ます。</p>
<p>それぞれ、原点から直線に垂直に線を引いた際の距離(ρ)、角度(θ)となります。<br />
そしてこの距離と角度で表した座標のことを極座標と言います。</p>
<p>以下の図が参考事例です。<br />
<div id="attachment_8276" style="width: 308px" class="wp-caption alignnone"><a href="/uploads-archive/2015/10/figure1.gif"><img aria-describedby="caption-attachment-8276" decoding="async" loading="lazy" src="/uploads-archive/2015/10/figure1.gif" alt="ハフ変換の原理" width="298" height="300" class="size-medium wp-image-8276" /></a><p id="caption-attachment-8276" class="wp-caption-text">ハフ変換の原理</p></div>
</div>
<h2>ハフ変換の簡単な事例</h2>
<div style="padding-left: 15px;">
数値的に簡単な事例をあげたいと思います。<br />
x-y座標に以下の様な y = -x + 2 の直線(1)があるとします。<br />
<a href="/uploads-archive/2015/10/image00.png"><img decoding="async" loading="lazy" src="/uploads-archive/2015/10/image00-300x192.png" alt="image00" width="300" height="192" class="alignnone size-medium wp-image-8277" srcset="/uploads-archive/2015/10/image00-300x192.png 300w, /uploads-archive/2015/10/image00-1024x654.png 1024w, /uploads-archive/2015/10/image00-228x146.png 228w, /uploads-archive/2015/10/image00.png 1196w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<p>この直線は(1,1)を通ります。<br />
これを極座標に変換してみると<br />
ρ = cos(θ) + sin(θ)<br />
と、以下の様な円を描きます。<br />
<div id="attachment_8274" style="width: 310px" class="wp-caption alignnone"><a href="/uploads-archive/2015/10/image02.png"><img aria-describedby="caption-attachment-8274" decoding="async" loading="lazy" src="/uploads-archive/2015/10/image02-300x193.png" alt="x=1, y=1を通る直線の集合" width="300" height="193" class="size-medium wp-image-8274" srcset="/uploads-archive/2015/10/image02-300x193.png 300w, /uploads-archive/2015/10/image02-1024x660.png 1024w, /uploads-archive/2015/10/image02-228x147.png 228w, /uploads-archive/2015/10/image02.png 1642w" sizes="(max-width: 300px) 100vw, 300px" /></a><p id="caption-attachment-8274" class="wp-caption-text">x=1, y=1を通る直線の集合</p></div><br />
大抵の座標では放物線を描きますが、Mac標準搭載のGrapherでは何故か円を描きました。。ここはスルー。</p>
<p>更に、1の直線は(1.5, 0.5)も通ります。<br />
この時の極座標は以下のような円となります。<br />
<div id="attachment_8278" style="width: 310px" class="wp-caption alignnone"><a href="/uploads-archive/2015/10/image03.png"><img aria-describedby="caption-attachment-8278" decoding="async" loading="lazy" src="/uploads-archive/2015/10/image03-300x193.png" alt="x=1.5, y=0.5を通る直線の集合" width="300" height="193" class="size-medium wp-image-8278" srcset="/uploads-archive/2015/10/image03-300x193.png 300w, /uploads-archive/2015/10/image03-1024x660.png 1024w, /uploads-archive/2015/10/image03-228x147.png 228w, /uploads-archive/2015/10/image03.png 1642w" sizes="(max-width: 300px) 100vw, 300px" /></a><p id="caption-attachment-8278" class="wp-caption-text">x=1.5, y=0.5を通る直線の集合</p></div></p>
<p>上の2と3の交点を求めると<br />
<div id="attachment_8279" style="width: 310px" class="wp-caption alignnone"><a href="/uploads-archive/2015/10/image04.png"><img aria-describedby="caption-attachment-8279" decoding="async" loading="lazy" src="/uploads-archive/2015/10/image04-300x193.png" alt="2点どちらも通る直線が赤のバツで示した交点" width="300" height="193" class="size-medium wp-image-8279" srcset="/uploads-archive/2015/10/image04-300x193.png 300w, /uploads-archive/2015/10/image04-1024x660.png 1024w, /uploads-archive/2015/10/image04-228x147.png 228w, /uploads-archive/2015/10/image04.png 1642w" sizes="(max-width: 300px) 100vw, 300px" /></a><p id="caption-attachment-8279" class="wp-caption-text">2点どちらも通る直線が赤のバツで示した交点</p></div></p>
<p>のようになります。<br />
この交点は「(1,1)も通るし、(1.5,0.5)も通る直線」を意味します。</p>
<p>この点はρ=√2, θ=1/4πです。</p>
<blockquote><p>Hough逆変換は、<br />
y = -(cosθ/sinθ)・x + ρ/sinθ<br />
　　および<br />
x = -(sinθ/cosθ)・y + ρ/cosθ</p></blockquote>
<p>より、x-y座標に逆変換すると・・・<br />
y=-x+2</p>
<p>が求まります！</p></div>
<h2>実際に使うとして</h2>
<div style="padding-left: 15px;">
しかし、この方法はノイズに弱い、無駄な点の情報を拾ってしまうなどの欠点があります。</p>
<p>そのため、実際の実装としては、<br />
・ノイズを除去する<br />
・輪郭強調フィルタをかけてエッジ部分だけを処理するようにする<br />
などの手順を踏まなければなりません。</p>
<p>また実際の画像は全て必ず一定の直線とは限らないため、<br />
平均を取る処理など色々実践で使うには工夫が必要ですが、基本的な理論は三角関数と極座標を知っていれば理解可能なものです。</p>
<p>筆者の対象は書籍が主ですが、実写でも判別がしやすいものであれば・・・<br />
<a href="/uploads-archive/2015/10/before.png"><img decoding="async" loading="lazy" src="/uploads-archive/2015/10/before-300x226.png" alt="before" width="300" height="226" class="alignnone size-medium wp-image-8290" srcset="/uploads-archive/2015/10/before-300x226.png 300w, /uploads-archive/2015/10/before-228x172.png 228w, /uploads-archive/2015/10/before.png 396w" sizes="(max-width: 300px) 100vw, 300px" /></a><br />
このような画像も・・・<br />
<a href="/uploads-archive/2015/10/after.png"><img decoding="async" loading="lazy" src="/uploads-archive/2015/10/after-300x226.png" alt="after" width="300" height="226" class="alignnone size-medium wp-image-8291" srcset="/uploads-archive/2015/10/after-300x226.png 300w, /uploads-archive/2015/10/after-228x172.png 228w, /uploads-archive/2015/10/after.png 396w" sizes="(max-width: 300px) 100vw, 300px" /></a><br />
こんな感じに勝手に回転してくれます。</p>
<p>四隅に出来る余白の補間はひじょ〜〜〜〜に難しいので当面は対象外です。。。</p></div>


image01-300x491.png

画像の解析初級編 (傾きを検出してみる)

<p>ECサイト上の商品などで、PDFのパンフレットをアップし</p>
<p>そのままサイト上でサムネイル画像を表示したいといった類の依頼が2件ほどあった。</p>
<p>少し興味があったので調べてみた結果、方法としては3つほどあることがわかった</p>
<p>&nbsp;</p>
<h2>1. Jqueryプラグイン</h2>
<p><a class="demo" href="/demo/hoshino/58/pdfSlider.html" target="_blank">デモ</a></p>
<p>pdfSliderというのをつかったのだが、若干用途が違うようで</p>
<p>スライダーとしては優秀っぽいのだが、サムネイルとしては機能しないようだ。</p>
<p>他のプラグインも探したのだが、自分が見つけられたのはこの類だった</p>
<p>&nbsp;</p>
<p>一応このプラグインの設置方法を紹介</p>
<p>jQuery、pdfSlider.css、pdfSlider.jsを読み込み、</p>
<p>■HTML</p>

		<div id="crayon-649540158c568660001178" 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="carousel"&gt;
    &lt;object data="pdf/JISrirekisho.pdf" type="application/pdf" data-caption="original"&gt;&lt;/object&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-649540158c568660001178-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540158c568660001178-2">2</div><div class="crayon-num" data-line="crayon-649540158c568660001178-3">3</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 13px !important; line-height: 18px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-649540158c568660001178-1"><span class="crayon-r ">&lt;div </span><span class="crayon-e ">id</span>=<span class="crayon-s ">"carousel"</span><span class="crayon-r ">&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540158c568660001178-2"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r ">&lt;object </span><span class="crayon-e ">data</span>=<span class="crayon-s ">"pdf/JISrirekisho.pdf"</span><span class="crayon-h"> </span><span class="crayon-e ">type</span>=<span class="crayon-s ">"application/pdf"</span><span class="crayon-h"> </span><span class="crayon-e ">data-caption</span>=<span class="crayon-s ">"original"</span><span class="crayon-r ">&gt;</span><span class="crayon-r ">&lt;/object&gt;</span></div><div class="crayon-line" id="crayon-649540158c568660001178-3"><span class="crayon-r ">&lt;/div&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>&nbsp;</p>
<p>■JS</p>

		<div id="crayon-649540158c56c676922943" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover wrap" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 18px !important;">
		
			<div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><span class="crayon-title"></span>
			<div class="crayon-tools" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div><span class="crayon-language">JavaScript</span></div></div>
			<div class="crayon-info" style="min-height: 19.5px !important; line-height: 19.5px !important;"></div>
			<div class="crayon-plain-wrap"><textarea  class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 13px !important; line-height: 18px !important;">
&lt;script type="text/javascript"&gt;
	$(function($) {
		$("#carousel").pdfSlider();
	});
&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-649540158c56c676922943-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540158c56c676922943-2">2</div><div class="crayon-num" data-line="crayon-649540158c56c676922943-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540158c56c676922943-4">4</div><div class="crayon-num" data-line="crayon-649540158c56c676922943-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-649540158c56c676922943-1"><span class="crayon-ta">&lt;script </span><span class="crayon-e ">type</span>=<span class="crayon-s">"text/javascript"</span><span class="crayon-h">&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540158c56c676922943-2"><span class="crayon-h">	</span><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><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-649540158c56c676922943-3"><span class="crayon-h">		</span><span class="crayon-sy">$</span><span class="crayon-sy">(</span><span class="crayon-s">"#carousel"</span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-e">pdfSlider</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-649540158c56c676922943-4"><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-649540158c56c676922943-5"><span class="crayon-ta">&lt;/script&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>と記述する。</p>
<p>&nbsp;</p>
<p>オプションなどの容易はあまりないようで、</p>
<p>ターゲットとなる要素の中に必ずobjectタグを設置しdata、type、data-captionを記述する仕様のようだ</p>
<p>&nbsp;</p>
<h2>2. embedタグ</h2>
<p><a class="demo" href="/demo/hoshino/58/embed.html" target="_blank">デモ</a></p>
<p>すごく良い感じ。調べたところブラウザもメジャーなものは大丈夫そう。</p>
<p>ただ、スクロールバーがどうやっても消えないのと、当たり前だがAcrobat readerが入っていないと動かない。</p>
<p>ちなみにソースはこれだけ</p>

		<div id="crayon-649540158c56e722799036" 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;embed type="application/pdf" src="pdf/JISrirekisho.pdf" style="width: 200px; height: 100px; overflow: hidden;"&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-649540158c56e722799036-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-649540158c56e722799036-1"><span class="crayon-r ">&lt;embed </span><span class="crayon-e ">type</span>=<span class="crayon-s ">"application/pdf"</span><span class="crayon-h"> </span><span class="crayon-e ">src</span>=<span class="crayon-s ">"pdf/JISrirekisho.pdf"</span><span class="crayon-h"> </span><span class="crayon-e ">style</span>=<span class="crayon-s ">"width: 200px; height: 100px; overflow: hidden;"</span><span class="crayon-r ">&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>&nbsp;</p>
<h2>3. Google Docs</h2>
<p>最後はこちら。</p>
<p><a class="demo" href="/demo/hoshino/58/googleDocs.html" target="_blank">デモ</a></p>
<p>http://docs.google.com/gview?url={URL}&amp;embedded=true</p>
<p>{URL}の部分にPDFのURLを指定し、iframeなどで読み込むだけ。</p>
<p>iframeに対してかけたCSSは基本的に反映される模様</p>
<p>&nbsp;</p>
<p>結論としては、PDFは画像として使用するために作られていないので</p>
<p>サムネイルなどはちゃんと別で作るのがベスト。</p>
<p>ただ、ECの用に多数の商品をアップしなければならない時は、</p>
<p>専用のサーバーサイドのプログラムをつくるか、それができなければembedかをGoogle Docs使うのが良さそう</p>

HTML上にPDFを表示させる方法

jQueryでマテリアルデザイン風の一覧からの詳細表示

<p>twitterやfacebookはいろんなタイプのウィジェットを生成することが出来ますが、<br />
instagramでは投稿を埋め込むことくらいしか出来ません。</p>
<p>自分のアカウントの写真を表示して埋め込みたい、みたいな時があると思います。<br />
そんな時に、この「SnapWidget」を使うと、便利なウィジェットを生成してくれます！</p>
<p><a class="link" href="http://snapwidget.com/#getstarted" target="_blank">SnapWidget</a></p>
<h2>使い方</h2>
<p>使い方といっても、下記の画面にて、必要項目を記入し、「Get Widget」を押すと、<br />
iframeのソースが生成されますので、それをサイトに貼り付ければOKです！</p>
<p><img decoding="async" loading="lazy" class="alignnone wp-image-8263" src="/uploads-archive/2015/10/SnapWidgetInstagramWidget2-1024x587.jpg" alt="SnapWidgetInstagramWidget2" width="630" height="361" srcset="/uploads-archive/2015/10/SnapWidgetInstagramWidget2-1024x587.jpg 1024w, /uploads-archive/2015/10/SnapWidgetInstagramWidget2-300x172.jpg 300w, /uploads-archive/2015/10/SnapWidgetInstagramWidget2-228x131.jpg 228w, /uploads-archive/2015/10/SnapWidgetInstagramWidget2.jpg 1126w" sizes="(max-width: 630px) 100vw, 630px" /></p>
<p>ただ、もっと自由に扱いたいという場合は、<br />
APIを利用する必要がありそうですね。</p>
<p>下記のブログがすごい良くまとめられているので、自分も必要になったら参考にしたいと思います。</p>
<p><a href="https://syncer.jp/instagram-api-matome">Instagram APIでwebサービスを作りたい全ての人に向けて書きました</a></p>


instagramのウィジェットを生成してくれるサービス「SnapWidget」

<p>先週、<a href="/officer/%E3%83%9E%E3%82%A6%E3%82%B9%E3%81%A8%E3%82%AD%E3%83%BC%E3%83%9C%E3%83%BC%E3%83%89lan%E3%81%A7%E5%85%B1%E6%9C%89%E3%81%99%E3%82%8B%E3%80%8Cshare-mouse%E3%80%8D.html" target="_blank">マウスとキーボードLANで共有する「Share Mouse」</a>を紹介しましたが、Androidも出来ないかな〜と調べてみたら、やっぱりあるんですね。</p>
<p>ShareKMというソフトです。ただ、残念ながら開発は止まってしまっているようで、今後のOS等のバージョンアップや互換性によっては動作しない可能性がありますのでご注意下さい。</p>
<h2>ダウンロード</h2>
<p>Windows用ソフト</p>
<p><a href="https://sites.google.com/site/droidskm/download" target="_blank">https://sites.google.com/site/droidskm/download</a></p>
<p>Android用ソフト</p>
<p>上記にURLにリンクは繋がっているのですが、現在はGoogleplayからダウンロードが出来ないので、以下のURLからダウンロード出来ます。</p>
<p><a href="http://forum.xda-developers.com/showpost.php?p=51833757&amp;postcount=170" target="_blank">http://forum.xda-developers.com/showpost.php?p=51833757&amp;postcount=170</a></p>
<h2>インストール</h2>
<p>それぞれのWindows側、Android側でソフトウェアをインストールします。</p>
<h3>注意点1</h3>
<p>Windows側でAndroidを認識するためのドライバーを入れておく必要があります。</p>
<p><a href="http://developer.android.com/sdk/win-usb.html" target="_blank">http://developer.android.com/sdk/win-usb.html</a></p>
<h3>注意点1</h3>
<p>Android側では、Googleplay外からのソフトウェアのインストールに関しては、</p>
<p>設定＞セキュリティ＞提供不明元のアプリ</p>
<p>許可にチェックをしておく必要があります。</p>
<h2>起動</h2>
<h3>注意点2</h3>
<p>Android側はUSBデバックモードにしておく必要があります。</p>
<p>これは、開発者向けオプションの設定欄で可能ですが、デフォルト状態では表示されておらず、</p>
<p>設定＞端末情報＞ビルド番号</p>
<p>のゾーンを連打することで出せます。</p>
<p>以上の設定が完了していると、Connectが表示されます。</p>
<p>実際の動いているイメージは以下のサンプル動画をどうぞ。</p>
<p><iframe loading="lazy" width="500" height="281" src="https://www.youtube.com/embed/-C-SOEqr6-8?feature=oembed" frameborder="0" allowfullscreen></iframe></p>
<h2>まとめ</h2>
<p>ShareMouseに比べて少し導入が大変でした。ソフトウェアの設定というよりはAndroidをUSB接続するという制限による部分が大きいです。</p>
<p>このソフトはWifiとBluetoothでの接続も出来ますが、それにはRoot化が必要でもっと知識が必要です。</p>
<p>以前に一度、<a href="/officer/nexus7%EF%BC%882013%EF%BC%89%E3%82%92root%E5%8C%96%E3%81%97%E3%81%A6airdroid%E3%82%92%E4%BD%BF%E3%81%86.html" target="_blank">Root化</a>も試みましたが、今はunrootに戻し、OSのバージョンアップに備えられるようにしています。</p>
<p>また、前回候補に上がっていた<a href="http://synergy-project.org/?hl=ja" target="_blank">Synergy</a>というソフトですが、どうやらAndroidも対応しているようです。</p>
<p><a href="/uploads-archive/2015/10/e914124341ef0fff0c1634236ce1cfef.jpg"><img decoding="async" loading="lazy" class="aligncenter size-medium wp-image-8256" src="/uploads-archive/2015/10/e914124341ef0fff0c1634236ce1cfef-300x154.jpg" alt="Synergy_-_マウス・キーボード共有ソフト" width="300" height="154" srcset="/uploads-archive/2015/10/e914124341ef0fff0c1634236ce1cfef-300x154.jpg 300w, /uploads-archive/2015/10/e914124341ef0fff0c1634236ce1cfef-228x117.jpg 228w, /uploads-archive/2015/10/e914124341ef0fff0c1634236ce1cfef.jpg 753w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<p>Windows＋Mac＋Linux＋Androidってもうほぼコンシューマー向けのOSをコンプリートしているじゃないですか。</p>
<p>はじめからこちらに挑戦しておけばよかったか。。。。</p>
<p>&nbsp;</p>
<p><iframe loading="lazy" width="500" height="281" src="https://www.youtube.com/embed/yx274o1a3uA?feature=oembed" frameborder="0" allowfullscreen></iframe></p>
<p>&nbsp;</p>
<p>&nbsp;</p>


WindowsとAndroidでマウスとキーボードを共有する「ShareKM」

別のページをjQueryのajaxを使って読み込み表示させる

<p>昨今、様々な用途で欠かせない圧縮技術。<br />
低容量かつ画質の良い形式は常に研究されています。</p>
<h2>実例など</h2>
<div style="padding-left: 15px;">
Webを中心に挙げられる実用例でいうと</p>
<p>無圧縮：BMP, RLE<br />
可逆圧縮：PNG, TIFF, gif<br />
無可逆圧縮：JPEG, JPEG2000, MH圧縮(FAX用途)</p>
<p>などなど他にもたくさんあります。</p>
<p>今回はJPEGについて挙げます。</p></div>
<h2>JPEGの歴史</h2>
<div style="padding-left: 15px;">
ISOによって規格が標準化されたのが1988年。</p>
<p>ただし、当時はファクシミリが主流で且つ「画像が汚くなる」と言う先入観のためビジネスへの参入がなかなか出来なかった。</p>
<p>しかし、1995年の液晶モニタを搭載したデジカメの進出によって大きくシェアを占めることとなった。</p></div>
<h2>圧縮技術のアルゴリズムについて</h2>
<div style="padding-left: 15px;">
詳しいことは省きます。</p>
<p>JPEGの圧縮技術はDCT(離散コサイン変換)と言うものを採用しており、<br />
これは数学者であるジョゼフ・フーリエが導き出した<br />
「あらゆる連続した波形は正弦波と余弦波によって近似して表せる」(ざっくりと)<br />
という「フーリエ変換」に基いています。</p></div>
<p><a href="/uploads-archive/2015/10/furie_houteishiki.png"><img decoding="async" loading="lazy" src="/uploads-archive/2015/10/furie_houteishiki-300x50.png" alt="フーリエ変換の式" width="300" height="50" class="alignnone size-medium wp-image-8220" srcset="/uploads-archive/2015/10/furie_houteishiki-300x50.png 300w, /uploads-archive/2015/10/furie_houteishiki-228x38.png 228w, /uploads-archive/2015/10/furie_houteishiki.png 358w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<p><a href="/uploads-archive/2015/10/furie_rei_image.png"><img decoding="async" loading="lazy" src="/uploads-archive/2015/10/furie_rei_image-300x294.png" alt="波形の分解例" width="300" height="294" class="alignnone size-medium wp-image-8221" srcset="/uploads-archive/2015/10/furie_rei_image-300x294.png 300w, /uploads-archive/2015/10/furie_rei_image-228x223.png 228w, /uploads-archive/2015/10/furie_rei_image.png 348w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<p>他にも色の変化を間引くことで圧縮する&#8221;色差圧縮&#8221;も含まれています。<br />
<a href="/uploads-archive/2015/10/shikisa_original.png"><img decoding="async" loading="lazy" src="/uploads-archive/2015/10/shikisa_original-300x281.png" alt="オリジナル" width="300" height="281" class="alignnone size-medium wp-image-8224" srcset="/uploads-archive/2015/10/shikisa_original-300x281.png 300w, /uploads-archive/2015/10/shikisa_original-228x214.png 228w, /uploads-archive/2015/10/shikisa_original.png 512w" sizes="(max-width: 300px) 100vw, 300px" /></a><a href="/uploads-archive/2015/10/shikisa_yonnbunnnoichi.png"><img decoding="async" loading="lazy" src="/uploads-archive/2015/10/shikisa_yonnbunnnoichi-300x281.png" alt="色情報を1/4に間引いた画像" width="300" height="281" class="alignnone size-medium wp-image-8225" srcset="/uploads-archive/2015/10/shikisa_yonnbunnnoichi-300x281.png 300w, /uploads-archive/2015/10/shikisa_yonnbunnnoichi-228x214.png 228w, /uploads-archive/2015/10/shikisa_yonnbunnnoichi.png 512w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<h2>なぜフーリエ変換？</h2>
<div style="padding-left: 15px;">
上述の通り、2次元であろうと波形はサイン、コサインに分けることが出来ます。</p>
<p>そして人間の視覚にとって高周波な情報ほど認識しづらい傾向にあります。</p>
<p>この前提から「画像の高周波部分(ノイズとかにも成り得る)部分を省いてしまおう」<br />
と言うのがJPEG圧縮の根幹です。<br />
　※基本的には他の圧縮技術も概念は通じたものがほとんどです</p>
<p>また、フーリエ変換はFFT(高速フーリエ変換)などのアルゴリズムが研究されており、<br />
圧縮、展開(圧縮したデータから元の画像に戻す)のがとても高速に出来るのもメリットです。</p></div>
<h2>JPEGの後継となるもの</h2>
<div style="padding-left: 15px;">
JPEG2000と言う新しい規格がISOとITU-TSの共同組織、JPEGによって2001年に規格化された。</p>
<p>しかし、<br />
・大容量ストレージが普及していた<br />
・扱うためには対応するソフトウェアの開発と普及が必要<br />
・圧縮、展開に従来のJPEGの5,6倍以上の処理速度を要する<br />
　※圧縮アルゴリズムに用いられている「ウェーブレット変換」の性質上</p>
<p>と言った側面があり、現在もさほど普及していない。</p></div>
<h2>筆者余談</h2>
<div style="padding-left: 15px;">
動画の規格についてはストリーミングの普及にも大きく左右され、<br />
互換性が高く、高画質・高圧縮率の規格が今でも研究されています。</p>
<p>ある意味、JPEG圧縮と言うのは静止画像において一つの完成形とも言えるのではないだろうか。</p></div>


furie_houteishiki-300x501.png

画像圧縮技術について少しだけまとめてみた

<p>こういう眼から鱗が落ちるソフトが前からあるんですね〜。</p>
<p>メインにMacを使っていて、たまにWindowsが必要になる人なのですが、今までは2つのパターンしか知りませんでした。</p>
<p>&nbsp;</p>
<h3>仮想化ソフトを用いた切り替え</h3>
<p><a href="/uploads-archive/2015/10/vmware_cloud_logo.jpg"><img decoding="async" loading="lazy" class="aligncenter size-medium wp-image-8215" src="/uploads-archive/2015/10/vmware_cloud_logo-300x199.jpg" alt="vmware_cloud_logo" width="300" height="199" srcset="/uploads-archive/2015/10/vmware_cloud_logo-300x199.jpg 300w, /uploads-archive/2015/10/vmware_cloud_logo-228x151.jpg 228w, /uploads-archive/2015/10/vmware_cloud_logo.jpg 648w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<p>MaxOSの中に仮想化したWindowsOSを立ち上げるパターンなので切り替えというよりは、両立ですね。</p>
<p>ただ、このパターンは2015年のMacbookを持ってしても、激遅という訳ではないのですが、負荷が掛かっているのが分かるほど発熱を伴うので、本当に軽い作業やすぐに確認したいという場合しか利用しないようにしています。</p>
<h3>USB切替器を用いた物理的な切り替え</h3>
<p><iframe loading="lazy" width="300" height="150" src="http://rcm-fe.amazon-adsystem.com/e/cm?lt1=_blank&amp;bc1=000000&amp;IS2=1&amp;bg1=FFFFFF&amp;fc1=000000&amp;lc1=0000FF&amp;t=sackoh71-22&amp;o=9&amp;p=8&amp;l=as4&amp;m=amazon&amp;f=ifr&amp;ref=ss_til&amp;asins=B0029ULLRU" scrolling="no" marginwidth="0" marginheight="0" frameborder="0"></iframe></p>
<p>物理的にPCを2台使う場合、このパターンしかないと思っていました。</p>
<p>自宅ではWindowsの自作デスクトップが鎮座しているので、切替器を買おうかな〜と本気で考えていました。</p>
<p>そんななか、第三のパターンを初めてしりました。</p>
<h3>マウスとキーボードLANで共有する「Share Mouse」</h3>
<p><iframe loading="lazy" width="500" height="281" src="https://www.youtube.com/embed/veKYkc_u7hc?feature=oembed" frameborder="0" allowfullscreen></iframe></p>
<p>まずはデモ動画を見てもらうのが一番早いですね。</p>
<p><a href="/uploads-archive/2015/10/ShareMouse_monitormanager.png"><img decoding="async" loading="lazy" class="aligncenter size-medium wp-image-8226" src="/uploads-archive/2015/10/ShareMouse_monitormanager-300x215.png" alt="ShareMouse_monitormanager" width="300" height="215" srcset="/uploads-archive/2015/10/ShareMouse_monitormanager-300x215.png 300w, /uploads-archive/2015/10/ShareMouse_monitormanager-228x164.png 228w, /uploads-archive/2015/10/ShareMouse_monitormanager.png 496w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<p>こんな感じでディスプレイを配置して一つのマウスとキーボードでWindowsとMac問わず（但しLinuxは否）行ったり来たりができちゃいます。</p>
<p><a href="http://www.keyboard-and-mouse-sharing.com/" target="_blank">http://www.keyboard-and-mouse-sharing.com/</a></p>
<p>無料版ではディスプレイ2つとPC2つまで対応しており、上記のようにディスプレイが3つ以上になるとPro Editionが必要になります。</p>
<p>料金表はこちら</p>
<p><a href="http://www.keyboard-and-mouse-sharing.com/docs2/09/shop.php" target="_blank">http://www.keyboard-and-mouse-sharing.com/docs2/09/shop.php</a></p>
<h3>まとめ</h3>
<p>実際に使ってみましたが、LANを経由しているタイムラグというのはほとんど体感できないレベルにまで仕上がっているので、言われてみないと気づかないかもしれません。そもそも、Bluetooth等の無線の規格でPCと繋がっているので、よほど遅延が致命的になるようなゲームでもなければキーボード入力においても問題ないです。</p>
<p>他にもLinuxまで対応しているマウス共有ソフトもあります。</p>
<p><a href="http://synergy-project.org/" target="_blank">http://synergy-project.org/</a></p>
<p>&nbsp;</p>


マウスとキーボードLANで共有する「Share Mouse」

<p>銀聯カードの取扱高が世界的に増加しているという。</p>
<p>資料によって異なるが、中国銀聯の発表によると2015年第1四半期の取扱高は約1兆9000億ドルであり<br />
VISAカードの1兆7500億ドルを始めて超えたという。</p>
<p>また、イギリスの調査会社ユーロモニターによると2014年の決済額のシェアは33%であり</p>
<p>VISAカードの31%を上回っているという。</p>
<p>現時点では各方面から世界No.1とされるようになっているようだ。</p>
<p>&nbsp;</p>
<p>とはいえ、発行枚数としてのシェアは中国国内では9割を超えているが<br />
世界で見ると1%に満たないという。</p>
<p>要は、現時点ではほとんどが中国人によって使用されているようだ。<br />
ただ、今後はVISA / MASTERのようにグローバルブランドとしての展開に力を入れていくようだ。</p>
<p>特に、直近ではアジアでの利用者拡大に注力しているようで<br />
越境ECに携わる私たちとしてはその動向を知っておかなければならない。</p>
<p>以下は最近の銀聯カードのアジアでの動き</p>
<p>■日本</p>
<p>今まで40万店舗だった加盟店に加え</p>
<p>10月1日 セブン＆アイ・ホールディングス → 1万8000</p>
<p>9月24日 ローソン → 1万2000店</p>
<p>の3万店が加わる</p>
<p>&nbsp;</p>
<p>■韓国</p>
<p>発行枚数 1400万枚突破</p>
<p>&nbsp;</p>
<p>■タイ</p>
<p>小売店の7割が銀聯カード対応</p>
<p>タイ銀行協会がICチップの新規格に銀聯の技術を採用</p>
<p>&nbsp;</p>
<p>■ミャンマー</p>
<p>ミャンマー・ペイメント・ユニオン(MPU)と業務提携</p>
<p>年内にデビットカードを発行</p>
<p>&nbsp;</p>
<p>アジアの新興国は銀聯カードとの連携を強めているようだ。</p>
<p>今やアジアを旅するのであればVISAよりも銀聯カードを持っていたほうが安心なのかもしれない。</p>
<p>&nbsp;</p>
<p>同じくユーロモニターの調査によると、2016年アジア太平洋地域のクレジットカード決済額は12兆2505億ドルとなり</p>
<p>世界全体24兆1181億ドルの過半数を占めるとされている。</p>
<p>アジアのクレジットカードの覇権争いでは銀聯カードが数歩リードしているようだ。</p>
<p>&nbsp;</p>
<p>私達ネット業界も対応を急がなければならない</p>


【銀聯カード】VISAを抜いて世界No.1へ

<p>最近、業務内容が多岐に渡る事が増えてきたので、漏れが無いようにタスクを管理ツールを使っているのですが、その中でも使いやすくて今も継続して使っているTODOISTというツールをご紹介します。</p>
<p><img decoding="async" loading="lazy" class="alignnone size-full wp-image-8230" src="/uploads-archive/2015/10/1.jpg" alt="1" width="640" height="547" srcset="/uploads-archive/2015/10/1.jpg 640w, /uploads-archive/2015/10/1-300x256.jpg 300w, /uploads-archive/2015/10/1-228x195.jpg 228w" sizes="(max-width: 640px) 100vw, 640px" /></p>
<p>TODOISTのいいところは使い方がシンプルで、且つ複数のデバイスでシームレスに利用できる点です。</p>
<h3>TODOISTの使い方</h3>
<p>使い方については下に張ったクイックツアーを見て頂くとわかりやすいと思うのですが簡単に説明させて頂きます。</p>
<p>まずプロジェクトを作ります。今抱えている仕事をカテゴリごとに分ける感じです、例えば「取引先」、「社内」、「個人」といった具合です。プロジェクト内でさらに細かくカテゴリをつくる事ができ、「取引先　＞　Ａ商事　＞　物流」という感じで細かいカテゴリも作れます。</p>
<p>プロジェクトを作ったら、タスクを入力していきます。タスクの内容を入れて、その日時を決めたら、該当するプロジェクトに割りふります。</p>
<p><iframe loading="lazy" width="425" height="350" src="//www.youtube.com/embed/tg7m8DJKWUw" allowfullscreen="allowfullscreen"></iframe></p>
<p><a href="https://todoist.com/Help/Guide">https://todoist.com/Help/Guide</a></p>
<p>メニューでその日行うタスク、一週間以内に期限がくるタスクなど、切り替えることができます。</p>
<p><img decoding="async" loading="lazy" class="alignnone size-full wp-image-8242" src="/uploads-archive/2015/10/5.gif" alt="5" width="418" height="200" /></p>
<p>タスクを消化したらチェックを入れます、チェックを入れるとリストからタスクが消えます。タスクが消化されると生産性のグラフに反映されます。</p>
<p>タスクを消化できなかった場合にはリストに残り、期限を超えるとその分のカルマがマイナスになります。</p>
<p><a href="/uploads-archive/2015/10/6.gif"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-8243" src="/uploads-archive/2015/10/6.gif" alt="6" width="388" height="572" /></a></p>
<h3>デバイスをかえてもシームレスに利用できるTODIST</h3>
<p>TODOISTはサイト、アプリ、アドオン、基本的にどこでも使えます、同アカウントでログインしておけば、会社のＰＣ、会社用の携帯、個人の携帯、と異なるどのデバイスからでもタスクを管理できるので便利です。</p>
<p><a href="/uploads-archive/2015/10/2.gif"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-8231" src="/uploads-archive/2015/10/2.gif" alt="2" width="640" height="244" /></a></p>
<p>chromeやfirefoxなどブラウザの拡張機能にも追加できます。chromeに追加すると、その日のタスク数を表示してくれるのでとても便利です。</p>
<p><img decoding="async" loading="lazy" class="alignnone size-full wp-image-8240" src="/uploads-archive/2015/10/4.gif" alt="4" width="258" height="150" /></p>
<p>googleアカウントでログインできるので、仕事と個人用にgoogleアカウントを使い分ける人には便利かもしれません。</p>
<p><img decoding="async" loading="lazy" class="alignnone wp-image-8239" src="/uploads-archive/2015/10/3.gif" alt="3" width="386" height="460" /></p>
<p>ほとんどの機能は無料で利用できますが、プレミアムとして月額300円程度支払うと、リマインダーという機能を利用できます。</p>
<p>リマインダーを使うと予定時刻になるとＥメール、ショートメール、ＳＭＳまどで予定を通知してくるようです。</p>
<p><iframe loading="lazy" width="425" height="350" src="//www.youtube.com/embed/0OAtFIpPxpU" allowfullscreen="allowfullscreen"></iframe></p>
<p>興味があったら一度使ってみてください。</p>


タスク管理におすすめのシンプルなツールTODOIST

JavaScriptで拡張子のない画像のファイルの種類を判別する方法(IE9以上)

<p>すべてというのは僕が勝手に思ってる内容です・・・</p>
<p>僕がよく使用しているアイコン、「fontawesome」「Glyphicons」「Entypo」が含まれています。</p>
<p>他にも、今後も利用できそうな「Material」「Flat Color」があります。</p>
<p>使い方は非常に簡単です。</p>
<p>DEMOはこちらです。<br />
<a href="/demo/abe/60/" target="_blank" class="demo">DEMO</a></p>
<h2>We Love SVGの使い方</h2>
<p>まずはこちらからzipをダウンロードします。<br />
<a href="https://icons8.github.io/webicon/" target="_blank">Webicon by Icons8</a></p>
<p>head内に下記コードを設置します。 </p>
<p></p>

		<div id="crayon-649540158bc95781787149" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover wrap" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 18px !important;">
		
			<div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><span class="crayon-title"></span>
			<div class="crayon-tools" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div><span class="crayon-language">JavaScript</span></div></div>
			<div class="crayon-info" style="min-height: 19.5px !important; line-height: 19.5px !important;"></div>
			<div class="crayon-plain-wrap"><textarea  class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 13px !important; line-height: 18px !important;">
&lt;script type="text/javascript" src="js/jquery.min.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="js/jquery-webicon.min.js"&gt;&lt;/script&gt;</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 13px !important; line-height: 18px !important;"><div class="crayon-num" data-line="crayon-649540158bc95781787149-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540158bc95781787149-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-649540158bc95781787149-1"><span class="crayon-ta">&lt;script </span><span class="crayon-e ">type</span>=<span class="crayon-s">"text/javascript"</span><span class="crayon-h"> </span><span class="crayon-e ">src</span>=<span class="crayon-s">"js/jquery.min.js"</span><span class="crayon-h">&gt;</span><span class="crayon-ta">&lt;/script&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540158bc95781787149-2"><span class="crayon-ta">&lt;script </span><span class="crayon-e ">type</span>=<span class="crayon-s">"text/javascript"</span><span class="crayon-h"> </span><span class="crayon-e ">src</span>=<span class="crayon-s">"js/jquery-webicon.min.js"</span><span class="crayon-h">&gt;</span><span class="crayon-ta">&lt;/script&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p> </p>
<p>あとは、htmlで、</p>
<p></p>

		<div id="crayon-649540158bc9a270899462" 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;webicon icon="search"&gt;&lt;/webicon&gt;
&lt;span webicon="news"&gt;&lt;/span&gt;
&lt;div data-webicon="print"&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-649540158bc9a270899462-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540158bc9a270899462-2">2</div><div class="crayon-num" data-line="crayon-649540158bc9a270899462-3">3</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 13px !important; line-height: 18px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-649540158bc9a270899462-1"><span class="crayon-r ">&lt;webicon </span><span class="crayon-e ">icon</span>=<span class="crayon-s ">"search"</span><span class="crayon-r ">&gt;</span><span class="crayon-r ">&lt;/webicon&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540158bc9a270899462-2"><span class="crayon-r ">&lt;span </span><span class="crayon-e ">webicon</span>=<span class="crayon-s ">"news"</span><span class="crayon-r ">&gt;</span><span class="crayon-r ">&lt;/span&gt;</span></div><div class="crayon-line" id="crayon-649540158bc9a270899462-3"><span class="crayon-r ">&lt;div </span><span class="crayon-e ">data-webicon</span>=<span class="crayon-s ">"print"</span><span class="crayon-r ">&gt;</span><span class="crayon-r ">&lt;/div&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p> </p>
<p>と書くだけです！</p>
<p>サイズを変えたい場合は、cssでwidthを指定すれば変更できます。</p>
<p>簡単！といいたいところですが、<br />
flat-colorのものしか使えず。。。<br />
勉強不足ですね。。。</p>
<p>また出直します。</p>
<p><a href="https://icons8.com/welovesvg" class="link" target="_blank">We Love SVG &#8211; Google Fonts for icons | Icons8</a></p>

すべて(※)のアイコンが集約された「We Love SVG」

<p>生産性アップには敏感な私ですが、このツールにはビビッときました！</p>
<p>パワーポイントもレポートをまとめるのに20個、エクセルにおいてもリストをまとめるのに20個以上と定常的に扱う仕事を複数やっているからです。作業中は、ウィンドウいっぱいで編集したい目的のファイルに辿り着くまでに一苦労という感じでした。</p>
<p><a href="http://www.extendoffice.com/download/office-tab.html" target="_blank">http://www.extendoffice.com/download/office-tab.html</a></p>
<p>こちらは、フリーソフトではなくて通常版の「Office Tab」で＄29、「Office Tab Enterprise」で＄39です。</p>
<p>また、Windows 8.1/64bitバージョンまで対応しているようで、Windows10はまだ正式対応待ちというところですね。</p>
<p>30日のフリートライアルが出来るので、試しにインストールしてみました。</p>
<h2>バージョンの違い</h2>
<p>「Office Tab」と「Office Tab Enterprise」の違いは、対応のOfficeの違いで通常版ではWord + Excel + PowerPoint、Enterprise版では更にPublisher + Access + Project + Visioまでがタブ化するという内容です。</p>
<h2>インストール</h2>
<p>サイトからexeファイルをダウンロードしてインストールする流れは通常通りです。</p>
<p>ダウンロードサイトは英語なのでてっきり英語のみかと思っていたら、ソフトウェア自体は日本語化されていました。</p>
<p><a href="/uploads-archive/2015/09/Windows_8_1_1.png"><img decoding="async" loading="lazy" class="aligncenter size-medium wp-image-8193" src="/uploads-archive/2015/09/Windows_8_1_1-300x275.png" alt="Windows_8_1_1" width="300" height="275" srcset="/uploads-archive/2015/09/Windows_8_1_1-300x275.png 300w, /uploads-archive/2015/09/Windows_8_1_1-1024x938.png 1024w, /uploads-archive/2015/09/Windows_8_1_1-228x209.png 228w, /uploads-archive/2015/09/Windows_8_1_1.png 1524w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<p>設定画面もほぼ日本語への翻訳が完了しています。</p>
<h2>タブ化</h2>
<p><a href="/uploads-archive/2015/09/ca4c31cb9a92c5f1759d8e2c46dc69bf.png"><img decoding="async" loading="lazy" class="aligncenter size-medium wp-image-8194" src="/uploads-archive/2015/09/ca4c31cb9a92c5f1759d8e2c46dc69bf-300x103.png" alt="Windows_8_1_と_新規投稿を追加_‹_スターフィールド株式会社_—_WordPress" width="300" height="103" srcset="/uploads-archive/2015/09/ca4c31cb9a92c5f1759d8e2c46dc69bf-300x103.png 300w, /uploads-archive/2015/09/ca4c31cb9a92c5f1759d8e2c46dc69bf-1024x353.png 1024w, /uploads-archive/2015/09/ca4c31cb9a92c5f1759d8e2c46dc69bf-228x79.png 228w, /uploads-archive/2015/09/ca4c31cb9a92c5f1759d8e2c46dc69bf.png 1126w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<p>普通にファイルを開いていったら、今までウィンドウで開かれていたものがタブとして開かれるようになりました。</p>
<p>このありがたさが分かる人には分かるはず！</p>
<p>他のイメージは↓で確認できます。</p>
<p><a href="http://www.extendoffice.com/product/office-tab/office-tab-feature-demo.html" target="_blank">http://www.extendoffice.com/product/office-tab/office-tab-feature-demo.html</a></p>
<h2>まとめ</h2>
<p>導入したらおそらく毎回十分レベルで変わってくるはず。そして、集中力も維持出来るであろうことから、Mac版が出たら即買いでも元取れると思います。</p>
<p>Microsoftはブラウザはタブ化されましたが、ファイルエクスプローラーやofficeツールではタブ化を是非進めて欲しいものです。</p>
<p>Macでは、ファインダーまではタブ化されました。</p>


Officeをタブ化するツール「Office Tab」Mac版切望！

<p>9月15日アマゾンがいわゆるネットスーパーに当たるサービスAmazonパントリーを始めた。</p>
<p><a href="https://www.amazon.co.jp/l/3485873051/" target="_blank">https://www.amazon.co.jp/l/3485873051/</a></p>
<p>&nbsp;</p>
<p>同業態としてはかなり後発だが、特徴をまとめてみた</p>
<p>パントリーBox</p>
<p>最大の特徴がこのパントリーBoxで、1Box当たり290円という送料設定。</p>
<p>商品をこのBoxに詰めていく度にあとどれくらい入るかが表示される。</p>
<p><a href="/uploads-archive/2015/09/11.png"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-8186" src="/uploads-archive/2015/09/11.png" alt="1" width="183" height="212" /></a></p>
<p>&nbsp;</p>
<p>商品ごとにBoxに対する使用率が定義されており、これが加算されて100になれば次のBoxが用意されるようだ。</p>
<p><a href="/uploads-archive/2015/09/21.jpg"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-8185" src="/uploads-archive/2015/09/21.jpg" alt="2" width="390" height="71" srcset="/uploads-archive/2015/09/21.jpg 390w, /uploads-archive/2015/09/21-300x55.jpg 300w, /uploads-archive/2015/09/21-228x42.jpg 228w" sizes="(max-width: 390px) 100vw, 390px" /></a></p>
<p>&nbsp;</p>
<p>パントリーBoxの大きさは明記されていないが、</p>
<p>52cm × 28cm × 36cmの容量または12kgで1Boxとのことらしい。</p>
<p><a href="/uploads-archive/2015/09/31.jpg"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-8184" src="/uploads-archive/2015/09/31.jpg" alt="3" width="404" height="365" srcset="/uploads-archive/2015/09/31.jpg 404w, /uploads-archive/2015/09/31-300x271.jpg 300w, /uploads-archive/2015/09/31-228x206.jpg 228w" sizes="(max-width: 404px) 100vw, 404px" /></a></p>
<p>&nbsp;</p>
<p>送料について、他のネットスーパーは</p>
<p>&nbsp;</p>
<p>イオンネットスーパー：</p>
<p>全国一律300円 (5,000円以上で無料)</p>
<p>&nbsp;</p>
<p>SEIYUドットコム：</p>
<p>全国一律300円 (5,000円以上で無料)</p>
<p>&nbsp;</p>
<p>イトーヨーカドー：</p>
<p>店舗ごと (セブンイレブン受取は無料)</p>
<p>&nbsp;</p>
<p>となっており、1Box当たりの課金というのは少々高い気もする。</p>
<p>&nbsp;</p>
<p>そこで、商品がどの程度安いのかを比べてみた</p>
<p>&nbsp;</p>
<p>エリエール ティシュー キュート 160組(320枚)×5箱パック</p>
<p>Amazon：233円</p>
<p>SEIYU：238円</p>
<p>&nbsp;</p>
<p>スコッティ フラワーパック 12ロール ダブル 114mm×25m</p>
<p>&nbsp;</p>
<p>Amazon：334円</p>
<p>SEIYU：329円</p>
<p>&nbsp;</p>
<p>NEWクレラップ レギュラー 30cm×20m</p>
<p>Amazon：184円</p>
<p>SEIYU：140</p>
<p>&nbsp;</p>
<p>キッコーマン食品 こいくちしょうゆ1L</p>
<p>Amazon：203円</p>
<p>SEIYU：204円</p>
<p>&nbsp;</p>
<p>あんまり安くない、、価格については今後出店者が増えて下がることに期待</p>
<p>配送時間については、現行のAmazonプライムと同じ扱いのようだ。</p>
<p>そもそもこのサービス自体がプライム会員限定のサービスとのこと</p>
<p>&nbsp;</p>
<p>配送時間と言えば、楽天が8月から始めた楽びん！は</p>
<p>日用品を中心に、渋谷、目黒、世田谷、港区で最短20分で配送するという画期的なサービスで</p>
<p>このへんとの競争もどうなるかは興味深い。</p>
<p>&nbsp;</p>
<p>結論としは未だ始まったばかりだからか、</p>
<p>今は価格、配送時間、品揃えという意味で、そこまで大きなメリットはないように感じた。</p>
<p>ただ、Amazonが参入したことで競争が強まることは間違いないと思われるので、</p>
<p>ネットスーパー全体として今後どのような展開があるのか注目したい</p>


Amazonのネットスーパー【Amazonパントリー】

<p>レスポンシブのサイトをコーディングする際、javascriptでSPの時だけ動かしたいことや、SPの時にjavascriptを使って制御しなきゃいけない時に、今までは以下の用に書いていました。<br />
(jQuery使用)</p>
<p></p>

		<div id="crayon-649540158baaa896127428" 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;">
if($(window).width() &lt; 480){
}</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-649540158baaa896127428-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540158baaa896127428-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-649540158baaa896127428-1"><span class="crayon-st">if</span><span class="crayon-sy">(</span><span class="crayon-sy">$</span><span class="crayon-sy">(</span><span class="crayon-i">window</span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-e">width</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-h"> </span><span class="crayon-h">&lt;</span><span class="crayon-h"> </span><span class="crayon-cn">480</span><span class="crayon-sy">)</span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540158baaa896127428-2"><span class="crayon-sy">}</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p> </p>
<p>ブラウザの幅を取得してそのサイズによって処理を変えるというやり方です。</p>
<p>しかし、つい最近window.matchMediaという存在を知りました。<br />
これは、いわゆるcssのmediaqueryのjavascript版というもので、<br />
以下の用に書きます。</p>
<p></p>

		<div id="crayon-649540158baae121264162" 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;">
if( window.matchMedia('(max-width:480px)').matches ){
//480以下の時の処理
}else{
//480以上の時の処理
}</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-649540158baae121264162-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540158baae121264162-2">2</div><div class="crayon-num" data-line="crayon-649540158baae121264162-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540158baae121264162-4">4</div><div class="crayon-num" data-line="crayon-649540158baae121264162-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-649540158baae121264162-1"><span class="crayon-st">if</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-i">window</span><span class="crayon-sy">.</span><span class="crayon-e">matchMedia</span><span class="crayon-sy">(</span><span class="crayon-s">'(max-width:480px)'</span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-i">matches</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-649540158baae121264162-2"><span class="crayon-c">//480以下の時の処理</span></div><div class="crayon-line" id="crayon-649540158baae121264162-3"><span class="crayon-sy">}</span><span class="crayon-st">else</span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540158baae121264162-4"><span class="crayon-c">//480以上の時の処理</span></div><div class="crayon-line" id="crayon-649540158baae121264162-5"><span class="crayon-sy">}</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p> </p>
<p>ただ、chrome,firefoxは問題ないのですが、IE10以上からでないと効かないそうです。</p>
<p>IE9以下でも使いたい場合は、<br />
<a href="https://github.com/paulirish/matchMedia.js/">paulirish/matchMedia.js · GitHub</a><br />
こちらのプラグインを使うと使用可能になるそうです。</p>
<p>とはいえ、レスポンシブなのでIE9で動かないとしても問題ないかと思います！<br />
さすがにie9を縮小して見る人はいないでしょうから・・・（いるのかな？？）</p>

javascriptで「window.matchMedia」があるというのを今更知った件

<p>今回はLinux上でも使えるエディタの中でも有名なvimについて。</p>
<p>vim同士を跨いだ編集やローカルのテキストの行き来で重宝するclipboard。<br />
ただし、デフォルトでは有効ではないので自分でコンパイルします。<br />
(CentOS 6.6 では yum でアップデート最新版が7.2なのもあります)</p>
<p>対象バージョン：7.4, CentOS 6.6(Final)</p>
<p>※ 7.4 を選んだ理由は、これより前だと使えないプラグインがあるため</p>
<h2>vimコンパイル等する環境を整える</h2>
<div style="padding-left: 15px;">


		<div id="crayon-649540158b8bf578609797" 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">Shell</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;">
yum install -y mercurial
yum install -y ncurses-devel
yum install -y make
yum install -y gcc
# gtk2辺りがclipboard有効に必要
yum install -y gtk2-devel atk-devel libX11-devel libXt-devel
yum install -y lua-devel</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-649540158b8bf578609797-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540158b8bf578609797-2">2</div><div class="crayon-num" data-line="crayon-649540158b8bf578609797-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540158b8bf578609797-4">4</div><div class="crayon-num" data-line="crayon-649540158b8bf578609797-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540158b8bf578609797-6">6</div><div class="crayon-num" data-line="crayon-649540158b8bf578609797-7">7</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 13px !important; line-height: 18px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-649540158b8bf578609797-1"><span class="crayon-e">yum </span><span class="crayon-i">install</span><span class="crayon-h"> </span>-<span class="crayon-i">y</span><span class="crayon-h"> </span><span class="crayon-e">mercurial</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540158b8bf578609797-2"><span class="crayon-e">yum </span><span class="crayon-i">install</span><span class="crayon-h"> </span>-<span class="crayon-i">y</span><span class="crayon-h"> </span><span class="crayon-i">ncurses</span>-<span class="crayon-e">devel</span></div><div class="crayon-line" id="crayon-649540158b8bf578609797-3"><span class="crayon-e">yum </span><span class="crayon-i">install</span><span class="crayon-h"> </span>-<span class="crayon-i">y</span><span class="crayon-h"> </span><span class="crayon-r">make</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540158b8bf578609797-4"><span class="crayon-e">yum </span><span class="crayon-i">install</span><span class="crayon-h"> </span>-<span class="crayon-i">y</span><span class="crayon-h"> </span><span class="crayon-i">gcc</span></div><div class="crayon-line" id="crayon-649540158b8bf578609797-5"><span class="crayon-c"># gtk2辺りがclipboard有効に必要</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540158b8bf578609797-6"><span class="crayon-e">yum </span><span class="crayon-i">install</span><span class="crayon-h"> </span>-<span class="crayon-i">y</span><span class="crayon-h"> </span><span class="crayon-i">gtk2</span>-<span class="crayon-e">devel </span><span class="crayon-i">atk</span>-<span class="crayon-e">devel </span><span class="crayon-i">libX11</span>-<span class="crayon-e">devel </span><span class="crayon-i">libXt</span>-<span class="crayon-e">devel</span></div><div class="crayon-line" id="crayon-649540158b8bf578609797-7"><span class="crayon-e">yum </span><span class="crayon-i">install</span><span class="crayon-h"> </span>-<span class="crayon-i">y</span><span class="crayon-h"> </span><span class="crayon-i">lua</span>-<span class="crayon-i">devel</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<br />


		<div id="crayon-649540158b8c3932379201" 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">Shell</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;">
cd /usr/local/src
hg clone https://vim.googlecode.com/hg/ vim
# ダウンロードしてくるのに数分かかる
cd vim
# make設定 (一度cleanしておく)
make distclean

./configure --enable-multibyte --with-features=huge --enable-cscope --enable-gui=gtk2 \
--disable-selinux --prefix=/usr/local \
--enable-xim --enable-fontset \
--enable-gpm \
--enable-rubyinterp \
--with-python-config-dir=/usr/lib/python2.6/config \
--enable-luainterp=yes --with-lua-prefix=/usr

# コンパイル＆インストール
make
make install</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-649540158b8c3932379201-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540158b8c3932379201-2">2</div><div class="crayon-num" data-line="crayon-649540158b8c3932379201-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540158b8c3932379201-4">4</div><div class="crayon-num" data-line="crayon-649540158b8c3932379201-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540158b8c3932379201-6">6</div><div class="crayon-num" data-line="crayon-649540158b8c3932379201-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540158b8c3932379201-8">8</div><div class="crayon-num" data-line="crayon-649540158b8c3932379201-9">9</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540158b8c3932379201-10">10</div><div class="crayon-num" data-line="crayon-649540158b8c3932379201-11">11</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540158b8c3932379201-12">12</div><div class="crayon-num" data-line="crayon-649540158b8c3932379201-13">13</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540158b8c3932379201-14">14</div><div class="crayon-num" data-line="crayon-649540158b8c3932379201-15">15</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540158b8c3932379201-16">16</div><div class="crayon-num" data-line="crayon-649540158b8c3932379201-17">17</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540158b8c3932379201-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-649540158b8c3932379201-1"><span class="crayon-r">cd</span><span class="crayon-h"> </span>/<span class="crayon-i">usr</span>/<span class="crayon-i">local</span>/<span class="crayon-e">src</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540158b8c3932379201-2"><span class="crayon-e">hg </span><span class="crayon-r">clone</span><span class="crayon-h"> </span><span class="crayon-i">https</span><span class="crayon-sy">:</span>//<span class="crayon-r">vim</span><span class="crayon-e">.googlecode</span><span class="crayon-e">.com</span>/<span class="crayon-i">hg</span>/<span class="crayon-h"> </span><span class="crayon-r">vim</span></div><div class="crayon-line" id="crayon-649540158b8c3932379201-3"><span class="crayon-c"># ダウンロードしてくるのに数分かかる</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540158b8c3932379201-4"><span class="crayon-r">cd</span><span class="crayon-h"> </span><span class="crayon-r">vim</span></div><div class="crayon-line" id="crayon-649540158b8c3932379201-5"><span class="crayon-c"># make設定 (一度cleanしておく)</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540158b8c3932379201-6"><span class="crayon-r">make</span><span class="crayon-h"> </span><span class="crayon-i">distclean</span></div><div class="crayon-line" id="crayon-649540158b8c3932379201-7">&nbsp;</div><div class="crayon-line crayon-striped-line" id="crayon-649540158b8c3932379201-8"><span class="crayon-sy">.</span>/<span class="crayon-i">configure</span><span class="crayon-h"> </span>--<span class="crayon-i">enable</span>-<span class="crayon-i">multibyte</span><span class="crayon-h"> </span>--<span class="crayon-i">with</span>-<span class="crayon-i">features</span>=<span class="crayon-i">huge</span><span class="crayon-h"> </span>--<span class="crayon-i">enable</span>-<span class="crayon-i">cscope</span><span class="crayon-h"> </span>--<span class="crayon-i">enable</span>-<span class="crayon-i">gui</span>=<span class="crayon-i">gtk2</span><span class="crayon-h"> </span><span class="crayon-sy">\</span></div><div class="crayon-line" id="crayon-649540158b8c3932379201-9">--<span class="crayon-i">disable</span>-<span class="crayon-i">selinux</span><span class="crayon-h"> </span>--<span class="crayon-i">prefix</span>=/<span class="crayon-i">usr</span>/<span class="crayon-i">local</span><span class="crayon-h"> </span><span class="crayon-sy">\</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540158b8c3932379201-10">--<span class="crayon-i">enable</span>-<span class="crayon-i">xim</span><span class="crayon-h"> </span>--<span class="crayon-i">enable</span>-<span class="crayon-i">fontset</span><span class="crayon-h"> </span><span class="crayon-sy">\</span></div><div class="crayon-line" id="crayon-649540158b8c3932379201-11">--<span class="crayon-i">enable</span>-<span class="crayon-i">gpm</span><span class="crayon-h"> </span><span class="crayon-sy">\</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540158b8c3932379201-12">--<span class="crayon-i">enable</span>-<span class="crayon-i">rubyinterp</span><span class="crayon-h"> </span><span class="crayon-sy">\</span></div><div class="crayon-line" id="crayon-649540158b8c3932379201-13">--<span class="crayon-i">with</span>-<span class="crayon-i">python</span>-<span class="crayon-i">config</span>-<span class="crayon-i">dir</span>=/<span class="crayon-i">usr</span>/<span class="crayon-i">lib</span>/<span class="crayon-i">python2</span><span class="crayon-sy">.</span><span class="crayon-cn">6</span>/<span class="crayon-i">config</span><span class="crayon-h"> </span><span class="crayon-sy">\</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540158b8c3932379201-14">--<span class="crayon-i">enable</span>-<span class="crayon-i">luainterp</span>=<span class="crayon-i">yes</span><span class="crayon-h"> </span>--<span class="crayon-i">with</span>-<span class="crayon-i">lua</span>-<span class="crayon-i">prefix</span>=/<span class="crayon-i">usr</span></div><div class="crayon-line" id="crayon-649540158b8c3932379201-15">&nbsp;</div><div class="crayon-line crayon-striped-line" id="crayon-649540158b8c3932379201-16"><span class="crayon-c"># コンパイル＆インストール</span></div><div class="crayon-line" id="crayon-649540158b8c3932379201-17"><span class="crayon-r">make</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540158b8c3932379201-18"><span class="crayon-r">make</span><span class="crayon-h"> </span><span class="crayon-i">install</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

</div>
<h2>実際に動かしてみた</h2>
<div style="padding-left: 15px;">
<a href="/uploads-archive/2015/09/Untitled5.gif"><img decoding="async" loading="lazy" src="/uploads-archive/2015/09/Untitled5-300x165.gif" alt="vim操作キャプチャ" width="300" height="165" class="alignnone size-medium wp-image-8168" srcset="/uploads-archive/2015/09/Untitled5-300x165.gif 300w, /uploads-archive/2015/09/Untitled5-1024x565.gif 1024w, /uploads-archive/2015/09/Untitled5-228x126.gif 228w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<p>整形しつつ一気にコピペが出来て便利です。
</p></div>
<h2>余談</h2>
<div style="padding-left: 15px;">
これ自体よりもvimのキャプチャが今回は時間かかりました・・・。</div.

</p>

vimでクリップボードを扱ってみる

<p>半年ほど前に紹介した「跨境通」のリアル店舗が9日オープンしたとのこと。</p>
<p>■元記事</p>
<p><a href="http://ascii.jp/elem/000/001/048/1048808/" target="_blank">http://ascii.jp/elem/000/001/048/1048808/</a></p>
<p>&nbsp;</p>
<p>■以前紹介した記事</p>
<p><a href="/officer/%E4%B8%AD%E5%9B%BD%E5%9B%BD%E5%96%B6%E4%BC%81%E6%A5%AD%E3%81%8C%E9%81%8B%E7%94%A8%E3%81%99%E3%82%8B%E8%B6%8A%E5%A2%83ec%E3%83%97%E3%83%A9%E3%83%83%E3%83%88%E3%83%95%E3%82%A9%E3%83%BC%E3%83%A0%E3%80%8C.html" target="_blank">/officer/%E4%B8%AD%E5%9B%BD%E5%9B%BD%E5%96%B6%E4%BC%81%E6%A5%AD%E3%81%8C%E9%81%8B%E7%94%A8%E3%81%99%E3%82%8B%E8%B6%8A%E5%A2%83ec%E3%83%97%E3%83%A9%E3%83%83%E3%83%88%E3%83%95%E3%82%A9%E3%83%BC%E3%83%A0%E3%80%8C.html</a></p>
<p>&nbsp;</p>
<p>名称は「跨境電子商務O2O体験店」というらしく、跨境通に出店する企業が商品を展示し</p>
<p>実際の商品を試用することができるようになっているとのこと。</p>
<p>その場でQRコードを読み込んで注文することができるらしい。</p>
<p>&nbsp;</p>
<p>まだ情報が少なく規模感や評判が不明だが</p>
<p>オートバックスセブン社が9月9日から跨境通に出店しており、</p>
<p>跨境電子商務O2O体験店にも店舗を出すことが決まっているらしく</p>
<p>今後は同社経由での情報が伝わってきそうだ</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>最後に、跨境通自体をまだ見たことが無かったので軽く見てみた</p>
<p><a href="http://www.kjt.com/" target="_blank">http://www.kjt.com/</a></p>
<p>&nbsp;</p>
<p>商品数は6,320件と、まだかなり充実しているわけではなさそうだが、</p>
<p>メリーズ(テープ / 5kg / 90枚)が105元であり、amazon.co.jpの最安2,250円(送料込)よりも安く</p>
<p>上海市政府が輸送費や関税を優遇しているためかかなり安く提供しているようだ</p>
<p>&nbsp;</p>
<p>2014年の中国における日本からの越境ECでの購入額は6,064億円(前年比150%)となっており</p>
<p>2018年には1.3兆円と予想されている大きな市場に対し、有効な手段となるか注目だ</p>


中国向け越境ECプラットフォーム「日本広場」がオープン

<p>昨日、就職イベントに参加してきたのですが、出展企業はそれぞれ目を引くために色々と工夫を凝らしていました。</p>
<p>こちらも横断幕やお揃いのTシャツなどで挑んだのですが、会場に来ていただいた参加者にアピールするにはさらに工夫が必要だなと実感しましたので、イベント会場で目立つために役立ちそうなモノを調べてみました。</p>
<h2>立体ポップ　DISPOとBOX</h2>
<p><a href="http://www.m-nap.com/nap01.html"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-8152" src="/uploads-archive/2015/09/1.png" alt="1" width="640" height="413" srcset="/uploads-archive/2015/09/1.png 640w, /uploads-archive/2015/09/1-300x194.png 300w, /uploads-archive/2015/09/1-228x147.png 228w" sizes="(max-width: 640px) 100vw, 640px" /></a></p>
<p>今回参加したイベントでも立体的なモノは、何となくちゃんとしている企業に見えたので効果ありだと思います。</p>
<p><a href="/uploads-archive/2015/09/dispo1.jpg"><img decoding="async" loading="lazy" class="alignnone  wp-image-8149" src="/uploads-archive/2015/09/dispo1.jpg" alt="dispo1" width="436" height="244" srcset="/uploads-archive/2015/09/dispo1.jpg 1600w, /uploads-archive/2015/09/dispo1-300x168.jpg 300w, /uploads-archive/2015/09/dispo1-1024x573.jpg 1024w, /uploads-archive/2015/09/dispo1-228x128.jpg 228w" sizes="(max-width: 436px) 100vw, 436px" /></a><a href="/uploads-archive/2015/09/box1.jpg"><img decoding="async" loading="lazy" class="alignnone  wp-image-8151" src="/uploads-archive/2015/09/box1.jpg" alt="box1" width="238" height="240" srcset="/uploads-archive/2015/09/box1.jpg 248w, /uploads-archive/2015/09/box1-150x150.jpg 150w, /uploads-archive/2015/09/box1-228x230.jpg 228w" sizes="(max-width: 238px) 100vw, 238px" /></a></p>
<p>&nbsp;</p>
<p>価格はDispoが一番大きい物で11,000円、BOXの方は25cm×25cm×25cmの立方体4段が１SETで3000円との事です。</p>
<p><a href="http://www.m-nap.com/nap01.html">http://www.m-nap.com/nap01.html</a></p>
<h2>バックボード</h2>
<p>ほとんどの企業がブースの後ろに自社のロゴなどが入った大き目のボードまたは布を設置していました。</p>
<p><a href="/uploads-archive/2015/09/2.png"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-8153" src="/uploads-archive/2015/09/2.png" alt="2" width="640" height="422" srcset="/uploads-archive/2015/09/2.png 640w, /uploads-archive/2015/09/2-300x198.png 300w, /uploads-archive/2015/09/2-228x150.png 228w" sizes="(max-width: 640px) 100vw, 640px" /></a></p>
<p>名前も調べてみて初めて知ったのですが、バックボードというらしいです。</p>
<p>スタンドを広げて布を広げる作りになっているようです。布に直接ロゴなどを印刷してマジックテープでスタンドに張り付けられるようになっています。</p>
<p>印刷代も含めると10万円を超えてきますが、折り畳みもできるので持ち運びは便利そうです。</p>
<p><a href="http://homareprinting.jp/products/detail.php?product_id=1889">http://homareprinting.jp/products/detail.php?product_id=1889</a></p>
<h2>バナースタンド</h2>
<p>バックボードよりはサイズダウンしてしまいますが、押したい製品があったりする場合にいいかなと思います。</p>
<p><a href="/uploads-archive/2015/09/3.png"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-8154" src="/uploads-archive/2015/09/3.png" alt="3" width="640" height="422" srcset="/uploads-archive/2015/09/3.png 640w, /uploads-archive/2015/09/3-300x198.png 300w, /uploads-archive/2015/09/3-228x150.png 228w" sizes="(max-width: 640px) 100vw, 640px" /></a></p>
<p>&nbsp;</p>
<p>価格も1万円程度なのでお手頃（？）な感じです。</p>
<h2>のぼり</h2>
<p>会場の雰囲気にもよりますが、安く作れるので手っ取り早いかもしれません。</p>
<p><a href="http://www.tonbo21.jp/eps.html"><img decoding="async" loading="lazy" class="alignnone  wp-image-8155" src="/uploads-archive/2015/09/4.png" alt="4" width="641" height="481" srcset="/uploads-archive/2015/09/4.png 640w, /uploads-archive/2015/09/4-300x225.png 300w, /uploads-archive/2015/09/4-228x171.png 228w" sizes="(max-width: 641px) 100vw, 641px" /></a></p>
<p>価格は安いお店なら1枚1000円前後から作れるみたいです。</p>
<h2>立体ロゴ</h2>
<p><a href="/uploads-archive/2015/09/5.jpg"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-8160" src="/uploads-archive/2015/09/5.jpg" alt="5" width="640" height="432" srcset="/uploads-archive/2015/09/5.jpg 640w, /uploads-archive/2015/09/5-300x203.jpg 300w, /uploads-archive/2015/09/5-228x154.jpg 228w" sizes="(max-width: 640px) 100vw, 640px" /></a></p>
<p>素材は色々ありますが、発砲スチロールや段ボールで会社ロゴや製品ロゴを置いておくと、それなりに見えるのでオススメです。</p>
<p>価格はサイズによるので何とも言えませんが、頑張れば自力で作れそうな気もします。</p>
<p>実際に自力でつくった企業さんの記事もありました→<a href="https://nanapi.jp/13923">「会社のロゴを発泡スチロールで作る方法」</a></p>


Company

Our Solutions

Support

News

Blog

Blogブログ

カテゴリーから探す

年別から見る

記事一覧

2015/10/20

2015/10/14

2015/10/14

2015/10/14

2015/10/14

2015/10/07

2015/10/07

2015/10/07

2015/10/06

2015/10/06

2015/09/30

2015/09/30

2015/09/30

2015/09/30

2015/09/16

2015/09/16

2015/09/16

2015/09/16