« Android 開発8 (スマートフォンでの通話アプリ) | トップページ

2012年4月25日 (水)

自サイトで Google Cloud Print を実行する方法 (JavaScript)

以前、スマートフォンから Google Cloud Print を利用して印刷するには専用のアプリが必要と書きましたが、JavaScript より実行可能なことがわかりました。

詳細な内容は下記サイトに書いてました。(英語)

Google Developers Cloud Print

ここを参照すると、JavaScriptだけではなく、Androidアプリからも実行可能なようです。
とりあえずは簡単なテストページを作成してみます。

まず、ボタンを配置したい場所に下記のタグを記述

<div id="print_button_container"> </div>

次に、「head」タグにJavaScriptを追加

<!-- Script の読み込み -->
<script src="http://www.google.com/cloudprint/client/cpgadget.js">
</script>

<!-- Script の実装 -->
<SCRIPT defer="defer">

    <!-- ガジェットの取得 -->
    var gadget1 = new cloudprint.Gadget();

    <!-- デフォルトの印刷ボタン作成および設定 -->
    gadget1.setPrintButton(cloudprint.Gadget.createDefaultPrintButton("print_button_container"));

    <!-- ドキュメントの設定 setPrintDocument( "url","[ドキュメントタイトル]","[印刷対象URL]")  -->
     gadget1.setPrintDocument("url", "動画のテストページ", "http://homepage3.nifty.com/t-chiyo/video.html");

</script>

↓ためしに作成したサイト

Googleクラウドテストページ1

Googleアカウントにログインしている場合、
「Print」ボタンを押すと下記のダイアログが表示されます。

Dialognormal

当然ながらGoogleアカウントにログインしていないと下記のようにエラーとなります。

Dialogerr_3

IE9だとこれでも動作しますが、Chrome や スマートフォン ではボタンが表示されなかったので、追加で下記の修正が必要です。

■修正1

□現象

Googleクラウドプリントのデフォルトボタンが IE9 でしか表示されない

□原因

下記サイトにヒントが載っていました(英語)

Cloud print only works on IE9

簡単に説明すると、ページを読み込む前にボタンを初期化していることが原因です。

□対策

「body」 タグの 「onload」 イベントを使い、
ページ読み込み後に対象のスクリプトを実行するように修正する。

■修正点2

□現象

F12でダイアログを表示すると下記エラーメッセージが表示される。

「SEC7111: HTTPS セキュリティが http://www.google.com/images/logos/cloud_print_logo_beta.gif によって危害を受けています」

□原因

下記サイトに詳細なエラー内容が載っていました

F12 ツールのコンソール エラー コード

下図で説明すると、ダイアログ自体のアドレスは 「https」 サイトだが
「Googleクラウドプリント」のイメージは 「http」 のサイトを参照しているためである

Dialog

残念ながら、これに関しては修正不可です。
(Googleのサイトは修正できません・・・)

また、このままではURLをいちいち指定しなければならない点と、印刷ボタンがデフォルトボタンなので、これも修正します。

↓修正を加えたサイト

Googleクラウドテストページ2

上記ページをIEやChromeで実行した所ダイアログが表示されました。
また、スマートフォンで実行した所、新しいウィンドウが起動しました。
環境によって動きは違うものの、印刷自体は問題なく出来ました。

※以下の環境での動作を確認

 
 IE 9.0.8122.16421
 Chrome 18.0.1025.162
 GaraxyTab Android2.3.3

※アイコンは下記素材サイトよりダウンロードしました

 ホームページ制作に無料で使えるフリーアイコン素材を簡単検索。Materialand

« Android 開発8 (スマートフォンでの通話アプリ) | トップページ

コメント

できたかな?

コメントを書く

(ウェブ上には掲載しません)

トラックバック

この記事のトラックバックURL:
http://app.cocolog-nifty.com/t/trackback/153605/54556200

この記事へのトラックバック一覧です: 自サイトで Google Cloud Print を実行する方法 (JavaScript):

« Android 開発8 (スマートフォンでの通話アプリ) | トップページ