<p>私の場合、CSSの色の指定はほとんどの場合&#8221;#f6f6f6&#8243;のような16進数による指定を行っています。</p>
<p>jQueryでも、cssやanimateで色の指定をする場合、16進数により指定しています。</p>
<p>また、IllustratorでSVGを書き出した場合、fillやstrokeのような色の指定は16進数により行われています。</p>
<p>&nbsp;</p>
<p>通常はこのことになんの問題もないのですが、</p>
<p>アニメーションをjQueryで実装する場合に、色の計算を直接しなくてはならない場合、</p>
<p>16進数の指定のままでは扱いにくいため、rgb形式に変換する必要があります。</p>
<p>&nbsp;</p>
<p>最新のブラウザの多くでは、</p>
<p>インラインSVG内の要素のアニメーションの手段としてCSS3のtransitionやanimationを使うことができます。</p>
<p>しかしながらIEでは、SVG内の要素にCSSでアニメーションの指定をしても、動作させることができません。</p>
<p>そのため、jQueryなどを使い、</p>
<p>色の計算を直接行うことで、SVGのアニメーションを実装しなくてはならない場合があります。</p>
<p>&nbsp;</p>
<p>そんなときに役立つのが、</p>
<p>rgbcolor.jsというJavaScriptのプラグインです。</p>
<p>&nbsp;</p>
<p>↓公式サイト</p>
<p><a class="link" href="http://www.phpied.com/rgb-color-parser-in-javascript/" target="_blank">RGB color parser in JavaScript / Stoyan&#8217;s phpied.com</a></p>
<p>&nbsp;</p>
<p>使い方は↓こちらのサイトでわかりやすい説明をされています。</p>
<p><a class="link" href="http://mementoo.info/archives/1792" target="_blank">【javascript】RGB⇔カラーコード変換ライブラリ</a></p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>こちらを使えば、</p>

		<div id="crayon-649540158d340532991159" 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;">
var color = new RGBColor("#DFB73A");</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-649540158d340532991159-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-649540158d340532991159-1"><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-i">color</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">RGBColor</span><span class="crayon-sy">(</span><span class="crayon-s">"#DFB73A"</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>や</p>

		<div id="crayon-649540158d344852701717" 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;">
var color = new RGBColor("rgb(255, 0, 255)");</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-649540158d344852701717-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-649540158d344852701717-1"><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-i">color</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">RGBColor</span><span class="crayon-sy">(</span><span class="crayon-s">"rgb(255, 0, 255)"</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>のように色を任意の形式で指定することで、</p>

		<div id="crayon-649540158d346535510359" 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;">
var red = color.r; //rgbの赤色を取得
var green = color.g; //rgbの緑色を取得
var blue = color.b; //rgbの青色を取得
var rgb = color.toRGB(); //rgb形式に変換
var hex = color.toHex(); //16進数形式で取得</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-649540158d346535510359-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540158d346535510359-2">2</div><div class="crayon-num" data-line="crayon-649540158d346535510359-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540158d346535510359-4">4</div><div class="crayon-num" data-line="crayon-649540158d346535510359-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-649540158d346535510359-1"><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-i">red</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-i">color</span><span class="crayon-sy">.</span><span class="crayon-i">r</span><span class="crayon-sy">;</span><span class="crayon-h"> </span><span class="crayon-c">//rgbの赤色を取得</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540158d346535510359-2"><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-i">green</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-i">color</span><span class="crayon-sy">.</span><span class="crayon-i">g</span><span class="crayon-sy">;</span><span class="crayon-h"> </span><span class="crayon-c">//rgbの緑色を取得</span></div><div class="crayon-line" id="crayon-649540158d346535510359-3"><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-i">blue</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-i">color</span><span class="crayon-sy">.</span><span class="crayon-i">b</span><span class="crayon-sy">;</span><span class="crayon-h"> </span><span class="crayon-c">//rgbの青色を取得</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540158d346535510359-4"><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-i">rgb</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-i">color</span><span class="crayon-sy">.</span><span class="crayon-e">toRGB</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span><span class="crayon-h"> </span><span class="crayon-c">//rgb形式に変換</span></div><div class="crayon-line" id="crayon-649540158d346535510359-5"><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-i">hex</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-i">color</span><span class="crayon-sy">.</span><span class="crayon-e">toHex</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span><span class="crayon-h"> </span><span class="crayon-c">//16進数形式で取得</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>上記のように柔軟に色の情報を変換・取得することができます。</p>
<p>&nbsp;</p>
<p>↓こちらはそれを応用してSVGのアニメーションを実装してみたDEMOです。</p>
<p><a class="demo" href="/demo/ninomiya/89/">DEMO</a></p>
<p>&nbsp;</p>
<p>用途は幅広いと思いますので、是非ご利用下さい。</p>

rgbcolor.jsで16進数⇔rgb()の色の変換を簡単にできる

<p>今回はwebサービスのご紹介になります。</p>
<p>この「booky.io」単純なブックマーク管理なサービスなのですが、オシャレで簡単に扱うことができます。</p>
<p>PCのブラウザだけでなく、タブレット・スマホでも使用可能なので、<br />
どんなデバイスでも同じようにブックマークを管理できます。<br />
今まで僕は、メールでリンクでPCへ送ったり、Pocketを使っていたりしてました。<br />
しかし、Pocketはあとで読むみたいな感じなので、<br />
ブックマークとはちょっと違う感じでなるべく使いたくありませんでした。<br />
あと、タグはありますが、カテゴリーがないので整理が難しいです。</p>
<p>その点、booky.ioはカテゴリーを自由に増やすこともでき、デザインもすっきりしていて見やすいです。<br />
登録する際もブックマークレットが用意されているので簡単です。</p>
<p><a href="http://booky.io/" class="link"  target="_blank">booky.io | Online bookmark manager. Your bookmarks available on all devices.</a></p>


オシャレなブックマーク管理サービス「booky.io」

<p>先日、youtubeのアカウントを作成して動画をアップしたところ、動画を管理するページに「第三者のコンテンツと一致した」という表示が出ました。</p>
<p>詳細を見てみると、どうやら「AdRev for a 3rd Party」つまり第三者の団体から「動画で使用されている楽曲は自分たちの著作物だ」と主張があったという事の様です。</p>
<p>著作権という言葉には、反射的にビクついてしまい変な汗が出たのですが、冷静に考えてみるとDTMソフト内のソフト音源を使用して作ったとはいえ、明らかに自分で作った曲に対して権利を主張されるのはおかしいはずです。</p>
<p>そうとう似ている曲なのかなとも思いましたが、waveの波形などからそこまで短時間で解析ができるのだろうかと疑問になりました。しかも第三者団体から権利の主張があったのは動画アップしてから1分もしない内のできごとです。</p>
<p>どうも疑わしいと思い、「AdRev for a 3rd Party」を検索してみたところ、同じ経験をした方の記事が大量に出てきました。</p>
<p>記事によると、動画に使われている曲はyoutube側から自動でスキャンされて、アルゴリズムによってyoutubeにコンテンツIDを登録している権利者の曲と一致すると「第三者のコンテンツと一致した」と表示されるとの事でした。作曲家やアーティストたちの権利を守るためのシステムですので、ごもっともな事です。確かにyoutube上では明らかに他社の著作物である、ミュージックビデオやテレビ番組をアップして、広告費を稼ごうなんてヤカラが沢山います。</p>
<h2>知らない間に広告収入を得る道具にされているかも</h2>
<p>しかし、私の事案について言えば逆で、むしろこちらが権利を奪われてしまっています。これはどうした事かと、さらに調べてみると、どうやら、ありもしない権利を主張している詐欺集団がyoutubeにはいるとの事でした。</p>
<p>今回の私の様に、「第三者のコンテンツと一致した」とされた場合、その動画は削除されたりする事はありません。どうなるかというと、勝手に広告が表示されるようになり、さらにその広告を表示する事で発生したお金は権利を主張する者に入る仕組みになっています。つまり、詐欺集団はアップされた動画に対して無作為に権利を主張して、動画が再生されるたびに広告収入を得ようとしているわけです。</p>
<p>アップした動画を削除しないといけないわけでもないので、一部の人はそのままにしてしまうい、知らない間に詐欺集団に広告費を謙譲してしまっているという事でした。</p>
<p>詐欺集団と疑いのある団体がこちらでまとめてあるので参考にしてください。</p>
<p><a href="http://youtube-false-content-id-match-claim-organizaitons.wikia.com/wiki/YouTube%E3%81%A7%E3%80%8C%E7%AC%AC%EF%BC%93%E8%80%85%E3%81%AE%E3%82%B3%E3%83%B3%E3%83%86%E3%83%B3%E3%83%84%E3%81%A8%E4%B8%80%E8%87%B4%E3%80%8D%E3%81%97%E3%81%9F%E3%81%A8%E3%81%8D%E7%96%91%E3%81%86%E3%81%B9%E3%81%8D%E5%9B%A3%E4%BD%93%E3%83%AA%E3%82%B9%E3%83%88_Wiki">http://youtube-false-content-id-match-claim-organizaitons.wikia.com/wiki/YouTube</a></p>
<h2>ありもしない権利を主張されたら</h2>
<p>では、ありもしない権利を主張されてしまった場合にはどうすればいいのか？というと、動画の管理者は「異議を申し立てる」ことができるようになっています。</p>
<p>管理ページの「異議を申し立てる」から、第三者の著作物ではない理由など詳細内容を入力する事で、詐欺行為を回避できます。</p>
<p>私の場合もすぐに異議を申し立てて、広告の表示はなくなりました。</p>
<p>こちらのサイトにもっと詳しい事が載っていますので参考にしてください。</p>
<p><a href="http://ghid.cocolog-nifty.com/band/2013/01/youtube-b7a7.html">http://ghid.cocolog-nifty.com/band/2013/01/youtube-b7a7.html</a></p>
<h2>フリー素材にはもちろん著作権があるので注意</h2>
<p>フリーのＢＧＭを使用している人は沢山いると思いますが、そういった音素材を提供している団体や個人の中にはyoutubeのコンテンツIDを取得している場合も多いみたいです。音素材を提供するサイトの中には、youtubeから間接的に広告収入をえるために無料でBGMを提供している場合もあるようなので、該当する場合は気をつけましょう。</p>


youtubeにはびこる著作権詐欺にご用心

<p>完全に自分のためなのだが、データをカラム数を指定してテーブルにしてくれるツールを作った。</p>
<p><a class="demo" href="/demo/hoshino/60/" target="_blank">デモ</a></p>
<p>&nbsp;</p>
<p>ライティングをしていてとりあえずリスト化したあとに</p>
<p>ワイヤーなどにするとき表組みしたい時がしばしばある。</p>
<p>HTMLはそのまま使えるし、プレビューをコピーすればExcelに貼り付けることもできるようになっている。</p>
<p>&nbsp;</p>
<p>例えばLaunchCartの機能一覧をメモして5カラムの表にすると</p>
<div style="height: 200px; overflow: scroll;">リッチテキストエディタ<br />
拡張フィールド<br />
SKU<br />
レビュー<br />
多階層カテゴリ<br />
お気に入り<br />
CSV登録<br />
棚卸し<br />
カスタマイズ帳票<br />
カスタマイズ注文CSV<br />
追跡番号<br />
ブログ・ニュース<br />
リソース管理<br />
スマホ対応<br />
フューチャーフォン対応<br />
休業日カレンダー<br />
配送指定日時自動計算<br />
売上分析<br />
管理者権限管理<br />
テンプレートエンジン<br />
非会員購入<br />
分割・リボ払い<br />
電話注文<br />
ギフト<br />
オプション商品<br />
同梱・別送<br />
複数配送先<br />
送料設定<br />
お届け先管理<br />
倉庫連携<br />
ポイント管理<br />
アンケート<br />
メルマガ<br />
コンバージョンタグ<br />
アフィリエイトタグ<br />
クーポンコード発行<br />
シリアルコード発行<br />
カスタム検索<br />
会員ランク<br />
メールテンプレート<br />
インポート・エクスポート<br />
決済手数料<br />
会員登録情報追加<br />
決済金額指定<br />
注文編集<br />
注文ステータス管理</div>
<p style="text-align: center; font-size: 2em;">↓</p>
<table>
<tbody>
<tr>
<td>リッチテキストエディタ</td>
<td>拡張フィールド</td>
<td>SKU</td>
<td>レビュー</td>
<td>多階層カテゴリ</td>
</tr>
<tr>
<td>お気に入り</td>
<td>CSV登録</td>
<td>棚卸し</td>
<td>カスタマイズ帳票</td>
<td>カスタマイズ注文CSV</td>
</tr>
<tr>
<td>追跡番号</td>
<td>ブログ・ニュース</td>
<td>リソース管理</td>
<td>スマホ対応</td>
<td>フューチャーフォン対応</td>
</tr>
<tr>
<td>休業日カレンダー</td>
<td>配送指定日時自動計算</td>
<td>売上分析</td>
<td>管理者権限管理</td>
<td>テンプレートエンジン</td>
</tr>
<tr>
<td>非会員購入</td>
<td>分割・リボ払い</td>
<td>電話注文</td>
<td>ギフト</td>
<td>オプション商品</td>
</tr>
<tr>
<td>同梱・別送</td>
<td>複数配送先</td>
<td>送料設定</td>
<td>お届け先管理</td>
<td>倉庫連携</td>
</tr>
<tr>
<td>ポイント管理</td>
<td>アンケート</td>
<td>メルマガ</td>
<td>コンバージョンタグ</td>
<td>アフィリエイトタグ</td>
</tr>
<tr>
<td>クーポンコード発行</td>
<td>シリアルコード発行</td>
<td>カスタム検索</td>
<td>会員ランク</td>
<td>メールテンプレート</td>
</tr>
<tr>
<td>インポート・エクスポート</td>
<td>決済手数料</td>
<td>会員登録情報追加</td>
<td>決済金額指定</td>
<td>注文編集</td>
</tr>
<tr>
<td>注文ステータス管理</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>


改行区切りのデータをテーブルに加工するツール

<p>以前、筆者がrubyを覚える(？)取っ掛かりであった</p>
<p>「goodbye chatwork」</p>
<p>退会する時に全て保存だけはしておこう！と思って命名されたのかは謎ですが、、、<br />
チャットワークのログを保存することが出来るツールです。</p>
<h2>インストール方法</h2>
<div style="padding-left: 15px;">
<p>Macでのインストールしか試してないのですが、</p>

		<div id="crayon-649540158d117696731357" 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;">
gem install goodbye_chatwork</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-649540158d117696731357-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-649540158d117696731357-1"><span class="crayon-e">gem </span><span class="crayon-e">install </span><span class="crayon-i">goodbye_chatwork</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>と入力するだけです。<br />
Rubyもインストールされている必要はあります。<br />
(昨今のMacはRuby標準装備のため、ここは割愛させていただきます。</p>
</div>
<h2>使用方法</h2>
<div style="padding-left: 15px;">
<p>何もオプション指定せずに</p>

		<div id="crayon-649540158d11b748611275" 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;">
goodbye_chatwork</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-649540158d11b748611275-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-649540158d11b748611275-1"><span class="crayon-i">goodbye_chatwork</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>とだけ入力すればUsageが表示されます。</p>

		<div id="crayon-649540158d11d828900743" 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;">
goodbye_chatwork -i {登録時のメールアドレス} -p {パスワード}</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-649540158d11d828900743-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-649540158d11d828900743-1"><span class="crayon-e">goodbye_chatwork</span><span class="crayon-h"> </span>-<span class="crayon-e">i</span><span class="crayon-h"> </span><span class="crayon-sy">{</span>登録時のメールアドレス<span class="crayon-sy">}</span><span class="crayon-h"> </span>-<span class="crayon-e">p</span><span class="crayon-h"> </span><span class="crayon-sy">{</span>パスワード<span class="crayon-sy">}</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>&nbsp;</p>
<p>このようにすれば自分の入っているグループチャットやダイレクトチャットの一覧が表示されます。</p>
<p>そして、例えば以下のように表示されているグループ部屋を保存しておきたい場合</p>

		<div id="crayon-649540158d11e518362777" 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;">
14549256 全社連絡 735</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-649540158d11e518362777-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-649540158d11e518362777-1"><span class="crayon-cn">14549256</span><span class="crayon-h"> </span>全社連絡<span class="crayon-h"> </span><span class="crayon-cn">735</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>&nbsp;</p>

		<div id="crayon-649540158d11f568532883" 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;">
goodbye_chatwork -i {メールアドレス} -p {パスワード} -e 14549256</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-649540158d11f568532883-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-649540158d11f568532883-1"><span class="crayon-e">goodbye_chatwork</span><span class="crayon-h"> </span>-<span class="crayon-e">i</span><span class="crayon-h"> </span><span class="crayon-sy">{</span>メールアドレス<span class="crayon-sy">}</span><span class="crayon-h"> </span>-<span class="crayon-e">p</span><span class="crayon-h"> </span><span class="crayon-sy">{</span>パスワード<span class="crayon-sy">}</span><span class="crayon-h"> </span>-<span class="crayon-i">e</span><span class="crayon-h"> </span><span class="crayon-cn">14549256</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>&nbsp;<br />
上記だとメッセージのログのみ保存。(作業ディレクトリにchatwork_logディレクトリが作成される)<br />
&nbsp;</p>

		<div id="crayon-649540158d120787481267" 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;">
goodbye_chatwork -i {メールアドレス} -p {パスワード} -x 14549256</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-649540158d120787481267-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-649540158d120787481267-1"><span class="crayon-e">goodbye_chatwork</span><span class="crayon-h"> </span>-<span class="crayon-e">i</span><span class="crayon-h"> </span><span class="crayon-sy">{</span>メールアドレス<span class="crayon-sy">}</span><span class="crayon-h"> </span>-<span class="crayon-e">p</span><span class="crayon-h"> </span><span class="crayon-sy">{</span>パスワード<span class="crayon-sy">}</span><span class="crayon-h"> </span>-<span class="crayon-i">x</span><span class="crayon-h"> </span><span class="crayon-cn">14549256</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>&nbsp;<br />
オプションをxにすると下位ディレクトリに部屋ごとの添付ファイルもダウンロード保存してくれる。
</p></div>
<h2>不具合など</h2>
<div style="padding-left: 15px;">
以前これを扱ったのは、一定条件下で一覧取得でコケるのを修正したからです。</p>
<p>ですが、、、どこを改修したのか覚えておらず、もう一度見なければ解らないと言う。<br />
パスワードをオプション指定直後に入力しなければならないと言うのも安全ではないですね。</p>
<p>どちらもrubyのプログラムを書き換えれば解決する問題です。</p>
<p>公式のAPIもあります。<br />
Botとか特定キーワードで通知させたり、L◯NEのアレみたいにひたすら会話をしてくれるAIPCを用意したりあｓ、、改良の余地は色々とありそうですね！</p></div>

Chatworkからログ保存してみる

【jQuery】IE9でページ遷移せずにファイルをPOSTしてJSONを受け取る

<p>ＶＴＲをクライアントに納品する際にＤＶＤプレーヤーで再生できる様に求められる事が未だにあると思います。</p>
<p>DVD-VIDEOの形式にするという事になると思いますが、大抵の場合編集後にできあがった映像の画質が悪くなってしまうはずです。</p>
<p>画像のサイズはＮＴＳＣで720×480ですので、現行のカメラで撮影した素材で作成した映像ならサイズダウンしてしまいます。ビットレートも9.6MbpsまでなのでDVDに書き出すと画質は数分の１まで落ちてしまいます。</p>
<p>何とかならないかと試行錯誤したところ、ある程度は軽減できたので、その方法をお伝えします。私はadobeのpremiereで編集を行っているので、adobe製品を使っての方法になりますが、他のツールを使っている方でも同じような事ができるはずです。</p>
<h2>まずはMPEG2で書き出す</h2>
<p><a href="/uploads-archive/2015/10/12.jpg"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-8362" src="/uploads-archive/2015/10/12.jpg" alt="1" width="640" height="523" srcset="/uploads-archive/2015/10/12.jpg 640w, /uploads-archive/2015/10/12-300x245.jpg 300w, /uploads-archive/2015/10/12-228x186.jpg 228w" sizes="(max-width: 640px) 100vw, 640px" /></a></p>
<p>編集が完了した動画をDVDにオーソライズ前に書き出す際にMPEG2形式で保存するように設定します。</p>
<p>DVD-VIDEOはMPEG2形式なので、最終的な画質は動画を書き出す際のビットレートに依存する事になります。</p>
<h2>ビットレートを最大にする</h2>
<p><a href="/uploads-archive/2015/10/21.jpg"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-8365" src="/uploads-archive/2015/10/21.jpg" alt="2" width="484" height="172" srcset="/uploads-archive/2015/10/21.jpg 484w, /uploads-archive/2015/10/21-300x107.jpg 300w, /uploads-archive/2015/10/21-228x81.jpg 228w" sizes="(max-width: 484px) 100vw, 484px" /></a></p>
<p>先述しましたがDVDのビットレートは最大で9.6Mbpsなので、書き出す際のビットレートを最大にします。ビットレートを高くするとデコーダーの負担は大きくなりますが画質が向上します。</p>
<p>この状態で動画ファイルを書き出して下さい。</p>
<h2>EncoreでDVDをオーソライズする</h2>
<p><img decoding="async" loading="lazy" class="alignnone size-full wp-image-8368" src="/uploads-archive/2015/10/31.jpg" alt="3" width="640" height="398" srcset="/uploads-archive/2015/10/31.jpg 640w, /uploads-archive/2015/10/31-300x187.jpg 300w, /uploads-archive/2015/10/31-228x142.jpg 228w" sizes="(max-width: 640px) 100vw, 640px" /></p>
<p>ちょっと前まではPCにDVDをオーソライズするソフトウェアが標準で入っていました。win7のビデオメーカーまではオーソライズができましたが、win8からビデオメーカーでDVDを作る事ができなくなってしまいました。もちろん無料、有料のオーソライズ用ソフトは沢山ありますが、adobeのCCを利用しているまたは、premiereCS6を利用されているのであれば、Encoreを使ってみてはいかがでしょうか。</p>
<p>メニュー画面なども自由に作れますので納品用としては使い勝手がいいと思います。</p>
<p>adobe CC　を利用されている場合は、CCのマネージャーから「以前のバージョンを表示」でpremiereCS6をインストールしてください。</p>
<p><a href="/uploads-archive/2015/10/41.jpg"><img decoding="async" loading="lazy" class="alignnone wp-image-8370" src="/uploads-archive/2015/10/41.jpg" alt="4" width="312" height="545" srcset="/uploads-archive/2015/10/41.jpg 456w, /uploads-archive/2015/10/41-172x300.jpg 172w, /uploads-archive/2015/10/41-228x399.jpg 228w" sizes="(max-width: 312px) 100vw, 312px" /></a></p>
<p>premiereCS6をインストールするとEncoreも一緒にインストールされるはずです。</p>


動画をDVD納品する際に画質を保持する方法

html5で増えたinput関係で実際使ってみたいもの

<p>フォントがわからない時、例えば似てるフォント使っといてと言われたときや自分で作ったのに何のフォントを使ったか思い出せないという時があると思う。</p>
<p>そんな時の対処法を2点</p>
<h2>WhatTheFont</h2>
<p><a href="http://www.myfonts.com/WhatTheFont/" target="_blank">http://www.myfonts.com/WhatTheFont/</a></p>
<p><a href="/uploads-archive/2015/10/launchcart.jpg"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-8317" src="/uploads-archive/2015/10/launchcart.jpg" alt="launchcart" width="500" height="100" srcset="/uploads-archive/2015/10/launchcart.jpg 500w, /uploads-archive/2015/10/launchcart-300x60.jpg 300w, /uploads-archive/2015/10/launchcart-228x46.jpg 228w" sizes="(max-width: 500px) 100vw, 500px" /></a><br />
まずはフォントを調べたい画像を用意する</p>
<p><a href="/uploads-archive/2015/10/2.png"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-8318" src="/uploads-archive/2015/10/2.png" alt="2" width="656" height="374" srcset="/uploads-archive/2015/10/2.png 656w, /uploads-archive/2015/10/2-300x171.png 300w, /uploads-archive/2015/10/2-228x130.png 228w" sizes="(max-width: 656px) 100vw, 656px" /></a><br />
それを選択してアップロード<br />
Continueをクリック</p>
<p><a href="/uploads-archive/2015/10/3.png"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-8319" src="/uploads-archive/2015/10/3.png" alt="3" width="656" height="575" srcset="/uploads-archive/2015/10/3.png 656w, /uploads-archive/2015/10/3-300x263.png 300w, /uploads-archive/2015/10/3-228x200.png 228w" sizes="(max-width: 656px) 100vw, 656px" /></a><br />
するとシステムで解析、判断したそれぞれの文字が出てくる。<br />
空欄であれば何の文字かを、間違っていれば修正してContinueをクリック</p>
<p><a href="/uploads-archive/2015/10/4.png"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-8320" src="/uploads-archive/2015/10/4.png" alt="4" width="656" height="558" srcset="/uploads-archive/2015/10/4.png 656w, /uploads-archive/2015/10/4-300x255.png 300w, /uploads-archive/2015/10/4-228x194.png 228w" sizes="(max-width: 656px) 100vw, 656px" /></a><br />
15件も近しいフォントがマッチした<br />
実際にはSteinerというフォントだったのだが、この中に正解は無かった<br />
ただ、似ているフォントを探すという意味ではすごく有用だと思われる</p>
<p>ただ、難点としては日本語フォントに対応していないということ</p>
<p>残念ながら日本語フォントに対応している類似のサイトは見つからず<br />
identifontというサービスを使うのが良さそう</p>
<h2>Identifont</h2>
<p><a href="http://www.identifont.jp/" target="_blank">http://www.identifont.jp/</a></p>
<p>形状別、名称別、スタイル別などでフォントを手動で検索できる</p>
<p>冒頭のようなケースでは形状別が良さそうだ</p>
<p><a href="/uploads-archive/2015/10/51.jpg"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-8321" src="/uploads-archive/2015/10/51.jpg" alt="5" width="300" height="300" srcset="/uploads-archive/2015/10/51.jpg 300w, /uploads-archive/2015/10/51-150x150.jpg 150w, /uploads-archive/2015/10/51-228x228.jpg 228w" sizes="(max-width: 300px) 100vw, 300px" /></a><br />
小塚ゴシック で試してみた</p>
<p><a href="/uploads-archive/2015/10/6.jpg"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-8322" src="/uploads-archive/2015/10/6.jpg" alt="6" width="656" height="2172" srcset="/uploads-archive/2015/10/6.jpg 656w, /uploads-archive/2015/10/6-91x300.jpg 91w, /uploads-archive/2015/10/6-309x1024.jpg 309w, /uploads-archive/2015/10/6-228x755.jpg 228w" sizes="(max-width: 656px) 100vw, 656px" /></a></p>
<p>正解！</p>
<p>ただ、あまりメジャーではないフォントは対応していないようだ</p>


画像のフォントが何かを調べる方法

Fine Uploaderを見やすく調整してみた

File Apiを使ってアップロードした画像を表示させる

<p>ナレーション撮りやカメラマイクで拾った音声ってプロ仕様のかなり良い機材を使っていれば別ですが、個人で購入できるレベルの機材ではノイズが気になると思います。特に民生機のカメラマイクで拾った音はかなり厳しいかもしれません。スタジオで撮影した音声でもマイクが悪いと「ザー」というノイズがひどかったりして、何とかノイズをキレイに軽減できないかと色々やってみました。</p>
<p>今までオーディオの編集はlogicを使ってやっていたので、まずlogicのノイズリダクションで試してみました。今回はコンデンサーマイクで録ったナレーションの編集なのですが、そもそも録音ブースを用意できず、さらに若干ピッチを変更する必要があったので、オーディオファイルにピッチシフトのエフェクトをかけました。</p>
<p>ピッチを変える前は、ある程度キレイにノイズを消せたのですが、ピッチを変えたところ、全く使えないほどノイズがひどくなってしまいました。</p>
<p>そこで使った事がなかったのですがAdobeのAuditionで同様の作業を行ってみました。</p>
<p>Auditionでは何の問題もなく、かなりキレイに仕上がってくれました。方法を簡単にご説明します。</p>
<p><a href="/uploads-archive/2015/10/11.jpg"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-8296" src="/uploads-archive/2015/10/11.jpg" alt="1" width="640" height="350" srcset="/uploads-archive/2015/10/11.jpg 640w, /uploads-archive/2015/10/11-300x164.jpg 300w, /uploads-archive/2015/10/11-228x125.jpg 228w" sizes="(max-width: 640px) 100vw, 640px" /></a></p>
<p>すでに録音が完了している場合はオーディオファイルを読み込んでください。（ビデオファイルに合わせてナレーションを録音する場合はマルチトラックセッションを新規で作成して下さい。）</p>
<p><a href="/uploads-archive/2015/10/2.jpg"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-8297" src="/uploads-archive/2015/10/2.jpg" alt="2" width="640" height="388" srcset="/uploads-archive/2015/10/2.jpg 640w, /uploads-archive/2015/10/2-300x182.jpg 300w, /uploads-archive/2015/10/2-228x138.jpg 228w" sizes="(max-width: 640px) 100vw, 640px" /></a></p>
<p>ノイズを軽減したいファイルを選択してエフェクトトラックから「ノイズリダクション→Noise Reduction」を選択します。</p>
<p>後はちょうどいい感じに調整してみてください。色々試しているうちにいい感じ設定が見つかると思います。</p>
<p><a href="/uploads-archive/2015/10/3.jpg"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-8298" src="/uploads-archive/2015/10/3.jpg" alt="3" width="511" height="431" srcset="/uploads-archive/2015/10/3.jpg 511w, /uploads-archive/2015/10/3-300x253.jpg 300w, /uploads-archive/2015/10/3-228x192.jpg 228w" sizes="(max-width: 511px) 100vw, 511px" /></a></p>
<p>クリックノイズ専用のノイズ除去やDeHummerという特定の周波数に限定して軽減するエフェクトもあります。</p>
<p><img decoding="async" loading="lazy" class="alignnone size-full wp-image-8299" src="/uploads-archive/2015/10/4.jpg" alt="4" width="506" height="234" srcset="/uploads-archive/2015/10/4.jpg 506w, /uploads-archive/2015/10/4-300x139.jpg 300w, /uploads-archive/2015/10/4-228x105.jpg 228w" sizes="(max-width: 506px) 100vw, 506px" /></p>
<p><img decoding="async" loading="lazy" class="alignnone size-full wp-image-8300" src="/uploads-archive/2015/10/5.jpg" alt="5" width="469" height="486" srcset="/uploads-archive/2015/10/5.jpg 469w, /uploads-archive/2015/10/5-290x300.jpg 290w, /uploads-archive/2015/10/5-228x236.jpg 228w" sizes="(max-width: 469px) 100vw, 469px" /></p>


adobe Audition 簡易な機材で録音した音声のノイズもキレイに軽減できる

<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>こういう眼から鱗が落ちるソフトが前からあるんですね〜。</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>


Company

Our Solutions

Support

News

Blog

Blogブログ

カテゴリーから探す

年別から見る

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

2015/11/11

2015/11/11

2015/11/11

2015/11/06

2015/10/28

2015/10/28

2015/10/28

2015/10/28

2015/10/23

2015/10/21

2015/10/20

2015/10/20

2015/10/14

2015/10/14

2015/10/14

2015/10/14

2015/10/07

2015/10/07