K5 Playground

GoogleやFlickrのAPIを使って画像を表示するポータルサイトを作る

60 min
Saito
  1. 1. 概要
    1. 1.1. 材料
    2. 1.2. 機能
  2. 2. アプリの作成
    1. 2.1. Frontend
    2. 2.2. Backend
  3. 3. アプリのカスタマイズ
    1. 3.1. Frontend
    2. 3.2. Backend
  4. 4. アプリのデプロイ
    1. 4.1. Backend
    2. 4.2. Frontend
  5. 5. ダウンロード
  6. 6. Version

K5 Playgroundで複数のサービスから画像を検索して表示するポータルサイトを作ります。Google検索APIやFlickrのAPIを使う方法を学ぶことができます。

概要

材料

  • テンプレート: Form Search
  • APIロジック: Flickr Get Popular Images, Google Custom Search

機能

  • FlickrとGoogleで画像を検索
  • 検索した画像の表示

アプリの作成

K5 Playgroundにアクセスします。

Frontend

  1. K5 Playgroundにアクセスして、Form Search テンプレートを選択します。

Backend

  1. 左メニューのWebAPIsを選択します。

    • image/flickrという名前のWebAPIを新規作成して、GETを有効化します。
    • image/googleという名前のWebAPIを新規作成してGETを有効化します。

  2. 左メニューのGET image/flickrエンドポイントを選択します。

    1. SNSメニューからFlickr Search imagesAPIロジックを追加して、次のように編集します。

      1
      2
      3
      4
      5
      var options = {
          text: req.query.keyword || 'image',
          per_page: req.query.limit || 100,
          page: req.query.offset || 0,
      };
      1
      2
      3
      4
      5
      6
      7
      photoList.push({
          _id: value.id,
          name: value.title,
          image_url: 'https://farm'+value.farm+'.staticflickr.com/'+value.server+'/'+value.id+'_'+value.secret+'.jpg',
          type: 'flickr',
          category: '',
      });
      1
      2
      3
      4
      next({
          images: photoList,
          count: photoList.length < options.per_page ? ((options.page + 1) * photoList.per_page + photoList.length) : 100;,
      });

  3. GET image/googleエンドポイントを選択します。

    1. 右側のSearchメニューからGoogle Custom Search APIロジックを追加して次のように編集します。

      1
      2
      3
      4
      5
      6
      7
      8
      qs: {
        key: apiKey,
        cx: searchEngineId,
        q: req.query.keyword || 'image',
        start: req.query.offset + 1,
        num: req.query.limit || 100,
        searchType:'image',		  
      },
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      next({
        images: body.items.map(function(value) {
            return {
              _id: value.link,
                name: value.title,
                image_url: value.link,
                type: 'google',
                category: '',
            };
        }),
        count: body.searchInformation.totalResults
      });

  4. アプリをダウンロードします。

アプリのカスタマイズ

Frontend

  1. actions/ProductActionCreators.jsを次のように編集します。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    const ProductActionCreators = {
    getProducts({ offset = 0, limit = 9, keyword, types }) {
        var url = types === 'flickr' ? '/image/flickr' : '/image/google';
        const getProducts = api.get(url, {
          params: {
            offset,
            limit,
            keyword,
          },
        });

        axios.all([getProducts])
          .then(axios.spread((productList) => {
            AppDispatcher.dispatch({
              type: ActionTypes.GET_PRODUCTS,
              data: {
                products: productList.data.images,
                count: productList.data.count,
              },
            });
          })).catch(() => {});
    	},

  2. components/FormSearchBox/FormSearchBox.jsを次のように編集します。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    const radioButtonOptions = (
      <RadioButtonGroup
        name="types"
        valueSelected={type}
        style={styles.radioButtonOptions}
        onChange={(event, value) => this.handleTypeChange(value)}
      >
        <RadioButton
          value="flickr"
          label="Flickr"
          style={styles.radioButton}
        />
        <RadioButton
          value="google"
          label="Google"
          style={styles.radioButton}
        />
      </RadioButtonGroup>
    );

  3. components/containers/ProductListContainers.jsを次のように修正します。

    1
    types: filter.type,

  4. stores/FilterStore.jsを次のように編集します。

    1
    2
    3
    4
    5
    getInitialState() {
      return {
        data: Immutable.fromJS({
          keyword: '',
          type: 'flickr',

Backend

config.jsに接続情報を記入します。

アプリのデプロイ

Backend

1
2
cd backend
cf push [APP_NAME]

Frontend

1
2
3
4
5
6
cd frontend
npm install
set API_URL=[Backend URL] # for Windows
export API_URL=[Backend URL] # for Mac/Linux
npm run build
cf push [APP_NAME] -p public

ダウンロード

Version

  • Form Search Template: v1.0.0
Tutorial React.js Flux Node.js Swagger BFF SPA Microservice K5 K5 CF Google Form Search Flickr