Subterranean Flower Blog

Twitterアカウントの乗っ取りの手口と防ぐためにやっておきたいこと

Thu, 25 Nov 2021 09:08:00 GMT

ちょっといつもと毛色の違う記事書きますね。

Twitterアカウントの乗っ取りは昔から問題にはなっているのですが、いまいち纏まった対策法が書いているところが少ないなーと思っていました。最近になってまた増えてきている気がするので、なんとかしたいという気持ちがあります。

私は主にウェブシステムの設計・開発を仕事にしていて、アカウント管理のセキュリティ周りの話もよくします。チェック自体は専門家に任せるのですが、やりとりをスムーズに行うために自身も最低限の知識は学ぶようにしています。

普段から否応なしにセキュリティを意識せざるを得ない立場から、Twitter乗っ取りの考えうる手口や、それらに対して私達ができる対策など、簡単にまとめておきたいと思います。

長い！読みたくねえ！短くまとめろ！

乗っ取りの経路はパスワードと連携アプリの2種類ある
パスワードを使い回すな
パスワードは大文字/小文字/数字/記号を全部混ぜて20文字以上にしろ
二要素認証を有効にしろ
連携アプリからの乗っ取りはパスワード貫通してくる
連携アプリを不用意に許可するな
使ってない連携アプリは解除しろ

全体的な傾向

まずは攻撃者の傾向について説明します。

サービス自体の不備を突くというのは現在でも有効な攻撃方法ですが、業界全体のセキュリティ意識も上がっており、特に大手サービスを突破するのは基本的に不可能です。

パスワードがあまりにも弱い場合など、個人アカウントを乗っ取れることはあるので各個人による基礎的な対策は必要にはなります。ですが「Twitterそのものを攻め落とすぞ」のようなことは現実的ではありません。

ではどうするのかと言うと、ターゲットの周辺を狙います。Twitterなら連携サービスを狙うとかそういうやつです。

あるいは既に突破された全く関係のないサービスを利用します。サービスとしては関係なくても、もし同じアカウント名で同じパスワードを使っていれば……あとはわかりますね。

このように弱い部分から段階的に侵食してく攻撃がメジャーかつ有効になってきています。マンガやアニメで見かける「敵のボスの尻尾を掴むためにその配下に情報を吐かせる」シーンと同じですね。

よって最低でも全く異なる2種類の侵入経路が考えられます。

パスワードによる乗っ取り
連携アプリによる間接的な操作乗っ取り

この2種類の侵入経路は全く別物なので、別々に対処します。なおパスワードによる侵入をうけた場合はアカウントの支配権自体が危ないですが、連携アプリからの乗っ取りではツイートやプロフィール、フォローなどの操作しかできないので最悪でも人間関係が破滅する程度で済みます。

パスワードをわかりにくくする

パスワードをわかりにくくすることで、単純なログイン試行を防ぐことができます。大文字/小文字/数字/記号をすべて含んだ20桁以上のランダムなパスワードにしていれば、一般的には安全だと思われます。私はたいてい28桁から32桁ほどにしています。

Twitterも単なるウェブサービスのひとつなので、こういった基礎的な対処は効果が大きいです。

パスワードは推測困難なものにしよう！というのは一般にもよく言われますね。桁数を増やしたりランダムにするなど、できるだけ他人から推測できないようにしましょう。パスワードに英数字だけでなく記号を加えるのも有効です。

手作業で複雑なパスワードを作って覚えるのは難しいので、後述のパスワード管理ツールを使いましょう。

パスワードを長く複雑にすることで「とにかくパスワードを入力してログインを試みる」という古典的な手法への耐性が上がります。

Twitterでは連続でログインに失敗するとアカウントに1時間ほどロックがかかる仕組みになっています。よって無限に試せるわけではないので、一定以上の複雑なパスワードを使えば直接的に突破される可能性はほぼゼロになります。

また、仮にパスワードそのものが流出した場合の最も効果的な対策にもなります。流出してるのに対策も何もないのではと思うかもしれませんが、意外とこういう地味なところが効いてきます。詳しい原理は記事の末尾に付録として書きました。

サービスごとにパスワードを変える

サービスごとにパスワードを変えましょう。たとえばGoogleとPixivとTwitterではすべて違うパスワードを使うと比較的安全になります。

Twitterそのものからパスワードが漏れることはほとんどなく、実際は他のサービスから流出したパスワードをそのまま使ってログインしようとすることが多いはずです。こうなると「長くて複雑なパスワード」も意味をなしません。一発で突破されるはめになるので、本人のログインと区別がつかないでしょう。

サービスごとに異なった長く複雑なパスワードを使うことで、他のサービスでの流出事故に巻き込まれずに済みます。

とはいえパスワードをたくさん考えたり覚えるのは難しいですよね。そういうときはパスワード管理ツールを使うのが良いでしょう。PC/スマホでのパスワードの自動生成や自動入力機能などを備えています。

パスワード管理ツールではBitwardenなどが有名ですね。個人なら無料で使えます。最近になって評価が上がってきていますね。

私は1Passwordを使っています。有料ですが、ずっと使っていて慣れているので。

Chromeなどのブラウザにもパスワード管理機能はついています。ですが様々な機械やアプリで使うなら専用のアプリを入れることをおすすめします。

パスワードのリセットを保護する

パスワードリセット時に電話番号かメールアドレスが必要なように設定しておきましょう。パスワードのリセットから他人のパスワードを書き換えて乗っ取るのもよくある手法です。

Twitterの設定画面から「セキュリティとアカウントアクセス」→「セキュリティ」と選ぶと下段に「パスワードリセットの保護」とあるのでチェックを入れるだけです。

二要素認証を有効化する

二要素認証を有効化するのは大きな効果があり、もはや必須レベルの対策になります。二要素認証というのは、パスワードを打ち込んだあとにSMSで送られてきた番号を打ち込んだりするアレです。

パスワードの問題点として、そもそも誰が所有しているのか証明できないという難点があります。ただの文字なので当たり前といえば当たり前なのですが、盗まれると悪用され放題になる性質があるとも言えます。

なのでパスワードに加え、おそらく本人しか所有してないであろう機械を使って追加の認証を行うというのが二要素認証です。現代だとスマホが認証機器としてはメジャーでしょう。

Twitterの設定画面から「セキュリティとアカウントアクセス」→「セキュリティ」→「2要素認証」と進んでいきます。

2要素認証の設定画面になります。

テキストメッセージはスマホのSMSで認証コードが届く仕組みです。追加のアプリなどを入れたくない方はこれでいいでしょう。

認証アプリは認証コードを発行するアプリです。ログインのたびにSMSが飛んでくるのが嫌いな人は認証アプリがいいでしょう。「Twilio Authy」や「Google Authenticator（Google 認証システム）」あたりが有名なのでAppStoreで探してみましょう。

セキュリティキーはおそらく最も安全な手法で、USBに刺す専用のデバイスで認証を行います。実物がないと認証できないのでインターネット経由での解析は困難でしょう。「FIDO2」という規格に対応している必要があり、ただUSBに刺すだけなら3000円程度で、NFCやBluetooth対応のものは5000円ぐらいで売っています。Amazonなどで「FIDO2」で検索をかければたくさん出てきます。

セキュリティキーの有名なメーカーとしてはYubicoやGoogleがあります。Yubicoは多種多様なキーを売っています。Googleは「Titan Security Key」というのを売っています。iPhoneで使用するならNFC対応のものが良いでしょう。NFC対応ならiPhoneに近づけるだけで接続できます。

連携アプリを最小限に

連携アプリの数は最小限にしましょう。また、不用意に連携アプリの許可をしないようにしましょう。パスワードによる侵入とは別の侵入経路になるので、どれだけパスワードを強くしても連携アプリからの乗っ取りは防げません。使用していない連携アプリは解除しておきましょう。

連携アプリはTwitterの一部操作をあなたの代理として実行できます。あなたのフォローしてる鍵垢の友人のツイート内容を読み取ったり、あなたにかわって変なメンションを送ったりできます。これらの機能は便利に使える一方で、悪用されると大変なことになります。

連携アプリが悪用されるのは大きく2パターンあります。

セキュリティの甘い連携アプリを乗っ取り悪用する
はじめから悪意を持って作られた連携アプリ

世の中には多くの個性的な連携アプリが溢れています。「xx診断」とか「xx占い」のようなアプリを連携した経験、一度はあるのではないでしょうか。連携アプリの制作は今ではかなりハードルが下がっており、制作者がクリエイティブな能力を発揮しやすくなっています。しかしその裏でセキュリティの脇が甘いものも多くあります。「多くの利用者がいる」「セキュリティが甘い」という条件は、悪意ある者にとって最高の環境になります。大した手間をかけずに多くのアカウントに影響を及ぼせるのですから。

また、はじめから悪意を持って作られた連携アプリもあるかもしれません。「あなたの性格を診断します」のような連携アプリをとりあえずバズらせればいろんな人に連携してもらうことができます。ある程度広まってから例えば「自動でランダムなフォロワーをブロックする」なんてされたら、どうします？

このあたりはTwitter側にも問題があり、連携アプリを作るときに「読み取り可能」か「読み取りと操作が可能」か「読み取りと操作とDMが可能」の3種類の中からしか選べません。全部見えるか全部操作できるかDMまで明け渡すかの究極の選択を迫られます。正気か？

単に占い結果をツイートするだけのアプリでも「読み取りと操作が可能」の権限を与えねばならず、完全に気が狂った仕様です。読み取りというのは本当になんでもかんでも見えるので注意してください。なおDMの権限要求してくるやつは普通に怪しいので疑って大丈夫です。DM権限が必要なのは有志のツイッタークライアントぐらいだと思います。

連携を解除するには、Twitterの設定画面から「セキュリティとアカウントアクセス」→「連携しているアプリ」を選ぶと連携アプリの一覧が出てきます。

今は使ってないアプリをどんどん連携解除していきましょう。使うときになったらまだ連携すればいいだけなので躊躇する必要はありません。「アプリの許可を取り消す」を押せば解除できます。

セッションの整理

不要になったセッションも解除しておきましょう。セッションは「Twitterのログイン情報」ぐらいの意味と思っておいてください。セッションデータが漏れたときの被害はおそらくパスワードが漏れたときと同じ程度ありますが、セッション自体がサービス固有のものなので、例えばPixivのセッションが漏れてもTwitterのセッションは乗っ取れません。

Twitterのセッションは無期限のようなので、接続する端末やブラウザが増えるとそれだけ増殖していきます。使ってなさそうなものは消していきましょう。

Twitterの設定画面から「セキュリティとアカウントアクセス」→「セッション」を選ぶとセッション一覧が出てきます。

セッションは個別に解除できますし、「他のすべてのセッションからログアウト」で全解除もできます。数が多い場合は全解除してから今使ってる端末だけでもう1回ログインしなおすのが楽です。

ここでもし全く身に覚えのない怪しいセッションがあったら、即刻そのセッションを切断してパスワードを変更しましょう。

まとめ

基本的なところをしっかりおさえよう！という月並みな言葉になってしまいますね。特に最近ではTwitterのアカウントを使ってビジネス的なやり取りをする方も多いので、面倒がらずにしっかりやっていきましょう。

長い人ではTwitterアカウント作成から10年以上経っていると思います。それまで積み上げてきた人間関係やくだらないやりとりが、変な宣伝アカウントに乗っ取られて終わるというのは悲しいはずです。自分のアカウント、大事にしていきましょう。

おまけ：パスワードの解析

初めの方で「大手サービスを直接攻撃するのは現実的ではない」と書きましたが、関係者を狙った攻撃や内部犯などは防ぎきれないこともあります。パスワード流出の可能性は現実的にあり得るわけです。ではそうなった場合、流出したパスワードというのはどの程度安全なのでしょうか。

結論だけ言うと、流出時は公式からアナウンスがあるはずなので速やかにパスワードを変えましょう。こういうものは流出する前提で仕組みが作られているのですぐさま乗っ取られることはないのですが、数週間放置していると危ないと思います。本当に危険な場合はおそらく公式から全員強制パスワードリセットがかかります。

一般にパスワードは「ハッシュ」という形式で保存されます。ハッシュというのは元のデータをめちゃめちゃに切り刻んで原型を残さないように破壊された形式です。「暗号化」がデータを後で元に戻すことを目的としているのに対して「ハッシュ化」は破壊のための破壊として行われる破滅的行為です。つまりハッシュを見てもパスワードはわかりません。ツイッターの社員が見てもわかりません。誰にもわからないんです。

一見役に立たなさそうですが、「ハッシュ化」の手法を定めておくことで、「同じ入力なら必ず同じハッシュになる」という性質が得られます。これを活用するとパスワードを保存せずにパスワードの照合が可能になります。

パスワード登録時/変更時にパスワードのハッシュだけ保存しておく
ログイン時にパスワードの入力をハッシュ化する
保存していたハッシュと入力パスワードのハッシュが同一か確認する
同一ならば登録されたパスワードと同じことが保証できる
ログイン成功

頭がいいですね。ちなみにデメリットとしてそもそもパスワードが誰にもわからないというのがあり、パスワードを忘れたときにリセットするしかないサービスが多いのはこのためです。逆にいうとパスワードを忘れたときにパスワードがそのまま送られてくるサービスは危険です。

つまりパスワードの流出というのはハッシュの流出です。じゃあハッシュが流出してもパスワードわからないし安全じゃん。ハッピーエンド。……というわけにもいきません。

パスワードを解析するとき、「ハッシュからパスワードに戻せないなら、当たるまで適当なパスワードをハッシュ化繰り返せばいい」というゴリ押しベースの手法が用いられます。あまり賢くなさそうな方法ですが、今時の家庭用グラフィックボードの進歩により、秒間で数千万回ほどなら簡単に試せるようになりました。

辞書攻撃という手法もあります。これはゴリ押しするときにアルファベットの総当たりではなくよく使用される単語を組み合わせて行うものです。総当たりより圧倒的に効率がいいので、英単語の組み合わせパスワードはすぐに突破されます。

また、有名なハッシュ化手法については、よくあるパスワードをハッシュ化したリストを事前に作っておけば、同一のハッシュを持つユーザを探すだけで簡単にパスワードを割り出せます。このやり方はレインボーテーブルと呼ばれます。

あまり安全ではなさそうですね。もちろんこれらの弱点にも様々な対策を施します。

一般的な対策として「ソルト」というものがあります。ソルトはユーザごとに付与するランダムな文字列です。ハッシュ化する際にパスワードにソルトをくっつけてから実行します。パスワードが「rhodes」でソルトが「wzuduwr」なら、「rhodeswzuduwr」にしてからハッシュ化します。

こうすることで擬似的に非常に長いパスワードになるので少し安全になります。またレインボーテーブルをそのまま適用できなくなるので、一瞬でバレることもなくなります。なおソルト自体はパスワードに近い場所に格納することが多いので一緒に流出する可能性もあります。

その他にもいろいろな対策をしますが、根本的にはどれも時間稼ぎです。流出が判明してからアナウンスをして、ユーザがパスワード変更するまでは安全なようにしようという作りです。

つまり、強固なパスワードを使っている限り恐れる必要はありませんが、流出が判明した場合は速やかにパスワードの変更を行いましょう。

ちなみに過去にはユーザ1億超えてるようなサービスでもこのあたりの対策がガバガバだったこともあるので、あまりネット上のサービスを信用しすぎず自衛できるように心がけましょう。世の中そんなもんです。

GPD WIN3で「原神」や「PSO2:NGS」は遊べるのか

Mon, 19 Jul 2021 11:33:00 GMT

GPD WIN3を買いました。買った理由はなんとなくです。せっかく買ったので普段やってるゲームがどの程度動くのかなと試してみました。

GPD WIN3って何

小型Windowsパソコンです。ゲーム用途を想定しているのでボタンとかスティックとかがついてます。モバイル向けCore i7とメモリ16GBという構成。昔からのガジェットオタクには「VAIO type U」といえば通じます。

最新のAAAタイトルとかならともかくちょっと前の重めのゲームなら動くいいやつです。良くも悪くも単なるWindowsマシンなのでSteamとかのゲームも動かし放題です。

当時VAIO type Uを買えなかった腹いせに購入しました。15年越しの復讐です。

どの程度のゲームまで遊べるのか

GPD WIN3には消費電力の設定があり、消費電力を上げると当然ながら性能も上がります。私はスペックバカなので何も考えず最高の28Wにしてます。なのでこの記事で出てくる話はすべて28W設定です。小さな筐体の中で冷却ファンが轟音立てて回ってるときがいちばん生を実感できますよね。

とりあえずこの前出てたFF14のベンチマークを動かしてみます。

高品質（ノートPC）設定では平均65fpsの最低23fpsと良好な感じでした。高品質（デスクトップ）にすると平均50fpsの最低18fpsまで落ちます。最高品質だと平均47fpsの最低17fps。

高品質から最高品質にしても意外とフレームレート下がらないなという感想です。これ動くならたいがいのゲーム動くんじゃない？と思いました。

原神

原神やってみました。最初はグラフィック設定は中でいけるのではないかと思ってましたが、中設定だとモンド城下町やモンド城下町前（ティミーとかがいるところ）で45fps〜52fpsぐらいをうろちょろしてたので、ちょっとカスタムして下げました。

影品質を低に、アンチエイリアスをTAAに、サブサーフェススキャタリングを中にしました。これで58fps〜60fpsぐらいになったので戦闘系のデイリークエやってみる。

ええやん。MSIのAfterburner使って左上にfps表示してます。だいたい60fps維持してますね。螺旋とかはもしかしたらキツい可能性ありますけど、通常プレイの範疇で困ることなさそうですね。

PSO2:NGS

令和の問題児くんNGSですわよ。詳しくは省くのですが設定2まで落とさないとキツかったです。30fpsで我慢できるなら高設定ぐらいまでは行けそう。

設定2でまずは過密ブロックのセントラルシティ走ってみたけど40fpsぐらいしか出てないです。

次にマグナス山（8人マップ）に行ってみました。ちょうどPSEバーストする場面だったので適当にゾンデ連打します。50fpsぐらいでした。バーストしてないときの普通の雑魚集団ぐらいなら60fps出ます。

意外と遊べるなーという印象です。設定1なら60fps行くんじゃなかろうか。

重量について

ところでGPD WIN3なんですが、結構重いです。Nintendo Switchが400gぐらいで、GPD WIN3は560gです。Switchでも重い重い言ってる人多かったので、こっちはかなりの重量級ですね。

筐体の分厚さもすごくてわりと鈍器めいてます。たぶんゲームやってる最中にゾンビに襲われてもGPD WIN3で殴れば生き残れる。

ちなみに先日発表されたValveのSteam Deckはさらにその上を行く670gです。貯金するより手首鍛えましょう。

これ買ったほうがいいですか

この記事読んで「原神やNGSが動くんだ！買ったほうがいいかな！？」みたいに考える人もいると思うのですが、もしいま原神やNGSが動くPCを持っていないのであればやめたほうがいいです。

あくまでサブ機としての立ち位置が強く、これメインでやるのは価格的にも苦しいと思います。もし「2020年頃までのゲームしか遊ばず、これからのゲームは一切動かなくてもいい」という明確な割り切りがあるのであれば止めはしませんが。

まあ高級おもちゃです高級おもちゃ。

Steam Deckどうよ

ついこの前にSteam Deckも発表されましたね。GPD WIN3と同等（もしくはちょっと上）のスペックで価格は半分ぐらいというすごいやつです。

スペックや価格などみなさんテンション上がるとは思いますが、貧弱ナヨナヨマンの私からひとつ言えることがあります。スペックや価格の前に自分の手首の筋力と相談してください。

私は400gのNintendo Switchでも結構ギリギリなんですが、560gのGPD WIN3だと「うおおっ！」って感じです。Steam Deckは670gです。手首、鍛えましょう！

JavaScriptで任意のHTML要素をPicture-in-Pictureする

Thu, 29 Apr 2021 16:33:00 GMT

みなさんはPicture-in-Picture(PiP)という機能を使ったことがありますか。PiPは動画コンテンツなどを浮遊する小窓に表示する機能です。小窓はウィンドウの外側を自由に移動できます。

デスクトップが賑やかになりがちなPCでもPiPは大活躍なのですが、特にスマートフォンにおいては数少ない「ウィンドウ」機能になります。Androidはもちろん、iOS14も対応したことで話題になりました。

これによってスマホ一台あれば、ソシャゲの公式生放送を見ながらソシャゲのイベントを周回する地獄のような行為が可能になりました。

利用者という視点から見ると非常に便利なのですが、開発者から見ると動画しか表示できないのはなかなか使い所が難しくなります。そこで、この機能を使って好きな情報を表示できないか実験してみました。

PiP機能の対応環境

Chrome 70
Firefox 71（制限付き）
macOS/iPad Safari 13.1
iPhone Safari 14

PiP自体はどの環境も対応しています。iOS自体は13.1から対応していたのですがiPadのみ対応で、iPhoneにも機能が解放されたのはiOS14になります。

今回の目標と対象外環境

今回は好きなHTML要素をPiPしてみたいと思います。曲芸飛行みたいなことするのでちゃんと動かない、対象外の環境が2つあります。

ひとつはFirefoxです。PiP自体には対応しているのですが制限付きで、JavaScript側から操作できません。なので今回は対象外となります。

もうひとつはiOS Safariです。今回使う機能がバグってます。数時間格闘したんですが真っ黒な画面しか出ませんでした。2018年からずっと報告されてるんですが特に動きはないようです。

実現手順

PiPが動画にしか対応していない部分は変わりません。なのでHTMLを動画にしてやれば任意の要素をPiPできるわけですね！

このような動作イメージです：

次の手順で実現します：

HTMLを画像に落とし込む
画像化したHTMLをcanvasに書き込む
canvasから動画ストリームを取得する
video要素を作成してcanvasの動画ストリームを再生させる
そのvideo要素をPiPする

理屈の上ではできそうですね。それではやっていきましょう。

HTMLをcanvasに描画する

次のようなHTMLがあるとします：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Picture in Picture</title>
    <script src="main.js" defer></script>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div id="pip-source">
      <img src="https://source.unsplash.com/9UUoGaaHtNE">
      <span class="message">Hellooooooooooooo</span>
    </div>
    <button id="pip-button">PiP them</button>
  </body>
</html>

CSSはこうです：

#pip-source {
  background-color: white;
  text-align: center;
  width: 320px;
  padding: 1em;
}

#pip-source img {
  display: inline-block;
  object-position: center center;
  object-fit: contain;
  width: 100%;
}

:picture-in-picture {
  display: none;
}

このとき #pip-source の要素をPiPの対象にしたいとします。これを画像化すればよいわけですね。

画像化にはsvgを使います。svgには foreignObject という仕組みがあり、その中の描画をブラウザに任せる、ということができます。一方でsvgはブラウザ上では画像として扱うことができ、ブラウザの描画結果を画像として扱うことができるようになります。

svgを組み立てるところまで一気に行きますね。

const pipSource = document.querySelector('#pip-source');
const pipButton = document.querySelector('#pip-button');
pipButton.style.opacity = 0.3;

const setup = async() => {
  // 描画する要素のサイズを取得したい
  // 画像の読み込みが終わるまで待つ
  const waitingImgList = [...pipSource.querySelectorAll('img')];
  await Promise.all(waitingImgList.map((el) => new Promise((resolve) => {
    el.addEventListener('load', () => resolve());
  })));

  // 描画する要素のサイズを取得する
  // 注意：重い処理なので頻繁に呼び出さないように
  const { width, height } = pipSource.getBoundingClientRect();

  // svgタグを作る
  // SVGはHTMLではないので作り方がちょっと違う
  // 決められたNS(Namespace)を指定して作る
  const ns = 'http://www.w3.org/2000/svg';
  const svg = document.createElementNS(ns, 'svg');
  svg.setAttribute('width', width);
  svg.setAttribute('height', height);

  // foreignObjectを作る
  // foreignObjectはその中身の描画を
  // SVG自身ではなく外側（ここではブラウザ）に任せる
  const foreignObject = document.createElementNS(ns, 'foreignObject');
  foreignObject.setAttribute('width', width);
  foreignObject.setAttribute('height', height);

  // 表示したい要素のコピーを作る
  // xmlとしてのNSを追加
  const html = pipSource.cloneNode(true);
  html.style.display = 'content';

  // 画像をすべてDataURLに置き換える
  const imgList = [...html.querySelectorAll('img')];
  await Promise.all(imgList.map(async (el) => {
    const data = await fetch(el.src).then((res) => res.blob());
    const reader = new FileReader();
    const url = await new Promise((resolve) => {
      reader.onload = () => resolve(reader.result);
      reader.readAsDataURL(data);
    });
    el.src = url;
    return el.decode();
  }));

  // 描画に必要そうなものを作っておく
  const style = document.createElement('style');
  const css = await fetch('style.css').then((res) => res.text());
  style.textContent = css;

  // 組み立てる
  html.appendChild(style);
  foreignObject.appendChild(html);
  svg.appendChild(foreignObject);
}

これ自体は簡単なのですがひとつ注意点があります。それはsvg内の画像やcssは外部ファイルであってはいけないということです。svgを直接HTMLの中に記述するならそれも動くのですが、画像として扱う場合はsvgの中で全て完結する必要があります。今回はスクリプトは使っていませんが、スクリプトを使用するならそれもインライン化が必要です。

これでDOMとしてのsvgが出来上がりました。img要素に放り込めば画像として取得できるようになるのですが、残念ながらimg要素はDOMを受け付けません。なのでこれをData URLに変換します。文字列化してくっつけるだけです。

const setup = async() => {
  //
  // ↑ここに先ほどまでの処理がある
  //

  // svgを文字列化してURL化する
  const svgStr = new XMLSerializer().serializeToString(svg);
  const svgUrl = 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(svgStr);

  // svgを画像として読み込む
  const img = new Image(width, height);
  img.src = svgUrl;
  await img.decode();
}

あとはこれをcanvasに転写します

const setup = async() => {
  //
  // ↑ここに先ほどまでの処理がある
  //

  // canvasを作る
  const canvas = document.createElement('canvas');
  const ctx = canvas.getContext('2d');
  canvas.width = width;
  canvas.height = height;

  (function render() {
    ctx.clearRect(0, 0, width, height);
    ctx.drawImage(img, 0, 0, img.width, img.height);
    requestAnimationFrame(() => render());
  })();
}

canvasに対して drawImage するだけですね。ここで requestAnimationFrame している理由なんですが、drawImageは静止画の転写になるのでこうしないとsvgにCSSアニメーションなどが入っていた場合に反映できないというのと、あとはなぜかこうしないとSafariが描画してくれなかったからですね。

とりあえずcanvasまではできました。

canvasをvideoに流し込む

次に先ほど作ったcanvasを動画としてvideoに流し込みます。なんだか難しそうに聞こえますが、標準機能だけでできます。iOS Safariはこの機能がバグってて実現できないんですけどね……。

const setup = async() => {
  //
  // ↑ここに先ほどまでの処理がある
  //

  // canvasを動画として取得
  const stream = canvas.captureStream(60);

  // canvasを表示するだけのvideo要素を作る
  const video = document.createElement('video');
  video.autoplay = true;
  video.muted = true;
  video.playsInline = true;
  video.width = width;
  video.height = height;
  video.srcObject = stream;

  await new Promise((resolve) => {
    video.ontimeupdate = () => {
      resolve();
    }
    video.play();
  });

  return video;
}

canvasに captureStream というメソッドが生えてますね。これは指定したフレームレートで動画として書き出してくれる機能です。今回は60fpsです。引数を省略するとcanvas更新時のみ動画も更新され、0に指定すると手動で引っ張ってこないと更新されなくなります。

また、video要素を勝手に再生するときはmutedとplaysInlineが必須です。ユーザジェスチャーがあればよいのですが、JavaScript側で先行して再生したい時などはこれらをtrueにしておきましょう。

あとはPromiseで見苦しいことをやっているのですが、こうしないとmacOSのSafariで動きませんでした。macOSのSafariではplay直後に一度suspendしたあとにバッファ溜まってから再生再開という挙動になっていたので、timeupdateを待つと確実だったというわけです。

動画をPiPにする

あとはPiPにするだけです。

//
// ↑このあたりにさっきの関数がある
//

(async function main() {
  const video = await setup();
  pipButton.style.opacity = 1;

  video.onenterpictureinpicture = () => {
    video.style.display = 'none';
  }

  video.onleavepictureinpicture = () => {
    video.remove();
  }

  pipButton.addEventListener('click', (event) => {
    document.body.appendChild(video);
    video.play();
    video.requestPictureInPicture();
  });
})();

PiPにするにはvideo要素の requestPictureInPicture というメソッドを呼び出すだけなのですが、呼び出すにはユーザジェスチャー（クリックイベント等）必須なので注意してください。

video要素をbodyに追加しているのはSafari対策です。一瞬だけでも表示させないとPiPが真っ黒になったので……。このあたりに関してはSafariのほうが挙動的に正しそうな気もしますけどね。

実行

あとはブラウザで開いて動作確認です。fetchとか使ってるのでファイルから開くのではなく適当にサーバ立ててください。よくわからなかったら適当に python3 -m http.server とか叩くとサーバ起動します。

ボタンを押せばHTML要素がPiPになるはずです！

その他

この方法ではアニメーションを含むgifやwebpを扱えません。常に最初のフレームが表示されます。アニメーション画像や動画を使いたい場合は、自力でフレームをバラバラにして次々に描画する必要があると思います。一方でCSSアニメーションは大丈夫です。

また、あくまで要素全体をコピーしているだけなので、ユーザのインタラクション等は再現できません。あくまである程度静的なコンテンツを表示するためのトリックです。

プログラム全体

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Picture in Picture</title>
    <script src="main.js" defer></script>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div id="pip-source">
      <img src="https://source.unsplash.com/9UUoGaaHtNE">
      <span class="message">Hellooooooooooooo</span>
    </div>
    <button id="pip-button">PiP them</button>
  </body>
</html>

CSS

#pip-source {
  background-color: white;
  text-align: center;
  width: 320px;
  padding: 1em;
}

#pip-source img {
  display: inline-block;
  object-position: center center;
  object-fit: contain;
  width: 100%;
}

:picture-in-picture {
  display: none;
}

JavaScript

const pipSource = document.querySelector('#pip-source');
const pipButton = document.querySelector('#pip-button');
pipButton.style.opacity = 0.3;

const setup = async() => {
  // 描画する要素のサイズを取得したい
  // 画像の読み込みが終わるまで待つ
  const waitingImgList = [...pipSource.querySelectorAll('img')];
  await Promise.all(waitingImgList.map((el) => new Promise((resolve) => {
    el.addEventListener('load', () => resolve());
  })));

  // 描画する要素のサイズを取得する
  // 注意：重い処理なので頻繁に呼び出さないように
  const { width, height } = pipSource.getBoundingClientRect();

  // svgタグを作る
  // SVGはHTMLではないので作り方がちょっと違う
  // 決められたNS(Namespace)を指定して作る
  const ns = 'http://www.w3.org/2000/svg';
  const svg = document.createElementNS(ns, 'svg');
  svg.setAttribute('width', width);
  svg.setAttribute('height', height);

  // foreignObjectを作る
  // foreignObjectはその中身の描画を
  // SVG自身ではなく外側（ここではブラウザ）に任せる
  const foreignObject = document.createElementNS(ns, 'foreignObject');
  foreignObject.setAttribute('width', width);
  foreignObject.setAttribute('height', height);

  // 表示したい要素のコピーを作る
  // xmlとしてのNSを追加
  const html = pipSource.cloneNode(true);
  html.style.display = 'content';

  // 画像をすべてDataURLに置き換える
  const imgList = [...html.querySelectorAll('img')];
  await Promise.all(imgList.map(async (el) => {
    const data = await fetch(el.src).then((res) => res.blob());
    const reader = new FileReader();
    const url = await new Promise((resolve) => {
      reader.onload = () => resolve(reader.result);
      reader.readAsDataURL(data);
    });
    el.src = url;
    return el.decode();
  }));

  // 描画に必要そうなものを作っておく
  const style = document.createElement('style');
  const css = await fetch('style.css').then((res) => res.text());
  style.textContent = css;

  // 組み立てる
  html.appendChild(style);
  foreignObject.appendChild(html);
  svg.appendChild(foreignObject);

  // svgを文字列化してURL化する
  const svgStr = new XMLSerializer().serializeToString(svg);
  const svgUrl = 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(svgStr);

  // svgを画像として読み込む
  const img = new Image(width, height);
  img.src = svgUrl;
  await img.decode();

  // canvasを作る
  const canvas = document.createElement('canvas');
  const ctx = canvas.getContext('2d');
  canvas.width = width;
  canvas.height = height;

  (function render() {
    ctx.clearRect(0, 0, width, height);
    ctx.drawImage(img, 0, 0, img.width, img.height);
    requestAnimationFrame(() => render());
  })();

  // canvasを動画として取得
  const stream = canvas.captureStream(60);

  // canvasを表示するだけのvideo要素を作る
  const video = document.createElement('video');
  video.autoplay = true;
  video.muted = true;
  video.playsInline = true;
  video.width = width;
  video.height = height;
  video.srcObject = stream;

  await new Promise((resolve) => {
    video.ontimeupdate = () => {
      resolve();
    }
    video.play();
  });

  return video;
};

(async function main() {
  const video = await setup();
  pipButton.style.opacity = 1;

  video.onenterpictureinpicture = () => {
    video.style.display = 'none';
  }

  video.onleavepictureinpicture = () => {
    video.remove();
  }

  pipButton.addEventListener('click', (event) => {
    document.body.appendChild(video);
    video.play();
    video.requestPictureInPicture();
  });
})();

JavaScriptのIntl.Segmenterで文章の意味分割を行う

Sat, 21 Nov 2020 10:22:00 GMT

コンピュータ上で文字列を扱う時、データ上は単にコードユニットの羅列でしかなく、そこに単語や文としての意味合いはありません。

しかし我々は人間であり、単なる文字列ではなく文章として処理したい場合があります。そんなとき、 Intl.Segmenter が役に立つかもしれません。

文章の分割と仕様の標準化

プログラムを書く上で、文字列の処理、というより「文章の処理」をしたくなることがしばしばあります。文章というのは単語や文で構成された、単なる文字コードの連続ではなく、人間的に意味を持つ単位が連続したものとなります。

今まで文字列の意味的な分割は Intl.v8BreakIterator を用いて行っていました。これはChromeやNode.jsで使用されているV8エンジンの独自の仕様であり、一般的な物ではありません。なおかつNode.jsでは意図的に無効化されています。

Intl.v8BreakIterator の代替はしばらく存在しなかったのですが、 Intl.Segmenter というProposalが上がり、そろそろ正式なものになりそうです。Chrome 87にも実装されましたし、まだ使用はできませんがFirefoxやSafariにも実装自体はされたので、紹介しておきたいと思います。

Intl.v8BreakIterator

Intl.Segmenter を紹介する前に、歴史のお勉強として Intl.v8BreakIterator について知っておきましょう。

V8エンジンに独自実装されていた Intl.v8BreakIterator は、文字列を単語や文に分割する機能を持つオブジェクトです。

V8エンジン独自実装ですが、Node.jsではデフォルトでは無効化されているので実質的にChrome専用のメソッドとなります。 非標準のAPI であるため、使用は推奨されません。

このような感じで使えます：

const text = 'メロスは激怒した。';

const itr = new Intl.v8BreakIterator(['ja-jp'], { type: 'word'});
itr.adoptText(text);

let pos = itr.first();

while(pos != -1) {
  const nextPos = itr.next();
  if(nextPos === -1) { break; }
  const str = text.slice(pos, nextPos);
  const type = itr.breakType();
  console.log(str, type);

  pos = nextPos;
}

見ればわかると思いますが、名前にIteratorとついているのにIterableではありません。

出力はこうなります：

メロス ideo
は ideo
激怒 ideo
した ideo
。 none

Intl.Segmenter

Intl.Segmenter は Intl.v8BreakIterator と似た機能を持つJavaScript標準のAPIです。長らく存在しなかった Intl.v8BreakiTerator の標準機能版となります。

使い方は以下のようにします：

// Segmenterオブジェクトを作成する
// 日本語を対象とし、単語単位で分割するSegmenter
const segmenter = new Intl.Segmenter("ja", {granularity: "word"});

// 文字列をセグメントに分割する
const segments = segmenter.segment('メロスは激怒した。');

// segmentsはIterableなのでfor-ofなどが使える
for(const seg of segments) {
  // seg.segmentに単語が入っている
  console.log(`Word: ${seg.segment}`);
}

これで以下のように出力されます：

Word: メロス
Word: は
Word: 激怒
Word: した
Word: 。

まずはSegmenterオブジェクトを作成します。Segmenterオブジェクトには第一引数にロケールを、第二引数にオプションを渡します。オプションには分割単位を指定します。

// Segmenterオブジェクトを作成する
// 日本語を対象とし、単語単位で分割するSegmenter
const segmenter = new Intl.Segmenter("ja", {granularity: "word"});

第二引数で選べる分割単位 granularity （粒度）は以下のようになっています：

grapheme（書記素 ≒ 文字）
word（単語）
sentence（文）

省略した場合は自動的にgraphemeになります。

次に文字列を渡し、セグメントに分割してもらいます。

// 文字列をセグメントに分割する
const segments = segmenter.segment('メロスは激怒した。');

これで文字列を適切に分割した、Iterableな Segments オブジェクトが返ってきます。

Iterableなのでfor-ofなどで扱えます。

// segmentsはIterableなのでfor-ofなどが使える
for(const seg of segments) {
  // seg.segmentに単語が入っている
  console.log(`Word: ${seg.segment}`);
}

使い方はこれだけです。

Segmentデータ

各々のSegmentデータは以下のようになっています：

type Segment = {
  segment: string;      // セグメント文字列
  index: number;        // セグメントの入力文字列上の位置
  input: string;        // 入力文字列の全体
  isWordLike?: boolean; // 単語かどうか。word分割のときのみ
};

segment には文字や単語、文などが入っています。何が入っているかはSegmenterオブジェクトに指定した granularity によって変わります。 word を指定していれば単語が入っています。

index は文字列全体の中のインデックスです。 input は入力文字列そのものが入っています。

isWordLike は granularity: 'word' のときのみ使用でき、単語なら true で、それ以外の記号などは false になります。

実査に使うときは分割代入などで必要な値だけを取り出すと使いやすいでしょう。

for(const {segment, isWordLike} of segments) {
  if(isWordLike) {
    console.log(segment);
  }
}

Segmentsオブジェクト

Segmentsオブジェクトには containing というメソッドがひとつ実装されています。

containing メソッドは文字列全体上のインデックスを受け取り、その位置の文字を内包するセングメントを返します。

例えば以下のように使います：

// Segmenterオブジェクトを作成する
// 日本語を対象とし、単語単位で分割するSegmenter
const segmenter = new Intl.Segmenter("ja", {granularity: "word"});

// 文字列をセグメントに分割する
const segments = segmenter.segment('メロスは激怒した。');

// 'メロスは激怒した。' の 2文字目（indexは1）が含まれるセグメントは？
console.log(segments.containing(1));

出力は以下のようになります：

{segment: "メロス", index: 0, input: "メロスは激怒した。", isWordLike: true}

「メロスは激怒した。」の2文字目「ロ」を内包しているセグメントは「メロス」なので、メロスのセグメントが得られます。

サポート状況

実装は済んでいるけどChrome以外は有効化されていない、という状況です。有効化を待ちましょう。

Chrome
- Chrome87で正式リリース済み
Firefox
- 実装済み / 未リリース
Safari
- 実装済み / 未リリース
Node.js
- 未有効化

11月より株式会社stand.fmに入社します

Thu, 22 Oct 2020 17:08:00 GMT

10月末で現職の株式会社トップゲートを退職し、11月からは株式会社stand.fmで働くことになります。

会社としてのstand.fmについて、オファー面談の時に代表に「転職エントリ書きたいんですけど、なんか宣伝しときたいこととかありますか」って聞いたら「自分が持ってる印象を正直に書けばいいと思う！率直に書いてくれるのが一番だよ」って言われたので、自分なりに頑張って書きます。なんか間違ってる部分あったらごめんなさい。

株式会社stand.fmについて

株式会社stand.fmは、音声配信プラットフォームであるstand.fmを開発・運営しているスタートアップです。あんまり聞いたことないと思います。僕も名前ぐらいしか知りませんでした。今年（2020年）の4月に会社ができたらしいです。まだ社員数10名ちょっとみたいですが、これから採用を頑張っていくらしいです。

今年の中頃、米国でClubhouseという音声SNSが流行していることが国内でも話題になりましたよね。音声での交流は動画での交流よりもハードルが低く、かつテキストの交流よりも温度を感じやすい特性があります。今では様々な会社が音声SNSの提供を始めており、群雄割拠の時代となっています。

stand.fmもノリとしては似たような感じで、番組を収録していつでも聴けるようにしたり、ライブ配信をして双方向のコミュニケーションをとったり、視聴者から「レター」をもらってそれを話題にしてさらに収録をして……といったことができるようになっています。

中でも面白いのは複数人によるライブ配信です。これは事前に人を集めて配信を始めるわけでなく、ライブ配信中に挙手した人を登壇許可したり、ライブ配信者側から現在の視聴者に登壇リクエストを送ることができます。双方合意すればその場で喋り始めることができ、アドリブ感あふれる配信を楽しむことができます。

ライブ配信は2020年10月現在、5人まで同時に喋ることができます。そこから生まれるセレンディピティもあり、ある種のカオスも楽しむこともできます。この展開が予想できないジャムセッションが本当に面白く、stand.fmを特徴付けていると思います。

stand.fmに入って何をするのか

入社後の仕事としては、React NativeやReact Native for Webを使ったアプリケーション開発がメインになると思います。WebSocketやWebRTCといった双方向通信の仕組みをバリバリ使っているようなので、そういうところは楽しそうです。音声配信プラットフォームなので音声周りの処理も横から覗くぐらいはできるかもしれません。

単なる開発だけでなく、プラットフォームとして育てる部分にも関わっていきたいです。長期的に見れば「競合製品よりすごい」で終わってほしくなくて、ユーザに"Plus Ultra（もっと先へ）"の体験を与えられるようなプラットフォームにできればなあと、ぼんやり考えてます。

Twitter転職とstand.fmに決めた理由

今回もTwitter経由での転職をしました。適当に経歴まとめたgist書いてツイートしただけです。もちろん様々な会社からの面談お誘いが来てたわけですが、中でも自社プロダクトやってるところ中心に面談受けに行ってました。その中でもstand.fmがひときわ目を引きました。

stand.fmは単にYouTubeを音声方面にスライドさせただけのサービスではなく、人と人との繋がりを重視するサービスです。SNSといえばフォロワー数稼ぎ合戦が始まったり、Like稼ぐために人生狂わせたりなどが発生しやすい環境です。もちろんそういった数字を軽視しているわけではなく、プラットフォームを構成する重要な要素のひとつではありますが、そればっかりだと疲れますよね。

だから「繋がろう」とstand.fmは言うわけです。仲良い人を作って、ワイワイやろう、と。再生数よりもひとつのレターの方が心を救うことだってありますし、一度のライブセッションが一生忘れられない思い出になったりするわけです。スマホの向こうにいる人間を感じて、元気を与えてもらおうと。トップ配信者たちが切磋琢磨して人気を稼ぐのも許容するし、仲間内で盛り上がるだけのコミュニティも許容する、懐の深いサービスになっています。

正直、自分が求めていたサービスのひとつの理想型でした。音声配信プラットフォームという領域にはそこまで興味がありませんでしたが、人々が安心して住うことのできるプラットフォーム作りへのアプローチのひとつが音声であるのならば、そこに手を貸せば自分の漠然と抱いていた夢も叶うと考えました。

ただ、実際にアプリを使ってみるとわかるのですが、stand.fmにはまだまだ拙い部分もかなり多くあります。本来実現したいことの20%も達成できていないのではないかなと感じています。見ている未来は決して非現実的ではなく、ただおそらく開発リソースが圧倒的に足りていない。ユーザ数の増加に対してどうしても後手にまわってしまっていて、先へ進むためのアクションが取れていません。逆にいうとリソースの制約という現実問題さえ潰せれば、あとはうまくいくんじゃないかと感じました。

加えて、中の人たちがある程度冷静であることも決め手でした。スタートアップの中にはよくわからない夢を語るだけで、現実的な議論が成立しない人たちもいます。でもstand.fmは何が足りていて何が足りていないかをしっかり考えています。「今あるリソースはこうで、プロダクトとしてのコアバリューはここだから、ここにこれだけ割き、ここは保留する」といったお話ができます。でも全く冷徹なわけではなく、現実的な割り切りをしつつもしっかりとユーザ体験を重視する内熱の高さも持ち合わせています。

おそらく気持ちよく働けるだろうな、という直感がありました。流行り始めたばかりの分野で、未来が確実にあるわけではないかもしれないけど、自分の時間の一部を差し出す価値はありそうだと判断しました。

たぶん最初はバタバタして苦労するだろうなーと思いつつ、落ち着いてきたらいろいろプラットフォームとして盛り上げていく提案もしていきたいですね。

転職の理由

トップゲートでは一定の役割は果たせたのかなと。いろいろ勉強会主催したり開発標準作ったり、社内で使うアプリ作ったり。そんなことをやり続けてるうちに、他のプロジェクトについてアドバイス求められたり、フロントエンドについてご意見番的な立ち回りをするようになったり、社長込みの技術会議に呼ばれるようになったり。「フロントエンドといえば古都ことだな！」という空気が完全に出来上がっていました。

でも会社が大きくなるにつれて、後から優秀な人たちが入ってきました。そんな中で早期に大阪事業所に入社していろいろ騒いで目立っていただけの僕が、ある種の先行者利益にあぐらかいてさも当然のように「みんなをリードします」みたいな顔してんのは違うよなあって気持ちが膨らんできていました。僕より優れたタレントを持つ人たちが本来活躍すべき場で、僕のような社会人経験3年目のド素人がしたり顔で技術について語ってるのは無責任なんじゃないかと。

なので方向転換して「挑戦者」として新たな領域に足を踏み入れたいと思うようになりました。でもトップゲートでそれを実現するにはいくつかのステップをクリアする必要があったと思います。じゃあもう転職したほうが早いかなって。

退職にあたり、非常に多くの方が温かく送り出してくれました。みんな退職を惜しんでくれ、引き止めてもくれました。今まであまり実感はなかったけど、自分のやってきたことはみんなのためになっていたんだなあと初めて痛感できました。

転職活動中に社長が亡くなる大事件もありました。社長とは何度も口論したり技術について語ったり飲みに行ったりしていたので、これを知らされたときは何も言葉が出てきませんでした。本当に転職しても良いのか何度も考えましたが、僕がいなくてもなんとでもなる組織になったと思うので、前に進むことにしました。

フルリモート前提の転職

stand.fmは東京の会社ですが、僕は大阪住みです。つまり大阪からフルリモートで働くことになります。

コロナウィルスは世界中に大打撃を与えましたが、世の中がリモート前提になったことで就職の選択肢は広がりました。今まで諦めていたような所在の会社にも入れる可能性が出てきたので、皆さんもいろいろ調べてみると面白いかもしれません。

stand.fmでは一緒に働く人を募集しています！

まだまだ社員は募集しているようなので、stand.fmの採用情報を貼っときます。

https://corp.stand.fm/recruit

2020年10月現在、エンジニアやデザイナ、人事などを募集しているので、興味ある方はぜひ。

ReactのカスタムHooksをカジュアルに使ってコードの見通しを良くしよう

Fri, 21 Aug 2020 08:25:00 GMT

もはやReactにHooksのない生活は考えられず、私たちのReactコードの中には多数のHooksが使われています。

一方でその弊害として、使われているHooksが多すぎてコードが散らかり始めた人も多いと思います。Hooksは便利ですが粒度は小さく、プログラムの規模によっては多用しなければなりません。

そこでカスタムHooksの使用を勧めます。カスタムHooksを使うことでコードの見通しを良くすることができます。

カスタムHooksをカジュアルに使っていく

カスタムHooksというと、どちらかというとReactの中では難しい部類に入ります。主に「使い方がわからない」「公式ドキュメントが不親切」「ネットの解説が難しい」あたりが問題になるでしょう。しかし難しい機能だからと言って難しく使う必要はなく、自分の使える範囲で自由に使えばいいのではないかと思います。

カスタムHooksは一般にロジックの分離や再利用性の向上、テストの容易化などのために使われますが、実際にはもう少しカジュアルに使っても大丈夫です。難しいこと考えずにまずは「フックが増えすぎたからカスタムHooks導入してみよう」ぐらいの気持ちから始めて行きましょう。

本記事ではカスタムHooksを用いた簡単なパターンについて、いくつか紹介します。読んでいくうちにその魅力に気づいていただければと思います。

カスタムHooksの基本

Hooksの基本的な知識については最近Reactを始めた人向けのReact Hooks入門をご覧ください。

ReactではカスタムHooksを作ることで、既存のHooksに囚われない自由な処理を取り扱えます。カスタムHooksの作り方は簡単で、ただ関数を定義するだけです。決まり事は名前を useXXX にする、ただそれだけです。これにも強制力があるわけではないですが、ReactのデフォルトHooksがすべて useXXX なのでそれに合わせておきましょうというだけの話です。

const useHello = () => {
  return 'Hello';
};

しかし上の定数を返すだけの例は本当にHooksなのかというと怪しいです。普通は他のHooksと組み合わせて使います。カスタムHooksの内部では他のHooksを使うことが可能です。

const useCount = () => {
  const [count, setCount] = useState(0);
  const countUp = () => setCount((c) => c+1);
  
  return [count, countUp];
  // TypeScriptの場合はas constをつける
  // return [count, countUp] as const;
}

このuseCountというHooksでは内部でuseStateを使っており、状態値を保持することができます。返却値はcount値そのままと、countを増加させるcountUp関数です。

使い方は普通のHooksと同じです。

const App = () => {
  const [count, countUp] = useCount();
  return <div onClick={countUp}>{count}</div>
};

カスタムHooksのマナー

カスタムHooksには制約がありません。自由な使い方をしても動作に支障が出ることはなく、何かしらのルールを守る必要はありません。

しかし一般的なマナーのようなものが暗黙に存在し、これを破ると使用者側にちょっとびっくりされます。そのマナーというのは「デフォルトのHooksにスタイルを合わせる」です。具体的には以下の2つになります。

戻り値は無し、1個の値、2個のタプルのいずれかである
- 無しはuseEffect、1個はuseRef、2個のタプルはuseState、が代表的
- 4個とか5個とかになってきたら分割を考えてみましょう
使用者側で再評価の制御をしたい場合は依存配列を使う
- useEffectの第二引数と同じようにする

どちらも簡単なマナーなので、少し意識してみると綺麗なカスタムHooksが作れるかもしれません。

複数のHooksをまとめる

例えば時計アプリを作りたいとします。素直に作れば以下のようになるでしょう：

export const App = () => {
  const [date, setDate] = useState(new Date());

  // 毎秒更新する
  useEffect(() => {
    const timer = setInterval(() => {
      setDate(new Date());
    }, 1000);

    return () => clearInterval(timer);
  }, [setDate]);

  return <div>{date.toLocaleTimeString()}</div>
};

このコードには特に問題はなく、動作もします。しかし少々不格好というか、将来的な機能追加にともなってどんどん膨れ上がっていくことが予想できます。

問題の根本としては、1つの機能に対して2つのHooksを使っているところにあります。また、内部的なロジックもベタ書きされており、少し「細かいコード」かなという印象を受けます。

このDateの更新周りのHooksをカスタムHooksに押し込めてしまいます。

const useCurrentDate = (interval) => {
  const [date, setDate] = useState(new Date());

  useEffect(() => {
    const timer = setInterval(() => {
      setDate(new Date());
    }, interval);

    return () => clearInterval(timer);
  }, [setDate]);

  return date;
};

そしてこのHooksをコンポーネント側で使います。

export const App = () => {
  const date = useCurrentDate(1000);
  return <div>{date.toLocaleTimeString()}</div>
};

びっくりするほどスッキリしましたね！このようにカスタムHooksを使うことで、複雑に絡み合ったHooksをひとつのHooksにまとめあげることができます。

「ひとつのコンポーネントにHooksが10個とか並んでて、しかもどれがどれに依存しているのかわからない…」という方はカスタムHooksを使用してみてはどうでしょう。

複雑なイベント制御を隠蔽する

Reactのコードはシンプルに保つことこそ美徳です。しかし複雑なイベントを扱う場合はそうも言ってられません。

例えば「マウスの位置を取得したい。なおかつイベントはthrottlingする」などと考えだすと、コードの量はすさまじいことになります。このとき useMousePosition というフックを作って、そこに複雑な処理を押し込めれば物事はシンプルになりそうです。

const useMousePosition = (interval = 0) => {
  const [position, setPosition] = useState({x: 0, y:0});

  useEffect(() => {
    let lastCalled;

    const handleMouseMove = (event) => {
      const currentTime = performance.now();
      if(lastCalled && currentTime - lastCalled < interval) {
        return;
      }

      setPosition({x: event.pageX, y: event.pageY});
      lastCalled = currentTime;
    };

    document.addEventListener('mousemove', handleMouseMove);
    return () => document.removeEventListener('mousemove', handleMouseMove);
  }, [interval, setPosition]);

  return position;
};

useMousePoition フックは引数で受け取ったインターバルでスロットリングされる、マウス座標取得処理です。このフックを使うには、ただ以下のようにするだけです：

export const App = () => {
  const {x, y} = useMousePosition(50);
  return <div>Pos: {x}, {y}</div>;
};

実にシンプルですね。処理が複雑になればなるほどカスタムHooksは効果を発揮します。

操作を制限する

Hooksは汎用的な機能であり、使用側に任意の操作を許します。しかし時としてそれが邪魔になることがあります。そういった場合は通常のHooksをカスタムHooksを使って隠してやることで操作を制限することができます。

例えば以下は非同期処理の結果を変数に格納するコードです：

export const App = () => {
  const [data, setData] = useState();

  useEffect(() => {
    const timer = setTimeout(() => setData('Hello'), 1000);
    return () => clearTimeout(timer);
  }, [setData]);

  return <div>{data}</div>;
};

しかしこのとき setData はコンポーネント内に無防備に露出しています。つまりデータを変更しようと思えば App コンポーネント内ならどこでもできてしまいます。問題になることは少ないのですが、可能であれば隠してしまいたい場合もあると思います。

カスタムHooksを使うことで setData を隠してしまうことができます。非同期部分を useAsyncData フックとして切り出してみます。

const useAsyncData = (promise) => {
  const [data, setData] = useState();

  useEffect(() => {
    promise.then((result) => setData(result));
  }, [promise]);

  return data;
};

あとは使うだけですね。

const timeout = async (fn, delay) => {
  return new Promise((resolve, reject) => {
    setTimeout(() => resolve(fn()), delay);
  });
};

export const App = () => {
  const data = useAsyncData(timeout(() => 'Hello', 1000));

  return <div>{data}</div>;
};

カスタムHooksを通して利用することで setData を隠してしまって、関係のない場所からは触れないようにしました。

さいごに

カスタムHooksというと複雑な事情を備えた高度な機能だと捉えがちです。もちろん結合の緩和であるとか抽象的なインターフェイスの提供などに使うのが一番効果を発揮するのですが、まずはカジュアルに、ちょっとした処理をまとめるところから始めてみませんか？

慣れきたらより難しい使い方もできるようになりますし、なによりカジュアルな使い方でも効果は大きいです。いきなり100%活用しようとするのではなく、40%ぐらいを目指せばいいと思います。それで十分です。

Reactには今後も様々な機能が増えると思いますが、怖がらず、軽く触れてみるところから始めてみましょう。きっと何かのためになるはずです。

シンプルなReactプロジェクトを簡単に構築するだけのツールを作った

Tue, 11 Aug 2020 07:48:00 GMT

単純なReactプロジェクトを簡単に作るためにcreate-xxx-appというツールを作ったので紹介します。

create-xxx-app

create-xxx-app はテンプレートからNode.jsプロジェクトを作るためのパッケージです。

私が個人的に使うために作ったものですが、一応npmにpublishしているので簡単に解説しておきます。xxxという文字の並びにはエロい意味があるらしいですが、気にしないでおきます。

Node.jsがインストールされた環境で以下のコマンドを叩きます。

npx create-xxx-app プロジェクト名 --template react

これでReact開発環境の整った「プロジェクト名」フォルダが出来上がります。今のところ対応しているテンプレート名は「react」のみです。

また、「react」テンプレートも暫定状態でpublishしています。今後大きな変更が入る可能性もあります。

create-xxx-appは個人でとりあえず使うために作ったので、まだエラーハンドリング等もしていません。このあたりは今後の課題になります。macOSでしか動作確認してないので他のOSで動くかもわからないです。

create-xxx-appの仕事

create-xxx-app（CXA）は以下の動作をします。

テンプレートファイルをコピーする
依存関係をnpm installする

以上で全てです。

なぜcreate-react-appを使わないのか

create-react-app（CRA）は素晴らしいツールです。当時、ネットには様々な「React構築ベストプラクティス」が溢れ煩雑になっていました。そんな中でCRAはReact開発環境のセットアップを容易にし、多くの人々を導いてきました。

一方でCRAは、複雑な物事をまるでシンプルに見せかけるために、様々な"おせっかい"が混入しています。特に react-scripts 周りはほぼブラックボックスとなっており、プロジェクト自体がここに依存してしまいます。

ejectすることでフラットなプロジェクトに変換できるという脱出ハッチは用意されてはいるのですが、水面下でもがくために難解な構造をしたスクリプトや設定ファイルを展開されたところで、何をすればいいのかよくわからんというのが正直なところです。

また、ejectしたところでwebpackやjestに強く依存した部分については変わりません。ひと昔前ならwebpackでもよかったのですが、最近では選択肢も増えてきたので自由に選びたいところです。

あとは単純な話として、公式のテンプレートの出来が良くありません。親切のために様々な便利コードが書かれていたり、使いもしないアセットも同梱されています。プロジェクトを始めるときに、まずはこれらのお節介をひとつひとつ丁寧に削除していく必要があります。カスタムテンプレートを作るという手もあるのですが、結局CRAの手の中で動くことには変わりありません。

CRAだけでなく、 create-snowpack-app や他の create-*-app 系でも同じです。いろんなところから設定ファイルをextendsで引き摺り回し、裏側は隠蔽され、膨大な親切サンプルファイルが出来上がります。

Node.jsのプロジェクト構成というのはnode_modulesとソースディレクトリのカオスを除けば、追えないレベルに肥大化することはそうそうなくて、いろんな箇所に依存して継承して隠蔽してとする意味はあまりないです。手元のエディタのみで一覧できなくて死ぬほど困ることの方が多いです。

CXAは何を達成したいのか

CXAのやっていることは単純なファイルコピーと npm install のみです。おわり。

でも私が本当に必要だったものってこれなんです。高度な抽象化とか親切なサンプルコードとかじゃなくて、コピーとインストールがほしかった。単に最初の手間を省くだけでいいのに、ゆりかごから墓場まで面倒見てくれるようなお節介スクリプトを同梱してくれなんて一度も頼んでない。でもどれだけ探してもこれを達成してくれるものが出てこない。じゃあ自分で作っちゃおうという動機です。

プロジェクト構築ツールはプロジェクト構築を終えたら役目を終えてほしいというのが個人的な思いでした。プロジェクトの根幹にまで食い込むのであれば、それはもはやただの呪いじゃないですか。

yarn create でいいじゃんと思うかもしれませんが、それはyarnが標準になったら考えます。

cxa-template-react

reactテンプレートの構造も単純にしています。まだWIPですが、リポジトリを見ていただければ雰囲気は掴めるかと。

https://github.com/kotofurumiya/cxa-template-react

主な依存パッケージは以下の通りです。

react
react-dom
typescript
esbuild
browser-sync

令和にもなってbrowser-syncかよって思うかもしれませんが、このあたりはとりあえず突っ込んだだけです。

ソースコードは以下のもののみです。

src
- index.tsx
- App.tsx
public
- index.html
- style.css
tools
- devserver.js

中身もシンプルにしてあります。

import React from 'react';

export const App = () => {
  return <div>Hello React</div>;
};

正直borwser-syncも過剰だと思っていて、これを削るかもまだ悩んでいます。

CXAで作られたアプリのカスタマイズは簡単です。自動リロードが不要ならbrowser-syncをアンインストールするだけでいいし、jestが欲しかったらインストールするだけ、prettierがいるなら自分で入れる。それで終わり。CXAで作られたアプリはCXAがなくても独立して生きていけます。ejectも不要です。単なるひとつのNode.jsプロジェクトとして存在します。

カスタムテンプレート

CXAはReactに限らず一般的なNode.jsプロジェクトの構築に使用することができます。テンプレートを cxa-template-templatename の命名規則でnpmにpublishすれば、 npx create-xxx-app prjname --template templatename でプロジェクトを作成できます。

ファイルの構造とかフォルダの意味とかはドキュメントがまだできていないので、cxa-template-reactを見て雰囲気で察してください。

これからの話

まだ作りが雑なんでちゃんと詰めていこうと思います。普通に使うだけで当然の権利のようにUnhandled Promise Rejectionが出てくる。

また、テンプレートの置き場はnpm registryにしか対応していませんが、fileやgitにも対応できればいいな程度に考えてます。

テンプレート側もちゃんと考えていこうと思います。React、シンプルにやりたいですからね。

WebTransportを用いてブラウザ上からUDP/QUICによるリアルタイム双方向通信を行う

Thu, 30 Jul 2020 17:54:00 GMT

ウェブとリアルタイム通信は、もはや切り離せない関係となりました。ロングポーリングやそれを応用したComet、チャンク通信を利用したServer-Sent Event、新しくはWebSocketという技術は、いずれもリアルタイム通信を実現するために先人たちが築き上げてきた礎です。

それらの技術の中に、次は WebTransport が加わろうとしています。

WebSocketとTCP

WebSocketという偉大な発明は、ひとつの時代を作りました。双方向性のリアルタイム通信がもたらした恩恵は計り知れません。

しかし一方で問題もありました。 WebSocketはTCP上に構築されたプロトコルであり、当然ながらTCPの特性による制約を受けます。顕著な例としてTCPの到達保証や順序保証があります。TCPにおいてはパケットが途中でロスした場合は再送制御が行われます。また、パケットには番号が振られ、送信された順番通りに組み立てなければなりません。このおかげで「TCPを使えばパケットは必ず届くし、順番も保証できる」という高い信頼性を確保できるのですが、もちろん欠点もあります。順序保証のため 「ひとつのパケットがロスすると後続のパケットを利用できない」 という現象が起こります。これを Head-of-Lineブロッキング と呼びます。

順序保証はTCPの大きなメリットのひとつです。しかしHoLブロッキングの影響で本来送信したかったデータの利用が遅れることは特定の分野で問題になりました。例えば映像ストリーミングの世界では、到達保証や順序保証は必要ありません。「現在の映像が、遅延なく届く」ことが重要であり、映像のすべてのフレームが順番通りに必ず連結できることは求めていません。競争性の高い対戦ゲームにおいてもそうです。現在の対戦相手の座標などをリアルタイムに知ることが重要であり、数フレーム前の情報到達を保証されても、もはや何の役にも立ちません。

TCPの大きな価値となる部分が、特定の利用領域にとっては害となっていたのです。

WebRTCとUDP

信頼性に重きを置いたTCPの対照的な存在として、UDPが存在します。

UDPは「信頼性のない」通信プロトコルであり、 順序や、到達そのものを保証しない 特性があります。何も保証せずただただ一方的にデータを送りつけるだけのプロトコルなので、仕組みが非常にシンプルで、TCPで発生する各種問題とは無縁です。

ウェブでUDP通信を行うには現在ではWebRTCを使う必要があります。WebRTCは主にビデオチャットなどに用いられています。この話だけを聞くとWebRTCとWebSocketは相補の関係にあるように思えます。しかし実際には異なります。 WebSocketがServer-Clientでの接続方式を前提としているのに対し、WebRTCはPeer-to-Peer（サーバを介さずコンピュータ同士を直接つなぐ）方式になっています。 Peer同士の接続のためには複雑な手順を踏まねばならず、UDPを使うためだけにWebRTCをセットアップするのは労力に見合いません。

現在、ウェブにおいて気軽にServer-Client方式のUDP通信を実現する手段は存在しません。

WebTrasnportの登場

「WebSocketのように簡単に使える双方向UDP通信の仕組みが欲しい」というのがウェブ開発者の正直な気持ちでした。そしてそれが実現しようとしています。ついに WebTransport の登場です。

WebTransportはプロトコルとして主に QUIC を用います。 QUICはUDPの上に構築された柔軟性のあるプロトコルで、UDPでありながらもTCPのように到達の保証をするという芸当もできます。

WebTransportを使えばServer-Client方式で簡単に双方向接続ができます。信頼性のある通信も信頼性のない通信も両方扱えます。まさに夢の仕様とも言えるでしょう。

WebTransportには現在2種類のインターフェイスが存在します。ひとつは QuicTransport です。名前の通りQUICを用いたWebTransportを実現します。接続URLには quic-transport:// を用いますもうひとつは Http3Transport です。こちらは通信にHTTP/3を用いたもので、URLは https:// を用います。

実装状況

WebTransportはChrome84において QuicTransport のみ実装されています。 Chrome84時点では利用にはフラグを変更する必要があり、 chrome://flags より Experimental Web Platform features を有効化すれば使えるようになります。

他ブラウザにおいては未実装となっています。

仕様について

この記事の内容は2020/07/31時点での仕様に基づいています。 WebTransportの仕様は随時更新されていますので、変更点は適宜チェックしてください。

https://wicg.github.io/web-transport/

QUICサーバを立てる

WebTransportの利用には当然QUICに対応したサーバが必要です。幸運なことにGoogleがQUICのサンプルサーバ実装を公開しているので、それを使いましょう。

以下のURLからダウンロードできます。

https://github.com/GoogleChrome/samples/blob/7b9ca12e0a8c7e35837ac32ab03f7f0f0c5ce8bd/quictransport/quic_transport_server.py

このサーバの実行にはPython3.6以降と aioquic というライブラリが必要になります。 aioquic のインストールにはOpenSSLのヘッダが必要になりますので、以下のREADMEを参考にインストールしてください。

https://github.com/aiortc/aioquic

OpenSSLのヘッダをインストールできたら、 aioquic をインストールします。

pip3 install aioquic

QUICはTLSが必須となっており、何かしらの証明書がないと動かないので適当に作ります。 openssl コマンドはバージョン1.1.1以上を使います。 aioquic インストールの過程でOpenSSLもインストールされているはずなのでコマンドを叩きます。（※ macOSの場合はbrewでインストールした openssl コマンドをフルパスで実行します）

/usr/local/opt/openssl/bin/openssl req -newkey rsa:2048 -nodes -keyout certificate.key \
                   -x509 -out certificate.pem -subj '/CN=Test Certificate' \
                   -addext "subjectAltName = DNS:localhost"

以下のような出力が出ればOKです。certificate.key と certificate.pem という鍵ファイルができているはずです。

Generating a RSA private key
................................+++++
...........................+++++
writing new private key to 'certificate.key'
-----

これでサーバが起動できます。

python3 quic_transport_server.py certificate.pem certificate.key

ChromeからQuicTransportを使う

まずはChrome84以降で chrome://flags より Experimental Web Platform features を有効にします。 Chromeの再起動を促されてボタンが出てくるので、ボタンを押すとChromeが再起動します。これで QuicTransport が使えるようになります。まだ Http3Transport は使えません。

さっき作った適当な鍵を許可するようにChromeを起動します。鍵のダイジェストを取得します。

openssl x509 -pubkey -noout -in certificate.pem |
                   openssl rsa -pubin -outform der |
                   openssl dgst -sha256 -binary | base64

以下のような出力が得られます。

ADGFAqYrog/Dv09f/5FK1H7ZkoBQ3PtL4wYWsWYBEDQ=

このダイジェストを用いてChromeを起動します。macOSなら以下のようにします。

open "/Applications/Google Chrome.app" \
  --args --origin-to-force-quic-on=localhost:4433 \
  --ignore-certificate-errors-spki-list=ADGFAqYrog/Dv09f/5FK1H7ZkoBQ3PtL4wYWsWYBEDQ=

Windowsの場合はChromeのショートカットを作って、起動コマンドを以下のようにします。

chrome.exe --origin-to-force-quic-on=localhost:4433 --ignore-certificate-errors-spki-list=ADGFAqYrog/Dv09f/5FK1H7ZkoBQ3PtL4wYWsWYBEDQ=

JavaScript側からQuicTransportを利用する

やっとJavaScriptの話です！

HTMLファイルから用意します。とりあえず動けばいいので以下のような感じでしょう：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>WebTransport</title>
    <script src="main.js" defer></script>
  </head>
  <body></body>
</html>

main.js ファイルには以下のように記入します：

(async function main() {
  // QuicTransportをつなぐ
  const transport = new QuicTransport('quic-transport://localhost:4433/counter');
  await transport.ready;

  // 信頼性のない送信経路
  // WritableStreamDefaultWriter（ https://developer.mozilla.org/ja/docs/Web/API/WritableStreamDefaultWriter ）
  const writer = transport.sendDatagrams().getWriter();

  // 信頼性のない受信経路
  // ReadableStreamDefaultReader（ https://developer.mozilla.org/ja/docs/Web/API/ReadableStreamDefaultReader ）
  const reader = transport.receiveDatagrams().getReader();

  // stringとTypedArrayとの相互変換に使用する
  const [encoder, decoder] = [new TextEncoder(), new TextDecoder()];

  // メッセージを送信する（到達するとは限らない）
  await writer.write(encoder.encode('Hello!!'));
  writer.close();

  // メッセージを受信する（受信できるとは限らない）
  const result = (await reader.read()).value;
  console.log(decoder.decode(result));
})();

これで信頼性のない通信ができます。データの到達は保証されませんが、それゆえに高速に通信することが可能です。通信にはStreams APIを使用します。読み書きにはそれぞれ ReadableStream と WritableStream が割り当てられています。 Streams APIについては私の記事「JavaScriptのStreams APIで細切れのデータを読み書きする」でも触れているので、参考にしてください。

quic_transport_server.py は受信した文字列の長さをstringで返すサーバです。例えば 'Hello!!' を渡すと '7' が返ってきます。今回はローカルでサーバを動かしているのでほぼ間違いなくデータの送受信ができると思います。

先ほどのHTMLファイルを、自作鍵の許可をして起動したChromeで開くと正常に実行されるはずです。コンソールに '7' と表示されたら成功です。

信頼性のある通信をする

データが確実に届く、信頼性のある通信路を確保するには async createBidirectionalStream() メソッドを使います。

(async function main() {
  // QuicTransportをつなぐ
  const transport = new QuicTransport('quic-transport://localhost:4433/counter');
  await transport.ready;

  // 信頼性のある双方向ストリーム
  const stream = await transport.createBidirectionalStream();
  const reader = stream.readable.getReader();
  const writer = stream.writable.getWriter();

  // WritableStreamが不要ならReadableStreamだけを直接取得できる
  //   const reader = transport.receiveBidirectionalStreams().getReader();

  // stringとTypedArrayとの相互変換に使用する
  const [encoder, decoder] = [new TextEncoder(), new TextDecoder()];

  // メッセージを送信する
  await writer.write(encoder.encode('Hello!!'));
  writer.close();

  // メッセージを受信する
  const result = (await reader.read()).value;
  console.log(decoder.decode(result));
})();

これで読み書きのストリームが手に入ります。

双方向ではなく書き込みだけの単方向通信が行いたい場合は、 async createSendStream() または receiveStreams() メソッドで単方向のストリームを取得できます。async createSendStream() が送信専用、 receiveStreams() が受信専用です。

(async function main() {
  // QuicTransportをつなぐ
  const transport = new QuicTransport('quic-transport://localhost:4433/counter');
  await transport.ready;

  // 信頼性のある単方向ストリーム
  const stream = await transport.createSendStream();
  const writer = stream.writable.getWriter();

  // stringとTypedArrayとの相互変換に使用する
  const [encoder, decoder] = [new TextEncoder(), new TextDecoder()];

  // メッセージを送信する
  await writer.write(encoder.encode('Hello!!'));
  writer.close();
})();

その他の細かい使い方

接続を閉じる場合は close() メソッドを呼び出します。

(async function main() {
  // QuicTransportをつなぐ
  const transport = new QuicTransport('quic-transport://localhost:4433/counter');
  await transport.ready;

  // 接続を閉じる
  transport.close();
})();

さいごに

WebTransportの実装が進めば、より気軽にUDP通信が実現できるようになるでしょう。 TCPでは難しかった、低レイテンシのリアルタイム通信が達成できます。

WebTransportはUDPだけでなくQUICやHTTP/3を用いた到達保証のある通信もできるので、WebSocketのモダンな置き換えが可能になるでしょう。互換性や企業ファイアウォールのことを考えるとまだまだWebSocketも現役ですが、将来的にはWebTransportも有力な選択肢になります。

一方でWebRTCに関しては住み分けが大事になってきます。 Server-Clientで通信したい場合はWebTransport、Peer-to-Peerで通信したい場合はWebRTC、という選択肢になります。

ウェブ技術の移り変わりは目まぐるしく、しばしば驚きを与えてくれます。最新技術にキャッチアップしつつ、これからどんなことが可能になっていくのか、楽しみに待ちましょう。

Reactの実験的ステート管理ライブラリRecoilの基本的な使い方

Sun, 17 May 2020 07:38:00 GMT

Reactにおける状態管理の方法論は、様々な道を辿ってきました。ある人はReduxを使い、またある人はMobXを、またある人はuseContextで物事を解決してきたでしょう。

先日、また新しい選択肢が増えました。Facebook公式による状態管理ライブラリRecoilです。まだExperimental（実験版）なので実際のプロジェクトに導入することは難しいですが、ちょっとつまみ食いをしてみましょう。

Recoil

RecoilはFacebook製のReact状態管理ライブラリです。小さくシンプルで、Hooksネイティブなライブラリとなっており、非同期処理にも対応している点が特徴です。

まだExperimental（実験版）ということで仕様は大きく変わるかも知れませんし、もしかしたらプロジェクト自体が凍結になるかもしれません。しかしそれでも触ってみたくなるのが人間というものです。なので今日はRecoilを触ってみましょう。

注意点

2020/05/17時点でRecoilはまだ正式リリースされていません。ここに書かれている内容は大幅に変更されている可能性があります。実際に使用する際は、各自で最新の情報を追うようにしましょう。

Recoilの導入

まずはプロジェクトにRecoilをインストールします。

npm install --save recoil

現時点で型定義ファイルはありませんが、DefinitelyTypedにPullRequestが出ているので近いうちに取り込まれるでしょう。

あとはRecoilを適用したい範囲を <RecoilRoot> で囲むだけです。一般的にはルートコンポーネントを囲むことになるでしょう。

import React from 'react';
import ReactDOM from 'react-dom';
import { RecoilRoot } from 'recoil';

const App = () => (
  <div>
    Hello!
  </div>
);

ReactDOM.render(
  <RecoilRoot>
    <App/>
  </RecoilRoot>,
  document.getElementById('root')
);

Recoilによる状態管理

Recoilでの状態管理は実にシンプルで、useRecoilState フックを呼び出すだけです。 useState フックと違う点は、生の値を直接扱うのではなく、Atomというステートオブジェクトを通して値を管理するところです。

Atomは atom 関数にプロジェクト全体でユニークなキーとデフォルト値を渡すだけで作れます。

const countState = atom({
  key: 'sample/count', // 適当なユニークキー
  default: 0           // デフォルト値
});

作成したAtomを useRecoilState フックに渡すことで状態を取得できます。あとは useState と同じです。

const Counter = () => {
  // atomから状態を取り出す
  const [count, setCount] = useRecoilState(countState);

  return <div onClick={() => setCount((c) => c + 1)}>Clicked: {count}</div>;
};

以下に例を示します：

import React from 'react';
import ReactDOM from 'react-dom';
import { RecoilRoot, atom, useRecoilState } from 'recoil';

// コンポーネントの外でatomを作成する。
// atomにはユニークなkeyとデフォルト値が含まれる。
const countState = atom({
  key: 'sample/count',
  default: 0
});

const Counter = () => {
  // atomから状態を取り出す
  const [count, setCount] = useRecoilState(countState);

  return <div onClick={() => setCount((c) => c + 1)}>Clicked: {count}</div>;
};

const App = () => (
  <Counter/>
);

ReactDOM.render(
  <RecoilRoot>
    <App/>
  </RecoilRoot>,
  document.getElementById('root')
);

Atomは複数作ることもできますし、ひとつだけにしてReduxのように使うこともできます。しかし普通は複数のAtomを使うことを想定しているようなので、ある程度は分けるようにしましょう。

read-only / write-only

setXXX関数が不要な場合、 useRecoilValue フックを用いることで値のみを取得できます。これ自体にはあまり大きな意味はないのですが、ユーティリティフックとして覚えておくと良いでしょう。

const CountDisplay = () => {
  const count = useRecoilValue(countState);
  return <div>{count}</div>;
};

一方、値は読み取らなくてもいいが、書き込みはしたい場合があります。そう言った場合は useSetRecoilState フックを使うと良いでしょう。

Reactにおいて値を読み取らない（setだけする）というのは大きな意味を持ち、値が変化した際も再レンダリングが行われないということになります。これはパフォーマンスを考える上において有利に働きます。値の読み取りが不要な場合は積極的に利用していきましょう。

const CountUpdater = () => {
  const setCount = useSetRecoilState(countState);
  return <div onClick={() => setCount((c) => c + 1)}>Increment!</div>;
};

Selector

原始的なAtomを直接扱う方法以外にも、Selectorというインターフェイスを通してのアクセスもできます。 SelectorはAtomの値を加工して取得する、加工して更新するなどの処理が可能になります。Atomに関係ないSelectorを作ることも可能です。

Selectorを作るには selector 関数を使います。ユニークなkey、getメソッド、setメソッドを渡します。

以下のようにします：

const liarCountState = selector({
  key: 'sample/liarCount',
  get: ({get}) => get(countState) * 3,
  set: ({get, set}, newValue) => set(countState, newValue)
});

keyについてはユニークなキーを指定してください。

getメソッドはSelectorから値を得る時の処理です。この例では「嘘つき」カウントのSelectorとなっているので3倍の値を返します。 Selectorの中でAtomから値を得るには、getメソッドに渡される get 関数（ややこしい！）を使用します。このとき、もしgetメソッドの中の get 関数（紛らわしい！！）でAtomにアクセスしている場合、Atomが更新されると再実行されます。

setメソッドはオプションです。getメソッドだけでも動くので実装しなくとも良いです。実装するとSelectorを通しての値の更新が可能になります。 setメソッドの第1引数には get 関数と set 関数、第2引数には更新したい値が渡されます。ここでは渡された値をそのままセットしています。

SelectorはAtomと同等に扱うことができます。つまり各種フック（例えば useRecoilState など）にそのまま渡してそのまま使えます。

以下が使用例です：

import React from 'react';
import ReactDOM from 'react-dom';
import {
  RecoilRoot,
  atom,
  selector,
  useRecoilState
} from 'recoil';

const countState = atom({
  key: 'sample/count',
  default: 0
});

const liarCountState = selector({
  key: 'sample/liarCount',
  get: ({get}) => get(countState) * 3,
  set: ({get, set}, newValue) => set(countState, newValue)
});

const Counter = () => {
  const [count, setCount] = useRecoilState(liarCountState);
  return <div onClick={() => setCount((c) => c + 1)}>Clicked: {count}</div>;
};

const App = () => (
  <Counter/>
);

ReactDOM.render(
  <RecoilRoot>
    <App/>
  </RecoilRoot>,
  document.getElementById('root')
);

非同期処理

Recoilでは非同期処理も扱うことができます。やり方はSelectorのgetメソッドをasync関数にするだけです。

const userDataState = selector({
  key: 'sample/userData',
  get: async ({get}) => {
    return wait(1000).then(() => ({name: 'John'}));
  }
});

こうすると、getメソッドが返したPromiseが解決されるまでsuspendされるので、あとは <Suspense> で受けるだけです。 Suspenseについては当ブログの ReactのSuspenseで非同期処理を乗りこなすでも解説しています。

注意点として、get 関数でAtomにアクセスしている場合に、Atom更新時に再計算されるのは同期処理と同じなので、 HTTPリクエストを飛ばす場合は予想外のリクエストが飛ばないように気をつけましょう。

以下がサンプルになります：

import React, { Suspense } from 'react';
import ReactDOM from 'react-dom';
import {
  RecoilRoot,
  selector,
  useRecoilValue
} from 'recoil';

const wait = async (millisec) => {
  return new Promise((resolve, reject) => {
    setTimeout(() => resolve(), millisec);
  });
};

const userDataState = selector({
  key: 'sample/userData',
  get: async ({get}) => {
    return wait(1000).then(() => ({name: 'John'}));
  }
});

const UserDataDisplay = () => {
  const userData = useRecoilValue(userDataState);
  return <div>{userData.name}</div>;
};

const App = () => (
  <Suspense fallback={<div>Loading...</div>}>
    <UserDataDisplay/>
  </Suspense>
);

ReactDOM.render(
  <RecoilRoot>
    <App/>
  </RecoilRoot>,
  document.getElementById('root')
);

動的なAtom/Selector

今までの例では、Atomは手で書き並べなければなりませんでした。 Recoilでは同的にAtomやSelectorを生成する方法が用意されています。

Atomのファクトリを作成するには atomFamily を使います。このとき atomFamily に渡す引数は atom とほぼ同じです。

const itemStateFamily = atomFamily({
  key: 'sample/item',
  default: 0
});

このときFamilyは関数なので、適当な識別子を渡してやれば、その識別子に応じたAtomを作成・取得してくれます。あとはただのAtomなのでフックで値を取得・更新できます。

const atom = itemStateFamily('My ID'); // 'My ID'に対応するAtomを取得
const [itemCount, setItemCount] = useRecoilState(atom);

これを用いることで、Atomの数を動的に増やすことができます。

import React from 'react';
import ReactDOM from 'react-dom';
import {
  RecoilRoot,
  atomFamily,
  useRecoilState
} from 'recoil';

const itemStateFamily = atomFamily({
  key: 'sample/item',
  default: 0
});

const Item = ({name}) => {
  const [itemCount, setItemCount] = useRecoilState(itemStateFamily(name));
  return <div onClick={() => setItemCount((c) => c + 1)}>{name}: {itemCount}</div>;
};

const App = () => (
  <div>
    <Item name="Apple"/>
    <Item name="Banana"/>
  </div>
);

ReactDOM.render(
  <RecoilRoot>
    <App/>
  </RecoilRoot>,
  document.getElementById('root')
);

atomFamily がAtomと違う大きな点のひとつとして、 default を関数にできることです。関数を default にすることによって、引数に応じたデフォルト値を設定できます。

const itemStateFamily = atomFamily({
  key: 'sample/item',
  default: (arg) => arg * 10;
});

Selectorについても同様で、 selectorFamily が用意されています。

const LiarItemStateFamily = selectorFamily({
  key: 'sample/liarItem',
  get: (arg) => ({get}) => get(itemStateFamily(arg)) * 5,
  set: (arg) => ({get, set}, newValue) => set(itemStateFamily(arg), newValue)
});

これも selector とほぼ同じで、 get と set がそれぞれ関数を返すメソッドとなっているだけです。 set は任意なので、無くても動きます。

例えば以下のように使用します：

import React from 'react';
import ReactDOM from 'react-dom';
import {
  RecoilRoot,
  atomFamily,
  selectorFamily,
  useRecoilState
} from 'recoil';

const itemStateFamily = atomFamily({
  key: 'sample/item',
  default: 0
});

const LiarItemStateFamily = selectorFamily({
  key: 'sample/liarItem',
  get: (arg) => ({get}) => get(itemStateFamily(arg)) * 5,
  set: (arg) => ({get, set}, newValue) => set(itemStateFamily(arg), newValue)
});

const Item = ({name}) => {
  const [itemCount, setItemCount] = useRecoilState(LiarItemStateFamily(name));
  return <div onClick={() => setItemCount((c) => c + 1)}>{name}: {itemCount}</div>;
};

const App = () => (
  <div>
    <Item name="Apple"/>
    <Item name="Banana"/>
  </div>
);

ReactDOM.render(
  <RecoilRoot>
    <App/>
  </RecoilRoot>,
  document.getElementById('root')
);

また、 atomFamily と selectorFamily を組み合わせて、 atomFamily のデフォルト値を selectorFamily にすることも可能です。

const itemStateFamily = atomFamily({
  key: 'sample/item',
  default: selectorFamily({
    key: 'sample/item/liar',
    get: (arg) => ({get}) => arg + 10
  });
});

Atomと結び付けずにAtomの値を読み出す

稀なケースだとは思いますが、コンポーネントをAtomと結び付けずにAtomの値を読み出したい場合があります。その場合は useRecoilCallback フックを使って関数を作ることで実現できます。通常のAtomの読み出し方だとAtomの更新ごとにコンポーネントも更新されますが、 useRecoilCallback を使えば任意のタイミングでのみ取得できます。

名前からわかる通り、React本体の useCallback とほぼ同じです。以下が例となります：

const getUserData = useRecoilCallback(async ({getPromise}) => {
  const {name} = await getPromise(userDataState);
  console.log(name);
}, []);

useRecoilCallback には引数に getPromise 関数を受け取る関数を渡します。第2引数（ここでは空配列）は依存関係の配列です。

get ではなく getPromise となっているのは、もしSelectorからの値の取得の場合はPromiseが返ってくる可能性があるからです。 Selectorは非同期処理を扱えるのでこのような形になっています。

使用例としては以下のようになります：

import React from 'react';
import ReactDOM from 'react-dom';
import {
  RecoilRoot,
  atom,
  useRecoilCallback
} from 'recoil';

const userDataState = atom({
  key: 'sample/userData',
  default: {name: 'John'}
})

const UserDataLogger = () => {
  const getUserData = useRecoilCallback(async ({getPromise}) => {
    const {name} = await getPromise(userDataState);
    console.log(name);
  }, []);

  return <div onClick={getUserData}>Click to Log</div>;
};

const App = () => (
  <UserDataLogger/>
);

ReactDOM.render(
  <RecoilRoot>
    <App/>
  </RecoilRoot>,
  document.getElementById('root')
);

さいごに

Recoilについて大まかに眺めてみました。ずいぶん綺麗で、シンプルに纏まっているライブラリに感じます。また実験的なライブラリであるので現実での利用は難しいですが、少し触ってみるのも楽しいかも知れません。

Recoilはこれからも更新/変更がされていくはずなので、最新情報は公式サイトでチェックしてみてください。

Trusted Typesを利用してJavaScriptからのDOM操作をセキュアに行う

Sun, 19 Apr 2020 13:15:00 GMT

ウェブアプリケーションの高度化に伴い、セキュリティに対する関心も年々高まりつつあります。特にXSS（クロスサイトスクリプティング）と呼ばれる脆弱性は簡単ながらも大きな被害をもたらします。アプリケーションの開発者は当然セキュリティを意識した開発を行うべきですが、人間の注意は万能ではなく、時に不注意から脆弱なアプリケーションを作成してしまいます。

こういった状況を改善するために、Trusted Typesという提案がなされています。Trusted Typesはよりセキュアなウェブアプリケーションを作る手段を提供し、安全性を高める補助をしてくれます。

Trusted Types

HTMLやJavaScriptは非常に柔軟な仕組みを有しており、要素を動的に組み立てることが可能です。例えば以下の例を見てみましょう：

const { username, email } = await api.getUser();
const userInfo = document.createElement('div');
userInfo.innerHTML = `${username}, ${email}`;

このコードはAPIからユーザ情報を取得し、div要素に取得した情報を追加しようとしています。

ここで innerHTML は代入された文字列をHTMLとして解釈します。すると大きな問題が起こります。もし何らかの原因でユーザ名やメールアドレスに悪意ある値、例えばスクリプトなど、が埋め込まれていた場合、ブラウザは何の疑いもなくそのスクリプトを実行します。これがXSSです。

XSSが発生する原因の多くは、主にDOMが任意の文字列を許容するところにあります。任意の値を受け取るということは、悪意あるコードが一切の検査を通らずに実行されてしまうことを意味します。

Trusted Types はDOMのプロパティなどが 任意を文字列を受け取ることを禁止 し、特定の関数を通過した 検査済み文字列のみを許容 するようにする機能です。

Trusted Typesを有効活用することで、より安全なアプリケーションが開発できます。

ブラウザ対応状況

Trusted TypesはChrome 83より利用可能になります。他のブラウザにおける対応は未定です。

Trusted Typesの有効化

Trusted Typesを利用するにはhttps環境またはlocalhostでの実行である必要があります。

Trusted Typesはデフォルトで無効となっており、利用のためには有効化する必要があります。有効化のためにはHTTPの Content-Securiy-Policy ヘッダで require-trusted-types-for 'script' と trusted-typesを指定します。

Content-Security-Policy: require-trusted-types-for 'script'; trusted-types

HTTPヘッダの他にも <meta> 要素でも指定できるので、簡単なテストの際にはこちらでもよいでしょう。

<meta http-equiv="Content-Security-Policy" content="require-trusted-types-for 'script'; trusted-types">

これでTrusted Typesが有効化されます。試しに以下のようなコードを実行してみます：

const elem = document.createElement('div');
elem.innerHTML = 'Hello!';
document.body.appendChild(elem);

すると次のエラーが出ます：

Uncaught TypeError: Failed to set the 'innerHTML' property on 'Element': This document requires 'TrustedHTML' assignment.

Trusted Typesが有効化されたため、もう innerHTML は単なる文字列を受け付けません。文字列を代入しようとするとエラーとなります。エラー文の通り、文字列ではなく TrustedHTML 型の値を代入しなければいけません。

Trusted Typesの対象となるのは以下のものです：

document
- write メソッド
- writeln メソッド
<script>
- innerText プロパティ
- textContent プロパティ
- src プロパティ
- text プロパティ
<iframe>
- srcdoc プロパティ
<embed>
- src プロパティ
<object>
- data プロパティ
- codeBase プロパティ
SVG
- href プロパティ
全てのHTML要素
- outerHTML プロパティ
- insertAdjacentHTML メソッド
- innerHTML プロパティ
Range
- createContextualFragment メソッド
DOMParser
- parseFromString メソッド
Timer系関数
- setTimeout 関数
- setInterval 関数
Web Workers
- new Worker() コンストラクタ
- new SharedWorker() コンストラクタ
- importScripts 関数
Service Worker
- register メソッド

ポリシの作成

Trusted Typesは有効化しましたが、当然ながらこのままでは何も操作できません。何かしらの方法で TrustedHTML 型の値を生成する必要があります。2通りの方法が考えられます：

DOMPurifyのようなTrusted Types対応のライブラリを使用する
Trustedな値を生成するポリシを自作する

今回はポリシの自作をしてみましょう。ポリシの作成には、グローバルに trustedTypes というオブジェクトができているので、それの createPolicy メソッドを利用します。

const myPolicy = trustedTypes.createPolicy('my-policy', {
  createHTML: (unsafeValue) => {
    return unsafeValue.replace(/</g, '&lt;').replace(/>/g, '&gt;');
  }
});

const elem = document.createElement('div');
elem.innerHTML = myPolicy.createHTML('<div>Hello!</div>');
document.body.appendChild(elem);

上の例では my-policy という名前のポリシを作成しています。ポリシ名は任意ですが、わかりやすい名前をつけておきましょう。

次に Content-Security-Policy の truted-types ディレクティブでポリシを許可します。例えばポリシ名が my-policy であれば、trusted-types my-policy と記述します。

<meta http-equiv="Content-Security-Policy" content="require-trusted-types-for 'script'; trusted-types my-policy">

ポリシが複数存在する場合は trusted-types my-policy my-policy2 my-policy3 のようにします。

ポリシが持つことができるメソッドは以下の3つです。

createHTML メソッド: TrustedHTML 型を返す
createScript メソッド: TrustedScript 型を返す
createScriptURL メソッド: TrustedScriptURL 型を返す

これらのメソッドを通した値はTrusted（信頼できる）な型になります。それぞれのメソッドを通すことで、信頼できるHTML文字列として扱える TrustedHTML 型や、信頼できるURLである TrustedScriptURL 型を得ることができます。

今回は innerHTML に代入する TrustedHTML が欲しいので、 createHTML のみを利用しています。必要に応じて他のメソッドも実装してください。例えば <script> 要素の src プロパティに代入できる TrsutedScriptURL が欲しい場合は createScriptURL メソッドを実装します。

作成したポリシのメソッド（先ほどの例では myPolicy.createHTML メソッド）を呼び出すことで実際にTrustedな値を得られます。

デフォルトポリシ

ポリシ名として default を指定すると特殊な挙動をします。これをデフォルトポリシと言います。

デフォルトポリシはTrustedではない普通の文字列が代入された時に、自動的に適用する処理を記述します。デフォルトポリシが存在しない場合はエラーになりましたが、デフォルトポリシが定義されていると自動変換してくれるのでエラーにはなりません。

ポリシの作り方やポリシの許可の仕方は同じです。

trustedTypes.createPolicy('default', {
  createHTML: (unsafeValue) => {
    return unsafeValue.replace(/</g, '&lt;').replace(/>/g, '&gt;');
  }
});

const elem = document.createElement('div');
elem.innerHTML = '<div>Hello!</div>';
document.body.appendChild(elem);

もちろん default という名前のポリシに対しての明示的な許可が必要です。

<meta http-equiv="Content-Security-Policy" content="require-trusted-types-for 'script'; trusted-types default">

全てのポリシの許可

Content-Security-Policy から trusted-types ディレクティブを取り除くことで全てのポリシを許可することができます。

<meta http-equiv="Content-Security-Policy" content="require-trusted-types-for 'script'">

ただしXSSで勝手にポリシを作られる可能性も考慮すると、この選択は賢いとは言えません。なので trusted-types ディレクティブはできるだけ指定するようにしましょう。

Trusted Typesの安全性

注意点として、Trusted Typesそれ自体はセキュアではないというところです。あくまで開発者に安全のための補助機構を提供するだけであり、自動的にサニタイズしてはくれませんし、全くの安全を保証してくれるわけではありません。

例えば以下のような危険なポリシを作成できます：

const myPolicy = trustedTypes.createPolicy('my-policy', {
  createHTML: (unsafeValue) => unsafeValue
});

このポリシは文字列をそのまま TrustedHTML として返しているだけであり、一切の無害化を行っておりません。よって悪意ある文字列を含んだ可能性のある値がそのままTrustedな値として扱われます。

Trusted Typesを使用する時は、値の扱いに気をつけましょう。

Content-Security-Policy-Report-Only での使用

Content-Security-Policy と同様に、当然ながら Content-Security-Policy-Report-Only でもTrusted Typesは使用可能です。完全なエラーにしたくはない場合はこちらを使いましょう。