緊急事態発生

何が起こったか

BloggerLaboさんの SMARTと言うテンプレートを魔改造してみようといじくり倒して原因が判明できないぐらいにいじくり倒してしまったので元に戻れない事態になってしまいました。

SMARTをそのまま使えば何も問題ないのですが、テンプレートにも書いてあるようにカスタマイズ推奨という事だったので、いじくり倒しすぎてしまいました。
オリジナルのXMLはあるんですが自分がやったことを元に戻せないという致命的な問題が起こってしまい、このままではラチが明かない状態になったのでもう少し見直すか、新規に行くかをYoutubeの動画を見ながら考えていたわけです。

Blogger API v3も試してみました。これがあれば大体のことはJavaScriptやjQueryでできるようにはなると思うのですが、テンプレートのバージョンの違いで色々と混在しているのがダメなのではなかろうかとずっと悩んでいたわけです。

何をしたか

新規で行くとすると、カラの最小限の事が書かれているテンプレートが必要になります。ひとまず DEV Communityの Blogger Template Boilerplate / Skeleton Codeから雛形となるカラのテンプレートをいただきまして、htmlを編集から貼り付けて保存すると、必要な項目がズラッと追加されます。

この状態から、今までしたきたものを移植していくわけですが、そもそもの構造が違うので追加したり手直ししたりを繰り返し、ブラウザで確認してまた手直ししたりと言う感じで進めてようやく今のこの状態までこぎつけました。

内容的にはこれまでの投稿に準じています。まだ移植していない所、直すべき所とか色々残って入るものの基本的な所まではできたような気がします。コメント部分のcssを何もしてませんが。

どんな魔改造をしたか

  1. ２カラムから１カラムに
  2. サイドバーは物置に
  3. SNSのシェアボタン改造。スクリプト新設、ボタン新設
  4. テンプレート内の不要なラッパー用のDivは削除
  5. CSSは完全新設
  6. ページトップボタン削除、スクリプト新設、ボタン新設 → 思案中
  7. indexページをfull-bleed化取り止め Breakout化へ
  8. font awesomeのアイコンを利用しているiタグを極力削除して、疑似要素で変更
  9. modern-normalize.css 導入
  10. jQuery3x導入
  11. javascript読み込み時にページが設定されるのを待つプログレスバー新設
    同期するローダーも追加
  12. モバイルとかで分けない完全レスポンシブ化(予定・動作未確認)
  13. 最新の投稿など、javascriptでdocument.writeを使っているものを削除して新設
  14. TOC、インターセクションオブザーバーを利用した見出し位置がわかるスクリプト新設。ただし表示部分については思案中
  15. cssフレームワークから、レスポンシブテーブル導入 → 変更予定
  16. 脚注機能導入、スクリプトは自分が昔作ったやつを導入 →半角（（））で囲むだけ
  17. ()で囲んだ中のテキストはcssで装飾できるように
  18. 記事でのタグ機能(サーチのクエリとして)を実装
  19. css gridによるスタイルで、記事内の要素幅をクラス一つ加えるだけで変更可能に
  20. Youtubeの動画アドレスをdivで囲んでクラスを付けるだけで埋め込み。かつ、サムネイル表示なのでページの読み込みが遅くならない仕様に

ここからはTOCなどを上手く用いて番号とかそのあたりで何をしているのかを見ていただけると作った甲斐があります。

解説 1、2、7、19

どうせスマホで見るんなら1カラムで良いんじゃないのと思っているわけですが、それだけだとPCがあまりにも殺風景なので、7でもあるようにBreakoutというレイアウトを採用しています。
ここにあるような記事は全てがcontent幅に入りますが、classを追加することによって要素の幅をpopout、feature、fullと4段階に広げられます。fullは1200px幅です。と、言いながらスマホで見たら100%になるわけで、スマホ以外の楽しみということで。

サイドバーは右上のバーガーメニューで開閉します。主に、アーカイブとかそのあたりのウィジェットを入れている感じです。Bloggerの管理パネルを見ると閲覧数とかが見れるので、もしかするとそのあたりから人気記事をapiとかを使って拾うことができるのかもしれません。
ここらは色々と思案中。popular postってのもあるわけですが。

解説 3

シェアボタンはわかる範囲で、押せばシェアできるような感じに新設しました。twitterとかはアドレスをコピペしたらいいわけですが、ちょっと読んでシェアしてやろうという人がいた場合はそれらの手間を軽減できるような感じで。

解説 4、8

これはもう単に自分がテンプレートを見ながらその仕組がわかりやすいようにというだけです。不要なものはなるべく取り除いた上でいじらないとわからなくなってしまうので。CSSだと\f068とか余計わかりませんけども笑

解説 5

テンプレートを新規で作っているのですからCSSももちろん新設するしかありません。まだ手をつけていない所もあります。

解説 6

トップへ戻るボタンは色々な方法が考えられます。結局何をするにしてもクリック/タップしたらトップへ戻るだけですから特別何か難しいことはありません。そこらを何かしらアイデアはないものかと考え中です。

解説 9、10

modern-normalize.cssが良いのかどうかは知りませんが、目についたので入れてみました。ノーマライズするだけなので別にいらないと言えばそうですが、面倒なので何かしらでリセットは入れておいた方が良いかと言うことから入れてます。

jQueryは、脱jQueryとかでJavaScriptで書く人も増えたと思いますが別に便利なんで使えばいいじゃないと。そらページは速く動作する方が良いに決まってますが、一旦jQueryで動作するものを書いて、AIに速く・効率的にとリファクタリングしてもらったらJavaScriptに書き換えるものもあればjQueryのままのものもあります。
やろうとしていることと、規模の問題だけではなかろうかと思ったりも。

古いテンプレートではjQueryのバージョンも1.xとかなので、3.xを入れました。

解説 11

一部、記事内のテキストをいじくったりしていますので、そのままでもすぐに見れますが一応ページのロードを待ってから見てもらおうと簡単なローダーを入れました。ブログレスバーでも進行がわかります。
何かしらスクリプトにエラーがあった場合でもこのバーの進み具合でやらかしてるなとわかったりもします笑

解説 12

Bloggerにはモバイルモードというのがかつてあったらしいです((アドレス末尾に?m=1とかつくテンプレートを作っているようなサイトみたいの)) が、今でも動作はするもののもうそれらは廃止されているらしいので完全レスポンシブで。
だいたいの人がスマホで見るでしょうから、PCにもあるブラウザのアプリで見てるわけで殆どがそのまま見れることができます。

多くの場合Chrome系のブラウザなら最新のcssとかにも対応しているので問題ないもののFirefox関係のブラウザでは、例えば要素:has(:not(xxx))みたいのに対応してなかったりでとても、とても面倒くさいです。JavaScriptで強引にカバーはできるもののいちいち書かないとアレなものはとても面倒くさい。なんせdocument.querySelectAllで使おうものならエラー吐きますので。

解説 13

古いテンプレートのJavaScriptにはdocument.writeが多用されていたりします。これらを今どきのブラウザは書き換えろと言って来ますので直そうとするわけですが、何をしてるのかをまず読み解かないと書き換えられません。あわせて、minifyしてあったりしてとてもとても面倒くさいです。
やっていることがわかれば1から作った方が早いぐらいです。それらがたくさん使われていると色々大変なので、全部取り除き新設しました。Bloggerが提供していて自動的に読まれるものはわかりません。

解説 14

単順にTOC(Table Of Contents)を作るだけなら見出しを引っ張ってくるだけなので拾った順番に必要な所に書き出していくだけなんですが、それだけではアレなのでインターセクションオブザーバー(InterSectionObserver)と言うのを使ってどこらへんを読んでいるのかがわかるようになっています。

該当のセクションに表示域が入っているかどうかを監視するやつです。これがあった所でどうなるというものではないのですが演出の一つとして。

また、TOCは狭い画面では折りたたまれていて、広い画面では開いたままになります。

解説 16、17

脚注機能を導入しました。脚注は二重半角カッコで囲まれたテキストが脚注として文中に残り、テキストは記事のフッター部に移動されます。それぞれにリンクで往来できるようになっています。

1重の半角カッコ書きのテキストは装飾できるように.bracketsクラスが入ります。色を変えたり大きさを変えたり、アイコンを付けたり工夫次第でできるようになっています。

解説 18

記事中にTwitterのように、半角スペースを最低でも最後に入れて#を先頭につけるとタグ化します。これはBloggerのラベルになるわけではなく、search機能のクエリ(キーワード)となります。
その記事中のタグをクリックすると#以降のテキストがクエリとして渡されて検索することができます。

この上の段落が変換されないのはhtmlモードでpタグにclass="noCheck"と除外するクラスを付けているためです。もっと簡単なのはdivで囲んだ中のpは対象になりませんので簡単に除外することができます。


<div>
  <p>何かしらのテキストで(例えばこうする)</p>
</div>
<p class="noCheck">このdivの外にあるものは対象になるので、避ける場合は.noCheckを加える</p>

この例ではpreタグに囲まれているので本来はこれも除外されますが、例として書いてあります。

解説 20

htmlモードでの作業になりますが、Youtubeのアドレスをdivで囲んでclassに.ytpと入れるとその場にYoutubeのサムネイルが入ります。そのサムネイルをクリックすることで同じ場所にプレーヤーが埋め込まれ動画を再生することができます。

画像を表示しているだけなので動画プレーヤーそのものを読み込むよりは比較的速くページが表示されるだろうと思います。

今までの所のまとめ

このような感じで今の所は基本的なところ辺りまではできたかなぁと言う感じです。これを普段使っている 本サイトには適用しませんが((こちらも無駄に色々と仕込んであるため))、いつか配布までできるといいなぁと。

いうて、中はごちゃごちゃなのでカスタマイズ向けではないですけども、CSSぐらいは色々とできそうな気はします。

まだ手つかずの所も多数あって、どこまでできるか、また配布までこぎつけられるか、モチベーションが続くかはわかりませんけども、まずはここまでこぎつけられた記念にこの記事を残しておく次第です。