Study

北海道WEBコン FESTA 2008 「夏祭り!アドビ特集」(3)

08fes

北海道WEBコンソーシアムの特別イベント「夏祭り(アドビ特集)powered by CSS Nite」。
参加した記録その3。

Adobe AIRで作るRIAのご紹介

アドビシステムズ 西村さん

Adobe AIR紹介するから、みんなもなにか開発してね!という話

Adobe AIR

現在バージョン1.1 ・・・ ブラウザを飛び出し強化した、Web技術で作れるデスクトップアプリ

  • 無償クライアントの活用
  • どのOS・環境でも使える
    これまで開発者が吸収していたOSの違いによる対応をAIRの方がフォローしてくれる
  • Webの技術を使用できる
    HTML / CSS / Flash / PDF / ActionScript…
  • SQLiteでローカルにデータベースを作成でき、オフラインでも使用できる
AIRアプリの一例
  • デスクトップでみかんせいじんを育てる
    (縦横無尽に動き回って気持ち悪い)
  • ガイドのお姉さんと毎日株式について勉強する学習アプリ
  • キーボードを押すと女の人がエアギターでパフォーマンスする
  • リアルきれいなお姉さんが紹介するRSSリーダー
    (RSSリーダーを使ったことない人も、お姉さんが見たくてダウンロード)
  • ホットペッパーお店検索
  • 3DYoutube検索
    (サムネイルリストがWizardlyの3Dダンジョンみたいに並ぶ…うまく説明できん)

こうやってみるとお姉さんビデオ系が多いな みんな女に弱すぎだw

ブラウザアプリ(Flash、Javaアプレットなど)との違い
  • ブラウザが別途必要ない
  • OSを選ばない
  • Flash・JavaScriptの「クロスドメイン問題」がない
    (サーバー上のFlashから別ドメインの外部ファイルを読み込むのは、ちょっと難しいのです)
  • インストールが早い
AIRアプリはどうやって作れるの?

関連ツールページで開発環境を入手する

  • Adobe flex Builder3 ・・・ 本格的な開発ソフト もちろん有料だが最強
  • Flash or Dreamweaver拡張 ・・・ CS3を持っているならまずはこれで
  • Adobe AIR SDK ・・・ 無償提供されている開発ツール(誰でも使える!)
Flash CS3でAIRアプリを書き出すには

拡張機能をインストールすると、上メニューの「コマンド」に
「AIRアプリケーションを作成する」が出てくる

選択して「背景を透明にする」の設定で書き出し

Flashの動きをデスクトップで再現できるようになる

帰ってから調べた 詳しいチュートリアルはここ!↓
Flashデベロッパーセンター(ホットペッパーAPIのサンプルも手に入る)

これからのAIR

Q : もっと気軽に使ってもらわなきゃ AIRはこれからFlashやPDFみたいになるの?

A : 将来的に、AIRはOSに自動でダウンロードされるようになると思います!
たくさんのお客様に負担をかけずに使ってもらえるよ!(西村さん)

AIRギャラリーがオープン 共有公開も可能に

ワークショップ

次世代のコンテンツとして、AIRで何ができるのか、をグループでディスカッション
私とmakiesさんと前に座っていた兄さん二人でグループ

私は「リグレト」のアプリがあったら楽しんじゃないのかな、という話をする

凹み共有サイト「リグレト」 FlashならではのUIがとってもかわいい
でも とっても重い ナイスヘコミ・ナグサメみつけてもすぐ流れちゃう
↑↑じゃあ、AIRならテイストを生かしたままで軽く、ログとれるアプリが作れるんじゃないかな?

…と一生懸命話したら、兄さんたちに引かれたのか、激しく反応が鈍く凹む
兄さんたちの意見 「今のところWebとの強い差別化が感じられない」
makiesさんの意見 「セキュリティ面がどうなっているのか心配」

Hokkaido Fresh Flash

24-7 古本さん

24-7は札幌の制作会社 サイトを何回か見たことがある
SecondLifeで仮想PRオフィスを作ったことがあった たしか
携帯サイトでの送信内容がデータベースを介してPCサイトと同期する、最新のFlashコンテンツについて紹介

※実演が多かったのと、技術的にかなり高度な話だったためついていけず、あんまりメモとれなかった…

サンプルアプリの紹介

携帯サイトに配られたQRコードからアクセス

→画面に数秒ごとに数字が出るので、同じキーをすばやく押す
→スロットがくるくる回って数字が出てくる

上の数字は実はカウンターになっていて、
これまでにアクセスした累計数を表している
データベースで集計を取り、キリ番だった場合は携帯は当たりの画面になる

PCサイト(全面Flash)の方はリアルタイムで現在の状況を更新し続けていて
当たりが出ると画面が変化して他の人にもわかるようになっている

ASライブラリ2.0・3.0

ライブラリの普及で、前述のような高度なアプリを作りやすくなった
逆に計算が複雑になってしまったり、頼りすぎたりするので利用は計画的に

  • アニメーション: tweener / GO など
  • 3D効果: Papervision3D / Away3D など
  • タスク: Thread など
  • フレームワーク: Progression Framework
  • スライド支援: Slides
    (Flashに図形を書き込んだりできる 実際に古本さんはこれでスライドに赤丸を書き込んでいた)
ASライブラリの勉強を深めるには?

Spark Project

Flash製作者のコミュニティサイト ライブラリ共有や情報交換を行っている

最後にさっきのスロットサイトでプレゼント抽選会

会場みんなでスロットカウンターにアクセス!50番ごとのキリ番でプレゼント!
Flashは実際に動くとよくわかる 会場のみんな大興奮

…私?もちろん、またことごとく外れましたとも。


「なげーよ!いつまで続くんだよ!」って人すんません。
次で(たぶん)終わりです。第4弾に続く。

Study

北海道WEBコン FESTA 2008 「夏祭り!アドビ特集」(2)

08fes

北海道WEBコンソーシアムの特別イベント「夏祭り(アドビ特集)powered by CSS Nite」。
参加した記録その2。

Fireworks as phoenix(おめでとう、Fireworks 10周年!)

スイッチ 鷹野さん

Fireworksが大好きな鷹野さん
「Fireworks、WEB制作に特化しててとっても便利だよ!」という話

(三年愛用している私は、使っていない機能の確認やCS4の実装内容を確認してました)

簡単に言うと「72dpiのIllustrator」という感じだが
PhotoShopよりオブジェクトを扱いやすく、Illustratorより軽量

バージョン8までの便利機能
  • アンチエイリアスの制御が可能
    「硬い線」を選択すると縁の線がドット単位に / 透過GIF素材も簡単
  • 9スライス機能
    シンボル化するときに形を保持する場所を指定 / 伸ばしても文字やかどまるが崩れない!
  • 強力なベクターマスク
    あとでいくらでもパス調整可能 / ぼかしもきれいに反映
  • ボタンシンボル / hover状態もプレビューできる
  • Flashより細かいシンボル機能 / シンボルごとに文字など一部要素を変えられる
  • サイズを指定しての画像拡大・縮小ももちろん可能
CS3の便利機能
  • モックアップ作りに便利な機能
    「共有ライブラリ」から各OS用のフォームパーツをすぐ使える
  • ページ機能を実装
    全ウェブページを1枚のファイルで管理
    ロゴ等、全ページ共通のオブジェクトも作れる
    ラピッドプロトタイピング
    各ページのナビゲーションが、クリッカブルマップでつながっているデモページを作れる

PhotoShop、Illustratorでデザイン作成 → Fireworksで仕上げ
理想的なワークフローの完成

CS4の追加予定機能
  • 9スライス機能がシンボル化しなくても可能に
  • ライブグラデーション / グラデーションハンドルを操作中もリアルタイムで色が変わる
    (CS3まではドラッグをやめないと色が変わらない)
  • 角丸の半径を「px」で指定可能 / 拡縮しても角の半径が決まっているので丸みが変わらない
  • テキストの強化 / アンチエイリアスがPs・Ilと同様に!画像テキストがガビガビしなくなった!
  • ものさしツール / カンプ用。
    ドラッグした範囲に 「┣━━━━━ 456px ━━━━━┫」というガイドセットを作ってくれる
  • スマートガイド / Flashには既にあった機能
    ドラッグ中に他のオブジェクトと揃っているか点線で教えてくれる
  • PDF出力に対応
    リンクなどはクリッカブルなまま書き出し / パスワードプロテクション / ハイライトによる注釈追加

macromedia消滅でなくなるかと思われたが(当時は普通にハラハラした)、
ImageReadyと入れ替わりに、しっかり残ったFireworks

Fireworksは今後も役割を与えられて生き残っていくよ!

昼休み

メンチカツパンをかじっていたら、@makiesさんが来場
おとなりに移動

以降、makiesさんの話も参照してね

>> わすれないように. – アドビ特集 夏祭り ・・・他

仕事の関係の営業さんに会う WEBコンの会員だったようだ
部下の人を連れられていたので名刺を交換する 宜しくお願いします…


そして午後の部…

ふとプロジェクタの画面をみると、そこにはなつかしのみかん星人が!!

午後はいったい何が起こるのだろう、
と思わせぶりに第三回へ続く。

Study

北海道WEBコン FESTA 2008 「夏祭り!アドビ特集」(1)

08fes

北海道WEBコンソーシアムの特別イベント「夏祭り(アドビ特集)powered by CSS Nite」。
こういう勉強会にもっと出よう!と参加してきました。

講演の内容をメモしてきたので、4回にわたってレポートです。

開場

開演した直後は席もまばら。あれー?と不安になる。
じゃんけんも抽選もことごとく外れる。

Adobeクリエイティブツール最前線! ~アメリカ直送の最新動向ご紹介~

アドビ システムズ 西村さん

以下走り書きママ(間違いがあるかもしれません)

Flash Palyer10について
  • コミュ機能強化 / 外部ライブラリを使いやすくする
  • カスタムフィルタ / 有志制作のフィルタを読み込める ほぼ1KB以下
  • リッチテキスト強化 / 多言語・日本語組版に対応可能になった
    (カタログ・ケータイ小説にも使える?)
  • 3D効果(写真をX軸 / Z軸を中心に縦回転されることが簡単になった)
  • RTMFP(リアルタイム・メディアフロー・プロトコル)対応
    UDPベースのセキュアなプロトコルも可能になった…みたい 私にはまだよくわかんない(・ω・`
  • 音を認識して動画表現するのが簡単になる
Fireworks CS4 PublicBeta

午後のプログラムと同内容なので割愛

Dreamweaver CS4 PublicBeta
  • 関連ファイル(画像・CSSJavascript)を上部ツールバーに一覧表示
  • レンダリングエンジンにSafari・Google Cromeの「Webkit」を搭載
    (質問への解答:Safariと全く同結果ではないが、かなりリアルに近いプレビューとなる)
  • jQueryなどの外部ライブラリもコードヒントに対応

なお、このときのデモ画面は、メニューがすべて日本語になってた(現在の配布版は英語)。

アドビ夏祭りでの初公開だそうです。

おまけの話

North Kingdom

スウェーデンの地方にある制作会社 世界レベルの案件を次々とこなす凄い会社
田舎でもクォリティで世界にアピールできるという話 / 北海道の会社でも?

休憩中

20080906121422

看板の誤字に気づくwww

Webサイト制作の「今」とともに進化するDreamweaver CS4

アンカーテクノロジー 神森さん

西村さんの話に追加

プレビュー画面で要素にカーソルを置くと、おなじみの「アンカーアイコン」が出て
クリックで関連CSSがその場でポップアップされる(=画面を遷移しない)

ライブビュー
  • これまでのプレビュー画像は普通のHTMLページだったが、JavaScriptのDHTML効果もプレビューされる
    (ロールオーバー、hoverアクションがあればそれも再生される)
  • ライブコード / コードビューを出しておくと、実際にJavaScriptでHTMLが書き換わるところも確認できる
  • アクション中にF6キーを押すと、その瞬間の状態で停止できる
    (hover状態ならカーソルを離しても解除するまでhoverのまま)
バージョン管理システム「Subversion」の実装
  • ファイルのバージョンNo.・差分情報を管理
  • 修正箇所をコメントで記録できる
  • ファイル単位だけでなくディレクトリのバージョン管理も可能

↑直し・手戻り・多人数制作を支援

バージョン復元の例:
ファイルを右クリック → バージョンコントロール → 改定履歴
履歴一覧から戻したいバージョンを選択 → 閉じる
再度右クリック → 最新バージョン取得 → 前のバージョンに復元できる

CSS Selector Specificity (つづりあってたっけ)
  • セレクタの記述順による加点状態を一覧表示
  • 逆引きも可 / 重要度を指定すると、それに合ったセレクタ記述順をガイド

まとめ:間違いのない制作で現場もクライアントもハッピーになろう
(という神森さんは法被を着ている)


走り書きをそのまま文字にしているだけなのだが。
まだ午前のプログラムが終わらない。

(2)に続く。