Ukam - Re:別のディスプレイに表示されているウィンドウを強制召還するmacOSアプリ

以前、別ディスプレイにあるウィンドウを現在のディスプレイに移動させるmacOSアプリを作りました。

iseebi.hatenablog.com

どういうアプリだったかというのを再度説明しておくと、マルチディスプレイ環境でMacを使っているときに、あるディスプレイを別の入力に切り替えてて表示されていないときに、別のディスプレイから見えないディスプレイのウィンドウを引っ張り出すというもの。

これを作ったのが2年以上前になることが驚きだったのだけど、自分の生活には手放せないものになっていました。 作った時点ではメニューが出てくるだけの素朴な作りだったのですが、それだけ手放せないものになっているのであればと、少し思い立ってここ数週間でもう少し見た目良く作り直しました。

Mac App Storeにあげるつもりでちょっと気合い入れて権限許可ダイアログとかも作ったけど、そもそもプライベートAPIも使っているし、他のアプリのウィンドウをアクセシビリティ経由で操作するのでサンドボックス化できないのでストアのガイドライン的にNGど真ん中なのでした。(しかもTestFlightの外部共有審査に出して気づいた)

よければ使ってみていただければと思います。

github.com

ReactでGoogle Maps JavaScript APIを組み込む

React+TypeScriptでGoogle Mapsを組み込んだページを作る際、これまではreact-google-mapsのようなライブラリを組み込んで実装してきました。 久しぶりにGoogle Mapsを使ったReactアプリケーションを作るにあたって現在の状況を調べてみたところ、公式のドキュメントにReact アプリケーションに Map と Marker を追加するというページがあり、@googlemaps/react-wrapperというものを使って組み込む方法が紹介されていました。

これまでサードパーティーのラッパーライブラリを使ってきた際、Google Mapの細かい制御をしようとした際に結局Google Mapsインスタンスを直接操作することになりがちだったこともあり、より公式に近い方法があるのであればそちらに乗り換えたほうがいいと考え、このガイドを参考に実装してみました。

ライブラリのインストール

続きを読む

LightsailをIPv6オンリーにしたらLet's Encryptで証明書の更新ができなくなってた

先日、LambdaからIPv6でアクセスできるようにする で書いたとおり、IPv4アドレス課金を避けるためにLightsailをIPv6 Onlyのインスタンスにしていました。 LightsailをIPv6/IPv4デュアルスタックからIPv6 Onlyにするには、一度停止した上でスナップショットを作成し、スナップショットから新しいインスタンスを作るだけで簡単にできました。

が、数日後Let's Encryptで証明書が更新できていないことに気がつきます。 確認してみると、Let's Encrypt自体はIPv6で使えるものの、Route53のAPIの呼び出しに失敗していることがわかりました。(実際に route53.amazonaws.com をnslookupで AAAA レコードを引くと No Answerになります)

対応としては、いくつか考えられます。

うちは代々グローバルIPを持たない環境が続いていたため、リモートアクセスの中継拠点としてさくらのVPS上にVPNを構築していました。 LightsailからのIPv4トラフィックは、このVPNを経由してアクセスするように設定することでRoute53 APIを直接呼び出せるようにしました。

IPv6に進んでいくのは良いことなのですが、まだ課題が多そうです。

LambdaからIPv6でアクセスできるようにする

AWSでは各種サービスのグローバルIPv4アドレスが有料化されることになり、EC2などで一部無料枠もあるものの、基本的にはIPアドレスあたり概ね500〜600円程度の課金額がかかるようになりました。

無償版G Suiteが廃止されるのでAWS SESとDockerでメール送受信システムを作ったで作成したシステムでは最終的にLightsailで中継用のIMAP/POP3サーバーを作ることになりましたが、こちらもIPv6オンリーのインスタンスに変更しなければ値上げとなりました。

LightsailをIPv6インスタンスに変更するにあたって、LambdaのコードからIPv6にアクセスが必要となりましたが、そのためにはLambdaにVPCアウトバウンド接続の設定が必要となったので、上記のメール受信システムのアップデートに合わせて行った設定の要点をAWS CDKのコードベースで説明します。

要点

続きを読む

Firebase AuthenticationでLogin with Discordを実現する

Firebase Authenticationでは様々な認証を簡単に導入することができ、GoogleApple、Faccebookといったよく利用されるサービスを統合した認証のほかに、カスタムの認証システムと統合することもできます。

これを利用して、Discordのアカウントを使ってログインするWebサービスを、Firebase HostingとFirebase Functionsを統合して作ってみたいと思います。Discordでは一般的なOAuth 2.0ののフローでサービスにログインすることができますので、これを使ってFirebase Authenticationにユーザーを登録してログインできるようにします。

なお「Identity Platform を使用する Firebase Authentication」というものもあり、こちらはSAMLOpenID Connectなども簡単に設定でき様々な機能を利用でき、SAMLOpenID Connectも簡単に実装できますが、課金額が結構高い[^1]ので、無料枠超えない範囲とわかってる場合やコストが見合うかどうか、急にトラフィックが増大するリスクがあるかどうか等で検討すると良いでしょう。

続きを読む

mkcertを使用してローカルホストにマルチドメインの環境を作る

mkcertを使用するとローカルの開発環境であるlocalhosthttpsにすることができます。[^1] 簡単にやろうとすると、localhosthttpsにすることになりますが、これだと複数のサービスを扱う場合にCookieやLocalStorageが共有され不具合を起こす場合があります。

実際はポート番号をサービスごとにばらしても問題を解決することができますが、覚えるのが面倒。サービスごとにわかりやすいドメインにしたい。

そこで、開発用のローカルを指し示すドメインを用意することで、ローカルで開発中のサービスごとにドメインを付与しつつ、そのサービス用の開発用のhttps証明書をmkcertで作ります。

手順

必要なのは2つです。

  1. 実在するドメイン127.0.0.1 を指し示すワイルドカードサブドメインを作る
  2. ワイルドカード部分に任意の文字を指定した証明書をmkcertで作る

1.は最初の1回だけやってしまえばあとは作業不要です。

続きを読む