意外と多い!? Web フォントに対応していない環境 ～2012 年の Web フォント事情
Web フォントは「Web サイトにフォントを埋め込む」ための技術です。 先日、Web フォントを使った 絶対にコピペできない文章を作ったったwwww を公開しました。多くの人に楽しんでもらえたのですが、その一方で、Web フォントが適用されなかった方から「コピペできるんだけどどういうこと？」「意味が分からない」というコメントがよせられました。 ほぼすべてのブラウザーが Web フォントに対応しているはずなのですが、一体、何が原因だったのでしょうか。 そこで、Web サーバーのアクセスログを解析して「Web フォントに対応していない環境」がどの程度あったのかを調べてみました。 ４種類のフォーマット 一口に Web フォントといっても、フォントのフォーマットは WOFF・TTF・EOT・SVG の 4 種類あります。今後は WOFF フォーマットが標準になっていくのですが、現在ではサポートし
「コピペできない文章」がコピペできなかった理由 - てっく煮ブログ
html5先日公開した 絶対にコピペできない文章を作ったったwwww はおかげさまで好評だったようで嬉しい限りです。「不思議！」「どういう仕組みなんだ？」という声も多かったので裏側を紹介します。コピペできない訳ではないタイトルは「コピペできない」としていいますが、実際にはコピペはできます。正確に表現すると「コピーすると違う文字になる」という状態になっています。 ではなぜ違う文字になるのでしょうか。結論をいってしまうと「そこにある文字が、人間の目に見える文字とは違う」からです。といっても、これでは分からないですね。今回のために作成された独自フォントトリックの肝は「フォント」です。フォントといえば、文字の見た目を変えるために利用するものです。たとえば、「ほ」という文字を「メイリオ」フォントで表示するとこうなります。フォントを変えて「HG創英角ポップ体」フォントで表示すると、ポップな雰囲気になり
経路探索アルゴリズムの「ダイクストラ法」と「A*」をビジュアライズしてみた - てっく煮ブログ
as詳解 ActionScript 3.0アニメーション ―衝突判定・AI・3DからピクセルシェーダまでFlash上級テクニック を読んでいて、経路探索のアルゴリズムで A* が取り上げられていました。A* については、いろいろ検索して調べたりもしたのですが、やっぱり本に書いてあると理解しやすいですね。せっかくなので自分流に実装してビジュアライズしてみました。ダイクストラ法まずは A* の特別なケースでもあるダイクストラ法から見ていきます。クリックすると探索のシミュレーションが開始します。スタート地点(S)からゴール(G)への探索が始まります。色がついたところが「最短経路が決定した場所」です。スタート地点から少しずつ探索が完了していきます。半分ぐらい完了しました。まだまだ進みます。最後まで終わりました。最短経路を黒色矢印で表示しています。ダイクストラ法は、スタート地点から近いノード(=マス
北海道を落とすとどう跳ねるのか？の裏側 - てっく煮ブログ
asおかげさまで大好評の 北海道を落とすとどう跳ねるのか？ ですが、どのように作ったか、製作過程を紹介することにします。1. 地図の素材を取ってくるまずは地図の素材が必要です。以下のサイトから拝借しました。白地図、世界地図、日本地図が無料pdf や eps 形式の地図データを無料で配布してくれているありがたいサイトです。2. 都道府県ごとに分割する上記の素材は県境もベクター形式で提供されていて大変ありがたかったのですが、島がどの都道府県に属しているかの情報がありませんでした。そこで、Google Maps と見比べながら、島を都道府県ごとに分類していきました。無事、全ての島を分類し終わって、こんな感じになりました。とても地味な作業でした…。3. 都道府県ごとに SVG で出力する次に、Illustrator 内で分類したデータをプログラムで扱える形式にしなければなりません。ここでは XML
各国の伝統色をHSV空間に配置してみた - てっく煮ブログ
前回の 日本の伝統色をHSV空間に配置してみた が意外に面白かったので、今度は世界各国のデータで試してみた。日本自然界にある色を中心に、埋め尽くすかのように沢山の色があるのが分かります。色名の由来がまた、素敵なんだよなー。中国日本に近い。というよりかは、日本がもろに中国の影響を受けたんだろうな。イギリス日本・中国とは全く違う分布になっていますね。教科書的に均等にばらついていて円に近い。果物とか花とか宝石の名前が多いのかな。フランスイギリスと同じくばらついているんだけど、右上の紫と、右下の黄色が充実しているのが印象的。紫色が充実しているのは、ワインを表現するため！？ 黄色が充実してるのは、チーズを表現するため！？アメリカ彩度が高い色（円の外側）が充実しまくっている。超原色だぜ、USA！アフリカ特徴的な原色。水色、緑は、他の国には登場すらしていないぐらいに強烈。8bit ゲーム機のような色だ。
郵便番号マップを作ってみた - てっく煮ブログ
ビジュアライジング・データ ―Processingによる情報視覚化手法 を読んでたら「アメリカの郵便番号を地図上に図示する」という例が出てきたので、これの日本版を作ってみました。 郵便番号マップ内陸地がぽっかりあいてるのが不思議だったり、色でどのへんの地域が近い番号なのかが分かったり、いろいろ興味深いです。絞り込み機能先頭の数字で絞り込む機能もつけてみました。これが東京（1XX）。これが中国四国地方（7XX）。うっすら四国の海岸線が見えます。今週は、これを作っていく過程を紹介していきたいと思います。乞うご期待。ビジュアライジング・データ ―Processingによる情報視覚化手法作者: Ben Fry, 増井俊之(監訳), 加藤慶彦出版社/メーカー: オライリージャパン発売日: 2008/12/01メディア: 大型本 連載目次（予定）郵便番号データをデータベースに入れるgeocoding
「50個のポリゴンでモナリザ」を AS3 で - てっく煮ブログ
as3ニテンイチリュウ : Image Evolution 経由で知った Image Evolution を試してみた。50個の半透明なポリゴンを塗り重ねてモナリザに近づけてみよう、という試みだ。仕組みは単純。ランダムに配置したポリゴンをランダムに変形させたり色を変えたりしてみて、モナリザの画像の色に近づけば採用、そうでなければ止める。これだけ。微分してとか、輪郭抽出してとか、そういう賢いことは何もやらない。単に貪欲にシミューレーションし続けている。手元の環境で動かしたらこんな感じになった。壮大なる CPU の無駄使い。だが面白い。いちおう Flash も貼っておく。が、猛烈にブラクラなので扱いは慎重に。高速化のために、BitmapData.compare() といったビルトインのメソッドを使っているので、Firefox 3 で canvas 版 よりも10倍ぐらい速く動いた。オリジナルの
Flex 3 リファレンスガイドの ZIP 版が公開 - てっく煮ブログ
as3via [Flex][AIR] Adobe Flex 3 リファレンスガイドがダウンロード出来るようになりました。 - いそっちノートZIP には HTML と PDF が全て入ってるので、AS3 や Flex 3 の開発する人は手元に置いておくとよいですね。ドキュメント一覧：http://www.adobe.com/support/documentation/jp/flex/ZIPへの直リンク：http://livedocs.adobe.com/flex/3_jp/flex3jp_documentation.zipHTML ヘルプ(chm) を作る方法は、ちょっと古いけど次のページが役に立つよ。flex3_htmlhelp.rb の目次を充実させた - てっく煮ブログflashhelp2chm-ja - Google Code
はてなブックマークの細かすぎて伝わりにくい新機能を勝手に紹介 - てっく煮ブログ
はてなブックマークがリニューアルして毎日楽しく使っているわけですが、そんな中で気付きにくいけど知ってると便利な機能を勝手にまとめてみました。人気エントリの要約を非表示にみんな大好き人気エントリーに、リニューアル後から要約が表示されるようになりました。クリックする前に概要が分かって便利なのですが、古いインターフェースのほうがよかった…という人もいることでしょう。でも大丈夫。そんな人は「人気エントリー」の右端にある▲のボタンを押してみましょう！要約が消えます。すっきり読みたい人にお勧め。あ、もう一回クリックすると要約は復活します。タグとお気に入りを旧バージョンで右側のボタンつながりで、タグとお気に入りを戻す方法を紹介します。タグが一覧になってしまって悲しい人は、右側のボタンを押しましょう。おー、一昔前のタグクラウドと切り替えられるわけですね。お気に入りも見た目が変わりましたが、これも右側のボタ
AS3で１ファイルに複数のクラスを定義する方法 - てっく煮ブログ
asActionScript 3.0 で１つの as ファイルにつき、複数クラスを定義する方法について調べてみました。パッケージ宣言内にはクラス・関数・変数・名前空間のうち、１つしか含められません。そして、その名前はファイル名と同じでなければなりません。 具体的な例を元に説明してみましょう。 // test/SampleClass.as package test { public class SampleClass { // SampleClass の定義 } } class foo { // foo の定義 } function bar():void { // bar の定義 } この例では、package test{...} の中に１つのクラスがあり、クラス名 SampleClass がファイル名の SampleClass.as と同じです。package test{...} の中に他
ワリオランドシェイクみたいに 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 で埋め込みフォントを使うテクニック - てっく煮ブログ
as埋め込みフォントを使う場合のちょっとしたTipsを３つ紹介しておく。1. 何も考えずにフォントを埋め込む方法フォントを埋め込むには、Embed メタタグを利用する。 package { import flash.display.Sprite; import flash.text.TextField; public class EmbedFontTest extends Sprite { [Embed(source='アニトＭ-教漢.TTF', fontName='anito')] private var font:Class; public function EmbedFontTest(){ stage.align = "TL"; stage.scaleMode = "noScale"; var textField:TextField = new TextField(); textFi
AS3.0 で 3D プログラミングを１から勉強する (2) - 行列の導入 - てっく煮ブログ
asこのまま実装を進めていくとソースが複雑になりそうなので少し地盤を固めておこう。座標計算を簡潔にするために行列クラスを導入する。Matrix3D クラス前回は軸の周りの回転を公式 p.x = Math.cos(rad) * x + Math.sin(rad) * y; p.y = -Math.sin(rad) * x + Math.cos(rad) * y; を使って直接計算していたけど、ここを行列に置き換えてみる。ちょうど、3D ライブラリ FIVe3D 2.1 に Matrix3D クラスがあったのでこれを借用した。X軸周りに rad ラジアン回転する演算は次のように書けるようになる。 // 回転前の点 p1 を定義 var p1:Point3D = new Point3D(0, 10, 20); // rad ラジアン回転する行列を作成 var matrix:Matrix3D =
Perl 2008年のファイルオープン - てっく煮ブログ
perl第1回 Perlの文法の基本：ITpro という記事の はてブコメントを見ていたら、Perl なすごい人達が文句言ってた。 otsune 2006年のhyuki Catalyst記事を載せるのもアレなのに2003年の記事を載せるのは無しだろ……open IN, ...のあたりは有害情報なので全力で見逃せ TAKESAKO ちょｗ→出典：日経Linux 2003年7月号 125ページより miyagawa 2008年にこの記事はねーよ、と思ったら2003年の記事をいまさら再掲か。なんでわざわざ古い記事を新しいものかのように出して混乱させる？問題があるというソースコードはこんなの。 open IN, '; えー！ どこが問題あるのかさっぱり分からん！！！！！！調べてみた2008年流の Perl な書き方を調べるなら perl-users.jp。早速見つけた。oldtype と mode
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:/
UNIQLO_GRID みたいに「うねうね」揺れる線 - てっく煮ブログ
as既に各所で話題になっている UNIQLO_GRID ですが、ドラッグしたときに線が「うねうね」と揺れる様がステキだったので、マネしてみました。ドラッグして遊んでみてください（表示されない場合はリロードを）。手書き風効果に使えそうですね。揺れ具合など改善の余地はたくさんありそうです。それはそうと、どうやってアルゴリズムを想像したかを記録しておきます。右クリックから拡大して、UNIQLO_GRID の線がベクターであることを確認少ししか動かしていないときは直線として描画されていることを発見曲線になる条件は、移動距離や移動時間ではなく、mouseMove イベントの発生回数ではないかと仮定（実際は違うかも）曲線になった瞬間、途中に通った場所がベジェ曲線の中間点として採用されることを発見試験実装→そこそこそれっぽく動くマウスを早く動かすと、汚いことを発見→マウスの移動距離が既定値を超えると、そ
てっく煮ブログ - ActionScript3.0でテトリスを作ってみる
WCAN mini ActionScript Vol.3 の勉強会資料を公開します。プレゼン資料ソースコード (23.8KB)ActionScript でのゲーム製作は注目されているようなので、実例としていいかもしれません。中でも、右に写真を載せている Tetris＋PaperVision3D のゲーム例が気に入ってます。（ただ、現状ではライン消したあとの処理にバグがありますが）ActionScript 3.0＋PaperVision3D とか ActionScript 3.0＋APE(Actionscript Physics Engine) を組み合わせてみれば、今までは手を出しづらかった方面のゲームでも簡単に作れるようになりそうです。
てっく煮ブログ - CSS をリニューアルするときに参考にしたいページ
css今回の CSS リニューアルでネタ出しに使ったサイトをまとめておきます。83個のきれいな Wordpress のテーマ集：83 Beautiful Wordpress Themes You (Probably) Haven’t Seen絶対見ておくべき30個の暗めのサイト：30 Dark Designs You Should've SeenCSS による最近のフッターデザイン：CSS-Based Footers: Modern SolutionsCSS による 2006 年の美しいサイト50選：50 Beautiful CSS-Based Web-Designs in 200653個の必須 CSS テクニック53選：CSS-Techniques You Couldn’t Live Withoutかっこいいデザインのサイトがサムネールつきでいっぱいなので、煮詰まったときに見るといろいろ
Google Mapsでレーシング公開！ [tech.nitoyon.com]
Google Maps API を利用した便利なサービスが数々発表されているけど、別に遊びのために活用してもいいよね。 そんな思いから、Google Mapsをレーシングゲームに応用してみました。 Google Mapsで鈴鹿サーキット試走 簡単操作のテスト版ですが、それなりに楽しめると思います。時間測定や当たり判定がないのはご愛嬌ということで許してください。 応用例 操作方法などはリンク先に書いたので、ここではさらに応用例を考えてみます。 実測地図を利用したRPG ドラクエ３をリアルな世界地図で・・・とか。 リアル桃鉄 データさえ入力すれば実現できるはず。オンラインゲーム化したら楽しそう。 フライトシミュレータ サテライト写真を使えば、実際に飛んでいる気分になる！ 高度が上がるにしたがって、ズームレベルを変更するとリアリティーが出るかも・・・。 シューティングゲーム インベーダから地球を
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
『googlemapでドラクエ』でドラクエ 公開 - てっく煮ブログ