ラベル PhoneGap の投稿を表示しています。 すべての投稿を表示
ラベル PhoneGap の投稿を表示しています。 すべての投稿を表示

2011年10月25日火曜日

PhoneGap + AndroidでjQuery Mobileを使ってみた

概要

PhoneGap + Androidについては↓こちら

AndroidでPhoneGapを使う際の手順メモ
http://ryooo321.blogspot.com/2011/10/phonegapandroid.html

今回は上記にjQuery Mobileを導入してみました。
jQuery Mobileとは、jQueryのプラグインとして動作するモバイルアプリのライブラリです。
こいつがすごいです！！
使ったことのない人は、下記ページのDemoを是非みてください。
jQuery Mobile
http://jquerymobile.com/

jQuery Mobile Demo
http://jquerymobile.com/demos/1.0rc2/


使い方で参考になるページは↓こちら
billboardtop100.net
http://billboardtop100.net/jquery-mobile/

またいつかこいつだけでじっくり使ってみた感想を書きたいです。


1. jQuery Mobileをダウンロード/解凍

↓こちらから「jquery.mobile-1.0rc2.zip」をダウンロードします。
http://jquerymobile.com/download/

解凍すると↓こんな感じです。




2. jqueryをダウンロード
↓こちらから1.6.2のMinifiedをダウンロードします。
http://docs.jquery.com/Downloading_jQuery



3. Android プロジェクト内に配置
www/css/jquery.mobile-1.0rc2.min.css
www/css/images/以下
www/js/jquery-1.6.2.min.js
www/js/jquery.mobile-1.0rc2.min.js
www/css/style.css (←中身は空でも構いません)

↓こんな感じです。

4. index.htmlを記載します。


<!DOCTYPE HTML>
<html>
<head>
<title>Multip6</title>
<meta charset="utf-8">
<link rel="stylesheet" href="css/style.css" type="text/css" media="all">
<link rel="stylesheet" href="css/jquery.mobile-1.0rc2.min.css" type="text/css" media="all">
<script type="text/javascript" charset="utf-8" src="js/phonegap-1.1.0.js"></script>
<script type="text/javascript" charset="utf-8" src="js/jquery-1.6.2.min.js"></script>
<script type="text/javascript" charset="utf-8" src="js/jquery.mobile-1.0rc2.min.js"></script>
</head>
<body>

<div data-role="page" id="top">
<div data-role="header" data-position="inline" >
<h1>SNS送信</h1>
</div>
<div data-role="content">
<div data-role="fieldcontain">
<label for="textarea">投稿内容:</label>
<div><textarea cols="100" rows="25" name="textarea" id="textarea"></textarea></div>
</div>
<div data-role="fieldcontain">
<label for="name">画像:</label>
<div><input type="text" name="name" id="name" value="" /></div>
</div>
<a href="#" data-role="button" data-theme="c">送信</a>
</div>
<ul data-role="listview" data-split-icon="gear" data-theme="d">
<li><a href="#">Twitter<span class="ui-li-aside">送信</span></a><a href="#tw" data-rel="dialog" data-transition="pop" data-theme="d">Twitter</a></li>
<li><a href="#">Facebook<span class="ui-li-aside">送信</span></a><a href="#tw" data-rel="dialog" data-transition="pop" data-theme="d">Facebook</a></li>
</ul>

</div>
<div data-role="footer" data-theme="d">
<h4>Multi post 6</h4>
</div>

<div data-role="page" id="tw">
<div data-role="header" data-theme="e">
<h1>Twitter 投稿内容</h1>
</div>
<div data-role="content" data-theme="d">
<div data-role="fieldcontain">
<label for="textarea">投稿内容:</label>
<div><textarea cols="100" rows="25" name="textarea" id="textarea"></textarea></div>
</div>
<div data-role="fieldcontain">
<label for="name">画像:</label>
<div><input type="text" name="name" id="name" value="" /></div>
</div>
<p><a href="#top" data-role="button" data-inline="true" data-icon="back">戻る</a></p> 
</div>
<div data-role="footer" data-theme="a">
<h4>Multi post 6</h4>
</div>
</div>

</body>
</html>


5. 実行
エミュで動かすと↓こんな感じです。
エミュなので若干重いですが、アニメーションするUIが簡単に作れました。



おおむねの開発はChromeでできるので、快適ですね。
投稿者 Unknown 時刻: 0 件のコメント:
ラベル: , ,

2011年10月24日月曜日

AndroidでPhoneGapを使う際の手順メモ

概要
androidアプリはjavaで作るのが基本ですが、PhoneGapを使えばhtml/css/jsで作ることができます。

何がよいかというと、
・iPhoneアプリやWebアプリへの(からの)移植が容易。
・ナレッジを持った技術者が容易に確保できる。
・jQueryなどの既存の多彩なライブラリ群を利用できる。
・html5 / CSS3を利用してあんなことやこんなことができちゃう。
などなどですヾ( ~▽~)ﾂ

カメラや加速度センサーなどの機能もjsから呼び出して利用できるようです。


これを使ってアプリを作りますので、備忘録的メモを残します。

1. PhoneGapをダウンロード/解凍

↓こちらの右上のリンクから最新版をダウンロードできます。
http://www.phonegap.com/

2011/10/24時点では1.1.0でした。

解凍すると下記のような構成



2. PhoneGapを導入する

phonegapのandroidディレクトリ内の「README.md」を見ればだいたい同じことが書いてあります。

2－1. eclipseでAndroidプロジェクトを作る

ここまではここでは説明しません。
eclipse入れて、AndroidSDK入れたらokですね。

↓ここの手順がとても見やすいかと思います。


素人のアンドロイドアプリ開発日記
http://andante.in/i/

プロジェクトをつくると↓こんな感じです。


2-2. libsディレクトリおよびwwwを作成
プロジェクト直下にlibsディレクトリ、assets直下にwwwディレクトリを作成します。


2-3. jsを配置

phonegap/androidのディレクトリからコピーします。
※ 今回www以下にjsディレクトリを作成して配置します。



2-4. jarをlibs以下に配置しビルドパスに追加

phonegap/androidのディレクトリからコピーします。
配置すると↓こんな感じです。


ビルドパスに追加します。

追加すると↓こんな感じです。



2－5. Activityクラスを改修
↓このように改修します。(改修箇所は赤枠3か所)



package com.blogger.ryooo321.android.multipos6;

import com.phonegap.*;
import android.os.Bundle;

public class Multipos6Activity extends DroidGap {
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        super.loadUrl("file:///android_asset/www/index.html");
    }
}



2－6. AndroidManifest.xmlを改修
↓このように改修します。(改修箇所は赤枠2か所)




<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.blogger.ryooo321.android.multipos6"
    android:versionCode="1"
    android:versionName="1.0" >


    <supports-screens

        android:largeScreens="true"
        android:normalScreens="true"
        android:smallScreens="true"
        android:resizeable="true"
        android:anyDensity="true"
        />
    <uses-permission android:name="android.permission.CAMERA" />
    <uses-permission android:name="android.permission.VIBRATE" />
    <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
    <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
    <uses-permission android:name="android.permission.ACCESS_LOCATION_EXTRA_COMMANDS" />
    <uses-permission android:name="android.permission.READ_PHONE_STATE" />
    <uses-permission android:name="android.permission.INTERNET" />
    <uses-permission android:name="android.permission.RECEIVE_SMS" />
    <uses-permission android:name="android.permission.RECORD_AUDIO" />
    <uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
    <uses-permission android:name="android.permission.READ_CONTACTS" />
    <uses-permission android:name="android.permission.WRITE_CONTACTS" />  
    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" /> 

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


    <uses-sdk android:minSdkVersion="7" />


    <application

        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name" >
        <activity

            android:label="@string/app_name"
            android:name=".Multipos6Activity"
            android:configChanges="orientation|keyboardHidden" >
            <intent-filter >
                <action android:name="android.intent.action.MAIN" />


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


</manifest>


2－7. index.htmlを配置
wwwディレクトリ以下に配置します。



<!DOCTYPE HTML>
<html>
  <head>
    <title>PhoneGap</title>
    <script type="text/javascript" charset="utf-8" src="js/phonegap-1.0.0.js"></script>
  </head>
  <body>
    <h1>Hello World</h1>
  </body>
</html>

2-8. xmlディレクトリを配置
phonegap/androidのディレクトリからコピーします。(plugins.xmlごと)

3. 実行
エミュで起動すると↓こんな感じです。

次はこれにjquery-mobileを入れてみます。

投稿者 Unknown 時刻: 0 件のコメント:
ラベル: ,
登録: 投稿 (Atom)