Mobile Nation
By juice
2011/04/23 コメントはありません ≫

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

続きを読む

20
Share

HTML5のCanvas
By juice
2011/04/06 コメントはありません ≫

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

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

6
Share

WordPressのプラグインでスマートフォン対応
By koyama
2011/04/04 コメントはありません ≫

5
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はシンプルで、テーマの編集もしやすく、テーマの切り替えも簡単です。

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

5
Share

Javascriptからroot権限でシェルコマンドを発行する
By kudo
2011/03/14 コメントはありません ≫

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

public class RootingJSBridge {
private static final String TAG = “RootingJS”;

public void execCommand(String command) {
Log.d(TAG, “RootingJSBridge#execCommand(); command: ” + command);

final Runtime runtime = Runtime.getRuntime();
try {
Process superUserProcess = runtime.exec(“su”);
Thread.sleep(3000);
// 端末画面でsuを許可する必要があるので、
// 3秒間待つ（その間にsuを許可する）
// キチンと実装するのであれば別スレッドを立ち上げるなど
// suが完了するまで待つような実装すべき

DataOutputStream os = new DataOutputStream(superUserProcess.getOutputStream());
os.writeBytes(command + “\n”);
os.flush();

Log.d(TAG, “RootingJSBridge#execCommand(); finish.”);
} catch (IOException e) {
Log.e(TAG, “RootingJSBridge#execCommand(); caught IOException: “, e);
} catch (InterruptedException e) {
Log.e(TAG, “RootingJSBridge#execCommand(); caught InterruptedException: “, e);
}
}
}
たったこれだけで、アプリはroot権限のプロセスを生成できてしまいます（次に説明しますが、このクラスのメソッドをJavascriptから呼び出すことになります）。はいっ、次っ！

JavascriptからJavaのAPIを呼び出す

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

RootingJSActivity.java

public class RootingJSActivity extends Activity {

private WebView webView;

@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);

webView = (WebView) findViewById(R.id.web_view);

WebSettings settings = webView.getSettings();
settings.setJavaScriptEnabled(true); // …(1)
webView.addJavascriptInterface(new RootingJSBridge(), “bridge”); // …(2)

// このサンプルアプリではローカルのassetsに保存してあるHTMLを表示する
webView.loadUrl(“file:///android_asset/index.html”);
}
}
index.html（断片）

window.bridge.execCommand(‘コマンド文字列（後述）’); // …(3)
やっていることは、

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

public class TickTackActivity extends Activity {

private TextView countTextView;
private int count = 0;

@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
countTextView = (TextView) findViewById(R.id.count_text_view);

new Thread() {
public void run() {
try {
while (true) {
TickTackActivity.this.runOnUiThread(new Runnable() {
public void run() {
countTextView.setText(“Count: ” + count);
}
});
// 1秒ごとにカウントアップ
Thread.sleep(1000);
count++;
}
} catch (InterruptedException e) {
}
}
}.start();
}
}
…かなりテキトーな実装ですが、目的はプロセスが終了されたか確認することなのでこれでいいんです（キッパリ）。パッケージ名は何でも構いませんが、次に説明するシェルのコマンドでgrepするときの正規表現中で利用しますので覚えておいて下さい。今回は「jp.co.techfirm.sample.ticktack」としました。

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

index.html

execute command sample

function executeKillCommand() {
var packageName = document.getElementById(“packageName”);
var command = “ps | grep ‘” + packageName.value +”‘ | kill `awk ‘{print $2}’`”;
// コマンドは最終的に次の様になる
// ps | grep ‘jp.co.techfirm.sample.ticktack’ | kill `awk ‘{print $2}’`
window.bridge.execCommand(command);
}

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

「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

今更ながらAndroidで3D。GLSurfaceViewを使ってみる。
By Jake.K
2011/03/07 コメントはありません ≫

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

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

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

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

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

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

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

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

MainActivity.java

public class MainActivity extends Activity {

private GLSurfaceView mGLSurfaceView;
private TriangleRenderer tr = null;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
//GLSurfaceViewを取得
mGLSurfaceView = new GLSurfaceView(this);
// Rendererを作成
tr = new TriangleRenderer();
//GLSurfaceViewにRendererを設定
mGLSurfaceView.setRenderer(tr);
setContentView(mGLSurfaceView);
}

@Override
protected void onResume() {
super.onResume();
mGLSurfaceView.onResume();
}

@Override
protected void onPause() {
super.onPause();
mGLSurfaceView.onPause();
}

}
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のこの部分で頂点と色を決めています。
（分かりやすいように修正しています。）

引数p = 0 , size = 0x10000;
//座標リスト
int vertices[] = {
-size , 0 , size, // 左下
size , 0 , size, // 右下
0 , size , 0 , // 上
};

//頂点色
int colors[] = {
0 , 0, 0, one,
0 , 0, 0, one,
0 , 0, 0, one,
};
int vertices[]が頂点です。
三次元の頂点は(x軸 , y軸 , z軸)の三つの点で指定します。
よって、

int vertices[] = {
// (左下x座標 , 左下y座標 , 左下z座標)
-size , 0 , size,
// (右下x座標 , 右下y座標 , 右下z座標)
size , 0 , size,
// (上x座標 , 上y座標 , 上z座標)
0 , size , 0 ,
}
ただのint型の配列ですが、実はこのような意味があります。
こうして見ると分かりやすいのですが、実は上の点は
奥に傾いているため、45度斜めに描画されています。

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

//頂点色
int colors[] = {
// (左下Red , 左下Green , 左下Blue , 左下Alpha)
0 , 0, 0, one,
// (右下Red , 右下Green , 右下Blue , 右下Alpha)
0 , 0, 0, one,
// (上Red , 上Green , 上Blue , 上Alpha)
0 , 0, 0, one,
};
このようになります。試しに
上部だけ真っ赤にしてみましょう

//頂点色
int colors[] = {
// (左下Red , 左下Green , 左下Blue , 左下Alpha)
0 , 0, 0, one,
// (右下Red , 右下Green , 右下Blue , 右下Alpha)
0 , 0, 0, one,
// (上Red , 上Green , 上Blue , 上Alpha)
one , 0, 0, one,
};
これで上だけ赤になるはずです。
実行してみましょう。

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

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

TriangleRenderer.java

float mView = 0.0f; ←追加

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.glRotatef(mView , 0, 1, 0); //横回転 ←追加
//gl.glRotatef(mView , 1, 0, 0); //縦回転 ←追加

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

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

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

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

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

Share

はじめてのAndroid携帯選び
By sirius
2011/03/03 コメントはありません ≫

3
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ドコモの登録商標です。
※「おススメ機種」は、ブロガーの独断と偏見による選定です。

3
Share

中国製のAndroid端末 A3000を使ってみた
By noriyuki
2011/03/02 コメントはありません ≫

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でAndroidアプリを作る
By daichi1128
2011/02/28 コメントはありません ≫

20
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としておきます。

Directory

お好きな場所にどうぞ。僕はtitanium用ディレクトリを作って作業してます。

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 image = Ti.UI.createImageView({
url:'images/techfirmlab.jpg',
top:5,
left:5,
width:60,
height:60,
bottom:5
});

var username = Ti.UI.createLabel({
text:rowData[i].username,
color:"#000000",
font:{fontSize:16,fontWeight:'bold'},
top:5,
left:70,
right:10,
height:'auto'
});

var tweet = Ti.UI.createLabel({
text:rowData[i].tweet,
color:"#202020",
top:25,
left:70,
bottom:5
});

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.UI.setBackgroundColor('#000');
TiはTitaniumのショートカットです。

Titanium.UI.setBackgroundColor('#000');
と記述しても同じように動作します。長くなるのでTiを使っています。

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

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

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

var win = Ti.UI.createWindow();
win.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:"ぺろぺろ"},

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

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

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

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

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

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

for (var i=0;i<rowData.length;i++) {
// …
}
表示するのは、twitterアイコン、ユーザ名、ついーとの３つです。
Titaniumでは画像はimageView、テキストはlabelで表示します。
それぞれTi.UI.createImageView、Ti.UI.createLabelで生成します。

var image = Ti.UI.createImageView({
url:'images/techfirmlab.jpg',
top:5,
left:5,
width:60,
height:60,
bottom:5
});
ここでimageViewを作っています。”url”でアイコン画像を設定します。ここは表示したい画像のファイルパスを指定してください。
app.jsはResources直下に配置されているので、Resources直下からのパスで指定します。
他のtopやleft、bottom、width、heightはほとんどCSSと同じ感覚でOKです。

var username = Ti.UI.createLabel({
text:rowData[i].username,
color:"#000000",
font:{fontSize:16,fontWeight:'bold'},
top:5,
left:70,
right:10,
height:'auto'
});
次にユーザ名のlabelを作ります。textで先ほど用意したrowDataのusernameを設定しています。
colorで文字色を、fontは値をハッシュで指定します。
heightをautoにすることで長いユーザ名の場合にも広がるようにします。

var tweet = Ti.UI.createLabel({
text:rowData[i].tweet,
color:"#202020",
top:25,
left:70,
bottom:5
});
ついーとも同じように設定していきます。

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

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

data.push(row);
最後にtableViewへ渡すデータ配列にtableViewRowをセットします。

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

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

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

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

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

20
Share

デザイナーが作るLive Wall Paper
By tange
2011/02/24 コメントはありません ≫

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()を書いてやればよいわけです。
例えばこんな感じ。

（※読み飛ばし歓迎）

@Override
public void onVisibilityChanged(boolean visible) {
// trueで描画開始
if (visible) {
init();
animate();
} else {
}
}
もちろん、Androidでは時刻や傾き、位置情報なども取得できるので、
そういったタイミングで特殊なアニメーションを開始する、
ということもできます。

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

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

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

Share

C2DMを利用するアプリを動かしてみる(後編)
By mana
2011/02/22 1 コメント ≫

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

続きを読む

Share

Home >
Android 入門
Android アプリ開発入門

Android概要
Androidの概要を説明します
開発環境設定
PC上でAndroidアプリを開発するための環境を設定します
Hello World!
画面上にHello World!と表示するまでを紹介します
チュートリアル

google Map を使用するアプリ
Googleマップを使用するAndroidアプリを作成します
画面遷移
画面遷移するAndroidアプリを作成する
画像表示
画面上にHello World!と表示するまでを紹介します
星空を見る
羅針盤アプリを起動するAndroidアプリを作成する
画面の作り方
AndroidアプリでViewを使った画面の作り方を紹介します
ウィジェットの作り方
簡単なウィジェットの作り方を紹介します
関連情報

Android Techfirm Lab
Androidの最新情報、チュートリアル、開発Tipsをお届け
Android開発者様用技術情報
ドコモスマートフォンサイト内のAndroid向けアプリケーション開発者支援サイト
Androidに興味を持っている人たちが集まるユーザ会
Android Developers
Android 技術情報(英語)
Android対応の多機能アプリケーション -ポケット羅針盤-

当社は、株式会社エヌ・ティ・ティ・ドコモが提供する日本初のAndroid搭載端末である「docomo PRO series?HT-03A」向けに、多機能アプリケーション「ポケット羅針盤」を開発いたしました。
「ポケット羅針盤」は米Ｇｏｏｇｌｅ社提供アプリを除き、本端末に標準搭載される国内唯一のアプリケーションです。

本アプリケーションは、現在地の情報を「方位」や「傾斜」といった立体的な角度から分析し、空間を意識した位置情報を提供する画期的なアプリケーションです。ＧＰＳ機能と地磁気センサーを利用し、「星空機能」「ランドマーク機能」「コンパス機能」「水平器機能」といった４つの機能を搭載することで、多彩で多目的な利用シーンを提供いたします。携帯端末を空にかざすだけで現在地から見ることのできる星座を画面上に表示し、その星座に関する情報を入手できる星空機能や、現在地をベースに目的地までの進行方向を表示する「ランドマーク機能」を搭載するなど、普段の生活の中でお使いいただける便利な機能のほか、多数のエンターテイメント要素も盛り込んでいます。
開発事例

Android対応の多機能アプリケーション開発日本初のAndroid搭載端末である「docomo PRO series?HT-03A」向けに、米Google社提供アプリを除き、本端末に標準搭載される国内唯一のアプリケーション「ポケット羅針盤」を開発しました。

ホームモバイルRSS

テキスト
なぜゲーミフィケーションは効果的なのか？（Why Gamification Works？）

「ゲーミフィケーション（gamification）」という言葉をなんとなくわかったつもりで、バズワード的に使う人が増えてきました。本当にそれを可能するゲームのメカニズム（game mechanics）を理解してますか？ゲーミフィケーションというすばらしいコンセプトが、自分ではゲームをやりもしない人に、ビジネス上の理由だけでバズワードとして使われてしまうのは残念です。

以前、ゲーミフィケーションについてのNOTEを書きました（「進化するゲーミフィケーション」）。ゲーミフィケーションという言葉の意味を詳しく知りたい方はこのNOTEをご覧ください。時間が経ちゲーミフィケーションという言葉を知る人も増えてきましたので、今回はそのゲーミフィケーションを効果的にするゲームのメカニズムについて、こちらの記事を参考にしながらNOTEにとりたいと思います。

［参考：Mashable「HOW TO: Gamify Your Marketing」］

米調査会社Forrester Researchの5月の調査によれば、米国ゲーマーのうちXboxをプレイする人の65％は男性である一方、ソーシャルゲームをプレイする人の59％は女性だそうです。モバイルゲームでみるとその割合はほぼ半々になります。また、ソーシャルゲームをプレイする人を世代別でみれば、23％は45-65歳になるそうです。米国でもゲーマーというイメージは変わりつつあるのでしょう。

復習になりますが、ゲーミフィケーションはゲームそのものではありません。ゲーミフィケーションは、ゲームの力学＝メカニズムをゲームではない分野に応用しようというコンセプトです。現在のところ、もっとも相性のよいアプリケーションやWeb・モバイルサイトで多く応用されており、その利用や閲覧をユーザーに促すことでエンゲージメントを高めることに効果を上げています。

ゲーミフィケーションの主なテクニックは次のようなものです。

・達成の度合いによってゲットできるバッジ、またはレベル分け（achievement “badges” / achievement levels）

・現時点の競争相手の名前とスコアをリアルタイムに掲示するリーダーボード（leader boards）

・グラフィカルなインターフェイスでタスクの進行具合を伝えるプログレスバー（progress bar）

・バーチャルグッズの購入等に使う仮想通貨（virtual currency）

・報酬、クーポン、交換、ギフト、ポイント交換などのシステム（systems for awarding, redeeming, trading, gifting, and otherwise exchanging points）

・ユーザー間の課題（challenges between users）

・アクティビティの間にミニゲームを挟む（embedding small casual games within other activities.）

具体的にイメージがわくテクニックも多いと思います。foursquareのバッジや、食べログのレビュアーランキングなどに見られるリーダーボード、楽天にログインすると「●●●●会員になるには●/●までにあと●●●ポイント」というアナウンスとともに表示されるプログレスバーなど、現在でもすでに応用されている例はたくさんあります。

ここからが本題です。では、なぜこうしたテクニックがうまれたのでしょうか？そこには行動経済学（behavioral economics）との関連性の深い“人間の感情や習性”を巧みに利用したゲームのメカニズムがあるのです。このメカニズムを理解できれば、バッジを乱造するだけの退屈なアプリケーションやWebサイトをつくって恥をかくこともありません。うまく応用すれば社会に役立つアプリケーションだってつくれます。簡単に解説します。

■なぜバッジやレベルが有効なのか？

ゲームをプレイしているときに「なんか惰性になってきたけど、とりあえず次のレベルまでやめるのを待とう」と思ったことがありませんか？私はよくありました。人にはいままで自分がしてきたことを変えたくない性向があります（行動的モメンタム＝behavioral momentum）。今までプレイしてきたステータスを可視化する、がんばれば手に届く程度のチェックポイント＝レベルを設ける、また次のレベルまでの経験値を明示するなどのメカニズムを取り入れることで、この性向を強めることができます。もちろん、もっとレベルアップしたい、クリアできるはずだといった性向（しつこいまでの楽観性＝urgent optimism）に見られるような、「もうすぐで次のレベルだ！」とプラスに働くメカニズムもあります。

レベルがプロセスにおける段階だとすれば、バッジやアイテムはあるレベル＝段階において獲得する報酬（reward）です。プレイすればするほどバッジやアイテムを獲得できるというゲームのメカニズムは「至福の生産性（blissful productivity）」という言葉で知られます。プレイすればするほど何かが得られると感じられることはプレイヤーの大きな喜びにつながるのです。

獲得したバッジやアイテムについては「手に入れた感」がともないます。行動経済学の研究者であるダン・アリエリーは著書『不合理だからすべてがうまくいく』の中でこの「手に入れた感」と似た性向を「イケア効果」として言及していますが、人は自分でつくったもの（それがイケアの組み立て家具であっても）を過大評価する性向があり、労力をかければかけるほど獲得したものへの愛着は大きくなるそうです。こうした知見を応用するならば、手に入れやすいバッジやアイテムと手に入れにくいバッジやアイテムの両方を組み込むことで、エンゲージメントを効果的に高めることができると考えることができます。また、自分が所有するものに高い価値を感じ、手放したくないと感じる現象を行動経済学では保有効果（＝endowment effect）といいます。ゲームをやめることは一度手に入れたもの（それが金銭的な価値のないバッジやアイテムであっても）を手放すことになるため、なかなかゲームをやめられなくなるのです。バッジやアイテムの獲得という行為にはこうしたメカニズムが複雑に働いていると考えられます。

■なぜユーザー間の競争やリーダーボードが有効なのか？

ゲームにはルールがあり、勝つチャンスは平等です。ユーザーはリーダーボードが掲示されていることで、自分が勝者ではないことをあらためて感じることになります。悔しさはゲームを動機づける大きな要素の一つです。また、リーダーボードでは他人が持っているバッジやアイテムなどの透明性が保たれています。人は自分が持っていないバッジやアイテムを欲しくなる性向があるからです（うらやましさ＝envy）。この性向はバッジやアイテムの稀少性を高めるとより効果的です。逆に、人が持っていないバッジやアイテムを所有することは喜びをうみます（プライド＝pride）。

さらにいえば、多くのゲーミフィケーションを応用したアプリケーションやWebサイトはコミュニティを細分化してリーダーボードを設けます（＝micro leader-boards）。理由は、自分が競争している相手は誰なのかをより具体的に（身近に）意識させて、競争を促すためです。では、なぜ相手が身近だと競争が促されるのでしょうか？例えばあなたの友だちが競争相手だとします。あなたはその友だちについて「あいつはこういうヤツだ」という知識を持っていることでしょう。たとえその知識が全くゲームと関係ないことであっても（「あいつの彼女はぜんぜん可愛くない」など）、「あいつにならば勝てる」と思い込んでしまうのです。こういった人の性向は、行動経済学においては「自信過剰（oberconfidence）」による「支配の錯覚」「マジカル・シンキング」といった言葉で説明されます。

さらに少し突っ込んだ話をするならば、日本でいちばん有名といってもよいソーシャルゲームであるDeNAの「怪盗ロワイヤル」は「バトル」によって相手のお宝を奪うというメカニズムを取り入れています。これは行動経済学のプロスペクト理論をうまく応用していると考えられるのですが、人にはアイテムを獲得する満足度より、アイテムを奪われる悔しさのほうが大きい性向があります。損失回避性（loss aversion）として知られている性向です。一度手に入れたものを奪われることほど悔しいことはないのです。

また、復讐は快楽をうみます。マッテオ・モッテルリーニ著『経済は感情で動く』の中でチューリッヒ大学のドミニク・ド・ケルヴとエルンスト・フェールが行った「信用ゲーム」という実験があるのですが、それによれば「信頼を裏切った相手を罰するためなら高い代償もいとわない」というのが人間の性向であり、「罰することによって得る満足感」は非常に高いとされています。もし、これからゲーミフィケーションを取り入れたアプリケーションやWebサイトをつくるようでしたら、こうした日本を代表するソーシャルゲームから学ぶことができる優れたメカニズムを応用されるとよいと思います。

■なぜユーザー間の協力や協働が有効なのか？

人は自ら他人に協力しようとするとき、自分にとっての何らかの利得があるからではなく、お互いに信頼して信頼に応え合うことそのものに喜びを見出すことが「信頼ゲーム」の実験からわかっています。ユーザー間の協力や共同作業もゲームの楽しみや喜びを増幅させるメカニズムの一つです。わかりやすい例でいえば、ソーシャルゲームの代表格ともいえるFarmVilleに代表される「農場系」ゲームはお互いに協力し合うことでゲームがうまく進むように設計されており、友だちの役に立つことがより実感できる仕組みになっています。

このメカニズムがもっとも有効に作用するのはソーシャルメディアと組み合わせた場合です。新しい友人にゲームを紹介すると最短距離でレベルアップできるなどのメカニズムを組み入れることで、ユーザーにゲームに参加していない人をゲームに参加させる動機をうみだしています。このメカニズムが他のものと全く違う点は、他のそれがゲームをプレイしていることが前提なのに対して、ゲームに参加していない人に作用する点です。ある共同作業やギフト交換などを通じて、ユーザーに友だちとゲームをプレイする喜びを感じさせながら、一方でユーザーがソーシャルメディア上でつながるゲームとは関係のないコミュニティにゲームへの参加を促すように設計されているのです。

以上がゲームのメカニズムに関する簡単な解説です。実際にはこの他にもNOTEには書ききれないぐらいたくさんのゲーミフィケーションを効果的にするゲームのメカニズム（game mechanics）があります。ぜひ、そうしたメカニズムをきちんと理解して、社会や人の喜びに役立つすばらしいアプリケーションやWebサイトをつくってください。

あらためてゲーミフィケーション（gamification）に未来を感じていただけたでしょうか？ただバッジやアイテムを乱造するだけではダメなんだと、少しでも感じていただけたらとてもうれしいです。

事務的な連絡になりますが、私はこの7月にWebサイトやアプリケーション、電子書籍やデジタル商品を扱う部署から、本をつくる編集部へ異動となりました。個人的な願いはこうしたゲーミフィケーションやゲームのメカニズムをきちんと解説した日本人の著者による書籍が日本でも出版されることです。もし、ゲームを深く理解している良い書き手が身近にいらっしゃれば、ぜひお教えください（もちろん自分でも探しています）。

なお、もし事実誤認などがございましたら、Twitter（http://twitter.com/ro_mi）やFacebook（http://www.facebook.com/hiromi.kubota）などでいつもどおりお知らせいただけると大変に助かります。また、ご意見や感想などもいただければとても参考になります。