seri::diary

プログラミングのこととかポエムとか

2014年総括

mixiやってた頃から毎年こんなのを書いてる気がするので今年も書いてみます。

今年初めて出来たこと

  • ガロリアマンドリンオーケストラに所属し東京での音楽活動が出来た
  • マンドリン合奏コンクールに出た。コンクールというものに出たのは21年前に出たピティナ以来なので初体験ということにしておく。
  • ガチのハッカーがビズリーチにjoinして一緒に仕事した
  • 自分のキャリアの中で初めて事業に直接関与しない部署に所属し後方支援の仕事をした(2014/1〜2014/6)
  • 社内勉強会で毎週LTするのを3ヶ月続けた
  • 新卒に3日でjs + jquery教えるという無謀なことをしたら案の定「早過ぎる」という苦情を新卒から受けて涙目になる
  • fluentd + elasticsearch + kibanaを現場に導入してSlow query駆逐に貢献した
  • Swiftを触った(βの頃)
  • リモートワーク始めて自宅引篭り属性が付与された

職場

  • Rubyを学んだ
  • CoffeeScriptを学んだ
  • Railsを学んだ
  • 仕事でRailsを使ってアプリをこしらえた
  • GithubでPR駆動開発をした
  • RubyMineのキーバインドが使い物にならないのでこの後めちゃくちゃカスタマイズした
  • Kotolin勉強会でメガネが似合う某Kotolinアイドルとのじゃんけんに勝利しInteliJ IDEA Ultimateのライセンスをタダでもらった
  • 男友達とだけで箱根旅行した

ふね

  • 練習のためだけにクソgemを書いたが封印した

今年やろうとしたができなかったこと

  • 前職で社内の技術支援の仕事をしていながらほとんど成果を出せなかった
  • OSS活動するぜとかgem作るぜとか言ってたが何一つ公開できなかった
  • 2014年中に新しいwebサービスを公開しようとしたが何一つ公開できなかった
  • Swiftiphoneアプリ活動再開するぜとか言ってたが何一つやらなかった
  • Kotolin書かなかった(しょぼちむさんたろうさんイケメンさんごめんなさいごめんなさい)
  • アマチュアギターコンクールに挑戦しようとしたが時間的に余裕が無く参加できなかった
  • クラシックギターの独奏レパートリーを常に10曲ぐらいにしようとしたが1曲も増えなかった
  • クロスバイクで多摩サイ爆走しようとしたがあまり乗れなかった
  • 今年入ってから体重70キロを超えていたことに危機感を覚えて60キロ台に戻そうとしたができなかった

今年の反省点

  • 悪い意味で内向的になり過ぎて自分の力だけで成果を出そうとして失敗した局面が多かった
  • プライベートで色々やろうとしすぎて中途半端になってプログラミング活動と音楽活動の両立に失敗した
  • ブログあまり書けなかった(その分Qiitaは結構書いた)
  • 勉強会でほとんど発表できなかった
  • 自分の気持ちを落ち着ける時間を蔑ろにしていつも予定を詰め込んでいたせいか心が不安定な時が多く周囲に迷惑をかけた
  • プライベートの時間をダラダラ過ごしすぎてしまいプライベート活動に割ける時間が少なかった
  • リモートワークで働き過ぎて常に今年10月以降は日常的に疲労感が抜けなくなっていた
  • 赤城さんとケッコンカッコカリできなかった
  • 食生活悪すぎて大して食べてないのに体重増えすぎた

来年の展望

  • 自分がやりたいことを実現するために自分の力だけで実現しようとするのではなく周りをきちんと巻き込む
  • プライベートの時間を有効活用することを心がけ、ダラダラニコ動観たりして時間つぶさない
  • 何に集中するかを選択して「今やるべきではない」と判断した活動は一切しない
  • ヴァイオリン始める
  • 1日1日を大事に生きる。気がつけば20代最後の年なのでもはや人生は残り僅か。
  • 今時のフロントエンドjsを真面目に学ぶ。まずはAngularjsとgulp入門する(今更感すごい)
  • 仕事でのDeveloperProductivity向上のために積極的にできることをする
  • 勉強会LTしないなら出ない、出るならLTする
  • クラシックギターのソロ曲のレパートリーでネタ曲5曲、ガチ曲5曲の計10曲用意できるようにする
  • アマチュアギターコンクール2015のテープ審査に応募する
  • gemリリースするぞ!
  • Qiitaだけでなくブログを毎週書いてなんでもいいからアウトプットし続ける
  • 赤城さんとケッコンカッコカリする
  • 青葉ともケッコンカッコカリする

盛岡に引っ越して一ヶ月が経った

一ヶ月が経ったらブログに所感を書こうと思っていたんですが、思いの外書くことがなくて困りましたが、とりあえず生存報告も兼ねて書いてみます。

寒い

「盛岡とは言え10月ならまだそこまで寒かないし東京圏から引っ越してもそこまで気温差ないだろう」と思ったら引越した初日に台風に直撃されたこともありめちゃくちゃ寒く、翌週から普段着てるものにプラス1枚着る生活に。盛岡先輩パネェっす。
最近も日々寒くなりつつ有りますが、まだファンヒーターを出さずとも重ね着で何とかしのいでおるレベルであります。

普段の生活は殆んど変わらない

自宅で仕事してるので当たり前ですがw
食事はだいたい自炊、たまに外食。週に1回仕事後にマンドリンオケの練習。そんな感じです。

2つの勉強会に参加しました。

「IWDD」

エンジニア・デザイナー向けの毎月開催されている勉強会で、次回で97回目を迎える歴史の長い勉強会です。

参加者は盛岡市内or近郊?で働くフリーランスのエンジニア・デザイナの方が中心のようでした。

自分は前回の第96回に参加して、簡単な自己紹介のLTのようなもの+岩手県内のエンジニアコミュニティ事情の情報交換をさせて頂きました。

このブログでも書きましたが、岩手でrubyのコミュニティが無いようだったのでiwate.rbみたいなのを開催したいという野望があったので、今時点での需要調査みたいなものも兼ねてやってみたんですが、

  • 岩手県内の勉強会は参加者が少ない
  • そのため大体どの勉強会に行っても同じ顔と会うw
  • iwate.rbも昔あったけど参加者が少なかった
  • なのでIWDDでまとめてやるのが早いのでは?

…というような感じだったので、とりあえず次回のIWDDで一枠もらって、私がrubyについて何か語って反応を見てみる予定です。

私もruby歴というかrails歴半年とかそういうレベルなので、とりあえず今まで自分が勉強してきたことのまとめ的な「rubyのここに惚れた」みたいな、渋谷javaでも話したようなネタをまたやってみたいと思いますw (そういえば1年半ぐらいのスパンで仕事で使うメインの言語変わってるんですね私)

「いわてTitanium勉強会」

Titaniumのハンズオン+フリートークという構成の勉強会で、今年から始まった新しい勉強会のようです。

こちらの勉強会は参加者の年齢層が非常に若く、今年で28の私が最年長という、何とも若々しいコミュニティで、岩手県立大学の現役の学生、或いは卒業生が中心(というかみんなw)でした。

開催しているのは盛岡市内のベンチャーである株式会社チイキットのメンバーで、先日こちらの会社の @isseniumさんと呑んだ時に教えてもらい参加しました。

スマフォアプリはネイティブでiphoneアプリandroidアプリの両方をちょろっとやったことある程度で、Titaniumは環境構築でハマって挫折した経験しかない私でしたが、流石にハンズオンということもあり変なトラブルにハマることなく定番のTodoアプリの実装を通してTitaniumのAlloyフレームワークの使い方を知る、という内容でした。

初めてTitanium触ってみましたがviewをHTML + CSSライクに書けるのは直感的というか学習コスト低くて良さそうですね。
ただTitanium Studioの最新版が少し不安定なのと重たい(Ecipseベースだから?)ので、みんなどうしてるんかなと思ったらTitanium Studioは使わないで好きなエディタで書いてコンパイルはTitaniumのCLIツールでやる人が多いんだとか。
jsではなくCoffeScriptでロジックを実装する場合もCLIツールでビルドという流れのようなので、gruntでビルドするような場合とかも考えるとエディタとしてTitanium Studio使わない方が自由度高くて良いのかも、という気がしました。

今後について

まだ盛岡でノマドしてないので今月はどこかでやろうかなと。

先月は固定回線の開通が引越し日の4日後とかになってしまったので、それまでテザリングでしのいでいたせいで月初にLTEの7GB制限ギリギリになってしまいとてもノマド出来る状態ではありませんでしたw

11月になって晴れて堂々とテザリング使えるようになったので、仕事に余裕がある時はどこか行ってノマドしようと思います。盛岡市内はタダでWi-fi使える所は少ないのですが、とりあえず王道のスタバで気分転換兼ねてやってみようかなと思います。

不要品処分で役に立ったサービスまとめ

f:id:serihiro:20141002075144j:plain

ここ3ヶ月ぐらい盛岡への引越し準備を進めていたのですが、引越しに伴う不要品処分で利用したサービスなどを紹介します

買取・不要品無料回収サービス

バイクランド

f:id:serihiro:20141002080842p:plain

  • バイク買取サイト
  • 一括見積りサイトでまとめて見積もりを出してもらった所、一番査定額が高かった
  • 担当者の方が査定額が高くなるポイント・下がるポイントを明確に説明してくれたので金額に納得できた
  • 走行距離1万キロで中古で買ったHONDA VTR250 2009年式を買った額の7割ぐらいで買い取ってもらえた

ドクターヘルメット

f:id:serihiro:20141002080845p:plain

  • バイクのヘルメット買取サイト
  • 送料着払い
  • 配送用のダンボールをタダで送ってれる
  • 2年前に5万ぐらいで買って常用利用してたAraiのヘルメットが1万ぐらいで売れた

ブックリバー

f:id:serihiro:20141002080846p:plain

  • 古本・DVD・ゲーム等の買取サイト
  • 送料着払い
  • ダンボールは自分で用意する
  • 事前に買い取って欲しいISBNをwebサイトのフォームから送ると1営業日ぐらいで査定額をエクセルシートでメールで送ってもらえる
  • 2~3年前に発売されたアニメのBlue-rayとかアメリカのホームドラマのDVDボックスとかをやたら高く買い取ってもらえた

ブックスドリーム 専門書アカデミー

f:id:serihiro:20141002080849p:plain

  • 専門書・技術書などの買取サイト
  • 送料着払い
  • 配送用のダンボールをタダで送ってれる
  • 依頼すれば書籍毎の査定額を教えてもらえる(今回は使わなかった)
  • 高価買取りの書籍リストをwebサイトに掲載しており、実際そのリス トにある商品を買い取ってもらえた所掲載通りの額だった
  • 主に技術書やビジネス本を売ったが、普通の古本屋に出すよりは遥かに高く買い取ってもらえた

パソコン回収.com

f:id:serihiro:20141002081123p:plain

  • ITメディアの記事で取り上げられていたので使ってみた
  • 一部の商品は出張買取無料なので梱包不要
  • 電話したらやたら回収がかなり混んでいて電話した日から2週間後じゃないと予約できなかった
  • 回収日当日の時間指定はできなかった(私は在宅人間なので関係ナシw)
  • 15inch液晶とプリンタとXBOX360を無料で回収してもらった

住所移動に伴うサービス

引越れんらく帳

f:id:serihiro:20141002081918p:plain

  • 電気・ガス・水道・ネットなどの住所移動手続きをネットから一括で出来る東京電力が提供するサービス
  • 現住所での利用停止・新住所での利用開始手続きができる(但し提携業者のみ)
  • 自分が引っ越す盛岡の業者には対応してなかったので、今使っている電気・水道・ガスの利用停止手続きに利用した

タスク管理

Githubのissue

f:id:serihiro:20141002082331p:plain

  • 自分の適当なprivate repositoryのissueで管理していた
  • メモは全部コメントに残しておいた
  • 仕事中に業者から電話がかかってきてちょろっとメモりたい時とか確認したい時に便利だった

その他

24インチのディスプレイとミドルタワーのPC本体を運ぶためにデカい箱を買ったら素材もしっかりしてて良い感じだった

引越しの準備で得た知見

  • 一括見積もりサイトを使うと大量の業者から平日の朝からジャンジャン電話がかかってきて最高にめんどくさかったので余程の理由がない限りオススメしない
  • ネットの回線を移動させようとしたら前入所者の回線が契約されたままですぐに移動手続きができなくて手続き開始が10日ほど遅れたので、出来るだけ早めに回線移動の手続きを始めた方がよい
  • 郵便の転送サービスは転送が始まるまでに1週間ほどのバッファが発生するので早めに申し込んだ方がよい
  • 同じ部屋に3年も住むと意外と要らないものが大量に貯まっていることがあるので定期的に不要品は処分した方がよい
  • 単身引越であっても500キロ以上の長距離移動になると引越し代が凄まじい事になる
  • 地方都市限定の話かも知れないが、8月中旬に独り暮らし向けの物件探しをしても殆んど物件がないのでつらい

次回は盛岡から更新します

エンジニアとしての不安

(完全にぼやきですw)

エンジニアとして働くようになってからはや3年が経ちます(SE時代の2年半はコード書いてないのでノーカン)。

SE時代に憧れていた「コードを書いて飯を食う」ということが少なからず出来るようになってきてはいますが、それでも毎日自分の出来なさに落ち込むことが多々あります。

前職でも入社直後にDIとInterceptorをフルに使いまくったjavaのコードの追い方が分からなくて全然仕事が進まなくて落ち込んだり、しょうもないバグを埋め込んでリリース当日にパニクったりと色々やらかしてきた歴史があります。

それでもずっと続けていればミスもなくなり出来ることも増え、以前は苦労してやっていたことがラクに出来るようになったりと、成長のようなものを感じることはあります。そういう状態が続くとまぁ気持ちのよいものです。慣れた言語、FW等の環境で全力疾走出来る時ほど気持ちいい時はありません。

しかしエンジニアたるものとしては同じ環境で同じものを作り続ける訳にはいかない訳で、最近、また前職の入社直後のような「前に進めない」壁を感じています。

具体的には、ゼロからwebアプリを設計して作ることが難しいと感じています。考えてみれば今までアーキテクトとしてゼロから基板を作ったことが殆んど無かった。

今は主にRailsで仕事をしていますが、Railsでwebアプリを「とりあえず」作ることは至極簡単です。 java + strtus2より遙かにシンプルで分かりやすい。 すぐに動くものが作れる。 Ruby on Rails Guidesという素晴らしいドキュメントがある。

問題はRailsで作るwebアプリ全体のアーキテクチャで、 どういうルーティングでどういうコントローラを設計するか、 モデル(ActiveRecord::Baseのサブクラスの方)にどこまで業務ロジックを乗せるか、 helperやconcernをどう使うか、などなど。

考え出せばキリがない。考えても考もしっくり来る設計が出来ない。本当にこれでいいのか?という手探り感。 これがどうしても拭えません。

この辺も慣れの問題なのかなぁとは思いますが、今の所はよく分かっていません。 とりあえずRESTで設計することに慣れていないのでRESTの思想を勉強していく必要は感じていますが、それ以上に何が必要なのか。。良く分かりませんが、良くわからない以上は実践で学ぶしかないので今やってるプロジェクトをとにかく進めるしかない。

こういう壁に当たると、自分はよく伊藤直也さんのブログのエントリー「エンジニアの不安と壁」というエントリーを読んで自分を奮い立たせてきたのですが、今は何故かあまり楽観的に考えられないというか、色々と悩ましく考えてしまいますw

たまたま9月はやたら忙しくて(勉強会開催、引越の準備や色々調整、マンドリンオケ本番、友人との旅行の幹事、会社の合宿の幹事)肉体的にも精神的にも疲れてるせいか分かりませんが、10月は多少ゆったり出来る事を少しは期待したいと思います。

今更ながらTurbolinksを初めて仕事で使ってみたので色々調べてみた

f:id:serihiro:20140802065933j:plain

※このエントリーで使用している検証環境の各種バージョンは下記の通りです。

  • Railsのバージョンは4.1.4
  • Rubyのバージョンは2.1.2p95
  • Chromeのバージョンは36.0.1985.125 m

※このエントリーの最終更新日は2014.8.11です

2013年辺りのRails4について書かれたブログを読むとTurbolinksに関するエントリが結構多いんですね。

ざっとググって1ページ目に来るのがこれらのエントリー。

そして同じぐらい目にするのが「Turbolinksをオフにする方法」

Railsを使ってなかった頃からtwitterとかでちょいちょい流れてくるTurbolinksの記事を流し読み程度に読んでいたのですが、色んな人が解説エントリを書くほど注目されている一方で、何故か無効にする方法がやたら充実しています。
使っていいのダメなの??ということが外から判断できないということで、どんな恐ろしい機能なのかとjavaを書きながら横目でチラチラを見守っていたのですが、遂に今の職場で使う機会に巡りあいました。これも何かの運命でしょうか。

で、良い機会ですのでTurbolinksについてじっくり調べてみました。 さらに身を持ってその仕様を体験するためにちょっとした実験をやってみたのでその結果をご紹介します。

なお、本エントリーはRailsでアプリを作る人がturbolinksを使う時に気をつけること、というレベルでまとめたので、Turbolinksの実装の詳細についてはあまり触れていませんが、冒頭で紹介したリンク先の内容に詳しく記述されていますのでそちらを読むとさらに理解が深まると思います。

Turbolinksとは

Githubの本家リポジトリrails/turbolinks · GitHubでは以下のように説明されています。

  • Turbolinksはあなたのアプリケーションを早くするよ!
  • ブラウザにjs,cssをリコンパイルさせずに現在のページをActiveに保ってbodyとtitleとheadだけを書き変えるよ!
  • pjaxと似てるけど、Turbolinksは何も考えずにbodyをガバっとreplaceしてくれるのでサーバ側で特別なことをせずにpjaxを使うのとほぼ同じような恩恵を得られるよ!
  • もちろん(現在のページをActiveに保つということは)ブラウザ上でjsの長時間のプロセスを持続することになるので、処理の肥大化やメモリリークに気をつける必要があるけど、あなたがファンキーなことをしなければ多分大丈夫だよ!

要するにページ遷移(GETのみ)を通常のページ移動ではなくajaxで取得したhtmlでbodyを入れ変えるだけの処理に差し替えることで高速化するgemです。 似たようなことをしてくれるライブラリとしてpjaxというjqueryライブラリがあります。

Turbolinksにおけるjsの取り扱い

しかし手放しで何も考えずに入れとけばちゃんと動くというものでもないようです。

  • 最初にロードしたページがActive状態であり続ける
  • jsのプロセスが持続する

この事実を考慮すると今まで書いていたjsがそのまま動くのかちょっと不安になります。

例えばこんなコードはTurbolinksを使ってるページでもページ遷移毎に実行されるのでしょうか?

<script>
window.onload = function(){
  console.log('nya-n');
});
</script>

window.onloadの実行タイミングはページ全体がロードされた後のはず。 ってことは、最初の1ページ目の表示では問題なくwindow.onloadが発火しそうですが、Turbolinksが有効になっているページでページ遷移した時は動くのでしょうか? ついでに頻繁に使う$(document).ready

迷ったら実験しましょう。

実験 各イベントはいつ発火するのか

rails4.1.4で簡単なサンプルを作りました。
サンプルコードのリポジトリこちらです。

$ rake routes
Prefix Verb URI Pattern      Controller#Action
  root GET  /                index#index
 other GET  /other(.:format) index#other

/views/index/index.html.erb

/views/index/other.html.erb

/assets/javascripts/index.js.coffee

rails sして実際にアクセスしてみます。

実験1  index/indexのURLを指定してアクセス

f:id:serihiro:20140810144656p:plain

  1. ベタ書きしたjsの即時関数
  2. assets配下のCoffeeScriptに書いた$(document).ready
  3. ベタ書きした$(document).ready
  4. page:change
  5. page:update
  6. assets配下のCofeeScriptに書いた$(window).load
  7. ベタ書きした$(window).load

実験2 リンクをクリックしてindex/otherへページ遷移

f:id:serihiro:20140810145149p:plain

  1. page:before-change
  2. page:fetch
  3. page:receive
  4. ベタ書きしたjsの即時関数
  5. ベタ書きした$(document).ready
  6. page:change
  7. page:update
  8. page:load

実験3 リンクをクリックしてindex/indexへページ遷移

f:id:serihiro:20140810145730p:plain

  1. page:before-change
  2. page:fetch
  3. page:receive
  4. ベタ書きしたjsの即時関数
  5. ベタ書きした$(document).ready
  6. page:change
  7. page:update
  8. page:load

この結果から以下のことが言えます。

  • $(window).loadはページの初回表示時のみ実行され、リンクをクリックして遷移した場合は実行されない
  • $(document).readyはページの初回表示時のみ実行され、リンクをクリックして遷移した場合は実行されない
  • テンプレートファイルにベタ書きしたjsはページ遷移毎に実行される
  • テンプレートファイルにベタ書きした$(documebt).readyはページ遷移毎に実行される
  • テンプレートファイルにベタ書きした$(window).loadはリンクをクリックして遷移した場合は実行されない

assets配下のCoffeScriptに書いた処理はTurbolinksの管理配下の挙動になり、テンプレートファイルに書いたjsはページ遷移毎にそのまま実行されるようです。
こちらの記事にも書いてありますが、ページ遷移の度にロードされたhtml内のbodyタグ内のjsタグを取得して、新規のjsタグを組み立て再度差し込んで実行させているようです。

処理的には、turbolinks本体のCoffeeScriptを読み込んだ時にAタグをクリックした際にxhrオブジェクトを作ってxhrオブジェクトからリクエストを飛ばす処理をbindしているのですが、ページ遷移時の詳細な挙動はQiitaのこちらの記事に詳しく説明されています。 CoffeeScript側のソースだけなら436行しかないのですぐ読めますので気になる方は一度全部読んでみると良いと思います。実装自体は割と素直に書いてありますので読みやすいです。

Turbolinks導入のメリット

最初に書いたようにTurbolinksを導入することの利点はページロードの高速化です。html全体を再ロードしないため、ブラウザ上での体感速度向上が期待できます。

Turbolinks導入のデメリット

これまで書いてきたjsが動かなくなる可能性が高い

通常のwebページとjsの挙動が大きく変わるためこれまで作ってきたjsが上手く動作しない可能性が高くなります。
これまでRails3で作ってきたrailsアプリケーションをrails4にアップグレードした途端に正しく動かなくなるといったことが簡単に発生します。

ページ遷移してもmetaタグが更新されない

ページ遷移してもCSRF-Token以外のmetaタグが更新されないという挙動になっています。

そのため、普通ページ毎に内容が異なるogタグ等もページ遷移しても更新されません。 しかし、実際にfacebookのいいね!ボタンをクリックしたりした場合においては、フルロードしたコンテンツを各SNSが取得してくれるはずなので問題無いのでは?というようなコメントがついています。DHHも「それが必要なユースケースは聞いたことがない(I haven't heard a compelling use case yet)」とコメントしています。

既存のjsが動かなくなるケース

既存のjsをそのまま使おうとした時にどんな問題が起きるか具体例を上げて説明します。

$(document).readyにイベントをbindする処理を書いてたら最初にアクセスしたページではbindされるが遷移したらbindされない

$(document).readyはリンククリックでのページ遷移では発火しないので、同じjsファイルを読み込んでいるのに「外部リンクから最初にやってきた時しか正しく動かない」ということが起きます。

$(document)に同じイベントが多重bindされて正しい挙動にならない

全ページで読み込むjsで(例えば共有しているテンプレートファイルにベタ書き)即時関数で以下のbind処理を記述したとします。

<script>
$(function(){
  $(document).on('click', '#button', function(){
    console.log('ニャーン');
  })();
});
</script>

で、何度もページ遷移してから#bindをクリックするとページ遷移した分だけconsoleに「ニャーン」と表示されます。猫好きの私歓喜!とか言ってる場合じゃありません。

これが発生する原因は、最初に書いたとおりjsのプロセスがずっと継続するため、$(document)のオブジェクトはページ遷移してもずっと同一のものが生存し続けています。
そのため、ページ遷移する度にbindするようにすると、同一の$(document)オブジェクトに再度bindしてしまうため、何重にも同じイベントがbindされることになります。 私も最初この挙動にハマって小一時間悩みました…。1回のアクションでajaxリクエストが複数回飛んでるっぽい?などの分かりにくい問題が起こります。

なんでみんなオフにしたがるのか?

既存アプリにTurbolinksを導入する場合、「デメリットの方が多くなるケースが多い」ということに尽きると思います。 具体的には * jsをTurbolinksの挙動に合わせて修正するコストが高い * Turbolinksの挙動を正しく理解していないと簡単にトラブルになる * フロントエンドを担当するエンジニアへの負担が大きくなる といった所が問題になりそうです。想像の範囲ですが。

それでもTurbolinksを有効にする場合に気をつけること

urbolinksを使用する際のjs実装について気をつけることについて説明します。

ページ遷移の度に実行したいjsの実装

lightboxやmasonryなどのデザイン系のjQueryプラグインを適用するケースによくある「ページ遷移の度に実行したい」場合。 多重実行されるとやっぱり挙動がおかしくなるので、「複数回実行はさせたくないがページ遷移毎に1回だけ実行したい」という要件になります。

これを実現するにはいくつか方法があります。

1. テンプレートファイルにベタ書きする

毎回実行されることが保証されていますのでテンプレートファイルに記述すれば良さそうです。ただ、jsはassetsで管理してapplication.jsの1ファイルにまとめてロードするというrailsの作法からはちょっと外れる形にはなります(これも厳密に守るのはかなり難しい作法ですが)

2. $(document).readypage:loadの両方で実行されるようにassets管理下のjs,coffeescriptに記述する

$(document).readyはページ初回表示時にのみ実行され、page:loadはページ遷移時にのみ実行されます。ページ初回表示時には実行されません。

なので、同じ処理を両イベントでbindしておけば、常にページ遷移ごとに一回だけ実行されることが保証されます。

以下のように記述します。

$(document).on 'ready page:load', -> 
  console.log 'ready and load'

これでページ遷移毎に実行され、かつ一回だけ実行されます。

ただし、ブラウザバックで戻った時にはpage:loadが実行されないので、ブラウザバックで実行されなくて困る処理はpage:changeにbindする必要があります。 しかし、turbolinks使用時にブラウザの戻るボタンをクリックした場合、turbolinksが内部でキャッシュしているpageCacheからページが復元され(turbolinksはURLの書き換え等にhisotry APIを使っています)、pushStateが使えない場合はリダイレクトされる(location.hrefを書き変えてます)ので大体の場合において問題は起きないと思います。

イベントのbind

難しいのはこっちで、いくつか方法が考えられますがどの方法を取るにしても開発チーム内で話し合って決めておく必要があります。 主な関心事としては「多重bind」をいかに防止するかということになりますが、逆に多重bindされても問題がないようにイベントのハンドラを実装しておくというの手です。

まず前提条件としてテンプレートファイルにベタ書きせず、assetで管理されているjs、CoffeeScriptのファイルに記述することが条件になります。
テンプレートファイルにイベントをbindする処理を普通に書くとページ遷移毎にイベントがbindされるので$(document)の場合は上手くワークしません。 テンプレートファイルにjsを書かなければいけないケースはControllerから値を渡すようなケースに限定して、使わないように開発チーム内で取り決めをしておく必要があります。

1.$(document)にbindする場合

ajaxで後からロードするhtmlに対してイベントを定義しておく場合などによく用いられるケースです。

assetでapplication.js1つにjsがまとめられる場合は、$(document).ready内でbindするように記述します。

■/assets/path/index.js.coffee

$(document).ready ->
  $(document).on 'click', '#popup', (e)->
    alert('popup') 
  $(document).on 'hover', '.menu', (e)->
    e.currentTarget.addClass('hovered')

上述の通り初回表示時にのみ実行されるため、初回表示時に$(document)にbindする全てのイベントがbindされその後ページ遷移しても実行されません。
これにより確実に一回だけイベントがbindされます。ページ遷移毎に$(document) にbindするように実装すると上述した通り同じイベントが同じDOMに何重にもbindされて不具合を起こすケースがあります。

イベントのbind自体は$(document)に直接bindするのが一番早いようですし、パフォーマンス的にも問題は起こりにくい方法だと考えられますので、特別な理由が無い限り、イベントのbindは$(document).on({event}, {selector}, {callback})の形式に統一してしまうのが良いのではないかと思います。
参考:高速で安全なjQueryを書くために今できること | Dress Cording

ページごとにjsを読み込む場合は、そもそもturbolinksのページ遷移にならず通常の遷移になるので気にする必要はないですが、turbolinksの恩恵を受けられなくなります。

2.指定のセレクタにbindする場合

$(document).'ready page:load'でbindするようにすればページ遷移毎に実行されますので、これで対応出来ると思います。

こんな面倒なことしてられるか!俺はRails4でも今までどおりに開発させてもらう!という場合

特定のリンク時のみturbolinksで遷移せず通常のページ遷移をするようにする場合

aタグにdata-no-turbolinkという属性を付けます。 例:

<a href="/user" data-no-turbolink>User List</a>

全ページでリンククリック時のページ遷移にturbolinksを使わない場合

gemファイルとturbolinksを読み込んでる箇所をjs,htmlから削除します。turbolinksのソース読み込んだ時にAタグにbindingされるんでそりゃそうですが。
詳しい手順はこちらを参照。

まとめ

以上、簡単ですがturbolinksの挙動と実際に使う場合の注意点について述べました。
文中でも書いたとおり、これまでの色々なweb上でのjsの常識が通じなくなりますので、既存のjsを流用する場合はかなりの手間が必要になります。
またAngular.jsなどのフロントエンドフレームワークを使う場合においても対応が必要なようです。

そのためjsを多用したSPAを作る場合や、開発メンバーが不慣れな場合はturbolinks自体使わないという選択肢もアリだと思います。正直私も最近初めて使ったのですが最初は色々なものが動いたり動かなかったりでなんじゃこりゃと思いました。

ただ、Rails4から標準で有効になっている以上、Railsの作法の一つとして実装されているものだと考えています。
今後のバージョンアップでどうなるか分かりませんが、今後Railsで新規アプリを作っていくのであれば、うまい付き合い方を知っておいた方が結果的にRails Wayの恩恵をより受けられるようになっていくのではないかと勝手に考え、今回の機会にまとめてみました。

【お前のチケット】チーム開発でのチケット改善術【解読不能】

f:id:serihiro:20140809224222j:plain

Issue管理システムを使っている開発現場では同僚の書いたチケットに悩まされる以下の様な光景が良く見られます。

事例1「何の目的で作られたのか分からないチケット」

ソースレビューを振られたのでチケットを見てみたら、何を変更したいかは分かるけどこの変更がどういう意味があるのか分からないケース

担当者の対応

作業したメンバーの席まで歩いて行って
「ねーねーこれさー、何のために作ったの?
「あーそれはですね、まず○○という話がありまして、それで…」
(背景から説明されて15分経過)

事例2「ソースを全部読まないと何を変更したか分からないチケット」

ソースレビューを振られたのでチケットを見てみたら10コミットぐらい入れてあるけどチケットの説明が簡素過ぎて何の仕様をどう変更したか(もしくは新規に作ったか)がソースの差分を全部読み込まないと分からないケース

担当者の対応

作業したメンバーの席まで歩いて行って
「ねーねーこれさー、要するに何変えたの?
「あー、ちょっと待ってもらって良いですか?(いっぱい変えたからすぐ出てこない…)」
(思い出して変更点を列挙するまでに10分経過)

事例3「意味がわからないチケット」

誰かが切ったチケットを振られたのはいいけど何が書いてあるか分からないケース

担当者の対応

チケットを切ったメンバーの席まで歩いて行って
「ねーねーこれさー、何?
「あー、これ別のチケットから派生して作られたんで良くわからないっすねー」
「Aさんが詳しいはずだからAさんに聞いてみましょう」
Aさん「良く分かんないからBさんにも聞きましょう」
Bさん「いや俺知らんし」

運が悪いとドラクエの如くいろんな人の所にタライ回しにされ1時間近く彷徨うハメになります。

事例4「後になって振り返ると全然分からないチケット」

チケットは正常に処理され、作業者とレビュアーは合意が取れておりすでに本番にリリースされているのに、第三者がそのチケットを読んだだけでは内容がサッパリ分からない。 しかしその修正で障害が発生したので担当者を問い詰めなければいけないケース。

当事者の対応

作業したメンバーとレビューしたメンバーの席まで走って行って問い詰めるが当人達も覚えていなくて全社を巻き込んで泥沼化する
→最悪殴り合いに発展

何が原因か?

RedmineBacklogJIRAGithubといったIssue管理システムを使う最近の開発では、個々のチケットを通じて相手に作業依頼をするケースが多くなります。

口頭やメールで依頼する内容をつらつら書いたりすることなく、Issue管理システム上でチケットの担当者を変更し、Issue管理システムから飛んでくるメールで作業を依頼されたことを周知させている現場も多いのではないかと思います(少なくとも自分が関わった現場ではそうでした)。

そのため、他人に意思を正しく伝えるには、チケットに必要な情報が十分に掲載されている必要があります。
そうしないと上記のように、作業を振られる度にいちいち担当者の所まで行って質問しに行かなければならず、質問しに行ったついでにあれやこれや雑談していると簡単に10分、15分を無駄にしてしまいます。チーム内で同じことがどこかで毎日起きていたら間違いなくチーム全体の生産性の低下につながります。(そして何故か問題として取り扱われにくいですコレ)

どうするか

そんな重大な問題を引き起こしかねない一方で、上記の事例は全て「チケットの書き方」をちょっと改善することで大方解決できそうな問題です。

以下に説明する「ちょっとした気遣い」程度のことで、チームの生産性を大きく向上させることが出来ると信じています。

伝わりやすいチケットを書く上で自分が気をつけていること

現職ではGithubをIssue管理に使っていますが、IssueやPullRequestの説明やコメントを書くときに以下のことに気をつけています。

背景、目的、作業内容を必ず書く

簡単でも良いのでこの3点を押さえていれば、プロジェクト内の第三者が読んだ時に困ることは無いと思います。 この3点さえ抑えれば他の事は自ずと導かれてくるはずです。

しかし残念ながらこの3点すら書かれていないチケットを数多く目にし、その度にチケットを切ったメンバーの所に「そもそもコレってどういう話ですか?」という所から問答をスタートしなければならないケースが多々ありました…

<背景>

ユーザー新規登録画面においてページ離脱率を向上させる施策を実施したい。
そのために入力フォームがどのくらい入力された段階で離脱したかを知る必要がある。

<目的>

ユーザーが離脱した時点でどの入力フォームが入力済みであるかを知る。

<作業内容>

Google Analyticsのイベントトラッキングで以下のイベントを
トラッキングできるようにjsを仕込む。

TODO:
・入力フォームに入力してfocusが外れた時。未入力時は飛ばさない
(個々のinputタグのnameと入力された文字数をGoogle Analyticsに飛ばす)
・確認ボタンのonsubtmit
・ページ離脱(beforeunloadにbindする)

Redmineを使ってる場合はIssue Templateプラグインを入れてテンプレートとして上記のような項目のタイトルを入れておくと良いと思います。

また、Githubの場合はタスクリストをチェックボックスで作ることができるので、PullRequestの場合は必ず説明文に入れています。

画像で表現できるものは必ず画像を貼る

web画面やスマフォアプリ等でGUIがあるアプリの場合、必ずキャプチャを貼ります。 口で「UserControllerのlistで表示される画面の上から3番目のtableでさ~」なんて言われても分かりませんが、
キャプチャ取って丸つけとけば一発です。百聞は一見に如かずと昔の人は言いましたが今でも通用します。

文章では伝わらないことが画像や絵なら一発で伝わることも少なくありません。面倒臭がらずに画像に頼りましょう。 私はwebのキャプチャを取るためにChromeExtentionのAwesome Screenshotを使っています。
全体キャプチャ・部分キャプチャ・トリミングだけでなく、文字の表示や、四角・丸などで該当箇所を囲んだりといった加工がブラウザ上でできます。最近なんか挙動が怪しいですが、とりあえず使えてます。

f:id:serihiro:20140809220832p:plain

あとはMacだったら画面の動作をQuickTimeでキャプチャしてGifアニメにして貼るのもオススメです。

チケットの説明文に書く情報は出来るだけ沢山

バグチケットの場合だと情報が多すぎて困るケースは殆んどありません、というか多分ないです。
バグ調査の情報として載せられるものは何でも載っけましょう。 私の場合は以下をよく載せています。

  • サーバサイドのエラーログ
  • 問題を引き起こしてるSQL
  • 問題が起きている画面のキャプチャ
  • 問題が起きた際のmysqlshow full processlistのログ
  • 関連する資料ファイル(Excel,pptなどの外部ファイルがあれば)
  • 関連するチケットへのリンク

自分の作業メモをチケット上に残す

実践している人が意外とあまりいないtipsですが、自分がチケットを作ったり実際に作業している際に考え方こと、仕様決定で迷ったことなどをチケット上に残しておくと、レビュアーやテスター対してコミットの意図が伝わりやすくなります。

後で作業者や起票者の「思考をトレース出来る」というのは文章によるコミュニケーションの大きな利点ですので活用しない手はありません。
ただしあまり沢山書くと邪魔になってしまうので、ある程度バーっと書いてからあとで整理しておくのがオススメです。

自分の場合は以下の様なものをチケットに書いています。

  • 自分が手を入れている部分の仕様メモ
  • 疑問点とそれに対する回答(自分で聞いて回って解決したら回答を付け足しておく)
  • 実装中に「これでいいのかな?」と思ったこと(あとでレビュアーにレビュー依頼時に重点的に見てもらうために)
  • 設計の意図
  • 作業中に作った画面のキャプチャ(作業中は自分が見る用に、レビュー/テスト時はレビュアー/テスターが分かるように)

最後に

こういう話をすると高確率で「めんどくさい」「うちのチームは誰もチケットの内容なんて誰も読まない」 「Face to Faceで十分会話してるから問題ない」とか何とか言われます。

しかし、ちょっとやってみれば分かりますが、チケットを切る際に背景・目的・作業内容の3点を箇条書きにするようにするだけなら、時間は5分もかかりません。

その5分の労力によって、マネージャーや他のメンバーが質問しに来る時間を無くしてチーム全体の生産性を高めてみんな早く帰れるようになると考えれば、業務中にtwitterfacebookを眺める5分間を差し出すことは十分割に合うことだと思うのですが、どうでしょうか?w

先ず隗より始めよということで、自分からチケットの書き方を変えてみると良いと思います。 別に文句を言う人はいないはずです(多分)

自分も1人で上記のようなことを勝手に始めましたが、段々他の人が真似するようになりました。

パスタ大量消費に備えてニンニクをオリーブオイル漬けにした話

f:id:serihiro:20140809113846j:plain

遂に料理ネタにまで手を出してしまいますます何のブログか分からなくなってきましたが、色々ネタがあった方が楽しいので良いことにしましょうw

2014.8.19追記

先週までは平気だったのにニンニクから酸味がし始めたので捨てましたorz

元々傷んでたのか(いくつか色が怪しいのがあったので)瓶に入ってから発酵し始めたのか分かりませんが、とにかく危険なので処分しました…
さよならまだ結構余ってたニンニク達…

発端

普段在宅でリモートワークしていることもあって食事は家で済ませる事が多いのですが、大体時間がない中で作るのでサクっと作れるものが良い訳なんですね。

ところで私、若いころからペペロンチーノ厨でして、今でも2日に一回は作って食べてます。調理時間が大体15分ぐらいで済むので昼でもサクっと作れるのも良いのですね。

普段自炊しないけどペペロンチーノだけは自分で作る

で、このペペロンチーノですが、作るのは簡単ですぐ出来るしアレンジもし易いし飽きにくいわで大変優れた料理なのですが、「ニンニクの皮を剥いてスライスするのがめんどくさい」という課題を抱えておりました。

逆に料理らしい工程はそこぐらいのような気がしなくもないのですが、私のように2日に1回ニンニク加工をしておりますとそれなりの作業時間になりますし、毎回毎回繰り返すのもDRYの原則に反しています。普段仕事でRails使ってる人間としてはそれはイカン訳ですね。

ということで何か良い方法はないかとネットを調べた所、どうもニンニクをオリーブオイル漬けにして大量保存するのがポピュラーなソリューションであることが分かりました。 クックパッドでレシピをいくつか調べた所、煮沸した瓶にスライスしたニンニクを放り込みオリーブオイル攻めにすれば良いということが分かりました。

これぐらいならすぐ出来そう、ということで土曜日で休みの今日、朝からスーパー行ってニンニクを6個とオリーブオイルを購入し、ハンズで500mlの密閉ビンを買って来て釜茹での刑(但しお湯)にしました。

作業手順

1.ニンニクを並べる

特に意味はありませんが6個もニンニクを一気に調理するとなるとさすがに気分が高揚します。

f:id:serihiro:20140809103520j:plain

なお、手前の一個は、皮を剥いた所実に強い変色が見られた上に刺激臭がしたので速攻でゴミ箱にシューしました。

なので今回加工したのは5個です。

2.皮を剥く

剥きます。

f:id:serihiro:20140809110327j:plain

因みに水につけておくと簡単に剥けるようになるらしいので次回試してみます。

3.下の方を切り落とす

切り落とします。

f:id:serihiro:20140809110630j:plain

4.芽を取る

因みに今回買ったやつは何故か芽が無い?というか、可食部と強く結合していて上手く除去できないものが多かったのでスライスしてからちまちま取りました。

ニンニクの収穫期は5月末~6月とのことなので、8月上旬に出回ってるやつはまだ実が新しいのが多いせいもあるのでしょうかね。普段ならケツを切って電子レンジに放り込んで30秒加熱すると、芽を下からほじくって引っ張るとスルっと抜けるようになりますのでそうしています。

5.スライスする

スライスします。スライスしないで漬ける人もいるようですが、私の場合用途はペペロンチーノ一択ですので躊躇なく切ります。御免。

f:id:serihiro:20140809113319j:plain

6.オリーブオイル攻めにする

フタいっぱいまで入れるのがいいそうなんで、写真を取った後にもう少し足してギリギリまで入れました。

f:id:serihiro:20140809113520j:plain

7.フタを締めて暗くて冷たい所に監禁する

犯罪臭がしますね

f:id:serihiro:20140809113813j:plain

こんな感じで今後多少ペペロンチーノライフが改善しそうです。

今回の作業時間

  • 密閉ビン釜茹での刑 15分
  • ニンニク5個の加工・瓶詰め 40分
    合計:55分

使用した食材

  • にんにく5個
  • オリーブオイル300mlぐらい