Google Code PrettifyからPrism.jsへ移行（Blogger）

Google Code Prettifyは、2020年4月22日にメンテされていないのでアーカイブしますというメッセージが残され、更新が止まっている。また、プログラムコードではないことを指すlanguate-noneの設定ができないので、何でもかんでも色付けされてしまうこともあり、Prism.jsを利用することにした。

Search ConsoleがBloggerのm=0付きのページでエラーを出す件の対応

Google Search Consoleがモバイルフレンドリーではないというエラーを送ってきた。

• クリック可能な要素同士が近すぎます
• テキストが小さすぎて読めません
• ビューポートが「デバイスの幅」に収まるよう設定されていません

対象となっているURLは、末尾に「&m=0」が付いている、つまりPC用のページを明示してアクセスしている。そのため、モバイルユーザビリティのテストでは、当然ながら上記のエラーが出る。

BloggerのGoogle Spreadsheetの表を貼り付ける

Bloggerで表を作ろうとしたら大変。簡単な方法としては、Google Spreadsheetで表を作って貼り付ければよいのだが、表がいい感じで表示されないので、諦めていた。

調整する方法を見つけたのでメモ。

表を貼り付けた後、HTMLビューにしてTableタグに含まれる「table-layout: fixed; width: 0px;」を「table-layout: auto; width: 100%;」に置き換える。

「table-layout」を「auto」に設定することで、デバイスの画面サイズに対応したサイズで表示され、「width」を「100%」に設定することで、表の横幅が画面の横幅いっぱいに表示されるようになる。

参考）https://dendensoken.hankeidou.jp/2021/05/blogger-table.html

2022-01-10追記（2022-02-14 tdタグを1行にまとめるコマンドを追加）

ここで作った表のHTMLが長い原因である、tdタグ内のdata-sheets-numberformat属性やdata-sheets-value属性、表内の各項目に付いているspanタグを削除すると見た目がスッキリする。tdタグのstyle属性はほぼすべての項目で同じなので、削除しても良さそうだが、微妙に違うセルがあるので残しておく。

自分用のメモだが、vimで行う場合は下記（1行目はHTMLで有ることを宣言、2行目はタグの終わりで改行を入れる、3行目はファイル全体を選択、4行目はインデントを整える、5行目はdata-sheets-*属性を削除、6行目はspanタグを削除、7行目はtdタグを1行にまとめる）

:set filetype=html     
:%s/>/>^M/gc 
ggVG
=
:%s/data-sheets-.\{-}\%(}"\)\@=}" //gc 
:%s/<span style="[^"]\{-}">[\s\n]*\s*\(.\{-}\)[\s\n]*\s*<\/span>/\1/gc
:%s/<td>\n\s*\(.*\)\%(<\/td>\)/<td>\1<\/td>/gc 

メモ

置換先の設定を「&」にしてやると、一致した文字列全体に置き換えてくれる。

置き換え時のオプションで「n」を指定すると、実際の置換はせずに、置換される個数を表示してくれる。

例

:%s/data-sheets-.\{-}\%(}"\)\@=}" /&/gn 

改行コードは\n。「\_.」で改行コードを含む任意の一文字を表せる。

「\{-}」は直前の文字の0個以上の最短マッチを表す

Bloggerをホームページ風にする

Bloggerは基本的にはブログを書くためのものなので、トップページからブログになってしまう。
設定を少し変えるとブログ仕様から、ホームページ仕様に変更できる。

Bloggerをホームページ風にする手順

1. ホームページを「ページ」で作成（ページのタイトルに一工夫入れるとより良い）
2. トップディレクトリを、作成したホームページにリダイレクト
3. ブログにアクセスするためのナビゲーションを作成する
4. robots.txtの対応

Bloggerの添付画像の削除

Bloggerの添付データはGoogle Driveと共有されるので、かなりの容量を置けるが、いらないものを放置するといつかは空き容量がなくなるので削除したいところ。

画像は「アルバムアーカイブ」に保存されているので、そこから削除できる。
アルバムアーカイブ：https://get.google.com/albumarchive

ターミナル風のpreタグ

preタグ内をターミナル風に表示したかったのでCSSを作った。

Bloggerの場合は「テーマ」→「HTMLで編集」してHEADタグ内に追加すればOK。

MovableTypeからBloggerへ（その２）

先日、MovableTypeからBloggerに移行する記事を書いたが、その中でいくつか問題を発見したので、変換ツールのコードを変更した。

問題①

時刻がずれる。（9時間進んでしまう）

これは、元のスクリプトがローカル時刻で出力するにも関わらず、UTCであると宣言しているため。日本時間（UTC+9）を考慮するように変更。

問題②

MovableTypeで記事を作成したときのフォーマットによっては、改行が無駄に入ってしまう。

網羅していないフォーマット種別はあるが、分かる範囲で改行追加の有無を判断するようにした。

code prettifyをBloggerで使う調整

Code prettifyをBloggerで使うのに、少し調整したのでメモ。

Movable TypeからBloggerへの移行

ふと思い立ち、Movable TypeからBloggerにデータを移行させてみた。

Google Codeにあったツールを使えば簡単に移行できるが、ハマったところがあったので、コードを少し改変した。
google-blog-converters-appengine
https://code.google.com/archive/p/google-blog-converters-appengine/

Bloggerのpagination

Bloggerをいじっている。
デフォルトのものや、Vaster2も含めてPaginationが無いということで、いろいろと記事があったので、それを真似してみた。
また、ラベルのページだとうまくいかないので、HTMLを治すべしというコメントも見つけた。

試行錯誤でやっているので、間違えているかもしれないが、今わかっている範囲でメモ。

なお、一般公開していないと/feeds/posts/summary へのアクセスができないため、paginationが表示されない。