Blogger:PC表示/モバイル表示を、JavaScriptにて取得する方法 - BloggerのテンプレートのHTML方式

イントロダクション

Google のブログサービス「Blogger」では、PCで表示した場合と、モバイル端末で表示した場合とで、表示を変えることができます。

Blogger:モバイル版のテンプレートをカスタマイズするときに、私がよく使っているもの
http://upa-pc.blogspot.com/2015/05/blogger-mobile-template-customize.html
Dr.ウーパのコンピュータ備忘録

さて、今現在 Blogger ブログが、PC表示をされているのか、モバイル表示をされているのか、JavaScript として取得したい場合があります。

その時には、次の方法が考えられます。

(1) URL のクエリパラメータを見て、PC表示/モバイル表示を判別
現在表示している Blogger ブログの URL のクエリパラメータに、m パラメータが付与されているかどうかでPC表示/モバイル表示をチェックします。

m=1：モバイル表示
m=0：モバイル表示から、PC表示へ切り替えて表示
mパラメータなし：PC表示

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.ウーパのコンピュータ備忘録

(2) Blogger のテンプレートの HTML のタグを使用して、PC表示/モバイル表示を判別

Blogger のテンプレートの HTML 内でのみ効果を発揮するタグを使って、PC表示/モバイル表示をチェックします。

今回は、(2) の「Blogger のテンプレートの HTML のタグを使用して、PC表示/モバイル表示を判別」の方法について記載します。

HTML/CSS/JavaScriptでタブコントロールを作ってみた(右タブ) - display:none方式

イントロダクション

前回は、選択されているタブの中身は表示、選択されていないタブの中身は非表示（CSS の display:none）とする仕組みにて、左にタブがあるタブコントロールを作成してみました。

HTML/CSS/JavaScriptでタブコントロールを作ってみた(左タブ) - display:none方式
http://upa-pc.blogspot.com/2015/05/html-tabControl-display-none-left.html


今回は、右にタブがあるタブコントロールを作成してみました。

HTML/CSS/JavaScriptでタブコントロールを作ってみた(左タブ) - display:none方式

イントロダクション

前回は、選択されているタブの中身は表示、選択されていないタブの中身は非表示（CSS の display:none）とする仕組みにて、下にタブがあるタブコントロールを作成してみました。

HTML/CSS/JavaScriptでタブコントロールを作ってみた(下タブ) - display:none方式
http://upa-pc.blogspot.com/2015/05/html-tabControl-display-none-bottom.html


今回は、左にタブがあるタブコントロールを作成してみました。

HTML/CSS/JavaScriptでタブコントロールを作ってみた(下タブ) - display:none方式

イントロダクション

前回は、選択されているタブの中身は表示、選択されていないタブの中身は非表示（CSS の display:none）とする仕組みにて、上にタブがあるタブコントロールを作成してみました。

HTML/CSS/JavaScriptでタブコントロールを作ってみた(上タブ) - display:none方式
http://upa-pc.blogspot.com/2015/05/html-tabControl-display-none-top.html


今回は、下にタブがあるタブコントロールを作成してみました。

HTML/CSS/JavaScriptでタブコントロールを作ってみた(上タブ) - display:none方式

イントロダクション

タブコントロールを使用すると、情報を整理するときにとても便利です。

タブコントロールはとても便利！何故便利なのか？
http://upa-pc.blogspot.com/2015/05/tab-control-is-useful.html


さて、以前、HTMLとJavaScriptでタブコントロールを作ってみました。

HTMLとJavaScriptでタブコントロールを作ってみた-タブ:上
http://upa-pc.blogspot.com/2014/05/html-tabControl-top.html
Dr.ウーパのコンピュータ備忘録

HTMLとJavaScriptでタブコントロールを作ってみた-タブ:下
http://upa-pc.blogspot.com/2014/05/html-tabControl-bottom.html
Dr.ウーパのコンピュータ備忘録

HTMLとJavaScriptでタブコントロールを作ってみた-タブ:左
http://upa-pc.blogspot.com/2014/05/html-tabControl-left.html
Dr.ウーパのコンピュータ備忘録

HTMLとJavaScriptでタブコントロールを作ってみた-タブ:右
http://upa-pc.blogspot.com/2014/05/html-tabControl-right.html
Dr.ウーパのコンピュータ備忘録

その時作成したタブコントロールでは、タブを切り替えるたびにタブの中身を生成する仕組みでした。
（タブの中身のデータを非表示(CSS の display:none)にしておき、タブコントロールの中にコピーする仕組み）

用途によっては、その方式が都合の良い時があります。
（タブを切り替えるたびに、内容を初期化したい場合など）


しかし、タブを切り替えるたびにコピー処理を実行するのは、処理対象のデータ量によっては処理の負荷がかかる場合があります。また、タブの中身に何らかの手を加えた場合に、タブを切り替えるたびに初期化されるのが望ましくない場合もあります。


そこで、今回は、タブの中身をコピーしてタブコントロール内に表示するのではなく、選択されているタブの中身は表示、選択されていないタブの中身は非表示（CSS の display:none）とする仕組みにて、タブコントロールを作成してみました。

Blogger:JavaScript:新着情報を表示するガジェットを作成(8)-記事の冒頭の文字数を制限

イントロダクション

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

前回：

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

今回は、前回新着情報ガジェットへ追加した記事の冒頭部分の文字数を制限します。

Blogger:JavaScript:新着情報を表示するガジェットを作成(7)-記事の冒頭を追加

イントロダクション

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

前回：

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

今回は、記事の冒頭を新着記事一覧へ追加します。

ブログ/Webページの一部を新しいウィンドウで表示したい! そんな時は、JavaScriptを使って新しいウィンドウへHTMLを書き出そう！

イントロダクション

ブログ上では、レイアウトが決まっているため、大きなサイズのコンテンツは扱いづらいです。


特に、横幅はたいてい固定されているうえに、サイドバーなどがあるため、大きなコンテンツは縮小して配置するか、狭い領域に配置する工夫が必要になります。

コンテンツのなかでも、特に表のような幅が広いコンテンツは、配置するのが面倒です。


Webページでも、本文とその他の部分でコンテンツのサイズが固定されている場合には、大きなサイズのコンテンツは扱いづらいです。


そんな時は、ブログの本文中では、収まらなかった部分をスクロールで見せるようにしておき、新しいウィンドウでそのコンテンツ全体を見せる方法があります。

Blogger:JavaScript:新着情報を表示するガジェット - CSSによるカスタマイズ手法

イントロダクション

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

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

今回は、その「新着情報ガジェット」をスタイルシートでいろいろとカスタマイズしてみます。

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コード

イントロダクション

Google のブログサービス「Blogger」にて、アップロードした画像の、取得時のURLのパターンと、動的に取得サイズを変更する方法について調べてみました。

Bloggerでアップロードした画像ファイルの、URLのパターン
http://upa-pc.blogspot.com/2015/04/blogger-image-url.html
Dr.ウーパのコンピュータ備忘録

Bloggerでアップロードした画像を、サーバから配信される画像のサイズを指定して表示する方法
http://upa-pc.blogspot.com/2015/04/blogger-image-url-change-size.html
Dr.ウーパのコンピュータ備忘録

今回は、それらの知見を活かして、アップロードした画像の、取得時の画像サイズを動的に変更するための、JavaScriptコードを作成してみました。

Blogger:JavaScript:投稿に付与されたラベルを取得する

イントロダクション

Google のブログサービス「Blogger」にて、投稿に付与されたラベルの一覧を取得して、JavaScript で処理をしたい場合ってありますよね。

それを実現する方法はいくつかあります(*1)が、今回は投稿に付与されているラベルの一覧を動的に取得する方法を実装してみます。

*1:

• 投稿に付与されているラベルを取得（今回の方法）
• Blogger のテンプレートの HTML のレイアウトデータから取得
• Feed から取得

など。

Blogger:コメント入力欄を初期状態では非表示にしておき、「コメントを投稿」をクリックしたら表示するようにする(改良版)

イントロダクション

以前、Google のブログサービス「Blogger」のコメント欄を初期状態では非表示にしておき、「コメントを投稿」をクリックしたら表示するようにしてみました。

Blogger:コメント入力欄を初期状態では非表示にしておき、「コメントを投稿」をクリックしたら表示するようにする
http://upa-pc.blogspot.com/2014/05/blogger_19.html
Dr.ウーパのコンピュータ備忘録

前回は、Blogger のテンプレートの HTML を 2 箇所変更、CSS を追加するという合計 3 つの作業が必要でした。

特に、Blogger のテンプレートの HTML を編集する作業は、危険を伴う作業です。
そこで、今回はBlogger のテンプレートの HTML を編集することなく、HTML/JavaScript ガジェットにコードを追加するだけ（別途、CSSの追加は必要）で、「コメント入力欄を初期状態では非表示にしておき、「「コメントを投稿」をクリックしたら表示する」機能を実現できるようにしてみました。

Blogger:人気の投稿の表示期間をクリックで切り替え(改良版,画像の遅延読み込み)

イントロダクション

以前、Google のブログサービス「Blogger」にて、人気の投稿の表示期間（全期間, 過去 30 日間, 過去 7 日間）を切り替えられる仕組みを作ってみました。

Blogger:人気の投稿の表示期間をクリックで切り替え(改良版)
http://upa-pc.blogspot.com/2015/02/blogger-popular-post-change-advance.html
Dr.ウーパのコンピュータ備忘録

それを実際に、このブログの人気の投稿として運用しているのですが、少し気になっている部分がありました。

それは、”見えていない”人気の投稿の期間の分まで、ページの読み込み時に投稿のサムネイル画像が読み込まれるという点です。


読み込み時の負荷を減らしたいという点では、”見えていない”人気の投稿の期間の投稿のサムネイル画像は、実際に見えるようになるときに読み込みたいものです。


そこで、今回は、前回作成した JavaScript コードと、Blogger のテンプレートの HTML に手を加えることで、”見えていない”人気の投稿の期間の投稿のサムネイル画像を、実際に見えるようになるときに読み込むように改良します。

JavaScript:月・日・曜日から、年を探索する

イントロダクション

時間が経ってから見ることを考慮していない書類やチラシなどでは、イベントの日付が月・日・曜日でしか書かれていないことがあります。

そのため、今年の話かと思ったら、実は数年前の出来事だった！ということがおこり得ます。


楽しみにしていたイベントが、実は数年前に終わっていたとなると、その落胆はとても大きいです。

そこで、月・日・曜日から、年を探索するプログラムを JavaScript で書いてみました。

Blogger:JavaScript:ある日付（年・月）より前の投稿だけ、特定のスクリプトを実行したい

イントロダクション

Google のブログサービス「Blogger」にて、投稿を公開した日付をもとに、特定のスクリプトを実行するかどうかを決定したい場合があります。

今回は、特定の年・月よりも前の投稿の場合だけ、任意のスクリプトを実行する方法について説明します。

Blogger:投稿の投稿日時を、JavaScriptで取得 (data:post.timestampISO8601 タグ編)

イントロダクション

Google のブログサービス「Blogger」にて、記事を公開した日付をもとに、何らかの処理を行いたいときってありますよね。


投稿を公開した日付を取得するにはいろいろな方法があります。

Blogger:投稿の公開日を取得する方法
http://upa-pc.blogspot.com/2015/03/blogger-get-published-date.html


今回は、Blogger のテンプレート用のタグ <data:post.timestampISO8601/> の値を取得する方法について考えました。

Blogger:投稿の投稿年・月を、JavaScriptで取得 (URL編)

イントロダクション

Google のブログサービス「Blogger」にて、記事を公開した日付をもとに、何らかの処理を行いたいときってありますよね。


投稿を公開した日付を取得するにはいろいろな方法があります。

Blogger:投稿の公開日を取得する方法
http://upa-pc.blogspot.com/2015/03/blogger-get-published-date.html


今回は、Blogger の投稿の URL に含まれる投稿年・月を JavaScript で取得する方法について考えました。

JavaScript:iframe:外部のページを埋め込むのではなく、HTMLをそのまま埋め込む、第３の可能性:独自のデータ属性を使用する

イントロダクション

HTML の iframe タグを使用して、外部のページではなく、コンテンツそのものを埋め込む方法として、

(1) srcdoc 属性に対応していない場合のみ、JavaScript で動的に iframe に HTML 文書を追加する
(2) すべてのケースにおいて、JavaScript で動的に iframe に HTML 文書を生成する

という方法があることを、以下のページで解説しました。

JavaScript:iframe:外部のページを埋め込むのではなく、HTMLをそのまま埋め込みたい
http://upa-pc.blogspot.com/2015/03/javascript-iframe-srcdoc.html
Dr.ウーパのコンピュータ備忘録

今回は、それら以外の、第３の方法を考えてみました。
それは、独自のデータ属性を定義して、そのデータ属性の値を用いて、JavaScript で動的に iframe に HTML 文書を生成する方法です。

Blogger:JavaScript:新着情報を表示するガジェットを作成(6)-記事の投稿日を追加

イントロダクション

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

前回：
Blogger:JavaScript:新着情報を表示するガジェットを作成(5)-サムネイル画像を追加
http://upa-pc.blogspot.com/2015/03/blogger-new-post-list-gadget-javascript-5.html

今回は、記事の投稿日を新着記事一覧へ追加します。