見出し画像

PWA 版の Twitter のアイコンを、𝕏 から青い鳥にする



この記事においては、原則として、𝕏 のことを、Twitter と呼びます。
また、黒い丸に 𝕏 という文字があるアイコンになる前の、青い円に鳥がいる頃の Twitter のアイコンを、青い鳥などと呼ぶことがあります。

Windows の PC を初期化 (クリーンインストール) したついでに書いた駄文です。読みにくいと思っても、気合で読んでください。

ちなみに、この手法で、ほかの PWA でも、アイコンを自由に変更できると思います。



Microsoft Edge で、Twitter を見ていると、このようなポップアップが出てきます。

X のインストール

この黒い丸に 𝕏 と書いてあるアイコン、嫌ですね
というわけで、これを、青い鳥に戻してあげましょう。

用意するもの

・青い鳥の頃の PWA 版 Twitter のアイコン画像
・Microsoft Edge
・Microsoft アカウント

(Chrome など、その他の Chromium をベースにしたブラウザは、検証していませんが、似た方法でできると思われます。)

青い鳥のアイコン画像は、持っていない方もいると思うので、ここに置いておきます。
怒られたら消してしまうので、この下に ZIP ファイルがなければ、自力で用意してください。


手順

過去に MS アカウントで同期している Edge で、Twitter の PWA をインストールしたことある場合、2台目の PC 以降 (または初期化などした同じ PCなど) は、8 以降の手順のみで済むと思います。

1. Microsoft Edge の下準備 (プロファイル)


Microsoft Edge では、複数のプロファイルを利用することができます。

PWA 版 Twitter をインストールするプロファイルが、Default (Microsoft Edge で、特に何も設定せずとも、一番最初に起動するプロファイル) で良い場合は、ここを飛ばして、次に進んでください。
プロファイルが何かわからない人も、飛ばして、次に進んでください。

Default 以外のプロファイルにインストールしたい場合は、予めプロファイルを作成しておく必要があります。
設定ページの、最初の画面、プロファイルのタブで、右上の「プロファイルの追加」から、プロファイルを追加できます。(画像の 1)

プロファイルの追加

2. Microsoft Edge の下準備 (MS アカウント)

次に、Microsoft Edge で、Microsoft アカウントにサインインします。
上にある画像の 2 の部分に、メールアドレスが表示され、「同期は有効になっています」と表示されていれば、ここを飛ばして、次に進んでください。

そうでない場合、このようになっていると思うので、「サインインしてデータを同期」を押して、サインインしてください。

(個人用の Microsoft アカウントでも、職場の Microsoft Entra ID でも、アプリの同期さえできればよいので、どちらでも構いませんが、職場のアカウントでは、組織による制限がある場合があります。)

サインインしてデータを同期

3. Microsoft Edge の下準備 (同期)

先ほどの、プロファイル名の下に、「同期」という項目があるので、そこを開き、「アプリ」を有効にします。

同期

3. PWA 版 Twitter を一度インストールする

Twitter (https://twitter.com) に行き、一度、PWA 版 Twitter をインストールします。

黒い丸に 𝕏 という文字があるアイコンになっていますが、この時点では、嫌でも受け入れてください。

X のインストール

嫌だ、嫌だぁぁぁ……

さて、Windows の、スタートメニューに、X という項目が増え、黒い丸に 𝕏 という文字があるアイコンが、出ています。

4. アイコンの保存先を確認する

エクスプローラーで、「%localappdata%\Microsoft\Edge\User Data」を開きます。

%localappdata% とは、C:\Users\(現在のユーザー名)\AppData\Local というフォルダに対応しています。

1 のときの、プロファイルが Default なら、「Default」のフォルダ、それ以外の場合は、プロファイルの番号に対応する、「Profile (番号)」というフォルダを開きます。

そして、「Web Applications\Manifest Resources」というフォルダを開き、「jgeocpdicgmkeemopbanhokmhcgcflmi」というフォルダがあるかを確認してください。

そうでない場合、黒い丸に 𝕏 という文字があるアイコンがあるフォルダを見つけてください。
そして、最初に配布した ZIP ファイルを開き、その中にある、_crx__jgeocpdicgmkeemopbanhokmhcgcflmi というフォルダと、jgeocpdicgmkeemopbanhokmhcgcflmi というフォルダの名前を、対応するフォルダ名に、書き換えてください。

5.  Edge で、MS アカウントからサインアウト

一度、Microsoft Edge の Microsoft アカウントから、サインアウトします。

Twitter のサインアウトではありません。
また、先ほどの PWA 版 Twitter をインストールした場合、同期が終わるまで、数分待ってからサインアウトします。

設定の、この部分ですね。

この際に、お気に入りなどはクリアしなくてもよいです。

こうなればよいです。

6. Edge から、PWA 版 Twitter をアンインストール

Edge で、画面上部にある、アドレスバーに、「edge://apps/」と入力して開きます。

もしくは、Edge の右上にある、「」→「アプリ」→「アプリの表示」→

→「」→「アプリの管理」でも、同じ画面が開けます。

こうなればよいです。

アプリの管理画面

そして、「X」の右上にある、「」→「アンインストール

アンインストール

データはクリアしなくてよいです。
クリアすると、Twitter からログアウトされます。

7. Edge でサインインする

2 の手順と同じなので省略。

8. アイコン画像をコピーする

4 のときのフォルダ、「%localappdata%\Microsoft\Edge\User Data」に行き、プロファイル名に対応するフォルダの中に、ダウンロードした ZIP ファイルの中身を展開します。

黒い丸に 𝕏 という文字があるアイコンのファイルを、置き換えるかという確認が出れば正常です。置き換えてください。
もしも、そのような確認が出ない場合、展開する場所を間違えているか、4 の部分で間違えている可能性があります。

9. Twitter の PWA 版をインストール

6 の手順で、アプリの管理画面を開きます。

青い鳥の Twitter のアイコン (グレーアウト状態)になっていることを確認します。
そうでないならやり直し。

右側の「インストール」を押して、インストールする。

完成。青い鳥が帰ってきました。


Q: なぜ、MS アカウントの作業が必要なのか?

MS アカウントがなくても、PWA のインストール後に、画像ファイルを差し替えるだけで、Edge 内のみのアイコン自体の変更はできます。

しかし、その場合、PWA をインストールするときに、アイコン画像がダウンロードされて設定されるため、スタートメニューや、タスクバーに登録されるアイコンが、黒い丸に 𝕏 という文字があるアイコンのままになってしまうのです。
(UWP などの知識があれば変更できるかもしれないが、少なくとも、この記事の方法よりも数倍は面倒になると思われます)

そのため、一度 MS アカウントの同期で、ローカルに事前にアイコンのキャッシュを保存させておき、PWA のインストール時に、そのキャッシュを使うようにさせる必要があります。

Q: ほかの PWA などにも応用できるか

4 のときの、フォルダさえわかれば、あとはほかの PWA でも、別の好きなアイコンでも、できると思います。


30分で書いた駄文終わり。