SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

アイデアをすぐ形に! K5 Playgroundで開発するクラウドネイティブな最新Webアプリ(AD)

Webブラウザで「SPA+BFF」アプリを30分で作成! スピーディな開発の味方「K5 Playground」を使ってみよう

アイデアをすぐ形に! K5 Playgroundで開発するクラウドネイティブな最新Webアプリ 第2回

  • X ポスト
  • このエントリーをはてなブックマークに追加

K5 Playgroundを始めてみよう(2)

WebAPI編集画面

 WebAPI編集画面ではバックエンドのWebAPIの名称変更や新規追加が行えます。WebAPIの名称を変更するには、WebAPI名のテキストフィールドを直接編集します。編集すると左メニューのWebAPI名が変更されます。

WebAPI名の変更
WebAPI名の変更

 WebAPIを新規追加するには「Create a New WebAPI」の入力欄にWebAPIの名称を入力します。入力後に、GET、POST、PUT、DELETEのトグルボタンが表示されるので、追加したいメソッドをONにします。WebAPIを追加すると、左メニューの最下部に表示されます。

新しいWebAPIのを追加
新しい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を実行したりできます。

SPAの画面(左)、BFFのAPIコンソールの画面(右)
       SPAの画面(左)             BFFのAPIコンソールの画面(右)    

K5 Playgroundを使ったアプリ開発の考え方

 さて、これまででK5 Playgroundの操作方法を簡単に見てきました。では実際にどういった考え方でアプリを作るとよいのでしょうか。あくまでも一例ですが、アプリの作例を交えて簡単に紹介します。

①バックエンドのデータを表示する

 最もシンプルなアプリは、バックエンドのデータを表示させるだけのアプリです。バックエンドとしては、データベースやオブジェクトストレージ、InstagramやTwitterといったSNS、YoutubeやFlickrといった動画や写真サイトが考えられます。

 K5 Playgroundの一覧・詳細形式のテンプレート「Simple Search」は、デフォルトではMongoDBのAPIロジックを使っています。例えばこのMongoDBのAPIロジックを、YoutubeのAPIロジックに切り替えれば、Youtube動画のポータルサイトが作れます。下図は特定のゲームの動画だけを表示するシンプルなアプリです。

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の会話の統計情報を取得して、ダッシュボードに表示させます。

SlackやLINEの統計ダッシュボード
SlackやLINEの統計ダッシュボード

④バックエンドのサービスの比較検討

 データベースなどバックエンドのサービスを自由に選択できます。以下はチャットテンプレートのデータベース操作個所のAPIロジックをMongoDB、Firebase、PostgreSQLと交換して、異なるデータベースのチャットアプリを短時間で作成した例です。

 利用するサービスを選定する際には、机上操作だけでなく実際に使用して使い勝手を評価することも重要です。実際のアプリケーションを通して類似のサービスを比較検証実施することも、K5 Playgroundを使えばスピーディに行えます。

異なるデータベースを利用したチャットサービス
異なるデータベースを利用したチャットサービス

⑤データのビジュアライゼーション

 地図上に情報を表示するような、ビジュアライゼーション系のアプリは作る機会が多いと思います。以下はYahoo! Weather APIを使って、店舗や出張先など業務に関連する場所の気象情報を地図上に表示するシンプルなアプリです。データ可視化系のツールと異なり、一般的なWebアプリであるため、単なる可視化にとどまらないインタラクティブなアプリやサービスへと育てあげることも可能です。

天候管理サービス
   天候管理サービス(左)             Instagramの写真を表示(右)  

 ここで紹介した考え方はごく一部ですが、1種類のテンプレートでもやり方次第でさまざまな応用が利くことがわかったかと思います。また、React+FluxのSPAとNode.jsのAPIサーバという形式なので、アプリの自由度は無限大です。

次のページ
「K5 Showcase~アプリ開発のレシピ集~」を活用しよう

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
アイデアをすぐ形に! K5 Playgroundで開発するクラウドネイティブな最新Webアプリ連載記事一覧

もっと読む

この記事の著者

藤田 壮吉(富士通株式会社)(フジタソウキチ)

 富士通株式会社に入社後、会計ERP、機械学習、WebAPI、フロントエンド関連の開発に従事。企画・開発・教育・講演まで幅広く活動している。

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

【AD】本記事の内容は記事掲載開始時点のものです 企画・制作 株式会社翔泳社

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/10635 2018/02/20 14:44

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング