タグ

ブックマーク / tech.nitoyon.com (5)

  • これがスマートフォン向けサイトを作るときの viewport 設定3パターンだ

    スマートフォン向けの Web サイトを作るとき、viewport の設定次第で使い勝手が大幅に変わる。 最近はレスポンシブ Web デザインが流行してるけども、その大前提として viewport の設定パターンを抑えておくのは重要だろう。 この記事では、viewport の設定によって、見た目・使い勝手がどう変わるかを解説する。 パターン1: 何も考えずに HTML を書く まずは、viewport を指定せずに、単純な HTML をスマートフォンで表示してみる。 <!DOCTYPE html> <head> <meta charset="utf-8"> </head> <body> <img src="/images/logo-ja.png"> <p>色んな素材がごった煮になった様子をお椀で表現しています。 湯気が<strong>「てっく」</strong>に見えるのが隠し味になっていま

    これがスマートフォン向けサイトを作るときの viewport 設定3パターンだ
  • AS3.0 で光るテキスト効果を作ってみた - てっく煮ブログ

    asTVCM とか映画予告編などでよく見かける「文字が左から右に光るエフェクト」を ActionScript 3.0 で作ってみた。完成品はこんな具合。文字を編集することもできる。編集後の文字ですぐに光り始める!やってることTextField を表示TextField を BitmapData に表示して、GlowFitler で光らせる (bmpGlow)円形のマスク Sprite を用意 (msk)。周りに行くに従って透明になるようにしておく。2. で作った bmpGlow に 3. のマスク msk を適用する。マスクを徐々に右に移動していけば、光ってるところが移動しているように見える。苦労したのはグラデーションのマスクを適用させる。マスクマスクされる DisplayObject の両方の cacheAsBitmap プロパティを true に設定しておく必要がある。当初、それに気

  • PV3Dで画像を繰り返し敷き詰めてテクスチャにする - てっく煮ブログ

    asPV3D で画像を面に貼り付けたら一面に広がってしまった。こんな感じ。当は画像を並べてテクスチャにしたかった。これが理想。 twitter にぶつくさつぶやきながら悩んでたら、c0rin さんに tiled を試すべし と教えてもらえたので試してみた。重要なコードはココ。敷き詰める数を5にしている。 // tiled を true に、maxU, maxV に敷き詰める数を渡す m.tiled = true; m.maxU = 5; m.maxV = 5; で、試してみた完成品がこちら。PV3D のバージョンは 2.0.883当なら Cube のサイズに応じて画像を敷き詰めてほしいんだけど、そういうことを実現してくれる Material はないようだ(?)。ソースはこれ。wonderfl にも post してる。 // Papervision3d の BitmapMaterial

  • Box2DFlashAS3 の単純なサンプルと使い方 (2.0.2版) - てっく煮ブログ

    box2d, asBox2dFlashAS3 はバージョンによって API が激しく変わっていてなかなか困りものだ。2.0.0 なら gihyo.jp の 特集:Box2DでActionScript物理プログラミング が分かりやすくてよいんだけど、2.0.1 で重要な API が改名されていて、そのことがパッケージには書いていない。「Box2dFlashAS3 どうなってるんだ」と思ったら、どうやら Box2D 家の API 変更に素直に追従しているだけのようだ。家側ではそこそこドキュメントはそろっているようなので、ドキュメントが欲しい人は Box2D 付属のクラスライブラリや Box2D User Manual を見たほうがよいかもしれない。今回は Box2dFlashAS3 ver 2.0.2 の単純なサンプルを作った。クリックすると始まるよ。(表示されない場合はリロードしてくださ

  • jQuery を高速に使う CSS セレクタの書き方 - てっく煮ブログ

    JavaScriptjQuery は CSS セレクタで要素を選んで処理できるのが魅力的ですね。そんな jQuery ですが、CSS セレクタの書き方次第で速度が大幅に変わってきます。ここでは jQuery の内部処理を疑似コードで示しつつ、jQuery を高速に使うためのポイントを5つに絞って紹介します。何度も同じセレクタを実行しないクラスだけを指定するのは禁止#id を積極的に使う途中までの結果を再利用する子供セレクタ(>)を使うと速くなることがある※ この記事は jQuery 1.2.6 のソースコードを元に記述しています1. 何度も同じセレクタを実行しない改善前 // 例題 1 $("div.foo").addClass("bar"); $("div.foo").css("background", "#ffffff"); $("div.foo").click(function(){

    Biz-R
    Biz-R 2008/12/11
  • 1