こんにちは。もぐめっとです。
<img src="https://storage.googleapis.com/zenn-user-upload/zepgj2qz7iher6w8cggf5wf5tbd9" alt loading="lazy" class="md-img"> 
最近外出した写真がないのでもっぱらキャンプの時の写真ばっかりです。どうしても富士山とコラボしたかったので端っこからこんにちは。
５週連続Firebase extensionsキャンペーンの４週目となる機能は<a href="https://github.com/FirebaseExtended/experimental-extensions/tree/next/firestore-shorten-urls-dynamic-links#shorten-urls-with-dynamic-links" target="_blank" rel="nofollow noopener noreferrer">Shorten URLs with Dynamic Links</a>というURL短縮についての機能を紹介します。
Firebase Dynamic Linksというものが既にありますが、こちらは別途APIを叩くことで生成できます。 
Shorten URLs with Dynamic Linksの場合は、firestoreと連携した形で短縮URLが発行できるのでより簡単に短縮URLが発行できる感じです。
<h2 id="%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB">
<a class="header-anchor-link" href="#%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB" aria-hidden="true"></a> インストール</h2>
<h3 id="%E4%B8%8B%E6%BA%96%E5%82%99">
<a class="header-anchor-link" href="#%E4%B8%8B%E6%BA%96%E5%82%99" aria-hidden="true"></a> 下準備</h3>
dynamic linksの設定を先にやります。 
初めて表示する方はこんな画面が出ておりますので、始めるボタンで始めましょう。 
<img src="https://storage.googleapis.com/zenn-user-upload/bkzjdxtohenc96g7y9fc828eaaar" alt loading="lazy" class="md-img">
page.linkドメインだとgoogleが提供してくれるので即反映できます。 
<img src="https://storage.googleapis.com/zenn-user-upload/3649j0dv0hcitbye7wotjjestj42" alt loading="lazy" class="md-img"> 
<img src="https://storage.googleapis.com/zenn-user-upload/7bxn2eoekkq9rvrozexep23yu3kh" alt loading="lazy" class="md-img">
独自ドメインでやりたい方は別途dnsやfirebase.jsonの設定が必要になるので、<a href="https://firebase.google.com/docs/dynamic-links/custom-domains?hl=ja" target="_blank" rel="nofollow noopener noreferrer">別途マニュアルをご参照</a>ください
<h3 id="firebase-extensions%E3%81%AE%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB">
<a class="header-anchor-link" href="#firebase-extensions%E3%81%AE%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB" aria-hidden="true"></a> Firebase Extensionsのインストール</h3>
例によって<a href="https://github.com/FirebaseExtended/experimental-extensions/tree/next/firestore-shorten-urls-dynamic-links#shorten-urls-with-dynamic-links" target="_blank" rel="nofollow noopener noreferrer">Shorten URLs with Dynamic Links</a>のページから「Install on Firebase」を押下します。 
<img src="https://storage.googleapis.com/zenn-user-upload/4w3ke83za32tmyt0lz8by40fu3k2" alt loading="lazy" class="md-img">
もしくはコマンドでinstall
<div class="code-block-container"><pre><code>firebase ext:install firestore-shorten-urls-dynamic-links --project=&lt;your-project-id&gt;
</code></pre></div>確認しました 
<img src="https://storage.googleapis.com/zenn-user-upload/9tlxa9qahpdkuqxm25lqnuakrosb" alt loading="lazy" class="md-img">
次へ 
<img src="https://storage.googleapis.com/zenn-user-upload/6bqxk31hrm5c3wqmqeh4h099rlfg" alt loading="lazy" class="md-img">
次へ 
<img src="https://storage.googleapis.com/zenn-user-upload/abjulyd70juqfxuw5wlda3n464q7" alt loading="lazy" class="md-img">
次へ 
<img src="https://storage.googleapis.com/zenn-user-upload/jvzzlf17oo7vy2zblqtr0u49wbfu" alt loading="lazy" class="md-img">
各種設定を記入したら「拡張機能をインストール」します
<ul>
<li>Dynamic Links URL prefix: 下準備で設定したドメインを入力</li>
<li>Dynamic Links suffix length: ShortかUnguessableを選択できます。Shortだと可能な限り短い文字列に、Unguessableだと推測されにくい長い文字列でurlを発行します</li>
<li>Collection path: Extensionが起動するコレクションを指定</li>
<li>URL field name: 短縮したいURLのフィールド</li>
<li>Short URL field name: 短縮後のURLのフィールド</li>
</ul>
<img src="https://storage.googleapis.com/zenn-user-upload/42wc2vrrk93rg4hlvh1cr5c1yrn9" alt loading="lazy" class="md-img">
以上でインストールは終了です。
<h2 id="%E4%BD%BF%E3%81%84%E6%96%B9">
<a class="header-anchor-link" href="#%E4%BD%BF%E3%81%84%E6%96%B9" aria-hidden="true"></a> 使い方</h2>
早速urlsコレクションにドキュメントを追加してみます。 
<img src="https://storage.googleapis.com/zenn-user-upload/pdsiq67v34ujmxpqafwhkjwaxlqg" alt loading="lazy" class="md-img">
しばらくしたらshortUrlである <a href="https://testmogmet.page.link/6RQi" target="_blank" rel="nofollow noopener noreferrer">https://testmogmet.page.link/6RQi</a> が追加されました！やった！ 
<img src="https://storage.googleapis.com/zenn-user-upload/97ygku6y5afn9rwg74bu5umbi4u6" alt loading="lazy" class="md-img">
<h2 id="%E3%81%BE%E3%81%A8%E3%82%81">
<a class="header-anchor-link" href="#%E3%81%BE%E3%81%A8%E3%82%81" aria-hidden="true"></a> まとめ</h2>
API叩くのが面倒でdynamic linkの実装が面倒だったのがちょこっと便利になりました。 
長ったらしいシェアurlとかを短くするだけでなく、どれくらい踏まれたかのアクセス解析もできるようになるので便利な機能ですね！
[宣伝]
こんなサービス作ってるのでよかったら使ってみてください！
<a href="https://werewolf.mogmet.com" target="_blank" rel="nofollow noopener noreferrer">ワンナイト人狼 for mobile</a> 
<a href="https://online.1nite-jinro.com/link/blog" target="_blank" rel="nofollow noopener noreferrer">ワンナイト人狼オンライン</a>（ガッツリfirebase使ってます。） 
<a href="https://camecon.me" target="_blank" rel="nofollow noopener noreferrer">気軽に投稿できるフォトコンサイト - Camecon</a> 
<a href="https://offcha.com/" target="_blank" rel="nofollow noopener noreferrer">連絡先を交換しなくてもグルチャができる - Offcha</a>

Shorten URLs with Dynamic Linksを使ってURL短縮を行うFirebase Extensionsを試してみた

firebase

Discussion