Posted by & filed under 開発.


開発部 川野です。

# すみません、この記事は、「Ariel Advent Calendar 2011」ではなく、「JavaScript Advent Calendar 2011 (フレームワークコース)」の2日目の記事です ^^;

モバイルブラウザ向け JavaScript フレームワーク「Sencha Touch」について、本日、社内で勉強会をしました。Sencha Touch の全体像(とその周辺)を俯瞰する内容になっています。

A to Z ということで、アルファベットにちなんで、26のトピックについて扱っています。

スライド:
http://kawanoshinobu.github.com/arielarea-sencha/index.html

Ustream:
http://www.ustream.tv/recorded/18873275

このスライド(と映像)を見れば、Sencha Touch の全体像がさくっと掴める、かも!

という訳で、2日目、担当させて頂きました _o_


関連文書:

Posted by & filed under いろいろ.


このエントリは「Ariel Advent Calendar 2011」の一日目です。
hatenaさんが面白いことやっとる!こりゃうちらもやるしか無いで!!!111
と思いたったのが昨日の夜でした。

勢いだけで始めたのでクリスマスまで本当に続くのかは謎ですが、
今日の気温にも負けない暖かなご配慮を皆樣よろしくお願い致します。

ありえるえりあ勉強会の開き方

さて、ここに来られる方は御存じの方も多いとは思いますが、
ありえるでは「ありえるえりあ勉強会」というものを、
Ubuntuの新バージョンぐらいの頻度で開催しています。

自分はその中でも運営の立場で関わることが多いので、
「ありえるえりあ勉強会の開き方」と称して、
どういった流れでありえるえりあ勉強会が開催されるかを紹介したいと思います。

勉強会の計画を立てる

ありえるえりあ勉強会の開催にあったって、
まずは漠然とした次の勉強会の計画をたてる所から始めます。
「8月にJavaScriptで」といった感じです。

計画を立てたら次に、あえてそれを記憶の片隅の片隅にまで追いやります。
そうすることで余計な問題に囚われず、日々の仕事に集中できるからです。
本格的な準備は偉い人などから発行される、
「そろそろ次の勉強会をお願いします」イベントをトリガーに開始します。

大抵の場合、まずは勉強会の計画をたてる所から始めます。

テーマを決める

計画が立て終ったら、次はそれをもとに具体的なテーマを考えます。
Scalaの勉強会だったら「深いコクと味わいのScala勉強会」、
Lispの勉強会だったら「Lisp脳勉強会」といった具合です。

第一回ありえるえりあ勉強会にはこのような変ったテーマなどはありませんでしたが、
第四回目のJava勉強会@liris が軽い気持ちで付けたのが全ての元凶です。
差別化になって良いのですが、勉強会の開催で一番悩む所です。
後先考えずに、エンジニアリングすると後々首を締める良い例です。

関係者を集める & 参加者を集める

テーマが決まったら勉強会開催のためのスタッフや登壇者を集めます。
スタッフはだいたい以下な役割で集めますが、勉強会の規模などによって増減します。

  • 主催者 – 募集ページ作ったり、登壇者を探したりする人
  • 副主催者 – 勉強会の会場借りたりする人
  • 登壇者 – 社内で勉強会で前に出て発表する人
  • 司会者 – 勉強会の進行をする人
  • 放送委員長 – 勉強会の内容をustreamで中継する人
  • 飲み会奉行 – 懇親会の会場を確保する人
  • 受付嬢 – 勉強会の受け付けをする人
  • ネットワーク番長 – 勉強会の無線ネットワークを用意する人
  • ドラ娘 – LTでドラをならす人

登壇者には毎回社外の方も探しますが、
コネがある場合はそれを使い、 無い場合はtwitterなどで飛び込み営業をかけます。
登壇者の方に別な登壇者を紹介してもらうこともありました。
登壇者が決ったら、登壇者に発表内容を決めて貰いながら日程を調整し、
ATNDPARTAKEで勉強会の募集を開始します。

勉強会の募集はあまり前から募集かけると当日のキャンセル率が多くなるので、
二週間前ぐらいから募集をかけるのが良さそうです。
けっして準備に手間どって募集が遅いわけではありません。

当日

勉強会の当日は会場の準備のため、 開場の時間よりも1時間ぐらい前に会場に入ります。
ありえるえりあ勉強会で必要ととなるものは以下の通りです。

  • 放送用の機材(カメラ / マイク / ノートパソコン / 確認用のイヤホン)
  • ネットワーク用の機材(WiMAX / EMOBILE)
  • 受付用の名簿(チェック項目として「勉強会の参加」と「懇親会の参加」を用意)
  • 会場案内用の看板
  • アンケート・案内用紙
  • MACの接続用コネクタ
  • LT用のドラ
  • 登壇者に配るお茶

当日だと、主催者は特にやることがなくぼーっとしている事が多いです。
スタッフの方々いつもありがとうございます。

懇親会

勉強会終了後は懇親会に移ります。
100人規模の勉強会の懇親会ともなると、
「人数が多くて予約しないと入れない」や、
「予約した人数に届かないと大きな赤字がでる」といった問題が発生します。
なので本当はビアバッシュが良いのですが、
ありえるが使う開場では出来ないことの方が多いです。
次善の策として「席だけを借りれる会場を使う」といった方法がありますが、
人数が多いので料理が中々こなかったりと、これはこれで問題があります。

僕は懇親会の会場を用意したことがないのですが、
ありえるえりあ勉強会では過去に開催した勉強会から大体の出席率を出した上で、
更に人数の融通がきく食べ放題の店などを選んでるみたいです。
飲み会奉行の方いつもありがとうございます。

次の勉強会へ

こうして勉強会が終了したら、また新しい勉強会の計画を進めていきます。
次の勉強会の計画も一度立てましたがもう忘れたので省略します。
最後に過去に開催したありえるえりあ勉強会の募集ページを貼っておきます。

次のAriel Adevent CalendarはありえるのEmacs番長 @buzztaiki です。

なんだこれ、やたら長ぇ。 


関連文書:

  • 関連文書は見つからんがな

Posted by & filed under 開発.


前回の「オブジェクト指向について語った時に使ったメモ」に続いて、今度はインターフェースについて話しました。

用語や表現が違うだけで結局オブジェクト指向の時と同じことを話していないかと思ったなら、たぶんその直観は正しいのだと思います。自分でもそう思います。

前回も少し言いましたが、「オブジェクト指向」という用語には、過剰な思い入れや大げさな物言いがまわりにまとわりすぎて、快く思わない部分があります。オブジェクト指向設計ぐらいなら許せますが、オブジェクト指向を認知論や世界観と結びつけるような説明は誇大広告めいて好きではありません。

それに比べるとインターフェースは巨大な対象を分割統治していく時の武器として実にわかりやすく、素直に向き合えます。

20代の頃、Lotus Notesの数百万行のコードと格闘していました。デバッガで追えば細部は理解できますし、バグも直せました。しかしいくらコードを読み進めても、全体像をつかむには程遠い感じで、途方に暮れていました。

ある日、何がきっかけだったのか忘れましたが、境界を意識してコードの全体像をつかめばいいのだと啓示を得ました。

当時からメモを書きながらコードを読んでいましたが、啓示以降、メモの取り方が変わりました。それまでは関数や手続きの中身を読んで、その処理内容をメモる日々でした。啓示以降、コードを部品でとらえて、その部品が外部からどう見えるか(=どう使われるか)のメモになりました。

そんなこと(境界を意識したコードリーディング)は当時から知っている人には常識だったのかもしれませんが、不勉強なため実地の中で会得するしかありませんでした。このせいでだいぶ無駄な時間も過ごしたので、新しい人は手っ取り早く感覚を身につけて、次のフェーズに飛んでほしいと思っています。


関連文書:

  • 関連文書は見つからんがな

Posted by & filed under いろいろ.


pypy1.7がリリースされました。かなり速くなったって噂があります。と言うことで、もう一度試してみました。今回も前回と同じフィボナッチ数列の計算の計算によるベンチマークです。前回の結果はこれです。前回はiMacで計測していますが、今回はMacBook Airです。なので、絶対値の比較は無いです。

[続きはこちら…]


関連文書:

  • 関連文書は見つからんがな

Posted by & filed under , 開発.


以前から読もうと思っていましたがようやくレガシーコード改善ガイド (Object Oriented SELECTION)を読みました。読み始めて最初のうち、これは久しぶりに名著の予感と思いましたが、後半は自分の趣味と合わない部分が多々あったので、平均的には普通に良書という感想です。

ある意味、本書は奇書です。テストコードを書くためにコードの改悪も辞さない、という態度を貫きます。改悪は著者もわかっていて、次のように冒頭で断っています。

この仕事は外科手術のようなものです。切開し、内臓をかき分けていく間、美的判断は保留にしなければなりません。

小説には奇書と呼ばれる作品群があったりします(そして一部の熱狂的支持者がいます)。技術書で奇書と呼べるような本はあまりお目にかかりません。著者の技術レベルが低くて、内容がとんでもな意味での奇書は存在しますが、技術力のある著者があえて定石を外しまくる本書のようなのは初めてです。本格ならぬ破格な本です。

自分にとって、未だテスト駆動開発はユートピアです。

テスト駆動開発のどこに違和感を感じるかと言うと、単体テスト時に偽装コードに置き換える箇所ほどバグの温床なのではないかという疑念です。

たとえばネットワーク関係のコードがある時、単体テスト時のネットワークアクセスを避けるため、ネットワークアクセス部を偽装コードに置き換えます。本書もそれに類する技法をたびたび言及します。でも本当にバグが起きやすいのはネットワーク部分じゃないのかと思います。予期せぬエラーやタイミングの問題がバグを誘発します。システム境界ほどバグが起きやすいのは経験から明らかです。

こう書くと、そういうのはネットワークエラーを例外として抽出して、例外処理を単体テストすればいい、とその筋の人は言いそうです。たぶん教科書的にはそうなのでしょう。

ネットワークコードは一例です。単体テストの紹介を見るにつけ、偽装コードに置き換えたそのシステム境界こそがバグの要因なのに、と思うことがしばしばあります。ちなみにシステム境界の中でもバグの温床ナンバーワンは人間との境界です。単体テストの世界ではなかったことにされる領域です。

そんなわけでぼく自身はテスト駆動開発についていけていません。しかし、(方法論の名称は変わったとしても)これからのソフトウェア開発でもっとも重要になる方法論であると思っています。テスト駆動開発が常識になれば、オブジェクト指向とか関数型プログラミングとかどうでもいい話になるぐらい重要なパラダイムシフトです。そのシフトへは何かまだ足りない気がしますが、何が足りないのかはわかりません。

修正: 偽装コードを擬似コードと書き間違えていたので修正。


関連文書:

  • 関連文書は見つからんがな

Posted by & filed under 開発.


開発部の川野です。今回も Sencha Touch をテーマに、記事を書かせて頂きます。

Sencha Touch と言えば、「綺麗な UI」が特徴ですよね (JavaScript だけで画面を構築する独特のスタイルも特徴ですが)。

本記事では、その綺麗な UI を支えている「Sass」「Compass」というツールについて、また、Sencha Touch で、それらをどのように利用しているかについて、少し覗いてみたいと思います。

Sass makes CSS fun again.

Sass は、CSS の冗長性や、保守性・生産性の悪さを解決するために生まれた CSS の拡張言語です。独自の文法で記述したファイルをコンパイルして、CSSを生成します。

Sass の具体的な説明は本記事では割愛させて頂きますが、一言で言うと、CSS の「プログラミング」を可能にしてくれます。押さえておきたい特徴としては、

– 変数
– ネスト(ローカルスコープのようなもの)
– ミックスイン(関数のようなもの)
– セレクター継承(OOPの継承のようなもの)
– if文
– 演算

などでしょうか。これらの機能を使って、まるでプログラムを組むかのように、CSS (の元になる定義)を作っていけます。興味のある方は、プロジェクトのサイトで詳しく紹介されているので、訪ねてみて下さい。

ちなみに Sass には、 Sass 記法と、SCSS 記法の二つのシンタックスが選べるようになっています。コマンドひとつで、お互いの形式に変換可能です。

Sass 記法は、Python のように、インデントでブロックを表現し、ブレースやセミコロンが不要です。SCSS 記法は、CSS と互換性があり、学習コストの低さが魅力のよう。

個人的には、Sass 記法の方が気に入ったのですが、今後の普及やプロジェクトで使うことを考えると、SCSS 記法を選ぶ方が無難のように思いました。

Compass は、スタイルシートの jQuery ?

Sass がプログラミング言語だとすると、Compass は、Sass言語のフレームワークやライブラリに相当するものです (JavaScript でいうところの、 jQuery、 Ruby でいうところの Ruby on Rails がよいメタファでしょうか)。

Compass では、いくつかの再利用可能な定義が提供されていて、それらを利用することで、効率よく、高品質な CSS を作っていくことができます。
具体例をひとつあげると、面倒なベンダープレフィックスが、 Compass が提供してくれているミックスインを利用すれば、一行で済むようになります。

Sencha Touch での Sass/Compass 利用事例

各ツールについて簡単に紹介したので、これから具体的に、Sencha Touch でどのように Sass/Compass を利用しているのか見ていきたいと思います。

Sencha Touch では、各ファイルを以下のような構成で配置しています。

アンダースコアで始まるファイル名が気になりましたよね?

Sass には他の Sass ファイルをインポートする機能があり、インポートするファイルはアンダースコアで始める命名規約があります。

実際にコンパイルするのは、sass ディレクトリ直下の sencha-touch.scss だけで、他の scss ファイルは、sencha-touch.scss からインポートされる設計になっています。
コンパイルされた css ファイルは、 css 直下のディレクトリに出力されます。出力先などの設定は、sass ディレクトリにある config.rb で行っています。

lib 直下にある theme_images.rb は、Sencha が作成した Sass の拡張スクリプトで、画像を base64 形式のテキストにエンコードして、CSSファイルに埋め込みます。モバイル環境での、サーバーへのリクエストを減らすための工夫のようです。
themes 直下の compass_init.rb では Compass 用の設定を行っています。

全体像を俯瞰したところで、今度は、コンパイル対象の sencha-touch.scss の中身を見ていきたいと思います。

sencha-touch.scss 自体は、たったの 18行です。

冒頭の @import は、sencha-touch/default ディレクトリ以下にある _all.scss ファイルをインポートしています。
その後に続く、@include は、インポートしたファイル内で定義されているミックスインを呼び出しています。

それでは、_all.scss の中身を見てみましょう。

同じディレクトリにある、 _core.scss と _widgets.scss をインポートしています。
という訳で、まず、_core.scss の中身を。

core ディレクトリ以下にある scss ファイルをインポートしているだけです。

_widgets.scss も同じようなことをやっています。

_core.scss では、 _reset.scss、 _core.scss、 _layout.scss の順でファイルをインポートするように指示しています。

_reset.scss を見ていきましょう。

いわゆる リセットCSS です。ブラウザごとにデフォルトのCSSが異なるため、各プロパティをリセットする作法がありますが、それに該当します。

ちなみに Compass のライブラリにもリセット CSS が含まれていて、有名な(?) Eric Meyer氏によるリセット CSS を

の一行で読み込むことができます。

_reset.scss はこれぐらいにして、次は、 _core.scss を見てみましょう。

core と言うだけあって、全体に関わる定義や、頻繁に使われるクラスの定義が行われています。

まず始めに、上位ディレクトリにある _global.scss を読み込んでいます。
_global.scss の中身を見てみましょう。

同じディレクトリにある _variables.scss と _mixins.scss をインポートしています。
グローバルということで、 _variables.scss には全体に関係する変数、 _mixins.scss には全体で利用したいミックスインが定義されています。

ここにある変数を変更することで、全体に影響を与えることができます。

ひとつ具体例を挙げると、$base-color という変数の色を変更することで、全てのコンポーネントの見た目(色)を変えることができます。Sencha Touch では、こういった変数を提供することで、開発者がテーマをカスタマイズできるようにしています。

各ファイルの詳細は割愛して、_core.scss に戻ります。

_global.scss を読み込んだ後、Compass の box-sizing ファイルと、 Compass に同梱されている blueprint モジュールのtypography ファイルを読み込んでいます。これらは、後の定義で利用しています。

その後、$experimental-support-for-… という変数に false の値をセットしています。

これらの変数は Compass のミックスインの動作を変更するもので、ベンダープレフィックスの対象を指定することができます。Sencha Touch は webkit のブラウザでしか動作させないので、 FireFox や Opera 、IE 用のプレフィックスは不要ですよね。無駄にファイルサイズが大きくなりますし。そういった、痒いところに手が届くオプションが用意されているのは、Compass の嬉しいところです。

細かい解説を始めてしまいましたが、この調子だと、かなり長くなりそうなので、今回はこの程度で終わりにしたいと思います。尻切れですみません。。

まとめ

駆け足で紹介しましたが、Sass/Compass について、また、Sencha Touch の CSS 開発について、雰囲気だけでも感じ取ってもらえれば幸いです。

Sass/Compass については、面倒な気がして消極的だったのですが、実際に触ってみて、すっかりファンになりました。確かに、CSS を作るのが楽しくなります。また、CSS をライブラリ化する発想は、とても魅力的に感じました。

特定の言語やフレームワークを前提としたものではないので、もし CSS に苦しめられた経験があれば、次のプロジェクトではぜひ試してみてはいかがでしょうか?
学習に投資した時間は、すぐに元が取れると思います ;)


関連文書:

Posted by & filed under 開発.


最近、Solrで遊んでいます。Solrと言うのは、Luceneをベースに全文検索機能や分散処理、フェイルオーバーとなどの機能を提供してくれるはずです。Luceneで検索システムを作り込んでいくと、ある規模に達するとSolrが提供してくれているような機能が必要になってきます。それらを自分たちで作り込んでもいいのですが、それは単にSolrの再発明に他なりません。と言うことで、Solrの検討に入りました。

[続きを読む…]


関連文書:

Posted by & filed under 開発.


オブジェクトについて抽象から具象まで取り混ぜて説明していた時、最も具象なレベルで見れば、オブジェクトはメモリ上に確保した領域にすぎないと説明しました。

そんな説明をしていた時、メソッドの実体ってどこにどうあるのですかと質問を受けました。人の心はどこにどうあるのですかという質問に比べると緩い質問ですが、良い質問だと思いました。こういう疑問を持つのは大事だと思うからです。自分もかつてプログラムとは結局のところどう実行されるのかが気になりました。プログラマなら誰もが通る道だと思います。

そんなわけでJavaのような箱入り娘から離れて、デレのないツンデレ娘ことC言語で古のテクニックを見せることにしました。

とりあえず次の簡単なコードから始めます。C言語は知らなくても構いません。関数fnがあって、引数に2を加算して返すことだけを読み取ってください。

念のため実行してみます。

これ以降はコードを簡潔にするため警告を黙らせるキャストを省略します。良い習慣ではないのでマネはしないでください。

実行ファイルxをgdb(デバッガ)で起動してみます。

gdb上のdisasコマンドでディスアセンブルできます。関数fnの実体のアセンブリコードを見える化できます。

次のようにすると、関数fnの実体がメモリ上でたんなる数値の列(バイト列)にすぎないと分かります。後でこの数値と上記のアセンブリコードの対応をobjdumpコマンドで見ます。

最初のコードを次のように変更してみます。

再コンパイル後、gdbで書き換わっていることを確認してみます。0x02があった部分が0x03になっているのを確認してください。

関数fnのバイト列は実行ファイルxの中に見つかります(Javaで言えば、JVMのバイトコードのバイト列がクラスファイルの中に見つかるのと同じ話です)。

実行ファイルxを解析するにはobjdumpが便利です(nmコマンドでもほぼ同じようなことができますがobjdumpのほうがリッチです)。

objdumpに-dオプションを渡すとディスアセンブルできます。gdbで見たバイト列とアセンブリコードの対応を確認できます。

このバイト列を実行ファイルxの中から探してバイナリパッチを当ててみます。バイナリエディタでバイト列を探してもいいですが、objdumpを使うとファイル中での正確なオフセットを計算できます。

objdumpを次のように-xオプションで起動します。出力の中で見るべき箇所は、.textセクションの位置情報と関数fnの位置情報です。以下は出力から抜粋した様子です。

上記objdump出力の読み方は次のようになります。

答え合わせをしてみます。次のようにファイル内でのオフセット0x3d4の位置に、関数fnのバイト列が見つかります(55から始まる列)。

バイナリエディタで上記の03の部分を書き換えてxを実行すると見事に動作が変わります。バイナリパッチが成功しました。

疑問: マシン語の世界に変数名や関数名なんて存在しないって聞きましたが。
回答:
不要です。objdumpで見たシンボル(関数名や変数名)はデバッグ用です。
stripコマンドでシンボル情報を削除できます。削除しても実行に支障はありません。

疑問: stripコマンドする意味はありますか?
回答:
実行ファイルのサイズが少し小さくなります。それだけです。
ディスク容量が少ない時代には意味がありました。

ここから古のテクニックです。

実験:
関数fnのバイト列をmallocで確保したメモリにコピーして、関数ポインタを使ってそこを関数呼び出ししてみます。

実行すると動きます(注意:動かない環境もあります)。

コピーした関数のバイト列を書き換えて、バイナリパッチ相当の動作を模倣してみます。

実行すると動きます(注意:動かない環境もあります)。

スタックでも同じこと(関数のバイト列をコピーして関数ポインタ経由で呼び出し)ができるかは、次のように確認できます。

ここまでのまとめ

  • コードもデータもメモリ上では単なるバイト列
  • コードと同じバイト列をメモリ領域に書き込んで、そこにジャンプすれば関数を実行できる
  • ただし、セキュリティの観点から禁止する方向にある(e.g. StackGuard、ProPolice)

疑問: コピーしたものではなくfn本体を書き換えられるか?
実験:

実行してみます。

回答:
できません。
OSがメモリ保護機能を活用してコードのメモリ領域をread-onlyにしているためです。
(あくまでOSの機能なので、できるOSも存在します)

疑問: 無茶苦茶な内容のメモリ領域を関数呼び出しすると何が起きるか?
実験:

実行してみます。

回答:
何が起きても不思議はありませんが、ほぼ確実にプロセスが落ちます。
まともなOSがあれば暴走はしないので、マシンは壊れません。

疑問: 別プロセスのユーザ空間のメモリを読み書きする手段は存在するか?
回答:
あります。デバッガ(gdbなど)がやっています(システムコールptrace)。
どこまで許すかはOS次第です。伝統的には実行ユーザが同じプロセスの間でだけ許します(rootユーザは別)。
ただし、Ubuntu最新版は親子プロセスの間でしか許さないようになっています。以下のファイルで設定します。

と、ここまでの話をするつもりでした。

しかし、会社のPCでやったら、mallocした領域にコードをコピーして関数呼び出しするとsegmentation faultで落ちてしまいます。

64bitマシンなので以下のNX bitが効いているようです。

http://en.wikipedia.org/wiki/NX_bit

それから、プロセスを実行するたびにmallocで確保したメモリのアドレスが変わるのなぜかなと思っていたら下記の機能のようでした。言われてみれば聞いたことがある気がしますがすぐに思い至りませんでした。

http://en.wikipedia.org/wiki/Address_space_layout_randomization

タイトルは「最近の技術」と書きましたが、自分が知らなかっただけで、たいして最近ではないかもしれません。


関連文書:

  • 関連文書は見つからんがな