JavaScript

Create an Item

Items

Latest comments

local-ssl-proxyを使ってhttpsでhttp://localhost:3000/へアクセスする方法

wakairo @wakairo
Last edited

背景

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のポートにも必要となります。

余談その1

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

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

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

余談その2

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

0
Raw
https://www.techtips.page/en/comments/291
😄1
🔧1
❤️1

Stimulusの記事の情報が集まるTopic

wakairo @wakairo
Last edited

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

0
Raw
https://www.techtips.page/en/comments/206

Stimulusの記事の情報が集まるTopic

wakairo @wakairo

公式ドキュメント(英語)

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

0
Raw
https://www.techtips.page/en/comments/205
😄8

qart.jsで作成したQRコードを紙に印刷して使う場合のノウハウ

wakairo @wakairo

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

0
Raw
https://www.techtips.page/en/comments/87

すぐに合成が可能

wakairo @wakairo
Last edited

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

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

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

0
Raw
https://www.techtips.page/en/comments/21