なんかポッとウェブいじりに火がついては消えてはの繰り返しだった。
ウェブ改修とかの度に「WixとかTumblr使っちゃえばいいじゃん」てなってるのをカタクナに拒否しまくって自前でポチポチやっているのって自分的には楽しいんだけど他人から見たらどうなんでしょうね……。
昨今の動きから見るに一番良いのは勝手にセンシティブ判定食らって非表示とかそういうのがないとこだったりして。
ぶっちゃけ何書いてるか自分しか分からないと思うし、ウェブページ構築のハウツー目的で書いてるわけじゃないので、ウェブサイト自前構築が好きな人くらいしか読むことをオススメしないです。
前にあった問題
曲がりなりにもイラストサイトではあるし、そうなった時に大事になってくるのって「後からデータ（イラスト）がじゃんじゃん追加される」ということで、
予てより簡略化としてなるべくJSで絵ドン（拡大してキャプションを表示）させたりしてた。
けどまだ足りなかった。足りなかったから更新が面倒になっちゃうのだ。失敗例として一応。
前構成をさらす
ページHTML
index 扉+簡易更新情報
top 新着とかお知らせ
info プロフィールと作業環境
other 配布物とか絵と関係ないこととか
work ↓ジャンル別イラストページの分岐用（タブ機能実装で配布物をここで配れるようになった）
work-ink.html 絵のサムネイルを羅列するimgタグが並んでいる
work-fa
work-orig
work-… ジャンルの増加に応じて足す
DB.html JSでキャプションを表示するためにキャプションだけを格納しているhtml
その他なんか必要に応じて個別ページとか
フォルダ
pic/ 絵1
絵2
絵3
…
img/ アイコンとかページ装飾用画像
stock/ 配布物データ
更新（絵の追加）の時にやらなきゃいけなかったこと
- サムネhtmlにimgタグを追加（ちゃんとテンプレがある）
- DB.htmlにキャプションを追加（テンプレがある）
- indexに何を何枚追加したとかを書く（テンプレ）
表示メカニズム
- JSであらかじめサムネhtml内のサムネ（imgタグ）すべてに連番を振る
- サムネhtmlでサムネ（imgタグ）をクリックする
- onclickでJSが連番を引っ張ってDB.htmlからキャプションを抜き出す関数を実行する
- サムネhtmlからサムネを全て撤廃（mainタグ）し、タイトルや画像やキャプションをappendChildか何かで差し込む
- ついでにBackボタンをJSで作って差し込んで撤廃したサムネを復旧できるようにする
特にヤバいと思ったのは絵1枚の更新にhtmlを3つも編集しなければならなかったことで、さらにマズいのがJSで連番を振らせるがためにhtmlのタグにテンプレや記載順が存在し、書き足す場所を探すのがほぼ手動だったこと。
これ作ってからしばらくはキチンと更新してた気がするけど知らん間に放置しちゃったよね。
しかもJSで別ファイルを読み込んで使うのってあんまりセキュリティ的に良くないらしい。セキュリティなんぞ知らんと思っていてもローカル環境でこれを使うとそもそもロードされないので実質こっちのほうが良くない。
あと画像が原寸データしかなくサムネ欄を最初にロードした時に読み込みが大変だった。
とにかく使っていて問題がジャンジャン見つかったというか、更新を面倒くさがる理由を探ってみたりしたらとにかく1回の更新に必要な手数が多すぎた印象があった。
静的サイトジェネレータの存在
なんかの拍子でHexoというソフトウェアと共に静的サイトジェネレータという言葉を見つけた。
ウェブサイトを作るのを簡単にするツールのことだけど、WordpressやWixやTumblrのように「サーバにアクセスし、オンラインでサイトを作って完成したら適用や公開のボタンを押す」のではなく、
「まずオフラインでサイトを作ってチェックしてから用意したサーバにドカンと置きましょう」というもの。
 |
| おそらくこういうこと |
利点としては基本的にネットを使わず自機のハードディスクを行き来するだけなので編集や確認が爆速（Bloggerのプレビューとか表示に3秒はかかるけどこっちはそうじゃない）なこと。
大抵は借りたサーバ容量（2GBとか）よりも自機のハードディスクの方が容量があるので、あれを上げてこっちを消して…という節約術も必要がない。
あと使い慣れたファイルマネージャとかテキストエディタでページを編集できるのでブログサービスごとに挙動が違って困る…というのもない。
ついでに向こうのサーバがWordpressのようなデータベース参照などをしないのでアップロード後も表示や切り替えが爆速。
と、いうのが静的（以下略）のポイントだと思う。
でも結局Hexo使わなかったんだよな！（導入が面倒くさかったので（クソかな？
Bashで静的サイトジェネレータもどきを作る
導入が面倒だったというより「それシェル芸でできるんじゃないの？」と思った力のほうが強かったのでBash（Zsh）で作ることにした。できた。
やりたかった実装
- 絵の個別ページをテンプレでさっと出してVimとかNanoとかで開かせて連番やキャプションやタイトルや日付をまとめて入れる（イラストSNSの投稿欄的なね）
- 選んだ画像をその連番でリネームして格納、プレビュー用の小さい画像も作る
- 個別ページの数だけforで巡回して絵のデータベースを作る
- データベースを元にサムネイルのリストを作って一覧用HTMLに差し込ませる
ファイル構成をさらす
ページHTML
index 簡易更新情報を削除してただのワンクッションページになった
top infoを削除してこっちに統合
work-orig 分岐用ページを削除していつでもページ上部から飛べるようにした
work-abs
work-…
note 配布物（otherのリネーム）
link infoにタブ実装して載せていた外部リンクやブクマ紹介ページを独立
フォルダ
pic/ 前と同じ
img/ 前と同じ
stock/ 前と同じ
prev/ サムネ表示高速化のための縮小絵
page/ 絵の個別ページhtml
caption/ キャプション部分の退避場所 アップロードしない
main/ main部分の退避場所 アップロードしない
更新情報については、topにTwitterのウィジェットを配置して新着情報をTwitterで流したのをそのまま表示させるという現代的手法に出た。
ぶっちゃけ何か更新が気になる人ってトップやIndexなんか来ないで絵の一覧ページを流し見すると思うので。そもそも見てくれる人すらいるか分かんないけど……。
フォルダが増えたけど管理しやすくするなら妥当かな。
あと全部のページからタブ機能を削除した。タブ分けするほどの中身がないので……
更新時に使うスクリプト
絵を1枚投稿したいという時の為に起動させるスクリプトたち。青字が入力を求められる部分。それ以外は自動。中身も一応公開するので興味ありましたらスクリプト名を押してみてくださいな……。（文字化けしてたらごめんね）（文字化けしてたわ）
新規投稿画面をVimで作る。
- 絵ページの新規作成をする。切り分けておいたHTMLのヘッダ部とフッタ部をCatで繋げてhtmlとしてリダイレクト出力
- Vimで開かせ、既にフォームというか入力欄は出来ているので連番とかタイトル、キャプション、日付とかタグとか必要なのだけ入れる
- 完了したhtmlからGrepで連番（ID）を抜き出してhtmlをリネームしpageフォルダに移動。
- この時、「ネタバレ注意表示する」「上げはするけど一覧表示はしない」という時にそれぞれ#spoilerタグや#invalidタグを足して後々の処理のカギにする
- あとTwittercardの中身をSedで置き換えてページシェア時に表示されるようにする
ほぼ全てのスクリプトの要になるデータベースを作る。
- page内にあるhtml全てを順にcatしてgrepとかsedで連番・タイトル・日付・タグを抜き出してcsvもどきのデータベースにする（カンマはタイトルで使うので@区切りとか）
プレビュー用画像を作る。
- forで照合しながらpicフォルダにあってprevフォルダにない画像をFfmpegで縮小して格納する。
- ImagemagickじゃないのはアニメーションGif対策。
サムネ一覧ページを更新する。
- 上のMakedatabaseで指定したタグ名をGrepで絞り出す
- Awkでcsvもどきを切ってaタグやimgタグにそれぞれ差し込んだものを一括生成
この時、Invalidタグが付いたデータはGrep -vで除外し、SpoilerタグがついたデータはCSSで注意装飾するためにSpoiler用のclassかnameを足しておく - 引数のタグ名をcase分岐に入れてタグの差し込み先htmlを選択する（AbstractとFractalを同じabs.htmlに入れるとか）
- Grepで入れ場所（divタグの開始と終端）を探し、切り離してから一括生成したタグを挟んでもう一回出力
（Sedは複数行差し込みに弱いので使えない）
- 出来上がっている絵ページhtmlからヘッダとフッタを外したものをmainフォルダにコピーする
- 後々ヘッダのデザインとかメニュー項目が増えた時に一括変更させたいため（出番あるのかな…
- Makemainの抜き出し範囲をさらに絞ってキャプションだけを抜き出してcaptionにコピー
- Makedatabaseが改行の要らないIDやタイトル、日付などを統括しているのに対し、こっちは改行ありきのキャプションをそっくり抜いて避難させておく
- 正直出番ないかもしれない
スクリプトを使う順番も上から順。
なんと！ 入力を求められる部分はMakenewしかない。あと引数ぐらい。
これのおかげで絵1枚の更新にかかる手数は、ほとんどPixivやDAなどのイラストサイト投稿フォームとほぼ同じになった。
ちなみにこれはローカルでやっているので、全部終わり次第curlftpfsとかでマウントしたサーバに丸コピしてアップロードは終了する。
スクリプト多すぎて手数が増えるじゃん！と思うかもしんないけど、これを一括で順に起動するラッパースクリプトを作ってしまえば実質1回の起動で済むことになる。
JSにやらせていること/させなくなったこと
- 絵クリックで拡大縮小処理
DBと照合してキャプションを持ってくる動作サムネを撤去して絵ドンするバックボタンをつける
DBを照合しなくなった（JSが通信を行わなくなった?）のでローカルでもチェックできるしアップロード後も絵を開く挙動がチェックできるようになった。
引っかかったやつ
ローカルだから読み込みが爆速だというのが利点な静的サイトジェネレータだけど、
JSで読み込む画像のサイズを取得したいという時、サーバ上はローカルほど読み込みが速くないのでサイズ取得関係のJSコマンドが先に行動、読み込みが終わっていない画像からはサイズ0を返し、
クリックしたら原寸表示させるはずのJSが画像を0pxに設定してしまうというのがあった。
なんか調べたら解決法があったので治った。ありがたし。
おわり
 |
| 7〜8月のランダム背景は水面と花火と星空がテーマです |
開いてみて表示の早さを実感してほしい。これが静的サイトジェネレータもどきの力よ。
これで完璧というわけではないけど、少なくとも1投稿3ファイルとかいう地獄は抜け出せたし、一括投稿のようなことも即興でスクリプト組めるようになってかなり気が楽になった。シェル芸最高！
http://0xconfig.net/
http://0xconfig.net/
0 件のコメント:
コメントを投稿