Edited at

サーマルプリンタで印刷する: Chrome拡張編


0. 前回までのあらすじ


  1. サーマルプリンタをLinuxから印刷できるようにセットアップしました。

  2. Raspberry Piから文字、画像をテスト印刷しました。

  3. 画像を印刷するための印刷サービスを構築しました。

  4. HTMLを画像に変換するためにレンダリングサービスを構築しました。

  5. Webブラウザから簡単にHTMLを印刷するためにWebアプリを構築しました。

これまでの記事については『目次』をご覧ください。


1. Chrome拡張をセットアップする

とても長い道のりでしたが、ここまで来てやっと「WebブラウザからGitHubのIssueをカンバンに貼るために印刷する」ための準備が整いました。

サーマルプリンタ、印刷サービス、レンダリングサービスを使ってWebブラウザ(Google Chrome、Chromium)から印刷するためのChrome拡張を実装しました。名前は雑な感じですが「GitHub Printer」としています。

ソースコードは https://github.com/nayutaya/thermal-printer/tree/master/extension/github_printer をご参照ください。

まず、Chrome拡張のソースコードを取得します。

$ mkdir -p ~/repo/github.com/nayutaya

$ cd ~/repo/github.com/nayutaya/
$ git clone https://github.com/nayutaya/thermal-printer.git

$ cd ~/repo/github.com/nayutaya/thermal-printer/
$ git pull
$ git checkout extension-github-printer-v1.0.0
$ git branch -v
* (HEAD detached at tool-html-print-v1.0.0) f44670c Merge pull request #13 from nayutaya/update_html_print_tool
master f44670c Merge pull request #13 from nayutaya/update_html_print_tool

続いて、Google Chrome(またはChromium)で拡張を追加します。以下、英語版での手順です。


  1. メニューボタンをクリックする。

  2. 「More Tools」を選択する。

  3. 「Extensions」を選択する。

  4. 画面右上の「Developer mode」を有効化する。

  5. 「LOAD UNPACKED」をクリックする。


  6. manifest.jsonが含まれるディレクトリ(extension/github_printer)を選択する。

ツールバーに「GitHub Printer」のアイコンが表示されれば完了です。


2. WebブラウザからGitHubのIssueを印刷する

Google Chrome(またはChromium)でGitHubのIssueを開いている状態で「GitHub Printer」のアイコンをクリックし、「Preview」ボタン、「Print」ボタンを押下することで、Issueを印刷することができます。

screenshot.png

印刷されたレシート用紙には、プロジェクト名、Issue番号、Issueのタイトルが含まれています。

photo.jpg

「GitHub Printer」はGitHubのIssueの他、Pull Requestにも対応しています。また、GitLabのIssue、Merge Requestにも対応していますが、独自ドメインで運用されていることがほとんどだと思いますので、個別に設定(extension/github_printer/manifest.jsoncontent_scripts)を修正する必要があります。