これがスマートフォン向けサイトを作るときの viewport 設定３パターンだ
スマートフォン向けの 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>に見えるのが隠し味になっていま
jQuery を高速に使う CSS セレクタの書き方
jQuery は CSS セレクタで要素を選んで処理できるのが魅力的ですね。そんな jQuery ですが、CSS セレクタの書き方次第で速度が大幅に変わってきます。 ここでは jQuery の内部処理を疑似コードで示しつつ、jQuery を高速に使うためのポイントを５つに絞って紹介します。 何度も同じセレクタを実行しないクラスだけを指定するのは禁止#id を積極的に使う途中までの結果を再利用する子供セレクタ(>)を使うと速くなることがある ※ この記事は jQuery 1.2.6 のソースコードを元に記述しています 1. 何度も同じセレクタを実行しない 改善前 // 例題 1 $("div.foo").addClass("bar"); $("div.foo").css("background", "#ffffff"); $("div.foo").click(function(){alert
AS3 で双方向データバインディング - てっく煮ブログ
asActionScript 3.0 で双方向にデータバインディングしたいことがあったりする。MXML に {hogehoge} 形式でデータバインディングを作ると問題なく実現できるんだけど、スクリプトから BindingUtils.bindProperty でやろうとするとスタックオーバーフローしてしまうことがある。スタックオーバーフローする例 xml version="1.0" encoding="utf-8"?> mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" applicationComplete="appComplete();"> mx:Script> CDATA[ import mx.binding.utils.*; [Bindable] public var items:Array = ["item1", "i
フォント同士を交配させて新しいフォントを作る「genoTyp」が面白い - てっく煮ブログ
「この発想はなかった！」と驚いた。genoTyp はフォント同士を交配させて新しいフォントを生み出す実験サイトだ。早速、試しにやってみた。1. 第一世代の親を決めるgenoTyp を開いて左上の [Breed] タブをクリックすると「交配ページ」が表示される。[add original font] ボタンをクリックして、祖先となるフォントを２つ追加してみた。交配させるために２つのフォントをドラッグしてくっつけた。くっついた状態になれば交配の準備は完了だ。2. 交配させてみる中央の [cross] ボタンを押すと第一世代が誕生する。４人の子供が誕生した。父親似だったり、母親似だったり、子供によって雰囲気が異なっている。3. 第一世代でも交配別の [original font] を追加させて、第一世代の中から気に入ったものと交配させてみた。３人の子供が第二世代に誕生した。4. さらに交配！今度
【YQL 速攻レビュー】米 Yahoo! が SQL っぽく色んなデータを取ってこれるAPIを出した - てっく煮ブログ
米 Yahoo! が Yahoo! Pipes みたいに自由度が高くて、またちょっと毛色が違うサービスが出てきた。題して、Yahoo! Query Language。YQL と呼ぶようだ。SQL 風の言語を REST で投げて、結果を XML や JSON で受け取ることができる。具体的にやってみないと分かりにくいので、とりあえず試してみた。RSS からデータ取得YQL を使って RSS から最新のタイトル10個を取ってきてみる。こんな YQL になるらしい。 select title from rss where url='http://d.hatena.ne.jp/nitoyon/rss' rss テーブルに対して select を発行している。実際にこの YQL を試すには YQL 用の console を利用するとよい。（※要ログイン）console の左上に YQL を入力して
てっく煮ブログ - Flex の Bindable 入門
GUI アプリを書くときの今までの流れはこう：監視したいデータに対して「値が変わったら教えてね」とハンドラを登録しておく。addEventListener みたいなイメージ。ハンドラ内部では、状態変更に応じて表示内容を変更するコーディングを行う。これが基本的な Model-View もしくは MVC の作り方。でも、これってめんどくさい。それを解決するために Flex SDK が提供しているのがデータバインディングという仕組み。監視したいデータに [Bindable] をつける。 値が変わったときに自動的にイベントが発行されるようになる。データが変わったら変更を反映させたい場所に {mySlider.value} のように中括弧で値を設定する。 コンポーネントがイベントをハンドリングして、自動的に表示内容が書き換わるこれで煩雑なコーディングから開放されて幸せ。もちろん、凝ったことをするには
ワリオランドシェイクみたいに HTML が崩壊するブックマークレット（とそのソースコード） - てっく煮ブログ
as, box2dワリオランドシェイクと YouTube のコラボプロモーション が面白かったので、似たようなものを作ってみました。次の文字列をコピーしてアドレスバーに突っ込むと、HTML が崩壊します。javascript:(function(){var d=document; var s=d.createElement("script"); s.charset="UTF-8"; s.src="http://tech.nitoyon.com/meltdown/meltdown.js?"+(new Date()).getTime(); d.body.appendChild(s)})();崩壊するのは画像だけなので、画像があるページで試してみてください。このブログだとこんな具合。画像はドラッグすることも可能です。あまり画像が多いと重くなりすぎるのでご注意を。仕組みFlash と JavaSc
AS3.0 で 3D プログラミングを１から勉強する (1) - てっく煮ブログ
as3D の原理をあまり知らなかったので、ActionScript 3.0 で１から勉強してみた。１からなのでフレームワークは使わず、自力で実装していく。Web 上には色んな資料があってありがたいだけど、玉石混交な上に、有用なものでも一本道で幅の狭いものが多い。前提知識のない自分にとっては、資料間の関連性を理解するのが大変だった。なので、なるべく簡単なところからスタートしつつ、広く浅く体験していくことを目標としてみる。まずは、四面体をワイヤーフレームで表示するところからスタートしよう。四面体を定義するまずは、3次元上の点を表現する Point3D クラスを作る。 class Point3D { public var x:Number; public var y:Number; public var z:Number; public function Point3D(_x:Number =
FIVe3D で Keynote 風 Cube トランジッション - てっく煮ブログ
最近、いくつかの Flash ブログで FIVe3D が取り上げられていたので、自分も触ってみた。バージョンは v2.1。確かにこれは簡単だ。クラス数も少ないし、クラス名が ActionScript のものと似てるので直感的。Sprite3D クラスの graphics プロパティで Graphics3D オブジェクトが取得できて、 beginFill() とか drawCircle() で図が描ける。座標空間は 3D。（参考：FIVe3D 3D空間に描画 | moriBlog）ってことで、Bitmap3D クラスを使って Keynote 風な Cube トランジッションを作ってみた。ソースの考え方は unic8 Studios - Flex Cube - 3D OSX look と同じ。ただ、FIVe3D は奥行きを一切考えてくれないところに注意が必要。単に座標変換するだけのライブラリな
Google Maps をぐーるぐる - てっく煮ブログ
as, GoogleMapsAPIさっそく Google Maps API for Flash で遊んでみた。公式のチュートリアルを見ると MXML 必須のように見えるが、Map クラス自体は Sprite を継承してるので、AS3 の範囲だけで遊べる。回転、フィルタが自由自在ですよ、ということで、ぐるぐる回してみた。ドラッグ時にはマップ全体がぼやけます。ソースコードはこちら。 package { import flash.events.Event; import flash.geom.Matrix; import flash.filters.BlurFilter; import com.google.maps.Map; import com.google.maps.MapEvent; import com.google.maps.MapType; import com.google.m
てっく煮ブログ - ActionScript やるなら入れとけ。rascut 導入と使い方。
asActionScript 3.0 でコマンドライン開発してる人は必携の rascut を導入してみた。Flex 開発や AIR 開発でも使えるよ。rascut は id:secondlife さんによる fcwrap 後継バージョン。ファイル修正から自動的にプレビューまでできたり、trace() の出力をコンソールに出力してくれたり、かなり便利。以前、勝手が分からずにかなり苦労したけど、最近、RubyForge にアップロードされてからは gem 一発で超簡単になったよ。前準備Flex SDK と fcsh を準備しましょう。fcsh にはパスを通しておきましょう。Flex SDK については ActionScript 3.0メモ さんを参照あれ。fcsh については fcsh で Apollo を高速コンパイル あたりを参照あれ。Flex 3.0 SDK には fcsh が付属してる
すごい Flash 2007 集計結果 - てっく煮ブログ
前回の募集エントリ に多数のコメントありがとうございます。初めて見るものも多くておもしろいです。私もまとめましたよ。気合入れて書いたので 本家のほうに掲載 しておきました*1。かなり長くなっちゃったけど、渾身の記事なので時間見つけて読んでくれると嬉しいです。まだまだ募集中ですが、教えてもらったすごい Flash を紹介していきます（随時追加）。あくまで個人ブログでの突発的企画なので、数も少ないですが、何かの参考になれば幸いです。※ このブログで募集したこともあって、技術的なものや広告コンテンツが中心になってます。 ブログエントリわたしの「すごい Flash 2007」まとめ - Attribute=512007年 すごいと思った Flash のサイト | ra66it.netこの Flash がすごい 2007 [てっく煮]わたしがすごいと思った Flash はこれ！ - ネットランダム2
ICO の GPL 違反について詳しい友達に聞いてみた - てっく煮ブログ
先日、話題になった プレイステーション2ゲーム『ICO』にGPL違反発覚 - Engadget Japanese という記事に「GPL ライセンスのライブラリを利用しているからソースを公開しなければならない」とあった。この手の GPL 関連のニュースは今まで何度も出てきてたけど、いまいち腑に落ちてなかったので詳しい友人に聞いてみた。組み込みLinuxみたいな仕事をしてる人なので、そこそこ信用できるのではないかと。以下、そのまとめ。（あまり詳しくない人間がまとめているので、間違いがあったらツッコミください）GPL と LGPL例えば、glibc（GNU C Library）はよく使われるライブラリだけど、これをリンクした途端に「はい全部 GPL ね」っていうのは余りに乱暴なので、LGPLっていうライセンスで公開されている。LGPL なライブラリを動的リンクするだけなら、そのソフトウェアを公開
Flexカスタムコンポーネントの作り方 - てっく煮ブログ
flexFxUG 第29回勉強会＠京都の発表資料を公開します。複合コンポーネント、既存コンポーネントの拡張、さらに UIComponent の createChildren() や updateDisplayList() について触れています。かなりマニアックな内容になってます。会場にいた人のどれぐらいの方に有意義だったか恐ろしくて聞けませんでした…。(表示されないときはリロードしてください)使い方：次のページ→ or Space前のページ← or Shift + Space最初のページHome最後のページEnd指定ページへ移動ページ番号+Enter 関連資料：資料 (パワーポイント形式) （Windows+PowerPoint2003以外ではたぶん崩れます）プレゼンソースコード (as)SlideShare にアップロードしたのですが、あまりにも重かったため、自分で SldieShare
ActionScript がイケてるたった１つの理由 - てっく煮ブログ
as（inspired by ActionScript 3 がイケてる50の理由 : メディアテクノロジーラボ ブログ）そろそろ ActionScript やり始めて１年。飽きずに ActionScript やり続けてきた理由を突き詰めて考えたところ、「表現力」と「普及率」のバランスが一番いいからなんだ、と気がづいた。いまさら Windows アプリ作ったとしても誰もインストールしてくれないし、Mac や Linux の人にだって使ってもらいたい。物を作ろうとしている人間にとって、使ってもらえる可能性を狭めることはしたくないもんだ。WPF や Silverlight も面白そうなんだけど、「で、どの端末で動くの？」と考えたときに利用できる環境がほとんどない。1年後には多少改善しているかもしれないが、2007年10月の現在においてはほとんどない。作っても見てくれる人がいないといころで作っても
ActionScript 的超絶技巧発表会に参加してきました - てっく煮ブログ
asTwitter 経由で企画された「ActionScript 的超絶技巧発表会」に参加してきました。日帰りで東京まで行ってきましたが、往復交通費以上に得るものは多かったです。参加条件が「発表する」だったため、ほんとにレベルが高かったです。かなりの自信作を持っていったつもりだったのに色あせてしまいました。ひとまず、勉強会まとめエントリとして投下しておきます。半分感想。HTML/JavaScript から SWF をいじる話(FlashBug) by muraken さんJavaScript 経由で MovieClip を作成したり、パラメータをいじったり、中の情報を覗いたりする。AS2。→関連エントリ作りこんでいけば、Flash 版デバッグ環境としても便利なものになりそう。Flash デバッグ環境って、あんまりいいのないですしね。クロスブラウザな Canvas として公開すればかなりヒット
てっく煮ブログ - ActionScript3.0でテトリスを作ってみる
WCAN mini ActionScript Vol.3 の勉強会資料を公開します。プレゼン資料ソースコード (23.8KB)ActionScript でのゲーム製作は注目されているようなので、実例としていいかもしれません。中でも、右に写真を載せている Tetris＋PaperVision3D のゲーム例が気に入ってます。（ただ、現状ではライン消したあとの処理にバグがありますが）ActionScript 3.0＋PaperVision3D とか ActionScript 3.0＋APE(Actionscript Physics Engine) を組み合わせてみれば、今までは手を出しづらかった方面のゲームでも簡単に作れるようになりそうです。
てっく煮ブログ - Apollo でニコニコメソッド プレゼン
プレゼンしているその画面の上に、聞いている人達のコメントがニコニコ動画風に流れるのが楽しそう。ということで、それ、AIR でできるよ、と作ってみました。ドキュメントフォルダの niconico.txt を監視し続け、新たな行が登場したら、行の中身をニコニコ動画風に表示します。Flash を使ってるので本家と似た表示になるのがポイントです。ダウンロード：niconico.air (要 AIR ランタイム β版)ソースコード：niconico.as (176行)このアプリケーション単体の機能はテキストの中身を出力するだけですが、次のような活用法を想定しています。ローカルに Web サーバーを立てて、CGI 経由でコメントを niconico.txt に出力する → ニコニコメソッドプレゼンが可能に！Plagger で取得した内容を niconico.txt に吐き出す → ニコニコメソッド R
てっく煮ブログ - Apollo 触ってみた。すごすぎ。
Apollo のα版がリリースされたので、さっそく触ってみました。初日はランタイムをインストールしてサンプルを動かしてみました。コンパイルは時間がなくてまだ試せてません。2007.2.24追記：HTML+JS版 Apollo アプリを作ってみる で解説文章を書きはじめていますApollo を知らない人のために、おおざっぱにざっくり説明しておくと、Apollo は Web アプリを作るようにローカルアプリケーションを作れるようになるステキなライブラリです。Flash だけに縛られているわけではなく、Flash, Flex, HTML, Ajax などを統合して利用することができます。イメージはこんな感じ（Adobe の apollo_docs_alpha1_031907.zip からの引用）。図からもわかるように、HTML/JavaScript だけで Apollo API を利用してローカ
ActionScript を薦める５つの理由 - てっく煮ブログ
as最近 ActionScript 3.0 はじめました。ActionScript がすごいこと気づいてしまいました。JavaScript の多くの限界を簡単に克服できちゃいます。そこで、ActionScript 3.0 の魅力を JavaScript と比較しながらまとめてみました。1. 何も考えなくてもクロスブラウザJavaScript を書く上で避けられないのがクロスブラウザ化です。IE や FireFox 専用、などと言い切ってしまうのは簡単なのですが、対応ブラウザを増やすためには、初期開発と同等、もしくはそれ以上の時間がかかってしまいます。１年ほど前の情報ですが、Google Maps のソースコードは Safari だけ別の JavaScript ファイルをロードしていました。あの Google が１つのブラウザを特別扱いしてしまうぐらいにクロスブラウザ化は面倒なのです。それに
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
