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

ボタンとXML

プログラミング未経験者対象の【 Androidアプリ作成動画 】で、このページは「画面作成の基本操作」を解説した動画です。

注意:この動画は未経験者の方の参考動画で、動作を保証するものではありません。
開発バージョン違い、PC環境の違い、文字コード等の設定違いにより、コピペしてもうまく機能しない時があります。

動画で学ぶアプリ開発「ボタンとXMLレイアウト」

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

未経験者対象の「画面の作り方」の解説動画です。

「ボタンとRelativeLayout」の内容をXMLで作成する解説動画です。

【 学習の流れ 】

  1. 新規アプリケーション作成
  2. XMLとは
  3. XMLでの画面作成

【 XMLとは 】

  1. 画面を確認してみよう
  2. XML → 文字で画面を作成する文法

【 XML図解 】

動画で学ぶAndroid開発 「XML図解」

XML図解-XMLの書き方

【 XMLでの画面作成 】

  1. 削除と配置をしてみよう。
  2. 横幅を変えてみよう。
  3. 画面の中央に配置してみよう。
  4. ボタンの右寄せ、左寄せ。
  5. 余白を設定してみよう。
動画で学ぶ、Androidアプリの作り方

ボタンとRelativeLayout

プログラミング未経験者対象の【 Androidアプリ作成動画 】で、このページは「画面作成の基本操作」を解説した動画です。

注意:この動画は未経験者の方の参考動画で、動作を保証するものではありません。
開発バージョン違い、PC環境の違い、文字コード等の設定違いにより、コピペしてもうまく機能しない時があります。

動画で学ぶアプリ開発 「ButtonとRelativeLayout」

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

未経験者対象の「画面の作り方」の解説動画です。
RelativeLayoutにボタンを配置し、基本的な設定の仕方を解説しています。

【 学習の流れ 】

  1. 新規アプリケーション作成
  2. 編集画面の調整と理解
  3. ボタンの編集
  4. RelativeLayout基礎

【 ボタンの編集 】

  1. 文字を変更してみよう。
  2. 文字サイズを変更してみよう。
  3. ボタンサイズを変更してみよう。
    • wrap_content(ラップコンテンツ・素材を包み込む)
    • match_parent(マッチペアレント・親に合わせる)

【 RelativeLayout基礎 】

  1. RelativeLayoutとは
    • Relative(リラティブ・相対)とLayout(レイアウト・配置)
    • 相対的:○○の右、○○の下
    • 具体的:画面の中央、画面の右、画面の下
  2. 画面の中央に配置してみよう。
    • Horizontal(ホリゾンタル・水平)とVertical(ヴァティカル・垂直)
    • true(トゥルー・真)とfalse(フォルス・偽)
  3. ボタンの右寄せ、左寄せ。
    • alignParent(アラインペアレント・親とそろえる)
  4. 余白を設定してみよう。
    • margin(マージン・余白)
動画で学ぶ、Androidアプリの作り方

サイズ違いのイラストを並べよう

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

この動画はアプリの画面作成の流れを動画にしてUPしたもで、あまり丁寧に解説してません。
開発バージョンの違いや、文字コード、設定等により、コピペしてもうまく機能しない時があります。
未経験者の方の参考動画としてご覧ください

Androidアプリの作り方_サイズの違うイラストの並べ方

SeekBarの利用_学習内容

この動画は「サイズの違うイラストの並べ方」を解説したものです。
ポイントさえつかむと、自由に応用することができると思います。

難易度 :★★☆☆☆ ( 未経験者にも、再現、応用が可能なレベル。(エクリプスの基本操作は必要 ))

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

動画で学べるAndroidアプリ開発_サイズが違う画像のレイアウト
クラゲイラスト400px
サメのイラスト
サメのイラスト600px
クジライラスト
クジライラスト800px

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

  1. 新規アプリ作成
  2. 縦並びレイアウトへ変更  ( LinearLayout )
  3. 画像の用意
    • ネットからダウンロード
    • アプリに組み込む
  4. 画像の配置と並べ替え
  5. 画像の表示サイズをそろえる
  6. 起動テスト
  7. 説明を省いた復習

動画で学ぶAndroidアプリ 【ソース】

2・縦並びレイアウトへ変更 ( LinearLayout )

  • TextViewの削除
  • 縦並びのレイアウトに変更する

縦並びレイアウト_LinearLayout

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

</LinearLayout>

※ バージョンによって多少違いがありますが、学習には問題ないです。

4・画像の配置と並べ替え

  • 画像を3枚配置する
  • 画像の並べ替え

3・画像の配置と並べ替え2

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

    <ImageView
        android:id="@+id/imageView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/img_whale800px" />

    <ImageView
        android:id="@+id/imageView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/img_shark600px" />

    <ImageView
        android:id="@+id/imageView3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/img_jellyfish400px" />

</LinearLayout>

5・画像の表示サイズをそろえる

  • 全ての画像の、横幅と縦幅を最大化する
  • 全ての画像の、表示の割合を指定する

5・画像の表示サイズをそろえる

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

    <ImageView
        android:id="@+id/imageView3"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:src="@drawable/img_whale800px" />

    <ImageView
        android:id="@+id/imageView2"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:src="@drawable/img_shark600px" />

    <ImageView
        android:id="@+id/imageView1"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:src="@drawable/img_jellyfish400px" />

</LinearLayout>

6・起動テスト

  1. パッケージエクスプローラ内のプロジェクトをクリック( 名前は作成毎に異なる )
  2. メニューの実行ボタンをクリック
  3. 30秒~2分ほどでエミュレータが起動し、アプリが表示される

動画で学ぶAndroidアプリ_エミュレータ起動時の注意「プロジェクトを先にクリック」

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

SeekBar(シークバー)の利用

プログラミング未経験者対象の【 Androidアプリ作成動画 】です。
 
未経験者を対象にして、できる限り分かりやすく解説しているつもりですが、プログラミングスキルや開発環境によって理解出来なかったり、再現出来ない時もあります。

SeekBarの利用_YouTubeアイコン

 

SeekBarの利用_学習内容
この動画は「SeekBar(シークバー)を使って背景色を変更する」を解説したものです。
 
難易度 :★★★★☆ ( 未経験者には理解も利用も困難で「再現出来れば十分」なレベル )
 
SeekBarを本格的に理解するのはオブジェクト指向を深く理解できてないと厳しいと思います。

残念ながら、初心者の方は「理解より再現(自分のパソコンで再現させる)」を目指してください。
不思議な物で、分からずに体験していると、学習が楽になりますので、是非2回は再現してみてください。
 
 
title_動画で学ぶアプリ作成_作成の流れ

  • 新規アプリケーション作成
  • 背景色の変更
  • SeekBerを配置
  • SeekBerでの背景色の変更
  • 復習作成( 同じ物をもう一度 )

 
 
SeekBarの利用_ソース

 

1・背景色の変更(前置き)

  • RelativeLayoutにIDを付ける
  • TextViewを削除する
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/rLayout"
    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.test1.MainActivity" >

</RelativeLayout>

 

・setBackgroundColorで背景色を付ける (MainActivity.java)

package com.example.test1;

import android.support.v7.app.ActionBarActivity;
import android.graphics.Color;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
import android.widget.RelativeLayout;


public class MainActivity extends ActionBarActivity {

    // オンクリエイト( 画面表示直前に実行される )
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        
        /************************************
         * 背景色の変更(前置き)
         ***********************************/
        RelativeLayout rl =(RelativeLayout)findViewById(R.id.rLayout);
        rl.setBackgroundColor(Color.rgb(255, 0, 0));
        // この段階でエラーが出る人はバージョンUPが必要と思われます。( 2014/09/10 現在 )
    }

// ~ 以下略 (変更しません)~

SeekBarの利用_(RelativeLayout)findViewById

SeekBarの利用_setBackgroundColor(Color.rgb(255,-0,-0));


2・SeekBarの配置

・RelativeLayoutにIDを付ける (activity_main.xml)

 

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/rLayout"
    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.test1.MainActivity" >

    <SeekBar
        android:id="@+id/seekBar1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:max="255" />

</RelativeLayout>

 

 


3-1・バーを変更したときの処理を登録する (1/3)

・setOnSeekBarChangeListenerの設定 ( MainActivity.java )

package com.example.test1;

import android.support.v7.app.ActionBarActivity;
import android.graphics.Color;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
import android.widget.RelativeLayout;
import android.widget.SeekBar;


public class MainActivity extends ActionBarActivity {

    // オンクリエイト( 画面表示直前に実行される )
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        
        /************************************
         * 背景色の変更(前置き)
         ***********************************/
        RelativeLayout rl =(RelativeLayout)findViewById(R.id.rLayout);
        rl.setBackgroundColor(Color.rgb(255, 0, 0));
        
        /************************************
         * シークバーの利用
         ***********************************/
        SeekBar sb =(SeekBar)findViewById(R.id.seekBar1);
        sb.setOnSeekBarChangeListener(l);            // エラーが出ます
    }
// ~ 以下略 (変更しません)~

SeekBarの利用_sb.setOnSeekBarChangeListener(l);
 
 


3-2・バーを変更したときの処理を登録する (2/3)

・OnSeekBarChangeListenerの設定 ( MainActivity.java )

package com.example.test1;

import android.support.v7.app.ActionBarActivity;
import android.graphics.Color;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
import android.widget.RelativeLayout;
import android.widget.SeekBar;
import android.widget.SeekBar.OnSeekBarChangeListener;


public class MainActivity extends ActionBarActivity {

    // オンクリエイト( 画面表示直前に実行される )
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        
        /************************************
         * 背景色の変更(前置き)
         ***********************************/
        RelativeLayout rl =(RelativeLayout)findViewById(R.id.rLayout);
        rl.setBackgroundColor(Color.rgb(255, 0, 0));
        
        /************************************
         * シークバーの利用
         ***********************************/
        SeekBar sb =(SeekBar)findViewById(R.id.seekBar1);
//      sb.setBackgroundColor(Color.rgb(0, 0, 255));
        sb.setOnSeekBarChangeListener(new OnSeekBarChangeListener() {
			
                @Override
                public void onStopTrackingTouch(SeekBar seekBar) {
                        // TODO Auto-generated method stub
				
                }
			
                @Override
                public void onStartTrackingTouch(SeekBar seekBar) {
                        // TODO Auto-generated method stub
				
                }
			
                @Override
                public void onProgressChanged(SeekBar seekBar, int progress,
                        boolean fromUser) {
                        // TODO Auto-generated method stub
				
                }
        });
        // ***ここまで*****************************
    }
// ~ 以下略 (変更しません)~

SeekBarの利用_イベントリスナー
 
 


3-3・バーを変更したときの処理を登録する (3/3)

  • 背景色変更の処理を移動する。
  • 赤色の変数をpに統一しています。

・ ( MainActivity.java )

/************************************
* シークバーの利用
***********************************/
SeekBar sb =(SeekBar)findViewById(R.id.seekBar1);
sb.setOnSeekBarChangeListener(new OnSeekBarChangeListener() {
			
    @Override
    public void onStopTrackingTouch(SeekBar seekBar) {
        // タッチを離した時の処理を記載
    }
			
    @Override
    public void onStartTrackingTouch(SeekBar seekBar) {
        // タッチした時の処理を記載
    }
			
    @Override
    public void onProgressChanged(SeekBar seekBar, int p, boolean fromUser) {
        // 値が変化する度に実行される
				
        /************************************
        * 背景色の変更
        ***********************************/
        RelativeLayout rl =(RelativeLayout)findViewById(R.id.rLayout);
        rl.setBackgroundColor(Color.rgb(p, 0, 0));
    }
});
// ***ここまで*****************************
NHKわかば基金

パソコン支援 【わかば基金:NHK厚生文化事業団 】(旧)

NHK厚生文化事業団「わかば基金」よりパソコンの支援を頂きました!

もちろん「ハコニワ」も一覧に掲載されています。

 

パソコン支援 【わかば基金:NHK厚生文化事業団 】1
想像を遙かに超えるスペックと美しさで、新品パソコンのようです。

 

パソコン支援 【わかば基金:NHK厚生文化事業団 】2
スペックはWindows7でまさかのメモリ4G!
eclipseも問題ないです。

 
 

パソコン支援 【わかば基金:NHK厚生文化事業団 】3
支援された3台まとめて、初期設定しました。
さすがNHK、しっかりリユースされていて、全く問題ありません。
下手をすると新品以上に使いやすいです。(新品は不要なアプリが入ってるので)
 
 

パソコン支援 【わかば基金:NHK厚生文化事業団 】4
もちろん、無事にテスト出来ました。

Office2013も入っていて・・・・自分のパソコンよりよかったですw

 

この支援の倍率は8~10倍です。

選ばれた事への感謝と、支援の手続きに協力してもらった「伊丹社会福祉協議会」には頭が上がりません。

 
 

しかし、本題はこれからですね。

このパソコンは僕のパソコンで無く支援者が利用することが目的のパソコンです。
良い講座を目指します!!

 

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

 

動画で学ぶ、HTML5アプリ

JavaScriptで背景画像を変えてみよう

HTML5+JavaScript+CSSでの「背景画像の変更」を動画にしています。
新規作成から15分で完成を目指しているので、簡略させてもらってます。

 

 

動画で学ぶWebアプリ_背景画像の変更

【 動画リスト 】

前半:新規作成 ( 約9分 )
http://youtu.be/Gr0tEO3Luio

後半:画像の変更 ( 約7分 )
http://youtu.be/9NAAb68J1bM

 

【 使用イラスト 】

動画で学ぶWebアプリ_素材ネコ動画で学ぶWebアプリ_素材トリ動画で学ぶWebアプリ_素材猿動画で学ぶWebアプリ_素材スライム

 

【 学習内容 】

JavaScriptで背景画像を変えてみようボタンクリックで背景画像を変更する。(サンプル)
※ スマートフォンでも動きます。

1.新規作成
– HTMLについて
– 文字コードについて

2.ボタンの表示 (HTML)
– ボタンについて

3.文字サイズの変更 ( CSS )
– CSSとは
– フォントサイズの変更

4.画像の表示 (JavaScript)
– クリック処理
– 画像の表示

 


1.新規作成

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

 


2.ボタンの表示 ( HTML )

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>背景画像を変えてみよう</title>
</head>
<body>

	<!-- ボタンの表示 -->
	<input type="button" value="ネコ" >
	<input type="button" value="トリ" >

</body>
</html>

 


3.文字サイズの変更 ( CSS )

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>背景画像を変えてみよう</title>
	<style>
		/* フォントサイズの変更 */
		input {
        		font-size:40px;
		}
	</style>
</head>
<body>

	<!-- ボタンの表示 -->
	<input type="button" value="ネコ" >
	<input type="button" value="トリ" >

</body>
</html>

 


4.画像の表示 (JavaScript)

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>背景画像を変えてみよう</title>
	<style>
		/* フォントサイズの変更 */
		input {
        		font-size:40px;
		}
	</style>
</head>
<body>

	<!-- ボタンの表示 -->
	<input type="button" value="ネコ" onClick="document.body.style.backgroundImage = 'url(cat.png)';">
	<input type="button" value="トリ" onClick="document.body.style.backgroundImage = 'url(bird.png)';">

</body>
</html>

 

【 クリック処理 補足 】

onClick JavaScriptで背景色を変えてみよう

動画で学ぶ、HTML5アプリ

JavaScriptで背景色を変えてみよう

HTML5+JavaScript+CSSでの「背景色の変更」を動画にしています。
新規作成から15分で完成を目指しているので、色々簡略させてもらってます。

title_Webアプリ_動画リスト

Webアプリ講座【JavaScriptで背景色を変えてみよう 】

 

1/6 準備編 [6:33]
– htmlファイルの作成
http://youtu.be/jocVEcOb-9Q

2/6 新規作成 [5:09]
– HTMLについて
– 文字コードについて
http://youtu.be/XLSFjm0F5tM

3/6 ボタンの表示 (HTML) [3:47]
– ボタンについて
http://youtu.be/2JKmHivoJs4

4/6.背景色の変更 (JavaScript) [4:13]
– クリック処理
– 背景色の変更
http://youtu.be/hgvRbw3ceBY

5/6 背景色の変更 (JavaScript) [3:12]
– 16進数について
http://youtu.be/lkZoty4u5tU

6/6 フォントサイズの変更 (CSS)  [3:01]
– フォントサイズの変更
http://youtu.be/X1ixmmEvIMo

 

 
title_Webアプリ_学習内容

JavaScriptで背景色を変えてみよう_サンプル2

ボタンクリックで背景背景色を変更する。(サンプル)
※ スマートフォンでも動きます。

1.新規作成
– HTMLについて
– 文字コードについて

2.ボタンの表示 (HTML)
– ボタンについて

3.背景色の変更 (JavaScript)
– クリック処理
– 背景色の変更
– 16進数について

4.フォントサイズの変更 (CSS)
– CSSとは
– フォントサイズの変更

 
title_Webアプリ_ソース

1.新規作成

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

 


2.ボタンの表示 (HTML)

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>背景色を変えてみよう</title>
</head>
<body>

	<!-- ボタンの表示 -->
	<input type="button" value="赤" >
	<input type="button" value="青" >

</body>
</html>

 


3-1.背景色の変更 (JavaScript)

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>背景色を変えてみよう</title>
</head>
<body>

	<!-- ボタンの表示 -->
	<input type="button" value="赤" onClick="document.bgColor = 'red';">
	<input type="button" value="青" onClick="document.bgColor = 'blue';">

</body>
</html>

 

 

【 クリック処理 補足 】

onClick-JavaScriptで背景色を変えてみよう

 

 

 


3-2.16進数での指定

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>背景色を変えてみよう</title>
</head>
<body>

	<!-- ボタンの表示 -->
	<input type="button" value="赤" onClick="document.bgColor = 'red';">
	<input type="button" value="青" onClick="document.bgColor = 'blue';">
 	<input type="button" value="深緑" onClick="document.bgColor = '#006400';">

</body>
</html>

 


4.フォントサイズの変更 (CSS)

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>背景色を変えてみよう</title>

	<style>
	/* フォントサイズの変更 */
	input {
		font-size:40px;
	}
	</style>
</head>
<body>

	<!-- ボタンの表示 -->
	<input type="button" value="赤" onClick="document.bgColor = 'red';">
	<input type="button" value="青" onClick="document.bgColor = 'blue';">
 	<input type="button" value="深緑" onClick="document.bgColor = '#006400';">

</body>
</html>

 

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

開発環境の構築

このページでは「Androidの開発環境の構築の流れ」を動画で紹介しています。

見ての通りかなり長い上いです。

「環境作るだけでどんだけかかるねん!!!」と、つっこみたくなります。

 

さらに「開発環境やインストール時のバージョン」によって上手く行かないことはまれです。

初心者の方は動画を参考にしつつ、自分の環境にあった書籍等をご覧ください。

 

注意: 自身のPCのバージョンの確認方法等は、自身で調べる必要があります。

また、動作保障や、不都合が起きないことを約束するわけではありません。 

 


 

【 動画の内容 】

eclipseによるAdroidアプリの開発環境の構築経過を動画にした物です。

初心者の方が、これから開発するときの参考にしてもらえると幸いです。

YouTube学習動画、Androidアプリ開発環境の構築

この動画は4つに分かれていて以下の順にご覧ください。

■1/1 ~前置き編~
https://www.youtube.com/watch?v=nbb56PTcFTo

■2/4 ~インストール編~
https://www.youtube.com/watch?v=vLLUhnh8KPU

■3/4 ~初期設定編~
https://www.youtube.com/watch?v=OZw2i9wfTas

■4/4 ~起動確認編~ (起動エラーも対処してます。汗)
https://www.youtube.com/watch?v=KiR3qJeZa9Q

 

 


 

 

① ダウンロード

必要なファイル ( JavaとSDK )をダウンロードします。

※ Javaとは・・・Java言語のプログラムの実行環境および開発環境

※ SDKとは・・・・開発に必要な部品のこと = ここでは「Androidを開発するソフト」でOK

 

1-1 Java SEのダウンロード

1_Java-SE

 

Android 開発環境構築 Java3

* 以下をクリックでも開きます

http://www.oracle.com/technetwork/java/javase/downloads/index.html

 

Android 開発環境構築 Java3

 

Android 開発環境構築 Java3

 

以上で、ダウンロードが始まります。

 

 

1-2 Android SDKのダウンロード

Android開発環境 Android SDK のダウンロード

* 以下をクリックでも開きます

http://developer.android.com/sdk/index.html

Android開発環境 Android SDK のダウンロード22

Android開発環境 Android SDK のダウンロード3

 

6 ・ パソコン内にダウンロードされていることが確認できると思います。

開発環境の構築 DL後

 

 

② インストール

・Javaはダブルクリックでインストール

01_開発環境の構築_Javaのインストール

 

以降は基本 次へ・・・次へ・・・

02_開発環境の構築_Javaのインストール

03_開発環境の構築_Javaのインストール

04_開発環境の構築_Javaのインストール

05_開発環境の構築_Javaのインストール

06_開発環境の構築_Javaのインストール

07_開発環境の構築_Javaのインストール

 

 

・Android SDKは解凍して Cドライブ直下にコピーします。

01_開発環境の構築_Android-SDKのインストール

② 圧縮ファイル内のフォルダを丸ごとコピー

02_開発環境の構築_Android-SDKのインストール

③ コピーしたフォルダをCドライブ直下に貼り付け

03_開発環境の構築_Android-SDKのインストール

 

 

⑤ Cドライブ直下にコピーされます。

04_開発環境の構築_Android-SDKのインストール

 

⑥ コピーされたフォルダ内の「SDK Manager」を起動 ( SDK Managerのインストール )

05_開発環境の構築_Android-SDKのインストール

⑦ セキュリティの警告が出たら「実行」をクリック

06_開発環境の構築_Android-SDKのインストール

* 何事もなく終わると思います。

 

以上で、ダウンロードとインストールは終了です。

引き続き、初期設定に入ります。

 

③ 初期設定( SDKコンポーネントの追加 

 

① Eclipseを起動するために「eclipes」フォルダを開く。

01_開発環境の構築_初期設定

② フォルダ内の「eclipse」クリックで起動される

02_開発環境の構築_初期設定

④ セキュリティの警告が出たら「実行」

* 何度も起動するので、③のチェックを外す。

03_開発環境の構築_初期設定

④ 起動を待ちます。

04_開発環境の構築_初期設定

⑤ 作成したアプリの保存場所を決めます ( 初期設定でOK )

⑥ ⑤が決まったら「OK」をクリック

05_開発環境の構築_初期設定

⑤ 起動されます。

06_開発環境の構築_初期設定

⑥ SDKコンポーネント(複数のAndroidバージョンに対応させるためのパーツ) を追加するため  ⑥のアイコンをクリック

07_開発環境の構築_初期設定

⑦ テストしたいAndroidバージョン等を選択 ( ここでは3機種でテストしたいので、Android L、Android 4.3、Android 2.33を選択しています。)

⑧ Installをクリック ( 何度か押す必要があります。)

⑨ チェックが足りてなかったので、動画の後半でインストールします。 (チェックが必要です。)

08_開発環境の構築_初期設定3

 

⑫ ダウンロードが始まります (超長いです。)

10_開発環境の構築_初期設定

 

 

⑬ 何度か「Install」すると押せなくなるのでウインドウを閉じます。

11_開発環境の構築_初期設定

以上で、SDKコンポーネントの追加は終わりです。

 

 

④ 初期設定( 高速エミュレータの設定 

Android 2.33以降のバージョンはエミュレータの高速化を行います。

まずは、 Intel HAXMをインストールします。

* これは自身のパソコンのCPUがIntelのみで可能です。

 

⑭~⑮ Intel HAXMをインストールするために、保存先を確認します。

05_開発環境の構築_高速エミュレーター

⑯ ⑮のフォルダ内を開く

12_開発環境の構築_初期設定

⑱ intelhaxmファイルが見つかったらダブルクリックで起動 (インストール)

13_開発環境の構築_高速エミュレーター

* セキュリティの警告が出たら「実行」をクリック

 

⑲ Nextをクリック

14_開発環境の構築_高速エミュレーター

⑳ Nextをクリック

15_開発環境の構築_高速エミュレーター

21- Installをクリック

16_開発環境の構築_高速エミュレーター

21- インストール終了後にFinishをクリック

17_開発環境の構築_高速エミュレーター

以上で高速エミュレータの 準備(Intel HAXMのインストール)は終了します。

* サイトが開いたら閉じておいてください。

* Ecliepsを再起動しといてください。

 

⑤ 初期設定( エミュレーターの作成 

Eclieps再起動後、エミュレーター( パソコン上の仮想Android :作成したアプリのテストをする )の作成を行います。

① 起動後のワークスペース(保存場所)は「OK」をクリック

01_開発環境の構築_エミュレータ設定

② エミュレーターの管理が面を開くために②をクリック

02_開発環境の構築_エミュレータ設定

③ 画面がAVD Managerが開くので「Create」をクリック

03_開発環境の構築_エミュレータ設定

④ Android 2.33の設定 (1台目)

04_開発環境の構築_エミュレータ設定_233

* OK後は③の「Create」をクリック

 

⑤ Android 4.3の設定 (2台目)

* 画面を最大化しないと「高速化(?)のチェック」が見えないかもしれません。

05_開発環境の構築_エミュレータ設定_43

* OK後は③の「Create」をクリック

 

⑥ Android Lの設定 (3台目)

*本体の設定を Nexus 7にしてもいいと思います。

05_開発環境の構築_エミュレータ設定_L

以上で、エミュレータの作成は終了です。

続いてエミュレータの起動テストを行います。

⑦ 一機種選び「Start」をクリック

07_開発環境の構築_エミュレータ機動テスト

 

⑧~⑨ エミュレーターは画面が大きすぎるので、画面に表示されるサイズを6インチ(?)に設定

⑩ はエミュレータを初期化したい時にチェックを入れる (動きがおかしい、アプリがインストールできないなど)

⑪ 設定後 「Launch」をクリックすると起動される (遅いです)

08_開発環境の構築_エミュレータ機動テスト

 

⑫~⑬ 起動待ちの状態です。(長いです)

12_開発環境の構築_エミュレータ機動テスト

 

13_開発環境の構築_エミュレータ機動テスト

 

⑭ 初起動直後です。右下の青い「OK」をクリックしてください。

14_開発環境の構築_エミュレータ機動テスト

 

⑮ 無事に起動しました。普通のAndroidとして動かせます。

( 電話やBluetoothなど使用できない機能も多いです。)

15_開発環境の構築_エミュレータ機動テスト

以上で、エミュレータの起動テストは終了です。

* 他のエミュレーター(And2.33)等も同じように起動できます。

* エミュレーターはメモリを多く使用するので、複数起動は避けたほうがいいかもです。

 

最後に新規にアプリケーションを作成し、起動したエミュレーターで動かしてみます。

⑯ AVD Maneagerを閉じてください。

16_開発環境の構築_エミュレータ機動テスト

* eclipse と エミュレーターのみが起動している状態にする。

 

 

⑥ 新規アプリ作成とエミュレーターでの起動テスト

①「File」 → 「New」 → 「Android Application Project」を選択

01_新規アプリケーション起動テスト

 

② アプリ名を 「 Test 」と入力 ( それ以外は自動入力されます。 以降、細かい説明は省略 )

③ Nextをクリック

02_新規アプリケーション起動テスト

④ Nextをクリック

04_新規アプリケーション起動テスト

⑤ Nextをクリック

05_新規アプリケーション起動テスト

⑥ Nextをクリック

06_新規アプリケーション起動テスト

⑦ Finishをクリック後、新規アプリケーションが作成されます。

07_新規アプリケーション起動テスト

 

アプリを起動します。

⑧ → ⑨ → ⑩とクリック

08_新規アプリケーション起動テスト

 

⑪ 起動方法を 「Android Application 」を選択し

⑫ OKをクリック

09_新規アプリケーション起動テスト

 

⑬ しばらく待つと、エミュレーターに起動されると成功です!!!

10_新規アプリケーション起動テスト

これで、全て完了です!!

お疲れ様でした☆

・・・・長かった・・・汗

 

 

⑭ 補足

以下の画面はNoで問題ないようです。( Logの出力? )

11_新規アプリケーション起動テスト