---
title: ブログのフロントエンドをBackbone.jsでSPA(Single Page Application)化した
tags: []
categories: ["Dev", "Blog", "CategoLJ2"]
date: 2013-09-25T03:33:41Z
updated: 2013-09-25T03:33:41Z
---

現在ブログシステムの以下の大幅な刷新(CategoLJ2)を計画している。まずはfrontendの刷新を行った。

そもそもCategoLとは・・

### CategoL(J)の歴史
昔のメモを見ると
CategoL = **Catego**rizer written in **L**isp 
の略らしい。
要はWikiみたいにカテゴリでコンテンツの階層化をできて、Markdownで書ける軽量なブログシステムがほしかったから作った。

* 2009年12月 [CategoL](https://github.com/making/categol)開発
 * 初期はCommon Lisp + MySQL + Hunchentootという構成だった
 * Common LispのCLと掛けていた
* 2010年10月 [CategoLJ](https://github.com/making/categolj)開発
 * Common Lispでの開発に限界を感じ、当時MyブームだったClojureでの開発にシフト
 * Clojure + MongoDB + Ring(jetty)という構成に変更
 * Tokyo.clj#8で軽く話した http://www.slideshare.net/makingx/categolj
 * **Catego** rizer written in C **l** o **j** ure
 * CategoLとのURL下位互換性を担保
* 2011年05月 [CategoLJ-java](https://github.com/making/categolj-java)開発
 * Clojureでの開発に限界を感じ、勉強の意味を含めJava(Spring MVC)で再実装
 * Spring MVC + MongoDB + Glassfish/Tomcatという構成に変更
 * この時点で名が体を表していない
 * CateoLJとのURL下位互換性を担保
* 2013年09月 CategoLJ2開発着手
 * 2年経ったので飽きた→アーキテクチャを変えよう
 * 昔考えたURLがださすぎる→URL互換は捨てる

### 新ブログシステム構想案
* Thin Server Architectureの採用
 * ブログコンテンツのREST API提供
 * 多言語でのRESTサーバー実装
     * Java(Spring MVC, JAX-RS), Go, Node.jsで作りたい
 * クラウド対応(AWS, Google App Engine, Heroku)
     * RESTサーバーをポータブルに 
     * とりあえずRDSやCloud SQL対応できるようにMySQLに移行する
* Pure HTML + Javascriptでfrontend作成
 * S3やGithub Pagesなどで手軽に公開可能
 * サーバーを切り離し、Parse.comのようなサービスとの組み合わせもしたい
 * Single Page Application化
     * Backbone.js採用
* リッチなUIな管理画面をもつbackend作成

TODO 図をあとでかく

### 今回行った対応

* 旧ブログサーバーのREST API提供
  * backendの管理画面は旧版のものをそのまま使用
* frontendプロジェクトの作成
  * Backbone.js採用
  * [UIkit](http://www.getuikit.com/)採用
  * レスポンシブデザイン対応
  * テンプレートはHandlebars.js
* 古いブログコンテンツにアクセスした場合、新システムにリダイレクト
  * ある程度インデックス化されたらRESTサーバーを入れ替える 
* GoogleクローラーがAjaxコンテンツを取得できるように[_escaped_fragment_](https://developers.google.com/webmasters/ajax-crawling/docs/specification?hl=ja)に対応
  * 内部でヘッドレスブラウザ(Phantom.js)叩いてコンテンツ返している

TODO 図をあとでかく

サーバーから必要最小限のJSONを取得するだけなのでモバイルでもサクサクうごいて今のところいい感じです。

### frontend残タスク
* tweetボタンがうまく表示されない(非同期なコンテンツ表示で対応していない？)
* エラー画面遷移
* pushstate対応
* リファクタリング(ファイル分割など)
* メモリリーク調べ(Backbone.jsをまだよく理解していない)
* S3で運用するにはどうすればよいか？
 * _escaped_fragment_対応
* Firefoxだとページ遷移が少し変