前書き
音声入力を利用するindex.htmlの挙動をスマホで動作確認がしたい場面がありました。
レンタルサーバーやクラウドストレージサービスを使い試しましたがうまくいかず
詰んだ
となりましたがPythonでなんとかなったのでその手順をまとめておきます。
ローカルサーバーの立上げとスマホからのアクセス
PCとスマホが同一ネットワークの場合は、PCでローカルサーバーを立ち上げることでスマホからアクセスできます。
ローカルサーバーとは？
インターネットに接続せずに、ローカルネットワーク内で動作するサーバーのことをローカルサーバーと言います。
開発中のウェブサイトやアプリケーションをテストするために使用されます。
カメラ、マイクへのアクセスが不要な場合（http接続）
PCにPythonの実行環境がある場合、以下のコマンドを実行することでローカルサーバーを立ち上げることができます。
Pythonの実行環境の構築
Pythonの実行環境がない場合は以下の記事などを参考に環境構築を実施してください。
python -m http.server 8000
上のコマンド実行後、スマホのブラウザアプリから
http://<PCのIPアドレス>:8000にアクセスするとhttp接続できます。
カメラやマイクを使用する必要がない場合はこの方法でスマホからアクセスすることでWebページの挙動を確認することができます。
カメラ、マイクへのアクセスが必要な場合（https接続）
http接続ではセキュリティとプライバシー保護等の理由で基本的にカメラやマイクへのアクセスが制限されています。
https接続にすることでカメラやマイクにアクセスできるのでその方法をまとめておきます。
証明書の作成
まず、https接続するのに必要な証明書を作成する。
証明書を作成する理由
HTTPS接続をするためにはサーバーの正当性を証明し、クライアントとサーバー間の通信を暗号化するための証明書が必要となります。
index.htmlファイルのあるディレクトリで以下のコマンドを実行することで自己署名証明書を作成できます。
openssl req -x509 -newkey rsa:4096 -keyout key.pem -out cert.pem -days 365 -nodes
証明書を作成するための情報が求められるので適当に入力します。
（:の後に自分で入力）
Country Name (2 letter code) [AU]: JP
State or Province Name (full name) [Some-State]: Tokyo
Locality Name (eg, city) []: Shibuya
Organization Name (eg, company) [Internet Widgits Pty Ltd]: My Company
Organizational Unit Name (eg, section) []: IT Department
Common Name (e.g. server FQDN or YOUR name) []: localhost
Email Address []: admin@example.com
秘密鍵はkey.pemというファイル、自己署名証明書はcert.pemというファイルに保存される。
ローカルサーバーの立ち上げ
index.htmlがあるディレクトリに以下のPythonファイルを追加する。
import http.server
import ssl
server_address = ('', 4443)
httpd = http.server.HTTPServer(server_address, http.server.SimpleHTTPRequestHandler)
# SSL/TLSの設定
httpd.socket = ssl.wrap_socket(
httpd.socket,
keyfile='key.pem', # 秘密鍵ファイル
certfile='cert.pem', # 証明書ファイル
server_side=True
)
print("Serving on https://localhost:4443")
httpd.serve_forever()
上のファイルを以下のコマンドで実行しローカルサーバーを立ち上げます。
python https_server.py
スマホのブラウザアプリから
https://<PCのIPアドレス>:4443にアクセスするとhttps接続できます。
自己署名証明書のため、警告が表示されることがありますが無視して接続して大丈夫です。
警告が出る理由
信頼された認証局（CA）以外から発行された証明書の場合、ブラウザは通常警告を出します。
今回の方法では自分で発行した証明書（自己署名証明書）を利用しているので警告が出ます。
Discussion