Mobile Nation

Share

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

Read the rest of this entry »

Share

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

それじゃ、早速HTML5で絵を描いてみましょうネ！直線や曲線を自由に使って描けるようなので、まずは円で描ける、アレですよね～ Read the rest of this entry »

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

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です。
前回から続きまして、今回はサーバ側の実装と実際に動かしてみたいと思います。

Read the rest of this entry »

Share

こんにちは、はじめまして。manaと申します。
今後たまに登場するかもしれませんので、よろしくお願いします。

今回はC2DMを使った簡単なアプリを作成してみようと思います。
作成するアプリは、ブラウザから文字を入力した文字を該当端末上に表示させる、といったものです。

Read the rest of this entry »

Share

私は今東海道新幹線の中だ。東京−大阪間を移動中である。

のぞみは当然車内無線LANを完備されているのだが、それを使うにはプロバイダー契約がいる。そこまで出張のない私には、それに加入するほどのことではない。ただ、車内で仕事をしたいので、ネットの環境が必須だ。以前はイー・モバイルのデータカードを使っていたのだが、イー・モバイルは東海道新幹線上では電波が不安定（特にトンネル内は）で、非常にストレスがある。一方、ドコモの電波は強力でトンネル内でも問題なく使えることを知っていたが、私はドコモのデータ通信カードは持っていない。

そして今回それを解決する方法を手に入れた。

ご存知の方も多いだろう。AndroidOS 2.2からテザリングが可能となったことを。
私はNexus s を持っている。当然、テザリング対応している。このテザリングを使って今回の出張での通信環境向上を期待した。

所感を言おう。まったく問題ない。快適だ。

と、私の感覚で判断するのも良くないので、定量的に測定する。
任意のポイントにてスピードテストをしてみることにした。
測定方法：http://www.musen-lan.com/speed/speed-img.html　にてスピードテスト
測定ポイント：10分に一度程度の場所。場所はGoogleMapにて視認。
使用SIM：ドコモ（moperaU）

・三島付近トンネル内　　最高データ転送速度 342.61kbps (42.82kB/sec)
・新富士駅付近　　最高データ転送速度 227.80kbps (28.47kB/sec)
・新富士駅次トンネル内　　最高データ転送速度 449.62kbps (56.20kB/sec)
・静岡駅付近　　最高データ転送速度 583.21kbps (72.90kB/sec)
・静岡県磐田市天竜川付近　　最高データ転送速度 1.07Mbps (134.15kB/sec)
・浜名湖付近　　最高データ転送速度　259.72kbps (32.46kB/sec)
・静岡県安城市　　729.09kbps (91.13kB/sec)
・名古屋駅　　598.39kbps (74.79kB/sec)
・岐阜県SANYO工場前付近　　1.22Mbps (153.20kB/sec)
・米原琵琶湖湖畔近く　　529.61kbps (66.20kB/sec)
・京都駅　　404.22kbps (50.52kB/sec)
・大阪駅　　1.17Mbps (146.54kB/sec)

計測だけしていると暇なので、デザリングについて書き留める。

テザリングとは、スマートフォンなどのモバイル機器を外部モデムとして用いて、パソコンや携帯端末、携帯ゲーム機などを携帯電話回線を通じてインターネットに常時接続させること、もしくはその機能のことである。英語ではTethering( 出典:Wikipedia )。

これはAndroidだけの機能ではなく、モバイル通信機一般での機能で、実はiPhoneにもある機能。しかし、国内の大手通信キャリア3社はその機能を使えなくして端末を販売しているので、国内ではあまり使われているのを見かけない。テザリングを使用するとPCを使った通信も可能となるので、モバイル通信より圧倒的にデータ量が増える。それによりキャリア通信網がつながりにくい状態になったり、そもそもつながらならなくなることを恐れ、この機能を使えなくしている。

スマートフォンもPCとあまりデータ量が変わらないと思うが、通常のネット通信であればいいのだが、P2Pファイル交換サービス（winnyやshare）などを使った場合、動画ファイルが上り下りとも大量に流れると、おそらくキャリア通信網は破綻するだろう。そういう背景が、デザリング使用を不可にしている理由のひとつだ。

一方、第4キャリアのイー・モバイルは、データ通信が強いことから、このテザリング機能を全面に押し出した戦略を取っており、HTC AriaとPocket WiFi S（S31HW）では、テザリング＋音声通話を商品価値として、現在売り出し中だ。そもそもデータ通信に絞ったイー・モバイルならではの戦略と言えるだろう。

と、ここまで書いて大阪到着である。
調査数値を見ても分かると通り、まったく問題なくここまで来られた。快適そのものだった。これで帰りも仕事をしながら買えることができる。

調査のまとめとして、「問題なく使える」としか言いようがない。
が一方、テザリングはデータ通信網圧迫の問題も抱えているので、この記事がその注意喚起につながれば良いと思う。我々の生活に直結している通信インフラに大きな問題を与えないよう、使用方法には十分に注意したい。

Share

Archive for the ‘Tips’ Category

スクリーンショット

導入

管理画面からの設定

テーマの変更

まとめ

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

本記事の目標と前提

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

Java上でroot権限を要求する

JavascriptからJavaのAPIを呼び出す

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

実行！

開発環境

プロジェクトの作成

Project Type

Name

App Id

Directory

Company/Personal URL

Titanium SDK version

Installed Mobile Platforms

ファイル構成

実装

Window

データ

TableView

TableViewRow

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

何で作るの？

開発環境構築

サンプルソース

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

Facebook Page

最近の記事

人気エントリー

カテゴリー