自身のオリジナル短縮URLを生成できるツールの作り方2022年4月30日Web関連 あなたは短縮URL使ってますか？ とても長いURLに アフィリエイトに クリック率を計測するために 使う機会が多いかと思います。 有名な短縮URLサービスの一つに bitlyがありますが 場合によっては、独自ドメインで 自然なリンクで見せたい場合などもあります。 特に企業さんは ご自身の環境で使えるようにしておいた方が良いですよね。 そんな時に 今回、解説する短縮URLを生成するツールを 使えるようにしておくと とても便利になります。 今回はご自身用の オリジナル短縮URLを生成できるツールの 設定の仕方を解説します。 目次1. ドメインまたはサブドメインを用意しておく2. オリジナル短縮URLツールの作り方2.1. ①Firebaseにプロジェクトを作る2.2. ②プロジェクト名を入力して進めます2.3. ③アナリティクスは使用せず作成します2.4. ④今作成したプロジェクトが選択されていることを確認する2.5. ⑤Dynamic Linksを設定する3. 短縮URLを作ってみる3.1. ①新しいダイナミックリンクボタンをクリックする3.2. ②任意の文字を入力し次へ3.3. ③短縮したいURLとそのリンク先のわかる名前を入力し作成をクリック4. APIで短縮URLを作成する4.1. ①プロジェクトの概要の横の歯車マークのプロジェクトの設定クリックする5. ウェブAPIが無い場合5.1. ①以下、リンクにアクセスします。5.2. ②上のプロジェクト名をクリック5.3. ③対象のプロジェクトを選択し開く5.4. ④左上の３本線をクリックし「APIとサービス＞認証情報」をクリック5.5. ⑥APIキーに ⚠ が出ている場合5.6. ⑦Chromeの拡張子でワンクリックで短縮URLを生成できるようにする ドメインまたはサブドメインを用意しておく オリジナルの短縮URLを生成するための機能を追加するための ドメインまたはサブドメインを用意しておいてください。 今回の手法は、 Googleのサービスである「Firebase」の「Dynamic Links」というサービスを 利用して実現します。 オリジナル短縮URLツールの作り方 ①Firebaseにプロジェクトを作る Unknown TitleUnknown ... https://console.firebase.google.com/ 上記リンク先にて、プロジェクトを作成します。 ②プロジェクト名を入力して進めます ③アナリティクスは使用せず作成します ④今作成したプロジェクトが選択されていることを確認する ⑤Dynamic Linksを設定する エンゲージメント内の 『Dynamic Links』という項目を選択します。 「始める」をクリック 用意したドメインまたはサブドメインを入力して進める 短縮URLを作ってみる 上記、ドメイン・サブドメインの設定が完了すると 以下のような画面になりますので 試しに短縮URLを作ってみます。 ①新しいダイナミックリンクボタンをクリックする ②任意の文字を入力し次へ ③短縮したいURLとそのリンク先のわかる名前を入力し作成をクリック これだけで、短縮URLの生成が完了しました。 以後、このように簡単に ご自身のドメイン・サブドメインで短縮URLを作成できます。 これでも十分最幸なんですが いちいちこのページにアクセスしないと出来ないため もっと手軽に簡単に生成できるようにしたい。 そんな方は、次のステップで さらに設定を進めることで手軽にワンクリックで 短縮URLが生成できるようになります。 APIで短縮URLを作成する APIを活用することで もっと簡単に短縮URLが生成できるようになります。 ①プロジェクトの概要の横の歯車マークのプロジェクトの設定クリックする そうするとウェブAPIキーを確認することが出来ます。 しかし、上記の通り、表示されていない場合があります。 そんなときは、以下手順で取得してください。 ウェブAPIが無い場合 ①以下、リンクにアクセスします。 Unknown TitleUnknown ... https://console.cloud.google.com/ ②上のプロジェクト名をクリック ③対象のプロジェクトを選択し開く ④左上の３本線をクリックし「APIとサービス＞認証情報」をクリック ⑤以下がAPIキーとなります。 ⑥APIキーに ⚠ が出ている場合 このままでも実行は可能ですが、API設定の詳細画面に移動して 制限を設定しましょう。 ⑦Chromeの拡張子でワンクリックで短縮URLを生成できるようにする 以下、拡張機能を追加します。 Original URL-Shortener - Chrome ウェブストアThe Chrome extension that allows you to easily use your own Firebase Dynamic Links. https://chrome.google.com/webstore/detail/original-url-short... 拡張機能のオプションにて 機能を追加したドメイン・サブドメインと 取得したAPIキーを入力して確認を押します。 あとは短縮URLを生成したいホームページで 拡張機能のアイコンをクリックしたら 簡単に生成が出来ます。 是非、お試しください。