2013-12-28

俺の2013年はやっぱり運が悪い

昨日で仕事納めでした。納まってないけど。。
仕事上がってから会社の仲の良い方々と今年を振り返る話なんかしたんだけど、どうにも今年はうまく行かなかったことが多い。
しかしまぁそんなことが多く続いたおかげで、ココロもカラダも今年はめちゃくちゃ強くなったと思う。そんな振り返りをしてみます。


1月:チームを外される

早速すごいことになってますね!言い方が悪いかもしれないですけどw
いやーきつかった。1年位一人で立ちあげからやってたプロジェクトですね。
色々勉強になりました。プライベートも含めて精神的に一番きつかった時期。
今だから言えるけど「マンガで分かる心療内科」とか行って、欝じゃないよwとか言われて恥ずかしくなったのを今でも覚えています。

ここから、Node.jsというかJavaScriptを一から勉強し始めます。HelloWorldが動いたときの、「こいつだけは裏切らねぇ。。」という感覚、今でも続いております。


2月:心血注いだサービスがクローズ

クローズが決まっていたサービスがこの時期に完全クローズしました。
掲示板上のユーザーの悲鳴を見ながらつらい思いをしたのを覚えています。

仕事ではNode.jsの勉強も兼ねて、社内で使うからと言われてゲームのフレームワークを作っていました。
その時の上司が今も仲良しのジョナサン。彼の楽しい正確のお陰であの頃の僕はすごく救われていました。


3月:ひたすらJS / Node.jsと向き合う

潜伏期間だった時期。これで飯を食うんだという気持ちで仕事でもプライベートでもJavaScriptとNode.jsにのめり込んでいた時期です。
精神的にもまだ調子が良くなく、カラダを鍛えはじめたのもこの時期。
いろんな縁があって、弊社の研修も手がけているクスールさんにお世話になって、ほんきでJavaScriptコースを受講していました。

4月:クスールを卒業・社内ニート

クスールさんを卒業しました。クライアントサイドのJSに苦手意識が無くなり、すごく良い機会だった。
Node.jsも仕事で沢山書いたり、社内の他のフレームワークを読み込んだり色々勉強出来ていた。
仕事はまぁやっていたんだけど、どうやら作っていたものが使われない感じの空気が漂っていた。やっていたことが無駄になってしまうことにすごく憤りを覚えた。

プライベートでは三島木と傷心旅行に一緒に行ってもらった。
ゲイ疑惑が起ころうとも彼は俺の親友である。


5月:社内ニートをこじらす

なんの仕事をしていたか忘れるくらい自分の勉強だけやらされていた気がする。。canvasのコードがjsdo.itでhot codeに載ったり、結構フロントエンド技術の幅が広がってた時期でもあるかな。
配属が決まるからと言われてずっと放置されていた時期だったような。。配属先も考えてもらっている以上、あんまり変なことはできなかったけどもっと行動すべきだったのか?謎すぎる時期だった。
今ではこんな時期があったからしっかりした知識が付いたんだろうとポジティブに捉える事もできる。でも同じ状況が会社で起こっているようだったら、今後はそういう人を少しでも減らしていきたいと思う。

初の韓国旅行に行ったのがこの時期。おーぱるぱる、、おーぱるぱる、、、


6月:やっと仕事をもらう

6月頭くらいに自暴自棄が加速して、よくあるニートのテンプレを使って社内ニートであることをぶちまけた。
コレに対して社長から「755行け」っていうブッコミがあったりしたけど、結局755側の人員計画の都合で入れなかった。
同時期にやっと仕事が中途半端に決まりました。一時的な配属?みたいなあやふやな感じ。
そこで配属されたのが名村さんの居る高度な畑仕事のチーム。すっごく勉強になった。JavaScriptのお手本集みたいなプロダクトだったし、DevOps的なところ、プロジェクト管理的なところ、全てが上手く行っている超きれいなプロジェクトだった。


7月:畑仕事に精を出す

とにかく吸収できるものはなんでも吸収した。設計だったり細かいコードの書き方だったり。
でもこれだけスバラシイプロジェクトでも、一つだけ問題があった。全然稼げてなかった。明らかなコストオーバー。人材が集まりすぎていた。

この頃はカラダが異常に鍛え上げられていた。筋肉量がめっちゃ増えて、身体つきが完全に変わった。精神的なタフネスも上がっていた時期だったと思うw

あとはTechLionというイベントで自分のことを話す機会を技術評論社のフォンさんから頂いた。場所が六本木スーパーデラックスだったり、すごく緊張もしたけど、さくらインターネットの田中さんや今ノハナで頑張ってる田中くんと一緒に話せてすごく良い機会だった。こういうのがアーカイブされると自分がその時なにやってたかがちゃんと残って良い。


8月:引っ越しをする

代々木駅なのは変わらないけど、駅から反対側に引っ越しした。でかい部屋に引っ越したのですごく快適な生活になったと思う。プライベートもうまく行ってるように思えた。
仕事もそつなくこなし、体力も付いて精神的にもやっと落ち着いたころなんじゃないかと思う。
あんまり印象が薄い時期。


9月:サービス大改修が始まる

サービスが結構やばい状態だったので大改修が始まった時期。
この頃は仕事に対しても本気で向き合えるようになってたし、本気でうまくいってほしいと思っていた。


10月:サービスクローズが決まる

正直がっかりした。
書いていたソースコードをその場でcontrol + A→delete→control + S→command + wするくらいどうでも良くなった。

また物理的に社内ニートが始まった。マジでやること無い状態になった。

趣味で大阪に行くようになった。関西は良い。

あとは闇デザイナーを始めた。
片目惚れスマホ版は処女作だったけど、良い出来だったと思う!
Gruntjsとかstylusとかフロントエンドの技術も積極的に取り入れたりして割と綺麗に作っていた。


11月:dotFesと出会う

京都でクスールさんが開催していたdotFesに相良さんと二人で行ってきた。
webの制作会社系の人たちが話していたりするのをみて、ものすごく刺激を受けた。
打ち上げで実際にその人達と話したりできて、自分もこうなりたいとココロの底から思った。

デザインも積極的にやって、相良さんの計らいでお笑い芸人のトップリードさんの単独ライブ「四度目の正直」フライヤーデザインもやらせてもらった。
イラレとフォトショ体験版をインストールし、操作を覚えるために参考書を2冊買った。
自分がかっこいいと思うものを要件に合わせて出来るかぎり納得行くまで創る。
ものすごく良い体験だったのを今でも覚えている。

仕事は社内ニートが続きそうで以前の自分に戻りそうで嫌だったが、その期間中は「人のためになるものを創る」という社内ニートのプロの方の言葉が刺さっていたので頑張っていた。
少しずつ成長している。その時期やった仕事がちゃんと実ったのか、今ではその仕事の延長でちゃんとしたミッションをもらえている。腐らずにやるってのが大事だとわかった時期。
そして新規ゲームの開発にジョインすることになった。


12月:クリエイターとして目覚める&プライベート崩壊

先に仕事の話をしておくと、ものすごく順調。
新しいゲームのフレームワークを名村さんの下で作りながら、スクラムみたいなプロジェクトのフレームワークをメンバーに向けて実践させてもらったり、高度な仕事にちゃんとコミットできている状態がものすごく良い。
部門全体に向けた仕事の依頼も来るようになったし、色々辛い時期を乗り越えて、仕事が無駄になったと腐ることなく続けてきた結果だとも思う。

しかしまぁプライベートが最悪です。
僕が完全に悪いんですけどね。辛い時に親身になってあげられなかった。
動悸が止まらなくなって、内科に行ったら安定剤をもらいました。なんてメンタルの弱い男だ。
まぁこれを機に更にタフネスになっていくんだろう。しゃちょーも言ってたしな!

トップリードさんの仕事はweb制作もやらせてもらって、太田プロダクションのホームページにバナーとサイトが掲載されたりした。
こういう仕事でお金は1円ももらってないのだけど、フライヤーできたよー!とかtwitterでファンに向けて投稿して、さらにそれにかっこいい!とかコメントがついていくのを追っていくのがすげーうれしくてたのしくて、これはやめられない仕事だと痛感した。
デザインの仕事というか、表に見えるところの仕事って本当に楽しい。

会社のUnity講座もやったな。すごく面白かった。というか3Dのネイティブゲームも創れるようになった。これはほんとに幅が広がって良いことだと思う。


ふりかえり

しゃちくとしての79

全く仕事で使ったこと無いJavaScriptを使ったエンジニアとしてすっかりジョブチェンジできた。
去年は1年間ずっとプロジェクトマネージャーとして企画とかイラスト・シナリオのディレクションとかそんな変な仕事をしていたけど、その経験は今のスクラムをチームのイラストレーターさん達に適用させるときとかにちゃんと生きてる。
無駄にならないかどうかは自分次第なんだなと思った良い瞬間だった。
最近決まったことですが、クスールさんのNode.js講座を副講師として手伝うことにもなりました。2月からやります。すごい成長だと思うよ!

にんげんとしての79

辛いことがありすぎて、人間的にめちゃくちゃ強くなったと思う。
会社やプライベートで不条理に負けそうになることもあったけど、そういうモノに対して暴言を吐くんじゃなく、自分の悪いところを直せるように日々精進する。そうすればなんとかなる!
迷惑かけた人達にはもう反省しかないです。

クリエイター79

創ったものを見てもらえる楽しさから、それを創るための工程を全部出来るようになりたいと強く思えてすごく良い機会を相良さんにはもらったと思っています。
まだポスター印刷など仕事が残っていますが、単独ライブ本番がめちゃくちゃ楽しみ。

デザインをAdobeインストールするところから始めて、web制作でフロントの実装を真剣にやり、仕事ではハイレベルな環境でサーバサイドの実装をする。今後はUnityとか、ネイティブの領域にも入って行きたい。
もっとそれぞれが自分で出来るように、来年はいろんな案件をこなしていきたいと思っています。

まとめ

運が悪いなんてタイトルをつけたけども、まぁ運は悪いんだけどw、クリエイターとしてちゃんと成長してる感じがあって良い1年になったとは思う!
そのキッカケになったNode.jsとの出会いだったり、デザインを本気でやってみた経験だったり、そのキッカケをくれた会社や周りの方々に本当に感謝しています。

いいことばかりではなかったけど、来年は良い運勢であることを祈り、苦労が実ったね!なんて言われる日が来るのをひたすら精進しながら頑張りたいと思います。

長文お付き合い頂き誠にありがとうございます。
今年も一年ありがとうございました。来年もよろしくお願い致します。

2013-11-15

angular.jsをminifyする前にngminしないとアカン話


最近angular.jsを使い始めて、ただ使うだけでなくリリース時にminifyまでやるにあたって注意点があったのでメモ。

まぁほとんどココの"A Note on Minification"で書いてある事+ちょっとだけの内容です。入門の話とかじゃあない。

angular.jsを使うにあたって

angular.jsを使ってソースコードを書くとき、決まった書き方があって大体こんな感じになる。
angular.module('whatever').controller('MyCtrl', function ($scope, $http) { ... });
だけどコレをそのままminifyしてしまうと$scopeや$httpといったangular.jsで予約された変数名がaとかbとか変な文字に変換されてしまいます。
angular.jsでは$scopeってのは決められた変数になってるので、$skopeとかtypoしたらダメらしいす。
せっかくこんなに簡単にインジェクションな処理が書けて嬉しかったのに、これの回避策としてこんな書き方をすれば良いとのこと。
angular.module('whatever').controller('MyCtrl', ['$scope', '$http', function ($scope, $http) { ... }]);
ちょっとめんどくさいですね。'$scope'書いた後に$scopeってまた書きます。
同じ変数名2回書くとか絶対やりたくないですね。
という訳でこれをやらないためにngminというステキなツールがあったので使ってみました。

ngminとは

ngminはangular.jsのminifyを行う前に、上記のようなminifyにも耐えうる書き方に変換してくれるpre-minifyツールです。

実際使うときはGruntと一緒に使うのが便利。
grunt-ngminっていうのがちゃんとありました。gruntマジステキ。



grunt-ngmin使ってみた

さすがgruntさん。一回覚えれば使い方も一緒なので超簡単。
githubのreadmeからそのままコピペするとこんな感じでした。
ngmin: {
  controllers: {
    src: ['test/src/controllers/one.js'],
    dest: 'test/generated/controllers/one.js'
  },
  directives: {
    expand: true,
    cwd: 'test/src',
    src: ['directives/**/*.js'],
    dest: 'test/generated'
  }
},
gruntのタスクとしてngminを用意して、angular.jsのスタイルガイドで提唱されてるcontrollersとかdirectivesっていう構成毎にngminを実行する書き方ですね。

実際は build/ みたいなディレクトリをdestとして指定しておいて、この後にuglifyでbuild/ 内にminifyをかけたりしてからデプロイしています。

まとめ?

実際にやった結果とかは割愛しますが、お手軽にangular.jsの実装をminify対策させることが出来ました。
書くコードは最小限で、リリースされるコードは自動で効率優先なものに!スバラシイですね!

angular.js自体まだまだ触りきれてないのですが、一旦このへんの検証など済ませた感じです。
穴など見つけたら追記しますね。

2013-10-31

英語で検索しづらいchef vs ロゴがイマイチなansible

■まえがき

構成管理ツールが便利だよねっていう話を数年前から良く聞いていて、僕みたいな別にインフラ専門じゃないエンジニアでも使うようになる時代がやってきました。

個人的な話ですが、主な用途はvagrantへのミドルウェアデプロイです。まっさらなVMに必要なものをインストールしたりするだけで、目的が浅いw(設定ファイルとかはデフォww)


今回はchefとansibleを両方触ってみて、色んな人の記事を見た上で色々比較してみようと思います。
ただ、できることは両方やろうと思えば出来ると思うので、アレが出来ないこれが出来ないっていう比較はマサカリ怖いのであまり書かないようにします。。(わかってないなと思ったらやさしく教えてください><。)

というわけで今回比較すべきはとっつきやすさと運用方針の観点から比べてみたいなと思いました。


■それぞれの特徴比較

下記スライドがわかりやすかった。22ページ目に比較図。


資料から、ざっくりchefとansibleにフォーカスすると

・Chef

- Ruby製
- 各サーバにインストールして利用
- DSLで自由度高い書き方
- Opscodeの共有リポジトリがある

・Ansible

- Python製
- 標準モジュール意外と多い(http://www.ansibleworks.com/docs/modules.html)
- push型:sshできればおk
- 構成がシンプル:YAMLで設定書く
- 共有リポジトリ無い

▼個人的な見解

yamlは特定の言語ってわけじゃないからDSL覚えるよりはるかに楽だった。自由度も構成管理する上では手順かければいいくらいなのでそんなに要らないと思う。
ansibleは公式の共有リポジトリが何故か無かったりする。
けど、gitとかでチームが管理すれば良いかなとか思ったり。
最近だと共有してるyeoman-generatorでvagrantとansibleをテンプレ化してローカル環境構築みたいなのをやったんだけど楽。


■とっつきやすさ


好きな方を選べばいいと思う。

・主な編集ファイル

chef:rubyのDSL(自由度高い)
ansible:yaml(記法さえ分かれば使える)

・ファイル構成

chef:多い。覚えるの大変。
ansible:最小構成で1〜2ファイル。ベストプラクティスがあるけど、いわゆるファイル分割してるだけでわかりやすい。

・手間

chef:実行環境準備はchefのほうが多い。あれもできるよこれもできるよってなるときりがないけど、最初から出来る機能で評価するには面倒くさいというイメージ。
ansible:デフォルトの実行環境1回作ったらsshつながるサーバなら大体動く。やりたいことを実現するまでの過程が超シンプル。これが大事なんじゃないか。



■運用の観点からどちらを選ぶか

大規模運用だったらchef-serverとか高機能なものが用意されてたり、そういう管理がしたい時はchef。
Facebookは大規模な管理向けにchef採用してたりする。

ansibleはplaybookの共有だけで、とりあえずサーバ構築が可能。ベストプラクティスを参考にすれば大規模運用な設定も出来るはず。
yamlだから、複雑なことするときにはちょっとコツが居る。

▼個人的な見解

そんなデカい運用してたらその運用が大変なのでやっぱり簡単な方がいいな。
個人用途なので断然ansibleが楽。インフラ専門ならchefくらい使われてるモノのほうがいいのだろうか。両方出来なくは無いんだろうけど。


■web上での評判

色んな記事から評判で比較してみました。

・chefが辛くてansible使ってみた人
→chefは独自概念が多かったり、対称ホストへのインストールが発生したり面倒なイメージが強い。ドキュメントが豊富なんだけど、使える様になるまでの学習コストが高い。

・chefとansibleを両方使い込んでる人
DSLかyamlかみたいな比較。最終的にはそんな凄いことやらないじゃんってなって、もし複雑なことする場合はモジュール自作してansible使えばいいじゃんという落ち着き方。

・個人ツイートのnaverまとめ
ansibleはpythonな人にオススメ。chefとの比較はやりたい手順を書く方法としてどっちが楽かという問題。

・chef vs ansible談義
色々あったけど、どっちもやろうと思ったことはできるね。

・Ansible使ってみた人の意見

"Chefの場合ですと、knife-soloを利用する事で、Push型に似せた実行が出来るのですが、やはりプラグインを追加でインストールしなくてはならない上に、あくまでPush型ライクな実行ができるだけにとどまっています。"
→ansibleの強みはansibleだけのものじゃないけど導入は面倒


▼個人的な見解

ansible寄りな記事を集めてしまったせいなのか、情報操作してる感がして比較ではなくあくまで参考にして欲しいw

pythonならansible!っていうのも実行環境の問題だと思うんで、python別に書けなくても使える。yamlがなんなのか知らないとだけど、xmlみたいな記述してくだけのものなので勉強するとかそういうものじゃないと思う。

あとDSLだと自由度が高いよ!っていうのもいいとは思うんだけど、やっぱりそこにたどり着くまでが大変だし、そのレシピって結構めんどくさいことやってんなぁと思ってしまう。
ansibleのシンプルに書くことを前提とされてるyaml形式がいいと思うし、もし複雑なことしたいときはモジュール自作っていう手もあるしね。


■まとめ


「今からやるならansible。」だと思う。

ようこそansible教へ!
chefは独自概念が多い。対してansibleはyamlとホスト指定するファイルだけで動いちゃう。本当にシンプル。モジュール一覧見る限りだと、結構なんでも出来る。
思いつくデメリットはansibleは変数出し分けが他に比べてやり辛いかも。ベストプラクティスを参考にしてもちょっとコツが居る。

大規模運用をansibleでやったって事例があれば見たい。bashoとかevernoteとかが使ってるみたいだし大丈夫なのかな?
シンプルなのが好きだし学習コストってトコではansibleでいいんじゃないかと思う。本とか無くてもすぐ使いこなせるし。
よりシンプルで覚えやすく、やりたいことがそれなりに出来て、大規模運用も厭わない。

過去のリソースにそんなにとらわれないならansible。
ちょっと使えるようになるまで時間がかかるけど、やりたいことはなんでも出来て大規模運用でも大丈夫。過去のリソースが豊富な方が嬉しいならchef。
chefはchef屋さんにならないとダメだけど、ansibleはライトユーザーでもぱっと見で使いやすいので、開発環境の導入だったりその延長で本番環境の構築だったりで使うにしてもansibleは便利。

rubyDSL覚えるよりyamlの見方覚えるほうが楽。むしろ覚えなくてもサンプルみたら記法とか気にせず使えちゃうと思う。それくらいシンプル。

yamlだと自由度低いとかになってるけど、あんまり経験がないのでなんかインストールしたり決まった設定ファイル配置したりする程度だったらansibleでおkだと思う。
その他こういう時yaml困るぜ!ってのがあれば教えてください!!

2013-10-26

Mac OS X 10.9 Marvericksでgrunt-contrib-watchが動かなくなった

GruntJSいいですよね。
watchしてstylusのコンパイルを自動でやったりしてたんですが、macをMarvericksにアップデートしたら動かなくなったけど直ったのでφ(`д´)メモメモ...

現象

Running "watch" task
Waiting...Bus error: 10
↑こんな感じになります。

対策

Node.js v0.10.20を使ってたんですが、これだと動かないぽい。
v0.10.21からなら動くらしいので、以前入れたnvmでv0.10.21をインストール。

$ nvm install v0.10.21
$ nvm use v0.10.21
これでOK。
と思ったらgruntやらなにやらグローバルインストールしたものも入れなおさなきゃいけないのでnpm install -g grunt-cliしといた。

これで完了。動作確認おk。

まとめ

githubのissue嫁



2013-10-21

79は今何をしているのか?

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

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

■仕事

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も2年だけやったけど、こっちに慣れるとサーバサイドをわざわざ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送るとかそういう活動もどんどんやっていこう。

2013-10-18

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

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

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

目的別フェーズについて


大きく分けて

1. とにかく鍛えながら体重を増やすフェーズ
2. 脂質と糖質を制限して無駄な脂肪を燃やすフェーズ

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

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


トレーニング開始時点では180cmで60kgしかない状態だったので、週2〜3回のトレーニングに合わせてとにかく食事を取ります。
出来るだけ肉、タンパク質。腹減る事は悪。一日に4〜5食はとっています。

この時はなるべく油ものや、麺、麦は選ばない様にしてます。しかし他に選択肢がなく、腹減るくらいなら食べてもOK。
こうする事で、トレーニングの効果を100%筋肥大に与えていきます。食べ過ぎて脂肪が付くくらいが丁度良いのです。

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

・1の失敗

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

モチベーションはとても大事です。
挫折する前にトレーナーと相談し、身体を絞る次のフェーズに移行することにしました。


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


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

・痩せる理論

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

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

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


・食事制限方法


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

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


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

調理する上でも油や砂糖の量に気をつけます。できれば使わない。
さすがに上記のものだけ食べてると飽きてくるので、ゼロカロリーほげほげの食品はOK。

また、どうしても食べたい場合は朝だけお米もOK。
納豆やとうふも朝だけならばOK。

食べる量は腹八分目を5〜6食。
プロテインは一食としていい。海外製などの甘い製品は注意。
寝る前に甘いプロテインは検討。朝起きて、お腹が空いているようであればOK。

この期間中も注意するのはお腹を空かせちゃいけないということ。
最近はツナ缶が携帯に便利な上に、低カロリー高タンパク食で良かったので愛用してます。


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

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

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


69kgあった体重が65.9kgまで減っていました。さすがに痩せすぎです。
原因は食事量不足でした。
確かに脂肪はかなり減って、顔つきも変わるレベルです。

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

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

・打開策


無理に食事制限しようとすると、今度は筋肉も減ってしまい良いことがありません。
生活に合わないのであれば、少し縛りを緩くするのもモチベーション維持のために大切です。

今回の体重の推移から、トレーナーから2週間で食事制限打ち切りという話になりました。
身体のキレを出すのが目的だったので、思った以上のペースでそれを達成していたので問題はなかったようです。

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


まとめ

トレーニングを続けながら太る勢いで飯を食って筋肉を大きくする

ある程度まで来たら脂質と糖質をカットした食事に切り替える

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


引き続き頑張ります!目指せモムチャン(人´∀`).☆.。.:*・゚

2013-10-09

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

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


やりたいこと

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


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

みたいなことをやろうとしてて、これを更にgruntでwatchして、更新が入る度に実行してやろうという魂胆です。
stylusのコンパイルが結構手間だと思うので、gruntでファイル監視することで開発が楽になりますね。

あと、minifyしたものを更に結合(conbine)しているのは、で呼び出すファイル数をjsとcssで1つに減らすことが出来て良いかなとおもったのでやっています。
簡単キレイなライブラリを色々入れなきゃいけない時は重宝するのではないでしょうか。(今回はjqueryと写真閲覧系ライブラリ2つを使ってみています。)

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

実践

ソースはこんな感じ



今回使っている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と本番で別にタスクを用意したりしなきゃなぁと思いますた。

2013-09-24

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になるw
しかしtitleタグの方を見てみると、In,fin,ityとなっていたので、所持枚数が無限大という宇宙の法則が乱れる状態になった。

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


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

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

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

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


■なんか遅い

ババアとかカーソルとか工場とか、上記の方法で買って行くと普通に数千まで増えていって、動作がなんか重くなる。
どうしてかなーと思ったんだけど、どうやら描画してるババアやらカーソルやらはすべて1つ買う毎に丁寧に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になってたww
もうわけがわかりませんね。この時期には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をやってないと重すぎて全く動かなくなるのでこのへんが引き際なのではないかと思いますw

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


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

2013-08-07

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()で2つ目の引数で渡した値が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 }

まとめ

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

2013-07-31

SublimeText2落ちたんだけど!なんなの!?という話

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

対処法

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

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

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

それからSublimeText2を再起動。
直った。ε-(´∀`*)ホッ

2013-07-19

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

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


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



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

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

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

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

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

2013-06-20

キーボードとマウスをMac - Windows間で共有するSynergyの設定+REALFORCE(windowsキーボード)をmacで使う設定

最近この設定やってないけど、やり方忘れてしまうのでメモ。
Synergyを使えばmacとwindowsで片方のキーボード、マウスを共有して、OSをまたいで操作することができます!

Synergyインストール

synergyKM Mac日本語キーボード対応版を入れる。(WindowsはSynergy 1.3.1: ?下記リンクに詳細あり。ちゃんと対応したバージョンでないと、お互いに機能しない。)



キーボードの設定

初めてRealforceキーボードをつないだらJISを設定。

Macでrealforceを使う設定としてPCKeybordHackをインストールし、

1. PCKeyboardHackのFor Japaneseを全てチェック。
2. Command Lが初期のままだとWindowsキーになっているので、macでいうoptionとcommandLを入れ替える。(PCKeyboardHack)

・参考
PCKeyboardHackを設定する。
CapsLockはMacの機能でCtrlに出来る?(KeyRemapだかPCKey~の方でやった気がする。)
上記の派生記事(こっちのが分かるかも)

KeyRemap4MacBookてのもあるけど、PCKeyboardHackでいろいろ変えればなんとかなる!


SANWA SUPPLY ドラッグ&ドロップ対応USB2.0リンクケーブル(Mac/Win対応) 1.8m KB-USB-LINK3M

これを使えば、WindowsとMacをUSBでつなぐだけでSynergyと同様のことができます!
絶対便利なので、面倒くさい方は是非。


2013-06-19

nvmでNode.jsバージョン管理した時の苦労話

macでNode.jsのv.0.10.11を使おうと、homebrewでインストールしたnodeを消して、nvm経由でNode.jsを管理しようと色々やってたら悲しくなったのでメモ。

TypeError: Arguments to path.resolve must be strings

↑というエラーがnpmを使った時に起こりました。
nvmはnpmもまとめて簡単インストール☆してくれるので、npmが悪いわけない…原因はほかにあるはずだ……しかし、これがいけなかったのです。。路頭に迷い、作業時間をかなり削ってしまいました。。


原因

npmのversion違いでした。
調べるとpath.resolveの変更がNode.jsのv.0.9.xくらいにあったみたいで、v.0.8.xの時に動いたnpmではv.0.10.xの作りだと動かないみたい。

npm -vしたら、1.1.xでした。Node.js v.0.10.xでは、npm 1.2.x以上でないと動かないっぽいです。


えっ、でもnvm使ってるんじゃないの?

使ってますが、/usr/local/bin/npmに、最初にnode.jsインストールしたときのnpmが残っていました(・ω<)テヘペロ
だから、npm使うと$PATHの順番的に古いほうが優先されて上記エラーが出てたんですね。

削除して、~/.nvm上の該当versionのnpmを使うように.bashrcを書き換えて糸冬了。


今回の件から私が得るべき教訓は

・アンインストールは徹底的に。
・動かなかったらpathをまず調べろ。

でした。

2013-06-11

Node.jsでオレオレフレームワーク(スケルトン)作った

社内ニートとしての地位を確立しつつある79です。こんにちは。

Node.jsでプロジェクト作るときは大体expressコマンドでえいやっと作るのがほとんどですが、それだけだと結局欲しい機能が色々足りなかったりするので最低限もうちょっと実装してあるフレームワーク的なのを作ってみました。

Node Framework 79

nf-79 - https://github.com/79yuuki/nf-79


なにができるの?


環境ごとに設定ファイルを指定

そもそもconfigモジュールみたいのが無くて、毎回作るのも面倒くさいし、環境ごとにDeploy出来るようになってると便利!なのでそういう機能がついています。

routing設定が出来る

expressで作っていくと基本的に app.get(), app.post()とかを沢山書かなきゃいけないのは、機能が増えていくとごちゃごちゃしがちです。
なので、configファイルにrouterの実装をしたモジュールのpathとurlをセットにして書いておくことでスッキリさせてみた。

testを書く準備が出来ている

「テストがないコードは成果物でなく、負債である」だそうです。準備はした。

loggerモジュールがある

エラーハンドリングした時にどうしよってなるので、log4jsでaccess_logとかsystem_logをファイルに出せるようにしてある。

validation使う準備がしてある

express-validationを使えるようにしてある。

viewまわり(おまけ)

ejsを使ってます。layout.ejsをベースに、bodyだけ書けば良い様にしてあります。
おまけでtwitter bootstrapのデザインをフラットデザインにしただけのflatstrapっていうのを使っています。


今後

Node.jsでなんかさくっと作りたいときにはコレ使えば面倒な実装減らせるので、こういうスケルトン作っておくのはいい事ですね。こいつが使いやすいかどうかは置いておいて。

もっとキレイにしたり、データストアとの連携部分も書いておくといいんだろうか。
何使うか決まったりしたら、追加するのもいいかも。

2013-05-23

今更canvas使った描画やってみた


昔から画面に描画する系の事をやってみたかったので、ちょうど良かったからcanvas使って色々書いてみたよ。

hello world

その1

ハートのドット絵を根性で描いてみた。それを1コマ1コマ横と縦にずらしてアニメーションさせてる。
アニメーションさせるときは、setIntervalとか使うコードを良く見たけど、あとで出てくる最適化の話の通り、requestAnimationFrameと使ってみてる。




その2

それを画像として書きだして表示してみた。次に続く。




その3

画像をくるっと回してぴよんっと止めてみた。なんで画像かというと、Rectで矩形描いてきっちり並べたハートをそのまま回そうとしたら、斜めになった時隙間が空いちゃって、キレイなハートじゃなくなってしまったから。
後はプリレンダリング的な最適化処理にもなって良いらしい。




その4

回したり縮小〜拡大してみた!
回すのは画像座標の左上からぐるぐる回ってしまうので、座標を毎回中心で回るようにずらす必要がある。詳しくはソースコードを見てみてください!なるほどって感じ。




arcを使ったartっぽい描画やってみた

tumblrで似たようなGIFアニメ見つけて、試しに作ってみたら結構それっぽく動いた!jsdo.itのhot codeとかにもあがってちょっと嬉しかったよ(*´ω`*)



ただまぁすごく重かったわけです。描画中はしばらく見てるとPCのファンが回りだしてしまったり、iPhoneとかで見るとホッカイロとして活用できるようになります。

で、HTML5 canvas のパフォーマンスの改善という記事を見つけ、これを見ながら頑張ってパフォーマンス改善してみました…!!

改善その1

まぁつまりは動かない背景までアニメ書いてたら大変てのと同じで、動いてない背景まで毎回書き出してたわけです。
それをcanvasタグを2つおいて、position: absoluteで重ねる事でcanvasのレイヤー化をやってみました。



これだけでかなりパフォーマンスは改善したのですが、まだなんか出来そう。
そして次です。


改善その2

次は、描画する指定座標に浮動小数点を使うを重くなるっていうのを直してみました。
ぐるぐる回る点は、単純にMath.cos, Math.sinで指定した座標なのでお構いなしに浮動小数点を使いまくっています。
なので、座標指定するところを

(浮動小数点座標 + 0.5) | 0

というビット演算を使って丸めてみました。あとから仕組みを調べたら頭の良い人は世の中に沢山いるんだなぁという感じでした。恩恵に預かります。。

で、直したのがこれ。



小数点を丸めちゃったらなんかガクガクしちゃったりしないかなーと思ったのですが、人間はそんなに目が良くなかったみたいで見た目も問題ありませんでした。
そして全然ファンが唸らないww


まとめ

色々描画すんのめっちゃたのしい!
最適化とかも、このあとしばらくやってみていて、教えてもらったLUTみたいな前処理をいれてみたり(ブラウザ落ちたw)、var sin = Math.sinみたいに参照が軽くなるみたいな細かい事をやってみたりしていました。

今回、円弧を描くようなアニメーションをさせるときに、sin, cosとかθとか数学でやったわーっていうのを久々に思い出して、それを扱えてるのがなんだか楽しかったです。

最近おすすめされたBeyond InteractionっていうOpenFrameworksの本を読んでるんですが、canvasではないが、これには図形の描き方の初歩から書いてあるので結構勉強になる。

何を目指してるんじゃwwって感じですが、まぁ現状は趣味程度に色々作って遊んでみますね^^


2013-05-11

「UPを使い始めてから、女の子にモテ始めたし、宝くじもあたるしウハウハですよ」渋谷系Webエンジニア 27歳


UP by Jawboneを買って2週間くらい経ったので感想とかよく聞かれるのでブログに書いてみますね。タイトルは心無い友だちが考えてくれました。

UPってなんなの?

手首につけて日々の活動や睡眠時間を管理したりできるライフログガジェット。防水性なのでそのままシャワー浴びれます。
詳しい説明とかはappbankさんの記事見るといいかも。
Jawbone UP: 手首に装着するだけ! iPhoneアプリで健康管理できる注目のアクセサリー!!

なんで買ったの?


似たようなのにFuelbandfitbitがあります。
Fuelbandはカッコイイし、Nike+も使ってランニングしてるので良いなーと思ってましたが、時計を2つつけることになってしまったり、バッテリーの持ちがそんなに良くないぽい。あと睡眠状態が取れなかったり。
fitbitはあんまり周りに使ってる人がいないからわからないのだけど、ガジェットがクリップ式なので、付け替えたりめんどくさそう?よくわかりません^q^

それに比べれば(おしゃれかどうかはおいておいて)アクセサリーとして手首に付けられるし、風呂でも外すことなく使えるので、24時間、バッテリーも持つ10日間ずっとつけっぱなしでいられます。
UPはライフログ系のガジェットとしてつけっぱなしにできるってのが手間がなくて良いかなぁという印象。少しでもめんどくさいと途中でやめちゃいそう。

どんな使い方してるの?

1日の目標に向かって活動していく


UPの初期設定では、1日の活動目標が決められています。大体おすすめの6時間睡眠と10000歩を目標にしておけば十分ぽいのでそのまま使ってます。
真ん中の"Did you know?"には、過去の自分のログを元にUPのアプリが睡眠時間や活動についてアドバイスをくれたり、警告してくれたりします。(現在は英語のみ)

とある平日の日中の活動記録

一日の歩いた歩数や運動の記録を残してくれます。記録は結構正確で、下記URLのグラフでは朝の通勤、ランチタイム、帰ってからのランニングなどがグラフ化されています。
https://jawbone.com/up/activity/moves/BXM3Lg0tIY3HR3_W57NZAQ

・ストップウォッチモード

ランニングやジムでのウェイトトレーニングではストップウォッチモードを使って、正しく活動時間を区切って、後からアプリでどんな運動をしたか設定できたりします。ちゃんと運動したってログをつけると、ただ歩いた時より目標達成しやすいかも。

・アイドルアラート

普段デスクに座ってる時に1時間とか設定した時間動かないでいると「ご主人!動いたほうがいいですぜ!」っていうアラートで運動を促してくれます。
集中してる時に、だんだんパフォーマンスが下がるのを防げたりして、個人的には好きな機能。

とある平日の睡眠記録

寝る前にUPについてるボタンを長押しすると睡眠モードに代わり、それから寝れば記録が開始されます。(あとから手動でも入れられる)
下記リンクのグラフではちゃんと6時くらいに起きたのに2度寝に突入、UPに設定してあった目覚ましで起きて、モードを切り替えずに横になりながらアニメを見ていたことがわかります。
https://jawbone.com/up/activity/sleeps/BXM3Lg0tIY2OSx7HV78x9w

目覚まし機能が結構良くて、深い眠りと浅い眠りを記録してくれている中でも、ちゃんと浅い眠りの時にバイブレーションで起こしてくれるので心なしか気持よく起きれます。

・パワーナップモード

もう一つ、パワーナップ(昼寝)モードってのがあって、まだ会社で使ったことは無いんですが決まった時間内でほんとにちょうどよい時間まで寝かせてくれるので重宝しそうです。(最大睡眠時間の設定もできる)


API連動でもっとself-hack!


最近UPがAPIを公開したので、ランニング情報を記録できるRunKeeperやアプリ連動した体重計のWithingsなどと連携できるようになりました。

個人的に熱いのはWithingsとIFTTTで、Withingsは毎日の活動にプラスして、体重と体脂肪がUP上に記録されていくのは比較しやすくてすごく良いと思ってます。(もうすぐ届く)
IFTTTは10000歩歩いたらtwitterに投稿したり、Evernoteに記録してほげほげしたり、レストランにfoursquareでチェックインしたら食事した記録をとってくれたり…APIを直接使わずともいろいろできそうなワクワクサービスです。


まとめ

最近身体を鍛えるのが趣味なんですが、UPを使ってさらにそれが助長された感じです。
一日のふとした時にUPをアプリに同期させて(ここまで書いてないけどイヤホンジャックをiPhoneに刺すだけで同期できる!)、「やべ、今日あんまり動いてねーな。筋トレするか。」とか、睡眠時間を見れるので「最近ちゃんと寝れてないし、今日はもう寝ようかしら」とか思えるようになったのは実はすげーいいことだなと感じております。

買うときの注意点はサイズを間違えると悲しくなりそうなので、ちゃんと調べてから買うのをおすすめします。
この記事を参考にするといいかも。ただ、買ったばかりの時はちょっと締め付けられる感じがしますが、つけてると少しゆるくなっていくので少しくらいきつくても時期に慣れると思います。

買ったのはこちらです。
色は汚れると嫌だから黒で、手首めっちゃ細いのでSサイズ。Withingsは新しくなってWS-30て型番でbluetooth対応したらしいのでそっちを買ったお。

2013-05-08

JavaScript環境性能比較してみた - indexOf と RegExp の速度比較 (2013/05/08版) +α

















JavaScript初めたばかりで、やっと正規表現に出会ったので速度比較とかやってみたく色々調べてたら下記サイト様を見つけました。大変参考になりました!ありがとうございます。

indexOf と RegExp の速度比較

これが2010/03/30の記事でしたので、サクッと2013/05/08版をやってみた次第でございます。二番煎じ企画。乙!!

ベンチマーク

ベンチマーク用のhtmlベタ書きのJavaScriptソースはこんな感じで実装されています。ボタン押すだけ。

今回はChromeと同じV8で動いているNode.jsでも試してみたのでそちらのソースはこんな感じ。


結果

PCブラウザ+Node.js

グラフの番号は 
(1)indexOf : str.indexOf('item:9999')
(2)静的な正規表現 : /item:9999/.exec(str)
(3)動的生成の正規表現 : new RegExp('item:9999').exec(str)
(4)正規表現 : /item:9999$/.exec(str)
となっています。

Figure 1. PCブラウザとNode.jsの正規表現性能比較

Chromeェ…すげぇ…。4に関しては1msとかでした。
マジか…。

おまけ:iOSでの比較


Figure 2. iPhone標準ブラウザとアプリ内ブラウザの正規表現性能比較

こちらはちょっとおまけで調べたiPhoneでの性能比較。
アプリ内ブラウザにはChromeのiOS版を使ったんですが、Chromeって名前なだけなんですね。。というかAppleのネイティブにブラウザ埋め込んだアプリ締め出しの裏構図が見えてコワイ。。。


まとめ

Node.jsでの性能が知りたかっただけなんですが、色々やったら色々わかって面白かったです。
NodeはChromeと同じくらいのパフォーマンスがでるというのがわかったので、カリカリに作る必要がなければどんなやり方でも行けそうですね。
ただ、$つかった時みたいに明らかな正規表現をするときは速度に差が出るみたいなので、適時パフォーマンス見るのが良さそうです。

iPhoneの結果は面白いくらいアプリ内ブラウザ開発やる気見えなくてコワイですね。
ブラウザアプリラップしただけのネイティブアプリが、一時期締め出し食らったりしてるみたいですし、不便さが勝ってみんな撤退しろー…なんてことを考えてるんですかね?
くわばらくわばら。

Androidは貸してもらえなかったのでまた今度出来ればやります。

えっIE…?おや、誰か来たみたいなのでこの辺で。

2013-05-07

Node.js (express)で使うConnectみたいに使えるミドルウェアをつくる (UserAgent編)



express使ってて、Connectに代表されるbodyParser, session, cookiePerser, compress, errorHandlerみたいな、全ルート処理に対するfilterみたいな実装がしたくてメモ。
具体的に言うとuserAgent判別とか。

※あくまでやり方のメモ!実際の実装ではもっとちゃんとuseragent判定等を書く必要があります。

Connectって?


connect
https://github.com/senchalabs/connect

上記に書いたようなhttpServerの機能をexpressに提供してくれてるライブラリという認識。ひと通りnode.js入門してからgithub読めば大体分かる。readmeにMiddlewareに各種機能とその説明、ソースがある。

※参考
http://d.hatena.ne.jp/hokaccha/20110719/1311053590
hokaccha氏の読んでみた記事



何したいの?

express入門でおまじないのように書いてるapp.configure()内のapp.use()で使えるミドルウェアを自作します。



実装

使い方と作り方。使う方は適当です。

使う方


ミドルウェア(userAgent.js)


実際の処理はreturn function(req, res, next)辺りから始まって、next()を実行することで次のapp.use()のルート処理にexpressが引き継いでくれてる。

適当すぎて申し訳ないのだけど、ここではiPhone以外のUserAgentが来た時は302にstatusを変えてヘッダ変更後、next()しないでres.end()することでredirectしました。



2013-03-26

redisのデータ型の概要と利用例まとめ











RDBMSの代替としてredisを使うことになり、DB設計する上で考慮すべき型の概要と利用法をまとめる。
間違いやもっと良い使い方があれば教えてください^^


■String - 文字列型

・概要

1つのkeyに対して1GBまでの文字列を1つ持つことが出来る。基本。

・使いどころ

JPEGイメージ、シリアライズされたオブジェクト情報など単体で持つ時。
(他の型の基本になってるので、これ単体で使うと言うより応用する感じ?単体で十分なとき等で使う?)



■List - リスト型

・概要

文字列型のリスト。値を追加した順序が保持される。値は重複OK!
リスト前後からの出し入れ、リストの範囲指定での取り出し等の操作ができる。


・使いどころ

時刻または日付を保持するような情報。TwitterのTLの様な追加順に並ぶ一連のデータ。
要素の追加削除がリストの先頭や末尾(そうでない場合は適さない)に高頻度に発生する情報。追加順・時系列順のデータはリスト型に適している。


■Set - セット型

・概要

文字列型のセット。順番を持たないデータの集合。
重複の無い値、または重複をチェックする必要の無い値を格納するのに適している。
セットの検索、セット同士の比較、結合が出来る。

・使いどころ

集合計算を行うような集合した情報。タグ検索が有名。カテゴリに対するユーザーの属性集計などにも使える。



■Sorted set - ソート済みセット型

・概要

setの各要素にソート用の値(Score)を付けたセット。Scoreで自動的にソート。
Scoreは重複可能だが、setの各要素はセット型と同じく重複出来ない。
Scoreを評価して値を取り出す事ができる。Scoreのランキングも取得可能。

・使いどころ

ランキングのような機能を作るために生まれてきたんじゃないかくらい、ランキング作りやすい。
アクセスカウンタ、最新更新順表示など、特定の順序で参照される様なデータ。
※リスト型との使い分けとして、リスト型に対するSORTコマンドを高い頻度で使わなければならない場合は負荷が高くなるのでSorted setを使う。時系列ソートでなければこっち。


■Hash - ハッシュ型

・概要

1つのkeyに対して、field-value型のMapを格納する。
key名はもちろん、key内でのfield名も重複付加。key名が違う場合はfield重複出来る。


・使いどころ

会員情報など、ユーザー名・パスワード・最終ログイン時刻などの構造化されたフィールドを保持させたりできる。




それぞれにクセがあるのでMySQL脳から頭切り替えないとアカン。


※参考
公式日本語リファレンス - データ型
http://redis.shibu.jp/datatypes.html

ニコニコ生放送に見るRedis活用ノウハウ
http://gihyo.jp/dev/feature/01/redis


2013-03-14

expect.jsでNode.jsのテストで色々試した

Node.jsでBDD / TDDするときに必要なモジュール


テストを書くときにも便利なモジュールが沢山あります。
メインで使うのはJasmineとかも良く使われてるみたいだけど、visionmedia製のmochaが扱いやすい。

mocha上では色んなアサーション系モジュールが使える。
(調べたらAssertionは断言、断定するって意味だた。なるほど。)
基本はNode.js自体で持っているAssertで良いハズなんだけども、should.jsとかexpect.jsとかchaiとか色んなものがある。

それぞれはこんなふうに書ける。(requireとかは省略)

それぞれに特徴があって、どれ使ってもなんとかなる感じ。
should => きっと〜だろう。
expect => 〜だと予想する。
みたいに、こうあって欲しいなという英語が使われていて、英語がわかれば使いやすい作りになってる。(''.should.be.empty => ""は空でなければならない。みたいな)

今使っているのはshould.jsをベースにしたexpect.js。
クロスブラウザ対応してたりどんな環境でも特に問題なく動くそうだ。


expect.jsの使い方。


色んな使い方があるけど殆どはドキュメント見ればそのとおりに動く。

基本的な所だと

aはanにも出来るくらい自然言語に近く扱えるらしい。英語出来ないと恩恵ないけどw


ちょっと詰まったのでメモ。
複数のErrorをthrowしちゃうメソッドをチェックするときはちょっと工夫が必要だった。

引数によってthrow結果が変わる場合、そのまま
expect(targetMethod(null)).to.throwError(/param is empty/);
とか書きたくなるけど、これだとtargetMethodが実行されて普通にErrorがthrowされてテストが止まってしまう。

それを回避するためにクロージャを使ってErrorの出し分けをやってみたら上手く行ったわけです。

ただテストに慣れてないだけっていう噂もあるけど、JavaScriptでテストを書くときはexpect.js使って大体のことが出来そうです。

間違ってたり、もっと良い使い方、書き方があれば勉強中なので教えてください〜〜。
よろしくお願い致します。


2013-02-23

SpookyJS & mochaでnode.jsのクライアントサイドテスト

SpookyJS + Mocha


MochaはNode.jsでも動くJavaScriptテストフレームワーク。
SpookyJSとは、PhantomJSというHeadless Webkit(GUIのないWebkit的なもの)を、クライアントサイドのテストUtilityとして使えるCasperJSをNode.jsで使えるようにしたモノです。

やりたいことと構成

Node.jsのプロジェクト(express)上でMocha使ってやってるBackendのテストと一緒に、FrontendのテストもSpookyJS経由で行う。


経緯

この前試したZombie.jsがうまくいかないみたいなので別の方法を探したというわけです。。


やってみよう!!

Mocha

Mochaのインストールとか簡単なhello world



導入としてこのサイトも参考にしました。
http://d.hatena.ne.jp/hokaccha/20111202/1322840375
今回はassertionをshouldでやってるけど、元々使ってるのもあってexpectを採用してます。

PhantomJS

インストールはmacなのでHomebrew。
$ brew install phantomjs

実行とかは公式なQuickStartが良かった。
https://github.com/ariya/phantomjs/wiki/Quick-Start

CasperJS

こちらもHomebrewで。

$ brew install casperjs

APIなどはSpookyJSで使えるものと大体同じ、というかこちらが本家なのでAPIリファレンスをちゃんと見ておくと良いです。むしろSpookyの方にドキュメントが殆ど無い。。

http://casperjs.org/api.html#casper

SpookyJS 

インストールはnpmでできます。
$ npm install spooky

入れた時にnode_module/spooky/template?だったかにsampleがあったのでnodeコマンドで実行して試せます。

その他環境

SpookyJSでunderscoreなど必要みたいなので、package.jsのdependenciesをこんな感じで書く。

"dependencies": {
 "express": "3.0.6",
 "jade": "*",
 "mocha": "*",
 "expect": "*",
 "spooky": "*",
 "underscore": "*"
}


spookyHelper.js

ヘルパーを作っておいて、テストスクリプトから呼べるようにしておきます。



spookyMochaTest.js

spookyHelper.jsを使って、spooky + mochaを実現してるコード。



こっからは、SpookyJS(CasperJS)のAPIゴリゴリ使って、テストを書いてく感じ。
CasperJSの使い方については、また書けたら書きます。







2013-02-20

Zombie.jsでクライアントサイドのテストしてみる




Zombie.js is headless browser.


Zombie.jsはnode.jsで動くクライアントサイトテストフレームワーク。またはユーザーインターフェースを持たないブラウザです。
コレを使ってクライアントサイドのテストが書けます。

Hello Zombie.js


すっごく簡単に使ってみる。(神戸蘭子のアメブロ見てtitleタグ確認するだけ。)



こんな感じ。

browser.successでstatusCodeが200かどうかをnodeのAPI、assert.okを使ってチェック。
browser.textでCSSセレクタ使って見つけたエレメントを取得して、assert.equalでチェック。


その他


form入力とかもできる。


pressButtonとか、clickLinkとか、色んなAPIがあるみたい。

調べてる途中なのだけど、JavaScript使ってDOM生成したエレメントが見れないぽい。。

どうやったらええんや…。

2013-02-18

SublimeText2でEmmet入れたらコケた件


久々にブログを書いた動機


SublimeText2でZenCoding使ってたら機能不全に陥ってしまっていたのでremove packageして、Emmetを入れてみた時のメモ。

現象


 ctrl + shift + pでEmmetをインストールして再起動したら下記のエラーが出た。
Error while loading PyV8 binary: exit code 4
from https://github.com/emmetio/pyv8-binaries
PyV8ってのが足らんらしい。


対処

  1. githubのリンクを辿って行くと下部のREADMEにPyV8のOS別ダウンロードリンクがあったのでそこから自分のOS用のファイルをDLし解凍。
  2. SublimeText2でctrl+shift+p -> "Browse Packages..." を開いて、解凍したフォルダを移動。
  3. SublimeText2を再起動。

その他設定など


Emmetを入れただけだと日本語使えないらしいので、下記サイトを参考に設定変更。

勉強会があったらしい。使い方など。

スニペットの変更はココ
/Users/username/Library/Application Support/Sublime Text 2/Packages/Emmet/emmet/snippets.json

ZenCodingの時と一緒で、langの設定変えたい時等はココで変更できる。