Flutter web をドキュメントルート以外に設置する

 Flutter web をドキュメントルート以外に設置する方法は、Flutterのドキュメント（Configuring the URL strategy on the web）のHosting a Flutter app at a non-root locationに以下のように書かれている。

Update the <base href="/"> tag in web/index.html to the path where your app is hosted. For example, to host your Flutter app at myapp.dev/flutter_app, change this tag to <base href="/flutter_app/">.

これを受けて、私もbuild/web/index.htmlを直接書き換えていたが、忘れてそのまま設置してしまう可能性もあり、何とかならないのかと思って、build下ではなくプロジェクト直下のweb/index.htmlをみると、以下のように変数指定されている。

<base href="$FLUTTER_BASE_HREF">

これは、どこかで設定しておけるはずだと思い、いろいろ探してみたがそれらしい場所がない。

ターミナルでhelpすると、

> flutter help build web

Usage: flutter build web [arguments]

--base-href                        Overrides the href attribute of the <base> tag in web/index.html. No change is done to web/index.html file

なるほど、上記のドキュメント例なら、以下のようにbuildすればいいということか。

> flutter build web --base-href "/flutter_app/"

ドキュメントに一言、書いておいてください。

Element PlusのDatePickerで週の開始日を指定する

 ElementのDatePickerではfirstDayOfWeekを指定することによって、週の開始日（曜日）を指定することができた。

ところが、Element PlusのDatePickerでは、そのようなオプションが見当たらない。

https://github.com/element-plus/element-plus/issues/1055によると、代わりにDay.jsのロケールを使ってねということらしい。

例えば、Day.jsのアフリカのロケール（af.js）には、以下のような記述が含まれている。

weekStart: 1

これを使うらしい。

日本のロケール（ja.js）には、そのような記述が含まれていないが、追記したものを別ロケール（ja-my.js）として保存した。

通常は、

import ElementPlus from 'element-plus'

import locale from 'element-plus/lib/locale/lang/ja'

createApp(App).use(ElementPlus, { locale })

とすることで、Day.jsのロケールも自動的にセットされるのだが、

import 'dayjs/locale/ja-my'

dayjs.locale('ja-my')

を追加することで、今回作成した週の開始日が指定されたロケールを指定できるようだ。

以下は、土曜日を週の開始日に設定した例

ちょっと、これはドキュメントを読んでもわからないよなぁ。
もっとも、こんな変則的な曜日並びのカレンダー表示させるほうがおかしいと言われれば、その通りなんだけど。

VueアプリケーションのVersion管理（キャッシュ対策）

 VueでSPAアプリケーションをつくってWebに公開すると、はじめから予想されたことだが、ブラウザにキャッシュされるので、サーバにおくアプリケーションのバージョンをあげても、ローカルの古いバージョンのまま使用するユーザーが発生する。

やはり、最初にサーバから現在のバージョン番号を取得して、自分自身（ローカル）のバージョンと異なったらリロードしてもらうのがいいだろう。

自分自身のバージョンは、package.jsonのversionを利用することにしよう。

import { version } from '../../package.json'

なお、上記で以下のエラーが出る場合は、

Cannot find module '../../package.json'. Consider using '--resolveJsonModule' to import module with '.json' extension.Vetur(2732)

tsconfig.jsonに、以下を追加する。

"compilerOptions": {

↓↓

  "resolveJsonModule": true,

↑↑

アプリケーションが表示されたら、最初にサーバにアクセスしてバージョン番号を取得し、自分自身のバージョンと比較して異なる場合は、以下のようにリロードする。

location.reload()

リロードした結果、サーバとローカルのバージョンが一致すれば「更新しました」、一致しなければ「更新できませんでした」のようなメッセージをそれぞれ表示させる。

くれぐれも、一致するまでリロードが無限ループしないように注意。

当該処理が、リロード後であることを判断する方法は、いろいろあるようだが、検証が面倒なので、今回はsessionStorageを使った。

location.reload(true)がdeplicatedになって、location.reload()だとキャッシュ読んじゃうんじゃないかと心配したが、ちゃんと更新してくれたのでとりあえず、深入りしないことにしよう。

PHPで$_POSTが消える

PHPで組まれたあるシステムのPOSTした先のページで、特定条件でエラーが発生するという報告を受けました。

発生しているエラー内容は、本来数値であるべきところに数値以外の値が入力されたというような内容です。

エラーが発生しない場合もあるので、単純な書き間違いではないことは明らかです。

エラーが発生している箇所に係るPOST変数の内容を確認したところ、emptyでした。

数値が入っているべき変数がemptyだったために発生しているということです。

特定条件でemptyになるということは、どこかで上書きしてるとか…。

しかしながら、そのような箇所は存在しませんでした。

次に、エラーが発生しているページで$_POSTをvar_dumpしてみました。

確かに、当該POST変数がなくなっています。

$_POSTのダンプをみていたら、配列の次元が1000になっていることに気づきました。

「これは怪しい」

調べたところ、POST変数の数に上限を設定できる機能があり、php.ini等に設定できるようです。

max_input_vars

このディレクティブを使うと、ハッシュの衝突を悪用したサービス不能攻撃を受ける可能性を軽減できます。

とのことで、phpinfo()で現在の値を確認すると、1000ということで、どうやら間違いなさそう。

当該ディレクティブ本来の意義から、最低限の設定値を見積もって再設定したところ、無事すべてのPOST変数を受信できました。

VS Codeのターミナルでconda activate my_envが反映されない

GeoJsonファイルからShapeファイルを作成する必要があったので、以下の投稿を参考にさせてもらった。

https://www.gis-py.com/entry/geopandas_shape

ところが、geopandasのインストールがconflictしまくってできない。

以下の Creating a new environment を参考に、別環境を作ってやっとインストールできた。

https://geopandas.org/install.html

しかしながら、VS Codeで実行しようとするとインポートできないというエラーが発生する。

VS Codeのターミナルで、どの環境で実行しているのかを確認する。

>conda info -e

案の定、geopandasをインストールした環境ではない。環境を選択するには、

>conda activate my_env

再度、確認しても変更されていない！

コマンドラインからは実行できたので、VS Codeの設定の問題かと試行錯誤した結果、よくよく考えるとVS CodeのターミナルはPowerShellだった。

VS Codeとは別に、PowerShell単体で確認したところ同じ現象が確認された。

調査対象をPowerShellに切り替えたところ、以下の情報にたどり着いた。

https://github.com/conda/conda/issues/8428

conda init powershell

この後、PowerShellでも、環境の選択が可能になった。

TypeScriptでGoogle Maps

さて、VS CodeでTypeScriptをかけるようになったら、次はGoogle MapsをTypeScriptでかきたい。

課題としてはGoogle Mapsにお絵描きだ。
はて？TypeScriptソース内にGoogle Maps JavaScript APIをどうやって導入すればいいんだろう、と思っていたら、AngularでGoogle Maps JavaScript APIを使っている投稿があるので参考にさせてもらう。

1. Install Google Maps types for typescript support

   npm install --save @types/googlemaps

2. Import the Google Maps types into component

   import {} from 'googlemaps';

3. 以下の１行を記載した新規TSファイル「index.d.ts」を設置

   declare module 'googlemaps';

これで、TypeScript内で「google.maps」が使えるようになった。

VS CodeのTypeScript動作確認でいきなりつまずく

今更ながら、VS CodeでTypeScriptでもやっちゃおうかなー、などと軽い気持ちでVS CodeのTerminalをたたく…

> npm install -g typescript

 動作確認は…か、

> tsc --version

tsc : このシステムではスクリプトの実行が無効になっているため、ファイル C:\Users\hogehoge\AppData\Roaming\npm\tsc.ps1 を読み
込むことができません。詳細については、「about_Execution_Policies」(https://go.microsoft.com/fwlink/?LinkID=135170) を参
照してください。
発生場所 行:1 文字:1
+ tsc --version
+ ~~~
    + CategoryInfo          : セキュリティ エラー: (: ) []、PSSecurityException
    + FullyQualifiedErrorId : UnauthorizedAccess 

なになに、デフォルトではWindowsのPowerShellスクリプト実行ポリシーによって実行が許可されていない…

https://attakei.net/blog/2019/windows-vscode-venv/index.html
ふーん、settings.jsonで、ターミナル起動時にPowerShellの実行ポリシーを変更できるのか…

{
  "terminal.integrated.env.windows": {
    "PSExecutionPolicyPreference": "RemoteSigned"
  }
}