kwsktr's study log

kwsktr のおべんきょログ

いまからでも余裕で間に合う Grunt の始め方 :: 短縮版

社内の新人向けに作った。

Grunt とは

自動で決められたことをやってくれるツールです。
ビルドツールなんて呼ばれています。


Grunt: The JavaScript Task Runner

どうやって動いてるの?

node.js で動いています。

簡単な始め方

node.js が動いていることが前提なので node.js と npm が動くことを確認してからはじめましょう。

> node -v
> npm -v


もしインストールしてなかったら...

node.js

Grunt-cliをインストール

最初にコマンドラインインターフェースこと CLI をインストールしておきます。

> npm install -g grunt-cli

Grunt に必要なファイルを知ろう
  1. package.json
  2. gruntfile.coffee (gruntfile.js)
    • 実行するタスクを記述する
package.json を作る

package.json は自分で書くのも面倒なので、自動で作りましょう。


npm init を実行すると、実行した場所に package.jsonを 作成してくれますので、適当なフォルダの中で実行してみましょう。

> mkdir c:\nya
> cd c:\nya
> npm init


これで c:\nya の中に最低限の package.json を作成してくれます。


package.json の記述内容を詳しく知りたい人は...
package.json

Grunt プラグインをインストールする

package.json のある場所で、Grunt プラグインをインストールします。


プラグインはインストールをするときに --save-dev を付けると、package.json に追記してくれます。

> npm install grunt --save-dev


package.json を確認すると...

  // 略
  "devDependencies": {
    "grunt": "^0.4.5"  // ← この行が追加された
  }
gruntfile.coffee(gruntfile.js) を作る

実行したいタスクである gruntfile は、自分で書く必要がありますが一度書けばなんとかなく勘所は掴めると思います。

#gruntfile.coffe
module.exports = (grunt) ->

	# タスク '猫'を作る
	grunt.registerTask 'neko', ->
		# 文字列出すよ
		grunt.log.write "吾輩は猫だにゃー"

	# default の後ろに実行したいタスクの名前を書く
	grunt.registerTask 'default', ['neko']
Grunt を実行してみる

> grunt
>
> Running "neko" task
> 吾輩は猫だにゃー
> Done, without errors.

やりたいタスクがいっぱいあるんだけど!?

こちらのプラグイン置き場から良さそうなのを探すといいよ。


Plugins - Grunt: The JavaScript Task Runner



実際にプラグイン使うときには package.json を読み込むように gruntfile に記述したりとかもします。

#gruntfile.coffe
module.exports = (grunt) ->
	pkg = grunt.file.readJSON 'package.json'

	# 略


プラグインの使い方は別のサンプルを見たほうがよろしいかと思いますので、ばっさり割愛。


始めるまでは物凄く敷居が高く思えましたが、やってみると意外と楽でした。
最初は小さく始めるのがよろしいかと思います。


Git config --global で Sublime Text 3 を使う

素直に SourceTree 使えばいいのかも知れないですが、Git コマンドも覚えておきたいので頑張っております。
日本語 Windows だとなかなか参考になるサイトも書籍も無くて苦労しますが、Sublime Text 3 が使えるような設定ができました。

>git config --global core.editor "'c:/program files/sublime text 3/sublime_text.exe' -w"


ダブルクォーテーションで全体を囲んで、シングルクォーテーションで exe を囲むのがポイントなんですね。


改行コードで怒られたりしますが、使えないわけではないのでもうしばらくは Windows で戦いたいと思います。


コマンドプロンプトのフォント変更

Windows でも、昔よりも「黒い画面」ことコマンドプロンプト(cmd.exe)をいじることが多くなってきたので標準のMSゴシックからフォントを変えてみました。


f:id:kwsktr:20140814043618p:plain


変更といってもレジストリエディター(regedit.exe) でちょっと書くだけでした。

下準備

コマンドプロンプトで使いたいフォントを用意しておきましょう。
例えば メイリオ を使えるようにしてみます。


メイリオ以外を使いたい場合はフォント名を調べておきます。

フォント名の調べ方
  1. C:\Windows\Fonts を開きます
    • フォント でファイル検索しても恐らく大丈夫
  2. 使用したいフォントを選択したら右クリックしてコンテキストメニューを表示します
  3. メニューの中から「プレビュー」を選択します
  4. フォント名をメモしておきます
    • フォント名がコピーする方法が良く解りませんでした
      • コピーする方法をご存知の方がいらっしゃいましたら、コメントとかで教えていただけると幸いです

レジストリエディター(regedit.exe) の起動

Windowsキー + Rキーを押して regedit を実行するか、regedit でファイル検索を行い起動します。

コマンドプロンプトのフォント指定

レジストリエディターでコマンドプロンプトのフォント設定の項目を開きます。

HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows NT\CurrentVersion\Console\TrueTypeFont


探すのが面倒な方は、編集 > 検索(Ctrl + F) で TrueTypeFont を検索すると簡単かも知れません。


ようやくフォントを指定できます。
編集 > 新規 > 文字列値 を選択して、値の名前とデータを入力します。


値の名前は半角文字の 932. から始まるようにしてください。
データは先ほど調べたフォント名を入力してください。


例えば、以下のように指定します。
932. の後は、数字にしたり . を増やしたりと、管理しやすい方法で構わないようです。


f:id:kwsktr:20140814043106p:plain


Windows 932 という標準文字コードはデフォルトで *MS ゴシック が指定されていますが、初期値は変更しないほうがよろしいと思います。

最後にコマンドプロンプトで設定

以上が終わったら、コマンドプロンプトを起動してフォントを指定します。

  1. コマンドプロンプト(cmd.exe) を起動します
  2. ウィンドウタイトル部分で右クリックします
    • ウィンドウ左上のアイコン部分を左クリックでも OK
  3. プロパティ を開いて、指定したフォントが選択可能かを確認してください
  4. あとは好きな様に指定して、コマンドプロンプトを再起動です


小さいことですがカスタマイズして自分好みの環境にできると、仕事がちょっとだけ楽になりますね。


Adsense 広告をクリックするようになった

ブログを書いている人はアウトプットしたいと同時に、なんらかの見返りを求めているとボクは思っている。
見返りは直接的な金銭だったり、承認欲求だったり、はてな村といわれるブロガー同士のつながりだったりするだろう。


ボクの場合、ブログの書き始め当初は純粋なプログラムへのアウトプットだけだった。
もともとはエンジニアブロガーが多いブログとしてのはてなダイアリーへの憧れもあり、プログラム学習の備忘録として使い始めた。
けれども、書いているうちに変化が訪れる。
いつの間にか学習的なことを記述することが極端に減ってきたのだ。


学習をしても一向に成長しない自分や改善されない職場環境(今にして思えば、改善しようとしてなかった)が本当に苦しかった。
永遠の底辺エンジニア、触ると燃えるPHPer、当時としては最先端のアスペルガーと三重苦の状態だったからか、吐き出し口としてのブログとして機能するようになってきた。


例えば、以下の吐き出しエントリーがある。
「はてなダイアリー」やってて良かったな。 :: と、感じたこと。 - kwsktr's study log


2011年の何年も前の記事だけど、いまでもたまに読み返してる。
気持ち悪いけれど、自分の吐き出したエントリーをボクは読み返すことが多い。
脳みそで記憶しようとしても、ボクのアスペ脳ではなかなか難しいみたいで、あの時その時の純粋な感情を言葉にして残すしか記憶を残す手段を知らない。


そして、記録としての記事数が増えていき、自然流入数がある程度の規模になったときにボクは Adsense を導入したりしているし、Amazon や A8 などのアフィリエイトを使うようにもなった。
ブログ の目的に金銭が加わったのだ。


そしていまでは、感情や思考の吐き出し口半分と、アフィリエイトの金銭的な見返り、そして「はてブ」や「いいね」などの承認欲求が得られることがブログを続けるモチベーションとなっている。


と、書きながらまた別の感情があることにも気付いたりもしている。
どうやら、ボクは「はてな」に対して感謝があり、「はてな」へ対してなにか貢献できないか。また、はてな村の人になにかできないか、ブログを書く人に対してなにかお返しをしないと、みたいなことを思ったり考えたりするようになっているようなのだ。

ボクにできることが見つからない

少し別の話になるが「はてな」は好きだけれど、最近の「はてな」についてはうんざりしている部分が強い。
例えば「はてな女子」というカテゴリーの存在とか。


ボク自身は嫁も娘がおり、またフェミニストとして教育を受けてきたために、女性に対しての一定の敬意がある。


だからこそ「はてな女子」という腐れ●●●共の存在が異常なストレスになっていたりする。
単純に羨ましいという裏返しの感情が、物凄いストレスなのだと思う。


はてなーの皆さんも美少女になりたいと思ってませんか?

可愛いが正義やチェンジなど可愛いければ何でも許される風潮をネットは作り上げてしまった。


もしかすると、ボクは美少女になりたいのかも知れない。
ちょっと下ネタ絡めた脳みそ足りない記事で、はてブつくのが本当に羨ましい。
PV 欲しさに性別偽ってメンヘラビッチとしてブログを作り直したい、という欲求と日々戦うのが本当に辛い。


けれども、ボクは40歳手前のチンポついてるアスペルガーなので、嘘を書き続けるのは結構キツい。
加えてボクにとっては「はてな」はアイデンティティを確保する上でかなりのウエイトを占める場所なので、いまさら自分を偽って居心地が悪くすることが恐怖であるし、承認欲求を抑えて依存するしかない。


そんな悶々とした日々が続く中で「はてな」という空間に自分の居場所を作りたいがために、ボクは「はてな」に対してなんらかの利益を捧げたいという想いが湧いてくるのが抑えられなくなってきた。
この数ヶ月、絶望的になにもできない無力感に襲われたりしている。


なにかができるわけでもなく、先日行われていたオフ会に参加する余裕もなかったことが輪をかけてボク自身を責めているようにも感じる。


自覚しているのだが、相当脳みそがやられている。
はてな」に対しては、吐き出し口以上に自己承認としての役割が大きくなってきたように感じている。
我ながら気持ちが悪い。

感謝のクリック10000回

そこで試しているのが、気になる Adsense 広告があったらクリックするようにすることだ。
同じように目にした「はてなダイアリー」「はてなブログ」に、気になる Adsense 広告があったらクリックするようにしている。
ターゲティング広告なら基本的に自分の興味対象を自動的に表示してくれるので、普通は気になる広告ばかりだからあまり選ぶ必要はない。
とはいえ無闇にクリックするのもおかしい気がしているので、惹かれたらクリックくらいのペースでやっている。


この1クリックが非常に良く精神に効くようになった。
クリック課金型の広告であれば、恐らくブログ書いた人、サイト運営者に僅かな金額が届いているはずで、その行為自体でなんとなく許されているようにも思えるのだ。
もちろん広告自体に興味がある内容だから、場合によっては次のステップに進むこともあるし、1クリックは誰にも損がない仕組みに思えてならない。


もしクリックをして欲しいなら、クリックをする人の気持ちを持つのが一番だといったことを、はてなスターを押すこと、はてブをつけることで学んでいたのになかなか気付けなかった。


数年後、このエントリーを見返せるように書くことを継続したいものである。