ゼロからはじめるJavaScript(17) JSも便利なGoogle ColabをPDF生成ツールとして使ってみよう！

Googleが無料で提供しているPythonの実行環境Colaboratoryがあります。ブラウザからプログラムを実行できるのでとても便利です。最近は手軽にJavaScriptを実行することもできるのでさらに便利です。今回は、ColaboratoryをPDF生成ツールとして使ってみましょう。

Colabを使ってPDFを出力したところ

Google Colaboratoryとは

そもそも、Google Colaboratory(略称Colab)とは、機械学習の教育や研究用に提供しているツールです。Googleアカウントさえあれば誰でも無料で活用できる素晴らしいツールです。有料版もありますが、学習目的やちょっとツールとして使いたい分には無料版で十分です。

Googleは太っ腹で、無料版でもそれなりに良いスペックのマシンが提供されています。もし、少し古いマシンや非力なマシンを工夫して使っている人やタブレットを使っている人であれば、そのマシン上にプログラミングの実行環境をインストールしてプログラムを動かすよりも、Colab上でプログラムを動かした方が速くて快適かもしれません。

それで、Colab自体は、Pythonを実行するための実行環境ですが、ちょっと工夫することで、JavaScriptやその他のツールを動かすこともできます。なお、JavaScriptよりもPythonでどんなことが出来るのか知りたい方は、こちらの「最強Python環境Colaboratoryを使いこなそう」が参考になります。

JavaScriptをColabで動かすには？

さて、Colabには最初からJavaScriptを動かすための仕組みが備わっています。まずは、ブラウザでColabのWebサイトにアクセスしましょう。

Googleアカウントでログインすると、サンプルのページ、あるいは、次のようなファイルの選択ダイアログが表示されます。サンプルのページが出たら、画面上部のメニューより[ファイル > ノートブックを新規作成]をクリックします。もし、ダイアログが出たら、ノートブックを新規作成のボタンを押します。

Colabのサイトにアクセスしたら新規作成を押そう

なお、JavaScriptの実行環境であるNode.jsが最初からColabにインストールされています。そのため、Colabでプログラムを入力するセルと呼ばれるテキストボックスに、以下のように入力し、セルの左側にある実行ボタンを押すと、プログラムを動かすことができます。

! node -e "console.log('Hello, World!')"

また、セルの一行目に「%%js」と書くと、ブラウザに搭載されているJavaScriptの機能を使ってコードを実行できます。なお、Colabではセルの下にある出力パネルに「output-area」というidが割り振られているので、次のようなコードを記述することで、パネルにJavaScriptの結果を出力できます。

%%js
document.querySelector('#output-area').innerHTML = '<h1>Hello, World!</h1>'

ColabでJavaScriptを実行したところ

後者の「%%js」を使う方法では、自身のマシン上で実行されるのですが、前者のNode.jsを使う方法では、Googleのサーバー上でプログラムを動かすことができます。いろいろなライブラリをインストールするのも自由となっており、かなり高度なプログラムも動かせるので便利です。

PDFを生成しよう

それでは、ColabでPDFを生成する準備を整えましょう。JavaScriptでPDFを生成するツールはいろいろありますが、ここでは、pdfmakeを使ってみます。

Colabで以下のコードを実行しましょう。これにより、pdfmakeを実行する環境が整います。また、PDFを生成するのに日本語フォントも必要なので、IPAフォントも一緒にダウンロードしましょう。

! npm install pdfmake
! apt install -y fonts-ipaexfont

それでは、PDFを出力するJavaScriptのプログラムを記述しましょう。以下のコードを書いて実行すると、「test.js」というファイルがColab上に書き込まれます。

%%file test.js
// ライブラリの取り込み
const fs = require('fs')
const PdfPrinter = require('pdfmake')
// フォントを指定
const FONT =  '/usr/share/fonts/opentype/ipaexfont-gothic/ipaexg.ttf'
const printer = new PdfPrinter({ // フォントを指定
  ipaexg: { normal: FONT, bold: FONT }
})
// PDFに書き込むコンテンツを指定 --- (※1)
const doc = printer.createPdfKitDocument({
  content: [
    { text: 'こんにちは!!', style: 'body' }
  ],
  styles: { 'body': { font: 'ipaexg', fontSize: 32 } }
})
// ファイルに保存
doc.pipe(fs.createWriteStream('test.pdf'))
doc.end()

続いて実行してみましょう。以下のコードを実行します。すると、「test.pdf」というPDFファイルが生成されます。

! node test.js

なお、プログラムを実行した後で、画面左側にあるフォルダのアイコンをクリックしてみましょう。すると、先ほどプログラムで生成した「test.pdf」が見つかります。右クリックして「ダウンロード」をクリックしましょう。するとPDFファイルをダウンロードできます。

生成したファイルをダウンロードしよう

なお、上記プログラムの(※1)の部分を任意の文章に書き換えることで、好きなテキストをPDFに出力できます。pdfmakeを使う事で、QRコードや画像を差し込むことも可能です。

画像や九九の表をPDFに書き込もう

せっかくので、画像を表示させつつ、掛け算の九九の表を作ってみましょう。最初に適当な画像ダウンロードします。以下のコードを実行すると、「test.png」という名前で画像を保存します。

! curl https://n3s.nadesi.com/image.php?f=53.png > test.png

次いで、以下のコードを実行しましょう。これにより「test2.js」という名前でファイルが保存されます。

%%file test2.js
const FONT =  '/usr/share/fonts/opentype/ipaexfont-gothic/ipaexg.ttf'
const fs = require('fs')
const PdfPrinter = require('pdfmake')
const printer = new PdfPrinter({ // フォントを指定
  ipaexg: { normal: FONT, bold: FONT }
})
// 九九の表を作る
const pad = (s) => { s = '00' + s; return s.substring(s.length-2,s.length) }
const kuku = []
for (let y = 1; y <= 9; y++) {
    const c = []
    for (let x = 1; x <= 9; x++) {
        c.push(pad(y * x))
    }
    kuku.push(c)
}
const content = {
  content: [
    { image: './test.png', width: 150 },
    { text: '九九の表', style: 'body' },
    { table: { body: kuku }, style: 'body'}
  ],
  styles: { 'body': { font: 'ipaexg', fontSize: 24 } }
}
// PDFに出力
const doc = printer.createPdfKitDocument(content)
doc.pipe(fs.createWriteStream('test.pdf'))
doc.end()

そして、以下を実行します。正しく実行されると、test.pdfというファイルを出力します。その後、先ほど同じ手順でPDFをダウンロードできます。

!node test2.js

以下のようなPDFが出力されます。

画像と九九の表を出力したところ

まとめ

以上、今回は、Google Colaboratoryを利用して、JavaScriptを実行する方法を紹介しました。そして、PDFを生成するライブラリをインストールし、実際にPDFを出力する手順も紹介しました。なお、Colabはブラウザが動く環境があれば使うことができるのが嬉しいところで、作ったプログラムはGoogle Driveに保存されます。そのため、ちょっとした作業環境としても快適に使えるので活用してみてください。

自由型プログラマー。くじらはんどにて、プログラミングの楽しさを伝える活動をしている。代表作に、日本語プログラミング言語「なでしこ」、テキスト音楽「サクラ」など。2001年オンラインソフト大賞入賞、2004年度未踏ユーススーパークリエータ認定、2010年 OSS貢献者章受賞。技術書も多く執筆している。直近では、「シゴトがはかどる Python自動処理の教科書(マイナビ出版)」「すぐに使える!業務で実践できる! PythonによるAI・機械学習・深層学習アプリのつくり方 TensorFlow2対応(ソシム)」「マンガでざっくり学ぶPython(マイナビ出版)」など。