Android Studio最速入門~効率的にコーディングするための使い方

第3回じめましてのAndroidアプリケーション

はじめに ─使用環境の確認

どうにかAndroid Stduioのインストールも完了しましたので、簡単なプロジェクトを作成させて、Android Studioの大まかな開発の流れをつかんでみましょう。

なお、筆者が試した環境の詳細は表1、2のとおりです。Android Studioは v0.1(ビルド番号:IA-130.677228)で、特に断りがなければMac版について解説しています。

表1 動作確認を行った環境の詳細(Mac)
プラットフォームMac OS X 10.8.3
Android Studio起動JVMJDK 1.6.0_29(64bit)
Android SDK4.2.2
コマンドライン上のJDKJDK 1.7.0_21(64bit)
表2 動作確認を行った環境の詳細(Windows)
プラットフォームWindows 7 Professional SP1
Android Studio起動JVMJDK 1.7.0_21(32bit)
Android SDK4.2.2
コマンドライン上のJDKJDK 1.7.0_21(32bit)

Android SDKはAndroid Studio付属のものです。筆者の場合、既存のAndroid開発環境は持ち合わせていませんので、上記以外にAndroid関連の設定は一切ありません。すでにAndroid開発環境を持っている方は、環境変数ANDROID_SDK_HOME~/.androidなどを一時待避しておくと、無用なトラブルに悩まされないで済むかと思います。

説明上の注意

今回からAndroid Studioの操作説明が入ります。説明の都合上、以下のルールで画面や機能について記述します。

  • 画面名や画面上の項目はカッコ(⁠⁠)で示します(例:「Preferences」⁠Appearance」など)
  • 設定画面など、画面内の特定のタブや項目を指示する場合はスラッシュ(/)で区切って示します(例:「Preferences / Appearance」Preferences画面のAppearanceを選ぶ)
  • メニューバーの機能についてはカッコ(⁠⁠)と矢印(→)で示します(例:「File→New...」FileメニューのNew...項目を実行する)

まず、その前に

いきなり出鼻をくじいてすいません。プロジェクトを作成する前に最低限の設定をしておきましょう。Android Studioの主な設定は「Preferences」で行います(Windows版/Linux版では「Settings⁠⁠。 図1のとおりウェルカム画面の「Configure → Preferences」で設定画面に移ります。

図1 Preferences画面の開き方(クリックすると操作の動きがわかります)

「Preferences」やそれ以外の設定については、別の回で説明しますので、細かい話は割愛します。

プロキシの設定

職場などファイアウォール内のネットワーク上でAndroid Studioを試す場合に設定が必要です。⁠Preferences / HTTP Proxy 」でプロキシサーバを指定してください図2⁠。

図2 Preferences / HTTP Proxy
図2 Preferences / HTTP Proxy

日本語フォントの設定(Windows版のみ)

Windows版に限った話ですが、デフォルトの設定では日本語がトウフ(□)になりますので、⁠Preferences / Appearance / Override default fonts by(not recommended) 」で日本語フォントを指定してください図3

図3 Preferences / Appearance
図3 Preferences / Appearance

「not recommended(非推奨⁠⁠」とありますが、気にせず設定しましょう。筆者の好みの設定は表3のとおりです。

表3 筆者が好むフォント設定
設定項目NameSize
WindowsSansSerif.plain11
MacLucida Grande11

ダークテーマ「Darcula」の設定

Googleが公開しているAndroid Studioのスクリーンショットはダークテーマなのに、立ち上げてみたら普通のアプリケーションっぽくでガッカリした方もいるでしょう。ダークテーマに憧れてAndroid Studioに興味をもった方もいると思うので、こちらもさっさと設定してしまいましょう。

テーマの変更は、日本語フォント指定で紹介した「Preferences / Appearance / Themeで行います。テーマ名はDarculaです図4

図4 Appearanceでのテーマ変更
図4 Appearanceでのテーマ変更

テーマ変更は必須というわけではありませんが、エディタのカラー設定がデフォルトより良い感じなので、早々に設定変更してしまいましょう。

日本語フォント変更やテーマ変更を有効にするには、一度Android Studioを終了して、再度立ち上げ直してください。

はじめてのAndroidプロジェクト

ようやく準備が整いましたので、ウェルカム画面からNew Project...を選び、プロジェクトを作ってみましょう。

プロジェクトの作成

プロジェクト作成ウィザードでは、数画面にわたって問い合わせをしてきますが、今回ははじめの設定のみ行い、それ以外はすべてデフォルトのままとします図5⁠。

図5 New Projectウィザードのはじめの画面
図5 New Projectウィザードのはじめの画面

入力した値は 表4のとおりで、それ以外はすべてデフォルトです。⁠Package name」"com.example."で始まっているため文句を言われますが、気にせず進みましょう。ちょっとわかりづらいですが、画面の右下にウィザードを前後に進むボタン「Previous」⁠Next」があります。

表4 New Projectウィザードの入力値
設定項目入力した値
Application nameMyFirstApp

ウィザードの最後まで進むと「Finish」ボタンがありますので、このボタンを押してプロジェクトの作成を開始しましょう。

ホントにまっさらな状態でAndroid Studioでプロジェクトを作成するときは、初期設定でいろいろな事を行っているので、完了までにとんでもなく時間がかかります(環境によっては10分以上かかる時があります⁠⁠。2回目以降は初回ほど時間がかからなくなりますので、初期設定の一環だと思ってガマンしてください。

Android Studioのメイン画面

無事プロジェクトの作成が完了すると、図6のような状態になります。

図6 プロジェクト作成直後のAndroid Studioの状態
図6 プロジェクト作成直後のAndroid Studioの状態

これがAndroid Studioのメイン画面です。画面上端にツールバー、左右および下部にあるアイコン付きラベルがツールウィンドウ、などなど……画面の詳しい説明も後の回で行いますので今回はこれくらいにします。パッと見、何もありませんが、いくつかのツールウィンドウを表示すると、図7のようないかにもIDE風な画面になります。

図7 いかにもIDE風なAndroid Studioの状態
図7 いかにもIDE風なAndroid Studioの状態

細かい解説は次回に行いますが、Android Studioは「Project(プロジェクト⁠⁠」と、その中で構成する「Module(モジュール⁠⁠」という単位でプロジェクトを構成します。少々乱暴な例ですが、 ModuleはEclipseでいうプロジェクトに相当します。Android StudioのProject依存関係のあるModuleだけをまとめたEclipseのワークベンチのようなものです。ただ本来のEclipseのワークベンチのような、関係の有無によらずすべてのプロジェクトひとまとめにするという概念はありません。

今回作成したプロジェクトはMyFirstAppという名前の2つのModule で構成されています。Projectのようなモノなので特に名前はありません。このあたりの話は少々ややこしいので次回に説明します。今回はとりあえず、2つのModuleは「New Projectウィザード」で指定した「Application name」「Module name」に相当すると思ってください。そしてプログラムは「Module name」側に存在します図8⁠。

図8 今回作成したプロジェクトの全体像
図8 今回作成したプロジェクトの全体像

Androidアプリケーションの実行

ウィザードを指示通り操作したのであれば、この時点ですでにアプリケーションが実行可能な状態になっていますので、早速実行してみましょう。

プロジェクトの実行構成はRun/Debug Configuration(以下、Run Configuration⁠⁠」と呼びます。現在有効なRun Configurationはツールバーから確認できます(⁠⁠MyFirstApp-MyFirstApp」が設定済み⁠⁠。図9にあるように、Run Configuration隣の実行(Run)アイコンをクリックし、アプリケーションを実行してみましょう。

図9 アプリケーションの実行(Runアイコン)
図9 アプリケーションの実行(Runアイコン)

Runアイコンを押すとプロジェクトのビルドが実行され、しばらく経つと「Choose Device」ダイアログが表示されます。このダイアログで、Androidのデバイスを指定します図10⁠。

図10 Choose Deviceダイアログ
図10 Choose Deviceダイアログ

最初はエミュレータも何も無い状態ですので「Launch emulator」「…」ボタンを押して「Android Virtual Device Manager(AVD Manager⁠⁠」を起動し、エミュレータを作成しましょう。筆者の環境では「Device Definitions」にある「Nexus S」ををコピー(クローン)してエミュレータを作成しました。

すでにAndroid開発を行っている方はご存じだと思いますが、AVD ManagerはAndroid SDKから提供されているツールで、Android Studioとは別プロセスとして実行されます。⁠…」ボタンを押してもAVD Managerが表示されないなぁと思っていたら、実はAndroid Studioに隠れてただけ、なんて事もありますので、ドックなりタスクバーなりをチェックしておきましょう。

AVD Managerでエミュレータを作成すると、先ほどの「Choose Device」ダイアログから選択可能になりますので、エミュレータを指定して「OK」ボタンを押します。

非力な環境ではエミュレータの起動にとんでもなく時間がかかります。あまりにも時間がかかりすぎて退屈な時は、画面下のAndroidツールウィンドウを開き、デバイスのログ(logcat)でもながめてお茶を濁しましょう。

図11 Androidツールウィンドウの表示
図11 Androidツールウィンドウの表示

エミュレータに無事図12のような画面が表示されたら実行成功です。おめでとうございます。

図12 MyFirstAppの実行画面
図12 MyFirstAppの実行画面

はじめてのAndroid開発

いくら筆者がAndroid開発未経験とはいえ、プロジェクトを作って、何もせず実行してみただけではあんまりなので、ちょっとだけプログラムを修正してみましょう。プロジェクトの初期状態では1つのアクティビティ MainActivity.javaと、それに対応するレイアウトactivity_main.xmlがあります。

Projectツールウィンドウから見たプロジェクト構造は図13のとおりです。

図13 プロジェクト構造
図13 プロジェクト構造

このプロジェクトに次の修正をしてみましょう。

  • 新しいレイアウトactivity_second.xmlを作成する(レイアウトにはテキストラベルとボタンを配置する⁠⁠。
  • 新しいレイアウト用にアクティビティSecondActivity.javaを作成し、処理を記述する
  • 既存のレイアウトactivity_main.xmlにテキストフィールドとボタンを追加する
  • 既存のアクティビティMainActivity.javaを修正してボタンを押された処理を追加する

画面遷移として図示すると図14のようになります。最初の画面のテキストフィールドに入力した値を次の画面に表示する、といったごく簡単なものです。

図14 修正後の画面遷移イメージ図
図14 修正後の画面遷移イメージ図

新しいレイアウトの作成

ProjectツールウィンドウからレイアウトディレクトリMyFirstApp/MyFirstApp/src/main/res/layoutを選択して、メニューバーの「File→New...」を実行します。図15のような「Newポップアップ」が表示されるので、そこからLayout resource fileを選び、新しいレイアウトリソースactivity_second.xmlを作成します(入力した値は表5を参照⁠⁠。

図15 新しいレイアウトリソースの作成(クリックすると操作の動きがわかります)
表5 新しいレイアウトリソースの入力値
項目入力値
File nameactivity_second
Root elementLinearLayout

Android Studio(およびJetBrains系IDE)の特徴なのですが作りたいファイルは、作りたい場所で作成を指示します⁠⁠。他のIDEによくある「新規作成⁠⁠→⁠ウィザードで問い合わせ⁠⁠→⁠然るべき場所に然るべきファイルができる」という類いの操作はほとんどありません。この「Newポップアップ」も呼び出した場所によってメニューの内容が異なります。

レイアウトリソースを作成すると、そのファイルを開き、図16のようなデザイナ画面になります。このデザイナ画面が、Android Studioの目玉機能のひとつのようです。

図16 レイアウトのデザイナ画面
図16 レイアウトのデザイナ画面

それでは、画面左側のPaletteから「Large Text」⁠Button」をレイアウトにドラッグ&ドロップしてレイアウトを完成させましょう図17⁠。

図17 レイアウトへ部品を配置す(クリックすると操作の動きがわかります)

部品のプロパティは、画面右側の「Properties」で確認や変更ができます。レイアウト上の部品をダブルクリックすると、頻繁に使うであろう「text」「id」を直接編集することができます図18⁠。

図18 レイアウト上の部品からtext/idを確認する(クリックすると操作の動きがわかります)
idを確認する` &title=`図18 レイアウト上の部品からtext/idを確認する` &width=`400` />

今回、それぞれの部品のidはデフォルトのままとしますが、せっかくなのでButtonのラベル(text)のみ外部化してみましょう。レイアウト上のButton部品を選択し、⁠text」「…」ボタンを押します。⁠Resources」画面が表示されますが、該当するリソース名はまだ存在していませんので、画面下の「▼New Resource」ボタンを押し「New String Value...」を選択します。⁠New String Value Resource」ダイアログが表示されるのでリソース情報を登録します図19表6⁠。

図19 Buttonのラベル名を外部化する(クリックすると操作の動きがわかります)
表6 Buttonラベルのリソース情報
項目設定した値
Resource nameback
Resource valueGo Back

これで新しいレイアウトの準備が整いましたので、次はそれを扱うアクティビティを作ってみましょう。

新しいアクティビティの作成

それでは、先ほど作ったレイアウトactivity_second.xmlを扱うアクティビティSecondActivity.javaを作成してみましょう。アクティビティはJavaのプログラムなので、既存のアクティビティMainActivity.javaと同じ場所MyFirstApp/MyFirstApp/src/main/java/com/example/myfirstappに作成します。

レイアウトの時と同様に、Projectツールウィンドウで作成したい場所を選んでから作成指示を出しますが、今回は趣向を変えてコンテキストメニューから作成してみましょう。⁠Newポップアップ」との違いは、コンテキストメニューに展開されてるくらいでしかありません。どちらを好んで使うかは人それぞれです図20表7⁠。

図20 アクティビティの新規作成(クリックすると操作の動きがわかります)
表7 アクティビティの新規作成の入力値
項目入力した値
NameSecondActivity
KindActivity
Label@string/app_name

この連載の読者にIntelliJユーザはそれほど多くないと思うので説明しますと、通常Javaのソースコードを作成する場合は「New」メニューから「Java Class」を選ぶのですが、アクティビティなどのAndroid用コンポーネントの場合はAndroid Compomentから作成してください。こちらから作成したコンポーネントは、もれなくマニフェストAndroidManifest.xmlにも情報が登録されるので何かと便利です。

先ほどの図20を見てもわかるように「Label」部分には入力補完が効きませんでした。レイアウトリソース作成の時は「Root Element(ルート要素⁠⁠」に入力補完が効いて便利だっただけに、少々残念です(今後に期待しましょう⁠⁠。

作成したアクティビティのコードはあまり深く考えず、リスト1を丸ごとコピペして書き換えましょう(コーディングのコツやテクニックは、次回以降でちゃんと説明しますので、もうしばらくお待ちください⁠⁠。

リスト1 SecondActivity.java
package com.example.myfirstapp;

import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.view.View;
import android.widget.TextView;

import static android.view.View.OnClickListener;

public class SecondActivity extends Activity {
  public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_second);

    TextView textView = (TextView) findViewById(R.id.textView);
    textView.setText(getIntent().getStringExtra("inputText"));

    findViewById(R.id.button).setOnClickListener(new OnClickListener() {
      @Override
      public void onClick(View view) {
        Intent intent = new Intent(SecondActivity.this, MainActivity.class);
        startActivity(intent);
      }
    });
  }
}

既存レイアウトとアクティビティの修正

新しいレイアウトとアクティビティができあがりましたので、既存のレイアウトとアクティビティを修正して、画面遷移できるところまで一気にいきましょう。

まずはレイアウトactivity_main.xmlです。このレイアウトには id が無いテキストラベル(TextView)がひとつだけありますので、これをテキストフィールド(EditText)に変更します。今ある TextView を削除して、新たにEditTextを追加するのでは芸が無いので、既存の部品を置き換える方法で行ってみます。

図22のように既存の TextView を選択し、コンテキストメニューから「Morphing→EditText」を選びEditTextに変更します。そのまま「text/id」プロパティを開き、idに@+id/edittextと入力します。

図22 TextViewをEditTextに変更(クリックすると操作の動きがわかります)

続いて「新しいレイアウトを作成」で説明したように「Palette」からButtonをレイアウトに貼り付けます。貼り付けたButtonのidはデフォルトの@+id/buttonになっていて、すでに作成済みのものと被るので@+id/clickmeに修正しておきます図23

図23 新しいButtonを貼り付ける
図23 新しいButtonを貼り付ける

追加したButtonのラベル名の外部化も前回と同じ方法では面白みに欠けるので、今度はXMLファイルを直接編集して行ってみましょう。レイアウトをGUIデザイナからXMLの直接編集に移るには、GUIデザイナ下部にあるタブから「Text」を選びます図24

図24 ⁠Text」タブを選び、XMLの直接編集に移る
図24 「Text」タブを選び、XMLの直接編集に移る

XML上の該当箇所(Button要素のandroid:text属性の値)に表示させたい値「Click Me!!」を入力します。しばらく待つと行頭に電球アイコン(Quick Bulb)が表示されるので、それをクリックしメニューから「Extract string resource」を選びます。表示されたダイアログの「Resource name」に登録したいリソース名clickmeを入力すると、元の箇所にそのリソース名@string/clickmeが展開されます図25

図25 XMLの編集からラベル名を外部化する(クリックすると操作の動きがわかります)

これでレイアウトの修正はおしまいです。アクティビティMainActivity.javaは丸ごとリスト3に書き換えるだけで構いません。

リスト3 MainActivity.java
package com.example.myfirstapp;

import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.view.Menu;
import android.view.View;
import android.widget.EditText;

import static android.widget.Button.OnClickListener;

public class MainActivity extends Activity {
  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    findViewById(R.id.clickme).setOnClickListener(new OnClickListener() {
      @Override
      public void onClick(View view) {
        Intent intent = new Intent(MainActivity.this, SecondActivity.class);
        EditText editText = (EditText) findViewById(R.id.edittext);
        intent.putExtra("inputText", editText.getText().toString());
        startActivity(intent);
      }
    });
  }

  @Override
  public boolean onCreateOptionsMenu(Menu menu) {
    // Inflate the menu; this adds items to the action bar if it is present.
    getMenuInflater().inflate(R.menu.main, menu);
    return true;
  }
}

それでは実行してみましょう

プログラムの修正がすべて終わったので、もう一度実行してみて、どう変わったのか実際に使ってみましょう。

プログラムの実行方法は「Androidアプリケーションの実行」で説明したとおりです。先ほど実行したエミュレータが立ち上がったままだと「Choose Device」ダイアログの一覧にそのエミュレータがリストアップしていますので、それを選択してもよいです。

図26 ちょっとだけ修正したMyFirstApp(クリックすると操作の動きがわかります)

おわりに

今回はAndroid Studioでプロジェクトを作成し、プログラムの実行~修正~再度実行といった一連の流れを見ました。Android Studio単体で一通りの開発ができそうな感じがしますね。

次回はプロジェクトの構造を紐解きながら、より本格的な開発が可能かどうかを見ていきましょう。

おすすめ記事

記事・ニュース一覧