GetHTMLWを使ってダウンロードしたWebサイトを一つのページにまとめてから印刷する方法

Web Evo / _{NetSurfing hacks}

Webサイトのダウンロード_(GetHTMLW)

音声ブラウザ専用:
本文

ProEvo / Web Evo / NetSurfing hacks / Webサイトの印刷 _(GetHTMLW)

GetHTMLWを使ってダウンロードしたWebサイトを一つのページにまとめて印刷する方法

まえへ _{Webサイトのダウンロード _手動} | もどる | フォーラム | つぎへ

カテゴリー

Web Evo
ユーザビリティ hacks
アクセスアップ hacks
CMS hacks
ネットサーフィン hacks
アーカイブス

トピックス

1. Webサイトの印刷

1.1 Webサイトをなぜ印刷するのか

Webサイトの中にはニュースサイトやBlogなど読むためのサイトがあります。通常はPCなどの画面上で読めばすみますが、GTDでお仕事カイゼン！を読んでGTDをはじめてみたいという場合など、Web上で切り替えながら読むのが辛いときがあります。
こういったときは、Webサイトをいったんダウンロードした後、必要な部分をまとめて印刷して記事を読みやすくします。

2. Webサイトを印刷する

2.1 Webサイトのダウンロード

Webサイトのダウンロード_(GetHTMLW)と同様にしてGTDでお仕事カイゼン！の各ページをダウンロードします。

なお、そのままではWebサイト上の全てのページをダウンロードしてしまいますので、適当なところで今日誠意終了します。

2.2 印刷用ページの作成

連載の第1回～第3回までをまとめて印刷用ページを作成します。必要な部分である本文だけをコピー＆ペーストします。
次の手順で、印刷用ページを作成します。

print.htmlファイルを作成し、HTMLのヘッダ部分をコピーします。


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<title>GTDでお仕事カイゼン！：第１回　頭の中をからっぽにする｜gihyo.jp … 技術評論社</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="description" content="gihyo.jp:" />
<meta name="keywords" content="技術評論社,技評,gihyo.jp,ライフハック,GTD" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<base href="http://gihyo.jp/" />
<link rel="stylesheet" href="/assets/templates/gihyojp2007/css/set20071213.css" type="text/css" media="all" />
</head>

ページの区切りようにヘッダにスタイルを追加します。


  <style type="text/css">
  <!--
  .br {
    page-break-before: always;
  }
  -->
  </style>

第1回の本文部分をコピーします。


<div id="content" class="clearfix">
<div id="main">
<div id="primary">
<h1 class="mainTitle01"><a href="http://gihyo.jp/lifestyle/serial/01/gtd">GTDでお仕事カイゼン！</a></h1>
<h2 class="subTitle01">第１回　頭の中をからっぽにする</h2>
  .
  .
  .

作成したHTMLファイルをブラウザでプレビューします。今回はセンタリングされてしまっていたので、'<div id="content">'にalign属性を追加して、左寄せにします。
```
<div align="left" id="content">
```

1回目と2回目の間に改ページを入れ、2回目の本文をコピーします。


<p class="br">
<h2 class="subTitle01">第2回　GTDのワークフローを体験（収集編）</h2>
<div class="readingContent01"><h3>GTDとは？</h3>
<p><a href="lifestyle/serial/01/gtd/0001">前回</a>は，ストレスを
無くすためには「頭の中をからっぽにする」ことが必要というお話をしました。</p>
  .
  .

同様にして3回目の本文もコピーします。


<p class="br">
<span class="readingContent01">
<h2 class="subTitle01">第3回　GTDのワークフローを体験（処理～実行編）</h2>

<h3>処理</h3>
 .
 .

3回目の2ページは保存されていません。このページは手動で保存し、本文をコピーします。


<h4>（3）複雑なアクションが必要か？の判断</h4>
<p>GTDでは，1つのアクションで実行できないものは，プロジェクトとして考えます。例えば「東京へセミナーに
行く」があった場合，「新幹線の予約を入れる」「宿泊先を手配する」「上司に連絡しておく」などの複数のアク
ションが必要になります。このように1つのアクションで完結しないものは「プロジェクトリスト」に分類します。
（マークする場合は，ProjectのPを書きます）</p>
 .
 .

以上で、印刷用ページの作成は終了です。ブラウザで下記のように表示されていれば、ページの作成は成功です。
[印刷用ページ]

2.3 Webサイトの印刷

2.2で作成した印刷用ページのタグを編集し、プレビューで自分の思い通りに印刷できるようにします。
その後、実際にプリンタで印刷します。

2.2で作成したページを印刷プレビューします。何も表示されない場合は、divタグをspanタグに変換し、TOPの'<div align="left">'を追加します。
スタイルシートの設定でページいっぱいをつかっていません。プレビューをしながらdivタグをコメントアウトし、ページを使い切るようにします。今回は、'<div id="primary">をコメントアウトします。
ページを印刷します。このときにプリンタの設定で、フィットページ印刷-A5としてA4→A5への縮小印刷を行います。