@wakairo

別デバイスからhttpsでrails serverにアクセスする方法

前述の方法で別デバイスからhttpでアクセスできるようになりますが、httpsでアクセスする必要がある場合には、 local-ssl-proxyを使ってhttpsをhttpに振り向けることで、httpsアクセスが可能になります。具体的な方法は以下をご覧ください。 なお別デバイスからhttpsでアクセスするには、前述のポートフォワーディングとファイアウォールの設定をhttpsのポート番号で行う必要があります。

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

背景

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にはたどり着いていませんでした。

回避策が公式リポジトリのREADMEに掲載されたので、回避策のところを更新しました。

背景

Railsのactionviewのヘルパー関数には、form_withのように、blockを活用して入れ子のHTML要素を記述できる便利なヘルパーメソッドがあります。 具体的には、以下のような記述（Railsガイドより引用）が出来るヘルパーメソッドです。

<%= form_with url: "/search", method: :get do |form| %>
  <%= form.label :query, "Search for:" %>
  <%= form.text_field :query %>
  <%= form.submit "Search" %>
<% end %>

blockを用いてHTML要素の入れ子を出力できるこのようなヘルパーメソッドの自作に関する話です。

作り方

actionviewのcaptureというヘルパーメソッドを用いると、form_withのように、blockを使ってHTML要素の入れ子を記述できるヘルパーメソッドを自作できます。

ちなみに、このcaptureは、Railsガイドを読んでも、RailsのAPIドキュメントを読んでも、いまいち使い道が分かっていなかったのですが、このような自作ヘルパーで使うというのが1つの使い道のようです。

自作ヘルパーメソッドの実装例

def some_helper(content=nil, &block)
  object_passed_to_block = 'hello, capture'
  content = capture(object_passed_to_block, &block) if block
  tag.div(content, class: 'some-class')
end

自作ヘルパーメソッドの利用例

ERBから利用

<%= some_helper do |object| %>
  <p><%= object %></p>
<% end %>

出力結果

<div class="some-class">
  <p>hello, capture</p>
</div>

Rubyのコード内から利用

some_helper do |object|
  tag.p(object)
end

出力結果

<div class="some-class"><p>hello, capture</p></div>

Rubyのコード内からblockなしで利用

some_helper('123')

出力結果

<div class="some-class">123</div>

Copilotを利用したペルソナの作成例

ペルソナ作成用プロンプトとその実行結果

入力プロンプト：

あなたはプロのUXデザイナーです。 以下のサービスのペルソナを作成してください。
#背景、#課題、#課題への対応策、#想定ターゲット顧客
を読み込んで、ペルソナを作成してください。
#フォーマットに沿って出力すること。

#背景："""
サービス開始から20年が経過したSNSのデザインについてメジャーアップデートを行う。
"""

#課題："""
時間経過と共にメインユーザーの年代も上がってしまい、若い年代のユーザーが入りにくくなってしまっている。
"""

#課題への対応策："""
若い年代のターゲット顧客が魅力を感じるUXにする。
ただし、現在のメインターゲットにとって支障が無いUX変更の範囲内に収める。
"""

#想定ターゲット顧客："""
30歳前後の働き盛り。
趣味でも仕事でも交友関係が広い。
友人や知人にSNSを勧誘できる人。
"""

#フォーマット："""
名前：
年齢：
性別：
趣味：
勤務先の企業風土：
役職：
職務内容：
特徴的な行動・活動：

Coplilotの回答：

ペルソナの作成をお手伝いします。
以下に、ご指定のフォーマットに沿ったペルソナを提示します。

名前：佐藤 明美 (さとう あけみ)
年齢：29歳
性別：女性
趣味：旅行、写真撮影、ソーシャルメディアでの活動
勤務先の企業風土：革新的で、社員の自由な発想を奨励するIT企業
役職：マーケティングマネージャー
職務内容：新しいマーケティング戦略の開発、チームのリード、プロジェクトの管理
特徴的な行動・活動：仕事の成果をSNSで共有し、業界内外のネットワークを広げる。趣味の旅行中に撮影した写真をSNSで共有し、フォロワーとの交流を楽しむ。

このペルソナは、SNSのデザインを若い世代にも魅力的に感じさせるための参考になるでしょう。
また、現在のメインターゲットにとっても支障がないようなUX変更を考慮する際に役立つ情報を含んでいます。
ご要望に沿った内容でしょうか？

続けてペルソナに関して質問をする例

入力プロンプト：

この佐藤さんは既にSNSで盛んに活動しています。
この佐藤さんが年代が高めのSNSを新たに始めるとしたら、どのような考えの結果でしょうか？

Coplilotの回答：

佐藤さんが新たに年代が高めのSNSを始めるとしたら、以下のような考えがあるかもしれません。

- **プロフェッショナルなネットワーキング**: 佐藤さんは仕事での成果をSNSで共有し、業界内外のネットワークを広げることを重視しています。年代が高めのユーザーが多いSNSは、より経験豊富な専門家や業界リーダーとのつながりを築くための新たな機会を提供するかもしれません。

- **多様な視点の獲得**: 年齢層が広いSNSでは、異なる世代の意見や視点に触れることができます。これにより、佐藤さんはマーケティング戦略を考える際に、より幅広い顧客層のニーズを理解することができるでしょう。

- **影響力の拡大**: 若い世代だけでなく、年配のユーザーにも影響を与えることで、佐藤さんのSNS上での影響力をさらに拡大することができます。これは、彼女の職務内容やキャリアにとって有利に働く可能性があります。

- **個人的な成長**: 新しいSNSを通じて、佐藤さんは自身の趣味や興味を共有し、異なる年代の人々と交流することで、個人的な成長を遂げることができるでしょう。

これらの考えは、佐藤さんが新しいSNSを始める際の動機として考えられるものです。
彼女の活動的な性格とプロフェッショナルな目標に合致していると言えるでしょう。
どう思われますか？

ChatGPTやCopilotのような生成AIの力を借りてのペルソナの作成に関するTopicです。

参考資料

• https://unique1.co.jp/column/marketing-measures/9782/
• https://note.com/tsumura_design/n/n2d2b5de6be61?sub_rt=share_h
• https://mieru-ca.com/blog/chatgpt-persona/
• https://twitter.com/sawawww/status/1639925031777226753
• https://dev.classmethod.jp/articles/chatgpt_persona/

問題

importmap-railsはv2.0.0で、「ネイティブでImport mapsに対応していないブラウザでImport mapsを機能させるためのshims」の利用を打ち切りました。 一方で、iOS 16.3以前に搭載されているSafariブラウザは、ネイティブではImport mapsに対応していません。 したがって、importmap-railsを1.x系から2.x系にバージョンアップすると、iOS 16.3以前のデバイスではJavaScriptを利用したRailsアプリが動かなくなります。 このことは、この打ち切りのプルリクエスト #216で議論されているように、開発陣に既に認識されており、認識した上での打ち切りとなっています。

なお、特にiOS 15は、2024-01-22にセキュリティアップデートが出ているAppleがサポートをまだ続けているOSであるにもかかわらず、最新の15.8.1へアップデートしたデバイスであってもRailsアプリが動かなくなるため要注意です。

（参考）iOS 15とiOS 16の状況

• 2024-01-22にセキュリティアップデートが出されているため、iOS 15以降はAppleがサポートを続けているOSであると考えられます。
• こちらのWebサイトによると、2023年8月時点の国内シェアはiOS 16が85.1％、iOS 15が10.4％となっています。
• こちらのWebサイトによると、2023年5月時点の全世界でのシェアはiOS 16が81％、iOS 15が13％となっています。

以上から、iOS 15とiOS 16のデバイスは、2024年2月現在まだまだ利用されていると言えます。

回避策

importmap-railsを用いたRails 7アプリで、iOS 16.3以前をサポートするには、 以下のようにjavascript_importmap_tagsの前にes-module-shimsを入れます。 詳細は、GitHubの公式リポジトリのREADMEの該当部分（Supporting legacy browsers such as Safari on iOS 15）を参照してください。

<script async src="https://ga.jspm.io/npm:[email protected]/dist/es-module-shims.js" data-turbo-track="reload"></script>
<%= javascript_importmap_tags %>

参考情報

• この回避策で上手く行ったという報告

Windows PCでWebアプリなどを開発しているときに、iPhoneなどのAppleデバイスでの動作確認をしたいときがあります。 しかしながら、Appleデバイスの標準ブラウザであるSafariのWindows版は2012年頃にサポートが終了しています。 その一方で、SafariのHTMLレンダリングエンジンであるWebKitをWindows上で走らせることは現在でも可能です。

Playwrightを利用するとWebKitブラウザをWindowsにインストールして実行することが比較的簡単に出来ますので、 このコメントではその方法を以下に示します。

NodeJSのインストール

Windowsの公式パッケージマネージャであるwingetを利用すれば、以下のコマンドでNodeJSをインストール出来ます。

winget install -e --id OpenJS.NodeJS.LTS

Playwrightのインストール

まず、適当な作業フォルダを作成します。次にそのフォルダでコマンドプロンプトかPowerShellを開き、以下のコマンドを実行します。

npm init playwright@latest

このコマンドを実行すると出てくる「Install Playwright browsers」の質問項目でYesつまりtrueを選択します。 （ここでYesを選択できなかった場合には、このコマンドに続いてnpx playwright install webkitを実行して下さい。）

WebKitブラウザの起動

以下のフォルダを開き、Playwright.exeを実行すると、WebKitブラウザが起動します。

C:\Users\＜ユーザ名＞\AppData\Local\ms-playwright\webkit-＜バージョン＞

背景

WindowsのWSL2環境でRailsアプリを開発しています。開発しているWebアプリに関してAppleのSafariブラウザでの動作確認が必要になりました。そこで、同一LAN内にあるiPhoneやiPadといった別デバイスから、WSL2環境においてrails serverコマンドで走らせたサーバへ、アクセスできるようにしました。

手順

LAN接続の設定

後述のファイアウォールの設定にて、プライベートネットワークに限定する設定をする場合には、Railsサーバを走らせているPCのLAN設定で、ネットワーク プロファイルをプライベートにしておきます。

WSL2で走っているLinuxのIPアドレスの確認

ifconfigの出力のinetのところなどで、WSL2で走っているUbuntuなどのLinux OS側のIPアドレスを確認し、転送先アドレスとして控えます。

LinuxのIPアドレスが正しいことの確認

まず、bin/rails server -b 0.0.0.0でWSL2上でRailsサーバを起動します。
次に、このRailsサーバに、WSL2環境ではなくWindows上で普通に走っているブラウザから、先ほど調べたWSL2で走っているLinuxのIPアドレスに対し http://（LinuxのIPアドレス）:3000/ というようなアドレス（ここではポート番号を3000としていますが、別のポートをRailsサーバに用いている場合はそのポート番号に変更して下さい）でアクセス出来ることを確認します。
ここでアクセスに失敗するようでは何かしらが間違っていますので、まずはこのようにアクセス出来るようにしましょう。

ホストOSであるWindowsのIPアドレスの確認

ipconfigなどで、Windows側、つまり、ホストOS側のLAN上でのIPアドレスを確認し、転送元アドレスとして控えます。

ポートフォワーディングの設定

管理者権限で以下のコマンドを実行します。なお、特に理由が無ければ、転送元ポートは転送先ポートと同じ（3000）で大丈夫です。

netsh interface portproxy add v4tov4 listenaddress=＜転送元（Windows）のIPアドレス＞ listenport=＜転送元ポート＞ connectaddress=＜転送先（Linux）のIPアドレス＞ connectport=＜転送先ポート＞

ファイアウォールの設定

Windowsのファイアウォールの設定にて、「受信の規則」として以下の設定を追加します。

• プロトコルの種類：「TCP」
• ローカルポート： 「特定のポート」「3000（転送元ポート）」
• リモートポート： 「すべてのポート」

なお、ファイアウォールの設定にて、プライベートネットワークに限定したり、テスト時以外は無効にしたりするなど、セキュリティには十分に配慮をして下さい。

接続確認

同一LAN内の別デバイスから、 http://（WindowsのIPアドレス）:（転送元ポート）/ というようなアドレスでアクセス出来ることを確認します。

参考情報

• Windowsでのnetshを用いたポートフォワーディングの設定
• https://gunmagisgeek.com/blog/other/7171

ポートフォワーディングを設定する

管理者権限で以下のコマンドを実行する。

netsh interface portproxy add v4tov4 listenaddress=＜転送元（ホストOS）のipアドレス＞ listenport=＜転送元ポート＞ connectaddress=＜転送先ipアドレス＞ connectport=＜転送先ポート＞

注意事項：ポートフォワーディングの実用ケースでは、ファイアウォールの設定も追加で必用な場合が多いです。参考情報： https://gunmagisgeek.com/blog/other/7171

ポートフォワーディングの設定を確認する

netsh interface portproxy show all

ポートフォワーディングを削除する

netsh interface portproxy delete v4tov4 listenaddress=＜転送元（ホストOS）のipアドレス＞ listenport=＜転送元ポート＞

参考情報

• Microsoft Learn: Netsh interface portproxy コマンド
• https://arubeh.com/archives/1749
• https://gunmagisgeek.com/blog/other/7171