AndroidのUIが楽に作成できるdroiddrawが強烈に便利。

AndroidのGUIの部分は基本的にXMLで作成します。

これがちょっとクセがあって意外と面倒臭い。

EclipseのAndroidのプラグインを使うとある程度VisualStudioのようにD&Dでボタンなどを追加してレイアウトを自由に作れるのですが、これが凄く中途半端で自分の思うような位置にボタンなどを配置できません。これでは自分の頭の中で考えた方がマシで、ほとんど役に立たない。

そう考えるとMicrosoftのVisual Studioなんかは遥か昔からこの手のエディタはかなりの完成度だったので凄いです。ここは王者だと思っています。

しかし、私が知らなかっただけだったのですが、AndroidでもVisual Studioのように手軽にGUIを作成できるツールがありました。

その名もdroiddrawです。

http://droiddraw.org/

ちょっと使ってみたのですが、こいつは強烈です。自分の思いつくままにウィジェットを配置して、ソースを生成するだけ。まさにVisual Studioと同じ使い方が出来ます。まぁVisual Studio2010のエディターには遠く及ばない感じですが、それでも凄く便利。

一応配置するウィジェットの属性も変更できるので、レイアウトを決めるぐらいならこれで必要十分だと感じています。

このdroiddrawでXMLを作ってEclipseに貼り付けて、後はお好みで調整すると言った感じだと思います。これを標準のエディターにして欲しいぐらいですね。

まとめ

JAVAのSwingでも似たようなVisualEditorと言うプラグインがありますが、あれはツールで生成したコードがそのままソースになってしまうのではっきり言ってGUIに詳しいと逆に読みにくいです。しかし、AndroidはGUI部分がXMLに切り離されているので、ソースが読みにくくなるような事が無いんですよね。そういう部分は良く考えられているので、このようなツールはとても活かせると感じています。

難点があるとすれば、画像サイズが一定の決まった値しか選択できない事でしょうか？それぐらいしか今のところ思いつきません。知らなかった方は是非使ってみて下さい。オススメです。

 

初歩からわかるAndroid最新プログラミング

• 著者: 安生 真,柴田 文彦,藤枝 崇史
• 出版社: インプレスジャパン
• メーカー: インプレスジャパン

 

Creative ZiiO 10 インチ Android タブレット 8GB ZO-10S8G-BK

• メーカー: クリエイティブ・メディア

AndroidアプリUIデザイン＆プログラミング　　アイデア固めからユーザーフィードバック分析まで

• 著者: 渡嘉敷 守
• 出版社: 日経BP社
• メーカー: 日経BP社

タグ：Android Eclipse GUI droiddraw

GALAXY Tabの開発環境を作ってみた

0円で購入したSAMSUNGのGALAXY Tabですが、ところどころおかしな動きもしますが、軽快な動きと今までに無いサイズで結構気に入っています。

そんなGALAXY Tabの開発環境を作ってみました。

ドライバーのインストール

まず、ドライバーのインストール作業なのですが、これが結構面倒です。当初私も良く分からずにサムスンのKiesと呼ばれる統合アプリケーションをインストールしてドライバーも同時に入れていたのですが、こんなデカイアプリケーションをわざわざインストールしたく無いですよね。

そこで色々探しているとDeveloperサイトにドライバーが配布されていました。

http://innovator.samsungmobile.com/galaxyTab.do

但し、ちょっと面倒なユーザー登録が必要です。

ドライバーは25メガぐらいとやや大きいサイズですが、これで100メガ越えのKiesをインストールしなくてもドライバーだけ入手する事が可能です。

アドオンのインストール

ちなみに上記のDeveloperサイトではGALAXY Tabのアドオンのインストールの方法なども書いてありましたのでそこも挑戦してみました。

一応、AndroidのSDKとEclipseはインストール済みとして説明します。SDKなどのインストール方法は過去のエントリーを参考にしてみて下さい。

Android SDK and AVD Managerを起動させて、左のリストからAvailable Packagesを選択します。

この画面で、下の方にあるAdd Add-on Siteと書かれたボタンをクリックします。

すると、URLを追加する画面が表示されますので、ここに

http://innovator.samsungmobile.com/android/repository/srepository.xml

を記入してOKボタンを押します。

すると、Sitesの中にgoogle以外にsamsungmobileが追加されています。GALAXY Tabを追加してInstall Selectedのボタンを押します。

確認ダイアログが表示されますので、ここはAcceptを選択してインストールします。

暫くゲージが進むだけですが、途中再起動のメッセージが出たらYesを押します。

全てが完了したら、Installed Packeagesを見ると、GALAXY Tabが追加されていました。

あとはVirtual Devicesで新しいAVDを作成して起動させるだけです。

起動させたら、超巨大で驚きました。1920x1200ドットのモニターですが、はみ出ています。

ただ、見た感じデカイだけで、中身はAndroid2.2そのまんまと言った感じです。ですが、エミュレーターも実機っぽい画面でやる方がデバックなどの作業もやり易いので、助かりそうです。

 

バッファローコクヨサプライ BUFFALO Galaxy Tab用インナーケース ブラックメーカー型番 : BSTPG02CNBKBSTPG02CNBK

• メーカー: バッファローコクヨサプライ

Android Hacks　―プロが教えるテクニック & ツール

• 著者: 株式会社ブリリアントサービス
• 出版社: オライリージャパン
• メーカー: オライリージャパン

この独自コネクタがやっかいなんです。

【docomo純正商品】GALAXY　Tab　SC-01CUSB接続ケーブルSC01

• メーカー: docomo

Androidタブレットの本命？ GALAXY TabをCEATECで見てきた。
まさかの0円!? GALAXY Tab を購入した
GALAXY Tabの開発環境を作ってみた
Androidタブレットの本命!? GALAXY Tab レビューその１
Androidタブレットの本命!?　GALAXY Tab レビュー その２
Androidタブレットの本命!?　GALAXY Tab レビューその３

Galaxy Tab 10.1 Limited Edition レビュー（外観編）
Galaxy Tab 10.1 Limited Edition レビュー（ソフトウェア編）　
Android3.0 Galaxy Tab 10.1 を触って感じたこと

タグ：サムスン GALAXY Tab 開発 ドライバー SC-01C Android2.2

Androidでhttp通信を行いAKBのメンバーを表示させるアプリを作ってみた

久しぶりのAndroid開発ネタです。

どんなアプリ？

今回、私が作成したのは、ひたすらAKB48のメンバーの画像をネットから拾ってきてスライドショーさせるアプリケーションです。ネットから拾ってくるため、画像サイズは様々ですので、なるべく画面いっぱいに表示させるように拡大し、横に長い画像の時は横向きに表示するようにしています。

スライドショーさせるため、ある程度の画像は先読みして読み込んでいますし、設定画面を作成し表示させるメンバーも選択できるように作成しました。

さらに気に入った画像があれば、タップで即座に保存できるようにしています。

参考にしたページ

今回は参考にしたWebサイトなどをご紹介したいと思います。それぞれの要点などはまた後日別エントリーで書きたいと思います。

Yahoo!Japan デベロッパーネットワーク 画像検索

画像検索のAPIはYahoo!Japanを利用しました。理由はGoogleよりも簡単だからです。

throw Life 初めてのAndroid 第七章 世界との接続

ご存じsimejiの作者であるadamorockerさんのブログですが、こちらの記事を参考にネットから画像を取得する方法を参考にしました。

ちなみに初めてのAndroidはオライリーから書籍として発売されています。

初めてのAndroid

• 著者: Ed Burnette
• 出版社: オライリージャパン
• メーカー: オライリージャパン

ITpro 第５回 RSSリーダーの要、パース機能を知る

Yahoo!のAPIはXMLを返してきます。そのXMLのパース機能を理解するためにこちらの記事を参考にしました。

Android Techfirm Lab Android入門[第３回：設定画面を作る]PreferenceActivity

設定画面やメニューの作成はこちらの記事などを参考にしました。

hidecheckの日記 画像のリサイズとか回転

画像サイズは色々なサイズを取得するのですが、なるべく画面いっぱいに表示させたいので、画像の回転や画像のリサイズはこちらの記事を参考にしています。

まとめ

実は半分頼まれて作ったようなアプリで、AKBのメンバーには実はあまり興味無かったのですが、特に先日購入したGalaxy Tabなどのような大画面で見ていると流石に萌えてしまいます。。。

まだまだ課題はありますが、これで得た知識などを活かして来年はアンドロイドマーケットに何かアプリを出せるようになれれば良いなぁと思っています。次回はそれぞれの要点などをまとめたエントリーを書きたいと思います。

 

初歩からわかるAndroid最新プログラミング

• 著者: 安生 真,柴田 文彦,藤枝 崇史
• 出版社: インプレスジャパン
• メーカー: インプレスジャパン

 

渡り廊下走り隊ファースト写真集「アッカンベー」 (タレント・映画写真集)

• 著者: 木内 章浩
• 出版社: 集英社
• メーカー: 集英社

篠田麻里子写真集『SUPER MARIKO』

• 著者: 桑島 智輝
• 出版社: ワニブックス
• メーカー: ワニブックス

タグ：Android AKB48 GALAXY Tab http通信 開発

Androidのカメラを使うプログラムを書いてみた

Androidの開発を初めて、そろそろ一か月ぐらいが過ぎようとしています。そろそろ自分だけのアプリを書いてみようと思って、カメラを使ったアプリケーションを作ってみました。

こんな風にEvery Little Thingの持田香織さんを表示させて、いつでも２ショットが撮れてしまうと言うくだらないアプリです（笑）

アプリの開発のポイントをまとめました。

カメラの制御にはCameraクラスを使う。
カメラのプレビューを表示させるにはSurfaceViewクラスを使う。
マニフェストファイルにカメラを利用するためのパーミッションを追加。
オーバーレイ表示はカメラのプレビューの上に透明な画像を表示するだけで可能。
オーバーレイ表示とカメラから取得した画像を貼り付けて、一枚の画像として保存する。

ポイントはたったこれだけなのです。実際書いてみると凄く簡単です。

カメラの制御

カメラはCameraクラスで制御しますが、このカメラの操作を行うタイミングはSurfaceViewが生成されたり、破棄されるタイミングに依存させます。そのため、SurfaceViewの状態を監視するリスナーを付けます。これらはonCreateメソッドの中でします。

SurfaceView surface = new SurfaceView(this);
//以下はお決まりの実装。
SurfaceHolder holder = surface.getHolder();
// SurfaceViewにリスナーを登録
holder.addCallback(surfaceListener);
setContentView(surface);

SurfaceHolder.Callback リスナー

// カメラのプレビューを表示するSurfaceViewのリスナー
private SurfaceHolder.Callback surfaceListener = new SurfaceHolder.Callback() {
    // SurfaceViewが生成されたらカメラをオープンする
    public void surfaceCreated(SurfaceHolder holder) {
        camera = Camera.open();
        try {
            camera.setPreviewDisplay(holder);
        } catch (Exception e) {
            e.printStackTrace();
        }
    }
    // SurfaceViewが破棄されるタイミングでカメラを開放する
    public void surfaceDestroyed(SurfaceHolder holder) {
        camera.stopPreview();
        camera.release();
        camera= null;
    }
    public void surfaceChanged(SurfaceHolder holder, int format, int width,
            int height) {
        camera.startPreview();
    }

以上でカメラの映像を表示できるプログラムが完成します。

オーバーレイ表示

オーバーレイ表示はViewクラスをオーバーライドしたクラスを作り、透明な画像を表示するだけです。オーバーレイ表示に見立てたViewクラスは以下の通りです。

public class OverLayView extends View {
        private Bitmap icon;
        int width;
        int height;
        public OverLayView(Context context) {
            super(context);
            
            setDrawingCacheEnabled(true);            
            icon = BitmapFactory.decodeResource(context.getResources(), R.drawable.mochida);
            setFocusable(true);
        }
        
        protected void onSizeChanged(int w, int h, int oldw, int oldh){
            //ビューのサイズを取得
            width= w;
            height= h;
        }
        
        @Override
        protected void onDraw(Canvas canvas) {
            super.onDraw(canvas);
            canvas.drawColor(Color.TRANSPARENT);
            //位置を調整しています。x,y軸を調整することで、表示位置を変更できます。
            canvas.drawBitmap(icon, width-232,0, null);
        }
    }

そして、onCreateで、surfaceviewを付けた直後ぐらいに

overlay = new OverLayView(this);
addContentView(overlay, new LayoutParams(LayoutParams.FILL_PARENT,
        LayoutParams.FILL_PARENT));

と記述して貼り付けてしまいます。これでカメラのプレビューの上に画像が表示されます。

保存

最後に保存ですが、シャッターボタンなどを押したタイミングでcameraクラスのtakePictureメソッドを実行させます。例えば、タッチイベントなどにすると以下のようになります。

public boolean onTouchEvent(MotionEvent event) {
    if (mCamera != null && mInProgress == false) {
        // イメージの取得を開始する。リスナーを設定する
        mCamera.takePicture(mShutterListener, // シャッター後
                rawListener, // Rawイメージ生成後
                jpegListener); // JPEイメージ生成後
        mInProgress = true;
    }
    return super.onTouchEvent(event);
}

takePictureの第２、第３引数にはそれぞれ、rawデータとjpegが生成された時のリスナーを付けます。つまり、それぞれのリスナー内で保存する処理を書きます。

PictureCallbackリスナー

// PictureCallback jpegなどが生成された後に呼び出される
private PictureCallback jpegListener= new PictureCallback() {
    @Override
    public void onPictureTaken(byte[] data, Camera camera) {
        // 保存する処理
    }
};

保存処理

保存はカメラのプレビューイメージとオーバーレイイメージを重ね塗りして保存します。

//カメラのイメージ
Bitmap cameraMap = BitmapFactory.decodeByteArray(data, 0,
        data.length, null);
// オーバーレイイメージ viewから画像を取得。
Bitmap overlayMap = overlay.getDrawingCache();
//空のイメージを作成
Bitmap offBitmap = Bitmap.createBitmap(cameraMap.getWidth(),
        cameraMap.getHeight(), Bitmap.Config.ARGB_8888);
Canvas offScreen = new Canvas(offBitmap);
offScreen.drawBitmap(
        cameraMap,
        null,
        new Rect(0, 0, cameraMap.getWidth(), cameraMap.getHeight()), null);
offScreen.drawBitmap(
        overlayMap,
        null,
        new Rect(0, 0, cameraMap.getWidth(), cameraMap.getHeight()), null);
// 保存　"sample"はファイル名
MediaStore.Images.Media.insertImage(getContentResolver(),
        offBitmap, "sample", null);

問題点とまとめ

じつは問題点がありまして、作成後の画像ファイルの持田さんの画像が縦長になってしまっています。どうしてこんな事になってしまうのかまだ分かっていません。これはなんとかしたいのですが。。。

ですが、カメラのオーバーレイ表示とそれを保存する方法がいかに簡単に実装できるのか伝えることが出来ていたら幸いです。携帯電話でこんな処理がこんなに簡単にできてしまうAndroidは私のような３流プログラマでもそこそこ出来てしまうので、とても面白いと感じています。

私も買いました。Android開発者のバイブル的存在。

Android Hacks　―プロが教えるテクニック & ツール

• 著者: 株式会社ブリリアントサービス
• 出版社: オライリージャパン
• メーカー: オライリージャパン

新製品☆ 【16GB】 東芝 CLASS4対応 microSDHCカード ハイスピードタイプ（クリアケース付） SD-C16GR6W4

• メーカー: 東芝

Androidこのアプリがすごい!―本当に使えるアプリを厳選紹介!最新アプリカタログ (アスペクトムック)

• 出版社: アスペクト
• メーカー: アスペクト

NIU(DVD付)【初回生産限定】

• アーティスト:
• 出版社/メーカー: avex trax
• 発売日: 2010/08/25
• メディア: CD

タグ：Android カメラ オーバーレイ 保存 開発

Androidアプリケーションの４大要素をざっくりとまとめてみた。

私もAndroidアプリケーションの開発をまともに初めてまだ間もないですが、アプリを開発するのにAndroidアプリケーションの特徴をザッと押さえておかないと、なかなか難しいなと実感しています。

ですが、逆に言えば、基本的な事はその特徴さへ掴んでしまえばある程度のモノは簡単に作れそうなイメージも湧いてきました。

それらは何度もご紹介している入門書をある程度読めば理解が深まると思います。

Google Androidアプリケーション開発入門 画面作成からデバイス制御まで――基本機能の全容

• 著者: 木南 英夫
• 出版社: 日経BP社
• メーカー: 日経BP社

 

Google Androidプログラミング入門

• 著者: 江川 崇,竹端 進,山田 暁通,麻野 耕一,山岡 敏夫,藤井 大助,藤田 泰介,佐野 徹郎
• 出版社: アスキー・メディアワークス
• メーカー: アスキー・メディアワークス

 

私はまず、Google Androidアプリケーション開発入門を読んでから、Androidプログラミング入門を読んで理解を深める手順で進めています。ですが、これは私のやり方であって、これをオススメすると言う訳ではありません。

４大要素とは

Androidアプリの開発を進めていて、押さえておかなくてはいけないと感じるのは、「Androidアプリケーションの４大要素」と言われているものです。

４大要素とはアクティビティ、サービス、コンテントプロバイダ、インテントの事です。それぞれ、詳しく解説する事はブログ内ではちょっと不可能ですので、大雑把にまとめてみました。

アクティビティ

PCアプリケーションにおけるウィンドウとほぼ同等。但し全画面表示が基本。
アクティビティ内に配置する個々のユーザーインタフェース部分をビューと呼ぶ（ウィジェットとも呼ぶ）ビューは文字を表示するTextViewからビデオを表示するVideoViewまで多種多様用意されている。
アクティビティはスタック方式で管理されている。
ユーザーの操作（メニューを押した、タップしたなどのイベント）は一番手前のアクティビティが受け取る。
アクティビティにはライフサイクルがある。

インテント

アクティビティ間での呼び出しを行うための仕組みがインテント。
アクティビティ同士はインテントを介してしかデータ交換ができない。
通常はインテントに必要なパラメータを設定して、startActivityメソッドを呼ぶ。
それぞれのアクティビティがどういうパラメーターによって起動されるかは、マニフェストファイルの記述内容で決まる。
結果を受け取る場合は、startActivityForResult メソッドを使う。

※電話をかけるインテントを実行させるサンプル

private void sendDial(){
    Intent intent = new Intent(Intent.ACTION_DIAL, Uri.parse("tel:[phone]"));
    startActivity(intent);
}

サービス

ウィンドウを表示していない場合にも、バックグラウンドで処理を継続させる事ができるクラス。
常駐型のサービスもある。
ファイルのダウンロードのような時間のかかる処理や定期的なメールチェックなどに使用する。
サービスのバインドとはサービスが提供する機能を呼び出すために、アプリケーションがサービスに接続すること。サービスに接続してサービスの機能を呼び出す事で、サービスからデータを取得したり設定したりすることが可能になる。

コンテントプロバイダ

アプリケーションが保持しているデータを他のアプリケーションに公開するためのモジュール。
通常はアプリは保存しておきたい情報をファイルシステムや簡易データベースに保存して、他のアプリからは参照できないようにしているが、他のアプリに情報を公開したい場合に、コンテントプロバイダを利用する。
通話ログや、ブラウザのブックマークなど、Android標準でいくつかのコンテントプロバイダが組み込まれている。

まとめ

これらの４大要素とビューやウィジェットの作成についての仕組みを理解すれば、基本は抑えたと同等と言っても怒られないと思います。トリッキーな事は無理だとしても、恐らく、それだけでもシンプルなタイマーアプリや、ちょっとした音楽プレイヤー、画像ビューワーなどは作成できるでしょう。ちょっとやる気出てきますね。

何度も書いてますが、よく分からないうちはパクってなんぼだと思いますので、これからAndroidの開発を進めたい方は入門書を買って、サンプルコードをダウンロードして、それを実行しながら改良して理解を進めるのが良いと思います。少なくとも私は一度投げ出しているので、今回はそうしています。

さらに踏み込みたくなったらこの本に頼らざるを得ません。

Android Hacks　―プロが教えるテクニック & ツール

• 著者: 株式会社ブリリアントサービス
• 出版社: オライリージャパン
• メーカー: オライリージャパン

レイアウト GALAXY S ドコモSC-02B用ラバーコーティングシェルジャケット/マットブラック RT-GSC4/B

• メーカー: レイ・アウト

タグ：Android開発 Android インテント アクティビティ サービス コンテントプロバイダ