こんにちは、Tukumolog管理人LumenHeroです。
今回は、Webサイトのファビコンやアイコン画像を一括で取得できるツール「Icon Hunt」を開発・公開したので、その開発経緯と技術的な裏側（主にFirebase周り）についてまとめました。
なぜこのツールを作ったのか？
ブログやプレゼン資料を作っていると、「紹介したいサービスのロゴやアイコン画像」が欲しくなることってありますよね。
以前、私はGoogleが提供しているファビコン取得API（URLを叩くと画像が返ってくる公式のアレです）を利用して、URLを入れるだけで画像タグを生成する簡易ツールを公開していました。
【コピペで簡単】ファビコン取得URL生成ツール（サイトアイコンの保存・ダウンロード）
他サイトのファビコン（サイトアイコン）が欲しい時、どうしていますか？この記事では、URLをコピペするだけで、Google検索結果に表示されるサイトアイコンを簡単に取得できるツールを設置しました。Google公式のAPIを利用した便利なツールです。
しかし、GoogleのAPIで取得できるのは基本的に 16x16px の極小サイズです。 ブラウザのタブに表示する分には十分なのですが、読者の方や自分自身が使っている中で、こんな不満が出てきました。
- 「資料に貼り付けるには画像が小さすぎてガビガビになる」
- 「スマホ用の高画質なアイコン（Webクリップアイコン）が欲しい」
最近のWebサイトは、iPhoneのホーム画面用などに高画質なアイコン（apple-touch-icon など）を設定していることが多いです。 「せっかく高画質な画像があるなら、それをごっそり探してきてくれるツールがあれば便利じゃないか？」 そう思い立ち、今回の「Icon Hunt」の開発をスタートしました。
ツールの使い方
使い方は極限までシンプルにしました。
- URLを入力: アイコンを取得したいサイトのURLを貼り付けます。
- ハント開始: 「アイコン取得」ボタンを押すと解析が始まります。
- ダウンロード: サイト内から見つかったアイコンがカード形式で一覧表示されます。欲しい画像をクリック（またはタップ）するだけで保存できます。
favicon.icoだけでなく、apple-touch-icon や og:image など、そのサイトが持っている「アイコンっぽい画像」をできる限り収集してくるのが特徴です。
バックエンドの実装について（Firebase Functions）
ここからは少し技術的な話になります。
今回のツール、見た目はただのWebページですが、裏側にはバックエンドが存在します。 最初は「JavaScriptだけで相手のサイトのHTMLを取得して解析すればいいじゃん」と思っていました。しかし、Web開発にはCORS（クロスオリジンリソース共有）というセキュリティの壁があり、ブラウザから直接、他人のサイトのHTMLを読み込むことは基本的にできません。
そこで、中継役となるサーバーが必要になります。 とはいえ、このツールのために月額課金のVPSを借りるのはコスト的に痛い…。そこで採用したのが、Firebase Functions です。
構成の概要
- フロントエンド: HTML/CSS/JavaScript (ユーザーの入力を受け取る)
- バックエンド: Firebase Cloud Functions (Node.js)
ユーザーがボタンを押した瞬間だけ関数（サーバー）が立ち上がり、処理が終われば終了します。これならアクセスがない間はコストがかかりません。(呼び出しが増えたら費用が従量課金なのでサーバ代が高くなりすぎたら制限するかも)
開発の流れ
大まかには以下のような手順で実装しました。
1. プロジェクトの作成 まず、Firebase CLIを使ってプロジェクトを初期化します。
firebase init functionsここで言語としてJavaScriptを選択しました（慣れてるので）
2. スクレイピング処理の実装 送られてきたURLに対して、Functions側からリクエストを投げます。 HTMLの解析には cheerio というライブラリを使用しました。jQueryのようにHTMLタグを操作できるので非常に便利です。
実装のポイントとしては、「相対パスの解決」です。 HTML内に <link rel="icon" href="/img/favicon.ico"> と書かれている場合、そのままでは画像にアクセスできません。元のURLと結合して、絶対パス（https://example.com/img/favicon.ico）に変換する処理などを入れています。
3. デプロイ 実装ができたら、コマンド一発でデプロイです。
firebase deploy --only functionsこれで、全世界からアクセスできるAPIが完成しました。 サーバーの管理やOSのアップデートなどを気にせず、「やりたいロジック（HTML解析）」だけに集中できるのがサーバーレスの最大のメリットだと感じました。
まとめ
今回は、自分自身がブログ運営や資料作成で感じていた「高画質なアイコンが欲しい」という悩みを解決するために、Icon Hunt を開発しました。
「既存のAPIじゃ物足りないな」と思ったときに、Firebaseなどを使えばサクッと自分専用のAPIを作れてしまうのは、個人開発の醍醐味ですね。
ブロガーの方、デザイナーの方、資料作成が多い方には特に便利なツールになっていると思いますので、ぜひ使ってみてください！
ko-fiでksk（準備中）
ツール更新を時々やっていこうと思っていますが、使える時間も無限ではないので、すぐ対応できるわけではありません。ko-fiでの支援のゴール達成や要望が多ければ優先的に改善していこうと思います。
フォローしてくれると、アップデートなどが確認しやすいと思います。
