<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	xmlns:series="http://organizeseries.com/"
	>

<channel>
	<title>JSON &#8211; HTML5Experts.jp</title>
	<atom:link href="/tag/json/feed/" rel="self" type="application/rss+xml" />
	<link>https://html5experts.jp</link>
	<description>日本に、もっとエキスパートを。</description>
	<lastBuildDate>Sat, 07 Jul 2018 03:14:05 +0000</lastBuildDate>
	<language>ja</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>https://wordpress.org/?v=4.7.19</generator>
	<item>
		<title>今話題のマイクロサービス・アーキテクチャについて、本格的に実践中のビズリーチさんに聞いてみた！</title>
		<link>/miyuki-baba/14776/</link>
		<pubDate>Tue, 09 Jun 2015 00:00:51 +0000</pubDate>
		<dc:creator><![CDATA[馬場 美由紀]]></dc:creator>
				<category><![CDATA[最新動向]]></category>
		<category><![CDATA[システム開発]]></category>
		<category><![CDATA[サイト制作]]></category>
		<category><![CDATA[JSON]]></category>
		<category><![CDATA[Scala]]></category>
		<category><![CDATA[アーキテクチャ]]></category>
		<category><![CDATA[フレームワーク]]></category>
		<category><![CDATA[マイクロサービス]]></category>

		<guid isPermaLink="false">/?p=14776</guid>
		<description><![CDATA[連載： アプリケーションアーキテクチャ最前線 (5)巨大化・複雑化したモノリシックなアプリケーション開発から、サービスを小さい単位に分割し、開発のスピードを上げようとするマイクロサービスが注目されています。アプリ開発のア...]]></description>
				<content:encoded><![CDATA[<div class="seriesmeta">連載： <a href="https://html5experts.jp/series/arch/" class="series-287" title="アプリケーションアーキテクチャ最前線" data-wpel-link="internal">アプリケーションアーキテクチャ最前線</a> (5)</div><p>巨大化・複雑化したモノリシックなアプリケーション開発から、サービスを小さい単位に分割し、開発のスピードを上げようとするマイクロサービスが注目されています。アプリ開発のアーキテクチャとして関心はあるのものの、実際にはどのようなメリット・デメリットがあるのかは気になるところ。</p>

<p>そこで、マイクロサービスアーキテクチャを採用して新サービスをリリースしたという株式会社ビズリーチ・CTO室チーフアーキテクトの竹添直樹さんに、お話を伺ってきました。<br>聞き手は、HTML5 Experts.jp編集部・岩瀬義昌（@iwashi86）さん、HTML5 Experts.jp編集長・白石俊平さんです。</p>

<p><img src="/wp-content/uploads/2015/04/microservice-1.jpg" alt="" width="600" height="390" class="aligncenter size-full wp-image-14777" srcset="/wp-content/uploads/2015/04/microservice-1.jpg 600w, /wp-content/uploads/2015/04/microservice-1-300x195.jpg 300w, /wp-content/uploads/2015/04/microservice-1-207x135.jpg 207w" sizes="(max-width: 600px) 100vw, 600px" /></p>

<p><style>
.post-detail-contents p {
  text-indent:0
}
</style></p>

<h2>そもそもマイクロサービスって何ですか？</h2>

<p><strong>岩瀬</strong>：そもそもマイクロサービスとは、どのようなアーキテクチャなのでしょうか。</p>

<p><strong>竹添</strong>：システムをがちっとした一枚岩で作るのでなく、コンポーネントに分割して、小さなサービスの集合体として構築するという考え方がマイクロサービスです。各サービス間は疎結合で、HTTPやMessagingなどでつなぎ、通信し合えるように設計します。</p>

<p><img src="/wp-content/uploads/2015/04/hx2.png" alt="" width="605" height="395" class="aligncenter size-full wp-image-14840" srcset="/wp-content/uploads/2015/04/hx2.png 605w, /wp-content/uploads/2015/04/hx2-300x196.png 300w, /wp-content/uploads/2015/04/hx2-207x135.png 207w" sizes="(max-width: 605px) 100vw, 605px" /><span style="font-size: 90%;">　▲<a href="http://www.slideshare.net/takezoe/scala-jissenscala-44962449" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">ビズリーチの新サービスをScalaで作ってみた～マイクロサービスの裏側 #jissenscala</a></span></p>

<p><strong>岩瀬</strong>：一般的に、これがマイクロサービスだという代表例はありますか？</p>

<p><strong>竹添</strong>：外側から見ているとわかりにくいですが、Amazonさんのシステムがそうですね。チームがそれぞれ独立してサービスを作っていて、裏側はそれぞれマイクロサービスになっているというのは有名です。</p>

<p><img src="/wp-content/uploads/2015/04/microservice-12.jpg" alt="" width="640" height="428" class="aligncenter size-full wp-image-14842" srcset="/wp-content/uploads/2015/04/microservice-12.jpg 640w, /wp-content/uploads/2015/04/microservice-12-300x201.jpg 300w, /wp-content/uploads/2015/04/microservice-12-207x138.jpg 207w" sizes="(max-width: 640px) 100vw, 640px" /><span style="font-size: 90%;">　▲株式会社ビズリーチ CTO室 チーフアーキテクト　竹添直樹さん</span></p>

<p><strong>岩瀬</strong>：モノリシックのほうはどうでしょう。</p>

<p><strong>竹添</strong>：小さくてまだ立ち上げたばかりのサービスは、モノリシックが多いと思います。そうしたサービスが大きくなるにつれて機動力が落ち、メンテナンスコストも増大するにつれ、マイクロサービス化するという流れが多いのかなと。</p>

<p><strong>岩瀬</strong>：ちなみに例えばWordPressは、がっつり一枚岩で作られている印象があるのですが、モノリシックですか？</p>

<p><strong>竹添</strong>：マイクロサービスの粒度をどう考えるかによりますね。ブログという一つのサービスと見ることもできるし、アーキテクチャとしてはがっちり一枚岩だと思います(笑)。</p>

<p><strong>岩瀬</strong>：確かに、人によって解釈が違うから定義は難しいですね。</p>

<p><img src="/wp-content/uploads/2015/04/microservice-7.jpg" alt="" width="640" height="407" class="aligncenter size-full wp-image-14843" srcset="/wp-content/uploads/2015/04/microservice-7.jpg 640w, /wp-content/uploads/2015/04/microservice-7-300x191.jpg 300w, /wp-content/uploads/2015/04/microservice-7-207x132.jpg 207w" sizes="(max-width: 640px) 100vw, 640px" /><span style="font-size: 90%;">　▲HTML5 Experts.jp編集部　NTTコミュニケーションズ 技術開発部所属 <a href="https://html5experts.jp/iwase/" data-wpel-link="internal">岩瀬 義昌</a>さん</span></p>

<p><strong>竹添</strong>：たとえば、決済サービスは呼ぶ側からすれば、マイクロサービスと言えるかと。</p>

<p><strong>岩瀬</strong>：たしかに！では、Web制作で最近よく見るシングルページ・アプリケーションはいかがでしょうか？</p>

<p><strong>竹添</strong>：フロントエンドがどうあれ、裏側にあるサーバーサイドのシステムが一枚岩かどうかが、マイクロサービスとモノリシックの違いになります。例えば管理者向けの機能とコンシューマ向け機能がそれぞれが独立されたサービスになっていて、APIで必要なデータだけをやりとりする…といった作りがマイクロサービス。フロントエンドとバックエンドのやりとりが、APIでシンプルになっているからといって、マイクロサービスというわけでもないんです。</p>

<h2>マイクロサービスのメリットとデメリット</h2>

<p><strong>岩瀬</strong>：マイクロサービスのメリットって、どんなところだとお考えですか？</p>

<p><strong>竹添</strong>：そもそも弊社がマイクロサービスを採用したのは、それぞれのサービスが独立して開発やメンテナンスができるからなんです。全サービスのシステムへの影響を考えなくていいのが、最大のメリットと言えるでしょう。どんなシステムも、運用をずっと続けていくとアーキテクチャが古びてしまうことは避けられません。そのときに全部新しいものに載せ換えるのは、全サービスの停止を伴うことが多いので、リスクも高いしコストもかかる。部分的にメンテナンスしたり、稼働できるというのはいいですね。</p>

<p>運用面やバッチ処理、アップデートも、そのサービスごとに単位で入れ替えたりできる。古いアーキテクチャを差し替えるときや、新しいサービスを立ち上げるときも既存システムを止めずに開発できるので、トライアルもしやすいです。また、SEOが重要なサービスと、業務寄りのサービスとでは目指す方向も、適している技術も違います。サービスごとに技術の選択ができるのは大きいですね。</p>

<p>開発者の問題もあって、全部同じ技術でできるかというとそうでもない。エンジニアによって得手不得手があるので、チームとしてもプロジェクトとしてもスケールしやすい面があるなと。</p>

<p><strong>岩瀬</strong>：スケーラビリティはキーワードですね。バックエンドの言語を好きに選べるというのは、生産性も上がるし、組織的なメリットがあると思います。</p>

<p><img src="/wp-content/uploads/2015/04/microservice-14.jpg" alt="" width="640" height="410" class="aligncenter size-full wp-image-14845" srcset="/wp-content/uploads/2015/04/microservice-14.jpg 640w, /wp-content/uploads/2015/04/microservice-14-300x192.jpg 300w, /wp-content/uploads/2015/04/microservice-14-207x133.jpg 207w" sizes="(max-width: 640px) 100vw, 640px" /></p>

<p><strong>岩瀬</strong>：では、マイクロサービスのデメリットはいかがでしょうか？</p>

<p><strong>竹添</strong>：デメリットの部分ももちろんあります。サービスごとに冗長性を考えなくてはいけないので、コストも手間もその分かかります。モノリシックならロードバランサ一つでサービス全体を冗長化できますが、マイクロサービスだとそうもいかないので、オーバーヘッドとかインフラとか運用のコストがかかるのが悩みどころです。</p>

<p>また、実際に開発をやってみるとデバッグが難しいですね。いろんなサービスがつながっているので、どこで落ちたのかがわかりにくい。プログラミング的にも、今まで単純にトランザクションスクリプトで書いていたのがいろんなサービスに分割されていくので、単純にシリアルで呼び出していくとその分遅くなってしまう。</p>

<p>サーバサイドでも、並列に投げられるところはパラレルに取りに行ったりする並列プログラミングや、非同期的な処理を扱うクライアントサイドの知識が求められるようになってきました。慣れていないとキツイかもしれませんね。アプリケーションプログラマに求められるスキルは上がっていると思います。</p>

<p><strong>岩瀬</strong>：これまで同期的なコードを書いてきたプログラマが、マイクロサービスでNode.jsなどの非同期な並列プログラミングをしようとしても、前の癖で同期的に書いてしまって、全然パフォーマンスが出ないというのもあり得るわけですね。</p>

<p>ちなみに先ほどデバッグの話が出ましたが、モノリシックに比べて、時間がかかって大変だったということはありますか？</p>

<p><img src="/wp-content/uploads/2015/04/microservice-9.jpg" alt="" width="640" height="404" class="aligncenter size-full wp-image-14847" srcset="/wp-content/uploads/2015/04/microservice-9.jpg 640w, /wp-content/uploads/2015/04/microservice-9-300x189.jpg 300w, /wp-content/uploads/2015/04/microservice-9-207x131.jpg 207w" sizes="(max-width: 640px) 100vw, 640px" /></p>

<p><strong>竹添</strong>：作っているときはそうでもないんですが、動かしてトラブルがあったときが大変ですよね。結合させてテストしているときや、プロダクションで何か起きたときのトラッキングとか。セッションIDを全部のログに含めるようにするなど、エラーをトラッキングできる仕組みを最初から作っておけばなんとかなるんですけど、それでも難しい時は難しいですね。</p>

<p><strong>岩瀬</strong>：設計の段階でわかっていればいいけど、結構大変だってことですね。コツがわかってくるといいのかもしれませんが。</p>

<p>では、サービスの監視についてはいかがでしょうか？<br />
以前、マイクロサービスとして各パーツを構築してみたのですが、クラウド上でサービスを作成・破棄することが多く、監視するサービスが増えて大変でした。もちろん、自動化して監視すればいいと思うんですが、その辺は具体的にどうされてましたか？</p>

<p><strong>竹添</strong>：自動で監視できるようにテンプレート化してますね。監視系の運用は、New Relic、Mackerel、SasS、ほかにも使えるものは何でも使ってます(笑)。サーバーの種類に応じて、Webサーバー用やデータベース用などを作ってます。</p>

<p><strong>岩瀬</strong>：いろいろ試されているんですね！</p>

<h2>マイクロサービスの実践例</h2>

<p><strong>岩瀬</strong>：ビズリーチでのマイクロサービス実践例について、聞かせてください。</p>

<p><strong>竹添</strong>：『<a href="https://jp.stanby.com/" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">スタンバイ</a>』というインターネット上から求人情報をクローリングしてくる求人検索エンジンがそうです。</p>

<p><img src="/wp-content/uploads/2015/04/microservice-301.jpg" alt="求人検索エンジン「スタンバイ」" width="640" height="384" class="aligncenter size-full wp-image-15188" srcset="/wp-content/uploads/2015/04/microservice-301.jpg 640w, /wp-content/uploads/2015/04/microservice-301-300x180.jpg 300w, /wp-content/uploads/2015/04/microservice-301-207x124.jpg 207w" sizes="(max-width: 640px) 100vw, 640px" /><span style="font-size: 90%;">　　▲求人検索エンジン <a href="https://jp.stanby.com/" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">スタンバイ</a></span></p>

<p>垂直方向のアーキテクチャなのですが、コンシューマを向いている部分や、出稿企業に向いている部分、管理的なものや内部のAPIと接続したりといった、マイクロサービスになっています。</p>

<p>バックエンドのいわゆるAPIサーバーなどは、機能別にいろいろあるんですが、フロントも二層に分かれていて、直接HTMLからWebサーバーにアクセスするのではなく、間にAPIをはさんでいます。バックエンドは基本プリミティブに作っていて、フロントのAPIがHTMLを生成して直接返しているところもあります。</p>

<p><strong>岩瀬</strong>：共通する処理とかも結構あるんですか？</p>

<p><strong>竹添</strong>：認証とかがそうですね。例えばスマホのものであれば、同じようなAPIを共用できます…と言いたいところですが、やはりいろいろ予期せぬことが起こりましたね(笑)。</p>

<p>一応、もともとの思惑としてはチームをスケールさせたいという意図がありました。バックエンドとフロントエンドをきっちり分けて、フロントエンドだけでアプリをメンテできるようにしたかったという意図があったんです。</p>

<p><img src="/wp-content/uploads/2015/04/jissenscala.jpg" alt="" width="611" height="436" class="aligncenter size-full wp-image-14818" srcset="/wp-content/uploads/2015/04/jissenscala.jpg 611w, /wp-content/uploads/2015/04/jissenscala-300x214.jpg 300w, /wp-content/uploads/2015/04/jissenscala-207x148.jpg 207w" sizes="(max-width: 611px) 100vw, 611px" /><span style="font-size: 90%;">　▲<a href="http://www.slideshare.net/takezoe/scala-jissenscala-44962449" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">ビズリーチの新サービスをScalaで作ってみた～マイクロサービスの裏側 #jissenscala</a></span></p>

<p><strong>岩瀬</strong>：バックエンドはScalaで書かれているんですよね？フロントエンドの人も頑張ってScalaを書かなくちゃならないようなことにはならなかったんでしょうか？</p>

<p><strong>竹添</strong>：全員ががっちり（Scalaを）書かなくちゃならない、ということにならないよう、役割分担を決めて、なるべくフロントエンドで修正が完結するようにしています。とはいえどうしても、サーバーサイドのプログラミングが必要になることもあるので、各チーム一人サーバサイドのサポートをできる人を配置したりはしています。その人が作ったパーツを使って、フロントエンドの人がテンプレートを作ったり。</p>

<p>フロントエンドのほうで全部できるのが理想的なんですけどね。開発のライフサイクルが全然違うので。フロントだけデプロイとか、もっと短いスパンでやっていけるといいなと。ちょっと画面を変えるだけなのに、サーバーサイドも落とさなくてはいけないのは避けたいので、将来的はフロントエンドだけで回せるようにしたいと思っています。まだまだ試行錯誤しているところです。</p>

<p><img src="/wp-content/uploads/2015/04/microservice-11.jpg" alt="" width="640" height="404" class="aligncenter size-full wp-image-14855" srcset="/wp-content/uploads/2015/04/microservice-11.jpg 640w, /wp-content/uploads/2015/04/microservice-11-300x189.jpg 300w, /wp-content/uploads/2015/04/microservice-11-207x131.jpg 207w" sizes="(max-width: 640px) 100vw, 640px" /></p>

<p><strong>岩瀬</strong>：フロントとサーバーサイドのライフサイクルの長さの違いって、重要ですね。最近のフロントエンドでも、AngularやReactとかいろいろ流行があるから、必要に応じて対応していかなくてはいけない部分もありますよね。</p>

<p><strong>竹添</strong>：とはいっても、現実的には厳しいところもあります。フロントで完結できずに、サーバーサイドのエンジニアがサポートしなくてはいけない部分はどうしても出てきます。サーバサイドをサポートするエンジニアが少なくてボトルネックになってしまったり、PCとスマホで同じようなAPIを共有できると思っていたら、画面に引きずられて、結局画面のAPIが増えて再利用できなかったりすることもありました。パフォーマンスとか工数面で考えると、レイヤーが増えていくのでいい結果が出なかったり、JSONの処理にCPUを使うなどの性能面の課題もありましたね。</p>

<p>結局、時間的にチューニングしている余裕もないし、直接データベースをいじってしまうこともありました（苦笑）。工数的にも、想定よりかかってしまいましたね。</p>

<p><strong>岩瀬</strong>：その辺の開発はホント大変ですよね…。アーキテクチャは毎回試行錯誤されているのだと思いますが、次に設計するときはもっとうまくいきそうですか？</p>

<p><strong>竹添</strong>：実は、ここに来るまで何度かチャレンジはしているんです。最初はモノリシックに作って、それをバラしたり。この『<a href="https://jp.stanby.com/" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">スタンバイ</a>』というサービス自体も、最初から大規模で開発することがわかっていました。工数の都合で密結合となっている部分もありますが、最終的には落ち着くんじゃないかと思っています。次からは、あらかじめ手を打って切り離せるところもあるんじゃないかと。</p>

<p><strong>岩瀬</strong>：サービスのどの部分が、マイクロサービスに変えていきやすかったといったことはありますか？</p>

<p><strong>竹添</strong>：今作っているサービスは、（モノリシックなサービスを）部分的に切り離してマイクロサービス化していったのではなく、一回捨ててマイクロサービスで構築し直したんですよね。既存の安定したサービスの隣や上とかに、新たなマイクロサービスを乗っけていくのであればまだやりやすいのですが、仕様もゆるい状態で全てのサービス開発が並列で進んでいくのが難しいところでした。最初はこの機能とこの機能だけとか縛りを設けて、少しづつ拡張していくとか、一個ずつサービスを作っていくことができればやりやすいと思います。</p>

<p><img src="/wp-content/uploads/2015/04/microservice-5.jpg" alt="" width="640" height="423" class="aligncenter size-full wp-image-14856" srcset="/wp-content/uploads/2015/04/microservice-5.jpg 640w, /wp-content/uploads/2015/04/microservice-5-300x198.jpg 300w, /wp-content/uploads/2015/04/microservice-5-207x137.jpg 207w" sizes="(max-width: 640px) 100vw, 640px" /></p>

<h2>マイクロサービス導入の選定ポイントは？</h2>

<p><strong>竹添</strong>：こないだ海外のScalaのカンファレンスに行ってきたときに聞いたのですが、「<a href="https://hootsuite.com/ja-jp/" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">HootSuite</a>」というSNSのクライアントツールを作っている会社が、PHPのモノリシックなアプリケーションからScalaのマイクロサービスにリプレイスしているという話がありました。</p>

<p>それによると、まず最初に手をつけたのが、認証系だったそうです。なぜかというと一番難しいところだから。最も難しいところから一番最初にやれば、ほかのところもできるでしょうという考え方なんですよね。我々は経験値があまりないので、簡単なところからやろうとするけど、強いチームで「頑張ってやるんだ」という覚悟があれば、あとはできるだろうと。</p>

<p><strong>岩瀬</strong>：難しいところからやるって度胸ありますね（笑）。</p>

<p><strong>竹添</strong>：コードを静的解析して、どこが一番複雑かを分析してるんですね。リファクタリングと同じでダメなところからつぶしていく考え方じゃないかと。</p>

<p><strong>岩瀬</strong>：マイクロサービスはパーツが多いので、モノリシックなサービスに比べて壊れやすいと思うのですが、何か設計のポイントはありますか？</p>

<p><strong>竹添</strong>：ユーザー向けのサービスで、一個壊れると止まってしまうようなところは、必ず冗長化させるようにしています。ただ、全部冗長化させるとコストがかかるので、社内向けのシステムやバックエンドで動いているバッチ処理など、1日くらい止めてもいいサービスならゆるめにするとか、強弱をつけて冗長化しています。</p>

<p><strong>岩瀬</strong>：クリティカルなところはかなり力を入れているんですね。</p>

<p><strong>竹添</strong>：検索サービスは弊社のサービスとしてかなりメインになっていくので、スケールすることが前提です。コストをかけても実装しておくようにしていました。</p>

<p><strong>岩瀬</strong>：マイクロサービスは冗長化しておくように、頑張って作らないといけない部分もありますよね。</p>

<p><strong>竹添</strong>：弊社はAWSを使っているのと、冗長化についてはかなり学んでいるので、その辺はなんとかなっています。もちろん、エンタープライズのミッションクリティカルなものと比べると、やりきれていない部分もありますけどね。本当なら相乗りさせられるものはしたほうが運用も楽になるし、コストも下げられると思いますが、まだそこまでやりきれてない。</p>

<p><strong>岩瀬</strong>：今回はマイクロサービスで作ったけど、次回はモノリシックで作ったほうがいいとか判断に悩むことがあると思うのですが、何か選定ポイントはありますか？</p>

<p><strong>竹添</strong>：開発のときのオーバヘッドや、インフラコストで見ると、短期的にはデメリットのほうが大きいと思っています。どこかで損益分岐点はあると思うんですが。とりあえずスモール仕立てでやってみようとか、成功するかまったくわから状況なら、モノリシックで作って、後から大きくなったタイミングでマイクロサービスにしてもいいのではないでしょうか。</p>

<p>ただ、Webのサービスが大きくなるときはビジネスとして勝負時だし、攻めどきなので、
その事業が大きくなるタイミングでシステムを止めてコアアーキテクチャを変えるという判断は簡単にはできません。経営判断が必要になるかと。</p>

<p><img src="/wp-content/uploads/2015/04/microservice-6.jpg" alt="" width="640" height="389" class="aligncenter size-full wp-image-14854" srcset="/wp-content/uploads/2015/04/microservice-6.jpg 640w, /wp-content/uploads/2015/04/microservice-6-300x182.jpg 300w, /wp-content/uploads/2015/04/microservice-6-207x126.jpg 207w" sizes="(max-width: 640px) 100vw, 640px" /></p>

<p>もしリソースがあるなら、現状のモノはエンハンスを続けながら、マイクロサービスで作りなおすなど、体制を組むという選択肢もあるが難しいですね。特に企業向けのサービスをやっていると、機能的に変わってしまうとか、デグレードしてしまうのは、許されない面もあるので。最初からこれだけ大きなサービスにするというように決められたら、マイクロサービスで作るという判断もできると思います。</p>

<p>大きくなったタイミングで経営判断もあるが、あきらかにスケールすることが見えていればマイクロサービスにするほうがいい。ある程度大きくなってくると、プロダクトとしても、チームとしてもマイクロサービスでないとスケールできない。モノリシックだとレガシー化してしまうので、新しい技術も入れられないし、新陳代謝していかないと新しい人も入ってこない。両面的に健全ではないです。</p>

<p><strong>岩瀬</strong>：例えば新しくチームメンバーが増えたとき、モノリシックなら全体像が見えるけど、マイクロサービスは全体像が見えにくくて困る…といったことはないのでしょうか？</p>

<p><strong>竹添</strong>：それはもちろんありますね。ただ、ひとつひとつのサービスのインターフェイスが明確であれば、それほど問題はないはずです。サービス開発を立ち上げたばかりだと難しいところもありますが、なんとか頑張って、インターフェイスだけはちゃんとしようと思っています。まだそこまで到達していない過渡期ではありますが…。</p>

<p><strong>岩瀬</strong>：インターフェイスは、ほぼJSONでやりとりしているようですね。JSONのスキーマはどのように定義しているのでしょうか？<a href="http://json-schema.org/" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">JSON Scheme</a>を使ったりしているのでしょうか？</p>

<p><strong>竹添</strong>：インターフェースは、内部ではScalaのオブジェクトで定義しています。JSONを直接さわることはほぼありませんね。ただそれだと、（Scalaを知らない）フロントエンジニアにとってはハードルが高いので、そこもカバーできるようなものがあるといいのですが。型定義の強いTypeScriptにトライしているチームもありますね。</p>

<p><strong>白石</strong>：インターフェース定義がJSONを前提としていないということは、他のシリアライズ方法に切り替えることも難しくなさそうですね。先ほど、JSONのシリアライズ・デシリアライズ処理の負荷の話が少し出ましたが、例えばそれをJavaのシリアライゼーションやProtocol Bufferに置き換えたりすることで、処理負荷を軽減することもできるんでしょうか。</p>

<p><strong>竹添</strong>：その辺も研究はしています。ただ扱っているデータがテキストが多いので、バイナリ形式にしてもあまり速くならないんですよね。<a href="http://msgpack.org/" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">MessagePack</a>とかも試しましたが、あまり変わらなかったので、今は使いやすさでJSONを選んでいます。コンパクトな情報でやりとりしているところは、プロトコルを変えたりとか、今後検討の余地はありますが。</p>

<p><strong>白石</strong>：マイクロサービスのAPI設計はどのように行うのですか？サービス同士が複雑な依存関係を持たないように設計するには？</p>

<p><strong>竹添</strong>：マイクロサービスの設計を適切に行うのはなかなか難しいですが、あるまとまった処理を他の部分から独立させうるかどうか、複数のサービスから利用されうるかどうか、といったところがひとつの判断基準になると思います。その上で、データベース処理を必要とするかどうかによって、ライブラリとして実装するか、サービスとして実装するか判断する感じでしょうか。データベースアクセスを伴わないなら、ライブラリとして配布すればいい。データベースアクセスを伴うのであれば、マイクロサービスにすることを考えますね。</p>

<p><img src="/wp-content/uploads/2015/04/microservice-15.jpg" alt="" width="640" height="412" class="aligncenter size-full wp-image-14851" srcset="/wp-content/uploads/2015/04/microservice-15.jpg 640w, /wp-content/uploads/2015/04/microservice-15-300x193.jpg 300w, /wp-content/uploads/2015/04/microservice-15-207x133.jpg 207w" sizes="(max-width: 640px) 100vw, 640px" /></p>

<p><strong>白石</strong>：データベースって、どうしているんでしょうか。マイクロサービスごとに別々のデータベースを持っているのか、それともひとつのデータベースを複数のマイクロサービスが共有しているイメージでしょうか？</p>

<p><strong>竹添</strong>：いえ、マイクロサービスごとにデータベースは分けています。</p>

<p><strong>白石</strong>：じゃあ、トランザクションはどうするんですか？</p>

<p><strong>竹添</strong>：マイクロサービスごとに切ってますね。</p>

<p><strong>白石</strong>：マイクロサービスをまたがるような処理を、ひとつのトランザクション内で行いたいという場合はありませんか？</p>

<p><strong>竹添</strong>：それぞれのマイクロサービスを、適切な粒度で切っているので、基本的には大丈夫かと。もっと大きくなって出てこないとは言い切れないかもしれませんが、そうなったら外側の仕組みでなんとかするかんじですね。</p>

<p><strong>白石</strong>：SOAPという選択肢はないですか？<a href="https://www.oasis-open.org/committees/tc_home.php?wg_abbrev=ws-tx" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">WS-Transaction</a>とかあると思いますが。</p>

<p><strong>竹添</strong>：ないですね。フロントがスマートフォンのアプリだったり、JavaScriptだったりするので、フロントエンドから使いやすいフォーマットということで。トランザクションが必要なところが切り出せているのと、参照系がほとんどなので現段階では問題として浮上していませんね。出てきたときには、大きな課題になるかもしれませんが。</p>

<p><strong>白石</strong>：マイクロサービス・アーキテクチャと、アジャイル開発との相性はいかがでしょう？特に、複数の小さなチームが連携しなくてはならないとなると、それぞれのチームがアジャイルに独立して進めるのは難しいのでは…と思ったのですが。</p>

<p><strong>竹添</strong>：私たちもスクラムで開発していますし、マイクロサービスとアジャイル開発の相性は良いと思っています。マイクロサービス間で、密に連携しなくてはならないという状況はそれほど多くないですし、そうした必要が生じた場合は、マイルストーンを置いて調整します。</p>

<p><strong>白石</strong>：例えばサービスに一個の機能を追加するとき、チームを横断した変更が必要になったりしませんか？</p>

<p><strong>竹添</strong>：チームとしてはマイクロサービスごとに（フロントエンドからデータベースまで）縦に分けているので、チーム内で完結しますね。そして、それぞれのチームの中でフロント・サーバーなどの役割分担があります。ひとつひとつのサービスの粒度も、小さいものから大きいものまであります。単機能のサービスもあれば、大きなWebアプリケーションだけど一つのマイクロサービスというものまであって、その中でスクラムを回すかんじですね。</p>

<p><strong>白石・岩瀬</strong>：いろいろ試行錯誤やチャレンジをされているお話を伺い、マイクロサービス・アーキテクチャ実践のポイントが見えてきた気がします。本日は貴重なお話をありがとうございました！</p>
]]></content:encoded>
		
		<series:name><![CDATA[アプリケーションアーキテクチャ最前線]]></series:name>
	</item>
		<item>
		<title>JJUGのエキスパートが語るエンタープライズ・アーキテクチャの過去、現在、未来──SOAP・RESTからIoT・ウェアラブルまで</title>
		<link>/yoshikawa_t/14403/</link>
		<pubDate>Fri, 15 May 2015 00:00:38 +0000</pubDate>
		<dc:creator><![CDATA[吉川 徹]]></dc:creator>
				<category><![CDATA[最新動向]]></category>
		<category><![CDATA[プログラミング]]></category>
		<category><![CDATA[システム開発]]></category>
		<category><![CDATA[IoT]]></category>
		<category><![CDATA[JSON]]></category>
		<category><![CDATA[Java]]></category>
		<category><![CDATA[REST]]></category>
		<category><![CDATA[SOAP]]></category>
		<category><![CDATA[アーキテクチャ]]></category>
		<category><![CDATA[エンタープライズ]]></category>
		<category><![CDATA[クラウド]]></category>

		<guid isPermaLink="false">/?p=14403</guid>
		<description><![CDATA[連載： アプリケーションアーキテクチャ最前線 (4)特集企画「アプリケーションアーキテクチャ最前線」では、さまざまな視点からアプリケーションアーキテクチャをエキスパートたちに語っていただきます。今回は、エンタープライズ・...]]></description>
				<content:encoded><![CDATA[<div class="seriesmeta">連載： <a href="https://html5experts.jp/series/arch/" class="series-287" title="アプリケーションアーキテクチャ最前線" data-wpel-link="internal">アプリケーションアーキテクチャ最前線</a> (4)</div><p>特集企画「アプリケーションアーキテクチャ最前線」では、さまざまな視点からアプリケーションアーキテクチャをエキスパートたちに語っていただきます。今回は、エンタープライズ・アーキテクチャについて取り上げます。</p>

<p>HTML5・モバイル・IoT・ウェアラブルなどビジネス環境が激変する中、エンタープライズ・アーキテクチャはどういう課題を抱えていて、どうあるべきなのか。今回は、<a href="http://www.java-users.jp/" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">JJUG (日本Javaユーザーグループ）</a>でご活躍中のお二人に話を伺うことにしました。</p>

<p><img src="/wp-content/uploads/2015/04/hx-21.jpg" alt="" width="600" height="354" class="aligncenter size-full wp-image-14671" srcset="/wp-content/uploads/2015/04/hx-21.jpg 600w, /wp-content/uploads/2015/04/hx-21-300x177.jpg 300w, /wp-content/uploads/2015/04/hx-21-207x122.jpg 207w" sizes="(max-width: 600px) 100vw, 600px" /></p>

<p>アーキテクチャを主軸に第一線で活躍している<a href="https://www.gxp.co.jp/" target="_blank" data-wpel-link="external" rel="follow external noopener noreferrer">グロースエクスパートナーズ株式会社</a> 執行役員の鈴木雄介さんと、「流しのアーキテクト」を自称する<a href="http://www.architectus.co.jp/" target="_blank" data-wpel-link="external" rel="follow external noopener noreferrer">株式会社アーキテクタス</a> 代表取締役の細川努さんを交えて、エンタープライズ開発出身の白石俊平編集長がさまざまなトピックスをぶつけていきます。</p>

<h2>XML Webサービスは今どうなったのか</h2>

<p><br>
<strong>白石：</strong>とりあえず、昔話から軽く聞いてみたいですね。まずは、エンタープライズ内のシステム間連携でよく話題に上がる、<a href="http://ja.wikipedia.org/wiki/SOAP_%28プロトコル%29" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">SOAP</a>とRESTについての現状について、どうお考えでしょうか？
<br><br>
<strong>鈴木：</strong>SOAPは下火だと思われがちですが、私の知る限り、今でもよく利用されています。RESTとJSONの組み合わせも当然よく使われているんですが、（SOAPは）<a href="http://ja.wikipedia.org/wiki/Web_Services_Description_Language" target="_blank" data-wpel-link="external" rel="follow external noopener noreferrer">WSDL</a>で型定義ができるので、それなりにかたいシステム間連携だったりすると、WSDLがあるほうがコードの自動生成もできるし、非常に楽なのでよく使われています。</p>

<p><img src="/wp-content/uploads/2015/04/hx-131.jpg" alt="" width="600" height="370" class="aligncenter size-full wp-image-14680" srcset="/wp-content/uploads/2015/04/hx-131.jpg 600w, /wp-content/uploads/2015/04/hx-131-300x185.jpg 300w, /wp-content/uploads/2015/04/hx-131-207x128.jpg 207w" sizes="(max-width: 600px) 100vw, 600px" />　　 ▲グロースエクスパートナーズ株式会社 執行役員 鈴木雄介さん</span>
<br><br>
<strong>細川：</strong>とはいえ、SOAPの上位レイヤで規定されている<a href="http://en.wikipedia.org/wiki/WS-Reliability" target="_blank" data-wpel-link="external" rel="follow external noopener noreferrer">WS-Reliability</a>だとか<a href="http://ja.wikipedia.org/wiki/WS-Security" target="_blank" data-wpel-link="external" rel="follow external noopener noreferrer">WS-Security</a>などの様々なプロトコルは、あまり使われていない印象です。
<br><br>
<strong>白石：</strong>では、システム間連携などではプレーンなSOAPがよく使われているということですね。
<br><br>
<strong>鈴木：</strong>まあSOAPもRESTも用意する、というパターンが多いんじゃないでしょうか。オブジェクトモデルは同じで、それをSOAPでもJSONでも表現できるように設計しておくというパターンは、比較的多いような気がします。
<br><br>
<strong>細川：</strong>あと僕が気になるのは、スケーラビリティなんですよね。SOAPだとちょっと気になるのはやっぱりシリアライズ・デシリアライズの処理が重いし、トラフィックも増大するじゃないですか。そういった意味だとやっぱりREST + JSONのほうにもメリットがありますね。本来だったら使い分けみたいなところが重要なんですけど、いまだにSOAP一択という開発現場も多い。</p>

<p><img src="/wp-content/uploads/2015/04/hx-151.jpg" alt="" width="600" height="357" class="aligncenter size-full wp-image-14692" srcset="/wp-content/uploads/2015/04/hx-151.jpg 600w, /wp-content/uploads/2015/04/hx-151-300x179.jpg 300w, /wp-content/uploads/2015/04/hx-151-207x123.jpg 207w" sizes="(max-width: 600px) 100vw, 600px" />　　　▲株式会社アーキテクタス 代表取締役 細川努さん</span>
<br><br>
<strong>白石：</strong>どっちかに寄せちゃったほうが考えることが少なくて、楽ってこともあるかもしれないですね。
<br><br>
<strong>鈴木：</strong>一長一短…というとつまらない話になってしまいますが（笑）、実際のところそういう結論になっちゃいますね。HTML5が盛り上がっている現在、JavaScriptと相性が良いJSONにはすごく価値がある。一方で例えば、日付型をどう扱うんだとか、型定義やコードの自動生成がしづらいというJSONには苦手な分野もあるのですが、SOAPはそういう部分に強い。「SOAPはXMLだからダメ・ダサい」ということは、実際のシステム開発には全く当てはまらないと思いますよ。
<br><br></p>

<h2>エンタープライズアーキテクチャパターンは今も有効か</h2>

<p><br>
<strong>白石：</strong>アーキテクチャという点では、<a href="http://www.amazon.co.jp/dp/4798105538" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">マーティン・ファウラーのエンタープライズ アプリケーションアーキテクチャパターン</a>が昔は王道だったかとと思うんですが、それは今も有効なんでしょうか？
<br><br>
<strong>鈴木：</strong>あれは普遍的なものなので、時代が変わったからといって使えなくなってしまうようなものではありません。ただ、昔と比べると今はWeb API主導型のアプリケーションが主流になりつつありますね。クライアントのマルチデバイス化は当然エンタープライズでも相当重要なので、「サーバー側はAPIを提供するだけ」というスタイルに移行しつつあるのは、Webでもエンタープライズでもまったく変わらないと思います。
<br><br>
<strong>白石：</strong>具体的には、<a href="http://ja.wikipedia.org/wiki/JAX-RS" target="_blank" data-wpel-link="external" rel="follow external noopener noreferrer">JAX-RS</a>を利用するとか？
<br></p>

<p><img src="/wp-content/uploads/2015/04/hx-18.jpg" alt="" width="600" height="390" class="aligncenter size-full wp-image-14678" srcset="/wp-content/uploads/2015/04/hx-18.jpg 600w, /wp-content/uploads/2015/04/hx-18-300x195.jpg 300w, /wp-content/uploads/2015/04/hx-18-207x135.jpg 207w" sizes="(max-width: 600px) 100vw, 600px" />
<br>
<strong>鈴木：</strong>JAX-RSもありますし、JSON用のバインディングAPIもJava EE 7で標準化されたので、何の違和感もなく使えますね。
<br><br>
<strong>細川：</strong>エンタープライズ アプリケーションアーキテクチャパターンは非常に洗練されていたのですが、実際のエンタープライズ・アプリケーションはもっと泥臭いです（笑）。
例えば<a href="http://ja.wikipedia.org/wiki/%E3%83%9E%E3%83%BC%E3%83%86%E3%82%A3%E3%83%B3%E3%83%BB%E3%83%95%E3%82%A1%E3%82%A6%E3%83%A9%E3%83%BC" target="_blank" data-wpel-link="external" rel="follow external noopener noreferrer">マーティン・ファウラー</a>の提唱するモデルだと、プレゼンテーションレイヤからデータレイヤまでが3、4層ぐらいなんですが、実際はビジネスロジックだけで3層以上に分けたりとか、ビジネスロジックとプレゼンテーションの間にいろいろ挟んだりとか、端から端まで数えると下手したら10層ぐらいあるものも実際のプロジェクトでは山ほどありました。
<br><br>
<strong>白石：</strong>僕もそういうプロジェクトをやったことがあります。なんか別のメソッドを呼び出してるだけのメソッドが大量にあったり（笑）。
<br><br>
<strong>細川：</strong>そうそう。なので、どちらかというとほんとに綺麗なレイヤリングはできてなかったというのが現実ですね。最近、６〜７年以前につくられた数十万ステップくらいのシステムをいくつか実際に解析してみたんですけど、結構面白い結果が出たんですよ。サーバーサイドJava（JavaEE）としては最新ではなく、まだJ2EEと呼ばれていた頃のシステムです。どのシステムも、一番複雑度が高いのはビューとデータアクセス（永続化）、アーキテクチャ共通系のモジュールです。ビジネスロジックの部分は量は膨大なんですけど、複雑度自体は比較的シンプルなんです。 
<br><br>
何が言いたいかというと、古い世代のサーバーサイドJavaは、ビューとアーキテクチャ制御に作り込みが必要で、そこのところが本当に大変だった。例えば、ビューのところのバリデーションなんかは、かなり作り込みが必要で、簡単な画面作るのも相当手間がかかってたんですよね。結局は、<strong>かつてのJava EE（J2EE）って、エンタープライズ系プログラマーが本来集中すべき業務上のロジックにあんまり集中できていなくて、もっと簡単にできるはずのところに手間がかかっていた</strong>のが現実だったんじゃなかったかなと。
<br><br>
<strong>白石：</strong>ほんとにそうですよね。オブジェクトの変換とか、別のメソッド呼び出すだけとか、<a href="http://ja.wikipedia.org/wiki/Facade_%E3%83%91%E3%82%BF%E3%83%BC%E3%83%B3" target="_blank" data-wpel-link="external" rel="follow external noopener noreferrer">ファサード</a>作ってそこに一生懸命集めるだけとかやっていて、なにやってるんだろうこれは…とか思っていました。
<br><br>
<strong>細川：</strong>以前はそうでしたね。そのレガシーなところが今はみんなの足を引っ張ってる（笑）。現在は、それがどれだけ良くなってるか、というところですよね。
<br></p>

<p><img src="/wp-content/uploads/2015/04/hx-16.jpg" alt="" width="600" height="343" class="aligncenter size-full wp-image-14675" srcset="/wp-content/uploads/2015/04/hx-16.jpg 600w, /wp-content/uploads/2015/04/hx-16-300x172.jpg 300w, /wp-content/uploads/2015/04/hx-16-207x118.jpg 207w" sizes="(max-width: 600px) 100vw, 600px" />
<br>
<strong>白石：</strong>今の流れをまとめると、ビューの複雑なところっていうのが、だんだんクライアント側に寄ってきていて、ようはHTML5でリッチクライアント化されてきて、サーバー側はAPIを提供しているだけになっていると。
<br><br>
<strong>鈴木：</strong>大きくはそうです。ただ、エンタープライズシステムの場合、とにかくシステム間連携が多くて、1つの企業の中でいろんなシステムがあって、ほとんどのシステムが関連付いているのが当然になっています。そうするとクライアント側からするといろんなシステムにいちいちログインして使うのは面倒くさいので、どうやってシンプルに使うのかというのが今の大きなテーマになっていると思います。サーバー間で連携したり、クライアント側でアグリゲーションしたりというのが今の課題としてあって、エンタープライズの場合は、そこがシンプルにならないので、それがひとつの前提になっています。
<br><br>
<strong>白石：</strong>なるほど。そのシステム間連携がさきほどおっしゃっていたようにXMLベースだったり、RESTだったりという感じですね。
<br><br>
<strong>鈴木：</strong>はい。企業って、いろんなユーザーといろんなシステムがあるので、いわゆる一般コンシューマー向けのECサイトのようなシステムもあれば、例えば人事システムみたいなものもありますよね。人事システムだと、人事部だけが使うのでユーザーが10人しかいなかったり、でも社員数10万人を支える人事システムっていうと相当でかいっていうものだとか。じゃあその2つが同じアーキテクチャで、同じ作り方でいいんですかっていうと全然そうじゃないですよね。
<br><br>
企業の中のさまざまなシステムの中で、HTML5に合うものもすごく増えてますし、HTMLの可能性が広がったことでやれることもすごく増えましたが、一方でそれが銀の弾丸ではないです。ここはRESTでつくったらいいよねとか、ここはWSDLがちゃんとあってSOAPでやったほうがいいよねっていうのがある。そこは全体の中での選択してやっていけばよいことです。エンタープライズの人って古めかしい人印象があるかもしれないですけど、新しいことも古いこともやらきゃいけないので、そういう意味ではちゃんとまともにやっている人は、それを両方うまくバランスよくやっていますね。</p>

<h2>エンタープライズとモバイル</h2>

<p><br>
<strong>白石：</strong>最近のエンタープライズ業界に疎くて、初心者的な質問で申し訳無いのですが、モバイルをエンタープライズで使うというのはもうかなり普通に行われていることなんでしょうか。
<br><br>
<strong>鈴木：</strong>そうですね。モバイル、タブレット、PC、専用の機器とか、何を何に使うといいよねっていうユースケースはちゃんと考えなきゃいけないですが、モバイルはものすごく重要なツールとして使われています。
<br><br>
<strong>白石：</strong>エンタープライズでモバイルといえば結構HTML5が使われているという話を聞くのですが、実際そうなんですか？コンシューマ向けだと、ネイティブアプリが全盛です。</p>

<p><img src="/wp-content/uploads/2015/04/hx-19.jpg" alt="" width="600" height="369" class="aligncenter size-full wp-image-14679" srcset="/wp-content/uploads/2015/04/hx-19.jpg 600w, /wp-content/uploads/2015/04/hx-19-300x185.jpg 300w, /wp-content/uploads/2015/04/hx-19-207x127.jpg 207w" sizes="(max-width: 600px) 100vw, 600px" />
<br>
<strong>鈴木：</strong>そもそもモバイルという文脈で求められる操作性とか機能が、エンタープライズの場合はそんなにネイティブでやらなくてもいいようなものが多いので、HTML5がフィットしてるんじゃないかと思います。例えば、ゲームはネイティブアプリがいいといわれますが、別にあそこまでビジュアル的なものとか、細やかな操作性はあんまり求められることはないと。
<br><br>
なので、HTML5でやるっていうのは多いんじゃないでしょうか。Webアプリであれば、リリースも楽ですしね。去年ぐらいまでは写真とか音声とかでいろいろやろうとすると、まだまだHTML5では制約が多いということでネイティブアプリという選択もありましたが、そうした制約もブラウザが進化してきてだんだん問題にならなくなってきています。
<br><br>
<strong>白石：</strong>なるほど。ちなみに、そうしたHTML5で書かれた業務アプリは、ハイブリッドアプリとしてインストールする形が多いのか、それともWebサイトとしてURLでアクセスする形で作るんでしょうか。
<br><br>
<strong>鈴木：</strong>それは両方あります。どちらにも利点があるので。</p>

<h2>クラウドがアーキテクチャに与えた影響は？</h2>

<p><br>
<strong>白石：</strong>これも初心者的な質問で恐縮です。クラウドがエンタープライズのアーキテクチャに与えた影響はありますか。
<br><br>
<strong>鈴木：</strong>もちろんあります。クラウドができたことで一番大きかったのは、PaaSという概念ができたことですね。あるニーズに特化したものっていうのは共有化されたものが使われるべきだっていう概念がはっきりしたのはPaaSのおかげです。例えばAWSのラインナップを見て貰うとわかるんですが、CDNありますねだとか、ロードバランサありますねだとか、ストレージ、サーバーノード、認証認可とか、メールの配信サービスとか、ああいうものはPaaSとしてみんなが共有して使うべきだという概念ができた。
<br><br>
なので、そういうプラットフォームを用意してその上にアプリケーションを作って、アプリケーションはUIを含めてそれだけに特化して、なるべくプラットフォームの機能をうまくつかってやっていくていうアイデアは、今のエンタープライズでも浸透している考え方だと思います。</p>

<p><img src="/wp-content/uploads/2015/04/hx-17.jpg" alt="" width="600" height="394" class="aligncenter size-full wp-image-14677" srcset="/wp-content/uploads/2015/04/hx-17.jpg 600w, /wp-content/uploads/2015/04/hx-17-300x197.jpg 300w, /wp-content/uploads/2015/04/hx-17-207x136.jpg 207w" sizes="(max-width: 600px) 100vw, 600px" />
<br>
<strong>細川：</strong>開発者視点でいうと、開発者ができる領域が増えてきましたね。従来だと、サーバ構築とソフトウェア開発は別々のものでしたが、プログラマーがだんだんとクラウドを前提にして、環境を構築するようになってきた。そうすると、同時にパフォーマンスだとかセキュリティだとかをエンジニアが自分で考えなきゃいけない時代になってきていて、Webエンジニアだとかエンタープライズエンジニアとかの区別はなくなってきている。そういう意味では、フルスタックで両方できなきゃまずいんじゃないでしょうか。
<br><br>
<strong>鈴木：</strong>もうそれはエンタープライズでも間違いなくそうですね。
<br><br>
<strong>細川：</strong>もうひとつの特徴としては、昔は大規模＝エンタープライズということが多かったんですが、今ではコンシューマー向けとかゲームだとか、そっちのほうがより大規模なんですよね。それを実現しているのがやっぱりクラウドなのかと思っています。そういった意味でも、これからはWebエンジニアこそ大規模を得意にならなきゃいけないんじゃないかと。サーバーとクライアントのメッセージの単位なんかもパフォーマンスに大きく影響するので、そういったところも、かなりノウハウを積まないといけなくなってきています。</p>

<h2>エンタープライズ・アーキテクチャの未来像</h2>

<p><br>
<strong>白石：</strong>IoTとかウェアラブルとかを見据えて、今後どういうふうにエンタープライズ・アーキテクチャが変わっていくべきか、ご意見はありますか？
<br><br>
<strong>鈴木：</strong>IoTを真剣にやろうとすると、先ほど細川さんが言っていた大規模っていうのがエンタープライズに戻ってくるんですよね。対応するデバイスの数が、今まではユーザーが数万人ですんだのが、億になるかもしれない。例えば、すべてのダンボール箱にチップがついたらどうなるんだろうっていう世界を考える。そうすると日本で流通しているダンボール箱は何箱あるんだとか、ものすごいクライアントの数になってしまう。そうなってくると、エンタープライズがまた大規模な性能を頑張らないといけなりますね。
<br><br>
例えば、わかりやすい例でB2Bのケースを考えると、トラックをトレースする仕組みを作ることになったとします。じゃあ全国にあるトラックを全台管理しますとなったときに、全部で何台あるのか。1台のトラックにセンサーがいくつついているのかということになると、センサーが車輪それぞれにあって、それぞれのタイヤのすり減り方を計測して、運転手が寝てるんじゃないかというのを監視するセンサーがあって、速度・加速度をとるセンサーがあって…というようにトラックにすごい数のセンサーがある。</p>

<p><img src="/wp-content/uploads/2015/04/hx-22.jpg" alt="" width="640" height="353" class="aligncenter size-full wp-image-14690" srcset="/wp-content/uploads/2015/04/hx-22.jpg 640w, /wp-content/uploads/2015/04/hx-22-300x165.jpg 300w, /wp-content/uploads/2015/04/hx-22-207x114.jpg 207w" sizes="(max-width: 640px) 100vw, 640px" />
<br>
そして、トラックを1万台管理します、データを500msごとに取るとすなると、ものすごい数になる。つまり、B2BでIoT、ウェアラブルというのはB2Cのスケーラビリティをエンタープライズでもう1回頑張らないといけないということになる。今、Webの人が大規模で頑張っているテクノロジーセット、例えば大量のストリームを処理しながらイベントドリブンでやるっていうのは昔からエンタープライズにあって、それがWeb側ですごく実用化されて使われていたのが、またエンタープライズに戻ってくる。そういう流れが未来にはやってくるんじゃないかなと考えています。
<br><br>
<strong>白石：</strong>なるほど。ちなみに、もう実際にIoTの案件とか発生しているんでしょうか。
<br><br>
<strong>鈴木：</strong>相談はかなり増えてきてますね。まだ実証実験ぐらいが多いという感覚ですが。今は車がうまくいっていて、ホンダの事例がわかりやすいです。日本中の車のブレーキの発生情報を集めてるんですけど、それを解析すると事故が発生しやすい曲がり角がわかるんですよね。みんながたくさんブレーキを踏んでいる曲がり角がどこかっていうのを提供しているんですよ。そしたらそれを元に道路の信号とか標識とかを改善するってことをやっています。</p>

<h2>まとめ</h2>

<p><br>
<strong>白石：</strong>本日は、エンタープライズ・アーキテクチャについて様々なご意見をいただき、誠にありがとうございました。最後に、読者に向けて一言お願いします。</p>

<p><img src="/wp-content/uploads/2015/04/hx-20.jpg" alt="" width="600" height="387" class="aligncenter size-full wp-image-14681" srcset="/wp-content/uploads/2015/04/hx-20.jpg 600w, /wp-content/uploads/2015/04/hx-20-300x194.jpg 300w, /wp-content/uploads/2015/04/hx-20-207x134.jpg 207w" sizes="(max-width: 600px) 100vw, 600px" />
<br>
<strong>鈴木：</strong>自分たちの生活を考えると、やっぱりエンタープライズ業界の会社が自分達の生活を支えてるわけじゃないですか。それがより便利になったり、役立つようになったり、世の中が進化するっていうのはとても大事なことだと思うんですよ。なので、それが実現されるためにはどうしたらいいのかっていうときに、エンタープライズとかWebとかそういう区切りはどうでもよくて、どうやれば本当に価値がでるのか、そういうのを考えるのが面白い。
<br><br>
ただ、社会基盤として変えてはいけないところもエンタープライズにはどうしてもあるので、それをどのように変えずに、より新しいことにトライしながら今あるものの価値をより高めるのかというところが大事ですね。なので「エンタープライズwww」という風潮はよろしくないと思います（笑）。</p>

<p><img src="/wp-content/uploads/2015/04/hx-211.jpg" alt="" width="600" height="381" class="aligncenter size-full wp-image-14682" srcset="/wp-content/uploads/2015/04/hx-211.jpg 600w, /wp-content/uploads/2015/04/hx-211-300x191.jpg 300w, /wp-content/uploads/2015/04/hx-211-207x131.jpg 207w" sizes="(max-width: 600px) 100vw, 600px" />
<br>
<strong>細川：</strong>2点あって、ひとつは、今までのエンタープライズ開発は、ユーザーの言われたものを作るという風潮が多かったんですが、今後はユーザーと一緒につくるっていうのは大事になってくるんじゃないかと考えています。そういう意味ではエンタープライズ業界もWeb業界と同じようにUXとか、よりユーザーが求めるものは何かというところを柔軟に対応してかなきゃいけない。エンタープライズもWebに学ばなきゃいけないということ。
<br><br>
もうひとつは、今後、変化がたくさんあって、それに対応するためにエンタープライズ側、Web側が両方対応しないと対応できないんじゃないかなと思う。これらの技術の変化に対応できるようにフルスタック、両方できるようなエンジニアが増えてくると心強いんじゃないでしょうか。</p>
]]></content:encoded>
		
		<series:name><![CDATA[アプリケーションアーキテクチャ最前線]]></series:name>
	</item>
		<item>
		<title>HTML5を駆使したRakuten Technology Conference 2013サイト制作の内側</title>
		<link>/ogaoga/3370/</link>
		<pubDate>Fri, 06 Dec 2013 00:00:37 +0000</pubDate>
		<dc:creator><![CDATA[小笠原 努]]></dc:creator>
				<category><![CDATA[プログラミング]]></category>
		<category><![CDATA[デザイン]]></category>
		<category><![CDATA[CSS]]></category>
		<category><![CDATA[Canvas]]></category>
		<category><![CDATA[Grunt]]></category>
		<category><![CDATA[JSON]]></category>
		<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[Sass]]></category>

		<guid isPermaLink="false">/?p=3370</guid>
		<description><![CDATA[楽天では、10月26日に「Rakuten Technology Conference 2013」を開催し、多くの方にご来場頂きました。ご参加者の皆様、ありがとうございました！ 私が所属している「HTML5 Project...]]></description>
				<content:encoded><![CDATA[<p><a href="https://html5experts.jp/wp-content/uploads/2013/12/Rakuten-Technology-Conference-2013.png" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer"><img src="/wp-content/uploads/2013/12/Rakuten-Technology-Conference-2013-206x300.png" alt="Rakuten Technology Conference 2013 のトップページ" width="206" height="300" class="alignright size-medium wp-image-3380" style="border:1px solid gray" srcset="/wp-content/uploads/2013/12/Rakuten-Technology-Conference-2013-206x300.png 206w, /wp-content/uploads/2013/12/Rakuten-Technology-Conference-2013-705x1024.png 705w, /wp-content/uploads/2013/12/Rakuten-Technology-Conference-2013-142x207.png 142w, /wp-content/uploads/2013/12/Rakuten-Technology-Conference-2013.png 441w" sizes="(max-width: 206px) 100vw, 206px" /></a></p>

<p>楽天では、10月26日に「<a href="http://tech.rakuten.co.jp/" title="Rakuten Technology Conference 2013" target="_blank" data-wpel-link="external" rel="follow external noopener noreferrer">Rakuten Technology Conference 2013</a>」を開催し、多くの方にご来場頂きました。ご参加者の皆様、ありがとうございました！</p>

<p>私が所属している「HTML5 Project Team」が<a href="http://tech.rakuten.co.jp/timetable.html#session-e2" title="担当したセッション（HTML5 in Rakuten）" target="_blank" data-wpel-link="external" rel="follow external noopener noreferrer">担当したセッション</a>では、今回制作を担当したカンファレンスのサイトについて発表をしました。技術者の祭典ということもあり、HTML5やフロントエンドの技術をふんだんに盛り込み、皆さんご存知の賑やかな楽天市場とはひと味違ったクールなサイトに仕上げました。ご覧頂けましたでしょうか？</p>

<p>当日のセッションの内容と重複しますが、今回は、HTML5の活用事例として、このサイトがどのような技術で作られたのか、<a href="http://www.slideshare.net/rakutentech/tech-conf2013e2" title="セッションでも使用したスライド（HTML5 in Rakuten）" target="_blank" data-wpel-link="external" rel="follow external noopener noreferrer">セッションでも使用したスライド</a>を交えて紹介していきます。</p>

<h2>「Rakuten Technology Conference 2013」サイトのコンセプトと要求仕様</h2>

<p>このサイトでは、よくあるカンファレンスのサイトと同じく、講演者の紹介やタイムテーブルなどを公開しています。メインのターゲットユーザーはエンジニアで、日頃はPCをよく使い、最新のスマートフォンを持ち歩いていると想定しました。また、情報だけでなく技術面でもアピールする機会にしたかったこともあり、過剰なほどにあらゆる技術を盛り込んでいます。</p>

<p>サイトを構築する上で、いくつか要求仕様がありました。</p>

<ul>
    <li>情報の更新が頻繁に行われる</li>
    <li>SEOを考慮する</li>
    <li>サーバサイドスクリプトは使用しない</li>
</ul>

<p>これらを満たすために、</p>

<ul>
    <li>都度、複数のHTMLを編集するのではなく、スタッフから受け取ったデータ（JSON）からHTMLを生成する。</li>
    <li>サーバサイドスクリプトが使えないので、ローカルで生成する。</li>
</ul>

<p>という方針を定め、様々な技術を使って実現しました。</p>

<h2>活用した技術</h2>

<p>コンテンツ自体にもHTML5をはじめとした最新技術が使われていますが、制作面においても、最新のツールを駆使して効率化を図りました。</p>

<h3>Canvasを使ったインタラクティブな背景</h3>

<p>サイト全体にタイルをモチーフとした背景を採用していて、PCでご覧頂くと、マウスの動きに合わせてハイライトとされ、タイルが微妙に移動していることがわかるかと思います。この背景部分は、Canvas
で描画しています。PC向けにはタイルは固定幅ですが、タブレット向けでは画面幅に合わせてタイル幅を調整しています。また、Canvasの処理部分には<a href="http://www.createjs.com/#!/CreateJS" title="CreateJS" target="_blank" data-wpel-link="external" rel="follow external noopener noreferrer">CreateJS</a>を使用しています。</p>

<h3>CSSによるスムーズなインタラクション</h3>

<p><a href="http://tech.rakuten.co.jp/" title="Rakuten Technology Conference 2013 のトップページ" target="_blank" data-wpel-link="external" rel="follow external noopener noreferrer">トップページ</a>の「M」のタイルをクリックすると、実行委員長からのメッセージが表示されます。このとき、委員長の顔のタイルが拡張して、それに合わせて他のタイルが追いやられるようなアニメーションを行っています。この動きはCSSによって実現されていて、スマートフォンでも同様に動きます。これ以外にも、様々な場面でCSSによるアニメーションを使用しています。</p>

<h3>スマートフォン最適化とレスポンシブWebデザイン</h3>

<p>当日会場でスマートフォンからタイムテーブルを確認することを考慮し、スマートフォン対応をしました。タイムテーブルは縦横に長いコンテンツのため、スマートフォンとの相性は悪いのですが、時間帯ごとに横スクロールするようにして、閲覧性を確保しました。</p>

<p>各デバイスへの対応は、レスポンシブWebデザインで行いました。PCとスマートフォンでレイアウトが大きく異なるので、かなり苦戦しました。</p>

<p><a href="http://www.slideshare.net/rakutentech/tech-conf2013e2/92" target="_blank" data-wpel-link="external" rel="follow external noopener noreferrer"><img src="/wp-content/uploads/2013/12/Screen-Shot-2013-11-25-at-2.34.58-PM-300x224.png" alt="ページの幅ごとのレイアウト" width="300" height="224" class="aligncenter size-medium wp-image-3387" style="border:1px solid gray" srcset="/wp-content/uploads/2013/12/Screen-Shot-2013-11-25-at-2.34.58-PM-300x224.png 300w, /wp-content/uploads/2013/12/Screen-Shot-2013-11-25-at-2.34.58-PM-207x154.png 207w, /wp-content/uploads/2013/12/Screen-Shot-2013-11-25-at-2.34.58-PM.png 640w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>

<p>また、それぞれの表示ごとにJavaScriptの処理も異なっているため、ウィンドウ幅を監視して、表示の切り替わり時にそれぞれ適切な処理を実行するような仕組みも取り入れました。</p>

<h3>お気に入りのセッションをブックマークできるWeb Storage</h3>

<p>タイムテーブルで、お気に入りのセッションをブックマークできる機能を追加しました。ブックマークするとブラウザのlocalStorageに保存され、いつでもお気に入りのセッションだけを表示できます。</p>

<p>また、ページ上部のSpeakersやUpdatesの部分に、赤枠の数字が表示されますが、これは、前回閲覧したときのデータをlocalStorageに保持し、今回読み込んだデータ数の差を表示して、何件更新されたかを示しています（表示すると消えます）。</p>

<p><a href="http://www.slideshare.net/rakutentech/tech-conf2013e2/116" target="_blank" data-wpel-link="external" rel="follow external noopener noreferrer"><img src="/wp-content/uploads/2013/12/Screen-Shot-2013-11-27-at-10.57.51-AM-300x224.png" alt="Notification feature の説明図" width="300" height="224" class="aligncenter size-medium wp-image-3391" style="border:1px solid gray" srcset="/wp-content/uploads/2013/12/Screen-Shot-2013-11-27-at-10.57.51-AM-300x224.png 300w, /wp-content/uploads/2013/12/Screen-Shot-2013-11-27-at-10.57.51-AM-207x154.png 207w, /wp-content/uploads/2013/12/Screen-Shot-2013-11-27-at-10.57.51-AM.png 640w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>

<p>PCで登録したブックマークをカンファレンス当日にスマートフォンで呼び出せるように、URLでその情報を引き継げるようにはしていたのですが、UIを提供できませんでした。来年はその辺りも提供できればと思っています。</p>

<h3>PhantomJS + UnderscoreJSで更新負荷を下げる</h3>

<p><a href="http://phantomjs.org/" title="PhantomJS" target="_blank" data-wpel-link="external" rel="follow external noopener noreferrer">PhantomJS</a>は、コマンドラインから呼び出せるWebKitエンジンで、今回は、テンプレートとデータからHTMLを生成する処理で利用しました。テンプレートエンジンは<a href="http://underscorejs.org/" title="Underscore.js" target="_blank" data-wpel-link="external" rel="follow external noopener noreferrer">Underscore.js</a>を利用しました。</p>

<p>講演者の情報やセッションの時間などの情報は開催日まで頻繁に更新があり、その度にHTMLを修正しているとかなりの手間となります。そのため、それらの情報をまとめるカンファレンススタッフに、データをJSON形式で記述して納品してもらうようにしました。納品されたJSONファイルをUnderscore.jsでテンプレートに適用して、HTMLを出力しました。</p>

<p>データは構造化されているため、例えばタイムテーブルのデータを更新すると、タイムテーブルだけではなく、その講演者のページの情報も同時に変更されます。また、セッションの場所の名称が変更されたときも、１箇所修正するだけで、すべての名称が新しいものに置き換わります。</p>

<p><a href="http://www.slideshare.net/rakutentech/tech-conf2013e2/139" target="_blank" data-wpel-link="external" rel="follow external noopener noreferrer"><img src="/wp-content/uploads/2013/12/Screen-Shot-2013-11-25-at-2.13.39-PM-300x225.png" alt="What&#039;s PhantomJS? の説明図" width="300" height="225" class="aligncenter size-medium wp-image-3393" style="border:1px solid gray" srcset="/wp-content/uploads/2013/12/Screen-Shot-2013-11-25-at-2.13.39-PM-300x225.png 300w, /wp-content/uploads/2013/12/Screen-Shot-2013-11-25-at-2.13.39-PM-207x155.png 207w, /wp-content/uploads/2013/12/Screen-Shot-2013-11-25-at-2.13.39-PM.png 640w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>

<h3>レスポンシブ対応がシンプルに記述できるSass / Compass</h3>

<p>CSSの生成には、おなじみ<a href="http://sass-lang.com/" title="Sass" target="_blank" data-wpel-link="external" rel="follow external noopener noreferrer">Sass</a>と<a href="http://compass-style.org/" title="Compass" target="_blank" data-wpel-link="external" rel="follow external noopener noreferrer">Compass</a>を使用しました。Sass内でif文を使って各デバイスの判定ができるようにして、レスポンシブ対応がシンプルに記述できました。</p>

<p><a href="http://www.slideshare.net/rakutentech/tech-conf2013e2/99" target="_blank" data-wpel-link="external" rel="follow external noopener noreferrer"><img src="/wp-content/uploads/2013/12/Screen-Shot-2013-11-25-at-2.23.10-PM-300x224.png" alt="Coding into Condition branch の説明図" width="300" height="224" class="aligncenter size-medium wp-image-3395" style="border:1px solid gray" srcset="/wp-content/uploads/2013/12/Screen-Shot-2013-11-25-at-2.23.10-PM-300x224.png 300w, /wp-content/uploads/2013/12/Screen-Shot-2013-11-25-at-2.23.10-PM-207x154.png 207w, /wp-content/uploads/2013/12/Screen-Shot-2013-11-25-at-2.23.10-PM.png 640w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>

<h3>Gruntによる処理の自動化</h3>

<p>PhantomJSでのHTMLの生成、Sass/Compassのコンパイル、ファイル操作などは<a href="http://gruntjs.com/" title="Grunt" target="_blank" data-wpel-link="external" rel="follow external noopener noreferrer">Grunt</a>を使い自動化しました。PhantomJSの呼び出し部分は、いいモジュールを見つけられなかったため、シェルコマンドを呼び出すタスクを書きました。</p>

<p><a href="http://www.slideshare.net/rakutentech/tech-conf2013e2/127" target="_blank" data-wpel-link="external" rel="follow external noopener noreferrer"><img src="/wp-content/uploads/2013/12/Screen-Shot-2013-11-25-at-2.26.25-PM-300x224.png" alt="Tools and flow の説明図" width="300" height="224" class="aligncenter size-medium wp-image-3397" style="border:1px solid gray" srcset="/wp-content/uploads/2013/12/Screen-Shot-2013-11-25-at-2.26.25-PM-300x224.png 300w, /wp-content/uploads/2013/12/Screen-Shot-2013-11-25-at-2.26.25-PM-207x154.png 207w, /wp-content/uploads/2013/12/Screen-Shot-2013-11-25-at-2.26.25-PM.png 640w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>

<p>このように、目的に合わせた最新技術に挑戦して、今回の「Rakuten Technology Conference 2013」のサイトを作り上げていて、私たちも様々な収穫がありました。まだ、パフォーマンスやユーザビリティなどで不十分な点もあるので、今後の課題として取り組みたいと思っています。</p>

<p>また、「サーバでスクリプト使えなくても、ローカルでRubyやPHPとか使えば楽じゃね？」という話もありますが（汗）、そこは我々「HTML5 Project Team」ということで、今回はフロントエンドの技術だけにこだわってみました。来年は、NodeベースのWebサーバに移行して、より簡単にサイトを更新できるようなことも考えています。</p>

<p>今後もこのような挑戦を続け、そこで得ていく知見を楽天のサービスに活かして行きたいと思っています。またこのような形で、いつもお世話になっているコミュニティにも還元できれば幸いです。今後ともよろしくお願いします。</p>

<p>このセッションのビデオは<a href="http://www.youtube.com/watch?v=BgCdgkHEn8M" title="YouTubeにアップ" target="_blank" data-wpel-link="external" rel="follow external noopener noreferrer">YouTubeにアップ</a>されており、使ったスライドも<a href="http://www.slideshare.net/rakutentech/tech-conf2013e2" title="SlideShareで公開" target="_blank" data-wpel-link="external" rel="follow external noopener noreferrer">SlideShareで公開</a>されています。もしよろしければそちらもご覧ください。</p>

<div style="float:left">

<!-- iframe plugin v.4.3 wordpress.org/plugins/iframe/ -->
<iframe width="398" height="224" src="//www.youtube.com/embed/BgCdgkHEn8M?rel=0" frameborder="0" 0="allowfullscreen" scrolling="yes" class="iframe-class"></iframe>

</div>

<div>

<!-- iframe plugin v.4.3 wordpress.org/plugins/iframe/ -->
<iframe src="http://www.slideshare.net/slideshow/embed_code/28399053" width="264" height="224" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" style="border:1px solid #CCC;border-width:1px 1px 0;margin-bottom:5px" 0="allowfullscreen" class="iframe-class"></iframe>

</div>

<div style="clear:both"></div>
]]></content:encoded>
			</item>
	</channel>
</rss>
