printThisという、とても便利なpluginをXPagesに組み込んでみた
こんばんはとうとう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を保存して早速プレビューを見てみましょうお、いい感じに出ていますね早速ピンク枠の「クーポンを印刷する」をクリックしてみましょう・・・こんなんでましたけどー見事に、必要な場所のみ印刷されました繰り返しコントロールと組み合わせれば、もっと楽しい印刷サイトができるかもしれませんねでは、今日はこの辺で・・・あでゅー
