Media
2 items
Description
WEBサービスのローカル環境での開発効率向上のため、デバイスの実機確認をスムーズにできるように拡張機能を作成しました！… WEBサービスのローカル環境での開発効率向上のため、デバイスの実機確認をスムーズにできるように拡張機能を作成しました！ 動作原理としては、同一ネットワーク内（同じWiFi配下など）では、hostnameやIPアドレスでローカル環境に起動したサーバーにアクセスできる仕組みを活用して、「http://localhost:3000」などのアドレスをユーザーが任意に入力したhostnameを元に同一ネットワーク内でアクセス可能なURLに変換してスマホやタブレットにそのURLをQRコードで共有する仕組みになっています！ SaaSなどでリダイレクト先を「localhost」に設定している場合など、動作がうまくいかない場合がありますが、あくまでコミットしなくてもレイアウト崩れなどの確認を手軽にできるようにするための拡張機能ですのでご理解いただけますと幸いです。 ぜひ、ご利用いただいた感想やご意見もいただけると嬉しいです！ よろしくお願いいたします！ 【実装機能】 ・ローカルサーバーにアクセスするために必要なホスト名を登録する機能 ・よく使うポート番号を登録する機能 ・ローカルサーバーの登録したポートを別タブで開ける機能 ・設定内容をQRコードでスマホに共有する機能 ・ポップアップを開いたタブがローカルサーバーで起動しているサイトの場合、 スマホからアクセスできるようにページ階層を含めたURLをQRコードで表示する機能 ・ローカルストレージへの自動保存機能（hostnameやport） 【注意点】 ・ホスト名は自動取得できませんのでご注意ください ・入力情報はローカルストレージに記録されます ・入力された情報はパソコン間で共有されません （スマホなどでQRコードで開いた場合の除く）