JavaScript

背景

Webの機能には、httpsでアクセスしているときにしか利用できないものがあります。 例えば、navigator.clipboardを用いてクリップボードへ書き込む機能はhttpsでアクセスしているときにのみ利用可能です。 ローカル環境においてhttpで走っている開発中のアプリに対して、こういった機能をテストするために、httpsでアクセスしたい場合があります。

ローカルでhttpsアクセスをhttpアクセスへ振り向ける方法

以下のコマンドを実行すれば、httpで走っている（ http://localhost:3000/ ）アプリに、ブラウザからhttps（ https://localhost:3001/ ）からアクセスできるようになります。

npx local-ssl-proxy --source 3001 --target 3000

なお、アプリが走っているPCとは別のデバイスからアクセスする場合には、httpのポートのために行ったポートフォワーディングやファイアウォールの設定がhttpsのポートにも必要となります。

• （設定方法の参考資料） WSL2上にてrails serverで立ち上げたサーバに別デバイスからのアクセスを可能にする方法

余談その1

Copilot先生によれば、httpで走っているアプリにhttps相当でアクセスするための別の方法としては、以下のものがあるそうです。

• localtunnelなど、ローカルで走っているアプリをインターネットに公開するサービスを利用してしまう。
• Chrome DevToolsのリモートデバッグ機能を利用する。

なお、Copilot先生の回答全文はこちらです。

余談その2

local-ssl-proxyは、Copilot先生に教えてもらいました。Google検索ではlocal-ssl-proxyにはたどり着いていませんでした。

• StimulusのTarget・Value・Action Parameter： https://picolab.dev/2023/11/01/stimulus-starter-params/

Stimulusには、Targetに、Valueに、Action Parameterにと、HTML側からJavaScript側へ何かしらを引き渡す仕組みがいろいろとあります。ですので、これら3つの仕組みについてサンプルコードを交えて説明する記事を書きました。

公式ドキュメント（英語）

• ハンドブック（入門書）： https://stimulus.hotwired.dev/handbook/introduction
• リファレンス（詳細な説明）： https://stimulus.hotwired.dev/reference/controllers

公式情報がしっかりしているので、まず読むならこれら公式情報でしょうが、英語なのが日本人にはちょっと大変。

QRコードのセル数を少なくするために（つまり、印刷されたときの1つのセルを大きくするために）Versionはできるだけ小さく、また、くっきりと印刷するためにSizeは大きめに設定すると良いようです。 ちなみに、合成したQRコードを家庭用プリンタで縦横4cm弱で印刷しましたが、Versionを10に設定した場合はときどきしか認識に成功しませんでした。そこで、Versionを4に設定したところ、認識率が大分改善しました。

GitHubのReadmeで紹介されている以下のリンク先で、すぐにこのライブラリを利用してQRコードと画像の合成が出来て便利です。

https://kciter.so/qart.js/

インストールしたりコードを書いたりしなくても利用でき、すぐに試せるのは嬉しいです。