<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>2015年7月10日（金）より開催されているアートアクアリウム点に週末に行ってきました。</p>
<p>実は、私大学では今と全く関係のない、生物学を専攻しておりまして、昔から生き物は大変好きでした。 アートは、つい5月まで行われていたチームラボのアート展でえらく感動を受けて以来、ウェブという四角い画面以外からも吸収しないとなと心に決めてからの2回目のそういった展示会です。</p>
<p>意外とお出かけ情報系のメディアに埋め尽くされてしまって、体験談が見当たらないですね。 フラッシュ、動画撮影は禁止とのことですが、写真はOKだったので、iphoneでいっぱい取ってきました。</p>
<p><a href="http://artaquarium.jp/exhibition/nihonbashi2015.php">http://artaquarium.jp/exhibition/nihonbashi2015.php</a></p>
<h3 id="-">アートアクアリウムのビジネス面</h2>
<p>体験談は最後に述べるとして アート展のビジネスサイドをちょっと調べてみました。</p>
<p>主催は、アートアクアリウムアーティスト木村英智CEOが率いる株式会社エイチアイディー・インターアクティカという会社です。</p>
<p>ホームページによると457万人の有料入場者を集めたと記載があり、日本橋会場のものは大人1,000円子供600円の入場料でした。 大人対子供を2:1と仮定すると約40億の入場料収入とナイトアクアリウムというアルコールを提供するドリンク収入、その他は、物販収入、 コラボーレーションやスポンサー収入といったところになるかと思います。</p>
<p>しかしながら、原価も相当掛かっていますね。 イベントを盛り上げるための設備費もですが、生体を扱うための維持費というのがばかになりません。 私も以前にアクアリウムをかじったことがありますが、温度管理、酸素管理、光度管理、濾過装置、餌といったいわば小さな水槽の中で生態系が維持する 環境を人工的に整えなければなりません。</p>
<p>日本橋での開催は5回目とのことですが、広島やイタリアミラノ、過去には長野や大阪というところでも開催されているようです。</p>
<h3 id="-">フォトギャラリー</h2>
<p><a href="/uploads-archive/2015/07/S__2293769.jpg"><img decoding="async" loading="lazy" class="aligncenter size-large wp-image-7719" src="/uploads-archive/2015/07/S__2293769-768x1024.jpg" alt="S__2293769" width="768" height="1024" srcset="/uploads-archive/2015/07/S__2293769.jpg 768w, /uploads-archive/2015/07/S__2293769-225x300.jpg 225w, /uploads-archive/2015/07/S__2293769-228x304.jpg 228w" sizes="(max-width: 768px) 100vw, 768px" /></a> <a href="/uploads-archive/2015/07/S__2293776.jpg"><img decoding="async" loading="lazy" class="aligncenter wp-image-7720 size-large" src="/uploads-archive/2015/07/S__2293776-768x1024.jpg" alt="S__2293776" width="768" height="1024" srcset="/uploads-archive/2015/07/S__2293776-768x1024.jpg 768w, /uploads-archive/2015/07/S__2293776-225x300.jpg 225w, /uploads-archive/2015/07/S__2293776-228x304.jpg 228w, /uploads-archive/2015/07/S__2293776.jpg 960w" sizes="(max-width: 768px) 100vw, 768px" /></a> <a href="/uploads-archive/2015/07/S__2293777.jpg"><img decoding="async" loading="lazy" class="aligncenter wp-image-7721 size-large" src="/uploads-archive/2015/07/S__2293777-768x1024.jpg" alt="S__2293777" width="768" height="1024" srcset="/uploads-archive/2015/07/S__2293777-768x1024.jpg 768w, /uploads-archive/2015/07/S__2293777-225x300.jpg 225w, /uploads-archive/2015/07/S__2293777-228x304.jpg 228w, /uploads-archive/2015/07/S__2293777.jpg 960w" sizes="(max-width: 768px) 100vw, 768px" /></a> <a href="/uploads-archive/2015/07/S__2293778.jpg"><img decoding="async" loading="lazy" class="aligncenter wp-image-7722 size-large" src="/uploads-archive/2015/07/S__2293778-768x1024.jpg" alt="S__2293778" width="768" height="1024" srcset="/uploads-archive/2015/07/S__2293778-768x1024.jpg 768w, /uploads-archive/2015/07/S__2293778-225x300.jpg 225w, /uploads-archive/2015/07/S__2293778-228x304.jpg 228w, /uploads-archive/2015/07/S__2293778.jpg 960w" sizes="(max-width: 768px) 100vw, 768px" /></a> <a href="/uploads-archive/2015/07/S__2293779.jpg"><img decoding="async" loading="lazy" class="aligncenter wp-image-7723 size-large" src="/uploads-archive/2015/07/S__2293779-768x1024.jpg" alt="S__2293779" width="768" height="1024" srcset="/uploads-archive/2015/07/S__2293779-768x1024.jpg 768w, /uploads-archive/2015/07/S__2293779-225x300.jpg 225w, /uploads-archive/2015/07/S__2293779-228x304.jpg 228w, /uploads-archive/2015/07/S__2293779.jpg 960w" sizes="(max-width: 768px) 100vw, 768px" /></a> <a href="/uploads-archive/2015/07/S__2293773.jpg"><img decoding="async" loading="lazy" class="aligncenter wp-image-7724 size-large" src="/uploads-archive/2015/07/S__2293773-768x1024.jpg" alt="S__2293773" width="768" height="1024" srcset="/uploads-archive/2015/07/S__2293773-768x1024.jpg 768w, /uploads-archive/2015/07/S__2293773-225x300.jpg 225w, /uploads-archive/2015/07/S__2293773-228x304.jpg 228w, /uploads-archive/2015/07/S__2293773.jpg 960w" sizes="(max-width: 768px) 100vw, 768px" /></a> <a href="/uploads-archive/2015/07/S__2293774.jpg"><img decoding="async" loading="lazy" class="aligncenter wp-image-7725 size-large" src="/uploads-archive/2015/07/S__2293774-768x1024.jpg" alt="S__2293774" width="768" height="1024" srcset="/uploads-archive/2015/07/S__2293774-768x1024.jpg 768w, /uploads-archive/2015/07/S__2293774-225x300.jpg 225w, /uploads-archive/2015/07/S__2293774-228x304.jpg 228w, /uploads-archive/2015/07/S__2293774.jpg 960w" sizes="(max-width: 768px) 100vw, 768px" /></a> <a href="/uploads-archive/2015/07/S__2293775.jpg"><img decoding="async" loading="lazy" class="aligncenter wp-image-7726 size-large" src="/uploads-archive/2015/07/S__2293775-768x1024.jpg" alt="S__2293775" width="768" height="1024" srcset="/uploads-archive/2015/07/S__2293775-768x1024.jpg 768w, /uploads-archive/2015/07/S__2293775-225x300.jpg 225w, /uploads-archive/2015/07/S__2293775-228x304.jpg 228w, /uploads-archive/2015/07/S__2293775.jpg 960w" sizes="(max-width: 768px) 100vw, 768px" /></a> <a href="/uploads-archive/2015/07/S__2293770.jpg"><img decoding="async" loading="lazy" class="aligncenter wp-image-7727 size-large" src="/uploads-archive/2015/07/S__2293770-768x1024.jpg" alt="S__2293770" width="768" height="1024" srcset="/uploads-archive/2015/07/S__2293770-768x1024.jpg 768w, /uploads-archive/2015/07/S__2293770-225x300.jpg 225w, /uploads-archive/2015/07/S__2293770-228x304.jpg 228w, /uploads-archive/2015/07/S__2293770.jpg 960w" sizes="(max-width: 768px) 100vw, 768px" /></a> <a href="/uploads-archive/2015/07/S__2293771.jpg"><img decoding="async" loading="lazy" class="aligncenter wp-image-7728 size-large" src="/uploads-archive/2015/07/S__2293771-768x1024.jpg" alt="S__2293771" width="768" height="1024" srcset="/uploads-archive/2015/07/S__2293771-768x1024.jpg 768w, /uploads-archive/2015/07/S__2293771-225x300.jpg 225w, /uploads-archive/2015/07/S__2293771-228x304.jpg 228w, /uploads-archive/2015/07/S__2293771.jpg 960w" sizes="(max-width: 768px) 100vw, 768px" /></a> <a href="/uploads-archive/2015/07/S__2293772.jpg"><img decoding="async" loading="lazy" class="aligncenter wp-image-7729 size-large" src="/uploads-archive/2015/07/S__2293772-768x1024.jpg" alt="S__2293772" width="768" height="1024" srcset="/uploads-archive/2015/07/S__2293772-768x1024.jpg 768w, /uploads-archive/2015/07/S__2293772-225x300.jpg 225w, /uploads-archive/2015/07/S__2293772-228x304.jpg 228w, /uploads-archive/2015/07/S__2293772.jpg 960w" sizes="(max-width: 768px) 100vw, 768px" /></a> <a href="/uploads-archive/2015/07/S__2301960.jpg"><img decoding="async" loading="lazy" class="aligncenter wp-image-7730 size-large" src="/uploads-archive/2015/07/S__2301960-768x1024.jpg" alt="S__2301960" width="768" height="1024" srcset="/uploads-archive/2015/07/S__2301960-768x1024.jpg 768w, /uploads-archive/2015/07/S__2301960-225x300.jpg 225w, /uploads-archive/2015/07/S__2301960-228x304.jpg 228w, /uploads-archive/2015/07/S__2301960.jpg 960w" sizes="(max-width: 768px) 100vw, 768px" /></a><a href="/uploads-archive/2015/07/IMG_20150711_161034.jpg"><br />
</a><a href="/uploads-archive/2015/07/IMG_20150711_161034.jpg"><img decoding="async" loading="lazy" class="aligncenter size-large wp-image-7733" src="/uploads-archive/2015/07/IMG_20150711_161034-1024x574.jpg" alt="IMG_20150711_161034" width="1024" height="574" srcset="/uploads-archive/2015/07/IMG_20150711_161034-1024x574.jpg 1024w, /uploads-archive/2015/07/IMG_20150711_161034-300x168.jpg 300w, /uploads-archive/2015/07/IMG_20150711_161034-228x128.jpg 228w, /uploads-archive/2015/07/IMG_20150711_161034.jpg 1536w" sizes="(max-width: 1024px) 100vw, 1024px" /></a> <a href="/uploads-archive/2015/07/IMG_20150711_161029.jpg"><img decoding="async" loading="lazy" class="aligncenter size-large wp-image-7732" src="/uploads-archive/2015/07/IMG_20150711_161029-1024x574.jpg" alt="IMG_20150711_161029" width="1024" height="574" srcset="/uploads-archive/2015/07/IMG_20150711_161029-1024x574.jpg 1024w, /uploads-archive/2015/07/IMG_20150711_161029-300x168.jpg 300w, /uploads-archive/2015/07/IMG_20150711_161029-228x128.jpg 228w, /uploads-archive/2015/07/IMG_20150711_161029.jpg 1536w" sizes="(max-width: 1024px) 100vw, 1024px" /></a></p>
<h3 id="-">まとめ</h2>
<p>こういった体験や心を豊かにするという行為に対してお金を払うことが好きになってきました。 ただ、入場料1,000円でこの体験が出来るのは非常に価値が高いと思いました。</p>


日本橋 アートアクアリウム2015に行ってきたよ

<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とは何なのか調べてみました

<p>adobeのafter effects CCにはCINEMA 4Dの簡易版であるLiteが入っています。</p>
<p>CINEMA 4Dは3DCGを作成するソフトでハリウッド映画などでも使われる事があるそうです。その辺の分野についてはあまり詳しくはないのですが、after efftectsとの連携がし易い3DCG作成ソフトという事なので今後勉強していくつもりです。</p>
<p>実際、after effectsだけでは難しい事が3DCGを取り入れる事によって可能になり表現の幅が広がります。</p>
<p>3D作成のソフトは他にもmayaや3dsMAXなど色々ありますが、シェアの高いソフトでもかなり高額な物がほとんどです。mayaや3dsMAXはプロも使用するソフトですが何十万という価格帯です。それだけ機能がよくゲームはもちろん映画などでもよく使われているようです。「CGを駆使した映画でmayaを使用していない物はほとんど無い」といった記事を読んだ事があるくらいです。</p>
<p>その反面、Blenderというハイスペックなフリーソフトも存在していますが、私的には映画やゲームのレベルまでの3Dは必要なさそうですので、とにかく作業効率がいいソフトとしてCINEMA 4Dを選択しました。結局はafter effecsを使用している事が主な理由ですが。</p>
<p>という事でafter effectsからCINEMA 4D Liteの立ち上げ方法と日本語表示への切り替えについて書こうと思います。</p>
<h2>after effectsからCINEMA 4D Liteを立ち上げる</h2>
<p>まずは新しいコンポジションを作成します。</p>
<p><a href="/uploads-archive/2015/07/01.jpg"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-7691" src="/uploads-archive/2015/07/01.jpg" alt="01" width="700" height="507" srcset="/uploads-archive/2015/07/01.jpg 700w, /uploads-archive/2015/07/01-300x217.jpg 300w, /uploads-archive/2015/07/01-228x165.jpg 228w" sizes="(max-width: 700px) 100vw, 700px" /></a></p>
<p>続いてコンポジションで右クリックし新規MAXON CINEMA4Dファイルを選択します。</p>
<p><a href="/uploads-archive/2015/07/02.jpg"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-7692" src="/uploads-archive/2015/07/02.jpg" alt="02" width="700" height="489" srcset="/uploads-archive/2015/07/02.jpg 700w, /uploads-archive/2015/07/02-300x210.jpg 300w, /uploads-archive/2015/07/02-228x159.jpg 228w" sizes="(max-width: 700px) 100vw, 700px" /></a></p>
<p>CINEMA 4Dファイルに名前をつけて保存すると、続いて CINEMA 4D Liteが立ち上がります。</p>
<p><a href="/uploads-archive/2015/07/03.jpg"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-7693" src="/uploads-archive/2015/07/03.jpg" alt="03" width="700" height="580" srcset="/uploads-archive/2015/07/03.jpg 700w, /uploads-archive/2015/07/03-300x249.jpg 300w, /uploads-archive/2015/07/03-228x189.jpg 228w" sizes="(max-width: 700px) 100vw, 700px" /></a></p>
<p><a href="/uploads-archive/2015/07/08.jpg"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-7698" src="/uploads-archive/2015/07/08.jpg" alt="08" width="700" height="555" srcset="/uploads-archive/2015/07/08.jpg 700w, /uploads-archive/2015/07/08-300x238.jpg 300w, /uploads-archive/2015/07/08-228x181.jpg 228w" sizes="(max-width: 700px) 100vw, 700px" /></a></p>
<p><a href="/uploads-archive/2015/07/04.jpg"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-7694" src="/uploads-archive/2015/07/04.jpg" alt="04" width="700" height="394" srcset="/uploads-archive/2015/07/04.jpg 700w, /uploads-archive/2015/07/04-300x169.jpg 300w, /uploads-archive/2015/07/04-228x128.jpg 228w" sizes="(max-width: 700px) 100vw, 700px" /></a></p>
<h2> CINEMA 4D Liteを日本語化する</h2>
<p>ヘルプからアップデートを選択して、「japanese Language Pack」を選択してインストールします。</p>
<p>Updatesにない場合はOptionalにある場合もあるようです。</p>
<p><a href="/uploads-archive/2015/07/10.jpg"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-7703" src="/uploads-archive/2015/07/10.jpg" alt="10" width="700" height="447" srcset="/uploads-archive/2015/07/10.jpg 700w, /uploads-archive/2015/07/10-300x192.jpg 300w, /uploads-archive/2015/07/10-228x146.jpg 228w" sizes="(max-width: 700px) 100vw, 700px" /></a></p>
<p>&nbsp;</p>
<p>インストール完了して再度立ち上げても日本語になっていない場合は一般設定の言語からjapaneseを選択すればOKです。</p>
<p><a href="/uploads-archive/2015/07/07.jpg"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-7697" src="/uploads-archive/2015/07/07.jpg" alt="07" width="700" height="487" srcset="/uploads-archive/2015/07/07.jpg 700w, /uploads-archive/2015/07/07-300x209.jpg 300w, /uploads-archive/2015/07/07-228x159.jpg 228w" sizes="(max-width: 700px) 100vw, 700px" /></a></p>


after effects CC で CINEMA 4D Lite を使用する

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

<p>以前に紹介した、phone cleanというiphoneのクリーニングソフトを紹介(参考：<a href="/officer/ios%E3%81%AE%E3%81%8A%E6%8E%83%E9%99%A4%E3%82%BD%E3%83%95%E3%83%88%E3%80%8Cphoneclean%E3%80%8D.html" target="_blank">iOSのお掃除ソフト「PhoneClean」</a>)しましたが、<br />
同社がmac向けのクリーニングソフトをリリースしておりましたのでご紹介です。</p>
<p><a href="http://www.imobie.com/macclean/">http://www.imobie.com/macclean/</a></p>
<h2>クリーニング項目</h2>
<p><a href="/uploads-archive/2015/07/aa57744637ec15a1146a8e9a64af0911.jpg"><img decoding="async" loading="lazy" class="aligncenter size-medium wp-image-7678" src="/uploads-archive/2015/07/aa57744637ec15a1146a8e9a64af0911-300x197.jpg" alt="MacClean_と_MacClean_Features_–_Clean_All_Safe-to-Remove_Junk_Files_out_of_Your_Mac_in_A_Smart_and_Worry-Free_Way" width="300" height="197" srcset="/uploads-archive/2015/07/aa57744637ec15a1146a8e9a64af0911-300x197.jpg 300w, /uploads-archive/2015/07/aa57744637ec15a1146a8e9a64af0911-228x150.jpg 228w, /uploads-archive/2015/07/aa57744637ec15a1146a8e9a64af0911.jpg 837w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<p>下記のような項目でクリーニングしてくれます。</p>
<ol>
<li>インターネットジャンク（safari　chrome　firefox）
<ol>
<li>キャッシュ</li>
<li>履歴</li>
<li>クッキー</li>
<li>ダウンロード履歴</li>
<li>セッション</li>
</ol>
</li>
<li>ユーザージャンク
<ol>
<li>ユーザーキャッシュ</li>
<li>ユーザーログ</li>
</ol>
</li>
<li>システムジャンク
<ol>
<li>システムキャッシュ</li>
<li>システムログ</li>
</ol>
</li>
<li>アプリジャンク</li>
</ol>
<h2>クリーニング結果</h2>
<p>定期的にクリーニングソフトはかけているのですが、2.78GBが不要ファイルであると検出されました。<br />
MacAppstoreにあるDr.Cleanerというソフトも中々オススメですが、こちらは1GB程度の削除となっていたので、<br />
徹底的にクリーニングしてくれることが分かります。</p>
<p>おかげ、Googleのログイン情報周りのCookieも綺麗さっぱり、要再ログインという感じです。</p>
<p>まだバージョン1.06（2015年7月現在）と若いソフトウェアなので、今後の更なる進化に期待です。</p>
<p>ご利用は自己責任でお願いします。</p>


Macの新しいクリーニングソフト「mac clean」が強力に掃除してくれる

<p>ジュエリーに限らず、物撮りをする際に被写体を立てたり、角度を固定して撮影したいという場合があると思います。</p>
<p>そんな時はどうしているのかというと、実は単純で固定する為の便利アイテムがあるのです。</p>
<p>それがこちら</p>
<p><a href="/uploads-archive/2015/07/IMG_20150706_200430.jpg"><img decoding="async" loading="lazy" class="alignnone  wp-image-7663" src="/uploads-archive/2015/07/IMG_20150706_200430.jpg" alt="IMG_20150706_200430" width="700" height="525" srcset="/uploads-archive/2015/07/IMG_20150706_200430.jpg 3264w, /uploads-archive/2015/07/IMG_20150706_200430-300x225.jpg 300w, /uploads-archive/2015/07/IMG_20150706_200430-1024x768.jpg 1024w, /uploads-archive/2015/07/IMG_20150706_200430-228x171.jpg 228w" sizes="(max-width: 700px) 100vw, 700px" /></a></p>
<p>イエローワックスという商品名で売っている代物です。ミツロウのような感じで着脱可能で、指輪などを固定できます。</p>
<p>同じメーカーからホワイトワックスという商品もありますが、イエローワックスの方がある程度重さに耐えることができます。ホワイトワックスについては柔らかいので扱い易いですが、重い物が難しくなります。</p>
<p>使用する時は、ほんの少しだけとって指でこねて扱い易い形に整えます。</p>
<p><a href="/uploads-archive/2015/07/IMG_20150706_200455.jpg"><img decoding="async" loading="lazy" class="alignnone  wp-image-7664" src="/uploads-archive/2015/07/IMG_20150706_200455.jpg" alt="IMG_20150706_200455" width="700" height="525" srcset="/uploads-archive/2015/07/IMG_20150706_200455.jpg 3264w, /uploads-archive/2015/07/IMG_20150706_200455-300x225.jpg 300w, /uploads-archive/2015/07/IMG_20150706_200455-1024x768.jpg 1024w, /uploads-archive/2015/07/IMG_20150706_200455-228x171.jpg 228w" sizes="(max-width: 700px) 100vw, 700px" /></a></p>
<p>大きさは見切れない程度で整えてください。</p>
<p>見きれないようにつければOKです、これはちょっと見きれていますが（笑）</p>
<p><a href="/uploads-archive/2015/07/IMG_20150707_113634.gif"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-7674" src="/uploads-archive/2015/07/IMG_20150707_113634.gif" alt="IMG_20150707_113634" width="700" height="483" /></a></p>
<p><a href="/uploads-archive/2015/07/IMG_20150707_11370.jpg"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-7672" src="/uploads-archive/2015/07/IMG_20150707_11370.jpg" alt="IMG_20150707_11370" width="700" height="479" srcset="/uploads-archive/2015/07/IMG_20150707_11370.jpg 700w, /uploads-archive/2015/07/IMG_20150707_11370-300x205.jpg 300w, /uploads-archive/2015/07/IMG_20150707_11370-228x156.jpg 228w" sizes="(max-width: 700px) 100vw, 700px" /></a></p>
<p>ある程度の重さに耐えてくれますので、斜めにしたりする事もできます。</p>
<p>粘着力が強いので結構ベトついてしまいますが、撮影のあとはアルコールなどで拭き取れば大丈夫です。</p>


商品の物撮り ジュエリーを立てて撮る方法

日本語ドメインのSSL証明書インストール方法

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


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

<p>弊社は3年ほど前から越境ECを掲げてECサイトのシステム「LaunchCart」を提供しておりますが、日本全体としてようやくCoolJapan、東京オリンピックといったところで、外国人をお客様として如何に外貨を稼ぐか？日本の良いもの、良い文化を売ることが出来るか？というところに議論が集まるようになってきたように感じます。</p>
<p>といったようなところで、肌感覚としては持っていたのですが、定量的にはどうなのか？というところを時系列で調べようと思っていたところ、良いツールを見つけました。さすがGoogleです。埋め込みのスクリプトまで提供してくれているので、こうやってブログに埋め込むことも出来ます。</p>
<p>気になっていたワードを3つほど調べてみました。</p>
<p><a href="https://www.google.com/trends/" target="_blank">https://www.google.com/trends/</a></p>
<p>※検索のボリュームが少ないものは0と出るようです。</p>
<h2>越境EC</h2>
<p><script src="//www.google.com/trends/embed.js?hl=ja&amp;q=%E8%B6%8A%E5%A2%83EC&amp;geo=JP&amp;date=today+12-m&amp;cmpt=q&amp;tz=Etc/GMT-9&amp;tz=Etc/GMT-9&amp;content=1&amp;cid=TIMESERIES_GRAPH_0&amp;export=5&amp;w=680&amp;h=400" type="text/javascript"></script>気になっていた越境ECは2015年からようやく検索が増えてきているようです。</p>
<h2>インバウンド</h2>
<p><script src="//www.google.com/trends/embed.js?hl=ja&amp;q=%E3%82%A4%E3%83%B3%E3%83%90%E3%82%A6%E3%83%B3%E3%83%89&amp;geo=JP&amp;date=today+12-m&amp;cmpt=q&amp;tz=Etc/GMT-9&amp;tz=Etc/GMT-9&amp;content=1&amp;cid=TIMESERIES_GRAPH_0&amp;export=5&amp;w=680&amp;h=400" type="text/javascript"></script><br />
こちらはインバウンドマーケティングやインバウンド観光というところ調べたかったのですが、他の意味を表す名詞も入ってきているようです。</p>
<h2>爆買い</h2>
<p><script src="//www.google.com/trends/embed.js?hl=ja&amp;q=%E7%88%86%E8%B2%B7%E3%81%84&amp;geo=JP&amp;date=today+12-m&amp;cmpt=q&amp;tz=Etc/GMT-9&amp;tz=Etc/GMT-9&amp;content=1&amp;cid=TIMESERIES_GRAPH_0&amp;export=5&amp;w=680&amp;h=400" type="text/javascript"></script><br />
最後に爆買いという単語、中国の旧正月「春節」に合わせて、訪日中国人観光客が各地で日本製品を大量に買っていく様子を爆買いとこぞってメディアが報じておりましたが、いつから爆買いなんていう言葉が出来たんだろうと思っていたんですが、やはり、今年の春節に合わせた2月からだと言うことが分かりました。<br />
そこからは、定着がしたようで平均的に推移しております。</p>


越境ECの検索トレンド定点観測

<h2>共通のWEB発注システムCLIOS</h2>
<p>コンタクト製品を扱うメーカーや代理店に商品を発注をする際に使われているツールにCLIOS（クリオス）という物があります。日本コンタクトレンズ協会が運営しているツールでContact Lens Information &amp; Order Systemの略との事です</p>
<p>これはWebで発注ができるもので、各メーカーや代理店が共同で利用しています。おそらくほとんどのメーカー・代理店が利用しています。</p>
<p><a href="/uploads-archive/2015/06/063011.gif"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-7622" src="/uploads-archive/2015/06/063011.gif" alt="06301" width="284" height="172" /></a></p>
<p>販売店がCLIOSを通して複数のメーカー・代理店に発注をかけられます。</p>
<p>その他にコンタクトを患者（コンタクト利用者）に直送したり、トライアルの注文なんかもできます。商品のロット情報を確認したりリアル店舗しか使わないかもしれませんが製品のバーコード情報を取り出せます。</p>
<p>使用するためにはＩＤとパスワードが必要です。CLIOS事務局に直接連絡して使用の申請を行うか、メーカー側からCLIOSを使えるように申請してもらえば使用可能です。</p>
<p>発注できるメーカーは以下の通り、もちろんメーカーとの契約がある場合です。</p>
<table>
<tbody>
<tr>
<td style="width: 350px">アイミー（株）</td>
<td style="width: 350px">日本アルコン（株）</td>
</tr>
<tr>
<td style="width: 350px">（株）シード</td>
<td style="width: 350px">パナメディカル（株）</td>
</tr>
<tr>
<td style="width: 350px">クーパービジョン・ジャパン（株）</td>
<td style="width: 350px">ポシュロム・ジャパン（株）</td>
</tr>
<tr>
<td style="width: 350px">ジョンソン・エンド・ジョンソン（株）</td>
<td style="width: 350px">（株）メニコン</td>
</tr>
<tr>
<td style="width: 350px">（株）レインボーオプチカル研究所</td>
<td style="width: 350px">HOYA（株）</td>
</tr>
<tr>
<td style="width: 350px">東レ（株）</td>
<td style="width: 350px">（株）オフテクス</td>
</tr>
<tr>
<td style="width: 350px">（株）アイレ</td>
<td style="width: 350px">（株）シンシア</td>
</tr>
<tr>
<td style="width: 350px">（株）ユニオンメディカル</td>
<td style="width: 350px"></td>
</tr>
</tbody>
</table>
<p>この他のメーカー・代理店にも発注は可能のようです。</p>
<p>ログインするとこのような発注画面になります。左目・右目ごとに入力するので慣れないとちょっと違和感を感じるかもしれません。</p>
<p><a href="/uploads-archive/2015/06/06302.gif"><img decoding="async" loading="lazy" class="alignnone wp-image-7628" src="/uploads-archive/2015/06/06302.gif" alt="06302" width="700" height="435" /></a></p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>


コンタクト製品をWEB発注できる共通ネットワークCLIOS

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

<p>2015年上半期も本日が最終日</p>
<p>2015年のWebデザインを振り返った記事があったのでまとめ</p>
<p>&nbsp;</p>
<h2>1. はじめに</h2>
<p>1-1. ファーストビューよりスクロールを重視するデザインに</p>
<p>1-2. シンプルなレイアウト構成</p>
<p>&nbsp;</p>
<p>ユーザーがスクロールに慣れたなめ「サイトが表示されたらとりあえず下にスクロール」という動きが普通になっているという</p>
<p>なのであまりファーストビューにこだわらなくなってきてるとのこと</p>
<p>&nbsp;</p>
<h2>2. 今流行りのweb デザイントレンド13選</h2>
<p>2-1 背景にビデオ動画活用</p>
<p>端末のスペックやネット環境が良くなっていけばそれにともなってコンテンツもリッチになっていく</p>
<p>動画が一般化し始めるのがまさに今のようだ</p>
<p>将来はゴリゴリの3Dが軽快に描画できるスペックのPCが安価になったりするのだろう</p>
<p>&nbsp;</p>
<p><a href="http://my.austria.info/" target="_blank">http://my.austria.info/</a></p>
<p><a href="http://www.kalexiko.com/" target="_blank"> http://www.kalexiko.com/</a></p>
<p>&nbsp;</p>
<p>2-2 カード・レイアウト（タイル・レイアウト）</p>
<p>この言葉を知らなかったが、要はFacebookのタイムラインのように1記事をブロックで囲っている感じのレイアウトとのこと</p>
<p>わかりやすくレスポンシブにもし易いのが良いらしい</p>
<p>&nbsp;</p>
<p><a href="http://www.google.com/landing/now/" target="_blank">http://www.google.com/landing/now/</a></p>
<p>※私の環境ではカード・レイアウトが再現できず</p>
<p>&nbsp;</p>
<p>2-3 シングルページ</p>
<p>今後は後述のゴーストボタンやマイクロインタラクションと組み合わせて進化するらしい</p>
<p><a href="http://www.kirinichiban.com/" target="_blank"> http://www.kirinichiban.com/</a></p>
<p>&nbsp;</p>
<p>2-4 パララックス・エフェクト</p>
<p>今後もこのトレンドは続き、更に進化するらしい</p>
<p><a href="http://www.lexusls.asia/" target="_blank"> http://www.lexusls.asia/</a></p>
<p>&nbsp;</p>
<p>2-5 アニメ化されたストーリー性</p>
<p>以下の参考サイトはSVGとjsでできているとのこと</p>
<p><a href="https://www.boldking.com/" target="_blank"> https://www.boldking.com/</a></p>
<p>&nbsp;</p>
<p>2-6 フラットデザイン</p>
<p>当面はこのトレンドが続くらしい</p>
<p><a href="http://www.huffingtonpost.com/2012/02/19/logos-past-future-corporate_n_1285622.html" target="_blank"> http://www.huffingtonpost.com/2012/02/19/logos-past-future-corporate_n_1285622.html</a></p>
<p><a href="http://purgotea.com/" target="_blank"> http://purgotea.com/</a></p>
<p>&nbsp;</p>
<p>2-7 マテリアル・デザインの増加</p>
<p>今後の動向が気になるマテリアルデザイン</p>
<p>以下のサイトでが勉強になるらしい</p>
<p><a href="http://material.cmiscm.com/" target="_blank"> http://material.cmiscm.com/</a></p>
<p>&nbsp;</p>
<p>2-8 インタラクティブ・デザイン</p>
<p>サンプルがすごすぎて圧巻だが、もっと小さい範囲でもアイデア次第ではおもしろいものができそう</p>
<p><a href="https://insideabbeyroad.withgoogle.com/en" target="_blank"> https://insideabbeyroad.withgoogle.com/en</a></p>
<p><a href="http://www.blitzagency.com/" target="_blank"> http://www.blitzagency.com/</a></p>
<p>&nbsp;</p>
<p>2-9 マイクロ・インタラクション</p>
<p>要はいいねボタンなどのことらしい</p>
<p>簡単なAjaxでのお問い合わせフォームなどもこれに当たる模様</p>
<p><a href="http://www.buzzfeed.com/zachkornfeld/try-guys-robot-babies#.kjJkrp6RPk" target="_blank"> http://www.buzzfeed.com/zachkornfeld/try-guys-robot-babies#.kjJkrp6RPk</a></p>
<p>&nbsp;</p>
<p>2-10 トレンドのメニューバー</p>
<p>もう飽きた気もするが引き続きトレンドなようだ</p>
<p><a href="http://bitcoinfoundation.org/" target="_blank"> http://bitcoinfoundation.org/</a></p>
<p>&nbsp;</p>
<p>2-11 ゴーストボタン</p>
<p>この言葉は知らなかったが、要は背景が透けているボタンのことらしい</p>
<p><a href="http://www.iuvo.si/" target="_blank"> http://www.iuvo.si/</a></p>
<p>&nbsp;</p>
<p>2-12 アニメーション効果</p>
<p>おそらく作成ツールの充実や作成者の技術向上により今後は当たり前になっていきそう</p>
<p><a href="http://ja.wix.com/blog/2014/05/%E3%82%A2%E3%83%8B%E3%83%A1%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E5%8A%B9%E6%9E%9C%E3%81%AE%E9%AD%85%E5%8A%9B%E3%82%92%E5%BE%B9%E5%BA%95%E7%B4%B9%E4%BB%8B/" target="_blank"> http://ja.wix.com/blog/2014/05/%E3%82%A2%E3%83%8B%E3%83%A1%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E5%8A%B9%E6%9E%9C%E3%81%AE%E9%AD%85%E5%8A%9B%E3%82%92%E5%BE%B9%E5%BA%95%E7%B4%B9%E4%BB%8B/</a></p>
<p>&nbsp;</p>
<p>2-13 モバイル・ファースト</p>
<p>スマホ割合が年々増えている中で当然の対応</p>
<p><a href="http://www.channelnewsasia.com/" target="_blank"> http://www.channelnewsasia.com/</a></p>


【Webデザイン】2015年 上半期のトレンド

<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>不動産の掲載サイトを作成したいという要望を頂いた中で、IT業界の人間が提案資料作成中に調べていたところをまとめました。<br />
2015年6月23日現在、ウェブ上で確認出来る情報ですので、今後変更になることもあると思いますのでご了承下さいませ。</p>
<p>また、金額については導入の最低料金で、各サービスともポータル連動数や、掲載件数、ページビュー数等で様々な条件がありますので、こちらも目安程度でお考え下さい。</p>
<table>
<thead>
<tr>
<th><span style="font-weight: normal;">会社名</span></th>
<th><span style="font-weight: normal;">株式会社レンターズ</span></th>
<th><span style="font-weight: normal;">株式会社いい生活</span></th>
<th><span style="font-weight: normal;">クーバル株式会社</span></th>
<th><span style="font-weight: normal;">株式会社アクア</span></th>
<th><span style="font-weight: normal;">株式会社いえらぶGROUP</span></th>
<th><span style="font-weight: normal;">株式会社グッドライフ</span></th>
<th><span style="font-weight: normal;">株式会社ReP</span></th>
<th><span style="font-weight: normal;">イタンジ株式会社</span></th>
</tr>
</thead>
<tbody>
<tr>
<th><span style="font-weight: normal;">サービス名</span></th>
<td>レンターズネット</td>
<td>ESいい物件One</td>
<td>CooRE（クール）</td>
<td>RIMS</td>
<td>いえらぶCLOUD</td>
<td>楽賃システム</td>
<td>不動産コンバートR</td>
<td>ヘヤジンコネクト</td>
</tr>
<tr>
<th><span style="font-weight: normal;">URL</span></th>
<td>http://www.ra1.co.jp/</td>
<td>http://www.es-service.net/about/convert.html</td>
<td>http://www.coore.jp/</td>
<td>http://www.rims-info.com/portal.html</td>
<td>http://www.estate-search.jp/</td>
<td>http://rakuchin-system.net/function/convert.html</td>
<td>http://fcr.rep-inc.jp/</td>
<td>https://c.heyazine.com/</td>
</tr>
<tr>
<th><span style="font-weight: normal;">連動数</span></th>
<td>20</td>
<td>18</td>
<td>8</td>
<td>40</td>
<td>12</td>
<td>4</td>
<td>5</td>
<td>2</td>
</tr>
<tr>
<th><span style="font-weight: normal;">ホームページ制作機能</span></th>
<td>◯</td>
<td>◯</td>
<td>◯</td>
<td>◯</td>
<td>◯</td>
<td>◯</td>
<td></td>
<td></td>
</tr>
<tr>
<th><span style="font-weight: normal;">スマホ対応</span></th>
<td>◯</td>
<td>◯</td>
<td>◯</td>
<td>◯</td>
<td>◯</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th><span style="font-weight: normal;">ソーシャル対応</span></th>
<td></td>
<td>◯</td>
<td>◯</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th><span style="font-weight: normal;">SEO</span></th>
<td>◯</td>
<td>◯</td>
<td>◯</td>
<td>◯</td>
<td>◯</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th><span style="font-weight: normal;">LPO</span></th>
<td></td>
<td></td>
<td>◯</td>
<td></td>
<td>◯</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th><span style="font-weight: normal;">クラウド</span></th>
<td>◯</td>
<td>◯</td>
<td>◯</td>
<td></td>
<td>◯</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th><span style="font-weight: normal;">反響管理</span></th>
<td>◯</td>
<td>◯</td>
<td>◯</td>
<td>◯</td>
<td>◯</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th><span style="font-weight: normal;">テンプレート</span></th>
<td></td>
<td>◯</td>
<td>◯</td>
<td>◯</td>
<td>◯</td>
<td>◯</td>
<td></td>
<td></td>
</tr>
<tr>
<th><span style="font-weight: normal;">アクセス解析</span></th>
<td></td>
<td></td>
<td></td>
<td>◯</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th><span style="font-weight: normal;">契約書作成</span></th>
<td></td>
<td></td>
<td></td>
<td></td>
<td>◯</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th><span style="font-weight: normal;">初期費用</span></th>
<td>見積り</td>
<td>¥200,000</td>
<td>見積り</td>
<td>¥300,000</td>
<td>見積り</td>
<td>¥30,000</td>
<td>¥0</td>
<td>¥0</td>
</tr>
<tr>
<th><span style="font-weight: normal;">月額費用</span></th>
<td>見積り</td>
<td>¥20,000</td>
<td>¥50,000</td>
<td>¥50,000</td>
<td>見積り</td>
<td>¥10,000</td>
<td>¥10,000</td>
<td>¥0</td>
</tr>
<tr>
<th><span style="font-weight: normal;">条件</span></th>
<td></td>
<td>〜500件、5000PV</td>
<td>反響に応じた課金</td>
<td>〜499件</td>
<td></td>
<td>〜1000件、ポータル追加毎に課金</td>
<td></td>
<td>リニューアル中</td>
</tr>
</tbody>
</table>


Company

Our Solutions

Support

News

Blog

Blogブログ

カテゴリーから探す

年別から見る

記事一覧

2015/07/15

2015/07/15

2015/07/15

2015/07/14

2015/07/08

2015/07/08

2015/07/07

2015/07/04

2015/07/01

2015/07/01

2015/06/30

2015/06/30

2015/06/30

2015/06/27

2015/06/26

2015/06/25

2015/06/24

2015/06/17