CodeZine(コードジン)

特集ページ一覧

トレンドは優れたUXとSPA・BFF! 急成長企業の最新フロントエンド開発を体験しよう

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

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

目次

SPAとBFFを誰でもすぐに始められるK5 Playground

 富士通は、SPAとBFFをWebブラウザ上で作ってダウンロードできるサービスとして「K5 Playground」を始めました。Webブラウザさえあれば誰でも無償で始めることができます。Raspberry PiやArduinoには、初学者が簡単に開発を始められるよう本体にさまざまな部品と簡単な入門書が同梱されたスターターキットがありますが、そのWebアプリ版の位置付けです。入門書に当たるものとして、アプリ開発のレシピサイト「K5 Showcase」も用意しました。

3ステップでWebアプリを開発できるK5 Playground
3ステップでWebアプリを開発できるK5 Playground

典型的なUIパターンをReactとFluxで実装して提供

 K5 Playgroundでは、さまざまなサービスの分析結果から頻出するUIの構造を抽出し、Reactと「Flux(UI構築のためのアーキテクチャ)」を用いたSPAとして実装しています。異なる目的のサービスであってもUIの基本構造は類似しているケースが多く、よく使うパターンをテンプレート化しています。

 現在は、カードUIや地図、チャット、ダッシュボード、カメラなど7種類のテンプレートがあり、これらのSPAは、Webブラウザ上でカスタマイズできます。UI部品のカラーテーマやフォントはK5 Playground上の左セクションにある「Theme」のドロップダウンリストで、UI部品やレイアウトは右セクションのUI内部の「EDIT」ボタンをクリックすることで交換できます。

作りたいアプリに応じて好きなUIパターンのテンプレートを選択
作りたいアプリに応じて好きなUIパターンのテンプレートを選択
デザインやUI部品を簡単にカスタマイズ
デザインやUI部品を簡単にカスタマイズ

マイクロサービス連携ロジックを組み合わせてBFFを開発

 BFFは、さまざまなマイクロサービスを集約してSPAに提供します。K5 Playgroundでは、RDB、NoSQL、メール・SMS、LINE、Slack、IFTTT、Twitter、Instagram、YouTubeなどのサービスと連携するための「APIロジック」を約70種類用意しています。APIロジックを一覧からドラッグ&ドロップして組み合わせることで、独自の処理をスピーディに作成できます。

ドラッグ&ドロップでAPIロジックを簡単に追加
ドラッグ&ドロップでAPIロジックを簡単に追加

料理のようにWebアプリ開発を~K5 Showcase

 初めての料理を作るときは、「クックパッド」などのインターネットのレシピサイトを参照するでしょう。K5 Showcaseは、そうした料理のレシピサイトのアプリ開発版で、アプリの概要とともに開発に必要な時間や具体的な手順を掲載しています。

 初心者は、「何から手をつけてよいかわからない」「手順がわからない」といった状況に陥りがちです。こういった悩みを解決し、「誰でも」「等しく」「簡単に」アプリ開発を完了できるようにすることが、K5 Showcaseの役割です。K5 Showcaseのレシピをもとに基本的なアプリ開発をマスターした後は、バリエーションを加えてオリジナル料理を作るように、自由に機能を追加して自分好みのアプリに育ててみましょう。

 現在は、LINEやFacebook Messenger用のチャットボット、Slackなど特定サービスの管理ダッシュボード、画像認識機能付きのアルバムアプリなど、20分から1時間程度で作れる学習用のWebアプリのレシピを約10種類提供しており、今後も追加していきます。現在は英語のみの提供ですが、2018年1月には日本語化を予定しています。

アプリ開発のレシピを提供する~K5 Showcase
アプリ開発のレシピを提供する~K5 Showcase

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

バックナンバー

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

著者プロフィール

あなたにオススメ

All contents copyright © 2005-2021 Shoeisha Co., Ltd. All rights reserved. ver.1.5