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

三角Validator

△をバリデートするブログ

2週間で応用情報技術者試験に合格するためにやったこと

it

午後問題が時間切れで全然出来た感じがしなかったので駄目だったかなーと思って忘れていた応用情報技術者試験の合格証が届いていました。だから何をしたか書いておこうと思いました。

続きを読む

はてなブログのテーマを作っていたらgruntでlessをコンパイルする環境ができていた

hatena grunt
  1. はてなブログboilerplateが公開されている
  2. このboilerplateにはコンパイル前のlessとコンパイル後のcssが含まれている
  3. どうせならlessで書いてコンパイルしたい
  4. gruntを使えばlessファイルの保存を検知して自動コンパイルするタスクが組める
  5. gruntを使うにはnode.jsのパッケージ管理ツールnpmが必要
  6. nodebrewならnode.jsのバージョンも管理できる

ということなので、はてなブログのテーマを作ろうとしたら何故かnodebrewのインストールから始めることになった。

nodebrewのインストール

この辺り読んで入れた。僕はnodebrew installしてしまったけど、nodebrew install-binaryにしたほうが速いしいいと思う。
知らずにnodebrew installしたら大変時間が掛かってたいへん大変だった。

gruntのインストール

Web制作で面倒な作業を自動化するビルドツール、Grunt v0.4 入門|Web Design KOJIKA17

このへん。プラグインについては、まずgruntを入れて

npm install grunt --save-dev

lessをコンパイルする grunt-contrib-less

npm install grunt-contrib-less --save-dev

ファイルを監視して何かをする grunt-este-watch

npm install grunt-este-watch --save-dev

サーバーに繋いでLiveReloadする grunt-contrib-connect を入れた。

npm install grunt-contrib-connect --save-dev

grunt-contrib-watchではなくてgrunt-este-watchにしたのは軽いから。

Node.js - grunt-este-watchとgrunt-contrib-connectで軽快ファイル監視とLiveReload - Qiita [キータ]

Gruntfile.js作成

grunt-contrib-lessでlessファイルのコンパイルを自動化する。 - タチコマ好きなエンジニアのブログ

この辺りを参考にさせてもらった。僕のGruntfile.jsはこちら

grunt-contrib-lessの設定は、開発環境用と

development: {
    options: {
        paths: '<%= less.production.options.paths %>'
    },
    files: {
        '<%= projectName %>.css': '<%= projectName %>.less'        
    } 
}

clean-cssで圧縮してcss出力する本番環境用に分けた。

production: {
    options: {
        paths: ['less'],
        cleancss: true
    },
    files: {
        '<%= projectName %>.min.css': '<%= projectName %>.less'        
    }
},

pathsは開発/本番どちらも同じにしたいので、開発は本番のプロパティ値を参照するようにした。cssはプロジェクトのルートに出力するようにした。

ちなみに<%= %>はgruntのテンプレート機能で、自分で定義したものを使ったり、他のプロパティから参照したり、jsをインラインで実行できたりする。詳しくはここ

grunt-este-watchについては、

esteWatch: {
    options: {
        dirs: ['./', 'less/'],
    },
    'less': function(filepath) { return 'less:development' }
}

カレントディレクトリとlessディレクトリのlessファイルに更新があれば、grunt-contrib-lessの開発環境用タスクが動くという感じ。

そしてgrunt-contrib-connectは、

connect: {
    server: {
        options: {
            livereload: true,
            port: 9000,
            open: 'http://localhost:<%= connect.server.options.port %>/view/'
        }
    }
},

こんな感じでlivereload: trueにしておくと、grunt実行時にLiveReloadに必要なスクリプトをhtmlファイルに自動でインジェクトしてくれる。これをやっておけばブラウザのLiveReloadエクステンションとかはいらない。あとopenにURLを指定することでデフォルトのブラウザを使って自動でそのページを開いてくれるようになる。/view/以下にテスト用のindex.htmlなどをおいているのでそこを指定。

CSSコンパイル

あとはプロジェクトのルートで

grunt

を実行すればターミナルが待機状態になり勝手にブラウザでview/index.htmlが開く。そしてlessファイルを修正すると自動でコンパイルしてブラウザ再読み込みが走る。これはたのしい。

貼り付け

良い塩梅にデザインできたら

grunt less:production

で圧縮して出力されたcssはてなブログのデザインCSSに貼り付けておしまい。css出力先をdropboxとかにしてはてなブログ側で外部css読み込みしておけば一々コピペとかしなくて捗ると思う。

はてなブログテーマのらくちん制作環境 - kyabana's blog

でも僕は様々なしがらみがあってやっていない。人間誰しもしがらみを持って生きているからしかたがないことだと思う。

ソースはGitHubに置いておいた。

distkloc/SankakuValidator

Xamarin StudioでNuGetを使う

.net framework mono

blogを書くのは久しぶりなので、簡単なことを簡単に書くことにした。
今回は.NETのためのパッケージマネージャNuGetをXamarin Studioで使う方法について書いてみる。

続きを読む