SHOEISHA iD

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

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

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

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

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

 本連載ではクラウドネイティブなWebアプリを手軽に、短時間で作りたい方を対象に、Webアプリ開発の最新事情をひも解きつつ、最適な開発ツール「K5 Playground」の概要と活用法を紹介してきました。前回は、K5 Playgroundでプロトタイピングを高速に行う技術を紹介しました。最終回となる今回は、プロトタイプを発展させていきます。はじめに課題をAI技術などで改善します。その後、「優れたUX」とは何かに触れながら、A/BテストによってUXを継続的に改善する手法を解説します。

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

課題を解決してUXを継続的に改善する

 さて今回で連載は最後です。アプリケーションは、はじめに考えていた機能を実装したら終わりではなく、そこからがスタートです。ユーザーの声を聞いたり、行動を分析したり、手を加えながら磨き上げていく必要があります。

 今回は、実際のプロジェクトで発生した案件をK5 Playgroundのアプリとして作ってみて、課題を解決してUXを継続的に改善する方法を説明します。今回は「Twitterでの人気の観光スポットに関するツイートを地図上にリアルタイムに表示させて把握したい」といった要件があるとします。「人気の観光スポット」は実際の要件とは全く変えています。

1. これまでのようにK5 Playgroundにアクセスして、Mapテンプレートを選択します。
2. バックエンド編集画面を開いてAPIロジックを編集します。

 SNSのメニューから"Twitter - Search Tweets"をドラッグ&ドロップします。 query には検索ワードを入力します。

const query = '名所'; //Twitterの検索ワード

 開発スピードのためにまずは任意のHTTPリクエストに対して固定ワードをTwitterで検索するAPIとします。

 そして、Twitterからのレスポンスを整形するために、Customメニューから"Empty Logics"をドラッグ&ドロップします。Twitterのレスポンスで地理情報 coordinatesキーを持つものだけにフィルタリングします。

 //地理情報(coordinates)付きのTweetオブジェクトにフィルタリング
 const tweets = results.filter(x => x.coordinates).map(x => {
   //Mapテンプレートが扱える形式にする
   return {
     name: x.tweet,
     lng: x.coordinates.coordinates[0],
     lat: x.coordinates.coordinates[1],
     original: x
   }
 });
 next(tweets); //フロントエンドに渡して終了。

 originalキーに元のツイートを付けてフロントエンドに改善の余地を持たせています。最適化は後回しにして、UXを改善する際に利用する可能性のある情報を渡します。K5 Playgroundで必要な手順は以上2点です。

現在の画面の例
現在の画面の例
3. アプリをダウンロードして解凍したらこれまでと同様に起動します。あらかじめTwitterのTokenを Twitter Appsから取得しておきます。

Twitterのレスポンスには地理情報がほとんど付いていない

 アプリを起動させると、地図上が寂しいことに気づきます。たいていは何も表示されず、まれに1件表示される程度かと思います。原因を確かめるためにBFFのロジック backend/logics/tweetsGET.js でTwitterのレスポンスをデバッグしてみます。

console.log("ツイート:", results.statuses.length);
console.log("地理情報付きツイート:", results.statuses.filter(x=>x.coordinates).length);
ツイート: 100
地理情報付きツイート: 1

 地理情報付きのツイートの比率は1%以下と極わずかでした。この結果を考慮すると、Twitterのレスポンスの coordinates キーだけから地図系のアプリを作るには、課題があることがわかりました。アプリ開発を中断すべきでしょうか。

 まだ解決策はあります。ツイート本文に注目します。ツイート本文から地理に関係する固有名詞とその緯度・経度を取得できれば解決です。緯度と経度があれば地図上に表示できるだけでなく、地理空間インデックスを持つMongoDBなど、地理情報と親和性の高いデータベースでも扱いやすくなり、データの再利用性も高まります。

 これを実現するのが、富士通のAIサービス「Zinrai」です。

次のページ
機械学習のAPIで課題を解決しよう

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

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

もっと読む

この記事の著者

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

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

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

【AD】本記事の内容は記事掲載開始時点のものです 企画・制作 株式会社翔泳社

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

この記事をシェア

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

おすすめ

アクセスランキング

アクセスランキング

イベント

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

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

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

メールバックナンバー

アクセスランキング

アクセスランキング