エンジニアの活動報告などなど
2008.11.21
弊社でもオープンソースのソフトウェアであるEC-CUBEのカスタマイズを手がけているわけですが、
オープンソース ＝ ソースコードが公開されている ＝ 何でもやっていい
というわけではありません。
オープンソースのソフトウェアには、それぞれライセンスが設定されており、使用・改変・再配布などについては、この制限を受けるわけです。
「制限」と聞いて、「え！？」と驚いた方もいるかもしれませんが、多くのオープンソース・ライセンスにおいては、
の2点と、他いくつかの規制があるだけです。
当たり前ですけど、「ソースコードの改変不可」なんて制限はついていないのでご安心を。
以下、主要なものをいくつか紹介。
Read more »
2008.11.17
突然ですが、Pythonライブラリのuamobileを使ってみました。
記事) http://d.hatena.ne.jp/perezvon/20081117/
DL) http://pypi.python.org/pypi/uamobile/
マニュアル的記事) http://labs.unoh.net/2007/08/python_3.html
Django上でこんな風↓に動作確認
# views.py に追加
def mbtest(request):
from uamobile import detect
d = detect({'HTTP_USER_AGENT': request.META['HTTP_USER_AGENT']})
return HttpResponse(
”’<html>”’
”’<body>”’
”’<p>user_agent: %s</p>”’
”’<p>is_docomo: %s</p>”’
”’<p>is_ezweb: %s</p>”’
”’<p>is_softbank: %s</p>”’
”’<p>is_nonmobile: %s</p>”’
”’<p>model: %s</p>”’
”’</body>”’
”’</html>”’ % (d, d.is_docomo(), d.is_ezweb(), d.is_softbank(), d.is_nonmobile(), d.model)
)
地味だけど（失礼）、便利なライブラリですね。
* * *
時に、特にモバイル案件がある訳ではなかったのですが・・・
（起）DjangoでISO-2022-JPでメールが送信できない
↓
（承）MS Outlookでもutf-8でメールが見れるじゃないか
↓
（転）何か困ることあるの？
↓
（転）携帯へのメール送信で困るよね
↓
（転転転）
↓
（結）今日、pypiに登録されたというuamobileでも使ってみよう
・・・と、このような理由らしき理由が無い理由から使ってみることになりました。
今は試して良かったと思っています。
月曜日の集中力の無さがなせる業とも言えますね！
2008.11.11
先日、ヤマダ電気のワゴンセールで無線LANルータを衝動買いしてしまった。
まあ、ネットの最安値よりも3000円安かったので良しとしよう。
ルータの箱にはデカデカと「スピード最大 300M」と書いてあるんだけど、「これって何だ？」と思ったのでこれを機会にザックリと無線LANの規格について調べてみた。
無線LANで知っておくべきことは大きく分けて2つ、「無線方式」と「暗号化方式」だろう。
【無線LANの方式】
いくつかの方式があるらしいが、IEEE 802.11シリーズが最も広く普及している。
また Wi-Fi と呼ばれる事もあるけど、これは別団体が認証している名称。
かなり乱暴に言ってしまえば一般的に
と思って良いだろう。
IEEE 802.11シリーズには主に b、a、g、n の4つがある。
他には「無し」とか「i」とか「j」などもあるけど、市販製品ではほとんど見かけない。
これらの違いを理解するのは 【周波数帯】 と 【速度】 がポイントになる。
2008.11.10
IEとfirefoxなどのブラウザ間でjavascriptの仕様が違うというクロスブラウザ問題。最近はjQueryなどのライブラリを用いることによって、その違いをライブラリが吸収し、開発が容易になっています。しかし、残念ながら、jQueryを使っても、結構、クロスブラウザ問題にはまってしまいます。以下、そのようなはまった点についてまとめみます。
１．連想配列の最後のカンマ。firefoxだと無視されますが、IEだとエラーになります(例)。分かっていても、ついやってしまいます。
２．width/heightの解釈の違い。前回のブログにも詳細が書いてあります。jQueryのwidth()/height()でもその違いは吸収できません。前回のブログにあるように、DOCTYPEをきちんと指定するしかないようです。
３．z-Indexの解釈の違い。firefoxではz-Indexが最優先なのに対し、IEではz-Indexがhtmlの構造に依存します（参考）。
４．jsonpのレスポンスヘッダ。IEだと’text/html’にすると受け付けません。サーバーサイドで、’application/json;charset=utf-8′などにする必要があります（参考）。
５．forEachやmapなどのjavascript1.6の新機能。基本的にはIEで使えません。IEで使うにはfirefoxのページで公開されてる互換性パッチ（例）をソースに組み込む必要があります。
６．Canvas。IE以外ではデフォルトで使用できますが、IEで使用するには、ExploreCanvasのようなライブラリを読み込む必要があります（参考）。ただし、ExploreCanvasでは多少の機能制限があります。
７．jQueryのeventhelpersにないイベントに注意。特にmouseenter/leaveです。jqueryでbind(’mouseenter’,fn)などで呼び出せますが、IEとfirefoxで違います。IEだとイベント発生のオリジナルの子要素が取得できません(参考)。IEでの子要素取得には、mouseenter/leaveを拡張したjQueryのmouseover/outによって可能ですが、mouseoverのイベントは子要素に入ったとき全てにおいて発動するので、もとのmouseenterと挙動が異なるので注意が必要です。
とりあえず以上です。あと、ライブラリにある関数は一通りチェックして、極力使用するようにしたほうがいいと思います。何かしらクロスブラウザ対応しているので。
2008.10.17
ブラウザといえば昔はIEの独壇場だったわけですが、
最近はFireFoxがシェアを伸ばし、GoogleからはChromなんてものも出て、
クロスブラウザなんて言葉を気にしなければならない時代になってきました。
今回はそんなお話です。
2008.10.03
たまに、デザイン組み込み時になどでうまくいかない時、バックエンドのプログラムばかり組み続けていると
CSSを度忘れしたときのための、基礎的なもの・・・・・
知っている人は知っていることです。
再度おさらい。
paddingやmarginやwidthの解説
繰り返し、同じ画像を使う際
左よせで使う際
気をつけなければいけない点
仮に3列の表を作る際、float：left;
すると、全て上にあがろうとするので、
<div style=“clear : left”></div>
を入れる。
プログラム上でかまわないと思われます。
誰かのお役にたてれば、幸い・・・・
2008.09.25
google が Chrome を発表し、なんだか最近はブラウザのスピード競争がホットな話題になっている。
不思議というか、面白いのが「ブラウザの速度」=「Javascriptの処理速度」というのがいつの間にか当たり前のようになっていることだ。
個人的には Javascript の処理速度よりも、サクっと起動して、メモリ消費量が少なく、滅多に落ちない方が嬉しかったりするのだが…
とはいえ、Javascript（以下、js）の処理速度がそれこそ何十倍も早くなってくると、jsをバリバリと活用したサイトが増えてくるだろう。
jsはなんとも不思議な言語で、何しろ様々なブラウザ上で動作するために、逆に言えば同じコードでも「あっちでは動くけど、こっちでは動かない」といった事が多発する。
そのために、Prototype や jquery といったフレームワークという「枠」を越えて言語そのものを拡張してしまったかのようなライブラリも広く普及している。
こんな展開を見せている言語は他にない気がする。
そこでプログラミング（開発）には欠かせない、jsの「デバッグ」というテーマを取り上げてみよう。
かの有名な小飼弾さんが「まだまだ私にも落とすべき目の鱗がいくらでもあることを教えてくれた」と評していた Head First JavaScript の 11章 に載っているサンプルコードを使って、それぞれのブラウザがどんなエラーメッセージを表示するのか比較してみた。
◆参考図書：Head First JavaScript
サンプルコードは 25行目 に
else if average < 50 {
というコードミスがあるものだ。正しくは
else if (average < 50) {
である。ブラウザは全て WindowsXP 上で確認している。 Read more »
2008.09.22
今、javascriptが熱いですね。特に、Google Chromeの登場で、javascriptの性能競争に拍車がかかっています。Chromeのjsエンジンv8では、JITコンパイラ方式を用いており、まさに次世代といった感じです。実際、使ってみるとその速さに驚きます。ブログ界隈をみると、そんなに速くなってない部分もあるようですが、実際どうなのでしょうか？開発中のクラウドマップは今はflashで作られているのですが、今後javascriptで書き換えることも考えています。ここでは、その際に必要になってくるDOM要素のアニメーションに関する性能をブラウザ毎に調べてみようと思います。
まず、簡単なベンチマークサイトを作ったので見てください。
ボタンをクリックすると多数のDOMが横一列に動きます。個々の要素をそれぞれ動かしてるのではなく、親要素のみを動かしています。アニメーションが終わると、経過時間が表示されます。
各要素は、シンプルなもの(primitive)と、ありがちなシチュエーションとして、各丸ボックスにしたもので評価しました。各丸ボックスはさらに、div要素を多数用いて表現するもの(div corners)、画像1枚で表現するもの(1 image)、4枚のコーナー画像を用いて表現するもの(4 images)で、評価しました。要素のCSS操作にはjQueryを用いています。
以下、いくつかのブラウザで各々評価した結果です。Bestは赤で、Worstは青で示してあります。
Firefox 3.0.1
1.3s (primitive)
12.0s (div corners)
1.3s (1 image)
5.5s (4 images)
Chrome 0.2.149.30
1.0s (primitive)
1.6s (div corners)
1.0s (1 image)
1.0s (4 images)
Internet Explore (IE) 8.0
1.6s (primitive)
4.3s (div corners)
1.6s (1 image)
1.7s (4 images)
Opera 9.51
1.6s (primitive)
2.3s (div corners)
1.6s (1 image)
1.6s (4 images)
（使用したマシンはdualcore 2.2GHz程度です。パラメタはベンチマークサイトにある初期値で設定したものです。ただし、ここでは厳密性はあまり求めていないので、数回の試行平均を取っただけの結果です。また、アニメーションの強制Delayがあるので、純粋な性能評価ではないです）
これを見ると、やはりChromeがダントツに速いです。
要素別で見ると、
primitive<1image<4images<div corners
の順で全体的に速くなっています。
また、Firefoxが、要素の子にdiv要素が多数ある場合(div cornersと4images)に極端に遅くなるという結果になりました。primitiveや1imageではFireFoxのほうがIEやOperaより速いのに、div cornersや4imagesではその逆で、しかも圧倒的に悪いです。これはもう、Firefoxの次期バージョンのエンジン（tracemonkey）に期待するしかないのでしょうか…
2008.09.12
ECMAScript3.1標準化の動きやGoogle Chrome リリース等
更にJavaScriptableな世界になりつつある昨今、いかがお過ごしでしょうか？
そんな激流の中でも、基礎的な部分に関する知識が最も大事ということで
今回はブックマークレットの仕組みについてをまとめさせていただきました。
特に、ブックマークレットについて
・セキュリティ的に非常に危険なシステム
・いつブラウザ側の規制で無くなってもおかしくないシステム
このようなイメージを持っていない方は、読んでいただけるといいかなーと思います。
記事は以下のPukiWikiページ（外部）にまとめました。
それでは See you arguments.callee!!
2008.09.04
SEO等でよく耳にするページランクですが、その理論を知っている人って意外と少ないのではないかと思って勉強会のネタに取り上げてみました。下は、とりあえずその数学的な面白さが分かってもらえるように作った資料です。
Read more »
