2012/01/30
こんにちは。きんくまです。
Sublime Text 2を買いました。
この間TextMateも買ったばかりなのですが、気に入ったので。
Keith Petersさんのブログで知りました。
１週間ほど試してみてたところ、気に入ったポイントは
1. 2バイトサポート
2. 起動時間が速い
3. Pythonで拡張機能をかける
ソースコードの中に日本語を入れることがあるので、1. は重要な点です。
TextMateはここが弱かったので、普通に入出力ができるSublimeは良い点でした。
カスタマイズが好きな私にとって、3は魅力的な点です。
でも、まだやり方がわからないので、時間ができたら調べてみようと思います。
2012/01/20
こんにちは。きんくまです。
JavaScriptをまた勉強しています。今回はだらだら日記です。
この間本を買いました。
>> JavaScript: The Good Parts
そんで、この本の巻末にjsonのパーサーが載っていました。
調べてみたら、githubにあがってるやつでした。
パーサーっていうのは、文字列を解析するものためのものです。
そんで、興味があったので、どうやってやっているのか、調べてました。
本にのってたのは、このページのやつでした。
これは、コードとしても短いので、みやすかったです。
コードが長くなっちゃうと、今見ているのが何をしているのか、わからなくなっちゃうのだけど、これは、そんなことがなかったです。
最後のところが何しているのかわからなかったけど、文字を1文字ずつ読み込んでいって、それが何を表すか評価をしていっていることがよくわかりました。
コードみただけじゃわかんなかったので、console.logさしこんで確認していったのですけどね、、。
前に、syntaxhighlighterみたいのって作ってみたいなーと思ったことがあったのだけど、どうやっていいのかわからなかったのですが、こうやって解析していけば、できそうな気がします。
前にCoffeeScriptを試したくて、入れたnode.jsでしたが、チュートリアルの動画をみていたら、nodeそのものに興味がわいてきました。
チュートリアルの動画
Homepage – Node Tuts – Node.js Free screencast tutorials
EPISODE 8ぐらいまでみたところ。
スクリーンキャプチャしながらコメントしているので、タイプミスやコードエラーもよくあるのだけれど、それをすぐに直してるところが、なんかリアルっていうか。楽しい感じです。
TextMateを使っているようなので、私も真似して体験版を使ってみました。
そしたら、なんかよさそうだったので、購入しました。
Aptanaの方が高機能なのだけど、TextMateは軽いのでよし。
前のバージョンでは2バイトがうまく表示できなかったみたいだけど、TextMate2が出ていて、そっちはうまく表示できているので、よし。
でも、表示はよいのだけど、日本語入力がうまくいかないのです。Ctrl+mでないと確定できないので、これで長文はかけないという、、。
バグというかそのことを開発元に伝えたいのだけど、どこに書けば良いのだろう？
>> TextMate 2 がやってきた | イナヅマtvログ
それで、node.jsのチュートリアルページも一通りやってみました。
チュートリアルのページ
The Node Beginner Book
チュートリアルのページをやると、どうやって他のjsを読み込んだりするかっていう基本的なことがわかります。
node.jsの何に興味をひかれたかというと、サーバーが簡単に作れるというところです。
httpサーバー、socketサーバー、websocketサーバー。
socketサーバーができるということは、flashとも簡単に通信ができるんです。
websocketのサーバーをたてれば、jsともソケット通信ができるという。
そんで、websocketについて調べてました。
まだ仕様は確定していないので、各ブラウザによって使っている仕様のバージョンが違います。
このページがよくわかりやすいです。
>> Jettyで始めるWebSocket超入門
仕様書をもとに、自分でサーバー側を書いてみようと思いました。（クライアント側のJavaScriptはわりと簡単。ブラウザが難しいところやってくれるからね！ ）
現在のChrome（16.0.912.75）の仕様書はこれ（iOSのsafariはまた違うバージョンで互換性なし！）
The WebSocket protocol draft-ietf-hybi-thewebsocketprotocol-13
仕様書にはプロトコルが書かれています。
プロトコルっていうのは、通信の手順のとりきめですね。
電話のかけかただったら、受話器をとってから番号を押すみたいな、そういう手順です。
Websocketのこれには２つの段階があります。
1. ハンドシェイク（握手。接続を確立するまで）
2. 実際のデータの送受信（フレームと言われる単位で行う）
そんで、wiki見ながらハンドシェイクまでは自力で実装できたのだけど、データの送受信がどうやってやるのかわからず。
チュートリアル動画にもあったSocket.ioのソースコードを見てみることに。
最初は何をやっているのかわからなかったのですが、ビット演算をしているらしい。
ビット演算子
フレーム構造はこうやって書かれています。
>>http://tools.ietf.org/html/draft-ietf-hybi-thewebsocketprotocol-13#section-5.2
0 1 2 3
0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1
+-+-+-+-+-------+-+-------------+-------------------------------+
|F|R|R|R| opcode|M| Payload len | Extended payload length |
|I|S|S|S| (4) |A| (7) | (16/63) |
|N|V|V|V| |S| | (if payload len==126/127) |
| |1|2|3| |K| | |
+-+-+-+-+-------+-+-------------+ - - - - - - - - - - - - - - - +
| Extended payload length continued, if payload len == 127 |
+ - - - - - - - - - - - - - - - +-------------------------------+
| |Masking-key, if MASK set to 1 |
+-------------------------------+-------------------------------+
| Masking-key (continued) | Payload Data |
+-------------------------------- - - - - - - - - - - - - - - - +
: Payload Data continued ... :
+ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - +
| Payload Data continued ... |
+---------------------------------------------------------------+
node.jsのBufferクラスの最小単位は8bit（Octetというらしい）なので、ビット単位のデータを検証したり、埋め込んだりするには、ビット演算が必要になるんですね。
それがわかってしまえば、結構楽しいです。
例えばopcodeという、これからくるデータが何を表すのかがあります。
それを抜き出すには、下位4ビットが必要なので、
opcode = buffer[0] & 0xf
としてあげるとよいです。
データがマスクされているかを示すMASKを取り出すには、
masked = buffer[1] & 0x80
となります。ビット演算やってたら「おお、俺いまプログラマっぽいことしてる！」という、俺イメージの中のプログラマの像に重なってうれしくなりました。
Chromeとはなんとか通信できるようになったのですが、iOSとつなぐのはまた調べないといけないことが多いので、素直にSocket.io使おうかどうか迷うところ。使った方が断然簡単なのだけど、構造を勉強しながら作ると大変な分、得るものが多いので悩みどころですね。
それで、話かわりまして、宣伝といいますか、
今度f-siteでしゃべる機会を得ましたので、この辺をからめて発表してみようと思っています。
お題はjsflなのですけど、無理矢理からめちゃえと。ちなみにdemo2です。
あと、またまた全然話し変わって。
flashとhtml5って比較が出てくるのですけど、最近思うのは、flashというよりはAIRとhtml5って言う方がしっくりくるんじゃないかということです。
描画の速度はもちろんflashの方が上だったり、音声・動画関係のバツグンの安定感もflashが上なのですが、ファイルの保存とか今回のソケットだとか、DBとか含めて考えると、flashっていうより、AIRかと。
あと、いくつかJSのライブラリを見ていると、実は裏で代替機能としてflash使っているものって結構あるのですよね。Socket.ioもそうなんですよ。
自分は別にflashでもhtml5でもどっちの肩をもつつもりもないのですけど、ブラウザネイティブに機能が追加されてきているのは、面白い動きだと思います。
ただ、クロスブラウザを考えると実案件は当分先になるでしょうね。
でもでもiOSやandroidにしぼった形ならかなり近そうです。
今はnodeとJavaScriptそのものをもう少しやってみたいので、しばらく続けたいなと思ってます。
2012/01/3
ターミナルのコマンドメモです。
自分に必要そうなところだけ。
自分の性格的に、ストイックに「emacsだけ」とか、「ターミナルだけ」とかできないので、
その時の便利具合に応じて使い分けてる。
| cal | カレンダー cal 1 2012 > 2012/01月のカレンダー表示 |
| pwd | 現在のパス |
| cd | カレントディレクトリ移動 |
| echo 文字列 | 文字列を表示 echo $HOME > 環境変数を表示 |
| ls | ファイル一覧 -a 隠しファイル表示 -l 詳細表示 -r 表示順逆順 ワイルドカード |
| cp 元のパス コピー先のパス | ファイルのコピー ワイルドカードを使ってもよし -i オプションで上書きなどの警告つき -r ディレクトリの中身を再帰的にコピー |
| mv 元のパス 移動先のパス | ファイルの移動、名前の変更 |
| ln -s 元のパス 移動先のパス | リンクの作成 相対パスのときは、元から移動へのパスを書く |
| mkdir ディレクトリ名 | ディレクトリの作成 -p 連続した階層ディレクトリを一気に作る |
| rm ファイルのパス | ファイルの削除 -r ディレクトリ以下を再帰的に削除 -f 警告なしで削除 |
| cat | ファイルの中身を表示する |
| less | ファイルを少しずつ表示 |
| head | ファイルの先頭を表示 |
| tail | ファイルの終わりを表示 |
| man | オンラインマニュアル表示 |
| zip | zip形式に圧縮 -P パスワード保護 -r フォルダを再帰的に圧縮 |
| tar | tar.gzファイルを扱う tvzf 中身を確認 xvzf 解凍 |
あとターミナルじゃなくFinder上で
Cmd + Shift + .(period) で隠しファイルの表示/非表示のきりかえ
でも、やっぱり今のところFinder上が慣れてるし楽だ。
ただ、echo hoge > hoge.txt とかやるとエディタアプリとか立ち上げずに
すぐにテキストファイルが作れたりするのは、魅力だと思われ。
このコマンド一覧は、下記の本を参考に作りました。
>> Mac OS X v 10.5 Leopard as UNIX
ずーっと何年も前にふと興味があったので買ってから、少し読んでは寝かせて。みたいな感じだったけど、ざっと読んでみました。
この本の途中に、unixのアプリをmacで使うという章があって。
tar.gzファイルを拾ってきて、それを自分でコンパイルして、インストールという流れが書いてありました。
全く知らないことだったので、１回やってみたら勉強になった。
以前に、openCVをやってみようと思って、この流れが全くわからなかったので、挫折しちゃったのだけど、
今度はできそうな気がする。
unixのアプリを動かそうと思うと、端末の種類（CPUとか）やOSに依存することがあります。
「別の機種でソースコードからコンパイルされたバイナリ」を動かそうとしても他の端末では動かないことがあるのです。
なので、コンパイルする生のソースコードを拾ってきて、機種ごとにコンパイルをする方が確実。
そのコンパイル時の設定は機種ごとに変更する必要があるので、そのあたりを自動化する仕組みがある。
でも、このあたりは最近はHomebrewっていうので、管理するのが流行ってるみたい。
これは、何をするものかというとさきほどの機種依存をmac用に考慮してくれて、ソフトを管理してくれるアプリです。
「自分でソースコード拾ってきてコンパイル」とかしないでも、有名どころはコマンドひとつでインストールしてくれちゃうやつです。
ちょっと前はこの本にも書いてあったMacPortsが流行ってたみたい。
macportsとhomebrewとか検索すると結構出てくる
そんなわけで、前にnodeとCoffeeScriptをそのまま入れていたのだけど、Homebrewで入れ直してみた。
2012/01/2
チュートリアルで必要そうなものをメモしています。
チュートリアルは C-h t で起動します。
emacsはコードを書くなどメインで使用する気はないのだけれど、
メモ書きとか、設定ファイルとか、ちょっとした書き足しor修正するのを
ターミナルだけでかけるのは、便利だなと思ってきたところ。
下のコマンド一覧にC-p,C-aとかのカーソル移動は、自分的にKeyRemap4MacBookとか使って覚えていたことなので、載せてません。
KeyRemap4MacBookはすごく便利なアプリで、emacsのカーソル移動をeclipseとか他のアプリでもすることができるのです。
（あーでも、それ機能のうちのごく一部です。メインは普通にキーバインドをいじれるという趣旨のソフトです）
だから、AptanaとかFlashBuilderとかでもemacsのキーバインドで動くと。もちろん普通のエディタCotEditorとかでもです。
前に、FlashBuilderでショートカット設定からemacsのキーバインド設定にしたときに、なんかうまくいかないことがあったのだけど、これなら大丈夫。
emacsのキーバインドって何か知らない人のために説明すると、
Control+nとか、Control+aとかで、カーソルを次の文字とか前の文字へとか、行頭、行末へとかいろいろと移動できるのです。
これに慣れると、矢印キーを押さなくてもよいので、全く手首のポジションを変えることなく、コーディングをすることができるという。
慣れると文字を書くのがむちゃくちゃ速くなるのです。
自分的には、シャアが通常のザクの３倍の性能を引き出すみたいな感じだと思ってます。
そんで、私は前にWindowsを使っていたのですけど、そのときは、にとしょーとを使ってました。にとよんさん作のアプリでものすごくお世話になりました。本当ありがとうございます。冗談抜きに、ご飯ぐらいごちそうしないと罰が当たると実は思ってたり。お会いしたことないけど。
これに、Controlの部分をaltに変えたキーバインド設定ファイルを使ってました。そんで、altキーだと親指がつりそうになるので、レジストリをいじって無変換キーをaltキーに変更してやってました。
他にも下のようなものがあったのだけど、ちょっと使い始めてるときにmacに移っちゃったので、こちらの使用感はあまりわからないです。
[Windows] WindowsでEmacsのキーバインドが実行できるXkeymacs
| C-u 数字 コマンド | コマンドをリピートする。 e.g. C-u 8 C-f >> 8文字進む |
| C-l | スクロールを中央に |
| C-g | コマンドを中断 |
| C-x 1 | ウインドウを1つにする |
| C-@ | マークをつける |
| C-w | リージョンをカット |
| M-w | リージョンをコピー |
| M-delete | 前の単語を消す |
| M-d | 次の単語を消す |
| C-y | ヤンク ヤンク直後にM-yを押すと履歴がさかのぼれる（すげえ！） |
| C-x u | アンドウ C-_ こっちでもアンドウはOK |
| C-x C-f | ファイルを検索 １度開いたファイルをもう1度開くとバッファーに保存された状態で開ける |
| C-x C-s | ファイルを保存 |
| C-x C-b | バッファーのリストを表示 C-x 1で抜ける |
| C-x b バッファー名 | バッファー上のファイルに移動 |
| C-x C-c | emacsの終了 |
| C-z | emacsを一時停止。fgで復帰 |
| M-x text-mode | モード切り替え 他にc-modeなど |
| C-s 文字列 | 文字列前方検索 C-sを続けて打つと、次の文字列へ。Deleteで前の文字列へ C-gで抜ける |
| C-r 文字列 | 文字列後方検索 |
| C-x 2 | ウインドウ分割 |
| C-x o | 他のウインドウへ移る |
2011/12/31
こんにちは。きんくまです。
今年ももうすぐ紅白が始まる時間となりました。
今年もいろいろとありました。
iPadやAndroidのタブレットのアプリを作ったり、
都内在住の外国人からアポがあって、仕事を手伝ったり、
プログラムの言語もいろいろとやる機会があり、とても勉強になりました。
英語の勉強は、もうすぐ丸２年くらい。何事も続かない私の割には、珍しく続いています。
学生のときは苦手科目で、30過ぎてから始めたけど、なんとかなるもんです。
欲をいえば、20代にやってれば良かったと思いますが、必要に迫られたのが、30過ぎなんだから仕方ないですね。
海外っていうかシリコンバレーで働けたら、楽しいだろうなと思って、調べてみたこともあるけど、１人でならともかく、家族もいるし、なかなか難しいですね。
カタコトながら、ブログも続いていて、1対1で少しだけなら話をすることができるようになりました。
各種本家の英語ドキュメントも、コードがあるから、なんとなくこんなこと言ってるんだろうなー。という感じでなら読めるので、プログラムする上ではすごく役に立っています。
ただ、ネイティブ同士の会話は全く聞き取れないし、長文読んだりすることや、ちゃんとした会話はまだできないです。
１度、都内のネイティブていうか、英語が話せる人たち（ほとんど外国人）の勉強会に行ったのですが、全然ダメでした。頭が真っ白になるっていうか、全然聞き取れないし、あわあわしちゃって、懇親会にも出ずに、すぐに帰ってきてしまった、、。あれは本当にくやしかったです！
なんとかしてあそこにもう一度行きたいなと。
日本の勉強会は、講義形式というか、スピーカーがいてその人の話を聞くというのがメインだと思うのですが、あっちのは、ディスカッションがメインだったので、知らないでいったら、そういう結果に。
なので、少しずつ上達していけたらいいなと思います。
ブログの記事は、来年も自分がつまったところや、勉強したことをまとめたりすることを続けたいと思います。
意外と他の人に役に立ってたりするみたいです。良かった良かった。
読んでもらって、どうもありがとうございます。
あと、Twitter上でRTしてもらったりしても、何にもコメント返さない失礼な奴だったりするんですが、そういう奴だと思ってください。
本当すんませんです。それからありがとうございます。
では来年もよろしくお願いします。
2011/12/30
JavaScriptに関する個人的なあとで見る系ブックマークメモです。
jQuery
Backbone.js MVC
CoffeeScript
Node.js
NowJS
jsdom
Socket.io
このページのコメントから。
2011/01/03 追加
新春特別企画：2012年のJavaScript～PCからモバイルの時代へ｜gihyo.jp … 技術評論社
pjax ajaxでページロード
zepto.js 軽量ライブラリ
—
impress.js プレゼンツール 3dとかできて面白い
2011/12/30
Macはターミナル上で、ファイルをzip形式に圧縮することができます。
他のアプリはいらないです。
パスワードをつけることも可能です。
ターミナル上で
man zip
とやると、なんかすごいオプションがずらずらと出てきます。
その中で、パスワードのやり方とか探してみました。
1. １枚のファルだけを圧縮
zip example.zip filename
2. ディレクトリを圧縮 -rオプションをつけます
zip -r example.zip directoryname
3. パスワードをつけてディレクトリを圧縮 -Pオプションをつけます
zip -P yourpassword -r example.zip directoryname
