Shoeisha Technology Media

CodeZine(コードジン)

記事種別から探す

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

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

  • LINEで送る
  • このエントリーをはてなブックマークに追加

目次

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の動画を検索するアプリ
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ロジックを交換することで異なるチャットアプリを作成できる
Facebook用とLINE用のチャットアプリ~バックエンドのAPIロジックを交換することで異なるチャットアプリを作成できる

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

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

Web Cameraテンプレートベースのアプリ
名称 目安時間 概要
カメラで写真を撮影して画像分析を行う
アルバムアプリを作る
60分   Webカメラで撮影した写真を保存する
アルバムアプリ。Google Cloud Visionによる
顔認識やロゴ認識などを行う。
端末のWebカメラを使って写真を撮影し、顔認識などを行うアプリ
端末の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 関連リンク



  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

バックナンバー

連載:アイデアをすぐ形に! K5 Playgroundで開発するクラウドネイティブな最新Webアプリ
All contents copyright © 2005-2018 Shoeisha Co., Ltd. All rights reserved. ver.1.5