Blogger:HTML/JavaScriptガジェットの編集アイコンがおかしくなった!その理由

イントロダクション

これは、Google のブログサービス「Blogger」にて遭遇したトラブルについての記事です。

最近、大幅にこのブログのデザインを変更してみました。
そのときに、HTML/JavaScript ガジェットの編集アイコンの動作がおかしくなるというトラブルに遭遇しました。

Blogger:ブログ上の工具マークは、運営者本人にしか見えません - その確認方法
http://upa-pc.blogspot.com/2015/05/blogger-edit-icon.html
Dr.ウーパのコンピュータ備忘録

その原因と対処法について記載します。

Blogger:ガジェットの編集アイコンがおかしくなった!その理由

現象

HTML/JavaScript ガジェットの内容（コンテンツ）を変更して、保存を実行した後に次の現象に遭遇しました。

• 実際にブログを表示した時に、HTML/JavaScript ガジェットの編集アイコンが薄い色ではなく、マウスを乗せた時の濃い色で表示される。
• HTML/JavaScript ガジェットの編集アイコンをクリックしても、HTML/JavaScript ガジェットの編集画面が表示されない。
• Blogger のアカウント(Google アカウント)にログインしていない状態で、実際にブログを表示した時にも、HTML/JavaScript ガジェットに編集アイコンが表示されている。

原因

原因を調べた結果、HTML/JavaScript ガジェットに入力した HTML 構文に誤りがあり、正常に HTML タグが閉じられていませんでした。

対処法

HTML 構文に誤りのあった、HTML/JavaScript ガジェットに入力した HTML を修正し、HTML として正しいものにしたところ、上記の現象は解消され、正常に動作するようになりました。

まとめ

HTML/JavaScript ガジェットに入力した HTML の構文誤りによって、このような現象が生じることは予想外でした。そのため、原因を突き止めるのに時間がかかりました。

このように、HTML/JavaScript ガジェットに入力した HTML の構文が誤っていると、その影響が予期せぬ形で現れます。そのため、HTML/JavaScript ガジェットに HTML を入力する際には、十分に HTML が正しいことを確認してから入力すると良いでしょう。可能であれば、いったんローカルの環境で、その HTML が正常に動作することを確認してから、HTML/JavaScript ガジェットにその HTML を入力するとなおよいでしょう。

このブログ内の、他の”Blogger”についての情報を見る

---

ブレイクスルーJavaScript フロントエンドエンジニアとして越えるべき5つの壁―オブジェクト指向からシングルページアプリケーションまで

Kindle版 楽天 7net