Blogger:JavaScript:新着情報を表示するガジェット - 正常に動作しない時のトラブルシューティング

イントロダクション

以前、Google のブログサービス「Blogger」にて、サムネイル付きの新着情報の一覧を任意の件数表示できる「新着情報ガジェット」を作成しました。

Blogger:JavaScript:新着情報を表示するガジェットを作成(6)-記事の投稿日を追加
http://upa-pc.blogspot.com/2015/03/blogger-new-post-list-gadget-javascript-6.html
Dr.ウーパのコンピュータ備忘録

今回は、その「新着情報ガジェット」が正常に動作しない時の対処法について記載します。

Blogger:JavaScript:新着情報を表示するガジェット - 正常に動作しない時のトラブルシューティング

新着読み込み中...のまま、新着情報が読み込まれない

Blogger の Feed が無効になっている

この「新着情報ガジェット」は、Blogger の Feed から新着情報を取得します。

そのため、Blogger の設定にて、Feed が無効になっていると、新着情報を取得することができません。


Feed が無効になっているかどうかを確かめる方法には、2 つの方法があります。

(1) 実際に Feed を取得してみる
以下の URL をブラウザのアドレスバーに打ち込みます。

http://[ブログのドメイン]/feeds/posts/summary

[ブログのドメイン] には、自分自身の Blogger ブログのドメインを入力します。
例）upa-pc.blogspot.jp


その後、エンターを押すなどして、そのページへ移動した時に、Feed の情報が表示されれば Feed は有効になっています。しかし、次のメッセージが表示された場合には、Feed が無効になっています。

The feed specified by http://www.blogger.com/feeds/[blogId]/posts/summary is not enabled

[blogId] : 数字から構成されたブログの id


Feed を有効にする方法は、「(2) Blogger の設定を確認する」に記載しました。


(2) Blogger の設定を確認する
Blogger の設定画面にて、「設定」->「その他」->「サイト フィード」の「ブログ フィードの許可」が以下の条件の場合には、新着記事の Feed は配信されていません。

• 「なし」になっている場合
• 「カスタム」にて「ブログの投稿フィード」が「なし」になっている場合

その場合には、「ブログ フィードの許可」を以下の設定にしてください。

• 「ブログ フィードの許可」を「なし」以外に設定する
• 「ブログ フィードの許可」が「カスタム」の場合には、「ブログの投稿フィード」を「なし」以外に設定する

なお、Feed を配信しないように設定している場合には、何らかの意図をもってそのような設定にしている場合があります。

例）

• Feed にて、情報を配信したくない
• Feed の二次利用を防止したい

など


そのため、Feed を無効から有効に変更する場合には、その意図を十分に確認する必要があります。

ブログの公開設定が、限定公開になっている

以下の URL をブラウザのアドレスバーに打ち込みます。

http://[ブログのドメイン]/feeds/posts/summary

[ブログのドメイン] には、自分自身の Blogger ブログのドメインを入力します。
例）upa-pc.blogspot.jp


その後、エンターを押すなどして、そのページへ移動した時に、Feed の情報が表示されれば ブログは一般に公開されています。しかし、次のメッセージが表示された場合には、ブログが限定公開になっています。

User does not have permission to read this blog.


その場合には、Blogger の設定画面にて、「設定」->「基本」->「許可」の「ブログの閲覧者」を「一般公開」にすれば、Feed が利用できるようになります。

Blogger のフィード URL - Blogger ヘルプ
https://support.google.com/blogger/answer/97933?hl=ja

しかし、意図的に限定公開にしている場合（第三者にブログを見られたくない場合など）には、Feed を利用することはできません。

JavaScript 部分で何らかのエラーが発生している

関数名の衝突

Blogger の Feed のデータを受け取るために、newpost_loader というグローバルな関数を使っています。

既に、それと同じ名前の関数がページ内にある場合には、名前が衝突してしまい、意図した動作にならないケースがあります。

その場合には、「新着情報ガジェット」のソースコード中の newpost_loader という名前を別の名前（例：newpost_loader2)にすべて置換します。

id の衝突
「新着情報ガジェット」を出力する部分の div タグの id 属性の値として "new-post-list-container" という値を使っています。

この値がページ中に 2 つ以上あると、正常に動作しません。


その場合には、「新着情報ガジェット」のソースコード中の new-post-list-containerという属性値を別の値（例：new-post-list-container2)にすべて置換します。

Chrome にてソースコードをコピーした場合の特別な事情
ブラウザとして Chrome を使っている場合には、SyntaxHighlighter （このブログでソースコードを装飾するために使用しているもの。PC版での表示のみ使用。モバイル版は未装飾。）で装飾されたソースコードをそのままコピーすると、正常に JavaScript が動作しないケースがあります。

SyntaxHighlighter で装飾したコードを Chrome でコピーすると文字化けする
http://upa-pc.blogspot.com/2014/05/syntaxhighlighter-chrome.html
Dr.ウーパのコンピュータ備忘録

そのため、必ず「上記コードを新しいウィンドウで開く」ボタンを押して、新しいウィンドウで開いたソースコードをコピーして使用してください。


その他 JavaScript のエラー
その他の問題により、JavaScript のエラーが発生している場合があります。

その場合には、配布版ではない（コードを最適化していない）ソースコードにて、動作を確認して、Chrome のデベロッパーツールに表示されたエラーを確認して、問題を解決してください。


もし、問題が解決できないようであれば、ブラウザから出力された「新着情報ガジェット」に起因するエラーメッセージと、その発生個所のソースコードをコピーして、「contact」フォームより情報をお寄せください。

ブラウザから出力されたエラーメッセージと、その発生個所のソースコードの確認方法として、ブラウザとして Chrome を使っている場合には、Chrome のデベロッパーツールのConsoleタブにて、エラー内容を確認できます。また、その発生個所のソースコードは、エラーメッセージの右側に表示されたファイル名・行番号をクリックすると、その場所へ移動することができます。


もし、そのエラー内容が対応可能なものであれば、対応したいと思います。

HTML/JavaScript ガジェットに配置しなかった場合

今回作成した「新着情報ガジェット」のソースコードは、HTML/JavaScript ガジェットのコンテンツとして配置することを前提としてます。

Blogger のテンプレートの HTML などに埋め込んだ場合には、そのままでは正常に動作しない可能性があります。

JavaScript が動作しない設定になっている

「新着情報ガジェット」の動作には、JavaScript が動作する必要があります。

そのため、JavaScript を動作しない設定にしている、またはJavaScript が動作しない環境では、「新着情報ガジェット」を動作させることができません。

まとめ

以上が、現在「新着情報ガジェット」が動作しない原因として考えられるものです。

もし、その他の要因、原因不明な原因がありましたら、この記事のコメント欄、もしくは「contact」フォームより情報をお寄せください。

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