Appcelerator Titaniumのドキュメントを印刷してみよう(≒Chrome上で内容を書き換えてから縮小印刷する方法(macOS))

4633 ワード
ChromeDevTool Titanium Titanium テキストリンク

はじめに

Titaniumのドキュメントは整備されていて、素敵なサンプルコードも随所にちりばめられていていいですよね。ブラウザで見たり、AlfredとDashを用いて参照すると便利ですが、印刷してじっくり見たい時もあります。右上にプリンターアイコンが有るので楽勝と思いきや押してみると、一部のページで次のような結果に。(2016年12月6日時点)

コード中のインデントが詰まって表示されています。ソースを見るとインデントのスペースは入っているのですが、ブラウザで表示するとスペースが詰まっていました (´･ω･`)ゞ

Webページ内の詰まったホワイトスペースを正常に表示する方法

こんな時はChromeブラウザのデベロッパー ツールを用いると便利です。HTML/CSSの内容を確認するのによく使われるツールですが、HTML/CSSの色などを手元内で書き換えて、試しに一時的に表示することもできます。Titaniumサンプルコードの部分にはprogramlistingというCSSのクラスが指定されているので、そのCSS styleに１行追加します。

以下はmacOS Chromeでの操作です。

  1. Chromeで [表示] - [開発/管理] - [デベロッパー ツール] を選択します。（ショートカット：option + command + i）
  2. Elementsタブを選択します。
  3. headタグの中のstyleタグを開きます。
  4. style内の記述をダブルクリックし、１行追加します（注意：空白部分をダブルクリックすると反応しません。コード部分をダブルクリックしてください）。下記の３行目が追加した行です。（HTMLのpreタグのように表示し、行間隔を調整したスタイルです）
.description .short { display: none !important }
.description .long { display: block !important }
.programlisting {white-space: pre; line-height: 0.3em;}

Macで縮小印刷する方法

そのまま印刷するとよく見れば長い行が途中で切れています。そこでページ数を抑えるためにも縮小印刷します。Macで縮小印刷するにはコツが要ります。試したページでは、縮小によって20ページが13ページに収まりました。

  1. Chromeでcommand + pキーを押し、印刷ダイアログを表示します。
  2. 左下の『システムダイアログを使用して印刷』を選択します。
  3. 用紙サイズをA4、拡大縮小を70%とします。
  4. 左下の選択肢から『プレビューでPDFを開く』を選択します。
  5. プレビューで長い行が切れていたり問題ないか確認してください。
  6. プリンターが手元に有る方はこのまま印刷してください。コンビニで印刷したい場合はUSBメモリかSDカードを用意し、[ファイル] - [PDFとして書き出す]を選択します。好みのファイル名で保存します。

コンビニでPDFを印刷する方法

手元にプリンターが有ればそのまま印刷してOKですが、ここではコンビニに置いてあるマルチコピー機で印刷します。レーザープリンターできれいに印刷できます。
印刷システムは２つの系列に別れます。

注意：PDFファイルを予めネットで登録して印刷するネットプリント（またはネットワークプリント）というサービスもあるのですが、1ページあたり20円と割高なのでオススメしません。

PDFファイルをUSBやSDカードなどに入れ、マルチコピー機に挿入して印刷できます。どちらのシステムでもA4,A3共に1ページあたり10円で印刷できます。お好みに応じて両面印刷やA3で２ページ並べて印刷もできます（注意：どの印刷を選択しても１ページあたり10円です。１枚ではありません）。

オススメのAppcelerator Titaniumドキュメント

TitaniumではTableViewの代わりにListViewを用いると、リスト表示が劇的に速くなります。印刷して書き込んだりしながら何度も見返すと、ViewとControllerの関係やTemplateの書き方の理解が進むのでオススメします。