PDF First Page
Build note.

小さいけれど、毎回面倒な作業。

複数のPDFがあり、それぞれの1ページ目だけを一つにまとめたい。

一般的なPDFサービスでも処理はできる。ただし、ファイルを開いてページを選び、別のPDFと結合する作業を毎回繰り返す必要がある。仕事で何度も発生するなら、用途を一つに絞った方が速い。

そこで、PDFをまとめて選ぶだけで処理できる PDF First Page を作った。

やることを一つに絞る。

機能は必要最小限にした。

1. 複数のPDFを選択する
2. 選択順を画面で確認する
3. 各PDFの1ページ目だけを取り出す
4. 一つのPDFに結合して保存する

ページ範囲の細かな指定や編集機能は付けていない。「全ファイルの1ページ目をまとめる」という一つの作業だけを短く終わらせるためのツールにした。

PDFを外へ送らない。

業務で使うPDFには、見積書、図面、社名、担当者名などが含まれる場合がある。そのため、処理はサーバーではなくブラウザ内で完結させた。

選択したPDFは7okenmのサーバーへアップロードしない。ブラウザのメモリ上で読み込み、処理が終わったら出力PDFだけを利用者の端末へ保存する。

Your PDFs stay here.

この性質を、機能説明の補足ではなく画面の中心に置いた。

QPDFをWebAssemblyで動かす。

PDFの処理には qpdf-wasm を利用した。QPDFをWebAssemblyとしてブラウザ上で動かし、各入力ファイルの1ページ目を指定して新しいPDFを生成する。

処理の流れは次のとおり。

PDFを選択
  ↓
ブラウザ内の仮想ファイルシステムへ読み込み
  ↓
各PDFの1ページ目をQPDFで指定
  ↓
新しいPDFを生成
  ↓
端末へダウンロード

パスワードが必要なPDFなど、処理できないファイルについては画面上でエラーを返す。

ツールも7okenmのデザインに揃える。

ドラッグ＆ドロップ、選択ファイル一覧、処理ボタンという一般的な構成だが、見た目は7okenm.comの延長として設計した。

• 大きな英字の見出し
• 小さな管理番号とステータス
• オフホワイト、黒、青の3色
• 選択したファイル数と出力ページ数を表示
• PCとスマートフォンの両方に対応

単体の便利ツールではなく、7okenmで作ったものの一つとして見えるようにした。

公開して、次へつなげる。

公開時にはツールページ固有のtitle、description、canonical、OGP、WebApplication 構造化データを設定し、サイトマップにも追加した。

このツールで作った「ファイルを選ぶ」「ブラウザ内で処理する」「結果を保存する」という流れは、次のローカル処理ツールにも再利用できる。最初の一本として、7okenm Toolsの基準になった。