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

第6回 Webアプリを作ろう#3──Options Page,Web Storage

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

Options Page

Options Pageは,マニフェストファイルで指定されたHTMLファイルをWebアプリの設定画面として表示するだけの非常に単純な仕組みです。⁠新しいタブ」ページのWebアプリの設定メニューから「オプション」をクリックすることで表示することができます。また,Chromeブラウザの設定メニューから「ツール」「拡張機能」「オプション」リンクからも同様に表示することができます。ここで表示された設定画面は単なるHTMLファイルなので , Webアプリの設定項目や設定の保存/反映は自分で記述する必要があります。

図3 ⁠新しいタブ」ページからのオプションの表示

図3 「新しいタブ」ページからのオプションの表示

図4 ⁠拡張機能」ページからのオプションの表示

図4 「拡張機能」ページからのオプションの表示

Odometerの設定画面として,以下の3つの設定項目を用意しました。設定項目はフォームで作成し,後述するWeb Storageを使って設定を保存,参照します。

  • デスクトップへの通知の有効/無効
  • 通知時間(秒)
  • 目的地~1km圏内,1km~10km圏内,10km圏外でのそれぞれの通知間隔(mまたはkmで指定)

今回は利用しませんが,Fancy SettingsというChromeの設定画面によく似た設定画面を生成するフレームワークもありますので,興味のある方は利用してみてください。

図5 Fancy Settingsで生成した設定画面

図5 Fancy Settingsで生成した設定画面

options.html


<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>Odometer設定</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/options.css">
    <script src="js/options.js"></script>
</head>
<body>
    <header>
        <h1>Odometer設定</h1>
    </header>
    <section>
        <h2>通知設定</h2>
        <div class="internal">
            <div class="setting">
                <p>
                    <label for="notify-setting">デスクトップへ通知: </label>
                    <input type="checkbox" id="notify-setting" checked>
                </p>
                <p>
                    <label for="display-time">通知時間:</label>
                    <input type="number" min="0" step="1" value="5" id="display-time"><span class="aside">※ 0秒を指定すると通知は自動的に閉じられません</span>
                </p>
            </div>
            <div class="detail-setting">
                <table>
                    <tr>
                        <th>通知範囲</th>
                        <th>通知間隔</th>
                    </tr>
                    <tr>
                        <td>目的地~1km園内</td>
                        <td>
                            <input type="number" value="100" min="0.001" step="1" id="short">
                            <select id="short-unit">
                                <option value="m" selected>m</option>
                                <option value="km">km</option>
                            </select>
                            ごとに通知する 
                        </td>
                    </tr>
                    <tr>
                        <td>1km~10km圏内</td>
                        <td>
                            <input type="number" value="1" min="0.001" step="1" id="middle">
                            <select id="middle-unit">
                                <option value="m">m</option>
                                <option value="km" selected>km</option>
                            </select>
                            ごとに通知する 
                        </td>
                    </tr>
                    <tr>
                        <td>10km圏外</td>
                        <td>
                            <input type="number" value="5" min="0.001" step="1" id="long">
                            <select id="long-unit">
                                <option value="m">m</option>
                                <option value="km" selected>km</option>
                            </select>
                            ごとに通知する 
                        </td>
                    </tr>
                </table>
            </div>
        </div>
        <div class="buttons">
            <input type="submit" value="設定" id="apply">
            <input type="reset" value="キャンセル" id="cancel">
        </div>
    </section>
</body>
</html>

著者プロフィール

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

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

コメント

コメントの記入