カラクリサイクル

『輝かしい青春』なんて無かった人の雑記

kalaclism.com の技術スタック

えっと、この前の僕の誕生日の日である 2月28日に、こちらのブログでは初めて、今年に入ってから作り上げた、

について言及したのですが、今回はそれを実現するために使った技術スタックについて書こうと思います。


1. カラクリズム の記事の公開の流れ

基本的に、カラクリズムは、

  • hugo をブログの静的生成ツールとして用い
  • 記事というかエントリを Markdown で書いて Github のリポジトリに push して、
  • それをトリガーに wercker.com を使って AWS S3 へ自動デプロイ

という感じの流れで公開とかしています。

それで、最初にこの仕組みを作るのは結構大変だったというか、ブログ記事の preprocessing とかを行なう必要がある、 とかそういう理由で wercker.yml の複雑度が上がっちゃってるのですが、 それ以外はまあそんなに複雑化はしてないと思います。というかそう思いたいです。はい。

あと、カラクリズムのホスティングには、

  • AWS S3
  • cloudflare

辺りを使っていて、 AWS S3 は静的生成したファイルのホスティングに、 また、 cloudflare は Webサイトの TLS 通信化と、あと AWS S3 へのアクセス数の軽減に使ってます。

2. カラクリズム での全文検索

これは昨日突貫で工事……というか、今まで実装を行なってなくて、昨日、ようやく重い腰を上げて作ったのですが、 基本的には、

を組み合わせて、ブラウザだけで完結する形で実装しています。

ただ、これ実は気合と根性ウェアというか、検索のインデックスとかもその場で検索ページを読み込んだ時に生成してたりするので、 恐らくは記事数が増えていってそれなりの記事数になったとき、読み込み速度の方面で使いものにならなくなるんじゃないか、とも思っていて、 まあ記事数が相当に増えた頃には、なんか別の方法での実装になっているかもしれません。

まあでも現段階では、普通に検索して普通に使えるので、その点では便利ですね。はい。

3. カラクリズム の HTML 構造

実を言うと、 カラクリズムでは、その HTML 構造を、

で定義されている amphtml に対して valid な形で実装してます。

ただこれ僕の場合、カラクリズムでは amphtml なページしか用意していなくて、amphtml 本来の使い方である、

モバイル専用のページを用意しその上で amphtml を適用する

っていうのを行なっていないので、その点についてのみ、なんか微妙な気がします。

ただ、そうは言っても、 amphtml はシンプルな Web ページであれば、余裕で実装可能なので、 そういった意味では、カラクリズムを作る際にそんなに大変だった印象は無いです。 まあでもこれ、既存のブログとかに適用しようと思うと大変そうですけど。

以上

というコトで今回、ザックリと、

の技術スタックについて書いてみました。

で、肝心のカラクリズムなんですが、今まで全然宣伝とかしてなくて、 現段階ではネットに浮かぶ小さな無人島のごとくになってます。

あと、『カラクリズム』っていう名前、なんかスマフォ向けアプリとか作ってる会社さんとかぶってますからね。 作って公開してしばらくしてから、その名前被りに気がついたっていう。

とは言ってもカラクリズムの構成としては、結構チャレンジングな構成にはなっているとは個人的には思うので、 もし、中身とか、あるいは、どのような構成で構築してあるか、等々を知りたい方がいらっしゃるなら、

github.com

で全部まるっと公開しているので、よかったら覗いでみてください。

という事で、今日二つ目の記事は以上でした。はい。