SHOEISHA iD

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

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

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

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

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

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

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

次のページ
簡単だけど中身は本格派

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

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

もっと読む

この記事の著者

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

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

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

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

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

この記事をシェア

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

おすすめ

アクセスランキング

アクセスランキング

イベント

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

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

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

メールバックナンバー

アクセスランキング

アクセスランキング