SHOEISHA iD

パスワードを忘れた場合はこちら

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

  • 新規
    会員登録
  • 新規会員登録

ニュース

記事

デブサミ・デブスト

講座

書籍

新着記事一覧を見る

連載記事

人気記事の執筆者

大西 武

加山 恵美

WINGSプロジェクト 山内 直

中島 佑馬

水無瀬 あずさ
イベント
イベント

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

講演資料・動画まとめページ

Developers CAREER Boost 2024 講演資料まとめ

Developers X Summit 2024 講演資料まとめ

Developers Summit 2024 KANSAI 講演関連資料まとめ

Developers Summit 2024 Summer 講演資料まとめ

Developers Boost 2024 講演資料まとめ

Developers Summit 2024 講演資料まとめ

CodeZine BOOKS（コードジン・ブックス）は、CodeZineの連載からカットアップした、開発現場の課題解決に役立つ書籍シリーズです。

書籍に関する記事を見る

'); googletag.cmd.push(function() { googletag.pubads().addEventListener('slotRenderEnded', function(e) { var ad_id = e.slot.getSlotElementId(); if (ad_id == 'div-gpt-ad-1659428980688-0') { var ad = $('#'+ad_id).find('iframe'); if ($(ad).width() == 728) { var ww = $(window).width(); ww = ww*0.90; var style = document.createElement("style"); document.head.appendChild( style ); var sheet = style.sheet; sheet.insertRule( "#div-gpt-ad-1659428980688-0 iframe {-moz-transform: scale("+ww/728+","+ww/728+");-moz-transform-origin: 0 0;-webkit-transform: scale("+ww/728+","+ww/728+");-webkit-transform-origin: 0 0;-o-transform: scale("+ww/728+","+ww/728+");-o-transform-origin: 0 0;-ms-transform: scale("+ww/728+","+ww/728+");-ms-transform-origin: 0 0;}", 0 ); sheet.insertRule( "#div-gpt-ad-1659428980688-0 div{ height:"+(90*ww/728)+"px;width:"+728+"px;}", 0 ); } else { if ($(window).width() < 340) { var ww = $(window).width(); ww = ww*0.875; var style = document.createElement("style"); document.head.appendChild( style ); var sheet = style.sheet; sheet.insertRule( "#div-gpt-ad-1659428980688-0 iframe {-moz-transform: scale("+ww/320+","+ww/320+");-moz-transform-origin: 0 0;-webkit-transform: scale("+ww/320+","+ww/320+");-webkit-transform-origin: 0 0;-o-transform: scale("+ww/320+","+ww/320+");-o-transform-origin: 0 0;-ms-transform: scale("+ww/320+","+ww/320+");-ms-transform-origin: 0 0;}", 0 ); sheet.insertRule( "#div-gpt-ad-1659428980688-0 div{ height:"+(180*ww/320)+"px;width:"+320+"px;}", 0 ); } } } }); }); } else { document.write('
'); document.write('
'); }
スマホアプリ開発の最新トレンド！ ぜったい外せない位置情報活用術

ルートを探しながら雨雲をチェック！
YOLPで作る簡単便利地図アプリ

スマホアプリ開発の最新トレンド！ ぜったい外せない位置情報活用術（6）


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

　本連載では、Yahoo! Open Local Platform（YOLP）を使ったさまざまなアプリ・サービスの実装例を紹介しています。今回は最新のアップデートでYahoo! JavaScriptマップAPI（以下、JavaScriptマップAPI）に追加された雨雲レーダーレイヤーについてご紹介したいと思います。

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

はじめに

　今回はYOLPの提供するJavaScriptマップAPIを利用して、現在地から指定した場所へのルート検索を行いつつ、ルート上の雨雲状況をビジュアルにチェックできるスマホ・タブレット用のWebアプリ「ルート雨雲チェッカー」を作ってみたいと思います。本文に沿って実際に開発を進めると、簡単にWebアプリを作成できることを実感していただけると思いますので、ぜひお試しください。また「ルート雨雲チェッカー」を今すぐ試したい方は、こちらからご利用いただけますので、あわせてお試しください。

機能概要

　今回のWebアプリでは、以下の機能を実装します。PCブラウザなどで現在地が取得できなかった場合は日本へそ公園（注1）を表示します。

  • 起動すると、現在地を取得して地図を表示
  • 地図上で目的地をタップすると、現在地から目的地までのルート、総距離、総時間、現在地と目的地の住所を表示
  • 地図を再度タップすると、目的地を変更し、現在地を再度取得して新しいルートと関連情報を表示
  • ルートを表示した地図上に現在の雨雲の状態を重ねて表示
注1　日本へそ公園

　日本へそ公園は兵庫県西脇市上比延町にある公園で、東経135度、北緯35度に位置しており、日本は東経123度～147度、北緯24度～46度の枠に収まっているので、東経135度、北緯35度のこの地点がまさに日本の中心であり“へそ”だということです。

開発環境の準備

アプリケーションIDの登録

　これまでの記事でも書かれていますが、YOLPで提供されているAPIを利用するためにはアプリケーションIDが必要になります。すでにアプリケーションIDをお持ちの方はそちらを利用していただき、アプリケーションIDをお持ちでない方、新しいアプリケーションIDの登録を希望する方は、以下のページを参考にアプリケーションIDを登録してください。

　なお、アプリケーションIDを登録するためには、Yahoo! JAPAN IDでログインする必要があります。

「ルート雨雲チェッカー」ソースコード

　今回のWebアプリ「ルート雨雲チェッカー」のソースコードは以下のとおりです。

　前述のとおり、<あなたのアプリケーションID>の部分はご自身で取得されたアプリケーションIDに書き換えてください。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<title>ルート雨雲チェッカー</title>
<style type="text/css">
html, body {
    width:100%; height:100%;
}
html, body, div{
    margin:0; padding:0;
}
div#label{
    z-index:2;
    padding:8px;
    overflow:hidden;
    color: #fff;
    background-color: #000;
    background-image: -webkit-gradient(
        linear,
        0% 0%,
        0% 100%,
        from(rgba(155, 155, 155, 0.1)),
        to(rgba(255, 255, 255, 0.5)),
        color-stop(.5,rgba(155, 155, 155, 0.2)),
        color-stop(.5,rgba(255, 255, 255, 0.1))
    );
    border-radius: 8px;
    opacity: .7;
}
div#title{
    font-size:14pt;
    font-weight:bold;
    line-height:1.2em;
    width:100%;
    overflow:hidden;
}
div#cur, div#dst{
    font-size:10pt;
    font-weight:normal;
    line-height:10pt;
    overflow:hidden;
}
div#summary{
    font-size:12pt;
    font-weight:bold;
    line-height:12pt;
    overflow:hidden;
}
</style>
<script src="http://js.api.olp.yahooapis.jp/OpenLocalPlatform/V1/jsapi?appid=<あなたのアプリケーションID>"></script>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
window.onload = function() {
    // 地図表示
    var map = new Y.Map('map', {
        configure : {
            scrollWheelZoom : true,
            weatherOverlay: true // 雨雲レーダーON
        }
    });
    map.drawMap(new Y.LatLng(35, 135), 15, Y.LayerSetId.NORMAL);
    map.addControl(new Y.ZoomControl());

    //始点は Geolocation API を使って現在地を取得
    var start = new Y.LatLng(35, 135); // 始点
    var end; // 終点
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(function(pos) {
            start = new Y.LatLng(pos.coords.latitude, pos.coords.longitude);
            map.panTo(start);
        }, null, {
            enableHighAccuracy: true, timeout: 3000, maximumAge: 0
        });
    }

    // 終点は地図をタップして設定
    map.bind('click', function(pos) {
        end = pos;
        // 現在地を取得
        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(function(pos) {
                start = new Y.LatLng(pos.coords.latitude, pos.coords.longitude);
                createRoute(start, end);
            }, function() {
                // 取れなかった場合
                createRoute(start, end);
            }, {
                enableHighAccuracy: true, timeout: 3000, maximumAge: 0
            });
        }
    });

    // ルートを表示するためのレイヤーを設定する
    var routeSearchLayer = new Y.RouteSearchLayer();
    routeSearchLayer.bind('drawend', function(result) {
        dispRouteInfo(result);
    });
    map.addLayer(routeSearchLayer);
 
    // ルートを表示する
    var createRoute = function(s, e) {
        if (s && e) {
            routeSearchLayer.clearRoute();
            var config = {
                enableRestrict: true, // 交通規制を考慮する
                useCar: true,         // 自動車を使う
                useFerry: true        // フェリーを使用する
            };
            routeSearchLayer.execute([s, e], config);
        }
    }
 
    // ルート情報を表示する
    var dispRouteInfo = function(result) {
        $('#summary').html('総距離' + result.TotalDistance + 'm, 総時間' + result.TotalTime + '分');
        // 始点と終点の住所を取得して表示
        var geocoder = new Y.GeoCoder();
        geocoder.execute({latlng: start}, function(r) {
            $('#cur').html('現在地 : ' + r.features[0].property.Address);
        });
        geocoder.execute({latlng: end}, function(r) {
            $('#dst').html('目的地 : ' + r.features[0].property.Address);
        });
    }
 
    // リサイズ(回転)の時に地図更新
    $(window).resize(function() {
        map.updateSize();
    });
}
</script>
</head>
<body>
<div id="map" style="width:100%; height:100%;"></div>
<div id="label" style="position:absolute; bottom:4px; right:4px; width:64%; height:64px">
    <div id="title">ルート雨雲チェッカー</div>
    <div id="cur">現在地 : </div>
    <div id="dst">地図をタップして目的地を設定してください</div>
    <div id="summary"></div>
</div>
</body>
</html>　

　上記ソースコードは、GitHubよりダウンロードが可能です。

　また、コードを簡潔に記述するために、jQuery を利用しています。jQueryの詳しい仕様についてはhttp://jquery.com/などを参考にしてください。

　では次項から各パートの解説をしていきます。

会員登録無料すると、続きをお読みいただけます

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

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

メールバックナンバー

次のページ
地図を表示する

NEXT
修正履歴
  • 2012/11/08 10:48 一部修正、追記を加筆させていただきました。

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

  • X ポスト
  • このエントリーをはてなブックマークに追加
スマホアプリ開発の最新トレンド！ ぜったい外せない位置情報活用術連載記事一覧

もっと読む

この記事の著者

尾崎 哲哉（ヤフー株式会社）（オザキ テツヤ（ヤフーカブシキガイシャ））

2008年ヤフー入社。「Yahoo! Open Local Platform（略称：YOLP）」のJavaScriptマップAPIの開発を担当。

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

この著者の最近の執筆記事

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

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine（コードジン）
https://codezine.jp/article/detail/6837 2012/11/08 10:56
" ); }

おすすめ

アクセスランキング

  1. 1
    ガントチャートをWebアプリに組み込める「ガントシート」でプロジェクト管理機能を作成してみよう
  2. 2
    オープンソース監視システム「Prometheus 3.0」が公開
  3. 3
    1/10まで全文無料公開、人気の入門書シリーズ『いきなりプログラミング Androidアプリ開発』
  4. 4
    Linuxディストリビューション「Nobara 41」が公開
  5. 5
    Renewer、Tips集「生成AI × 勉強法ガイドブック 2025」を公開 NEW
  1. 6
    ミッチェル・ハシモト氏、高速で機能豊富なターミナルエミュレーター「Ghostty 1.0」リリース
  2. 7
    ガートナージャパン、企業が2025年に押さえておくべきセキュリティとプライバシに関する重要論点を発表 NEW
  3. 8
    8割超が目標を達成。約7割が収入増を実感、「プログラミングスクール受講による成果と実績」調査をTAG STUDIOが実施 NEW
  4. 9
    日本経済新聞社の最新研究事例に学ぶ、マルチモーダルAI活用の勘所
  5. 10
    より良いプロダクトを作り続けるために ――ソフトウェアエンジニアのための3つのキャリア構築マインドセット NEW

アクセスランキング

  1. 1
    ガントチャートをWebアプリに組み込める「ガントシート」でプロジェクト管理機能を作成してみよう
  2. 2
    オープンソース監視システム「Prometheus 3.0」が公開
  3. 3
    1/10まで全文無料公開、人気の入門書シリーズ『いきなりプログラミング Androidアプリ開発』
  4. 4
    Linuxディストリビューション「Nobara 41」が公開
  5. 5
    Renewer、Tips集「生成AI × 勉強法ガイドブック 2025」を公開 NEW
  6. 6
    ミッチェル・ハシモト氏、高速で機能豊富なターミナルエミュレーター「Ghostty 1.0」リリース
  7. 7
    ガートナージャパン、企業が2025年に押さえておくべきセキュリティとプライバシに関する重要論点を発表 NEW
  8. 8
    8割超が目標を達成。約7割が収入増を実感、「プログラミングスクール受講による成果と実績」調査をTAG STUDIOが実施 NEW
  9. 9
    日本経済新聞社の最新研究事例に学ぶ、マルチモーダルAI活用の勘所
  10. 10
    より良いプロダクトを作り続けるために ――ソフトウェアエンジニアのための3つのキャリア構築マインドセット NEW
  1. 1
    いいエンジニアになるための2つのポイント ──元Google技術者・石原氏が説く「シリコンバレー流ソフトウェア開発術」
  2. 2
    アジャイル開発の推進において、必ずしも"すごい人"は必要ない──現場のエンジニアがDevOps推進で実現する組織改革
  3. 3
    デスクトップアプリを開発しよう！ 「Rust」と「Tauri 2.0」の基本情報と環境整備の仕方を解説
  4. 4
    「CUDA」　～マンガでプログラミング用語解説
  5. 5
    デスクトップアプリ開発に必要な「Rust」の文法を理解しよう
  6. 6
    1/10まで全文無料公開、人気の入門書シリーズ『いきなりプログラミング Androidアプリ開発』
  7. 7
    "けしからん"精神が切り拓く未来──IPA登氏が語る、技術大国・日本が目指す復活戦略
  8. 8
    Google、社内AIエージェント「Google Agentspace」発表
  9. 9
    ガントチャートをWebアプリに組み込める「ガントシート」でプロジェクト管理機能を作成してみよう
  10. 10
    JavaScriptのWebフレームワーク、「Astro 5.1」リリース

イベント

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

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

メールバックナンバー

アクセスランキング

  1. 1
    ガントチャートをWebアプリに組み込める「ガントシート」でプロジェクト管理機能を作成してみよう
  2. 2
    オープンソース監視システム「Prometheus 3.0」が公開
  3. 3
    1/10まで全文無料公開、人気の入門書シリーズ『いきなりプログラミング Androidアプリ開発』
  4. 4
    Linuxディストリビューション「Nobara 41」が公開
  5. 5
    Renewer、Tips集「生成AI × 勉強法ガイドブック 2025」を公開 NEW
  1. 6
    ミッチェル・ハシモト氏、高速で機能豊富なターミナルエミュレーター「Ghostty 1.0」リリース
  2. 7
    ガートナージャパン、企業が2025年に押さえておくべきセキュリティとプライバシに関する重要論点を発表 NEW
  3. 8
    8割超が目標を達成。約7割が収入増を実感、「プログラミングスクール受講による成果と実績」調査をTAG STUDIOが実施 NEW
  4. 9
    日本経済新聞社の最新研究事例に学ぶ、マルチモーダルAI活用の勘所
  5. 10
    より良いプロダクトを作り続けるために ――ソフトウェアエンジニアのための3つのキャリア構築マインドセット NEW

アクセスランキング

  1. 1
    ガントチャートをWebアプリに組み込める「ガントシート」でプロジェクト管理機能を作成してみよう
  2. 2
    オープンソース監視システム「Prometheus 3.0」が公開
  3. 3
    1/10まで全文無料公開、人気の入門書シリーズ『いきなりプログラミング Androidアプリ開発』
  4. 4
    Linuxディストリビューション「Nobara 41」が公開
  5. 5
    Renewer、Tips集「生成AI × 勉強法ガイドブック 2025」を公開 NEW
  6. 6
    ミッチェル・ハシモト氏、高速で機能豊富なターミナルエミュレーター「Ghostty 1.0」リリース
  7. 7
    ガートナージャパン、企業が2025年に押さえておくべきセキュリティとプライバシに関する重要論点を発表 NEW
  8. 8
    8割超が目標を達成。約7割が収入増を実感、「プログラミングスクール受講による成果と実績」調査をTAG STUDIOが実施 NEW
  9. 9
    日本経済新聞社の最新研究事例に学ぶ、マルチモーダルAI活用の勘所
  10. 10
    より良いプロダクトを作り続けるために ――ソフトウェアエンジニアのための3つのキャリア構築マインドセット NEW
  1. 1
    いいエンジニアになるための2つのポイント ──元Google技術者・石原氏が説く「シリコンバレー流ソフトウェア開発術」
  2. 2
    アジャイル開発の推進において、必ずしも"すごい人"は必要ない──現場のエンジニアがDevOps推進で実現する組織改革
  3. 3
    デスクトップアプリを開発しよう！ 「Rust」と「Tauri 2.0」の基本情報と環境整備の仕方を解説
  4. 4
    「CUDA」　～マンガでプログラミング用語解説
  5. 5
    デスクトップアプリ開発に必要な「Rust」の文法を理解しよう
  6. 6
    1/10まで全文無料公開、人気の入門書シリーズ『いきなりプログラミング Androidアプリ開発』
  7. 7
    "けしからん"精神が切り拓く未来──IPA登氏が語る、技術大国・日本が目指す復活戦略
  8. 8
    Google、社内AIエージェント「Google Agentspace」発表
  9. 9
    ガントチャートをWebアプリに組み込める「ガントシート」でプロジェクト管理機能を作成してみよう
  10. 10
    JavaScriptのWebフレームワーク、「Astro 5.1」リリース