Javascriptで画像付きツイートを行う

経緯

山手線 Ver.2020 by 東京感動線でWebARから画像付きツイートをすることになり、色々と悪戦苦闘して、動くものができたので残しておきます。ニーズが無いのか、ググってもビンゴの記事がないのですよね。

コード

プラットフォームとして、Oauth.ioを使っています。
ポイントをコメントで残しました。

/* detail : base64エンコード済みの画像データ */
/* tweet_text : ツイート内容 */
function twitter_tweet(detail, tweet_text) {
    var oauth_result;
    OAuth.initialize("***public key***"); /* 各自PUBLIC KEYを設定 */
    OAuth.popup('twitter').then(function(result) {
        oauth_result = result;
    }).fail(function(err){
        /* エラー処理 */;
    });

    /* multipartにするための区切り */
    var bound_text = "------------------------1ae47d990b354d1b00a4eea60e6b5b72";

    var image_src =
        "--" + bound_text + "\r\n" +
        'Content-Disposition: form-data; name="media_data"' + "\r\n" +
        "\r\n" +
        detail + "\r\n" +
        "--" + bound_text + "--\r\n\r\n";

    /* この書き方でOauth署名は正しく作成される模様 */
    var param1 = {
        headers: {
            'Content-Type' : 'multipart/form-data; boundary=' + bound_text
        },
        data: image_src
    };

    /* 画像のアップロード　*/
    oauth_result.post('https://upload.twitter.com/1.1/media/upload.json', param1).done(function (response) {
        /* 画像のアップロードに成功したら、ツイートと紐づけるために */
        /* 画像データのIDを取得する */
        var media_id_ = response.media_id_string;

        var param2 = {
            data: {
                status: tweet_text,
                media_ids: media_id_
            }
        };

        /* ツイート */
        oauth_result.post('/1.1/statuses/update.json', param2).done(function (response) {
            /* ツイート成功時の処理 */;
        }).fail(function (err) {
            /* ツイート失敗時のエラー処理 */;
        });
    }).fail(function(err) {
        /* 画像アップロード失敗時のエラー処理 */;
    });
}

参考

• OAuth.io API Reference
• POST media/upload - 画像をアップロードする
• JavaScriptでOAuth認証した後TwitterにPOSTする - Qiita

最後に

あまり親切な文書になってないと思うので、気が向いたら更新します。
ここをもっと書いて欲しいとうのご要望いただけるとありがたいです。