マンホール蓋の位置情報付きポータルサイトであるマンホールマップは、Twitter の OAuth ログインによってユーザー認証を行い、ログイン後にマンホール画像を投稿できる機能が有効になります。が、ログインしなくても投稿済み情報を参照できるようになっています。
この参照できる情報には投稿されたマンホール画像やその位置情報(地図)だけでなく、投稿者の情報も含まれています。投稿者の名前だけでなく、Twitter アイコン(プロフィール画像)も表示されます:
【起こった問題】
正確にはどのタイミングからだったのかわからないのですが、先日からマンホールマップにこの Twitter アイコンが表示されなくなる、という現象が起こっていました。
マンホールマップ側に変更がない状況で表示されていたものが表示されなくなった。ということは Twitter で何かあった?一時的な障害であることを祈っていたのですが1日経過しても状況は変わりませんでした。もしかして Twitter API が変更になったのかなあ、、という可能性も考えたのですが、明確なアナウンス類を見つけることができませんでした。ただ 2019 年に発表されたこの変更予告を見逃していて、もしかしたら今年の5月末くらいに実装からも外れて・・・みたいな感じで関係あったのかなあ(未確認)・・・という感じ:
https://twittercommunity.com/t/upcoming-changes-to-user-object-and-get-users-suggestions-endpoints/124732/2
これまでのマンホールマップでの Twitter アイコン取得方法と同じ方法(後述)を解説していたこちらのページの中でも画像が表示されているべき(と思われる)箇所の画像が表示されていません。つまりマンホールマップにだけ発生している現象というわけではなく、このページでも自分と同じ現象が起こっているように感じました:
Twitter APIで取得したプロフィール画像のサイズを変更する
(↓この部分、本来は画像が表示されている??)
ともあれ詳しい状況はわからないままですが、表示されなくなった Twitter アイコンを復活させるべく行った緊急対応の顛末を記録しておきます。結論として現時点(2020/06/04)で応急処置的にアイコンが表示されるよう復活しています。
【これまでの Twitter アイコン取得方法】
もう公式ドキュメントには記載されておらず、どこにこの方法について言及したドキュメントがあったのかも覚えてないのですが、これまでは以下のように HTTP API を2回使って Twitter アイコン画像の URL を取得していました:
(1)GET https://twitter.com/screen_name/profile_image にアクセス(screen_name 部はアイコンを表示したい人の Twitter アカウントの表示名※)
(2)(1)の結果得られる JSON オブジェクトから request.path の値を取り出す( "/12345/67890.jpg" みたいな値が取り出される)。
(3)HTML で <img src="https://pbs.twitter.com(request.path の値)"/> などのようにするとアイコン画像が表示できる
※Twitter アカウントの表示名とは、アカウントのページを開いた時のこの部分(赤枠)のことです:
これまでのマンホールマップではこの方法で投稿者の Twitter アイコン画像を表示していました。上述の「ここでも自分と同じ現象が起こっている・・・」と書いたリンク先でも同じ手法が紹介されていますが、マンホールマップ同様に表示できなくなっているようでした。
調査した結果を記載しておくと、上述の方法で(1)と(2)は結果を得ることができているのですが、(3)で指定する URL にブラウザでアクセスすると 404 エラー(存在しない URL)となりました:
ただ、では(1)と(2)が成功しているのかというと、どうも怪しいと思っています。(1)を実行した結果得られる(2)の値は以前は実行するまで推測できないパス名だったのですが、いま実行すると '/screen_name/profile_image' という結果となりました(つまり(1)を実行した時のパスがそのまま返ってくる)。この時点で以前のアイコンが正しく表示出来ていた頃とは結果が異なっているので、もしかすると(1)が以前のように動かなくなっていることが、アイコンが表示されない直接の原因なのかもしれない、、と推測しています。
いずれにしても、この API はもう使えなくなっちゃったのかな・・・ 結論として後述の応急手当的な対応はできたのですが、正直、今でもこの方法に戻せるなら戻して使いたいと思っています。理由も含めて後述します。
【現時点での正攻法(Twitter API を使う方法)】
上で紹介した方法以外に、(ちゃんと)Twitter API ドキュメントで紹介されている方法を使ってアイコン画像を取得する(正攻法的な)方法もあります。逆にいうと上述の方法は現在の Twitter API ドキュメントを探しても見つからない、ある種の「裏ワザ」的な方法だったりします(苦笑)。
正攻法というのは、具体的には GET /users/show API を使う方法です:
https://developer.twitter.com/en/docs/accounts-and-users/follow-search-get-users/api-reference/get-users-show
この API を実行する際のパラメータでアイコンを取得するユーザーの screen_name を指定します。すると指定したユーザーの情報を得ることができ、その中にはプロフィール画像(アイコン)の URL が含まれているので、その値を使うことでアイコン画像を表示することができる、というものです。
【正攻法(Twitter API を使う方法)では駄目な理由】
しかしこの方法はマンホールマップでの実装には向かない大きな理由があります。それはこの API はアクセストークンを使って実行する必要があるのですが、ユーザーがログインしていないとアクセストークンが取得できないのです。つまりユーザーがログインする前や、そもそもログインしないユーザーからするとアクセストークンを取得するタイミングがないので、この API を使うことが出来ず、アイコンを表示できないのでした。
マンホールマップは上述のようにログインしなくても参照できることを謳ってきていた背景もあり、Twitter 側に仕様変更があったとしても、急にマンホールマップにもログインを必須にすることに抵抗を感じてしまいました。。 そんな背景もあり、この正攻法での方法は採用していません。
【応急処置による現在の Twitter アイコン取得方法】
で、結論としてはこの方法を採用しているのですが、では改めてユーザーのログインなしにどうやって Twitter アイコンを取得しているか、を紹介します。あくまで応急手当的な内容であり、実行効率はよくない(のでできれば早く修正したい)ことを自覚している方法であることをご了承ください。
実現方法を簡単に言うと「Twitter にログイン済みの別プロセスを使って API を実行する」方法です。以下でもう少し詳しく紹介しますが、その前に twurl というコマンドラインツールを紹介します。
https://github.com/twitter/twurl
twurl (読み方わからず・・)は Twitter 謹製の Twitter API 専用 curl といった位置づけのオープンソース製品です。各種 Twitter API を必要であればパラメータを付けてコマンドラインから実行し、その結果を標準出力に取り出すことができます。このツールも実行前に OAuth によるログインが必要ですが、ログインを1度実行しておけば、そのあとの API 実行は続けて行うことができます。標準の curl でも Twitter API を実行することは可能ですが、パラメータとして与える署名の計算が毎回面倒だったりするわけです。一方 twurl を使うとそのあたりは裏でバッチリやってくれるらしく、必要最小限のパラメータだけを渡して実行することができる、というものです。
例えば上述した正攻法による API で紹介した GET /users/show API を使ってユーザー情報を取得する場合であれば、セットアップ後にこういったコマンドを実行します(curl と同様ですが、"-X GET" は既定値なので省略可能です):
これで screen_name が dotnsf(僕のアカウントです)であるユーザーの情報を取得することができます。結果は JSON で得ることができますが、この中の "profile_image_url_https" キーの値がそのユーザーの Twitter アイコン画像を表示するための URL 、ということになります:
この値が目的の URL 文字列です。したがって twurl コマンドを使うと目的の文字列を取得することができることがわかりました。
で、今回の API 代替方法というのは、この twurl を外部プロセスで実行して対象 Twitter ユーザーのアイコン画像の URL を取り出し、この URL を使ってアイコンを表示する、という方法です。外部プロセスを使うのがちとダサいのですが、一方でこの方法なら Node.js 実行前に twurl のセットアップを済ませておけば、Twitter API 実行のためのウェブアプリケーション側でのログインは不要となるので、参照目的のユーザーであっても(ログインしなくても)アイコンが表示される、ということが実現できるようになります。
マンホールマップのソースコードは現時点においては非公開ですが、この該当部分だけを別アプリケーションにして github で公開しています:
https://github.com/dotnsf/twurl
このアプリケーションは上述の twurl を別プロセスで動かして目的の URL を取得する、という内容を Node.js で実現するサンプルです。おそらく他のプログラミング言語であっても(外部コマンドを実行して、その結果を取得する機能があれば)実現できると思っています。
サンプルアプリの使い方ですが、まずアプリケーションを実行する前に twurl をセットアップする必要があります。詳しくは twurl の github 内にも記載されていますが、一応こちらでも(日本語で)以下に紹介します。
まず twurl は Ruby Gem を使ってインストールします。そのため Ruby(& Gem) 環境が必要です。Ruby がインストールされていない環境の場合はインストールしておきましょう。 Ubuntu 環境下であればこんな感じで:
Ruby Gem が導入されている環境で、以下のコマンドを実行すると twurl が導入されます:
これで(Ubuntu であれば /usr/local/bin/twurl として)twurl がインストールされました。次に twurl のセットアップが必要です。Twitter Developers にアプリを登録し、Consumer Key と Consumer Secret を取得した上で以下のコマンドを実行します:
このコマンドを実行すると「この URL を開け」という指示が表示されます。その URL をブラウザで開くと認証用の文字列が表示され、それと同じ内容を実行中の twurl コマンドの入力待ちプロンプトに打ち込んで Enter キーを押します。正しい文字列が指定されていれば認証が完了し、twurl コマンドが使えるようになります。試しに上述の GET /users/show コマンドを実行するなどしてみてください:
これで twurl を実行する準備が整いました。あとは Node.js のアプリケーションからこのコマンドを外部呼び出しで実行し、その結果を取得・解析してプロフィール画像の URL へリダイレクトさせることで目的の機能が実現できそうです。
twurl のセットアップができた所で、改めてこのサンプルアプリケーションを動かしてみます:
https://github.com/dotnsf/twurl
このサンプルアプリケーションの app.js ファイルは以下のようになっています:
そして別ファイルである settings.js は以下のような設定にしています:
簡単に解説しておくと、GET / をハンドルする API だけが定義されています。そしてこの API では screen_name というパラメータを受け取って、
を同期的に実行し(twurl のパスは settings.js 内に記載)、実行結果が stdout 変数に格納されます。そして格納された結果を JSON パースした上で "profile_image_url_https" の値を取り出して、その URL にリダイレクトする、という処理を行っています。 これによってパラメータで指定した screen_name を持つ Twitter ユーザーのプロフィールアイコン画像を表示する、という処理を実現しています。
実際にサンプルアプリケーションを動かして、ブラウザで http://localhost:8080/?screen_name=dotnsf を実行した結果がこちらです:
http://localhost:8080/?screen_name=dotnsf にアクセスすると、twurl の実行結果に含まれる URL に転送され、screen_name パラメータで指定した Twitter ユーザー(この場合であれば @dotnsf)のプロフィールアイコン画像が表示できました。twurl のセットアップ時に consumer_key と consumer_secret を指定してはいますが、そのあとのアプリケーション実行時には Twitter の OAuth ログインなしに Twitter API を実行して結果を取得することができています。
実用上においては、Twitter アイコンを表示するたびに twurl を使うこの一連の処理を実行するのは重すぎるので、一度取得した結果をキャッシュしておくなどの対処が必要になると思っています。ただこのやりかたで一応、挙動としては最低限の目的を達成することができました。
というわけで、無事にマンホールマップで投稿者の Twitter アイコンは応急処置的に復活できています:
この参照できる情報には投稿されたマンホール画像やその位置情報(地図)だけでなく、投稿者の情報も含まれています。投稿者の名前だけでなく、Twitter アイコン(プロフィール画像)も表示されます:
【起こった問題】
正確にはどのタイミングからだったのかわからないのですが、先日からマンホールマップにこの Twitter アイコンが表示されなくなる、という現象が起こっていました。
マンホールマップ側に変更がない状況で表示されていたものが表示されなくなった。ということは Twitter で何かあった?一時的な障害であることを祈っていたのですが1日経過しても状況は変わりませんでした。もしかして Twitter API が変更になったのかなあ、、という可能性も考えたのですが、明確なアナウンス類を見つけることができませんでした。ただ 2019 年に発表されたこの変更予告を見逃していて、もしかしたら今年の5月末くらいに実装からも外れて・・・みたいな感じで関係あったのかなあ(未確認)・・・という感じ:
https://twittercommunity.com/t/upcoming-changes-to-user-object-and-get-users-suggestions-endpoints/124732/2
これまでのマンホールマップでの Twitter アイコン取得方法と同じ方法(後述)を解説していたこちらのページの中でも画像が表示されているべき(と思われる)箇所の画像が表示されていません。つまりマンホールマップにだけ発生している現象というわけではなく、このページでも自分と同じ現象が起こっているように感じました:
Twitter APIで取得したプロフィール画像のサイズを変更する
(↓この部分、本来は画像が表示されている??)
ともあれ詳しい状況はわからないままですが、表示されなくなった Twitter アイコンを復活させるべく行った緊急対応の顛末を記録しておきます。結論として現時点(2020/06/04)で応急処置的にアイコンが表示されるよう復活しています。
【これまでの Twitter アイコン取得方法】
もう公式ドキュメントには記載されておらず、どこにこの方法について言及したドキュメントがあったのかも覚えてないのですが、これまでは以下のように HTTP API を2回使って Twitter アイコン画像の URL を取得していました:
(1)GET https://twitter.com/screen_name/profile_image にアクセス(screen_name 部はアイコンを表示したい人の Twitter アカウントの表示名※)
(2)(1)の結果得られる JSON オブジェクトから request.path の値を取り出す( "/12345/67890.jpg" みたいな値が取り出される)。
(3)HTML で <img src="https://pbs.twitter.com(request.path の値)"/> などのようにするとアイコン画像が表示できる
※Twitter アカウントの表示名とは、アカウントのページを開いた時のこの部分(赤枠)のことです:
これまでのマンホールマップではこの方法で投稿者の Twitter アイコン画像を表示していました。上述の「ここでも自分と同じ現象が起こっている・・・」と書いたリンク先でも同じ手法が紹介されていますが、マンホールマップ同様に表示できなくなっているようでした。
調査した結果を記載しておくと、上述の方法で(1)と(2)は結果を得ることができているのですが、(3)で指定する URL にブラウザでアクセスすると 404 エラー(存在しない URL)となりました:
ただ、では(1)と(2)が成功しているのかというと、どうも怪しいと思っています。(1)を実行した結果得られる(2)の値は以前は実行するまで推測できないパス名だったのですが、いま実行すると '/screen_name/profile_image' という結果となりました(つまり(1)を実行した時のパスがそのまま返ってくる)。この時点で以前のアイコンが正しく表示出来ていた頃とは結果が異なっているので、もしかすると(1)が以前のように動かなくなっていることが、アイコンが表示されない直接の原因なのかもしれない、、と推測しています。
いずれにしても、この API はもう使えなくなっちゃったのかな・・・ 結論として後述の応急手当的な対応はできたのですが、正直、今でもこの方法に戻せるなら戻して使いたいと思っています。理由も含めて後述します。
【現時点での正攻法(Twitter API を使う方法)】
上で紹介した方法以外に、(ちゃんと)Twitter API ドキュメントで紹介されている方法を使ってアイコン画像を取得する(正攻法的な)方法もあります。逆にいうと上述の方法は現在の Twitter API ドキュメントを探しても見つからない、ある種の「裏ワザ」的な方法だったりします(苦笑)。
正攻法というのは、具体的には GET /users/show API を使う方法です:
https://developer.twitter.com/en/docs/accounts-and-users/follow-search-get-users/api-reference/get-users-show
この API を実行する際のパラメータでアイコンを取得するユーザーの screen_name を指定します。すると指定したユーザーの情報を得ることができ、その中にはプロフィール画像(アイコン)の URL が含まれているので、その値を使うことでアイコン画像を表示することができる、というものです。
【正攻法(Twitter API を使う方法)では駄目な理由】
しかしこの方法はマンホールマップでの実装には向かない大きな理由があります。それはこの API はアクセストークンを使って実行する必要があるのですが、ユーザーがログインしていないとアクセストークンが取得できないのです。つまりユーザーがログインする前や、そもそもログインしないユーザーからするとアクセストークンを取得するタイミングがないので、この API を使うことが出来ず、アイコンを表示できないのでした。
マンホールマップは上述のようにログインしなくても参照できることを謳ってきていた背景もあり、Twitter 側に仕様変更があったとしても、急にマンホールマップにもログインを必須にすることに抵抗を感じてしまいました。。 そんな背景もあり、この正攻法での方法は採用していません。
【応急処置による現在の Twitter アイコン取得方法】
で、結論としてはこの方法を採用しているのですが、では改めてユーザーのログインなしにどうやって Twitter アイコンを取得しているか、を紹介します。あくまで応急手当的な内容であり、実行効率はよくない(のでできれば早く修正したい)ことを自覚している方法であることをご了承ください。
実現方法を簡単に言うと「Twitter にログイン済みの別プロセスを使って API を実行する」方法です。以下でもう少し詳しく紹介しますが、その前に twurl というコマンドラインツールを紹介します。
https://github.com/twitter/twurl
twurl (読み方わからず・・)は Twitter 謹製の Twitter API 専用 curl といった位置づけのオープンソース製品です。各種 Twitter API を必要であればパラメータを付けてコマンドラインから実行し、その結果を標準出力に取り出すことができます。このツールも実行前に OAuth によるログインが必要ですが、ログインを1度実行しておけば、そのあとの API 実行は続けて行うことができます。標準の curl でも Twitter API を実行することは可能ですが、パラメータとして与える署名の計算が毎回面倒だったりするわけです。一方 twurl を使うとそのあたりは裏でバッチリやってくれるらしく、必要最小限のパラメータだけを渡して実行することができる、というものです。
例えば上述した正攻法による API で紹介した GET /users/show API を使ってユーザー情報を取得する場合であれば、セットアップ後にこういったコマンドを実行します(curl と同様ですが、"-X GET" は既定値なので省略可能です):
$ twurl -X GET /1.1/users/show.json?screen_name=dotnsf
これで screen_name が dotnsf(僕のアカウントです)であるユーザーの情報を取得することができます。結果は JSON で得ることができますが、この中の "profile_image_url_https" キーの値がそのユーザーの Twitter アイコン画像を表示するための URL 、ということになります:
$ twurl -X GET /1.1/users/show.json?screen_name=dotnsf { "id": XXXX...., "id_str": "XXXX....", : "profile_image_url_https": "https://pbs.twitter.com/AAAAAAAA/BBBBB.jpg", : }
この値が目的の URL 文字列です。したがって twurl コマンドを使うと目的の文字列を取得することができることがわかりました。
で、今回の API 代替方法というのは、この twurl を外部プロセスで実行して対象 Twitter ユーザーのアイコン画像の URL を取り出し、この URL を使ってアイコンを表示する、という方法です。外部プロセスを使うのがちとダサいのですが、一方でこの方法なら Node.js 実行前に twurl のセットアップを済ませておけば、Twitter API 実行のためのウェブアプリケーション側でのログインは不要となるので、参照目的のユーザーであっても(ログインしなくても)アイコンが表示される、ということが実現できるようになります。
マンホールマップのソースコードは現時点においては非公開ですが、この該当部分だけを別アプリケーションにして github で公開しています:
https://github.com/dotnsf/twurl
このアプリケーションは上述の twurl を別プロセスで動かして目的の URL を取得する、という内容を Node.js で実現するサンプルです。おそらく他のプログラミング言語であっても(外部コマンドを実行して、その結果を取得する機能があれば)実現できると思っています。
サンプルアプリの使い方ですが、まずアプリケーションを実行する前に twurl をセットアップする必要があります。詳しくは twurl の github 内にも記載されていますが、一応こちらでも(日本語で)以下に紹介します。
まず twurl は Ruby Gem を使ってインストールします。そのため Ruby(& Gem) 環境が必要です。Ruby がインストールされていない環境の場合はインストールしておきましょう。 Ubuntu 環境下であればこんな感じで:
$ sudo apt-get install ruby
Ruby Gem が導入されている環境で、以下のコマンドを実行すると twurl が導入されます:
$ sudo gem install twurl
これで(Ubuntu であれば /usr/local/bin/twurl として)twurl がインストールされました。次に twurl のセットアップが必要です。Twitter Developers にアプリを登録し、Consumer Key と Consumer Secret を取得した上で以下のコマンドを実行します:
$ twurl authorize --consumer-key (Consumer Key) --consumer-secret (Consumer Secret)
このコマンドを実行すると「この URL を開け」という指示が表示されます。その URL をブラウザで開くと認証用の文字列が表示され、それと同じ内容を実行中の twurl コマンドの入力待ちプロンプトに打ち込んで Enter キーを押します。正しい文字列が指定されていれば認証が完了し、twurl コマンドが使えるようになります。試しに上述の GET /users/show コマンドを実行するなどしてみてください:
$ twurl /users/show?screen_name=dotnsf
(screen_name が dotnsf であるユーザーのプロフィール情報が表示されます)
これで twurl を実行する準備が整いました。あとは Node.js のアプリケーションからこのコマンドを外部呼び出しで実行し、その結果を取得・解析してプロフィール画像の URL へリダイレクトさせることで目的の機能が実現できそうです。
twurl のセットアップができた所で、改めてこのサンプルアプリケーションを動かしてみます:
https://github.com/dotnsf/twurl
このサンプルアプリケーションの app.js ファイルは以下のようになっています:
//. app.js var express = require( 'express' ), app = express(); var { execSync } = require( 'child_process' ); var settings = require( './settings' ); app.get( '/', function( req, res ){ var screen_name = req.query.screen_name; if( screen_name ){ try{ var stdout = execSync( settings.twurl_command + ' /1.1/users/show.json?screen_name=' + screen_name ); var obj = JSON.parse( stdout.toString() ); var profile_image_url_https = obj.profile_image_url_https; res.redirect( profile_image_url_https ); }catch( e ){ return res.status( 403 ).send( { status: false, error: e } ); } }else{ return res.status( 403 ).send( { status: false, error: 'No screen_name provided.' } ); } }); var port = process.env.PORT || 8080; app.listen( port ); console.log( "server starting on " + port + " ..." );
そして別ファイルである settings.js は以下のような設定にしています:
//. settings.js exports.twurl_command = '/usr/local/bin/twurl';
簡単に解説しておくと、GET / をハンドルする API だけが定義されています。そしてこの API では screen_name というパラメータを受け取って、
$ /usr/local/bin/twurl /users/show.json?screen_name=(パラメータの値)
を同期的に実行し(twurl のパスは settings.js 内に記載)、実行結果が stdout 変数に格納されます。そして格納された結果を JSON パースした上で "profile_image_url_https" の値を取り出して、その URL にリダイレクトする、という処理を行っています。 これによってパラメータで指定した screen_name を持つ Twitter ユーザーのプロフィールアイコン画像を表示する、という処理を実現しています。
実際にサンプルアプリケーションを動かして、ブラウザで http://localhost:8080/?screen_name=dotnsf を実行した結果がこちらです:
http://localhost:8080/?screen_name=dotnsf にアクセスすると、twurl の実行結果に含まれる URL に転送され、screen_name パラメータで指定した Twitter ユーザー(この場合であれば @dotnsf)のプロフィールアイコン画像が表示できました。twurl のセットアップ時に consumer_key と consumer_secret を指定してはいますが、そのあとのアプリケーション実行時には Twitter の OAuth ログインなしに Twitter API を実行して結果を取得することができています。
実用上においては、Twitter アイコンを表示するたびに twurl を使うこの一連の処理を実行するのは重すぎるので、一度取得した結果をキャッシュしておくなどの対処が必要になると思っています。ただこのやりかたで一応、挙動としては最低限の目的を達成することができました。
というわけで、無事にマンホールマップで投稿者の Twitter アイコンは応急処置的に復活できています: