ノンアルコールビール2014
身体の都合でわりとノンアルコールものを飲用しておりますが、約2年前のエントリ(カールユング リースリングとプロシュテル ピュアアンドフリーを飲んでみた)から愛飲対象が変わってるので、アップデートのエントリ。ちなみに今は外だと少しアルコールもありにしてます。
で、少し前からのおすすめはこれ。
ヴェリタスブロイ ピュア&フリー
ヴェリタスブロイ ピュアアンドフリー /パナバック(ノンアルコール) 330ml缶 330ML × 24缶
- 出版社/メーカー: パナバックコーポレーション
- メディア:
- この商品を含むブログを見る
2ケースまでは同送料。ビールの本場ドイツ直輸入ノーアルコールビール!ノンアルコールビール ... |
前飲んでたプロシュテルが手に入らなくなり、別のを探したらこれに行き当たりました。モルト・ホップ・水・酵母のみを原料にするというドイツの「ビール純粋令」を守っているというところは同じです。ので、国産ノンアルのような変な味はしません。そしてプハァ感があります。もちろん普通のビールと比べちゃうと物足りなさはあるんですが、なかなかいけます。しかも安いという。ということで、今はこれか炭酸水を愛飲しております。
アルコールを制限している方の参考になりましたら。
読書メモをメディアマーカーからブクログへ移行
時間を作ってなるべくエントリ書いていこうかな、と。
ということで、読書記録に使用していたサービスを、メディアマーカーからブクログ - web本棚サービスへ移行しました。そのメモです。
移行理由
特に1つ目ですね。使い勝手があまりよくなかったので。
移行作業
メディアマーカーからブクログへ移行 - おもに洋ゲー日記を参考に、過去データを移行しました。おかげであまり時間をかからず完了しました。
OSXでLibreOfficeもなかったので、以下の流れでやりました。
- メディアマーカーからUTF-8でCSV出力
- NumbersでCSVカラム編集
- Numbersでは項目のダブルクオートくくり出力ができなかったので、UTF-8で再度CSV出力
- テキストエディタでダブルクオート追加
- nkfでShift-JISに変換
- ブクログにCSVで一括登録
移行後の感想
ありゃ?って、事前に試して移行しろよ自分。
まあ、しばらく気になっていたことができたのでスッキリしました、ということで。
DevLOVE「とあるアジャイル実践者の愛媛での話」参加メモ
昨日の話ですが、DevLOVE「とあるアジャイル実践者の愛媛での話」に参加してきました。
とあるアジャイル実践者の愛媛での話。 - DevLOVE | Doorkeeper
話の運び方や話題のチョイス等々素晴らしく、有意義で楽しい時間を過ごすことができました。ありがとうございます!
上記イベントに関しては文字起こしもある素晴らしいエントリがありました(ありがとうございます!)。
Cuppa Coffee: 勉強会参加メモ:DevLOVE「とあるアジャイル実践者の愛媛での話」
詳細は上記をみていただくとして、私は参加のきっかけおよび印象に残った点のみ書きたいと思います。
きっかけ
一番の理由は私が愛媛出身であり、何らかの理由で愛媛に移ることがあるかもしれないからです。少しでも情報を掴んでおければと。また子どもが生まれたことにより価値観が変わりつつあり、愛媛に限らず、地方で働くということが少し気になっていたというのもあります。
印象に残った点
松山の家賃が安い
私の認識では松山は都会だったのですが、80平米のマンション賃貸料金が月7万以下て…安。
大事なものを見つめるということ
同意という意味で印象に残っています。私も子どもが生まれたために自分の時間を減らさざるを得なくなり、何かを捨てて何かを選ぶという選択をすることになりました。他者が恨めしいという気持ちで生きていくことになるのかなぁとか思っていたのですが、取捨選択をしてしばらく過ごした結果、わりとスッキリした自分が居て、びっくりしています。
まあそれはそうと、地方で働くことも視野に入れるとさらなる取捨選択を迫られることになるので、より深く考えることになりそうです。ただ、選択の余地なく移ってしまうことになる前には考えておきたい。
「しなければならない」の呪縛
よくよく考えてみるとその呪縛を産んだのは自分の選択であることに気がつくと、状況を変えることもできるかもよ、と。色々思い当たるところがあるので、見つめなおしてみます。
エンジニアだけでは多様性がない
私はツッコミ対応の面倒臭さから多様性を避けようとする癖があり、それで物事を先に進めて後ほどツッコミを喰らい被害を大きくする傾向があるので、耳が痛いです。
リモート勤務について
やっぱりコミュニケーションは難しくなる。それを増やそうと努力するのではなく、コミュニケーションが少ないという前提でうまく回す方法を考えたほうがいいかも、とのこと。 市谷さんもリモートワークではコミュニケーションが取れなくて、色々やってみたがダメだった、といっていたのも印象的。
Gruntの復習(5) 色々なタスクを追加しよう
Gruntの基本的なところはおさえられた気がするので、他にどのようなことができるか見てみることにします。
grunt-contribを見てみる
前回書いたように、contrib
と付いているプラグインはいわば公式プラグインのような扱いなのですが、その中で初めての人向けによく使いそうなものをまとめたプラグインがあります。その名もgrunt-contribプラグイン。ありがたい。
gruntjs/grunt-contrib · GitHub
ということで、まずはこのgrunt-contribプラグインに入っているものを見て、その中から自分に必要そうなものを選ぶのがよさげです。ということで見てみましょう。
- grunt-contrib-clean ファイル・フォルダの掃除
- grunt-contrib-coffee CoffeeScriptコンパイル
- grunt-contrib-compass Sass+Compassコンパイル
- grunt-contrib-compress ファイル・フォルダの圧縮
- grunt-contrib-concat ファイル結合
- grunt-contrib-connect Webサーバ起動
- grunt-contrib-copy ファイル・フォルダのコピー
- grunt-contrib-cssmin CSSの圧縮
- grunt-contrib-csslint CSSのLint
- grunt-contrib-handlebars Handlebarsコンパイル(JST)
- grunt-contrib-htmlmin HTMLのminify
- grunt-contrib-imagemin 画像のminify
- grunt-contrib-jade Jadeのコンパイル
- grunt-contrib-jasmine Jasmine実行
- grunt-contrib-jshint JSHint実行
- grunt-contrib-jst UnderScoreコンパイル(JST)
- grunt-contrib-less LESSコンパイル
- grunt-contrib-nodeunit NodeUnit実行
- grunt-contrib-qunit QUnit実行
- grunt-contrib-requirejs RequireJS最適化
- grunt-contrib-sass Sassコンパイル
- grunt-contrib-stylus Stylusコンパイル
- grunt-contrib-uglify UglifyJSでJSのminify
- grunt-contrib-watch watch
- grunt-contrib-yuidoc YUIDocコンパイル
逆の観点から見ると、これらのツールがよく使われている、ということになりますね。
grunt-contribを使う
今までと同様にnpm install grunt-contrib --save-dev
を実行して、Gruntfile.coffeeにgrunt.loadNpmTasks 'grunt-contrib
と書くだけ。これで上記がすべて使えるようになります。上記はnpm一発で入りますし、個別に書く必要がないので、楽ですね。
ということで、grunt-contribを使って用途にあったものを作るのがよさそうです。
grunt-contribで気をつけるところ
すでにgrunt-contribほげほげプラグインを使っているところにgrunt-contribプラグインをnpm install
すると、他プラグインとのバージョン依存でエラーになったりすることがあります。以下はgrunt-contrib-cssminを入れていたところにgrunt-contribを入れて出たエラーです。
npm ERR! peerinvalid The package grunt-contrib-cssmin does not satisfy its siblings' peerDependencies requirements! npm ERR! peerinvalid Peer grunt-contrib@0.8.0 wants grunt-contrib-cssmin@~0.6.2 npm ERR! System Darwin 13.0.0 npm ERR! command "node" "/Users/masataka/.nodebrew/current/bin/npm" "install" "grunt-contrib" "--save-dev" npm ERR! cwd /Users/masataka/src/grunt-test npm ERR! node -v v0.11.10 npm ERR! npm -v 1.3.23 npm ERR! code EPEERINVALID npm ERR! npm ERR! Additional logging details can be found in: npm ERR! /Users/masataka/src/grunt-test/npm-debug.log npm ERR! not ok code 0
Peer grunt-contrib@0.8.0 wants grunt-contrib-cssmin@~0.6.2
とありますので、npm install grunt-contrib-cssmin@~0.6.2 --save-dev
とバージョン指定インストールを実施するか、npm uninstall grunt-contrib-cssmin
とアンインストールしてしまうのも手です。そして再度npm install grunt-contrib --save-dev
すると。
現場からは以上です。
@pageでの長さ単位はem,ex以外にしよう
とあるWebサイトをPDF化するにあたり、偶数ページと奇数ページでマージンを変更する必要があったのですが(いわゆるノド余白)、OS標準の機能やAcrobatでもなかなかうまくいかず、以下の助言が。
@suzukima @page:left {margin: 〜;} @page:right {margin: 〜;} って効かないですかね
— ろす@ぱらむしる (@lost_and_found) 2014, 1月 14
そうかPaged Mediaって聞いたことがあったわ。Paged Mediaは印刷など、ページの概念が存在するメディアに関する仕様です。@page
は、印刷時のCSSを指定するものと考えるといいでしょう。そして@page:left
で左側ページ、@page:right
で右側ページのCSSを指定することができます。早速以下のCSSを適用してみました。
@page { margin: 1em; } @page: left { margin-right: 3em; } @page: right { margin-left: 3em; }
しかし効かない。ちょろっと調べてみると、:left - CSS | MDNではFirefox未実装、Chromeは?なのでまだ実装されてないのかな、とその場はさっくり諦めました。
しかし、その後帰路にて「もしかしたらベンダプレフィックスが必要だったのかも」と気になってきたので、まずは仕様から読んでみることにしました。
仕様はこちら。CSS2.1のお話です。
で、@pageについて書いてある13.2.1 Page marginsのところを見てみると、こんな文が。
The page context has no notion of fonts, so 'em' and 'ex' units are not allowed.
emとexは使えないとな!これか!ということで以下を試してみたところ、
@page { margin: 1cm; } @page: left { margin-right: 5cm; } @page: right { margin-left: 5cm; }
できた!
言われてみればたしかにpage contextにはフォントの概念はないよな…
これでやりたかったことが1つ解決しました。@lost_and_found さん、ありがとうございます!
ちなみにPaged Mediaの次の仕様はCSS Paged Media Module Level 3として標準化中、現在Workind Draftです。ヘッダやフッタを挿入したり、ページ数を入れたりとかできるらしいです。楽しみですね。
Gruntの復習 (4)watchタスクを追加しlivereloadしよう
またかよ禁止。
Gruntの復習 (3)タスクの書き方 - 鴨のいいカモですの続きで、まずはwatchタスクのみとりあげてみることにしました。自分が今Gruntを使っているのはこのwatchタスクがあるからです。watchタスクは、ファイルを監視し、ファイルに変更があると指定したタスクを実行します。これで、変更ごとにコマンドを実行する手間から開放されます。
さらに、livereloadと呼ばれるブラウザ再読み込み機能もあり、とても便利です。ぜひ使いましょう。
ということで、前回作成した以下のGruntfile.jsにwatchタスクを追加してみることにしましょう…の前に、これをCoffeeScriptにしましょう。
module.exports = (grunt) -> grunt.initConfig # 実行タスク uglify: options: report: 'min' dest: options: beautify: true files: 'dest/js/scripts.min.js': ['src/js/*.js'] build: files: 'build/js/scripts.min.js': ['src/js/*.js'] # タスク読み込み設定 grunt.loadNpmTasks 'grunt-contrib-uglify' # タスク定義 grunt.registerTask 'default', ['uglify']
すっきり!わかりやすい!ということで、さっそくwatchタスクの追加をしましょう。
watchタスクのためのプラグインを探す
プラグイン検索にはPlugins - Grunt: The JavaScript Task Runnerを使うといいでしょう。頭にcontrib-
とついてるのはGruntのいわば公式プラグインですので、迷った時はそちらをつかうといいかと。
watchで検索するとgrunt-contrib-watchが出てくるので、それを使いましょう。
grunt-contrib-watchの下準備
まずはいつものようにプラグインを追加します。検索結果から見られるドキュメントgrunt-contrib-watchにあるように、以下のコマンドを実行します。
npm install grunt-contrib-watch --save-dev
そして、Gruntfile.coffeeに以下を追加してタスク読み込みさせます。
grunt.loadNpmTasks 'grunt-contrib-watch'
watchタスクの記述
とても簡単で、基本的にはターゲットに監視対象をfiles
で、監視対象変更時に実行したいタスクをtasks
で指定するだけです。以下はsrc/js/*.js
の変更時に、タスクuglify:dest
を実行する例です。
watch: scripts: files: ['src/js/*.js'] tasks: ['uglify:dest']
watchタスクの実行
今までと同じように、grunt watch
と実行するだけです。すると、以下のように監視状態となります。
% grunt watch Running "watch" task Waiting...
ここで、監視対象であるファイルを変更すると…
Waiting...OK >> File "src/js/a.js" changed. Running "uglify:dest" (uglify) task File "dest/js/scripts.min.js" created. Original: 129 bytes. Minified: 134 bytes. Done, without errors. Completed in 0.571s at Wed Jan 08 2014 11:33:07 GMT+0900 (JST) - Waiting...
と表示されます。無事uglify:dest
タスクが実行されました!
これで、わざわざコマンドを実行する手間から開放されます。便利!CoffeeScriptやLESSやSassなどのプリコンパイルが必要な言語にぴったりですね。
livereloadの実行
開発中のよくあるシーンに、ファイルを更新したらWebブラウザの再読み込みを行う、というのがありますが、watchタスクでそれを自動化することができます。
それを確かめるために、dest/index.htmlを適当に準備しておきましょう。
watchのlivereloadオプション有効化
watchにlivereloadオプションがあるので、それを有効化します。watchの記述を以下のようにしましょう。
watch: options: # 追加 livereload: true #追加 scripts: files: ['src/js/*.js'] tasks: ['uglify:dest']
これで、grunt watch
とすると、対象ファイル変更時にWebブラウザへ更新依頼を出すサーバが立ち上がるようになります。が、Webブラウザ側でそれを受け取ることができませんので、その準備をしましょう。
Webブラウザへのlivereloadプラグインの追加
Webブラウザ側で更新依頼を受け取るようにするにはいくつか方法がありますが、楽なのはWebブラウザにliveleload対応プラグインを追加することです。How do I install and use the browser extensions? – LiveReload Help & Supportを参考に、WebブラウザへLiveReload用拡張を追加しましょう。
あとは、grunt watch
を実行し、index.htmlをWebブラウザで開いてプラグインで追加されたボタンを押せば、準備完了です。
src/js/*.js
を変更して保存すると、ブラウザで再読み込みが発生するはず、です。
…しない人は、Webサーバを立ち上げずに、ローカルのindex.html
を見ていないからかもしれません。
Webサーバ立ち上げ
ということで、せっかくなのでwatchついでに確認用のWebサーバを立ち上げておきましょう。これにはgrunt-contrib-connectを使います。
例のごとく
npm install grunt-contrib-connect --save-dev
して、
grunt.loadNpmTasks 'grunt-contrib-connect'
です。
3000番ポートでWebサーバが立ちあがるように、以下の記述を追加します。ドキュメントルートはdestにしています。
connect: server: options: port: 3000 base: 'dest'
これでgrunt connect
とすればサーバが立ち上がるのですが、せっかくなのでwatchとあわせてサーバが立ち上がるようにしましょう。
connectとwachtを実行するタスクを新しく定義します。名前はcwで。grunt.registerTask()
を使います。
grunt.registerTask 'cw', ['connect', 'watch']
これでgrunt cw
とすればサーバが立ち上がり、かつwatchの監視状態となります。
Webブラウザでlocalhost:3000にアクセスすればindex.html
が開くはずですので、そこでlivereloadプラグインのボタンを押し、src/js/*.js
を更新すれば、ブラウザが再読込されるはず、です!
このlivereload、地味なようですがとても快適で、これ無しではやってられなくなります。再読み込みだけさせてタスクを起動しない、という使い方もしているくらいです。未体験な方はぜひお試しください。
次回こそは色々なタスクを…
Gruntの復習 (3)タスクの書き方
Gruntの復習 (2)Gruntfile.jsを書く - 鴨のいいカモですにて色々タスクを追加してみると予告していたのですが、タスクの記述方法をきちんと理解していなかったことに気づいたので、そこを調べてみることにしました。
この部分です!
uglify: { dest: { // ターゲットdest files: { 'dest/js/scripts.min.js': ['src/js/*.js'] } } }
公式サイトのドキュメントであるConfiguring tasks - Grunt: The JavaScript Task Runnerを参考に。
まず基本
JSONで書く…と思ったら、JSONではなくJavaScriptだそうで。ということでJSONだけではなく、JavaScriptで処理を書いてもよいそうです。
タスクについて
Gruntはタスクランナーとありますが、そのタスクは、上記でいうとuglify
の箇所です。Gruntはなにもしないと何もタスクが使えませんが、前に書いたgrunt.loadNpmTasks()
でタスクを読み込むことで、利用可能なタスクを追加することができます。
プラグインの追加によってどのような名前のタスクが追加されるかは、追加するプラグインのドキュメントを確認してください。
タスクは、前回記述したようにgrunt タスク名
で実行することができます。
ちなみに、現在使えるタスクはgrunt --help
で確認することができます。「Available tasks」の箇所に利用可能なタスクが表示されるはずです。
ターゲットについて
タスクには、ターゲットと呼ばれるものを指定することができます。上記でいうとdest
の箇所です。ターゲットは任意の名前にすることができます。そして、複数定義することもできます。それにより、ターゲットごとに違う設定を実現することができます。以下はターゲットごとにminify結果の配置先を変更した例です。
uglify: { dest: { // ターゲットdest files: { 'dest/js/scripts.min.js': ['src/js/*.js'] } }, build: { // ターゲットbuild files: { 'build/js/scripts.min.js': ['src/js/*.js'] } } }
ターゲットを指定して実行するには、grunt タスク名:ターゲット名
でOKです。
ターゲットを指定しないでgrunt タスク名
とすると、全ターゲットを実行します。
変換元および変換先のファイル指定について
Gruntでは多くのタスクでファイルの変換や移動を行います。それらファイルの変換元と変換先は、ターゲットごとに以下の方法で指定することができるようです。
Compact Formatを用いる方法
以下のように、src
に変換元、dest
に変換先を指定します。
target: { src: ['src/a.js', 'src/b.js'], dest: 'dest/c.js', }
Lintのように出力先が不要な場合は'dest'を省略します。また、これにオプションのプロパティをつけくわえることも可能のようです。
Files Object Formatを用いる方法
以下のように、files
を使い、変換元(src/*.js)と変換先(dest/c.js)を指定します。また特徴として、次のようにマッピングを複数持つことができます。
target: { files: { 'dest/c.js': ['src/a.js', 'src/b.js'], 'dest/f.js': ['src/d.js', 'src/e.js'] } }
ただし、オプションのプロパティを付け加えることはできないようです。
Files Array Formatを用いる方法
files
を使い、かつsrc
とdest
も指定します。マッピングを複数持て、かつオプションのプロパティを付け加えることができるようです。ただ、記述が冗長ですね。
target: { files: [ {src: ['src/a.js', 'src/b.js'], dest: 'dest/c.js'}, {src: ['src/d.js', 'src/e.js'], dest: 'dest/f.js'} ] }
変換元と変換先それぞれのファイル指定には、直接指定の他にpath/**/*.js
のような、いわゆるGlobパターンも使用することができます。
optionsについて
options
プロパティを使用することで、タスクのデフォルト設定を上書きすることができます。options
プロパティはタスクごとのみではなく、ターゲットごとに指定することができます。こんな感じですね。
uglify: { options: { report: 'min' }, dest: { // ターゲットdest options: { beautify: true }, files: { 'dest/js/scripts.min.js': ['src/js/*.js'] } }, build: { // ターゲットbuild files: { 'build/js/scripts.min.js': ['src/js/*.js'] } } }
全体でreport: 'min'
(minifyのレポート出力)にし、ターゲットdest
のみbeautify: true
(デバッグ用に読みやすく整形)としています。
これで基本的なタスクの書き方はおさえられた感じです。その他にもファイル指定が便利になるプロパティや、テンプレートや外部データのインポートなどができるようです。詳しくは参考にしたConfiguring tasks - Grunt: The JavaScript Task Runnerを見てください。
次回は色々とタスクを追加してみようと思います、がはてさて。