今までデザインテロを行う準備のための情報をずっと書いてきましたが、今回はいよいよ実践です。ターゲットとして狙うのはRubyで出来たCMS「Lokka」。「Lokka」の作者は「Webデザイナーの為の「本当は怖くない」”黒い画面”入門でもお馴染みのkomagataさんです（すっごい身内ですが…）。今回はLokka本体を攻めるのではなく、
「Lokkaのテーマの作成をしてgithubにそれを公開する」、というのに挑戦したいと思います。今回のデザインテロが僕も含めてデザイナーの方々のお手並み拝見って感じで、みんなの作ったテーマを見せ合う機会になれば、と思います。そうそう、このKUROIGAMENもLokkaで作られてます。
「テーマ」という言葉が出てきましたが、Lokkaはwordpressと同じで、見た目の部分に関わるファイルは別になってて、それをテーマと呼びます。テーマを格納するフォルダに自作のテーマを入れて、Lokkaの管理画面からそのテーマを使って表示るように設定をします。
githubからgitを使ってLokkaをローカルにclone
では、まずはローカルでLokkaを動かすところから。Lokkaはgihubにリポジトリがあるのでそこからローカルにcloneします。
Lokkaのリポジトリ
今回は開発中のLokkaに手を入れるという訳ではなく、いじったら作者にpull requestを送ったりや、別の進化を遂げたLokkaを公開する、ということはしません。Lokkaのテーマだけを公開するので、今回はLokkaのリポジトリを自分のリポジトリにforkをする必要はありません。では、早速自分のマシンにLokkaのローカルリポジトリを構築しましょう。
$ git clone git@github.com:komagata/lokka.git
はい、このコマンドを打つだけです。あと、ちなみになんですが、僕の場合は、サイトのローカルリポジトリを作るディレクトリを「Users/macida（それぞれのユーザー名）/Sites/」の中に指定しています。この辺は人によってやり方が違いますが、自分のユーザーのhome直下でサイトを開発するより、こっちのディレクトリの方が余計なものがないのですっきりしてておすすめです。
黒い画面を立ち上げたら、
$ cd Sites
…と、ディレクトリを移動した後に、git cloneをやると、そのディレクトリにローカルリポジトリが出来ます。
ついでに、今回はLokkaのローカルリポジトリを作りましたが、今後Lokkaをいくつもローカルに作っても大丈夫なように、
$ git clone git@github.com:komagata/lokka.git my_first_lokka
…と、cloneするリポジトリのあとの変数に、Lokkaのリポジトリを収めるフォルダ名を付けると便利です。上記のコマンドでは「my_first_lokka」というディレクトリに、Lokkaのリポジトリが収められます。
cloneしたLokkkaをローカルで立ち上げる。
さて、次は先程cloneしたLokkaをローカルで立ち上げる作業です。便利なことにその手順はLokkaのREADMEに書いてあります。ここにもコピペしておきましょう。
INSTALLATION
$ gem install bundler
$ git clone git://github.com/komagata/lokka.git
$ cd lokka
$ bundle install --path bundle --without production test
$ bundle exec rake db:set
$ bundle exec rackup
コマンドがまんま書いてありますね。これをそのままやるだけでOKという。簡単、簡単。
POINT!
プログラマーの方に是非聞いていただきたいのですが、githubでリポジトリを公開する際はREADMEの内容を充実させるのがおすすめです。ここにローカルで立ち上げる手順やこのリポジトリの内容などを書いておいていただけると、我々デザイナーもデザインテロがやりやすくなります。
では、まずは最初のコマンドに挑戦。
$ gem install bundler
Lokkaはrubyで出来たCMSなのですが、rubyで作られたアプリには「RubyGems」というプラグインみたいな機能が使えて、そのプラグイン一つ一つを「gem」と呼びます。
その「gem」の一つである、「bundler」というgemを今回インストールしますよ、というコマンドです。bundlerがまた便利でgemで、そのアプリを立ち上げるのに必要なgemを一つのセットとしてパッケージにしてくれるgemです。今回はLokkaを立ち上げるので、Lokkaを立ち上げるのに必要なgemのセットを作者であるkomagataさんがbundlerでセットにしておいたので、その機能を使うためのgem、bundlerを使えるように自分のマシンにinstallする、というのが今回の手順です。
デザイナー的にわかりやすく説明すると、例えば自分でwordpressのテーマを作成したとします。そのとき、そのテーマのパンくずを表示する部分には「Breadcrumb Nav XT」っていうプラグインをよく使いますよね。それが入ってないと自分が作ったテーマを第三者が使うときにちゃんと表示されないですよね。そんな感じで、これを使うときはこのプラグインが必要、ってものをまとめてインストールできる機能が「bundler」です。wordpressにもそういった機能があったらいいなぁ…と、常々思っています。
んじゃ早速、と、このコマンドを打ってみたらいきなりエラー！
WARNING: Installing to ~/.gem since /Library/Ruby/Gems/1.8 and
/usr/bin aren't both writable.
WARNING: You don't have /Users/machida/.gem/ruby/1.8/bin in your PATH,
gem executables will not run.
ERROR: Error installing bundler:
bundler requires RubyGems version >= 1.3.6
こんなメッセージが表示されました。ちゃんとこのエラーメッセージを読んでみると、二つの原因でエラーが起きてることがわかります。黒い画面が英語がバーっと出てくることがちょくちょくありますが、結構ここにハマった状況を抜け出すヒントが隠されてるんですよね。なので、英語でもちゃんと読む必要があったりして、黒い画面って面倒。
- 「/Library/Ruby/Gems/1.8」と、「/usr/bin」に書きこむ権限がないよ。
- 「/ Users/machida/.gem/ruby/1.8/bin」にPATHが通ってないのでgem
が実行できないよ。
- 「RubyGems」のバージョンは1.3.6以上じゃないとbundlerは使えないよ。
…と、黒い画面は言ってます。
まず、「3」のバージョンの問題から。バージョンがちゃんと対応してないと始まらないので、「RubyGems」のアップデートからやってみたいと思います。Xcodeをインストールしたときに「RubyGems」も一緒に入ったんだと思うのですが、それが古かったんですね。
update方法はここにありました。
$ gem update --system
これでいけるそうなんですが、やってみたらエラー。上記のエラーの原因「1」にある書き込み権限のせいでupdateも行えないみたいです。
じゃあ「sudo」を足せばいけるかも。
$ sudo gem update --system
いけた！めでたく1.4.2にupdateされました。File not found: READMEなんて出てるけど、まぁいいや。
もう一度bundlerのインストールに挑戦。
$ gem install bundler
またエラーが出たけどエラーメッセージが短くなりました。
ERROR: While executing gem ... (Gem::FilePermissionError)
You don't have write permissions into the /usr/bin directory.
ほほう、「/usr/bin」の書き込み権限がないよ、って言ってますね。他のエラーの原因は先程の作業でクリアしたみたい。権限のことなら「sudo」で解決か！？
$ sudo gem install bundler
出来た！無事にbundlerのインストールが完了しました。
さて、続いてのコマンド、
$ git clone git://github.com/komagata/lokka.git
リポジトリのcloneですね。これは先程やってしまったので飛ばしてOKですね。今回僕は、
$ cd Sites$ git clone git@github.com:komagata/lokka.git my_first_lokka
と、Sitesの中に「my_first_lokka」という名前でcloneしました、
続いては「cd」。Lokkaのローカルリポジトリのディレクトリに移動します。
$ cd lokka
僕は「my_first_lokka」というディレクトリをLokkaのディレクトリにしたので、
$ cd my_first_lokka
に、なります。ここまでは問題ないですね。次のコマンドは、
$ bundle install --path bundle --without production test
さっきまでハマってた、bundlerを使って、Lokkaを立ち上げるために必要なgemのセットをインストールする、っていうコマンドです。やってみましょう。
何だかちょっと時間がかかって色んなものが入ってきました。無事完了です。これでLokkaを立ち上げるために必要なgemのセットが自分のローカルのLokkaの中にインストールされました。次のコマンドは、
$ bundle exec rake db:set
bundlerでインストールしたgemの中に入ってる「rake」ってやつを使ってdbをLokkaで使うように初期化するってコマンドですね。Lokkaが便利なのは、wordpressと違って、あらかじめmySQLやapacheなんてものをこっちで用意しなくても、「bundler」にパッケージングされた「gem」の中に必要なものが全て入ってるから、それをインストールしたら、あとは手順に従ってコマンドを打つだけでいい、ってところです。現在、komagataさんはさらに黒い画面を使わなくてもMacのローカルでLokkaを立ち上げるアプリを開発して、さらに敷居を下げようとしてますが、まぁ、僕らオープンソースにデザインテロをしようとしてる攻めるデザイナーは黒い画面でやっちゃいましょう。
Upgrading Database...
Initializing Database...
こんなメッセージが出ましたね。データベースをアップグレートして、初期化したみたいです。これも成功。では、最後のコマンドへ。
$ bundle exec rackup
これは、ローカルのLokkaを立ち上げるっていうコマンドです。これからローカルのLokkaを立ち上げるときはまずこのコマンドを打ってから始めるので、今後もしょっちゅう使うことになります。
うまくいったっぽい！では、ローカルのLokkaへブラウザでアクセスしてみましょう！http://localhost:9292/（ローカルのLokkaはこのURLになります）。
やった！Lokkaが立ち上がりました！
これも重要なんですが、立ち上がったLokkaを閉じる際には、「control ＋ C」を押します。これで、Lokkaは閉じます。
これからLokkaのテーマカスタマイズ方法や、Lokkaで作ったブログを公開する方法もここで書いていきますが、とりあえずは「public/themes」の中を覗いて、今あるテーマのファイルの構造を見たり、/admin/にアクセスして管理画面を覗いたりしてみてください。結構wordperessに似てるので、鋭い方はガシガシカスタマイズ出来ると思います。
komagataさん、Lokkaのデザインテロリストに向けたLokkaのカスタマイズ方法の記事お願いしますー！
