Fujitsu

K5 Playground

K5 Playground × CF Webハンズオン

ハンズオン教材
K5 Playgroundの操作方法

3.1. ハンズオンの流れ

以下の流れで、ハンズオンを実施致します。

  • 事前準備
  • K5 Playgroundの操作

2.2. 事前準備

ハンズオン「K5 「CF」の操作方法」を進めるために必要な、事前準備を行います。
以下の準備を行ってから、ハンズオンを進めてください。(既に実施済みの作業についてはスキップしてください。)

Google Chrome、又はFirefoxのインストール

事前準備1.ブラウザ:「Google Chrome」または「Firefox」を利用」を参照して、「Google Chrome」、又は「Firefox」をインストールしてください。

作業用フォルダの作成

「Cドライブ」、又は「Dドライブ」直下に「K5CF\Products_Search」フォルダを作成してください。

3.3. K5 Playgroundの操作

3.3.1. テンプレートの選択

1. K5 Playgroundにアクセス

サポートされているブラウザから、以下のURLにアクセスしてください。
https://playground.cloud.global.fujitsu.com

2. テンプレートの選択

「GET STARTED」ボタンをクリックしてください。

「Start from a template」画面では、テンプレートを選択できます。
本教材では、「Simple Search」を選択しています。

3.3.2. デザインのカスタマイズ

1. 新規アプリケーションの作成

「CREATE NEW APP」ボタンをクリックしてください。

2. 配色の変更

左メニュー「Theme」の「Color Scheme」から、配色を変更できます。
本教材では、「Natural03」を選択しています。

配色が変更されたことを確認してください。

3. タイトルフォントの変更

左メニュー「Theme」の「Title Font」から、タイトルのフォントを変更できます。
本教材では、「Roboto Slab Bold」を選択しています。

タイトルのフォントが変更されたことを確認してください。

4. ボディーフォントの変更

左メニュー「Theme」の「Body Font」から、ボディーのフォントを変更できます。
本教材では、「Roboto Slab」を選択しています。

ボディーのフォントが変更されたことを確認してください。

5. 画面のデザイン変更

左メニュー「Contents」の「~Page」クリックすることで、ページのデザインを変更できます。
本教材では、「Search Page」を変更します。

① ヘッダー部のデザイン変更

赤枠部分の「EDIT」をクリックすることで、ヘッダー部のデザインを変更できます。

デザインを選択してください。

「OK」をクリックしてください。

ヘッダー部のデザインが変更されたことを確認してください。

② 商品詳細部のデザイン変更

赤枠部分の「EDIT」をクリックすることで、詳細部のデザインを変更できます。

デザインを選択してください。

「OK」をクリックしてください。

ヘッダー部のデザインが変更されたことを確認してください。

③ 商品表示数のデザイン変更

赤枠部分の「EDIT」をクリックすることで、表示数のデザインを変更できます。

デザインを選択してください。

「OK」をクリックしてください。

1段の表示数が変更されていることを確認してください。

3.3.3. WebAPIのカスタマイズ

1. アプリ情報の変更

左メニュー「Basic Information」の「APP info」から、アプリの情報を変更できます。

「App Name」を変更することで、アプリケーションの名前が変更できます。
本教材では、[Simple Search]を[Products Search]に変更しています。

「Description」にアプリケーションの説明を記入できます。
本教材では、[Application to search for products]と入力しています。

2. WebAPIの変更・追加

左メニュー「Basic Information」の「WebAPIs」から、WebAPIを変更・追加できます。

「WebAPI Name」を変更することで、APIの名前を変更できます。
本教材では、[sample_products]を[products]に変更します。

各メソッドの名前が変更されたことを確認してください。

「Create a New WebAPI」に文字を入力することで、APIを追加できます。
本教材では、[history]と入力しています。

メソッドのチェックをアクティブにすることで、メソッドを追加できます。
本教材では、「GET」をアクティブにしています。

左メニュー「Added WebAPIs」に「GET /history」が追加されていることを確認してください。

3.3.4. WebAPIロジックのカスタマイズ

1. APIロジックのカスタマイズ

左メニュー「Added WebAPIs」に追加されたAPIをクリックすることで、追加したAPIをカスタマイズできます。
本教材では、「GET /history」のAPIロジックを変更します。

① APIロジック「Mongo DB Fetch Document」の追加

右メニュー「API Logics」から、APIロジック追加できます。
本教材では、「Database」の「Mongo DB Fetch Document」を追加します。

APIロジック「Mongo DB Fetch Document」を「Start」と「End」の間にある「▼」にドラック&ドロップしてください。

APIロジック「Mongo DB Fetch Document」が追加されたことを確認してください。

② APIロジック「Mongo DB Fetch Document」の削除

赤枠部分の「×」をクリックすることで、APIロジックを削除できます。

APIロジック「Mongo DB Fetch Document」が削除されたことを確認してください。

3.3.5. アプリケーションのダウンロード

1. アプリケーションのダウンロード

「DOWNLOAD」ボタンをクリックすることで、アプリケーションをダウンロードできます。

利用規約を確認の上、「DOWNLOAD」ボタンをクリックしてください。
(注)複数回クリックすると、ダウンロードに失敗する場合がございますので、ご注意ください。

2. zipファイルの展開

ダウンロード先に移動してください。

「Products_Search.zip」を右クリックし、「すべて展開」をクリックしてください。

事前準備で用意した作業用フォルダを指定し、「展開」をクリックしてください。

「Products_Search」フォルダに移動し、資材が展開されているかを確認してください。

以上で、ハンズオン「K5 Playgroundの操作方法」は終了です。

Japan

国・地域を変更

ページの先頭へ