ルート相対パスを使ったHTMLの制作・確認をnode.jsのローカルな簡易サーバで効率的にする方法

<p>少し前からYoutube360°なるものが出ているそうで、ちょっと見てみたらスゴくてっ技術の進化に驚かされます。</p>
<p>けっこう前にRicohのthetaという360°のパノラマ写真が取れるカメラを知る機会があって、軽く不動産関係のお客さんにお薦めしていたのですが、このthetaというカメラを使っても作れるようです。<br />
この写真を撮ることは出来ても、ユーザーとかにどう見せればいいんだろうと思ってたのですが、<br />
Youtubeに載っけてサイトに貼りつければ良さそうですね！</p>
<p>ちなみに、スマホはもちろん、PCブラウザでも見ることが出来ます。chromeやfirefoxで問題なかったのですが、IEはちょっとわかりません。。。<br />
スマホの方が感覚的に見ることが出来るのでぜひ見てみてください！</p>
<h2>カンタス航空</h2>
<p><iframe loading="lazy" width="560" height="315" src="https://www.youtube.com/embed/lJype_TafRk" frameborder="0" allowfullscreen></iframe></p>
<h2>音楽のライブ</h2>
<p><iframe loading="lazy" width="560" height="315" src="https://www.youtube.com/embed/jWMSH3ioD88" frameborder="0" allowfullscreen></iframe></p>
<h2>グランドキャニオン</h2>
<p><iframe loading="lazy" width="560" height="315" src="https://www.youtube.com/embed/W5OgQaFaWKs" frameborder="0" allowfullscreen></iframe><br />
これもう観光した気分になれますね。。。</p>
<h2>予告犯の予告</h2>
<p>日本の映画の予告としても使用されていました。<br />
<iframe loading="lazy" width="560" height="315" src="https://www.youtube.com/embed/x3dhMxf7-QM" frameborder="0" allowfullscreen></iframe></p>
<p>最近動画を扱うことが増えてきましたが、<br />
新たにこの360°動画も出てきそうですね！</p>
<p>観光、不動産、イベント、採用関係、等々使えそうなシーンはいろいろありそうです。</p>
<p>今後の発展に期待！！</p>
<p>360°カメラは以下になります。<br />
<a href="https://theta360.com/ja/" target="_blank" class="link">RICOH THETA</a><br />
<a href="http://kodakpixpro.com/Americas/cameras/actioncamera/sp360.php"  target="_blank" class="link">Kodak Digital Cameras | SP360 Action Camera</a></p>
<p>作り方やyoutubeへのアップロードは以下をご覧ください！<br />
<a href="https://theta360.com/ja/howto-youtube/" target="_blank" class="link">RICOH THETAで簡単にYouTubeへアップロードする方法 | RICOH THETA</a><br />
<a href="http://francepresent.com/360-panorama/" target="_blank" class="link">youtubeで360度すべて見渡せる動画が人気。その作り方は？</a></p>


YouTube360°がスゴい！！

<p>AltJSなる言葉を最近知りましたが、よく見たら知っている言語でそんな呼び方をするんだ・・・って感じです。</p>
<p>AltJSとは(Altnative Javascript)ということでその名の通りjavascriptの代替言語ですね！</p>
<p>代替というよりかは、より簡単に書けるツールみたいなイメージなんでしょうか？</p>
<p>それぞれの言語で書いたものをコンパイルとすると、javascriptに変換されるという感じで、<br />
早く、読みやすく書くためのものですね。<br />
CSSのSASSやlessみたいな感じですね〜</p>
<p>それでは早速紹介します！</p>
<p>&nbsp;</p>
<h2>TypeScript</h2>
<p><img decoding="async" loading="lazy" class="alignnone wp-image-7739" src="/uploads-archive/2015/07/Welcome-to-TypeScript-1024x539.jpg" alt="Welcome to TypeScript" width="630" height="332" srcset="/uploads-archive/2015/07/Welcome-to-TypeScript-1024x539.jpg 1024w, /uploads-archive/2015/07/Welcome-to-TypeScript-300x158.jpg 300w, /uploads-archive/2015/07/Welcome-to-TypeScript-228x120.jpg 228w, /uploads-archive/2015/07/Welcome-to-TypeScript.jpg 1225w" sizes="(max-width: 630px) 100vw, 630px" /><br />
TypeScriptはマイクロソフトが開発したオープンソースで、出力されたJavaScriptコードはとても読みやすいようです。</p>
<p><a href="http://www.typescriptlang.org/" target="_blank">Welcome to TypeScript</a></p>
<h2>CoffeeScript</h2>
<p><img decoding="async" loading="lazy" class="alignnone wp-image-7735" src="/uploads-archive/2015/07/CoffeeScript-1024x539.jpg" alt="CoffeeScript" width="640" height="337" srcset="/uploads-archive/2015/07/CoffeeScript-1024x539.jpg 1024w, /uploads-archive/2015/07/CoffeeScript-300x158.jpg 300w, /uploads-archive/2015/07/CoffeeScript-228x120.jpg 228w, /uploads-archive/2015/07/CoffeeScript.jpg 1225w" sizes="(max-width: 640px) 100vw, 640px" /><br />
コード量を少なく、わかりやすく書けるものでよりシンプルにjavascriptを書きやすくしているようです。<br />
また、構文がRubyと似ていて、Railsに標準でサポートされてるようです。<br />
<a href="http://coffeescript.org/#top" target="_blank">CoffeeScript</a></p>
<h2>Dart</h2>
<p><img decoding="async" loading="lazy" class="alignnone wp-image-7736" src="/uploads-archive/2015/07/Dart-1024x539.jpg" alt="Dart" width="640" height="337" srcset="/uploads-archive/2015/07/Dart-1024x539.jpg 1024w, /uploads-archive/2015/07/Dart-300x158.jpg 300w, /uploads-archive/2015/07/Dart-228x120.jpg 228w, /uploads-archive/2015/07/Dart.jpg 1225w" sizes="(max-width: 640px) 100vw, 640px" /><br />
Googleによって開発された言語で、他のものと同じようにコンパイルして利用するのですが、本当の意味で代替になろうとしているようです。javascriptの替りの言語になろうとしているようですが、IEで対応しないそうです。。。<br />
<a href="https://www.dartlang.org/" target="_blank">Dart</a></p>
<h2>Haxe</h2>
<p><img decoding="async" loading="lazy" class="alignnone wp-image-7737" src="/uploads-archive/2015/07/Haxe-The-Cross-platform-Toolkit-1024x539.jpg" alt="Haxe - The Cross-platform Toolkit" width="630" height="332" srcset="/uploads-archive/2015/07/Haxe-The-Cross-platform-Toolkit-1024x539.jpg 1024w, /uploads-archive/2015/07/Haxe-The-Cross-platform-Toolkit-300x158.jpg 300w, /uploads-archive/2015/07/Haxe-The-Cross-platform-Toolkit-228x120.jpg 228w, /uploads-archive/2015/07/Haxe-The-Cross-platform-Toolkit.jpg 1225w" sizes="(max-width: 630px) 100vw, 630px" /><br />
ヘックスと呼び、<br />
JavaScript以外にも、ActionScript、C++、Java、PHP等への変換も可能だそうです。<br />
<a href="http://haxe.org/" target="_blank">Haxe &#8211; The Cross-platform Toolkit</a></p>
<h2>JSX</h2>
<p><img decoding="async" loading="lazy" class="alignnone wp-image-7738" src="/uploads-archive/2015/07/JSX-a-faster-safer-easier-JavaScript-1024x539.jpg" alt="JSX - a faster, safer, easier JavaScript" width="630" height="332" srcset="/uploads-archive/2015/07/JSX-a-faster-safer-easier-JavaScript-1024x539.jpg 1024w, /uploads-archive/2015/07/JSX-a-faster-safer-easier-JavaScript-300x158.jpg 300w, /uploads-archive/2015/07/JSX-a-faster-safer-easier-JavaScript-228x120.jpg 228w, /uploads-archive/2015/07/JSX-a-faster-safer-easier-JavaScript.jpg 1225w" sizes="(max-width: 630px) 100vw, 630px" /><br />
こちらはDeNAが開発した言語です。<br />
特徴はコンパイル後のjavascriptが早く動作されるようにしているようです。C++にも変換できるような出来ないような感じらしいです・・・<br />
<a href="https://jsx.github.io/" target="_blank">JSX &#8211; a faster, safer, easier JavaScript</a><br />
５つありますが、どれが一番というよりは、ユーザーの得意分野や環境構築によって適したものがあるようです。<br />
ですが、シンプルに代替言語っていう点で見ると、TypeScriptが一歩リードしているようです。<br />
TypeScriptは今後のjavascriptと言われており、JavaScriptの欠点を直したものがTypeScriptであるからです。<br />
また、javascriptのライブラリもそのまま使用できるようなので、まずはTypeScriptから手をつけてみるのがいいかもしれません。</p>
<p>【参考ブログ】<br />
<a href="https://html5experts.jp/clockmaker/2183/" target="_blank">モダンな言語でHTML5を開発しよう！ 俯瞰して理解するaltJSの比較 (前篇 – TypeScript, CoffeeScript, Haxe) | HTML5Experts.jp</a><br />
<a href="http://yohshiy.blog.fc2.com/category28-1.html" target="_blank">altJS(JavaScript代替言語) | プログラマーズ雑記帳</a></p>


javascriptの代替言語となるAltJSの代表5つ

<p>サーバーサイドのプログラムとして数年前から注目されている<strong>Node.js</strong>ですが、</p>
<p>私は、サーバーサイドで動くJavaScriptで、非同期の処理が得意というくらいの認識しかなかったので、</p>
<p>さすがにまずいと思い、どんなものなのか調べてみました。</p>
<p>&nbsp;</p>
<p>今回は同じくサーバーサイドで動くプログラミング言語であるPHPと比較する形でまとめてみました。</p>
<p>(私はまだ理解が浅いので、間違ったことを書いてしまっている可能性がありますので、ざっくりと参考までに)</p>
<p>&nbsp;</p>
<h2>1. Node.jsのJavaScriptとPHPは基本的に役割が異なる</h2>
<p>正直私はNode.jsはPHPを動かすためのApacheのようにJSファイルをサーバー上に置くことで、</p>
<p>それを実行してくれるようにするものだと思っていました。</p>
<p>実際はそうではなく、Node.jsはサーバーサイドでJavaScriptを実行できるようにしてくれるものです。</p>
<p>これは、JSファイルをサーバー上の特定のディレクトリに配置すると自動的に実行できるようにするという意味ではありません。</p>
<p>実際には、以下のようにコマンドでNode.jsにJSファイルを実行するように指示することで、JavaScriptは実行されます。</p>

		<div id="crayon-64954015892c0603645872" 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">Linux command</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;">
$ node example.js</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-64954015892c0603645872-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-64954015892c0603645872-1"><span class="crayon-sy">$</span><span class="crayon-h"> </span><span class="crayon-e">node </span><span class="crayon-i">example</span><span class="crayon-sy">.</span><span class="crayon-i">js</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>さらに、これを実行するとPHPのようにWebページにテキストが表示されるというものでもなく、</p>
<p>Webページにテキストを表示は、以下のようにJSファイル内でHTTPモジュールを呼び出すことで可能になります。</p>

		<div id="crayon-64954015892c4036206896" 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">Node.js JavaScript</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;">
var http = require('http'); //httpモジュールの呼び出し
 
http.createServer(function (request, response) {
    response.writeHead(200, {'Content-Type': 'text/plain'}); //ヘッダー情報の書き込み
    response.end('Hello World\n'); //テキストの書き込み
}).listen(8000); //ポートの指定</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-64954015892c4036206896-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-64954015892c4036206896-2">2</div><div class="crayon-num" data-line="crayon-64954015892c4036206896-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-64954015892c4036206896-4">4</div><div class="crayon-num" data-line="crayon-64954015892c4036206896-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-64954015892c4036206896-6">6</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 13px !important; line-height: 18px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-64954015892c4036206896-1"><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-i">http</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-e">require</span><span class="crayon-sy">(</span><span class="crayon-s">'http'</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span><span class="crayon-h"> </span><span class="crayon-c">//httpモジュールの呼び出し</span></div><div class="crayon-line crayon-striped-line" id="crayon-64954015892c4036206896-2"><span class="crayon-h"> </span></div><div class="crayon-line" id="crayon-64954015892c4036206896-3"><span class="crayon-i">http</span><span class="crayon-sy">.</span><span class="crayon-e">createServer</span><span class="crayon-sy">(</span><span class="crayon-t">function</span><span class="crayon-h"> </span><span class="crayon-sy">(</span><span class="crayon-i">request</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-i">response</span><span class="crayon-sy">)</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-64954015892c4036206896-4"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-i">response</span><span class="crayon-sy">.</span><span class="crayon-e">writeHead</span><span class="crayon-sy">(</span><span class="crayon-cn">200</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-sy">{</span><span class="crayon-s">'Content-Type'</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-s">'text/plain'</span><span class="crayon-sy">}</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span><span class="crayon-h"> </span><span class="crayon-c">//ヘッダー情報の書き込み</span></div><div class="crayon-line" id="crayon-64954015892c4036206896-5"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-i">response</span><span class="crayon-sy">.</span><span class="crayon-st">end</span><span class="crayon-sy">(</span><span class="crayon-s">'Hello World\n'</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span><span class="crayon-h"> </span><span class="crayon-c">//テキストの書き込み</span></div><div class="crayon-line crayon-striped-line" id="crayon-64954015892c4036206896-6"><span class="crayon-sy">}</span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-e">listen</span><span class="crayon-sy">(</span><span class="crayon-cn">8000</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span><span class="crayon-h"> </span><span class="crayon-c">//ポートの指定</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>このコードでは　「Hello World」と書かれたテキストファイルが8000番ポートに出力されます。</p>
<p>&nbsp;</p>
<p>ここまで見ていただいて分かる通り、Node.jsにおけるJavaScriptはPHPとは根本的な役割が違います。</p>
<p><a href="/uploads-archive/2015/07/node-js-in-web1.png"><img decoding="async" loading="lazy" class="alignnone wp-image-7711" src="/uploads-archive/2015/07/node-js-in-web1.png" alt="node-js-in-web" width="656" height="465" srcset="/uploads-archive/2015/07/node-js-in-web1.png 960w, /uploads-archive/2015/07/node-js-in-web1-300x213.png 300w, /uploads-archive/2015/07/node-js-in-web1-228x162.png 228w" sizes="(max-width: 656px) 100vw, 656px" /></a></p>
<p>PHPはApacheなどのHTTPサーバ上でHTMLを表示したりデータベースを操作したりするWebアプリを作成することが役割となりますが、</p>
<p>Node.jsでのJavaScriptでは、HTTPサーバやファイルサーバなどを作成したりするなど、サーバのより根幹的なアプリを作成することも役割となります。</p>
<p>&nbsp;</p>
<h2>2. PHP(Apache)は同期処理×マルチスレッド、Node.jsは非同期処理×シングルスレッド</h2>
<p>PHPでは何かプログラムを実行する場合、</p>
<p>その処理が終わるまでは他の処理が始まらない同期処理という方法でプログラムを実行しています。</p>
<p>この方法では、同時に一つの処理しか行うことができないため、</p>
<p>同時に２つ以上の処理が必要な場合、</p>
<p>例えば複数のユーザーからアクセスがあった場合などには、</p>
<p>処理する場所を複数作ることで、平行して処理を行っています。</p>
<p>この複数に分けて処理する方法をマルチスレッドといいますが、</p>
<p>この方法は処理が増えるたびに処理する場所を確保する必要があるので、</p>
<p>メモリの消費が大きいという欠点があります。</p>
<p>&nbsp;</p>
<p>一方Node.jsでは、プログラムを実行するときに、</p>
<p>ある処理が終わる前に別の処理を実行する非同期処理という方法でプログラムを実行しています。</p>
<p>この方法ではひとつの場所で複数の処理を平行して行うことができるので、</p>
<p>処理する場所を複数に分ける必要がありません。</p>
<p>そのこともあり、Node.jsでは処理を一つの場所で行うシングルスレッドという方法で処理を行っています。</p>
<p><a href="/uploads-archive/2015/07/node-js2.png"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-7713" src="/uploads-archive/2015/07/node-js2.png" alt="node-js2" width="656" height="604" srcset="/uploads-archive/2015/07/node-js2.png 656w, /uploads-archive/2015/07/node-js2-300x276.png 300w, /uploads-archive/2015/07/node-js2-228x210.png 228w" sizes="(max-width: 656px) 100vw, 656px" /></a></p>
<p>&nbsp;</p>
<p>このあたりは↓こちらのサイトでの説明がわかりやすいです。</p>
<p><a href="http://codebreak.com/blog/takezoe/page/d0e2b2/" target="_blank">コンビニでわかるノンブロッキングIO | break the code!! | codebreak;</a></p>
<p>&nbsp;</p>
<h2>3. PHPはフロー駆動型、Node.jsはイベント駆動型</h2>
<p>PHPではプログラムによる命令があるたびに実行を行う「フロー駆動型」という実行形式をとっていますが、</p>
<p>Node.jsでは&#8221;ページが読み込まれた&#8221;、 &#8220;クライアントからリクエストがあった&#8221;などのイベントが起こったときに実行を行う「イベント駆動型」という実行形式をとっています。</p>
<p>イベント駆動型のプログラムでは、イベントが起こった時だけ実行するので、特定の処理が終わるのを待たずに別の処理を行うことができたり、処理の流れがわかりやすくなるなどのメリットがあります。</p>
<p>&nbsp;</p>
<p>他にも様々な違いや特徴がありますが、今回はこのあたりまでで。</p>
<p>&nbsp;</p>
<p>Node.jsがすべてのサイトに有利であるというわけではないので、</p>
<p>すべてのサイトがNode.jsに変わっていくということはないと思いますが、</p>
<p>リアルタイムな処理が求められるサイトなどでは特に強みを発揮しますので、</p>
<p>利用は更に広がっていくのではないかと思います。</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<h3>参考サイト</h3>
<p><a class="link" href="test.sachi-law.jp" target="_blank">WordPressとApache、PHP、MySQLの関係 | サイト構築日記(WordPress編）</a></p>
<p><a class="link" href="http://codebreak.com/blog/takezoe/page/d0e2b2/" target="_blank">コンビニでわかるノンブロッキングIO | break the code!! | codebreak;</a></p>
<p><a class="link" href="http://qiita.com/hshimo/items/1ecb7ed1b567aacbe559" target="_blank">Node.js を5分で大雑把に理解する &#8211; Qiita</a></p>
<p>&nbsp;</p>
<h3>参考図書</h3>
<p><a class="link" href="http://www.amazon.co.jp/dp/4839950695/" target="_blank">掌田 津耶乃 2014 現場で通用する力を身につける Node.jsの教科書</a></p>

Node.jsとは何なのか調べてみました

スマホ(iPhoneのsafari)のようにナビをスクロールの方向によって表示したり非表示にしたりする

<p>今回も書籍の紹介で、「アイデアのつくり方」という本です。<br />
これを読めばどんどんアイデアが出てくるようになる！っていう感じよりは、<br />
アイデアとはなにか？アイデアが生まれる道筋を丁寧に説明してくれています。</p>
<p>企画のアイデアや、デザインのアイデアを思いつかない、もっといいアイデアを思いつくようになりたいと思う方はぜひ読んでみるといいかと思います。</p>
<p>簡単に紹介させて頂きます。</p>
<h2>アイデアとは既存の要素の新しい組み合わせ以外の何ものでもない</h2>
<p>アイデアとは既存のあるものとあるものが組み合わさってできるものっていうのはよく言われていますよね。<br />
「0からなにかを作りたい」って言ってる人がいますが、なかなか0からってのはなくて、<br />
アイデアは既存の要素の組合せっていうことを本書は言ってます。</p>
<p>そしてアイデアが生まれる道筋は、<br />
本書とは違う言葉ですか私的にまとめると、</p>
<p>・材料収集<br />
↓<br />
・情報の整理<br />
↓<br />
・あれこれ思索する(組合せ、集中して考えに考えを重ねる)<br />
↓<br />
・一旦放置、違うことを考える(しかし頭の片隅においておく)<br />
↓<br />
・ふとした瞬間にアイデアが誕生</p>
<p>みたいな感じです。</p>
<p>いわゆるアイデアを思いつきやすいフレームワークを提供してくれるのではなく、<br />
アイデアが思いつく原則原理を流れに沿って説明してくれています。</p>
<p>もっと簡単にいうと、<br />
新しい製品を開発しようとしていて、それについてあれこれ考え、いろいろ試すがいいアイデアがでてこない。<br />
そして一旦離れて、違うことを見ていた・していた時に、ふとその製品のアイデアが生まれるくるみたいな感じです。<br />
前にテレビで全くこの流れと同じようにして生まれた製品があったのですが、忘れてしまいました・・・</p>
<p>この思いつくことを、「セレンディピティ」ともいうようです。（ちょっと違うかもしれませんが）</p>
<p>なにか考え事をしていて、思いつかなくて、<br />
一旦トイレへ行ったりとかお風呂入ったりとかタバコ吸いに行ったりとかすると思いついたみたいなことありませんか？？</p>
<p>それに近いものがあると思います。</p>
<p>ぜひ商品や企画を考える方は一度読むことをお薦めします！</p>
<p><iframe src="http://rcm-fe.amazon-adsystem.com/e/cm?t=alantrigger-22&#038;o=9&#038;p=8&#038;l=as1&#038;asins=4484881047&#038;ref=qf_sp_asin_til&#038;fc1=000000&#038;IS2=1&#038;lt1=_blank&#038;m=amazon&#038;lc1=0000FF&#038;bc1=000000&#038;bg1=FFFFFF&#038;f=ifr" style="width:120px;height:240px;" scrolling="no" marginwidth="0" marginheight="0" frameborder="0"></iframe></p>


「アイデアのつくり方」昔から変わらず愛される書籍

インラインSVGを使った、テキストを変えられるアイコン

<p>web上で動画を利用する際に色んな理由でGIFアニメーションに変換したいという場合があると思います。</p>
<p>最近メールに動画を埋め込む事でコンバージョン率が高くなったという事例をよく見ますが、動画ファイルを直接埋め込むと容量が大きすぎるために開けなかったり送れなかったりしてしまいます。そこでGIFアニメーションを使うことがよくあるみたいです。</p>
<p>そこで動画ファイルを簡単にGIFアニメーションに返還する方法を調べてみました。</p>
<h2>mp4ファイルをphotoshop ccを使って簡単にGIFアニメーションに返還する</h2>
<p>私も実際やってみたのですが、かなり簡単なので使える方法だと思います。しかし、動画ファイルがmp4である必要がみたいなので、そこだけご注意下さい。（h.264のmp4ファイル以外は試していません）</p>
<h3>動画を読み込む</h3>
<p>まずタイムラインを表示させます。</p>
<p><a href="/uploads-archive/2015/06/img1.jpg"><img decoding="async" loading="lazy" class="alignnone  wp-image-7603" src="/uploads-archive/2015/06/img1.jpg" alt="img1" width="700" height="394" srcset="/uploads-archive/2015/06/img1.jpg 720w, /uploads-archive/2015/06/img1-300x169.jpg 300w, /uploads-archive/2015/06/img1-228x128.jpg 228w" sizes="(max-width: 700px) 100vw, 700px" /></a></p>
<p>タイムラインにあるフィルムのようなアイコンをクリックしてメディア追加から読み込む動画ファイルを開きます。</p>
<p><a href="/uploads-archive/2015/06/img2.jpg"><img decoding="async" loading="lazy" class="alignnone  wp-image-7604" src="/uploads-archive/2015/06/img2.jpg" alt="img2" width="660" height="327" srcset="/uploads-archive/2015/06/img2.jpg 678w, /uploads-archive/2015/06/img2-300x149.jpg 300w, /uploads-archive/2015/06/img2-228x113.jpg 228w" sizes="(max-width: 660px) 100vw, 660px" /></a></p>
<p>読み込みが完了するとpremiereに近い編集画面になります。動画の切り貼りやトリミングなどかなりpremiereに近い感覚で編集が可能です。</p>
<p><a href="/uploads-archive/2015/06/img3.jpg"><img decoding="async" loading="lazy" class="alignnone  wp-image-7605" src="/uploads-archive/2015/06/img3.jpg" alt="img3" width="668" height="375" srcset="/uploads-archive/2015/06/img3.jpg 720w, /uploads-archive/2015/06/img3-300x168.jpg 300w, /uploads-archive/2015/06/img3-228x128.jpg 228w" sizes="(max-width: 668px) 100vw, 668px" /></a></p>
<p>ビデオグループの上にレイヤーを作ればタイムにあわせてテロップを出すこともできます。</p>
<p><a href="/uploads-archive/2015/06/img4.jpg"><img decoding="async" loading="lazy" class="alignnone  wp-image-7606" src="/uploads-archive/2015/06/img4.jpg" alt="img4" width="668" height="375" srcset="/uploads-archive/2015/06/img4.jpg 720w, /uploads-archive/2015/06/img4-300x168.jpg 300w, /uploads-archive/2015/06/img4-228x128.jpg 228w" sizes="(max-width: 668px) 100vw, 668px" /></a></p>
<p>さらにpremiereのビデオトランジションのような感覚でフェードをかけたりもできます。</p>
<p><a href="/uploads-archive/2015/06/img5.jpg"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-7607" src="/uploads-archive/2015/06/img5.jpg" alt="img5" width="594" height="420" srcset="/uploads-archive/2015/06/img5.jpg 594w, /uploads-archive/2015/06/img5-300x212.jpg 300w, /uploads-archive/2015/06/img5-228x161.jpg 228w" sizes="(max-width: 594px) 100vw, 594px" /></a></p>
<p>出力する時は「web用に保存」でGIFの形式で保存すれば完了です。</p>
<p>&nbsp;</p>
<h2>ファイルを軽くするためにフレームレートを変更する</h2>
<p>注意点としてはファイルの容量が重たくならないように気を付ける必要があります。せっかくGIFアニメーションにしても結局重たいファイルになってしまっては意味がないので、フレームレートを下げる事で容量を小さくします。</p>
<p>一般的には30fpsや24fpsなどが多いかと思うのですが、10fpsくらいまで下げて動画ファイルを書き出したほうがいいと思います。</p>
<p>やはり、どうしてもカクカクしてしまうのですが、これは仕方がないかと・・・</p>
<p>フレームレートの違いを比べてみて下さい。</p>
<p>10.00fps　480×270 ファイル容量　3.3MB</p>
<p><a href="/uploads-archive/2015/06/sample10fps1.gif"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-7610" src="/uploads-archive/2015/06/sample10fps1.gif" alt="sample10fps" width="480" height="270" /></a></p>
<p>29.97fps　480×270 ファイル容量　7.5MB</p>
<p><a href="/uploads-archive/2015/06/sample30fps.gif"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-7611" src="/uploads-archive/2015/06/sample30fps.gif" alt="sample30fps" width="480" height="270" /></a></p>


動画を簡単にGIFアニメーションに変換する方法

medium_nino-eye.jpg

small_nino-eye.jpg

thumbnail_nino-eye.jpg

nino-eye.jpg

インラインSVGの中の要素にリンクをつける方法

<p>こんなタイトルですが、書籍の紹介になります。。。</p>
<p>そもそも悩み事と考え事の違いみたいなところはよく語られたりしてますよね。</p>
<h2>悩み事と考え事の違いって？</h2>
<p><strong>【悩み事】</strong><br />
1.利益を生まないもの<br />
2.自分でコントロールできない問題（外部要因、環境や人間関係）<br />
3.ネガティブな気持ちになったり、過去の出来事を思って後悔したりする</p>
<p><strong>【考え事】</strong><br />
1.利益を生むもの<br />
2.自分でコントロールできる問題（内部要因）<br />
3.ポジティブな気持ちで、なにか目標を達成しようと、未来について思うこと</p>
<p>例えばこんな感じですが(もっといろいろとあると思います・・・)</p>
<p>要は、<br />
【悩み事】は非生産的で、【考え事】は生産的であると言えます。<br />
なので、<br />
同じ時間を使うなら「悩む」のではなく「考えましょう」ということですね。</p>
<p>とは言え、人生に悩みを尽きないですよね。。<br />
まぁよく私も悩みます。<br />
でもその悩みって実は時間が経っちゃうと忘れるどころか思い出せないことがほとんどです。</p>
<p>一年前の悩みなんて覚えてないですよね？！悩んでいたかどうかもよくわからないはずです。</p>
<p>つまり、悩みなんて結局覚えてないんだから、悩みに時間を浪費するなんてもったいない、<br />
もっと気楽にいこうっていう気持ちで日々過ごせたらいいなと思ってます。</p>
<h2>１日１０分であらゆる問題がスッキリする「ひとり会議」の教科書のご紹介</h2>
<p>話はだいぶ脱線しましたが、その「悩み事」を「考え事」に変えるであったり、<br />
「考え事」をシンプルにして実行しやすくするための考え方を紹介している本をご紹介します。</p>
<p>それは、「１日１０分であらゆる問題がスッキリする「ひとり会議」の教科書」という本です。<br />
<iframe loading="lazy" width="300" height="150" style="width: 120px; height: 240px;" 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=alantrigger-22&amp;o=9&amp;p=8&amp;l=as1&amp;m=amazon&amp;f=ifr&amp;ref=qf_sp_asin_til&amp;asins=4861139465" scrolling="no" marginwidth="0" marginheight="0" frameborder="0"></iframe></p>
<p>こちらは悩み事や考え事の解決のステップを4つにしており、</p>
<p><strong>１．悩み事や考え事を書き出す</strong><br />
<strong> ２．それぞれ「どうなるのが理想か」を考える</strong><br />
<strong> ３．その理想をどうやったらできるかを考える</strong><br />
<strong> ４．それぞれの答えを計画、実行する</strong></p>
<p>といった感じです。<br />
ちなみに上記記載の4つのステップ本に書いてあることとは違いますが、<br />
私はこう理解しているという考えになりますので、詳しくは本をご覧ください。</p>
<p>この本を読んで、ぜひ「悩む」のではなく、「考える」ようにしましょう！<br />
と自分にも再度言い聞かせつつのご紹介でした！</p>


悩み事・考え事を1人で解決するための方法

<p>ローディングアニメーションって画像として作るのは少し面倒くさいこともあり、2,3パターン作ってから全く作ってないのですが、CSSのみで出来るとなればいろんなパターンを作ってみたくなりますね！</p>
<p>今回は以下のサイトを元に自分で少し試してみました。<br />
15パターンのローディングアニメーションがあり、ダウンロード無料です。<br />
<a href="http://www.css-spinners.com/" class="link" target="_blank">css-spinners</a></p>
<p>私が作ったのは以下からご覧下さい。<br />
<a href="/demo/abe/58/" class="demo" target="_blank">DEMO</a></p>
<p>CSSのkeyframesやCSS3の装飾を使ってやってます。</p>
<p>参考サイトを見ると、複雑なやつはソースが凄いことになっています。。。</p>
<p>IE10以上の対応にはなりますが、基本はIE10,11が多いと思いますし、<br />
IE9の方でもローディング自体あってもなくてもコンテンツ自体には問題はないので<br />
ローディンはグ画像ではなく、CSSで作るもので充分な気がしますね！！</p>


CSSのみで実装されてるローディングアニメーション

SVG＆Canvas＆WebGLが選べる2Dのライブラリ「Two.js」

<p>「あうんの呼吸でコミュニケーション」というキャッチコピーで、キャプチャを撮り、それにメモを加えて遅れるというサービスが最近出来たそうです。</p>
<p>前にも海外のサービスでこういうのがあった気がしたのですが、<br />
少し使いづらかったのかあまり記憶に残ってないです。。。</p>
<p>コチラのほうが断然使い勝手は良さそうだなという感じです。</p>
<p>webサイトの制作で修正が発生すると、それを伝えるのが結構大変なこともあります。<br />
社内のみならいいのですが、お客さんや別事務所にいるスタッフにいる時なんかは、<br />
デザインの修正を電話やメールで伝えたりしますが、<br />
どうしても「どこの部分？」「どんな風に？」というやりとりをしながら確認していくことになり、<br />
双方が大変になります。<br />
たまにお客さんでwebサイトをプリントアウトして、それに書き込んでそれをデータをして送ってくれ、<br />
それはほぼ齟齬がなく修正できるのですが、かなり労力がかかってしまいます。</p>
<p>このサービスは「伝える側」と「受け取る側」が共にわかりやすい指示を簡単に作成できるかと思います。</p>
<p>簡単にこのサービスの特徴を説明すると、<br />
・無料、会員登録の必要もなし<br />
・URL、画像、クリップボードから修正ファイルを登録できる<br />
・URLの場合、BASIC認証もいける<br />
・トリミング機能あり<br />
・短縮URL発行、パスワードもかけられる</p>
<p>といった感じでしょうか。</p>
<p>では使い方を見て行きましょう！</p>
<p>&nbsp;</p>
<h2>AUNの使い方</h2>
<p>TOPページにURLを記入する欄がありますが、<br />
そこでURLを入れてボタンを押すだけで、キャプチャを撮りメモを記入する画面に移ります。<br />
ちなみにBASIC認証がかかっているページでもOKです。</p>
<p>URLがない場合は、「画像ファイル」「クリップボード」を使うこともできます。<br />
<a href="/uploads-archive/2015/06/3e73c77a5f2bd9a3ccf6ce6e5cd56043.jpg"><img decoding="async" loading="lazy" class="alignnone wp-image-7533" src="/uploads-archive/2015/06/3e73c77a5f2bd9a3ccf6ce6e5cd56043-1024x553.jpg" alt="2ビジュアルコミュニケーションツール - AUN[あうん]" width="630" height="340" srcset="/uploads-archive/2015/06/3e73c77a5f2bd9a3ccf6ce6e5cd56043-1024x553.jpg 1024w, /uploads-archive/2015/06/3e73c77a5f2bd9a3ccf6ce6e5cd56043-300x162.jpg 300w, /uploads-archive/2015/06/3e73c77a5f2bd9a3ccf6ce6e5cd56043-228x123.jpg 228w, /uploads-archive/2015/06/3e73c77a5f2bd9a3ccf6ce6e5cd56043.jpg 1233w" sizes="(max-width: 630px) 100vw, 630px" /></a></p>
<p>&nbsp;</p>
<p>画像をアップすると、トリミングをすることもできます。</p>
<p>メモを記入する画面は以下の通り、<br />
<a href="/uploads-archive/2015/06/57626826c9b88d39b6e024bc6d883405.jpg"><img decoding="async" loading="lazy" class="alignnone wp-image-7534" src="/uploads-archive/2015/06/57626826c9b88d39b6e024bc6d883405-1024x553.jpg" alt="3ビジュアルコミュニケーションツール - AUN[あうん]" width="630" height="340" srcset="/uploads-archive/2015/06/57626826c9b88d39b6e024bc6d883405-1024x553.jpg 1024w, /uploads-archive/2015/06/57626826c9b88d39b6e024bc6d883405-300x162.jpg 300w, /uploads-archive/2015/06/57626826c9b88d39b6e024bc6d883405-228x123.jpg 228w, /uploads-archive/2015/06/57626826c9b88d39b6e024bc6d883405.jpg 1233w" sizes="(max-width: 630px) 100vw, 630px" /></a></p>
<p>&nbsp;</p>
<p>修正箇所を囲むとメモ書く吹き出しが出てきて、「メモを追加」を押すと、右側の「メモリスト」に追加されキャプチャには番号付きの赤線囲み線ができるので、どこが修正箇所なのかわかりやすくなっています。</p>
<p>完成し「保存する」を押すと、</p>
<p>&nbsp;</p>
<p><img decoding="async" loading="lazy" class="alignnone wp-image-7535" src="/uploads-archive/2015/06/8d3b7a4e8e22e67d327479d4b261a6b4-1024x547.jpg" alt="4ビジュアルコミュニケーションツール - AUN[あうん]" width="630" height="336" srcset="/uploads-archive/2015/06/8d3b7a4e8e22e67d327479d4b261a6b4-1024x547.jpg 1024w, /uploads-archive/2015/06/8d3b7a4e8e22e67d327479d4b261a6b4-300x160.jpg 300w, /uploads-archive/2015/06/8d3b7a4e8e22e67d327479d4b261a6b4-228x122.jpg 228w, /uploads-archive/2015/06/8d3b7a4e8e22e67d327479d4b261a6b4.jpg 1247w" sizes="(max-width: 630px) 100vw, 630px" /></p>
<p>&nbsp;</p>
<p>タイトル、パスワードを設定することができます。</p>
<p>そして保存をすると、共有URLが発行されますので、それを送れば相手側が見れるようになります！<br />
保存期間は7日間で、経過すると削除されるようです。</p>
<p>これはいいサービスですね！<br />
「伝える側」にとって非常にいいツールになると思います！</p>
<p>&nbsp;</p>
<p><a class="link" href="http://aun.tools/" target="_blank">ビジュアルコミュニケーションツール &#8211; AUN[あうん]</a></p>
<p>&nbsp;</p>
<p>最近web制作会社にとって便利なツールがどんどん出てきていて、<br />
効率的に進められるようになって気がします。</p>


デザインや文字の修正依頼で活躍しそうなサービス「AUN」

高さを揃えるjQueryプラグイン「jQuery-fixHeightSimple」をレスポンシブ対応しました

フォーム・選択要素で使えそうなjQuery「Selectivity」

jQueryでフリックを実装する場合に縦スクロールできなくなる問題を解決する方法

EC向け動画：クリックで色が変わる動画

<p>グラフィックスの要素をPNGやJPGなどより軽量サイズで作成でき、</p>
<p>色を変えたり、ある程度自在に扱うことができるSVGですが、</p>
<p>１つ問題点があります。</p>
<p>それは、アニメーションの実装です。</p>
<p>&nbsp;</p>
<p>SVGではSVGの規格としてアニメーションが存在しますが、</p>
<p>こちらはIEでは最新バージョンの11で対応がされていないなど、対応ブラウザが限られており、</p>
<p>実際に公開するサイトとしては現時点では利用ができません。</p>
<p>&nbsp;</p>
<p>また、JavaScriptで実装しようとすると、とてもブラウザに負荷をかけてしまい、</p>
<p>動きももっさりとしたものになってしまいます。</p>
<p>&nbsp;</p>
<p>これらの問題を解決するのが、CSS3のアニメーションです。</p>
<p>CSS3のアニメーションもIE10以上という制約はあるものの、</p>
<p>最新のブラウザは網羅しているので、実用としての可能性はより高いものとなります。</p>
<p>&nbsp;</p>
<p>SVGとCSS3アニメーションの効果的な使い方を検討してみましたが、</p>
<p>複数のグラフィックを別々に動かす場合、</p>
<p>１つのSVGの要素の中でそれぞれの要素をアニメーションさせるよりも、</p>
<p><a class="demo" href="/demo/ninomiya/73/" target="_blank">DEMO</a></p>
<p>↑こちらのDEMOのように、HTMLの各要素の中に部品としてSVGを読み込んで、</p>
<p>SVGを読み込んでいるそれぞれのHTMLの要素に対して、CSS3でアニメーションさせるのが、</p>
<p>いいのではないかと思います。</p>
<p>&nbsp;</p>
<p>もちろん、IE9はまだそれなりにシェアがありますので、IE9用にjQueryの振り分けはまだ必要かもしれません。</p>


Company

Our Solutions

Support

News

Blog

Blogブログ

カテゴリーから探す

年別から見る

記事一覧 - タグ: #デザイナー

2015/07/29

2015/07/22

2015/07/15

2015/07/15

2015/07/08

2015/07/01

2015/06/30

2015/06/27

2015/06/26

2015/06/25

2015/06/17

2015/06/17

2015/06/10

2015/06/10

2015/06/04

2015/06/04

2015/06/03

2015/05/29