<p>エンジニアの<a href="https://twitter.com/jumpei_ikegami">gami</a>です。<a href="https://twitter.com/search?vertical=default&amp;q=%23%E3%81%97%E3%81%8C%E3%81%AA%E3%81%84%E3%83%A9%E3%82%B8%E3%82%AA&amp;src=tyah">趣味はポッドキャスト配信</a>です。</p>
<p>今回は、「<a href="https://nodejs.org/">Node.js</a>」に焦点を当てた記事です。</p>
<p><a href="https://plaid.co.jp/">PLAID</a>では、約5年前から「<a href="https://karte.io/">KARTE</a>」というサービスを開発しています。そのサーバーサイドの実装は、ほとんどがNode.jsで記述されています。</p>
<p>一方、国内企業の中で、サーバーサイド実装にNode.jsを採用している企業は少ない印象があります。<br>
そこで、以下についてご紹介します。</p>
<ol>
<li>PLAIDがNode.jsで実現しているプロダクト</li>
<li>Node.jsを5年間使ってわかった強みと弱点</li>
<li>Node.jsを使いこなすための工夫</li>
</ol>
<h1>1. PLAIDがNode.jsで実現しているプロダクト</h1>
<p>実際にPLAIDがどのようにNode.jsを使っているかを紹介します。PLAIDでは、「リアルタイムユーザー解析サービス」であるKARTEを主に開発しているので、KARTEの開発について説明します。</p>
<h2>プロダクトの規模</h2>
<p>まずは前提として、KARTEのプロダクトとしての規模がわかるデータを紹介します。</p>
<h3>リクエスト数、イベント数</h3>
<p>KARTEが解析しているデータの規模感は、2018年8月現在の値でおよそ以下の通りです。</p>
<ul>
<li>最大 約20,000 イベント/秒</li>
<li>最大 約10億 イベント/日</li>
</ul>
<p>KARTEが扱うユーザー情報は、「イベント」という単位で連携、解析されます。エンドユーザーのブラウザから飛んでくるリクエストの中に、1つ以上のイベントが含まれています。<br>
1日で10億回ものユーザー解析を処理しているので、かなり「大規模」と言えるかと思います。</p>
<h3>ファイル数</h3>
<p>KARTEのメインのリポジトリのうち、Node.jsで書かれたサーバーサイドの実装に関するファイルの数と行数をカウントすると、以下の結果になりました。</p>
<ul>
<li>ファイル数
<ul>
<li>1,759ファイル</li>
</ul>
</li>
<li>行数
<ul>
<li>126,256行</li>
</ul>
</li>
</ul>
<p>（マイグレーションバッチ、テストコード、空行、コメント行などは除く）</p>
<p>他にも、一部の独自ライブラリはリポジトリを分けて開発しているので、それを加えるともう少し大きくなります。</p>
<h2>実現している機能</h2>
<p>以下の図がKARTEの大まかな構成図です。</p>
<p><img src="https://ik.imagekit.io/newt/61b151f921640c0018173598/1e0a1a17-d440-48a9-988a-55b9a5058519/----------2018-08-15-14.41.54-1.png" alt="----------2018-08-15-14.41.54-1"></p>
<p>今後の説明のために、ざっと解説します。</p>
<h3>track/analyze（エンドユーザーの解析とデータ送受信）</h3>
<p>KARTEでは、解析対象のサイトにタグ（ネイティブアプリならSDK）を設置してもらいます。<br>
そこから送られるイベントをリクエストとして受け取り解析をするのが、「track」と「analyze」です。</p>
<ul>
<li>タグやSDKからイベントデータを受信
<ul>
<li>エンドユーザーのセグメントを解析</li>
</ul>
</li>
<li>1秒以内にエンドユーザーにポップアップなどの最適なアクションを送信</li>
<li>レスポンス後の処理も含めて、ユーザーデータを再計算</li>
</ul>
<p>特に、エンドユーザーからのリクエストに対してポップアップなどの最適なアクションを1秒以内に返す必要があり、高いパフォーマンスが求められる部分です。後述するように、NodeのClusterモジュールを使って負荷分散しています。</p>
<p>なお、KARTEではエンドユーザーから送られるイベントデータのスキーマをほとんど決めていないため、大量のスキーマレスなJSONデータを受け取る必要があります。Node.jsはJSONデータの取り回しが楽である反面、大規模なJSONを大量に扱うというCPUインテンシブな処理が苦手なのが悩みです。</p>
<h3>admin（クライアントに管理画面を提供）</h3>
<p>「admin」では、管理画面上でユーザーデータを閲覧できる機能等を提供しています。</p>
<ul>
<li>ルーティング
<ul>
<li>(SPA部分はvue-routerに任せる)</li>
</ul>
</li>
<li>設定値などを保存するMongoDBの操作
<ul>
<li>スキーマ定義</li>
<li>read/write</li>
</ul>
</li>
<li>フロントエンドから叩くRPC APIの提供</li>
</ul>
<p>KARTEではスキーマレスなNoSQL DBである「<a href="https://www.mongodb.com/">MongoDB</a>」を多用しています。MongoDBはほぼJSONライクなドキュメントを扱うので、Node.jsとの相性はかなりよく、DB周りの処理を自然に書くことができます。</p>
<p>主に実現している機能は以上です。</p>
<p>KARTEは「単純なWebサーバーとしての機能」だけではなく、「エンドユーザーの解析機能」をプロダクトのコアとして提供しています。その両方の機能について、特に言語を分けずに全てNode.jsで記述しています。</p>
<p>なお、システムの全体像や解析サービスを実現するGCPの活用方法については、PLAIDのエンジニア陣が執筆した以下の記事をご覧ください。</p>
<p><a href="https://codezine.jp/article/corner/711">大規模解析サービスを支えるGCP活用事例連載一覧：CodeZine</a></p>
<p><a href="https://codezine.jp/article/corner/711"><img src="https://ik.imagekit.io/newt/61b151f921640c0018173598/d31e904e-3650-45c6-9e29-730796f284af/----------2018-08-17-12.09.24.png" alt="----------2018-08-17-12.09.24"></a></p>
<h2>言語（AltJS）</h2>
<p>言語については、場所によって使い分けています。</p>
<ul>
<li>解析部分
<ul>
<li><a href="https://www.typescriptlang.org/">TypeScript</a></li>
</ul>
</li>
<li>その他
<ul>
<li>ES6</li>
<li><a href="https://coffeescript.org/">CoffeeScript</a>（一部）</li>
</ul>
</li>
</ul>
<p>解析エンジン部分だけは、固めに書きたいのでTypeScriptを使っています。大半のソースコードは、開発速度を優先して生のJavaScriptで記述しています。</p>
<p>元々はCoffeeScriptを使っていたのですが、世の多くの会社がそうであるように、Pure JavaScriptの機能強化に伴い、徐々に書き換えを進めています。</p>
<h2>フレームワーク、ライブラリ</h2>
<p>主に以下を使っています。（挙げるとキリがないので、だいぶ削っています）</p>
<ul>
<li><a href="http://expressjs.com/">Express.js</a>
<ul>
<li>薄いので拡張しやすい</li>
</ul>
</li>
<li><a href="https://lodash.com/">Lodash</a>
<ul>
<li>主に複雑なオブジェクトの操作で利用</li>
</ul>
</li>
<li><a href="https://caolan.github.io/async/">async</a>
<ul>
<li>非同期処理を連続/並列で実行するときに便利</li>
</ul>
</li>
<li><a href="http://mongoosejs.com/">Mongoose</a>
<ul>
<li>MongoDB用のODM（Object Document Mapper）</li>
</ul>
</li>
<li><a href="https://www.npmjs.com/package/cron">cron</a>
<ul>
<li>定期バッチの実行</li>
</ul>
</li>
<li><a href="http://plaidev.github.io/bolt-rpc/">bolt-rpc</a>
<ul>
<li>PLAID独自RPCライブラリ
<ul>
<li>OSSとして公開中</li>
</ul>
</li>
<li>内部で<a href="https://socket.io/">socket.io</a>を利用</li>
<li>Node.jsで記述</li>
</ul>
</li>
<li><a href="/webdb-forum-2016/">Brook</a>
<ul>
<li>PLAIDの独自解析エンジン</li>
<li>Node.jsで記述</li>
</ul>
</li>
</ul>
<h1>2. Node.jsを5年間使ってわかった強みと弱点</h1>
<p>上述したKARTEの実装を日々書いているPLAIDのエンジニアに、Node.jsのメリットとデメリットを訊いてみました。カテゴリ別に整理します。</p>
<h2>ノンブロッキング/イベントループ</h2>
<h3>強み</h3>
<p>Node.jsの良く知られたメリットは、KARTEの開発でも享受できています。</p>
<ul>
<li>大量のリクエストが来ても、パフォーマンスが低下しにくい</li>
</ul>
<h3>弱点</h3>
<p>逆に、非同期処理を多用するため、例外発生時やプロファイルをするときに問題の箇所を特定するのが難しかったり、そもそも記述が複雑になりやすかったりします。</p>
<ul>
<li>例外が起こったときのデバッグがキツい</li>
<li>プロファイルむずすぎ</li>
<li>非同期処理がわかりにくい</li>
</ul>
<h2>シングルスレッド</h2>
<h3>強み</h3>
<p>シングルスレッドであることで設計がシンプルになりやすい点は、意外とメリットを感じる点です。</p>
<ul>
<li>コンテキストスイッチによるパフォーマンス低下を防げる</li>
<li>ハードな制約なので、message queueなどを使って綺麗にプロセス分離したシンプルな設計になりやすい</li>
</ul>
<h3>弱点</h3>
<p>やはりCPUバウンドな処理が苦手な点が大きな弱点です。特に弊社の場合は大規模なJSONを扱うことが多く、JSONのパージングが同一スレッドで起きることでブロックされることに悩まされたりしています。</p>
<ul>
<li>シングルスレッド・マルチプロセスの癖/限界</li>
<li>シングルスレッドなのでハングすることがたまにあるし、原因特定が難しい</li>
<li>CPUをゴリゴリ使う処理とは相性が悪い</li>
</ul>
<h2>言語としての性質</h2>
<h3>強み</h3>
<p>特にPLAIDではフロントエンド/サーバーサイドでエンジニアを分けずに開発しているので、どちらも同じ言語で書けるというメリットは大きいです。</p>
<ul>
<li>フロントとサーバーサイドを同じ言語で書けるのでスイッチングコスト低い</li>
<li>JSONをそのまま扱える</li>
<li>非同期処理が簡単に書ける</li>
<li>決まりごとが少なく、用途が自由</li>
</ul>
<h3>弱点</h3>
<p>逆に、Node.js自体が自由すぎて起こる問題もあります。なお、一部では前述のようにTypeScriptを導入しています。</p>
<ul>
<li>シンプル過ぎるので、ファイル構成からコードの書き方まで混乱しがち</li>
<li>typoなどで実行時エラーが起こる</li>
<li>型が弱い</li>
</ul>
<h2>npm/エコシステム</h2>
<h3>強み</h3>
<p>大量のnpmライブラリがOSSとして公開されていて、CTO曰く「センスがいいモジュールが多い」ということです。</p>
<p>また、Node.jsが使っているJavaScriptエンジンであるV8の進化が早く、Node.jsのバージョンを上げただけでパフォーマンスが大幅に向上したことがあります。過去にはKARTEでも、Node.jsのバージョンを6から8に上げたとき、パフォーマンスが2倍以上上がった例がありました。</p>
<ul>
<li>ミニマムでセンスがいいライブラリが多い印象</li>
<li>GoogleがV8をどんどん進化させてくれる</li>
<li>Express.jsがシンプルで良い</li>
</ul>
<h3>弱点</h3>
<p>反面、npm自体のバグや依存性解決の難しさで時間を溶かすことも多かったです。依存性解決については、以前<a href="/npm-to-yarn/">このブログでも紹介</a>しています。ただし、npmのバージョンアップで徐々に解消されつつあります。</p>
<ul>
<li>npmのバグが多い</li>
<li>node_moduleの依存関係周りが辛い</li>
</ul>
<h1>3. Node.jsを使いこなすための工夫</h1>
<p>大規模で高いパフォーマンス要求を求められるプロダクトの実現や、Node.jsの弱点の補完のために実施していることをいくつか紹介します。</p>
<h2>Node.jsのClusterモジュールによる負荷分散</h2>
<p>KARTEでは最大で1秒間に数千リクエストを処理する必要があります。ただし、通常は1つのポートにアクセスできるプロセスは1つだけであり、そこがボトルネックになってしまいます。</p>
<p>そこで、Node.jsのClusterモジュールを使うことで、Cluster内に組み込まれたロードバランサが、リクエスト処理を複数のワーカープロセスに分割してくれます。これにより、CPUのコア数を最大限活かすことができます。</p>
<p>KARTEでは、特にtrackのパフォーマンス向上に役立っています。</p>
<h2>perfコマンドとFlameGraphを使ったCPUプロファイル</h2>
<p>CPU使用率が急上昇したときに、どの処理が重いのかを調べるため、CPUのプロファイリングをすることは多いと思います。しかし一部のプロファイリング用のライブラリは実際にコードの中に組み込むため、アプリケーション自体のパフォーマンスに影響する可能性があります。</p>
<p>そこで、perfコマンドで外側からプロファイルを取ることで、パフォーマンスにほぼ影響を与えずにCPUリソースを無駄に使っている関数を特定できるようにしています。</p>
<p>Node.jsでperfを使ったプロファイルを実現するには、<code>--perf-basic-prof-only-functions</code>などのプロファイル用のオプションを起動時に付ける必要があります。オプションを付けるとperf用の<code>.map</code>ファイルを吐いてくれます。</p>
<p>プロファイル結果は、<a href="https://github.com/brendangregg/FlameGraph">このライブラリ</a>を使ってFlameGraphとして出力しています。FlameGraphというのは、こういうやつです。</p>
<p><img src="https://ik.imagekit.io/newt/61b151f921640c0018173598/7b6c3bea-7c5f-4c82-8ce8-d67603d64957/----------2018-08-17-11.23.12.png" alt="----------2018-08-17-11.23.12"></p>
<p>出典: <a href="https://nodejs.org/en/blog/uncategorized/profiling-node-js/">Profiling Node.js | Node.js</a></p>
<p>使いどころとしては、hubotのコマンド経由でいつでも実行できるようにしている他、特定のインスタンスについて自動でプロファイル結果を出力するようにしています。KARTEではDatadogで各インスタンスのパフォーマンスを監視していますが、パフォーマンスが出ないインスタンスは自動で殺すようにしています。後からその原因を追いたい場合に備えて、殺す前に自動でperfコマンドを実行してプロファイルをしています。</p>
<p>なお、KARTEを支える監視サービスと構成については、以下の記事をご覧ください。</p>
<p><a href="https://codezine.jp/article/detail/10674">大規模解析サービスを支える監視サービスと監視構成のポイント | CodeZine（コードジン）</a></p>
<h2>マルチスレッド処理へ</h2>
<p>Node.jsは基本的にシングルスレッドで動作するので、特にCPUインテンシブな処理が苦手です。KARTEではスキーマレスな構造データを大量に行うため、その点がボトルネックになりやすいのが悩みでした。</p>
<p>Node.jsでもマルチスレッド処理がしたいという熱い想いは、弊社エンジニアの牧野が以前ブログで書いています。</p>
<p><a href="https://tech.plaid.co.jp/js_multi_threading/">MicrosoftのNapa.jsでJavaScriptをマルチスレッド化する | PLAID engineer blog</a></p>
<p>Node.js v10.5.0からWorker Threadsが使えるようになったので、今後は一部の処理をそちらに置き換える計画を立てています。</p>
<h1>まとめ</h1>
<p>Node.jsを採用して5年間ほどKARTEの開発に使い続けましたが、特に「リアルタイムユーザー解析サービス」である特性上、その恩恵を受けることが多い。</p>
<p>また、Node.jsやV8の進化も早く、今後の発展が非常に楽しみです。</p>
<p>国内企業がプロダクションでNode.jsを採用する例はまだまだ少ないですが、とても強力な言語なのでぜひ使っていきましょう！</p>
<hr>
<p>リアルタイムユーザー解析プラットフォームの「<a href="https://karte.io/">KARTE</a>」を運営するプレイドでは、KARTEを使ってこんなアプリケーションが作りたい！ KARTE自体の開発に興味がある！というエンジニア（インターンも！）を募集しています。</p>
<p>詳しくは<a href="https://plaid.co.jp/recruit/engineer.html">弊社採用ページ</a>または<a href="https://www.wantedly.com/companies/plaid/projects">Wantedly</a>をご覧ください。 もしくはお気軽に、下記の「話を聞きに行きたい」ボタンを押してください！</p>
<div class="wantedly-visit-button" data-visit-button-id="lyE_IgY4VF5ukBo_EUKZLg" data-width="300" data-height="60"></div>
<script>
  (function(d, s, id) {
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) return;
      js = d.createElement(s); js.id = id;
      js.src = "https://platform.wantedly.com/visit_buttons/script.js";
      fjs.parentNode.insertBefore(js, fjs);
    }(document, "script", "wantedly-visit-buttons-wjs"));
</script>


Node.jsをリアルタイム解析サービスの開発で5年間使って知ったメリットやデメリットを紹介します。大規模な解析サービスをNode.jsで記述する上での工夫などについても解説しています。

PLAIDがNode.jsを採用し、5年間で12万行書いてわかったこと | PLAID engineer blog

PLAIDがNode.jsを採用し、5年間で12万行書いてわかったこと

<html><head></head><body><p>はじめまして。デザイナーの @kazutokojima です。<br>
KARTEを実際に利用されている方の目線でプロダクトの使い勝手や体験を良くしていく「Kaizen」チームとして活動しています。</p>
<p>今回は、昨今よく聞くコンピュテーショナルデザインの考え方とその取り組みについてお話します。</p>
<hr>
<h2 id="デザインの種類">デザインの種類</h2>
<p>「<strong>Design in Tech Report</strong>」については、2015年版の最初のレポートから読まれている方も多いと思います。</p>
<p>最近ではTHE GUILD勉強会「Design in Tech Report 2018 を読み解く」でも取り上げられました。<br>
今回の記事を書く上でとても参考になったのですが、その内容が<a href="https://goodpatch.com/blog/1st-design-in-tech-report-2018-the-guild/" target="_blank" rel="noreferrer">記事として公開</a>されていますので、もしまだお読みでない方はぜひ読んでみてくださいね。</p>
<p>さて、同レポートでは2016年版から「<strong>３つの種類のデザイン</strong>」が提唱されています。</p>
<iframe src="//www.slideshare.net/slideshow/embed_code/key/3XJKMfA5UIw6Rw?startSlide=47" width="595" height="485" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" style="border:1px solid #CCC; border-width:1px; margin-bottom:5px; max-width: 100%;" allowfullscreen=""> </iframe> <div style="margin-bottom:5px"> <strong> <a href="//www.slideshare.net/johnmaeda/design-in-tech-report-2016-59530038" title="Design In Tech Report 2016" target="_blank">Design In Tech Report 2016</a> </strong> from <strong><a href="//www.slideshare.net/johnmaeda" target="_blank">John Maeda</a></strong> </div>
<p>上記のスライドを参考にそれぞれ見てみましょう。</p>
<h4 id="クラシカルデザイン：">クラシカルデザイン：</h4>
<p>ロゴやポスターや建築、家具などデザイナー自身の意匠により最終的な完成品を仕上げることを目的としたデザインを指してそう呼んでいるようです。一般的に、他者への影響力や受賞歴など外部的な要因が成果となるようです。</p>
<h4 id="デザイン思考：">デザイン思考：</h4>
<p>同レポートではユーザーニーズ（共感）からビジネス上の課題（バイアス）を見つけ出し問題解決するために用いるプロトコル（手順）を指してそう呼んでるように思います。クラシカルデザインとは対象に、複数のステークホルダーとの合意形成など内部的な要因が成果となることが多いです。</p>
<h4 id="コンピュテーショナルデザイン：">コンピュテーショナルデザイン：</h4>
<p>本来は設計などの知的作業をコンピューターに任せる新しいデザイン手法を指すようですが、同レポートでは利用環境や利用者数などの違いからクラシカルデザインと対比して、永遠に持続することを目的としたデザインというように捉えることができると思います。常に変わり続けて完成しないため、成長を続けていることだけが成果と言えるかもしれません。</p>
<br>
<br>
と、同レポートに記載されている内容を書き出してみました。
<p>それぞれのデザインの違いと、コンピュテーショナルデザインをどういう文脈で語ろうとしているかについてはご察しいただけたかと思いますが、これだけでは「コンピュテーショナルデザイン」がどういうものかまだピンと来ないですね。</p>
<p>では、どういう文脈でコンピュテーショナルデザインを語ろうとしているかという前提が共有できたものとして、今回の記事の本題に入っていきたいと思います。</p>
<hr>
<h2 id="デザインのScaleの関係">デザインのScaleの関係</h2>
<p>ここから今回の記事の主張に入っていきたいと思います。</p>
<p>さきほどのスライドの図では、よく見ると3つの種類のデザインを「<strong>Scale</strong>」という横軸をとって並べています。<br>
その関係性を知ることで、コンピュテーショナルデザインをより立体的に理解出来るようになります。</p>
<p>では、「クラシカルデザイン」→「デザイン思考」→「コンピュテーショナルデザイン」のScaleの関係を整理してみましょう。</p>
<p><img src="https://ik.imagekit.io/newt/61b151f921640c0018173598/8fcd9593-d113-418d-938e-7571482ff9d2/Untitled---New-frame--2-.jpg" alt="Untitled---New-frame--2-"></p>
<h5 id="→ クラシカルデザイン">→ クラシカルデザイン</h5>
<p>クラシカルデザインで重要なポイントとして「デザインをモノに定着させること」が挙げられます。<br>
デザイナー自身の意匠により見た人にとって良いと思えるような完成品に仕上げることはデザインにとって最重要と言えます。</p>
<p>まずは、クラシカルデザインのキーワードを「<strong>定着</strong>」としてみます。</p>
<h5 id="クラシカルデザイン → デザイン思考">クラシカルデザイン → デザイン思考</h5>
<p>本来の「クラシカルデザイン」は才能ある個人による専門領域と言えますが、徐々にチームで対抗するプロセスが生まれていきます。自身の発想に依るのではなく、他者のニーズから着眼点を得る手法は今日ユーザー中心デザインなどと呼ばれています。</p>
<p>天才でなくともよいデザインが生み出せるようになり製品・サービスのコモディティ化が進むと、クラシカルデザインで言う「定着」作業の前段階においてさらに大きな視点で考えよう、という流れが出てきます。</p>
<p>そして、ユーザー中心にビジネス全体を考える「デザイン思考」が大きく注目されます。<br>
デザイン思考を広めたとされるIDEOのCEOティム・ブラウンは以下のように述べています。</p>
<blockquote>
<p>デザイナーの感性と手法を用いて、顧客価値と市場機会の創出をはかるもの</p>
</blockquote>
<p>デザイン思考は、「定着」作業を除くユーザー中心のクラシカルデザインのプロセスと同じと言えます。<br>
クラシカルデザインとの親和性はもちろん、デザイナーだけでは困難な規模の「発想」が出来るようになった点に「クラシカルデザイン→デザイン思考」のScaleの関係性をとることが出来ます。</p>
<h5 id="デザイン思考 → コンピュテーショナルデザイン">デザイン思考 → コンピュテーショナルデザイン</h5>
<p>クラシカルデザインとデザイン思考が深く結びついたことで、製品やサービスの品質は今まで以上に向上しています。</p>
<p>ただ、近年スマートフォンなどのテクノロジーが急速に発展を遂げながら個人に行き渡り、たくさんの人たちのコンテクストが実データとして得られるようになると、ユーザー中心に課題を捉えて解決策を形にするというプロトコルは、ユーザーからの情報量の増加に対してアウトプットのスピードが足りない、という事態に陥っているように捉えられるようになります。</p>
<p>そうなると、1つのモノに関わる利用者数の増加やテクノロジーの進歩に対して、ユーザーのニーズを満たす製品・サービスを提供するための考え方が必要とされるようになります。</p>
<p>そして、コンピュテーショナルデザインがそれにあたるのではないか、と同レポートからは受け取れるように思います。コンピュテーショナルデザインの核が、完成を求めず常に進化を続けることなら、別の言い方をすると、持続可能性を担保することとも表現できます。</p>
<p>それを「デザイン思考→コンピュテーショナルデザイン」のScaleにあてはめて考えると、デザイン思考で得た「発想」を「持続」して成長させ続けることができる関係が見えてきます。</p>
<br>
<br>
こうしてScaleの関係を整理してみると、3つの種類のデザインには密接な関わりがあり、またそれぞれのデザインへの取り組みが製品やサービスを大きく成長させるために必要だと言えることがわかりました。
<p>KARTEという自社のプロダクトに関わり、大きく成長しようとしている今、まさにこのコンピュテーショナルデザインの「持続」という考え方がぴったりとハマるように思います。そうすると、それをどのように実行していくのかが重要になってきます。</p>
<p>では、コンピュテーショナルデザインの取り組みへの第一歩として、KARTEで具体的にどのようなアプローチを進めているのかを見ていきましょう。</p>
<hr>
<h2 id="コンピュテーショナルデザインの第一歩">コンピュテーショナルデザインの第一歩</h2>
<p>「発想」を「持続」するために何から始めると良さそうか。</p>
<p>デザイン思考のScaleとしてコンピュテーショナルデザインを捉えると、製品やプロダクトのデザイン面だけの成長だけでなく、中期・長期的には組織の成長にも適用していけるように思います。</p>
<p>私個人としては、コンピュテーショナルデザインへの第一歩は将来的には組織・チームとしての持続性の醸成につなげていくためのものと考えています。</p>
<p>少しづつコンピュテーショナルデザイン的な考え方を広げていくために、個人規模で出来ることから探ってみます。<br>
まず、デザイン思考で上手く行かない部分からきっかけを見つけようと思います。</p>
<p>デザイン思考で「発想」し続けることが難しいと思われる理由に、ユーザー中心デザインの核とも言える「ペルソナ」が機能しないと思える点が多いことが挙げられます。</p>
<p>事実、KARTEのプロダクトにおいても業種や役職など多種多様で、チーム内でのブレない人物像を作り上げることは非常に困難なことです。仮に時間をかけて作成したとして、そのペルソナの行動の背後にある状況については推測が多くなるのが実際で、実データを原動力とするコンピュテーショナルデザインにおいては推測する時点ですでに不適合だと感じてしまいます。</p>
<p>ペルソナが上手く機能しづらい「事実」や「スピード」の要素を補完する他の方法はないかと検索していると、<a href="https://www.intercom.com/blog/using-job-stories-design-features-ui-ux/" target="_blank" rel="noreferrer">こちらの記事</a>で「<strong>Job Story</strong>」という手法の存在を知りました。</p>
<p>記事の主旨は、ペルソナを使用するユーザーストーリーの代替として、ユーザーのジョブに着目したJob Storyの利点についての説明になります。ジョブという言葉が示すように、クレイトン・Ｍ・クリステンセン氏のJTBDの考え方をベースとしているようです。</p>
<p><img src="https://ik.imagekit.io/newt/61b151f921640c0018173598/550204c1-a2a9-481f-ae28-8f71e07b462e/Untitled---New-frame--1-.jpg" alt="Untitled---New-frame--1-"></p>
<p>ユーザーストーリーは、ユーザーが実現したいことやユーザーにとって価値があることを簡潔にまとめた文章のことで、アジャイル開発などでよく使われるモデリングの手法のようです。短い期間でイテレーションをまわすアジャイル開発において、ユーザーストーリーはそれ自体が機能要件として扱われることもあるようです。</p>
<p>対してジョブストーリーは、アジャイル開発におけるユーザーストーリーの機能的な側面を持ちつつ、ペルソナなどの推測部分を取り除くことで、ストーリーの因果関係をより明確にすることが出来ると説明されています。</p>
<p>両者の違いとして前者は「誰の」視点なのかにフォーカスしているのに対し、後者は「どういう時に」という状況にフォーカスを置いています。</p>
<p><img src="https://ik.imagekit.io/newt/61b151f921640c0018173598/3dd5c4a9-5675-428c-9bef-b01326cd5398/Untitled---New-frame--5-.jpg" alt="Untitled---New-frame--5-"></p>
<p>具体的にどういう違いがあるかを書いて比べてみます。</p>
<p><strong>ユーザーストーリー：</strong></p>
<ol>
<li>マーケターとして</li>
<li>ユーザーの個別の行動を知りたい</li>
<li>だからKARTEを使う</li>
</ol>
<p><strong>ジョブストーリー：</strong></p>
<ol>
<li>ユーザー獲得もいよいよ天井が見えてきて、ユーザーごとの売上を伸ばすのが重要になってきた</li>
<li>ユーザーの個別の行動を知りたい</li>
<li>だからユーザーに対して個別にアクションを行え、LTVを高めやすいKARTEを使う</li>
</ol>
<p>あくまで例ですが、フォーカスを置く対象が変わることで、前提条件との因果関係がよりはっきりするように思います。また、同じような規模のサービスが似た状況にあるだろうことも事実に基づいて考えることが出来ます。KARTEで言えば、「似た状況にあるサービスの数」×「LTVを高めるためのアイデアのインパクト」から優先度の決定までスムーズに行えそうです。</p>
<p>「Job Story」であれば、事実に基づき素早く判断して製品やサービスの成長を「持続」させることが出来そうなので、まずは下記の要望・フィードバックフォームを作成するところから始めました。</p>
<img src="https://ik.imagekit.io/newt/61b151f921640c0018173598/65513e5f-0e46-46aa-9f92-148a3924ca2a/----------2018-08-06-22.05.32.png" width="50%">
<p>最初ということもありわりと忠実にJob Storyを再現しています。<br>
当初は本当に和訳に近い形式で制作していたのですが、チームのメンバーにレビューを受ける中で日本語との違いや、文章の理解にブレが生じやすいことがわかったので、何度か修正を繰り返してこのフォーマットにしています。</p>
<p>現在は、このフォームを手始めに、いくつかある要望やフィードバックを受け付ける際のフォーマットを同じようなものに統一していきたいと考えています。また、チーム内でもジョブの考え方が広まってきており、少しづつユーザーの状況にフォーカスする取り組みが増えてきています。</p>
<p>直近は、ユーザーからの要望やフィードバックに細かな粒度で個別に素早く対応することになると思いますが、このようなフォーマットで要望やフィードバックを積み重ねていけば、本質的な改善を事実に基づいてブレのない状態でチームとしてこなせるようになるのではないかと期待しています。</p>
<p>事実に基づいていれば情報や判断に迷いが無くなるので当然スピードも上がります。また、足し算的な修正ではなく、引き算を含めた本来の意味での改善にも根拠を持って取り組めるようになります。</p>
<p>こうして、コンピュテーショナルデザインの言う常に変わり続けることを「持続」し続ける状態を生み出し、さらにこの繰り返しがやがて本来の意味でのコンピュテーショナルデザインに合流できれば良いなと思います。</p>
<h2 id="終わりに">終わりに</h2>
<p>というわけで、自分なりの考えでコンピュテーショナルデザインの第一歩に「Job Story」を選び、実際にトライをしてみている、というお話でした。</p>
<p>ネット上では、「ペルソナに変えてJTBDモデルにしよう」という記事もたくさん見かけまし、それがベースとなっている「Job Story」自体は非常に有効なのではないかと思っています。</p>
<p>とはいえ、今回ご紹介した要望やフィードバックの集め方は遅効性の高い取り組みで、コンピュテーショナルデザインに求められるデータ駆動のスピードを獲得するにはまだまだ時間がかかりそうに思います。まだまだ工夫が必要そうです。</p>
<p>この記事を読んで、興味を持つきっかけや何かの助けになりましたら幸いです。</p>
<hr>
<p>CX（顧客体験）プラットフォーム「<a href="https://karte.io/" target="_blank" rel="noreferrer">KARTE</a>」を運営するプレイドでは、KARTEを使ってこんなアプリケーションが作りたい！ KARTE自体のデザインに興味がある！というデザイナーを募集しています。</p>
<p>詳しくは <a href="https://plaid.co.jp/recruit.html#designer" target="_blank" rel="noreferrer">弊社採用ページ</a><br>
または <a href="https://www.wantedly.com/companies/plaid/projects" target="_blank" rel="noreferrer">Wantedly</a></p>
<p>をご覧ください。</p>
<p>もしくはお気軽に、下記の「話を聞きに行きたい」ボタンを押してください！</p>
<div class="wantedly-visit-button" data-visit-button-id="lyE_IgY4VF5ukBo_EUKZLg" data-width="300" data-height="60"></div>
<script>
  (function(d, s, id) {
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) return;
      js = d.createElement(s); js.id = id;
      js.src = "https://platform.wantedly.com/visit_buttons/script.js";
      fjs.parentNode.insertBefore(js, fjs);
    }(document, "script", "wantedly-visit-buttons-wjs"));
</script>
<hr>
<p>最後までお読みいただきありがとうございました!</p>
</body></html>

スケールには必要？コンピュテーショナルデザインの考え方とその取り組み

<p>はじめまして。プレイドの @tomoponzoo です。<br>
2018年4月に入社、現在プレイド暦4ヶ月目のエンジニアです。<br>
プレイドでは、今年の3月にローンチした「<a href="https://karte.io/product/app/">KARTE for App</a>」のモバイルSDK開発をメインで担当しております。</p>
<p>開発に携わって4ヶ月が経ちましたが、今でもSDKをリリースする際は緊張してしまいます。それはSDKに非常に高いレベルの品質が求められるからです。</p>
<p>今回は、SDK開発の勘所や品質の重要性、仮にSDKで問題が発生してもアプリを絶対に死なせないための方法について考えていきたいと思います。</p>
<h2>SDK開発の勘所 - 品質の重要性</h2>
<p>冒頭で述べた通り、非常に高いレベルの品質が求められるSDKですが、それはなぜでしょうか？</p>
<p>仮に低品質なSDKを組み込んだ時に起こり得ることについて、想定してみます。</p>
<ul>
<li>アプリがクラッシュするなどの問題が頻発</li>
<li>アプリクラッシュにより、エンドユーザーの体験が悪化</li>
<li>エンドユーザーの体験が悪化することにより、クライアントのビジネスに悪影響を及ぼす</li>
<li>最終的には自らのビジネスも毀損する</li>
</ul>
<p>以上のように考えると、なぜSDKに高い品質が求められるのか理解できると思います。</p>
<p>このように高いレベルの品質が求められるSDKですが、開発するためには、エンジニアの想像力や品質への拘りが重要になります。これは非常に大変ですが奥深く面白い部分でもあります。</p>
<h2>品質維持のためのアプローチ</h2>
<p>では、高い品質の維持、また万が一問題が発生したときに影響を最小限に抑えるためにどんなことができるでしょうか？</p>
<ul>
<li>問題を起こさない仕組みを整える
<ul>
<li>ソースコードレビューの実施</li>
<li>テストの自動化</li>
</ul>
</li>
<li>問題が発生したときに影響を最小限に抑える仕組みを整える
<ul>
<li>確実なエラーハンドル</li>
<li>プロセス分離</li>
</ul>
</li>
</ul>
<p>このように品質維持のためのアプローチは様々ですが、今回は表題にもあるとおり、堅牢なSDKを実現するための方法として「プロセス分離」について考えてみます。</p>
<h2>堅牢なSDKを目指す！</h2>
<p>プロセス分離 - これはアプリケーションのプロセスと、SDKのプロセスを分離することです。<br>
プロセスを分けることで、仮にSDKのプロセスがクラッシュしたとしても、アプリケーションのプロセスには影響を与えず、処理を継続することが可能になります。</p>
<p>なお本質的には、SDKがクラッシュしないように実装すべきです。<br>
ただし人間が作る以上、バグが入り込む可能性は0ではありません。もちろんバグが入り込まないように様々な対策を行うわけですが、それらをすり抜けバグが入り込む可能性は否定できません。<br>
万が一の事態におけるフェイルセーフとしてプロセス分離を活用すべきです。</p>
<p>ちなみに、iOSプラットフォームにおいてプロセス分離を行うのは至難の業です。というのも通常のアプリケーションからはプロセスを自由に生成することができません。そのため今回はその制限の中でどうやってプロセス分離を実現するか試行錯誤しながら考えていきたいと思います。</p>
<h2>マルチプロセス（プロセス分離）を実現するための手段</h2>
<p>では、マルチプロセスを実現する場合にどんな手段があるでしょうか？<br>
パッと思いつくものを列挙してみました。</p>
<ul>
<li>fork</li>
<li>App Extension</li>
</ul>
<h2>forkとは？</h2>
<p>あまりにも有名で説明は不要かと思いますが、forkはUNIXシステムにおけるシステムコールのひとつです。<br>
forkを使うことで、これを呼び出したプロセスのコピーを生成することができます。</p>
<p>iOSは、UNIX系システムのひとつであるため、forkを使うことが可能です。</p>
<h2>forkを試す</h2>
<p>では、早速forkを使ってプロセスの生成ができるか試してみたいと思います。<br>
まずXcodeで適当なプロジェクトを作成、<code>main.c</code> を以下のように修正し、シミュレーターで実行してみます。<br>
うまく行けば、子プロセスが作成されプロセス分離への道が開けます。</p>
<pre><code class="language-obj-c">int main(int argc, char * argv[]) {
  pid_t pid = fork();
  if (pid == -1) {
    NSLog(@&quot;fork() failed&quot;);
  } else if (pid) {
    NSLog(@&quot;[Parent] PID: %d, PPID: %d&quot;, getpid(), getppid());
  } else {
    NSLog(@&quot;[Child]  PID: %d, PPID: %d&quot;, getpid(), getppid());
  }
}
</code></pre>
<pre><code class="language-plaintext">2018-07-28 17:35:45.858546+0900 MultiProc[39705:13798053] [Child]  PID: 39705, PPID: 39702
2018-07-28 17:35:45.858704+0900 MultiProc[39702:13797947] [Parent] PID: 39702, PPID: 39703
</code></pre>
<p>おっ！意外にも、あっさりプロセスの生成ができてしまいました。<br>
子プロセスの親プロセスIDを確認すると、親プロセスのIDと一致しており、親子関係があることが確認できます。</p>
<p>同じことを実機を使ってやってみたいと思います。</p>
<pre><code class="language-plaintext">2018-07-28 18:17:47.617257+0900 MultiProc[4926:1877048] fork() failed
</code></pre>
<p>今度は失敗しました。<br>
iOSでは、アプリケーションの<a href="https://developer.apple.com/jp/documentation/iPhone/Conceptual/iPhoneOSProgrammingGuide/BackgroundExecution/BackgroundExecution.html">バックグラウンド実行</a>にかなりの制限があります。そのため独自にプロセスを生成して動かすこと自体不可能なのでは？と思っていましたが、やはり当初の想定通りダメなようです。</p>
<h2>App Extensionとは</h2>
<p>forkがダメだったので、もうひとつのアプローチについて考えてみます。</p>
<p>App Extensionですが、 <a href="https://developer.apple.com/jp/documentation/General/Conceptual/ExtensibilityPG/index.html">App Extensionプログラミングガイド</a>で説明されている通り。<br>
iOSアプリケーションを拡張する仕組みのひとつです。アプリケーションとは分離された別のプロセスとして動作するのが特徴です。</p>
<p>アプリケーションを拡張するために用意された仕組みであるため、通常はAppleが用意した拡張ポイントに対応するExtensionしか開発できません。<br>
今回は、プロセス分離を実現すべく非公開の拡張ポイントを利用して独自のExtensionを作ってみます。</p>
<h2>App Extensionの仕組み</h2>
<p>独自のExtensionを作る前に、Extensionの仕組みについてみておきます。</p>
<p><strong>Extensionのライフサイクル</strong><br>
通常は停止しています。<br>
アプリケーションからのリクエストに応じて起動し、処理を実行、最後に結果をレスポンスし、終了する流れになります。</p>
<p><strong>Extensionとのやりとり</strong><br>
アプリケーションとExtension間のやりとりには、XPCと呼ばれる仕組みが利用されており、シリアライズしたプロパティリストをやりとりすることでプロセス間通信が実現されています。<br>
なお実際にやりとりを行う際は、XPCをラップしたNSExtensionと呼ばれる非公開クラスを利用して、やりとりを行うことになります。</p>
<p><img src="https://ik.imagekit.io/newt/61b151f921640c0018173598/1704575d-34af-4e4b-a1da-d28ace594fa2/extension.png" alt="extension"></p>
<h2>App Extensionを作る</h2>
<p><strong>注意！！！<br>
App Extensionの作成過程で非公開APIを利用しています。<br>
非公開APIを利用した場合、審査でリジェクトされる可能性がありますのでご注意ください。</strong></p>
<p>では、Extensionを作っていきましょう。<br>
適当なプロジェクトを1個作成しておきます。</p>
<h4>1. App Extensionを作成</h4>
<p>任意のテンプレートを利用してExtensionを作成します。</p>
<h4>2. App Extensionの設定を修正</h4>
<p>Info.plistにExtensionの拡張ポイントや主要クラスの設定があるので、以下のように修正します。</p>
<pre><code class="language-xml">&lt;key&gt;NSExtension&lt;/key&gt;
&lt;dict&gt;
　&lt;key&gt;NSExtensionPointIdentifier&lt;/key&gt;
　&lt;string&gt;com.apple.app.non-ui-extension&lt;/string&gt;
　&lt;key&gt;NSExtensionPrincipalClass&lt;/key&gt;
　&lt;string&gt;Extension&lt;/string&gt;
&lt;/dict&gt;
</code></pre>
<h4>3. 非公開APIのインターフェースを定義</h4>
<p>NSExtensionは非公開のAPIです。<br>
利用するためには、APIに対応するヘッダーファイルを各々で用意する必要があります。</p>
<p>なお非公開APIのインターフェースを調べるには、<a href="http://stevenygard.com/projects/class-dump/">class-dump</a>などのツールを利用します。</p>
<p>今回は、以下のようなヘッダーファイルを作ります。</p>
<pre><code class="language-obj-c">@interface NSExtension : NSObject
+ (instancetype)extensionWithIdentifier:(NSString *)identifier error:(NSError **)error;

- (void)beginExtensionRequestWithInputItems:(NSArray *)inputItems completion:(void (^)(NSUUID *requestIdentifier))completion;
- (int)pidForRequestIdentifier:(NSUUID *)requestIdentifier;
- (void)cancelExtensionRequestWithIdentifier:(NSUUID *)requestIdentifier;

- (void)setRequestCancellationBlock:(void (^)(NSUUID *uuid, NSError *error))cancellationBlock;
- (void)setRequestCompletionBlock:(void (^)(NSUUID *uuid, NSArray *extensionItems))completionBlock;
- (void)setRequestInterruptionBlock:(void (^)(NSUUID *uuid))interruptionBlock;
@end
</code></pre>
<h4>4. ホストアプリケーションを実装</h4>
<p>Extensionとプロセス間通信を行うために、NSExtensionクラスのインスタンスを生成し、リクエスト処理やレスポンス処理を実装します。</p>
<p><strong>NSExtensionインスタンスの生成</strong></p>
<pre><code class="language-obj-c">NSExtension *extension = [NSExtension extensionWithIdentifier:@&quot;jp.co.plaid.MultiProc.Extension&quot; error:nil];

[extension setRequestCompletionBlock:^(NSUUID *uuid, NSArray *extensionItems) {
　　// リクエスト完了
　　NSLog(@&quot;Request completed: %@&quot;, uuid);
}];
</code></pre>
<p><strong>Extensionにリクエストする</strong></p>
<pre><code class="language-obj-c">NSExtensionItem *item = [[NSExtensionItem alloc] init];
[item setAttachments:@[@&quot;VALUE&quot;]];

[extension beginExtensionRequestWithInputItems:@[item] completion:^(NSUUID *requestIdentifier) {
　　int pid = [extension pidForRequestIdentifier:requestIdentifier];
　　NSLog(@&quot;Began extension request: %@. Extension PID: %i&quot;, requestIdentifier, pid);
}];
</code></pre>
<h4>5. Extensionを実装</h4>
<p>ヘッダーファイルを修正します。<br>
Extensionクラスが<a href="https://developer.apple.com/documentation/foundation/nsextensionrequesthandling?language=objc">NSExtensionRequestHandling</a>プロトコルに適合することを宣言します。</p>
<pre><code class="language-obj-c">@interface Extension : NSObject &lt;NSExtensionRequestHandling&gt;
@end
</code></pre>
<p>実装ファイルを修正し、NSExtensionRequestHandlingプロトコルに適合させます。</p>
<pre><code class="language-obj-c">@implementation Extension
- (void)beginRequestWithExtensionContext:(NSExtensionContext *)context {
　　// レスポンスを返す
　　[context completeRequestReturningItems:@[] completionHandler:^(BOOL expired) {
　　　　NSLog(@&quot;Completed request.&quot;);
　　}];
}
@end
</code></pre>
<h2>App Extensionを動かしてみる</h2>
<p>ここまでできたらシミュレーターで実行してみます。<br>
以下のようなログが出ればOKです。<br>
ホストアプリケーションのプロセスIDが74665、ExtensionのプロセスIDが74671となっており、それぞれ別のプロセスで動作していることが確認できます。</p>
<pre><code class="language-plaintext">2018-07-29 22:19:03.749751+0900 MultiProc[74665:14952372] App PID: 74665
2018-07-29 22:19:12.725051+0900 MultiProc[74665:14952478] Began extension request: 34E68F5B-520A-48EC-93EE-03599A310B24. Extension PID: 74671
2018-07-29 22:19:12.730459+0900 MultiProc[74665:14952478] Received response.
</code></pre>
<h2>App Extensionをクラッシュさせてみる</h2>
<p>さて、ここまで色々試してきましたが、ここで当初の目的である「SDKがクラッシュしても、アプリが絶対に死なない！」ことを確認してみたいと思います。</p>
<p>以下のように、Extensionをクラッシュさせるためのコードを入れて実行してみます。</p>
<pre><code class="language-obj-c">NSExtensionItem *inputItem = context.inputItems[1];
</code></pre>
<p>Extensionでは、NSRangeExceptionが発生しクラッシュしますが、アプリケーションは影響を受けず何事もなかったかのように動作しています。</p>
<h2>まとめ</h2>
<p>今回は「プロセス分離」という手段を用いて、堅牢なSDKを実現する方法とその可能性について探ってみました。</p>
<p>現状はプラットフォームとしての制約が大きく、また非公開APIを利用しないと実現できないなど、実際にプロダクトに適用するのは難しいということが分かりました。<br>
アプリケーションからプロセス生成できない理由として、端末の性能やリソース制約の問題が大きいと考えています。将来端末のリソース制約について考えなくて良くなった時には、このような手段も現実味を帯びてくるのではないかと思いました。</p>
<p>なお今回作成したアプリのソースコードは<a href="https://github.com/tomoponzoo/MultiProc">GitHub</a>で公開していますので、動作や実装が気になる方は、ぜひダウンロードして動かしてみてもらえればと思います。</p>
<h2>最後に</h2>
<p>CXプラットフォーム「<a href="https://karte.io/">KARTE</a>」を運営するプレイドでは、品質にこだわりたい！想像力をフルに発揮したい！モバイルエンジニア（インターンも！）を募集しています。<br>
詳しくは<a href="https://plaid.co.jp/recruit/engineer.html">弊社採用ページ</a><br>
または<a href="https://www.wantedly.com/companies/plaid/projects">Wantedly</a><br>
をご覧ください。 もしくはお気軽に、下記の「話を聞きに行きたい」ボタンを押してください！</p>
<div class="wantedly-visit-button" data-visit-button-id="lyE_IgY4VF5ukBo_EUKZLg" data-width="300" data-height="60"></div>
<script>
  (function(d, s, id) {
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) return;
      js = d.createElement(s); js.id = id;
      js.src = "https://platform.wantedly.com/visit_buttons/script.js";
      fjs.parentNode.insertBefore(js, fjs);
    }(document, "script", "wantedly-visit-buttons-wjs"));
</script>


はじめまして。プレイドの @tomoponzoo です。
今回は、SDK開発の勘所や品質の重要性、仮にSDKで問題が発生してもアプリを絶対に死なせないための方法について考えていきたいと思います。