2018

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

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

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

  • 日記の設定を日記にメモする、更なる自動化の模索
  • 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は素晴らしい。寄附しちゃった。


Macの音声入力で日記を書くテスト

流行に乗っかって、この文章マックの音声入力で書いてみている。新しい行新しい行

この文章ハ3回目。久々に変なシャベリカタをしていてキモチ悪い。人間サマが、マックに合わせて、喋り方を変えてやっている。なんて親切だ。

音声入力でプログラムを書くには、それなりの設定とそれなりの訓練が必要そう。ダイタイにして、日本語と英語をごちゃまぜにしゃべっているのはよくない。いふへ留守番。ほらね、まくいかない。

あと、自分の妄想お口に出してイルのが、かなり恥ずかしい。うまく変換されないので、さらに文章が恥ずかしい。

シャベルのが疲れてきた。うん、照れるったほうが早いような気がする。そんなに発音悪いのかなあ。それともマイクが遠いのかな。それともしゃべる速度がマックに会っていないのかな。マックがカタカナになるの気持ち悪い。マクドと区別がつかない。

文章を書きながら、書き直したいなと何度も思うのに、音声入力を止めたくないからどんどんおかしな文章が出来上がっていく。Backspaceがほしい。あるのかな。なんでバックスペースちゃんと英語になるのはてな?新しい行

酸素が足りない。喋るの飽きた。おしまい。おしマイケル。