読者です 読者をやめる 読者になる 読者になる

Kuchitama Tech Note

はてな記法がいつまでたっても覚えられないので、はてなダイアリーからマークダウンが使えるこっちに引っ越してきました。

フロント苦手な私にはFrascoが最高のツールだった件

先日のRuby関西で紹介されてた Frascoというツールがとても良さげに感じたので、帰って早速使ってみました。

Frascoとは

Quick starter project for Jekyll including full setup for gulp, Sass, Autoprefixer, Bourbon/Neat/Bitters, Webpack, Imagemin, Browsersync, etc.

だそうです。 要は、JekyllでWebサイトつくるときに、便利なツール類まとめておいたから、さくっと始められるよ。ってことです。

DojoCon JapanのサイトもFrasco使ってるそうです。

Frascoの使い方

とりあえず、 jekyllnpm のインストールは必要です。それぞれ、自分のマシンにインストールしておいてください

それさえあれば、あとはFrasco公式ページに乗っている通り、 Frascoをcloneして、 npm install, npm start すればすぐに利用できます

$ git clone [https://github.com/ixkaito/frasco.git:embed]
$ cd frasco
$ npm install
$ npm start

Frascoのいいところ

  • さくっとブラウザで確認できる
  • デフォルトでイケてるCSSフレームワークが導入されてる

さくっとプラウザで確認できる

npm start するだけで、Jekyllがビルドされてブラウザで確認できます。 sassなどの変更も見てくれるので、かなり快適にページ制作ができます。 とても便利で感動しました。

デフォルトでイケてるCSSフレームワークが導入されてる

これは、 Burbonと Burbon Neat がイケてるってことなんですけど、使いやすくて良いです。

sassファイルの変更も検知して、リロードしてくれるので、コーディング -> 確認の流れがスムーズで快適でした。

Frascoのイマイチなポイント

Frascoを軽く触ってみて、改善したいなと思ったポイントを挙げます。 対応できそうなものは、週末にでもPR投げると思います。

  • Jekyllのバージョンが開発環境に依存
  • プロジェクトのGit管理しづらい

Jekyllのバージョンが開発環境に依存

Frascoでは、gulp を通してjekyllのコマンドやその他のタスクを実行しています。 そのために、ローカルマシンの Jekyll に依存するのは、仕方ないのですが、プロジェクト内に Gemfile などが用意されているわけではないので、Jekyllのバージョンなどの管理は完全にユーザ依存になっています。 複数人でサイトを管理するときに、(CIサービスなど使わなければ)各自のマシンのJekyllバージョンに依存することになります。

これは、ユーザ側で好きに Gemfile を用意すればいいだけのことではあるんですが、Frasco側で推奨Jekyllバージョンみたいなのを用意してもいいんじゃないかと思いました。

プロジェクトのGit管理がしづらい

Frascoはサクッと開発できて便利なんですが、今のところFrasco本体のGitリポジトリを clone してその中で、開発を行います。 そのため、制作しているサイトを自分でGit管理するために色々と作業が必要でした。

  1. .gitディレクトリを削除
  2. git init を実行
  3. リモートリポジトリを用意して、 git remote add する
  4. git commit, git push を実行

あとは、必要に応じて READMEやpackage.json を書き換えます。 READMEは全部書き換えるだけでいいですが、package.jsonは内容を見て、部分的に書き換える必要があります。 大体、package.json 内の次の項目を書き換えるといいでしょう。

  • name
  • version
  • description
  • repository
  • keywords
  • author
  • bugs
  • homepage
  • license

これは、Frascoをcloneして使うのではなく、 yo などで、プロジェクトの雛型を吐き出すようにすればいいんじゃないかと思います。 私自身はyoでテンプレートを作ったことはないのですが、少し勉強してできればPR投げたいなと思っています。

Frascoで作ってるもの

なにがタイムリーだったかって、ちょうどいい加減去年の大都会で宣言した A Tour of Go のScala版作るの真面目に取り組もうとしてたからです。

Jekyll使って作ろうというのは、なんとなく考えてたんですが、フロント開発が苦手で着手が先延ばしに鳴ってましたが、Frascoあれば雛型が出来上がってるので、重い腰がすっと上がりました。 これから、マジメに作ります。