くらげになりたい。

くらげのようにふわふわ生きたい日曜プログラマなブログ。趣味の備忘録です。

Firebase Dynamic Linksで短縮URL(TwitterのURLバン対策)

もぎゃさんのCrieit記事を見て、TwitterでシェアするとURLバンされるらしい。。

crieit.net

URLを短縮すると回避できるらしく、Firebase Dynamic Linksを使ってURLを短縮してみたときの備忘録

Firebaseのダイナミックリンクとは

公式ドキュメントより

Firebase Dynamic Links は、アプリのインストールの有無にかかわらず、複数のプラットフォームで機能するリンクです。

Dynamic Links により、ユーザーがリンクを開いたプラットフォームで得られる最高のエクスペリエンスを提供できるようになります。
iOS または Android でダイナミックリンクを開くと、ネイティブアプリのリンク先のコンテンツに直接移動します。
デスクトップ ブラウザでダイナミック リンクを開くと、ウェブサイト上の同じコンテンツに移動します。

REST APIも用意されていて、動的に生成できるっぽい。

準備

流れ的にはこんな感じ

  1. Firebaseコンソールで「DynamicLinks」でURI接頭辞(短縮URLドメイン)を追加する
  2. Firebaseコンソールで「プロジェクトの設定」から「ウェブAPIキー」をコピー
  3. URI接頭辞(短縮URLドメイン)とウェブAPIキーを使ってAPIを呼ぶ

ソースコードはこんな感じ

APIクライアントはaxiosを使ってます。必要に応じてnpm i -S axios

import axios from "axios";

// Firebaseのコンソール「プロジェクトの設定」>「ウェブAPIキー」をコピー
const WEB_API_KEY = process.env.FIREBASE_WEB_API_KEY || "";
// 短縮URLのドメイン。https://hogehoge.page.linkなど
const DOMAIN_URI_PREFIX = process.env.DOMAIN_URI_PREFIX || "";

export default class FireaseDynamicLinksHelper {
  public async toShort(targetURL: string): Promise<string> {
    try {
      // Firebase Dynamic LinkのAPIエンドポイント
      const url = `https://firebasedynamiclinks.googleapis.com/v1/shortLinks?key=${WEB_API_KEY}`;
      // リクエストするパラメタ
      const params = {
        dynamicLinkInfo: {
          domainUriPrefix: DOMAIN_URI_PREFIX,
          link: targetURL
        },
        suffix: {
          option: "SHORT"
        }
      };
      
      // POSTでリクエスト
      const res: any = await axios.post(url, params);
      
      // shortLinkが短縮URL
      return res.data.shortLink;
    } catch (error) {
      // エラーが発生したら、短縮前のURLを返す
      return targetURL;
    }
  }
}

パラメタはいろいろあるらしく、APIリファレンス)に書いてある。

以上!!

おすすめの書籍

実践TypeScript ~	BFFとNext.js&Nuxt.jsの型定義~

実践TypeScript ~ BFFとNext.js&Nuxt.jsの型定義~

TypeScript実践プログラミング (Programmer's SELECTION)

TypeScript実践プログラミング (Programmer's SELECTION)

参考にしたサイト様