各参のテーマ、概要、要素技術、改善方法、今後の見通等

1. 1
佐藤ゼミ卒業制作発表
杉田寿憲
2014年12月21日

2. ０．目次
2
１．各参のテーマ
２．各参の機能
３．DEMO
４．卒業制作の目的
５．目標と達成度
６．できたこと、できなかったこと（2014.12.6）
７．Kaizen
８．次の目標
９．ゼミで学んだこと、今後活かせそうなこと

3. １．各参のテーマ
3
いたいけな若者にとってのメシア
二次会のお店を一瞬で探す！
杉ちゃーん二次会も
場所とってくれてるよね？
上司
はーい！もちろんです❤️
（訳：知らんわボケ！
くた○れ！！！）
俺氏

4. ２．各参の機能
機能 概要
近隣店舗
検索機能
現在地の位置情報を元に、
付近の店舗情報の一覧を取得できる。
店舗位置
表示機能
「地図に表示」ボタンをクリックすると、
地図上で店舗位置を確認できる。
店舗架電
機能
電話番号をクリックすると
店舗に架電できる。
店舗情報詳細
表示機能
「詳細情報」ボタンをクリックすると、
ぐるナビに遷移して店舗詳細情報を
確認できる。
4

5. http://bit.ly/1wAeYON
5
３．DEMO

6. ４．卒業制作の目的
技術 実装
jQuery API操作、Ajax通信
・GoogleMapsAPI
・ぐるナビAPI
jQuery
Mobile
スマホ表示の最適化
HTML5 スマホで現在地情報取得
スムーズな架電
6
下記の技術を復習・調査し、「２．各参の機能」で示した
機能を実装できるようになりたい！

7. ５．目標と達成度（１／３）
7
・STEP1：現在地に近い店舗情報を取得し、リスト表示
・STEP2：現在地・店舗情報を地図上にピン表示
・STEP3：jQuery Mobileで表示をスマホ最適化
・STEP4：助三©の店舗情報APIを作成し、
各参の店舗情報を合わせてナビゲーション
・STEP5：助三で選択した店舗に近い店舗を3件地図上に表示
下記STEP1〜STEP3までを「４．卒業制作の目的」で
示した要素技術を用いてとにかく動かす！

8. ５．目標と達成度（２／３）
8
・STEP1：現在地付近の店舗情報を取得し、表示
→HTML5で現在地情報を取得
→現在位置情報を基に、ぐるナビAPIから店舗情報を取得
・STEP2：現在地・店舗情報を地図上にピン表示
→現在地をGoogle Map上にピン表示
→ボタンをクリックして店舗情報をピン表示
・STEP3：jQuery Mobileで表示をスマホ最適化
→文字として出す情報を絞る（アイコンで直感的に）
→jQuery Mobileを使用してボタンを整形

9. ５．目標と達成度（３／３）
9
つまり…
目 標 完 遂
※更に追加した要素は後ほど

10. ６．できたこと、できなかったこと（１／３）
10
【できたこと（概要_2014.12.6）】
・目標の機能をすべて実装すること
・ユーザから取得したデータを基にAPIを操作すること
・APIから取得したデータをスマホ最適化して
ユーザに届けること
・特にスマホで使うことを念頭に、無駄な文字や機能は
極力減らし、設計・実装すること
・使ったことのないライブラリを調べ、取り入れること

11. ６．できたこと、できなかったこと（２／３）
11
【できたこと（詳細_2014.12.6）】
① GeoLocationAPIで現在地の緯度経度を取得
② 現在地を取得できなかったときのエラー処理の実装
③ 現在地のGoole Map上への表示
④ 現在地を基にぐるナビAPIから500m以内の店舗情報を取得
⑤ XML（店舗）からHTMLを生成
⑥ 店舗情報の緯度経度を基に地図上にマーカーを表示
⑦ 電話番号クリックによる架電機能の実装（ HTML5）
⑧ jQuery Mobileの導入

12. ６．できたこと、できなかったこと（２／３）
12
【できたこと（詳細_2014.12.6）】
① GeoLocationAPIで現在地の緯度経度を取得
② 現在地を取得できなかったときのエラー処理の実装
③ 現在地のGoole Map上への表示
④ 現在地を基にぐるナビAPIから500m以内の店舗情報を取得
⑤ XML（店舗）からHTMLを生成
⑥ 店舗情報の緯度経度を基に地図上にマーカーを表示
⑦ 電話番号クリックによる架電機能の実装（ HTML5）
⑧ jQuery Mobileの導入

13. ６．できたこと、できなかったこと（３／３）
13
【できなかったこと（2014.12.6）】
④ 店舗情報が適切にソートされていない
⑤ セレクタの操作で曖昧な点がある
⑥ どの店舗のマーカーが表示されているのかわかりにくい
⑧ とりあえず導入した感がある
＋
・実際の店舗位置とずれてるのでは？という指摘
・ユーザを目的地までナビする

14. ７．Kaizen（１／４）
14
新製品開発モデルの大罪
・「顧客の欲しいものがわかっている」という思い込み
・「どんな機能があればいいかわかっている」という思い込み
スティーブン・G・ブランク、ボブ・ドーブ著
堤孝志、飯野将人訳
『スタートアップ・マニュアル』（2012年、翔泳社）より
プロダクトの改善はユーザの声を聞きながら、
真に有意なものを見極めて実施すべき。

15. ７．Kaizen（２／４）
15
①地図上の店舗位置ずれのKaizen
②店舗情報マーカーのKaizen
- 別アイコンの使用
- 店舗名を吹き出し内に表示
- マーカーをクリックして吹き出し表示を切り替え
③「地図に戻る」ボタンをクリックして画面を上部に移動
12月6〜10日に友人何人かに協力してもらい感想を収集。
下記の優先順位でプロダクトのKaizenを実施。

16. ７．Kaizen（２／４）
16
①地図上の店舗位置ずれのKaizen
②店舗情報マーカーのKaizen
- 別アイコンの使用
- 店舗名を吹き出し内に表示
- マーカーをクリックして吹き出し表示を切り替え
③「地図に戻る」ボタンをクリックして画面を上部に移動
12月6〜10日に友人何人かに協力してもらい感想を収集。
下記の優先順位でプロダクトのKaizenを実施。

17. ７．Kaizen（３／４）
17
測地系
緯度・経度の表現方法の規格。
・日本測地系（古）：明治時代に策定。2002年に改定されるまで日
本の標準。
→ぐるナビAPIのデフォルト値
・世界測地系（新）：現在の日本の標準。
→Google Map APIのデフォルト
cf. 「測地系についての悩み」（http://uwazumi.honeniq.net/entry/2013/11/28/230833）
測地系を合わせなければ
400∼450mのズレが生じてしまう。

18. ７．Kaizen（４／４）
18
ぐるナビへのリクエストパラメータのオプションで
世界測地系を指定することで測地系のズレを解消。
出展：「ぐるナビAPIリファレンス」（http://api.gnavi.co.jp/api/manual.html#trigger3）

19. ８．次の目標
19
①jQueryの復習
関数を書く位置、実行順序等
②各APIの仕様習熟
APIが提供する既存機能でもUXの向上が見込める
③API開発
サーバを書いて各クライアントから呼び出す意味
④UIの学習
UIの思想、心理学、実現技術を身につけていく

20. ９．ゼミで学んだこと、今後活かせそうなこと
20
① 躓いたときの自己解決の仕方
② 問題解決のためのコミュニケーション
③ 新しい技術を学ぶ際の核の押さえ方
モノを作る楽しみ、純粋な知識のみならず、
エンジニアとして成長・生存していくための
行動様式をじっくり学ぶことができました。

21. 21
ご静聴ありがとうございました。
今後ともよろしくお願いします。