静的ブログ生成CMS『Publii』
こんなCMSに興味を持つなんて物好きねぇ……
- オープンソースで広告表示や機能制限など一切なし。
- ブログ特化でそれ以外のサイトは作りづらい。
- Windows（x64のみ）とMac版がありLinuxも対応予定あり。→v0.30.4よりLinux対応
- 静的ゆえに高速かつセキュリティが強固。
- サーバーの引越しはPubliiのアップロード先を設定し直すだけなので簡単。
Publii配布先→https://getpublii.com/
まあ、実際に使ってみればわかるけれど現状ではとてもじゃないけど他人に薦められるようなシロモノじゃねーです。新興CMSゆえに日本どころか世界的に見てもドマイナーで公式ページのサポートフォーラムしか参考になる情報がありませぬ。
※以下の内容はver.0.26.4時点で書いたものです。
WordPressと違って専用アプリで記事の編集とアップロードを行う。ログインというものが存在しないのでサーバーの設定さえミスしなければセキュリティの心配はあまりない。全てのデータは自分のPCに保存されてるのでサーバー事業者がトンズラこいても安心だ。その代わり旅先や帰省中に変更したくなってもPubliiの入ったPCがないとどうにもならない、という事でもある。
エディタはWordPressでいうところのVisualエディタかHTML直書きのsource code表示の二択。はっきり言ってどちらも使いづらい。
簡単に使えるようにという配慮なのだろうが、正直要らん所まで勝手に設定されてしまうのでかえって厄介。「屋上へ行こうか……久しぶにり……キレちまったよ……」なんてフレーズが頭をよぎる。とにかく融通が利かないので覚悟すべし。
Publiiで用意されているテーマは現在9種類（自作も可能）。全体にシンプルなデザインかつホバー効果はリッチでオシャレなのだが実用性は乏しい。ほとんどが1カラム構成でスマホ向けを意識しているのかと思いきや、その逆でむしろスマホでの閲覧はヤバそうなテーマがあったり…。
日本語ムズカシデスネ
設定内の言語でJapaneseを選択できるけれどアップした記事にhtml lang="ja"という意味でPubliiのアプリは日本語訳なし。
日本語をはじめとしたマルチバイト文字の表示や編集はできるのだけれど動作はかなり怪しい。特にサイト名は鬼門で名前によっては保存できなかったり。そういうサイト名でもWordPressからインポートは可能。しかし名前を変更しようとするとPubliiが落ちる。ムカつく事に削除なら可能だ。
各サイトのデータを収めるフォルダ名や記事のurlは「サイト名・記事タイトルがひら仮名・カタカナはローマ字に、漢字は中国語読みのアルファベット表記」に変換され自動で設定される。各記事urlは編集画面からSEO→Post Slugで変更は可能。サイトのフォルダ名は変更する設定がないので読みづらい…勘弁して。
Publiiの関連記事はタグだけでなく、記事タイトルに使用された単語からも関連付けされる。しかし日本語の記事タイトルでは当然の事ながらマトモに機能していないので精度がメチャクチャ悪い。
日本語ユーザーが不具合報告してかないとどうもならんわなぁ、誰か英語が堪能な人お願い。
画像
Publiiはフルレスポンシブである。記事に画像を貼り付けると各画面サイズに合わせたサムネイルが自動で生成され、実際に記事で表示されるのはそのサムネイルのどれかになる。
そして困った事にオリジナルの画像を表示させる方法がよくわからない。記事編集をsource code表示に切り替えて直接htmlを書いてもアップする時に勝手にsrcset=""でサムネイルに変換されてしまうのでムダ。このクソ仕様のせいでデジカメレビューなど等倍比較画像を上げたい時に苦労する事になる。何で「自分が指定した画像を表示させる」これだけの事に苦労せにゃならんのだ。
オリジナルの画像もサーバーにアップされるんだから変換させずに表示する方法が何か用意されてるはずなんだけどね…。（追記:テーマ内のhelper.jsが画像リンクの書き換えを制御しているらしい。これの記述をカスタマイズすれば何とかなりそう。）
※アップする前に減色などの小細工をしてもムダという事でもある。小さいサムネイルのほうがオリジナル画像よりもファイルサイズが大きくなったりするのだ。
※pngを記事に貼ってpreviewするとjpgでサムネイルが生成される。実際にアップロードした時にはちゃんとpngで生成されているので気にしなくてOK。
同じ画像の使い回しは記事内に貼った画像のみ可能。→source code表示に切り替えて画像のコードをコピペ。…なのでFeatured image（アイキャッチ）には使えない。Featured imageってアイコン的に使い回したい時があるから困るんだけど。同じ画像なのに別扱いだからキャッシュも効かずムダな通信が…。
→"Using the same images in different posts" (#1106923) / Publii
Chromeで画像に拡縮がかかるとボヤけてしまう
この対策としてはレスポンシブで生成されるmdサイズの画像の横pxを本文の横幅以内に収まるようにテーマフォルダ内のconfig.jsonを書き換える。
本文の横幅はPC表示でおそらく686px？なのでそちらを768pxもしくはそれ以上に拡げるのもアリ。
記事に画像を挿入する時にサイズをmd画像と同じpxに指定。そしてキャプション表示にチェック（書く事がなければ空欄で）。元の画像が小さい場合はキャプションなしでも平気みたい。
小さく画像を表示したいならsmやsm2サイズと同じpxを指定。
広告
adsenseやamazonアソシエイトで作ったscriptやiframeを貼りつけるタイプの広告はほぼ大丈夫。
WordPressでいうWidgetやshortcodeに相当する機能はないので
- 個別に表示非表示したい→記事編集をSouce code表示に切り替えて任意の場所に貼りつける
- 全ての記事に表示でOK→page.hbs内の表示させたい場所に広告コードを挿入。
- page.hbs内のcustomHTML.afterPostの記述位置をズラしてもっと上にもってくればcustom HTMLに記述でいいかも。
新規で貼った場合は画像が表示されない（有りもしないサムネイル画像をamazonや楽天にリクエストして404エラーが出る）のですぐわかるが、WordPressからインポートした記事だとインポート時に生成・保存されたサムネイルの商品画像が表示されてるので気づきづらい、要注意。
一応はアップロードしたHTMLに直接コピペすりゃいいのだが、同期した時に書き換えられちゃう可能性が高いのでチェックの手間を考えると現実的ではない。（例えばcssの修正をしたら全記事が書き換え対象になる。）
どうやって表示させるのか頭を悩ませているのだが、カエレバのコードを外部ファイルにしてアップロード。それをjsで読み込ませればいいのかな？
Publiiにはpage（固定ページ）が存在しない。開発陣は「postの設定を一覧では非表示に設定すればいいじゃん」などと宣っているけれど広告の出し分けとか困るんだよ！！
追記:Ver.0.28.1で外部の画像リンクを整形しなくなったみたいなのでカエレバとか使えるようになったはず？
Publii updated with hotfix 0.28.1
Disabled URL generation for responsive images when external images are used in posts.
Publii覚書
Windows環境でマウスの右クリックが効かないのは既に報告済みの不具合。半年以上放置されっぱなしだが、修正されるのはVer.1.1予定（現在Ver.0.26.4）って……当面は諦めるしかない。開発陣、絶対Macしか使ってねぇ…。
Markdownは現在未対応だが、希望が多いため実装予定。（難しいらしい…）
アップデートは精力的に続けられているが、バグを直したせいで別のバグを仕込んでしまう事もあるので古いバージョンも保管しておいたほうが無難。
Publiiのアップデートは基本的に上書きでOK。異常に時間がかかるがフリーズしている訳ではないので気長に待つ事。
Publiiはping送信を行わない。Googleのsearch consoleからサイトマップにfeedも登録しておいたほうがいい。
→"Search engine pings" (#1332776) / Publii
Feed設定の"Show Featured image"をONにするとFeatured imageを設定していない記事にも/media/posts/記事No./までの画像リンクが記載されて404エラーを出す事になる。基本的にPubliiはFeatured imageを全記事につけている前提でしか作られてない。
テーマ『Mercury』のトップページで使えるタグフィルター機能は、タグ名に半角スペースや&のようなエスケープが必要な記号が含まれていると機能しない。
メールフォームはGoogleフォームなどで作成するのがお手軽。
WordPressからのインポート
WordPressからエクスポートしたxmlファイルをインポート可能。PubliiはタグしかないのでWPのカテゴリかタグどちらかを選んでタグへ変換する事になる。
インポート時に記事urlが記事タイトルのローマ字+中国語読みに変換されてしまう、要注意。url変更は記事編集のSEO→Post slug欄。
ブログ名を変更したい場合はxmlファイルの段階で修正しておく事。Publiiでマトモに使えるブログ名かは事前にPubliiでブログを作成して試す。普通に使えそうならそのままインポートでOK。
画像は記事内で実際に表示に使われている1つだけが取り込まれる。たいていはWPが生成した縮小サムネイルのどれかになると思う。そこからPubliiのインポートでサムネイルが再生成されるので画質が酷い事になる。つまり記事の画像はほぼ全部貼り直しになる可能性が高い。
子テーマ（override)
テーマのカスタマイズはoverrideで行う。overrideの作成は「テーマ名-override」フォルダを作り変更したいファイルをその中に元テーマと同じフォルダ構造になるよう置く。overrideの置き場所はブログのデータ保存フォルダ内のthemeフォルダ。
例:テーマ『Mercury』ならmercury-overrideフォルダを作成。
例:cssはassetsフォルダ→cssフォルダと設置してその中へ。
デザインをいじりたい場合はmain.css。style.cssはmain.cssにカスタムcssも含めてminifyしたもの。
アプリから設定できるwidthはコンテナの幅で本文エリアの幅ではない……。つまり余白部分の変更にしかならない…何それ。
本文の横幅変更はカスタムcssから.u-innerwrapを追加で数字を設定。（単位はrem推奨。デフォルトでは38rem）
| |
記事冒頭にデカデカとFeatured imageが表示されて転送量が気になる場合はpost.hbsからポスト上部のFeatured image記述削除。これで一覧や関連記事のカード表示は活かしつつ記事上のデカい画像を消せる。
関連記事
表示数の変更はテーマフォルダ内のconfig.jsonから数字をいじる。 | |
関連記事は「使われている記事が多いタグ」から「Publiiで記事を作成した時間（※公開時間ではナイ）が最も古い」順にリストアップされるようだ。記事タイトルからの類推が効かない事もあってザックリとカテゴリ分けみたいな感じでタグをつけると同じ記事しか表示されない。そのためタグ付けは厳選する必要がある。
たぶんsettingのpost orderで並びは決定されてるんだろうが、Published dateの設定がないんだよね。Creation dateやModifiedじゃちょっと使いづらいんすけど。
それにアルゴリズムは多いタグからじゃなく、むしろ少ないタグから新しい順のほうが精度がイイと思うんだが。そのうち試してみよう。
自分の使っているレンタルサーバーがここ最近やけに重いのでつい魔が差してPubliiに手を出してしまった。何か問題をクリアする度に別の問題が発覚するのでいわゆるコンコルド効果がなかったら投げてたかもしれない。（※追記:色々と問題が出てきたのでいったんWordPressに戻した）
ただまあ、可能性は感じるんだよね。WordPressより高速なのは間違いないし、完全フリーなので変な機能制限もないし。ユーザーが増えてコミュニティが活性化すればあるいは……
Publii配布先→https://getpublii.com/
文句ばかり言ってしまったが私の力不足なだけで、WordPressのテーマを自作できるくらいの技術がある人ならもっとストレスなく使えるんじゃないかと思う。
え？ Instant WordPressをPCにインストールしてSimply Staticあたりのプラグインで静的ファイルを生成・アップロードしちゃえば？そうね、そっちのほうがお薦めだよね……
追記：他の静的サイトジェネレータだとHugoやHexoあたりが情報も多くカスタマイズしやすいかな。（このブログはHugoで作成）