はてなブックマーク

Flash Proの歴史で重大な局面になると私は思っているアップデートを、Flashチームが今日リリースする。この記事では、その変更点、それがなぜ良いと思うのか、又、Flashがどこへ向かうのかについて個人的見解を述べようと思う。 ※ この投稿はFlashという制作ツールについてです。Flashランタイム（Flash PlayerとAIR）は別のトピックですが、今日のアップデートはランタイムに特に影響はありません。 背景：FLAの種類 Flashの愛用者なら、1〜2年前からFLAの種類が複数になったことに気づいているのではと思う。一つのプロジェクトをSWF・AIR・HTMLそれぞれとして書き出すより、Flash ProがAS3プロジェクトやHTMLプロジェクトを区別するようになった。なぜそうなったかと言うと、制作機能を目的のフォーマットに合わせるためである。つまり、CreateJSに書き出

本記事はCEPスーパーメガガイドの最終投稿です。 エクステンションの参考用ソースはこちら。 今までの記事でアドビツールに対応するHTML＋Node.jsエクステンション開発をまとめました。最終記事では、エクステンションを他の人に渡すためのパッケージ、配布、販売などの話です。 概要 エクステンションを他の人がインストール出来る状態にするにはパッケージが必要。コマンドライン、またはAdobe Extension Builder 3で出来る。 パッケージに証明書が必要となるが、通常の場合には自分で作るもので十分。 お勧めする配布方法は、アドビのAdd-onsレポジトリ。しかしパッケージされたファイルを好きなように配布する手もある。 パッケージについてアドビツール用のエクステンションは全て「.zxp」というフォーマットとなる。技術的にいうとZXPは証明書で署名されたzipファイルである。 コマンド

本記事はCEPスーパーメガガイドのPart 2です。 エクステンションの参考用ソースはこちら。 開発環境についてCEP 5用エキステンションのソースファイルはHTML・JS・テキストしかないので、テキストエディタやHTML制作ツールさえあれば問題なく開発開始ができる。下記の外部アプリも役に立つかも知れない： Node.jsを使うならインストールしよう。厳密に言うとなくても開発できるが、npmモジュールの取得などを出来たほうが便利。 ベータ状態だが、Extension Builder 3というIDEがAdobe Labsから提供されて、最新版はCEP 5に対応する。マニフェスト編集とか動作確認をやりやすくしてくれる。Eclipseベースなので、Eclipseに慣れている方にはお勧めだが、私はそうでもないので特に使っていない。EB3の使い方についてはこの記事までご参照を。 アドビのDavid

今年6月でCreative Cloudツールの2014版アップデートがリリースされ、色んな新機能が発表されましたが、目立たないためによく見逃されたその一つは「CEP 5」と言います。CEP 5とは、8つのCCツールが共通に対応する、HTML5とNode.jsの拡張フレームワークのこと。要は、Javascriptさえわかればアドビのツールを好きにカスタマイズ出来るわけ！ だがCEP 5を使いこなすに必要な情報が特に日本語ではまだ見つかりにくいので、いくつの記事に分けて紹介します。 CEP 5スーパーメガ ガイドのシリーズ Part 1：紹介と技術の概要 Part 2：開発の初め方 Part 3：HTML開発とデバッグ Part 4：Node.jsの組み込みと連携 Part 5：ツール連携 Part 6：ツール・パネル間のイベント Part 7：エクステンションのパッケージと配布 そしてシリー

話題を集めているFirefox OSですが、PhoneGapを使うとアプリ開発を５分でできますよ！嘘じゃない。方法はこんな感じです。 1. PhoneGap/Cordovaアプリをつくるandhall:~> cordova create fftest com.fftest "FF Test" Creating a new cordova project with name "FF Test" and id "com.fftest" at location "/Users/andhall/fftest" andhall:~> cd fftest/ andhall:fftest> cordova platform add firefoxos Creating firefoxos project... Creating Firefox OS project Project Path platfo

このブログを読んでそうな人ならもう知っていると思いますが、先日Adobeのアプリそれぞれの「2014版」アップデートがリリースされました。ので更新版についていくつかの質問をピックアップしようと思います。 Q: CCアプリが２つになったけど？A: CCアプリをインストールしてもCS6が消えないと同じように、先日のCCアップデートのアプリが今までのと別にインストールされます。理由はいくつかあります：プロジェクトの途中にメジャーアップデートをしたくないユーザもいますし、万が一更新版がバグったら前バージョンを使える安心もあります。また、アップデートの内容によって別インストールが必要な場合もあります。（InDesignの.INDDファイルフォーマットが変わった、などの理由で）このため、今回のメジャーアップデートをインストールしても、以前のCCアプリが残ります。 Q: 「CC 2014」とは？CCとど

新製品の「Adobe Voice」というiPadアプリが公開されました！ 何ものかというと・・・書くより見せるほうが早いので、当ツールで作った紹介ビデオをどうぞ： 「Adobe Voice」はどういうツールかと言うと、まさに、上記のようなビデオを作るためのツールですｗ 直接リンクはこちら。 しかも無料。現状ではiPadのみ。UIは英語ですが、読む必要がないほど使いやすいので試してください。入手はこちら。面白いのを作ったら教えてください！ 追加点： Voice一番好きなところを書き忘れた。ビデオに入れる画像やアイコンをアプリ内に検索出来るが、「利用可能」なものしか出てこない、そしてビデオで使われる画像のクリエーターへの引用が自動的に追加される。なので他の作者の著作権をちゃんとリスペクトする制作ツールである。すてきじゃないんですか？

デザイナーがPhotoshopでカンプを作る。そしてエンジニアに渡し、HTML化やアプリ化が始まる。だがカンプ通りのデザインを実現するためには、フォントサイズ、グラデーションのRGB値、オブジェクトの高さと幅、XY座標などを、Photoshopからコードに写す手作業が必要だ。まるでコピペ大会になる。 こんな経験ない？ あるあるの方に、ちょっと面白い発表がございます。Project Parfait （プロジェクトパフェ）は、PSDから簡単にデザインの詳細を取り出す目的のWebサービスである。ブラウザベースなので、Photoshopを開く必要すらない。 絵で言うと、こんな感じ。 触ってみたら大体伝わると思うが、軽く機能紹介をしたいと。 初め方 projectparfait.adobe.com を開く。 参考用のデザインが出て来るが、自分のPSDで試す方が面白いので手元にあれば… 「Upload

この間、パララックス・ビューというsupercrazy Japanese music videoを楽しみながら、組み込みビデオと同期再生するHTMLアニメーションを、ビジュアルで作れないか、と思いました。Edge Animationでやってみたらそう難しくなかったので、やり方とソースコードをシェアします。素材とデモは下記ですが、まずはチュートリアル。 ※ ビデオを作ってからコードをちっと更新しました。詳細は投稿の最後に。 リソースはこちら： デモアニメーション （チュートリアルで表示される） デモのソース そして最後に、ビデオとEdge Animateの同期させるためのJS。新規プロジェクトで使うには、下記のJSを creationComplete イベントのイベントハンドラーに入れて、そしてプロジェクトのどこかにビデオコンテナを作って、そのシンボル名を video_holder にすれば

最近BracketsとTypeScriptで遊んでいます。何でその組み合わせを選んだかは前回のブログで書いたので、早速技術的な話に飛び込もう。ちなみにBracketsだけじゃなくてEdge Codeでも通用します。そんでは！ Brackets＋TypeScript＋ちゃんとしたコードヒントへの近道１．必要なパーツを揃える 最新版のBrackets（最新版に依存するわけではないけどとりあえず） ターミナルで npm install -g typescript でTypeScriptコンパイラをインストール。（Node.jsインストール済みが前提） ２．BracketsにTypeScriptプラグインを入れる ファイル → 拡張機能マネージャーを選択（右上のボタンでも開ける） 出て来るUIの検索フィールドに「typescript」を入力。 プラグインをインストールする。私は上に出てくる「Bra

最近、個人プロジェクトなどで色々TypeScriptと遊んでいます。どうやって遊んでいるかは次のブログで書きますが、まずは一旦、何故遊んでいるかについて。 僕は静的型付き言語が大好き。けど、好きである理由は多分間違っている。CS的には、静的分析のおかげで効率なテストとかパフォーマンスの改善とかは大事に思うはずだけど、僕にとって大事なのは一つだけ： 上記のようなコードヒントだと、僕は効率的にコーディングできないこと。モダンなJSがますます依存するライブラリそれぞれのコードヒントが無いままに使うのがスローモーションで動いているように感じる。（各ライブラリを既にマスターしてれば別だろうが僕はそうでもないので。）コードとドキュメンテーションを切り替えながら集中できないし、そもそも全てのライブラリが完璧なドキュメンテーションを用意出来ていると言い切れない。 AS3に慣れすぎた自分のわがままかも知れな

半年ぐらいBracketsとEdge Codeをエディタとして日常的に使っていますが、色々便利な機能が追加されてきた。ので、自分の気に入りランキングみたいな感じで紹介しようと。 １．ライブプレビュー HTMLファイルの編集中にライブプレビューボタン（雷のやつ）を押すと、ページがChromeでローンチされる。（Chromeのデバッグモードを利用するので、Chromeを再起動しても良い？のメッセージが出る。）そうすると、編集側でカーソルが入っているオブジェクトがブラウザ側でハイライトされ、そして編集するとブラウザにリアルタイム反映される。 ジフアニメで言うとこんな感じです： ちなみに想像できるかも知れないが、Bracketsが背景でページの保存・読み込みを繰り返しているわけではない。むしろ、編集した部分のHTML・CSSがブラウザのDOMに入れ替えられる感じです。編集によって正当なHTMLでな

先月、Photoshop 14.1の新機能として「Generator」が発表されました。色々使ってみると結構面白い技術なので、Generatorの設計、そして使い方を詳しく紹介したいと思います。 まずはいくつかの定義について： GeneratorとはPhotoshop CC（14.1+）に組み込まれるNode.jsサーバを指す Generator プラグイン：Generator に接続するNode.js アプリケーション Generator Core：Node.jsサーバとプラグインの間のコミュニケーションなどを管理するNode.jsライブラリ。ソースはPhotoshopチームのgithubにあり。 Image Asset Generator：少し話題を集めた、自動的に画像アセットを書き出してくれるプラグイン。記事によってこのプラグインのことを「Generator」と呼ぶのでNodeサーバ

創造的な作業が特殊化していく中、会社やチームが自分のスキルや分野に特化したワークフローを作り出すことが増えていると思う（特にゲーム業界で）。個人的に、「制作ツールを使いこなす」だけじゃなくてツールを自分にカスタマイズすることは、これからますます大事になってくるのじゃないかと。 言っておきながら、アドビツールの一部は何種類かの拡張機能やカスタムパネルを、場合によって昔から、対応している。さらに現在アドビでは、CCリリース以降、ツールをまたいだ共通の機能拡張方式を確立しようとしている。しかもこのエクステンションのUIがHTMLで出来るので、開発は効率的である。HTMLパネルの開発環境のプレビューが最近Adobe Labsに挙がって、先週から色々試しているが、大まかなガイドを書いてみました。 開発環境のインストール まずは何らかの Eclipse が必要（ver 3.6以上）。新規インストールで

最近いろいろHTML5開発を試しているんですが、BracketsとEdge Codeを常用のコードエディターとして使うと結構気に入ってきた。ので、良いところを紹介するビデオを作ってみた。 不明点などがあれば聞いてください！ 関連リンク集： Edge Code 説明 Edge Code ダウンロード （クリエイティブクラウドメンバー用 （無償メンバーも）） Bracketsホームページ （英語） Brackets ダウンロード （クリエイティブクラウドメンバーでない方はこれ）

#circle { float: left; -webkit-shape-outside: circle(0, 0, 100px); -webkit-shape-margin: 5px; } これだけでOKです。shape-outside はそのdivの外縁となるシェイプを定義する。そしてshape-marginの設定はそのシェイプの周りのマージンを追加する。 ただしここで重要なポイント：float設定は必須です！なぜかというと、CSS Shapesはエレメントの「float area」を定義する仕様です。右か左にフロートしない限り、エレメントのfloat areaは無視されるのでShapesの設定が無効となる。 ちなみに、上記サンプルの circle(0, 0, 100px) の値はCSS Shapes仕様で定義される新しいものである。シェイプを定義する方法はいくつかあるけど、最も役に立

何年か前からアドビがW3Cの標準化プロセスに参加して、より自由なウェブを作ろうとしているが、関わっている２つのCSS仕様「Regions」と「Shapes」が最近ブラウザに実装されてきているので軽く紹介したいと思います。 まずはデモだ！しかし本機能はまだ一般的なブラウザには実装されていないので、Chromeのベータ版カナリーを使ってください。また、本機能はまだ実験状態なので、カナリーのアドレスバーに「chrome://flags」を入力し、設定ページで「試験運用版の WebKit 機能を有効にする」という設定を有効にしてください。そうするとデモを見れるはず。 そしてCSSリージョンのデモはこちら。画面の横幅やズームをいじってみてください。エラーメッセージっぽいのが表示されるようならば、上記ステップのブラウザビルドと設定フラグを再度確認してください。 では機能の説明に入りましょう。 CSS

今週末６月７日〜８日のイベント「Test The Web Forward 東京」が迫って来た。かなり楽しい経験を期待できそう。でも残念なことに、イベントの定員が百数十名に限られるため、発表されて数時間以内で満席となってしまった。 しかしオープンウェブが死ぬほど大好きなのにイベントに来られないあなた！残りの人生を諦めるのはまだ早い。実はイベントに来なくても、Test The Web Forwardという企画にはばっちり参加できる。 まずはちょっと解説。 Test The Web Forwardとは？我々ウェブ開発者は多くの場合、HTMLやCSSやJSという大事な技術を日常的に使っていても、その技術がどうやって仕様化され、テストされ、実装されることが「どっかの誰かの問題」だと思ってしまう。Test The Web Forwardの目的はその思い込みを破って、より多くのウェブ開発者が標準プロセス

他の多くのフラッシャーと同じく、最近色々HTML5開発を触ってみている。（現時点ではEdge Animateで色々を。）で、JSはAS3とかなり似ているため、それほど慣れにくくはない。（ほとんどのJSはAS3としてでもコンパイルできるし。JSを横目で見たら、変数の型を宣言しない人が書いたAS3と見間違えられる。） ただしJSとAS3は似ている言語にしても、使われる方言が違う。例えばこれ： 最初は「はあ？」と思った。でもJSにはよ〜くあるのだ。このパターンは英語圏で「IIFE」（イッフィー）とよばれる：「Immediately-invoked function expression」。つまり即時に実行される関数エクスプレッション。まあ、コードを見ればそういうもんですね。（@spacelogueさんによると日本語では即時関数というんだって） まあそれはそれで良いんだが、何のために使うのだろう？

Flash Professional CCのリリースが迫って来たので、僕なりのトップ５新機能を紹介するビデオを作ってみました！見どころは、「Number ＃」を若干ラジオDJっぽく言おうとしたところです。 中身だけ知りたい方には、続きをご覧を： 僕的に気に入ったFlash Pro CC 新機能トップ５： スピード アプリが２秒で起動するのはFlashらしくないかも知れないがｗ。Flash CCはゼロから作りなおされているので、もう64ビット対応するモダンなツールに生まれ変わっている。 ビデオ書き出し 今までのは中途半端だったけどそれは過去の話。CCから作るビデオはフレームがドロップされることないし、ActionScriptベースコンテンツも問題ない。（ビデオの長さは、ルートタイムラインの長さまたは指定した時間を選択出来る。） 無限ステージ 今までと違って、ステージサイズの制限が無くなった。

色んな客様やパートナーと話して、最近アドビのCreative Cloudを聞いたことある人が増えていますが、いくつかの勘違いをよく耳にします。ので、ミニFAQを書いてみました。 ① フォトショップのブラウザー版だろう？頭どうかしてるぜ。「クラウド」と言うとアプリがブラウザーで動くことを示すのが多いですがクリエイティブクラウドはそういう作戦じゃありません。ソフトは普通にインストールしてHDから起動します。クリエイティブクラウドで「クラウド」になっているのは、ソフトではなくてライセンスだと思ってください。（クラウド型サービスも色々付きます、Typekitとかストレージとか。） ② オフラインではソフトを使えないってことか。ちゃいます！基本オフラインの利用でも問題ありません。各ソフトが一度ライセンス状態をチェックしますと１ヶ月覚えてくれるので、月に１度ぐらいネットに繋げばソフトを使えます。 ③

Scout はめっちゃ格好いいデータを表示してくれるけど、初めて見る時は細かくて分かりづらいところがあります。例えば「アクティビティシーケンス」と「上位アクティビティ」のパネルはどう違う？というかそもそもアクティビティって何のこっちゃ？などの質問をよく目にします。Scoutの内臓的な仕組みがわかるとデータがよりわかりやすくなるので、ここで軽く説明しようと思います。 （というより、Scoutのカスタムメトリックの記事を最近書くことになり、そのために勉強したけど記事に入らなかった情報をここにまとめようと。） 基本の基本Scoutプロファイリングを開始すると、FlashプレーヤーがScoutとのソケットを作り、パフォーマンスに関するデータを送信する。そのデータの内容は主に、アクティビティの「名前・開始時間・終了時間」になる。（他には、トレースされた文字列、Stage3Dに使われたテキスチャーなど

Andy Hall is a gamedev in Tokyo.