React.jsでフロントエンド開発に革命！「K5 Playground」を使ってみた

こんにちは。teratail Report編集部です。

第9弾の今回は、React.js・Flux製のフロントエンドをGUIですばやくWebアプリケーションを生成できるサービス「K5 Playground」にフォーカス！デザイナーやバックエンドエンジニアが簡単に開発できる手順や使用感をご紹介すべく、ハンズオンイベントに潜入してきました。

さらに今回は、K5 Playgroundの開発者である藤田 壮吉氏にインタビューを実施！なぜ今フロントエンドなのか、これからどこを目指すのかなど、K5 Playgroundの開発に至る経緯やこれからの開発について伺ってきました。

日本のみならず、海外でも話題を集める最新サービスに注目です！

K5 Playgroundとは？

K5 Playgroundは富士通が提供する無料のWebアプリケーション開発ツールです。SNS連携、Map表示、LINE Chat BOTなど、汎用的なWebアプリケーションの機能と高品質なUIを、GUIですばやく作ることができます。

▲ K5 Playground 公式サイト

K5 Playgroundで生成されたソースコードをダウンロードし、K5 CFやK5 IaaSなどのクラウドサービスにホスティングすることですぐにWebアプリケーションをデプロイできます。

実際にK5 Playgroundの機能を体験！

「いったいどんなサービスで何ができるの？」と気になってきましたよね？そこで、富士通が開催した開発者向けイベント「MetaArc Developers Connect」で、バックエンドエンジニアの筆者が実際に体験してきました！ハンズオンで体験した実際の機能や使用感を紹介します。

イベントでは「Google Map × Instagram」連携のハンズオンを体験しましたが、Webハンズオンでは他にもLINE Chat Botとの連携やAPIとの連携が紹介されており、短時間でアプリケーションの作成方法を学ぶことができます。

▲ 「Google Map × Instagram」の例で構築するデモアプリケーションの構成イメージ

事前準備

今回のハンズオンでは下記を準備しました。

• ブラウザのインストール（Google Chrome又はFirefox）
• Node.jsのインストール
• Google Maps JavaScript APIキー
• Instagram APIアクセストークンの取得
• CFコマンドのインストール（CloudFoundryコマンド）

Node.jsの開発環境と連携したいサービスのトークン、クラウドにホスティングするコマンドだけで準備は完了です！完了したら、早速「Get Started」から始めていきます！

▲ K5 Playground

アプリケーションを作成

K5 Playgroundにはいくつかのテンプレートが用意されています。

ECサイト向きのサーチテンプレートや、グラフテンプレート、チャットテンプレートなど汎用性が高いですね。今回は「Map」のテンプレートを選択し、アプリケーションを作成します。

左のメニューの「App Info」からアプリケーション情報を設定できます。任意のアプリ名や、カラースキーム、フォントなどのデザインを好みのものに変更することができます。

APIロジックを編集

「Map Page」の項目から、既存の/sample_locationsを選択すると、右側の「API Logics」というメニューに利用出来るAPIが一覧表示されます。

APIでは富士通のサービスだけでなく、SNSはInstagramやTwitter、MessagingではLINE BotやSlack、Facebookメッセンジャーとさまざまなサービスがカバーされています。バリエーションはもちろんのこと、連携も簡単そうです！

今回は「Instagram」を選択します。

「Instagram」のカードを「Start」と「End」の間にドロップするだけで、Instagramの連携したアカウントから最新の写真を取得する部分のコーディングが完了します。サービスのドキュメントを読んだりデータ形式を合わせたりする必要がなく、一瞬でコーディングできる衝撃の手軽さでした！

「Custom」から「FUJITSU Empty Logic」を「Instagram - Recent media」の下にドロップすると、こちらにカスタムコードを挿入できます。直接編集できるのが便利です。

今回は、Instagramから取得した写真の座標を抽出し、Map上の対応位置に配置するコードを貼り付けました。
なんと、ここまででコーディングはほぼ完了です！
あとは、ダウンロードしたコードにGoogle mapのAPIキーを設定し、K5 CFにデプロイすると、アプリケーションが完成です！

私のようなバックエンドエンジニアでも、15分程度で作成することができました！UIも含め本当にクオリティの高いアプリケーションが、想像以上に手軽に作成できて感動しました。この手軽さは、触ってみれば実感できます！みなさんもぜひ触ってみてください！

さて、ここまで紹介したK5 Playgroundですが、なぜ今、富士通でフロントエンドなのでしょうか。後半は、K5 Playgroundの開発者である藤田氏に、何を契機にどのような思いで開発されたのか伺っていきます！

「海外に遅れを取っている現状を打破したい。」K5 Playground開発の契機

藤田　壮吉氏ふじた そうきち

富士通株式会社

会計ERP、機械学習、WebAPI等の企画や開発の後、K5 Playgroundを企画開発。
企画・開発・教育・講演まで幅広く活動している。
プログラミング、ゲーム、音楽（電子音楽、バロック音楽）が好み。

── 藤田さんがK5 Playgroundの企画者と伺いましたが、そもそもなぜフロントエンドの生成ツールを作ろうと思い立ったのですか？

藤田 壮吉氏(以下、藤田)理由の一つは、海外のフロントエンド界隈に比べて、日本は少し遅れている部分が多いと思っていたことです。Instagram、Facebook、Airbnbなど海外のサービスのフロントエンドは、見た目は日本のサービスとあまり変わらないですが、React.jsなどを使って裏側もすごくしっかり作ってある。グローバルなサービスのように大量のユーザーの要求に答えながら日々迅速に改善していくためには、フロントエンドにも優れた技術やアーキテクチャを取り入れることが重要なんです。日本が海外と戦うために、フロントエンドの基礎の部分を底上げしたいという気持ちがありました。

また富士通のPaaSではさまざまなAPIを提供していますが、それをカバーするフロントエンド側の開発サービスがなかったことも、開発に至った理由の一つでした。富士通のAI「Zinrai」やIoT PlatformなどのAPIと世界中のAPIを組み合わせたアプリを、みんながスピーディに開発できるサービスにしたかったんです。

── 日本のサービスレベルを向上させたいという気持ちがK5 Playgroundの開発に繋がったんですね。K5 Playgroundは構造に特徴があるとも耳にしましたが…？

藤田そうなんです。実は、K5 Playgroundで作れるアプリはReact+FluxのフロントエンドとNode.jsのバックエンドなんですが、K5 Playground自体もReact+FluxのフロントエンドとNode.jsのバックエンドなんです。K5 Playgroundで作ったアプリを頑張って育てれば、K5 Playgroundと同じようなサービスを作れるかもしれません。

海外で手応えアリ。触ってわかるK5 Playgroundの魅力

── リリース後のユーザーの反応や手応えはいかがでしょうか？

藤田最初はとにかく触って知ってもらいたいと思い、Open Developers Conferenceやクラウドイベントなど、さまざまなイベントに出展しました。

海外ではスイスのCloud FoundryのイベントのCFP(Call For Papers)に当選してタイミングよく講演できることになり、海外のエンジニアのフィードバックを得ることができました。海外では日常的にプロトタイプを作るエンジニアや、大企業でも内製でアジャイル開発に切り替えた企業などが多く、現場の開発者の視点でフィードバックをくださいました。

ドイツで開催した自社イベントのFujitsu Forumで出展し、来場者の方々に高く評価していただき、「フロントエンドの強化」は開発者のニーズにも合致していたかなと思います。

スタートラインにたったK5 Playgroundのこれから

── K5 Playgroundのこれからの開発や目標について教えて下さい。

藤田正式にリリースをでき、実際に使ってもらうことも増えて、ようやくこれからというところです。もともと日本国内だけでなく海外でも広く使って欲しいという思いがあったので、海外でもどんどん露出を増やしていきたいですね。

K5 Playgroundを使ったユースケースも増やしていきたいです。富士通の「シェアリングビジネス基盤サービス」のサービス画面はK5 Playgroundを作って開発されるなど、社内での使用実績も増えてきています。

藤田機能面では、APIの充実やテンプレートの追加や改善などを予定しています。富士通のAI「Zinrai」で提供している自然文解析APIも使えるようになりました。Zinraiの自然文解析APIとSNSのロジックを組み合わせれば、ツイートからコンテキストや地理情報などを分析して地図やタイムライン形式で表示するようなアプリはすぐに作ることができます。

本格的な開発ツールとして使いたいのでデータストアやテスト機能が欲しいという要望も結構あります。利用者の声を聞きつつ、UXやDXを考えて機能を強化していきたいと思っています。

K5 Playgroundの真価とは？

── 実はちょっと無茶なお願いがあるのですが……。K5 Playgroundの真価を探るべく、一つなぞかけをお願いしてもいいでしょうか？

藤田なぞかけですか（笑）ちょっと恥ずかしいですが、やってみます。

「K5 Playground」とかけて、「お笑い」と解く。

── その心は？

藤田どちらも「React」が大切でしょう(React.jsとリアクション)。

── おお！！なるほど！（一同拍手）K5 PlaygroundはReact.jsの技術進歩のおかげで実現した部分が大きいんですね。

藤田そうですね。React.jsという技術が登場したことが、自分にとって大きかったです。UIをテンプレートエンジンでなくJavaScriptで書けるがゆえに柔軟に高度なUIを作れます。Component志向で複雑なUIを作りやすい事も重要でした。他のフレームワークでも実装はできますが、React.jsだから自然に、美しく実装できたと思います。

── サービスと技術への愛を感じます。今日はたっぷりとありがとうございました！

おわりに

K5 Playgroundには7日間の無料トライアルとWebハンズオンが用意されています。Webハンズオンでは、Google MapやLINE Messaging APIとの連携が紹介されており、短時間でアプリケーションの作成方法を学ぶことができます。皆さんもぜひ一度K5 Playgroundを体験してみて下さい。

■ K5 Playground × K5 CF WEBハンズオンを無料で体験！詳細はこちら
※ハンズオン教材も公開中！
http://jp.fujitsu.com/solutions/cloud/k5/playground/webhandson/?utm_source=teratail.com&utm_medium=display&utm_campaign=1350_metadev_rep2

■ K5 Playground
http://jp.fujitsu.com/solutions/cloud/k5/playground/developer/?utm_source=teratail.com&utm_medium=display&utm_campaign=1350_metadev_rep2