2010/11/23

アプリの紹介ページを公開

作ろう、作ろうと思いながらも先送りしていたアプリの紹介ページをやっと作りました。
今後は大した手間がかからずに、アプリ紹介ページが作れます。

URLをみるとわかりますが、AppEngineを使っています。が、staticなサイトです。
システム化が必要なほど、たくさんのアプリは作れないと思いまして。。。(なので手動更新です)
しかし、WebアプリじゃなくてもAppEngineを使うのはアリだと思います。

ぐぐっと!急上昇ワード
Simple Timer

AppEngineでstaticなサイトを構築する場合は、app.yamlでそのように設定する必要があります。
私は、下記のように設定しています。
application: アプリ名
version: 1
runtime: python
api_version: 1

handlers:
- url: (.*)/
  static_files: htdocs\1/index.html
  upload: htdocs(.*)/index.html

- url: /(.*\.py)
  script: \1

- url: /favicon.ico
  static_files: htdocs/favicon.ico
  upload: htdocs/favicon.ico
  mime_type: image/x-icon

- url: /(.*)
  static_files: htdocs/\1
  upload: htdocs/(.*)
今回は日本語のページのみ作成していますが、アプリは世界各地に向けて配信できますので、最低でも日本語と英語のサイトは用意したいとか考えると、多言語対応のためだけでもフレームワークを使って開発した方がいいのかなと思います。

そうすると、RailsやCakeで開発した方が作りやすそうとか、AppEngineじゃない方向に行きそうな予感も。。。

2010/11/19

AIR for Androidで作成したアプリを公開してみた

Simple Timer

前回の投稿に書いた通り、AIR for Androidで比較的簡単にAndroidアプリが作成できるということがわかったので、Marketに公開できるアプリを作ってみることにしました。既にJavaで開発したアプリをリリースしていますので、オリジナルAndroidアプリ第2弾はAIRベースとなりました。

先日標準のAndroidにはタイマーアプリが無いことに気づき、とあるアプリをダウンロードしました。このアプリは非常に素晴らしい出来だったのですが、もっとシンプルなものが欲しかったので、タイマーアプリを作ることにしました。

要件
・タイマー機能に特化
・数字は大きく表示したい
・Flashベースなので自由にUIをデザインしたい


ということを元に作ったアプリはこんな画面になりました。


※左下のタイマー設定時間をタッチすると、設定画面が起動します


・99時間59分59秒まで設定可能
・タイマーの一時停止が可能
・アラーム音のON/OFFが可能
・数字を大きくしたいので、画面はランドスケープ固定
・標準のSDKのカスタマイズとはひと味違った自由なデザイン
・Android2.2以上に対応(Adobe AIRが必須)

が特徴になります。

特に設定画面はいろいろ検討した結果、数字ボタンによる入力にしました。
左右キーまたは変更したい数字をタッチすることで選択し、数字を入力します。
これは、よく見るスピナーによる入力が選択肢60個(00〜59)では多すぎると思ったからです。
どうでしょうか、なかなか面白いものができたのではないかと思っています。

※入力に関するUIをフルスクラッチするのは大変ですね
※その反面、自由に画面を作ることができるのは楽しいです

AIR for AndroidはAIRが作れる人にとっては、スキルの有効活用としてはとても良いものだと思います。
PhoneGap等のhtmlベースでアプリを作るのと同じようにパフォーマンスや全APIに対応していない等の課題もありますが、Androidアプリをデザインで差別化するには強力な手段となります。
ターゲットが2.2以上という狭さと、AIR必須という状況がユーザーに受け入れられる環境が来るかどうか、この辺りがAIR for Androidの普及にかかっていると思います。
いずれにせよ、AIR for Androidでアプリを提供するなら、標準のSDKで作成されたアプリとは違った価値を提供しなければと思いました。

※今回のアプリ作成で、Flash CS5+AS3についての理解も深まり、作れるものの幅が広がりました。
※通信して取得したデータを使うとか、カメラやGPSを使うといったアプリも作りたいですね。

2010/11/04

もうそろそろAIR for Androidについて書いておくか(ただしFlash CS5)

実はプレリリースの時に、いくつかサンプルをつくってみたりしたんですが、2.2端末が少ないこともあり放置していました。
最近、AndroidマーケットでAIRが配布開始されたり、SBMのAndroidが全機種2.2だったり、Adobe MAXの影響か、Flexの方面からの盛り上がりを感じているので、AIR for Androidについて書いておきたいと思います。

1.環境構築
Adobe CS5を普通にインストールしてあって、アップデートで最新状態であれば、FlashのエクステンションをインストールすればOKです。
つまり、下記の3つが必要になります。
・Flash CS5
・AIR2.5
・Flashエクステンション(ベータなのでAdobe Labsから)

2.アプリをつくる
正しく環境構築ができていれば、Flash CS5に 新規>テンプレート>AIR for Androidが追加されています。
このテンプレートを使って作業します。
普通にFlashをつくります。フルAS3でもタイムラインを絡めてもいいです。
UI構築が自由にできるのがいいですね。

3.パブリッシュ(apkファイルの作成)
ファイル>AIR Android設定... で専用画面がでますので、ここで諸々設定します。(今回は詳細は割愛します)
※実機をもっていれば、Flashから直接転送デバッグも可能です。

でもって、こんなのをつくってみました。
西暦を和暦に変換するアプリです。

.flaファイルに記述しているActionScriptは以下のような感じです。
普通にMouseEventを記述すれば、Android上のタッチイベントになります。
import flash.events.MouseEvent;

btn_0.addEventListener(MouseEvent.CLICK, inputNum("0"));
btn_1.addEventListener(MouseEvent.CLICK, inputNum("1"));
btn_2.addEventListener(MouseEvent.CLICK, inputNum("2"));
btn_3.addEventListener(MouseEvent.CLICK, inputNum("3"));
btn_4.addEventListener(MouseEvent.CLICK, inputNum("4"));
btn_5.addEventListener(MouseEvent.CLICK, inputNum("5"));
btn_6.addEventListener(MouseEvent.CLICK, inputNum("6"));
btn_7.addEventListener(MouseEvent.CLICK, inputNum("7"));
btn_8.addEventListener(MouseEvent.CLICK, inputNum("8"));
btn_9.addEventListener(MouseEvent.CLICK, inputNum("9"));

btn_c.addEventListener(MouseEvent.CLICK, clearAll);
btn_enter.addEventListener(MouseEvent.CLICK, calc);

function inputNum(num:String):Function {
	return function(e:MouseEvent){
		ad.appendText(num);
	} 
}

function clearAll(e:MouseEvent):void {
	ad.text = "";
	wareki.text = "";
	opt.text = "";
}

function calc(e:MouseEvent):void {
	if(ad.text.length == 4){
		var n:int = int(ad.text);
		if(n>=1868 && n<=2100){
			var year:int;
			if(n<1912){
				year = n - 1868 + 1;
				if(year == 1){
					wareki.text = "明治元年";
				}else{
					wareki.text = "明治" + year + "年";
				}
			}else if(n<1926){
				year = n - 1912 + 1;
				if(year == 1){
					wareki.text = "大正元年";
					opt.text = "※1912年 明治45年7月29日まで、7月30日より大正元年";
				}else{
					wareki.text = "大正" + year + "年";
				}
			}else if(n<1989){
				year = n - 1926 + 1;
				if(year == 1){
					wareki.text = "昭和元年";
					opt.text = "※1926年 大正15年12月24日まで、12月25日より昭和元年";
				}else{
					wareki.text = "昭和" + year + "年";
				}
			}else{
				year = n - 1989 + 1;
				if(year == 1){
					wareki.text = "平成元年";
					opt.text = "※1989年 昭和64年1月7日まで、1月8日より平成元年";
				}else{
					wareki.text = "平成" + year + "年";
				}
			}
		}else{
			wareki.text = "範囲外です";
		}
	}else{
		wareki.text = "4桁入れてね";
	}
}

/*
明治 1868年〜
大正 1912年〜
昭和 1926年〜
平成 1989年〜

1912年 明治45年7月29日まで、7月30日より大正元年
1926年 大正15年12月24日まで、12月25日より昭和元年
1989年 昭和64年1月7日まで、1月8日より平成元年
*/
普通につくったFlash/ActionScriptがAndroidで動きます。感動です。
場合によってはJavaで開発するよりも簡単かも知れません。逆にメニューキーを押したあと(イベントは取れます)の実装はすべて自前?とか、普通のAndroidアプリと似せようとすると面倒かもしれません。ゲームとか標準のUIに縛られないアプリなら良さそうです。

今後2.2端末も増えそうですし、開発の選択肢に検討してみるのもいいかもしれません。
問題はAIRランタイムの容量が大きいことだったり。。。

2010/11/03

jQueryでAjaxメモ

jQueryでAjaxする時のためのメモ(備忘)です。
「初めてのJavaScript 第2版」に出てくるサンプルをjQueryを使ったバージョンと比べてみます。

まずは、本に出てくるAjaxのサンプルです。(scriptの部分のみ抜粋)

コード量が多いし、解説が欲しいですね。

これをjQueryを使うと、かなり記述量が減り、可読性も上がります。jQuery万歳!!な感じです。

  
※jQueryから操作しやすいようにidを付け加えたりしています。
※$.getよりも$.ajaxの方が、柔軟性があって良いみたい。

通信しているサーバサイドは共通です。
(※SyntaxHighlighterの表示が少しおかしいです)

札幌" .
        "" .
        "";
        break;
      case "FU" :
        $result = "" .
        "" .
        "";
        break;
      case "NA" :
        $result = "" .
        "" .
        "" .
        "";
        break;
      case "OK" :
        $result = "" .
        "";
        break;
      defaut :
        $result = "都市が見つかりません";
        break;
    }
    echo $result;
  }
?>

上記を発展させると、イベントをトリガとして通信し、データを書き換えるという処理がいろいろできると思います。

jQuery日本語リファレンス