日々のコンピュータ情報の集積と整理

Dr.ウーパのコンピュータ備忘録

2015年4月9日木曜日

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」フォームより情報をお寄せください。






関連記事

関連記事を読み込み中...

同じラベルの記事を読み込み中...
Related Posts Plugin for WordPress, Blogger...