普通のレンタルサーバーで普通に動くBlazorのWebアプリ
拙者みたいな江戸時代から代々Webデザインを家業にしているような中流Webデザイナーからすると、Webブラウザが実行できる唯一のプログラミング言語と言えばJavaScriptのみである。
だから、Webアプリっぽいものを作ろうとすればJavaScriptの上級スキルが必須・・・というのは一昔前の話で、令和5年の現代においてはC言語とかC#とか、おおよそWebサイト制作とは縁が無さそうな言語までがWebブラウザで実行できるような変換技術が開発されているのだ。
それがWebAssemblyという技術である。
Blazor WebAssemblyとは
誤解を恐れずに(99%誤解しているかもしれない)言うと、Blazorはマイクロソフトが開発したC#版のRuby on Railsみたいなものである。
自動的に作られるWebアプリのテンプレート的なものをベースにして、ちょこまかと必要な所をいじれば3分クッキング的にWebアプリが完成するというアレだ。実際には3分では無理だと思うけど、腕に覚えがある人ならば、ちょっとしたWebアプリだったら2～3時間で作れないこともないという。
Blazorには拙者が把握している範囲では、大きく分けて2種類存在している。一つはサーバー上で色々やるタイプの本格的なサーバーサイド型のBlazor Serverだ。これは現在の拙者のテクノロジーレベルでは手が出せないので割愛する。
もう一つが本項で取り上げるBlazor WebAssemblyである。
拙者が思うにBlazor WebAssemblyでは、世界より5年遅れの日本Web界としては現状ほとんど取り上げられていないにも関わらず、Ruby on RailsとかPHPフレームワークのLaravelとかと違って、そのへんの適当なレンタルサーバーにFTPでポンっと上げるだけで動作するWebアプリが作れることである。
本格的なデータベースがどうのこうとなると話は別だと思うけど、外部と通信しないようなタイプのWebアプリだったら、本当にそのへんのレンタルサーバーで普通に動作する驚ぎの技術なのだ。
しかも書いているプログラミング言語はC#っていうのも驚ぎだし、おそらくはJavaScriptに変換されているのかよくわからないけど、実際上、とてもスムーズにWebブラウザで動作するWebアプリが作れるのである。
実際のサンプル制作については、下記の電子書籍を参考とした。
FTPでアップするとハッシュがどうので動かない
Blazor WebAssemblyは中流Webデザイナーの常識を超えた技術であることはすでに述べたが、Visual Studioでサンプルアプリを作ってローカルに書き出してFTPで任意のディレクトリにアップしたところ、「Loading…」という表示で止まってしまう現象に悩まされた。
しかも、Chromeでは普通に動作するのに、FirefoxだけLoading…で停止するという気持ち悪い状態。
まぁ、ChromeはHTMLの記述が間違ってたりしても勝手に直して表示してくれたりするから、厳格なFirefoxだけエラーが出るというのはありがちではあるけど。
integrity 属性内の “sha256” ハッシュが・・・というエラー
途方に暮れても仕方がないので、Firefoxのデベロッパーツールのコンソールを覗いてみると下記のエラーが表示されていた。
「integrity 属性内の “sha256” ハッシュが subresource のコンテンツと一致しません。」
はい、そうですか・・・、としか言えないのが中流Webデザイナーの限界。上級エンジニアみたいな人じゃないと全くわからんですわ。
普通はエラー文言で検索すると解決策のページに引っかかったりするもんだけど、5年遅れの日本ではBlazor人口が少ないので、ほとんど情報が引っかからないという。
1件だけ日本語のページ様が引っかかってバイナリモードで転送を試みるも拙者の環境では改善されなかった。
「所詮は中流Webデザイナーの手に負えるものじゃないな」と諦めて寝ることにした。
解決策は2か所消すだけだった
翌朝、早起きタイプの拙者は午前5時から何気なく検索キーワードを変えて、懲りることなく解決策を探すことにした。
その中で得た情報としては、FTPでアップする前に2か所だけ削除すると良いということであった。似たようなことで困る人は沢山いると思うけど、本当に情報が少ないよ、Blazor君・・・。
解決策はプログラムの知識は関係なく、テキストエディタでローカルに書き出された下記のhtmlとjsonをいじるだけ。
index.html
最初に読み行くファイルである。
head内にある「
blazor.boot.json
_frameworkディレクトリにある。名前順だったら一番上にあるはず。
このジェイソン君の2行目あたりに
“cacheBootResources”: true,というのがあるので、価をfalseに変える。
つまり正解は
“cacheBootResources”: false,
エラーの原因を推察してみる
中流Webデザイナーの理解には限界があるが、改行コードの問題らしい。
WinSCPを使ってFTPで転送する時にバイナリモードにしたけど、それでもだめだった。FileZillaとか他のFTPソフトだったり、Windows環境なのがダメだとか、MacとかUNIX系だったら問題ないのかしらん。
Blazorに挑戦したいニッチなWebデザイナーの人とかの参考になればと思う。にしても、ChromeとFireFoxでここまで表示に違いが出るのは、さすがWebアプリといったところか。
