スタッフブログ
jQuery派のなおとです。
今日もjQueryを使った画面表示などをいろいろやっていたのですが、まだまだ使いこなせていない自分にもどかしさを感じています。
キモはやはりセレクタをいかに使いこなせるかでしょうか。
XPathに近いようでいてまた一味違うし、集合の操作などSQL的なところもあったりして、奥深いです。
操作の対象をうまく掴むことができれば、あとは画像の切り替えや、テーブルのある行だけ背景色をハイライトしたり、また色を元に戻したりといった、よくあるような効果を追加するのは、すぐにできます。
まだたいしたことをしていないので、その方面もまだ修行が足りないと思っています。
とはいえやはり、おもしろい！javascriptでありながら独特な書き方があるのが、とても気に入っています。
JavaScriptのライブラリでお馴染みのものにPrototype(prototype.js)があります。
このライブラリは、早い段階からJavaScriptでクラス機構を実現するための仕組みが用意されていたのですが、あまり使い勝手がいいと言えるものではありませんでした。
一昨年くらいに1.6がリリースされて、クラス作成周りが一新されたのですが、あまり情報がない（というか、あるのですが古い情報が優先して検索される）ので、ここでも書いておこうと思います。
■クラス作成
・1.5以前
var Animal = Class.create();
Animal.prototype = {
initialize: function() {
this.name = 'Animal';
},
getName: function() {
return this.name;
}
};
alert(new Animal().getName()); // 'Animal'
・1.6
var Animal = Class.create({
initialize: function() {
this.name = 'Animal';
},
getName: function() {
return this.name;
}
});
alert(new Animal().getName()); // 'Animal'
Class.createの中に直接書けるようになりました。ちなみに1.5以前の書き方でも通るようになっていますが、この後の継承などで問題が出ると思うので、1.6の書き方を使うようにしましょう。
■継承
・1.5以前
var Animal = Class.create();
Animal.prototype = {
initialize: function() {
this.name = 'Animal';
},
getName: function() {
return this.name;
}
};
var Cat = Class.create();
Object.extend(Cat.prototype, Animal.prototype);
Object.extend(Cat.prototype, {
initialize: function() {
this.name = 'Cat';
}
});
alert(new Animal().getName()); // 'Animal'
alert(new Cat().getName()); // 'Cat'
・1.6
var Animal = Class.create({
initialize: function() {
this.name = 'Animal';
},
getName: function() {
return this.name;
}
});
var Cat = Class.create(Animal, {
initialize: function() {
this.name = 'Cat';
}
});
alert(new Animal().getName()); // 'Animal'
alert(new Cat().getName()); // 'Cat'
Object.extendを使わなくなったのが大きな違いです。
そもそもObject.extendの実装を見ると、
Object.extend = function(destination, source) {
for (var property in source) {
destination[property] = source[property];
}
return destination;
}
のように、プロパティをコピーしているだけで、継承と呼ぶには厳しい実装でした。どちらかといえばmixinに近い実装だと思います。
1.6の実装になって何が嬉しいかと言うと、
・書き方がわかりやすい
Object.extendを複数回呼ぶ必要もありませんし、明示的にprototypeを指定する必要もなくなりました。
・親クラスのメンバを呼べるようになった
恐らくこれが一番大きいです。
1.5では、
var Cat = Class.create();
Object.extend(Cat.prototype, Animal.prototype);
Object.extend(Cat.prototype, {
initialize: function() {
this.name = 'Cat';
},
getName: function() {
return (Animal.prototype.getName.bind(this))() + 'だよ';
}
});
alert(new Animal().getName()); // 'Animal'
alert(new Cat().getName()); // 'Catだよ'
のような強引な手法を採るしかありませんでしたが、1.6では、
var Cat = Class.create(Animal, {
initialize: function() {
this.name = 'Cat';
},
getName: function($super) {
return $super() + 'だよ';
}
});
alert(new Animal().getName()); // 'Animal'
alert(new Cat().getName()); // 'Catだよ'
のように、第一引数を$superという名前にすると、そこに親クラスのメソッドが入るようになりました。
ちなみにこの場合、getNameに引数を渡して受け取る場合、第二引数以降に割り当てられます。
getName('hoge') → getName: function($super, hoge) {
みたいな感じです。
■まとめ
そもそもクラスとか定義するのはJavaScriptっぽくない感じはするのですが、単純に慣れているというのと、可読性が向上するという意味で積極的に使うようにしています。
最近はjQuery派とフルスクラッチ派が強い印象がありますが、prototype.jsは基本機能が整っていて、今でも十分実用的に使えるライブラリだと思います。
今回はWeb制作のちょっとしたTipsについて書いてみます。
ウェブ制作の過程でダミーテキストが必要な状況はわりとあると思います。
よくあるパターンは例えば
あああああああああああああああああああああああああああああああああああああああああああああああああ
あああああああああああああああああああああああああああああああああああああああああああああああああ
あああああああああああああああああああああああああああああああああああああああああああああああああ
とか
ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト
ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト
ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト
などで埋めるパターンが多いと思います。
そこで、ちょっとこったダミーテキスト素材として
日本国民は、正当に選挙された国会における代表者を通じて行動し、われらとわれらの子孫のために、
諸国民との協和による成果と、わが国全土にわたって自由のもたらす恵沢を確保し、政府の行為によって
再び戦争の惨禍が起ることのないやうにすることを決意し、ここに主権が国民に存することを宣言し、
この憲法を確定する。そもそも国政は、国民の厳粛な信託によるものであって、その権威は国民に由来し、
その権力は国民の代表者がこれを行使し、その福利は国民がこれを享受する。これは人類普遍の原理であり、
この憲法は、かかる原理に基くものである。われらは、これに反する一切の憲法、法令及び詔勅を排除する。
以上は日本国憲法の前文より。学生時代に暗記したのを思い出します…
このように意味のある、かつ著作権的問題もない文章をダミーテキストとして使えば、「あ」の羅列などに比べて全然文章らしいしので本番に近い雰囲気がでると思います。
文章のソースとして、他にも青空文庫のサイトから著作権の消滅した作品を使うというのもあります。ちょっと文学的な香り漂うかもしれません。
なおとです。 先週とある指令を受けて、WEKOに興味を持ちました。
ブログの記事を読むと、弊社の龍司社長はオフィス文書の検索に感心したようです。 そこに焦点を当てて調べてみました。
まずWEKOモジュールをダウンロードして、ソースを眺めてみることにします。
- weko1.31.tar.gz
私は弊社の他のメンバーと違ってNetCommons2の経験が少々足りないので、勉強を兼ねて手探り状態です。
始めに、データベースのテーブル定義を見ます。 同時に日本語の言語ファイルも見て、関係がありそうなところにアタリをつけていきます。
- repository/sql/mysql/table.sql
- repository/language/japanese/main.ini
すでに前記の記事で書かれているように、検索エンジンとして、MySQLに標準で組み込まれている全文テキスト検索（FULLTEXT INDEX）が使われているようです。
これで検索用インデックスが格納されるテーブルの名前「repository_fulltext_data」が分かりました。
※Windows上で動いているなどで対応していない場合には、部分一致検索（LIKE検索）に切り替えるようです。
そこでテーブル名をキーにソースを全文検索すると、次の2つのファイルが該当することが分かりました。
- repository/components/RepositoryAction.class.php
- repository/action/edit/createfulltext/Createfulltext.class.php
ここまで絞り込まれると、あとはソースを読むだけです。
オフィス文書をテキスト形式のデータに変換する
この仕組みで検索可能にするためには、対象となる内容を予めテーブルに置き、さらにインデックスという、素早く効率的な検索をするための付加的なデータが必要です。まずはデータを登録する部分を見ていきます。
すると、PHPから外部のコマンドラインを呼び出して、オフィス文書をテキスト形式のデータに変換する処理を見つけました。 ごく簡単に、核心部分を引用します。
- wvWare
wvHtml input.doc output.html
- xlhtml
xlhtml input.xsl > output.html
- poppler
pdftotext -enc UTF-8 input.pdf output.txt
詳しくは各ツールのマニュアルでコマンドライン・オプションを調べると分かります。 （例：man poppler）
検索用インデックスを作成〜実際に検索する
上記のように変換したテキストファイルの中身をテーブルに挿入したあと、インデックスを生成しています。
検索はデータベースに対して検索クエリを投げると、結果が帰ってきます。
最後の方は駆け足になりましたが、概要は以上です。
私は数年前に、Namazuを使った全文検索を扱ったことがありました。 wvWareやxlhtmlといったツールは、その時にも使われていたのを思い出しました。
今回は、前回に引き続き、Flashを作ってみました。
[こちらからご覧下さい]
クリックすると何か出ます。それだけです。時間がなかったのでしょぼくて申し訳ないです。
今回はBox2DFlashAS3を使用しています。
前回使用したAPEより高機能で、描画ロジックが分離されているため、PaperVision3D等と組み合わせることも可能なのですが、資料が少なく、情報を調べるのが若干面倒です。
基本的には、gihyo.jp様の連載を見ながら進めるのが一番覚えやすいと思います。
ただし、現行バージョンとは若干違う部分もあるようなので、更に詳しくはBox2Dのマニュアル（日本語訳）やクラスリファレンスを参照するといいと思います。Box2DFlashAS3自体の公式のドキュメントはほとんど存在しないようです。（Box2DFlashAS3はBox2DをAS3に移植したものです）
Box2DFlashAS3で作られたものは、引越し奉行等が有名だと思います。
アイデア次第でいろいろ作れると思うので、是非試してみてください。
今日は、自分のサイトで行っている携帯モジュールの実験について、書かせて頂きます。
こちらの記事にも書きましたが、自分のサイトで絵文字フィルターの実験を行っています。
幾つか不具合っぽい部分も残っていますが、ひとまず一般公開出来るようになってきたので、思い切って公開してしまいました
依存しているPEARライブラリのライセンスとの兼ね合いで、一般配布まではもう少し調整が必要ですが、最低限の形にはなってきたと思っています。
実験がもう少し進んだら、このRYUSのサイトなどにも同様の機能を突っ込んでみる予定です。
また、ライセンスの関係で配布は出来ないものの、通常動作には支障なないレベルになってきているので、興味のある方はXOOPS関連のイベントや、こちらのセミナーの際にでも声をかけて下さい
毎回、様々なCMSや、CMSの拡張機能についての紹介や利用事例などの紹介があるのですが、昨夜はNetCommons2用モジュールの「WEKO」の紹介がありました。
・WEKO
このwekoの発表の中で「お！」と思ったのが、登録した wordやpdfの中身の全文検索機能があったことでした。
仕組みとしては、word や pdfの中身を登録したときに、別のソフトウェアで、ファイルからテキストを取り出して、データベースに登録しておき、wekoからはデータベースを検索するという形でした。
このテキスト抽出に使っているソフトウェア名をお聞きすることができたので、それを利用してXOOPSのダウンロードモジュールに全文検索機能を追加してみようかと思います。
実際に各ソフトウェアをどうやって呼び出してるのかは、WEKO のソースコードを読んで調べてみようと思ってます。（こういうときにオープンソースだと、簡単にノウハウを知ることができて便利ですね）
というわけで、誰かチャレンジしてみてね＞RYUSスタッフ
今日は12/24ということで、Flashで雪を降らせてみました。画面をクリックすると雪らしきものが降ります。
[こちらからご覧下さい]
全然それっぽく見えないかもしれませんが、これはAPEという物理演算ライブラリを使用しています。
今回は短時間で作ったためにやっつけな出来になっていますが、本来はもう少し凝ったことができるようになっています。
機能自体はそんなに多くないので、比較的簡単に利用できると思います。
物理演算なので、単に球体（雪）が落下しているだけではなく、面に対して跳ね返ったり積もったりしているのがわかると思います。
ActionScript用の物理演算ライブラリには他にFisix Engine等があるのですが、Fisix Engineは今回はライセンスの関係で見送りました。ただしこちらのほうが高機能なので、興味のある方は利用してみてください。
それでは、良いクリスマスをお過ごし下さい。
先週の土曜日(12/20)は、タイトルのPHP勉強会に参加してきました。
今回は、初めて司会進行を引き受けさせていただいたのですが、スケジュール調整や懇親会手配など、反省点を多々残しながらも、技術・技術以外の両面で勉強出来ました。
また、当日は「テンプレート・エンジンの役割を考える」というタイトルの発表を、弊社のいしだが行わせて頂きました。
MVCやSmartyに関して、とても丁寧な発表でした。
こちらは、前述の勉強会告知ページ経由で発表資料を見ることが出来ますので、興味のある方は是非ご覧下さい。
今回参加した勉強会は、技術者向けの勉強会だったのですが、「自分は技術者じゃないんだけど、XOOPSについて知りたいんだよ」という方向けに、RYUSではCMS「XOOPS」体験＆活用セミナーを開催いたします。
こちらは、CMSの利点や活用方法についての発表と、実際にPCを使ってのグループワークの二部構成になっています。発表の講師は、弊社の天野とhaltとなります。
有料ではありますが是非お勧め出来る内容ですので、よろしければ是非ご参加ください。
また、「参加するか悩んでいて、ちょっと問い合わせをしたいんだけど・・・」という方は、こちらまでご連絡ください。
なおとです。ちょっと体調が崩れかかっています。気をつけます。
師走。街中ではイルミネーションが賑やかです。 弊社オフィスからの帰り道では、後楽園、東京ドームシティのイルミネーションが盛大ですね。 ほかに、茗荷谷近くの播磨坂にも行きました。 いつもながら、歩いて帰る途中で、なんとなく見ています。
話題は変わりますが、開発中のリポジトリについて、変更点をまとめて知りたいときがあります。 リポジトリビューアでその機能がある場合はそれが一番ですが、コマンドラインでもできる方法を知っておくと、役に立つかもしれません。
ここで紹介するのは、例によってネットで検索して知った方法です。 リビジョン１にディストリビューション（配布パッケージ）そのままのアプリケーション（Package Legacy 2.1.6等）をインポートしてる、という前提です。 リビジョン1が空の場合は、結局全部が追加されたことになって差分の意味がありません。適宜オプションを調整します。
$ svn diff -r "1:HEAD" -x "-b --ignore-eol-style" https://svn.example.net/myproject/trunk/ |awk '/^Index/ {print $NF}'
