K5 Playgroundを始めてみよう（2）
WebAPI編集画面
WebAPI編集画面ではバックエンドのWebAPIの名称変更や新規追加が行えます。WebAPIの名称を変更するには、WebAPI名のテキストフィールドを直接編集します。編集すると左メニューのWebAPI名が変更されます。
WebAPIを新規追加するには「Create a New WebAPI」の入力欄にWebAPIの名称を入力します。入力後に、GET、POST、PUT、DELETEのトグルボタンが表示されるので、追加したいメソッドをONにします。WebAPIを追加すると、左メニューの最下部に表示されます。
WebAPIの編集について具体例を挙げると、アプリにLINEやSlackからメッセージを受信する機能を追加したい場合、「webhook」等と入力してPOSTメソッドをオンにします。また別の例として、ニュースアプリに記事のお気に入りのON/OFF機能を追加したい場合、「favorites」と入力してPOST、DELETEをONにします。
アプリをダウンロードする
アプリが完成したら、ダウンロードします。左メニューの上部にある「DOWNLOAD」をクリックするとダイアログが表示されます。利用規約に同意したら左下のチェックボックスをオンにして、右下の「DOWNLOAD」ボタンをクリックすることでアプリをダウンロードできます。しばらく待つと、アプリのzipファイルがダウンロードされます。
ダウンロードしたzipファイルを展開すると、SPA用のファイルが格納された「frontend」とBFF用のファイルが格納された「backend」の2つのフォルダが作成されます。「frontend」フォルダには、ReactとFluxで実装されたSPAのコードや開発環境の設定が入っています。「backend」フォルダには、Node.jsで実装されたBFFのコードが格納されています。
具体的な起動方法は、READMEファイルやK5 Playgroundのドキュメントサイトに記載されていますが、次回の連載でも紹介します。
ローカルで手っ取り早く起動したい場合は、backend/config.jsにDBやサービス接続情報を記載して、frontendとbackendそれぞれで「npm install」と「npm start」を実行します。自動的にブラウザが起動してSPAの画面が表示されます。BFFのlocalhost:3000/docsにアクセスするとSwagger-UIによるAPIコンソールが表示されて、実際にAPIドキュメントを見たり直接APIを実行したりできます。
K5 Playgroundを使ったアプリ開発の考え方
さて、これまででK5 Playgroundの操作方法を簡単に見てきました。では実際にどういった考え方でアプリを作るとよいのでしょうか。あくまでも一例ですが、アプリの作例を交えて簡単に紹介します。
①バックエンドのデータを表示する
最もシンプルなアプリは、バックエンドのデータを表示させるだけのアプリです。バックエンドとしては、データベースやオブジェクトストレージ、InstagramやTwitterといったSNS、YoutubeやFlickrといった動画や写真サイトが考えられます。
K5 Playgroundの一覧・詳細形式のテンプレート「Simple Search」は、デフォルトではMongoDBのAPIロジックを使っています。例えばこのMongoDBのAPIロジックを、YoutubeのAPIロジックに切り替えれば、Youtube動画のポータルサイトが作れます。下図は特定のゲームの動画だけを表示するシンプルなアプリです。
Youtube動画のポータルサイト
Google検索やFlickrのAPIロジックに交換すれば、画像検索のサイトになります。K5のオブジェクト・ストレージのAPIロジックを使えば、ストレージに格納された画像を表示するアルバムアプリを作れます。
このように、バックエンドやデータの種類を交換することでさまざまなアプリを作れます。
②webhookでSlackやLINEと連携する
SlackやLINEのようなサービスをバックエンドとしたときには、どのようなアプリが作れるでしょうか。
1つの例が、SlackやLINEのwebhook機能と連携した監視サービスです。SlackやLINE、データベースのAPIロジックを使って、SlackやLINEに投稿されたメッセージを収集するバックエンドを作ります。これに機械学習のAPIロジックを加えて、盛り上がっている単語や不適切な投稿の検出機能を実装します。フロントエンドとしてチャットテンプレートを選択して、LINEの公式アカウントや組織のSlackチャネルなどに、投稿された内容をチャット形式で分析結果と共に表示させることができます。
③既存アプリへの機能追加
前述の方法でSlackやLINEへの投稿が格納されたデータベースが得られたら、投稿内容を統計解析したくなることでしょう。その場合、新たにダッシュボードテンプレートを使って別のアプリを作ります。データベースのAPIロジックで、すでにSlackのチャンネルやLINEの会話の統計情報を取得して、ダッシュボードに表示させます。
④バックエンドのサービスの比較検討
データベースなどバックエンドのサービスを自由に選択できます。以下はチャットテンプレートのデータベース操作個所のAPIロジックをMongoDB、Firebase、PostgreSQLと交換して、異なるデータベースのチャットアプリを短時間で作成した例です。
利用するサービスを選定する際には、机上操作だけでなく実際に使用して使い勝手を評価することも重要です。実際のアプリケーションを通して類似のサービスを比較検証実施することも、K5 Playgroundを使えばスピーディに行えます。
⑤データのビジュアライゼーション
地図上に情報を表示するような、ビジュアライゼーション系のアプリは作る機会が多いと思います。以下はYahoo! Weather APIを使って、店舗や出張先など業務に関連する場所の気象情報を地図上に表示するシンプルなアプリです。データ可視化系のツールと異なり、一般的なWebアプリであるため、単なる可視化にとどまらないインタラクティブなアプリやサービスへと育てあげることも可能です。
ここで紹介した考え方はごく一部ですが、1種類のテンプレートでもやり方次第でさまざまな応用が利くことがわかったかと思います。また、React＋FluxのSPAとNode.jsのAPIサーバという形式なので、アプリの自由度は無限大です。
