-webkit-text-size-adjust: none を絶対に設定してはいけない理由
PC 版の Google Chrome や Safari で見たときにユーザビリティーが落ちるから。 以上。 で終わってしまうと記事にならないので、ちゃんと説明しておく。 そもそも -webkit-text-size-adjust とは何か iPhone や Android のブラウザーは、縦向き (Portrate mode) と横向き (Landscape mode) の文字サイズを自動調整する機能がある。 これを制御するのが CSS の -webkit-text-size-adjust である。 文字サイズ自動調整の具体例 次のような HTML をスマートフォンで表示してみる。 <!DOCTYPE html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-
Google Maps をジオラマ風にしてみた - てっく煮ブログ
GoogleMapsAPI, asGoogle Maps をジオラマ写真風にすると印象が変わる、というアイディアが チルトシフトの新しい使い方 その2 に書いてあった。おもしろそうなのでリアルタイムに Google Maps をジオラマ風に表示するものを作ってみた。好きな場所を表示できるので、地球全体がジオラマにしてしまった。簡単な使い方：上部の検索欄に英語で入力して移動左のコントロールは Google Maps と同じShift+ドラッグで視点移動日本各地を巡ってみた東京駅前車がミニチュア風でかわいい。京都御所箱庭になりました。大阪駅前線路と高速道路とビル群。 どうぞご利用くださいあなたの街をジオラマ風に！ソースコードチルトシフトのエフェクトは「彩度をあげる」「周りをぼかす」「周りを暗くする」ことで実現している。ソースコードは以下に（map_1_20.swc、minimalcomps、T
経路探索アルゴリズムの「ダイクストラ法」と「A*」をビジュアライズしてみた - てっく煮ブログ
as詳解 ActionScript 3.0アニメーション ―衝突判定・AI・3DからピクセルシェーダまでFlash上級テクニック を読んでいて、経路探索のアルゴリズムで A* が取り上げられていました。A* については、いろいろ検索して調べたりもしたのですが、やっぱり本に書いてあると理解しやすいですね。せっかくなので自分流に実装してビジュアライズしてみました。ダイクストラ法まずは A* の特別なケースでもあるダイクストラ法から見ていきます。クリックすると探索のシミュレーションが開始します。スタート地点(S)からゴール(G)への探索が始まります。色がついたところが「最短経路が決定した場所」です。スタート地点から少しずつ探索が完了していきます。半分ぐらい完了しました。まだまだ進みます。最後まで終わりました。最短経路を黒色矢印で表示しています。ダイクストラ法は、スタート地点から近いノード(=マス
PV3Dで某ゲームを3D化する試作 - てっく煮ブログ
asPV3D でスリーディースリディーしたのを作るのも楽しいけど、2D 的なものを 3D に持ってきて表現するのも面白いかなーと思って作ってみた。 後悔はしていない。操作は特にできなくてクリックしたら跳ねるだけ。○天堂さんに怒られたら消す。ネタとしては未完成な感じだが、PV3D でのカメラ＋Tweener の扱いが少し分かったので実りはあった。PV3D のバージョンは 2.0.883ソースはこれ。wonderfl にも post してる。 // PV3D で某ゲームを3D化してみた // // [遊び方] // ・クリックでジャンプする // ・それだけ package { import flash.events.Event; import flash.text.TextField; import org.papervision3d.view.*; import caurina.tran
全自動ブックマーク棚卸しが想像以上に有意義な件 - てっく煮ブログ
みんな、自分が過去にブックマークした記事って気になるよね。はてなブックマークを使ってると、勢いでブックマークしてしまうけど、なかなか振り返る機会はないもの…。少し前に「ブックマーク棚卸しがイイヨ」という記事があったんだけどブックマークの棚卸し(?)をしてます。今年一年かけてブックマークしたものを順番に見て行ってます。見るといっても、全部の記事を開いて見るわけではなく、流し読みで、「ああ、これはもう一回読んでおきたい」と思ったものを開いてはインプットしているという感じです。 はてなブックマーク棚卸し - naoyaのはてなダイアリー１年分の棚卸しとなると楽しくないし…。わたしもみんなと同じ、その一員でした。でも、もう平気。「全自動ブックマーク棚卸し」があれば！全自動ブックマーク棚卸し があればもう大丈夫。全自動で １年前のブックマークを RSS 配信 してくれちゃいます。試しにやってみましょ
ブラウザ上で Ruby を試せる「IRBWEB」を作ってみた - てっく煮ブログ
ruby, silverlightRuby を試してみたいけどインストールするのは面倒…。そんな人のためにブラウザ上で Ruby を試せる IRBWEB というサービスを作ってみました。irb のように、Ruby の構文を実験できてとてもお手軽です。 IRBWEB完全にブラウザ上で動作するため、動作もさくさく。ちょっとしたコードを書いて動作確認も楽しめますね。なお、変数を定義するには $a のようにグローバル変数として定義しないと、次の入力で参照できません。動作環境Silverlight 2.0 のランタイムが必要です。Silverlight 2.0 は Windows の IE だけでなく、Firefox や Mac の Safari、さらには主要な Linux ディストリビューションでも動作するので、この機会にインストールしてみるとよいですね。仕組みSilverlight 2.0 には
クラスタリングの定番アルゴリズム「K-means法」をビジュアライズしてみた - てっく煮ブログ
集合知プログラミング を読んでいたら、K-means 法（K平均法）の説明が出てきました。K-means 法はクラスタリングを行うための定番のアルゴリズムらしいです。存在は知っていたんだけどいまいちピンときていなかったので、動作を理解するためにサンプルを作ってみました。クリックすると１ステップずつ動かすことができます。クラスタの数や点の数を変更して、RESET を押すと好きなパラメータで試すことができます。こうやって１ステップずつ確認しながら動かしてみると、意外に単純な仕組みなのが実感できました。K-means 法とはK平均法 - Wikipedia に詳しく書いてあるけど、もうすこしザックリと書くとこんなイメージになります。各点にランダムにクラスタを割り当てるクラスタの重心を計算する。点のクラスタを、一番近い重心のクラスタに変更する変化がなければ終了。変化がある限りは 2. に戻る。これ
ウニができるまで 〜 Context Free Art の遊び方 - てっく煮ブログ
前回に引き続き、Context Free Art を取り上げる。今回は、Context Free Art で変なウニ風の生き物を作っていく手順を紹介する。さぁ、準備はいいですか？1. 基本となる図形まずは基本となる図形を描画する。こんなやつ。ソースコードは次のようなもの。 startshape LINE // LINE というルールを描画しろ rule LINE { // ルール LINE の定義 CIRCLE { s 6 1 x 3 sat 1 b .3 hue 30} } １行目の startshepe LINE では、「LINE というルールを描画しろ」と指定してる。じゃあ、LINE ルールはどうなってるかというと３行目で定義している。LINE ルールでは CIRCLE を１つ描画する。CIRCLE は Context Free で定義されている円を描画するルールだ。ルールにいくつか
驚きの表現力のお絵かきプログラミング Context Free Art を試してみた - てっく煮ブログ
文脈自由文法でアートが楽しめる Context Free Art というのを試してみた。Windows, Mac, Linux などで利用できて、簡単なコードを書けくだけで複雑な幾何学アートを生成してくれる。サンプルから１つ起動後、メニューの Example からいくつかのサンプルを試してみた。たとえば、木を生成するサンプル「weighting_demo」のソースはこんなの。 startshape SEED1 rule SEED1 { SQUARE{} SEED1 {y 1.2 size 0.99 rotate 1.5 brightness 0.03} } rule SEED1 0.05 {SEED1 {flip 90}} rule SEED1 0.05 { SQUARE{} SEED1 {y 1.2 s 0.99 r 1.5 b -0.5 flip 90} SEED1 {y 1.2 x
最近 wonderfl に投稿したもの - てっく煮ブログ
asここのところは他人のソースをいじって遊んでます。ニコニコテレビちゃんシリーズid:uniq さんの ニコニコテレビちゃんを描いてみた を発見。気に入ったのでアニメーションさせてみた ニコニコテレビちゃんを動かしてみた chabudaiさん が doraを動かしてみた に改造。かわいいーid:flashrod さんの Tetris のブロックをニコニコちゃんにしてみた niconico Tetris ついでにカーソルキーでも操作できるようにしてみたid:nemu90kWw さんが BGM をつけてくれた！ ニコ割ゲームっぽくしてみた forked from: niconico Tetris | Wonderfl Build Flash Onlineぱーてぃくるシリーズmunegon さん の ぱーてぃくる を発見。飛び散るものを asahi.com の新着タイトルに変更。 asahi.c
【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 を入力して
AIR・AS3・Flex3のクラス相関図ポスターが公開中 - てっく煮ブログ
air, flex, asFlex Team: Update on Flex, ActionScript, AIR Posters から入手できます。公開当初は、Flex Builder 3 の購入が条件だったようですが、いつの間にか、誰でもダウンロードできるようになってますよ。97MB の巨大 PDF、計５枚の迫力です。四角１つがクラス１つになっていて、メソッド・プロパティ名が四角の中に列挙されています。つまり、でかい四角は複雑なクラスというわけ。中でも目を引くのが、Flex の UIComponent と ListBase。こいつらのせいで Flex が複雑になってるいっても過言ではない・・・。個人的には、UIComponent は Sprite を継承すべきじゃなかったと思うんですよね…。ちなみに、Flex2 時代の Flex2 と AS3 のポスターはこちらにあります。http:/
WSHでDOM (Shibuya.js in Kyoto) - てっく煮ブログ
Shibuya.js in Kyoto にて「WSHでDOM」というタイトルで発表しました。開発に一週間、プレゼン作りに一週間かけた渾身のネタです。プレゼン作りにあたっては、２ページ目のイメージ写真を撮るために祇園祭に出かけたのが楽しかったです。資料に使ったフォントは「アニトＭ-教漢（無料版）」です。素敵なフォントが比較的自由なライセンスで公開されていて大変ありがたいですね。無料版なので、一部漢字が使えずに文章の変更を余儀なくされましたが、おかげで小学生にも読める分かりやすい資料になりました。ソースコード：http://coderepos.org/share/browser/lang/cplusplus/dom4winui/trunk/srcプレゼン 全画面で見る：http://tech.nitoyon.com/misc/shibuya-js-kyoto/Slide.swfソース：http
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 =
AS で別ドメインの画像を読み込むときの注意点 - てっく煮ブログ
asActionScript を使って 外部ドメインの画像を読み込むときの注意点を調べてみた。AS3 で調べたけど、AS2 でもセキュリティの機構自体は同じ（だと思う）。読み込み方Loader クラスを使えば外部ドメインの画像をロードできる。 var loader:Loader = new Loader(); var req:URLRequest = new URLRequest("http://www.example.com/sample.gif"); loader.load(req); addChild(loader); 画像形式は PNG、GIF、JPEG のみ。BMP はダメ。アニメーション GIF の場合は１フレーム目しか描画されない。読み込み完了したことを知るためには、contentLoaderInfo プロパティの complete イベントを監視すればよい。ファイルが存在し
Windows で Flex SDK をビルドしてみた - てっく煮ブログ
flex, asWindows XP で、オリジナル mxmlc から SWF を作るところまで。まずは、README.txt に従って、下準備。J2SDK の導入Archive: Download Java 2 SDK, Standard Edition, v 1.4.2_14 (J2SE) から j2sdk1.4.2_14 をダウンロード。C:\j2sdk1.4.2_14 にインストールする。Apache Ant の導入http://archive.apache.org/dist/ant/binaries/ より apache-ant-1.6.2-bin.zip をダウンロード。C:\apache-ant-1.6.2 に展開。Cygwin の導入http://cygwin.com/ から setup.exe を実行。全てデフォルトで。環境設定ここからは Build and Test -
Box2DFlashAS3 の見た目を豪華にしてみる - てっく煮ブログ
as, box2d前回 のサンプルを改造して、見た目に一味加えてみた。ちょっぴり実写志向。（表示されない場合はリロードをお願いします）原理は簡単。Box2dFlashAS3 は、もともとが C++ のコードなだけに、エンジンに描画処理が含まれていない。前回も自前で lineTo を使って描画してたのだけど、今回は事前に Sprite を用意しておいた。enterFrame で b2Body の位置と角度を Sprite に反映させている。ただ、物理エンジンの初期化と Sprite の描画の両方を AS3 で書いているので、ソースコードが無駄に長い。もうちょっと複雑になるときは、しっかり設計したほうがよさそうだ。だるまの絵は以下のサイトから借用させていただいた。無駄にアフィリエイト（笑）。日本の玩具でコミュニケーションが広がりますだるま落としジャンル: キッチン・日用品雑貨・文具 > 文具
Box2DFlashAS3 の単純なサンプルと使い方 - てっく煮ブログ
as, box2dBox2DFlashAS3 のデモは見る分には魅力的なのだけど、勉強し始めるときにはソースが複雑すぎる。ということで、分かりやすく、かつ、見てて楽しいものを作ってみた。（表示されない場合はリロードしてください。）簡単なチュートリアルを作成してみました。参考にどうぞ。世界の作成床の作成積み木の作成シミュレーションの開始描画1. 世界の作成シミュレーションを行うための世界を作成する。worldAABB というのは衝突判定のパラメータの模様。Box2D User Manual によるとあまり重要ではないパラメータらしい。お約束というところか。 var worldAABB:b2AABB = new b2AABB(); worldAABB.minVertex.Set(-100.0, -100.0); worldAABB.maxVertex.Set(100.0, 100.0); 次に
サイトの最新被ブックマークを livedoor Reader で読むための Pipes - てっく煮ブログ
それPiはてなブックマーク経由でもらうコメントが気になるので、livedoor Reader にhttp://b.hatena.ne.jp/bookmarklist?mode=rss&url=[自分のサイトのURL]を登録してます。この RSS は、サイト全体の新着ブックマークが入っているので大変重宝してるのですが、 にページの要約が入ってるのがうれしくない。自分のサイトなんだから要約はなくても分かるし、むしろ、ないほうが見やすい。そこで、「それ Pipes でできるよ」。どーーーーん。ページの要約を消してスリムになりました。さらに、ブックマークした人のアイコンを付け足して、はてブっぽい雰囲気を演出。ご利用はこちらから：http://pipes.yahoo.com/pipes/pipe.info?_id=0olatt_u2xGUHo7_qGIyXQ仕組み入力された URL に http:/
丸ビルRSSリーダーをリリースしました - てっく煮ブログ
関西人にとっては思い入れの強い丸ビルを RSS リーダーにしてみました。丸ビルRSSリーダー 遊び方ニュースサイトの URL やブログの URL を入れて遊んでみてください。URL だけじゃなく、メッセージを入力すれば、それを表示することだってできます。入力した URL は自動的に #http:// という形で URL（location hash） に保存されるので、ブログからリンクすることもできますよ。（例） このブログを表示：http://tech.nitoyon.com/marubiru/#http://d.hatena.ne.jp/nitoyon/リリースノート電光掲示板って不思議ですよね。どうでもいい情報でも、最後まで読まないと満足できなかったりします。新幹線の各車両の前後に電光掲示板がありますが、あれに流れるニュースとか広告って、なぜかぼーっと眺めちゃうんですよね。流れてくる情
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
