時計を壊せ

駆け出しWebプログラマーの雑記

Yomiuri構想

まだ構想段階だけどこれだいぶイケてね?って思ったので勢いで書いてみる。

Yomiuriとは

手軽に拡張出来るJekyllインスパイア系ブログフレームワーク/オーサリングツール

特徴

CLIで記事が書ける

vimemacsなどお好みのエディタでどうぞ。

Github Flavord Markdownで記事が書ける

エンジニア的にアツい。

レイアウトの自由度

Kolon(Text::Xslate)の継承テンプレートで良い感じに拡張出来ます。
また、良い感じのメソッドを提供しているので
まるまるテンプレートを置き換える事もできます。
JS/CSSも自由に書けます。

機能拡張の自由度

JavaScriptとWebAPIを使って機能拡張を行う事をYomiuriはサポートします。
用意されたhook pointにJavaScriptAPIクライアント処理を埋め込むと良い感じにWebAPIを叩いてunderscore.jsで書いたtemplateをレンダリングするイメージです。
仕様として決まるのはWebAPIのCSRF対策*1JavaScriptのhook pointだけです。*2
この仕様を満たす事が出来ればWebAPIは自由な言語で実装する事が出来ます。
また、APIを楽に実装するための標準API仕様とサーバーサイド(Perl)/クライアントサイド(JavaScript)フレームワークも別途用意します。
大概はこれをつかうと楽にそこそこ便利なAPIをおてがるに開発出来る様になる予定です。

シンプルな動作

Jekillと同様に記事ファイル(Markdown)とテンプレートから静的なHTMLを生成するだけです。
gitで管理しやすいと思います。
静的ファイルサーバーがあれば公開可能なのでやろうと思えばGithub Pagesとかでも公開出来ます。*3

使い方イメージ

インストール

$ cpanm App::Yomiuri

新しいブログを作成

対話式で良い感じに設定作ってくれる。

$ yomiuri create MyBlog
title: My Blog of darkness
description: publishing my darkness
creating yomiuri.toml ... OK
creating MyBlog ... OK
$ cd MyBlog
$ git init
$ git add .
$ git commit -m 'initialize commit'

暗黒面を綴るブログが出来ました。

カテゴリの追加

カテゴリははてブと同様にタグっぽいやつ。

$ yomiuri category add darkness
$ yomiuri category add emacs

darknessとemacsという2つのカテゴリが出来ました。

記事の作成/編集

insert or update的な感じで処理してくれるのでファイル食わせるだけです。
h1(レベル1の見出し)の前に[]でカテゴリを囲んで書くとそのカテゴリの一覧に追加してくれます。

$ cat > entry/hoge.md
[darkness][emacs]My first entry.
===============

Hi.

I write a blog post for the first time. 
My hobby is to messing about with emacs.
^D
$ yomiuri entry entry/hoge.md

HTMLなどの生成

コマンド一発でお手軽生成

$ yomiuri publish
creating htdocs/index.html ... OK
creating htdocs/entry/hoge.html ... OK
creating htdocs/archive/1.html ... OK
creating htdocs/config.json ... OK
creating htdocs/meta.json ... OK
生っぽい感じで拡張
$ cat > htdocs/js/darkness.js
(function () {
  var Comment = {
    model: null,
    view:  null
  };

  Comment.Model = Backbone.Model.extend({
    apiUrl: "http://api.yomiuri.yourhost.com/comment/",
    list  : function () { return this.get("list"); }
  });
  Comment.View = Backbone.View.extend({
    el     : "#yomiuri-comment",
    model  : new Comment.Model(),
    events : {
      "click .button.add":    "openAddEditModal",
      "click .button.res":    "openAddEditModalWithRes",
      "click .button.submit": "submit"
    },
    initialize: function() {
      Comment.model.get(this.$el.attr)
      this.template      = _.template($("script#yomiuri-comment-template").text());
      this.modalTemplate = _.template($("script#yomiuri-comment-modal-template").text());
      this.render();
    },
    openAddEditModal: function (e) {
      $("#yomiuri-comment-modal").html(this.modalTemplate());
      $("#yomiuri-comment-modal").modal("show");
    },
    openAddEditModalWithRes: function (e) {
      var targetCommentId = e.target.getAttribute("data-comment-id");
      $("#yomiuri-comment-modal").html(this.modalTemplate({ targetCommentId: targetCommentId }));
      $("#yomiuri-comment-modal").modal("show");
    },
    submit: function() { throw "飽きた"; },
    render: function() {
      this.$el.html(this.template({ list: this.model.list }));
    }
  });

  Yomiuri.router.on("entry/:name", function () {
    new Comment.View();
  });
});

})();
^D

本日の一言

Jekillでよくね!!!!!!という気持ちは凄く分かります。
ぶっちゃけ最初はPerlでJekill的な奴自作してみよっかなー的なところから始まって、
JS自由に書いて機能拡張する事考えたらある程度フレームワークあると楽だよねってなって、
ああいう感じの静的HTML吐く系のブログエンジンを利用者が独自拡張するためのアプローチとして、
こういう感じの事が『手軽に』出来たら楽しいんじゃないかなと思っている。
そのためには仕様と実装をサポートするライブラリの整備が不可欠なので、
また、その肝心の部分はまだまじめに作り始めてないので実装が進んだらまた記事書きます。
まとまんねーーーーーーーーーーーーーー

本日のこだわりぽいんと

宗教間戦争が起きないようにcatで書きました

*1:http://d.hatena.ne.jp/hasegawayosuke/20130302/p1

*2:なんか足りない気もしつつ実装段階でまた考え直す

*3:Github Pagesに公開するのはgitのrootがそのままページのrootになるという仕様上ちょっと面倒なのでなんか上手い手段を考え中…