Googleに魂を売っているのでGoogleテクノロジーだけで短縮URLのChrome拡張を作った話

6 min readAug 7, 2019

私は「Googleに魂を売った絵画修復士」として巷で有名です。おおよそ30人くらいの巷で。

GDGとGCPUGのオーガナイザーを福島でやっています。
基本的に発表に使うスライド資料はGoogleテクノロジーのみになるようにという自分ルールを作っていまして、今回Googleがサービスを終了してしまったURL短縮をかなり使っていたので、bit.lyを使うことになるのかぁとちょっと自分ルールと葛藤していました。

そこで私はカリフォルニアに向かって頭を下げたあと、bit.lyのChrome拡張をインストールしました。

ところが…

ログインを求められるではありませんか！！

めんどくさい！！！

ということで、Firebase DynamicLinksを使うChrome拡張を作りました。

かなり単純なことをやっているだけなので、コードだけあればいいよ！って方は以下のリポジトリを直接見てみてください。
https://github.com/donuzium/firebase-url-shortener

やったこと

Firebase Dynamic Linksの設定
カスタムドメインの設定
Chrome拡張の作成
ストアに配信せず、ローカルのファイルを読み込んでDeveloper Modeで使ってみる。

Firebase Dynamic Links

Firebase Dynamic Linksとは、本来はモバイルアプリのディープリンクとして機能するようなものです。

https://firebase.google.com/docs/dynamic-links/?hl=ja

これにはURL短縮の機能が備わっているので、今回はそれを使ってやってみます。

Google Domainsでドメインを取得する（カスタムドメインを使いたい場合）

基本的にGoogleテクノロジーだけで実現したいわけですから、ドメインはGoogle Domainsを使います。

ただ、このサービスが良いなぁと思っているのは、取得したドメインに対する権限を別のGoogleアカウントに共有できるという点です。

以前は他社のドメインサービスを使っていましたが、会社でチーム開発をしている際にDNSの設定をする場合、パスワードを共有したりしてドメイン設定を行うというくらいの発想しか出てこなかったわけですが、Google Domainsでは、会社のメンバーのG suiteアカウントに対して権限を付与することができます。これは非常に気に入っている機能です。

https://domains.google

今回はexample.comドメインを取得して、設定しているとして話を進めてみます。

Firebaseのプロジェクトを作成する

Firebaseのプロジェクト作成については、色々な方が書いて下っているので割愛します。
https://blog.katsubemakito.net/firebase/firebase-make-newproject

Firebase Dynamic Linksの設定をする

GUIで作る場合は、こちらの記事がとても丁寧で詳しいので割愛
https://qiita.com/ryo_hisano/items/ffbba33d4737664626e8

以下は、上記の記事の内容がわかっていると仮定して、カスタムドメインで設定するための手順を書いていきます。

Firebase Hostingでカスタムドメインを接続

Google Domains側で、DNSレコードを書き換える

ちょっとわかりにくかったところ

Firebaseの方で、Aレコードに2つのIPを設定すると出ていますが、なぜかGoogle Domains側のGUIで＋マークを完全に見逃していて、最初2つ目のIPを入れるのに手こずってしまいました…。簡単なことなのに！

bit.lyを使おうとした私への戒めでしょうか。

これで、Firebase側でのドメインの確認が完了するはずです。設定に自信のない人は、TTLを短めにしたりしてちょっと様子を見てみるのもいいかなとは思います。

Dynamic Links側の設定

基本的に、前出の記事のドメインの追加のセクションで、設定したカスタムドメインを付与すればOKです。

さてChrome拡張を作ります

https://qiita.com/satake_masaki/items/def09ca51731efa2826f
Chrome拡張を触るのが初めてだったので作るにあたっては、こちらの記事を参考視させてもらいました。
どうやって開発するの？レベルだったので、ローカルで動かせることを知って便利だなぁと。

基本的にはmanifest.jsonとそれに設定しているjsファイルを用意すればOKです。

リポジトリにもあげておきました。
https://github.com/donuzium/firebase-url-shortener/tree/master

個人用途なので、単純に成功した場合のみ拾えてればいっかなーということで、特に外部スクリプトに頼らず、久しぶりに生でJSを書きました。
このスクリプトに指定したドメインと、FirebaseのWEB APIキーを書けば動くと思います！

これを同じフォルダに入れておき、 chrome://extensions/ にアクセスしてデベロッパーモードをOnにします。