SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

アイデアをすぐ形に! K5 Playgroundで開発するクラウドネイティブな最新Webアプリ(PR)

本当に「優れたUX」を目指そう~AI技術やA/Bテストでフロントエンドを改善し続ける方法

  • このエントリーをはてなブックマークに追加

機械学習のAPIで課題を解決しよう

 富士通は機械学習などをベースとしたAIサービスとして「Zinraiプラットフォームサービス(以下Zinrai)」を提供しています。ZinraiはWebAPIで自然言語処理・音声処理・画像処理を行う「基本API/目的別API」とGPUインスタンスでディープラーニングを行う「Zinraiディープラーニング」から構成されています。

Zinraiプラットフォームサービスの全体像
Zinraiプラットフォームサービスの全体像

 ZinraiはFUJISTU Cloud Service K5 30日間無料トライアルから申し込むことにより、期間限定で無償利用できます。

文章から地理情報を抽出する

 それでは実際に先ほどのアプリにZinraiを組み込んでいきましょう。

 K5 Playgroundでは、ZinraiのAPIロジックを4種類用意しています。ここでは一般の文章の中から地理情報を抽出して住所や緯度や経度を返してくれる自然言語処理のAPIを使います。

 1. 先ほどのURLにアクセスします。TwitterのレスポンスをZinraiで分析するために、右メニューのK5 Zinraiから「K5 Zinrai Natural Language Processing - Location Analysis」をドラッグしてTwitterの直下にドロップして、次のように2行修正します。

 //ZinraiにTweet本文の配列を与えるようにします。
 const texts = results.statuses.map(x => x.text);
     :
 //Zinraiの分析結果(body)とTwitterのレスポンスをマージして次に渡します。
 next(results.statuses.map((tweet, i) => Object.assign(tweet, body[i])));

 2. Empty Logicを次のように修正します。Zinraiで分析が成功したツイートのみを扱うようにします。

const tweets = results.filter(x => {
  return x.locations && x.locations.length > 0
}).map(x => {
  return {
    name: `${x.user.name} @${x.user.screen_name} ${x.text}`,
    lng: x.locations[0].longitude,
    lat: x.locations[0].latitude,
    original: x
  }
});
next(tweets);
Twitterを検索して、Zinraiで分析して、フロントエンド用に整形
Twitterを検索して、Zinraiで分析して、フロントエンド用に整形

 3. アプリをダウンロードして先ほどと同様に起動します。 config.js にはZinraiのポータル画面で指定した id token を記述します。

 Zinra使用前とは異なり多くのツイートが地図上に表示されるようになったと思います。さてこれでアプリの機能自体の課題が解決しました。次からアプリのUXを改善していきます。

アプリのUXを改善する

ツイートの取得を改善する

 まずはツイートを定期取得して、放置しておいても最新の検索結果が常に表示されるように改善します。そのためには、JavaScriptのタイマー処理関数 setInterval() をFluxのActionCreatorに適用すればよいです。

//ファイル:frontrend/app/components/containers/MapContainer.js
setInterval(() => { //10000ミリ秒ごとに繰り返す
  GeoLocationActionCreators.getLocations({ ...略... });
}, 10000);

 最新ツイートだけでなく過去のツイートを全て表示するように改善します。そのためにはFluxのStoreの reduce() のふるまいを変更します。

//ファイル:frontend/app/stores/***Store.js
return {
  data: state.data.concat(action.data) //変更前はaction.data
}

タイムライン用のReact ComponentをMaterial-UIで作る

 タイムラインを表示させたいという要望があったため、タイムラインのReact ComponentをMaterial-UIを使ってさくっと作ります。

const timeline = <div> {
  cultural.data.map(x =>
    <Card key={`timeline-${x.original.id}`}>
      <CardHeader
        title={x.original.user.name}
        subtitle={`@${x.original.user.screen_name}`}
        avatar={x.original.user.profile_image_url}
      />
      <CardText>{x.original.text}</CardText>
    </Card>)
} </div>;

 作成したタイムラインは聖杯レイアウトのReact Componentで右メニューに表示させます。

<BaseLayout
  :
 right={timeline}
  :
/>

 さらに、いくつかの修正をして次のようになりました。地図上にはマーカーのみを表示してすっきりさせ、マーカーにマウスオーバーした時にカードが表示されます。

 ここまでAIを導入して、試行錯誤してきましたが、手の早い人であれば数10分でできるでしょう。今後はどう開発していけばよいでしょうか。

 これまでトライ&エラーを繰り返しながら開発を進めてきました。「UXを改善する」と述べましたが、果たして本当に改善したと言えるのでしょうか。何を基準に「優れたUX」と判断できるのでしょうか。

次のページ
優れたUXとは?

この記事は参考になりましたか?

  • このエントリーをはてなブックマークに追加
アイデアをすぐ形に! K5 Playgroundで開発するクラウドネイティブな最新Webアプリ連載記事一覧

もっと読む

この記事の著者

藤田 壮吉(富士通株式会社)(フジタソウキチ)

 富士通株式会社に入社後、会計ERP、機械学習、WebAPI、フロントエンド関連の開発に従事。企画・開発・教育・講演まで幅広く活動している。

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/10767 2018/08/01 16:56

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング