Hexo 内部探訪 (1) はじめに

Hexoを選択した理由は、Node.jsだから、Javascriptだから、つまりいろいろと、自身で内部構造を含めて手を加えるため。
それは使い始めるとすぐに現実になり、早速プラグインを作成したりもした。(参照 hexo-tag-google-photos-album 公開しました

だんだんとHexoの内部構造やAPIについて理解をしはじめたところです。しかしながら開発においてはまだまだ、暗中模索です。

特に、記事やブログのメタデータや状態などを処理の過程で参照しようと思った時と、jsやcssの挿入(インジェクション)が、掴みにくいポイントだと思う。

インジェクションの方法

はじめにhexo-injectを見つけた時、これでかなり楽ができそうだなと思いました。
しかし実際に使おうと思い、試してみるのですが、思い通りに動かすことができませんでした。

This package has been deprecated
Author message:

The author does not use Hexo any more. This plugin is no longer maintained.

とのことで、現段階ではコレに頼るのは諦めました。
なお、元作者以外のメンテナの動きがあるようなので、少し期待しつつ成り行きを見守っています。

で、他のプラグインを(少しだけ)調査したのですが、インジェクションにはまだ定説というかベスト・プラクティスが確立しているようには見えませんでした。
いくつかアプローチがあるものの、私の望む動作とは少し違っているようです。
それというのも、Hexoのプラグイン機構の動作と、うまくマッチしていないように思いました。

postもしくはpageの中で、1回だけ呼び出す限りにおいては、いくつかの手法で(私の実装でも)問題なく動いています。

同じくpostもしくはpageの中で、複数回同じプラグイン(この場合はTagプラグインを想定)が呼び出されたときにどうなるかというと、私の手法ではマズイ部分があります。

探してみると、ランダムな文字列をうまく使って、重複したインジェクションの問題を回避しているプラグインがあることがわかりました。
それはそれで良いのですが、私の目的では、単に同一html文書内ではインジェクションが1回だけ、というような動きにしたく思い、引き続き調査中です。

もう一つの問題は、アーカイブもしくはインデックスでの挙動。特にインデックス。

私が使っているテーマ(Stage)だとアーカイブ系(カテゴリー別、タグ別一覧も同様)ではタイトルのみで本文が入らないのでまだ問題になっていないのですが、インデックスではそうもいきません。

ここでも、複数回の呼び出しが発生することを想定した作り込みが必要になりますが、私の実装では対応できていません。(不完全だが、1画面内で最初のTagプラグイン記述のみ、動いている)

あと、挿入位置も。
コンテンツの中(body要素の途中)ではなく、head要素の最後とか、body要素の最後に挿入したい。

状態の参照

ドキュメントの、APIを見ればおおよそは分かります。
でも、もっと細かい部分を確かめようと思うと、上記のドキュメントでは物足りなさを感じました。

私もhexo-tag-google-photos-albumを開発している過程で、その場しのぎ的に調査したのですが、効率的にやれていなかったのと、今後のことを思うと、まとまった形でどこかに書き出しておいたほうがいいなと思いました。

このあと、Hexoプラグイン開発に役立つよう、hexo-tag-google-photos-albumの開発を題材にとって、それらをまとめていきたいです。

他にも、開発の役に立ちそうなこと

まだまだ理解できていないこと。

Hexoの一連のライフサイクル。
それぞれの段階で、どんな処理が走るのか。
とか。

それとテーマ。

あとは、プラグインのロードあたりも、おいおい調べる必要が出てくるかも。

それと、npm linkを効果的に使う方法をちゃんと理解しておかないと、開発の効率が悪すぎる……。

そういったことを、連載形式でまとめていけたらと思います。

hexo-tag-google-photos-album 公開しました

静的サイトジェネレータのひとつである、Hexo
当ブログで使用している訳ですが、それ用のタグ・プラグインを作成、公開しました。

Googleフォト の、アルバムを埋め込みます。

NPM

詳しくは、簡単な説明を書いたので、そちらをご参照ください。

npmにモジュールを公開するのは初めてなのですが、思った以上に手続きというか手順が簡単ですね。

成果物のほうはと言うと、初期のコンセプトに沿ったProof of conceptまではすぐに出来たのですが、細部の詰めを固めるのに、かなり手間取りました。

あと、Googleフォトにある画像のURLをスクレイピングで抜き出している部分は、アドホックなものだという認識で、あちら次第で変わったりするのかなと思ってます。
og:imageに入っているカバー画像のURLだけは、比較的に永続性があると思われます。
それ以外は、まぁ、よくわからない😁。

さくら 2019

今年のさくらが散りました。

私は何年前からか、このシーズンにさくらの写真を撮って、その時々にアルバムとして公開したりなどしているのですが、今年はこの新しいブログで掲載しようかと思います。

全ての写真は以下にあります。

個人的な嗜好として、さくらは散る時が最も見どころだと思う。
特に地面等に散らばった花びらと、それをゴミとして片付けるさまなど。
あれだけ、散々ともてはやされ、愛でられても、散ればゴミですよと。
いとをかし。

フォトアルバムとしての見せ方は…

撮影した写真は全てGoogleフォトに保存しているのですが、それを別の場所に再アップロード等することなく、ブログに貼り付けるのが少々厄介。
うまい具合に、出来ないものか。

追記

Googleフォトのアルバムをうまく貼るためにプラグイン書いた。

はじめまして!

My First Weblog

Google+が個人向けサービス終了となり、今後のアウトプットについて考えた。

考えた結果、静的サイト・ジェネレータを使って、ブログ形式のサイトを始めることにしました。それがコレです。

静的サイト・ジェネレータを選んだのは、書く内容を勘案したうえで、「自力でなんとかする」ことに意味があるように思えたから。
特定サービスへのロックオンを、できれば減らしたいという意味で。とはいえ、全くナッシングで全て自力というのも、また無駄でありつつ。
そのバランスが、ちょうど良いように思えたから。

数あるプロダクトの中でHexoを選択したのは、あまり悩まなかったな。Javascript製で、npmを使ってセットアップが簡単ということで。

それで、ドメインはずっと使っているisnot.jpに、新しくサブドメインを追加することにした。
本体ごと、まるっと乗り換えるほどには思いきれなかったということである。

そのうえで、ホスティングにGitHub Pagesを使う。
レンサバに直接デプロイするのに比べると、例えば出先でスマホから、ブラウザを使ってちょこっとコンテンツを書き換える程度のことが、それなりに出来るから。
まぁ普段はデスクトップのパソコンで作業します。

つまずき その1 ドメインの設定

さくらの会員メニューからログイン。ドメインの設定。
ドメインの編集から、CNAMEを追加する。このとき、「値」に何を設定すれば良いか分かってなかったので、調べる。と、FQDN書けよと。
ここで失敗。末尾のドット(.)を付け忘れる。いつまで待ってもドメインが伝播してこないなーとか。
1日待って、おかしいと思って見直したら、そういうことだった。

ついでに、無料のSSL証明書をポチっとした。この上なく楽だな〜。
業務で国内大手事業者からSSL証明書を買った経験は何度かあるけど、そういうのと次元がまったく違ってますね。

つまずき その2 リポジトリの設定

「CNAME」という名前のファイルを置くのだが、いろいろあって、衝突したり消えたりした。
結局でいうと、<$blog_home>/source/CNAME に置いてあげれば解決でした。

themes のカスタマイズ

themesには、Stageというのを選んだ。
結構たくさんある中で選んだポイントは、
本文テキストの文字サイズが小さくないこと。
ライト系で、白っぽいこと。
そして、jQuery依存しないで済むこと。

よく見たらjQuery使われていたんだけど、見た目のちょっとした動きを付けるためだけに使っている程度だったので、カスタマイズの過程で外しといた。

あとはヘッダーの画像を入れ替え、位置関係を調整。
サイドバーのアバター画像も入れ替え。

それと、独自のCSSを追加した。
Parmalinkの書式を変えた。

マルチ言語機能があるが、日本語(ja)の言語ファイルがなかったので、enをコピーして適当に翻訳した。

今のところは、この程度かな。

つまずき その3 jsの変更を反映する

これはつまずきというより、すぐに気付けた。
hexo コマンドでは、themesの中の、webpack処理が行われないようです。
つまり、元jsファイルを更新した時に、minify後のファイルには反映されないのです。
なので、以下のようにbuildしてやる必要がありました。

$ cd themes/stage/
$ npm run build
$ cd ../..

既存コンテンツどうしよう

G+のバックアップデータをインポートするとしたら、パーザから自作してだな。
うーむ。

そして旧ブログというかWeb日記も、そのうちコンバートしておくか。

以上です。