JavaScriptからチャットワークAPIを使ってメッセージをPOSTできるのか

JavaScript

仕事でChatwork APIを使ってJavaScript(プレーンなHTML+JavaScript)で投稿したい、と問い合わせがあったので早速簡易的に実装してみたところ、出来ない!CORSエラーが返ってきてうんともすんとも・・・

Chatwork公式ドキュメント(https://developer.chatwork.com/ja/endpoints.html)をみても記述は間違っていないので、Chromeの仕様かと思い、Firefoxで試したけどダメ、IEで試してもダメ、もちろんEdgeもダメ・・・

公式ドキュメントの注意事項を再度読んでみると、

Chatwork APIのエンドポイントへは、必ず https で接続する必要があります。(http では接続エラーになります)

https://developer.chatwork.com/ja/endpoints.html

ふむふむ、ちゃんとSSL接続してます。これが問題じゃなさそう。

また、すべてのリクエストには必ずAPIトークンを含める必要があり、APIトークンはHTTPリクエストヘッダに X-ChatWorkToken というキーでセットする必要があります。

https://developer.chatwork.com/ja/endpoints.html

headerに「X-ChatWorkToken 」を入れるんですね。うん、入ってます。これも問題なし。

POSTメソッドやPUTメソッドを使用するエンドポイントのリクエストボディはContent-Type: application/x-www-form-urlencodedである必要があります。

https://developer.chatwork.com/ja/endpoints.html

Content-Typeapplication/x-www-form-urlencodedを指定してあげるのか。はい、しています。これも違う。
・・・以上!
はい!?全部クリアしてますが何か?

ChromeのデベロッパーツールにCORSエラーが出ているので、これもしかしてサーバー噛まないとだめじゃないの?と思い、PHPでテスト実装・・・あっさり投稿出来ました。

怪しいと思ったのでチャットワークに問い合わせ

公式サイトにはJavaScriptは使えない、ようなことは一切記載がなかったのですが、PHPであっさり動作したこともあって、もしかしてサーバーサイド言語(PHP,Javaなど)じゃないとダメなんじゃないかと怪しんでました。
埒が明かないので、直接チャットワークにメールで問い合わせてみることに。すると以下の回答がありました。

ご認識のとおり、Chatwork API は CORS に対応していないため、
ブラウザJavaScriptからの実行をおこなうことはできない形となっております。

ご希望にそえず申し訳ございませんが、ご要望については社内共有のうえ今後の改善を検討させていただきます。

返信メールから引用

出来ないのかー-い!公式ドキュメントの意味とは・・・ちゃんと書いておいて欲しいですね。
ということでJavaScript + HTMLではChatwork APIは実装出来ません。
PHPやJSPを噛ませてあげてPOSTしてみてください。結局JSPを噛ませてPOSTして解決しました。

ちなみにJSしか書けんわ!という方はGoogleのApp ScriptだとJavaScriptだけで実装出来たので、App Scriptを使える環境にある方は選択肢としてありだと思います。無駄な時間を費やしてしまいました。

結論

Chatwork APIはプレーンなHTML + JavaScriptではコール出来ません。HTML + PHP + JavaScriptやJSP + JavaScriptのように、サーバーサイド言語と組み合わせて呼び出す必要があります。

実際にサポートへ問い合わせたところ、上記の返答があったので間違いありません。

タイトルとURLをコピーしました