文字を制限した軽量な日本語 Web フォントを作成する方法 - てっく煮ブログ
HTML5最近、Web フォントをつかってかっこいい表現をしているサイトも増えてきました。ただ、残念ながら 日本語で Web フォントを使うのは厳しいのが現実です。というのも、日本語には英数字・ひらがな・カタカナ・漢字・記号・・・など必要になる文字数が多すぎるため、フルスペックの日本語の Web フォントはファイルサイズがすごいことになりそうです。そこで、「利用したい文字だけを含んだ Web フォントをその都度作ればいいんじゃね？」ということを考えてみました。アイデア自体は珍しいものではなく、例えば デコもじ というサービスは同じようなことをやってくれるようです（ただし、無料では「書体 1 つまで」「5 文字まで」など機能制限が大きい）。手始めに日本語 Web フォントを作ってみるまずは簡単に日本語 Web フォントを作る方法を紹介しておきます。無料で公開されているフォントの中にも、フォン
Google Maps をジオラマ風にしてみた - てっく煮ブログ
GoogleMapsAPI, asGoogle Maps をジオラマ写真風にすると印象が変わる、というアイディアが チルトシフトの新しい使い方 その2 に書いてあった。おもしろそうなのでリアルタイムに Google Maps をジオラマ風に表示するものを作ってみた。好きな場所を表示できるので、地球全体がジオラマにしてしまった。簡単な使い方：上部の検索欄に英語で入力して移動左のコントロールは Google Maps と同じShift+ドラッグで視点移動日本各地を巡ってみた東京駅前車がミニチュア風でかわいい。京都御所箱庭になりました。大阪駅前線路と高速道路とビル群。 どうぞご利用くださいあなたの街をジオラマ風に！ソースコードチルトシフトのエフェクトは「彩度をあげる」「周りをぼかす」「周りを暗くする」ことで実現している。ソースコードは以下に（map_1_20.swc、minimalcomps、T
AS3.0 で TextField をマスクに使う簡単な方法 - てっく煮ブログ
as以前、BitmapData を使って文字列でマスク という記事を書いたけど、BitmapData を使わなくても文字列でマスクを作れることに気がついた。キモは cacheAsBitmap プロパティ。こいつを利用すれば内部的に BitmapData を作成してくれるので、TextField をマスクとしても利用できちゃう。完成品はこんなの。文字を編集することもできる。編集後の文字でもマスクされる！やってることTextField を表示マスクされる Sprite を作成Sprite のマスクを TextField に設定するTextField と Sprite の両方の cacheAsBitmap を true にするソースコードは以下に（39行）。 // Easy Dynamic Text Mask package{ import flash.display.*; import fla
フォント同士を交配させて新しいフォントを作る「genoTyp」が面白い - てっく煮ブログ
「この発想はなかった！」と驚いた。genoTyp はフォント同士を交配させて新しいフォントを生み出す実験サイトだ。早速、試しにやってみた。1. 第一世代の親を決めるgenoTyp を開いて左上の [Breed] タブをクリックすると「交配ページ」が表示される。[add original font] ボタンをクリックして、祖先となるフォントを２つ追加してみた。交配させるために２つのフォントをドラッグしてくっつけた。くっついた状態になれば交配の準備は完了だ。2. 交配させてみる中央の [cross] ボタンを押すと第一世代が誕生する。４人の子供が誕生した。父親似だったり、母親似だったり、子供によって雰囲気が異なっている。3. 第一世代でも交配別の [original font] を追加させて、第一世代の中から気に入ったものと交配させてみた。３人の子供が第二世代に誕生した。4. さらに交配！今度
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 の単純なサンプルを作った。クリックすると始まるよ。（表示されない場合はリロードしてくださ
濃いはてなーが大好きな濃いブログBEST50 - てっく煮ブログ
はてなーが大好きなブログBEST100 を見ると、ホットエントリ常連ばかりで新鮮さがなかったので、ブックマーク コメントが多い順を調べてみたくなりました。幸い、手元には はてブ年鑑 を作るときに収集したデータがあるので、ちょっと頑張ればブログごとのコメント数を割り出すことができました。データ量が多かったので、2008年の日ごとホットエントリに１度でも入ったことのあるエントリからの集計です。コメントが多いブログ BEST10コメントつきのブックマーク数順に並べてみました。順位サイト名コメント数ブックマーク数コメント率1位はてな匿名ダイアリー472499440250.1%2位痛いニュース(ノ∀`)399496747059.2%3位GIGAZINE（ギガジン）159756497924.6%4位404 Blog Not Found96862968532.6%5位池田信夫 blog607414409
ActionScript 3.0 用デバッグ支援ライブラリいろいろ - てっく煮ブログ
asXRayAS2 では定評のあったツール。AS3 にも対応している。サイトhttp://code.google.com/p/osflash-xray/対応バージョンActionScript 2.0, ActionScript 3.0 (Flash CS3, Flex 2)機能インスペクタ、コンソール出力 (専用ビューワ)参考"XRay" - ActionScript3 版の Firebug みたいなデバッグツール - てっく煮ブログ Alconインスペクタとコンソールのセット。パフォーマンス情報が見れたり、オブジェクトの詳細な情報をダンプできるようだ。ビューワは AIR 製。サイトhttp://blog.hexagonstar.com/alcon/対応バージョンActionScript 2.0, ActionScript 3.0 (Flash CS3, Flex 2)機能インスペクタ、コ
ワリオランドシェイクみたいに 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
Color Illusion Generator をリリースしました - てっく煮ブログ
Color Illusion Generator というものを作りました。補色を利用した色の錯視を好きな画像から作れます。例えばこんなやつ。中心の点を見つめ続けてください。白黒の映像になったときに、なぜか色がついて見えます。作成した錯視はブログに埋め込むこともできます。どうぞご利用ください。ネタ元：補色残像実験 - Radium Software白黒写真がカラー写真に見えてしまう、残像を利用したイリュージョン:小太郎ぶろぐかつてないレベルで白黒写真に色が付く錯覚画像の作り方 - GIGAZINEFlashのソースコード：http://tech.nitoyon.com/illusion1/Illusion.as
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 =
BitmapData を使って文字列でマスク - てっく煮ブログ
as残念ながら、ActionScript では TextField を使ってマスクすることはできません。画像をグラデーションに塗りたい、とか、写真を文字列くりぬきたい、といった要望には簡単には応えられません。じゃあ、どうするかというと、BitmapData の出番です。技術的には BeInteractive! [BitmapDataを簡単にマスクする方法] と全く同じです。サンプル Flash どーん。中段のグラデーションに対して、上段の文字列をマスクとして利用しています。上段の文字列は編集できることからも分かるとおり、TextField です。ソースコードは長いけど、肝はここ。 bmpDataText.draw(textField); bmpData.draw(grad); bmpData.copyChannel(bmpDataText, new Rectangle(0, 0, WID
addEventListener のハンドラに trace - てっく煮ブログ
asちょっと便利だと思った Tips。そっか。イベントの発生内容見るのって直に trace 渡して問題ないんだ。 addEventListener( Event.COMPLETE, trace ); わざわざ匿名関数作ってた。 Twitter / taka:nium: そっか。イベントの発生内容見るのって直に trace ...確かにこれは楽だ。trace は引数をいくつでも取れるから、こういう技が使えるのか！例えば、 stage.addEventListener("click", trace); とすると [MouseEvent type="click" bubbles=true cancelable=false eventPhase=1 localX=74.4 localY=16.45 stageX=74.4 stageY=16.45 relatedObject=null ctrlKe
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); 次に
Adobe MAX リアルタイムレポート：求む！デザイナによるアプリケーション開発 - てっく煮ブログ
後日PDF配信予定だそう。前説前提 薄型有機EL、曲がる５年後に書店に有機EL広告の可能性コンテンツがBitのまま流通していく アナログ（紙）という定着を挟むことなく流通していくその結果、 コンテンツの更新パーソナライズインタラクティブ、リアルタイム性、モーション「コンテンツのアプリケーション」化コンピュータの上で流通する → 再生環境の仕組みを理解する RGBやCMYK、輪転を知らないデザイナは一流ではない。同様のことがアプリケーション開発についても言える。Webの普及多様化するデザイン PCや携帯を通し、４大メディアのコンテンツがIPに乗る一般人がコンテンツをやり取りしてコミュニケーションするようになるCross-Media Publishing (雑誌、Web、RIA で公開)Adobeの強み デザイナはAI,PSのノウハウを持っているAI、PSを中心として、Output先ごとに違う
Adobe MAX レポート：インタラクションデザインの実際：アイデアの開発 - てっく煮ブログ
超有名な中村勇吾氏によるセッション。開場前に長蛇の列ができていて、人気なんだなぁ、と思った。導入言葉「言葉、文法」＋「組み合わせ、配置」→「文章」「あなた」「は」「美しい」は言葉以上の意味が出るデザインでもそうだよ VOCABULARY（語彙・手法） ＋ COMPOSITION（構成・バランス）組み合わさって、「新たな単位」言語や素材を組み合わせていかにいい作品、広告にするかReactive Field反応して快感（クリックして楽しい）→前後で認識が変わる感覚→空間な感じTenKey Studyキーボードのタイミングテストを生かして作ったMONALISAモナリザを載せてみた顔が変形するのがおもしろいVAIONET100触ってると物理法則（ルール）がわかるBlackRibbon (注：自分の環境では激重だった) 2次元に見えて3次元Intentionallies剛体シミュレーションデスクトッ
Adobe MAX レポート：Sneak Peek - てっく煮ブログ
１日目の最後のイベント。Sneak Peek に出てくるネタは開発中・実験中のものであり、Adobe の製品に実装される予定があるわけではない。α版より前のモックアップ版、ぐらいに捕らえておくのがよさそう。Flash Lite3 で動画再生Share (オンラインファイル共有)Fireworks NEXT で Flex? CS3 でスキンいじれるRIA MoutainerPhotoshop Express Web版のPhotoshop色調補正、赤目補正History が残っている、Undo,Redo フィルタ：スケッチ、背景色変更・・・などなどVisual Communicator タイムラインに文字と画像をあてはめてビデオや写真を混ぜ込んでニュース風配信用のビデオ素材を簡単に作れるWindows Movie Maker の Adobe 版と考えると分かりやすいWebからDTP InDes
Adobe MAX リアルタイムメモ：ここまでできる Flex コンシューマ向けアプリ - てっく煮ブログ
目次FlexとはMAX Reservation SystemFlexの未来質疑応答オマケ 〜AIR で作るMessenger〜MAX Reservation System についてメンバFlex 側5名。アーキテクトUI DesignPGOperatorTestorサーバー側システムは別の会社。ワークフローデザイン側 UserExperience (Illustratorなどで使い勝手を検討)Visual Design (Photoshopなどでデザインを固める)Flash (.fla で MC や SWC を準備)MXML (FlexBuilderでレイアウトや遷移)ActionScript (ビジュアルエレメントをASで分離)ロジック側 MXMLAS (サーバー通信や制御)結合スケジュールデザイン側 UI: １週間デザイン: １週間MXML: 2日スキニング: 8日ロジック側 アーキテ
Adobe MAX リアルタイムレポート：Flex採用時のプロジェクトのワークフローとベストプラクティス - てっく煮ブログ
id:sato-shi さん。クラスメソッド：二十数件の Flex プロジェクト実績、AIRも数件。目次事例から見る成功談/失敗談プロジェクト開発標準設計手法とベストプラクティスAIRが業務アプリケーションに与える可能性業務向けRIA開発プロジェクト経済的な効果がある 開発できること 疎結合標準コンポーネントメリットプロジェクトの経験則凝ったUIは後で困る （コンセプトが変わったときに作り直しになる）別の担当者が作業できるようにFlexの事前説明Flexで何ができるの？VB・Delphi より優れているもの事例を紹介する モックでは理解してもらえない失敗事例超高度なUIを提案してしまう 標準コンポーネントをいかに使うかが鍵UIは天からの鶴の一声がかかりやすい 鶴を押さえておくスコープが定まらない追加され続けている使用が落ち着かない（事前説明） 「普通あるでしょ」Undo, Redo などサ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
北海道を落とすとどう跳ねるのか？ - てっく煮ブログ