日記

日本語の勉強のためのブログ

トップ > HTML > 【WPAの練習】logを計算するだけのWebアプリを作成する

【WPAの練習】logを計算するだけのWebアプリを作成する

HTML JavaScript

Webアプリと呼んでいいのかという出来だが...

1. 作成に至る経緯

平均情報量を計算する際に、底が2のlogを何度も計算することになった。
底が10(常用対数)やe(自然対数)であれば、たいていの計算アプリを用いて簡単に計算できる。
しかし底2の対数を(一発で)計算できるアプリは少なく(*)、計算時には

\begin{aligned} \log_2{x} = \log{x} / \log{2} \end{aligned}

という変換公式を使うはめになり、面倒である。

(*) 計算できるアプリはもちろんあるが、どれも大量の機能がついていて動作が重かったり、起動してすぐ計算できるような手軽さがないと感じる。

そこで、logを計算するだけのWebアプリであれば自作できそうと考え、作ってみることにした。

2. 作成物について(要件)

  • 手軽に使えるようにしたい
    • ページの読み込みに時間がかからないようにしたい
  • PWAに対応したい
    • オフラインで使用できたり、スマホアプリとしてホーム画面に配置できたりするのが魅力的に感じたため

3. PWAについて

とりあえずインストール機能をつけたかったので以下リンクを参考にした。

[1] web.dev

[1]によると、以下の条件を満たした際にインストールできるようになるらしい。

  • そのアプリをまだインストールしていない(これは当たり前だが)
  • ページがHTTPSに対応している
  • Webアプリマニフェストというものが作成されている(後述)
  • サービスワーカーというものが登録されている(後述)

これに加え、「ユーザーエンゲージメントヒューリスティックに対応している」(原文ママ)[1]という条件が必要らしいが、よくわからないため飛ばす。

4. Webアプリマニフェストとは

PWAについての情報(アプリ名、アプリアイコンなど)をブラウザに知らせるためのJSONファイルmanifest.jsonのことらしい。
使用ブラウザがChromeの場合、インストール可能にするためにWebアプリマニフェストに最低限書く必要がある情報は次の通り[1]。

  • アプリ名(short_nameかname)
  • アイコン(icons)
    • 192px, 512pxのアイコンが必要[1]
    • iconではなくiconsであることに注意
    • サイズを明記する際もsizeではなくsizesであることに注意(一敗)
  • アプリ起動時に表示するページのURL(start_url)
  • アプリのUI(display)
    • ブラウザのUIの一部を残す("display": "minimal-ui")
    • ブラウザのUIのほとんどを消す?("display": "standalone")、
    • フルスクリーン("display": "fullscreen")
    • 注: "display": "browser"は不可らしい
  • prefer_related_applicationsを書かない
    • もしくはfalseにする

参考: web.dev

4.1 作成したマニフェスト

以上をもとに作成したマニフェストがこちら。

{
    "name": "log計算機",
    "icons": [
        {
            "src": "./images/icon-192.png",
            "type": "image/png",
            "sizes": "192x192"
        },
        {
            "src": "./images/icon-512.png",
            "type": "image/png",
            "sizes": "512x512"
        }
    ],
    "start_url": "./index.html",
    "display": "standalone"
}

4.2 manifest.jsonをページに読み込ませる

manifest.jsonを作成後、HTMLファイル(<head>内)に読み込み用のコードを追記する。

<link rel="manifest" href="./manifest.json">

4.3 読み込めているか確認

※ローカルサーバを立てないとCORSに起因するエラーが発生し、マニフェストファイルが読み込まれているかを確認することができない。そのため、まずはローカルサーバを立てる必要がある。
簡単なのはPython3を使った方法であろう。ターミナル上で、index.htmlのあるディレクトリに移動してからpython3 -m http.server 8000を実行する。その後ブラウザでhttp://localhost:8000にアクセスしてもらえばOK。

manifest.jsonが読み込めているかどうかは、F12を押して開発者ツールを開き、(要素、ソース、コンソールとか書いてある中にある)「アプリケーション」項に切り替えることで確認できる。 そこにマニフェストで設定した名前やアイコンが記載されていれば、しっかりと読み込めている。
(サービスワーカーをまだ設定していないため、「一致するservice workerが～」というエラーが出ていても問題ない)

もしうまくいっていない場合は、以下を疑ってみるとよい。

  • 綴りを間違えている(iconsをiconと誤記しているなど)
    • 筆者はアイコンサイズsizesをsizeと間違えてしまい、アイコンが読み込めなかった。
  • ファイルの配置や名前がマニフェストと異なる
  • キャッシュのせいで最新の表示になっていない
    • 普通にF5で更新するだけではキャッシュは消えない。
    • Ctrl-F5で更新すればキャッシュを無視し、最新のページを取得してくれる。

5. サービスワーカーとは

オフライン状態でもサイトを閲覧できるようにキャッシュをとってくれたりするものらしい。
あまり理解していないため、ここでは最低限の記述で済むようにしようと思う。

5.1 サービスワーカーの動作を定義

適当なjsファイル(ここではserviceworker.jsと名付けた)を作成し、そこにサービスワーカーの動作を記述していく。

developer.mozilla.org

5.2 メインのjsファイルに追記

サービスワーカー登録のためのコードを追記する。

if ("serviceWorker" in navigator) {
    navigator.serviceWorker.register("./serviceworker.js");
}

5.3 動作確認

先ほど同様ローカルサーバを立て、localhost:8000にアクセスする。
Chromeでアクセスした際に、URLバーにディスプレイを模したアイコンが表示されればOK。そのアイコンをクリックすればインストールできる。

ちなみにVivaldiではタブを右クリックした際に「ＯＯをインストールする」と表示されるため、それをクリックすることでインストールできる。

help.vivaldi.com

6. 完成したものがこちら

kalaxity.github.io

7. その他の参考文献

PWA全般について
qiita.com
qiita.com

favicon.icoの作成用
ao-system.net

favicon.icoがgithub pagesで読み込まれない際の対処について
stackoverflow.com