THE GIANT MAP インスタレーションのメイキング | fladdict
フランスで展示してきたTHE GIANT MAP。いろいろ四苦八苦したので、制作忘備録。将来の自分と、今後こういうのやってみたい人用。 きっかけ 実はもともとはGoogle主催のアートコンペ、Google Dev Artエントリー用の作品だった。 このDevArtは、グーグルがスポンサーとなって行われるデジタルアート展覧会へに出品するための公開コンペ。たった1人の座を争っての世界中からのバトルロイヤル。条件は２つ。Googleのテクノロジーを使った、デジタルアート作品を作ること。そして、途中プロセスを全て公開すること（プロセスも審査に含む）。 ちょうど新しいことをやりたいなぁと思っていた僕は、無謀にもこのコンペにエントリーを試みる。 コンセプト設計 まずは何を作るべきか！？というところで、コンセプト設計から。ロンドン留学時代に学んだことは２つ。コンセプトのない作品は評価されないこと。ワール
HTMLをレイヤー別けしたPSDに変換するキャプチャーソフト Page Layers が神 | fladdict
Page Layersは、すごいウェブのキャプチャアプリ。なんとキャプチャするサイトを、DIVやIMG要素ごとにレイヤー分割したPSDにしてくれるのだ！ これは素敵と言わざるをえない。 ビデオをみれば使い方は一目瞭然。URLを入力して保存ボタンを押すだけで、なんでも構造化したPSDにしてくれる。 Mac専用アプリで、AppStoreで$28.99。これは買いだと思います。 Web関係者は必須的な。
JavaScriptでゴリゴリ実験サイトを作ったよ | fladdict
fladdict.netのトップをリニューアル。JavaScriptの実験場にしてみた。久しぶりにゴリゴリJS書くと、かなり楽しい。 古き良きゼロ年代のFlash実験サイトはほぼ絶滅してしまったわけだけど、それを現代のJSとHTMLでやり直してみたらどうなるか？そんな感じのスタディ。使用ライブラリはpaper.jsとprocessing.js。時間があるときにcreate.jsも導入してみたいけど、ざっと見た感じcreate.jsは冗長すぎてスケッチには向かないと思う。スマホだと重すぎてだと動かないので、時間あるときに分岐するようにしたい。 最近はインターネットも成熟化したのか、グラフィック、インタラクション、プログラミングを三位一体でする人が減ってる気がする。分業化が進んでいるのだろう。インタラクション系がわかるエンジニアは需要があるわりに、新しい人が学ぶ機会が昔にくらべれば激減している
振るだけTV連動キャンペーンアプリ、「フリフリTV」をリリースしました | fladdict
日本テレビさまのアプリ、「フリフリTV」の製作させていただきました with alumican.net。 色々な番組の放映中に、アプリを起動してフリフリ！っとシェイクをすると、プレゼントがもらえたり、ポイントが溜まったり、投票ができたり色々とステキなことが起きるアプリです。ヌルヌル動くよ！ フリフリするだけで、視聴者参加キャンペーンができる完全な単機能突破アプリ。 PON!や、12/31日のダウンタウンのスペシャル番組などと連動する予定です。大晦日はぜひフリフリしてください！ もともとは、ニュースとか、番組表とかガッツリ機能が入った企画だった気がしますが、僕と奥田さんで「フリフリ以外、全機能をなくしましょう！！！」とか「機能が増えるほどプロジェクトは危険になります！」とか、「足なんて飾りです！（略）」とか、言いたい放題にワガママを通しまして、アレもコレも全て削って、もの凄くシンプルなアプリ
スマホUI考（番外編） 顧客やユーザーの要望に全て対応すると、アプリは99%破綻する | fladdict
顧客や上司、ユーザーの場当たりな要望に対応しつづけると、どんなアプリもゴミアプリになる。たとえそれが理にかなった要望であっても。 なぜなら面積の限られたスマホでは「一画面の機能数とボタン数」が、使い易さと品質に深くリンクしているからです。 ということを、エラい人にプレゼンするのがお仕事の今日この頃。でも毎回毎回、同じことを説明するのがシンドイので資料をブログにまとめたいなぁと思うなど。 思考実験として、ここでは架空事例としてTwitterアプリを例に考えてみる。 何かの間違いで、日本の大手メーカーがTwitterを買収すると・・・UIデザイナーが体を張らないと99%ぐらいの確率でこうなるのです。 ここがオリジナル Request1: ダイレクトメッセージをトップ階層に ユーザーからの真っ当な要望。実際にはサービスの本質ではないのですが、要望はかなり多いはず。 ただTwitter社的にはme
ビジュアルコーディングと波形 | fladdict
今日のスケッチ。 色々モニョっとしたモノを作るにあたって、とりあえず波形ライブラリを作るなど。色んな波形を合成して使える奴。 いわゆる乱数というと、一般的にMath.random()に頼り切りなことが多い。あるいはメルセンヌツイスターのような精度系の追求で満足してしまう。 でも、自然界のシミュレート等をする場合、ガウス（正規分布）だったり、波形のようなサイクルを擬似乱数に使う方が重要だと思う 単純な乱数をいくつも足し合わせて行くと、正規分布の乱数が生まれる。 var val = Math.random(); と var val = (Math.random()+Math.random()+Math.random()+Math.random())/4; 一見たいした違いはないようにみえても、この２つの式で生み出される数字は、驚くほど異なる。極小レベルでは単純な乱数で動く要素も、複数が相互作用
JSで蝶を飛ばしてみるなど | fladdict
今日のスケッチ蝶蝶がいっぱい。 processing.js だいたい理解した。 蝶の群れだけど、boidというよりは、perlin noiseによるフォースフィールドの復習。 定番ですがperlin noiseで作った雲状bitpmapのR値とG値を、XY方向の気流の力として適用する・・・ってアレです。 リハビリリハビリ。 ここ数年こういうコード書いてなかったので、すごい腕が落ち込んでる。 スムーズな方向転換系アルゴリズムを作れないうちに時間切れ。 昔は2〜3時間あれば作れたのに・・・ジジイになったってことか。 ところで、processing.jsの現行バージョン、tint()関数が壊れてませんかね？ フォグでZ-Depth的表現しようとしたら、どうにも動かない。 1日1〜2時間、プライベートの時間にちょこちょこ作って一気にリハビリしたい。 Daniel Shiffman師父の、インタラク
JSでアメーバのシミュレーション作ってみた | fladdict
jsでアメーバのシミュレーションを作ってみるなど。ブラウザで5分ほど放置しておくと自然淘汰でなんか生まれます。要HTML5環境(iPhoneだと重すぎる)。 スケッチの製作環境を、Flashからprocesing.jsに移動しようかなぁというテスト。「x‐DESIGN――未来をプロトタイピングするために」の一章を読んだら、なんか無性になにかを作りたくなったので、作ってみた。 processing.jsライブラリの勉強に、アメーバのシミュレーションを作成。 今までJavaScriptでのスケッチには、creative.jsを使ってたんですが、簡単なスタディにはprocessingのほうがいいかもしれない。 Daniel ShiffmanのFlockingとかを脳内イメージしながら、適当に書いてみた・・・はずが完成したら別物に アメーバは、細胞が単体のうちはブラウン運動する程度しかできない。と
Photoshopとかのフォント選択UIを改善してほしい・・・ | fladdict
Photoshop… というか、Adobe系アプリのフォント選択が死ぬほど使いにくい件。 フォント選択で、こうズワーッと全てのフォントが列挙されても探しようがない・・・ Macディフォルトの挙動だからしょうがないっちゃしょうがない。 でもAppleルールを無視して独自UIを作ってるのだったら、こういうところこそ改造して欲しいなぁと。 せめて下図のように、親階層に「ユーザー定義の分類フォルダ」を作ったり、「このPSDファイルないで使われている書体」みたいなスマート分類があるといいなぁと思うのです。 これだけで、欲をいえばこのフォント分類がAdobe製品共通で使えると、すんごい便利だと思うのだけど、そうなってくれないかなぁ。 もちろんAppleが直してくれてもいいんですけど。
一眼レフで超高速撮影をする方法など（多分弾丸も撮れる） | fladdict
連休中の遊びにハイスピード撮影に挑戦＠お風呂。 ヤバイ、すげぇ面白い。 昔からハイスピード撮影やってみたかったのですが、ハイスピードカメラは一千万円クラス。正直諦めてました。水滴ですらシャッタースピードが1/4000〜1/8000秒、弾丸や風船だと数万分の1秒必要なんですよね。 普通の一眼で、f.13のシャッタースピード1/8000以下とか無理ゲーです。 そしてそもそもの話、一眼のシャッターは1/1000秒単位のタイミングで誤差なしで被写体を狙えるほど精度が高くない。 ところが調べてみると、一眼レフで擬似的に限界以上のシャッタースピードを出す方法確立されてたり。世の中には頭のいい人がいるものです。 それはシャッターでなくフラッシュで、ハイスピード撮影するということ。 もうシャッターは開きっぱなしにして、フラッシュを超速で点灯させて写真撮る。 暗闇で長時間露光をしてフラッシュを1/20000
雪の日は動物園に行こう！ | fladdict
久しぶりの大雪に東京が大混乱ですが、カメラ好きにとって雪と台風はご褒美です。 というわけで、行って来ました上野動物園。 冬山装備にゴアテックスの手袋、ヒートテック上下のフル装備。そのうえ一眼に大型レンズと三脚という、登山スタイルで突撃。 ほぼ無人の動物園を、一路目指すはシロクマさん。 雪の日はシロクマさんはハイテンション。もうコカイン極めてるのかよ！ってぐらい荒ぶる。 「さすがLレンズ、ビクともしないぜ！」とのたまいつつ、カメラを雨合羽に包み込み、右手は素手で写真を撮るというハードモード。 アフリカにてショートで5DMk2を破壊したビターな思い出も、喉元すぎればなんとやらです。 みるみる感覚が無くなっていくし、雪からカメラを守りながらの撮影なのでブレるわ見切れるわの大苦戦。 「寒ければ寒いほど、よい写真が撮れる（気がする）」という誰かの格言を信じて踏ん張る。 ただひたすら寒さに凍えるお猿さ
スマホのWeb開発に、Adobe Shadowが神ツールな件 | fladdict
スゴイ。ヤバい。 Adobe Shadowは、Adobeのラボがリリースした、スマホコンテンツの開発支援ツール。 何ができるかというと、PCのブラウザで表示したURLのコンテンツを、iPhoneやiPadで同時に表示してくれる。 PCでサイトをリロードするだけで、iPhoneやiPadでも自動でブラウザがリロードされて、表示を検証できる！！ iPhoneやiPadはURLの入力が面倒だし、PCで作業する度にデバイスを移動するのが大変だった。 Adobe Shadowを使うと、PCでリロードするだけで、全環境で表示の確認がすぐできる。これは作業がはかどる。 使い方 Mac / PC に Adobe Shadowをインストール ブラウザ（Chrome)にAdobe Shadowの拡張をインストール iPhone, iPad, android, kindleに Adobe Shadowアプリをイ
iPadでお絵描きアプリを作ろうと思う その２ | fladdict
Twitterで皆さんからヒアリングを行い、お勧めのアプリを色々と教えてもらった。とりあえずひたすらにダウンロード、ダウンロード、そしてダウンロード。使い倒す。 敵を知り己を知れば百戦危うからずであり、車輪の最発明は避ける方向で、先人の知恵に学ぶのです。 以下、各アプリの雑感メモ。みんな言いアプリなんだけど、どれも自分が欲しいのとは方向がちょっと違う感じ。 Adobe Ideas Adobeのアイデアスケッチツール。やりたいことは非常に近い。よく出来てるのだけど、いつものAdobe製品らしくプラットフォームのインターフェース・ガイドラインをガン無視しまくってる。ベクターデータをレンダリングする形式。そして実装がFlashじゃないか疑惑。 Penulitimate 仮想敵国。軽くてシンプルでよくできてる。軽快な動きと、没入感、美しさがバランスとれてる感じがステキ。ただ自分が欲しいアプリは、も
「iPhoneアプリ設計の極意」の監訳させていただきました | fladdict
「iPhoneアプリ設計の極意 ―思わずタップしたくなるアプリのデザイン 」という本に、監訳で参加させていただきました。TapWorthyという洋書の翻訳本ですが、いよいよAmazonで予約可能に。 翻訳は武舎広幸氏、武舎るみ氏のお二人。 6/18日にオライリーから発売されます。 この本はiPhoneアプリのデザイン、特にユーザーインターフェースに特化し、いかに使いやすく魅力的な「思わずタップしたくなるアプリ」を作るか？という点に主眼を置いたモバイルアプリインターフェースの入門本です。とりあえず７章のPDFがサンプルとしてDLできるのでご一読いただければと。 海外の色々と成功しているアプリを分析して、ここはこういう工夫がしてある、ここはこう注意している！みたいな事例をだしつつ、iPhoneアプリのインターフェースの文法を事細かに分析・紹介しています。 技術用語の一切ない技術本、ビジュアルセ
JavaScriptで作ったお絵描き掲示板のソースを公開するよ | fladdict
去年、ノリで数日で作り上げたJavaScript製のお絵描きアプリ、JSPaintのソースコードを公開してみた。 なんとなく勢いで。 Download 1週間で実装したわりには、指先ツールとかカラーピッカー、Undoまで完備されていて結構頑張ってるんじゃないかと。ただしIEでは（メンドイので）動きません。Twitter投稿のみphpを使っていてZendのフレームワークが必要です。この辺は @sumihiro さんのご助力に感謝です。 ソースの書きかたが、ちょっとクラシックでprototypeで疑似クラスを作っていますが、まぁ気にしない。本職JavaScripterでもないので割と突っ込みどころが満載です。 こまかい事はTwitterのfladdictで捕まえて聞いてください。
iPhoneをアルミホイルで包むお仕事 | fladdict
面白い小ネタだけど、結構しらない人がいるみたいなのでメモ。 自分のiPhoneアプリを作るときに、iPhoneをアルミホイルで包む作業工程を行う。 iPhoneをアルミホイルに包むのと、包まないのでは、できあがるアプリの品質に圧倒的なクオリティの差が出るのだ。 何をデンパなお話をww と思った人はまさに正解で、本当にデンパなお話。 iPhoneをアルミホイルで包むと、電波が乱反射する為に、ネットワークの切断や障害のテストを簡単に行えるのだ。 Appleの審査規約の１つに、「通信を行うアプリがネットワークに接続できない場合、状態の通知あるいは、代替コンテンツを表示しなければならない」というものがある。 これを完璧にパスする為には、アルミホイルが大変重宝する。 地下鉄等を使うのは時間も手間もかかるし、機内モードも突然の切断は調査できない。そして電子レンジは突っ込んでしまうとなにも操作ができない
HTMLで文字詰めするタイポグラフィー用JS | fladdict
HTMLのテキストに対して、文字詰めを行えるスクリプト FLAutoKerningクラスを作ってみた。サンプルはこちら。zipも。 スクリプト内に任意のカーニングペアを定義することによって、ブログのタイトル等のテキストに字詰めを行ってくれるスクリプトです。なんか探しても見つからなかったので自分でやってみた。いちおう朗文堂の新宿私塾に行ったわけだし、僕もなんか成果物作らんとなぁ。。。的に。 実行はとても簡単。jQueryと一緒にhtmlにロードして、 FLAutoKerning.process($(‘h1′)); FLAutoKerning.process($(‘h2′)); FLAutoKerning.process($(‘h3′)); といった具合に、適用したhtml要素を一括していしてやるだけ。カーニング情報の定義も、FLAutoKerningクラスの頭に、下のようにem単位で定義する
GSkinnerの作ったJavaScriptライブラリが素敵すぎる件 | fladdict
Flash界のコーディングゴッドGSkinnerがJavaScriptのCanvasをFlashライクに使うライブラリを作った。 この人、確か僕と同い年ぐらいかちょい下なんだよね。。。会う度に超へこむ。 画期的というか、確実にかゆいところに手が届くライブラリで、下みたいなのがサクサクJSでいける。あいかわらずソースは美しいし、ドキュメントも完備。 game sparkles rollover localToGlobal globalToLocal sprite sheets ざっと見た感じFlashでいうところの、Stage, MovieClip, Sprite, Bitmap, Matrix, Stage, EnterFrameとキーフレームアニメがサポートされてる感じ。これは素敵。 このライブラリそのものもスゴいんだけどポイントは、GSkinnerがJSやりだしたってことは、365日以
Software Japan Awardを頂きました | fladdict
情報処理学会さまから、2010年のSoftware Japan Awardを頂いてしまいました。 感謝の気持ち以上に、僕が頂いてよいのか恐縮でたまりません。 同じく受賞されたパンカクの柳澤さんと一緒に、東大の安田講堂でパネルディスカッションをさせていただきました。 受賞理由は、個人開発者として世界展開で頑張った & 情報を積極的に発信して後続の方を先導した(恐れ多い)為とのことのようです。 QuadCameraのGoodDesign賞やBestAppEverArad受賞の件と、@iphone_dev_jp を作ったり、売り上げやらプレスリリース先やら、色々なものをTwitterを通じて流していたことが、理由とのことですが、このようなものを頂いてしまったからには、もっと頑張らないとなぁと思います。 そもそもfladdictが急激な情報公開派になったのは5年前のこと。ロンドンに留学しており、日
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Flash Platform Camp で喋るよ | fladdict
