第４回授業スライド

1. ジーズアカデミー講座

2. デバック
自己紹介
名前 杉山 彰啓（スギヤマ アキヒロ）
経歴 ・独立系企業就職しロボットの研究をする
・デジハリ生となり、在学期間に退職
・UI・UXを専門のデザイン会社へ就職
・デジハリの講師のオファーを頂き会社を退職
デジタルハリウッド ソーシャルアプリクリエイター専攻
・フリーランスとなる
・inopを立ち上げる
・inopを退職
・もう一度フリーランスの道へ

3. デバック

4. jQueryの 動作確認 方法
・ソースコードで確認する方法
alertを使用
<script type="text/javascript">
alert('Hello, world');
</script>
console.logを使用
<script type="text/javascript">
console.log("Hello, world");
</script>
・ブラザの開発ツールを使用する方法
■Safari!
https://developer.apple.com/jp/technologies/safari/developer-‐‑‒tools.html
■Chrome!
http://gihyo.jp/dev/feature/01/devtools/0001
■Firefox(アドオン)!
https://addons.mozilla.jp/firefox/details/1843

5. Chromeでの開発ツールの出し方
・開発ツールの出し方
2.ブラウザを右クリックしてメニューの「要素の検証」をクリック
これをクリック
3.ショートカットキーを使用する
Windows: F12キー!
Mac: 「option」+「command」+「i」 キーを同時に押す
1.ブラウザメニューの「表示」➡「開発/管理」➡デベロッパーツールをクリック

6. Chromeでの開発ツールの内容
・開発ツールの出力結果
以下のような内容が出力されます
主に使用する項目としては!
赤枠：Elements タグの要素とスタイルを検証するための機能!
青枠：Sources CSSやJavaScriptのコードをデバッグできる機能!
緑枠：Console 大きく分けると2つの役割を持っており、1つが「ログの閲覧」で、
もう1つが「インタラクティブな操作」

7. Sourcesで処理の内容を確認する
・Sourcesをクリックしソースを出力させる
画面が灰色になっている時があるこの場合は!
青枠をクリックする

8. Sourcesで処理の内容を確認する
・青枠をクリックすると３つのツリー表記が出力されます
・localhostをクリックします

9. Sourcesで処理の内容を確認する
・localhostをクリックするとフォルダ表記が表示されます
・フォルダーだをクリックすると「index.html」というのが出力されます
※ソースの読込みによって、読込まれているファイル名が記載されている場合があります
・「index.html」をクリックしましょう
※localhostはローカル環境のhtmlをデバックしている為です
※アクセスしている環境によって表示される内容も変更されます

10. Sourcesで処理の内容を確認する
・index.htmlをクリックするとグレーだった箇所にソースが出力さます
※ソースがおかしい場合は再度読込みをおこないましょう

11. Sourcesで処理の内容を確認する
・動作を停止させたい場所に「ブレークポイント」を設置
・数字の書いてある場所をクリックすると青色の矢印マークがブレークポイントとなる

12. Sourcesで処理の内容を確認する
・ブレークポイントを動作させてみよう
ブレークポイントで処理が止まると青色でフォーカスされます
青色でフォーカスされている手前までが処理をしている箇所になります

13. Sourcesで処理の内容を確認する
・止めた後どうするか？
①! ②! ③! ④!
右メニューを使用してブレークポイント後の処理を確認する
①：レジユーム!
停止したスクリプトを再開します!
②：ステップオーバー!
停止したスクリプトを１行づつ実行します!
③：ステップイン!
停止したスクリプトを１行づつ実行します。スクリプト内に関数があった場合はその
関数定義元に移動します!
④：ステップアウト!
停止したスクリプトの行を実行しスクリプト内に関数があった場合その関数の定義元
に移動します

14. Sourcesで処理の内容を確認する
・値を確認する方法
Scope Variablesでソース内の値が確認できる
thisの要素も何が格納されているかもデバック中であれば!
中身を確認することが可能

15. デバックできることで
デバックができることで、!
「動作しているかどうかの状態」や!
「要素からのヒントを得ることができる」!
どうすかの方法を「検索」して解決していく!

16. みんなでやってみよう
【仕様】!
１：「計算」ボタンを押したら演算する!
２：２つの計算したい要素を取得し、足し算をする!
３：結果をhtmlに表示をする
足し算のロジックを作ってみましょう

17. Storage

18. WebStorage
シンプルに使える sessionStorage
ウィンドウ/タブ単位でデータを一時的に保存できる。
ウィンドウやタブが開いている間、Webアプリケーション利用に関
するデータをそれぞれの単位で保存し、ウィンドウ／タブが閉じられ
ると、データは消滅します。
ウィンドウ／タブ間では異なるsessionStorageとなり共有はできな
い。
サーバサイドで使われるSESSIONの仕様ににている。

19. WebStorage
シンプルに使える
∼ sessionStorage ∼
属性 説明
DATA取得 sessionStorage.getItem(KEYネーム);
DATA登録or更更新 sessionStorage.setItem(KEYネーム, 値);
DATAを全削除 sessionStorage.clear();
１レコード削除 sessionStorage.removeItem(KEYネーム);
サンプル
sessionstorage/*.html

20. WebStorage
シンプルに使える localStorage
ブラウザ内に永続的にデータを保存するストレージ。
保存は「ドメイン名:ポート番号」の組み合わせ「オリジン」単位で保存
されます。（例：http://www.localhost:80）
「オリジン」が同等であればブラウザを閉じた後も再度データにアクセ
ス可能。
保存量は、「オリジン単位：５M」 、Cookieが4KB。
保存期間は特になし。
自身の意志で削除しない限りデータは残ります。

21. WebStorage
属性 説明
DATA取得 localStorage.getItem(KEYネーム);
DATA登録or更更新 localStorage.setItem(KEYネーム, 値);
DATAを全削除 localStorage.clear();
１レコード削除 localStorage.removeItem(KEYネーム);
シンプルに使える
∼ localStorage ∼
サンプル
localstorage/*.html

22. geolocation

23. geolocationとは
◇ geolocation
位置情報を取得することができるAPIです。
geolocationがサポートされているブラウザであれば、デバイス関
係なしで使⽤用することが可能です。
サポート状況の確認
座標位置からMAPと連携や、ピンポイント天気予報の作成、
ローカルニュースなど位置情報からサービスを広げることも可
能です
http://caniuse.com/#feat=geolocation

24. geolocationとは
・ 位置を取得
位置を取得する⽅方法が２つあります。
・現在の位置を取得する
navigator.geolocation.getCurrentPosition(成功,失敗,option)
・位置を定期的に取得する
navigator.geolocation.watchPosition(成功,失敗,option)
成功時には「 position 」オブジェクトを取得します
取得内容は次ページの通りです。
・取得停⽌止
定期的に取得する「watchPosition」を停⽌止する⽅方法
「watchPosition」は制作時にidを返します。
idを使⽤用して「clearWatch」で停⽌止させます
navigator.geolocation.clearWatch(watchID)

25. geolocationとは
・位置を取得
position.coords で取得した経度度緯度度の情報について
プロパティ 説明
coords.latitude 緯度
coords.longitude 経度
coords.altitude 高度
coords.accuracy 正確性
coords.altitudeAccuracy 高度の正確性
coords.heading 方位
coords.speed 速度
プロパティ 説明
position.coords 緯度経度などの情報
position.timestamp 位置を取得した時刻
・positionプロパティ
位置取得が成功すると以下プロパティを取得できます。

26. geolocationとは
・optionの指定
３つめの引数では関数を実⾏行行する時のオプションを指定します
指定しなくても可能
プロパティ 説明
option.enableHighAccuracy
より⾼高い正確性を求める(取得時間が遅くなる)
スマフォではGPSを利利⽤用する（バッテリー消費が早い）
option.timeout タイムアウトまでの時間
option.maximumAge 位置情報の有効期限
・ 失敗時の取得
失敗時には「errorオブジェクト」を取得します
取得内容は以下の通りです。
プロパティ 説明
error.code
エラーコード
1.位置情報の取得が許可されていない
2.位置情報の取得が利利⽤用できない
3.タイムアウト
error.message エラーメッセージ

27. geolocationとは
【気をつける点】!
・ローカル環境でChromeを使うとエラーになります。!
※Chromeを使う場合はサーバーなどの環境で使用しましょう!
・PCなどネットワークからのアクセスすると、登録されている基地局の値
となるときがある!
※スマホのGPSで場所を取得するので、その様なズレは少ない!
代表的なMAPサービスの紹介!
【googleMAP】!
!https://www.google.co.jp/maps!
・登録いらずで利用することが可能!
【Bing Maps】!
!https://www.bing.com/maps/!
・利用時にKeyの登録が必要
利用方法：http://www.atmarkit.co.jp/ait/articles/1212/05/news008.html!

28. geolocationとは
【googleMAP】と【Bing Maps】を比較!

29. 課題発表

30. 課題発表

31. 課題発表

32. 課題発表

33. 課題発表

34. geolocationとは
◇ Google Mapを表⽰示
headタグ内に以下を追加
スクリプト内に以下のロジックを追加
<script src="http://maps.googleapis.com/maps/api/js?
sensor=false"></script>
// 地図を表⽰示
map = new google.maps.Map(
document.getElementById(”id名"),{
zoom : 15,
center : new google.maps.LatLng(0,0),
mapTypeId : google.maps.MapTypeId.ROADMAP
}
);
// マーカーを表⽰示
marker = new google.maps.Marker({
position: new google.maps.LatLng(0,0),
map: map
});

35. geolocationとは
◇ Google Mapを表⽰示
headタグ内に以下を追加
スクリプト内に以下のロジックを追加
<script src="http://maps.googleapis.com/maps/api/js?
sensor=false"></script>
// 地図を表⽰示
map = new google.maps.Map(
document.getElementById(”id名"),{
zoom : 15,
center : new google.maps.LatLng(0,0),
mapTypeId : google.maps.MapTypeId.ROADMAP
}
);
// マーカーを表⽰示
marker = new google.maps.Marker({
position: new google.maps.LatLng(0,0),
map: map
});

36. geolocationとは
◇ Google Mapを表⽰示
マップとマーカーを特定の場所に更更新する場合
function setMarker(lat, lon){
var pos = new google.maps.LatLng(lat, lon);
map.setCenter(pos);
marker.setPosition(pos);
}

37. 課題発表

38. 課題
【仕様】!
１：Storageを使用!
２：ボタンイベントでMAPに表示!
３：入力するHTMLを作る!
【期限】!
5月29日(木) 23:59:59!
※エラーがあっても期限内に１度提出しましょう!
お気に入りの座標入力して!
MAPに常時表示できるようにしましょう

39. 課題
この様なwebアプリを作ってみよう!
http://www.atmarkit.co.jp/ait/articles/1212/19/news002.html!
時間がある方は