K5 Playgroundを試してみた（その1）

このエントリーは「Fujitsu Advent Calendar 2017」の16日目の記事です。

（お約束）本記事の内容は私自身の見解であり、所属する組織を代表するものではありません。

先日、富士通主催の開発者向け公開イベント「MetaArc Developers Connect」に参加してきました。「MetaArc（メタアーク）」は正式名称「Fujitsu Digital Business Platform MetaArc」、顧客のデジタルビジネスを実現するための最新技術とノウハウを集約したプラットフォーム、という位置づけ。
当日の内容は、「OpenStack」のコミッタによる最新動向紹介から、ディープラーニングやAI/IoTのデモまで、幅広くありました。そこで参加したハンズオンセミナー「K5 Playgroundを体験してみよう！」が面白かったので、復習しつつご紹介したいと思います。ちなみに僕は、富士通グループ社員ではありますが、K5/MetaArcの関係者ではありません。念のため、申し添えておきます。

K5 Playgroundとは
K5 Playgroundとは、簡単に言うと極力コードを書かずに開発できる、Webアプリケーション開発環境となります。画面上でテンプレートを選択し、ドラッグ&ドロップでAPIを並び替えたりしてアプリケーション開発ができるようになっています。ただし、実際にクラウド環境(K5)で動作させるには、ローカルPCにNode.jsの開発環境が必要だったり、CF(CloudFoundry)のコマンドが必要だったりして。まあ無料だし、文句言っちゃいけないよね。このあたりの整備状況、AWSやAzureにはまだ正直及ばないなあと感じますが、徐々に良くなっていくはず。ちなみに、出来上がるアプリはReactとNode.jsでできてるらしいです。Webアプリの世界は全く知らない人なので、他所からの聞きかじり。

自分でやってみたい方は
K5 PlaygroundのハンズオンがWeb上に公開されています。ここまでで興味が出てきた方は直接試してみるのがいいかと思います。ハンズオン専用にK5が7日間無料で使えるサービスもあるので、パブリッククラウド上でアプリを動かすところまで体験できます。

今回やってみるのは
上記サイトは、日本語で公開されているハンズオン教材となります。ですが、実は本家K5 Playgroundサイトには、もっとたくさんの教材がレシピの形で提供されています。今回は、あえてここから日本語版に無いレシピ「GoogleとFlickrからの画像検索」を試してみることにします。

K5 Playground トップページ

事前準備
事前準備は下記の通りとなります。

K5 CF 7日間無料トライアルを申し込む

「K5 CF」の7日間無料トライアル

ここで残念なお知らせが。K5 CFトライアルの環境払出しは即日ではありませんでした。そのため、記事公開時はK5 CFへのアプリケーション配備まで実機で試すことができません。後日、払出しが完了したら記事を追加します。ごめんなさい！

Node.jsをインストールする
日本語版ハンズオンのサイトに手順があるので、そちらを参照してください。

CFコマンド（CloudFoundry CLI Tool）をインストールする
日本語版ハンズオンのサイトに手順があるので、そちらを参照してください。ちなみに手順の中でCFコマンドのバージョン確認の参照先として指定されているK5 CFの基本情報ページのリンク先が間違ってますので要注意。正しくはこちらです。

FlickrのAPIキーを取得する
Flickrのアカウントが必要です（無料）。Flickrにログインし、APIキーの申請画面から「Non-Commercial」（非商用）を選択、アプリ名や用途など必要事項を入力すると、「Key」と「Secret」の2種類のキーが発行されるので、保存しておきます。

Google Custom SearchのAPIキーを取得する
Google Cloud Platformのアカウントが必要です（無料トライアルあり）。Google Developers Consoleからログインし、Custom Search APIの画面で「有効にする」をクリック、次に「認証情報を作成」をクリック、次に「必要な認証情報」をクリックするとAPIキーが発行されます。これも保存しておきます。

Googleカスタム検索エンジンのEngine IDを取得する
Googleカスタム検索エンジンの画面から「カスタム検索エンジンの作成」をクリック、検索するサイト名に「www.google.com」「www.google.co.jp」、言語に「日本語」を設定したら「作成」をクリック。作成後に表示されたページで「コントロールパネル」をクリックし、詳細の「検索エンジンID」をクリックするとEngine IDが表示されます。これも保存しておきます。

使用するレシピ
本記事で使用するレシピは「Image search application with Google and Flickr」です。所要時間は60分とありますが、これは上記の事前準備を除いた時間だと思われます。レシピページは実作業で使いますので、開いたままとしてください。

K5 Showcase

実作業をはじめる
ブラウザは「Google Chrome」または「FireFox」を使用してください。

K5 Playgroundを開く

本家K5 Playgroundサイト

Create the application
画面上でアプリを作っていきます。

Frontend側

1.テンプレートの選択

テンプレート選択

2.デザインのカスタマイズ
アプリケーションのひな型が画面内に表示されます。画面左メニューの「Theme」では、デザインのカスタマイズができます。

テンプレートを開いたところ

Backend側

1.WebAPI(Flickr)の追加

WebAPIの追加

2.WebAPI(Flickr)のAPI Logic編集

2.画面右メニュー「API Logics」内の「SNS」をクリックし、「Flickr API – Search Images」のブロックを画面中央の「Start」と「End」の間にある「▼」のところへドラッグ&ドロップで移動させます。するとFlickrの画像検索用のコードが表示されます。

WebAPIの編集

3.コード上部の「EDIT」をクリックし、該当部分をレシピページのソースと入れ替えます。ここでコピー後のソースに含まれる[API key]と[secret]の部分を、事前準備で入手したFlickrの「Key」と「Secret」の2つのAPIキーに変更し、画面下の「OK」をクリックします。画面中央のコード部に反映されていることを確認します。

WebAPIのソース編集

4.検索結果ページの編集を行います。画面左メニューの「Contents」内「Result Page」の「GET /sample_profucts」をクリックし、コード上部の「EDIT」をクリックし、該当部分をレシピページのソースと入れ替えます。

3.WebAPI(Google)の追加
画面左メニューの「WebAPI」をクリックします。テンプレートに含まれるデフォルトのAPIが表示されます。一番下の「Create a New WebAPI」をクリックし、API名として「image/google」と入力しenterキーを押します。するとリクエストタイプの設定が表示されますので「GET」をクリックし、有効にしてください。

4.WebAPI(Google)のAPI Logic編集

2.画面右メニュー「API Logics」内の「Search」をクリックし、「Google Custom Search – Search Web」のブロックを画面中央の「Start」と「End」の間にある「▼」のところへドラッグ&ドロップで移動させます。するとGoogleの検索用のコードが表示されます。

3.コード上部の「EDIT」をクリックし、該当部分をレシピページのソースと入れ替えます。ここでコピー後のソースに含まれる[API key]と[Custom Search Engine ID]の部分を、事前準備で入手したGoogleの「Custom SearchのAPIキー」と「カスタム検索エンジンのEngine ID」の2つのAPIキーに変更し、画面下の「OK」をクリックします。画面中央のコード部に反映されていることを確認します。

4.検索結果ページの編集を行います。画面左メニューの「Contents」内「Result Page」の「GET /sample_profucts」をクリックし、コード上部の「EDIT」をクリックし、該当部分を追加します。

5.アプリケーションのダウンロード
アプリケーションのダウンロードの前に、アプリ名の設定を行います。画面左メニューの上部「App Info」をクリックし、アプリ名と説明を入力します。ここで入力したアプリ名が、ダウンロードするアプリのファイル名にもなります。
次に、画面左メニューの上部「DOWNLOAD」をクリックします。利用条件についての画面が表示されるので画面下のチェックボックスにチェックを入れ「DOWNLOAD」をクリックすると、Zipファイルとしてダウンロードできます。

Customize the application
ここからは、ダウンロードしたファイルを手動で修正します。Zipファイルをすべて解凍してください。

Frontend側

1.actions/ProductActionCreators.jsの修正

2.components/FormSearchBox/FormSearchBox.jsの修正
検索画面のUIを変更するための修正です。解凍先フォルダ/frontend/app/components/FormSearchBox/FormSearchBox.js のファイルをテキストエディタで開きます。147行目～158行目をレシピページのソースと入れ替えます。

3.components/containers/ProductListContainers.jsの修正
解凍先フォルダ/frontend/app/components/containers/ProductListContainers.js のファイルをテキストエディタで開きます。35行目と55行目をレシピページのソースと入れ替えます。

4.stores/FilterStore.jsの修正
検索初期値を設定します。解凍先フォルダ/frontend/app/stores/FilterStore.js のファイルをテキストエディタで開きます。11行目をレシピページのソース5行目と入れ替えます。

Backend側
修正はありません。

Deploy the application
アプリケーションのサーバへの配備…これ以降は、K5 CFのトライアル環境が払い出されたら検証します。そしたら「その2」を更新しますので、しばらくお待ちください。

コメントを残す コメントをキャンセル

コメントを残すコメントをキャンセル