Viteの環境変数を用いて開発版とリリース版でソースコードの修正をなくす

開発版は開発用APIを参照し、リリース版はリリースサーバーのAPIを参照させたいときなど、実行やビルドする際にいちいちソースを修正していたのだが、さすがに面倒だしミスも起こりやすいので、修正しなくてもいい方法はないかと調べたら、ちゃんとありました。

環境変数とモード｜Vite

ソースコード中で、import.meta.env.PROD:{boolean}の値をみて、APIのURLを変更するなどすれば、OK。

また、vite.config.tsの、base:で指定したBASE URLは、ソースコード中で、import.meta.env.BASE_URL: {string}として参照できる。

プリペアードステートメントにIN()を使いたい時

以前からSQLのINをプリペアードステートメントで使うたびに躓くのだけど、これを機会に正攻法を確認しておく。

１）プリペアードステートメントを以下のように作成する

$params = array('aaa', 'bbb');
$in_param = implode(',', array_fill(0, count($params), '?');
$sql = '...WHERE IN('.$in_param.')';
$stmt = $mysqli->prepare($sql);

２）バインドする

$stmt->bind_param(str_repeat('s', count($params)), ...$params);

ポイントは、PHP5.6から使えるようになった「... による可変個引数関数」。

参照「[PHP] mysqliのbind paramに可変する引数を渡す」

Vue Routerの二つのHIstory Modeについて

Vue Router のHistory Mode（ページ履歴動作）には、従来からhashモードとHTML5 historyモードの二つがありました。hashモードは、#で指定されるURLフラグメントを用いる形式で、HTML5 historyモードはURLフラグメントを使用しません。

Vue Router Ver 3.xの既定はhashモードでしたが、Ver 4.xでは、HTML5 historyモードの使用が推奨されています（Different History modes）。

意識せずにVue Router Ver 4.xを使用したアプリケーションをつくって、ページをリロードしたら404エラーが返ってきて、ちょっと慌てました。意識してhistoryモードにした覚えがないので、URLに#がなくなって、「お、#がなくなってすっきりしたな」などと喜んでいたら、単にHTML5 historyモードになっていただけでした。

HTML5 historyモードは、当然ながらサーバー側の設定が必要なので、Different History modesの、設定例（今回はApache）にしたがって設定しますが、当該アプリケーションはサーバーのサブフォルダーに設置されていたので、以下の記載に従いました。

Note: The following examples assume you are serving your app from the root folder. If you deploy to a subfolder, you should use the publicPath option of Vue CLI and the related base property of the router. You also need to adjust the examples below to use the subfolder instead of the root folder (e.g. replacing RewriteBase / with RewriteBase /name-of-your-subfolder/).

示されていたApacheの設定例

<IfModule mod_negotiation.c>
  Options -MultiViews
</IfModule>

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>

上記のNoteに従って設定例のRewriteBaseを、

RewriteBase /name-of-your-subfolder/

に置き換えてリロード！→404エラー！

最後のRewriteRuleを、

RewriteRule . index.html [L]

に変更しないとだめだよね…。

AlertDialog上のradioボタンの選択状態が更新されない

 最近、Flutterを使った開発にも慣れてきて、なんとなくFlutterがわかった気になっていたところにタイトルの状況にぶち当たって、目の前が真っ暗になりました。

AlertDialog上でRadioボタンの選択状態を変更しても画面上では選択状態が更新されませんが、AlertDialogを閉じて再度開くと選択状態は更新されているので、表示更新の問題であることがわかります。

馬鹿の一つ覚えでsetState()で表示更新させればいいんでしょと思っていたので、setState()を使っているのに表示が更新されないとわかって、まさに絶望の淵に立たされたのでした。

しかし、Flutterユーザーも増えてきた昨今では、先人がネットに情報をあげてくれています。本当にありがたいことです。

それによると、StatefulBuilderを使う必要があるとのこと。

StatefulBuilderの説明にある、プラトニックウィジェット（platonic widget）ってなんだ？、と思いましたが、まあ、今回の場合で考えれば、AlertDialog内のRadioで呼ばれたsetState()を、AlertDialogの外に伝えてくれるだけの役割を果たす観念的なウィジェットという感じでしょうか？

Avoid using web-only libraries outside Flutter web plugin packages.と怒られる

 Flutter web でブラウザをリロードされた際に、その時表示されていたページによって処理を分岐したくて、dart:htmlをimportしてwindow.location.hrefでURLを取得していたら、Avoid using web-only libraries outside Flutter web plugin packages.と怒られるのだが、じゃあ、どうすればいいんだよ！としばらく放置していた。

Uri.base を使えばいいそうだ。

The natural base URI for the current platform.

When running in a browser this is the current URL of the current page (from window.location.href).

When not running in a browser this is the file URI referencing the current working directory.

 

Flutter 開発メモ

 開発中に使用したが、結局使わなくなったのでソースから削除するけど、後で使うかもしれない機能メモ

指定した型の一番近い祖先Widgetを返す

MyApp? myApp = context.findAncestorWidgetOfExactType<MyApp>();

Flutter web でmanifest.jsonが401エラーになる

開発中のFlutter webアプリをサーバにデプロイしてChromeでアクセスしたら、DevToolsのコンソールで、manifest.jsonが 401エラーになっているのがわかった。

なんだよ気持ち悪いなぁと調べていたら、まだ開発中ということでデプロイ先のフォルダにBasic認証をかけているのが原因らしい。

index.html内の

<link rel="manifest" href="manifest.json">

を、以下のように変更したら解消した。

<link rel="manifest" href="manifest.json" crossorigin="use-credentials">

参考 MDN