タケユー・ウェブ日報

Ruby on Rails や Flutter といったWeb・モバイルアプリ技術を武器にお客様のビジネス立ち上げを支援する、タケユー・ウェブ株式会社の技術ブログです。

Rails 6.1 で追加された permissions_policy.rb とは？

技術

Ruby on Rails 6.1 で、 config/initializers/permissions_policy.rb が追加されました。

# Define an application-wide HTTP permissions policy. For further
# information see https://developers.google.com/web/updates/2018/06/feature-policy
#
# Rails.application.config.permissions_policy do |f|
#   f.camera      :none
#   f.gyroscope   :none
#   f.microphone  :none
#   f.usb         :none
#   f.fullscreen  :self
#   f.payment     :self, "https://secure.example.com"
# end

このファイルには Permissions-Policy （旧称 Feature-Policy） HTTP ヘッダーを設定するためのDSLを記述します。

Permissions-Policy （旧称 Feature-Policy） とは何か？

指定されたオリジンのリストに対して、ブラウザのどのAPIを無効または有効にするかを指定できるものです。

developers.google.com

w3c.github.io

  • サイト全体で使用されている特定の機能に対して、ブラウザが実施する一連の「ポリシー」を許可する。
  • 「ポリシー」で、サイトがアクセスできるブラウザのAPIを制限したり、特定の機能に対するブラウザのデフォルトの動作を変更したりする。
    • モバイルおよびサードパーティ製ビデオでの自動再生のデフォルト動作を変更
    • たとえばカメラやマイクといった機密性の高いAPIの利用を制限
    • iframeで fullscreen API の利用を許可
    • 同期型XHRやdocument.write()などの時代遅れのAPIの使用をブロック
    • 画像のサイズが適切であること、ビューポートに対して大きすぎないこと など
  • 「ポリシー」はブラウザと開発者の間の契約であり、開発者の意図をブラウザに伝えるもの。
    • そこから外れるときにブラウザがサポートしてくれる
    • 特定のブラウザ機能やAPIへのアクセスを選択的に無効にすることで、セキュリティやパフォーマンスを向上できる。
    • デフォルトで無効になっている機能やAPIを有効にする

旧称 Feature-Policy ってどういうこと？

もともと Feature-Policy という名前だったのですが、 Permissions-Policy という名前に変更されました。

Feature Policy - HTTP | MDN

Feature-Policy ヘッダーは仕様書で Permissions-Policy に改名されたので、この記事もそのうち、変更を反映するために更新されます。

Rename all the things by clelland · Pull Request #379 · w3c/webappsec-permissions-policy · GitHub

これに対応して、Railsの実装も feature_policy.rb から permissions_policy.rb に変更されました。

Rename HTTP Feature Policy to Permissions Policy · rails/rails@90e710d · GitHub

ですが、実際にはブラウザの対応が追いついていないので、古い Feature-Policy に戻りました。

y-yagi.hatenablog.com

Permission-Policy headerをFeature-Policyに戻しています。仕様としてはPermission-Policyになったのですが、対応がまだ行われていないブラウザもある為、対応が行われていないブラウザでも使用出来るようにする為、Feature-Policyに戻しています。

設定例

Rails.application.config.permissions_policy do |f|
  f.camera      :none  # 映像入力デバイスを無効 https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Feature-Policy/camera
  f.gyroscope   :none # ジャイロスコープ無効。デバイスの向きに関する情報の収集を不許可。 https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Feature-Policy/gyroscope
  f.microphone  :none # 音声入力デバイスを無効 https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Feature-Policy/microphone
  f.usb         :none # WebUSB APIを無効
  f.fullscreen  :self  # このドキュメントと、同じオリジンにあるすべてのネストされたブラウジングコンテクスト（iframe）で許可 https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Feature-Policy/fullscreen
  f.payment     :self, "https://secure.example.com" # self に加えて https://secure.example.com で Payment Request API を許可 https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Feature-Policy/payment
end

WSL2のadbコマンドでWindowsホストのadb-serverに接続する

技術

動機・やりたいこと

  • WSL2で開発するが、WSL2上では Android Emulatorが使用できない
  • WSL2から、Windowsホストにインストールした Android Emulator を使いたい

やったこと

手順

WindowsホストにWindows用の Android SDK / platform-tools をインストール

Android Studioをインストールするとき、Platform-Toolsもインストールされました。 後からインストールするときは SDK Managerから SDK Tools > Android SDK Platform-Tools でインストールできます。

インストール後、Windowsの環境変数 PATH にパスを追加しておきます。

C:\Users\ユーザー名\AppData\Local\Android\Sdk\platform-tools

developer.android.com

WSL2 (Ubuntu) にUbuntu用の Android SDK / platform-tools をインストール

ここなど

medium.com

Windowsホスト上で所定の操作を行うPowerShellスクリプトを実行

こちらの記事のとおり

ただし

  • $adbPath は "C:\Users\ユーザー名\AppData\Local\Android\Sdk\platform-tools"
  • Set-NetFirewallProfile -DisabledInterfaceAliases "vEthernet (WSL)" は管理者権限が必要

medium.com

WSL2で ADB_SERVER_SOCKET 環境変数を設定して adb コマンドがWindowsホスト上の adb-server へ接続するようにする

以下を .profile に追記して source ~/.profile

export ADB_SERVER_SOCKET=tcp:$(cat /etc/resolv.conf | grep nameserver | cut -d' ' -f2):5037

adbを使う

takeyuweb@concolor:~$ adb devices
List of devices attached
emulator-5554   device # <-- Windows上で動くEmulator

Google Play Store 予約注文（事前登録）開始の手順メモ

技術

support.google.com

大変わかりづらく、先に製品版の審査を通してしまって事前登録できない、製品版の地域を一度選ぶと事前審査の地域が削除され戻せない、など取り返しが付かないところがあるので要注意

  1. 事前登録の審査を受ける
  2. バイナリを登録
  3. 国/地域を選択
  4. 特典の有無
  5. 事前登録の審査が終わってアプリページの掲載が開始
  6. 製品版リリースを作成して公開する（国/地域は選択しない ）
  7. 公開を開始する時に製品版の 国/地域 を選択する
  8. 事前登録からインストールになって事前登録者に通知が送られる

途中公開版の国/地域を選択してしまうと、事前登録の方の国/地域が削除されてしまうので、うっかり選択してしまったら公開の概要の管理対象の公開をオンにして、反映しないように止めておく必要がある。

オープンテストやクローズドテストと絡めるやり方もあるようだが、シンプルな事前登録の手順は上記のような流れらしい

Chromeでビデオ/音声入力する機能開発の時にオーディオ入力として任意のWAVファイルを使う方法

技術

タケユー・ウェブ株式会社ではWebRTCを利用したブラウザベースのライブ配信サービスの開発運営を行っています。

お客様から、「ステレオ音声配信を行いたい」というご依頼があり、この機能開発を行う必要がありましたが、弊社にはステレオマイクはありません。 適当なステレオ音源をマイク入力の代わりに使いたいところです。

そんなときにはChromeのフェイクデバイス機能を使います。

録音を行うChromeの起動オプションとして --use-fake-device-for-media-stream と --use-file-for-fake-audio-capture=file.wav を渡します。

私の環境はWindows なのでこんなコマンド

"C:\Program Files\Google\Chrome\Application\chrome.exe" --use-fake-device-for-media-stream --use-file-for-fake-audio-capture="C:\Users\takeyuweb\Channel_Test_Once_LR.wav"

こうするとマイク入力のデバイスに Fake Audio Input を使用できるようになり、選択した音声ファイルの内容が繰り返しマイク入力として流してくれます。

ちなみにステレオ音声ファイルはこちらのサイトのものをダウンロードさせて頂き、WAVに変換して使用しました。

VSCode Remote - SSH と WSL2 でリモートFlutter開発

技術

f:id:uzuki05:20181215091555j:plain

この記事について

できたこと

  • VSCode の Remote SSH で Flutter 開発をする（Androidアプリをビルド）
    • Remote SSH で WSL2 の Ubuntu で開発する
    • Remote SSH 接続先である WSL2 のホスト機は Android端末と同じネットワーク内にある

できないこと

  • 遠隔地やクラウド上にあるWindows PC上のWSL2に入ったFlutter SDKで、手元にあるAndroid端末を使ってデバッグ実行する
    • WSL2 のホスト機からAndroid端末に対してTCP/IPで接続できる必要があります。もしかするとトンネリングなどの手法で遠隔地でもできるかもしれないが

構成図

f:id:uzuki05:20210130030106p:plain
構成図

続きを読む

Aurora MySQL で utf8mb4 なダンプデータをインポートしようとして ERROR 1709 (HY000) at line 25: Index column size too large. The maximum column size is 767 bytes.

技術

よく知られているのが、 innodb_large_prefix=1 と innodb_file_format=Barracuda にする、ROW_FORMAT は DYNAMIC か COMPRESSED にする必要があることです。 しかしその設定は満足しているのに、なぜ？という場面がありました。

show variables where Variable_name in ('innodb_large_prefix', 'innodb_file_format', 'innodb_default_row_format');
show variables like "chara%";

+---------------------------+-----------+
| Variable_name             | Value     |
+---------------------------+-----------+
| innodb_default_row_format | dynamic   |
| innodb_file_format        | Barracuda |
| innodb_large_prefix       | ON        |
+---------------------------+-----------+
3 rows in set (0.00 sec)

+--------------------------+------------------------------------------------------------------+
| Variable_name            | Value                                                            |
+--------------------------+------------------------------------------------------------------+
| character_set_client     | utf8mb4                                                          |
| character_set_connection | utf8mb4                                                          |
| character_set_database   | utf8mb4                                                          |
| character_set_filesystem | utf8mb4                                                          |
| character_set_results    | utf8mb4                                                          |
| character_set_server     | utf8mb4                                                          |
| character_set_system     | utf8                                                             |
| character_sets_dir       | /rdsdbbin/oscar-5.7.mysql_aurora.2.07.2.0.1106.0/share/charsets/ |
+--------------------------+------------------------------------------------------------------+
8 rows in set (0.00 sec)

原因

dumpファイルで ROW_FORMAT=COMPRESSED が指定されていました。

CREATE TABLE `users` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `name` varchar(255) NOT NULL,
  PRIMARY KEY (`id`),
) ENGINE=InnoDB AUTO_INCREMENT=50853 DEFAULT CHARSET=utf8mb4 ROW_FORMAT=COMPRESSED KEY_BLOCK_SIZE=8;

Aurora MySQL では COMPRESSED に対応していません。

Amazon RDS MySQL DB インスタンスから DB クラスターにデータを移行するAmazon Aurora MySQL - AWS Database Migration Service

このため、このダンプファイルはAuroraでは ROW_FORMAT の不備という扱いになりまいた。

対策

少々乱暴ですがダンプファイルを書き換えることで対応しました。

Linuxの場合

$ sed -i -e "s/ROW_FORMAT=COMPRESSED KEY_BLOCK_SIZE=8/ROW_FORMAT=DYNAMIC/g" dump.sql

macの場合

$ sed -i "" -e "s/ROW_FORMAT=COMPRESSED KEY_BLOCK_SIZE=8/ROW_FORMAT=DYNAMIC/g" dump.sql

Flutter で Android App Bundle を作成して Play Console にアップロードするときのメモ

技術

Android App Bundle (.aab) の作成

flutter clean
flutter build appbundle --build-number=123

アップロード

Android App Bundle (.aab)

f:id:uzuki05:20210125040908p:plain
アップロード先

アップロードするファイル

PROJECT_ROOT/build/app/outputs/bundle/release/app-release.aab

ネイティブ デバッグ シンボル

f:id:uzuki05:20210125041134p:plain
ネイティブ デバッグ シンボル のアップロード

アップロードするファイル

PROJECT_ROOT/build/app/intermediates/flutter/release/ にある arm64-v8a armeabi-v7a x86_64 を1つのZIPファイルにアーカイブしてアップロードします。 Windowsだとまとめて選択して「圧縮フォルダーへ送る」でOKです。