はじめに
前回の記事から、だいぶ期間が開いてしまいましたが、クリスマスも近いことですし、１回こっこりのアドベントカレンダー企画として、ウェブアプリを作ってみました。
ウェブアプリとは？
私自身も作るのは初めてなのですが、ここで言うウェブアプリとは、普通のウェブページをあたかもアプリの如くPCに追加できる仕組みのようです。
また、ウェブページなので、普通にHTML,css,javascript等の技術を組み合わせて作ることになるかと思います。
とりあえず作ってみる
まずはお試しということで、超シンプルな、バイナリビューワーを作ってみます。
完成図はこちら。
ローカルにあるファイルを選択し、その内容をバイナリダンプして表示します。
※お試しで作っただけのであまり大きなファイルは表示しないでください。
あと、もちろんファイルを勝手にサーバーに送るとかしてません。
ローカルファイルへのアクセスについて
ローカルの資源に対してブラウザからアクセスするというのは、セキュリティ的にどうなんだという事で、サンドボックス化のような制限が行われ、簡単にはアクセスできない。
なので、とりあえず一旦サーバーにデータを送信して...というような、ついこないだまではそんな状況だった気がします。
現在は、FileSystemAccessAPIというものがあり、簡単にローカルファイルにアクセスできるようですので、早速このAPIを使って作成してみました。
<input type="file" id="fileInput">
const fileInput = document.getElementById('fileInput');
fileInput.addEventListener('change', (event) => {
const file = event.target.files[0];
if (!file) return;
const reader = new FileReader();
reader.onload = function(e) {
const arrayBuffer = e.target.result;
const uint8Array = new Uint8Array(arrayBuffer);
HexDump(container, uint8Array);
};
reader.readAsArrayBuffer(file);
});
実行許可をユーザーに得るような仕組みもなく、簡単にローカルファイルへのアクセスが作成できます。
（ファイルはユーザーが選択しているわけですから、それ自体が実行の許可と言ってしまえばそうなのかとは思います。）
あとは、読み込んだデータをガリガリとJavascriptで画面に表示するだけです。
今回は、Canvasを使用して表示処理を作っています。
作ったソース一式は、Githubにアップしてあります。
ウェブアプリとして動作させるには
ブラウザでアプリのページを開く
VS Code でデバッグしているときは、Live Serverを利用してデバッグしてました。
デバッグも終わり、いざアプリとして動作させようと思い、とりあえず適当なWEBサイトにアップ。それをブラウザで表示してみます。
先ほどのGithubのページにデモ用サイトのリンクを貼っておきましたので、よかったらブラウザから表示してみてください。
アプリとして登録する
ブラウザにて表示させた時点で、バイナリビューワーとして機能しているのですが、これをアプリとしてインストールします。
例えば、Edgeの場合は、「...」のメニューから「その他のツール」→「アプリ」→「このサイトをアプリとしてインストール」を実行します。
以下のような確認画面が表示されるので、インストールボタンをクリック。
更に、以下の画面で、「タスクバーにピン止め」を実行していただければ、Windowsであれば、タスクバーに表示され、いつでも気軽に起動できる状況になります。
そうすることで、最初の完成図のような、ブラウザ特有の進むボタンや戻るボタンのない、シンプルなウィンドウであたかもアプリとして動作するようになります。
おわりに
個人的には、XAMLでWindowsネイティブのUIを作ったり、XMLでAndroidネイティブのUIを作ったり、ネイティブも嫌いではないのですが、Javascriptでどんな環境でも動作するような仕組みで、それなりのパフォーマンスも得ることができる。
ノーコードやローコードの時代に、アプリを作っていること自体、まだまだ時代に取り残されているのかもしれませんが、もうしばらく、来年もノーコードに立ち向かっていくぞと思う年の瀬でした。