ことりこ Advent Calendar 2020っていうのをはじめてしまって、25日分の記事を書くことになって今いました。いや、書いたら楽しいかなって思って。
で、ここに書いてもよかったんだけど XFREEっていうフリーのウェブサーバサービスつかってて、ここにことりこのページを置いてます。このBloggerを使おうかと思ったのですが、ことりこ関係はそこに置いてあったのでそっちにしました。でも
- ぬくもりのある手打ちHTMLタグはきつい
- WordPressはちょっとオーバースペック
- PHPとMySQL使って一からブログサービス作るのもめんどい
ということで、
- 静的ファイルのみで
- HTMLを入力しなくてもよく
- 画像も簡単にはれる
- 内容と写真を簡単に探せる
っていうシステムを構築しました
静的ファイルのみ
これはJavascriptの生Ajaxを使いました。ライブラリとか使えば簡単なんだろうけど、極力使いたくないよねっていう気持ちがあり。
htmlファイルに渡されたパラメータをそのままgetしにいく、とても簡単な処理です。
HTML入力したくない
これはMarkdownを使用してます。Markdownが書かれたファイルをAJAXで読み込み、クライアント側でmarkedを使ってパースしてます。.mdファイルを作ってサーバにあげて、content.htmlとかいうやつの引数にファイル名を指定するだけで動的に内容が切り替わります。とても楽ちん
画像も簡単にはれる
Markdown使った時点でかなり楽。画像ファイルのアップロードだけがめんどくさいけど、基本ftpで同期するだけなので別に簡単。WinSCPで更新分だけアップロードを毎日くらいにやってました。
内容と写真を簡単に探せる
Googleスプレッドシートで25日間何を書くかを決めていくときに、ことりこが来てからの時系列で書いていこうと思いました。そして期間中の写真を検索するのが大変だったのだけど、Google Photosの検索は [ 2020 Jan 1 to 2020 Feb 1 ] みたいにするとその期間の画像が表示できます。これを使いました。
B列:タイトル
C列:書くこと
D列:開始日
E列:記事の中の期間（日）
F列:終了日
G列:空白期間
H,I列: 検索用に開始終了日付を英語の日付に変換
J列:Google Photosの検索用リンク（H,Iを入れてる）
画像はGoogle Photosから選んでzipでダウンロード後、Windows であればPowerShellでCreationTime でソートしつつ連番ファイルを作成し、Markdown方式の書式を生成してそれを.mdファイルに貼り付けます。あ、画像はでかいのでImageMagickで一括 resizeしてます。
PS AdventCalendar2020\17> ls
Directory: AdventCalendar2020\17
Mode LastWriteTime Length Name
---- ------------- ------ ----
-a---- 2020/12/08 9:13 872144 IMG_20190401_220849.jpg
-a---- 2020/12/08 9:13 220230 IMG_20190403_122335_184.jpg
-a---- 2020/12/08 9:13 1438779 IMG_20190411_061253.jpg
-a---- 2020/12/08 9:13 317585 IMG_20190424_153736.jpg
-a---- 2020/12/08 9:13 2019335 IMG_20190430_134724.jpg
-a---- 2020/12/08 9:13 820582 IMG_20190501_182402.jpg
-a---- 2020/12/08 9:13 780458 IMG_20190505_065904.jpg
-a---- 2020/12/08 9:13 533970 IMG_20190505_165644.jpg
-a---- 2020/12/08 9:13 2829998 IMG_20190511_110127.jpg
-a---- 2020/12/08 9:13 3456332 S0016203-ANIMATION.gif
-a---- 2020/12/08 9:13 408051 S0016229.jpg
-a---- 2020/12/08 9:13 3064052 S0017708-ANIMATION.gif
-a---- 2020/12/08 9:13 447847 S0025935.jpg
-a---- 2020/12/08 9:13 3803828 S0027762-ANIMATION.gif
-a---- 2020/12/08 9:13 199276 S0035644.jpg
-a---- 2020/12/08 9:13 403522 S0035847.jpg
-a---- 2020/12/08 9:13 336124 S0045448.jpg
-a---- 2020/12/08 9:13 236896 S0047533.jpg
-a---- 2020/12/08 9:13 298867 S0057361.jpg
-a---- 2020/12/08 9:13 247079 S0065617.jpg
-a---- 2020/12/08 9:13 307977 S0087576.jpg
-a---- 2020/12/08 9:13 308951 S0095920.jpg
PS AdventCalendar2020\17> dir * | Select -Property Name,CreationTime,Extension | sort -Property CreationTime | ForEach {$i=1} { mv $_.Name $i$($_.Extension); $i++}
PS AdventCalendar2020\17> ls
Directory: AdventCalendar2020\17
Mode LastWriteTime Length Name
---- ------------- ------ ----
-a---- 2020/12/08 9:13 872144 1.jpg
-a---- 2020/12/08 9:13 447847 10.jpg
-a---- 2020/12/08 9:13 3456332 11.gif
-a---- 2020/12/08 9:13 317585 12.jpg
-a---- 2020/12/08 9:13 408051 13.jpg
-a---- 2020/12/08 9:13 2019335 14.jpg
-a---- 2020/12/08 9:13 820582 15.jpg
-a---- 2020/12/08 9:13 780458 16.jpg
-a---- 2020/12/08 9:13 533970 17.jpg
-a---- 2020/12/08 9:13 298867 19.jpg
-a---- 2020/12/08 9:13 336124 2.jpg
-a---- 2020/12/08 9:13 236896 20.jpg
-a---- 2020/12/08 9:13 307977 21.jpg
-a---- 2020/12/08 9:13 3064052 22.gif
-a---- 2020/12/08 9:13 3803828 23.gif
-a---- 2020/12/08 9:13 220230 3.jpg
-a---- 2020/12/08 9:13 225033 4.jpg
-a---- 2020/12/08 9:13 247079 5.jpg
-a---- 2020/12/08 9:13 199276 6.jpg
-a---- 2020/12/08 9:13 1438779 7.jpg
-a---- 2020/12/08 9:13 403522 8.jpg
-a---- 2020/12/08 9:13 308951 9.jpg
PS AdventCalendar2020\17> dir * | Select -Property Name,CreationTime,Extension | sort -Property CreationTime | ForEach { Write-Host ")" }
ということで、25日間全部書ききることができましたので、ぜひ読んでみてください。
0 件のコメント:
コメントを投稿