CodeZine(コードジン)

特集ページ一覧

WindowsストアアプリでWeb APIを使用してみよう

作って学ぶ! 新人研修/Windowsストアアプリで電子カタログを作ろう(6)

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2014/01/06 14:00

目次

地図を表示する

 これで地図を表示するデータの準備が整いました。最後に、地図を表示するためのプログラミングを行います。

 まず、app.onactivatedに代入される関数の中に、Mapモジュールを読み込むためのプログラムを書きます

Mapモジュールの読み込み(default.jsの抜粋)
app.onactivated = function (args) {
    if (args.detail.kind === activation.ActivationKind.launch) {
        ~中略~
        args.setPromise(WinJS.UI.processAll());
        // 連載 第6回   地図の表示
        Microsoft.Maps.loadModule('Microsoft.Maps.Map', { callback: showMap });
        ~中略~
    }
}

 次に地図を表示するためのプログラムshowMapを作成します。

地図表示のプログラミング(default.jsの抜粋)
// 連載 第6回 地図の表示
function showMap() {

    // 1. 緯度経度を取得する
    var map_location = area.value.split(",");

    // 2. オプション情報を定義する
    var options =
        {
            credentials: '*****ここに取得したBing Maps Keyを入力する*****',
            center: new Microsoft.Maps.Location(map_location[0], map_location[1]),
            zoom: 4
        };

     // 3. 地図を表示する
     var map = new Microsoft.Maps.Map(document.getElementById('map'), options);
}

 では、プログラムの説明に入ります。

1.緯度経度を取得する

 旅行先の選択するリストボックスareaに登録した緯度と経度の情報を、変数map_locationに代入します。カンマ区切りでデータを登録しますので、次の値が格納されます。

緯度と経度の取得
説明
map_location[0] 経度
map_location[1] 緯度

2.オプション情報を定義する

 地図を表示するために必要な情報を定義していきます。

緯度と経度の取得
変数名 説明
credentials 取得したBing Maps Keyを設定する
center 地図の中心の経度と緯度を指定する。ここではmap_location[0]とmap_location[1] を指定
zoom 地図の縮尺を指定する(0~20の値)

3.地図を表示する

 default.htmlの中で定義したid属性がmapのdiv要素に地図を表示させます。

 これで地図を表示するプログラムが作成できました。最後に旅行先を選択するリストボックスareaの値が変更されたときに、地図の表示場所を変更するために次のようにプログラムを修正します。

地図表示の変更(default.jsの抜粋)
app.onactivated = function (args) {
    ~中略~

        // 連載 第5回   ListViewコントロール表示
        showInfo();
        var list1 = document.getElementById("area");
        list1.addEventListener("change", showInfo, false);

        // 連載 第6回  地図の変更
        list1.addEventListener("change", showMap, false);
    }
};

 これでプログラミングは終わりましたので、[F5]キーを押してデバッグを行います。次のように、旅行先の地図が表示されます。

旅行カタログの実行例
旅行カタログの実行例

 今回の旅行カタログでは、地図を表示するWeb APIを使いましたが、地図以外にもホテルのシーズン料金や空室情報などの情報を提供するWeb APIなど公開されています。本連載で紹介した簡単なサンプルを、これらのWeb APIをつかってアプリケーションを自由にカスタマイズしてみてください。

Windows 8.1で動くアプリを作るには?

 2013年10月18日にWindows 8.1がリリースされました。スタートメニューなどの画面が変わったほか、Windowsストアアプリの開発においても、Window 8とWindows 8.1では異なる部分が多く出てきます。

 しかしながら、Windows 8.1で動作する新しいVisual Studio 2013 Expressには、旧来のWindows 8版のストアアプリをWindows 8.1で動作させるようにストアアプリを作り変える「再ターゲット」という機能が備わっています。

 本連載で作成したアプリは、Windows 8で動作するストアアプリをVisual Studio 2012 Expressで開発することを前提に記載していますが、この再ターゲットの機能を使えば、次の手順で作成したサンプルアプリをWindows 8.1の環境で動作させることができます。

 まず、Windows 8.1の環境にインストールしたVisual Studio 2013 ExpressでサンプルアプリのTravelSample.slnを開きます。

 すると再ターゲットを促すダイアログが表示されますので、[OK]ボタンをクリックします。
 

再ターゲットのダイアログ
再ターゲットのダイアログ

 次に、ソリューションエクスプローラでプロジェクトを選択し、右クリックします。右クリックすると[Windows 8.1に再ターゲット]というメニューが表示されるので、これを選択します。
 

再ターゲットの実行
再ターゲットの実行

 確認ダイアログが表示されるので、[OK]ボタンをクリックします。

 問題なく再ターゲットができたら、ソリューションエクスプローラで以下の表示になっていることを確認します。
 

再ターゲットの確認
再ターゲットの確認

おわりに

 本連載では、Webサイトは作ったことがあるけどアプリケーション開発って難しいそう……と感じられている方に、HTML5/JavaScriptを使ったWindowsストアアプリの作成方法をご紹介しました。WindowsストアアプリをHTML5/JavaScriptを使って作成すると、Webサイトを作成するような手軽さでアプリケーションができます。

 さらにWindowsストアアプリで本格的なゲームや多くのデバイスを活用するアプリケーションを作成したいときは、C#またはC++とXAMLを使って作成できます。このように、アプリケーションの機能や用途によって開発言語を自由に選択できることは、Windowsストアアプリの強みだと思っています。

 Windowsストアアプリの代表的なコントロールである、ListViewコントロールを使ってさまざまな情報を自由に操作できるようになれば、Windowsストアアプリ開発の初心者からは卒業です。これからも、たくさんの便利で楽しいWindowsストアアプリを作ってくださいね。



  • LINEで送る
  • このエントリーをはてなブックマークに追加

バックナンバー

連載:作って学ぶ! 新人研修/Windowsストアアプリで電子カタログを作ろう

著者プロフィール

  • WINGSプロジェクト 阿佐 志保(アサ シホ)

    <WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂...

  • 山田 祥寛(ヤマダ ヨシヒロ)

    静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for ASP/ASP.NET。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「入門シリーズ(サーバサイドAjax/XM...

あなたにオススメ

All contents copyright © 2005-2022 Shoeisha Co., Ltd. All rights reserved. ver.1.5