前回、表示しているページの種別（URLからの）で表示の出し分けを行いましたが、今回はBloggerでの表示について学習をしたいと思います。
基本的にxmlを記述してますが、前回分岐判定を行ったそれぞれの場所にHTMLを記述すると、そのまま表示する事ができます。
ただ、機能を使った表示の基本を今回は解説してみますね。
表示タイプは２種類で考える
Bloggerだけでなく、Wordpressのテーマを自作する時などでも同じ考え方ですが、
ブログ・サイトを利用する場合、「ブログ記事の一覧表示」と「ブログ単体記事の表示」の２種類を考えましょう。
事前準備
ソースを準備する前に、記事と固定ページをいくつか作って公開しておきましょう。
それぞれリスト表示が分かりやすいように、２ページ以上ずつ用意するのがいいでしょう。
下記のサンプルを利用するには、
記事ページに、2023年1月1日を公開日に設置し
固定ページに、aaというタイトル名にすることで、表示対象になります。
あと、記事の内容に「記事1」という文字を入れて、「hoge」というラベルを付けておくと、それぞれの検索結果に表示されるようになりますよ。
※ページ名や公開日などは、適宜変更してサンプルソースをお使いください。
サンプルソース（通常版）
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html
b:version='2'
class='v2'
expr:dir='data:blog.languageDirection'
expr:lang='data:blog.locale'
xmlns='http://www.w3.org/1999/xhtml'
xmlns:b='http://www.google.com/2005/gml/b'
xmlns:data='http://www.google.com/2005/gml/data'
xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
<b:skin/>
</head>
<body>
<b:section id='test'/>
<div style='display:flex;gap:10px;'>
<a href='/'>Index</a>
<a href='/2023/01/1.html'>記事</a>
<a href='/p/aa;>固定ページ</a>
<a href='/search?q=記事1'>検索</a>
<a href='/search/label/hoge'>ラベル検索</a>
<a href='/blog/'>ブログ</a>
<a href='/hoge'>エラー</a>
</div>
<b:section id='メイン' class='main'>
<b:widget id='Blog1' locked='true' title='ブログの投稿' type='Blog' visible='true' version='2'>
<b:includable id='main'>
<b:switch var='data:blog.pageType'>
<b:case value='index'/>
<b:if cond='data:blog.searchQuery'>
# 検索結果
<b:loop var='post' values='data:posts'>
<b:include name='articles' />
</b:loop>
<b:elseif cond='data:blog.searchLabel'/>
# ラベル検索結果
<b:loop var='post' values='data:posts'>
<b:include name='articles' />
</b:loop>
<b:else/>
# 記事一覧(index)
<b:loop var='post' values='data:posts'>
<b:include name='articles' />
</b:loop>
</b:if>
<b:case value='item'/>
記事
<b:loop var='post' values='data:posts'>
<b:include name='article' />
</b:loop>
<b:case value='static_page'/>
固定ページ
<b:loop var='post' values='data:posts'>
<b:include name='article' />
</b:loop>
<!-- <b:case value='error_page'/>
エラーページ -->
<b:default/>
その他 : <data:blog.pageType/>
<b:loop var='post' values='data:blogPosts'>
<b:include name='articles' />
</b:loop>
</b:switch>
</b:includable>
<b:includable id='articles'>
<h1>記事一覧 : <data:post.title /></h1>
</b:includable>
<b:includable id='article'>
<h2>記事 : <data:post.title /></h2>
</b:includable>
</b:widget>
</b:section>
</body>
</html>
解説
前回の分岐に少し手を加えて、基本的な構造体を作っています。
GoogleBloggerの基本的な書き方として、
section > widget > includable
この構造を作り、その中で処理を実行します。
前回のコードをこの中に設置して、それぞれ、表示用のb:includableを呼び出しています。
※b:includableは、widgetの中に複数書いても大丈夫です。
ソースを順番に読み解いてもらうと分かると思いますが、
<b:include name='articles' />
このarticlesというname値は、下の方にある、b:includableのid値を呼び出す仕組みになっています。
<b:includable id='articles'>
今回の２タイプはidを持ったincludableタグ２つがソレにあたります。
b:loopというタグでデータを検索して、検索結果数分includeが実行されるという構成ですね。
別の方法
今回のソースコードで気になる点として、記事ページの一覧ページが無いんですよ。
このやり方だとどうしても固定ページの一覧は取得できないみたいですが、さらに条件があり、
data:postsで取得できる情報は、そのときのpageTypeのデータしか取得できないようです。
ページの中のヘッダナビゲーションメニューの中にページ一覧をリスト表示したいような場合はどうすればいいんでしょう？
GoogleBloggerを解説しているブログページなどはたくさん見つけたのですが、どれも上記で紹介したサンプルコードの細かな解説ばかりだったので、
上記に対しては、他のブログを参考にしてもらったほうがいいです。
今回の本題はここからで、ユゲ式での柔軟なデータの取得方法を伝授したいと思います。
考え方は、凄くシンプルで、GoogleBloggerは、ブログに必須のRSS対応の為に、Feed機能というのがデフォルトで備わっています。
そのFeed機能を使って、それぞれの情報を取得し、ページ内で利用してしまおうという風にしてみたいと思います。
そうすることで、かなり柔軟性の高いテンプレートが作れるんですね。
サンプルコード(FEED版)
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html
b:version='2'
class='v2'
expr:dir='data:blog.languageDirection'
expr:lang='data:blog.locale'
xmlns='http://www.w3.org/1999/xhtml'
xmlns:b='http://www.google.com/2005/gml/b'
xmlns:data='http://www.google.com/2005/gml/data'
xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
<b:skin/>
<script>/*<![CDATA[*/
function feed(url){
const s = document.createElement('script')
s.src = url
document.body.appendChild(s)
}
function article_lists(data){
const root = document.getElementById('article_lists')
view(root , data)
}
function static_lists(data){
const root = document.getElementById('static_lists')
view(root , data)
}
function view(root , data){
if(!data){return}
console.log(data)
const lists = data.feed.entry
for(const list of lists){
console.log(list)
const link = list.link.find(e => e.rel === 'alternate')
const html = `<li><a href='${link.href}'>${list.title.$t}</a></li>`
root.insertAdjacentHTML('beforeend' , html)
}
}
/*]]>*/</script>
</head>
<body>
<div style='display:flex;gap:10px;'>
<a href='/'>Index</a>
<a href='/search?q=記事1'>検索</a>
<a href='/search/label/hoge'>ラベル検索</a>
<a href='/blog/'>ブログ</a>
<a href='/hoge'>エラー</a>
</div>
<b:section id='メイン' class='main'>
<b:widget id='Blog1' locked='true' title='ブログの投稿' type='Blog' visible='true' version='2'>
<b:includable id='main'>
<b:switch var='data:blog.pageType'>
<b:case value='index'/>
<b:if cond='data:blog.searchQuery'>
# 検索結果
<b:loop var='post' values='data:posts'>
<b:include name='articles' />
</b:loop>
<b:elseif cond='data:blog.searchLabel'/>
# ラベル検索結果
<b:loop var='post' values='data:posts'>
<b:include name='articles' />
</b:loop>
<b:else/>
<h2>記事一覧(index)</h2>
<ul id='article_lists'>
<b:include name='js_article_lists' />
</ul>
<h2>固定ページ一覧</h2>
<ul id='static_lists'>
<b:include name='js_static_lists' />
</ul>
</b:if>
<b:case value='item'/>
記事
<b:loop var='post' values='data:posts'>
<b:include name='article' />
</b:loop>
<b:case value='static_page'/>
固定ページ
<b:loop var='post' values='data:posts'>
<b:include name='article' />
</b:loop>
<b:default/>
その他 : <data:blog.pageType/>
<b:loop var='post' values='data:blogPosts'>
<b:include name='articles' />
</b:loop>
</b:switch>
</b:includable>
<b:includable id='articles'>
<li><data:post.title /></li>
</b:includable>
<b:includable id='article'>
<h2>記事 : <data:post.title /></h2>
</b:includable>
<b:includable id='js_article_lists'>
<script>/*<![CDATA[*/
feed('/feeds/posts/default?alt=json&max-results=10&callback=article_lists')
/*]]>*/</script>
</b:includable>
<b:includable id='js_static_lists'>
<script>/*<![CDATA[*/
feed('/feeds/pages/default?alt=json&max-results=10&callback=static_lists')
/*]]>*/</script>
</b:includable>
</b:widget>
</b:section>
</body>
</html>
記事と固定ページの一覧を取得して、リンクをつけてみたので、クリックをすると、それぞれのページがちゃんと表示されているでしょう。
Feedを使ってリストを取得する方法であれば、Bloggerに入っている大抵の情報が取得できるので、便利に使えそうです。
でも、今回紹介した２つのサンプルコード、それぞれメリットとデメリットがあるので、どちらを使うかは内容をよく把握してから決めましょう。
メリットとデメリット
通常版を使うメリット
・サーバーサイドレンダリング(SSR)で実行されるため、読み込みから表示までの速度が早い
・基本的なBloggerの記述方法なので、サンプルも多い
通常版を使うデメリット
・欲しい情報が取得出来ない場合がある。（indexで固定ページ一覧の取得など）
・記述が、独特なXMLなのでわかりにくい
・urlがブログ記事(/y/m/*.html)、固定ページ(/p/*.html)、検索(/search/**)の３パターンでしか使えない。
FEED版を使うメリット
・Javascriptで記述できてコーディングしやすい（xmlと違いオブジェクト指向的な書き方ができる）
・FEEDで取得できる情報が、好きなタイミングで取得できるので、汎用性が高い
・Bloggerの設定されていないURL階層で、好きなリスト表示などができるので、/blogでブログ一覧や、/infoで、infoラベルの一覧などの様なホームページの階層として使うことができる。
FEED版を使うデメリット
・基本的にページの読み込み + FEEDの読み込みになるので、ワンテンポ遅れた表示になってしまう。
・サーバーサイドレンダリング(SSR)ではないので、ページソースを表示した際に、FEED取得する内容が表示されない。
あとがき
いかがでしたか？
今回のサンプルコードなどを使って、自分で色々と「こんな事できるかな？」的な改造をしてみると、GoogleBloggerの癖や特性などが理解できてくると思います。
残念ながら、内部のデータベースの仕様などはどうやら公開されていないようなので、自分で色々と検証をして見つけ出す必要もありそうですが、
通常版サンプルと、FEED版サンプルをうまい具合に両立させて使うのがいいのではないかと思いました。
今回のシリーズでは、ブログ・サイトというよりも、企業などでも使えるレベルのホームページを作れるようなテンプレートを目指しているので、まずは資料の通りに学習を進めてもらって、最後まで行った後で、ご自身でやりたい内容があれば、改造して工夫を凝らすのがいいかと思います。
0 件のコメント:
コメントを投稿