2013年9月12日木曜日

Percona Server 5.6.13 で mroonga を使ってみた - CentOS 6 64bit

Percona Serverのインストールは省略。

・Perconaはレポジトリから。mroongaコンパイルのために同一バージョンのソースコードが必要になる。
・groonga、groonga-normalizer-mysql、groonga-normalizer-mysql-devel はレポジトリから。
・mroongaもコンパイルする。


--- Percona Server ソースコードの用意(コンパイルはしない)
# ここで最新版のソースコードを確認する
# http://www.percona.com/downloads/Percona-Server-5.6/LATEST/source/

wget http://www.percona.com/redir/downloads/Percona-Server-5.6/LATEST/source/Percona-Server-5.6.13-rc60.5.tar.gz
gtar xfz Percona-Server-5.6.13-rc60.5.tar.gz


--- mroonga ソースコードの用意(groongaを入れてからコンパイルする)
# ここで最新版のソースコードを確認する
# http://packages.groonga.org/source/mroonga/

wget http://packages.groonga.org/source/mroonga/mroonga-3.07.tar.gz
gtar fxz mroonga-3.07.tar.gz


--- groonga インストール
rpm -ivh http://packages.groonga.org/centos/groonga-release-1.1.0-1.noarch.rpm
yum makecache
yum install -y groonga groonga-devel
--- MeCabトークナイザインストール
yum install -y groonga-tokenizer-mecab
--- ipadicインストールはMeCabトークナイザと共に入る
yum install -y mecab-ipadic
--- utf8_general_ciを使う
yum install -n groonga-normalizer-mysql groonga-normalizer-mysql-devel


--- mroonga インストール
yum install gcc
yum install gcc-c++
cd mroonga-3.07

env GROONGA_CFLAGS="-I/usr/include/groonga" GROONGA_LIBS="-L/usr/lib64 -lgroonga" ./configure --with-mysql-source=../Percona-Server-5.6.13-rc60.5

make install
mysql -uroot -p -e "INSTALL PLUGIN mroonga SONAME 'ha_mroonga.so'"
mysql -uroot -p -e "CREATE FUNCTION last_insert_grn_id RETURNS INTEGER SONAME 'ha_mroonga.so'"
mysql -uroot -p -e "CREATE FUNCTION mroonga_snippet RETURNS STRING SONAME 'ha_mroonga.so'"
mysql -uroot -p -e "CREATE FUNCTION mroonga_command RETURNS STRING SONAME 'ha_mroonga.so'"

おしまい。


////////////////////////////////////////
動作確認

--- テーブル作成
SET @OLD_UNIQUE_CHECKS=@@UNIQUE_CHECKS, UNIQUE_CHECKS=0;
SET @OLD_FOREIGN_KEY_CHECKS=@@FOREIGN_KEY_CHECKS, FOREIGN_KEY_CHECKS=0;
SET @OLD_SQL_MODE=@@SQL_MODE, SQL_MODE='TRADITIONAL,ALLOW_INVALID_DATES';

CREATE SCHEMA IF NOT EXISTS `mydb` DEFAULT CHARACTER SET utf8 COLLATE utf8_general_ci ;
USE `mydb` ;

-- -----------------------------------------------------
-- Table `mydb`.`table1`
-- -----------------------------------------------------
CREATE TABLE IF NOT EXISTS `mydb`.`table1` (
  `id` INT NOT NULL AUTO_INCREMENT,
  `table1col` TEXT NULL,
  PRIMARY KEY (`id`),
  FULLTEXT INDEX `index2` (`table1col` ASC))
ENGINE = mroonga;


SET SQL_MODE=@OLD_SQL_MODE;
SET FOREIGN_KEY_CHECKS=@OLD_FOREIGN_KEY_CHECKS;
SET UNIQUE_CHECKS=@OLD_UNIQUE_CHECKS;


--- INSERT
INSERT INTO `mydb`.`table1` (`table1col`) VALUES ('いろはにほへとちりぬるをわかよたれそつねならむうゐのおくやまけふこえてあさきゆめみしゑひもせす');
INSERT INTO `mydb`.`table1` (`table1col`) VALUES ('あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやいゆえよらりるれろわゐうゑを');

--- SELECT
SELECT (@HOGE := MATCH(table1col) AGAINST('あいうえお あ' IN BOOLEAN MODE)) AS point, id, table1col FROM table1 WHERE @HOGE ORDER BY point DESC


WHERE @HOGEのところが本来はMATCH(table1col) AGAINST('あいうえお あ' IN BOOLEAN MODE) となるところなんだけど、マッチ度も表示してみたので2度書かなくて済むように@HOGEという別名で扱っている。

エラーもワーニングも無く動作したのでおしまい。

追記 2013/09/30:
初めて使う時にWHERE @HOGE だと検索に引っかからないので、
WHERE MATCH(table1col) AGAINST('あいうえお あ' IN BOOLEAN MODE)
と記述しておいた方がいいようです。


////////////////////////////////////////
省略したPercona Serverのインストール方法。

--- Percona Server 5.6
# MySQLはアンインストールしておく。
rpm --import http://www.percona.com/downloads/RPM-GPG-KEY-percona
rpm -Uhv http://www.percona.com/downloads/percona-release/percona-release-0.0-1.x86_64.rpm
# shared-compatは5.5と5.6で同じ。ただ将来的に5.6の名前を用意するかもしれない。
yum install Percona-Server-{client,devel,server,shared}-56
yum install Percona-Server-shared-compat

service mysql start

chkconfig mysql on

--- $HOME/.mysql_secretに初期rootパスワードが書いてある
cat /root/.mysql_secret
mysql -uroot -p

mysql> SET PASSWORD FOR root@localhost=PASSWORD('hoge');
mysql> exit

--- MySQL5.6での my.cnf はこちら
cat /usr/my.cnf

--- 古い /etc/my.cnf は消しておく
mv /etc/my.cnf /etc/my.cnf.old

--- mysql upgrade/update ここはやらなくてもいい。
mysqlcheck -uroot -p --check-upgrade --all-databases --auto-repair
mysql_upgrade -uroot -p


yum list | grep Percona
Percona-Server-client-56.x86_64         5.6.13-rc60.5.417.rhel6         @percona
Percona-Server-devel-56.x86_64          5.6.13-rc60.5.417.rhel6         @percona
Percona-Server-server-56.x86_64         5.6.13-rc60.5.417.rhel6         @percona
Percona-Server-shared-56.x86_64         5.6.13-rc60.5.417.rhel6         @percona
Percona-Server-shared-compat.x86_64     5.5.33-rel31.1.566.rhel6        @percona
...


--- おまけ
groonga-normalizer-mysql-devel が無いとSQL実行時に
Error Code: 138. NormalizerMySQLGeneralCI normalizer isn't found for utf8_general_ci. Install groonga-normalizer-mysql normalizer. NormalizerAuto is used as fallback.
というエラーやワーニングが出ます。
groonga-normalizer-mysql-devel をインストールしてから mroonga をコンパイルすることで解決できます。
pkg-config --list-all | grep groonga-normalizer-mysql
を実行すると、pkg-config で groonga-normalizer-mysql が見つかるか確認できます。
また、 mroonga の configure 実行時に
checking for groonga-normalizer-mysql... yes
を見ることで確認できます。

2013年9月2日月曜日

Blenderで作ったモデルをスマフォブラウザで表示しよう!

みなさん、こんにちは!
GClueの下っ端社員の星です。

今回は、弊社で作成中のライブラリを使ってBlenderで作ったモデル(objファイルを表示してみたいと思います!!

Blenderは、フリーのモデリングツールです。
こちらからダウンロードできますので、興味がある方はダウンロードしてみてください。
http://www.blender.org/download


Blenderで、以下のようなモデルを作成しました。
詳しい操作の仕方は、他のサイト様を探せば出てきますので、そちらで覚えて下さい。
以下の画像で、上の図がモデルにマッピングされたテクスチャで、下が作成したモデルになります。
 汚らしい出来で申し訳ないです^^;

テクスチャを出力する場合は、Blenderの標準のやり方でいいのですが、objファイルを出力する場合は、こつがいります。
 以下のように項目を設定します。
左の赤枠のチェック項目で、以下にあげる項目を設定します。

  • Apply Modifiers
  • Include Edges
  • Include Normals
  • Include UVs
  • Triangulate Faces
  • Object as OBJ Object
その状態でExport Objをクリックしてobjファイルを生成します。
そして、テクスチャファイルとobjファイルを以下のようにCloud9にアップします。 
そして、index.htmlをPreviewし、そのアドレスをスマートフォンのブラウザ(Chrome)で実行した結果が以下のようになりました。ちなみに、Nexus7を使用しました。


まとめ

  • 簡単なモデルを弊社ライブラリを使ってスマフォブラウザ上で表示できた。
  • テクスチャが1枚だけ、objファイルの出力に制限があるが、スマートフォンのブラウザのスペックにも制限があるであろうし、別に気にならないほどのものではないだろうか?

2013年8月19日月曜日

FirefoxOS(ALCATEL onetouch)のWebGL&WebAudio調査

みなさん、ごきげんよう!
GClueの下っ端社員の星です。

今回はまた新しくFirefoxPhoneがうちの会社に届きました!!
その写真がこちらです。

 炎のきつねがカッコイイですね!
どことなく、iPhone4みたい・・・というのは内緒の話。
ちなみに、その二つを比較した写真がこちら。
皆さんは、どちらがFirefoxPhoneかわかりますか?
ちなみに、シールは引っかけではなく、右がFirefoxPhoneです。

そして、今回はこの新しく来たFirefoxPhone(ALCATEL onetouch)のWebGLとWebAudioを調査してみたいと思います。

調査に使用するのは、前回(ZTE Movistar)のときに使ったWebページを使用します。

ALCATEL onetouchは、FirefoxOS 1.0.1.0を使用しています。

WebGL

 結果を表した動画がこちらになります。
右がNexus7のChromeとの比較になります。
同じ回転速度ですが、やはりFirefoxPhoneの方の回転速度が遅れています。

ちなみに、FirefoxPhoneの場合は、パッケージングアプリもブラウザと同じ動きになりました。


WebAudio

 WebAudioを使った簡単なプログラムとして、太鼓アプリを作成しました。
画像を叩くと音がなるという単純なプログラムですが、Nexus7のChromeでは音が鳴ったのに対し、FirefoxPhoneではWebAudioが使えないためか真っ黒な画面が表示されるだけでした。ちなみに、ブラウザ、パッケージングアプリ共に同じ動きでした。


まとめ

  • FirefoxOSデバイスは、まだまだHTML5やWebGLの対応が不足していると感じました。
    • FirefoxOSのCPUが1GHzであったり、スペック的に不足しているのでその差が出ている?

2013年8月5日月曜日

FirefoxOSとTizenとBlackBerry10のPackageアプリの比較(その3: BlackBerry10編)


その1 FirefoxOS編
その2 Tizen編
その3 BlackBerry10編

それでは次はBlackBerry10のパッケージ型アプリについて解説する。

BlackBerryは、HTML5アプリ向けにWebWorksという環境を用いておこなう。

まず、WebWorks SDKをダウンロードしてくる。

次にRipple emulatorをダウンロードし、Chromeに組み込む。
アドレスバーに
chrome://extentions
と入力しエンターを押す。


ダウンロードしたRipple Emulator、ripple_ui.crxを拡張機能画面にドラック&ドロップする。


追加ボタンを押し、Ripple Emulatorを追加する。

アドレスバーの横にRippleというIconが出てこいたら成功。


それでは、/User/ユーザ名/RippleSites 以下にBlackBerry10向けのWebWorksのプロジェクトを作成する。今回はHelloWorldというプロジェクトを作成する。






$lt;?xml version="1.0" encoding="UTF-8"?>
<?xml version="1.0" encoding="UTF-8"?>
<widget xmlns="http://www.w3.org/ns/widgets" 
  xmlns:rim="http://www.blackberry.com/ns/widgets" 
  version="1.0.0.0" 
  id="HelloWorldApp">
    <name>helloWorld</name> 
    <author>My name</author>
    <description>The classic first app</description>
    <icon src="icon32.png"/>
    <content src="index.html"/> 
</widget>

<html>
 <body>
 Hello BB10
 </body>
</html>
RippleのIconを押して、Enableを選択する。


Start Ripple Servicesを選択し、Rippleを起動する。


http://localhost:9910/HelloWorld/index.html
に接続する。うまくいけば、Rippleの利用規約がでてくる。


BlackBerry 10 WebWorks(1.0.0)を選択する。


これで、Ripple Emulatorが起動される。起動はこんな感じ。









FirefoxOSとTizenとBlackBerry10のPackageアプリの比較(その2: Tizen編)

その1 FirefoxOS編
その2 Tizen編
その3 BlackBerry10編

Tizenでのパッケージ型アプリ開発は、Tizen IDEで行う事ができる。FirefoxOS, BB10の中では一番開発環境がしっかりしている。

Tizen SDKは下記URLからダウンロードしてくる。

https://developer.tizen.org/downloads/tizen-sdk

Tizen IDEを起動し、[File]-[New]-[Tizen Web Project]を選択する。


[Basic]を選択する。


TizenのIDEのパッケージ型アプリが生成される。


Tizenのパッケージ型アプリで必須なのが

config.xml
icon.png
index.html

になっている。


<?xml version="1.0" encoding="UTF-8"?>
<widget xmlns="http://www.w3.org/ns/widgets" xmlns:tizen="http://tizen.org/ns/widgets" id="http://yourdomain/HelloTizen" version="1.0.0" viewmodes="maximized">
    <tizen:application id="LxJtz5PaU5.HelloTizen" package="LxJtz5PaU5" required_version="2.2"/>
    <content src="index.html"/>
    <icon src="icon.png"/>
    <name>HelloTizen$lt;/name>
</widget>

FirefoxOSとTizenとBlackBerry10のPackageアプリの比較(その1: FirefoxOS編)

その1 FirefoxOS編
その2 Tizen編
その3 BlackBerry10編

FirefoxOSやTizen、BlackBerry10では、HTML5+CSS3+JavaScriptをパッケージして、ストアで配信する事ができるようになる。

各OS毎に、パッケージ型アプリの作成方法を解説していく。

FirefoxOS
FirefoxOS向けアプリを作る場合、

  • ホスト型アプリ
  • パッケージ型アプリ

の2パターンでおこなう事ができる。ここではパッケージ型アプリの作り方を解説する。

FirefoxOS向けパッケージ型アプリケーションは、コンテンツの中身であるpackage.zipと、download.htmlとpackage.manifestから構成される。package.zipには、manifest.webppとindex.htmlなどから構成される。



まずは、package.zipから作成する。これがFirefoxフォンにダウンロードされるアプリ本体になる。

package.zipを以下の構成で作成する。

   

<html>
<body>
Hello FF
<body>
</html>
{
  "version": "1.0",
  "name": "Hello FF App",
  "description": "description",
  "launch_path": "/index.html",
  "icons": {
    "16": "/icon/icon16.png",
 "32": "/icon/icon32.png",
 "256": "/icon/icon256.png"
   },
  "developer": {
    "name": "GClue, Inc.",
    "url": "http://www.gclue.com"
  }
}
これらのファイルをZIPで固めて、package.zipを作成する。


{
  "name": "Hello FF App",
  "package_path": "http://aizu.gclue.jp/ff/package.zip",
  "version": "1.0"
}
<html>
  <body>
    パッケージ型アプリのインストールページ


    <script>
      var manifestUrl = 'http://aizu.gclue.jp/ff/package.manifest';
      var req = navigator.mozApps.installPackage(manifestUrl);
      req.onsuccess = function() {
        alert(this.result.origin);
      };
      req.onerror = function() {
        alert(this.error.name);
      };
    </script>
  </body>
</html>




2013年8月2日金曜日

FirefoxOS(ZTE Movistar)のWebGL調査

みなさん、ごきげんよう!
GClueの下っ端プログラマーの★です。

うちの会社に、ようやくFirefoxOS端末が届きました!
それが、こちらです!

見た感じ、近未来的なフォルムがかっこいいですね!

FirefoxOSといえば、TIZENと同じようにHTML5やWebGLが動きます。
というわけで、今回はFirefoxOSのWebGLについて調査していきたいと思います。


調査内容

 今回調査用のプログラムをCloud9を使って作成しました。
ワタクシ、プログラマを名乗っておりますが、WebGLは全くわかりません!!(えっへん
というわけで、現在うちの会社で開発中のライブラリを使ってWebGLを使ったプログラムをJavaScriptで簡単に作成しました。
その様子をPC上のブラウザ(MacBookPro上のChrome)で動かしている様子がこちらになります。

 プリミティブな立体が回っております。これをTIZEN,Android,そしてFirefoxOSのブラウザ上で実行してみましょう。

調査結果

 調査の様子を比較した動画がこちらになります。

 やはり、Android(Nexus7,AndroidOS4.3)のChromeで動作させているのが一番速いですね。TIZEN(2.2)のブラウザも中々速いっす。
ちなみに、左からFirefoxOS,TIZEN,Androidになります。

一方、FirefoxOS(OPEN_FFOS_V1.0.0B04_TME)は・・・、ちょっと、動きが遅いですね。


まとめ

  • FirefoxOSはまだまだ改善の余地あり
    • OSのバージョンが古いだけ?
  • TIZENも中々速い。
  • でも、やっぱりAndroid+Chromeが良かった(Nexus7を使っていたからというのもある?
  • iOSもWebGL対応はよう!!

HTML5+WebGLが動く端末も、PCブラウザ並みに動くようになってきました。
もう少しでPCブラウザ並みのWebGLのゲームがプレイできそうな気がしました。
これからのスマートフォンブラウザの動向に注目しなくては!!

2013年7月29日月曜日

Raspberry Pi wheezy rasbian に node.js と Cloud 9 IDE を入れてみた

Raspberry Pi  wheezy rasbian に node.js と Cloud 9 IDE を入れてみた


$ sudo apt-get update
$ sudo apt-get -y upgrade
$ sudo apt-get -y install build-essential openssl libssl-dev pkg-config libxml2-dev
$ cd ~ && git clone https://github.com/ajaxorg/cloud9.git cloud9
$ cd cloud9 && mkdir node_modules && cd node_modules
$ git clone https://github.com/ajaxorg/node-libxml.git libxml
$ cd libxml && git checkout v0.0.7 && git submodule init && git submodule update
$ sed -i -e "s/'-msse2',//" support/o3/wscript

$ cd ~
$ wget http://nodejs.org/dist/v0.8.22/node-v0.8.22-linux-arm-pi.tar.gz
$ cd /usr/local
$ sudo tar xzvf ~/node-v0.8.22-linux-arm-pi.tar.gz --strip=1

$ cd ~/cloud9 && npm install


次のエラーが発生した場合は、
npm ERR! cb() never called!
npm ERR! not ok code 0

npmのキャッシュを削除して何度かトライする
$ npm cache clean
$ npm install

インストールできたらcloud9を起動して確認しみてる
$ bin/cloud9.sh -l 0.0.0.0
確認
http://<raspberry-pi-ip-address>:3131/

---
# 酸素アレルギー?


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を使ってワンダフルなアプリをデベロップしてみてはどうでしょうか。