最近の更新

2013年5月29日水曜日

GoogleMapV2InitialMapType

【目的】
AndroidでGoogleMapの初期の地図タイプを指定します
※API12より前で、SupportMapFragmentを使用するバージョン。



【準備】
1.「Google Play services SDKをワークスペースにインポートする方法」で「Google Play services SDK」をワークスペースにインポートしておきます。
2.「Google APIsのGoogle Maps Android API v2のAPIキーを取得する方法」の手順で、「Google Maps Android API v2」のAPIキーを取得しておきます。
※APIキーの取得に指定するパッケージ名は「com.example.androidsample34_016」です。



【手順1】
1.「Androidプロジェクトの作成・実行方法(バージョン別一覧)」のAndroidプロジェクトの作成手順で、「AndroidSample34-016-GoogleMapV2InitialMapType」といプロジェクトを作成。
※プロジェクトの設定は以下の通り。
※他の項目は任意。
項目名 項目に設定する値
アプリケーション名(Application Name) com.example.androidsample34_016
プロジェクト名(Project Name) AndroidSample34-016-GoogleMapV2InitialMapType
パッケージ名(Package Name) com.example.androidsample34_016
Build SDK API 8
Minimum Required SDK API 8



【手順2】
1.「AndroidManifest.xml」は以下の通り。
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.androidsample34_016"
    android:versionCode="1"
    android:versionName="1.0" >

    <uses-sdk
        android:minSdkVersion="8"
        android:targetSdkVersion="8" />

    <permission
        android:name="com.example.androidsample34_016.permission.MAPS_RECEIVE"
        android:protectionLevel="signature" />

    <uses-permission android:name="com.example.androidsample34_016.permission.MAPS_RECEIVE" />
    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
    <uses-permission android:name="android.permission.INTERNET" />
    <uses-permission android:name="com.google.android.providers.gsf.permission.READ_GSERVICES" />
    <!-- External storage for caching. -->
    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
    <!-- My Location -->
    <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
    <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
    <!-- Maps API needs OpenGL ES 2.0. -->
    <uses-feature
        android:glEsVersion="0x00020000"
        android:required="true" />

    <application
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name"
        android:theme="@style/AppTheme" >
        <meta-data
            android:name="com.google.android.maps.v2.API_KEY"
            android:value="YOUR_OWN_KEY" />

        <activity
            android:name="com.example.androidsample34_016.MainActivity"
            android:label="@string/title_activity_main" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

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

</manifest>
2.「YOUR_OWN_KEY」を【準備】で取得しておいた、APIキーに変更。
3.「Ctrl+Shift+F」を押し、コードをフォーマッティング。
4.「Ctrl+S」を押し、ファイルを保存。



【手順3】
1.「res/layout/activity_main.xml」は以下の通り。
<fragment xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:map="http://schemas.android.com/apk/res-auto"
    android:id="@+id/map"
    android:name="com.google.android.gms.maps.SupportMapFragment"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    map:cameraTargetLat="35"
    map:cameraTargetLng="139"
    map:cameraZoom="7"
    map:mapType="hybrid" />
2.「Ctrl+Shift+F」を押し、コードをフォーマッティング。
3.「Ctrl+S」を押し、ファイルを保存。



【手順4】
1.「src/com/example/androidsample34_016/MainActivity.java」は以下の通り。
package com.example.androidsample34_016;

import android.os.Bundle;
import android.support.v4.app.FragmentActivity;

import com.example.androidsample34_001.R;
import com.google.android.gms.maps.GoogleMap;
import com.google.android.gms.maps.SupportMapFragment;
import com.google.android.gms.maps.model.LatLng;
import com.google.android.gms.maps.model.MarkerOptions;

public class MainActivity extends FragmentActivity {
    private static final LatLng JAPAN = new LatLng(35, 139);

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

    private void initMap() {
        GoogleMap googleMap = ((SupportMapFragment) getSupportFragmentManager().findFragmentById(R.id.map)).getMap();
        googleMap.addMarker(new MarkerOptions().position(JAPAN).title("マーカー"));
    }
}
2.「Ctrl+Shift+F」を押し、コードをフォーマッティング。
3.「Ctrl+S」を押し、ファイルを保存。



【手順5】
1.「Androidプロジェクトの作成・実行方法(バージョン別一覧)」のAndroidプロジェクトの実行手順で、実行。
※エミュレーターでは「Google Play services SDK」が上手く動かないみたいで、実機で実行する必要があるみたいです。



【手順6】
1.以下の様に表示されれば成功です。

































































以上です。

GoogleMapV2InitialCameraZoom

【目的】
AndroidでGoogleMapのカメラの初期ズームを指定します
※API12より前で、SupportMapFragmentを使用するバージョン。



【準備】
1.「Google Play services SDKをワークスペースにインポートする方法」で「Google Play services SDK」をワークスペースにインポートしておきます。
2.「Google APIsのGoogle Maps Android API v2のAPIキーを取得する方法」の手順で、「Google Maps Android API v2」のAPIキーを取得しておきます。
※APIキーの取得に指定するパッケージ名は「com.example.androidsample34_015」です。



【手順1】
1.「Androidプロジェクトの作成・実行方法(バージョン別一覧)」のAndroidプロジェクトの作成手順で、「AndroidSample34-015-GoogleMapV2InitialCameraZoom」といプロジェクトを作成。
※プロジェクトの設定は以下の通り。
※他の項目は任意。
項目名 項目に設定する値
アプリケーション名(Application Name) com.example.androidsample34_015
プロジェクト名(Project Name) AndroidSample34-015-GoogleMapV2InitialCameraZoom
パッケージ名(Package Name) com.example.androidsample34_015
Build SDK API 8
Minimum Required SDK API 8



【手順2】
1.「AndroidManifest.xml」は以下の通り。
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.androidsample34_015"
    android:versionCode="1"
    android:versionName="1.0" >

    <uses-sdk
        android:minSdkVersion="8"
        android:targetSdkVersion="8" />

    <permission
        android:name="com.example.androidsample34_015.permission.MAPS_RECEIVE"
        android:protectionLevel="signature" />

    <uses-permission android:name="com.example.androidsample34_015.permission.MAPS_RECEIVE" />
    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
    <uses-permission android:name="android.permission.INTERNET" />
    <uses-permission android:name="com.google.android.providers.gsf.permission.READ_GSERVICES" />
    <!-- External storage for caching. -->
    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
    <!-- My Location -->
    <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
    <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
    <!-- Maps API needs OpenGL ES 2.0. -->
    <uses-feature
        android:glEsVersion="0x00020000"
        android:required="true" />

    <application
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name"
        android:theme="@style/AppTheme" >
        <meta-data
            android:name="com.google.android.maps.v2.API_KEY"
            android:value="YOUR_OWN_KEY" />

        <activity
            android:name="com.example.androidsample34_015.MainActivity"
            android:label="@string/title_activity_main" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

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

</manifest>
2.「YOUR_OWN_KEY」を【準備】で取得しておいた、APIキーに変更。
3.「Ctrl+Shift+F」を押し、コードをフォーマッティング。
4.「Ctrl+S」を押し、ファイルを保存。



【手順3】
1.「res/layout/activity_main.xml」は以下の通り。
<fragment xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:map="http://schemas.android.com/apk/res-auto"
    android:id="@+id/map"
    android:name="com.google.android.gms.maps.SupportMapFragment"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    map:cameraTargetLat="35"
    map:cameraTargetLng="139"
    map:cameraZoom="7" />
2.「Ctrl+Shift+F」を押し、コードをフォーマッティング。
3.「Ctrl+S」を押し、ファイルを保存。



【手順4】
1.「src/com/example/androidsample34_015/MainActivity.java」は以下の通り。
package com.example.androidsample34_015;

import android.os.Bundle;
import android.support.v4.app.FragmentActivity;

import com.google.android.gms.maps.GoogleMap;
import com.google.android.gms.maps.SupportMapFragment;
import com.google.android.gms.maps.model.LatLng;
import com.google.android.gms.maps.model.MarkerOptions;

public class MainActivity extends FragmentActivity {
    private static final LatLng JAPAN = new LatLng(35, 139);

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

    private void initMap() {
        GoogleMap googleMap = ((SupportMapFragment) getSupportFragmentManager().findFragmentById(R.id.map)).getMap();
        googleMap.addMarker(new MarkerOptions().position(JAPAN).title("マーカー"));
    }
}
2.「Ctrl+Shift+F」を押し、コードをフォーマッティング。
3.「Ctrl+S」を押し、ファイルを保存。



【手順5】
1.「Androidプロジェクトの作成・実行方法(バージョン別一覧)」のAndroidプロジェクトの実行手順で、実行。
※エミュレーターでは「Google Play services SDK」が上手く動かないみたいで、実機で実行する必要があるみたいです。



【手順6】
1.以下の様に表示されれば成功です。

































































以上です。

GoogleMapV2InitialPosition

【目的】
AndroidでGoogleMapのカメラの初期位置を指定します
※API12より前で、SupportMapFragmentを使用するバージョン。



【準備】
1.「Google Play services SDKをワークスペースにインポートする方法」で「Google Play services SDK」をワークスペースにインポートしておきます。
2.「Google APIsのGoogle Maps Android API v2のAPIキーを取得する方法」の手順で、「Google Maps Android API v2」のAPIキーを取得しておきます。
※APIキーの取得に指定するパッケージ名は「com.example.androidsample34_014」です。



【手順1】
1.「Androidプロジェクトの作成・実行方法(バージョン別一覧)」のAndroidプロジェクトの作成手順で、「AndroidSample34-014-GoogleMapV2InitialPosition」といプロジェクトを作成。
※プロジェクトの設定は以下の通り。
※他の項目は任意。
項目名 項目に設定する値
アプリケーション名(Application Name) com.example.androidsample34_014
プロジェクト名(Project Name) AndroidSample34-014-GoogleMapV2InitialPosition
パッケージ名(Package Name) com.example.androidsample34_014
Build SDK API 8
Minimum Required SDK API 8



【手順2】
1.「AndroidManifest.xml」は以下の通り。
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.androidsample34_014"
    android:versionCode="1"
    android:versionName="1.0" >

    <uses-sdk
        android:minSdkVersion="8"
        android:targetSdkVersion="8" />

    <permission
        android:name="com.example.androidsample34_014.permission.MAPS_RECEIVE"
        android:protectionLevel="signature" />

    <uses-permission android:name="com.example.androidsample34_014.permission.MAPS_RECEIVE" />
    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
    <uses-permission android:name="android.permission.INTERNET" />
    <uses-permission android:name="com.google.android.providers.gsf.permission.READ_GSERVICES" />
    <!-- External storage for caching. -->
    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
    <!-- My Location -->
    <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
    <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
    <!-- Maps API needs OpenGL ES 2.0. -->
    <uses-feature
        android:glEsVersion="0x00020000"
        android:required="true" />

    <application
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name"
        android:theme="@style/AppTheme" >
        <meta-data
            android:name="com.google.android.maps.v2.API_KEY"
            android:value="YOUR_OWN_KEY" />

        <activity
            android:name="com.example.androidsample34_014.MainActivity"
            android:label="@string/title_activity_main" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

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

</manifest>
2.「YOUR_OWN_KEY」を【準備】で取得しておいた、APIキーに変更。
3.「Ctrl+Shift+F」を押し、コードをフォーマッティング。
4.「Ctrl+S」を押し、ファイルを保存。



【手順3】
1.「res/layout/activity_main.xml」は以下の通り。
<fragment xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:map="http://schemas.android.com/apk/res-auto"
    android:id="@+id/map"
    android:name="com.google.android.gms.maps.SupportMapFragment"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    map:cameraTargetLat="35"
    map:cameraTargetLng="139" />
2.「Ctrl+Shift+F」を押し、コードをフォーマッティング。
3.「Ctrl+S」を押し、ファイルを保存。



【手順4】
1.「src/com/example/androidsample34_014/MainActivity.java」は以下の通り。
package com.example.androidsample34_014;

import android.os.Bundle;
import android.support.v4.app.FragmentActivity;

import com.google.android.gms.maps.GoogleMap;
import com.google.android.gms.maps.SupportMapFragment;
import com.google.android.gms.maps.model.LatLng;
import com.google.android.gms.maps.model.MarkerOptions;

public class MainActivity extends FragmentActivity {
    private static final LatLng JAPAN = new LatLng(35, 139);

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

    private void initMap() {
        GoogleMap googleMap = ((SupportMapFragment) getSupportFragmentManager().findFragmentById(R.id.map)).getMap();
        googleMap.addMarker(new MarkerOptions().position(JAPAN).title("マーカー"));
    }
}
2.「Ctrl+Shift+F」を押し、コードをフォーマッティング。
3.「Ctrl+S」を押し、ファイルを保存。



【手順5】
1.「Androidプロジェクトの作成・実行方法(バージョン別一覧)」のAndroidプロジェクトの実行手順で、実行。
※エミュレーターでは「Google Play services SDK」が上手く動かないみたいで、実機で実行する必要があるみたいです。



【手順6】
1.以下の様に表示されれば成功です。

































































以上です。

GoogleMapV2CameraZoom

【目的】
AndroidでGoogleMapのカメラをプログラムからズームします。
※API12より前で、SupportMapFragmentを使用するバージョン。



【準備】
1.「Google Play services SDKをワークスペースにインポートする方法」で「Google Play services SDK」をワークスペースにインポートしておきます。
2.「Google APIsのGoogle Maps Android API v2のAPIキーを取得する方法」の手順で、「Google Maps Android API v2」のAPIキーを取得しておきます。
※APIキーの取得に指定するパッケージ名は「com.example.androidsample34_013」です。



【手順1】
1.「Androidプロジェクトの作成・実行方法(バージョン別一覧)」のAndroidプロジェクトの作成手順で、「AndroidSample34-013-GoogleMapV2CameraZoom」といプロジェクトを作成。
※プロジェクトの設定は以下の通り。
※他の項目は任意。
項目名 項目に設定する値
アプリケーション名(Application Name) com.example.androidsample34_013
プロジェクト名(Project Name) AndroidSample34-013-GoogleMapV2CameraZoom
パッケージ名(Package Name) com.example.androidsample34_013
Build SDK API 8
Minimum Required SDK API 8



【手順2】
1.「AndroidManifest.xml」は以下の通り。
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.androidsample34_013"
    android:versionCode="1"
    android:versionName="1.0" >

    <uses-sdk
        android:minSdkVersion="8"
        android:targetSdkVersion="8" />

    <permission
        android:name="com.example.androidsample34_013.permission.MAPS_RECEIVE"
        android:protectionLevel="signature" />

    <uses-permission android:name="com.example.androidsample34_013.permission.MAPS_RECEIVE" />
    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
    <uses-permission android:name="android.permission.INTERNET" />
    <uses-permission android:name="com.google.android.providers.gsf.permission.READ_GSERVICES" />
    <!-- External storage for caching. -->
    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
    <!-- My Location -->
    <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
    <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
    <!-- Maps API needs OpenGL ES 2.0. -->
    <uses-feature
        android:glEsVersion="0x00020000"
        android:required="true" />

    <application
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name"
        android:theme="@style/AppTheme" >
        <meta-data
            android:name="com.google.android.maps.v2.API_KEY"
            android:value="YOUR_OWN_KEY" />

        <activity
            android:name="com.example.androidsample34_013.MainActivity"
            android:label="@string/title_activity_main" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

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

</manifest>
2.「YOUR_OWN_KEY」を【準備】で取得しておいた、APIキーに変更。
3.「Ctrl+Shift+F」を押し、コードをフォーマッティング。
4.「Ctrl+S」を押し、ファイルを保存。



【手順3】
1.「res/layout/activity_main.xml」は以下の通り。
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <fragment
        android:id="@+id/map"
        android:name="com.google.android.gms.maps.SupportMapFragment"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:orientation="horizontal" >

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:onClick="onClickMoveZoomOut"
            android:text="Move(-)" />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:onClick="onClickMoveZoomIn"
            android:text="Move(+)" />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:onClick="onClickAnimateZoomOut"
            android:text="Animate(-)" />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:onClick="onClickAnimateZoomIn"
            android:text="Animate(+)" />
    </LinearLayout>

</LinearLayout>
2.「Ctrl+Shift+F」を押し、コードをフォーマッティング。
3.「Ctrl+S」を押し、ファイルを保存。



【手順4】
1.「src/com/example/androidsample34_013/MainActivity.java」は以下の通り。
package com.example.androidsample34_013;

import android.os.Bundle;
import android.support.v4.app.FragmentActivity;
import android.view.View;

import com.example.androidsample34_013.R;
import com.google.android.gms.maps.CameraUpdateFactory;
import com.google.android.gms.maps.GoogleMap;
import com.google.android.gms.maps.SupportMapFragment;
import com.google.android.gms.maps.model.LatLng;
import com.google.android.gms.maps.model.MarkerOptions;

public class MainActivity extends FragmentActivity {
    private GoogleMap googleMap;

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

        initMap();
    }

    private void initMap() {
        this.googleMap = ((SupportMapFragment) getSupportFragmentManager().findFragmentById(R.id.map)).getMap();
        this.googleMap.addMarker(new MarkerOptions().position(new LatLng(0, 0)).title("マーカー"));
    }

    public void onClickMoveZoomOut(View view) {
        googleMap.moveCamera(CameraUpdateFactory.zoomOut());
    }

    public void onClickMoveZoomIn(View view) {
        googleMap.moveCamera(CameraUpdateFactory.zoomIn());
    }

    public void onClickAnimateZoomOut(View view) {
        googleMap.animateCamera(CameraUpdateFactory.zoomOut());
    }

    public void onClickAnimateZoomIn(View view) {
        googleMap.animateCamera(CameraUpdateFactory.zoomIn());
    }
}
2.「Ctrl+Shift+F」を押し、コードをフォーマッティング。
3.「Ctrl+S」を押し、ファイルを保存。



【手順5】
1.「Androidプロジェクトの作成・実行方法(バージョン別一覧)」のAndroidプロジェクトの実行手順で、実行。
※エミュレーターでは「Google Play services SDK」が上手く動かないみたいで、実機で実行する必要があるみたいです。



【手順6】
1.以下の様に表示されれば成功です。


































































以上です。

可変レイアウト

【目的】
Twitter Bootstrap2.3.1可変レイアウトを指定します。



【準備】
1.「Twitter Bootstrap2.3.1の使用方法」の手順の通り、Twitter Bootstrapを配置しておきます。



【手順1】
1.HTMLファイル「index.html」(任意)を作成。
2.「index.html」を以下の様に入力。
<!DOCTYPE html>
<html>
    <head>
        <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" />
        <link href="bootstrap/css/bootstrap-responsive.min.css" rel="stylesheet" />
    </head>
    <body>
        <div class="container-fluid">
            <div class="row-fluid">
                <div class="span2" style="background-color:#99FFFF; text-align:center;">
                    1<br />
                    2<br />
                    3<br />
                    4<br />
                    5<br />
                    6<br />
                    7<br />
                    8<br />
                    9<br />
                    10<br />
                </div>
                <div class="span10" style="background-color:#FF99FF; text-align:center;">
                    1<br />
                    2<br />
                    3<br />
                    4<br />
                    5<br />
                    6<br />
                    7<br />
                    8<br />
                    9<br />
                    10<br />
                </div>
            </div>
        </div>

        <script src="http://code.jquery.com/jquery.js"></script>
        <script src="bootstrap/js/bootstrap.min.js"></script>
    </body>
</html>



【手順2】
1.ブラウザで「index.html」を開き、以下の様に表示されれば成功です。












































以上です。

固定レイアウト

【目的】
Twitter Bootstrap2.3.1固定レイアウトを指定します。



【準備】
1.「Twitter Bootstrap2.3.1の使用方法」の手順の通り、Twitter Bootstrapを配置しておきます。



【手順1】
1.HTMLファイル「index.html」(任意)を作成。
2.「index.html」を以下の様に入力。
<!DOCTYPE html>
<html>
    <head>
        <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" />
        <link href="bootstrap/css/bootstrap-responsive.min.css" rel="stylesheet" />
    </head>
    <body>
        <div class="container" style="background-color:#FFFF99;">
            1<br />
            2<br />
            3<br />
            4<br />
            5<br />
            6<br />
            7<br />
            8<br />
            9<br />
            10<br />
        </div>

        <script src="http://code.jquery.com/jquery.js"></script>
        <script src="bootstrap/js/bootstrap.min.js"></script>
    </body>
</html>



【手順2】
1.ブラウザで「index.html」を開き、以下の様に表示されれば成功です。














































以上です。

可変グリッド(入れ子・レスポンシブ対応)

【目的】
Twitter Bootstrap2.3.1で可変グリッドを入れ子にします。
※レスポンシブ対応バージョンです。



【準備】
1.「Twitter Bootstrap2.3.1の使用方法」の手順の通り、Twitter Bootstrapを配置しておきます。



【手順1】
1.HTMLファイル「index.html」(任意)を作成。
2.「index.html」を以下の様に入力。
<!DOCTYPE html>
<html>
    <head>
        <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" />
        <link href="bootstrap/css/bootstrap-responsive.min.css" rel="stylesheet" />
    </head>
    <body>
        <div class="row-fluid">
            <div class="span6" style="background-color:#FFFF99; margin-top: 10px;">
                <div class="row-fluid">
                    <div class="span6" style="background-color:#99FFFF; margin-top: 10px; margin-bottom: 10px; text-align: center;">6</div>
                    <div class="span6" style="background-color:#99FFFF; margin-top: 10px; margin-bottom: 10px; text-align: center;">6</div>
                </div>
            </div>
            <div class="span6" style="background-color:#FFFF99; margin-top: 10px;">
                <div class="row-fluid">
                    <div class="span2" style="background-color:#FF99FF; margin-top: 10px; margin-bottom: 10px; text-align: center;">2</div>
                    <div class="span4" style="background-color:#FF99FF; margin-top: 10px; margin-bottom: 10px; text-align: center;">4</div>
                    <div class="span6" style="background-color:#FF99FF; margin-top: 10px; margin-bottom: 10px; text-align: center;">6</div>
                </div>
            </div>
        </div>


        <script src="http://code.jquery.com/jquery.js"></script>
        <script src="bootstrap/js/bootstrap.min.js"></script>
    </body>
</html>



【手順2】
1.ブラウザで「index.html」を開き、以下の様に表示されれば成功です。











































以上です。

可変グリッド(オフセット・レスポンシブ対応)

【目的】
Twitter Bootstrap2.3.1で可変グリッドでオフセットを指定します。
※レスポンシブ対応バージョンです。



【準備】
1.「Twitter Bootstrap2.3.1の使用方法」の手順の通り、Twitter Bootstrapを配置しておきます。



【手順1】
1.HTMLファイル「index.html」(任意)を作成。
2.「index.html」を以下の様に入力。
<!DOCTYPE html>
<html>
    <head>
        <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" />
        <link href="bootstrap/css/bootstrap-responsive.min.css" rel="stylesheet" />
    </head>
    <body>
        <div class="row-fluid">
            <div class="span1" style="background-color:#33FFFF; margin-top: 10px; text-align: center;">1</div>
            <div class="span1" style="background-color:#33FFFF; margin-top: 10px; text-align: center;">1</div>
            <div class="span1" style="background-color:#33FFFF; margin-top: 10px; text-align: center;">1</div>
            <div class="span1" style="background-color:#33FFFF; margin-top: 10px; text-align: center;">1</div>
            <div class="span1" style="background-color:#33FFFF; margin-top: 10px; text-align: center;">1</div>
            <div class="span1" style="background-color:#33FFFF; margin-top: 10px; text-align: center;">1</div>
            <div class="span1" style="background-color:#33FFFF; margin-top: 10px; text-align: center;">1</div>
            <div class="span1" style="background-color:#33FFFF; margin-top: 10px; text-align: center;">1</div>
            <div class="span1" style="background-color:#33FFFF; margin-top: 10px; text-align: center;">1</div>
            <div class="span1" style="background-color:#33FFFF; margin-top: 10px; text-align: center;">1</div>
            <div class="span1" style="background-color:#33FFFF; margin-top: 10px; text-align: center;">1</div>
            <div class="span1" style="background-color:#33FFFF; margin-top: 10px; text-align: center;">1</div>
        </div>

        <div class="row-fluid">
            <div class="span1 offset1" style="background-color:#FF33FF; margin-top: 10px; text-align: center;">1</div>
            <div class="span1 offset1" style="background-color:#FF33FF; margin-top: 10px; text-align: center;">1</div>
            <div class="span1 offset1" style="background-color:#FF33FF; margin-top: 10px; text-align: center;">1</div>
            <div class="span1 offset1" style="background-color:#FF33FF; margin-top: 10px; text-align: center;">1</div>
            <div class="span1 offset1" style="background-color:#FF33FF; margin-top: 10px; text-align: center;">1</div>
            <div class="span1 offset1" style="background-color:#FF33FF; margin-top: 10px; text-align: center;">1</div>
        </div>

        <div class="row-fluid">
            <div class="span2 offset2" style="background-color:#FFFF33; margin-top: 10px; text-align: center;">2</div>
            <div class="span2 offset2" style="background-color:#FFFF33; margin-top: 10px; text-align: center;">2</div>
            <div class="span2 offset2" style="background-color:#FFFF33; margin-top: 10px; text-align: center;">2</div>
        </div>

        <div class="row-fluid">
            <div class="span3 offset3" style="background-color:#99FFFF; margin-top: 10px; text-align: center;">3</div>
            <div class="span3 offset3" style="background-color:#99FFFF; margin-top: 10px; text-align: center;">3</div>
        </div>

        <div class="row-fluid">
            <div class="span6 offset6" style="background-color:#FF99FF; margin-top: 10px; text-align: center;">6</div>
        </div>

        <script src="http://code.jquery.com/jquery.js"></script>
        <script src="bootstrap/js/bootstrap.min.js"></script>
    </body>
</html>



【手順2】
1.ブラウザで「index.html」を開き、以下の様に表示されれば成功です。












































以上です。

可変グリッド(レスポンシブ対応)

【目的】
Twitter Bootstrap2.3.1で可変グリッドを指定します。
※レスポンシブ対応バージョンです。



【準備】
1.「Twitter Bootstrap2.3.1の使用方法」の手順の通り、Twitter Bootstrapを配置しておきます。



【手順1】
1.HTMLファイル「index.html」(任意)を作成。
2.「index.html」を以下の様に入力。
<!DOCTYPE html>
<html>
    <head>
        <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" />
        <link href="bootstrap/css/bootstrap-responsive.min.css" rel="stylesheet" />
    </head>
    <body>
        <div class="row-fluid">
            <div class="span1" style="background-color:#33FFFF; margin-top: 10px; text-align: center;">1</div>
            <div class="span1" style="background-color:#33FFFF; margin-top: 10px; text-align: center;">1</div>
            <div class="span1" style="background-color:#33FFFF; margin-top: 10px; text-align: center;">1</div>
            <div class="span1" style="background-color:#33FFFF; margin-top: 10px; text-align: center;">1</div>
            <div class="span1" style="background-color:#33FFFF; margin-top: 10px; text-align: center;">1</div>
            <div class="span1" style="background-color:#33FFFF; margin-top: 10px; text-align: center;">1</div>
            <div class="span1" style="background-color:#33FFFF; margin-top: 10px; text-align: center;">1</div>
            <div class="span1" style="background-color:#33FFFF; margin-top: 10px; text-align: center;">1</div>
            <div class="span1" style="background-color:#33FFFF; margin-top: 10px; text-align: center;">1</div>
            <div class="span1" style="background-color:#33FFFF; margin-top: 10px; text-align: center;">1</div>
            <div class="span1" style="background-color:#33FFFF; margin-top: 10px; text-align: center;">1</div>
            <div class="span1" style="background-color:#33FFFF; margin-top: 10px; text-align: center;">1</div>
        </div>

        <div class="row-fluid">
            <div class="span2" style="background-color:#FF33FF; margin-top: 10px; text-align: center;">2</div>
            <div class="span2" style="background-color:#FF33FF; margin-top: 10px; text-align: center;">2</div>
            <div class="span2" style="background-color:#FF33FF; margin-top: 10px; text-align: center;">2</div>
            <div class="span2" style="background-color:#FF33FF; margin-top: 10px; text-align: center;">2</div>
            <div class="span2" style="background-color:#FF33FF; margin-top: 10px; text-align: center;">2</div>
            <div class="span2" style="background-color:#FF33FF; margin-top: 10px; text-align: center;">2</div>
        </div>

        <div class="row-fluid">
            <div class="span3" style="background-color:#FFFF33; margin-top: 10px; text-align: center;">3</div>
            <div class="span3" style="background-color:#FFFF33; margin-top: 10px; text-align: center;">3</div>
            <div class="span3" style="background-color:#FFFF33; margin-top: 10px; text-align: center;">3</div>
            <div class="span3" style="background-color:#FFFF33; margin-top: 10px; text-align: center;">3</div>
        </div>

        <div class="row-fluid">
            <div class="span4" style="background-color:#99FFFF; margin-top: 10px; text-align: center;">4</div>
            <div class="span4" style="background-color:#99FFFF; margin-top: 10px; text-align: center;">4</div>
            <div class="span4" style="background-color:#99FFFF; margin-top: 10px; text-align: center;">4</div>
        </div>

        <div class="row-fluid">
            <div class="span6" style="background-color:#FF99FF; margin-top: 10px; text-align: center;">6</div>
            <div class="span6" style="background-color:#FF99FF; margin-top: 10px; text-align: center;">6</div>
        </div>

        <div class="row-fluid">
            <div class="span12" style="background-color:#FFFF99; margin-top: 10px; text-align: center;">12</div>
        </div>

        <script src="http://code.jquery.com/jquery.js"></script>
        <script src="bootstrap/js/bootstrap.min.js"></script>
    </body>
</html>



【手順2】
1.ブラウザで「index.html」を開き、以下の様に表示されれば成功です。











































以上です。

グリッド(入れ子・レスポンシブ対応)

【目的】
Twitter Bootstrap2.3.1でグリッドを入れ子にします。
※レスポンシブ対応バージョンです。



【準備】
1.「Twitter Bootstrap2.3.1の使用方法」の手順の通り、Twitter Bootstrapを配置しておきます。



【手順1】
1.HTMLファイル「index.html」(任意)を作成。
2.「index.html」を以下の様に入力。
<!DOCTYPE html>
<html>
    <head>
        <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" />
        <link href="bootstrap/css/bootstrap-responsive.min.css" rel="stylesheet" />
    </head>
    <body>
        <div class="row">
            <div class="span6" style="background-color:#FFFF99; margin-top: 10px;">
                <div class="row">
                    <div class="span3" style="background-color:#99FFFF; margin-top: 10px; margin-bottom: 10px; text-align: center;">3</div>
                    <div class="span3" style="background-color:#99FFFF; margin-top: 10px; margin-bottom: 10px; text-align: center;">3</div>
                </div>
            </div>
            <div class="span6" style="background-color:#FFFF99; margin-top: 10px;">
                <div class="row">
                    <div class="span1" style="background-color:#FF99FF; margin-top: 10px; margin-bottom: 10px; text-align: center;">1</div>
                    <div class="span2" style="background-color:#FF99FF; margin-top: 10px; margin-bottom: 10px; text-align: center;">2</div>
                    <div class="span3" style="background-color:#FF99FF; margin-top: 10px; margin-bottom: 10px; text-align: center;">3</div>
                </div>
            </div>
        </div>


        <script src="http://code.jquery.com/jquery.js"></script>
        <script src="bootstrap/js/bootstrap.min.js"></script>
    </body>
</html>



【手順2】
1.ブラウザで「index.html」を開き、以下の様に表示されれば成功です。









































以上です。

グリッド(オフセット・レスポンシブ対応)

【目的】
Twitter Bootstrap2.3.1でグリッドのオフセットを指定します。
※レスポンシブ対応バージョンです。



【準備】
1.「Twitter Bootstrap2.3.1の使用方法」の手順の通り、Twitter Bootstrapを配置しておきます。



【手順1】
1.HTMLファイル「index.html」(任意)を作成。
2.「index.html」を以下の様に入力。
<!DOCTYPE html>
<html>
    <head>
        <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" />
        <link href="bootstrap/css/bootstrap-responsive.min.css" rel="stylesheet" />
    </head>
    <body>
        <div class="row">
            <div class="span1" style="background-color:#33FFFF; margin-top: 10px; text-align: center;">1</div>
            <div class="span1" style="background-color:#33FFFF; margin-top: 10px; text-align: center;">1</div>
            <div class="span1" style="background-color:#33FFFF; margin-top: 10px; text-align: center;">1</div>
            <div class="span1" style="background-color:#33FFFF; margin-top: 10px; text-align: center;">1</div>
            <div class="span1" style="background-color:#33FFFF; margin-top: 10px; text-align: center;">1</div>
            <div class="span1" style="background-color:#33FFFF; margin-top: 10px; text-align: center;">1</div>
            <div class="span1" style="background-color:#33FFFF; margin-top: 10px; text-align: center;">1</div>
            <div class="span1" style="background-color:#33FFFF; margin-top: 10px; text-align: center;">1</div>
            <div class="span1" style="background-color:#33FFFF; margin-top: 10px; text-align: center;">1</div>
            <div class="span1" style="background-color:#33FFFF; margin-top: 10px; text-align: center;">1</div>
            <div class="span1" style="background-color:#33FFFF; margin-top: 10px; text-align: center;">1</div>
            <div class="span1" style="background-color:#33FFFF; margin-top: 10px; text-align: center;">1</div>
        </div>

        <div class="row">
            <div class="span1 offset1" style="background-color:#FF33FF; margin-top: 10px; text-align: center;">1</div>
            <div class="span1 offset1" style="background-color:#FF33FF; margin-top: 10px; text-align: center;">1</div>
            <div class="span1 offset1" style="background-color:#FF33FF; margin-top: 10px; text-align: center;">1</div>
            <div class="span1 offset1" style="background-color:#FF33FF; margin-top: 10px; text-align: center;">1</div>
            <div class="span1 offset1" style="background-color:#FF33FF; margin-top: 10px; text-align: center;">1</div>
            <div class="span1 offset1" style="background-color:#FF33FF; margin-top: 10px; text-align: center;">1</div>
        </div>

        <div class="row">
            <div class="span2 offset2" style="background-color:#FFFF33; margin-top: 10px; text-align: center;">2</div>
            <div class="span2 offset2" style="background-color:#FFFF33; margin-top: 10px; text-align: center;">2</div>
            <div class="span2 offset2" style="background-color:#FFFF33; margin-top: 10px; text-align: center;">2</div>
        </div>

        <div class="row">
            <div class="span3 offset3" style="background-color:#99FFFF; margin-top: 10px; text-align: center;">3</div>
            <div class="span3 offset3" style="background-color:#99FFFF; margin-top: 10px; text-align: center;">3</div>
        </div>

        <div class="row">
            <div class="span6 offset6" style="background-color:#FF99FF; margin-top: 10px; text-align: center;">6</div>
        </div>

        <script src="http://code.jquery.com/jquery.js"></script>
        <script src="bootstrap/js/bootstrap.min.js"></script>
    </body>
</html>



【手順2】
1.ブラウザで「index.html」を開き、以下の様に表示されれば成功です。





































以上です。

グリッド(レスポンシブ対応)

【目的】
Twitter Bootstrap2.3.1でグリッドを指定します。
※レスポンシブ対応バージョンです。



【準備】
1.「Twitter Bootstrap2.3.1の使用方法」の手順の通り、Twitter Bootstrapを配置しておきます。



【手順1】
1.HTMLファイル「index.html」(任意)を作成。
2.「index.html」を以下の様に入力。
<!DOCTYPE html>
<html>
    <head>
        <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" />
        <link href="bootstrap/css/bootstrap-responsive.min.css" rel="stylesheet" />
    </head>
    <body>
        <div class="row">
            <div class="span1" style="background-color:#33FFFF; margin-top: 10px; text-align: center;">1</div>
            <div class="span1" style="background-color:#33FFFF; margin-top: 10px; text-align: center;">1</div>
            <div class="span1" style="background-color:#33FFFF; margin-top: 10px; text-align: center;">1</div>
            <div class="span1" style="background-color:#33FFFF; margin-top: 10px; text-align: center;">1</div>
            <div class="span1" style="background-color:#33FFFF; margin-top: 10px; text-align: center;">1</div>
            <div class="span1" style="background-color:#33FFFF; margin-top: 10px; text-align: center;">1</div>
            <div class="span1" style="background-color:#33FFFF; margin-top: 10px; text-align: center;">1</div>
            <div class="span1" style="background-color:#33FFFF; margin-top: 10px; text-align: center;">1</div>
            <div class="span1" style="background-color:#33FFFF; margin-top: 10px; text-align: center;">1</div>
            <div class="span1" style="background-color:#33FFFF; margin-top: 10px; text-align: center;">1</div>
            <div class="span1" style="background-color:#33FFFF; margin-top: 10px; text-align: center;">1</div>
            <div class="span1" style="background-color:#33FFFF; margin-top: 10px; text-align: center;">1</div>
        </div>

        <div class="row">
            <div class="span2" style="background-color:#FF33FF; margin-top: 10px; text-align: center;">2</div>
            <div class="span2" style="background-color:#FF33FF; margin-top: 10px; text-align: center;">2</div>
            <div class="span2" style="background-color:#FF33FF; margin-top: 10px; text-align: center;">2</div>
            <div class="span2" style="background-color:#FF33FF; margin-top: 10px; text-align: center;">2</div>
            <div class="span2" style="background-color:#FF33FF; margin-top: 10px; text-align: center;">2</div>
            <div class="span2" style="background-color:#FF33FF; margin-top: 10px; text-align: center;">2</div>
        </div>

        <div class="row">
            <div class="span3" style="background-color:#FFFF33; margin-top: 10px; text-align: center;">3</div>
            <div class="span3" style="background-color:#FFFF33; margin-top: 10px; text-align: center;">3</div>
            <div class="span3" style="background-color:#FFFF33; margin-top: 10px; text-align: center;">3</div>
            <div class="span3" style="background-color:#FFFF33; margin-top: 10px; text-align: center;">3</div>
        </div>

        <div class="row">
            <div class="span4" style="background-color:#99FFFF; margin-top: 10px; text-align: center;">4</div>
            <div class="span4" style="background-color:#99FFFF; margin-top: 10px; text-align: center;">4</div>
            <div class="span4" style="background-color:#99FFFF; margin-top: 10px; text-align: center;">4</div>
        </div>

        <div class="row">
            <div class="span6" style="background-color:#FF99FF; margin-top: 10px; text-align: center;">6</div>
            <div class="span6" style="background-color:#FF99FF; margin-top: 10px; text-align: center;">6</div>
        </div>

        <div class="row">
            <div class="span12" style="background-color:#FFFF99; margin-top: 10px; text-align: center;">12</div>
        </div>

        <script src="http://code.jquery.com/jquery.js"></script>
        <script src="bootstrap/js/bootstrap.min.js"></script>
    </body>
</html>



【手順2】
1.ブラウザで「index.html」を開き、以下の様に表示されれば成功です。
















































以上です。

2013年5月17日金曜日

Google Cloud Messagingのサンプルのgcm-demo-clientの登録解除方法

【目的】
Google Cloud Messagingのサンプルのgcm-demo-clientを実行・登録後、その登録を解除できるようにします。



【準備】
1.「Google Cloud Messagingのサンプルのgcm-demo-serverのEclipseへの取り込み方法」の手順で、「gcm-demo-server」を取り込んで起動しておきます。
2.「Google Cloud Messagingのサンプルのgcm-demo-clientのEclipseへの取り込み方法」の手順で、「gcm-demo-client」を実行し「gcm-demo-server」に端末を登録しておきます。



【手順1】
1.「gcm-demo-client」の「src/com/google/android/gcm/demo/app」の「DemoActivity.java」の118行目と125行目のコメントアウトを削除。
2.「Ctrl+S」を押し、ファイルを保存。




【手順2】
1.「gcm-demo-client」の「res/menu」の「options_menu.xml」の24行目と33行目のコメントアウトを削除。




【手順3】
1.ファイアウォールを一時停止にし「gcm-server」に外部から接続できるようにします。
※Windows7の場合:「Windowsファイアウォールを一時的に停止する方法(Windows7)
※WindowsXPの場合:「Windowsファイアウォールを一時的に停止する方法(WindowsXP)
2.「gcm-demo-client」を「Androidプロジェクトの作成・実行方法(バージョン別一覧)」のAndroidプロジェクトの実行手順で、実行。
※今回は実機で実行しました。
※端末はWIFIで[あたなのマシンのIPアドレス]に接続できる環境にある必要があります。
3.以下の様に【準備】で端末を「gcm-demo-server」に登録しているため、「Device is already registered on server.」と表示されます。




【手順4】
1.端末の「メニュー」ボタンを押す。
2.「Unregister」を押す。




【手順5】
1.以下の様に「From GCM:device successfully unregistered!」と表示されれば、登録の解除は成功です。
1.「プロジェクトをワークスペースにコピー」を選択。
2.「完了」ボタンをクリック。




【手順6】
1.ブラウザで以下のURLにアクセスします。
http://localhost:8080/gcm-demo/home
2.以下の様に「No devices registerd!」と表示されています。
3.ファイアウォールを一時停止を元に戻しておきます。
※Windows7の場合:「Windowsファイアウォールの停止を元に戻す方法(Windows7)
※WindowsXPの場合:「Windowsファイアウォールの停止を元に戻す方法(WindowsXP)




以上です。

Google Cloud Messagingのサンプルのgcm-demo-clientのEclipseへの取り込み方法

【目的】
Google Cloud Messagingのサンプルのgcm-demo-clientをEclipseへの取り込みます。



【準備】
1.「Google Cloud Messagingのサンプルのgcm-demo-serverのEclipseへの取り込み方法」の手順で、「gcm-demo-server」を取り込んで起動しておきます。
2.「プロジェクトナンバーの確認方法」の手順で、「gcm-demo-server」に登録したAPIキーのプロジェクトナンバーを確認しておきます。



【手順1】
1.メニューから「ファイル」⇒「インポート」を選択。




【手順2】
1.「Android」⇒「Existing Android Code Into Workspace」を選択。
2.「次へ」ボタンをクリック。




【手順3】
1.「参照」ボタンをクリック。




【手順4】
1.「android-sdk-windows/extras/google/gcm/samples/gcm-demo-client」を選択。
2.「OK」ボタンをクリック。




【手順5】
1.「プロジェクトをワークスペースにコピー」を選択。
2.「完了」ボタンをクリック。




【手順6】
1.以下の様に「gcm-demo-client」が取り込まれます。




【手順7】
1.「gcm-demo-client」の「src/com/google/android/gcm/demo/app」の「CommonUtilities.java」を開く。
2.「SERVER_URL」の変数を「"http://[あたなのマシンのIPアドレス]:8080/gcm-demo"」に変更。
3.「SENDER_ID」の変数を【準備】で取得した「プロジェクトナンバー」に変更。
※本当はプロジェクトIDを登録し、そのIDを指定するのが必要かと思いますが、今回は「プロジェクトナンバー」で実行できました。




【手順8】
1.ファイアウォールを一時停止にし「gcm-server」に外部から接続できるようにします。
※Windows7の場合:「Windowsファイアウォールを一時的に停止する方法(Windows7)
※WindowsXPの場合:「Windowsファイアウォールを一時的に停止する方法(WindowsXP)
2.「gcm-demo-client」を「Androidプロジェクトの作成・実行方法(バージョン別一覧)」のAndroidプロジェクトの実行手順で、実行。
※今回は実機で実行しました。
※端末はWIFIで[あたなのマシンのIPアドレス]に接続できる環境にある必要があります。
3.以下の様に「From GCM:device successfully registered!」と表示されれば「gcm-server」への登録が成功です。




【手順9】
1.ブラウザで以下のURLにアクセスします。
http://localhost:8080/gcm-demo/home
2.以下の様に「1 device(s) registerd!」と表示されています。
3.「Send Message」ボタンをクリック。




【手順10】
1.以下の様に「Sent message to one device:」と表示されます。




【手順11】
1.以下の様に「From GCM:you got message!」と表示されれば、サーバからのメッセージ送信は成功です。
2.ファイアウォールを一時停止を元に戻しておきます。
※Windows7の場合:「Windowsファイアウォールの停止を元に戻す方法(Windows7)
※WindowsXPの場合:「Windowsファイアウォールの停止を元に戻す方法(WindowsXP)




以上です。

関連記事