4009の裏っかわ

はじめまして。
普段はフロントエンドを担当しているR&Dで一番若いshinyaです。
4009サイトがオープンしてはや、2ヶ月。先日SPA化して個人的には一段落した感じです。
このサイトの制作をやらせていただいたので、今回はこのサイトの裏っかわで使っているものの紹介です。

jekyll

github pagesでも使われているので、その界隈では有名なruby製の静的blogサイトジェネレータ。
今回は後述するgulpで吐き出したファイルからblog仕様に生成する際に利用。
めんどうくさい管理画面もなくauthorがmarkdownで記事を作成しbuildすればすぐに完成。

なにはともあれ、動かす。

準備

gem install jekyll octopress redcarpet

で必要なやつを、全部install。

octopress

詳しくは、http://octopress.org/

redcarpet

詳しくは、https://github.com/vmg/redcarpet

install完了したら

jekyll new #{project_name}

で準備完了。

超簡単

構築、制作

上まで完了するとこんな、構成ができている。

.gitignore
_config.yml
_includes/
_layouts/
_posts/
_sass/
about.md
css/
feed.xml
index.html

を

jekyll build

すれば、とりあえず、形になる。
あとは、目指すものに向けごにょごにょやれば、blogができてしまう。

超簡単、お手軽。

実際に記事やサイトの改修をするさいは

jekyll server

これで、サーバーが立ち上がりかつ、ファイルが更新されれば _config.yml の destination にjekyllが構築したファイルがdeployされます。

超簡単、お手軽、らくちん。

カスタマイズ

今回の現制作段階で導入しているのは paginate だけなので一旦それの導入方法をご紹介。

# File: _config.yml
paginate: 5
paginate_path: '/page:num'

みたいに書いとけば paginator に色々はいってるので for やら if やら使って好きなようにできる。

超簡単、お手軽、らくちん、便利。

blog機能として思いつくもので、アーカイブとか、検索とかありますが _plugins/ に放り込めば、簡単に機能追加できる模様（未だ試してない）。
当サイトも、今後フィルター機能などを盛り込んでいく予定。

詳しくは、https://jekyllrb.com/

gulp

nodejs製のビルドシステム。
弊社では、普段の制作から使用させていただいております。感謝感謝
このタイプの子が使えない環境では、もう制作できないといっても過言じゃございません。

詳しくは、http://gulpjs.com/

構成、構築、リリース

_app/ #gulp環境
├──__src__/ #公開されるファイルの一式を格納
 ├── css/
 ├── img/
 ├── jade/
 └── js/
├──bower_components/
├──gulp/
├──node_modules/
├──bower.json
├──gulpfile.js
├──package.json
└──.bowerrc
_drafts/
_includes/
_layouts/
_plugins/
_posts/
_site/ #jekyllのdeploy先
assets/ #サイト構築用の素材
post_assets/ #記事用の素材を格納
_config.yml
favicon.ico
feed.xml
index.html
sitemap.xml

ファイル構成はこんな感じ

htmlはjade、cssはsass、jsはes6で制作。
サイト制作の際、 __src__ 以下に記事以外の公開される全ファイルを格納し、基本的には、そこのみで作業。
そこから、gulpで変換して_appの外に吐き出し。
終わったタイミングで自動でnodeから上述の jekyll build コマンドを叩いてサイトを再構築しながらサイト制作。

var spawn = require('child_process').spawn;

//- イベント登録
stream.on('end', function(){
  var jekyll = spawn('jekyll', ['build', '-s', '{buildする場所}', '--destination', '{deploy先}']);
  jekyll.on('exit', function (code) {
    //- ビルド完了
  });
}.bind(this))
//- ※streamはgulpのstream.

で、改修終えたらgit pushしてstg環境でjekyll buildが走ってrsync。

所感

本当は各自ブランチ切ってstg？でマージしてみたいな流れにしないと、記事のリリースの管理だったり機能追加のpreviewとかが、むつかしい。。みたいな問題があるんだなぁと、なんとなく思った。まあうまく説明できない
jekyllは便利だけど、弊社の通常業務に落とすケースはあんまりないなと思います。
使用できなくもないけど、まあいらない位の温度感。

次回は4009の表っかわの背景でごにょごにょしてるのとか、SPA化の祭に使用したものを紹介をしまっす。