F-site「迎春!スマートフォン&タブレット端末向けアプリ開発ことはじめ」レポート

2011年1月31日 23:51 event,flash — littlepad

今回の F-site は、Flasher のためのスマートフォン向けアプリ開発入門的な内容でした。
Xcode などのツール類も Flash のインターフェースやコードと比較しながらの解説だったりと、
とても分かりやすかったです。
意外と直感的な操作感なんですね、Xcode って。

深津さんのプロトタイプを Flash で実装することによって機能ベースの開発にならない、
チーム間でもオンラインでの確認作業ができる等といった部分はなるほどと思いました。
あと、Flash でプロトタイプを作っておくことで
Android 向けのアプリ開発もスムーズに対応できますね。
近いうちに iPhone もしくは Android 向けアプリを開発するつもりではいるので
自分の開発スタイル探しの参考にしようと思います。

———————————————————————————————————
demo1「Interface Builder で作る iPhone アプリ超入門」
森 巧尚氏
———————————————————————————————————

■アプリ開発に必要なもの

  • iOS SDK
  • iPhone
  • iOS Developer Program登録

iOS SDK は Flash とどう違う?
iOS SDK は複数のソフトで出来てるが、やることは Flash とほとんど同じ

  • Xcode(プログラムをつくる)
  • Interface Builder(画面をつくる)
  • iOS シュミレータ(テストをする)
  • instruments

開発を始めるとき
Xcode を起動して、ひな形を選んで開始する

画面を作るとき
Interface Builder でパーツを並べ、プロパティなどを設定(Flash とほとんど一緒)

プログラムを作るとき
ファイルを選んで、コードを記述

いろいろなパーツ

ボタン、テキストフィールド、スイッチ、スライダー
画像、Web ページ、地図、テーブルなど、よく使うものは用意されている。

■部品は名前をつけてコントロール
作った部品をプログラムでコントロールするには名前が必要

Xcode で部品の名前を作ると InterfaceBuilder 内に名前が出てくるので選択し、名前を部品とつなぐ

■iPhoneの実機で試す時の手順

  • 画面の設計
  • プログラム制作
  • ビルドと実行

キーチェーンアクセス

  • Apple iOS Dev Centerに 証明書を要求
  • 開発者の登録
  • 証明書を登録

———————————————————————————————————
demo2「Flashのスキルを基にしたiPhone/iPadアプリ制作のコツ」
深津 貴之氏
———————————————————————————————————

■Flash 使いが iPhone アプリに挑戦する理由

  • Flash はモバイルに移行する
  • UI の洗練されたアプリが少ない
  • インタラクティブな部分が重要
  • ウェブに基盤を持っている

■開発のプロセス
Adobe AIR でプロトタイプを試作 → ObjectiveC に移植

■iPhone と Flash の違い
指で操作すること

  • ロールオーバーという行為がなくなる
  • 小さすぎるボタンは押せない
  • タップには44ピクセル以上推奨(Apple のガイドライン)
  • ジェスチャー入力

入力デバイス
マルチタッチ、三軸加速度センサ、電子コンパス、マイク、カメラ

明確でなければならない

  • (ボタンなど)視覚的、内容的に明確であること
  • 説明書は存在しない
  • 移動中など、限られた時間に使われる
  • 無料のアプリはわからなければ、すぐに消される

コンテンツの更新性

  • アップデートには審査が必要
  • アプリはクライアントサイド
  • 配布は AppStore 経由のみ

■アプリケーションの分類
ユーティリティ型

  • 天気、時計など
  • 遷移が少ない
  • 表に機能、裏に設定
  • 単機能、単目的

ナビゲーション型

  • メール
  • 階層がスタックする
  • 遷移構造がツリー状

タブ型

  • AppStore
  • 主機能が並列する
  • 複雑なものは、ナビゲーションと併用
  • 大規模なアプリ用

没入型

  • ゲーム
  • オリジナル UI
  • 表に機能、裏に設定
  • 体験が重要な場合

■開発のプロセス
phone book は納品レベルまで Flash で試作し、プレゼンを通してから移植
Flash のプロトタイプ

  • メールで確認、ウェブで共有できるメリット
  • ビルド&スクラッチでの作業が楽
  • 機能ベースになりにくい
  • オンラインでのベータテスト

Packager for iPhone
iPhone の機能をフルに生かせない

■資料小ネタ
Cocos 2d

  • iPhone/iPad 用ゲームフレームワーク
  • ゲームに特化した様々な機能を提供
  • MovieClip 的な仕組みを採用
  • ゲームの半分以上で採用(らしい)

Canabalt

  • 元々は Flash で作られたゲーム
  • iPhone 版が出て 20 万本以上のヒット
  • オープンソースになった!

Flash が使えるプレイヤーとしての強み

  • FlashからiPhone、iPad、Android へと移植しやすい
  • プロトタイプ(ベータ版)を Flash や AIR で公開できる

———————————————————————————————————
demo3「AIR for Android入門」
池田 泰延氏
———————————————————————————————————

■AIR for Android とは

  • モバイル端末用のプラットフォーム
  • 2007 年 米 google が発表

Flash Player が動くのは Android OS 2.2 以上

  • SUMSUNG Galaxy S
  • HTC Desire

Adobe AIR 2.5

  • Adobe が提供するアプリケーション実行環境
  • 2010 年 10月公開
  • Flash や HTML を利用して開発

Adobe AIRランタイムをインストールする必要がある

■開発環境セットアップ
開発環境

  • AIR SDK
  • Flash Professional CS5
  • Flash Builder Burrito

Flash CS5

  • 拡張機能のダウンロード
  • 拡張機能のインストール
  • Android 端末に AIR ランタイムをインストール
  • Android 端末の設定
  • USB デバッグを有効にする
  • 提供元不明のアプリをチェックする
  • USB ドライバのセットアップ

■初めての AIR for Android アプリ

Android マーケット

  • グーグルが展開しているマーケット
  • Android OS に Android マーケットを利用する為のアプリがプリンストールされている
  • アプリ提出に関して個人法人を問わない

登録に必要なもの

  • Google アカウント
  • デベロッパー連絡先情報
  • デベロッパーの登録料 $25

■Adobe AIR 2.5 を用いたアプリ開発
マルチタッチ(タッチポイント)
2つのインプットモード

  • タッチポイント(TOUCH_POINT)
  • ジェスチャー(GESTURE)

マウスイベントはタッチイベントへ変換される
CLICK → TOUCH_TAP
MOUSE_DOWN → TOUCH_BEGIN とか

加速度センサー
実機の傾きを取得できる

GPS
位置情報を取得することが可能

カメラ

  • ネイティブのカメラ機能の呼び出しが可能
  • CameraUI クラスを使用

ライブラリ

  • ライブラリから写真や動画の選択が可能
  • CameraRoll クラスを使用

ブラウザの内蔵

  • コンテンツ内にブラウザを内蔵可能
  • StageWebView クラスを使用
  • HTMLLoader に比べて簡易的なブラウザ表示機能(スクリプトブリッジができない等)
  • DisplayObject ツリーではない

インテント
ブラウザやネイティブ Android アプリケーションからカスタム URI で呼び出しができる機能

他にも使える機能

  • ファイル読み込み、書き出し
  • マイク録音(Microphone)
  • ネットワーク状態の監視(NetworkInfo)

GPU

  • すべてのグラフィック要素は GPU でレンダリングできる
  • ビデオ(H.264)のデコードが GPU で処理できる
  • ビデオのフレームレートの向上、グラフィックのパフォーマンス、バッテリー寿命の向上

ビットマップキャッシュ

  • ベクターのランタイムビットマップキャッシュ
  • デスクトップでは移動のみ有効だった
  • GPU ではスケール・回転もサポート

GPUの注意点

  • フィルターはサポートされない
  • 一部ブレンドモードがサポートされない
    (レイヤー、アルファ、消去、オーバーレイ、ハードライト、比較)
  • PixelBender のブレンド、および塗りはサポートされていない

H.264 ビデオのハードウェアデコード

  • H.264 ビデオをハードウェアでデコード可能
  • H.264 ビデオのすべてが HW をサポートされているわけではない

ハードウェアデコードを利用するには

  • H.264 プロファイルは baseline を利用する(main や high プロファイルは使用しない)
  • 解像度はデバイスごとにデコード可能な解像度が異なるので注意が必要(一般的なサイズを使用する)

参考サイト

書籍
「Flash ではじめる Android アプリ開発入門」発売予定

2 Comments

  1. 昨日プレゼンしたiPadアプリのサンプルは、Cocos 2dを使って作ってもらったんですが、ゲームっぽいものも余裕で動いていて凄かったですよ~。自分でも試してみたくなりました。(;´∀`)
    AIR for Androidは全然勉強してなかったので参考になりました~。Android案件は今後必ず増えると思うので、僕もがんばって勉強しようと思いますw

    コメント by tatzuro — 2011年2月3日 10:17

  2. おぉ、Cocos 2dを利用したんですね。
    僕はまだObjectCなど手つかずなので、ゲームは敷居が高そうですが、
    近々友人のiPhoneアプリ開発を手伝う予定なので開発の感じを掴めればと思っています。

    AIR for Androidの方は、Flashベースで開発できることもあって、
    今までのスキルを活かせていいですよね。
    それでもGPUやビットマップキャッシュなど、
    スマートフォンやタブレット向けに最適化が必要なようです。
    ここら辺は経験値によるところが大きそうです。
    それよりなにより、実機がほしいですw。

    コメント by littlepad — 2011年2月3日 10:38

TrackBack URL

Leave a comment

about

ハンドルネーム:littlepad
都内で WEB 制作(デザイン, html/css, Flash, MT, WordPress etc)をしているBOØWY研究家

category:

search:


archives:

GO TO PAGETOP