1

佐藤ゼミ卒業制作発表

杉田寿憲

2014年12月21日

０．目次

2

１．各参のテーマ

２．各参の機能

３．DEMO

４．卒業制作の目的

５．目標と達成度

６．できたこと、できなかったこと（2014.12.6）

７．Kaizen

８．次の目標

９．ゼミで学んだこと、今後活かせそうなこと

１．各参のテーマ

3

いたいけな若者にとってのメシア

二次会のお店を一瞬で探す！

杉ちゃーん二次会も  場所とってくれてるよね？

上司 はーい！もちろんです❤️  （訳：知らんわボケ！  くた○れ！！！）

俺氏

２．各参の機能

機能 概要 近隣店舗 検索機能

現在地の位置情報を元に、 付近の店舗情報の一覧を取得できる。

店舗位置 表示機能

「地図に表示」ボタンをクリックすると、地図上で店舗位置を確認できる。

店舗架電 機能

電話番号をクリックすると 店舗に架電できる。

店舗情報詳細表示機能

「詳細情報」ボタンをクリックすると、ぐるナビに遷移して店舗詳細情報を 確認できる。

4

http://bit.ly/1wAeYON 5

３．DEMO

４．卒業制作の目的

技術 実装 jQuery API操作、Ajax通信

　・GoogleMapsAPI 　・ぐるナビAPI

jQuery Mobile

スマホ表示の最適化

HTML5 スマホで現在地情報取得 スムーズな架電

6

　下記の技術を復習・調査し、「２．各参の機能」で示した 機能を実装できるようになりたい！

５．目標と達成度（１／３）

7

・STEP1：現在地に近い店舗情報を取得し、リスト表示

・STEP2：現在地・店舗情報を地図上にピン表示

・STEP3：jQuery Mobileで表示をスマホ最適化

・STEP4：助三©の店舗情報APIを作成し、

　　　　　各参の店舗情報を合わせてナビゲーション

・STEP5：助三で選択した店舗に近い店舗を3件地図上に表示

　下記STEP1〜STEP3までを「４．卒業制作の目的」で 示した要素技術を用いてとにかく動かす！

５．目標と達成度（２／３）

8

・STEP1：現在地付近の店舗情報を取得し、表示 　→HTML5で現在地情報を取得

　→現在位置情報を基に、ぐるナビAPIから店舗情報を取得

・STEP2：現在地・店舗情報を地図上にピン表示 　→現在地をGoogle Map上にピン表示

　→ボタンをクリックして店舗情報をピン表示

・STEP3：jQuery Mobileで表示をスマホ最適化 　→文字として出す情報を絞る（アイコンで直感的に）

　→jQuery Mobileを使用してボタンを整形

５．目標と達成度（３／３）

9

　つまり…

　目　　　標　　　完　　　遂

※更に追加した要素は後ほど

６．できたこと、できなかったこと（１／３）

10

【できたこと（概要_2014.12.6）】

・目標の機能をすべて実装すること　

・ユーザから取得したデータを基にAPIを操作すること

・APIから取得したデータをスマホ最適化して

　ユーザに届けること

・特にスマホで使うことを念頭に、無駄な文字や機能は

　極力減らし、設計・実装すること

・使ったことのないライブラリを調べ、取り入れること

６．できたこと、できなかったこと（２／３）

11

【できたこと（詳細_2014.12.6）】

① GeoLocationAPIで現在地の緯度経度を取得　

② 現在地を取得できなかったときのエラー処理の実装

③ 現在地のGoole Map上への表示

④ 現在地を基にぐるナビAPIから500m以内の店舗情報を取得

⑤ XML（店舗）からHTMLを生成

⑥ 店舗情報の緯度経度を基に地図上にマーカーを表示

⑦ 電話番号クリックによる架電機能の実装（ HTML5）

⑧ jQuery Mobileの導入

６．できたこと、できなかったこと（２／３）

12

【できたこと（詳細_2014.12.6）】

① GeoLocationAPIで現在地の緯度経度を取得　

② 現在地を取得できなかったときのエラー処理の実装

③ 現在地のGoole Map上への表示

④ 現在地を基にぐるナビAPIから500m以内の店舗情報を取得

⑤ XML（店舗）からHTMLを生成

⑥ 店舗情報の緯度経度を基に地図上にマーカーを表示

⑦ 電話番号クリックによる架電機能の実装（ HTML5）

⑧ jQuery Mobileの導入

６．できたこと、できなかったこと（３／３）

13

【できなかったこと（2014.12.6）】

④ 店舗情報が適切にソートされていない

⑤ セレクタの操作で曖昧な点がある

⑥ どの店舗のマーカーが表示されているのかわかりにくい

⑧ とりあえず導入した感がある

＋

・実際の店舗位置とずれてるのでは？という指摘

・ユーザを目的地までナビする

７．Kaizen（１／４）

14

新製品開発モデルの大罪

・「顧客の欲しいものがわかっている」という思い込み ・「どんな機能があればいいかわかっている」という思い込み スティーブン・G・ブランク、ボブ・ドーブ著 堤孝志、飯野将人訳 『スタートアップ・マニュアル』（2012年、翔泳社）より

プロダクトの改善はユーザの声を聞きながら、 真に有意なものを見極めて実施すべき。

７．Kaizen（２／４）

15

①地図上の店舗位置ずれのKaizen

②店舗情報マーカーのKaizen

　- 別アイコンの使用

　- 店舗名を吹き出し内に表示

　- マーカーをクリックして吹き出し表示を切り替え

③「地図に戻る」ボタンをクリックして画面を上部に移動

　12月6〜10日に友人何人かに協力してもらい感想を収集。 下記の優先順位でプロダクトのKaizenを実施。

７．Kaizen（２／４）

16

①地図上の店舗位置ずれのKaizen

②店舗情報マーカーのKaizen

　- 別アイコンの使用

　- 店舗名を吹き出し内に表示

　- マーカーをクリックして吹き出し表示を切り替え

③「地図に戻る」ボタンをクリックして画面を上部に移動

　12月6〜10日に友人何人かに協力してもらい感想を収集。 下記の優先順位でプロダクトのKaizenを実施。

７．Kaizen（３／４）

17

測地系 緯度・経度の表現方法の規格。 ・日本測地系（古）：明治時代に策定。2002年に改定されるまで日本の標準。 →ぐるナビAPIのデフォルト値 ・世界測地系（新）：現在の日本の標準。 →Google Map APIのデフォルト cf. 「測地系についての悩み」（http://uwazumi.honeniq.net/entry/2013/11/28/230833）

測地系を合わせなければ 400～450mのズレが生じてしまう。

７．Kaizen（４／４）

18

　ぐるナビへのリクエストパラメータのオプションで 世界測地系を指定することで測地系のズレを解消。

出展：「ぐるナビAPIリファレンス」（http://api.gnavi.co.jp/api/manual.html#trigger3）

８．次の目標

19

①jQueryの復習

　関数を書く位置、実行順序等

②各APIの仕様習熟

　APIが提供する既存機能でもUXの向上が見込める

③API開発

　サーバを書いて各クライアントから呼び出す意味

④UIの学習

　UIの思想、心理学、実現技術を身につけていく

　

９．ゼミで学んだこと、今後活かせそうなこと

20

① 躓いたときの自己解決の仕方　

② 問題解決のためのコミュニケーション

③ 新しい技術を学ぶ際の核の押さえ方

モノを作る楽しみ、純粋な知識のみならず、 エンジニアとして成長・生存していくための 行動様式をじっくり学ぶことができました。

21

ご静聴ありがとうございました。

今後ともよろしくお願いします。