2018

しつこいけれど、また自動化の話

以前書いたように、この日記はMarkdown形式のテキストファイルをBitBucketのレポジトリにPUSHすると、CIサービスであるWerckerがWebhookされ、Hugoによってhtmlファイルを生成して、そのhtmlファイルをGitHub PagesにPUSHしている。

その、日記用Markdownファイルを生成するスクリプトはAutomatorで書いた。これから、そのMarkdownファイル(拡張子は.md)を右クリックして「サービス」メニューからgitコミットするスクリプトのテストを行う。

まずファイルをaddして、それからcommit。gitコマンド的には、いちどaddされているファイルをもう一回addしても問題ないようなので、何度でも実行可能。

cd {日記gitのルートディレクトリ}

currentDate=`date +%FT%T%z | sed -e 's/\(.\{22\}\)/\1:/'`
for f in "$@"
do
	ext=`echo ${f##*.} | sed "y/ABCDEFGHIJKLMNOPQRSTUVWXYZ/abcdefghijklmnopqrstuvwxyz/"`
	if [ $ext = "md" -a ! -d $f ]; then
		sed -i '' -e 's/^date: "[^"]*"$/date: "'$currentDate'"/g' $f
    /usr/bin/git add $f
	fi
done

/usr/bin/git commit -m '[add|mod] dayly post'

日記の中の日付(日記の更新日)はcommitした瞬間の日付に上書きしている。日付フォーマットがdateコマンドのままだとおかしくなる(タイムゾーン「+0900」ではダメで、「+09:00」だとOK)ので強引に変更している、など。強引でよろしくない感じのスクリプトだが、まあとりあえず動く。


日記の自動化の続きとかいろいろ

しばらくは日記を書きながら、ついでにアップロードの実験をしているので謎のエントリーが増えると思う。

日記に書きたいことメモ(順不同):

  • 日記の設定を日記にメモする、更なる自動化の模索
  • Instagramに対していいたいこと、または収益化について思うこと
  • ニコニコはどうなるのかの妄想
  • 最近の国会と、政治ってそもそもそういうことだったっけみたいな浅い話
  • フロントエンド周りの技術について(これは定期的に書こうと思わないとダメなやつだ)
  • 甥っ子が可愛い、または甥っ子を用いたスクワットについて
  • 夜のご飯が最適化されないって文明としてどうよ
  • アニメ
  • ゲーム
  • どうぶつの森奴隷
  • 公共空間のトイレの話とジンクスについて
  • ラジオのある文化的な暮らし
  • Franzに色々させてみたい、させてみる、なんならばFranzじゃなくてもいい

flickrはイケているか

このボタンを押してください

日記のサムネイルにflickrの画像は使えないだろうか。という実験。

肝心の写真がイケていないというオチ、ではなくて。

試しにflickrのEmbedスクリプトを出力して埋め込んでみたのだが。読み込み時の画面幅に合わせてスタイルをゴニョゴニョしちゃうタイプのスクリプトになっているので、表示後の画面幅変更に対応できていない。この微妙にレスポンシブじゃない考え方はどこかではメジャーなのかな、海外のテンプレで他にもみた気がする。……良くない。

というか、flickrはきっと思想的には埋め込まれる前提じゃないんだな。狙ってやっているなら潔いようにも思うが、なんとなくだが単に周回遅れ(それも2周くらい)な気がする。この間も買収云々があったりと、flickrはちっとも「イケてる」感じのするサービスではなくなった。とはいえInstagramだって親会社はFacebookになってしまったし、APIの締め付けがキツいしで、操作性云々とは違うところで微妙。

写真共有サービスなんて、儲からないからこんな感じなのかな。使えているうちはいいけれども、どんなサービスであっても、10年後も今とおんなじサービス形態で生き残ってくれる保証はないという201x年。未来はまだか。

Hugoのshortcodesをちまちま増やす

今日もHugoの話をちょっとメモしておくと、上記のflickrもそうだが、shortcodeをいくつか自作している。といっても、PCで埋め込みたいタグを書いたものと、AMP対応のためにそのタグを書き直したもの、という簡単な出し分けをしているだけであるが。

現時点では

  • flickr
  • amazon
  • img
  • iframe

の4つができた。 たとえば <img> タグをそのまま書くのではなく、

< img src="***" width="160" height="120" alt="テスト" >
↓
{{< img src="***" width="160" height="120" alt="テスト" >}}

としておく。

これをPCでは、

<img
src="{{ .Get "src" }}"
alt="{{ .Get "alt" }}"
{{ with (.Get "width") }} width="{{ . }}"{{ end }}
{{ with (.Get "height") }} height="{{ . }}"{{ end }}
/>

AMPでは、

<p>
<amp-img
src="{{ .Get "src" }}"
alt="{{ .Get "alt" }}"
{{ with (.Get "width") }} width="{{ . }}"{{ end }}
{{ with (.Get "height") }} height="{{ . }}"{{ end }}
layout="responsive"></amp-img>
</p>

てな感じに。至極簡単な置きかえを行うことで、なんとなくAMP対応ができる。

車輪を再発明している感は否めない。


Hugoで日記を書くための自動化

先日の日記に書いたように、BitBucketに日記をPUSHするとゴニョゴニョしてGitHub Pagesで公開されるという仕組みが完成した。

日記を一日分追加すると、その日の日記ページのHTMLができる。のみならず、トップページに直近5日分の日記が載っているのでそこも再生成。すると日記が一日分後ろに押し出されて、ページネーション(次のページ)があるのでその後ろのページ全部が再生成させる。また日記につけたタグから、そのタグのリストページも再生成される。結果、数百のファイルが再生成される。うわーお、無駄が多い。でもなぁ、日記を一日分ずつ読み込むのもちょっと馬鹿馬鹿しい。まあそれはともかく、自動的にhtmlは作れるようになった。

では次は日記を新規作成するところだ。コマンドラインから Hugo new ファイル名 でページのひな形が書き込まれたMarkdownファイルが完成する。これは楽チン……、と思いたいところだがもっと楽にしたい。

Automatorを使って、例えば以下のような感じのシェルスクリプトをアプリ化(というかアイコン化)して、ボタン一発で今日の日記を作ってエディタを開く。

cd 'Hugoの作業ディレクトリ'

# この例では年別にファイルを格納したいので、post/YYYYディレクトリを作成している
targetYear=`date +"%Y"`
mkdir -p $targetYear

# 日付からファイル名を生成する。この例では post/YYYY/YYYY-MM-DD.mfd
targetDate=`date +"%Y-%m-%d"`
targetFile="post/$targetYear/$targetDate.md"

# 当該ファイルがなければ新規作成
if [ ! -e "content/$targetFile" ]; then
  /usr/local/bin/hugo new $targetFile
fi

# この例ではアプリを指定せずにファイルを開く
open "content/$targetFile"

これで、日記を書くところまでアイコンクリック一回でだけで進められる。

本当は、日記を書き終えたあともcommitとpushをアイコンクリック一回でやりたいが、エラー処理とか連打時の動作とか考えるとちょっと面倒そうなので、いったんここまでとして、今日記を書いているこのファイルをこのあと手動でcommitしてpushすることにする。

……コミット時のメッセージが日本語だとうまく動かない?


GitHub Pagesにお引っ越し

WordPressでこの日記をリニューアルすると以前書いたが、色々と考えてみた結果GitHub Pagesに引っ越した。

というのも、CPUパワーがどうのとか考えてみるに、この日記に動的な部分なんぞほとんどないので静的HTMLジェネレータで十分じゃないかと思い至り。

しかもどんなツールで日記を書くとしても、今どきはMarkdown方式で書きたいわけで。Markdownが使えて、静的なHTMLが書き出せるものということで、Hugoを選択した。

現在、この日記のソースコードがあるBitBucketから、自動生成されたものだけをGitHubにpushする。という実験中。

うまくいったら、もう少し細かく手順をまとめるかも知れないし、まあググれば分かるかもしれないから書かないかも知れないし。

引っ越した理由のもう一つはサイトのSSL化を実現するため。前のサイトでもできたのだが、GitHub PagesはSSLの発行も自動化されているという至れり尽くせり。Let’s Encryptは素晴らしい。寄附しちゃった。