はじめに

皆さんはインターネット上に公開したくないけど、特定の人にだけ見せたいサイトを作ったことはありますでしょうか？

私は少し前にそう思ったことがあるんですけど、そのときの話をします。
(先に言っておきますが、実用性はゼロに近いのでただのロマンです)

やりたいこと

JavaScriptをscriptタグ内に、CSSをstyleタグ内にすべて実装して1ファイルだけで処理が完結するindex.htmlをiPad(iPhoneでも良いはず)のローカル環境で実行したい

とりあえず、最初にAndroidスマホで試してみた

経緯

iPad(もしくはiPhone)にデフォルトで搭載されているファイルアプリから他のアプリにHTMLファイルを送って開くことができるのは前から知っていたのですが、詳しくは分からなかったのでもう少し試してみようという感じです。

私の実行環境

iPad Air(第4世代)、iPadOS 18 (18の中のどのバージョンかは忘れました。)
Galaxy A22 5G (Android13)

実験に使う素材

今回使用するindex.htmlはMacのVSCodeで作成したもので、中身は見せられませんが簡単に言うと、

枠線の付いた正方形のcanvasタグの描画エリアに模様を描画する
模様の描画が終わったら終了メッセージをalert関数で表示する
徐々に浮かび上がってくる簡単なCSSのアニメーションが付いた文字列も用意、canvasタグの枠線には色が変わるCSSのアニメーションをつけている
アニメーション付き文字列にはGoogle Fontsのフォントを適用している(linkタグで読み込む方法を使用)

(言わなくても分かると思いますが、PCでは問題なく動作することを確認しています。)

実験1: Androidで開いてみる

用意したもの(わざわざiPadの環境に近づけました)

Galaxyにデフォルトで入っているファイルアプリ
Chrome
Edge
Firefox
Firefox Focus
Opera
デフォルトで入っていたHTMLビューアとかいう謎アプリ

実験1-1: とりあえずファイルをクリックしてみる

クリックすると開くアプリを選ぶ表示が出て(出ない場合はファイル選択もどから「その他」を選び「実行方法」を選びます。)

Chrome
Edge
Opera
HTMLビューア

が選択肢にありました。(Googleドキュメントもありましたが、流石に試しませんでした。ドキュメントじゃ、絶対開けないでしょ)

Chrome, Edge, Opera

模様の描画
alert関数の処理
CSSアニメーション
Google Fonts

もう完璧！これはiPadでも期待できますね。

HTMLビューア

模様の描画
alert関数の処理
CSSアニメーション
Google Fonts

canvasタグの中身が無になっているのか分かりませんが、幅と高さが0になり、色のアニメーションが動いている豆粒サイズのcanvasができました(笑)

これはダメですね

実験1-2: 上手く行ったブラウザで開いていたリンクを他のブラウザで開いてみる

今回上手く行った3つのブラウザはいずれも

content://media/external/file

から始まるリンクだったので、このリンクをコピーして他のブラウザで開いてみました。

Firefox

「ファイルが見つかりません」と言う表示が出て終わった。もしかしたら実行権限をどこかで変更できるなら行けるのかも？

Firefox Focus

Firefoxと同じ結果

実験2: iPadで開いてみる

Androidはほぼほぼ良い感じの結果だったので、本命のiPadで開いてみます。

用意したもの

Apple純正ファイルアプリ
ReaddleのDocumentsというアプリ
Safari
Chrome
Edge
Firefox
Firefox Focus
Opera

実験2-1: とりあえずファイルをクリックしてみる

iPadのファイルアプリに置いておいたindex.htmlをクリックすると、勝手にDocumentsアプリが起動しました。

結果としては、

模様の描画
alert関数の処理
CSSアニメーション
Google Fonts

という感じでした。
インターネット上からフォントを取ってきているので、フォントが適用されないかと思っていたのですが、まさかのalert関数が機能しないという結果に...

それ以外は問題なく動きました。

実験2-2: ファイルアプリ内で開いてみる

index.htmlを長押しして「新規ウインドウで開く」を選択して、ファイルアプリ内で開いてみる。

結果としては、

模様の描画
alert関数の処理
CSSアニメーション
Google Fonts

という感じでした。
模様の描画はされず、正方形のサイズで設定したはずのcanvasタグの領域が長方形になりました。正方形ではなかった理由はおそらく描画しているものがなかったからだと思います。
また、alert関数はDocumentsのときと同じで機能せず、フォントも適用されませんでしたが、CSSのアニメーションだけ動きました。

これは酷い

実験2-3: ブラウザで開けないか試してみる

PCでデバッグするときはブラウザでlocalhostを開いてやることが多いので、ブラウザで開けたら問題なく動くのではないかと思い、試してみることにしました。

とりあえずindex.htmlを長押しして「共有」を選び、開くアプリを見たところ「用意したもの」に書いた通り、Webサイトのデバッグのために6つのブラウザを入れているにも関わらず、まさかの選択できたブラウザはEdgeだけ

結果としては、

模様の描画
alert関数の処理
CSSアニメーション
Google Fonts

という感じでした。
フォントだけ読み込めなかったのは惜しい

実験2-4: Edgeで開いたときにアドレスバーにあったリンクを他のブラウザで開いてみる

Safari

「ページを開けません。これはローカルファイルです。」というメッセージが出て終わった。

Chrome

無理そう

Firefox

無限にロードしてる

Firefox Focus

無理そう

Opera

無理そう

謎現象

最初、数回Edgeで開いていたときは

file://private/var/

から始まるかなり長いリンクを開いていたのですが、このリンクをコピーしてEdgeで開いたら開けなくて、一度タブをすべて消してファイルアプリからもう一度開いたら

edge://external-file/index.html

と言う短いリンクに変わっていました。なぜ？

ちなみにEdge以外で開いてみる実験は**file://private/var/**を使用しています。(短いリンクは明らかにEdge用のリンクにしか見えなかったので)

結果

Androidは行けるけど、iPadで問題なく動かすのはおそらく不可能(専用のアプリがあるなら別)

Web開発していていつも面倒なのがApple製品なので、今回の実験をやってみて「またお前か」と思いました。
まぁ、セキュリティがAndroidよりも強固なのが理由だと思うのでユーザーとしては嬉しいですけどね(開発者目線だと厄介)