初代 iPad 用の Web アプリを作った(スコアボードアプリ)
はい。今どきなかなか珍しい体験をした(？)と思うので、記録を残しておきます。
URL: https://score-board.pages.dev/
スクリーンショット:
Why?
ある日、うちの父が1つ頼みたいことがあると言ってきました。
パッパ「趣味(ビリヤード)でスコアボードアプリ入れて使おうと思って古い iPad を買ったんだ、ただ古すぎてアプリストアから入れることができなかった😥PC からなんとか入れられないか？」
ワイ「古いっていつの？」
パッパ「最初のやつ」
ワイ「(流石に初代 mini のことやろな)まあシンプルなものでいいならワンチャンワイが Web で作れるよ」
パッパ「本当か！じゃあ頼むよ、はい(お出しされる初代 iPad)」
ワア「
調査
バージョンについて
というわけでまず 「何が使えて何が使えないのか」 の調査から始めました。
初代 iPad が発売されたのは 2010 年。当時自分は小学生でした。そんな前からあったんですね iPad って。
とりあえず Safari の最終バージョンを知る必要があります。
その為には iPad の OS (まだ iPad も iOS)の最終バージョンを知る必要があります。
とりあえずとりあえず、Wikipedia をチェック。なるほど iOS 5.1.1。
そして Safari についても Wikipedia をチェック。なるほど Safari 5。
オフライン対応
そして次は、「オフラインでも Web ページを表示できるか？」 を調査します。
テザリングがあるとはいえ、一応ネイティブアプリの代替として作るならオフラインで利用可能なのはほぼ必須条件だと思ったので。
(こんな古い機器をネットに繋げていいのかはわかりませんが)
しかし、流石に Service Worker なんて使えませんし、どうしたものかとなりました。
ワンチャン Cache-Control でオフライン時もキャッシュから取得するように出来ないか試してみましたが、当然のように無理でした。
とりあえずなにか方法はないか調べてみると・・・ありました。
HTML5 Application Cacheです。(Wikipedia)
正直聞いたことない API ですが、Wikipedia のページにある MDN へのリンクや、ググって調べたりしてなんとか出来ました。
軽く説明をすると、以下のような書式で書いた .manifest ファイルのパスを <html> タグの manifest 属性に設定します。
CACHE MANIFEST
// Version が変わらないと下のリストを変更しても反映されません
# Version 0
// index.html はデフォルトでキャッシュ対象に含まれています
CACHE:
(キャッシュさせたいファイルのパス)
そして、 .manifest ファイルの Content-Type ヘッダーに text/cache-manifest を設定します。これでオフライン対応が完了しました。
CSS, JS
普段は React で個人開発をしていますが、何らかのツールを使うと Safari 5 でサポートされていないコードが混入するかもしれないという懸念があったので、今回は久々にどちらも(MDN とにらめっこしながら) Vanilla で書きました。
まず CSS から。
em は Safari 1 から対応しているようですが、rem は 5 からのようです。(MDN)
念の為 em にしときました。(？)
あと初めて float を使いました。float も Safari 1 から対応していますが、flex は 9 からなんですね。
まあ正直そこまで苦労しませんでした。flex 無しでうまくビューポートの横幅に合わせるやり方がわからなかったのでほぼ全てをパーセント値で調整したことくらいでしょうか。
次は JS 。これもまあそんなに。
TS に慣れきってしまったので JSDoc を使って型を設定して開発しました。
HTMLCollection (getElementsByClassName の返り値)を配列のように [0] とインデックスでアクセスできないのは驚きました。昔は item(0) というメソッドを使う必要があったんですね。MDN
あとは、普通の関数を使う時には気をつけていたのに addEventListener の引数には素でアロー関数を使ってしまいエラーになったことくらいですね。
おわり
良い勉強になりました。大体1日ちょっとでなんとか出来上がりましたが、ここまで古いブラウザ向けの開発を行ったのは恐らく自分の人生の中では最初で最後となるでしょう。
ちなみに自分は Chrome が覇権をとっていくところをリアルタイムで見れた程度の世代です。みんなあんなに拡張機能がどうとか言ってたのに・・・。
そして、結局このスコアボードアプリは iPad のバッテリーがヘタりすぎててほとんど使ってないそうです。なんじゃそら。
おしまい。
Discussion