2014-01-05

Gruntの復習 (2)Gruntfile.jsを書く

grunt

前回の(1)インストールから初期設定に続き、実行するタスクを記述するGruntfile.jsを作成してみます。

Gruntfile.jsの構成

Gruntfile.jsは以下のような構成になっています。

module.exports = function(grunt) {
  grunt.initConfig({
    // ここに実行タスクを記述する
  });
  // プラグインを使用するときにタスクを読み込む記述を追加
  // grunt.loadNpmTasks('');
  
  // デフォルトタスクなどのタスク名を設定
  grunt.registerTask('default', []);
}

このように、grunt.initConfig()にタスクを記述し、grunt.registerTask()でdefaultなどにタスクを指定したり、タスク名を設定したりします。また、Gruntはプラグイン機構によりさまざまな機能を実現しています。プラグインを利用する際には、タスクを読み込むためにgrunt.loadNpmTasks()を使う必要があります。

Gruntfile.jsへのタスク追加

プラグイン grunt-contrib-uglifyを使い、JavaScriptのminifyを実行してみましょう。

プラグインのインストール

以下のコマンドを実行します。gruntと同様、--save-devのオプションをつけてpackage.jsonへ記述が追加されるようにします。

npm install grunt-contrib-uglify --save-dev

タスク読み込み記述の追加

Gruntfile.jsへ以下を追記し、grunt-contrib-uglifyのタスクを読み込んで、使えるようにします。

grunt.loadNpmTasks('grunt-contrib-uglify');

現状のGruntfile.jsは以下のようになっています。

module.exports = function(grunt) {
  grunt.initConfig({
    // ここに実行タスクを記述する
  });
  // プラグインを使用するときにタスクを読み込む記述を追加
  grunt.loadNpmTasks('grunt-contrib-uglify');
  
  // デフォルトタスクなどのタスク名を設定
  grunt.registerTask('default', []);
}

実行タスクの記述

grunt.initConfig()内に実行するタスクを記述します。ここでは仮に、src/js/*.jsをminifyしてdest/js/scripts.min.jsに出力するようにします。記述後のGruntfile.jsは以下のようになっています。

module.exports = function(grunt) {
  grunt.initConfig({
    // ここに実行タスクを記述する
    uglify: {
      dest: {
        files: {
          'dest/js/scripts.min.js': ['src/js/*.js']
        }
      }
    }
  });
  // プラグインを使用するときにタスクを読み込む記述を追加
  grunt.loadNpmTasks('grunt-contrib-uglify');
  
  // デフォルトタスクなどのタスクを設定
  grunt.registerTask('default', []);
}

デフォルトタスクは設定していませんが、この時点でもタスク名を指定したタスクの実行が可能です。今回の場合だと、grunt uglifyでminifyが実行されます。

デフォルトタスクの設定

defaultというタスク名のタスクを指定すると、gruntを実行するだけでそのタスクが実行されます。ここではuglifyをデフォルトタスクにしてみましょう。grunt.registerTask()の箇所を以下のように変更します。

grunt.registerTask('default', ['uglify']);

gruntを実行するだけで、minifyが実行されるようになりました。

これで基本的なGruntfile.jsが完成です。Gruntfile.jsは次のようになります。

module.exports = function(grunt) {
  grunt.initConfig({
    // ここに実行タスクを記述する
    uglify: {
      dest: {
        files: {
          'dest/js/scripts.min.js': ['src/js/*.js']
        }
      }
    }
  });
  // プラグインを使用するときにタスクを読み込む記述を追加
  grunt.loadNpmTasks('grunt-contrib-uglify');
  
  // デフォルトタスクなどのタスク名を設定
  grunt.registerTask('default', ['uglify']);
}

ちなみに、Gruntfile.jsの代わりにCoffeeScriptを使ってGruntfile.coffeeを作成して使用することもできます。特にプラグインや設定の必要もありませんので、Coffeeに慣れている方はどうぞ。個人的にはそんなにCoffee使ってないのですが、Gruntの範疇なら簡単な記述しかしないので特に困ることもなく書けますし、なにより楽なんでいいかなと。

次回は~~色々とそれっぽいプラグインを追加してみることにします。~~と思ったのですが、タスクの記述方法についてきちんと理解していなかったため、そこを調べてみることにしました。

2014-01-02

Gruntの復習 (1)インストールから初期設定

grunt

2014/1/2

Gruntは使っていたのですが、さわりしか使っていない気がしたので、整理も兼ねて学び直すことにしてみました。ちなににGruntのバージョンは0.4.2を使用しています。

インストール

Node.jsのインストール

Gruntの実行にはNode.jsが必要ですので、インストールします。

公式サイトのダウンロードからパッケージを入手してもよいですし、nodebrewを使うのも手です。

grunt-cliのインストール

Gruntのcliツールであるgrunt-cliをインストールします。

Node.jsのパッケージマネージャーであるnpmから、以下のコマンドでグローバル(システムで共有)インストールします。-gがグローバルインストールのオプションです。

npm install -g grunt-cli

プロジェクトへの導入

package.jsonの作成

Gruntの実行には、npmで使用するモジュール群の依存関係やバージョンを管理するpackage.jsonが必要です。この作成のため、プロジェクトの適当なディレクトリ(トップディレクトリなどでよいと思います)などで以下のコマンドを入力します。

npm init

すると、プロジェクト名やバージョン等々聞かれますので、それに答えていくとpackage.jsonができます。ちなみにnameとversionを書いておけば、あとは削除してもOKのようです。

gruntのインストール

先程はcliツールのgrunt-cliをインストールしましたが、今度は本体のgruntをインストールします。これはグローバルである必要はありませんので、package.jsonのあるディレクトリにて、以下のコマンドを実行してインストールしましょう。

npm install grunt --save-dev

ちなみに--save-devがは、このコマンドでインストールしたモジュールをpackage.jsonの記述にも追加する便利なオプションです。このように、必要なモジュールとして追加されています。

{
  "name": "grunt-test",
  "version": "0.0.0",
  "devDependencies": {
    "grunt": "~0.4.2"
  }
}

このように、package.jsonに必要なモジュールを記述しておくと、package.jsonを受け取った人はpackage.jsonのあるディレクトリでnpm installを実行するだけで記述モジュールをインストールすることができます。複数人での開発などに有用ですね。

で、次は実行するタスクを記述するGruntfile.jsの作成ですが、今日はこのへんで次回に。

2013-12-22

Bootstrap 3をWebページ制作環境にしよう(3) LESSファイルでのカスタマイズ

bootstrap

えらく前になりましたが、前回のGruntでのwatchとlivereload環境設定ができましたら、最後に書いてあるように、トップディレクトリでgrunt watchreloadを実行し、ブラウザ側の拡張機能をonにして、livereloadが実行されるようにしておきましょう。

今回は、スタイルのカスタマイズにCSSを編集するのではなく、LESSを編集して効率的にやりましょう、という話です。LESSでは変数や関数、mixinなどの機能が使えます。Bootstrap3でもそれらを活用してLESSからCSSを生成していますので、利用者もそれに乗っかってやれば、CSSを直接編集するのに比較して効率的に作業ができちゃいます。

LESSファイルの場所

トップディレクトリ配下のlessディレクトリ配下にあります。

たくさんあって面食らうと思いますが、それらをざっくり解説します。

Bootstrap3 LESSファイルの解説

bootstrap.less

BootstrapにおけるLESSファイルの親玉です。LESSでは他のLESSファイルを読み込むことができますのが、ここではその機能を使い、色々なLESSファイルを読み込む記述をしています。これがCSSに変換されると、bootstrap(.min).cssになります。

もし使いたくない機能があれば、そｎ読み込み部分を削除してあげればOKです。

theme.less

Bootstrap3ではフラットデザインにしたくない人向けにbootstrap-theme.cssというスタイルシートを用意していますが、その変換元です。

variable.less

各種変数をここで定義しています。Bootstrap3のカスタマイズサービスで変更可能な変数は大抵ここにあります。このファイルを変更しながら作業するほうがすぐに反映結果を確認することができ、効率的ですね。おそらく、一番変更することになるでしょう。

中の変数については、変数名でなんとなく想像がつくでしょう、ということで割愛します。

mixin.less

clearfixやCSS3機能のベンダプレフィックス付与mixinが定義されています。ここは変更するというよりも、どのようなmixinが定義されているか確認して、余裕があればそれを利用する感じでしょうか。

残りはざっくりとした解説です。

スタイルのベースとなるLESSファイル

grid.less グリッドの定義
normalize.less normalize.css のLESS版
print.less 印刷用スタイル
scaffolding.less スキャフォルド
type.less タイポグラフィ

部品定義のLESS

名前でわかると思います。

alerts.less
badges.less
breadcrumbs.less
button-groups.less
buttons.less
carousel.less
close.less
code.less
dropdowns.less
forms.less
glyphicons.less
input-groups.less
jumbotron.less
labels.less
list-group.less
media.less
modals.less
navbar.less
navs.less
pager.less
pagination.less
panels.less
popovers.less
progress-bars.less
responsive-utilities.less
tables.less
thumbnails.less
tooltip.less
wells.less

その他

component-animations.less フェードアウトなどアニメーションの定義
utilities.less ユーティリティクラス

変更のポイント

まずはvariable.lessを変更して、LESSそのものやBootstrap3でのLESSファイルの構成に慣れてきたらスタイルのベースとなっているものに手を出していく感じになるかと思います。

ということで、このシリーズはひとまずこれで終わり、ということで。

2013-12-16

『HTML5プロフェッショナル認定資格レベル１教科書』を書きました

html5

とっととBootstrapの続き書けやボケって声も聞こえてこなくはないのですが、本を書きましたのでその紹介を。

本について

HTML5プロフェッショナル認定資格　レベル１　教科書

作者: 鈴木雅貴,重田尚孝,立川敬行
出版社/メーカー: エヌ・ティ・ティソフトウェア株式会社
発売日: 2013/12/17
メディア: Kindle版
この商品を含むブログを見る

LPIで2013.01.01から開始される予定のHTML5プロフェッショナル認定資格レベル1向け参考書です。認定資格について詳しくはLPIサイトをご覧ください。

今回は電子書籍のみの予定です。上記のKindleと、Koboは明日17日発売予定です。

HTML5プロフェッショナル認定資格　レベル１　教科書 By: 立川敬行,重田尚孝,鈴木雅貴 - eBook - Kobo

あと、Kinoppyでも出るはず。iBooksも遅れて出る、かな？

中身ですが、あくまで試験対策本であり、試験範囲の知識を網羅するものになっています。リファレンス的な。この試験、やたらと試験範囲が広いですが、これを使えば効率的に情報を収集できるでしょう。問題集もついてます。ただ、読み物として面白いかと言われるとたぶん面白くないのでご注意を。

本を書いてみて

今回は最初から電子書籍のみで出すつもりだったためでんでんコンバーターを検討していたのですが、Markdownがよくわからんという人のために今回は一度HTMLを作って、それを制作会社にEPUB化してもらう方法をとりました。

が、結局最終的にHTMLをMarkdownからpandocで生成していたので、ゴリ押ししてしまえばよかったと思う次第です。そして、MarkdownからHTMLなのにkobo/gaiden使わなかったのは余裕がなかったためです。時間とか心とか。ごめんなさいごめんなさい。

で、EPUB制作。制作会社の方には色々と対応していただきそれには満足しているのですが、今度は自分で最後まで面倒見たい欲が出てきました。ということで、次の機会があって手段を選択できるなら、EPUBまで自分のところで出せる手段をとりたいと思ってます。

ということで

試験を受けようと思う方、本書をぜひご検討ください！

2013-12-02

HTML5 Conference 2013に参加しました

html5

11/30(土)に開催されたHTML5 Conference 2013に参加してきました。ボランティアスタッフとして。

なぜボランティア参加？

勤務先がスポンサーになれなかったので、せめてボランティアでも、と思いまして。

なにやったの？

私はルーム担当でした。やることはセッション部屋のドア開け閉め等の誘導、タイムキーパー、聴講者数計上など。1部屋に3,4名で一人2−3コマ担当という感じです。

ボランティア参加してどうだった？

9:30現地集合は結構早くてびっくりしましたが、ルーム作業をこなしながらセッションを聞けるくらいの余裕はありますし、担当コマ以外は普通にセッション聞けますし、お昼出ますし、スタッフ用休憩場所もありますし、スタッフ同士の交流もありますし、Tシャツもらえますし、懇親会出られますし、ボランティアといいながらかなーりお得なんではないでしょうか。

ボランティアスタッフとしての反省点

セッション終了時の入退場はもうちょっとうまくできたかなぁ、と。担当ドアとかをかっちり決めておくくらいしておけばよかったかも。

振り返って

楽しかったので、またボランティアスタッフとして参加できればと思ってます。html5jスタッフのみなさま、すばらしいイベントに参加させていただき、ありがとうございました！

2013-09-18

Bootstrap 3をWebページ制作環境にしよう(2) LiveReloadの実現

bootstrap

前回の事前準備ができましたら、今度はLiveReloadできるようにしましょう。

WebブラウザへLiveReload用拡張を追加

How do I install and use the browser extensions? – LiveReload Help & Supportを参考に、WebブラウザへLiveReload用拡張を追加しておきましょう。

grunt側でLiveReloadの設定

BootstrapのGruntfile.jsを見るとgrunt-contrib-watchを使っていますので、grunt-contrib-watchしてれば簡単にLiveReloadできるに書いたように、grunt-contrib-watchのオプションで簡単にLiveReloadできちゃいます。

今回は、とりあえずLiveReloadを動作させるということで、以下のようにします。

トップディレクトリ配下にtest.htmlを作成
cssやjsはdist配下のものを使用
test.htmlが更新されたらLiveReloadされる

1,2に合わせたHTMLファイルは以下のような感じです。

<!doctype html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link rel="stylesheet" href="dist/css/bootstrap.min.css">
</head>
<body>
  <h1>LiveReload</h1>
  <script src="http://code.jquery.com/jquery.js"></script>
  <script src="dist/js/bootstrap.min.js"></script>
</body>
</html>

Gruntfile.jsのwatchの部分を以下のようにしましょう。

    watch: {
      /* 略 */
      recess: {
        files: 'less/*.less',
        tasks: ['recess']
        }
      },
      /* 以下htmlを追加 */
      html: {
        files: 'test.html',
        tasks: [],
        options: {
          livereload: true
        }
      }
    }

そして、grunt.registerTask()を実行しているあたりで、ローカルにサーバ起動しつつwatchを実行するgruntタスクを追加しましょう。ローカルでサーバを起動するconenctはすでにありますので、それを使って。今回はwatchreloadというタスク名にします。

  grunt.registerTask('watchreload', ['connect', 'watch']);

LiveReload実施

トップディレクトリで以下のコマンドを実行し、作成したwatchreloadタスクを起動しましょう。

$ grunt watchreload

Webブラウザで http://localhost:3000/test.html を開くと、先ほど作成したHTMLファイルを開くことができるはずです。

そして、WebブラウザにインストールしたLiveReload拡張を有効にして(デフォルトのポートは35729です)、test.htmlを書き換えると、自動でWebブラウザが再読込され、変更した内容が表示されるはずです。LiveReloadが実現できました！

次回は、この環境をベースに、効率的にBootstrapを用いたサイトを作成できるようにしましょう。

2013-09-04

Bootstrap 3をWebページ制作環境にしよう(1) 事前準備

bootstrap

Bootstrap 3からRCが取れたので、いろいろ試してみた結果を。

Bootstrap 2と同様、Bootstrap 3にもビルドの仕組みが含まれているので、それにうまく乗っかれば効率的にWebページを作ることができます。

ということで、まずはその準備から。

Bootstrap 3のダウンロード

なにはともあれBootstrapを入手します。いわゆるソースコードが必要なので、Getting started のDownload latest source codeからzipをダウンロードして展開するか、GitHubからcloneしてください。

Gruntのインストール

Bootstrap 3ではビルドにGruntを使います。

まず、Gruntのインストールにはnodeが必要ですので、お好みの手段でインストールしてください。

次にGruntですが、Grunt 0.3からは、gruntのコマンドラインインターフェースであるgrunt-cliをインストールして利用するようになっています。0.3未満のGruntを使用していた場合は、npm uninstall -g gruntを実行してアンインストールしておきましょう。

grunt-cliはグローバルにインストールしましょう。npm install -g grunt-cliを実行すればインストール完了です。

必要なnpmモジュールのインストール

Bootstrap 3展開後のフォルダに移動し、npm installを実行すると、必要なモジュールが自動でインストールされます。

確認

Bootstrap 3展開後のフォルダからgrunt distを実行します。タスクがいくつか流れたあと、以下の表示が出ればうまくいった証拠です。

Done, without errors.

次回は、この環境でLiveReloadを実現してみましょう。