プログラミング中級

動画で学ぶ、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;

    // アプリ起動時に１回だけ実行
    @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) {
        ～ 略 ～
    }
}
動画で学ぶ、Androidアプリの作り方

サイトの表示（ブラウザの起動）

たんたむ

プログラミング未経験者対象の【 Androidアプリ作成動画 】です。

この動画はアプリの画面作成の流れを動画にしてUPしたもで、あまり丁寧に解説してません。

開発バージョンの違いや、文字コード、設定等により、コピペしてもうまく機能しない時があります。

未経験者の方の参考動画としてご覧ください。

 

動画で学ぶアプリ開発【サイトの表示】

 

【 動画内容 】

ボタンやイメージをクリックでサイトを表示する。

正確に言うと「ブラウザを起動して、サイトを表示する」になります。アプリ内でサイトを表示するわけではありません。

 

【 学習メリット 】

動画を参考にしてもらえると、「サイト紹介」や「アプリ紹介」に役立ちます。

動画は簡単に見せているだけですので、本格的な理解はJavaのオブジェクト指向を先に学ぶことをおすすめします。

 

 

XML ファイル

<LinearLayout xmlns:android=”http://schemas.android.com/apk/res/android”
xmlns:tools=”http://schemas.android.com/tools”
android:id=”@+id/LinearLayout1″
android:layout_width=”match_parent”
android:layout_height=”match_parent”
android:orientation=”vertical”
android:paddingBottom=”@dimen/activity_vertical_margin”
android:paddingLeft=”@dimen/activity_horizontal_margin”
android:paddingRight=”@dimen/activity_horizontal_margin”
android:paddingTop=”@dimen/activity_vertical_margin”
tools:context=”com.example.test0616.MainActivity$PlaceholderFragment” >

<Button
android:id=”@+id/button1″
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:onClick=”onWeb”
android:text=”サイト紹介” />

<ImageView
android:id=”@+id/imageView1″
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:onClick=”onImage”
android:src=”@drawable/app_chick” />

</LinearLayout>

Javaファイル （MainActivity.java）

～　略 ～
import android.content.Intent;
import android.net.Uri;
～　略 ～

public class MainActivity extends ActionBarActivity {

// Webボタンを押したら
public void onWeb(View v) {

Uri uri = Uri.parse(“http://hakoniwadesign.com/”);

Intent intent = new Intent(Intent.ACTION_VIEW, uri);

startActivity(intent);

}

// 画像を押したら
public void onImage(View v) {

Uri uri = Uri.parse(“https://play.google.com/store/apps/details?id=net.comitore.pricecheck01”);

Intent intent = new Intent(Intent.ACTION_VIEW, uri);

startActivity(intent);

}

～　以下略 ～

プレゼン資料抜粋

20140617 サイトの表示（ブラウザの起動）

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

ページの切り替え（アクティビティ切り替え）

たんたむ

プログラミング未経験者対象の【 Androidアプリ作成動画 】です。

この動画はアプリの画面作成の流れを動画にしてUPしたもで、あまり丁寧に解説してません。

開発バージョンの違いや、文字コード、設定等により、コピペしてもうまく機能しない時があります。

未経験者の方の参考動画としてご覧ください。

 

【 動画内容 】

複数の画面の切り替え方の動画です。

専門書では「アクティビティの切り替え」等で説明されてますが、専門用語を省き「画面の切り替え」として説明させてもらってます。

アプリ開発動画【ページの切り替え】

 

【 学習メリット 】

動画を参考にしてもらえると、「ヘルプページ」や「設定画面」「タイトルページ」等の切り替えに役立ちます。

動画は簡単に見せているだけですので、本格的な学習はJavaのオブジェクト指向を先に学ぶことをおすすめします。

 

 

【 タイトル画面 fragment_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:paddingBottom=”@dimen/activity_vertical_margin”
android:paddingLeft=”@dimen/activity_horizontal_margin”
android:paddingRight=”@dimen/activity_horizontal_margin”
android:paddingTop=”@dimen/activity_vertical_margin”
tools:context=”com.example.text0601d.MainActivity$PlaceholderFragment” >

<TextView
android:id=”@+id/textView1″
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:layout_alignParentTop=”true”
android:layout_centerHorizontal=”true”
android:layout_marginTop=”85dp”
android:text=”メイン画面”
android:textSize=”40sp” />

<Button
android:id=”@+id/button1″
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:layout_below=”@+id/textView1″
android:layout_centerHorizontal=”true”
android:layout_marginTop=”79dp”
android:onClick=”onHelp”
android:text=”ヘルプ” />

<Button
android:id=”@+id/button2″
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:layout_below=”@+id/button1″
android:layout_centerHorizontal=”true”
android:layout_marginTop=”32dp”
android:onClick=”onSetting”
android:text=”設　定” />

</RelativeLayout>

 

【 タイトル画面 MainActivity 】

package com.example.text0601d;

import android.support.v7.app.ActionBarActivity;
import android.support.v7.app.ActionBar;
import android.support.v4.app.Fragment;
import android.content.Intent;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.view.ViewGroup;
import android.widget.Toast;
import android.os.Build;

/*****************************************
* メイン画面
* ボタンを押すと別ページ表示（別のアクティビティを表示）
*/
public class MainActivity extends ActionBarActivity {

        // ヘルプボタンを押したら実行される
          public void onHelp(View v){
                    // ポップアップ表示
                    Toast.makeText(this, “ヘルプボタンを押したよ”, Toast.LENGTH_SHORT).show();

                    // 別画面表示
                    Intent intent = new Intent(this,com.example.text0601d.HelpActivity.class);
                    startActivity(intent);
          }

          // 設定ボタンを押したら実行される
          public void onSetting(View v){
                    // ポップアップ表示
                    Toast.makeText(this, “設定ボタンを押したよ”, Toast.LENGTH_SHORT).show();

                    // 別画面表示
                    Intent intent = new Intent(this,com.example.text0601d.SettingActivity.class);
                    startActivity(intent);
          }

          @Override
          protected void onCreate(Bundle savedInstanceState) {

                    未変更

          }

          @Override
          public boolean onCreateOptionsMenu(Menu menu) {

                    未変更
          }

          @Override
          public boolean onOptionsItemSelected(MenuItem item) {
                    未変更
          }

          public static class PlaceholderFragment extends Fragment {

                    未変更

          }

          @Override
          public View onCreateView(LayoutInflater inflater, ViewGroup container,
                    未変更
          }

}

 

【 ヘルプ画面 fragment_help.xml 】【画面の切り替え】ヘルプページ

※ タイトル文字と、背景色を設定しただけです。

※ Javaファイルも変更していません。

<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:background=”#eeee77″
android:paddingBottom=”@dimen/activity_vertical_margin”
android:paddingLeft=”@dimen/activity_horizontal_margin”
android:paddingRight=”@dimen/activity_horizontal_margin”
android:paddingTop=”@dimen/activity_vertical_margin”
tools:context=”com.example.text0601d.HelpActivity$PlaceholderFragment” >

<TextView
android:id=”@+id/textView1″
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:layout_alignParentTop=”true”
android:layout_centerHorizontal=”true”
android:layout_marginTop=”54dp”
android:text=”ヘルプページ”
android:textSize=”40sp” />

</RelativeLayout>

 

 

 

【 ヘルプ画面 fragment_setting.xml 】【画面の切り替え】セッテング

※ ボタン、タイトル文字と、背景色を設定しただけです。

※ Javaファイルも変更していません。

 

<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:background=”#77eeee”
android:paddingBottom=”@dimen/activity_vertical_margin”
android:paddingLeft=”@dimen/activity_horizontal_margin”
android:paddingRight=”@dimen/activity_horizontal_margin”
android:paddingTop=”@dimen/activity_vertical_margin”
tools:context=”com.example.text0601d.SettingActivity$PlaceholderFragment” >

<TextView
android:id=”@+id/textView1″
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:layout_alignParentTop=”true”
android:layout_centerHorizontal=”true”
android:layout_marginTop=”97dp”
android:text=”設定画面”
android:textSize=”40sp” />

<ToggleButton
android:id=”@+id/toggleButton1″
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:layout_alignParentLeft=”true”
android:layout_below=”@+id/textView1″
android:layout_marginLeft=”57dp”
android:layout_marginTop=”32dp”
android:text=”ToggleButton” />

<ToggleButton
android:id=”@+id/toggleButton2″
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:layout_alignLeft=”@+id/toggleButton1″
android:layout_below=”@+id/toggleButton1″
android:layout_marginTop=”24dp”
android:text=”ToggleButton” />

</RelativeLayout>