村式のエンジニア
アーカイブ
カテゴリー
リンク
作成者別アーカイブ: 中川
GDで高速にグラデーションを作る
PHPのGDには残念ながらグラデーションを扱うメソッドがありません。 1pxずつ計算して塗りつぶしていくこともできますが、計算量が大きくなってしまいます。 そこで、グラデーションマスク画像を先に作っておいてそれと合成するという方法を取りました。 黄色からオレンジのグラデーションを作る場合の手順は以下のようになります。
携帯用FlashLiteまとめ
こんにちは。中川です。 携帯用のFlashLiteについて簡単にまとめました。 社内用に作った資料なので少々乱雑な文章ですが公開します。 対応しているバージョン DoCoMo：1.0, 1.1, 3.0, 3.1 Ezweb : 1.0, 1.1, 2.0 SoftBank : 1.1, 2.0, 3.0 基本的に後方互換。(100%ではない) Flash Lite 3.0搭載端末は DoCoMo の705i,905iシリーズから。 画面サイズ(解像度) 最近だと240×240推奨。 ただしこれはセーフティーなサイズなので、コンテンツによって変えるとよい。 容量 swf 1ファイル100KBまで。 動的に情報を追加ロードする場合、その分の容量も含めて100KBにおさめる。 (AUで追加ロードした場合、合計容量に100KB制限はない。) フレームレート フレームレート7～12fpsで制作するのがいい。 12fpsで問題ないが一部端末でつらい場合があるので安全策をとるなら7fps程度に抑える。 機種ごとの違い 基本的には搭載されているFlashPlayerのバージョンに依存。 大きく変わるのは以下。 ・デバイスフォント ・処理速度 … 続きを読む
携帯サイト開発のハマりどころ(1)
こんにちは。中川です。 携帯のキャリアや端末特有の制約などで、作ったものが思うように動かないことがよくあります。 そこで、今回は携帯サイトを開発する上で気をつけるべき点を思いつくまま書いていきたいと思います。 タイトルについている(1)は連載する意気込みをあらわしています。 1.プログレッシブJPEGを表示できない 一部の端末でプログレッシブJPEGが正しく表示できません。 また、プログレッシブJPEGを埋め込んだFlashLiteも正しく再生されない機種があります。 これらの問題は非プログレッシブJPEGにすることで解決します。 2.リダイレクトする際はURLの「#」が使えない LocationヘッダーのURLの末尾に「#」を使用してもその位置に飛ばない機種があります。 header(‘Location:http://example.com/index.html#login’); ちなみに「#」とそれ以降に続く文字列は「フラグメント識別子」と呼ぶそうです。 参考) Location時にフラグメント識別子を付けられるのか？ http://d.hatena.ne.jp/maru_cc/20080207/1202385497 LocationヘッダのURIにフラグメント識別子はNG http://d.hatena.ne.jp/maru_cc/20080207/1202386973 auでLocatiuonヘッダにフラグメント識別子を入れた場合の挙動 http://d.hatena.ne.jp/maru_cc/20080208/1202436438 では今日はこの辺で。
javascriptで擬似ポリゴン
こんにちは。中川です。 先日行われたカヤックさんとクックパッドさん主催の「技術者交流会 ～おいしいソースのつくり方～ 」のライトニングトークで発表させていただきました。 たくさんの技術者の方と交流でき、発表も聞けて料理もおいしく、非常に充実した時間を過ごせました。 関係者の皆様、このような機会を設けていただきありがとうございました。 さて、当日はHTML5のcanvasと、ドロネー三角形分割という技術を使って写真をポリゴンっぽくするデモを発表しました。 特徴点を手で打っておけば後は自動で面を生成します。 プレゼン資料： http://seeds.ville.jp/electriccafe/slides/ デモ： ※Firefox3.0.9、chrome2.0β でのみ動作を確認しています。 IEやSafari、chrome1.0では動きません。 1)ドロネー分割 http://seeds.ville.jp/electriccafe/demo/1/ 2)擬似ポリゴン http://seeds.ville.jp/electriccafe/demo/2/ 補足説明 資料が簡素なので簡単に補足します。 デモの目標： 実写の写真をポリゴンっぽくする。 方針： (1)特徴点は人間が打つが、あとはプログラムで頑張る。 (2)三角ポリゴンへの分割はドロネー分割を使う。 (3)全ての三角ポリゴンを重心の位置の色で塗りつぶす。 いろいろと改善の余地はありますが、書いたコードは300行程度の本当に小さなプログラムです。 ライセンスはNYSLで公開しますので好きなように使ってみてください。
カテゴリー: javascript
コメントをどうぞ
DoCoMoのCSSとXHTMLまとめ
DoCoMoのCSS、XHTMLにはクセがあります。注意すべき点をまとめてみました。 これに関してはいろいろなサイトで論じられていますが、既出のネタや仕様書の内容も含めなるべく広範囲に渡って情報を集めました。 他のキャリアについてはまた書くと思います。 特に気をつけるべき点を先にまとめると、こんな感じです。 ・CSSはインラインでしか記述できない。 ・XHTMLが必須でかつ適切なContent-Typeヘッダを吐く必要がある。 ・istyle属性は使えない。 ・MARQUEEタグは使えない。 ・object要素によるFlashの埋め込みはiモード対応XHTML1.1から。 ・TABLEタグはiモード対応XHTML2.0以降でないと使えない。 ・GPS用の属性lcsはiモード対応XHTML2.1以降でないと使えない。 (DoCoMoに限った話ではない内容も含まれています)
カテゴリー: css/(x)html, mobile
コメントをどうぞ
携帯電話向け動画配信のまとめ(その2)
中川です。 今回は携帯用マルチメディアコンテンツの著作権保護について調べました。 著作権保護に関して 対象ファイルの転送禁止や再生回数制限などについて、キャリアごとの設定方法を調べました。
携帯電話向け動画配信のまとめ(その1)
中川です。 携帯向けに動画を配信する時の仕様などを調べました。 長くなるので2回か3回に分けて発表しようと思います。 はじめに 主に3G端末をターゲットにした内容になっています。3G以前の端末もケアしたい場合はこれでは足りません。 より多くの端末で再生できるような条件を探す、というコンセプトで調査した結果です。 端末ごとに特化すればより高品質の動画を提供できますが、本記事では動画の品質より端末互換性を重視しています。
Googleのページランクを取得する
GoogleToolbarなどにページランク表示がありますが、これをサーバサイドで取得することができます。 あまりフレッシュな話題ではないですが、使ってみたのでメモしておきます。 CPANにあるライブラリを使います。 WWW::Google::PageRank (見つからない場合はこちらから検索できます) 使い方 newしてget()するだけでした。 #!/usr/bin/perl use strict; use warnings; use WWW::Google::PageRank; my $url = ‘http://www.yahoo.co.jp’; my $pr = WWW::Google::PageRank->new; $pageRank = $pr->get($url); print “Content-type:text/html;nn”; print “$url : ” . $pageRank; exit; あまりにも簡単で拍子抜けしてしまいました:D ただし、以下の2点が問題?なので使うには注意が必要です。 内部でUserAgentをGoogleToolbarに偽装してGoogleにリクエストを投げている リクエストを投げる時に必要なチェックサムの計算方法はGoogleが公式に公開しているものではない
Javascriptのブックマークレットに見る無名関数の使われ方
こんにちは。中川です。 最近Javascriptが流行っているようで、関連する記事やコードを見かける機会が増えました。 最近になって興味を持ち始めた方、急に仕事でやるハメになった方、結構多いのではないでしょうか。 Javascriptは書式こそC言語やJavaに似ていて馴染みやすいように見えますが、中身はかなり違ってます。 はじめてJavascript特有の書き方に触れたときに戸惑ったことがある方も多いと思います。 私が他人のコードを見ていて一番最初に「なんだこれは？」と思ったのは、あるブックマークレットのコードを見たときでした。 どんなコードだったかは忘れましたが、書式はこうでした。 javascript:(function(){/* statements */})(); …[1] 最後の()はなんだろうか？ 関数は function f(x){/* statements */}; …[2] と定義するのではなかったか？ 定義した後に f(2); …[3] のように書いてコールするのではないのか？ 関数の中身は分かっても、なぜこれで動くのかが理解できませんでした。 そしてなぜこんな分かりにくい書き方をするのか。 この奇怪？な書き方には理由があります。 謎を紐解いていきましょう。
カテゴリー: javascript
コメントをどうぞ