2012-09-21

はてなブログはじめました

Markdownに対応したと聞いて！

とりあえず使ってみます
よさげなら乗り換えようかなー

てすと

// コードスニペット
var hoge = 'abc';
console.log(hoge);
// ハイライトはできない？

html直書き

2012-08-24

WEB+DB PRESS Vol.70にClosure Compiler/Linterの記事を書きました

連載「JavaScript活用最前線 ── 大規模開発の現場から」第3回目の記事を書きました。

今回はClosure CompilerとClosure Linterの紹介と、コンパイル時の警告をもとにコードチェックツールとして利用する方法を解説しました。
最近は割とClosure Compilerを使ってる人が増えてきたような印象がありますが、コードチェックにまで活用している例はあまり見ないので参考になれば嬉しいです。

これはあくまで僕が経験したケースですが、JavaScriptで実際に複数人で大規模なコードを書いてみると、2〜3万行くらいまでは割と頑張ればなんとかなります。でもそれ以上の規模になってくると、型のぶれが抑えられなくなってきます。型のぶれとは、数値を期待してるとこに数値文字列がきて足し算したら文字列連結になっちゃたとか、配列を期待してたら添え字付きのオブジェクト(!!)が入ってきて配列用のメソッドが動かないとか、そういうやつです。

そうすると多少型がぶれても動くコードを書くようになります。
簡単に書くとこのくらいで、

function hoge(num) {
  var number1 = parseInt(num, 10);
}

funktion fuga(arr) {
  var array1 = arr || [];
}

ちょっと複雑になるとこういうものも。

function foo(obj) {
  if (isArray(obj) {
    ...
  } else if (isObject(obj)) {
    ...
  } else {
    ...
  }
}

このようなことをやっていると一応ちゃんと動くんですが、バグは必ずこういう処理が漏れてる箇所で発生するんですよね。

そうして発生したバグをしばらく潰していると、ふと「あれ、これ詰んでね？」と思うようになります。いや、思いました。どれだけ型に対して慎重にコードを書いても必ず型の考慮漏れは出てくるし、書いてるのは自分だけじゃないから書き方も統一できないし、このまま一生後手後手で型エラーと戦うのかという不安感はいやなものです。

そこで取った方法が、Closure Compilerを使ったコンパイル時チェックです。
紙面ではClosure Compilerの基本的な使い方から、コードチェックツールとしての利用方法、継続的インテグレーションに組み込んで綺麗なコードを維持する方法までを解説しています。

Closure Compilerを使ったコードチェックを導入することで、型エラーに対する不安をほぼなくすことができました。ついでにAPIが返すデータ構造の設計がよろしくないとこが見つかったり、コンパイル後のパフォーマンスが向上したり、身長が5cm伸びたりしました。

WEB+DB PRESS Vol.70は本日発売です。Webアプリ開発でJavaScriptを書く方や、きちんとしたJavaScriptを書きたい方は、ぜひ読んでみてください。

WEB+DB PRESS Vol.70

作者: 成田一生,高津戸壮,Dr.Kein,近藤宇智朗,後藤秀宣,mala,中島聡,森田創,堤智代,A-Listers,はまちや2,佐藤裕介,久森達郎,大窪聡,本田謙,和田英一,天野祐介,藤吾郎(gfx),奥野幹也,WEB+DB PRESS編集部
出版社/メーカー: 技術評論社
発売日: 2012/08/24
メディア: 大型本
購入: 8人クリック: 89回
この商品を含むブログ (15件) を見る

2012-06-08

サイボウズ技術説明会 for students でフロントエンドについて話します

6/14(木)にエンジニア志望の学生向けに「サイボウズ技術説明会 for students」というイベントが開催されます。サイボウズ本社のエンジニア3人が登壇し、使っている技術やトレンドを紹介します。

僕からはフロントエンドのお仕事についてお話します。
今のところこんな感じの内容で考えています。

フロントエンドエンジニアとは
なぜフロントエンドエンジニアが必要なのか
必要なスキル
使ってるライブラリなどの紹介
サービス開発時のちょっと具体的な話

フロントエンドエンジニアといっても、漠然とJavaScriptを書いてるイメージだったり、コーダーとかマークアップエンジニアとの違いがよく分からないということが多いと思うので、これを機に普段どんなことをしているか具体的にお話したいと思います。
「こんなことが聞きたい！」とかあれば、こちらかTwitterで @ama_ch までいつでもどうぞ。
僕以外にもサイボウズLiveのモバイルアプリ開発や、定年(35歳)を突破したバリバリCTOのお話がありますよ！
フロントエンドのみならず、Webサービス作りに興味がある人には楽しんでもらえると思うので、ぜひ気軽に参加してください。

イベント詳細・参加申込はこちらから
https://job.rikunabi.com/2013/company/seminar/r646010018/C011/
紹介ブログ
https://job.rikunabi.com/2013/company/blog/detail/r646010018/60/

なお、明日無事に退院できなかった場合は上記の限りではありません。

2012-06-06

社内勉強会でクライアントサイドMVCについて話しました

こんにちは。日曜から盲腸で入院中のama-chです。
普段は不健康の代名詞みたいに扱われていますが、これでも小学校は修学旅行の日以外は皆勤だったし、入院するのも初めてなんです。
退屈な入院生活ですが、PCとモバイル通信環境があると一気に世界が開けます。電源、食事、ベッドの三拍子が揃った理想的な職場がそこにはありました。難点といえば、21時に強制消灯されてしまうことと、なかなか風呂に入らせてもらえないことくらいです。

風呂の話はさておき、今年の2月頃から社内で「フロントエンド勉強会」というものを始めています。
JavaScript, CSS, HTML5, UI/UXなど、フロントエンドに関するテーマでざっくばらんに毎週開催しています。だいぶ前になっちゃいましたが、4月にその勉強会でクライアントサイドMVCについて話したので資料を公開します。

明日のためのクライアントサイドMVC

試しにSpeaker Deckにアップしてみたけど、はてなダイアリーにうまいこと埋め込めなかった＞＜
データにモデルという名前を与えて、モデルとしての振る舞いを定義するようになったという所がMVC フレームワークの出現前後で最も変わったところだと思います。
個人的には、モデルとコンポーネントが綺麗に分離されてるのが好きですね。

2012-04-24

WEB+DB PRESS Vol.68からJavaScriptの連載を始めました

表題の通りですが、WEB+DB PRESS Vol.68 からJavaScriptの連載を書かせていただくことになりました。
連載タイトルは「JavaScript活用最前線 ── 大規模開発の現場から」です。

WEB+DB PRESS Vol.68

作者: 名村卓,三宅陽一郎,小野修司,中島聡,森田創,小飼弾,田籠聡,天野祐介,cho45,大和田純,白土慧,勝間亮,石田忠司,牧本慎平,A-Listers,近藤宇智朗,はまちや2,mala,じゅんいち☆かとう,WEB+DB PRESS編集部
出版社/メーカー: 技術評論社
発売日: 2012/04/24
メディア: 大型本
購入: 4人クリック: 189回
この商品を含むブログ (10件) を見る

第一回目はBackbone.jsを使ってクライアントサイドMVCを実現するという内容です。
大規模なJavaScriptを書く際に使える内容や、最新のホットな話題など、現場の方に参考になるような記事を書いていきたいと思います。
id:teppeis と交互に執筆する予定なので、次回にもぜひご期待ください。
よろしくお願いします！

2011-11-03

作業効率が10倍アップする Chrome Developer Tools の使い方

というタイトルで社内勉強会を開きました。
その時の資料を公開します。
「作業効率が10倍アップする」かどうかは個人差があるのでご注意ください。
最近のChrome Developer Toolsは本当に高機能ですごいですね！僕も資料を作っていて新しい発見が沢山ありました。

追記: 説明不足ですいません。スライドは←→キーで移動します。表紙にも記載しておきました。
作業効率が10倍アップする Chrome Developer Tools の使い方

あとキャプチャをとるのに使ったSkitchが便利すぎて感動しました。

2010-11-14

MacBook Air を買ったので感想とかやったことを書くよー

Mac

Macbook Air の新しいやつ買っちゃいました！わーーーい
まだ触って数日ですが、触ってみた感想やらやった設定などを書いておきます。

後半のソフトの紹介は
MacBookAir 11インチを買って導入したソフト ~サーバエンジニア編~
こちらの内容と結構かぶっているので、設定など細かい話だけ書いておきます。

買ったもの

MacBook Air 13インチ
1.86GHz Intel Core 2 Duo
4GB 1066MHz DDR3 SDRAM
128GB SSD
US Keyboard

メモリだけ 2GB → 4GB に増設しました。

触った感想

全般

起動はえー！だいたい15秒もあれば操作可能な状態になる！
動作はえー！

お役御免になった瀕死のMacBookちゃんとのベンチマーク比較はこちら。
MacBook白

MacBook Air

全然スコアちがうｗ

ぜんぜん熱くならないから膝上でも余裕
- CPUが平常時50℃前後、Flashムービー再生でMAX80℃↑くらい
- さすがに70℃超えてくると熱い
ぜんぜん熱くならないせいかファンも超静か
- でもDropboxインストール後は激しく回ってた
- ムービー再生時も結構回ってる
DVD ドライブはちょっと欲しいかも
起動時（スリープ復帰時）のアルミボディはひんやりしてる

キーボード

少しストロークが浅い気がするけど概ね良い感じ
US配列はホームポジションが左にずれないから右手がトラックパッドにかぶらない！

トラックパッド

トラックパッド自体を押し込むとカチッとクリックできる！知らなかった！
なのでD&Dも全然普通にできる
3本指/4本指スワイプべんり！

つぎは設定やインストールしたソフトなど！

システム環境設定

Dock

自動的に隠す

Dockには起動アプリしか表示しない派なので、ついでに最初からDockに登録されているアプリケーションを全部削除。

Spaces

3×3 の9面で！

Spotlight

Ctrl+Space は Emacs で使いたいのでショートカットの設定をはずす

セキュリティ

スリープから復帰したらすぐにパスワードを要求

ちなみに Ctrl+Shift+Eject でディスプレイを即時スリープできます

キーボード

右下にある「修飾キー」ボタンを押して出るウインドウで、

Caps Lock キーを Ctrl キーに変更

US 配列だと a の左が CapsLock なので。。
元々のCtrlキーはCapsLockにしても邪魔なので、今のところ割り当てなしの状態。

キーボードショートカット

Ctrl+5〜9でSpacesを切り替えるようにチェック
ユニバーサルアクセスのVoiceOverのON/OFFのチェックをはずす

はずしておかないと、たまにキャッシュクリアのつもりで Command+F5 押したときにいきなり喋り出します。色々怖いので、はずしましょう。

トラックパッド

とりあえず軌跡・ダブルクリックの間隔・スクロールを早くする
タップでクリック
2本指の設定は全部チェック
3本指はスワイプで移動
4本指上下スワイプでExposeを起動

トラックパッドは後述する BetterTouchTool で更に機能を割り当てます。

Finder環境設定

すべてのファイル名拡張子を表示

導入したソフト（無料）

開発系のツールとごっちゃになっちゃったけど、全部書いときます。

Google Chrome

メインブラウザに。

Firefox

Firebug 用。

RockMelt

Facebook ビューアとして起動してます。

Dropbox

ドットファイルは Dropbox に同期しています。

Growl

インストーラに同梱されているコマンドラインツール growlnotify も忘れずにね！

Carbon Emacs

.emacs やら elisp は前の Mac で Dropbox に同期しておいたものを引っ張ります。

CotEditor

普段は Emacs だけど、こちらもあると安心します。

Evernote

ただのメモ書き程度にしか使っていませんが、やっぱりクライアントツールがあった方が便利です。

Skype

Beta版を入れてみました。結構変わってますね！カッコイー

The Unarchiver

大抵の圧縮ファイルは解凍できるようになります。

AppCleaner

アプリを綺麗に消せる！

Caffeine

自動でスリープさせたくないときに。

iStat Pro

メモリやCPU温度やファンの回転数など、Macの色んな情報が見られるようになるウィジェット。

Simple Calendar 2

カレンダーウィジェット。祝祭日に対応していて、複数月表示できるのが気に入っています。

KeyRemap4MacBook

キーバインド・キーマップ編集ソフト。
Mac はデフォルトで Emacs 風のキーバインドがある程度有効になっていますが、その他にも自分がよく使う Emacs キーバインドをこれで有効にします。
あと US 配列の人は
・Command_L to Command_L (+ When you type Command_L only, send EISUU)
・Command_R to Command_R (+ When you type Command_R only, send KANA)
この2つを有効にすると、左右の Command キーを単体で押したときに JIS 配列でいう「英数/かな」と同じ挙動になります。Command+Space だとどちらの入力モードなのかよく分からないんですよね。

Visor

Terminal.app がかっこよく出現するようになります。
インストールには SIMBL が必要。

BetterTouchTool

トラックパッドに色んなアクションを割り当てられるようになります。
・Four Finger Swipe Left
・Four Finger Swipe Right
の2つに Spaces を追加しました。4本指の上下スワイプには Expose が割り当てられているので、上下で Expose, 左右で Spaces という感じですね。僕は作業スペースを分けて頻繁に切り替えるので、このようにしました。
・Three Finger Swipe Up
・Three Finger Swipe Down
には Dashboard を割り当て。

あと、BetterTouchTool が起動時にWindowsと同じようなウインドウ操作をするかどうか聞いてくるんですが、これををONにする（自分で設定する場合は Action Setting -> Window Snapping から）と、Win7 のように画面上部にウインドウをドラッグすると最大化したりできるようになります。 Mac はウインドウを最大化しようとして左上の緑色のボタンを押すと、縦だけ大きくなったり最大化したりとよく分からない動きをするので、きちんと最大化できるのはありがたいです。

BTTはログイン時に自動で立ち上がらないっぽいので、
システム環境設定 -> アカウント -> ログイン項目
に ~/Applications/BetterTouchTool.app を追加しておきます。

Xcode

入れようか迷ったんですが、MacPorts のインストールに必要だと怒られたので入れました。
確か 8GB 以上容量が必要です。でかいなー。
ダウンロードには無料のデベロッパー登録が必要です。

MacPorts

とりあえず zsh を入れて一通り設定。 screen はまだいいかな。

StartupSound.prefPane

起動時のジャーンを消すやつです。

導入したソフト（有料）

ATOK

月額300円のやつ。やっぱことえりより ATOK だよね！
推測変換モードをONにして話し言葉で使うのが基本です。

Launchbar

何でもできるコマンドラインランチャ？です。
Quicksilverみたいなやつといった方が分かりやすいかも知れません。
シングルライセンスで24ユーロです。円高のうちにぜひ！
あ、これが Command+Space のキーバインドを使うので、入力モード切替の方は切りました。

おわりに

Mac はまだ2台目であまり理解していないことも多いのですが、僕なりに今の使い方をまとめてみました。
少しでも参考になれば嬉しいです。

はてブロ@ama_ch

https://twitter.com/ama_ch

はてなブログはじめました

Markdownに対応したと聞いて！

てすと

WEB+DB PRESS Vol.70にClosure Compiler/Linterの記事を書きました

サイボウズ技術説明会 for students でフロントエンドについて話します

社内勉強会でクライアントサイドMVCについて話しました

WEB+DB PRESS Vol.68からJavaScriptの連載を始めました

作業効率が10倍アップする Chrome Developer Tools の使い方

MacBook Air を買ったので感想とかやったことを書くよー

買ったもの

触った感想

全般

キーボード

トラックパッド

システム環境設定

Dock

Spaces

Spotlight

セキュリティ

キーボード

キーボードショートカット

トラックパッド

Finder環境設定

導入したソフト（無料）

導入したソフト（有料）

おわりに