Android Studio入門

開発環境の構築 2/4 【 環境変数の追加 】

アンドロイドアプリ作成の「開発環境の構築」を解説しています。

このページは、途中になりますので、初めての方は「Javaのインストール」からご覧ください。

Android Studio 開発環境の構築 2-4 【 環境変数の追加 】
環境変数の追加

  1. Javaのインストール
  2. 環境変数の追加( このページ )
    1. ※ Android StudioにJavaの保存先を伝える作業
    2. 設定画面を開く
    3. 設定の入力
    4. Java保存先のコピペ
  3. Android Studioのインストール
  4. エミュレーターの作成
  1. 特に記載がない場合、Windowsでの解説になります。 (マックはよく知りません)
  2. PCの環境や、バージョンによっては正常に機能しないので自己責任でお願いします。

設定画面を開く

Android Studio 開発環境の構築【システム】
スタート → コンピューター → プロパティ
Android Studio 開発環境の構築【システムの詳細設定】
システムの詳細設定
Android Studio 開発環境の構築【環境変数画面の表示】
環境変数画面の表示
Android Studio 開発環境の構築【新規をクリック】
新規をクリック

設定の入力

Android Studio 開発環境の構築【環境変数の保存】
環境変数の保存

Java保存先のコピペ

Android Studio 開発環境の構築【Java保存先のコピー】
Java保存先のコピー
Android Studio入門

開発環境の構築 1/4 【 Javaのインストール 】

アンドロイドアプリ作成の「開発環境の構築」を解説しています。

開発環境の構築は、意外と難しいので全ての理解しようとすると挫折してしまうかもしれません。
細かい単語は気にせず「動けばOK」程度で進めてみてください。

Android Studio 開発環境の構築 1-4 【 Javaのインストール 】
Javaのインストール

  1. Java JDKのインストール ( このページ )
    • ※ Javaとは :パソコンでアンドロイドアプリを作る土台ソフト
    • PCのビット数確認
    • Javaのダウンロード
    • Javaのインストール
  2. 環境変数の追加
  3. Android Studioのインストール
  4. エミュレーターの作成
  1. 特に記載がない場合、Windowsでの解説になります。 (マックはよく知りません)
  2. PCの環境や、バージョンによっては正常に機能しないので自己責任でお願いします。

PCのビット数確認

Android Studio 開発環境の構築【システム】
スタート → コンピューター → プロパティ
Android Studio 開発環境の構築【PCのビット数確認】
パソコンのビット数を確認

Javaのダウンロード

Android Studio 開発環境の構築【Javaの検索】
Javaの検索
Android Studio 開発環境の構築【USサイトへ移動】
USサイトへ移動
Android Studio 開発環境の構築【バージョンの選択】
バージョンの選択
Android Studio 開発環境の構築【ビット数の選択】
ビット数を選択し、ダウンロード

Javaのインストール

Android Studio 開発環境の構築【インストールの実行】
インストールの実行
Android Studio 開発環境の構築【Javaのセットアップ・次へ1】
Javaのセットアップ・次へ
Android Studio 開発環境の構築【Javaのセットアップ・次へ2】
次へ
Android Studio 開発環境の構築【Javaのセットアップ・次へ3】
次へ

Android Studio 開発環境の構築【Javaのセットアップ・閉じる】
閉じる
動画で学ぶ、Androidアプリの作り方

簡易ミュージックアプリ

アンドロイドアプリ作成の「複数のバックミュージック再生」を解説しているページです。
アンドロイドアプリの作り方「簡易ミュージックアプリ」
  • 内  容 :複数曲の再生と停止 「バックミュージックの再生」の続編
  • 難 易 度 :★★★★☆ ( 未経験者の理解、応用は難しいので、再現できるを目指す )
  • 予備知識 :変数、メソッド、IF関数、IDの理解、XML
  • 注  意 :開発ソフトのバージョンやPCの環境によって正常に機能しないときがあります。
  • 補  足 :2015/02/11現在、Android StudioとEclipseの両方で対応。
  1. はじめに → YouTube
  2. 素材の用意 → YouTube
  3. レイアウト作成 → YouTube
  4. 画像の変更 → YouTube
  5. 1曲の再生と停止 → YouTube
  6. 複数曲の再生と停止 → YouTube
  7. Android Studioで復習 → YouTube
動画で学ぶアンドロイドアプリ 【簡易ミュージック】 jazz
jazz(停止中)
動画で学ぶアンドロイドアプリ 【簡易ミュージック】 lock
lock(停止中)
動画で学ぶアンドロイドアプリ 【簡易ミュージック】 pops
pops (停止中)
動画で学ぶアンドロイドアプリ 【簡易ミュージック】 jazz2
jazz2 (再生中)
動画で学ぶアンドロイドアプリ 【簡易ミュージック】 lock2
lock2 (再生中)
動画で学ぶアンドロイドアプリ 【簡易ミュージック】 pops2
pops2 (再生中)

利用サイト様 :Music is VFR

mp3ファイルを3曲用意してください。
極端に長い曲、短い曲、容量の大きい曲以外でしたら問題ありません。
フォルダ名、ファイル名は全て小文字で以下と全く同じにしてください。

  • raw (フォルダ)
    • jazz.mp3
    • lock.mp3
    • pops.mp3
アンドロイドアプリの作り方-【-簡易ミュージックアプリ-】-保存場所
保存場所

※ ファイル名、フォルダ名は完全に一致してください。1文字でも違うとエラーです。

アプリ名[Eclipseの場合]
エクリプスの場合

アプリ名[アンドロイドスタジオの場合]
アンドロイド スタジオの場合
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/pops"
        android:src="@drawable/pops"
        android:layout_weight="1"
        android:scaleType="centerCrop"
        android:onClick="pops"/>

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/lock"
        android:src="@drawable/lock"
        android:layout_weight="1"
        android:onClick="lock"
        android:scaleType="centerCrop" />

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/jazz"
        android:layout_gravity="center_vertical"
        android:src="@drawable/jazz"
        android:layout_weight="1"
        android:onClick="jazz"
        android:scaleType="centerCrop" />

</LinearLayout>

XMLの解説図です。詳しくは動画をご覧ください。

アンドロイドアプリの作り方【ミュージックアプリ】XML解説
XML解説
package com.test.soundtest;

import android.support.v7.app.ActionBarActivity;
import android.os.Bundle;
import android.view.View; // インポート
import android.widget.ImageView; // インポート


public class MainActivity extends ActionBarActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }

    /* ******************************************
    * クリック処理 (pops画像)
    ****************************************** */
    public void pops(View v) {
        // 画像の変更
        ((ImageView) findViewById(R.id.pops)).setImageResource(R.drawable.pops2);
        ((ImageView) findViewById(R.id.lock)).setImageResource(R.drawable.lock);
        ((ImageView) findViewById(R.id.jazz)).setImageResource(R.drawable.jazz);
    }

    /* ******************************************
    * クリック処理 (lock画像)
    ****************************************** */
    public void lock(View v) {
        ((ImageView) findViewById(R.id.pops)).setImageResource(R.drawable.pops);
        ((ImageView) findViewById(R.id.lock)).setImageResource(R.drawable.lock2);
        ((ImageView) findViewById(R.id.jazz)).setImageResource(R.drawable.jazz);
    }

    /* ******************************************
    * クリック処理 (jazz画像)
    ****************************************** */
    public void jazz(View v) {
        ((ImageView) findViewById(R.id.pops)).setImageResource(R.drawable.pops);
        ((ImageView) findViewById(R.id.lock)).setImageResource(R.drawable.lock);
        ((ImageView) findViewById(R.id.jazz)).setImageResource(R.drawable.jazz2);
    }
}

注意点!!

サンプルを適切にコピペすることで動作しますが・・・・意外と難しいです。

1文字違い、1行違うだけでアウトです。
以下を意識しながら確してください。

  • 記載場所 : {}や;より前か後ろか?
  • 文字の違い : 大文字と小文字 、全角と半角
  • コピー範囲  : 最後の;が入っているか?
  • ファイル名  : ファイル名、フォルダ名が1文字でもちがうと正常に動作しません
package com.test.soundtest;

import android.media.MediaPlayer;    // 再生の準備
import android.support.v7.app.ActionBarActivity;
import android.os.Bundle;
import android.view.View; // インポート
import android.widget.ImageView; // インポート


public class MainActivity extends ActionBarActivity {

    // 再生の準備   //////////////////////
    MediaPlayer p;  // 再生に必要なファイルの読み込み

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }

    /* ******************************************
    * クリック処理 (pops画像)
    ****************************************** */
    public void pops(View v) {
        // 画像の変更
        ((ImageView) findViewById(R.id.pops)).setImageResource(R.drawable.pops2);
        ((ImageView) findViewById(R.id.lock)).setImageResource(R.drawable.lock);
        ((ImageView) findViewById(R.id.jazz)).setImageResource(R.drawable.jazz);

        // 再生中なら停止
        if (p != null && p.isPlaying()) {
            p.stop(); // 停止
            p.release();// メモリの解放
        }

        // mp3の読み込み
        p = MediaPlayer.create(getApplicationContext(), R.raw.pops);
        p.setLooping(true);  // 連続再生設定
        p.start(); // 再生
    }

    /* ******************************************
    * クリック処理 (lock画像)
    ****************************************** */
    public void lock(View v) {
        ((ImageView) findViewById(R.id.pops)).setImageResource(R.drawable.pops);
        ((ImageView) findViewById(R.id.lock)).setImageResource(R.drawable.lock2);
        ((ImageView) findViewById(R.id.jazz)).setImageResource(R.drawable.jazz);
    }

    /* ******************************************
    * クリック処理 (jazz画像)
    ****************************************** */
    public void jazz(View v) {
        ((ImageView) findViewById(R.id.pops)).setImageResource(R.drawable.pops);
        ((ImageView) findViewById(R.id.lock)).setImageResource(R.drawable.lock);
        ((ImageView) findViewById(R.id.jazz)).setImageResource(R.drawable.jazz2);
    }

    /* ******************************************
    * アプリの終了
    ****************************************** */
    @Override
    protected void onDestroy() {
        super.onDestroy();
        // クリア可能か確認
        if (p != null) {
            p.release();// メモリの解放
            p = null; // 最初に読み込んだファイルのクリア
        }
    }
}

package com.test.soundtest;

import android.media.MediaPlayer;    // 再生の準備
import android.support.v7.app.ActionBarActivity;
import android.os.Bundle;
import android.view.View; // インポート
import android.widget.ImageView; // インポート


public class MainActivity extends ActionBarActivity {

    // 再生の準備   //////////////////////
    MediaPlayer p;  // 再生に必要なファイルの読み込み

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }

    /* ******************************************
    * クリック処理 (pops画像)
    ****************************************** */
    public void pops(View v) {
        // 画像の変更
        ((ImageView) findViewById(R.id.pops)).setImageResource(R.drawable.pops2);
        ((ImageView) findViewById(R.id.lock)).setImageResource(R.drawable.lock);
        ((ImageView) findViewById(R.id.jazz)).setImageResource(R.drawable.jazz);

        // 再生中なら停止
        if (p != null && p.isPlaying()) {
            p.stop(); // 停止
            p.release();// メモリの解放
        }

        // mp3の読み込み
        p = MediaPlayer.create(getApplicationContext(), R.raw.pops);
        p.setLooping(true);  // 連続再生設定
        p.start(); // 再生
    }

    /* ******************************************
    * クリック処理 (lock画像)
    ****************************************** */
    public void lock(View v) {
        ((ImageView) findViewById(R.id.pops)).setImageResource(R.drawable.pops);
        ((ImageView) findViewById(R.id.lock)).setImageResource(R.drawable.lock2);
        ((ImageView) findViewById(R.id.jazz)).setImageResource(R.drawable.jazz);

        if (p != null && p.isPlaying()) {
            p.stop();
            p.release();
        }
        p = MediaPlayer.create(getApplicationContext(), R.raw.lock);
        p.setLooping(true);
        p.start();
    }

    /* ******************************************
    * クリック処理 (jazz画像)
    ****************************************** */
    public void jazz(View v) {
        ((ImageView) findViewById(R.id.pops)).setImageResource(R.drawable.pops);
        ((ImageView) findViewById(R.id.lock)).setImageResource(R.drawable.lock);
        ((ImageView) findViewById(R.id.jazz)).setImageResource(R.drawable.jazz2);

        if (p != null && p.isPlaying()) {
            p.stop();
            p.release();
        }

        p = MediaPlayer.create(getApplicationContext(), R.raw.jazz);
        p.setLooping(true);
        p.start();
    }

    /* ******************************************
    * アプリの終了
    ****************************************** */
    @Override
    protected void onDestroy() {
        super.onDestroy();
        // クリア可能か確認
        if (p != null) {
            p.release();// メモリの解放
            p = null; // 最初に読み込んだファイルのクリア
        }
    }
}
Android Studio入門

開発環境の構築 4/4 【エミュレーターの作成】

アンドロイドアプリ作成の「開発環境の構築」を解説しています。このページは、途中になりますので、初めての方は「Javaのインストール」からご覧ください。

Android Studio 開発環境の構築 4/4 【 エミュレーターの作成 】

  1. Javaのインストール
  2. 環境変数の追加
  3. Android Studioのインストール
  4. エミュレーターの作成 (このページ)

アプリの作り方_学習内容

新規にエミュレーターを作成する方法で、ここではバージョン4.0.3を作成しています。
※ このページはキャプチャ画像のみを掲載しています。詳しくは動画をご覧ください。

【 流れ 】

  1. テスト用アプリの作成
  2. 必要なソフトのダウンロード
  3. エミュレーターの作成と起動
  4. アプリの起動テスト
3分で学ぶ Android Strdio入門【エミュレーターの作成】SDK Managerの起動
SDK Managerの起動
3分で学ぶ Android-Strdio入門【エミュレーターの作成】インストール項目の選択
インストール項目の選択
3分で学ぶ Android Strdio入門【エミュレーターの作成】インストールの承諾
インストールの承諾
3分で学ぶ Android Strdio入門【エミュレーターの作成】AVD Managerの起動
AVD Managerの起動
3分で学ぶ Android Strdio入門【エミュレーターの作成】AVD新規作成ボタン
AVD新規作成ボタン
3分で学ぶ Android Strdio入門【エミュレーターの作成】本体の選択
本体の選択
3分で学ぶ Android Strdio入門【エミュレーターの作成】AndroidバージョンとCPUを選択
AndroidバージョンとCPUを選択
3分で学ぶ Android-Strdio入門【エミュレーターの作成】詳細の編集
詳細の編集
3分で学ぶ Android Strdio入門【エミュレーターの作成】メモリの設定
メモリの設定
3分で学ぶ Android Strdio入門【エミュレーターの作成】エミュレーターの起動
エミュレーターの起動
3分で学ぶ Android Strdio入門【エミュレーターの作成】エミュレーターの完成
エミュレーターの完成
動画で学ぶ、Androidアプリの作り方

オプションメニューの利用

Android-アプリ入門-オプションメニューの利用

Android アプリ開発の【オプションメニューの利用】を解説しているページです。

【 動画リスト 】

アプリ開発 オプションメニューの利用 完成図
完成図

オプションメニューを押したら連動した画像が表示されます。

難易度:★★★★☆ ( 未経験者には理解も利用も困難 )
補 足:Android StudioとEclipseで確認済み
補 足:開発バージョンが違うと正常に動かない場合があります。

【 予備知識 】

以下の予備知識が必要です。

  • XML
  • 変数
  • メソッド
  • if
  • id

【 流れ 】

  1. 新規アプリ作成
  2. 画像の表示 (activity_main.xml)
  3. メニューを押したら画像が変わる (MainActivity.java)
  4. メニューにアイテムを追加する (menu_main.xml)
  5. メニューアイテムに合わせて画像を変える (MainActivity.java)
  6. Eclipseで復習

動画で学ぶスマフォアプリ_使用素材

※ 以下をパソコンの中に保存してください。

オプションメニューの利用 エビ
エビ
オプションメニューの利用 イワシ
イワシ
オプションメニューの利用 カメ
カメ
オプションメニューの利用 シャチ
シャチ

activity_main.xml-(レイアウト)


<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:paddingBottom="@dimen/activity_vertical_margin"
    tools:context=".MainActivity">

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/imageView"
        android:layout_centerVertical="true"
        android:layout_centerHorizontal="true"
        android:src="@drawable/image_syati" />

</RelativeLayout>

ImageView図解

menu_main.xml オプションメニュー


<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    tools:context=".MainActivity">

    <item
        android:id="@+id/iwasi"
        android:title="イワシ"
        android:orderInCategory="100"
        app:showAsAction="never" />

    <item
        android:id="@+id/ebi"
        android:title="エビ"
        android:orderInCategory="200"
        app:showAsAction="never" />

    <item
        android:id="@+id/kame"
        android:title="カメ"
        android:orderInCategory="300"
        app:showAsAction="never" />

    <item
        android:id="@+id/syati"
        android:title="シャチ"
        android:orderInCategory="400"
        app:showAsAction="never" />

</menu>

Android-オプションメニュー図解

MainActivity.java (プログラム)

package com.text.menutest;

import android.support.v7.app.ActionBarActivity;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
import android.widget.ImageView;     // 3・インポート必要

public class MainActivity extends ActionBarActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }


     // 4・オプションメニューの作成
    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // 4・res → menu → menu_main.xml をメニューに設定
        getMenuInflater().inflate(R.menu.menu_main, menu);
        return true;
    }

    // 3・オプションメニューが押されたら
    @Override
    public boolean onOptionsItemSelected(MenuItem item) {

        // 3・画像変更の準備
        ImageView iv = (ImageView)findViewById(R.id.imageView);
        // 3・イワシの画像に変更(説明用:後で削除)
        iv.setImageResource(R.drawable.image_iwasi);

        // 5・メニューの押されたアイテムidを取得
        int id = item.getItemId();

        // id iwasi(イワシ)が押されたら
        if (id == R.id.iwasi) {
            // イワシの画像に変更(本番)
            iv.setImageResource(R.drawable.image_iwasi);
            // 正常終了
            return true;
        }

        // id ebi(エビ)が押されたら
        if (id == R.id.ebi) {
            // エビの画像に変更
            iv.setImageResource(R.drawable.image_ebi);
            return true;
        }

        // id kame(カメ)が押されたら
        if (id == R.id.kame) {
            // カメの画像に変更
            iv.setImageResource(R.drawable.image_kame);
            return true;
        }

        // シャチは非掲載です。挑戦してみてくださいね!

        return super.onOptionsItemSelected(item);
    }
}

動画で学ぶ、Androidアプリの作り方

バックミュージックの再生

Androidアプリ開発 バックミュージックの再生

Android アプリ開発の学習動画で、バックミュージックの再生を解説しているページです。
この動画は、以前公開した「バックミュージックとアクティビティ」の新バージョン(2015/01/20)になります。

アプリの作り方_学習内容

ゲーム等での「バックミュージックを流す」を解説した動画です。

  • 難 易 度 :★★★☆☆ ( 未経験者も再現は可能・理解と応用は難しい )
  • 予備知識 :理解にはメソッドの理解が必要です。
  • 注  意 :開発ソフトのバージョンやPCの環境によって正常に機能しないときがあります。
  • 補  足 :2015/01/20現在、Android StudioとEclipseの両方で対応。

【 動画リスト 】

・1/5 はじめに
http://youtu.be/kcFvcMIFDyQ

・2/5 新規作成と音楽ファイルの読み込み
http://youtu.be/LvYUozNJZrM

・3/5 とりあえず再生してみる
http://youtu.be/fdE3Bkl1_Qc

・4/5 アクティビティのライフサイクル
http://youtu.be/q0t6FFCdJUQ

・5/5 Android Studio
http://youtu.be/uxcCOPe_VAA

動画で学ぶアプリ作成_作成の流れ

  1. 新規アプリケーション作成
  2. 音楽ファイルの準備  フリーBGM・音楽素材 MusMus
  3. プログラミング
    • 再生の準備
    • アクティビティのライフサイクルとは?
    • アプリ起動時に再生
    • ホームボタンで一時停止
    • 戻るボタンで終了 ( メモリの解放 )
  4. Android Studioで復習

MainActivity.java (プログラム)

package ~ パッケージ略 ~;

import android.media.MediaPlayer;
import android.support.v7.app.ActionBarActivity;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;


public class MainActivity extends ActionBarActivity {

    // 再生の準備
    MediaPlayer p;

    // アプリ起動時に1回だけ実行
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        // 音楽の読み込み
        p = MediaPlayer.create(getApplicationContext(), R.raw.sound);
        // 連続再生設定
        p.setLooping(true);
    }

    // 画面が表示されるたびに実行
    @Override
    protected void onResume() {
        super.onResume();
        p.start(); // 再生
    }

    // 画面が非表示に実行
    @Override
    protected void onPause() {
        super.onPause();
        p.pause(); // 一時停止
    }

    // アプリ終了時に実行
    @Override
    protected void onDestroy() {
        super.onDestroy();
        p.release();// メモリの解放
        p = null; // 音楽プレーヤーを破棄
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        ~ 略 ~
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        ~ 略 ~
    }
}