Android Studio入門

15分で作る? 【バイブレーション①】~ 基礎編 ~

Android-Studio-入門【簡易版】タイトル768C

「15分で作る」シリーズはある程度知識のある方向けの動画です。
未経験の方でもコピペで再現出来るように目指していますが、理解には「RPGで学ぶ」「3分で学ぶ」を先にご覧ください。

バイブレーション(振動)を起動します。
限りなくシンプルに「とにかく起動すればOK」を目指した動画です。

難易度:★★☆☆☆ 未経験でも再現は簡単、アレンジは難しい

※ エミュレーターでは起動しません。
※ バイブ機能の有る実機のみテスト出来ます。

この動画はシリーズ物です。以下の順にご覧ください。

  1. 【バイブレーション①】~ 基礎編 ~
  2. 【バイブレーション②】~ 停止処理 ~
  3. 【バイブレーション③】~ リズム版 ~
  4. 【バイブレーション④】~ チェック版 ~

バイブレーションの起動はとても簡単です。
最短2行の入力とインポートだけで起動する事ができます。

バイブレーションの使用許可を記載します。

<uses-permission android:name="android.permission.VIBRATE" />

バイブレーションの実行を記載します。

((Vibrator) getSystemService(Context.VIBRATOR_SERVICE)).vibrate(1000);

AndroidManifest.xmlにパーミッション(使用許可)を1行追加します。
サンプルソースの5行目になります。

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.test.vibration">

    <uses-permission android:name="android.permission.VIBRATE" />
    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">
        <activity android:name=".MainActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>

画面中央にボタンを配置します。
バイブレーションのスタートボタンになります。

<?xml version="1.0" encoding="utf-8"?>
<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"
    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=".MainActivity">

    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:onClick="onStart"
        android:text="START"
        android:textSize="50dp" />
    
</LinearLayout>

ボタンクリック時にバイブレーションが鳴ります。
本体の「バイブレーション有無」はチェックしていません。

package com.test.vibration;

import android.content.Context;
import android.os.Vibrator;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;

public class MainActivity extends AppCompatActivity {

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

    // STARTボタン    //////////////////////////////////
    public void onStart( View v){

        // バイブレーションスタート(1秒:1000ミリ秒)
        ((Vibrator) getSystemService(Context.VIBRATOR_SERVICE)).vibrate(1000);

    }
}

15分で作る?【 60秒ストップウォッチ 】

Android 開発【 60秒ストップウォッチ 】768

以前公開した【 アニメストップウォッチ 】に時間による変化を追加します。

具体的には60秒以降にはイラストを変えて、にゃんこが慌てます。

難易度:★★★☆☆

  1. コピペでの再現は可能
  2. Java初歩の知識でアレンジ可能

動画では「簡易的な解説」ですませ、皆さんの「PCで再現」を目指します。
理解やアレンジには、相当なスキルが必要ですので「RPGで学ぶ」や市販テキストの学習をオススメします。

以下の画像を追加します。
クリック後の画像を保存してください。

Android アプリ【タイトル素材】
cat0
Android アプリ【パラパラアニメ素材2】
cat2
Android アプリ【パラパラアニメ素材1】
cat1
cat3
cat3
cat4
cat4
<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">

    <Chronometer
        android:id="@+id/c"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="60sp" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:onClick="onStart"
        android:text="スタート"
        android:textSize="40sp" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:onClick="onStop"
        android:text="ストップ"
        android:textSize="40sp" />

    <ImageView
        android:id="@+id/iv"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="centerCrop"
        android:src="@drawable/cat0" />

</LinearLayout>

少々ややこしいので、上から順に入力+解説していきます。


package com.test.stopwatch;

import android.os.SystemClock;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Chronometer;
import android.widget.ImageView;

public class MainActivity extends AppCompatActivity implements Chronometer.OnChronometerTickListener {

    int x = 0;  // 表示回数カウント

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

    // スタート //////////////////////
    public void onStart(View v) {
        ((Chronometer)findViewById(R.id.c)).setBase(SystemClock.elapsedRealtime());
        ((Chronometer)findViewById(R.id.c)).start();
        ((Chronometer)findViewById(R.id.c)).setOnChronometerTickListener(this);
    }

    // ストップ ///////////////////////
    public void onStop(View v) {
        ((Chronometer)findViewById(R.id.c)).stop();
        ((ImageView)findViewById(R.id.iv)).setImageResource(R.drawable.cat0);
    }

    // 定期処理(約1秒毎)//////////////////////
    @Override
    public void onChronometerTick(Chronometer chronometer) {

                x++;    // 表示回数カウントを+1

        // 表示タイム = ( 現在時刻 - アプリ起動時刻 ) / 1000
        long time = (SystemClock.elapsedRealtime() - chronometer.getBase()) / 1000;

        if( time < 60 ) {       // 60秒未満?
            if (x % 2 == 0) {   // 偶数?
                ((ImageView) findViewById(R.id.iv)).setImageResource(R.drawable.cat1);
            } else {
                ((ImageView) findViewById(R.id.iv)).setImageResource(R.drawable.cat2);
            }
        } else {
            if (x % 2 == 0) { 
                ((ImageView) findViewById(R.id.iv)).setImageResource(R.drawable.cat3);
            } else {
                ((ImageView) findViewById(R.id.iv)).setImageResource(R.drawable.cat4);
            }
        }
    }
}
Android Studio入門

15分で作る?【 アニメストップウォッチ 】~パラパラアニメ~

Android 開発 【ストップウォッチ2】1367

以前公開した【 簡易ストップウォッチ 】にパラパラアニメを連動させる方法です。

難易度:★★★★☆
・コピペでの再現は可能
・詳細の理解やアレンジは難しい

動画では「簡易的な解説」ですませ、皆さんの「PCで再現」を目指します。
理解やアレンジには、相当なスキルが必要ですので「RPGで学ぶ」や市販テキストの学習をオススメします。

Android アプリ【タイトル素材】
cat0
Android アプリ【パラパラアニメ素材2】
cat2
Android アプリ【パラパラアニメ素材1】
cat1
<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">

    <Chronometer
        android:id="@+id/c"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="60sp" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:onClick="onStart"
        android:text="スタート"
        android:textSize="40sp" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:onClick="onStop"
        android:text="ストップ"
        android:textSize="40sp" />

    <ImageView
        android:id="@+id/iv"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="centerCrop"
        android:src="@drawable/cat0" />

</LinearLayout>
package com.hakoniwadesign.stopwatch;

import android.os.SystemClock;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Chronometer;
import android.widget.ImageView;

public class MainActivity extends AppCompatActivity  {

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

    // スタート
    public void onStart(View v) {
        ((Chronometer)findViewById(R.id.c)).setBase(SystemClock.elapsedRealtime());
        ((Chronometer)findViewById(R.id.c)).start();

        // 画像変更
        ((ImageView)findViewById(R.id.iv)).setImageResource(R.drawable.cat1);
    }

    // ストップ
    public void onStop(View v) {
        ((Chronometer)findViewById(R.id.c)).stop();
        ((ImageView)findViewById(R.id.iv)).setImageResource(R.drawable.cat0);
    }
}
package com.hakoniwadesign.stopwatch;

import android.os.SystemClock;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Chronometer;
import android.widget.ImageView;

public class MainActivity extends AppCompatActivity {

    int x = 0;  // 表示回数カウント

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

    // スタート
    public void onStart( View v ){
        ((Chronometer)findViewById(R.id.c)).setBase(SystemClock.elapsedRealtime());
        ((Chronometer)findViewById(R.id.c)).start();

        // 条件分析
        x++;    // xを+1させる
        if( x % 2 ==0 ) {   // 偶数ですか?
            // YESの場合
            ((ImageView) findViewById(R.id.iv)).setImageResource(R.drawable.cat1);
        }else {
            // NOの場合
            ((ImageView) findViewById(R.id.iv)).setImageResource(R.drawable.cat2);
        }
    }

    // ストップ
    public void onStop( View v ){
        ((Chronometer)findViewById(R.id.c)).stop();
        ((ImageView)findViewById(R.id.iv)).setImageResource(R.drawable.cat0);
    }
}

package com.hakoniwadesign.stopwatch;

import android.os.SystemClock;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Chronometer;
import android.widget.ImageView;

// 定期的処理① メソッドの使用宣言
public class MainActivity extends AppCompatActivity implements Chronometer.OnChronometerTickListener {

    int x = 0;  // 表示回数カウント

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

    // スタート
    public void onStart( View v ){
        ((Chronometer)findViewById(R.id.c)).setBase(SystemClock.elapsedRealtime());
        ((Chronometer)findViewById(R.id.c)).start();

        // 定期的処理③ 処理のスタート
        ((Chronometer)findViewById(R.id.c)).setOnChronometerTickListener(this);
    }

    // ストップ
    public void onStop( View v ){
        ((Chronometer)findViewById(R.id.c)).stop();
        ((ImageView)findViewById(R.id.iv)).setImageResource(R.drawable.cat0);
    }

    // 定期的処理② 約1秒毎に実行する具体的処理
    @Override
    public void onChronometerTick(Chronometer chronometer) {
        // 条件分析
        x++;    // xを+1させる
        if( x % 2 ==0 ) {   // 偶数ですか?
            // YESの場合
            ((ImageView) findViewById(R.id.iv)).setImageResource(R.drawable.cat1);
        }else {
            // NOの場合
            ((ImageView) findViewById(R.id.iv)).setImageResource(R.drawable.cat2);
        }
    }
}

15分で作る?【 簡易ストップウォッチ 】

Android 開発 【ストップウォッチ】768

「15分で作る」シリーズはある程度知識のある方向けの動画です。
未経験の方でもコピペで再現出来るように目指していますが、理解には「RPGで学ぶ」「3分で学ぶ」を先にご覧ください。

超シンプルなストップウォッチです。

「とりあえず動かす!」を優先しているので、デザインもアレンジもありません。

難易度:★★☆☆☆ 未経験でも再現は簡単、アレンジは難しい

<?xml version="1.0" encoding="utf-8"?>
<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=".MainActivity">

    <Chronometer
        android:id="@+id/c"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="60sp" />
</RelativeLayout>
package com.hakoniwadesign.stopwatch;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.Chronometer;

public class MainActivity extends AppCompatActivity {

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

        ((Chronometer)findViewById(R.id.c)).start();
    }
}

<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"
    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=".MainActivity">

    <Chronometer
        android:id="@+id/c"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="60sp" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:onClick="onStart"
        android:text="スタート"
        android:textSize="40sp" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:onClick="onStop"
        android:text="ストップ"
        android:textSize="40sp" />

</LinearLayout>

package com.hakoniwadesign.stopwatch;

import android.os.SystemClock;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Chronometer;

public class MainActivity extends AppCompatActivity {

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

    // スタート
    public void onStart( View v ){
        ((Chronometer)findViewById(R.id.c)).setBase(SystemClock.elapsedRealtime());
        ((Chronometer)findViewById(R.id.c)).start();
    }

    // ストップ
    public void onStop( View v ){
        ((Chronometer)findViewById(R.id.c)).stop();
    }

}

15分で作る?【 動画の再生 】

Android studio 【動画再生】768

アプリ内に組み込んだ動画再生方法です。
具体的にはresフォルダ内の動画(mp4)を再生します。

サンプル動画 【シャカシャカ】

サンプル動画 【ひよこ】

* 注意点:動画の形式によって再生できないものがありました。

<?xml version="1.0" encoding="utf-8"?>
<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=".MainActivity">

    <VideoView
        android:id="@+id/v"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</RelativeLayout>
package com.hakoniwadesign.video;

import android.net.Uri;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.MediaController;
import android.widget.VideoView;

public class MainActivity extends AppCompatActivity {

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

        // ID取得
        VideoView v = (VideoView)findViewById(R.id.v);

        // 動画の指定(mp4の読込み)
        v.setVideoURI(Uri.parse("android.resource://" + this.getPackageName() + "/" + R.raw.video1));

        // 再生スタート
        v.start();

        // コントローラNO(動画をタップするとメニュー表示)
        v.setMediaController(new MediaController(this));

    }
}
動画で学ぶ、HTML5アプリ

5分で動くパラパラアニメ

JavaScriptでの「パラパラアニメ作成」を動画にしています。
新規作成から5分で完成を目指しているので、簡略させてもらってます。

 

title_Webアプリ_動画リスト

5分で動くパラパラアニメ_YouTube

 
title_Webアプリ_学習内容

動画で学べるJavaScript「5分で動くパラパラアニメ」
5分で動くパラパラアニメ(サンプル)
※ スマートフォンでも動きます。

 

JavaScriptでパラパラアニメを表示します。

タイマー機能を使って、ページが読み込まれたら自動でアニメをスタートさせます。

 

以下の命令を使用します。

・onLoad

・setInterval

・getElementById

 
title_Webアプリ_使用素材

5分で動くパラパラアニメ_015分で動くパラパラアニメ_フリー素材_02

 
title_Webアプリ_ソース
 

1.新規作成

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>5分で動くパラパラアニメ</title>
</head>
<body>
<img src="0.png" id="img1">
</body>
</html>

2.画像の変更(クリック処理)

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>5分で動くパラパラアニメ</title>
    <script>
	function parapara(){
		document.getElementById('img1').src= "1.png";
	}
    </script>
</head>
<body>
<img src="0.png" id="img1" onClick="parapara()">
</body>
</html>

3.画像の変更(パラパラアニメ)

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>5分で動くパラパラアニメ</title>
    <script>
	var c = 0;
	function parapara(){
		c++;
		var no = c % 2;
		document.getElementById('img1').src= no + ".png";
	}
    </script>
</head>
<body>
<img src="0.png" id="img1" onClick="parapara()">
</body>
</html>

4.タイマー処理

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>5分で動くパラパラアニメ</title>
    <script>
	var c = 0;
	function parapara(){
		c++;
		var no = c % 2;
		document.getElementById('img1').src= no + ".png";
	}
	function startAnima() {
		setInterval("parapara()",600);
	}
    </script>
</head>
<body onLoad="startAnima()">
<img src="0.png" id="img1" >
</body>
</html>
動画で学ぶ、HTML5アプリ

15分で作る?「スロットゲームモドキ」

HTML5+JavaScript+CSSでの「スロットゲームモドキ」を動画にしています。
新規作成から15分で完成を目指しているので、ゲームとしては成り立っていません。
※ 絵柄がそろっても何も起こりません。

 

動画で学ぶWebアプリ_15分で作る「スロットゲームモドキ」_YouTube

 

【 学習内容 】

動画で学ぶWebアプリ「15分で作るスロットゲームモドキ」
15分で作るスロットゲームモドキ。(サンプル)

ゲームとしては完成してませんが、ボタンとイメージを並べてスロットゲームの一部を作成します。
プログラミングが分かってくると、ゲームとして完成させることが出来ます。

・HTML5でレイアウト
・CSSでボタンのデザイン
・JavaScriptで画像の変更

【 使用イラスト 】

以下の画像を同一フォルダ(動画ではデスクトップ)に保存してください。
15分で作る「スロットゲームモドキ」_0015分で作る「スロットゲームモドキ」_0015分で作る「スロットゲームモドキ」_0215分で作る「スロットゲームモドキ」_0315分で作る「スロットゲームモドキ」_0415分で作る「スロットゲームモドキ」_05


1.新規作成

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="utf-8">
	<title>ページタイトル</title>
</head>
<body>
こんにちは!
</body>
</html>

 


2.HTML5での画面作成

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>スロットゲーム</title>
</head>
<body>
<p>
	<input type="button" value="・" >
	<input type="button" value="・" >
	<input type="button" value="・" >
	<br>
	<img src="f0.png" id="img1">
	<img src="f0.png" id="img2">
	<img src="f0.png" id="img3">
</p>
</body>
</html>

 


3.CSSでデザインする

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>スロットゲーム</title>
<style>
p{
	text-align: center;
}
input {
	font-size:50px;
	margin: 0px 0px 20px 0px;
	padding: 0px 30px 0px 30px;
	border-radius:8px;
}
</style>
</head>
<body>
<p>
	<input type="button" value="・" >
	<input type="button" value="・" >
	<input type="button" value="・" >
	<br>
	<img src="f0.png" id="img1">
	<img src="f0.png" id="img2">
	<img src="f0.png" id="img3">
</p>
</body>
</html>

 


4.画像の変更

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>スロットゲーム</title>
<style>
p{
	text-align: center;
}
input {
	font-size:50px;
	margin: 0px 0px 20px 0px;
	padding: 0px 30px 0px 30px;
	border-radius:8px;
}
</style>
</head>
<body>
<p>
	<input type="button" value="・" onClick="document.getElementById('img1').src = 'f1.png';">
	<input type="button" value="・" >
	<input type="button" value="・" >
	<br>
	<img src="f0.png" id="img1">
	<img src="f0.png" id="img2">
	<img src="f0.png" id="img3">
</p>
</body>
</html>

 


5.関数の利用

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>スロットゲーム</title>
<style>
p{
	text-align: center;
}
input {
	font-size:50px;
	margin: 0px 0px 20px 0px;
	padding: 0px 30px 0px 30px;
	border-radius:8px;
}
</style>
<script>
function setImage(id) {

	// 画像の変更
	document.getElementById(id).src = "f1.png";
}

</SCRIPT>
</head>
<body>
<p>
	<input type="button" value="・" onClick="setImage('img1')">
	<input type="button" value="・" onClick="setImage('img2')">
	<input type="button" value="・" onClick="setImage('img3')">
	<br>
	<img src="f0.png" id="img1">
	<img src="f0.png" id="img2">
	<img src="f0.png" id="img3">
</p>
</body>
</html>

 


6.ランダムでの画像の変更

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>スロットゲーム</title>
<style>
p{
	text-align: center;
}
input {
	font-size:50px;
	margin: 0px 0px 20px 0px;
	padding: 0px 30px 0px 30px;
	border-radius:8px;
}
</style>
<script>
function setImage(id) {

	// ランダムで画像を変える
	var images =["f1.png","f2.png","f3.png","f4.png","f5.png"];
	var i = parseInt(Math.random() * 5);

	// 画像の変更
	document.getElementById(id).src = images[i];
}

</SCRIPT>
</head>
<body>
<p>
	<input type="button" value="・" onClick="setImage('img1')">
	<input type="button" value="・" onClick="setImage('img2')">
	<input type="button" value="・" onClick="setImage('img3')">
	<br>
	<img src="f0.png" id="img1">
	<img src="f0.png" id="img2">
	<img src="f0.png" id="img3">
</p>
</body>
</html>

 

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

15分で作る(?) たまごアプリ

プログラミング未経験者対象の【 Androidアプリ作成動画 】です。
この動画はアプリの画面作成の流れを動画にしてUPしたもで、あまり丁寧に解説してません。
未経験者の方が参考にしてもらえると幸いです。

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

 
難易度 :★★★☆☆ ( 未経験者にもあるていど理解、再現できるレベル )
 

画面に表示されるたまごをクリックすると、たまごにヒビが入り、たまごからヒヨコがうまれるアプリです。
このアプリはヒヨコが生まれるだけですが、クリックの仕方で別の動物が生まれたり、スピードを競うなど、ゲーム性を持たせることができます。
YouTube-たまごアプリ

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

  • 新規アプリケーション作成
  • 画像の準備
  • レイアウト作成 ( たまごの表示率を設定 )
  • クリック処理
  • カウントダウン ( 条件分析 )
  • アニメーション処理

15分で作る(?) たまごアプリ_ソース

【 レイアウトファイル 】

rev > layout > fragment_main.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:background=”@drawable/back”
android:gravity=”center_vertical|center_horizontal”
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”
android:weightSum=”1″
tools:context=”com.example.eggtap3.MainActivity$PlaceholderFragment” >

<ImageView

android:id=”@+id/imageView1″
android:layout_width=”match_parent”
android:layout_height=”wrap_content”
android:layout_weight=”0.3″
android:onClick=”onEgg”
android:src=”@drawable/egg0″ />

</LinearLayout>


【 アニメーションリソース 】

rev > anim > tap.xml

<?xml version=”1.0″ encoding=”utf-8″?>
<set xmlns:android=”http://schemas.android.com/apk/res/android” >

<rotate
android:duration=”30″
android:toDegrees=”20″
android:pivotX=”50%”
android:pivotY=”50%” >
</rotate>

</set>


 

【 Javaファイル 】

MainActivity.java

package com.example.eggtap3;

import android.support.v7.app.ActionBarActivity;
import android.support.v7.app.ActionBar;
import android.support.v4.app.Fragment;
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.view.animation.AnimationUtils;
import android.widget.ImageView;
import android.os.Build;

public class MainActivity extends ActionBarActivity {

// 卵が割れる数
int eggCount =30;

public void onEgg( View v){

// 画像のリモコン
ImageView iv = (ImageView)findViewById(R.id.imageView1);

// カウントダウン
eggCount–;

// 画像を変える+条件分析
if( eggCount<20) iv.setImageResource(R.drawable.egg1);
if( eggCount<10) iv.setImageResource(R.drawable.egg2);
if( eggCount<5) iv.setImageResource(R.drawable.egg3);
if( eggCount<0) iv.setImageResource(R.drawable.egg4);

// アニメーション処理
iv.startAnimation(AnimationUtils.loadAnimation(this, R.anim.tap));

}

@Override
protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

if (savedInstanceState == null) {
getSupportFragmentManager().beginTransaction()
.add(R.id.container, new PlaceholderFragment())
.commit();

}

~ 以下略 ~

}

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

15分で作る(?) 占いアプリ

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

この動画はアプリの画面作成の流れを動画にしてUPしたもで、あまり丁寧に解説してません。
未経験者の方が参考にしてもらえると幸いです。

 

YouTube_動物占いアプリ

 

【 動画紹介 】

シンプルな動物占いアプリです。
ボタンをクリックすることで、画像とテキスト(文字)をランダムに表示します。

15分での作成と解説を目指しましたが、大幅に時間オーバーしました。(m_m)

説明付きはきついですね・・・
解説は入れていますが、この動画だけでの「アプリ作成の理解」を前提をしていません。
あくまでも、他の動画や市販テキストを合わせての学習が前提です。
続きを読む

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

15分で作る カウンターアプリ

カウンターアプリの作り方を紹介している動画です。

新規作成から15分で完成していますので、解説等は簡単です。
真似してもらうと、完成できるハズですが、開発環境のバージョン等の違いでうまく行かない人も多いと思います。

( SDK4.X以降では大きく違う為 )
細かい解説は別の動画で紹介していますので、うまく行かない方はそちらも参考にしてみてください。

YouTube_15分で作るカウンターアプリ

続きを読む