Middleman + Tumblargh でTumblrテーマをローカル開発する

以前Tumblrのテーマ開発がローカルで出来るとか言ってたけど、結局1枚のhtmlで全てを管理しないといけなかったりして辛い感じだった。Tumblrのテーマカスタマイズ画面にHTML貼り付ける行為はもう仕方ないものと諦めているけど、せめてローカル開発くらいは快適にやりたい。

という願望駆動でググってたらTumblarghというのを見つけた。Ruby Gemで、こいつを使うとMiddlemanでTumblrテーマ開発ができるらしい。なにそれ最高!!!!!!!!!!

LT middleman で tumblr テーマ が開発してみた件 - SlideShare

ということで試した。

セットアップなど

ちなみにbundler経由でインストールします。Tumblarghのページでもbundler使えやと書いてあるし、古事記にもそう書かれている。

Middleman + Tumblargh のインストールとか

Gemfile作成

$ bundle init

Gemfile編集

source 'http://rubygems.org'

gem "middleman"
gem "tumblargh"

インストール

$ bundle install --path vendor/bundle

config.rb編集

Tumblargh、自分のTumblrの記事を取ってこれるとかいう最高の機能があるんだけど、Tumblr APIが必要。ここから取得する。

# tumblargh
require 'tumblargh'
activate :tumblargh,
  api_key: 'APIKEY', # OAuth consumer keyを入れて、どうぞ
  blog: 'blog.tumblr.com' # `memo.brdr.jp` みたいにhttp://を抜いたURLを入れる

Middleman起動

$ bundle exec middleman server

無事起動。
とりあえずサイトのタイトルと記事タイトルだけ表示してみた。

image

うおおおおおおおお！
これで、Tumblrの独自タグをMiddlemanで使えます！！！マジです！！！

テーマの書き方

さて、もうテーマ書いて下さいとしか言いようがないけど、ちなみに言語的にはERBとHamlで書けることを確認しました。Slimだとどう設定してもエラーが出てダメだった。

Hamlではインデントに気をつける

HamlはSlimみたいにインデントでタグ構造を表現する言語だけど、Tumblrの独自タグも一緒にインデントしてはいけない。どういうことかというと、

ダメな書き方

%div.main
  %div.l-container
    {block:Posts}
      {block:Text}
        {block:Title}
          %h1.entry-title
            %a(href="{Permalink}") {Title}
        {/block:Title}
      {/block:Text}
    {/block:Posts}

これはダメ。%h1.entry-titleのインデントが深すぎると言われる。

OKな書き方

%div.main
  %div.l-container
    {block:Posts}
    {block:Text}
    {block:Title}
    %h1.entry-title
      %a(href="{Permalink}") {Title}
    {/block:Title}
    {/block:Text}
    {/block:Posts}

これならいける。Tumblarghによって解釈されているTumblr独自タグはHamlだとタグだと認識されてないっぽい。なのでインデントさせないように書く必要がある。

正直見づらいにも程があるので、おとなしくErbで書くのが一番良さそう。

パーシャルも使える

問題なくパーシャルも使えるので、ヘッダー/フッター/各投稿タイプ、などというようにファイルを分割できて最高っぽい。

!!! 5
%html
  %head
    %meta(charset="utf-8")
    %title {Title}

    = stylesheet_link_tag "style"
  %body
    / header
    = partial 'layouts/_header'

    / main
    %div.main
      %div.l-container
        {block:Posts}
        {block:Text}
        {block:Title}
        %h1.entry-title
          %a(href="{Permalink}") {Title}
        {/block:Title}
        {/block:Text}
        {/block:Posts}

    / footer
    = partial 'layouts/_footer'

    / script
    = javascript_include_tag  "script"

例えばこういうのとかも出来るので、ほんとMiddleman使ってる感じがあって良い。

もちろんLiveReloadもできる

普通にMiddleman使ってるようなものなので、もちろんLiveReloadもいける。他の機能拡張系Gemとかももちろん使えるので、CoffeeScript使ったり画像圧縮したりいろいろできます。

ローカル開発時にリロードしまくるとAPIの上限ヤバそう

テンション上がって小刻みにLiveReloadしまくってたら、Tumblr APIの使用回数の制限に引っかかりそうな気がする。が、Tumblr APIの上限っていくつなのかググっても分からなかった。多分あんまり調子に乗らなければ大丈夫っぽい。

CSSやJSどこに置くか問題

Tumblrは外部ファイルは基本自前ホストするしかないので、外部ファイルの扱いはめんどくさい。参考にしたスライドではGulp使ってビルド時にインライン化するとかあるけど、確かに良いかもしれない。ライブラリはCDNから読みこめばなんとかいけそう。(実案件じゃダメそうだけど)

ということでMiddlemanでTumblrテーマ開発できる感じになった。

前試したFumblrもこのTumblarghも、1年以上前から更新止まってたりするので、最近実装されたTumblr独自タグなんかは表示されない可能性が高い。まぁそれでもこうしてローカルでTumblrテーマ開発できるのはアツい。

まだ試したばっかりなので、トラブルなどが出てきたらまたメモります

1 Notes