Facebookデータのダウンロード

Facebookから自分の投稿等のデータをJSONとしてダウンロードできますが、それをJavaScriptでそのままJSONファイルのインポートを使って読み込もうとすると、日本語が文字化けするという問題があります。これはFacebookが生成するJSONファイルがあまり一般的でない方法でデータをエンコードしていることが原因です。

ダウンロード方法

以下の手順でダウンロードできます。

Facebookの画面右上でアカウントをクリックします。
[設定とプライバシー]を選択し、[設定]をクリックします。
左側で、[プライバシー]をクリックしてから[あなたのFacebook情報]をクリックします。
[プロフィール情報をダウンロード]の横で[見る]をクリックします。
リクエストするデータのカテゴリを追加または削除するには、Facebook画面の右側のボックスをクリックします。
以下のオプションを選択します。
- ダウンロードリクエストのデータ形式（JSONを指定）
- 写真、動画および他のメディアの品質
- 情報の期間。期間を選択しない場合、選択したカテゴリのすべての情報をリクエストすることになります。
ダウンロードリクエストを確定するには、[ダウンロードをリクエスト]をクリックします。

日本語の文字化けの問題

Facebookが生成するJSONファイルがUTF-8ではなく、Latin-1 (ISO-8859-1)でエンコードされているため、日本語などの多くの言語のテキストが文字化けしてしまいます。

文字化けの修正方法

以下の手順で、修正したJSONファイルを読み込むことができます。

まず、fix_fb_json.jsファイルを作成し、以下のコードをその中に保存します。

fix_fb_json.js

const fixFbJson = (orig) => {
    const converted = orig.replace(/\\u00([a-f0-9]{2})/gm, (x, p) => {
        const i = parseInt(p, 16);
        const c = String.fromCharCode(i);
        return c;
    });

    return latin1ToUtf8UsingTextEncoder(converted);
};

const latin1ToUtf8UsingTextEncoder = (latin1) => {
    const latin1Array = latin1.split('').map(char => char.charCodeAt(0));
    const latin1Uint8Array = new Uint8Array(latin1Array);
    const utf8Decoder = new TextDecoder('utf-8', { fatal: true });

    try {
        return utf8Decoder.decode(latin1Uint8Array);
    } catch (error) {
        console.error('Failed to decode latin1 to utf8:', error);
        return null;
    }
};

次に、HTMLファイルを作成し、その中でfix_fb_json.jsをインポートします。例えば、index.htmlファイルを作成して以下のコードを追加してください。

index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Facebook JSON Reader</title>
</head>
<body>
    <input type="file" id="fileInput" />
    <script src="fix_fb_json.js"></script>
    <script src="main.js"></script>
</body>
</html>

次に、main.jsファイルを作成し、以下のコードを追加してください。

main.js

document.getElementById('fileInput').addEventListener('change', async (event) => {
    const file = event.target.files[0];
    const fileContent = await file.text();
    const fixedJsonString = fixFbJson(fileContent);
    const fixedJsonData = JSON.parse(fixedJsonString);

    // ここでfixedJsonDataを使って、データを操作・表示することができます。
    console.log(fixedJsonData);
});

作成したindex.htmlファイルをブラウザで開いて、FacebookからダウンロードしたJSONファイルを選択します。ファイルが選択されると、修正後のJSONデータがコンソールに表示されます。

これで、文字化けせずにFacebookのJSONファイルを読み込むことができます。ただし、これらの手順はブラウザ上で動作するため、Webサーバーを使用してファイルをホストする必要があります。ローカルファイルシステム上で直接実行すると、セキュリティ制限のため、エラーが発生することがあります。

注意：この方法は、FacebookがJSONデータをエンコードする方法に依存しており、Facebookのエンコード方法が変更された場合、正しく動作しなくなる可能性があります。また、この方法はサードパーティ製のJavaScriptを使用するため、信頼できるソースから提供されるものであることを確認してください。

まとめ

この記事では、Facebookからダウンロードした投稿等のJSONファイルを文字化けせずに読み込む方法を説明しました。ダウンロード方法から文字化けの問題、そしてその解決策について説明しました。また、実際に修正したJSONファイルを読み込むための手順についても説明しました。

参考