アカウント画像一括更新ツールを作ったので、紹介と学びについて

Google や Github など、様々なサービスのプロフィール情報(画像, etc)を一括更新するツール、puppeteer-account-manager を開発しました。 開発の目的や、開発から得た知見を紹介します。

リポジトリは、こちらです。

GitHub - silverbirder/puppeteer-account-manager: puppeteer-account-manager is a tool that get the profiles (photo, aboutMe, etc) from Contentful and updates the profile of each service.

puppeteer-account-manager is a tool that get the profiles (photo, aboutMe, etc) from Contentful and updates the profile of each service. - silverbirder/puppeteer-account-manager

github.com

なんで作ったの

Github や Twitter、Facebook など、Web サービスにはプロフィール画像を登録することができます。 私の性格上、どのサービスでも、同じ画像で登録したいと考えています。

そのため、いい感じのプロフィール写真を手に入れたら、全サービスのプロフィール画像を再登録しないと気がすまなくなり、とても面倒です。 そこで、今回、その面倒さを解決したく、このツールを作りました。

それ、Gravatar で良くない

今回の面倒さは、Gravatar という Web サービスで解決できるかもしれません。

Your Free Avatar, Profile, and Link In Bio | Gravatar

Create a global avatar and profile image with Gravatar. Get a free one-page personal site to showcase your identity and connect across the web.

gravatar.com

このサービスは、グローバルなプロフィール画像を提供するサービスです。 API 経由で、プロフィール画像を取得できます。

しかし、次の問題があったので、却下となりました。

• gravatar が提供するプロフィール画像サイズは 80px × 80px
  • サービスによっては、小さすぎる
    • 画像サイズを拡大することができるが、画質がよくない
• gravatar が提供するプロフィール項目が固定
  • 画像だけではなく、プロフィール項目も一括登録したかった
    • サービスによっては、プロフィール項目がマッチしない

そこで、Contentful という API ベースの CMS を使うことにしました。

Content that scales. Experiences that convert.

Contentful DXP uses AI-driven analytics to help you personalize, optimize, and create standout digital experiences at scale. Effortlessly.

www.contentful.com

Contentful では、自由に項目を決めることができます。 独自に作った項目 (画像や紹介文)を、API 経由で取得できるため、とても便利です。

どうやって作ったの

愚直なやり方です。 Puppeteer と呼ばれる Chrome ブラウザを自動操作できるライブラリを使いました。 Chrome ブラウザから、"各サービスへログインし、写真をアップロードする"処理を自動化しただけです。

GitHub - puppeteer/puppeteer: JavaScript API for Chrome and Firefox

JavaScript API for Chrome and Firefox. Contribute to puppeteer/puppeteer development by creating an account on GitHub.

github.com

プロフィール画像を更新する API は、なかったの

サービスによってはあります。例えば、Twitter には、次のようなプロフィール画像を更新する API があります。

X Developer Platform - X

Build with X's real-time data and APIs

developer.twitter.com

ただ、全てのサービスには、そのような API はありません。 API を使って更新するのが正しい姿ですが、全サービスの実装方法の足並みを揃えるために、 Puppeteer で自動操作することにしました。

パスワードって大丈夫

Puppeteer を動かす node アプリケーションと、Chrome ブラウザを同一マシン内で動作するようにしました。 そのため、node アプリケーション実行中に、パスワードを傍受されることはありません。 また、パスワードの設定は環境変数から注入するようにしています。 Docker コンテナで動作できるようにしているので、ローカルでも、コンテナサービスでも動かすことができます。

今後、パスワードの管理は、Keepass や Lastpass のようなサービスと連携したいと思っています。

GitHub - keeweb/kdbxweb: Web Kdbx library

Web Kdbx library. Contribute to keeweb/kdbxweb development by creating an account on GitHub.

github.com

どのサービスが対応している

これは、私が楽になりたいために作ったため、使い方が、限定的になっています。

詳しくは、

https://github.com/silverbirder/puppeteer-account-manager/blob/master/src/index.ts をご確認下さい。

どんな学びがあった

結構色々とハマりました。

極力 セレクタ指定したコードを書かない

Web サービスが返す HTML は、いつもずっと変わらないことはありません。 ある id や class の html タグがずっと残り続けるとは限りません。

そこで、できる限り、セレクタを指定せずにブラウザ操作をするようにしました。 例えば、

• ボタンやリンクをクリックしてページ遷移するのではなく、目的のページへ最短で直接遷移する
  • medium.com とか。
• submit ボタンをクリックするのではなく、エンターキーを入力する

です。こうすることで、安定した自動化ができました。

XPath が意外と使える

Google や Medium では、id や class がランダム値になっています。 そのため、単純な id や class を指定して進めることができません。

そこで、『○○』のテキストが含まれているセレクタの指定することが、XPath でできます。 これは、助かりました。

ログインが難しいものは、無理せず諦める

Amazon のログインは、2 段階認証が発生します。 テキストメッセージや、音声電話によるログインが求められ、Puppeteer 単体ではどうしようもありません。

この 2 段階認証の機能を解除することもできますが、セキュリティ上よろしくないので、ここは無理せず諦めることにしました。

並列処理をガンガン実行する

処理速度向上のため、全サービスを Promise.all で並列処理しました。それぞれが、シークレットウィンドウで開くことで、独立して処理するようにもしました。 しかし、たまに Puppeteer が落ちてしまうことがあります。原因は、実行しているマシンのスペック(Core 数)にも影響しますが、サービス側からの影響も受けたりします。 そのため、落ちても大丈夫のようにエラーハンドリングし、リトライするようにしました。

また、失敗したらどういった画面なのか知りたいので、スクリーンショットを撮るようにもしました。

Docker で実行可能に

Puppeteer に必要なモジュールを Docker に詰め込み、ログイン情報等を環境変数から外注することで、 環境非依存の実行環境ができました。そのため、Pub/Sub と Container Engine 等を組み合わせれば、 Contentful の Webfook 経由で、アカウント情報を更新することができます。

終わりに

私の性格がもっと大雑把であれば、このツールを作らなかったのですが、どうしても気になって仕方がなく... (笑) 最後まで読んでいただき、ありがとうございました。