SPA＋BFFアプリ開発を手軽に始められるK5 Playground
K5 Playgroundは、フロントエンド初心者でも短時間でアプリを開発できるサービスです。
Webブラウザ上で、無償で体験することができます。連載の第1回でK5 Playgroundでは、クラウドを活用したSingle Page Application（SPA）とBackend For Frontends（BFF）を作れるスターターキットであることを手短に紹介しました。
まずは、K5 PlaygroundのSPAとBFFがどういったものなのかを、軽く振り返ってみましょう。
K5 PlaygroundのSPA
地図、チャット、ダッシュボード、一覧詳細形式など、Webアプリに頻出するUIパターンをテンプレートとして用意しています。
技術面では、これらのSPAはReactとFluxによって実装されています。ReactとはFacebook製のUIを作るためのエンジンで、Fluxも同じくFacebookが提唱したUI構築のためのアーキテクチャです。近年これらが、多数のサービスのフロントエンドで使われていることを前回の記事で紹介しました。
また、テンプレートに加えて、Babel、Webpack、ESLint、Prettier、JestといったSPAを開発する際に必要になってくる多数のツール群も、設定済みの状態で同梱されているので、一から準備する手間を省けます。
K5 PlaygroundのBFF
BFFとは、さまざまなマイクロサービスのトランザクションを集約するフロントエンドのためのバックエンドです。K5 PlaygroundではBFFを短時間で開発できるように、APIロジックと呼ばれるマイクロサービスと連携する部品を80種類ほど用意しています。
これを組み合わせてBFFを作ります。BFFはNode.jsで最も有名と思われるWebアプリケーションフレームワーク「Express」をベースとしたWebAPIサーバです。
K5 Playgroundは、こうしたSPAとBFFとマイクロサービスを組み合わせたWebアプリケーションをスピーディに作るためのスターターキットです。ゼロからこれらを開発するとしたら相当な労力と時間がかかり、途中で挫折してしまう人もいると思います。一方K5 Playgroundを使えば数10分〜数時間で、誰でも同じように完成まで到達できます。
3ステップでアプリを開発
では、K5 Playgroundでは実際どのようにアプリを開発するのでしょうか。次の3ステップがK5 Playgroundにおけるアプリ開発の流れです。
①フロントエンド（SPA）の編集
作りたいアプリに近いテンプレートを選択して、カスタマイズします。
②バックエンド（BFF）の編集
バックエンドのWebAPIが呼びだされた時の処理をカスタマイズします。用意されたAPIロジックを組み合わせて処理を作成します。
③アプリのダウンロード
作成したアプリをダウンロードして、ローカル環境やクラウドで起動します。
さて、大雑把な流れがわかったところで、K5 Playgroundをもう少し詳しく見てみましょう。
K5 Playgroundを始めてみよう
K5 Playgroundは、Webブラウザから操作します。Google ChromeまたはFirefoxの利用を推奨しています。
手軽にアプリ開発をスタートしよう
最初にK5 Playgroundのサイトにアクセスし、「無料ではじめる」ボタンをクリックします。
「GET STARTED」または右上の「APPS」をクリックすると、テンプレート一覧画面が表示されます。
トップ画面とテンプレート選択画面
現在提供されているテンプレートは次の7種類です。テンプレートは今後も追加・改良されます。
| テンプレート名 | 用途 |
|---|---|
| Simple Search |
一覧・詳細形式のアプリ 例）ショッピングアプリ、メディアアプリ、ポータルサイト |
| Form Search | 検索起点のアプリ 例）チケット検索、旅行サイト |
| Chart | グラフアプリ 例）SNSメッセージの統計 |
| Chat | チャットやメッセージングアプリ 例）チャットボット、カスタマーサポート |
| Dashboard | 管理画面やダッシュボード 例）統計アプリ |
| Map | 地図形式アプリ 例）気象情報アプリ |
| Web Camera | 端末のカメラを使うアプリ 例）機械学習の登録画面、画像認識、ゲーム |
フロントエンドやバックエンドを直感的に編集できる、アプリ開発画面
テンプレート右上の「CREATE NEW APP」をクリックすると、アプリ開発をスタートできます。新規にアプリを作成すると、アプリの開発画面が表示されます。
左メニュー
各種操作を行うためのメニューです。次のような項目があります。
①「DOWNLOAD」：作成したアプリをダウンロードできます。
②「App Info」：アプリ情報画面を表示します。
※アプリ情報画面：アプリの名前や詳細情報を変更できます。ここで編集した内容は、
ダウンロードしたファイルの名前やREADME等に反映されます。
③「WebAPIs」：WebAPI編集画面を表示します。
※WebAPI編集画面：バックエンドのWebAPIの新規追加や変更ができます。
④「Theme」：ドロップダウンリストで、フロントエンドの色やフォントを一括して変更できます。
⑤「Contents」：フロントエンド編集画面とバックエンド編集画面を表示します。
以降では、主な画面を説明します。
フロントエンド編集画面
フロントエンドをカスタマイズするための画面です。UI部品の右上にある緑色のボタンをクリックすると、UI部品をカスタマイズできます。さらに左メニューのThemeで色やフォントを変更すると、色やフォントを一括して変更できます。
バックエンド編集画面
バックエンドを開発するための画面です。中央ペインにはWebAPIが呼ばれた時の処理のフローが表示されています。フローは初期状態では「データベースからデータを取得してフロントエンドに返す」「モックデータを作成してフロントエンドに返す」といったシンプルなものが多いです。
次に右ペインを見てみましょう。右ペインにはAPIロジックが多数陳列されています。このAPIロジックは、ペインにドラッグ＆ドロップできます。
右ペインのAPIロジック（左） 中央ペインへのAPIロジック追加（右）
中央ペインの処理の流れは、ドラッグ＆ドロップによってAPIロジックを追加・順序交換したり、×ボタンによってAPIロジックを削除したりといった方法で、自由にカスタマイズできます。追加したAPIロジックのコードをカスタマイズしたい時は、直接クリックまたはEDITボタンで開くダイアログの中で編集できます。
APIロジックの編集を具体例で説明します。例えば一覧・詳細形式の「Simple Search」テンプレートでTwitterの検索結果をフロントエンドに表示させたい場合、デフォルトのMongoDBのAPIロジックを削除して、Twitter検索のAPIロジックをドラッグ&ドロップします。
また別の例として、投稿機能を持つアプリで「利用者の投稿をDBに保存する」処理があって、これに「禁止ワードを検出したらSlackに通知する」という機能を追加したい場合を考えてみます。この例の場合、DB保存処理の前もしくは後に、Slack通知のAPIロジックを追加します。前に追加すれば「禁止ワードを検出したらSlackに通知して、非表示フラグをつけてDBに保存する」といった処理にもできます。
このようにAPIロジックをうまく工夫して目的の処理を作りましょう。バックエンドの処理を作るためのAPIロジックは現在、次のような約80種類を用意していますが、今後も継続的に追加・改良する予定です。
| カテゴリ | APIロジックの概要 |
|---|---|
| Authentication | 認証認可サービスを利用する。 例）Auth0 |
| Custom | 汎用的に使用可能なAPIロジック。 例）Fujitsu Empty logic |
| Database | 各種データベースへのアクセスを可能にする。 例）MongoDB、Firebase Realtime Databases、PostgreSQLなど |
| Document Processing | テキスト解析を行う。 例）Google Cloud Natural Language |
| Email/SMS | 電子メールやSMSを送信する。 例）Twilio |
| Image Processing | 画像処理を行う。 例）Google Vision API |
| Messaging | 各種メッセージングサービスを利用する。 例）Slack、Facebook、LINE |
| News/Weather | ニュースや天気の情報を取得する。 例）Yahoo Weather API |
| Payments | 支払い処理を行う。 例）PayPal |
| Search | テキストや画像を検索する。 例）Google、Youtube、Wikipedia |
| SNS | SNSのデータを活用する。 例）Twitter、Instagram、Flickr |
| Storage | ストレージサービスを活用する。 例）Google Cloud Storage |
| Automation | 様々なサービスの連携を自動化する。 例）IFTTT |
| HTTP | 汎用的なHTTPリクエスト。 |
| K5 | K5の共通的な機能を利用する。 例）K5のトークン取得など |
| K5 Email | Emailを送信する。 例）テキストメール送信、HTMLメール送信 |
| K5 IoT | K5 IoTの機能を利用する。 例）IoTストレージへのCRUDやActionの受信 |
| K5 Zinrai | K5 Zinraiの機能を利用する。 例）自然言語解析 |
| K5 Object Storage | K5 Object Storageを利用する。 例）データのCRUD |
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サーバという形式なので、アプリの自由度は無限大です。
「K5 Showcase～アプリ開発のレシピ集～」を活用しよう
K5 Playground では、さまざまな考え方で柔軟にアプリが作れることを説明しましたが、具体的にどのような手順で操作すればよいのでしょうか。
そういった疑問に答えるために、アプリ開発のレシピ集「K5 Showcase」を用意しました。K5 Showcaseでは、料理のレシピサイトのように、興味のあるアプリの手順を参照しながらサクサク作れます。
K5 Showcaseは、K5 Playgroundのナビゲーションメニューの右上にあるボタン「SHOWCASE」をクリックすると表示されます。ブラウザの言語設定に応じて日本語もしくは英語でサイトが表示されます。
レシピの一覧
K5 Showcaseを開くと、K5 Playgroundを使って作成できるアプリの、レシピの一覧が表示されます。
①にレシピのタイトル、②に作成時間の目安、③にアプリの概要が表示されています。
K5 Showcaseの利用方法
一覧画面で興味のあるアプリをクリックすると、詳細画面に遷移します。
詳細画面には、以下の6つの項目があります。
①概要：アプリの機能、利用するAPIなど
②アプリの作成：K5 Playground上での操作手順
③アプリのカスタマイズ：アプリダウンロード後の編集手順
④アプリのデプロイ：K5のCloud Foundry（K5 CF）へのデプロイ方法
⑤ダウンロード：サンプルアプリをダウンロードできる
⑥バーション：使用するテンプレートのバージョン情報
①でアプリの主な機能や利用するサービスを確認できます。②ではK5 Playgroundをどのように操作してアプリを作成するか手順を説明しています。左メニューの「DOWNLOAD」でアプリをダウンロードした後、アプリのコードの修正が必要な場合には、③にその修正方法が記載されています。アプリが完成したら、④に記載されている方法に従って、アプリをデプロイします。
なお、⑤では、サンプルアプリをダウンロードすることができます。自らアプリを作成する前に、サンプルアプリをダウンロードし、④の方法でデプロイして、アプリの動作を確認するといったことも可能です。
K5 Showcaseのレシピ一覧
K5 Showcaseに掲載されている主なアプリを紹介します。現在は数10分で作れる練習用のアプリケーションを主に掲載しています。1つのテンプレートで広がるアプリ開発の可能性を、ぜひ確かめてください。
1．Simple Searchテンプレートベース
一覧・詳細形式の「Simple Searchテンプレート」をもとに作成するアプリを紹介しています。APIロジックを標準のMongoDBからYouTubeやWikipediaに交換する方法が説明されています。Simple Searchテンプレートは購入機能を持つアプリを作るためにショッピングカート機能なども持っていて、実際にPayPalを使ってクレジットカードで支払う機能を追加する方法も説明しています。
| 名称 | 目安時間 | 概要 |
|---|---|---|
| YouTube動画のポータルサイトを作る | 30分 | YouTubeの動画を検索するアプリ |
| Wikipediaを検索するアプリを作る | 30分 | Wikipediaを検索するアプリ |
|
K5 PlaygroundのショッピングアプリにPayPalを
使ってペイメント機能を追加する
|
30分 |
PayPalを使った、 シンプルなショッピングアプリ |
2．Form Searchテンプレートベースのアプリ
検索・一覧・詳細形式の「Form Searchテンプレート」をベースとしたアプリが紹介されています。検索フォームの使い方やバックエンドの交換の方法を習得できます。
| 名称 | 目安時間 | 概要 |
|---|---|---|
|
GoogleやFlickrのAPIを使って画像を表示する ポータルサイトを作る |
60分 | GoogleまたはFlickrで画像を検索する |
3．Chatテンプレートベース
チャットアプリ開発を容易にする「Chatテンプレート」をベースとしたアプリが紹介されています。LINEのチャットボットを開発する方法、Firebase Realtime DatabaseやFacebook Messengerを使う方法などが紹介されています。チャットテンプレートに、人気の認証サービスAuth0を使ってログイン画面や機能をつける方法を説明していますが、チャットテンプレートのみならず、全てのテンプレートに応用できます。
| 名称 | 目安時間 | 概要 |
|---|---|---|
|
Facebookページ来訪者とチャットするアプリを 作る方法 |
30分 | facebookの友だちとチャットを行うアプリ |
|
Auth0でK5 Playgroundのチャットアプリに認証 機能をつける方法 |
60分 |
Auth0（認証基盤サービス）を使って ログイン機能を持つチャットアプリ |
| Firebase Realtime Databaseを使ってチャットアプリを作る | 40分 |
Firebase Realtime Databaseを使った チャットアプリ |
| LINEのチャットボットやチャット画面を作る方法 | 60分 | Line Messaging APIを使ったチャットボット |
4．Web Cameraテンプレートベース
Webカメラで写真を撮ってSNSにアップする。そんなアプリを作るために利用できるのが、「Web Cameraテンプレート」です。K5 Showcaseでは、Web Cameraテンプレートを使い、撮影した写真をインターネット上のストレージにアップするアプリが紹介されています。このアプリでは、さらに顔認識やロゴ認識などさまざまな画像分析を行う機能も実装しています。
| 名称 | 目安時間 | 概要 |
|---|---|---|
|
カメラで写真を撮影して画像分析を行う アルバムアプリを作る |
60分 |
Webカメラで撮影した写真を保存する アルバムアプリ。Google Cloud Visionによる 顔認識やロゴ認識などを行う。 |
5．Mapテンプレートベース
地図形式のアプリの作成に利用する「Mapテンプレート」をもとに、Instagramの投稿写真をGoogle Map上に表示するアプリが紹介されています。
| 名称 | 目安時間 | 概要 |
|---|---|---|
|
Google Mapsを用いたInstagramの ビジュアライゼーション |
20分 |
Instagramの写真をGoogle Map上に表示する アプリ |
6．Dashboardテンプレートベース
ダッシュボード形式のアプリケーションを作るためのテンプレートです。例として、Slackに投稿されたメッセージの統計情報を表示するアプリが紹介されています。
| 名称 | 目安時間 | 概要 |
|---|---|---|
| Slackの投稿を分析する分析ダッシュボードを作る | 60分 | Slackのイベントを集計してグラフなどを表示するダッシュボードアプリ |
K5 Showcaseには今後もレシピを追加する予定です。まずはレシピ通りに作ってみて、慣れてきたら応用してオリジナルの創作料理を作ってみてください。
K5 PlaygroundでSPAとBFFを自由に組み合わせてアイデアを実現しよう
昨今の開発現場ではビジネスのニーズや技術の移り変わりが激しいため、多様なアイデアをユーザーの手に届くデモやプロトタイプの形で、短期間で開発しなければならないケースが増えています。一方で、フロントエンドの開発技術の専門性は高まっていて、ゼロからスタートするとかなりの時間と労力が必要になり、望ましい開発スピードが得られないといった課題があります。
開発スピード、特にイニシャルのスピードはとても重要で、組織で新しい試みを始めたいと思っても、実際に動くまで数ヶ月かかるとなるとハードルは高く、大抵の組織ではスタートすらできません。数週間だとしても相当な覚悟が必要になります。しかしながら、数10分〜半日で最低限動くものを作り余裕をみて改善、といったスタイルが実現できれば、失敗してもそれほど痛くはなく「とりあえず試しにやってみようか」という気にもなるので、「No」と言う人も少ないはずです。
K5 Playgroundは小さな単位の部品群を数多く取り揃えていて、積み木のように組み合わせることで、数10分でReact＋FluxのSPAや、Node.jsのBFFを作れます。用意された機能を組み合わせてスピーディに作れるので、時間と労力を削減して、新しい取り組みにトライする機会を増やしたり、早い段階からフィードバックをもらったりといったことができます。失敗してもよいので「とりあえず試しに」作ってみて、余裕に応じて小さな改善を重ねながらアイデアの価値を検証してみましょう。
また、現代のシステムは肥大化しているため、個々人が部分的にしか開発を担当したことがなく、一人ではアプリを完成させられないケースが多いことももう一つの課題です。いくらアイデアが湧いても少人数でフットワーク軽く形にできないようでは、組織の活力は失われ弱体化していきます。K5 Playgroundを利用して、規模の小さなアプリを作ることで、個々人がアイデアを形にする感触を掴めるようになり、数をこなすことでその力を鍛えることもできます。
このようにK5 Playgroundは、アイデアを検証可能な形にする機会や速度を改善するためのツールの1つです。今回の記事やK5 Showcaseを参考に上手く活用して、開発の現場を良い方向に変えていきましょう。
次回は、K5 Playgroundを使って具体的にアプリを作っていきます。世界遺産の情報やInstagramの投稿写真をGoogle Map上に表示する練習用のアプリの開発を通して、K5 Playgroundを体験してみましょう。
