コードペンが不調20200510

このページの内容

html等のソースコードを確認できる「CodePen」機能を、搭載したWebサイトを閲覧することがあります。

しかし、最近どのサイトを見ても空欄部分が多くなり、記事内容が全く理解できず大変困っていました。

どうやら記事部分への送信がブロックされ止まっている様であり、解決策を調べ元サイトの「codepen.io」へ会員登録した結果、CodePen搭載のWebサイトでの表示が元へ戻りました。

図1.Google Chromeでの画面
アイコンへマウスを載せた時だけの表示で、接続が拒否されている。

図2.Fire Foxでの画面
ブロックされている様子が表示されている。

画像はクリックするとLightboxで拡大表示します。

２０２０年５月１０日

1：状況説明

Webページの作成には「CMS」ツールを使わず全て手作りで作業しています。

今回、一般に公開されているHTML等のソースコードを紹介しているWebサイトを閲覧していた時、記事へ埋め込まれている「CodePen」^（※１）アプリが、本来なら読み出され表示される部分が、そっくり表示されず空白領域のままになっているトラブルが起こっていた。

この様な現象は最近発生するようになり、その結果上記アプリを使用している他のサイトでも、記事内容を全然理解できない状態になっていました。

これらのページは既定のブラウザに設定している「Google Chrome」から、予備に使用している「Fire Fox」へ変えてみても同じ状態だった。

CodePenでソースコードを公開する手法を使用したWebサイトは増加していて、数年前から恩恵を受け「閲覧」等を「無料版」で使用してきたが、急にこの機能を使用したページ全部が閲覧できなくなってしまい非常に困りました。

CodePen使用のサイトは数年前から使用（Free版を閲覧用）していますが、どのサイトを見ても「表示エラー」を起こしていて、今は全く使えない状態になっていました。

この現象の対策にはCMSのJavascript等をバージョンアップして出来る様な記載があった為、当初はWebサイト作成者側の問題であり直ぐ解決されるだろうと考えていた。

しかしなかなか解決の兆しはなく、このCodePen機能が使えなければ記事内容は全く理解できません。

エラー内容は、図1の様に空欄中心部のアイコン表示にマウスを載せた時だけ、「codepen.ioで接続が拒否されました。」のメッセージが出るため、自分のPCの問題で有りそうな気がして再度検索してみました。図2　Foxでは常時エラー表示が出ていました。

エラー内容から「会員登録したら表示は戻る」と言う記事が見付かりました。

しかし、最近は参考にするWebサイトに外国が増加してきていています。Chromeの自動翻訳機能には大変重宝していますが、登録完了手続は本人宛て英文メールでの意思表示が必要になります。通常ここで完了手続が済まないと「有効」になりません（最大のネック）。

今まで会員登録は、クッキー等で個人情報が漏れだし第三者等にトラッキングされる恐れや、上記わずらわしさもあり「足跡は残したくない心理」が働き、会員登録制自体は苦手で極力避けてきました。

余談になりますが：「Twitter」で投稿時のURL文字数を減らす無料サービス（bitly shorten）も、便利だったためスタート当初から使用してきましたが、最近会員登録制に変わった機会に、やむを得ず使用を止めることにした例もあります。

今回も迷ったが、背に腹を変えられず挑戦してみました。

案の定英文メールが来ましたが、Googleの無料翻訳サイトへコピペして日本語にしてから、ボタン等の意味も分かり最終手続は完了出来ました。

その結果上記のエラーは無くなり、Webページ記事内で空欄だった場所には、CodePenの表示があり、動作確認機能も元に復活していました。

従来Webサイトへ訪問した時無料で閲覧できているサイトであっても、ユーザ登録なしで使用できるのは当たり前でした。しかし、最近は会員登録を促すサイトも多くなり、今後は無料コンテンツであっても会員登録してみるのが当たり前に変わるのかも知れません。(^_^;)