Design エントリー[マークアップ (XHTML+CSS)]
JavaScript と CSS でウェブサイトを印刷対応にする方法
海外の際とで時折見る Printer-friendly version とか print (view print page) などの印刷用にデザイン・レイアウトし直したページの表示機能。
実装例としては以下のあたり。
プレスリリースや各記事のページに行くとページ上部に Printer-friendly version, print などのテキストリンクが見つかる。
New York Times のそれは、ソースの内容 HTML の head の部分が書き換わっているので URL の拡張子は .html だけどパラメータを読み込んでサーバーサイドのプログラムが動いているんじゃないかと。
っで、今回は JavaScript と CSS でお手軽に実装したいのでいくつかのソースを覗いてみた。
Gap Inc の場合
先に紹介した Gap Inc は Printer-friendly version のリンク先が href="javascript:void(printFriendly())" となっており、JavaScript で対応している。
printFriendly() 関数の詳細は以下の通り。
function printFriendly() {
if (document.getElementById != null) {
var html = '<HTML class="printerFriendly">\n<HEAD>\n';
var headTags = document.getElementsByTagName("head");
html += headTags[0].innerHTML;
html += '\n</HEAD>\n<BODY><TABLE class="border" cellspacing="0" cellpadding="0" width="100%" align="center" border="0"><TR><TD class="closeWindow" width="500"><IMG height="34" alt="Gap Inc." src="/public/images/00_x_global/x_printerbar_fall.gif" width="500" /></TD><TD class="closeWindow" width="110"><A href="javascript:window.close()">close window</A></TD></TR></TABLE>';
html += '<br /><table cellspacing="0" cellpadding="0" align="center" width="500"><tr><td>';
var printPageElem = (document.getElementById("pf1").innerHTML) + (document.getElementById("pf2").innerHTML) + (document.getElementById("pf3").innerHTML) + (document.getElementById("pf4").innerHTML) + (document.getElementById("pf5").innerHTML);
html += printPageElem;
html += '</td></tr></table>';
html += '</BODY>\n</HTML>';
var printWin = window.open("GapInc.", "pf1", "height=450,width=630,directories=no,location=no,menubar=yes,resizable=yes,scrollbars=yes,status=no,toolbar=yes");
printWin.document.open();
printWin.document.write(html);
}
else {
alert("Sorry, the printer friendly feature works\nonly in javascript enabled browsers.");
}
}css に class="printerFriendly" のスタイル定義があり、不要なタグ (レイアウト) や innerHTML で追加した要素の装飾を行っている。
三井物産の場合
国内のサイトでも似たような機能を実装している企業があって、三井物産の実装方法が気に入っている。
「印刷ページを表示」の画像ボタンのリンクが href="javascript:void(0);" target="_self" onclick="openWin()" になっていて以下の関数が呼ばれる仕掛け。
function openWin(){
window.open(window.location.href,"printWindow");
}っで、HTML の head で読み込んでいる /common/js_print/print.js という JavaScript のファイルで以下のように記述されている。
if(window.name == "printWindow"){
document.write('<link rel="stylesheet" href="/common/css_print/print.css" type="text/css" media="all" />');
}印刷用として開いた場合のみ、印刷用に再定義された CSS が読み込まれる仕組み。シンプルでよい。
ウェブサイトを印刷対応にするにあたり
実装方法は上記のように比較的分かりやすいけど、マークアップ & スタイル定義の観点から考慮することが "結構" 色々あって、通常なら CSS で背景画像として定義する所を印刷を意識したときには img タグは画像として扱ったり。
画像の例だけじゃなく、フォントやレイアウトについても配慮しなといけない。
これについては体系的にまとめたいので追々書くことにしよう。
おまけ
ソースコードに絞った検索エンジンで検索するといいかも。
lang:javascript printWindow - Google Code Search
追記
2008年06月08日 追記
印刷に特化したJavascriptのクラスはありますか？ - 人力検索はてな
URL やメールアドレスを表示する JavaScript
Drunk Monkey : Where it's evil to have too much air in your glass
よくできている企業サイトを発見。
印刷関連の情報が集まっている、はてなブックマーク
コメント (0) トラックバック (0) Atom/RSS
投稿: 2008年02月07日 14:35 / 最終更新: 2008年06月08日 21:27
» サイト構築のための情報収集を一時的にメモするツール
« 検索結果のトップから落ちたら注意書きを掲載する時代に ...
コメント (投稿する)