http://blog.flup.jp Webサービスやシステム開発の技術メモ Tue, 02 Mar 2010 05:51:54 +0000 http://backend.userland.com/rss092 ja ものすごく久々の更新です。 最近使用している環境は専らMacで、VirtualBoxではなく開発環境もParallels Desktop上のLinuxを使うことが多くなりました。 EnableSendFileの設定などはもちろんVirtualBox同様必要なのですが、それ以前の問題としてアップデートを行ったところネットワークをブリッジに設定すると接続できなくなってしまいました...。 いろいろ調べたところ、設定ファイルを修正することで接続できるようになりました！その方法は以下の通りです。 config.pvs まず、仮想マシンのファイルがあるフォルダをFinderで開きます。標準では、書類の中のParallelsフォルダになるかと思います。 次に、対象となる仮想マシンのファイル（.pvmファイル）を右クリックし、「パッケージの内容を表示」を選びます。 その中のconfig.pvsをテキストエディタで開きます。 そのうち、以下のような記述があるはずなので、その部分を変更します。 <NetworkAdapter> ... <ForceHostMacAddress>1</ForceHostMacAddress> <DHCPUseHostMac>0</DHCPUseHostMac> ... </NetworkAdapter> 私の環境では上記設定のみでうまくいきましたが、それでもだめな場合はDHCPUseHostMacも1に設定してみてください。 http://blog.flup.jp/2010/03/02/parallels-desktop-how-to-fix-bridge-network/ VirtualBoxにCentOSなどのLinux環境を構築し、そこへApacheやらデータベースサーバやらをインストールしてWebアプリの開発を行うことがよくあります。 その際に、ホストのディレクトリを共有フォルダ設定してマウントパスをApacheのDocumentRootに指定すると便利に開発できるかと思います。 ・・・が、しかし、今日その設定を行ってみてブラウザで表示を確認してみたところ、なぜか静的コンテンツがまともに表示されません・・・。 まっしろになってしまったり、更新したはずなのに古いものが表示されたり・・・。一体原因はなんなんでしょうか。。 EnableSendfile Apacheの設定ファイル、httpd.confのcache関係のモジュールをオフにしたりといろいろとやってみましたが、全く変化ありません。 あきらめかけていたのですが、Live HTTP Headersでヘッダを見てみたところ、静的コンテンツが、206 Partial Content というレスポンスになっていることが分かりました。 このレスポンスコードをたよりに色々と検索してみると、どうやら EnableSendfile ディレクティブをオフにすればよいらしいことが分かりました。 さらに、このディレクティブについて調べてみると、 ネットワークマウントされた DocumentRoot (例えば NFS や SMB) では、カーネルは自身のキャッシュを使ってネットワークからのファイルを 送ることができないことがあります。 とあり、まさに今の症状の通りでしたので設定してみると・・・。 うまくいきました！！ もし、同じような状況に直面している人がいたらお役に立てば嬉しいです。 http://blog.flup.jp/2009/04/06/problem_of_using_shared_folder_to_document_root/ 普段、会社ではUbuntu 8.10を使っているのですが、なぜかFirefoxが遅い・・・。Firefoxが、というよりかはFirefoxで動かすJavascriptが遅い感じなのです。 ちょっと遅い感じがする、というレベルではなくAjaxを多用しているサイトとかだと止まるんじゃないかと思うほど分かりやすい遅さです。 調べてみると、ipv6系のネットワークの遅延についての記事はたくさん出るのですが、Javascriptが遅いという話はなかなか見つかりませんでした。 ビルドオプションがおかしいのかな？と思って、最適化ビルドされたSwiftfoxを試してみることも考えたのですがバージョンが3.0.4系で止まってしまっているので、自分でビルドしてみることにしました。 apt-getを駆使する Ubuntuはdebian系のディストリビューションなので、ソースからビルドし最終的には.debファイルにしてパッケージ化しておき、公式リポジトリ側がバージョンアップしたら更新できるようにしたいと思います。 まず、ソースコードの取得について。 普通ソースコードは公式サイトからtarボールやsvn, cvsなどのバージョン管理ツールで取ってくることが多いと思いますが、debパッケージ管理されているアプリのソースは、以下のコマンドで取得できます。 カレントディレクトリにいろいろ展開されるので、専用にディレクトリを作成し、その中で行った方が良いです。 apt-get source firefox また、このソースをビルドするために必要なパッケージを一括でインストールすることもできます。 sudo apt-get build-dep firefox debuild ビルドには、debuildというツールを使うのですが、この辺がちょっとややこしかったです。 apt-get sourceでソースを取ってくると、前述のように色々とファイルを取得して新しくディレクトリが作成されます。この中にソースやらが入っているのですが、debianというサブディレクトリができていると思います。 この、debianの中に重要なファイルとして、ビルドオプションなどが定義されたrules、バージョン情報が書かれたchangelog、依存関係が定義されたcontrolなどが存在していると思います。 まずはrulesを編集してビルドオプションを変更します（以下は変更箇所のみ）。 CFLAGS = -g -O3 -march=native CXXFLAGS = -g -O3 -march=native # # (中略) # -enable-optimize="-O3 -w -march=native" ¥ そして、changelogの編集ですが、これはコマンドで行うことができますが、それにはdevscriptsパッケージが必要なのでインストールしておきます。 sudo apt-get install devscripts 次に編集用のコマンドを実行しますが、これはdebianディレクトリの親ディレクトリをカレントにして行う必要があります（そうしないと、debian/changelogが無いと怒られます）。 debchange -i debchangeを起動するとエディタの選択肢が出るので好みのものを選びます（私は1のviにしました）。 とりあえず、何もせずに保存してしまっても特に問題はないですが、分かりやすいようにコメントを入れたり、リポジトリが更新するであろうバージョン番号の採番方法と重複しないように修正を入れます（バージョンについては、一つ下のバージョンがリポジトリの最新バージョンなので、それに -0 とかを付加したものにしておけばいいかと思います）。 ここまでで一応準備は整ったので、最後にビルドコマンドを実行します。 debuild -us -uc しばらく時間が掛かると思いますが、そのうちプロンプトに戻るはずです。もしエラーが出たら、failedとか出ているはずなので・・・その時はrulesかchangelog（たぶんrulesのほう）の記述が間違っている箇所があるので修正後再度実行します。 debのインストール ビルドが終わると、最初の作業ディレクトリ（今まで作業していたところの親ディレクトリ）に移動するとたくさんのdebファイルができていると思います。 Firefoxの場合は、firefox-3.0_3.0.7+nobinonly-0ubuntu0.8.10.1-0_i386.deb（バージョン番号によってファイル名が違います）というファイルが本体で、あとfirefox-3.0-gnome-supportとfirefox-3.0-brandingの2つのパッケージも入れておかないと依存関係が壊れているとか言われてしまうので要注意です。 インストールは普通のdeb同様、 sudo dpkg -i firefox-3.0_3.0.7+nobinonly-0ubuntu0.8.10.1-0_i386.deb という感じでいけます。 インストールしたが・・・ さて、上記でビルド済みのパッケージをインストールできたはずなんですが・・・。about:buildconfigを見てみても、ビルドオプションが全く変化なしでした。。。orz 速度的にも大して変化はないようなので正しくインストールできているのかどうか謎です。ただ、ビルド中のコマンドラインオプションに追加した最適化オプションなどは入っていたのは確認できたんですが・・・。 うーん、どういうことでしょう・・・？(?_?) http://blog.flup.jp/2009/03/20/building_dev_from_source_in_ubunt/ PHPを使って、アクセス解析結果やアンケートの集計結果などグラフを表示したいという機会は結構あるのではないかと思います。 しかし、何もないところからこれを作ろうとするとかなり骨が折れる上に、美しいグラフを作成するのは難しいのではないかと思います。 今回はオープンソースのライブラリを使って、比較的簡単にグラフを作成してみたいと思います。 pChart まずはpChartというライブラリから。これはGPLライセンスのライブラリで、サーバサイドで画像を生成するタイプのものになります。動作には、GDサポートを有効にしたPHPが必要となります。 対応しているグラフの種類は、 折れ線グラフ 3次スプライン曲線 プロットチャート 棒グラフ パイチャート と、豊富に対応していて、生成されるグラフの品質もかなり高いです。 このライブラリは、データを表すpDataとグラフを表すpChartという二つのクラスを使って描画を行います。使い方は以下のような感じです（サンプルをちょっとだけ変えたものです）。 <?php // Standard inclusions include("pChart/pData.class"); include("pChart/pChart.class"); // Dataset definition $DataSet = new pData; $DataSet->AddPoint(array(10,2,3,5,3),"Serie1"); $DataSet->AddPoint(array("1月","2月","3月","4月","5月"),"Serie2"); $DataSet->AddAllSeries(); $DataSet->SetAbsciseLabelSerie("Serie2"); // Initialise the graph ... http://blog.flup.jp/2009/03/18/easy_using_library_to_create_charts_for_php/ ここ数日、Astro (FP10) の3D機能をいろいろやってみてるのですが、Matrix関係やdrawTriangles()メソッドによって確かに便利になっていると思います。 しかし、3Dプログラミングをしようと思うと必ず必要な、ある重要な機能が抜けているのです・・・。 上は、私が試しにつくった球の3D表示のswfをキャプチャしたものですが、その機能がないおかげで、これだけでもかなり大変でした。。 シェーディング機能が全く用意されていない 実は、Flash Player10の3D機能にはシェーディング（3Dプログラミングにおいての）の機能が全く用意されていないのです。 これはどういうことかというと、DirectXやOpenGLなどの一般的な3DのAPIでは標準で用意されている光源やその光源によってどのような色で各ピクセルを出力するかといった計算を行う機能がAstroにはないということです。つまり、シェーディング部分を自前で実装する必要があります。 3Dのシェーディングは一般的なものにフラットシェーディング、グーローシェーディング、フォンシェーディングなどがありますが、これらをAction Scriptで実装するにはどうすればよいか、ちょっと考えてみました。 フラットシェーディング フラットシェーディングとは面単位で色が決定されるシェーディング方法で、面法線をもとにランバート反射を計算するものです。 これは、三角形を描画する毎にbeginFill()でその色を塗ればよさそうです。三角形ごとに色がことなるので、今回追加されたdrawTriangles()は使えないと思います。 グーローシェーディング これは、頂点単位の法線を用いて頂点毎のランバート反射を計算し、各頂点間の色を線形補完することによるシェーディング方法です。 これについては、beginGradiantFill()でいけるのかな？パラメータを見る限りちょっと難しそう・・・。ひょっとしたらbeginShaderFill()とかを使わないと無理かも。 フォンシェーディング これは頂点単位の法線を補完してピクセル単位で法線をもとにランバート反射やフォンの鏡面反射モデルを適用するものですが、まともに計算するのはまず無理です（パフォーマンス的に計算量が多くなりすぎる）。 全く方法が思いつかなかったのですがPapervision3Dでは実現できてるみたいなので、ソースを見てみたところ、やはりまともなやり方を正面からやるのではなくライトマップで近似しているようです。 ライトマップとは、ライティングの計算を省略するためにテクスチャにライト情報をもたせてそれをもとに色をつける方法で、具体的にはテクスチャマッピングを行った後、このライトマップテクスチャを乗算します。 今回作ったもの 今回は、テクスチャマッピングが面倒だった（UVの用意とかが要るので・・）ので、ライトマップ自体に色をつけてそれっぽくしてみました。 ライトマップのビットマップデータの生成は以下のような感じでやっています（ほぼPapervisionのまんま・・）。 public function makeLightMap(lightColor:int, diffuseColor:int, ambientColor:int, specularLevel:int):BitmapData { var w:Number = 1024; var mat:Matrix = new Matrix(); var s:Sprite = new Sprite(); ... http://blog.flup.jp/2009/03/16/shortage_of_the_3d_functions_in_fp10/ 以前紹介したバンプマッピングのPixel BenderをFlashで使おうとしてみたのですが、なぜかうまくいきませんでした・・・。 真っ黒でなにもでなかったり、明らかにおかしな色になってしまったのです。その際、色々試した結果をここでちょっと報告したいと思います。 まずは、上の画像がいったいなんなのかを説明します。 outCoord()の値を可視化する 上の画像は、outCoord()の値からx座標の値をR成分に、y座標の値をG成分にしたものです。 これには、以下のPixel Benderのコードを使っています。 <languageVersion : 1.0;> kernel SampleFilter < namespace : "jp.flup"; vendor : "Flup Inc."; version : 1; description : "outCoord test filter"; > { input image4 src; output pixel4 dst; void ... http://blog.flup.jp/2009/03/14/pixel-bender_with_blendshader/ 昨日、広島Ruby会議 01-2009 に行ってきました。 なかなか盛況でたくさんの方が参加されていましたが、スーツ率が高く若干肩身が狭かったです（笑） 実は私は今までRubyは触ったことがまったくなかったのですが今回イベントに参加してみて、興味が出てきたのでちょっとやってみようかと思います。 お題としては、最近久々にいろいろやっている3D系のプログラムを書いてみることにします。果たしてうまくいくのかどうか・・・。 環境準備 開発環境はUbuntu 8.10で、rubyパッケージはインストール済みの状態でした。 RubyでOpenGLをやる場合、ruby-opengl というgems（Rubyのライブラリパッケージ管理のシステム）のパッケージが必要なようなので、入れてみます。 gem install ruby-opengl すると、gemコマンドがないと怒られました・・・。rubygemsパッケージが入っていなかったようなので、synapticからインストールします（パッケージ名が分からなかったので。apt-get install rubygems でもOK）。 再度、先ほどのコマンドを実行すると、今度は rake コマンドがないといわれたので、 apt-get install rake します。 今度こそいけるかと思いきや、大量のコンパイルエラーが・・・。エラーを追ってみてみると、どうやらOpenGLのGLUT関係のヘッダのincludeでこけている模様。 再びsynapticからパッケージをopenglとかで検索してみてみると、freeglut3-devというのを発見！たぶんこれだろうということで、インストール。 ここで、最初に入れたruby-openglのインストールコマンドを実行すると、ようやくインストールに成功しました。 あとはOpenGLのコードを書くだけ 実際大変だったのは、上記の環境の設定で、あとは公式サイトのリファレンスを見たりしましたがそれほど難しいところはありませんでした。 作法(?)として、セミコロンがいらなかったり、クラスやメソッドの宣言で { } を使わなかったり、インスタンス変数に@を付けたり、インスタンス化が、new Class() ではなく、Class.new() にするといったところは多少戸惑いましたが、覚えれば何てことはなさそうです。 今回作ったコードは以下のような感じです。 #!/usr/bin/ruby #----------------------------------------- # GLUTでティーポットを描画するだけのプログラム # @author flipper # @date 2009.03.12 #----------------------------------------- require "rubygems" require "opengl" require "glut" class Teapot LIGHT_POSITION = [0.25, 1.0, 0.25, 0.0] ... http://blog.flup.jp/2009/03/12/programming_ruby_openg/ 昨年秋に正式公開されたFlash Player 10ですが、かなりいろいろな機能が強化されているようで、中でも3D機能のネイティブ対応は大きいのではないかと思います。 そこで、Flex Builderで10対応の新機能を使ってみようと思ったのですが、そのままではうまくいかないようです。色々試して出来たのでやり方を紹介します。 最新のFlex SDKをダウンロード まず、元から入っているSDKは古いのでAdobeのサイトから最新のSDKをダウンロードします。(Download Flex 3) Adobe SDKとオープンソースSDKがありますが、これは自分が開発するライセンスをオープンソースにしたい場合はオープンソースSDKの方を選べばOKです（Adobe SDKの方はクローズドソースのパッケージが含まれているそうです）。 ダウンロードしたら、Flex Builderのインストール先の中の sdks ディレクトリの中へフォルダを作って解凍します。 flex-config.xmlの書き換え 解凍後、SDKの中にframeworksというディレクトリがありますのでそれを開きます。 その中の、flex-config.xmlのうち、以下の記述を変更します。 <target-player>9.0.124</target-player> 　　　　　↓ <target-player>10.0.0</target-player> <external-library-path> <path-element>libs/player/{targetPlayerMajorVersion}/playerglobal.swc</path-element> </external-library-path> 　　　　　↓ <external-library-path> ... http://blog.flup.jp/2009/03/06/fx3_fp10/ Pixel Benderというのは、Adobeが開発中の画像・動画処理の仕組みで、出力画像をピクセル毎にプログラマブルに生成することができるようにするものです。 また、GPUのハードウェア支援も得ることができるので、処理によってはかなりの高速化が期待できます。 現段階では、Adobe After Effects CS4とFlash Player 10、Photoshop CS4 に対応しているようです。実際の開発では pbk (Pixel Bender Kernel File) という形式のコードを作成していくのですが、これは基本的にどのアプリケーションでも同じコードで動作するとのことです（実際にはAfter EffectsやFlashは細かい制限がありますので、すべてがそのままで動作するわけではないです）。 今回は実験がてら、法線マップを使ったバンプマッピングをPixel Benderでやってみます。 3D基礎知識 いきなり、「法線マップ」と言われても訳が分からないと思いますので、簡単に3Dの基礎的な部分を書いておきます。 まず、3次元の座標系についてですが、今回は左右をx軸で右が正、上下をy軸で上が正、奥行きをz軸で手前が正というようにします（左図参照）。 次に、法線というのは3D空間において、面あるいは点がどの方向を向いているかを表すベクトルのことです。2次元に置き換えて考えると、常にこちらを向いていることになるので、(0, 0, 1) となります（ベクトルの成分表記で）。 この法線というものは光源に対してその場所がどういう色になるか計算するのに使われます。これをシェーディングといいます。今回はこのシェーディングの計算のうち、ランバートとフォンのモデルを使います。 ランバート反射 あまり反射率が高くない（ぴかぴかしていない）材質の色というのは視点の位置にあまり左右されず同じ色に見えます。これを拡散反射(diffuse reflection)といい、代表的な反射計算のモデルとしてランバート反射というものがあります。 面に対して垂直に光をあてる時がもっとも明るくなることから考えられており、法線ベクトルと光線ベクトルの逆ベクトルの内積（ともに正規化された状態で）から算出できます。 鏡面反射 一方、ぴかぴかした反射は鏡を考えれば明らかなように、視点の位置によって見え方が変わります。これを鏡面反射といいます(specular reflection)。この近似についてもさまざまなシミュレーションモデルが考案されているのですが、有名なものにフォンのモデルがあります。 このフォンのモデルの考え方は、視線の反射ベクトルと光線ベクトルの角度が小さければ小さいほど明るくなり、その角度が大きいほど暗くなるというもので、要は光が反射する先にいればまぶしく感じるけど、そこからずれるほどまぶしさを感じなくなるということから考えられています。 しかし、反射ベクトルを計算するのは大変な場合もあるので、それを簡略化して光線ベクトルと視線ベクトルの中間のハーフベクトルを使う方法が考えられました。これがBlinnによる修正モデルです。 元のフォンのモデルは反射ベクトルと光線ベクトルの内積のべき乗で算出しますが、Blinn-Phong修正モデルではハーフベクトルと法線ベクトルの内積のべき乗を使います。なぜこうなるかは、反射ベクトルと光線ベクトルが一致するとき、ハーフベクトルと法線ベクトルが一致する関係にあることから分かると思います。 法線マップ 法線マップというのは、前述の法線データをピクセルごとに画像に保存したものです。ベクトルというのは正規化すると各座標の成分が-1〜1の範囲におさまるので、それを0〜255の範囲に置き換えてx=>r, y=>g, z=>bにそれぞれ保存できます。 3Dのプログラムでは、このように画像にベクトルデータをマッピングしておくことがよくあります。複雑な照明計算を前もって行っておき、それを保存した画像を使ってレンダリング時の計算を減らすことができます。 Pixel Benderでコーディング 今回のプログラムは点光源（場所によって光線ベクトルが異なる。どの場所でも光線ベクトルが同じ光源は平行光源という）として扱い、光源との距離によって明るさが減衰するようにしてみました。減衰のモデルは A = 1 / (a + D * b + D * D * c) （Dは光源との距離、a,b,cは定数）として、計算結果にAを乗算しています。 実際のコードは以下のようになります。 <languageVersion : 1.0;> kernel BumpFilter < namespace : "jp.flup"; ... http://blog.flup.jp/2009/03/06/bump_mapping_using_pixel_bender/ dragdropuploadという便利なFirefoxの拡張があります。定番の拡張なのでご存知の方も多いことと思います。 簡単に説明すると、この拡張をインストールするとエクスプローラなどからファイルアップロードのフォームへドラッグ＆ドロップでファイルの指定ができるというものです。 しかし、Linuxだからなのか分かりませんが日本語ファイル名をGmailの添付に指定しようとするとURIエンコードされた状態になってしまい、正常にアップロードできません。 いろいろとGoogleで検索をかけてみたものの、サイドバーを日本語化したものを配布しているところは見つかりましたが今回の現象とは違うので解決には至りませんでした。 そこで、今回自力で修正してみることにしました。 xpiの中身 xpi ファイルは実はzip形式のファイルになっているのでまずは書庫を解凍してみます（実際にはnautilusでダブルクリックするとFile Rollerで書庫内閲覧ができるので、そちらから処理しました）。 xpiの中には以下のようなファイルが入っています。 chrome dragdropupload.jar install.rdf LICENSE.txt 寄り道Tips 今回はまったく関係ないのですが、install.rdfはインストールに必要となる情報が定義されています。 たとえば、古いバージョンの拡張でFirefoxをアップデートしたときに対応されなくなった、という状況がよくあります。そんなとき、（保証はもちろんないですが）このファイルを書き換えることで強制的にインストールすることができます。 <em:targetApplication>> <Description>> <em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id>> ... http://blog.flup.jp/2009/03/02/dragdropupload_modified_for_japanese_filename/