Androidアプリ開発に挑戦: WebView

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

2012年6月19日火曜日

AndroidでGoogle クラウドプリントを使ってみる：準備編

１、Chromeをインストールする。
Google Chrome - ブラウザのダウンロード

２、Google アカウントを取得しておく。

３、Chromeでの設定

プリンタの管理をクリック。

今度は、SDカードに保存されているHTMLファイルをGoogle クラウドプリントで出力するプログラムを書いてみた。
AndroidでGoogle クラウドプリントを使ってみる

Google クラウドプリントでSDカードのデータ印刷

Google クラウドプリントがAndroid からも利用出来るみたいなのでやってみた。
googleのブラウザChromでの設定が必要ですが、普段使っているプリンタが利用できるのでいい。
Chromeでの設定を書いてみる。

SDカードに保存されているHTMLファイルを出力してみる。

import android.app.Activity;
import android.content.Intent;
import android.net.Uri;
import android.os.Bundle;

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

  Intent printIntent = new Intent(this, PrintDialogActivity.class);

  printIntent.setDataAndType(Uri.parse("file:///mnt/sdcard/index.html"),
    "text/plain");

  printIntent.putExtra("title", "docTitle");
  startActivity(printIntent);
 }
}

PrintDialogActivity は下記アドレスの丸写しです。
https://developers.google.com/cloud-print/docs/android
マニフェストファイルにもアクティビティーを設定する
ついでに下記の許可も与えておく
<uses-permission android:name="android.permission.INTERNET"/>

import android.app.Activity;
import android.content.ActivityNotFoundException;
import android.content.ContentResolver;
import android.content.Intent;
import android.os.Bundle;
import android.util.Base64;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.webkit.WebViewClient;

import java.io.ByteArrayOutputStream;
import java.io.FileNotFoundException;
import java.io.IOException;
import java.io.InputStream;

public class PrintDialogActivity extends Activity {
  private static final String PRINT_DIALOG_URL = "https://www.google.com/cloudprint/dialog.html";
  private static final String JS_INTERFACE = "AndroidPrintDialog";
  private static final String CONTENT_TRANSFER_ENCODING = "base64";

  private static final String ZXING_URL = "http://zxing.appspot.com";
  private static final int ZXING_SCAN_REQUEST = 65743;

  /**
   * Post message that is sent by Print Dialog web page when the printing dialog
   * needs to be closed.
   */
  private static final String CLOSE_POST_MESSAGE_NAME = "cp-dialog-on-close";

  /**
   * Web view element to show the printing dialog in.
   */
  private WebView dialogWebView;

  /**
   * Intent that started the action.
   */
  Intent cloudPrintIntent;

  @Override
  public void onCreate(Bundle icicle) {
    super.onCreate(icicle);

    setContentView(R.layout.print_dialog);
    dialogWebView = (WebView) findViewById(R.id.webview);
    cloudPrintIntent = this.getIntent();

    WebSettings settings = dialogWebView.getSettings();
    settings.setJavaScriptEnabled(true);

    dialogWebView.setWebViewClient(new PrintDialogWebClient());
    dialogWebView.addJavascriptInterface(
      new PrintDialogJavaScriptInterface(), JS_INTERFACE);

    dialogWebView.loadUrl(PRINT_DIALOG_URL);
  }

  @Override
  public void onActivityResult(int requestCode, int resultCode, Intent intent) {
    if (requestCode == ZXING_SCAN_REQUEST && resultCode == RESULT_OK) {
      dialogWebView.loadUrl(intent.getStringExtra("SCAN_RESULT"));
    }
  }

  final class PrintDialogJavaScriptInterface {
    public String getType() {
      return cloudPrintIntent.getType();
    }

    public String getTitle() {
      return cloudPrintIntent.getExtras().getString("title");
    }

    public String getContent() {
      try {
        ContentResolver contentResolver = getContentResolver();
        InputStream is = contentResolver.openInputStream(cloudPrintIntent.getData());
        ByteArrayOutputStream baos = new ByteArrayOutputStream();

        byte[] buffer = new byte[4096];
        int n = is.read(buffer);
        while (n >= 0) {
          baos.write(buffer, 0, n);
          n = is.read(buffer);
        }
        is.close();
        baos.flush();

        return Base64.encodeToString(baos.toByteArray(), Base64.DEFAULT);
      } catch (FileNotFoundException e) {
        e.printStackTrace();
      } catch (IOException e) {
        e.printStackTrace();
      }
      return "";
    }

    public String getEncoding() {
      return CONTENT_TRANSFER_ENCODING;
    }

    public void onPostMessage(String message) {
      if (message.startsWith(CLOSE_POST_MESSAGE_NAME)) {
        finish();
      }
    }
  }

  private final class PrintDialogWebClient extends WebViewClient {
    @Override
    public boolean shouldOverrideUrlLoading(WebView view, String url) {
      if (url.startsWith(ZXING_URL)) {
        Intent intentScan = new Intent("com.google.zxing.client.android.SCAN");
        intentScan.putExtra("SCAN_MODE", "QR_CODE_MODE");
        try {
          startActivityForResult(intentScan, ZXING_SCAN_REQUEST);
        } catch (ActivityNotFoundException error) {
          view.loadUrl(url);
        }
      } else {
        view.loadUrl(url);
      }
      return false;
    }

    @Override
    public void onPageFinished(WebView view, String url) {
      if (PRINT_DIALOG_URL.equals(url)) {
        // Submit print document.
        view.loadUrl("javascript:printDialog.setPrintDocument(printDialog.createPrintDocument("
          + "window." + JS_INTERFACE + ".getType(),window." + JS_INTERFACE + ".getTitle(),"
          + "window." + JS_INTERFACE + ".getContent(),window." + JS_INTERFACE + ".getEncoding()))");

        // Add post messages listener.
        view.loadUrl("javascript:window.addEventListener('message',"
            + "function(evt){window." + JS_INTERFACE + ".onPostMessage(evt.data)}, false)");
      }
    }
  }
}

プログラムを実行すると、
サインアップ画面が表示される。

プリンタを選択する。

Print を選択する

うまく送られているようですが、何が悪いのか、このタイミングで5010エラーが出て、
プリンタが壊れた模様。

2012年6月18日月曜日

AndroidとJavaScriptの連携:WebView addJavascriptInterface

①、Android側：WebView　で assets フォルダの　HTMLファイルを表示。
②、HTMLファイル読み込み後、データ送信（実行するJavaScript）。
③、HTML側：Adnroid から送られてきたデータを表示。その後、
④、Androidにデータを送り返す。
⑤、Android側：HTMから受け取ったデータをTextViewに表示

 
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <script src="jquery.min.js"></script>
  <script type="text/javascript">
   function anFunc(arg) {
    // Javaからのデータを処理
    //$("div#test").append("jQueryで表示");//jQueryは今回使わない
    var element=document.getElementById("test").innerText="Android から送られた文字：" + arg;//③
    
    //Javaのメソッドを呼び出す Androidにデータを送信④
    //window.interfaceName.makeToast();//Tostを表示する場合
    window.interfaceName.logOutput("HTMLからのデータ");//LogCatに出力する場合
    window.interfaceName.viewOut(",HTMLからのデータ");//TextViewに表示する場合
   }
  </script>

 </head>
 <body>
  <div>
   ここはHTMLで表示
  </div>
  <div id="test"></div>
 </body>
</html>

import android.app.Activity;
import android.content.Context;
import android.os.Bundle;
import android.os.Handler;
import android.util.Log;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.widget.TextView;
import android.widget.Toast;

public class HtmlViewActivity extends Activity {
 private WebView webview;
 private Handler mHandler = new Handler();
 /** Called when the activity is first created. */
    @Override
 public void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.main);
  
  //webview = new WebView(this);
        webview = (WebView) findViewById(R.id.webView1);
 
  webview.setWebViewClient(new WebViewClient() {});

  // JavaScriptを有効にする
  webview.getSettings().setJavaScriptEnabled(true);
  
  // JavaScriptにJavaオブジェクトを登録する
     // 第2引数で指定した名前で、Javascriptからオブジェクトにアクセスできます。
  webview.addJavascriptInterface(new className(this), "interfaceName");

  //ページ読み込み完了時の処理
  webview.setWebViewClient(new WebViewClient() {
        @Override
        public void onPageFinished(WebView view, String url)
        {
        //ページ読み込み後データ送信
         String script = "javascript:anFunc('5');";
            webview.loadUrl( script );//②
        }
    });

  //ページを読み込み
  webview.loadUrl("file:///android_asset/test3.html");//①


  //setContentView(webview);
    }
 
/*
⑤　HTMLからのデータ処理
*/
 public class className {
  private Context con;
  
  public className(HtmlViewActivity htmlViewActivity) {
   // TODO 自動生成されたコンストラクター・スタブ
    this.con = htmlViewActivity;
  }
  //Tostを表示する場合
  public void makeToast() {
      Toast.makeText(con, "Tost表示", Toast.LENGTH_LONG).show();
  }
  //LogCatに出力する場合
  public void logOutput(String text) {
    Log.d("LOG", text);//
  }
  //TextViewに表示する場合
  public void viewOut(final String text) {
   final TextView textView = (TextView) findViewById(R.id.textView1);
   //textView.append(text);//error
   mHandler.post(new Runnable() {
    public void run() {
     // TODO 自動生成されたメソッド・スタブ
     textView.append(text);//OK
    }
   });
  }

 }
}

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >



    <WebView
        android:id="@+id/webView1"
        android:layout_width="match_parent"
        android:layout_height="132dp" />

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:clickable="false"
        android:text="ここはTextView" />

</LinearLayout>

WebView でjQueryを使ってみる。:Android

<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <script src="jquery.min.js"></script>
  <script>
   $(function() {
    $("div#test").append("jQueryで表示");
   });
  </script>
 </head>
 <body>
  <div>ここはHTMLで表示</div>
  <div id="test"></div>

 </body>
</html>

import android.app.Activity;
import android.os.Bundle;
import android.webkit.WebView;
import android.webkit.WebViewClient;

public class HtmlViewActivity extends Activity {
 /** Called when the activity is first created. */
    @Override
 public void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);

  WebView webview = new WebView(this);
  webview.setWebViewClient(new WebViewClient() {});  

  // JavaScriptを有効にする
  webview.getSettings().setJavaScriptEnabled(true);

  //ページを読み込み
  webview.loadUrl("file:///android_asset/test3.html");

  setContentView(webview);
    }
}

assetsフォルダの中のHTMLファイルでjQuery を使ってみる。
1.assetsフォルダにjQueryを入れて使う方法
上記のソース

2.GoogleでホストされているjQueryを使う方法
Google Libraries API - Developer's Guide

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript">

2012年6月17日日曜日

Android から JavaScript を実行:Android WebView

Android から JavaScript で HTML のテキストを文字を赤くしている。

<html>
 <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>addJavascriptInterfaceサンプル</title>
</head>
 <body>
  <h1>Android　と　JavaScriptの連携</h1>
  <div id="text">123</div>
 </body>
</html>

import android.app.Activity;
import android.os.Bundle;
import android.webkit.WebView;
import android.webkit.WebViewClient;

public class HtmlViewActivity extends Activity {

 private WebView webview;
 private String script;

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

  webview = new WebView(this);
  script = "javascript:document.getElementById('text').style.color = 'red';";
  // JavaScriptを有効にする
  webview.getSettings().setJavaScriptEnabled(true);
  //ページ読み込み後JavaScriptを実行
  webview.setWebViewClient(new WebViewClient() {  
      @Override  
      public void onPageFinished(WebView view, String url)  
      {  
          webview.loadUrl( script );  
      }  
  });  
  
  //ページを読み込み
  webview.loadUrl("file:///android_asset/test4.html");

  setContentView(webview);
    }
}

HTML から Android に情報を送る

Html のボタンをタップすると、Android で　Tost　を表示する。

<html>
 <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>addJavascriptInterfaceサンプル</title>
</head>
 <body>
  <h1>Android　と　JavaScriptの連携</h1>
  <button onClick="andjs.makeToast()">Toastを表示</button>
 </body>
</html>

import android.app.Activity;
import android.content.Context;
import android.os.Bundle;
import android.webkit.WebView;
import android.widget.Toast;

public class HtmlViewActivity extends Activity {
 public class JsObject {

  private Context con;

  public JsObject(Context con) {
   this.con = con;
  }
  public void makeToast() {
   Toast.makeText(con, "Tost表示", Toast.LENGTH_LONG).show();
  }
 }

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

  WebView webview = new WebView(this);
  // JavaScriptを有効にする
  webview.getSettings().setJavaScriptEnabled(true);

  webview.loadUrl("file:///android_asset/test4.html");
  JsObject jsObj = new JsObject(this);

  webview.addJavascriptInterface(jsObj, "andjs");

  setContentView(webview);
    }
}

html データを作って表示:Android WebView loadData

import android.app.Activity;
import android.os.Bundle;
import android.webkit.WebView;

public class HtmlViewActivity extends Activity {
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        
        WebView webview = (WebView) findViewById(R.id.webView1);
        String data = "<html><head><meta http-equiv=\"content-type\" content=\"text/html;charset=UTF-8\"></head>";
        data +=  "<body>HTML データを作って表示</body></html>";
        webview.loadData(data, "text/html", "UTF-8");
        
    }
}

JavaScript を含める場合

import android.app.Activity;
import android.os.Bundle;
import android.webkit.WebView;

public class HtmlViewActivity extends Activity {

 private WebView webview;
 private String html;

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

  webview = new WebView(this);
  html = "<html><head><meta http-equiv=\"content-type\" content=\"text/html;charset=UTF-8\">";
  html +=  "<script type=\"text/javascript\"> document.write('JavaScriptで表示<br />');</script>";
  html +=  "</head>";
  html +=  "<body>HTML データを作って表示</body></html>";
        
  // JavaScriptを有効にする
  webview.getSettings().setJavaScriptEnabled(true);
  
  
  //ページを読み込み
   webview.loadData(html, "text/html", "UTF-8");

  setContentView(webview);
    }
}

WebViewの使い方:Android

URLを指定してホームページ表示

import android.app.Activity;
import android.os.Bundle;
import android.webkit.WebView;

public class HtmlViewActivity extends Activity {
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        
        WebView webview = (WebView) findViewById(R.id.webView1);
        webview.loadUrl("http://www.google.com");
        
    }
}

assets フォルダに保存されているファイルを表示する場合
webview.loadUrl( "file:///android_asset/test.html" );

JavaScripr を有効にする
webview.getSettings().setJavaScriptEnabled(true);

登録: 投稿 (Atom)