えっと、この前の僕の誕生日の日である 2 月 28 日に、こちらのブログでは初めて、今年に入ってから作り上げた、
カラクリズム ( 2018 年時点で既に消滅)
について言及したのですが、今回はそれを実現するために使った技術スタックについて書こうと思います。
1. カラクリズム の記事の公開の流れ
基本的に、 カラクリズム は、
- hugo をブログの静的生成ツールとして用い
- 記事というかエントリを Markdown で書いて Github のリポジトリ に push して、
- それをトリガーに wercker.com を使って AWS S3 へ自動デプロイ
という感じの流れで公開とかしています。
それで、最初にこの仕組みを作るのは結構大変だったというか、ブログ記事の preprocessing とかを行なう必要がある、とかそういう理由で wercker.yml の複雑度が上がっちゃってるのですが、それ以外はまあそんなに複雑化はしてないと思います。というかそう思いたいです。はい。
辺りを使っていて、 AWS S3 は静的生成したファイルのホスティングに、また、 cloudflare は Web サイトの TLS 通信化と、あと AWS S3 へのアクセス数の軽減に使ってます。
2. カラクリズムでの全文検索
これは昨日突貫で工事……というか、今まで実装を行なってなくて、昨日、ようやく重い腰を上げて作ったのですが、基本的には、
lunr.js lunr-languages TinySegmenter jQuery
を組み合わせて、ブラウザだけで完結する形で実装しています。
ただ、これ実は 気合と根性ウェア というか、 検索 のインデックスとかもその場で検索ページを読み込んだ時に生成してたりするので、恐らくは記事数が増えていってそれなりの記事数になったとき、読み込み速度の方面で使いものにならなくなるんじゃないか、とも思っていて、まあ記事数が相当に増えた頃には、なんか別の方法での実装になっているかもしれません。
まあでも現段階では、普通に検索して普通に使えるので、その点では便利ですね。はい。
3. カラクリズム の HTML 構造
実を言うと、 カラクリズムでは、その HTML 構造を、
Accelerated Mobile Pages Project
で定義されている amphtml に対して valid な形で実装してます。
ただこれ僕の場合、カラクリズムでは amphtml なページしか用意していなくて、amphtml 本来の使い方である、
モバイル専用のページを用意しその上で
amphtmlを適用する
っていうのを行なっていないので、その点についてのみ、なんか微妙な気がします。
ただ、そうは言っても、 amphtml はシンプルな Web ページであれば、余裕で実装可能なので、そういった意味では、カラクリズムを作る際にそんなに大変だった印象は無いです。まあでもこれ、既存のブログとかに適用しようと思うと大変そうですけど。
以上
というコトで今回、ザックリと、
カラクリズム
の技術スタックについて書いてみました。
で、肝心のカラクリズムなんですが、今まで全然宣伝とかしてなくて、現段階ではネットに浮かぶ小さな無人島のごとくになってます。
あと、『カラクリズム』っていう名前、なんかスマフォ向けアプリとか作ってる会社さんとかぶってますからね。作って公開してしばらくしてから、その名前被りに気がついたっていう。
とは言ってもカラクリズムの構成としては、結構チャレンジングな構成にはなっているとは個人的には思うので、もし、中身とか、あるいは、どのような構成で構築してあるか、等々を知りたい方がいらっしゃるなら、
で全部まるっと公開しているので、よかったら覗いでみてください。
という事で、今日二つ目の記事は以上でした。はい。
