CodePenで作成したHTMLとJavaScriptを@wikiに反映させようとしても、「平常運転」のまま情報が更新されないケースがあります。これは、ウェブサイトや@wikiの仕様、クロスサイト制約、または外部APIのアクセス制限が原因であることが多いです。本記事では、その原因と具体的な対策方法について解説します。
原因1：CORS（クロスオリジンリソース共有）の制約
JavaScriptからJR東日本公式サイトの運行情報に直接アクセスすると、多くの場合ブラウザの同一生成元ポリシーによりブロックされます。これはCORSと呼ばれるセキュリティ機能で、外部サイトからデータを直接取得できないように制御されています。
そのため、CodePenで動作しても、@wikiに組み込むとJavaScriptが公式サイトからデータを取得できず、更新されません。
原因2：@wiki側のスクリプト制限
@wikiでは、外部のJavaScriptやiframeの埋め込みに制限があります。特に、ユーザーが追加したJSが直接実行されるわけではなく、サニタイズやブロックがかかる場合があります。
これにより、CodePenのコードをコピーして貼り付けても、JSが正しく実行されず、表示が固定されたままになることがあります。
解決策：サーバーサイド経由でデータを取得する
最も確実な方法は、自分のサーバーやクラウド関数でJR東日本の運行情報APIにアクセスし、JSONなどの形式でデータを取得してから@wikiに渡す方法です。
サーバー側で取得したデータを@wikiに埋め込むHTMLに変換すれば、ブラウザのCORS制約を回避できます。
解決策：公式APIやRSSの利用
公式が提供するRSSやAPIがあれば、そちらを使う方が安全で簡単です。JavaScriptで直接公式サイトをスクレイピングするよりも、正式なデータ形式を取得でき、更新も安定します。
例えば、RSSリーダー形式で取得して表示するだけで、@wiki上にリアルタイム運行情報を反映できます。
まとめ
@wikiにCodePenのHTML/JSをそのまま反映できないのは、CORS制約や@wikiのスクリプト制限が主な原因です。解決するには、サーバーサイドでデータを取得して渡す方法や、公式API/RSSを利用する方法が有効です。直接JavaScriptで公式サイトにアクセスするアプローチは、セキュリティ制約で動作しないことを理解しておく必要があります。
コメント