Android – Eclipse で作成したプロジェクトを扱う

概要

Eclipse で作成された Android 用のプロジェクトを扱う方法をまとめています。

他の環境で作成したプロジェクトを自環境で扱う

次の手順で、他の環境で作成したプロジェクトを自分の開発環境で扱います。

  1. Eclipse を起動します。
  2. [File] – [Import] をクリックします。
  3. [Existing Projects into Workspace] を選択して、[Next] をクリックします。
  4. 他の環境で作成したプロジェクトが保存されているディレクトリを指定します。
  5. [Copy Projects into Workspace] にチェックを付け、[Finish] をクリックします。
  6. Eclipse の Package Explorer を開きます。(通常は左側に表示されています。)
  7. インポートしたプロジェクトのプロパティを表示します。
  8. 左側のリストで、Android を選択し、右側のリストから Target を選択し、[Apply] と [OK] をクリックします。この操作は適用されにくいようです。何度か操作するとうまくいきます。また、Eclipse を終了して再び開くと、プロジェクトに赤色の×が付いていることがあります。この場合も Target の選択を再設定すると解消されます。

これで、プロジェクトがワークスペースにコピーされ、Eclipse で使用可能な状態となりました。インポート直後はエラー表示されていますが、Target を選択することでエラーも消えます。

自環境で作成したプロジェクトを他環境で扱う

作成したプロジェクトを他の環境で扱うには、特に必要な作業はありません。ワークスペースディレクトリ内のプロジェクトフォルダをコピーするだけで扱うことができます。

Android – 開発マシンに Android の実機画面を表示する

概要

Android SDK を使用して開発したアプリケーションを実機で動作確認する方法をまとめています。

実機でアプリを実行

次の手順で実機の画面を表示します。

  1. コマンドプロンプトを起動します。
  2. 次のコマンドを実行します。
    C:\>cd C:\eclipse\android-sdk-windows\tools
    C:\>C:\eclipse\android-sdk-windows\tools>ddms
  3. 表示されているリストから実機を選択します。
  4. [Device] – [Screen Capture] をクリックします。

これで、実機側の画面が開発マシンに表示されます。尚、自動的には更新されませんので、[Refresh] ボタンをクリックして更新します。

Android – 実機で動作確認をする

概要

Android SDK を使用して開発したアプリケーションを実機で動作確認する方法をまとめています。

実機側の準備

次の手順で、実機側の設定を行います。

  1. 実機と PC と接続している USB ケーブルを外します。
  2. [設定] – [アプリケーション] – [開発] の順にタップします。
  3. [USB デバッグ] にチェックを付けます。
  4. 再度、実機と PC を USB ケーブルで接続します。

これで、開発環境のマシンから実機が認識されます。そして、自動的にドライバのインストールが始まります。

これらがすべて完了すると、実機側の準備が完成します。

実機でアプリを実行

次の手順で実機でアプリを実行します。

  1. 通常通り、アプリの開発を行い、ツールバーの Run アイコンをクリックします。
  2. Android Device Chooser のダイアログが表示されます。
  3. この中にエミュレータと実機が表示されていますので、実機を選択します。

これで、実機側にアプリが自動的にインストールされ、実行されます。

尚、Android Device Chooser ダイアログですが、実機がデバッグモードで接続されていて、かつ、エミュレータが起動しているという条件の時のみ表示されます。実機のみ接続されているときには、自動的に実機で実行され、エミュレータのみ接続されているときには、自動的にエミュレータで実行されますので、この選択ダイアログは表示されません。

Android – 電話をかける

準備

1. AndroidManifest.xml に Permission を追加します。下記の例では、<uses-sdk> と <application> との間に追加しています。

<uses-sdk android:minSdkVersion="10" />
<uses-permission android:name="android.permission.CALL_PHONE"/>
<application

デザイン

1. main.xml にボタン (button1) を配置します。

サンプルコード (Java)

package com.test.test01;

import android.app.Activity;
import android.content.Intent;
import android.net.Uri;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;

public class Test01Activity extends Activity implements OnClickListener {

  private Button b1;

  /** Called when the activity is first created. */
  @Override
  public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.main);

    b1 = (Button)findViewById(R.id.button1);
    b1.setOnClickListener(this);
  }

  public void onClick(View view) {
    Intent intent = new Intent();
    intent.setAction(Intent.ACTION_CALL);
    Uri data = Uri.parse("tel:0312341234");
    intent.setData(data);
    startActivity(intent);
  }
}

解説

INTENT を使用して、電話をかけるアプリケーションに処理を依頼しています。電話をかけるアプリケーションが複数あれば、アプリケーションの選択画面が表示されます。今回使用したエミュレータには一つしかインストールされていないため、すぐにダイアルされます。

尚、電話をかけるアクションを実行するためには、マニフェストファイルにパーミッションの設定を行う必要があります。

結果

Android – インターネットにアクセスする

準備

(なし)

デザイン

1. main.xml にボタン (button1) を配置します。

サンプルコード (Java)

package com.test.test01;

import android.app.Activity;
import android.content.Intent;
import android.net.Uri;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;

public class Test01Activity extends Activity implements OnClickListener {

  private Button b1;

  /** Called when the activity is first created. */
  @Override
  public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.main);

    b1 = (Button)findViewById(R.id.button1);
    b1.setOnClickListener(this);
  }

  public void onClick(View view) {
    Intent intent = new Intent();
    intent.setAction(Intent.ACTION_VIEW);
    intent.setData(Uri.parse("http://m.yahoo.co.jp"));
    startActivity(intent);
  }
}

解説

INTENT を使用して、インターネットに接続できるアプリケーションに処理を依頼しています。インターネット接続できるアプリケーションが複数あれば、アプリケーションの選択画面が表示されます。今回使用したエミュレータには一つしかインストールされていないため、すぐにインターネットに接続されます。

結果

Android – エミュレータを使う

概要

Android SDK を使用して、Android アプリケーションを開発する際には、実機で動作する前に Windows 環境上のエミュレータで確認ができます。

エミュレータの作成

次の手順で、エミュレータの作成を行います。

  1. ツールバーの中から、[Opens the Android Virtual Device Manager] のアイコンをクリックして、Android Virtual Device Manager を起動します。
  2. [New] ボタンをクリックします。
  3. Name のテキストボックスにバーチャルマシンの名前 (例: Galaxy) を入力し、Target のリストから SDK のバージョン (例 Android 2.3.3) を選択します。最後に [Create AVD] ボタンをクリックします。
  4. Android Virtual Device Manager で、作成したエミュレータを選択して、[Start] ボタンをクリックすると、エミュレータが起動します。

これで、Eclipse で Android アプリを作成する準備ができました。エミュレータは実機の Android 端末と同じように最初は電源オフの状態です。起動していない場合は、プロジェクトを Run すると、自動的に開始されますが、完全に起動するまで時間がかかります。開発を開始した際に、先に起動しておくとよいでしょう。一度起動しておけば、ソースコードを書き換えて、Run するごとに変更後のアプリがすぐにエミュレータに反映されます。

尚、開発マシンに実機をデバッグモードで接続している場合には、プロジェクトを Run すると、実機の方で動作します。

エミュレータ内のアプリの削除

次の手順で、Eclipse IDE と Android SDK の設定を行います。

  1. コマンドプロンプトを起動します。
  2. 次のコマンドを実行します。
    C:\>cd C:\eclipse\android-sdk-windows\platform-tools
    C:\>eclipse\android-sdk-windows\platform-tools>adb shell
  3. 次のコマンドを実行します。
    # cd data/app
    # ls -l
  4. 次のコマンドを実行して、アプリを削除します。(例: test1)
    # rm com.test.test1-1.apk

これでアプリは削除できましたが、エミュレータを再起動する必要があります。

注意点としては、adb shell を実行する際、開発用に設定された実機が接続されていると、エラーとなります。削除の際は実機を切り離しておきます。

Android – トーストでメッセージを表示する

準備

(なし)

デザイン

1. main.xml にボタン (button1) を配置します。

サンプルコード (Java)

package com.test.test01;

import android.app.Activity;
import android.app.AlertDialog;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.Toast;

public class Test01Activity extends Activity implements OnClickListener {

  private Button b1;

  /** Called when the activity is first created. */
  @Override
  public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.main);

    b1 = (Button)findViewById(R.id.button1);
    b1.setOnClickListener(this);
  }

  public void onClick(View view) {
    Toast.makeText(this, "Hello, my name is Hanako Yamada", Toast.LENGTH_LONG).show();
  }
}

解説

TOAST を使用して、メッセージを表示しています。数秒後、自動的にメッセージは消えます。

結果

Android – テキストを音声で読み上げる

準備

(なし)

デザイン

1. main.xml にボタン (button1) を配置します。

サンプルコード (Java)

package com.test.test01;

import java.util.Locale;
import android.app.Activity;
import android.view.View.OnClickListener;
import android.os.Bundle;
import android.speech.tts.TextToSpeech;
import android.speech.tts.TextToSpeech.OnInitListener;
import android.view.View;
import android.widget.Button;

public class Test01Activity extends Activity
  implements OnClickListener, OnInitListener {
  private TextToSpeech Speech;
  private Button b1;

  /** Called when the activity is first created. */
  @Override
  public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.main);

    Speech = new TextToSpeech(this, this);
    b1 = (Button)findViewById(R.id.button1);
    b1.setOnClickListener(this);
  }

  public void onDestroy() {
    super.onDestroy();
    Speech.shutdown();
  }

  public void onClick(View view) {
    Speech.speak("Hello, my name is Hanako Yamada.", TextToSpeech.QUEUE_FLUSH, null);
  }

  public void onInit(int status) {
    Speech.setLanguage(Locale.ENGLISH);
  }
}

解説

TextToSpeech を使用して、テキストを読み上げています。

TextToSpeech に使用するイベントリスナーの概要は次の通りです。

  • インターフェース : OnInitListener
  • イベントオブジェクトとリスナーオブジェクトの関連付け :  Speech = new TextToSpeech(this, this);
    (第 2 パラメータがリスナーオブジェクト)
  • リスナーオブジェクト : this (Test01Activity クラス)
  • リスナーオブジェクト : onInit

結果

Android – イベント・リスナーを扱う

準備

(なし)

デザイン

1. main.xml にボタン (button1) を配置します。

サンプルコード (Java)

package com.test.test01;

import android.app.Activity;
import android.app.AlertDialog;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;

public class Test01Activity extends Activity implements OnClickListener {

  private Button b1;

  /** Called when the activity is first created. */
  @Override
  public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.main);

    b1 = (Button)findViewById(R.id.button1);
    b1.setOnClickListener(this);
  }

  public void onClick(View view) {
    AlertDialog.Builder ad = new AlertDialog.Builder(this);
    ad.setTitle("TEST01");
    ad.setMessage("Hello, World!");
    ad.setPositiveButton("OK", null);
    ad.show();
  }
}

解説

イベント・リスナーを使用して、ボタンのクリックイベントを処理しています。イベント・リスナーは指定されたオブジェクトの onClick メソッドを実行します。注意点としては、同一オブジェクトには、一つの onClick メソッドしか実装できないことです。このサンプルの場合、Test01Activity クラスには一つの onClick メソッドしか実装できません。

ボタンのクリックと、イベント・リスナーの割り当ては、setOnClickListener メソッドで行います。この際、オブジェクトを引数に指定します。これはこのオブジェクトの onClick メソッドを実行するという意味になります。

このサンプルの場合、Test01Activity クラスで、イベント・リスナーを処理しますので、クラスの定義の際に、implements OnClickListener を使用して、イベント・リスナーの機能を実装しています。

結果

Android – 基礎知識

概要

Android SDK を使用して、Android アプリケーションを開発する際の基礎知識をまとめています。

アプリケーションのしくみ

Android アプリケーションは次の 4 つのしくみを組み合わせて作成されます。

「Activity」

一般的な画面を操作するアプリケーションに使われるしくみです。通常、画面を持つ Android アプリケーションを作成することは、Activity を作成することと同じ意味です。ひとつのアプリケーションで、複数の Activity を持つことができますが、一度に表示できる Activity は一つだけです。そのため、Activity を切り替えながら画面の表示を行います。

Activity には、次のイベント (メソッド) が実装されています。

  • onCreate : 画面を作成する際に呼び出される。通常はアプリケーション起動時となる。
  • onActivityResult : 最初に表示されている Activity から呼び出した Activity から、再び最初の Activity に戻る際に呼び出される。
  • onStart : 初めてが画面を表示するときに呼び出される。
  • onRestart : 他のアプリケーションから割り込みがあり、再び画面を表示するときに呼び出される。
  • onResume : 画面がユーザーから操作できるようになったときに呼び出される。
  • onPause : 現在の画面から他の Activity に移る際に呼び出される。
  • onStop : 画面がユーザーから完全に見えなくなったときに呼び出される。
  • onDestroy : Activity が完全に消失するときに呼び出される。

「Service」

バックグラウンドで動作するアプリケーションに使われるしくみです。通常、サービスと言われるものに UI はありませんが、Android の Service は必ず Activity から実行されますので、Service 形式のアプリケーションであっても、最低 1 つの Activity を含める必要があります。Activity から Service を起動した後は、Activity が非表示になり、バックグラウンドで動作するアプリケーションとなります。

「Content Provider」

アプリケーション間でデータの引き渡しを行う際に使われる仕組みです。通常、セキュリティの観点から個々のアプリケーションが管理しているデータには、他のアプリケーションからはアクセスができません。しかし、データを共有したいケースもあります。その場合は、データを提供するアプリケーションに Content Provider の機能を使用して、データを外部に提供する機能を実装します。そして、そのデータを利用したいアプリケーションは、同じく Content Provider の機能を使用してデータを取得する機能を実装します。

「Intent」

上記の 3 つの構成要素を関連付けるしくみです。Intent には二つの種類があります。

  • 暗黙的 Intent : アクションだけを指定して、そのアクションに対応するアプリを検索してもらう。
  • 明示的 Intent : 特定のアプリを指定する。

アクションは次のようなものがあります。

  • ACTION_CALL : 電話をかける
  • ACTION_SENDTO : メールを送信する
  • ACTION_VIEW : データを表示する
  • ACTION_SEND : データを送信する
  • ACTION_SET_WALLPAPER : 壁紙を設定する
  • ACTION_WEB_SEARCH : Web を検索する

アプリケーションの構成

Android アプリケーションは、次の要素で構成され、開発されます。

「ソースコード」

アプリケーションの動作を決定するものです。通常 Java で記述します。

「リソース」

アプリケーションのアイコン、画像、文字列などです。リソースを入れ替えることにより、表示される画像を変えたり、英語版/日本語版のアプリケーションを作成することができます。リソースを入れ替えるだけならば、ソースコードのコンパイルは不要です。

「マニフェスト」

アプリケーションの属性が定義されています。属性には、アプリケーションのタイトル、アイコン、バージョン情報などアプリケーション全般に関する情報です。

そして、最も重要な権限について記述します。例えば、電話をかけるアプリケーションの場合、マニフェストファイルで、このアプリケーションは電話をかける機能があることを明示するわけです。これで、アプリケーションがどのような重要な機能を持っているかがすぐに分かります。

アプリケーションの動作

アプリケーションは、何かの操作が発生したときに、特定のイベントが自動的に発生して動作することが基本です。これはどういうことかというと、○○○ がされたら、△△△ というイベントが発生してアプリケーションが動作するというものです。例えば、アプリケーションのアイコンがタップされたら、アプリケーションが起動されたときに自動的に呼び出されるイベントが発生して、アプリケーションが起動します。このような動作をイベントドリブンと言い、○○○ という動作のきっかけになる条件と、それに対応する △△△ というイベントの組み合わせが定義されています。

イベントが発生することは、そのイベントに対応したメソッドが実行されることと同じ意味です。私たち開発者は、そのメソッドの中にコードを書いていくことにより、アプリケーションを完成させます。

その他の用語

「ウィジェット」

画面を作成する部品です。他の言語では、コントロールと呼ばれたりします。ウィジェットには、ボタン、ラベル、チェックボックスなどがあります。ウィジェットは、Activity 内に配置されますが、Activity に一度 Layout を配置してからウィジェットを配置します。

「AIDL (Android Interface Definition Language)」

サービスを操作するインターフェースを記述する言語のことです。AIDL を使って、プロジェクトで使用するインターフェースの基本的な情報を作成します。文法的にも Java のインターフェースと似ています。そして、コンパイルすることによって、プロジェクトで使用する Java 用のインターフェースが作成されます。

Android – 開発の基本 (Hello, World! の表示)

概要

Eclips + Android SDK を使用して、Android アプリケーションを開発する基本をまとめています。定番の Hello, World! を表示します。

プロジェクトの作成

次の手順で、Android 用のプロジェクトを作成します。

  1. こちらを参照して、開発環境を準備します。
  2. C:\eclipse\eclipse.exe を実行します。
  3. [File] – [New] – [Project] をクリックします。
  4. [Android] – [Android Project] を選択して、[Next] をクリックします。
  5. Project Name にプロジェクト名 (例: test1) を入力して、[Next] をクリックします。
  6. Build Target の Android バージョンを選択して、[Next] をクリックします。
  7. Package Name にパッケージ名 (例: com.test.test1) を指定して、[Next] をクリックします

画面のデザイン

次の手順で、画面のデザインを行います。

  1. 左ペインから [test1] – [res] – [layout] – [main.xml] を開きます。
  2. 右側に Android の画面が表示されます。また、コントロールとなる Form Widgets も表示されています。
  3. Form Widgets からボタンを Android の画面にドラッグ & ドロップします。

コードディング

次の手順で、コードの記述を行います。

  1. ボタンを右クリック – [Other Properties] – [Inherited from View] – [OnClick] をクリックします。
  2. New OnClick Value にイベント名 (例: Button_Click) を入力します。
  3. main.xml 画面の下の [main.xml] タブをクリックします。すると、コード画面に変ります。このコードを参照すると、ボタンコントロールが作成されていることが分かります。
  4. 左ペインから [test1] – [src] – [com.test.test1] – [Test1Activity.java] をクリックします。
  5. Test1Activity クラスにイベントを記述していきます。現在は onCreate イベントのみ記述されています。
  6. import を記述する部分に以下の追加を行います。また、onCreate イベントの下に以下のイベントを追加します。このイベントは、ボタンをクリックした際に呼び出されるイベントです。
package com.test.test01;

import android.app.Activity;
import android.app.AlertDialog;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;

public class Test01Activity extends Activity implements OnClickListener {

  private Button b1;

  /** Called when the activity is first created. */
  @Override
  public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.main);

    b1 = (Button)findViewById(R.id.button1);
    b1.setOnClickListener(this);
  }

  public void onClick(View view) {
    AlertDialog.Builder ad = new AlertDialog.Builder(this);
    ad.setTitle("TEST01");
    ad.setMessage("Hello, World!");
    ad.setPositiveButton("OK", null);
    ad.show();
  }
}

実行

次の手順で、Android 用のプロジェクトを実行します。同時にコンパイルも行われます。

  1. ツールバー上の緑のボタン (run test1) をクリックします。
  2. Android エミュレータが起動します。完全に起動するまで時間がかかります。
  3. 起動したら、左側のボタンを右にスライドさせてロックを解除します。

結果

解説

初めて Eclipse で Android の開発をするには、慣れが必要ですが、比較的簡単にアプリの作成ができます。

Eclipse で作成したプロジェクトの構造は次のようになっています。

  • src : ソースコードが格納されています。開発者がコードを書きます。
  • gen : リソースクラスが格納されています。通常、自動的に作成されますので、開発者は編集しません。
  • assets : リソースとして扱われないその他のファイルを格納します。
  • res : アイコン、画像、文字列などのリソースを格納します。また、画面のレイアウト自体もリソースとして扱われ、このディレクトリの layout ディレクトリに存在する main.xml で定義されています。このファイルを開くと、自動的に GUI の画面設計ツールが開きます。

main.xml の <LinearLayout>  タグの説明します。

  • このタグによって、Activity (画面) のレイアウトを決定します。ボタンやラベルなどのウィジェットはレイアウトの中に配置されますので、このタグ内に記述します。main.xml の GUI 画面設計ツールでウィジェットを配置すると、自動的にこのタグ内に配置されます。
  • android:layout_width は Activity の横サイズを指定するものです。通常は、fill_parent を指定して、実機の画面の横に合わせます。
  • android:layout_height は Activity の縦サイズを指定するものです。通常は、fill_parent を指定して、実機の画面の縦に合わせます。
  • android:orientation は、ウィジェットの配置方法を決定するものです。horizontal に設定すると、ウィジェットが縦方向に自動的に並びます。

main.xml のウィジェットの定義について説明します。

  • android:id は、ウィジェットに付けられた一意の ID です。@ はリソースへの参照を表します。+ はクラスの自動生成を表します。
  • android:onClick は、クリック時に呼び出されるイベントを指定しています。

HTML5 – タグ

概要

HTML5 のタグについてまとめています。

<b>

HTML4 では、太字や強調の意味で使われていましたが、HTML 5 では、キーワードを指定するときに使います。太字や強調には、<em> や <strong> を使います。

<i>

HTML4 では、イタリック体の意味で使われていましたが、HTML5 では、専門用語、固有の名前などを指定するときに使います。

<h1>

HTML4 では、1 ページに 1 つしか記述できませんでしたが、HTML5 では、複数個記述できます。

<ruby>, <rt>, <rp>

HTML5 で新しく追加されました。ルビをふります。ルビに対応していないブラウザの場合には、ルビの部分が続けて表示されます。この場合は、ルビがかっこで囲まれて表示されます。タグで囲んだ部分は、ルビに対応したブラウザでは表示されません。従って、かっこが表示されず、ルビが表示されます。

<ruby>東京都<rp>(</rp><rt>とうきょうと</rt><rp>)</rp></ruby>

まとめ

HTML5 では、新しく追加されたタグ、意味が変更されたタグ、廃止されたタグがあります。

HTML5 – メニューを作成する

概要

HTML5 でメニューを作成する方法です。基本的には以前の HTML と変わりはないと思います。

サンプル

次の HTML を準備します。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="test1.css" type="text/css">
  </head>
  <body>
    <nav>
      <ul>
        <li><a href="http://www.asahi.com">朝日新聞</a></li>
        <li><a href="http://www.yomiuri.co.jp">読売新聞</a></li>
        <li><a href="http://mainichi.jp/">毎日新聞</a></li>
        <li><a href="http://www.nikkei.com/">日本経済新聞</a></li>
        <li><a href="http://www.sankeibiz.jp/">SankeiBiz</a></li>
      </ul>
    </nav>
  </body>
</html>

次の CSS を準備します。

nav ul {
  background-color: red;
}

nav li {
  width: 100px;
  height:20px;
  float:left;
  list-style: none;
  text-align: center;
  background-color: red;
}

nav li a {
  display:block;
  text-decoration: none;
}

nav li a:hover {
  height:100%;
  display:block;
  background-color:yellow;
}

結果

まとめ

メニューの作成はリストを作る方法を転用したものです。HTML 側は一見すると、リストにしか見ません。これを CSS 側で表示調整していきます。ポイントのみ説明します。

nav li の float で、リストを横に並べます。

nav li の list-style で、ビュレットを非表示にします。

nav li a の text-decoration で、リンクの下線を非表示にします。

nav li a:hover は、マウスをメニューにあてた際のデザインを変更します。

HTML5 – 基礎

概要

HTML5 の主な特徴をまとめています。

DTD (Document Type Definition)

HTML4 では、Strict、Trasitional、Frameset の 3 種類に分かれて、さらに各 DTD も長い宣言文でしたが、HTML5 では 1 種類になり、しかも宣言文も短くなっています。

<!DOCTYPE html>

エンコーディング指定

HTML4 は長い指定文が必要でしたが、HTML5 では指定文が短くなっています。

<meta charset="utf-8">

スタイルシート

スタイルシートには、2 つの記述方法があります。別ファイルとして作成された css ファイルを読み込む方法と、html に直接記述する方法です。

<link rel="stylesheet" href="main.css" type="text/css">
<style>
  body {
    margin : 0;
    background-color: yellow;
  }
</style>

まとめ

HTML5 では、記述方法が非常に簡素になっており、覚えやすく書きやすくなっているようです。

HTML5 – 基本構造

概要

HTML5 では、ページのレイアウト構造が分かりやすくなりました。<html>、<head>、<body> のタグを基本にして、<body> の中が細分化されます。次のタグを使用して、ページのレイアウト位置を明確にします。

  • <header> : ページヘッダー
  • <nav> : ナビゲーション
  • <article> : 左の列
  • <section> : 中央の列
  • <aside> : 右側の列
  • <footer> : ページフッター

但し、これらのタグを使用したからと言って、自動的に位置が決まるものではありません。位置決めは CSS を使用します。

サンプル

次の HTML を準備します。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>HTML5 の基本構造</title>
    <link rel="stylesheet" href="main.css" type="text/css">
  </head>
  <body>
    <header>ヘッダー</header>
    <nav>ナビゲーション</nav>
    <article>左側の列</article>
    <section>中央の列</section>
    <aside>右側の列</aside>
    <footer>フッター</footer>
  </body>
</html>

次の CSS を準備します。

body {
  margin : 0;
  background-color: white;
}

header {
  width: 800px;
  height: 50px;
  background-color: red;
}

nav {
  width: 800px;
  height: 25px;
  background-color: blue;
}

article {
  width: 200px;
  height: 600px;
  background-color: green;
  float: left;
}

section {
  width: 400px;
  height: 600px;
  background-color: white;
  float: left;
}

aside {
  width: 200px;
  height: 600px;
  background-color: yellow;
  float: left;
}

footer {
  clear: both;
  width: 800px;
  height: 50px;
  background-color: pink;
}

結果

まとめ

当然ながら、HTML5 対応ブラウザで実行する必要があります。左側の列、中央の列、右側の列は、css の float 設定により、位置を決める必要はありますが、これまでのように <div> タグですべてを表現する方法に比べて、格段に HTML の読みやすが向上しています。

Android – 開発環境の準備

概要

Android SDK を使用して、Android アプリケーションを開発する環境の構築を行います。開発環境の IDE は Eclipse を使用します。

Eclipse のインストール

次の手順で、Eclipse IDE を準備します。

  1. Eclipse IDE for Java EE Developers をダウンロードします。今回ダウンロードしたファイルは、eclipse-jee-juno-win32-x86_64.zip です。
    http://www.eclipse.org/downloads/
  2. eclipse-jee-juno-win32-x86_64.zip を展開して、eclipse フォルダを C:\eclipse として配置します。

Android SDK のインストール

次の手順で、Android SDK を準備します。

  1. Android SDK をダウンロードします。今回ダウンロードしたファイルは、android-sdk_r20-windows.zip です。
    http://developer.android.com/sdk
  2. android-sdk_r20-windows.zip を展開して、android-sdk-windows フォルダを C:\eclipse\android-sdk-windows として配置します。

Eclipse IDE の設定

次の手順で、Eclipse IDE の設定を行います。

  1. Eclipse が使用するワークスペース用のディレクトリ (例: C:\eclipse\workspace) を作成します。
  2. C:\eclipse\eclipse.exe を起動します。
  3. ワークスペースに、C:\eclipse\workspace を指定します。

Eclipse 用 Android プラグイン ADT (Android Development Tools) のインストール

次の手順で、ADT プラグインを準備します。

  1. [Help] – [Install New Software] をクリックします。
  2. Work with のテキストボックスに https://dl-ssl.google.com/android/eclipse/ と入力して、[Add] ボタンをクリックします。
  3. Name のテキストボックスに Android と入力して、[OK] ボタンをクリックします。
  4. リストビューに、Developer Tools のリストが表示されます。
  5. Developer Tools にチェックを入れ、[Next] ボタンをクリックして、ダウンロードを開始します。
  6. 途中ライセンスに同意するなどを行い、進めていきます。
  7. ダウンロードとインストールが完了すると、Eclipise の再起動を求められるので、指示に従って再起動します。
  8. 再起動後も引き続きインストール作業が行われます。指示に従って進めます。

その他の設定

次の手順でその他の設定を行います。

  1. Eclipse IDE の [Windows] – [Preferences] を開き、[Android] メニューを開き、SDK Location に C:\eclipse\android-sdk-windows を設定します。
  2. ツールバーの中から、[Opens the Android SDK Manager] のアイコンをクリックして、Android SDK Manager を起動します。
  3. 表示されているリストの中から Android SDK Platforms-tools を探し、インストールされていることを確認します。また、 自分が所有している Android 端末のバージョンに対応した SDK を選択してインストールを行います。私の場合は、Galaxy S (2.3.3) を所有していますので、Android 2.3.3 (API 10) を選択しました。デフォルトで、Android 4.0 が選択されていますが、選択したままでも問題ありません。

エンコード設定

ファイル:eclipse.ini
場所:-Dfile.encoding=utf-8

解説

これで、Eclipse で Android アプリを作成する準備ができました。

Google の Web API を使う

概要

Google の Web API についてまとめています。Google から提供されている Web API は基本的に無料で使用できます。ユーザー登録さえも必要ありません。

Google の Web API は次のサイトで公開されています。
http://code.google.com/intl/ja/more/

今回は、グラフ描画用の Web API を使用するサンプルです。

Web API の実行 (ブラウザ)

ブラウザのアドレスバーを使用して、Google の Web API を実行します。使用する Web API の URL を作成するためには次の情報を使用します。

  • グラフ描画用 URL : http://chart.apis.google.com/chart
  • グラフサイズ (chs) : 320×240
  • グラフの種類 (cht) : p (円グラフ)
  • データ (chd) : t:65,25,10
  • 凡例 (chl) : Japan|USA|CANADA

これらの情報を結合して次の文字列を作成します。

http://chart.apis.google.com/chart?chs=320×240&cht=p&chd=t:65,25,10&chl=Japan|USA|CANADA

この文字列をブラウザのアドレスに入力して、実行します。

Web API の実行 (PHP)

PHP を使用して、Google の Web API を実行します。まずは、こちらを参照して、XAMPP を用意します。

次に PHP を作成し、C:\xampp\htdocs\google.php として保存します。ファイルのエンコードは BOM なし UTF-8 を指定します。

<?php
  $url = "http://chart.apis.google.com/chart?";
  $param = array(
    "chs" => "320x240",
    "cht" => "p",
    "chd" => "t:65,25,10",
    "chl" => "Japan|USA|CANADA"
  );
  $url .= http_build_query($param);
  echo ("<img src=" . $url . "/>");
?>

XAMPP (Apache) が起動している環境のブラウザで、http://localhost/google.php を実行します。

解説

このように Web API の実行は、ブラウザのアドレスバーまたは、PHP を使用して行うことができます。結果は、イメージ形式で表示されます。

この API に関してのヘルプは次のサイトにあります。
http://code.google.com/intl/ja-JP/apis/chart/

Twitter の Web API を使う (JSON 編)

概要

Twitter の Web API についてまとめています。Twitter から提供されている Web API は基本的に無料で使用できます。ユーザー登録さえも必要ありません。

Twitter の Web API は次のサイトで公開されています。
https://dev.twitter.com/

今回は、検索用の Web API を使用するサンプルです。

Web API の実行 (PHP)

PHP を使用して、Twitter の Web API を実行します。まずは、こちらを参照して、XAMPP を用意します。

次に PHP を作成し、C:\xampp\htdocs\twitter.php として保存します。ファイルのエンコードは BOM なし UTF-8 を指定します。

<?php
  $url = "http://search.twitter.com/search.json?q=" . urlencode("東京都");
  $file = file_get_contents($url);
  $result = json_decode($file);
  echo("<pre>");
  var_dump($result);
?>

XAMPP (Apache) が起動している環境のブラウザで、http://localhost/twitter.php を実行します。

解説

このように Web API の実行は、PHP を使用して行うことができます。結果は、配列の形式で表示されます。

この API に関してのヘルプは次のサイトにあります。
https://dev.twitter.com/docs/api/1/get/search

Twitter の Web API を使う (ATOM 編)

概要

Twitter の Web API についてまとめています。Twitter から提供されている Web API は基本的に無料で使用できます。ユーザー登録さえも必要ありません。

Twitter の Web API は次のサイトで公開されています。
https://dev.twitter.com/

今回は、検索用の Web API を使用するサンプルです。

準備

検索キーワードを UTF-8 エンコーディングしたものを用意します。今回は「東京都」を検索キーワードにします。

  1. 次のサイトで、「東京都」を UTF-8 エンコーディングします。
    http://www.tagindex.com/cgi-lib/encode/url.cgi
  2. 結果は、「%93%8c%8b%9e%93s」となります。

Web API の実行 (ブラウザ)

ブラウザのアドレスバーを使用して、Twitter の Web API を実行します。使用する Web API の URL を作成するためには次の情報を使用します。

  • 検索用 URL : http://search.twitter.com/search.atom?q=
  • 検索キーワード (「東京都」) : %93%8c%8b%9e%93s

これらの情報を結合して次の文字列を作成します。

http://search.twitter.com/search.atom?q=%E6%9D%B1%E4%BA%AC%E9%83%BD

この文字列をブラウザのアドレスに入力して、実行します。

Web API の実行 (PHP)

PHP を使用して、Twitter の Web API を実行します。まずは、こちらを参照して、XAMPP を用意します。

次に PHP を作成し、C:\xampp\htdocs\twitter.php として保存します。ファイルのエンコードは BOM なし UTF-8 を指定します。PHP を使用した場合には、UTF-8 エンコーディングを行う関数を使用することができます。

<?php
  $url = "http://search.twitter.com/search.atom?q=" . urlencode("東京都");
  $file = file_get_contents($url);
  echo ($file);
?>

XAMPP (Apache) が起動している環境のブラウザで、http://localhost/twitter.php を実行します。

解説

このように Web API の実行は、ブラウザのアドレスバーまたは、PHP を使用して行うことができます。結果は、ATOM 形式で表示されます。

この API に関してのヘルプは次のサイトにあります。
https://dev.twitter.com/docs/api/1/get/search

楽天の Web API を使う (REST 編)

概要

楽天の Web API についてまとめています。楽天 から提供されている Web API は基本的に無料で使用できます。但し、楽天会員の登録を行い、デベロッパー ID を取得する必要があります。これらの登録と取得も無料です。

楽天 の Web API は次のサイトで公開されています。
http://webservice.rakuten.co.jp/

今回は、検索用の Web API を使用するサンプルです。

楽天会員の登録とデベロッパー ID の取得

  1. 次のサイトで、楽天会員の登録を行います。
    http://www.rakuten.co.jp/myrakuten/login.html
  2. 次のサイトで、デベロッパー ID を取得します。
    http://webservice.rakuten.co.jp/

以下、デベロッパー ID を aaaaabbbbbcccccdddddeeeeefffff として説明します。

Web API の実行 (PHP)

PHP を使用して、楽天の Web API を実行します。まずは、こちらを参照して、XAMPP を用意します。

次に PHP を作成し、C:\xampp\htdocs\rakuten.php として保存します。ファイルのエンコードは BOM なし UTF-8 を指定します。

<?php
  $url = "http://api.rakuten.co.jp/rws/3.0/json?";
  $params = array(
    "developerId" => "aaaaabbbbbcccccdddddeeeeefffff",
    "operation" => "ItemSearch",
    "keyword" => "東京都",
    "version" => "2010-09-15",
  );

  $result1 = file_get_contents($url  .  http_build_query($params, '', '&'));
  $result2 = json_decode($result1);
  echo "<pre>";
  var_dump($result2->Body->ItemSearch->Items->Item);
?>

XAMPP (Apache) が起動している環境のブラウザで、http://localhost/rakuten.php を実行します。

解説

このように Web API の実行は、PHP を使用して行うことができます。

この API に関してのヘルプは次のサイトにあります。
http://webservice.rakuten.co.jp/api/itemsearch/

PAGE TOP
MENU