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

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

K5 Showcaseのレシピ一覧

　K5 Showcaseに掲載されている主なアプリを紹介します。現在は数10分で作れる練習用のアプリケーションを主に掲載しています。1つのテンプレートで広がるアプリ開発の可能性を、ぜひ確かめてください。

1．Simple Searchテンプレートベース

　一覧・詳細形式の「Simple Searchテンプレート」をもとに作成するアプリを紹介しています。APIロジックを標準のMongoDBからYouTubeやWikipediaに交換する方法が説明されています。Simple Searchテンプレートは購入機能を持つアプリを作るためにショッピングカート機能なども持っていて、実際にPayPalを使ってクレジットカードで支払う機能を追加する方法も説明しています。

Simple Searchテンプレートベースのアプリ

名称	目安時間	概要
YouTube動画のポータルサイトを作る	30分	YouTubeの動画を検索するアプリ
Wikipediaを検索するアプリを作る	30分	Wikipediaを検索するアプリ
K5 PlaygroundのショッピングアプリにPayPalを 使ってペイメント機能を追加する	30分	PayPalを使った、 シンプルなショッピングアプリ

YouTubeの動画を検索するアプリ

2．Form Searchテンプレートベースのアプリ

　検索・一覧・詳細形式の「Form Searchテンプレート」をベースとしたアプリが紹介されています。検索フォームの使い方やバックエンドの交換の方法を習得できます。

Form Searchテンプレートベースのアプリ

名称	目安時間	概要
GoogleやFlickrのAPIを使って画像を表示する ポータルサイトを作る	60分	GoogleまたはFlickrで画像を検索する

3．Chatテンプレートベース

　チャットアプリ開発を容易にする「Chatテンプレート」をベースとしたアプリが紹介されています。LINEのチャットボットを開発する方法、Firebase Realtime DatabaseやFacebook Messengerを使う方法などが紹介されています。チャットテンプレートに、人気の認証サービスAuth0を使ってログイン画面や機能をつける方法を説明していますが、チャットテンプレートのみならず、全てのテンプレートに応用できます。

Chatテンプレートベースのアプリ

名称	目安時間	概要
Facebookページ来訪者とチャットするアプリを 作る方法	30分	facebookの友だちとチャットを行うアプリ
Auth0でK5 Playgroundのチャットアプリに認証 機能をつける方法	60分	Auth0（認証基盤サービス）を使って ログイン機能を持つチャットアプリ
Firebase Realtime Databaseを使ってチャットアプリを作る	40分	Firebase Realtime Databaseを使った チャットアプリ
LINEのチャットボットやチャット画面を作る方法	60分	Line Messaging APIを使ったチャットボット

Facebook用とLINE用のチャットアプリ～バックエンドのAPIロジックを交換することで異なるチャットアプリを作成できる

4．Web Cameraテンプレートベース

　Webカメラで写真を撮ってSNSにアップする。そんなアプリを作るために利用できるのが、「Web Cameraテンプレート」です。K5 Showcaseでは、Web Cameraテンプレートを使い、撮影した写真をインターネット上のストレージにアップするアプリが紹介されています。このアプリでは、さらに顔認識やロゴ認識などさまざまな画像分析を行う機能も実装しています。

Web Cameraテンプレートベースのアプリ

名称	目安時間	概要
カメラで写真を撮影して画像分析を行う アルバムアプリを作る	60分	Webカメラで撮影した写真を保存する アルバムアプリ。Google Cloud Visionによる 顔認識やロゴ認識などを行う。

端末のWebカメラを使って写真を撮影し、顔認識などを行うアプリ

5．Mapテンプレートベース

　地図形式のアプリの作成に利用する「Mapテンプレート」をもとに、Instagramの投稿写真をGoogle Map上に表示するアプリが紹介されています。

Mapテンプレートベースのアプリ

名称	目安時間	概要
Google Mapsを用いたInstagramの ビジュアライゼーション	20分	Instagramの写真をGoogle Map上に表示する アプリ

6．Dashboardテンプレートベース

　ダッシュボード形式のアプリケーションを作るためのテンプレートです。例として、Slackに投稿されたメッセージの統計情報を表示するアプリが紹介されています。

Dashboardテンプレートベースのアプリ

名称	目安時間	概要
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を体験してみましょう。

K5 Playground 関連リンク

• K5 Playgroundで、頭の中のアプリをすぐカタチに。（紹介サイト・Webハンズオン）
• FUJITSU K5 Playground
• FUJITSU K5 Showcase
• FUJITSU Cloud Service K5