ClockMaker Blog » 雑談

JavaScript、HTML5、CSSの投稿共有コミュニティサイト「jsdo.it」

Yasu — Fri, 18 Jun 2010 09:54:06 +0000

JavaScirptの投稿共有コミュニティサイト「jsdo.it (ジャストドゥイット)」の紹介。jsdo.itはこのブログでも何度も紹介しているActionScriptの投稿サイト「wonderfl」のJavaScirpt版です。運営はもちろんKAYACさん。

このサイトでは、JavaScriptやHTML5、CSSを編集して一つの作品を作り共有することができます。投稿されたソースコードは作例とともにその場で見れるのが特徴。他人の作ったをforkして改良するも良し、forkして勉強するも良しです。公開されたばかりなのでまだ作例は少ないですが、作例が集まればナレッジベースとしても役立っていくことでしょう。

もちろん話題の「HTML5」を駆使して作ることもできるので、腕に自信のあるJavaScirpt開発者やマークアップエンジニアの方もぜひ挑戦してみてはいかがでしょうか。

試しに作ってみた

ちなみに私もさっそく投稿してみました。「パーティクル3000」というタイトルで、Flashで実装されていたパーティクルのデモを移植したものになります。

Particle 3000 – jsdo.it

編集画面は次のような感じで、JSとHTML5とCSSを左側で編集して、右側のプレビュー画面で結果を確認して作成するインターフェースになります。リアルタイムで結果が表示されるので、確認しやすいのが特徴です。

このサイトを通して、HTML5/CSS/JSの新しい表現が広がっていくといいですよね。

ゴノレゴさんがア○プルに言いたいことがあるようです

Yasu — Wed, 26 May 2010 07:23:33 +0000

station5で開催された月刊インタラ塾にて発表されていたポエ山さんの動画が公開されていましたので、ビデオを貼っておきます。時世を絡めたネタで面白いので、ご覧になられていない方はぜひ。

私はその頃の時代を知らないのですが、当時はゴノレゴシリーズと言えば一世を風靡したFlashということで有名だったとのことです。

ゴノレゴシリーズ

Icon Generatorができるまで〜制作レポート〜

Yasu — Mon, 10 May 2010 11:06:33 +0000

先日公開した自主制作で作ったウェブサービス「 Icon Generator 」ですが、備忘録として制作レポートを書いてみました。主に技術的なことをまとめています。

（ウェブサイトは勉強も兼ねてHTML5でマークアップしています）

きっかけ

Icon Generatorを公開してから２年ほど立つのですが、その期間中にもAdobe CS4が発売されたりという背景があり、国内外からバージョンアップのリクエストがありました。なかなか忙しく機会をつかめずにいたのですが、CS5の発売が近づいていることがきっかけとなりGWの期間を利用して自主的に作ってみました。

AIR版とWeb版

今回はAdobe AIRアプリ版だけでなく、オンラインサービスとしても両方を展開したところが大きな特徴です。もともとAIRアプリとして提供していましたが、ブラウザから利用できたほうがより多くの人から使ってもらえるはずなのでオンライン版も作りました。オンライン版を開発できたのも、Flash Player 10のFileReference（参考：Flash Player 10で落書きを保存してみる）がローカルリソースの読み込み/書き込みに対応していることが大きかったです。

ちなみにAIR版もWeb版も同じソースコードを利用しています。私はFlash Builder 4を使用しましたが次の方法でソースコードの共有が可能です。

Web版をメインのプロジェクトとして開発する
AIR版のプロジェクトは、Web版のsrcフォルダに参照ソースパスとして設定
別機能を実装する場合は、AIR版のsrcフォルダにクラスを用意する（同じクラス名があった場合は、同プロジェクトのクラスのほうが優先されるため）

新しいFlexフレームワークを使用

開発言語ですがFlex 4のMXMLを利用しました（開発ソフトはFlash Builder 4）。Flex 4に挑戦した理由は次の2点です。

RSL（ランタイム共有ライブラリ）の効果測定
Sparkスキンという新しいスキンとコンポーネントの学習

RSLを使って、ネット全体でキャッシュ効果

RSL（ランタイム共有ライブラリ）はActionScript 3.0のライブラリをFlash Playerにキャッシュして利用できるという、読み込み時間最適化のための仕組みです。通常のブラウザキャッシュではなく、Flash Playerの特別なキャッシュを利用するのが特徴です。別ドメインのサイトでもキャッシュが有効なため、ネット全体でAS3ライブラリのキャッシュ効果を期待でき、Flashコンテンツの読み込み時間短縮につながる仕組みです。これはGoogleが提供するThe AJAX Libraries APIのActionScript版といったところでしょうか。

（SWZファイルを利用してキャッシュ効果を期待）

RSLを利用することによって具体的にどのくらいの効果があるかというと、Icon Generatorでは610KBの容量削減の効果がありました。

コードをマージした場合のSWFサイズ：856KB
RSLを利用した場合のSWFサイズ：246KB (上の3割程度の容量)

今後、Flash Player 10.1を搭載したスマートフォンが普及してくると思われますが、通信回線の帯域が小さい環境に対して、コンテンツのSWFサイズを小さくできることはメリットではないでしょうか。RSLはFlash Builder 4のFlex SDK 4ではデフォルト設定となっているため意識せずとも恩恵を受けることができます。

詳しい解説はAdobeのヘルプにありますので、そちらを参照ください。

Adobe Flex 3 ヘルプ | フレームワーク RSL の使用

デザイン修正が容易なSparkスキン

Flex SDK 4では新しいSparkコンポーネントが搭載されました。Sparkコンポーネントはデザインのカスタマイズをしやすくなっているのが特徴で、CSSによるデザイン調整に対応していないところはSparkスキンを使って調整しました。今のところ、Flex 4については書籍もウェブサイトも情報が少ないのですが、次の二つのサイトがとても参考になります。

アドビ – Flexデベロッパーセンター
Flex Examples (英語ですが、ソースコードが大量にあるので参考になります)

最後に

今回は将来的にスマートフォンで動かすことや、多言語で動くことを目標に開発してみました。ちなみにAdobeはモバイル用のFlexフレームワークを開発しているとのことですが、それはFlex 4をコアとしているためMXMLを学習する価値があると思っています。

fladdict » Adobe, Mobile用Flex を発表

ちなみに、MXMLの編集は「Adobe Flash Builder 4」が謹製ということもあり一番進んでいる印象がありますが、無料で勉強したい方は開発ソフト「FlashDevelop」もFlex 4に対応しているので、どちらのソフトでも学習することができます。

Icon Generator – Generate CS5 or Web 2.0 style icon

おまけ：ソースコード

ついでにwonderflにコア部分のソースコードあげておきました。興味ある方は自由に使ってくださいませ。

Your Icon Generator on wonderfl – wonderfl build flash online

お手軽にCS5風のアイコンが作れるIcon Generatorをリリースしました

Yasu — Thu, 06 May 2010 10:49:46 +0000

新しいサイトを作ったので報告を。
Adobe Creative Suite 5 風のカッコいいアイコンが簡単に作れる「アイコン・ジェネレーター」です。

全世界で6万ダウンロード(※Adobe Marketplace)となったAIRアプリの「Icon Generator」をアップデートをするにあたり、もっとお手軽に利用できるようにウェブサービスとして展開しました。

ブラウザから操作して、16〜512までの6種類のサイズを一括で保存できる他、Twitterのプロフィールアイコンに設定することもできます。

デザイン

デザインはAdobe CS5風のアイコンや旧来のCS4のアイコン、そしてWeb2.0風のスターバッジのデザインから選択することができます。

Adobe CS5風のアイコン

透過PNG画像を使って、イラストをアイコンに貼り付けることもできます。

写真を使っても、それっぽい立体的なアイコンになります。

アイコンの使い道

利用シーンとしては

Twitterのプロフィールアイコンを探している
ウェブデザインでアイコンを作りたいとき
ソフトウェアのアイコンを作りたいとき

といった時に使えるかと思います。ちなみにTwitterのプロフィールアイコンに利用すると、次のような感じになります。

Adobe AIR版も用意してます

ローカルPCでも利用できるように、Adobe AIRアプリ版も用意しています。DownloadページでAIRアプリをダウンロードすることができます。AIRアプリ版は「Icon Generator Pro」という名称です。

なお、従来のIcon Generatorは「Icon Generator Lite」として引き続き提供します。CS3アイコンはLite版でのみ作ることができますので、レトロな感じのアイコンが作りたい方はLite版を試していただければと思います。

つまりリリースしたのは次の3つになります。

ICON GENERATOR ONLINE – ブラウザから利用可能。
ICON GENERATOR PRO – インストール型のAIRアプリ。
ICON GENERATOR LITE – インストール型のAIRアプリ。

どうぞ、お気軽にご利用ください！

ICON GENERATOR http://icon-generator.net/

追記

海外の方がさっそくチュートリアルビデオを作ってくれました。多謝。

追記（5/13）

窓の社から紹介されました！

窓の杜 – 【REVIEW】本をイメージした“Adobe CS5”風のアイコンを手軽に作成「Icon Generator Pro」

公開から3日間(5/10-5/12)で 3400 ダウンロードを超えました。

セミナーイベント「Progression 4の取扱説明書（トリセツ）」をやります

Yasu — Wed, 14 Apr 2010 03:13:22 +0000

昨日に引き続き、Flashのフレームワーク「Progression」のお知らせ。Progression書籍の発売を記念して、セミナーイベント「Progression 4の取扱説明書」を5/15(土)に開催することになりました。

Progression開発者の阿部さんと私が出演して、Progression 4 の基本的な使い方から、新機能の紹介、Twitter で募集した質問などをまじえたディスカッションなど、盛りだくさんの内容となっています。

社内での共同開発が格段に便利になったProgression 4で変わる制作体制など、現場の制作効率向上的な話なども織り交ぜ、Progression 4をわかりやすくご紹介します。これからProgressionを始めたいと思っている方も、すでに Progression 4 を使っている方も、ぜひぜひご参加ください。

申し込み方法などの詳細は次のページからご確認いただけます。

Progression 4の取扱説明書 | ロクナナワークショップイベント企画

イベント概要

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
Flashの学校ロクナナワークショップ
Progression 4の取扱説明書　変わる！Flashコンテンツ開発体制
5月15日（土）開催決定！
────────────────────────────────────

●詳細はこちら
http://event.67.org/progression/

●概要
日時：5月15日（土）14:30 – 19:40（開場14:00）
定員：100名（会場の都合により増減あり）
料金：3,200円（書籍なし・税込み）
5,800円（書籍付きチケット・税込み）
会場：東京・新宿「関東ITソフトウェア健保会館」
〒169-0073 東京都新宿区百人町 2-27-6

●主催・お問い合わせ
株式会社ロクナナ・ロクナナワークショップ
〒150-0001東京都渋谷区神宮前1-1-12 #203
イベント運営事務局　担当：佐々木・上田
E-mail：workshop@67.org
Phone：03-3408-4605

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

ブログの関連記事

まとめ

このシリーズのエントリーは「Progression チュートリアル」のまとめにまとめています。

Adobe Creative Suite CS5 (Adobe CS5)が発表されました

Yasu — Mon, 12 Apr 2010 06:50:10 +0000

ついにAdobe Creative Suite CS5が発表されました。新機能がとんでもなくすごいものもあれば、地味に機能強化され使い易くなったものなど、すべてチェックするのになかなか時間がかかってしまいますね。そこで、少しの時間でチェックできるように、CS5製品群の新機能についてざっくりまとめてみました。

Flash Professinal CS5

公式ページで紹介されている新機能は次のような項目があります。

［新規］テキストエンジン（テキストのレイアウト設定が細かく設定できるようになった）
［新規］XMLベースのFLAソースファイル（.xfl）
［新規］コードスニペットパネル(ASのテンプレート)
［強化機能］ActionScriptエディター
［強化機能］広範囲のコンテンツ配布
［強化機能］Adobe Creative Suiteの統合
［新規］Flash Builderとの連携
［強化機能］Flash Video編集機能強化
［新規］ボーンツール[スプリング（強さと減衰）]
［新規］パターン描画ツール

※注：Packager for iPhoneは先日のiPhone OS の件（参考）もあり保留となったようで、掲載されていません。

目玉機能の「Packager for iPhone」が掲載されていないのは残念ですが、それ以外の機能も魅力的なものがたくさんあります。特にASエディターの強化は現場の方々にとって作業効率向上に大きな効果が得られそうで期待大です。特にフレームアクション派の方には大変ありがたい強化機能ではないでしょうか。

Adobe Flash Professional CS5の新機能

なお、Web PremiumにFlash Builder 4 Standard版も同封されることになりました。WindowsユーザーにはFlashDevelopという優れたソフトがあるのでActionScript開発ソフトには不満はなかったかと思いますが、コードエディターの少ないMacユーザーには待望のお知らせだと思います。

また次の記事では、動画でFlash CS5の新機能をチェックすることができます。

xingxx – 動画でみる Flash CS5 の押さえておきたい新機能

Photoshop CS5

「Photoshop CS5」はヤバイ機能ということで紹介されていた「コンテンツに応じた塗り」というのが搭載されています。従来は職人のテクニックで、映り込んだ不要物をパス抜きして消していましたが、手間入らずで機械的に削除するという夢の機能です。

Photoshop Extendedの新機能

ちなみに選択範囲も従来より簡単に選択できるようになりました。パス抜きと比べての精度が気になるところです。

参考記事

動画：Adobe Photoshop CS5の新機能はもはやえげつないレベル…

AfterEffects CS5

CS5ではAfter Effectsは64ビット対応されたことで4GB以上のメモリもプロセス単位でも対応し、レンダリングの保持できるフレーム数が増えました。「ロトブラシ」という機能も面白く、手軽なキーストロークで人物を選択できるようです。

Adobe After Effects CS5の新機能

After Effects CS5の紹介は、次のファーストインプレッション記事がとてもわかりやすくまとまっています。

After Effects CS5 ファーストレビュー！CS5では何が変わる？ | AEP Project

Premiere Pro CS5

様々な最新のビデオフォーマットをネイティブ編集できるようになった点と、「Mercury Playback Engine」によりHDや高解像度フッテージのフレームレートを維持できるなど再生パフォーマンスが劇的にあがっている点が目玉なPremiere CS5。最近のデジタル一眼レフカメラの動画撮影についても、ネイティブフォーマットのまま動画編集ができるようです。

Adobe Premiere Pro CS5 – 新機能

どのぐらい快適になるかについてはAdobe 古田氏のブログで紹介されているので、参考くださいませ。

64-bit環境で超快適！CS5ついに発表 – Focus In blog

Illustrator CS5

地味に便利になったと思ったのが、イラレCS5。ストロークの幅を調整できる「美しい曲線」とパスの結合などができるようになった「強化された描画機能」は、昔から欲しいと思っていたイラストレーターの方も多いはず。他の新製品に比べると「これぞ！」という目玉機能にかける気がしますが、実際の現場ではありがたいアップグレードなのかと思いました。

Adobe Illustrator CS5の新機能

DreamWeaver CS5

「PHPのカスタムクラスのコードヒント」のコード支援は、DwでPHPを扱う人にはありがたいのではないでしょうか。「BrowserLabとの連携」は、クロスブラウザ対応をより効率よく作業できそうなので、良さそうな機能だと思いました。

Adobe Dreamweaver CS5の新機能

発売記念セミナーも

また、発売を記念してAdobe主催のセミナーも開催されるようです。ゲストスピーカーが有名な方々なのでおもしろそうです。東京と大阪で開催されるようなので、ぜひ参加してみては？

ADOBE CREATIVE SUITE 5 Web Premium 発売記念セミナー

購入について

発売日は5/28で、価格は次のニュース記事がまとまっています。

250以上の新機能を追加：アドビ、「Creative Suite 5」日本語版を発表 – ITmedia +D PC USER

発売日が楽しみですね。

4月のFlash系勉強会・セミナーイベント

Yasu — Thu, 08 Apr 2010 04:32:40 +0000

新年度が始まり、何か新しいことにチャレンジしてみたい季節ですね。というわけで、4月のFlash系の勉強会・セミナーイベントをまとめてみました。

とりあえず、一番のオススメはこれ！

4/25(日) Flash モーションプログラミング + てら子 | ロクナナワークショップイベント企画 | GEEKs in OSAKA

東京・大阪の二大都市で開催されるイベントです。東京はもう既に満員とのことですが、大阪はまだ席があるとのこと。trick7さんやSaqooshaさんのブログでも紹介されてますので、ぜひお見逃しなく！

LightWave Creators Night vol.7

4/24(土) LightWave Creators Night vol.7

ROXIK 城戸さんと、orange-suzuki.comの鈴木さんが出演され、LightwaveとリアルタイムFlash 3Dについて講演されるとのこと。Flash 3Dの話題に興味のある方はぜひ見にきては。

Flashup #1

4/17（土） Flashup #1 : ATND

千葉で開催されるFlash入門の勉強会。なんとLightwaveのイベントでも講演されるorange-suzuki.comの鈴木さんが主催です。鈴木さんは前にこういう勉強会をやってみたいと話したことがありまして、ちょっと応援がてら紹介してみました。

FITC Tronto

FITC // FITC Toronto 2010

Adobe MAX級のFlash系イベント。カナダのトロントの開催です。申し込みは既に終わってますが、こういう海外のイベントにもいつかいってみたいものですね。

TOUR PROJECT : 3月6日まで先着20名限定！ » FITCツアー内容

FLASH PLATFORM CAMPをUstreamするよ

Yasu — Mon, 15 Mar 2010 10:55:03 +0000

Adobe FLASH PLATFORM CAMP Tokyo という次期 Flash CS5 や Flash Builder 4 をいち早く体験できるというイベントが明日3/16(火)東京で開催されます。

参加者の中で立候補した人は Ustream (リアルタイム中継)をさせてもらえるのですが、例によって私のアカウントでも Ustream してみます。

clockmaker on USTREAM

時間帯は 3/16(火) 13:00〜19:00 という長丁場ですが、公式ページにタイムスケジュールがあるので、気になる時間はぜひ上のUSTREAMページをチェックくださいませ。

Flashだとここまでできる! HTML5とFlashの機能比較

Yasu — Wed, 03 Feb 2010 12:29:49 +0000

アップルの新デバイス iPad が Flash に対応していないことや、アップルの CEO スティーブ・ジョブズ氏の苦言により、HTML5 は Flash に取って代わるのかという論議がわりと現実味を帯びて論じられるようになりました。

そこで、HTML 5 と Flash は何が違うのか両者の違いを図にまとめてみました。

(上の画像はクリックで拡大できます)

左側が HTML5 にしかない機能、右側が Flash にしかない機能で、中央の重なっているところが両方が利用できる機能です。グラフィック関係では、HTML5 では描画やビデオ関係はサポートするものの、テキスト周りや高度なグラフィック処理ではまだ Flash のほうができることが多いといった状況でしょうか。

それでは具体的なウェブサイトを例に、Flash 側のメリットを詳しく紹介します。

クロスブラウザの映像対応

HTML5 は video タグ搭載によりプラグインを利用してないで映像を再生できるようになります。例えば YouTube でも HTML5 のみで実装された動画プレイヤーが公開されています。ただし注意点は、依然として動画コーデックの統一が進んでおらずクロスブラウザに対応した動画コンテンツを提供することが難しい状況です。

Flash Player ではバージョン7 (2003年)の頃からクロスブラウザ対応の動画プレイヤーを実装することができ、現時点では普及率も98.0%もあります。

Flash だと縦書きができる

Flash 10 (2008 年) から利用できるようになった新機能ですが、縦書きレイアウトを組むことができます。縦書きにしても文字組みにそってテキストを選択することができるためユーザビリティーをさげることなく、DTP レベルに近い柔軟なレイアウトを施すことができます。

http://macromarionette.com/ (上図のサイト)

ちなみに、Flash 開発者でないと知られていないかもしれませんが、Flash のテキストはフォントサイズが小さい場合にでも読みやすさを損なわないように、独自のアンチエイリアシング処理が適用されています。そのため小さな文字サイズでも読みやすさを損なうことなくレイアウトすることが可能です。

※単色ではなく他の色も利用してアンチエイリアシング処理を行う。Windowsの Clear Type に似た技術。

Flash だとタイムラインアニメーションに映像を組み込める

コンテンツ開発者から見たメリットになりますが、Flash はオーサリングソフト上で動画をタイムラインアニメーションとして組み込むことができます。実はこれはハイエンドなプロモーションサイトで採用されているケースが多く、画面遷移の効果的な見せ方として普及しています。

この手法を巧みに利用したウェブサイトとしては以下のようなものがあります。

将来的に技術の進化が進めばこのような手法が HTML5 でできるかもしれませんが、現状の HTML5 では難しい手法です。

Flash の 3D は進化している

Papervision3D を初めとして現在ではさまざまな ActionScript 3.0 向けの 3D ライブラリが開発され 3D コンテンツの制作が容易にできるようになってきています。

3D を効果的にウェブプロモーションとして利用したサイトとしては以下のような物があります。特に以下のものは秀逸なので一見の価値ありです。

ほかにも次の記事に 3D のサイトをまとめています。

Flashで作られた3Dカーゲームまとめ #1

Flash だとウェブカメラが利用できる

ウェブカメラを利用したコンテンツを Flash だと作ることができます。例えば、昨年話題になった AR (拡張現実)。ウェブカメラで手に持った現実のマーカーを撮影することで、そこにバーチャルな3Dシミュレーションが合成されるという技術です。

簡単！ FLARToolKitをはじめよう！ | デベロッパーセンター

Flash 内部で音を生成して再生することができる

これもFlash 10 (2008年登場)の最新機能ですが、Flash 内部で動的に音を生成することができます。

Hobnox – Audiotool

最後に

技術としてどちらが優れているとかではなく、ユーザー体験を向上させるにはどちらのほうが向いており最適かは制作するウェブサイトによって判断していくことが必要です。

HTML5 の新機能は【特集】HTML5 について at Cool Codingに丁寧にまとめられていますが、「ストレージ/データベース」や「ブラウザ外からのファイルのドラッグ＆ドロップ」などは喉から手がでるほど渇望していた機能です。このような一方にしかない技術も Flash と HTML5 をJavaScript を介してブリッジすれば互いの弱みを補完することができます。

決して競合する技術ではなく、ともにウェブ体験を豊かにしていく技術であることを認識して、経過を見守っていくことが大事なのではないでしょうか。