日本語静的サイトジェネレーター本命来たか！？『Catalpa』を使ってみた

f:id:moetsukiro:20190714175938p:plain

https://catalpa.osdn.jp/

7/11に「Catalpa」という日本語静的サイトジェネレーターを見つけました。
三連休中に~~ゲームボーイサウンドフォントのページをCatalpaでリニューアルしようと目論みましたが、なかなかうまくいかない~~ので中間報告的に使ってみた感想などをまとめます。
仮想サントラアーカイブスの特設サイトに変更してとりあえず機能するところまで来たので~~暫定公開します。~~本格的に使うにはまだアヤシイところが多いですね…
公開終了しました。

f:id:moetsukiro:20190715160006p:plain

こんな感じのサイトが作れます！

特徴

コマンドラインの操作が不要で、ローカルサーバー機能を備え、ファイルを監視して自動的に更新するため、マークダウンテキストを編集するだけでサイトが作れます。
ブログやテキストサイトのサンプルが付いてくるので、すぐにサイトを作り始めることができます。

とにかくリリースされたばかりの新しいソフト

公式サイトでは2019-03-20に初版リリースとなっているが、公式サイトの最終更新日が全ページ2019-07-09になっているので、正式リリース直後なのかもしれません。

Catalpa公式サイトの最終更新日が2019-07-09ってことはもしかしたらサイトが立ち上がったばかりなのかもしれない…
https://twitter.com/kaguyadepth/status/1149720130101714944

そのためか、colissやMOONGIFTといった大手サイトではまだ紹介されてないので誰も注目していません。なお、同じ作者の「exewrap」は窓の杜で紹介されています。

昨晩紹介した日本語静的サイトジェネレーターcatalpaの作者のソフト。 #catalpa 「exewrap」“.jar”形式で配布されている「Java」アプリケーションを“.exe”形式へ変換 - 窓の杜
forest.watch.impress.co.jp
https://twitter.com/kaguyadepth/status/1149428563239526400

公式サイトは当然catalpaで作られており、catalpaもexewrapを使ってビルドされている模様。
exewrap.osdn.jp
https://twitter.com/kaguyadepth/status/1149429106955575296

マークダウン記法にHTMLを直接貼り付けられる

Catalpa、マークダウン記法に書き換えなくてもHTML使えるので、そのまま貼り付けたほうが早いかもね、よく考えたらね。
https://twitter.com/kaguyadepth/status/1149755567499464704

デフォルトのテンプレートとカスタマイズについて

レスポンシブデザイン対応ですがグローバルナビゲーションはハンバーガーメニューではなく、メニューリストの後ろのほうが画面外になると非表示になり、サイドバーも非表示になるだけという、非常に割り切った感じのデザインになっており、好みの分かれるところかと思います。必要十分だけどややデザインが古い印象です。

Catalpaのデフォルトテンプレートはスマホ表示だと意外と悪くない気がする。

https://twitter.com/kaguyadepth/status/1149522838077886465

Web屋が売り物にするにはこれはちょっと…かもしれないのでテンプレートを作り替える必要があるかもしれないけど、個人サイトならこれでもOKかなあ。
https://twitter.com/kaguyadepth/status/1149523611155255296

サンプルのブログをちょっといじってみた。GUIに.mdをドラッグアンドドロップって書いてあるけど機能しないので、日付フォルダを掘る必要があるのが面倒なくらい。年フォルダ以下に.mdを配置するだけで自動的に更新される。あとはタイトルやSNSにサイト名が入るように修正するくらい？
https://twitter.com/kaguyadepth/status/1149370827357347840

CSSはレスポンシブ対応だけど、メニュー表示を隠すとか割り切った感じ。あと記事サムネイルに64x48のPNG画像を用意する。あとはやる気次第でデザイン変更したりはできるけど面倒だからやりたくない。企業サイト向けにメニュー＋お知らせブログのテンプレがあれば流行りそうな気がする。
https://twitter.com/kaguyadepth/status/1149370828531699712

#備忘録サイドバーにゲームボーイサウンドフォントのダウンロードボタンほしいのでソース修正
https://twitter.com/kaguyadepth/status/1149382421231521792

公式サイトのdownload-buttonクラスはmaterial-icons.lessの中に含まれている
https://twitter.com/kaguyadepth/status/1149431326837112832

できたけどスマホでは消えるのでトップに未来の日付でダウンロードボタンを常時表示するパターンだな
https://twitter.com/kaguyadepth/status/1149434180960264193

仮にHonokaでテンプレートを作るとして、Honokaの日本語対応とCatalpaの日本語組版処理がぶつからないようにするためには、Catalpaを一度解読する必要があると思うんだよなあ…そういうの考えずにBootstrap系じゃない軽量CSS フレームワークで組んだ方がいいのかもしれないけど。
https://twitter.com/kaguyadepth/status/1149524618580938752

Catalpaデフォルトテンプレートの横幅は640ピクセル #備忘録
https://twitter.com/kaguyadepth/status/1150654567995985920

WordPressの代わりになる可能性

catalpa、バックアップやPC引っ越しは問題ないと思うので、ブラウザ・テキストエディタ・FTPがあればどこでも静的サイトジェネレータでサイト更新ができると思う。リモートPC上に立ち上げておけば複数人で管理することも可能なのではないだろうか？
https://twitter.com/kaguyadepth/status/1149452453969948672

ページが固定ならマークダウンテキストをダブルクリックで開けるように設定してデスクトップにショートカットを作っておけばPCに不慣れな人でも更新できると思う。ブログの方は現状今日の日付で記事を作成するまでの手間がかかるので改良が必要だと思う。
https://twitter.com/kaguyadepth/status/1149453311612899328

ファイル保存時に自動的にフォルダを掘る機能があるテキストエディタってあるんだろうか？catalpaと併用するなら、https://t.co/HGlmCT6jMwを保存時に自動的にyyyy/mm/dd/hoge.mdに保存されるようにし、同一フォルダが既にある場合は念のため上書き確認すればブログとして使いやすくなるのではないか？
https://twitter.com/kaguyadepth/status/1149521458265149440

問題点

タイトルに半角角括弧が含まれるとエラーになる

Catalpaがエラー吐いてるんだけど何が悪いんだかよくわからんよね。たぶんマークダウン記法とぶつかって構文エラーになってるんだと思うけど。

https://twitter.com/kaguyadepth/status/1150211179630886912

エラーの原因が特定できました。
title: に半角の角括弧 [ ] が含まれるとエラーになります。
いっぽうリンクテキストの角括弧はエラーになりません。
画像のように角括弧が二重になってても大丈夫でした。

https://twitter.com/kaguyadepth/status/1150219212985470978

角括弧を全角にすれば問題ありません。
https://twitter.com/kaguyadepth/status/1150219628628475904

二重鉤括弧の前後に強調のアスタリスク2つ付けたとき強調にならない

Catalpaのバグ？二重鉤括弧の前後に強調のアスタリスク2つ付けたとき強調にならない。

https://twitter.com/kaguyadepth/status/1150313770780020736

その後、二重鉤括弧以外でも強調にならない不具合が出ました。こうなってくると発生条件が不明です。

Catalpaの文字強調\*\*（strongタグに変換）の挙動がどうにもおかしいですね。なるときとならないときの条件がよくわからん。

https://twitter.com/kaguyadepth/status/1150657525190025217

・行頭から強調
・前後にHTMLタグがある
・前後に記号がある
あたりが不具合の原因っぽいんだけど。これじゃstrongタグ入れたほうが早くね？
https://twitter.com/kaguyadepth/status/1150658072957739008

タイトルの前のアイコン画像を出す方法がわからない

Catalpaまだわからないことが多い。タイトルの前のアイコン画像を出すのはHTML記述すれば簡単なんだけど既にIF文が仕込んであって、でもそこがどこを参照しているのかがわからない。小一時間悩んだけど自力ではどうしようもないので公式の解説待ちかな？と。

https://twitter.com/kaguyadepth/status/1150237853781094401

同じ日に複数の記事がある場合、サムネイル画像を記事ごとに設定する方法がわからない

Catalpaのブログって同じ日に複数の記事がある場合サムネイル画像ってどっちも同じ画像が出ちゃうんだろうか？別々にサムネイルを設定する方法はあるんだろうか？
https://twitter.com/kaguyadepth/status/1149861750486917120

「ファイルの変更を監視して自動的に更新する」は記事数が増えると処理が重い

Catalpaの「ファイルの変更を監視して自動的に更新する」チェックボックスをオンにすると便利だけどページ数が多いとテキストを保存するたびに時間のかかる処理が始まってしまうので鬱陶しいね。
https://twitter.com/kaguyadepth/status/1149863990278836224

記事ごとの最終更新日が表示されるわけではない

そういえば最終更新日を表示する昨日だけど、全ページ保存時の日付になるわけで、マークダウンテキストの更新日が反映されるわけではないのかな？公式サイトの更新日が全部書き換わっているのを見て、ふと思いました。
https://twitter.com/kaguyadepth/status/1153590952100950016

ずっと日本語静的サイトジェネレーターを探してきた理由

moetsukiro.hatenablog.jp

私は2017年秋のWebデザイナー短期アルバイトで古いCMSのセキュリティ問題に直面した経験から、WordPressの代わりとなる日本語静的サイトジェネレーターを探してきました。
当時注目していたのは「JS CMS」と「Publii」でしたが、JS CMSはデザインのカスタマイズ性に、Publiiは日本語の扱いに問題があり、本格的に使うには至りませんでした。

www.js-cms.jp
https://nntnk.link/pcgame/cms-publii/nntnk.link

春には「Yogurt」を使ってみましたが、これも実用には程遠いものでした。

moetsukiro.hatenablog.jp