ラック
Home > ブログ > 記事 > 2017年11月 > HTML5は魔法の言葉ではない

HTML5は魔法の言葉ではない

カテゴリ: ホームページ,プログラム

つい先日、「なんかHTML5って万能感あるんだけど?(やや誇張)」というちょっと今更感のある話題が我が身に降ってきたので書き留めておきます。

確かに、OSの垣根を越える手段の一つとして利用でき、HTML5で策定された仕様でよりネイティブアプリっぽいこともできるようにはなりました。そうした意味ではちょっと強くなったかもしれません。

しかし、やはりWebはWeb。基本的には

  • PCはインターネットに接続できる環境にある
  • ブラウザでURLを入力したりハイパーリンクでジャンプしたりして、Webサーバに置いてあるリソース(HTML, css, JavaScript, 画像や動画, etc.)を取得する
  • それらのリソースを使ってブラウザ上で描画・表示する

という原則があると思うのです。思うのですが

1.OSを問わずに動作させたい

これは分かります。ブラウザ間の差異という大きな課題はあるものの、デバイスやOSに強く依存したくないのであれば、Webは候補の一つとして挙がるでしょう。

2.なるべくクリーン・シンプルな環境で動作させたい

確かに、これもWebの強みではあります。ブラウザさえあれば、HTML + css + JavaScriptによるアプリケーションを作ることは可能です。

3.なるべくWebサーバ建てないで(ローカルで動作させたい)

……ちょっと待って頂けませんかね?上述の通り、サバクラの関係性があってのWebだと思うのですが……。

と、この辺りで雲行きが怪しくなってきました。以下、聞いた話とその回答を参考サイト付きで書きたいと思います。

ウインドウ操作関係

4.Webページを開くと同時に全画面表示したい

確かに、ブラウザはF11で全画面モードにできる機能が付いていますね。これを使えばできそうです……が。

フルスクリーンAPIはセキュリティ上の理由でclickイベントなどユーザー操作を起因して実行される関数内でしか実行できません。

そうしないと、timer(setInterval)でフルスクリーンを戻しても戻しても、解除させないなど作れてしまうため、そういう事が出来ないようになっています。

javascript - javascriptからのクリックを拒否する方法 - スタック・オーバーフロー

言われてみれば、これが実装できるとブラクラができてしまいますね……セキュリティの観点から、ブラウザ側でブロックするようになっているようです。 ということで、Webページを開くと同時にフルスクリーンは不可。何かのボタンを押させるなど、「ユーザの操作に起因するフルスクリーン化」は可。

5.フルスクリーンができないならば最大化

JavaScriptで操作できるのはJavaScriptで起動された子ウインドウだけ(セキュリティの都合より)。ということで「表示と同時にそのウインドウを最大化」はできないようです。

6.Webページ内の「閉じる」ボタンを押すとページを閉じる

Chrome等では

Scripts may close only the windows that were opened by it.

という警告が発せられて閉じることができなません。

JavaScriptで閉じることができるのは、JavaScriptによって起動された子ウインドウだけとのこと(上に同じくセキュリティの都合より)。自動起動など、他の方法で開いたタブ(ブラウザ自身)は閉じることができなません。

ということで画面操作系は悉くダメですね。

ファイル操作関係

7.ローカルの決められたフォルダ・ファイルにデータを吐き出したい

書き込み・保存ができる様になったといっても、File APIでアクセスできるのはあくまでユーザーが指定したファイルだけになります。

セキュリティの問題上でパスを「C:\file.txt」や「../text/file.txt」の様に指定してファイルを書き直す事はできません。

HTML5のFile APIでローカルファイル情報取得してやんよ!!! | ときどきWEB

特定のフォルダやファイルを決め打ちしてデータを吐き出すことができません。ユーザにフォルダやファイルを指定する形になります。

また、ローカル上で動作させる場合は外部ファイル読み込みに制限があるため、これも難しいです。やっぱり、何某かのWebサーバを建てる方が早いですね。そもそもWebってそういうものでしょう?

8.ローカルの決められたフォルダ・ファイルのデータを読み込ませたい

JavaScriptで読み込ませるとしたら、jsonをajaxで、でしょうかねぇ……と考えて調べてみました。

Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

Chrome等では上記のように怒られます。

httpftpといったプロトコルでないとクロスオリジンは許可されないようです。つまりfile://で始まるローカルファイルへのアクセスはjQueryのajaxでは不可、と。

その他

9.JavaScriptでPOST取得

Javascriptはクライアント側のスクリプト言語なので、基本的にPOSTデータの受信は不可能

JavaScriptでのPOSTの受け取りは不可。言われてみればそうですね。まあ、サーバサイド……node.jsとかであれば話は別ですが、今回はブラウザ上(クライアントサイド)なので……。

10.submit前にJavaScriptの処理を挟む

これはできますね。onsubmitでイベント発火させて処理を実行させれば良いです。formタグにonsubmit="return function();"として関数を実行させれば良いです。


ということで、物事には得てして得手不得手というものが存在するわけでして、今回の話は総じてWeb向けではない、ということでした。

タグ: css,javascript,html

 



関連する記事一覧