７９は今何をしているのか？

社内ニートアピールがうざいとか思われてるかもだけど、仕事はしてますアピール。

仕事とかプライベートで使ってるものが多くなってきたけど、それぞれの記事をブログに書くまでの時間がないので意識高めるためにもリストアップしておく。誰かのブログを参考にしてますｗ時間があれば記事も書く。同じことやってたりして質問とかあれば聞いて下さい。

■仕事

・Vagrant

下のAnsibleと連携して使っている。最近だとyeomanのgeneratorとしてvagrantのテンプレート作って、それをyo→vagrant upだけで開発環境構築完了する。爆速（Ansibleのインストールは遅い）。

・Ansible

vagrantを構築して、そこにCassandraとかぶち込むために使ってる。npmリポジトリからインストールさせたり、gitからcloneさせたり、色んなモジュールが揃っていてやりたいことがplaybook.ymlだけで全部書ける。
そしてChefとかより断然シンプルなので、ちょっとした構成管理ツールとしては最高だと思われ。学習コストも低い。

・Cassandra

担当していたゲームのメインデータストア。というかこれ一本。実際は直接CQLでデータ呼び出しがあるわけでは無いのでプロジェクトの実装時にCassandraをあまり意識しないで使えたりしたけど、データ構造・データ設計などコツがいるので良い経験になった。
cqlshでcql叩いたりとかはちょくちょくしている。

・yeoman

順番がおかしいけど最初に言ったVagrantのテンプレ作ったり使ったりするために使っている。vagrantだけじゃなく、Node.jsのプロジェクトもyeomanで一発生成できるようになってる。めっちゃ簡単。シンプル。

・JavaScript

サーバサイドからクライアントサイドまで全部JavaScript漬け。どっち書いてるかわからなくなるレベル。Javaも２年だけやったけど、こっちに慣れるとサーバサイドをわざわざJavaで構築しようと思え無くなる。それくらい楽。
クライアントサイドはtofu.jsという社内のライブラリを使ってActionScript風に書いていた。DOM操作ほぼ無し。
Node.js周りが凄く活発なので、Github眺める時間が増えた。しかしまぁ社内の主席エンジニア様のソースコードが一番勉強になる。

■プライベート

▼サイト制作

・yeoman (主にGrunt)

yo, bowerはあんまり使ってない。というか最初しか使ってないだけだけど。
タダのシンプルな静的ページ作るときに、stylus使ってcss書いて、js圧縮してくっつけて、画像最適化して〜と盛りだくさんでやってみた。

・stylus

流行ってるSassとかLESSとか触ってみたかったので、一番良さそうなstylusにした。
書き方は楽になったけど、まだ上手く使い切れてない。社内のstylus使ってるプロジェクトを教えてもらったので参考にする。

・JavaScript

仕事でやってたクライアントサイドはDOMをあまりいじらなかったけど、コッチは一般的なDOMいじりの方。JavaScript初めてから最初はBackbone.js使ったプロジェクトだったりしたんだけど、それ以来使っていなかったのでリハビリがてら。

・jsHint

カスタマイズしたものを仕事でのチームで共有する使い方が気に入ってから自分でも使っている。これ使ってない人とは仕事出来ないレベル。

・vim-airline

powerlineのセットアップがめんどかったのでコッチにした。キレイ。

・WordPress

感覚で使っている。phpをテンプレートエンジン代わりに使っているというか、phpがフロントエンドに大量に書かれているプロジェクトの巻取りなので正直関わりたくないけどざっくり理解して使っている。カスタマイズ製高くて使いこなしているぽいプロジェクトだったのが勉強になってまぁいい感じ。
多機能で良いんだけど、面倒くさいところが多いイメージ。

▼ネイティブアプリ制作

・cocos2d-x

C++を使うiOSとAndroidに対応したクロスプラットフォームな開発環境。正直まだあんまり触れていないけど、ひと通りAPIを使っているコードは追ってみた。C++も学生ぶりに触っていて、ゲームとして組み上げるのは時間がかかりそうだけど、サイト制作終わったらすぐやりたい。

・Photoshop

当たり前なんだけどネイティブアプリはCSSとか無いので画像が必要になる。
素材も自分で作る。まだ初心者。CC会員登録したよ。Flashとか使ってみたい。
闇デザイナーを目指す。

■今後触っていくもの

・angular.js

Backbone使ったからあんまり抵抗はない。会社で使いそうだから様子見してる。

・OpenFrameworks

インスタレーション作品とか一度は作ってみたいよね！

まとめ

抜け漏れありそう。わざわざ書いてないだけのものもある。herokuのredis使ったーとか。メンドイ。
こういうとりあえずやってる物書くだけってなんか良いな。定期的にやりたい。

こんな感じで最近は環境構築周りのツールとか、実際にプロジェクトを作っていく作業も作業もやってたりする。
新しいものが色々あるなか、どんどん使っていきたいし、それを作る側にもなりたい。
隙を見てpull request送るとかそういう活動もどんどんやっていこう。

筋トレしたら痩せるのめっちゃ楽なんですけどｗｗｗｗｗｗ

最近何を目指しているのかわからないくらい筋トレしています。
一般的な健康な身体を目指すつもりが、気づけば趣味を超えて精神の鍛錬になっていました…。

その中で食事が一番大事、かつ難しいところだったのでメモ。

目的別フェーズについて

大きく分けて

1. とにかく鍛えながら体重を増やすフェーズ

2. 脂質と糖質を制限して無駄な脂肪を燃やすフェーズ

の2つに分けられます。
フェーズごとに説明していきます。

1. とにかく鍛えながら体重を増やすフェーズ

トレーニング開始時点では180cmで60kgしかない状態だったので、週2〜3回のトレーニングに合わせてとにかく食事を取ります。

出来るだけ肉、タンパク質。腹減る事は悪。一日に4〜5食はとっています。

この時はなるべく油ものや、麺、麦は選ばない様にしてます。しかし他に選択肢がなく、腹減るくらいなら食べてもOK。

こうする事で、トレーニングの効果を100%筋肥大に与えていきます。食べ過ぎて脂肪が付くくらいが丁度良いのです。

この生活を半年近く続けて60→69kgまで増やしました。身体つきも変わってきます。

・1の失敗

本来はもっと体重を増やしてから2の脂質と糖質を制限するフェーズに入ります。

しかし良いと思って動物性タンパク質を中心にとる生活をし、健康診断の結果LDLコレステロール値が高くなってしまいました。
脂肪も今までに無いくらい付き、腹が出てモチベーションが下がってきます。

モチベーションはとても大事です。

挫折する前にトレーナーと相談し、身体を絞る次のフェーズに移行することにしました。

2. 脂質と糖質を制限して無駄な脂肪を燃やすフェーズ

ここからはダイエッター向けの内容になります。

・痩せる理論

痩せる方法として、基礎代謝を上げるのが一番効率が良く、リバウンドが無い方法です。
筋トレをして筋肉をつけて代謝を上げ、日々の生活の中で脂肪を燃焼する。
１のフェーズ等で筋肉をつけていればつけている程その効率が良くなります。

逆に悪い方法は何も食べないで体重を落とす方法です。
食べないことで脂肪は減りますが、同時に筋肉も減っていきます。

目標体重に達した時、減量前と同じ食事を摂るとどうなるか？
答えは筋肉が減り代謝が減っている分、太りやすくなります。
これがいわゆるリバウンドというやつです。

・食事制限方法

筋肉を落とさずに脂肪を燃やすには脂質と糖質をカットし、筋肉の形成に必要なタンパク質を十分に摂れば良いのです。
辛い日々ですが、鍛えた後であれば身体のキレが増し、健康的な身体付きになることでしょう。

具体的に期間中食べても良いとされる食べ物を挙げていくと、

• 鶏肉（主にささみ、むね肉皮なし）
• シーフードミックス
• 魚（青魚は油が多いのでなるべくダメ）
• 玉子の卵黄抜き
• ノンオイルシーチキン
• 葉っぱ系の野菜（根菜はダメ）
• きのこ

調理する上でも油や砂糖の量に気をつけます。できれば使わない。

さすがに上記のものだけ食べてると飽きてくるので、ゼロカロリーほげほげの食品はOK。

また、どうしても食べたい場合は朝だけお米もOK。

納豆やとうふも朝だけならばOK。

食べる量は腹八分目を5〜6食。

プロテインは一食としていい。海外製などの甘い製品は注意。

寝る前に甘いプロテインは検討。朝起きて、お腹が空いているようであればOK。

この期間中も注意するのはお腹を空かせちゃいけないということ。

最近はツナ缶が携帯に便利な上に、低カロリー高タンパク食で良かったので愛用してます。


↑脂質がほとんど無いのに高タンパクで、野菜スープ調理されてるので他のノンオイルツナ缶より美味しくてオススメ

この脂質糖質抜き生活を3週間続けるように言われました。
もちろん、トレーニングは週2〜3回続けます。

・2のフェーズを10日間やってみて

69kgあった体重が65.9kgまで減っていました。さすがに痩せすぎです。
原因は食事量不足でした。

確かに脂肪はかなり減って、顔つきも変わるレベルです。

この期間の食事がとにかく難しい。
特に外出中は真面目に決まったものしか食べないという生活ができません。
人と合わせて飲みに行くのも難しく、人付き合いの多い人は大変だと思います。

あと決まったものを大量に食べるというのは精神衛生上良くはないですw
エサを食べている感覚になりますｗ

・打開策

無理に食事制限しようとすると、今度は筋肉も減ってしまい良いことがありません。

生活に合わないのであれば、少し縛りを緩くするのもモチベーション維持のために大切です。

今回の体重の推移から、トレーナーから２週間で食事制限打ち切りという話になりました。

身体のキレを出すのが目的だったので、思った以上のペースでそれを達成していたので問題はなかったようです。

残りの期間は朝＋昼のお米・豆腐・豆類が解禁になりました。
夜の食事は現状維持です。
あとはトレーニング回数を増やすように言われています。

まとめ

トレーニングを続けながら太る勢いで飯を食って筋肉を大きくする
↓
ある程度まで来たら脂質と糖質をカットした食事に切り替える

上記を各自の生活スタイルに合わせて縛りを変えて繰り返す。
（痩せたい人は脂質糖質カット＋タンパク質摂取＋トレーニングを続ける）


引き続き頑張ります！目指せモムチャン(人´∀｀)．☆．。．:*･ﾟ

grunt使ってstylusコンパイル＞コピー＞minify＞結合＞画像最適化までやる

Gruntめっちゃ便利ですね。
最近のお仕事でも使われていたので参考にしたり、これから個人でフロントエンドの実装するときも楽できるように自分用に作ってみました。

やりたいこと

今回css書くときにstylusを使ってみたかったのが始めた動機でもあるんですが、

1. stylusをコンパイル
2. tmpディレクトリに作業一時的にコピー(いらんかもｗ)
3. minifiして結合したjsとcss、最適化した画像ファイルをappディレクトリにデプロイ

みたいなことをやろうとしてて、これを更にgruntでwatchして、更新が入る度に実行してやろうという魂胆です。

stylusのコンパイルが結構手間だと思うので、gruntでファイル監視することで開発が楽になりますね。

あと、minifyしたものを更に結合(conbine)しているのは、で呼び出すファイル数をjsとcssで１つに減らすことが出来て良いかなとおもったのでやっています。

簡単キレイなライブラリを色々入れなきゃいけない時は重宝するのではないでしょうか。（今回はjqueryと写真閲覧系ライブラリ２つを使ってみています。）

画像最適化はおまけです。

実践

ソースはこんな感じ

今回使っているgruntのnpm tasksは

• grunt-contrib-watch → ファイル更新監視
• grunt-contrib-stylus → stylusのコンパイル
• grunt-contrib-copy → ファイルコピー
• grunt-contrib-uglify → jsのminify
• grunt-contrib-cssmin → cssのminify
• grunt-img → 画像最適化

ですね。

grunt-contribだけで全部入りらしいんですが、軽量な状態にしてあったほうが良いかなと思ってこうしてます。

1. grunt-contrib-watch : ファイルの更新監視

  watch: {
   stylus: {
    files: [
     './src/css/**/*.styl'
    ],
    tasks: ['stylus']
   },
   reload: {
    files: [
     './src/**/*.html',
     './src/css/**/*.css',
     './src/js/**/*.js'
    ],
    tasks: ['reload']
   },
   reloadImg: {
    files: [
     './src/img/**/*'
    ],
    tasks: ['copy:img', 'img']
   }
  }

watchの中にstylusファイルの監視とその他html, css, jsファイルの監視、grunt-imgが遅いので別途分けた画像ファイルの監視がそれぞれ置いてあります。

この設定がある状態で、/srcディレクトリ以下の各ファイルどれかを編集すると、tasksの中身が実行されます。

2. grunt-contrib-stylus : stylusのコンパイル

   stylus: {
   compile: {
    src: './src/css/main.styl',
    dest: './src/css/main.css',
    options: {
     compress: false
    }
   }
  },
 

watch:stylusから呼ばれているタスクです。

自分で編集する.stylファイルをmain.stylだけにして、main.cssという名前で出力される用になります。

optionでcompressした状態のcssが出せるようになってたので使ってみたのですが、後ほど他cssと一緒にcssminするのでここでやるのはやめておきました。

ここでwatchをみると、このタスクで生成されたmain.cssに変更が加えられるのでreloadのタスクが走ります。便利ですねぇ。

3. grunt-contrib-copy : ファイルコピー

  copy: {
   img: {
    files: [{
     expand: true,
     src: '**/*',
     dest: './tmp/img',
     cwd: './src/img'
    }]
   },
 
   js: {
    files: [{
     expand: true,
     src: '**/*',
     dest: './tmp/js',
     cwd: './src/js'
    }]
   },
 
   css: {
    files: [{
     expand: true,
     src: '**/*.css',
     dest: './tmp/css',
     cwd: './src/css'
    }]
   }
  },

copyの中で使われています。

試しに使ってみただけなので使い方間違ってる感じがしますが、作業用・準備用・デプロイ用と分けてGruntfileを書いてみただけです。

4. grunt-contrib-uglify : jsのminify

  uglify: {
   dist: {
    options: {
     mangle: true,
     preserveComments: 'some'
    },
    files: [
     {
      './app/js/hoge.js': [
       './tmp/js/lib/jquery-2.0.3.js',
       './tmp/js/lib/jquery.flexslider.js',
       './tmp/js/lib/klass.min.js',
       './tmp/js/lib/code.photoswipe-3.0.5.js',
       './tmp/js/main.js'
      ]
     }
    ]
   }
  },

ここでは圧縮から結合まで一気にやっています。

結合されたファイルが、どこからがどのファイルなのか試すために、コメントを残すオプションなどが付いています。

便利ですねぇ。。

5. grunt-contrib-cssmin : cssのminify

  cssmin: {
   minify: {
    expand: true,
    cwd: './tmp/css',
    src: '**/*.css',
    dest: './tmp/css',
    ext: '.min.css'
   },
   conbine: {
    files: {
     './app/css/hoge.css': [
      './tmp/css/flexslider.min.css',
      './tmp/css/photoswipe.min.css',
      './tmp/css/main.min.css'
     ]
    }
   }
  },

uglifyのcss版です。

各種ライブラリで必要なcssが圧縮、結合されています。

圧縮したファイル名を".min.css"としたりできるのでやってみました。便利。

6. grunt-img : 画像の最適化

  img: {
   dist: {
    src: ['./tmp/**/*'],
    dest: './app/img'
   }
  },

やってみたかっただけです。

gruntはこんなことまで出来るんですねぇ。凄いっす。

使い方

上の方に

 grunt.registerTask('default', ['stylus', 'copy', 'uglify', 'cssmin', 'img']);
 grunt.registerTask('reload', ['copy', 'uglify', 'cssmin']);
 grunt.registerTask('dev', ['watch']);

が用意されています。

defaultがただgruntと実行した時の全部入りタスク。

reloadはwatch:reloadから呼ばれているタスク。

dev（名前変えるほどのこと無かったな。。）はwatchが始まるだけのタスクです。今後なんかクライアントサイドのtestとかjsHint足すかも。

まぁこんなもんか。

まとめ

stylusの自動コンパイルがしたかっただけなのに壮大なGruntfileになってしまった。

実際使ってみると、uglifyが結構無茶してたりするのでちょっぴり遅い。

最終的にデプロイするときは問題無いと思うんだけど、開発中はちょっと大げさなので、src内で完結する様な構成も今後は考えたいですね。

特にminifyしてるからjsのデバッグが大変そう。

deployタスクみたいなlocalと本番で別にタスクを用意したりしなきゃなぁと思いますた。

Cookie ClickerのJSを読んで楽しみながらチートする

Cookie Clicker良いよね…。
（良さがわかりやすい記事はこちら。）

面白すぎて、仕事ができなくなってしまうのが怖くなったので、本気出して一瞬で終わらせてやろうと思ってチートを開始しました。

とりあえず圧倒的なまでのクッキー生産速度を出せればOKなところまで頑張ります。

ソースはheadタグの中にあるmain.jsってのを読んでいきました。

■クッキーを自動クリックしてみる

クリックするでかいクッキーのhtmlを見てみたらbigCookieという名前がついていたので、chromeのコンソール(option + command + i)を出して、

$('#bigCookie').click();

を実行したら行けた。
これを繰り返して

setInterval(function(){ $('#bigCookie').click(); }, 1);

ってやったら凄い速度でクリックしてくれる。もうすでに楽しくなってきた。
ソースを読んでたら、前回クリック時間からのクリック時間を毎回チェックしてて、超速でクリックするともらえるアチーブメントがあった。この方法で取得できるはず。

■面倒なのでクッキーを直接付与してみる

ソースを探していくとあったあった

Game.Earn();

という関数。
ここに、Game.Earn(100);とやったらちゃんと100枚付与された。
よし、じゃあ

Game.Earn(10e1000000000);

ってやってみたら所持クッキー数がNaNになるｗ
しかしtitleタグの方を見てみると、In,fin,ityとなっていたので、所持枚数が無限大という宇宙の法則が乱れる状態になった。

もちろんアイテムも買い放題だ。

■ババア買うのもめんどくさい

クッキーババアとかの施設を買うのがめんどくさくなってくる。今の状態なら5000くらいまでは買える（理由は後述）のでこれもなんとかする。

setInterval(function() { $('#product0').click(); }, 1);

これでCursorが買えるようになる。
おなじ要領でproduct1,2,...,9までやってく。そういうスクリプトを書いてもいいだろう。

■なんか遅い

ババアとかカーソルとか工場とか、上記の方法で買って行くと普通に数千まで増えていって、動作がなんか重くなる。
どうしてかなーと思ったんだけど、どうやら描画してるババアやらカーソルやらはすべて１つ買う毎に丁寧にDOMを追加してるらしい。それは重くなるだろう。。

じゃあDOM消しちゃえばいいじゃん！と思ってElementsからDOMを直接deleteしたらゲームが動かなくなってしまった。
そういう作り方らしい。それは仕方ない。DOMを消さずに表示を何とかすれば良いので、styleでdisplay = "none"にしてしまおう。

CookieClickerのコード内でなんだか
l('bigCookie')のような記述が多くてなんだろーと思っていたら、document.getElementByIdの略だった。なんでL？まぁいいや、便利なので使わせてもらって、

l('sectionLeft').style.display = 'none';
l('sectionMiddle').style.display = 'none';

これで左と真ん中のものが増え続けるカラムが消えていく。
見えなくなっただけで、domは残っているのでゲームはちゃんと続行しているはず。

■価格がIn,fin,ity wwwwwwwwww

ババアなどの購入価格がIn,fin,ityになってたｗｗ
もうわけがわかりませんね。この時期にはcpsもよくわからない桁になってるので、そろそろ飽きてきます。
最初にやったCookie.EarnをsetIntervalで回してInfinityを付与しまくるように変更。
ただ、買うたびに一旦所持クッキー数が0になるのでなんだかだるくなってきます。

■あれ…？？

Upgradeアイテムの購入がめんどいから色々探してたらなんかすげーの見つけた。。

  Game.RuinTheFun=function()
  {
   for (var i in Game.Upgrades)
   {
    Game.Unlock(Game.Upgrades[i].name);
    
    Game.Upgrades[i].bought++;
    if (Game.Upgrades[i].buyFunction) Game.Upgrades[i].buyFunction();
   }
   for (var i in Game.Achievements)
   {
    Game.Win(Game.Achievements[i].name);
   }
   Game.Earn(999999999999999999);
   Game.upgradesToRebuild=1;
   Game.recalculateGains=1;
  }

まさかと思って実行したら。。
すべてのアチーブメントとアップグレードアイテムが手に入ってました。
なんでこんなの残しておいたんや。。

■もういいかな。。

これで大体やりきった感じになる。
あとはすべての購入価格がIn,fin,ityになるまで頑張るのも良いと思います。
しかし、上記のdisplay: noneをやってないと重すぎて全く動かなくなるのでこのへんが引き際なのではないかと思いますｗ

色々頑張っていくとこんな感じになります。グロい。

お疲れ様でした(・ω<)

Node.jsでbatch処理を書くときに便利な visionmedia/batch

はじめに

node.jsでbatch処理書くって言っても、普通にnode batch.jsとかで実行したらええんじゃないの？visionmedia/commander使って引数渡したらいいんじゃないのって話ではないです。

visionmedia/batch

https://github.com/visionmedia/batch

commanderは超重宝するのでもちろん使ったほうがいいのですが、その中の処理を非同期に書いたり、progressの処理が書けたりするので便利。

使い方

package.jsonに"batch"を追記して、npm install。

実装はこんな感じ。

実行するとこんな感じ。

$ node batch.js 

organized 加賀

progress 25 %

organized 赤城

progress 50 %

organized 島風

progress 75 %

organized 出雲

progress 100 %

results [ '加賀', '赤城', '島風', '出雲' ]

batch.push()したfunctionがbatch.end()でconcurrencyされた数で並行に実行されてるみたい。
resultsはdone()で２つ目の引数で渡した値がpushされていくみたいですね。

progressの中身はこんなことになっています。

これ使って現在どこまで処理してるか〜とかをconsole.logに書いたりするなど色々使えますね。

{ index: 0,

  value: '加賀',

  error: null,

  pending: 4,

  total: 4,

  complete: 1,

  percent: 25,

  start: Wed Aug 07 2013 19:36:49 GMT+0900 (JST),

  end: Wed Aug 07 2013 19:36:49 GMT+0900 (JST),

  duration: 11 }

まとめ

艦これのコンテンツ力…！！

SublimeText2落ちたんだけど！なんなの！？という話

SublimeText2で作業してて、「お〜なんかpackage更新してるなー」と思ったら急にお亡くなりになって、起動してもずっと落ちっぱなしになりました。
直ったのでメモ。

対処法

起動して落ちるまでの一瞬で、package controlのログ的な文字が見えました。
そこにはSublimeLinterという自分でインストールしたpackageの名前が。

じゃあそいつを消したら治るんじゃないかということで、下記ディレクトリ(mac)を削除。

/Users/USERNAME/Library/Application Support/Sublime Text 2/Packages/SublimeLinter

それからSublimeText2を再起動。
直った。ε-(´∀｀*)ﾎｯ

TechLionというイベントに登壇します

学生の頃からよくしていただいている技術評論社のフォンさんから誘って頂き、TechLionというイベントで小話をすることになりました。
まだ残席あるそうなので是非！！Ustもあるらしい。


  - 日時：2013年7月23日(木) 19:00開場、19:30開演、22:30終了予定
  - 場所：六本木・スーパーデラックス
  - Webサイト: http://techlion.jp/vol13
  - 公式タグ: techlion (twitterでは#techlion)



一緒に登壇するのはさくらインターネット社長の田中さん、同じ大学・大学院研究室同期でmixiでノハナを開発している田中くんと田中づくしのメンバーの中に珍しい名字枠で参加します。

スポンサーがしっかりしているのと、過去には小飼弾さんとか、めっちゃ有名な人達も参加してるイベントなので若干緊張しております。

何話そうかな〜と色々相談しながら進めているわけですが、国産エンジニアとかあんまり関係なく会社寄りな話をさせてもらおうかなと思ってますｗ
入社時の話とか、キラキラ女子の話とか、仕事してて社長との関わりが意外と多かったのでそういう話とかできればなと！リクエストあれば受け付けますｗ

技術的な話よりも、業界的にはまだ若手？な自分がどうエンジニアとして働いてるのかって話をすることになってます。勉強会とかとはまた違った感じ？

面白くなるようにがんばりまーす(・ω<)