デル株式会社

APIの活用法 Yahoo!マップ・編

Pocket

先輩の講師の方が授業でYahoo!のJavaScriptマップAPIをご紹介されていました。「これはおもしろい!」と思いましたので、ご紹介しますね。

私は初心者向けの講座のときに「Ajax体験講座」として一時間のクイズを出します。授業ではYahoo!JAPANデベロッパーネットワークのwebサイトからサンプルコードのソースをコピーしてメモ帳などに貼り付けます。

参照元:Yahoo!JAPANデベロッパーネットワーク ドキュメント一覧
http://developer.yahoo.co.jp/sitemap/

するとこんな風に地図が表示されてドラッグするとぐりぐり動くはずです。


そこで、こんなクイズを出します。
一問目:「地図の大きさを変えてください。今回は横幅を600pxにします。」

などとhtmlがわかる方ならばできる問題からスタート。すると生徒さんは「プログラミングの知識がなくても、自分もできる!」とやる気を出してくださるので、二問目へ。

二問目:「地図の中心をこの授業が行われている建物の住所に変えてください。」

すると生徒さんはうんうん考えだされます。「ヒントはJavascriptがわからなくても解けます。」と早めにお伝えいたします。自力で考えて解かれる方、検索して解かれる方さまざまです。毎回、一番早い方は20分くらいで気がつかれますが、どうしてもわからないかたもいらっしゃるので最後に回答と解説をして終わり。

回答を説明すると「なんだ、そんな簡単なことだったのか!」と驚かれます。検索すればYahoo!Japanに答えも載っています。なので自分で考えてみる楽しさ、調べる大切さも学ぶことができます。

地図のAPI・ソースコードは、YOLP(地図)(http://developer.yahoo.co.jp/webapi/map/)の「Yahoo! JavaScriptマップAPI」を使用しました。

毎回、みなさんが楽しそうなのでマップの課題のバリエーションを広げられたらさらに授業が楽しくなるかもしれません。ご活用くださいませ。


編集履歴 2013.5.23 22:31 題名にAPIを追加しました。Javascriptがうまく起動していなかったので修正しました。誤字脱字も修正しました。2015.9.19  「参照元:Yahoo!JAPANデベロッパーネットワーク ドキュメント一覧」のリンクを追加。「地図のAPIは・・・」の一文を追加。題名をYahoo!マップAPIの活用法」から変更。「以下に、マーカーにマウスカーソルが重なるとマーカーの名称を表示し、マーカーをクリックするとその位置の緯度経度を表示した上でマーカーを削除するサンプルを示します。」→「ご紹介しますね。」に修正。

Author Profile

片岡杏紗(あさ)
国家資格キャリアコンサルタント。JCDA認定CDA(キャリア・デベロップメント・アドバイザー)。元IT系講師。ITmediaオルタナティブ・ブログでは、「教育ICT」に関する記事を連載中。http://blogs.itmedia.co.jp/kataoka/
Pocket

コメント

  • トラックバックは利用できません。
  • コメント (0)
  1. この記事へのコメントはありません。

CAPTCHA


ウェブサイト翻訳ツール

アーカイブ

Zenback

ページ上部へ戻る