2021年7月1日木曜日

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')

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

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


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


2021年6月12日土曜日

Google Mapsでロングタップイベントを扱う

自分ではあまりタブレットを使う機会がないので、ロングタップに対応してくれと言われて、えっ!となり、「Google Maps JavaScript APIでは対応してないんじゃないですかねー」などとすっとぼけようとしたら、ネットにGoogle Maps でロングタップをあつかえるという情報があると言われて、(仕方なく)確認したら、確かに「Google Maps でロングタップのイベントを発生させるには」という投稿が…。

なるほど、mousedown と mouseup の間隔が一定時間以上なら、ロングタップとして扱えばいいのか、なんだ簡単じゃない、などと、さっそく試してみる。

おー、できた。

後日、「対応できます」などと安請け合い。

実装後テストしていると、地図をドラッグするたびに意図しないロングタップイベントが発生しまくり…

なるほど、確かにドラッグは、mousedown と mouseup の間隔が一定時間以上になる(ことが多い)よね…。

ということで、時間間隔だけでなく、mousedown と mouseup の座標から距離を算出して、mousedown と mouseup間の距離が一定以下であれば、ロングタップとして認めてやろうという慈悲深い指示をプログラムに与えて、静かにエディタを閉じるのであった。

2021年6月4日金曜日

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()だとキャッシュ読んじゃうんじゃないかと心配したが、ちゃんと更新してくれたのでとりあえず、深入りしないことにしよう。

2020年5月13日水曜日

PHPで$_POSTが消える

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

発生しているエラー内容は、本来数値であるべきところに数値以外の値が入力されたというような内容です。
エラーが発生しない場合もあるので、単純な書き間違いではないことは明らかです。

エラーが発生している箇所に係るPOST変数の内容を確認したところ、emptyでした。
数値が入っているべき変数がemptyだったために発生しているということです。

特定条件でemptyになるということは、どこかで上書きしてるとか…。
しかしながら、そのような箇所は存在しませんでした。

次に、エラーが発生しているページで$_POSTをvar_dumpしてみました。
確かに、当該POST変数がなくなっています。
$_POSTのダンプをみていたら、配列の次元が1000になっていることに気づきました。
「これは怪しい」
調べたところ、POST変数の数に上限を設定できる機能があり、php.ini等に設定できるようです。
このディレクティブを使うと、ハッシュの衝突を悪用したサービス不能攻撃を受ける可能性を軽減できます。
とのことで、phpinfo()で現在の値を確認すると、1000ということで、どうやら間違いなさそう。

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

2020年5月8日金曜日

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

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


ところが、geopandasのインストールがconflictしまくってできない。
以下の Creating a new environment を参考に、別環境を作ってやっとインストールできた。


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

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

>conda info -e

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

>conda activate my_env

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

コマンドラインからは実行できたので、VS Codeの設定の問題かと試行錯誤した結果、よくよく考えるとVS CodeのターミナルはPowerShellだった。
VS Codeとは別に、PowerShell単体で確認したところ同じ現象が確認された。

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


conda init powershell

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

2020年4月28日火曜日

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. 以下の1行を記載した新規TSファイル「index.d.ts」を設置

    declare module 'googlemaps';

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

2020年4月25日土曜日

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"
  }
}