Mashup Caravan in OSAKIに行ってきた

カンファレンス MA

id:lesamoureuses:20080712:1215868867に引き続いてMA4のカンファレンスに行ってきました。
誰でも直接来て良いってメールが来たので行ったのだけど、思ったより少なくてビックリした。
AdobeでAIRの話聞ける機会なんてあんまりないからもっと来るかと思った。
やっぱり平日だったからみんな来るのも難しかったのかな。

いつも通りメモ書き。間違ってたらごめんなさい。

プログラムは大体以下の通り。

≪開催プログラム≫

18:30-18:45 開場

18:45-18:50 ご挨拶 what’s Mashup Award -

18:50-19:50 Adobe AIRとは？+ Flexで作成するAIR実践　

AIRが切り開く新しいRIAの世界をデモを交えてご紹介するとともに、
Flexを使ったAIRアプリケーション制作方法をご紹介します。

講師：アドビ システムズ 株式会社　轟 啓介

19:50-20:00 休憩

20:00-20:30 デザイナー視点でAIR開発！Flash&Dreamweaverユーザー向けAIR 講座　
FlashとDreamweaverでもデスクトップアプリケーション=AIR
アプリケーションが開発できるのを皆様ご存知でしょうか？
当セッションではFlash + Dreamweaverを利用したデザイン性の高い
UIのAdobe AIRアプリケーション制作方法をご紹介い たします。

講師：リクルート メディアテクノロジーラボ 鈴木 拓生

20:30-21:00 Lightning Talk/Free Talk

あいさつ　リクルート メディアテクノロジーラボ 川崎氏

  • MAの歴史とかそういうのもろもろ。

Adobe AIRとは？＋Flexで作成するAIR実践 アドビシステムズ轟啓介氏

Flex、AIRってどんなもの？
デモ
  • ウゴウゴルーガのみかん星人がフジテレビから
  • デスクトップ上にFlashでできた犬のRSSリーダー
    • 枠とか存在しない
  • 株価ビューア
    • グラフとかもFlex標準のchartコンポートネントでできてる
  • 新しい情報やニュースがあると下着姿のおねーちゃんがでてくる
    • おねーちゃんに投げキスしてもらいたいから皆消さないで常駐させておく
    • Tバックのおねーちゃん出てきた。
  • 企業のイントラネットでよく使われてる（企業のものなのでデモできない）
AIRのアーキテクチャ
  • OSの層の上にAIRのAPI（runtime）の層があって、その上でFlashやHTMLが動いてる
    • 脱ブラウザを果たしたFlash/HTML＋α
      • Mashupで使うならローカルファイルにアクセスできるのでその辺を扱うとメリット大きいかも
ブラウザエンジンWebkitが内蔵されている
  • Safariで採用されているブラウザエンジン
  • Webkitデモ
    • AIRで作ったiPhone
      • アプリの中でSafariを表示できる
  • Flexデモ
    • ActionScript＋MXML
      • MXMLのMはMacromediaのMらしい。初めて知った。
    • 簡単に作れるよ。
      • ポチポチ選んで書くだけ。保存したら自動でコンパイル
    • 1行書くだけでWebkitが立ち上がってアドビのトップが見れる
      • ただFlashが再生されない。これはバグらしい。はっきり言ってバグらしい。Flash直でAIRに出す分には行けるんだけど、Webkit経由だと出ない
  • Flash見れないバグについて
    • Flexで勝手に作られる＜なんとか＞-app.xmlのtransparentをtrueにしておくと確実にFlash出ないらしい。
      • 始めはコメントアウトされてる。デフォルトがfalse
    • falseにするとどうなるか？
      • Flashは表示できるようになる。でもアプリがOSのウィンドウ枠の四角になっちゃうので、AIRの曲線な感じの枠（カスタマイズ）とかが使えない。残念。次のバージョンで直ったらいいな的な所らしい。
    • ついでに、systemChromeをstandardにするとOS標準の枠（windowsとかmacとかの閉じるとか最大化のアレ）。noneにするとAIRのシンプルな枠になる。自分で自由にカスタマイズもできる
  • も一つついでに枠消して自分でカスタマイズする方法
    • transparentはtrue
    • systemChromeはstandard
    • この状態でmxmlのWindowedApplictionをやめてApplicationって書くと完璧にwindow枠が消える
      • handlerが消えてリサイズもできなくなるけど、おかげでその辺も自分でいじれるから自由度上がる。
      • ここでアプリケーションの開発PDF（AdobeFlexリソースにあるやつ）の「ネイティブウインドウの操作」の項目読めばサンプルコード載ってるから好きに色々できる。startMove()やれば動かせるよ。
      • mx:StyleでApplictionのbackground-alpha: 0;とすれば背景も消えてくれる
SQLiteが内蔵されている
  • 500KBの計量RDBMS
    • 「今オフラインか？オンラインか？」のAPIもあるので、それを判定してネットに取りに行くかSQLiteから情報を取ってくるかを使い分けたりもできる。
AIRのメリット
  • クロスドメインなし
    • AIR APIでローカルファイルにもアクセスできる
インストールの流れ
  • Flashでインストーラを作る
  • runtimeが入ってるかどうかをJavaScriptで確認
  • 入ってなければruntimeをインストールするかユーザに確認
    • その場でインストール
  • AIRのアプリをインストールできる
開発手法
  • FlexBuiler
  • Flash、DreameWeaver
  • AIR SDK
配信フロー
  • WebアプリをディレクトリごとZIP圧縮したようなものを.airとして提供
AIRのTIPS
  • ブラウザではできなかったことが可能に
    • アプリの形は自由にカスタマイズ
デモ（価格.comを使ったもの。ここのは登録いらないから使いやすいよと。）
  • ローカルで価格検索
  • AIRからプロセスを起動することはできない
    • セキュリティの観点から。
    • でも関連づけされたファイルは開けるのでhtmlならブラウザが立ち上がるとかは可能
  • CSSも簡単に適用できるよ
    • VBのようにd&dでペタペタ貼付けると裏で勝手にソース作ってくれます。
AIPでつまずいた時はどうする？

デザイナー視点でAIR開発！Flash&Dreamweaverユーザー向けAPI講座 鈴木拓生氏

3つの視点が大事
  • 企画としての目新しさ
  • デバイス/ランタイムとしての目新しさ
  • 使うAPIの目新しさ
3月にDESIGN SHOWCASEというサイトを立ち上げた
  • 一つのAPIを6人のデザイナーに使ってもらい、どのようなUIの違いが出るかを見せてる（ホットペッパーAPIを使って。）
    • 結果画像を集めてデザイン化したもの
    • 検索窓を用意しておいて、リアルタイムにそこで検索している人の検索結果が見れるもの
    • 予算やカロリーなどから視覚的に検索結果を絞るもの
  • グループで作ると色々違いが出て面白いですよと。
AIRで何ができるのか
  • Flash、DreamWeaverベース
  • AIR+APIのメリット
    • Webの技術だけでは高機能なOSネイティブアプリを作ることは難しい
    • OSネイティブアプリから昨今はWebアプリに移行してる
    • むしろ、データはWebに置き、そのデータをローカルから操作することが良いことではないか？
  • 開発手法
    • まずはFlashPlayerかブラウザで作ることをやってみよう
    • 一番簡単なのはサンプルとしてチュートリアル記事を利用する
AIR+API Flash版
  • AS3ソースコードについて
    • APIのレスポンスのnamespaceが書かれているとAS3はこけるらしい
      • リクルートとか、Amazonとか。おまじないを書いて回避
  • FlashPlayer9でパブリッシュしてまずは確認
    • AIRでパブリッシュするとtraceが取れない
      • 取れないわけではないけど、デバッグモードにしてプレビューしなくちゃいけないし面倒
      • サードパーティのAIRdebuggerがいい感じなのだけど、これを使うとtrace使えなかったりするのでなおさらデバッグモードはあまりしない
  • 注意点とか
    • stage.windowからstage.nativeWindowへ変わってるから気をつけて
      • 2月以前のブログ記事だと昔の情報あるから
    • runtimeがAIRだとMacでもマウスホイールが普通に使えていいよ
DreameWeaver
  • AIR Application Settings(?)でAIRの初期ファイルを作る
  • インストーラとかを自分で作る必要なく簡単に作れていい。
    • （轟さん居ないから言えるけど）パブリッシュの時だけ体験晩使うと良かったりするんじゃないかなとかなんとか
  • 注意点とか
    • 開発はSafariブラウザをベース
      • CSSやJavaScriptのブラウザ間の違いに悩まされる必要なし
    • ドメイン縛りの問題がある
      • Y!のFlash版マップはドメインの制約に縛られずに使えるよ
    • JavaScriptのセキュリティ面の制約
      • 空div作ってその中にデータを入れるとか無理
      • innerHTMLを使う場合にはonclick等のイベントコールバックは実行されないのでidにイベントリスナーを定義するようにしないとダメ
      • あとeval使えなかったり。
AIRじゃなきゃできないこと
  • かたち
    • AIRは四角い枠外せるよ
    • ブラウザのアプリはキャンバスの中の絵、AIRは粘土細工で作った自由なもの
  • ローカルデータとの連携
    • ファイルをd&dすると中にある単語をホットペッパーで検索して結果を表示してくれるとか
    • 音や映像はまだJavaScriptで触れない所なので良いと思う

質問とか

  • AIRでHTMLをローテーションかけたらジャギーが出たりフォントがちょっと崩れたりするけどどうにかならないかな？
    • FlashPlayer10がベータ版で提供されてるけど、そっちではそういうところに力を入れてる
      • 詳しく言えないけど秋の終わり頃に新しいバージョンが出るのでAIRもをそれを改善すると思う
      • テストとか必要なら轟さんにメールすれば最新バージョンのテストに参加できる
  • ローディングの画像は変えられる？
    • クラスで変えられる


AIRは取っ付きやすくてやりたいんだけど、サンプルアプリ作ってほったらかしにしてるな。。
また一からやりはじめよ。


あと、最後にじゃんけんで勝ってポスター貰った！やった！
中村勇吾さんのとこにも貼ってあるらしいよ。
ってことでウチの会社に勝手に貼っておこう。

f:id:lesamoureuses:20080830001155j:image