カテゴリー「JavaScript」の3件の記事

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

2011年2月18日 (金)

JavaScript によるキーイベントの禁止 (修正)

キーイベントで色々なキーの禁止を実装してみたので
そのソースを貼り付けます。

■今回の仕様

  • BackSpace、Art+右 による戻るを禁止
    (入力ミスによるページ遷移を防止。明示的な戻るボタンは許可)
     
  • Ctrl+R 、F5 キーによる更新を禁止
    (入力ミスによる更新を防止。明示的な更新ボタンは許可)
     
  • Enter キーによる Post(送信)処理を禁止
    (入力ミスによる送信を防止)

■ソース

以下のソースを JavaScript の定義部分に張り付けてください。

共通的な処理にしたい場合は外部ファイルにして、読み込むと便利♪

window.document.onkeydown = keys;

/**
 * BackSpaceキー、Enterキー、Alt+←、Ctrl+R、F5キー の禁止
 * @returns {Boolean}
 */
function keys(eve){

 // IE と FireFox の両方のイベントを受け取る為の処理
 var winjudge = false ;
 if(eve==null){
  eve = window.event ;
  winjudge = true ;
 }

 // IE と FireFox の両方のキーコードを受け取る為の処理
 var keyCode = eve.which ? eve.which : eve.keyCode ;
 switch ( keyCode ){

   case 8: // BackSpace

    // ※2011/11/17 修正 --------------------------
         //  (IDを直接取得するように修正)
    //  IE と FireFox の両方の要素名を受け取る為の処理
    if(eve.srcElement){
     idname = eve.srcElement.id;
    }else{
     idname = eve.target.id;
    }
    // -------------------------------------------

    // ID(id)が定義されている場合
    if(idname != undefined ){

     type = document.getElementById(idname).type ;
     actv = document.getElementById(idname).disabled ;

     // text の場合のみ BackSpace を許可する
           // ※textareaが存在する場合はその対応を入れてください

     if(type=="text" && actv == false){
      return true ;
     }else{
      // win 系の場合 キーコードに 0 を設定
      if(winjudge) eve.keyCode = 0;
      return false;
     }
    }else{
     if(winjudge) eve.keyCode = 0;
     return false;
    }

   case 13: // Enter

    if(winjudge) eve.keyCode = 0;
    return false;

   case 37: // Alt + ←

    if( eve.altKey ){
     if(winjudge) eve.keyCode = 0;
     return false;
    }

   case 82: // Ctrl + R

    if( eve.ctrlKey ){
     if(winjudge) eve.keyCode = 0;
     return false;
    }

   case 116: // F5

    if(winjudge) eve.keyCode = 0;
     return false;
     break;

 }
}

※うまく動作しない場合

 1.[ツール]メニューより [開発者ツール] を選択

 2.[スクリプト]タグを選択し、[デバッグ開始] ボタンを押す

 3.ブレークポイントを挿入し、対象の操作を行う

 4.開発者ツールの右側[ウォッチ]に変数名を入力

 5.変数の値を確認して、バグの原因を取り除いてください

■今回の確認した環境

IE 8.0.6001.18702
Firefox 3.5.16
Google Chrome 8.0.552.237

※上記以外では確認していないため、使用ブラウザ毎に確認することをお勧めします

2011年2月 1日 (火)

JavaScript で Ctrl+R を禁止する (追記)

「教えてGoo」、「OKWave」にて、

「F5とCtrl+R の「更新」を禁止にしたい。」

という質問があり、その回答が・・・

document.onkeydown = keys;

function keys(){
 switch (event.keyCode ){
  case 116: // F5
  case 82: // Ctrl + R 
   event.keyCode = 0;
   return false;
   break;
 }
}

となっていたが、このままでは通常の「r」キーが無効となるため、
「r」および「R」が入力できなくなる。

※「r」のキーコード=82、「Ctrl」のキーコード=17

その為、上記コードを修正し、「Ctrl」が押されているかどうかを調べる必要がある。

document.onkeydown = keys;

function keys(){

 switch (event.keyCode ){
  case 116: // F5
   event.keyCode = 0;
   return false;
  case 82: // Ctrl + R
   if( event.ctrlKey ){
    event.keyCode = 0;
    return false;
   }
   break;
  }
}

また、上記ソースはIEでは動作するが、Firefoxで正常に動かない
そのため下記のように変更する

window.document.onkeydown = keys;

function keys(eve){      …※1
 var winjudge = false ;
 if(eve==null){
  eve = window.event ; 
…※2
  winjudge = true ;
 }

 var keyCode = eve.which ? eve.which : eve.keyCode ; …※3
 switch ( keyCode ){
  case 116: // F5
   if(winjudge) eve.keyCode = 0; …※4
   return false;
  case 82: // Ctrl + R
   if( eve.ctrlKey ){
    if(winjudge) eve.keyCode = 0;
    return false;
   }
  break;
 }
}

変更内容を説明すると・・・

  1. IEでは「event」がグローバル変数のため認識できるが
    Firefoxでは「event」が認識できない
    そのため、「eve」という変数を関数の引数として宣言する。
     
  2. Firefoxでは関数の第一引数としてイベントが渡されるため「eve」を認識できるが
    IEではそれを認識することができない
    そのため、「eve = window.event」でイベントを再定義する
     
  3. IEではどのキーが押されたかを「eve.keyCode」で取得できるが
    Firefoxでは正しく取得できない
    そのため「eve.which」でキーコードを取得する
     
  4. IEでは「eve.keyCode = 0;」でキーイベントを無効にできたが
    Firefoxではこの部分を実行すると無効にできなかった
    そのためIE以外は「return false;」のみを実行する

    ↑上記で上手くいかない場合は
    「window.event.returnValue = false;」を試してみると良いかも?

■今回の確認した環境

IE 8.0.6001.18702
Firefox 3.5.16
Google Chrome 8.0.552.237

※上記以外では確認していないため、使用ブラウザ毎に確認することをお勧めします