2013年7月26日金曜日

Tizen Developer Lab 東京 に参加してきました!

こんにちは
先日ゲリラ豪雨と思う存分戯れてきたみかんです。

本ブログは主にHTML5に関するネタを掲載していくブログになります。
以後よろしくお願い致します!

さて、今回はインテル主催で開催されたTizen Developer Lab 東京へ行って来ました。
その時の簡単なレポートをお送りしたいと思います。

イベントは夕方からでした。Tizen SDKの入ったノートパソコンを持ってくるといいよとのことなのでSDKインストール済みのMacBookAirを持って出陣です。

会場はフクラシア東京ステーション5Fの会議室。
広々としたスペースで、席のそばには電源タップ完備。

スクリーンには発表用のスライド

会場の後ろにはサンドイッチと飲み物がありました


セミナーの前半はTizenの概要やTizen Webアプリ、Tizenストアについて解説が行われ、後半では実機を用いてSDKの操作やサンプルアプリの作成などを行いました。

各発表につき一つのスライド資料が配られました。それを元にかいつまんで記載していこうと思います。

Tizen Overview

Tizenの概要についての発表です。

Tizenはオープンソース・ソフトウェアの組み込み機器向けのOS。
モバイルだけでなく、IVI((車載情報機器)などマルチデバイスに対応していることが強調されていました。
一番のポイントはなんといってもHTML5との親和性!
TizenはHTML5対応には特に力を入れているようで、HTML5のスコアを測定するサイトでは迫力のある数値を叩きだしているようです。

リンク先を見てみると、VideoやFormsなどの対応力が際立っていますね。

Tizenは大きく分けてMobileとIVIに分かれていて、今のところはMobileのみ開発ができるようになっているとのこと。

TIZEN MobileはWebアプリケーションNativeアプリケーションに分かれています。

Webアプリケーションの特徴
  • HTML/JavaScript/CSS
  • W3C ウィジェットパッケージ
  • Web アプリケーションからデバイス機能へのアクセス
  • 最新のHTML5機能をサポート
Nativeアプリケーションの特徴
  • 複雑なグラフィック、レンダリング
  • センサ情報などを使ったユーザーエクスペリエンスの向上
  • Web Appとのハイブリッド化

アーキテクチャはこれですね。

APIはノンブロッキングなのでAPIがこけてもアプリケーションは落ちないとか。
多数のオープンソースライブラリを利用しているので移植もしやすいそうです。

Hybridアプリケーションというものも作ることができて、これはサービスにNativeを使ってUIをWebのもので構築するということだそうです。開発者のニーズに合わせた開発ができるということですね。

公式のリンク集も。
ピーシーフェーズさんが運営しているTIZENの最新情報をお届けするサイト

TIZEN STORE SELLER OFFICE

アプリケーションストアについての説明もありました。

個人としても法人としても、簡単な情報を入力するだけでもう登録はできるとのこと。
有料アプリを出す場合はもう少し情報が必要になるようで、

共通して必要なもの
  • 預金出納帳

個人の場合
  • 身元保証書

法人の場合
  • 事業者登録認定書

などが必要のようです。

指定する銀行口座ですが、今のところ米ドルを受領及び送金できるところでないと駄目だそうで、円への対応は準備中とのことです。

アプリケーションの登録は、アプリ名やバイナリ、対応デバイス情報や販売情報、カテゴリ情報などを入力して行います。

価格はアメリカのドルで基本のドルを選択しますが、国ごとに選択することもできるそうです。

登録完了すると検証プロセスがスタートして、問題なければ3日くらいで終わるとか。

細かいことは実際にサイトに見に行ったほうが早いですね。
http://seller.tizenstore.com/login/signIn.as

それとTIZEN APP CHALLENGEの説明もありました。
https://developer.tizen.org/ja/contests/tizen-app-challenge
賞金総額400万ドルのビッグイベントです。登録は11月1日まであります!

セミナーの前半はここで終わりで、休憩前に質問タイムがありました。

[Q&A一覧]

Q. 販売業者登録の身元保証書とあるが具体的には?
A. 免許証のコピーの写真等。日本で身分証明書として使えるものなら大丈夫

Q. Android、iOSともにマーケットに出すには登録料がかかり、アプリのダウンロードごとにも手数料が取られるがTIZENでは?
A. 基本的には登録料などはない予定。ダウンロードの手数料は将来的には3割くらいを予定しているが、まだ1年くらいは0%!

Q. バイナリを登録とあるがアーキテクチャごとに用意する必要がありますか?
A. 今のところはarmだけ。将来的にはLLVMによってプロセッサに依存しないようにするつもり(ストアでコンパイルするとか?)

Q. iOSで言うAdhocのような事前配布の仕組みはありますか?
A. そのような制度はまだ整っていない

こんな感じでした。

休憩時に、TIZEN OS搭載の実機の貸出が行われたので早速借りて来ました!

端末の入った箱


御開帳

箱の中身を全部出しました


組み立てておもむろに起動
国と時刻を設定するためのボタンがあります


サクッと設定


準備が整ったのでスタートします

Wi-Fi接続用画面へ

とりあえずこれで完了のようです

ロック画面のお出迎え

ロックを外すとホーム画面が表示されました


サクッと起動したように思います。

さて、セミナーの後半ですが主にSDKの解説とサンプルコードを使ったデモが行われました。

Introduction To the Tizen SDK

Tizen SDKはEclipseをベースに作られています。
SDKではTizen Web アプリケーション、Tizen Nativeアプリケーションの2種類のアプリを作成することができます。

それではSDKのいくつかのスクリーンショットを掲載します。


Tizen IDE のレイアウト

左下のConnection explorerでは、接続されている実機またはエミュレータが表示されます。

Webシミュレータ

WebシミュレータはChromeベースの高速シミュレータで、ビルドが不要です。回転やネットワークなど各種デバイス機能のシミュレートが可能になっています。


エミュレータマネージャー
SDK2.2になってエミュレータマネージャーが新しくなりました。Inten VT-x(仮想化支援機能)対応で高速動作を実現しています。

イベント インジェクタ

イベントインジェクタでは、エミュレータに主導で各種イベントを起こすことができます。

UIビルダー

UIビルダーではUIレイアウトのコードをGUIから自動生成できます。(WYSIWYG)
「Tizen Web UI Builder Project」で新規作成することで利用できます。


次に基本的なプロジェクトのファイル構成を見てみましょう。

左がBlank templateのファイル構成で
右がTizen Web UI Builder templateのファイル構成です。


  • config.xml : アプリ情報全般
  • index.html : スタートページ
  • icon.png : アプリアイコン
  • main.js : メインのjavascriptファイル
  • style.css : CSSファイル
  • page : 1ページを構成する各種ファイル(html,css,js)の集合
  • app.xml : ページやイベントを管理するファイルの集合
  • tizen-ui-builder-fw : UIビルダーによって自動生成されるフレームワークファイル
  • tizen-web-ui-fw : Tizen Web UI Framework ライブラリ
この中で重要なconfig.xmlについてもう少し見ていきます。以下はconfig.xmlを選択して表示される各タブ(一部)のスクリーンショットになります。


config.xml - Feature

Featureは動作に必須の機能を選択します。この情報はTizen Storeでのフィルタリング等に使われます。

config.xml - Privileges
Privilegesはユーザに使用確認を求める必要のある機能を選びます。

config.xml - Policy
Policyはアプリのセキュリティに関する項目で、CSP(Content Security Policy)とAccessの2つがあります。CSPは新しいfirefoxとかにも入っているようです。これらの設定でドメインで指定するなどして、jsは自分のサイトからのみ実行などのような指定ができます。指定外のURLにアクセスすると外部ブラウザが開いたりするような挙動になるそうです。

他にも、SDK2.2からではアプリをエミュレータまたは実機に入れる時に必要だった署名ファイルの作成がIDE上で完結するようになった等の変更があったようです。

ざっとSDKの様子を眺めてきましたが、開発に役立つ機能はかなり充実している印象を受けました。特にUIビルダーで視覚的にデザインを行えるようになっている所などは魅力的だと思います。

Sample App: Tizengram

セミナーの最後では実際にサンプルアプリの作成を追ってTIZENの動きを見て行きました。codezineにも掲載されたサンプルのようです。
サンプルアプリはTizengramというアプリで、今回の資料およびWGTファイルは
http://goo.gl/mbl3R
にて配布されています。

資料にしたがって、落としたWGTをEclipseでImportすればサンプルアプリのソースを見ることができます。

[WGTファイルのインポート]

  • File > Import > Tizen > Web Projects and Widget File
  • Select Widget Fileでwgtファイルを選択
  • Finish


このサンプルでは、写真を取りそれを加工しtwitterにアップするという処理を行うことができます。
(自分はtwitterへアップロードする下りがなぜかうまく行きませんでしたが。。。)

資料のStep1とStep2について軽く実践してみました。

Step1:jQueryMobileでページを3つ作る
Step2:Inputタグで画像を取得し、取得したらページ遷移する

以下、作業手順です。
  • File > new > Tizen Web Project
  • Template > jQuery Mobile Multi Page Application
  • 適当に名前をつけて作成
index.htmlとmain.jsを以下のように編集します。

index.html

main.js




以上の編集が完了後にアプリを実行すると、ボタンを押してカメラ撮影してそれが2ページ目に表示されるというサンプルができあがります。
Step3で行うはずの画像縮小などをしていないのでとても大きい画像が表示されますがとりあえずはここまでにしておきます。

ダウンロードしたサンプルアプリのソースを元に残すStepを消化していくと、さらに理解が深まると思います。

まとめ

Tizenアプリの作成に関しては、リアルタイムに画面を確認できるシミュレータなどの充実したSDKの機能と、既に広く浸透しているWebの技術を利用できることから、非常に開発の工数を削減できるのではないかとのこと。

数多くのライブラリがアプリに転用できることの強みは大きいですね。
Processing.jsがあったり(canvasの画像処理にフォーカス)、SocialAPIも豊富にあったり、という具合ですね。そしてDeviceAPIでファイルシステム等の端末機能へもふんだんにアクセスできると。

くどいようですがTIZEN APP CHALLENGEもありますので、モバイルアプリ開発に興味のあるWeb開発者の方や既にAndroidアプリやiOSアプリの制作に携わっている方などは新しくなったTIZEN SDK 2.2を使ってワンダフルなアプリをデベロップしてみてはどうでしょうか。

0 件のコメント:

コメントを投稿