こんばんはお月様

とうとうIBM Think2018が始まりますね!!

https://www.ibm.com/ibm/jp/ja/think2018.html

 

筆者も行きたかったのですが、諸事情があり今回は参加できませんでしたショボーン

現地に向かわれている方々にはたくさん楽しんでいただきたいものですグッ

Notes/Domino10のことも何かしら発表があると思うのでワクワクしながら毎日を過ごしています照れ

 

さて、今回はこんな依頼があったんですニコニコ

以前、カルーセルでお店のご紹介ページを作ったのですが、

そのページに「割引クーポン」を追加したんです。

こんな感じで。

 

今時はスマホアプリで表示とか出来ますが、

紙に印刷して持参するということもあると思います。

 

じゃあ、印刷しようということで紙に出したところ・・・

 

 

ダサいガーン

 

赤枠の部分、カルーセルのところですがこんな感じで印刷されましたえーん

(自分だけかもしれませんが)

実際は、青枠の部分があればいいのですショボーン

 

・赤枠部分を印刷時に隠す

・クーポン印刷ページを別途つくる

 

など、色々対策を考えたんですが、もっとシンプルに何かできないかと思い探してみました虫めがね

 

ありました!その名も「printThis」という代物おねがい

 

 

使い方も簡単そうですねニコニコ

早速、組み込んでパーツ化しちゃいましょう爆  笑

 

1.上記のURLからprintThis.jsと別途jquery-1.11.3を入手してDBにファイルを取り込みます。

 

2.新規カスタムコントロールを作成します。

筆者は「ccPrintThis」としました。

プロパティ定義>新規プロパティを作りまくります!

 

    名前:debug、種類:boolean、デフォルト値:false
    名前:importCSS、種類:boolean、デフォルト値: true
    名前:importStyle、種類:boolean、デフォルト値: false
    名前:printContainer、種類:boolean、デフォルト値: true
    名前:loadCSS、種類:テキスト、デフォルト値:""
    名前:pageTitle、種類:テキスト、デフォルト値:""
    名前:removeInline、種類:boolean、デフォルト値: false
    名前:printDelay、種類:Long、デフォルト値:333
    名前:header、種類:テキスト、デフォルト値:""
    名前:footer、種類:テキスト、デフォルト値:""
    名前:base、種類:boolean、デフォルト値: false
    名前:formValues、種類:boolean、デフォルト値: true
    名前:canvas、種類:boolean、デフォルト値: false
    名前:doctypeString、種類:テキスト、デフォルト値:""
    名前:removeScripts、種類:boolean、デフォルト値: false
    名前:copyTagClasses、種類:boolean、デフォルト値: false

  名前:className、種類:テキスト、デフォルト値:""  ←オリジナル

 

3.出力スクリプトコントロールを配置します。

 

printThisのページにある、Advanced FeaturesとOptionsを参考にしながらValue値を書いていきます。

 

$('#print-coupon').click(function(){

$("#mySelector").printThis({
    debug: false,               // show the iframe for debugging
    importCSS: true,            // import page CSS
    importStyle: false,         // import style tags
    printContainer: true,       // grab outer container as well as the contents of the selector
    loadCSS: "path/to/my.css",  // path to additional css file - use an array [] for multiple
    pageTitle: "",              // add title to print page
    removeInline: false,        // remove all inline styles from print elements
    printDelay: 333,            // variable print delay; depending on complexity a higher value may be necessary
    header: null,               // prefix to html
    footer: null,               // postfix to html
    base: false ,               // preserve the BASE tag, or accept a string for the URL
    formValues: true,           // preserve input/form values
    canvas: false,              // copy canvas elements (experimental)
    doctypeString: "...",       // enter a different doctype for older markup
    removeScripts: false,       // remove script tags from print content
    copyTagClasses: false       // copy classes from the html & body tag
});

});

 

出来上がったら、値をすべてcompositeDataに書き換えを行います。

 

$('#print-coupon').click(function(){
$("#{javascript:return compositeData.className}").printThis({
    debug: #{javascript:return compositeData.debug},               
    importCSS: #{javascript:return compositeData.importCSS},            
    importStyle: #{javascript:return compositeData.importStyle},           
    printContainer: #{javascript:return compositeData.printContainer},       
    loadCSS: "#{javascript:return compositeData.loadCSS}",  
    pageTitle: "#{javascript:return compositeData.pageTitle}",              
    removeInline: #{javascript:return compositeData.removeInline},        
    printDelay: #{javascript:return compositeData.printDelay},            
    header: "#{javascript:return compositeData.header}",               
    footer: "#{javascript:return compositeData.footer}",               
    base: #{javascript:return compositeData.base} ,               
    formValues: #{javascript:return compositeData.formValues},           
    canvas: #{javascript:return compositeData.canvas},              
    doctypeString: "#{javascript:return compositeData.doctypeString}",       
    removeScripts: #{javascript:return compositeData.removeScripts},       
    copyTagClasses: #{javascript:return compositeData.copyTagClasses}       
});
});

 

最後に、clickイベントの呼び出し元を「.print-coupon」というクラス名を指定します。

(ここもプロパティ定義してもいいかもですね)

 

ここまで出来たら保存します。

 

4.次はXPageを開きます。

上記で作成したカスタムコントロールを配置します。

配置したカスタムコントロールのすべてのプロパティ>classNameに「.print1」と設定しておきます。

 

配置したカスタムコントロールの下にパネルコントロールを配置します。

 

パネルコントロールのすべてのプロパティ>styleClassの値に「print1」と指定します。

 

イメージコントロールを配置します。

クーポンの画像が配置されているURLを指定します。

(printThisでは何故かフルパスで書いてあげないと印刷時に表示されませんでした)

 

ここは芸がないですが、注意事項を直接書き足してみます。

(直書きが嫌な方は、複数行編集ボックスコントロール等を使うといいと思います)

 

印刷用のボタンコントロールを配置します。

ボタンコントロールのすべてのプロパティ>styleClassの値に「print-coupon」をセットします。

 

そして、忘れてはいけないjsファイルの指定です。

 

2つ指定するのを忘れないでねニヤリ

 

XPageを保存して早速プレビューを見てみましょう!!

 

 

お、いい感じに出ていますね目

 

早速ピンク枠の「クーポンを印刷する」をクリックしてみましょう!!

 

 

・・・キョロキョロ

 

 

 

 

 

こんなんでましたけどーニヒヒ

 

見事に、必要な場所のみ印刷されましたキラキラ

 

繰り返しコントロールと組み合わせれば、

もっと楽しい印刷サイトができるかもしれませんね照れ

 

 

では、今日はこの辺で・・・

 

 

あでゅーバイバイ