スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

Androidエミュレータのサイズを変える(Eclipse)



EclipseでAndroidアプリ開発する際に必ず必要となるのが「エミュレータ」。

AVDを使うと、Androidのバージョンや解像度などのエミュレータ設定ができるのですが、最近のスマートフォンは解像度が高いので、そのまま解像度設定してエミュレータを起動すると、サイズがPC画面をはみ出てしまいます。

たとえば私のスマートフォン Xperia NX は、縦1280 x 横720ですので、縦長のエミュレータ設定になります。

しかし私の開発PCであるMacBook白は、縦800 x 横1280なので、明らかに縦方向がはみ出てしまいます。
(スマートフォンは縦長、PCは横長ですので、だいたい縦にはみ出るパターンが多いかと思います)

かと言って、エミュレータ設定で解像度を落とすわけにもいきませんので、そんなときの対応方法を紹介したいと思います。

続きを読む

スポンサーサイト

テーマ : プログラミング
ジャンル : コンピュータ

Android 4.0(or 4.1)で新規プロジェクト作成してみた。



久々に更新しようとしたら、世の中はすでにAndroid 4.0(ICS)の流れになっていて、ともすればAndroid 4.1搭載のスマートフォンも出ていますので、まずはAndroid 4.0系で新規プロジェクト作成してみたいと思います。

前提条件


EclipseとAndroid SDKはインストール済みとします。もしまだインストールがすんでいらっしゃらない場合は、[@IT]Android 4.0でアプリ開発を始めるための環境構築を参考としてください。私はMac OSユーザですが、こちらのサイトがとても役に立ちました。

また、Android 4.0用のAVD(Android Virtual Device)も生成してください。

そこまで準備ができてから、続いてプロジェクトの生成に入ります。


続きを読む

テーマ : プログラミング
ジャンル : コンピュータ

App Inventor for Androidを始めよう!使い方その2

はじめに


前回の記事では、App Inventorを使用するための準備を行いました。今回は、実際にプロジェクトを作成してエミュレータ上でアプリを実行してみます。




App Inventor プロジェクトの新規作成


App Inventorのトップページにはいろいろな情報が掲載されています。チュートリアルやFAQもありますので、かなり参考になります。まずは簡単なサンプルを作成します。最初に画面右上にある「My Projects」をクリックします。


new project

すると以下のような画面が開きますので、「New」ボタンをクリックします。


AppInventor_07.png

以下のようなウィンドウが表示されますので、プロジェクト名を入力します。


AppInventor_08.png

すると以下のようなページに遷移します。これが開発用のページのようです。結構洗練されてますね。この画面はアプリの「GUI」部分を作成するためのもので、画面左側にボタンやテキストボックス等いろいろなパーツが用意されています。基本的には配置したいパーツをマウスでドラッグ&ドロップして、画面中央のアプリ画面に貼付けるだけです。


AppInventor_09.png

今回はシンプルに「ボタンを押したらテキストボックスに文字列を表示する」アプリを作りたいと思います。




GUIの作成


まず、ボタンをアプリ画面に配置します。左上にある「Button」をドラッグ&ドロップしてアプリ画面に持ってきます。すると、アプリ画面にボタンが配置されます。ボタンのプロパティは画面右側に表示されますので、例えばボタンに表示させる文字列を変更させたりできます。ここでは「クリックしよう!」という文字列を表示させます。これらを実行した後の結果は下図のようになります。


AppInventor_20.png

同様の手順でTextBoxも配置していきます。以下のようになります。


AppInventor_21.png

これで今回のGUI作成は終わりです。簡単ですね。




ロジックの作成


次にロジックの作成を行います。ここがApp Inventorのキモですね。まずはApp Inventorのページにある「Open the Blocks Editor」ボタンをクリックします(下図)。


AppInventor_22.png

すると以下のような画面が表示されますので、「開く」をクリックします。なお、これはFirefox 3.6での場合で、Safariなど他のブラウザで行う場合はこの限りではないかもしれません。


AppInventor_23.png

ファイルがダウンロードされ、実行されますが、そのとき以下のような警告が表示されると思いますので、「許可」ボタンをクリックします(私の環境では、許可ボタンのクリックが遅くなるとうまくBlocks Editorが開けないことがありましたので、早めにクリックするのが吉かも)。


AppInventor_24.png

うまくいくと、これでBlocks Editorが開きます。以下のような画面です。App Inventorのページに比べるとちゃちい気がしませんか?


AppInventor_25.png

画面の簡単な説明としては、左上の「Built-in」は動作を規定するブロック(if文などの制御ロジックや、テキスト設定など)、「My Blocks」はGUIとして自分が配置したパーツのブロックを切り替えるためのボタンです。Blocks Editorを開いた段階では「Built-in」のほうが選択されているようで、DefinitionやTextなどのボタンが画面左に並んでいます。


まずはGUI生成のときに作った「ここをクリック!」ボタンが押されたときの挙動を拾うための設定します。Blocks Editorの「My Blocks」ボタンをクリックします。すると以下のようなボタンが画面左に表示されます。


AppInventor_26.png

ここで「Button1」ボタンをクリックします。すると、以下のようにButton1に関連するブロックが表示されます。


AppInventor_27.png

今回はボタンクリックなので、一番上のブロック「Button1.Click」をドラッグ&ドロップして画面上に配置します(下図)。


AppInventor_28.png

次に、ボタンがクリックされたときの挙動を設定してきます。今回はボタンが押されたらテキストボックスにテキストを表示するので、まずはTextBox1のボタンをクリックします(下図)。先ほどと同じようにTextBox1に関連するブロックが表示されます。


AppInventor_29.png

TextBox1にテキストを設定するためのブロックは「set TextBox1.Text to」です。これを先ほどと同じ要領でドラッグ&ドロップしていきます。ここで注意する点は、先ほどは位置した「Button1.Click」ブロックのに配置するということです(下図のような感じ)。


AppInventor_30.png

これで「Button1がClickされたら、TextBox1.Textをsetする」という動作が設定できました。後は設定するテキストですが、これは「My Blocks」のほうではなく「Built-in」のほうにブロックがありますので、「Built-in」ボタンをクリックします(下図)。


AppInventor_31.png

ここで「Text」をクリックして、「text text」というブロックをドラッグ&ドロップします。接続先は「set TextBox1.Text to」です(下図)。


AppInventor_32.png
AppInventor_33.png

後は、少し大きめのテキストで「Text」と書いてある部分をクリックして、任意の文字列を入力して終わりです。今回は「Clicked!」と入力します(下図)。


AppInventor_34.png

これで終わりです。少し手順がなくなりましたが、慣れると簡単かと思います。




エミュレータで実行


まずはエミュレータプログラムを起動します。Macの場合は「アプリケーション→AppInventor→commands for AppInventor」フォルダにある「run-emulator」を実行します。ターミナルが起動して、その後しばらくしてからエミュレータが起動します。結構時間がかかります。


注意:私が試した所によると、どうやらエミュレータを起動してからBlocks Editorを起動しないとうまくエミュレータと連携できないみたいです。エミュレータを起動する際はいったんBlocks Editorを閉じてからエミュレータ起動→Blocks Editor再び起動、すると良さそうです。


AppInventor_35.png

起動してくると途中で以下のようなエラー画面が表示されることがありますが、とりあえず「Force Close」押しておけばオッケーそうです。


AppInventor_36.png

エミュレータが起動したら、Blocks EditorのConnect to phoneボタンをクリックしてエミュレータと接続します(下図)。


AppInventor_37.png

しばらく待っていると、エミュレータ上でアプリが実行されます。今回作ったアプリの実行結果は以下。


AppInventor_39.png

日本語は文字化けしてしまっていますね。App Inventorでは日本語は使用しない方が良さそうです。アプリ上でボタンをクリックすると、テキストボックスに「Clicked!」というテキストが表示されます。


AppInventor_40.png

これで今回のアプリの開発は完了です。





おわりに


今回はとても簡単なアプリを開発してみました。App Inventorはまだベータ版なので、いろいろ不具合などあるかもしれませんが、アプローチとしては面白いのではないでしょうか。また、今回の記事はいろいろ私が試行錯誤した結果のものですので、正規の手順と違う部分もあるかもしれませんので、ご了承ください。個人的にはブロックを配置するだけでコーディングの代わりになる部分は興味深い体験でした!





テーマ : プログラミング
ジャンル : コンピュータ

App Inventor for Androidを始めよう!使い方その1

はじめに


Android開発に詳しい方は既にご存知かもしれませんが、Googleが「誰でもAndroidアプリを開発できるツール App Inventor」を発表しました(ニュースサイト記事:ITmedia News)。


どういうことかと言うと、今までAndroidアプリの開発と言えば、Eclipseをインストールして、Javaでプログラミングしていました。しかしそれではプログラミングを勉強しないとアプリが作れないということにもなります。ま、プログラミングできない人がAndroidアプリ作りたいかどうかはともかくとして、少なくともAndroidアプリのアイディアは持っているけれど、それを実現するためのスキル(Javaを勉強したり、Eclipseみたいな開発環境を用意したり)を身につけるためのハードルがあることは事実だと思います。


そんなジレンマを解消するツールが「App Inventor」だそうです。今までプログラミングしていた部分を、動作を規定したブロックをポンポン配置していく感じで実現するようです。


ということで、実際に試してみます。ちょっと記事が長くなってしまったので、今回はApp Inventorの準備だけに注力します。




App Inventor 申請手順


App Inventorを使用するためには、まず申請が必要らしいです。App Inventorのページに行き、ページ右上にある「Request Access」欄の「this from」というリンクをクリックします。すると申請用のページが開きますので、所定の欄にメールアドレスなどの情報を記載した後、ページ下部の「Submit」ボタンをクリックします。これで完了。


うまく申請されたら申請許可されましたメールが来るそうですが、私の場合はそのようなメールは来ていませんが、App Inventorが使えるようになってました。日本Androidの会のメーリングリストに流れていた情報を見ても、メールが来てないけれど使えたよ、って人がいましたので、そんなものかもしれません。自分でちょくちょく使えるようになったかチェックしにいくのが良いかもしれません。





App Inventor 使用準備


App Inventorが使えるようになったら、実際に使ってみます。まずはGoogleのトップページに行き、自分のアカウントでログイン。そしてページ上部の「その他」をクリックして「サービス一覧」を選択します。


AppInventor_01.png

するとサービス一覧が現れますので、「Labs(英語)」を選択します。


AppInventor_02.png

試験運用機能というリストが出てきますので、「App Inventor for Android」を選択します。


AppInventor_03.png

Terms of Service画面が現れますので、「I accept the terms of service」ボタンを選択します。


AppInventor_04.png

これでApp Inventorの入り口に入る事ができました。


AppInventorトップ画面

次に、App Inventorを使用するための準備。トップページに「Get Started」欄があるので「Set up your computer and phone」リンクをクリックします(以下)。


AppInventor_10.png

開いたページで「Set Up Your Phone and Computer」リンクをクリック(下図)。


AppInventor_11.png

インストールするOSの種類を選択します。私はMac OS環境なので「Instractions for Mac OS X」を選択(下図)。


AppInventor_12.png

「Installer software」リンクをクリックします(下図)。


AppInventor_13.png

すると「AppInventorExtras.pkg」というファイルがダウンロードされますので、開きます。


AppInventor_14.png

後はインストーラの説明に従ってインストールします。設定はこれで終わり。




おわりに


今回はApp Inventorを使用するための準備だけを説明しました。ちょっと記事が長くなってしまったので、実際にプロジェクトを作成してみるのは、次の記事にしたいと思います。実際にプロジェクトを作成してみましたが、慣れると結構簡単にアプリを作れるかも!という手応えでした。

テーマ : プログラミング
ジャンル : コンピュータ

ListViewの使い方

ListViewの使い方


CodeZineのサイトを参照しながら、Androidアプリ開発の勉強をしています。しかし、ListViewの使い方がイマイチ良く分からないので、調べてみた。


まずはコンストラクタの調査。これはJavaDriveさんの「ListViewクラスの定義とコンストラクタ」記事が参考になります。ただし、Eclipse上でレイアウトを作成する場合は、ListViewのコンストラクタを使用することはあまりないため、まずはスキップします。


次にListViewの使い方を調査します。これもJavaDriveさんの「ArrayAdapterクラスを使ってリストのデータを登録」記事が参考になります。記事によると、ListViewでデータを表示するためには、「setAdapter」メソッドを使用するようです。引数には、android.widget.ListAdapterインターフェースを実装したクラスのオブジェクトを利用するそうで、とりあえずはArrayAdapterクラスを実装して渡す例が掲載されています。


そうすると、ArrayAdapterとは何か、が気になりますが、これもJavaDriveさんの記事に記載があります。それによると、


  • ArrayAdapter(Context context, int resource)
  • ArrayAdapter(Context context, int resource, T[] objects)
  • ArrayAdapter(Context context, int resource, List objects)


という三つのコンストラクタの定義があります。第一引数にはthis、すなわち自分自身を指定します(本来的にはContextクラスのオブジェクト、という決まりがあるそうですが・・・)。第二引数はリソースとして登録されたTextView・・・具体的にはListViewでデータを表示するときに、ここで指定したリソースに対応するXMLファイルが参照される様子。分かりやすいような、分かりにくいような・・・。第三引数は表示したいデータの配列を指定します。これは、任意の引数となり、ArrayAdapterのコンストラクタで指定しなくても良く、後でArrayAdapterクラスのaddメソッドで追加することもできるらしい。


以上のようにしてArrayAdapterクラスのオブジェクトを生成して、ListViewクラスのsetAdapterメソッドの引数として渡すと、ArrayAdapterに設定したデータがListViewとして表示されるようです。




ここまでの作業をまとめると、以下のような感じでListViewのサンプルアプリを作成できます。


新規プロジェクトの作成


Eclipseを開いて、「File」→「New」→「Android Project」。設定は以下の通り。



  • Project Name:SampleListView

  • Build Target:Android 1.6

  • Application Name:Sample List View

  • Package Name:ja.sample.SampleListView

  • Create Activity:SampleListView


レイアウトの編集


res/layout/main.xmlファイルを開いて、ListViewをLinearLayoutの中に作成します(デフォルトであるTextViewは削除)。main.xmlファイルの中身は以下。




<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>


<ListView android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/ListViewSample"></ListView>
</LinearLayout>



ListViewにデータを表示する際に使用するXMLファイル


Eclipseの左側にあるres/layout/フォルダ上で右クリックして、「New」→「Android XML File」を選択。以下の設定を行って「Finish」ボタンをクリック。注意点としては、ファイル名に英字の大文字(A~Z)は使用できないということ。



  • File:listview.xml

  • Select the root element for the XML file:TextView


作成したら、とりあえずそのままでOK。


コードの作成


SampleListView.javaファイルに追加コーディングします。




package ja.sample.SampleListView;

import android.app.Activity;
import android.os.Bundle;
import android.widget.ArrayAdapter;
import android.widget.ListView;

public class SampleListView extends Activity {
private ListView listView = null;
private String[] data = {"File", "Edit", "Run", "Source", "Navigate"};
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);

// ListViewを取得
listView = (ListView)findViewById(R.id.ListViewSample);
// ArrayAdapterクラスのオブジェクトを作成
ArrayAdapter<String> arrayAdapter = new ArrayAdapter<String> (this, R.layout.listview, data);
// ArrayAdapterクラスのオブジェクトをListViewに設定
listView.setAdapter(arrayAdapter);
}
}



実行


これで作成は完了。後は、Eclipseからエミュレータを起動して実行します。実行結果は以下。


SampleListView

これで完成。まだ、各項目をクリックしても何の反応もしないので、そのあたりは今後。

テーマ : プログラミング
ジャンル : コンピュータ

プロフィール

sepiablue

Author:sepiablue
組込みソフトウェアエンジニアやってます。普段はC言語使い。
趣味はプログラミング、京都旅行で神社巡り。
AndroidアプリをMacで開発中。

最新記事
スポンサードリンク
スポンサードリンク
月別アーカイブ
カテゴリ
検索フォーム
RSSリンクの表示
リンク
QRコード
QRコード
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。