K5 Playgroundを始めてみよう
K5 Playgroundは、Webブラウザから操作します。Google ChromeまたはFirefoxの利用を推奨しています。
手軽にアプリ開発をスタートしよう
最初にK5 Playgroundのサイトにアクセスし、「無料ではじめる」ボタンをクリックします。
「GET STARTED」または右上の「APPS」をクリックすると、テンプレート一覧画面が表示されます。
トップ画面とテンプレート選択画面
現在提供されているテンプレートは次の7種類です。テンプレートは今後も追加・改良されます。
| テンプレート名 | 用途 |
|---|---|
| Simple Search |
一覧・詳細形式のアプリ 例）ショッピングアプリ、メディアアプリ、ポータルサイト |
| Form Search | 検索起点のアプリ 例）チケット検索、旅行サイト |
| Chart | グラフアプリ 例）SNSメッセージの統計 |
| Chat | チャットやメッセージングアプリ 例）チャットボット、カスタマーサポート |
| Dashboard | 管理画面やダッシュボード 例）統計アプリ |
| Map | 地図形式アプリ 例）気象情報アプリ |
| Web Camera | 端末のカメラを使うアプリ 例）機械学習の登録画面、画像認識、ゲーム |
フロントエンドやバックエンドを直感的に編集できる、アプリ開発画面
テンプレート右上の「CREATE NEW APP」をクリックすると、アプリ開発をスタートできます。新規にアプリを作成すると、アプリの開発画面が表示されます。
左メニュー
各種操作を行うためのメニューです。次のような項目があります。
①「DOWNLOAD」：作成したアプリをダウンロードできます。
②「App Info」：アプリ情報画面を表示します。
※アプリ情報画面：アプリの名前や詳細情報を変更できます。ここで編集した内容は、
ダウンロードしたファイルの名前やREADME等に反映されます。
③「WebAPIs」：WebAPI編集画面を表示します。
※WebAPI編集画面：バックエンドのWebAPIの新規追加や変更ができます。
④「Theme」：ドロップダウンリストで、フロントエンドの色やフォントを一括して変更できます。
⑤「Contents」：フロントエンド編集画面とバックエンド編集画面を表示します。
以降では、主な画面を説明します。
フロントエンド編集画面
フロントエンドをカスタマイズするための画面です。UI部品の右上にある緑色のボタンをクリックすると、UI部品をカスタマイズできます。さらに左メニューのThemeで色やフォントを変更すると、色やフォントを一括して変更できます。
バックエンド編集画面
バックエンドを開発するための画面です。中央ペインにはWebAPIが呼ばれた時の処理のフローが表示されています。フローは初期状態では「データベースからデータを取得してフロントエンドに返す」「モックデータを作成してフロントエンドに返す」といったシンプルなものが多いです。
次に右ペインを見てみましょう。右ペインにはAPIロジックが多数陳列されています。このAPIロジックは、ペインにドラッグ＆ドロップできます。
右ペインのAPIロジック（左） 中央ペインへのAPIロジック追加（右）
中央ペインの処理の流れは、ドラッグ＆ドロップによってAPIロジックを追加・順序交換したり、×ボタンによってAPIロジックを削除したりといった方法で、自由にカスタマイズできます。追加したAPIロジックのコードをカスタマイズしたい時は、直接クリックまたはEDITボタンで開くダイアログの中で編集できます。
APIロジックの編集を具体例で説明します。例えば一覧・詳細形式の「Simple Search」テンプレートでTwitterの検索結果をフロントエンドに表示させたい場合、デフォルトのMongoDBのAPIロジックを削除して、Twitter検索のAPIロジックをドラッグ&ドロップします。
また別の例として、投稿機能を持つアプリで「利用者の投稿をDBに保存する」処理があって、これに「禁止ワードを検出したらSlackに通知する」という機能を追加したい場合を考えてみます。この例の場合、DB保存処理の前もしくは後に、Slack通知のAPIロジックを追加します。前に追加すれば「禁止ワードを検出したらSlackに通知して、非表示フラグをつけてDBに保存する」といった処理にもできます。
このようにAPIロジックをうまく工夫して目的の処理を作りましょう。バックエンドの処理を作るためのAPIロジックは現在、次のような約80種類を用意していますが、今後も継続的に追加・改良する予定です。
| カテゴリ | APIロジックの概要 |
|---|---|
| Authentication | 認証認可サービスを利用する。 例）Auth0 |
| Custom | 汎用的に使用可能なAPIロジック。 例）Fujitsu Empty logic |
| Database | 各種データベースへのアクセスを可能にする。 例）MongoDB、Firebase Realtime Databases、PostgreSQLなど |
| Document Processing | テキスト解析を行う。 例）Google Cloud Natural Language |
| Email/SMS | 電子メールやSMSを送信する。 例）Twilio |
| Image Processing | 画像処理を行う。 例）Google Vision API |
| Messaging | 各種メッセージングサービスを利用する。 例）Slack、Facebook、LINE |
| News/Weather | ニュースや天気の情報を取得する。 例）Yahoo Weather API |
| Payments | 支払い処理を行う。 例）PayPal |
| Search | テキストや画像を検索する。 例）Google、Youtube、Wikipedia |
| SNS | SNSのデータを活用する。 例）Twitter、Instagram、Flickr |
| Storage | ストレージサービスを活用する。 例）Google Cloud Storage |
| Automation | 様々なサービスの連携を自動化する。 例）IFTTT |
| HTTP | 汎用的なHTTPリクエスト。 |
| K5 | K5の共通的な機能を利用する。 例）K5のトークン取得など |
| K5 Email | Emailを送信する。 例）テキストメール送信、HTMLメール送信 |
| K5 IoT | K5 IoTの機能を利用する。 例）IoTストレージへのCRUDやActionの受信 |
| K5 Zinrai | K5 Zinraiの機能を利用する。 例）自然言語解析 |
| K5 Object Storage | K5 Object Storageを利用する。 例）データのCRUD |
