Webアプリを公開しよう! Chrome Web Store/Apps入門

第4回 Webアプリを作ろう#1──Geolocation API,Notification API

この記事を読むのに必要な時間:およそ 15.5 分

前回までの連載で,Chrome Web Storeの概要やWeb Appsの作成方法と公開までをご紹介しました。今回より,いよいよ実際のWebアプリの作成を通して,各種APIの詳細を解説していきたいと思います。

Webアプリの概要

今回作成するWebアプリは,地図上で目的地を設定し,目的地と現在地との距離を計算する「Odometer(距離計)⁠という単純なものを考えてみます。また,目的地までの距離が近づくとデスクトップにポップアップを表示して残りの距離を通知する機能なども付け加えていきます。Packaged Appsとして作成し,現在地の取得などにはGeolocation API,デスクトップへの通知にはNotification APIを利用します。地図データとのマッピングにはGoogle Mapsを利用しますが,本連載では解説しませんので詳細についてはこちらを参照してください。

また,本稿で作成するWebアプリは実際のWebアプリとしては作り込みが甘い部分もありますが,解説の都合上ご了承ください。

図1 Odometer

図1 Odometer

Webアプリの構成

Webアプリを構成するファイルを以下のように配置します。

ファイル構成

manifest.json

{
  "name": "Odometer",
  "description": "距離計",
  "version": "0.1",
  "app": {
    "launch": {
      "local_path": "main.html"
    }
  },
  "icons": {
    "16": "icon_16.png",
    "48": "icon_48.png",
    "128": "icon_128.png"
  },
  "permissions": [
    "geolocation",
    "notifications"
  ]
}

Packaged Appとして作成するため⁠app⁠フィールドの⁠launch⁠には,⁠local_path⁠を設定します。今回は,Webアプリのトップページとしてmain.htmlを指定しています。また,Geolocation APIとNotification APIを利用するため,⁠permissions⁠⁠geolocation⁠⁠notifications⁠を指定しています。これによって,各APIを利用する際に許可を求める通知が表示されていたものが暗黙的に許可されます。

main.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Odometer</title>
    <link rel="stylesheet" href="./css/odometer.css">
    <script src="http://maps.google.com/maps/api/js?sensor=true"></script>
    <script src="./js/odometer.js"></script>
</head>
<body>
<div id="map-container">
    <div id="map"></div>
</div>
<div id="data-container">
    <form id="search">
        <input type="text" id="address" placeholder="住所など">
        <input type="submit" value="検索">
    </form>
    <p>地図をクリックして目的地を設定してください</p>
    <section id="distance-container">
        <h1>- 目的地までの距離 - </h1>
        
        <p style=""><span id="distance">0</span> km<br>
        <input type="button" value="自動更新開始" id="auto-update"></p>
        
    </section>
    
    <section>
        <h1>- 目的地 -</h1>
        <table>
            <tr>
                <td width="80px">緯度</td>
                <td width="200px" id="dest-latitude"></td>
            </tr>
            <tr>
                <td>経度</td>
                <td id="dest-longitude"></td>
            </tr>
        </table>
        <input type="button" value="目的地を表示" id="move-dest">
    </section>
    
    <section>
        <h1>- 現在地 -</h1>
        <table>
            <tr>
                <td width="80px">緯度</td>
                <td width="200px" id="latitude"></td>
            </tr>
            <tr>
                <td>経度</td>
                <td id="longitude"></td>
            </tr>
            <tr>
                <td>精度</td>
                <td id="accuracy"></td>
            </tr>
            <tr>
                <td>移動方向</td>
                <td id="heading"></td>
            </tr>
            <tr>
                <td>移動速度</td>
                <td id="speed"></td>
            </tr>
            <tr>
                <td>日時</td>
                <td id="timestamp"></td>
            </tr>
        </table>
        <input type="button" value="現在地を表示" id="move-current">
    </section>
</div>
</body>
</html>

著者プロフィール

吉川徹(よしかわとおる)

普段は,普通のSIer。Webからローカルアプリケーション,データベースからインフラ周りに至るまで,何でも担当する雑食系。主にHTML5開発者コミュニティ「HTML5-developers-jp」で活動中。同コミュニティ主催の「HTML5とか勉強会」のスタッフを務め,HTML5の最新動向を追っている。

コメント

コメントの記入