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

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

2015年5月27日水曜日

Blogger:モバイル版の表示にて、ブログアーカイブが正常に動作しない(2) - 原因を探る

イントロダクション

Google のブログサービス「Blogger」にて、モバイル版の表示にて、ブログアーカイブが正常に動作しないという現象に遭遇しました。

Blogger:モバイル版の表示にて、ブログアーカイブが正常に動作しない
http://upa-pc.blogspot.com/2015/05/blogger-mobile-blog-archive-trouble.html


その原因について、少し調べてみました。


Blogger:モバイル版の表示にて、ブログアーカイブが正常に動作しない : 原因を探る

ブログアーカイブガジェットの各「月」を開いて、その月に投稿された記事の一覧を表示させようとすると、「読込中...」と表示されたままになり、記事の一覧が読み込まれない原因について

Blogger ブログをモバイル版で表示したときに、ブログアーカイブの”月”の階層を開き、その月に投稿された記事のタイトル一覧を表示してみます。

このときに、「読込中...」のまま、止まったままになるという現象が発生します。

このときに、Chromeのデベロッパーツールのコンソールを見てみると、次のエラーが発生していました。
(Windows 上の Chrome にて、Blogger ブログのモバイル表示を行っています。)

Chrome のデベロッパーツールのコンソール モバイル表示した Blogger ブログのブログアーカイブガジェットにて、 月の階層を開き、その月に投稿された記事のタイトル一覧を表示しようとしたところ。 GET  で 404 (Not Found) のエラーが発生
Chrome のデベロッパーツールのコンソール
モバイル表示した Blogger ブログのブログアーカイブガジェットにて、
月の階層を開き、その月に投稿された記事のタイトル一覧を表示しようとしたところ。
GET  で 404 (Not Found) のエラーが発生


エラー内容:
GET http://upa-pc.blogspot.jp/2015/05/blogger-mobile-template-customize.html?m=1&action=getTitles&widgetId=BlogArchive1&widgetType=BlogArchive&responseType=js&path=http%3A%2F%2Fupa-pc.blogspot.jp%2F2015_05_01_archive.html%3Fm%3D1 404 (Not Found)

Blogger のブログアーカイブガジェットでは、月階層下のその月に投稿した記事一覧のタイトルは動的に取得しているようなので、その取得に失敗(404 (Not Found))しているようです。

試しに、その URL をブラウザで表示してみると、ページが見つからない時のページが表示されました。

取得できなかったファイルの URL をブラウザで表示 Blogger のページが見つからない時のページが表示された
取得できなかったファイルの URL をブラウザで表示
Blogger のページが見つからない時のページが表示された



同様に、パソコン表示におけるBlogger のブログアーカイブガジェットにて、同じようにブログアーカイブの”月”の階層を開き、その月に投稿された記事のタイトル一覧を表示してみます。

こっちは正常にその月に投稿された記事のタイトル一覧を表示できます。
その時に、取得していたファイルの URL は、次のようになっていました。

http://upa-pc.blogspot.jp/2015/05/blogger-mobile-template-customize.html?action=getTitles&widgetId=BlogArchive1&widgetType=BlogArchive&responseType=js&path=http%3A%2F%2Fupa-pc.blogspot.jp%2F2015_05_01_archive.html


その URL をブラウザで表示してみると、その月に投稿された記事一覧のデータが入った JavaScript のデータが表示されました。


さて、何故モバイル表示においては、ある月に投稿された記事一覧のデータが入った JavaScript のデータが取得できなかったのでしょうか?

パソコン表示とモバイル表示における、ある月に投稿された記事一覧のデータが入った JavaScript のデータの取得 URL に着目してみます。

すると、次の 2 つの違いがあることが分かります。
(1) モバイル表示の場合には、クエリ文字列内に m=1& が含まれている
(2) モバイル表示の場合には、クエリ文字列内の path パラメータの最後に %3Fm%3D1 が付与されている

まず、(1) について、モバイル表示における、ある月に投稿された記事一覧のデータが入った JavaScript のデータの取得 URL のクエリ文字列内の m=1& を削除してデータを取得してみました。

しかし、結果は分からず、ファイルが見つからないページが表示されました。

取得できなかったファイルの URL をブラウザで表示 Blogger のページが見つからない時のページが表示された
取得できなかったファイルの URL をブラウザで表示
Blogger のページが見つからない時のページが表示された


次に、(2) について、モバイル表示における、ある月に投稿された記事一覧のデータが入った JavaScript のデータの取得 URL のクエリ文字列内の path パラメータの最後にある %3Fm%3D1 を削除してデータを取得してみました。

すると今度は、パソコン版表示と同じように、正常にある月に投稿された記事一覧のデータが入った JavaScript のデータの取得に成功しました。


つまり、ある月に投稿された記事一覧のデータが入った JavaScript のデータの取得 URL のクエリ文字列内の path パラメータの最後にある %3Fm%3D1 が付与されていると正常にデータを取得できないようです。

さて、この %3Fm%3D1 はなんでしょうか?
エンコードされた文字列のようなので、デコードしてみます。すると、

%3Fm%3D1
↓デコード
?m=1

となりました。
この、?m=1 というのは、Blogger ブログのページを、パソコン表示ではなく、モバイル表示するときに付与されるものです。


BloggerのPC/モバイル表示の切り替え管理方法が興味深い!
http://upa-pc.blogspot.com/2015/01/blogger-mobile-page-to-pc-page.html
Dr.ウーパのコンピュータ備忘録

Bloggerユーザなら知っておきたい、BloggerブログのURL構成まとめ
http://upa-pc.blogspot.com/2015/02/blogger-url-summary.html
Dr.ウーパのコンピュータ備忘録


ということは、モバイル表示をすると、URL にクエリパラメータとして ?m=1 が付与されるため、ある月に投稿された記事一覧のデータが入った JavaScript のデータの取得 URL のクエリ文字列内の path パラメータにも ?m=1 が含まれてしまうことで、Blogger のサーバが正常な結果を返せなくなっていると考えられます。


余談:モバイル表示にした Blogger ブログを、PC 表示に切り替えた場合に、正常にブログアーカイブは動作するか?

さて、「BloggerのPC/モバイル表示の切り替え管理方法が興味深い!」に記載したように、モバイル表示にした Blogger ブログを、PC 表示に切り替えた場合には、クエリ文字列として、?m=0 が付与されます。

上記の理論によれば、こちらのケースでも、Blogger のブログアーカイブは正常に動作しなさそうです。

実際に PC 表示に切り替えて(URLに?m=0が付与された状態)試してみると、ブログアーカイブの”月”の階層を開いたところ、モバイル表示と同じように「読込中...」になったまま、止まってしまいました。



まとめ

Bloggerのモバイル版の表示にて、ブログアーカイブが正常に動作しない現象について、「ブログアーカイブガジェットの各「月」を開いて、その月に投稿された記事の一覧を表示させようとすると、「読込中...」と表示されたままになり、記事の一覧が読み込まれない原因について」ケースの原因を調べてみました。

この原因として、モバイル版において URL に付与される ?m=1 によって、影響が出ていることを確認できました。


もう1つのトラブルとして、「ブログアーカイブガジェットの全ての年のリストが開きっぱなしになり、すべての月が表示された状態になる。また、年の隣の三角形を押しても、年の下の月のリストを閉じることができない」がありましたが、こちらの原因については調査していません。
(月の隣の三角計を押した時に、ブラウザのコンソールには何も表示されないため、また別の原因がありそうです。)






関連記事

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

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