Android Techfirm Lab

Share

ブラウザーだけでAndroidとiPhoneの両方で動くアプリができちゃう！それもプログラミングなしで！というので、早速、話題のモバイルネーション試してみました！

Share

仕事ではiアプリが中心だったのですが、Androidでは、早くもHTML5が使えるんですって！（え？ワタシ遅れてる？）

それじゃ、早速HTML5で絵を描いてみましょうネ！直線や曲線を自由に使って描けるようなので、まずは円で描ける、アレですよね～続きを読む

Share

はじめまして、koyamaです。

今回は、Androidから少しはずれますが、Webページのスマフォ対応についての記事です。

スマートフォンでWebページを閲覧する人も増えている昨今、スマートフォンのブラウザに最適化されたサイトも増えています。
このブログも使っている「WordPress」ではプラグインを導入することで、簡単にスマートフォンのブラウザに最適化されたサイトを作ることができます。
数あるプラグインのなで、「WPtouch」と「MobilePress」の2つのプラグインを取り上げ、違いを比較していきます。

スクリーンショット

下のイメージが、デフォルト設定で導入した場合のスクリーンショットです

WPtouch

WPtouchはiPhoneアプリのデザインが意識されています。

MobilePress

MobilePressはシンプルな表示で、どんな端末でも綺麗に表示できそうです。

導入

両プラグインは通常のWordPressプラグインと同様に簡単に導入することが可能です。
1.サイトからプラグインをDL
http://wordpress.org/extend/plugins/wptouch/
http://mobilepress.co.za/
2.圧縮ファイルを解凍し、フォルダを「/wp-content/plugins/」に配置
3.管理画面の「プラグイン」メニューから、プラグインを有効化する

管理画面からの設定

WPtouch

「設定」メニュの中に新しく「WPtouch」が追加されています。
ブログタイトル、記事の表示項目、テーマの変更、アイコンの変更など、細かく設定できます。

MobilePress

メニューのなかに「MobilePress」が追加されます。ここではブログタイトルぐらいしか設定することはできません

テーマの変更

WPtouch
WPtouchの設定画面から、背景、タイトルフォント、タイトルカラー、リンクカラー、ヘッダーカラーを指定することができます。
しかし、テーマを替えることはできないので、デフォルトのテーマを変えたい場合はソースコードを編集する必要があります。
また、複数のテーマの管理、切り替えも無料版では行うことができません。さらに、プラグインをアップデートすると、独自に編集した内容が上書きされてしまうので注意が必要です。
優良版の「WPtouch　Pro」では複数テーマの保持や、広告挿入などの機能を利用することができます。
優良版とFree版の機能比較は公式サイトでご確認ください。http://www.bravenewcode.com/store/plugins/wptouch-pro/

MobilePress
MobilePressのテーマを変更する方法は、ソースコードを編集するしかありません。
しかし、通常のWordpressテーマのように複数のテーマの切り替えも可能です。また、WPtouchよりもシンプルにできていることから、編集するのもWPtouchよりは簡単です。

まとめ

今回紹介した「WPtouch」と「MobilePress」の2つのプラグインは、どちらも簡単に導入できデフォルト設定のまま使うことができます。

iPhoneを意識したWPtouchはデフォルト状態で、十分リッチなページになります。
MobilePressはシンプルで、テーマの編集もしやすく、テーマの切り替えも簡単です。

どちらのプラグインがあなたのイメージするブログのスタイルでしょうか？

Share

みなさんこんにちは。今回記事を担当するkudoです。テックファーム社内ではなるべく日の当たらないところでAndroid開発をしているつもりだったのですが、ある日突然Y部長から声がかかり、気付いたら記事を書くことになっていました(苦笑)。ということでこれからボチボチ記事を書くことになりますので、お付き合い頂けると幸いです。

Javascriptの重要性が日増しに高まっている

巷ではHTML5がトレンドのまっただ中。古くはブラウザ上の簡易スクリプト言語だったJavascriptがWebアプリケーションにとってなくてはならない存在になって久しく、先日このブログで紹介した「Titanium Mobile」のような開発環境としてAndroidのネイティブアプリを作るために利用されたりもしています。今回の記事のテーマも、そんな話題のJavascript。テーマは「スマートフォンでJavascriptをどこまで使い倒すか！？」というものです。

ところで。このままだとあまりにも抽象的過ぎるので、ちょっと視点を変えてテーマの再定義を行うことにしましょう。「スマートフォンでJavascriptを使い倒す」ということは、「スマートフォンのJavascriptの限界に挑む」ということ。「スマートフォンのJavascriptの限界」とは「スマートフォンの限界」でもあり、結局「Javascriptからroot権限でシェルコマンドを発行できれば何でもできる！！！」ということです。

…なんか強引な気がしないでもないですが気にしてはいけません。世の中そんなものなんです。

本記事の目標と前提

今回の記事の目標と前提を示します。

目標）

Javascriptからroot権限が必要なシェルコマンドを発行し、Android OSに実行させる

前提）

Android端末はrootedされている
suするためのバイナリがインストールされている

→この前提を満たす端末として、「CyanogenMod 6.1.1」がインストールされている「Nexus One」にて動作確認を行いました。

考え得るrootを取得する方法

本題に入ります。「Javascriptからroot権限を要求する」とはいうものの、Javascriptも結局はブラウザ上のJavascriptエンジン上で動作するスクリプト言語。そのためroot権限を要求するには、パッと思いつく手段として二つの方法が考えられます。

Javascriptからブラウザ（の上で動作するJavascriptエンジン）に対してroot権限を要求する

→ブラウザ自身がrootを取得するAPIをJavascriptに公開…なんてことは私が知る限りしていませんので、この方法を実施できるとすればブラウザに存在するかもしれない「権限昇格」が可能なセキュリティホールをJavascriptで突くことになるでしょう。当然リスキーな方法であり、仮にこの記事を書くにあたってそんなものを見付けていたら、記事に書かずにOHAのセキュリティ担当部門に連絡しているところです。ということでこの方法はパス。

ちなみに話が逸れますが、iPhone 3GSではJavascriptからJailbreak（=rooted）する方法があるそうです。興味がある方は調べてみると面白いかも？
WebViewを持つアプリ上でJavascriptからJavaのAPIを呼び出し、そのAPI上でroot権限を要求する

→root権限が必要なアプリがrootを要求するのに実装している方法です。この方法が現実的でしょう。

Java上でroot権限を要求する

2つ目の方法に決めたので、早速Java上からroot権限を要求してみたいと思います。といってもこれは非常に簡単っ！以下の通りです：

RootingJSBridge.java

たったこれだけで、アプリはroot権限のプロセスを生成できてしまいます（次に説明しますが、このクラスのメソッドをJavascriptから呼び出すことになります）。はいっ、次っ！

JavascriptからJavaのAPIを呼び出す

これはよくあるコードですね。アプリにWebViewを組み込み、その上でJavascriptを走らせ、JavascriptからJavaを呼び出す手順です。具体的には以下の通りです：

RootingJSActivity.java

index.html（断片）

やっていることは、

WebView上でJavascriptの実行を許可する
WebView上のJavascriptへ公開するAPIを持つオブジェクトを設定する
Javascriptから(2)で設定されたオブジェクトを呼び出す

という感じ。このあたりは他のサイトもあたってみるのがよいでしょう。

JavascriptからJavaへコマンドの実行を要求する

root権限でないと実行できないコマンド…というと皆さんは何を思い浮かべられるでしょうか。さんざん悩んだ挙げ句、この記事では「killコマンド」を選びました。

またまた話が逸れますが、Androidであるアプリから別アプリを終了させたいとき、Android 2.1まではActivityManager#restartPackageというメソッドで別アプリを終了することができたのが、Android 2.2からはできなくなった、という話題があります。OSの設計思想上、強制終了はなるべくして欲しくないと言うのがGoogleの意向なのでしょうが、とはいえアプリを殺したい場面もなくはないと思います（バッテリーの消耗減らしたいし…）。ということでここでは他プロセスを殺す、という少し乱暴な例を実装してみます。

実際にアプリが終了したかを確認するために、「起動してから毎秒カウントする」だけのサンプルアプリを作り、これを終了させてみます。終了後はカウントが再び0から始まるのを確認することで、アプリが再起動したのを確認できます。以下の通り：

TickTackActivity.java

…かなりテキトーな実装ですが、目的はプロセスが終了されたか確認することなのでこれでいいんです（キッパリ）。パッケージ名は何でも構いませんが、次に説明するシェルのコマンドでgrepするときの正規表現中で利用しますので覚えておいて下さい。今回は「jp.co.techfirm.sample.ticktack」としました。

そしてこのアプリを終了するためのコマンドを含めた、HTML側の完全なコードは以下の通りです。このHTMLをindex.htmlとして、Androidのassetsディレクトリに入れておきます：

index.html

シェルをご存じない方にとっては、このコマンドは少し説明が必要かもしれません。このコマンドは以下のような流れを実行します。

「ps」コマンドで、今実行されているプロセス一覧を取得する。

psの実行結果は、例えば次の様になります：

USER      PID   PPID  VSIZE  RSS   WCHAN    PC         NAME
...
app_88    14013 12526 177104 28392 ffffffff afd0ee9c S jp.co.techfirm.sample.rootingjs
app_94    14062 12526 174196 22416 ffffffff afd0ee9c S jp.co.techfirm.sample.ticktack
...

(1)の結果を「grep」コマンドに引き継ぎ、grep（正規表現、ここでは「jp.co.techfirm.sample.ticktack」の部分）にマッチする行を抽出する。つまり、psの結果からサンプルアプリのプロセスの行を抽出する。
(2)の結果を「awk」コマンドに引き継ぎ、2列目を取り出す（{print $2}）psの結果は2列目がPIDであり、その結果が「kill」コマンドに引き継がれる。

最終的に実行されるコマンドは「サンプルのカウントアップアプリのPID」となります。

実行！

さて。以上の説明で作成したアプリを実行してみます。といっても一連のスクリーンショットですが(苦笑)。

サンプルのカウントアップアプリを起動したとこ

JavascriptからJava経由でroot化けRootingJSアプリを起動したとこ

RootingJSでroot権限を要求したところ。root化アプリによって表示は変わります（もしくは表示されません）

上の画像でroot権限を獲得すると、直後にカウントアップアプリが終了させられる。そのためカウントアップアプリの次の起動時にはカウントが0から始まる

この記事は以上です。root権限を取得したあとで何をするかは皆さんのご想像にお任せします。お疲れ様でした。

Share

こんにちは。お初にお目にかかります。
Jake.Kです。独身で独り身です。
宜しくお願いします。

実は未だにこのAndroid Techfirm Labでは
3Dを扱っていなかったので、3Dを扱ってみたいと思います。

ビジネス向けのアプリケーションでは
余り使われる事が無い3Dグラフィックスですが、
使いこなすことが出来れば、面白い技術なのではないでしょうか。

3Dプログラミングの概念などはちょっと置いておいて、
「Androidで3Dを描画するには最低限何を書けばいいの？」
という所に着目して、説明をしたいと思います。

新規Androidプロジェクトを作成したと仮定します。
その後、必要なクラスファイルは以下の三つだけです。

・MainActivity.java
・TriangleRenderer.java
・Triangle.java

Eclipseで作成するとこんな感じになります。
パッケージ分けはやらなくても全然OKです。

早速、コードにいってみましょう。

MainActivity.java

TriangleRenderer.java

public class TriangleRenderer  implements GLSurfaceView.Renderer {

private Triangle mTriangle;
private int size = 0x10000;

public TriangleRenderer() {
mTriangle = new Triangle(0 , size);
}

public void onDrawFrame(GL10 gl) {
//画面をクリア
gl.glClear(GL10.GL_COLOR_BUFFER_BIT | GL10.GL_DEPTH_BUFFER_BIT);

// モデルビューの行列を用いて作業する事を指定する。
gl.glMatrixMode(GL10.GL_MODELVIEW);
gl.glLoadIdentity(); // 現在選択されている行列に単位行列をロードする。

//移動(初期カメラ位置
gl.glTranslatef(0, 0, -3.0f);

//頂点アレイを設定
gl.glEnableClientState(GL10.GL_VERTEX_ARRAY);
//カラーアレイを設定
gl.glEnableClientState(GL10.GL_COLOR_ARRAY);

//カリングの設定
gl.glFrontFace(GL10.GL_CW);
//三角形を描画
mTriangle.draw(gl);

}

/**
* OpenGLの透視投影の描画領域が変更された時の設定
*/
@Override
public void onSurfaceChanged(GL10 gl, int width, int height) {
/**
* OpenGLが表示に使う長方形領域を設定します。
* (x,y)が表示領域の左上の座標、(w,h)が表示領域の幅と高さになります。
*/
gl.glViewport(0, 0, width, height);

// 透視投影(遠近投影法)の行列を指定する。
float ratio = (float) width / height;
gl.glMatrixMode(GL10.GL_PROJECTION);

// 現在選択されている行列に単位行列をロードする。
gl.glLoadIdentity();

/**
* ビューボリューム(視体積)を指定します。
* 引数は視体積の左、右、下、上、近クリップ面、遠クリップ面の座標を定義
*/
gl.glFrustumf(-ratio, ratio, -1, 1, 1, 100);
}

/**
* OpenGLの初期設定
*/
@Override
public void onSurfaceCreated(GL10 gl, EGLConfig config) {
/**
*  DITHERをオフにします。
*  DITHERとは量子化の誤差を最小にするべく
*  サンプルデータに意図的に追加される誤った信号・データのこと。
*/
gl.glDisable(GL10.GL_DITHER);

// OpenGLにスムージングを設定
gl.glHint(GL10.GL_PERSPECTIVE_CORRECTION_HINT, GL10.GL_FASTEST);

// 背景色
gl.glClearColor(1,1,1,1);
//スムースシェーディング：平面のポリゴンを曲面に見せかける処理。
gl.glShadeModel(GL10.GL_SMOOTH);

/**
* 多角形に影を付けるには、各多角形の前後関係を決定する必要がある。
* これをするのが、デプステストです。
* このデプステストを有効にします。
*/
gl.glEnable(GL10.GL_DEPTH_TEST);
}
}

Triangle.java

public class Triangle {

private IntBuffer   mVertexBuffer;
private IntBuffer   mColorBuffer;
private ByteBuffer  mIndexBuffer;

public Triangle(int p , int size){
int one = 0x10000;
//座標リスト
int vertices[] = {
p - size , p        , p + size,  // 左下
p + size , p        , p + size,  // 右下
p        , p + size , p       ,  // 上
};

//頂点色
int colors[] = {
0 ,    0,    0,  one,
0 ,    0,    0,  one,
0 ,    0,    0,  one,
};

//頂点の描画順インデックス
byte indices[] = {
0, 1, 2,
};

//バイトバッファにそれぞれのリストを登録
ByteBuffer vbb = ByteBuffer.allocateDirect(vertices.length * 4);
vbb.order(ByteOrder.nativeOrder());
mVertexBuffer = vbb.asIntBuffer();
mVertexBuffer.put(vertices);
mVertexBuffer.position(0);

ByteBuffer cbb = ByteBuffer.allocateDirect(colors.length * 4);
cbb.order(ByteOrder.nativeOrder());
mColorBuffer = cbb.asIntBuffer();
mColorBuffer.put(colors);
mColorBuffer.position(0);

mIndexBuffer = ByteBuffer.allocateDirect(indices.length);
mIndexBuffer.put(indices);
mIndexBuffer.position(0);
}

//描画
public void draw(GL10 gl){
gl.glVertexPointer(3, GL10.GL_FIXED, 0, mVertexBuffer);
gl.glColorPointer(4, GL10.GL_FIXED, 0, mColorBuffer);
gl.glDrawElements(GL10.GL_TRIANGLES, 3, GL10.GL_UNSIGNED_BYTE, mIndexBuffer);
}
}

これだけでもう3Dが出来ています。
早速実行してみましょう。

期待通りに黒い三角形が描画されていますね。

さて、何故このような黒い三角形が描けたのか？
解説していきます。

まず注目すべきは、Triangle.javaです。
Triangle.javaのこの部分で頂点と色を決めています。
（分かりやすいように修正しています。）

int vertices[]が頂点です。
三次元の頂点は(x軸 , y軸 , z軸)の三つの点で指定します。
よって、

ただのint型の配列ですが、実はこのような意味があります。
こうして見ると分かりやすいのですが、実は上の点は
奥に傾いているため、45度斜めに描画されています。

色も同様です。が、RGBAのため、最後にalpha値を指定するため、
配列4つで一点になります。

このようになります。試しに
上部だけ真っ赤にしてみましょう

これで上だけ赤になるはずです。
実行してみましょう。

おお、赤くなってますね。
期待通りです。

では、次に3Dであることを
認識するためにこの三角形をグルグルと
回してみましょう。
今度はTriangleRenderer.javaを編集します。
といってもすることは少ないです。

TriangleRenderer.java

回転はコメントアウトしてあるので、片方ずつ外して
動作を確かめてみてください。
もちろん、同時に動かすのもアリだと思います。

これで凄くザックリですが説明を終わります。
本当はまだまだ解説し足りません。
もし、これで3Dに興味を持った方は、
OpenGLについて調べてみては如何でしょうか？

このプログラムを元に、
複数の三角形を書いてみたり、
三角形から四角形に変えてみたりしてみてください。
回転操作をフリック化してみたりするのもいいですね。

以上、ここまで読んでくれてありがとうございました。

Share

IT業界で働いているとスマートフォン所持率が高いのですが、欧米に比べると、今のところまだスマートフォン普及率が低い日本。
気になるけれど、どれを選べば良いか分からない！という方のために、
Android携帯を選ぶ時のTipsとおススメを書きたいと思います。

①　まずは機種を知る

新機種が次々発表されているので、まずはどんな機種があるのか知ることから。
機種一覧については、以下のサイトが参考になります。
スマートフォン比較表

細かいスペックが気になる方は、こちらもどうぞ。
2010年秋～2011年春発売　スマートフォン比較

②　お金は大切に

スマートフォン購入をきっかけに、料金プランを見直すことも大事です。
スマートフォン用プランや割引もあるので、メールアドレス変更を厭わないのであれば、
キャリア毎に料金を比較して決めるのも良いのではないでしょうか。

docomo料金プラン
 au料金プラン
 softbank料金プラン

③　見た目が大事

従来型の携帯電話を選ぶ際、女性が最も重視するのはどこでしょう？
答えは、1位：デザイン　,2位：色　,3位：画面のサイズ　（インターネットコム調べ）
スマートフォンでも、ファッションの一部としての重要性は健在です。
外観や画面アイコンはもちろんのこと、ケースなどの周辺機器も事前にチェックしてみて下さい。

④　操作の相性を感じる

　・手に持った感じ（薄さや重さ）
　・文字入力の相性
　・画面のレスポンス
日常的に使用するので、上に挙げた点については、購入前に必ず店頭実機で確かめてみて下さい。
文字入力については、専用アプリ（ATOK Padなど）のダウンロードでカスタマイズも可能です。

勝手におススメ機種

======================================

▼Officeなど、ビジネスシーンで使いたい

HTC Desire HD(001HT)　softbank
　海外でも使用でき、Microsoft officeドキュメントの編集が可能。
　WEB参照も快適にできるハイスペック機なので、ビジネスに使用する方に最適。
　ただし、おサイフケータイなど従来の携帯機能はありません。

　ビジネスメールやドキュメント編集が頻繁で、キーボードがほしい！という方には、
GALAPAGOS 005SHもおススメです。
　こちらは、おサイフケータイや赤外線通信など従来の携帯機能もあるので、安心の一台。

▼WEB参照しまくりたい

SIRIUS α(IS06)　au
　最新のモバイルブラウザ「V8エンジン」、Flash Player10.1を搭載し、フルFlash再生に対応。
　au発売スマートフォンの中で最軽量で、WEB参照を中心に使用する方に最適。
　難点なのは、電池持ちの悪さ。ディスプレイの明るさ設定、不要アプリの削除など、
　電池を長く持たせる工夫をするか、予備バッテリーを用意する必要がありそうです。

▼話題の3Dを使いたい

LINX 3D（SH-03C）　docomo
　先日、裸眼で楽しむ3Dゲーム機が発売されましたが、この波に乗って3Dを体感したい！という方に。
　3D映像や3Dゲームが複数プリインストールされていて、
　角度の制限はあるものの、裸眼で3Dを楽しめます。
　3D写真の撮影や、既存画像の3D変換も可能。ワンセグやおサイフケータイも使えます。

GALAPAGOS 003SH　softbank
　960万画素と、カメラとしての利用価値も高く、3D撮影を楽しめます。
　ワンセグやおサイフケータイももちろんあり。

▼とにかく安く！

Optimus chat(L-04C)　docomo
　スマートフォンは、本体代が3万円台からのものがほとんどですが、
　Optimus chatの本体代は、1万円台後半と他と比べて格安。
　カメラの画素や機能はシンプルながら、物理キーボードを搭載し、
　従来の携帯に似たアイコン表示など、違和感なく乗り換えることが可能です。

▼カメラ&動画重視派

IS05　au
　自分撮りやビデオチャットに最適なインカメラを搭載。
　ハイビジョン動画を撮影し、自宅のAQUOSと連携して大画面で楽しむ、なんてことも可能。
　おサイフケータイ、ワンセグ、赤外線通信などの従来の携帯機能もサポートしているので、
　今までの携帯でカメラ&動画機能を重視していた方におススメ。

[番外]　AVコンテンツをメインで使いたい

iPhone 4　softbank
　Androidのコーナーにはふさわしくないですが、iPhone4をおススメします。
　なんといっても、iTunesとの連携による操作性と管理のしやすさ。
　iTunesでは映画配信も開始されているので、音楽や映画などAVコンテンツを頻繁に使用したい方は、
　iPhoneを選ぶのがベター。

======================================

今回は、開発者視点ではなく、消費者視点での内容をお届けしました。
少しでもAndroid携帯選びのお役に立てればと思います。

※「Android」は、Google Incの商標または登録商標です。
※「おサイフケータイ」は、株式会社NTTドコモの登録商標です。
※「おススメ機種」は、ブロガーの独断と偏見による選定です。

Share

ここ最近、中国製のAndroid端末はだいぶ格安なモデルが出ています。

はたしてどの程度実用的なものなのか、代表的なSTAR A3000 という端末を使ってみました。

NEW Dual sim unlocked Star A3000 Android 2.2 GPS Wifi Mobile Phones

OSは2.2ですが、価格は1.1万円くらいと安いです。箱がつぶれていたり、無駄に長いアンテナが付いていたり、何故かバッテリーが２つあったりと突っ込み所は多々あるのですが、ひとまず使ってみて感じた注意点などを挙げてみたいと思います。

タッチパネルは感圧式

スタイラス的なものを使えばスムーズに動きますが、3.2インチの小さい画面で扱うのはなかなか苦痛です。頑張って指で動かしても、反応は全体的にワンテンポ遅い。最近の静電式に慣れてしまうとストレス感じます。

Dual SIMだけど3Gは使えない

まあ、それはそうですという事で、日本ではWiFiモデルと割り切って使いましょう。

日本語入力できない

入力は英語か中国語のみです。日本語IMEのsmejiをインストールする事で入力可能になります。

アナログテレビが見れる

「Mobile TV」というアプリでアナログテレビが見れます。画面右上にはしっかり「アナログ」の文字があります。7月までの期間限定ということで。

バッテリーが充電できない

この端末の最大の問題で、充電しようとすると急速に電池がなくなり、二度と起動しなくなります。まさかそんな基本的な事がと思いましたが、未だに解決に至っていません。

そもそも付属のACアダプタの接続部分がやたら隙間があいているのが怪しすぎる。。。

昇圧等も試してみましたが結果は変わらず、接点充電器で直接充電して回避しています。

今はSipdroidを使って内線用のIP電話機として利用しているのですが、動作上は特に問題ありません。感圧式ですがコスト面を考えれば、用途次第で活用できる可能性はあります。（実際IP電話機は倍以上もするのが普通だし）

とは言え、バッテリー問題はなかなか致命的で、毎日充電のたびにイチイチ電池を外す手間は、継続利用に大きな障害です。すんなりと使おうという訳にはいかないですね。

Share

Titanium MobileはJSでネイティブアプリが作れる開発環境です。
Titanium Mobile Application Development | Appcelerator

正確にはJSで記述したコードをAndroidやiPhone等のネイティブコードへ変換し、それらをコンパイルすることでネイティブアプリ開発を実現しています。

一つのコードでiPhone、Android等のアプリを作れるのでとても便利そうです。

以前僕が書いたListViewをカスタマイズするをTitaniumで実装してみて、実際に何がどのように違うのかを試してみたいと思います。

開発環境

開発するマシンはWindowsでもMacでもどちらでもOKですが、iPhone用アプリも作りたい場合はMac環境が必須になります。
Titaniumの開発環境構築については、既に多くの優良記事が公開されているので、今回は割愛します。

Titaniumに関する情報については、Titaniumを起動するとDashboardが表示されますが、

基本的にここに表示されているリンクをたどればだいたい手に入ります。

日本語での情報はこちらがとても充実してます。
titanium-mobile-doc-ja – Project Hosting on Google Code

プロジェクトの作成

早速作っていきます。
まずはNew Projectからプロジェクトを作成します。

Project Type

Androidアプリを作るのでMobileを選択

Name

アプリケーションの名前はTwitterにしておきます。

App Id

iOS用の設定が主な用途だと思われますが、ここではjp.co.techfirm.twitterとしておきます。

Company/Personal URL

とりあえずこのブログのURL入れておきます。

Titanium SDK version

特に問題がなければ最新のSDKで。

Installed Mobile Platforms

Android SDKへのパスが正しく設定されていれば、Android SDK Foundになるはずです。
Foundにならない場合は、左上のPerspectivesから正しくパスを設定しましょう。

また、Android SDKはversion 8 からadbがtoolsからplatform-toolsディレクトリへ移動しているため、以下のようにしてシンボリックリンクを作成しておきます。

cd [SDK HOME]/tools
ln -s ../platform-tools/adb

ファイル構成

プロジェクトを作成すると、ディレクトリの中に既にいくつかのファイルが用意されていますが、基本的にResourcesの中にあるファイルをいじることになります。
アプリケーションのエントリポイントはResoucres/app.jsです。
このファイルを編集していきます。

Resources/iphone、Resources/androidはそれぞれiPhone,Android専用のリソースフォルダになります。
今回は画像を追加しますが、両方共通で利用できるため、Resources/imagesディレクトリを作成しておきましょう。

背景画像として利用する以下の画像をResources/imagesに放り込んでください。

実装

今回作るのはこんな画面です。

そして、ソースはこんな感じになります。

// this sets the background color of the master UIView (when there are no windows/tab groups on it)
Ti.UI.setBackgroundColor('#000');

var win = Ti.UI.createWindow({  
    title:'Twitter'
});

var rowData = [
	{username:"techfirmlab", tweet:"ちょめちょめ"},
	{username:"techfirmlab", tweet:"ふむふむ"},
	{username:"techfirmlab", tweet:"もぐもぐ"},
	{username:"techfirmlab", tweet:"ごくごく"},
	{username:"techfirmlab", tweet:"むむむ"},
	{username:"techfirmlab", tweet:"ほうほう"},
	{username:"techfirmlab", tweet:"ぺろぺろ"},
];

var data = [];

for (var i=0;i<rowData.length;i++) {

var row = Ti.UI.createTableViewRow({
		className:"Twitter",
		backgroundImage:'images/back.png',
		height:'auto'
	});
	
	row.add(image);
	row.add(tweet);
	row.add(username);
	
	data.push(row);
}

var tableView = Ti.UI.createTableView({
	data:data
});

win.add(tableView);
win.open();

少しずつ内容を見ていきます。

Window

最初にアプリ共通の背景色を指定しています。ここでは黒にしています。

TiはTitaniumのショートカットです。

と記述しても同じように動作します。長くなるのでTiを使っています。

次にWindowを生成。基本的に各画面には1つのWIndowがあり、その上にViewを追加していく形になります。

Ti.UI.createWindowでWindowを生成します。関数の引数にはハッシュで初期化パラメータを渡しています。
ここではtitleに’Twitter’を設定しています。

これは以下のように書いても同じようにtitleに値が設定されます。

データ

画面に表示するデータを用意しています。

このデータを後で各行に設定していきます。

TableView

順番が前後しますが、先にTableViewの部分を見て行きます。
ソースの最後の部分

で、tableView(AndroidではListView)を生成して、それをwindowに追加しています。
win.open()で画面に表示されます。

tableViewはTi.UI.createTableViewで生成します。
引数に表示するdataを渡してます。
ここより前の部分でそのデータ部分を作ってます。

TableViewRow

テーブルに表示するデータを作る部分です。
以下のようにデータの数だけループさせて、各行のviewを構成していきます。

表示するのは、twitterアイコン、ユーザ名、ついーとの３つです。
Titaniumでは画像はimageView、テキストはlabelで表示します。
それぞれTi.UI.createImageView、Ti.UI.createLabelで生成します。

ここでimageViewを作っています。”url”でアイコン画像を設定します。ここは表示したい画像のファイルパスを指定してください。
app.jsはResources直下に配置されているので、Resources直下からのパスで指定します。
他のtopやleft、bottom、width、heightはほとんどCSSと同じ感覚でOKです。

次にユーザ名のlabelを作ります。textで先ほど用意したrowDataのusernameを設定しています。
colorで文字色を、fontは値をハッシュで指定します。
heightをautoにすることで長いユーザ名の場合にも広がるようにします。

ついーとも同じように設定していきます。

TableViewRowを生成。ここで先ほど用意した背景画像をbackgroundImageで指定しています。
そして、rowにアイコン画像、ついーと、ユーザ名をadd。これでTableViewRowが完成です。

最後にtableViewへ渡すデータ配列にtableViewRowをセットします。

これで以下の画面が完成です。

元ネタのListViewをカスタマイズするを見てもらえると分かりますが、記述するコード量も減っていて使いこなせればサクっと開発していけますね。

試しにiPhoneでもビルドしてもみるとこんな感じです。

同じ画面が１つのコードで作れてしまいました。

クロスプラットフォームでのアプリ作成にはTitanium Mobileを使うことを検討する価値ありですね！
積極的に使っていきたいです。

Share

Android 2.1以降で表示できるようになったライブ壁紙。
見れる端末も増えてきたということで、
デザイナー（主にFlashの人）が作るとどうなるのかをざっくり説明致します。

そもそも、ライブ壁紙って何？

カンタンに言うと、「ケータイのFlash待受けAndroid版」です。
待受画面（Androidではホーム画面）で
アニメーションや時計を表示したりできるんです。
もちろん、がんばれば位置情報や傾きなど、
Androidならではのインタラクションを追加することもできます。

何で作るの？

もちろんJavaです。
AdobeのFlashではまだライブ壁紙は作れないようです。。
なので、ある程度スクリプトを書いた経験がないと、
ちょっと難しいかもしれません。

開発環境構築

「Android 開発環境　構築」というキーワードでググると出てきます。
Eclipse、JDK、Android SDKなどをインストールする必要があります。
（割愛）

サンプルソース

「Live Wallpaperのサンプル」というキーワードでググりましょう。
サンプルやライブ壁紙の基盤は他のサイトのほうが
詳しく載っています。
（割愛）

アニメーションの実装方法

ようやくですね。。
カンタンに言うと
何ミリ秒か毎に画像を動かして表示する、というのを
Javaでひたすら書くだけです。
Flashで言うところの、「onEnterFrame」みたいなもの。

ただ、画像を読み込んで配置して描画して、といったようなコードを
いちいち書かなくてはいけないので、結構大変です。
例えば、こんな感じ。

（※読み飛ばし歓迎）

//「onEnterFrame」みたいなもの
private final Runnable animationRunnable = new Runnable() {
@Override
public void run() {
animate();
}
};
// アニメーション処理。
private synchronized void animate() {
// 雪のアニメーションを実行します。
for(int i = 0; i         	this.snowPaints[i].moveNext();
}
draw();
// 25ミリ秒後に再度この処理を実行します。
handler.removeCallbacks(animationRunnable);
handler.postDelayed(animationRunnable, 25);
};
// 描画処理。
private synchronized void draw() {
final SurfaceHolder holder = getSurfaceHolder();

Canvas c = null;

try {
c = holder.lockCanvas();
if (c != null) {
// プレビュー画面では、xPixelを調整
if (this.isPreview()) {
this.xPixel = -this.getDesiredMinimumWidth() / 2;
}
// 背景を描画します。
c.drawBitmap(this.background, xPixel, 0, p);

// 雪を描画します。
for (int i = 0; i < SnowPaint.SNOW_COUNT; i++) {
SnowPaint snow = this.snowPaints[i];
Bitmap snowBitmap = this.snowBitmaps[i];

double x = (double) this.backgroundWidth
* snow.getActualX() + this.xPixel;
double y = (double) this.backgroundHeight * snow.getY();

Matrix m = new Matrix();
m.preRotate((float) snow.getR());
m.postTranslate((float) x, (float) y);

c.drawBitmap(snowBitmap, m, snow);
}
}
} finally {
if (c != null) {
holder.unlockCanvasAndPost(c);
}
}
}

長いですね。。
要は、一度animate()を呼び出せば、あとは25ミリ秒ごとに、
画像を動かして描画する処理が走るというものです。
あとは、ライブ壁紙が表示されたタイミングでanimate()を呼び出せば動きます。

実は上のコードは、WallpaperServiceを継承したクラスの中に定義してある、
Engineを継承したクラスの中に書く必要があります。
そこには、表示が変わったタイミングで呼び出される
ハンドラ・メソッドが用意されているので、
そこにanimate()を書いてやればよいわけです。
例えばこんな感じ。

（※読み飛ばし歓迎）

もちろん、Androidでは時刻や傾き、位置情報なども取得できるので、
そういったタイミングで特殊なアニメーションを開始する、
ということもできます。

今回はざっくりとした説明でしたが、
複雑なインタラクションを実装しようとすれば、
オブジェクト指向的な考えやライブラリの活用なども
必要になってくることはFlashでもJavaでも変わりません。

書き方もAS3.0とJavaは似ているので、
興味を持ったデザイナー（Flasher）の方は、是非挑戦してみてください。

ちなみに、実際に制作されたライブ壁紙はこちらです。

Share

こんにちは、manaです。
前回から続きまして、今回はサーバ側の実装と実際に動かしてみたいと思います。

続きを読む

Share

スクリーンショット

導入

管理画面からの設定

テーマの変更

まとめ

Javascriptの重要性が日増しに高まっている

本記事の目標と前提

考え得るrootを取得する方法

Java上でroot権限を要求する

JavascriptからJavaのAPIを呼び出す

JavascriptからJavaへコマンドの実行を要求する

実行！

① まずは機種を知る

② お金は大切に

③ 見た目が大事

④ 操作の相性を感じる

勝手におススメ機種

▼Officeなど、ビジネスシーンで使いたい

▼WEB参照しまくりたい

▼話題の3Dを使いたい

▼とにかく安く！

▼カメラ&動画重視派

[番外] AVコンテンツをメインで使いたい

タッチパネルは感圧式

Dual SIMだけど3Gは使えない

日本語入力できない

アナログテレビが見れる

バッテリーが充電できない

開発環境

プロジェクトの作成

Project Type

Name

App Id

Directory

Company/Personal URL

Titanium SDK version

Installed Mobile Platforms

ファイル構成

実装

Window

データ

TableView

TableViewRow

そもそも、ライブ壁紙って何？

何で作るの？

開発環境構築

サンプルソース

アニメーションの実装方法

Facebook Page

最近の記事

人気エントリー

カテゴリー

①　まずは機種を知る

②　お金は大切に

③　見た目が大事

④　操作の相性を感じる

[番外]　AVコンテンツをメインで使いたい