React-pdfで作る！バス運行系統図

バスマップAdventCalendar12日目の記事です🎉

• バスマップAdventCalendar
  • https://adventar.org/calendars/5075
• 2日目も書いたので見てね👉 https://qiita.com/kotodu/items/915d5b2506736ad9e62c

ちなみに3日遅刻です😇
突然仕事と資格勉強とクリスマス準備で忙しくなってつらい😇

はじめに

どれだけWebにおけるバスマップの試みが流行しようと、なかなかバスマップと切り離せないもの。それが紙です。
そして、紙に印刷しやすいフォーマットの代表格、PDFもまた、バスマップを語る上で外せません。

デザインソフトからPDF形式でバスマップを出力する際も、Excelで作成した時刻表をPDFにしてネットで公開する際も、バス事業者が利用者向けにプレスリリースを用意する際も、PDFが主に使われます。

幅広く使われているので、もしプログラミング的にバスマップをPDFで生成できたら、とても便利です。
が、正直な所、日本語PDFとプログラミングは、かなり噛み合わせにくいです。

自分の卒業論文は、プログラミング的にバスマップを生成する試作アプリ制作なのですが、その時もひどい文字化けに悩まされ続けました。結局、「1度画像としてバスマップを生成し、それをPDFに張り付ける」という荒業で無理やり形にした苦い思い出があります。(今考えると、技術力不足の影響が一番大きかったですが)

そんな中、偶然最近、reactとPDFを組み合わせるライブラリ「react-pdf」で日本語が簡単に使えるらしいぞ、ということを知りました。実際に触ってみると、フォントをソースフォルダに置いて、あとはコードをゴリゴリ書けばOK。超便利！

ということで今回は、卒業研究のリベンジも兼ねて、React-pdfで運行系統図を作成してみたいと思います。

サンプル

王57系統の運行系統図PDFアプリを作ってみました👍
https://kotodu.io/react-route-guide/

出力PDF例-1

出力PDF例-2

設定画面

操作説明

サンプルを見ていただければ分かると思いますが、完成度が中途半端です😔
予定が急変し、作業時間を確保できず、予想していたクオリティまで到達できませんでした😔

ざっくり説明すると、

1. consumerKeyを入れる
2. getDataを押してAPI取得
3. 停留所を選択する
4. 通過停留所は灰色で、これから通る停留所は黒色で、系統パターンの運行系統図を表示する

というものです。

今回は東京公共交通オープンデータチャレンジよりデータを利用させていただきました。

(即興クオリティとはいえ、利用者に入力してもらう、という大変頭の悪いことをしたのは正直反省している🙄恥ずかしいから直したい🙄)

react-pdfの強み

エンジニア向け

ReactコンポーネントとしてPDFのコンテンツを記載できます。
ですので、繰り返し何かを表示したり、コンポーネントを使いまわしたり、といった辺りは非常に得意です。

例えば、系統情報から系統名を表示するのは

const a = (routePatterns: OdptBusroutePattern[])=>{
return (
    <>
            {routePatterns.map(pattern => {
                return (
                    <View>
                        <Text>{pattern["dc:title"]}</Text>
                    </View>
                );
            })}
    </>
)}

などの形で、系統名をPDF内に列挙できます。

また、画像配置も気楽です。今回の停留所画像は、画像で行っています。

Reactコンポーネントを組み合わせてPDFを気軽に作成できるのは、React-pdfの最大の強みだと思います。

利用者・デザイナー・バス事業者向け

Web上でバス停を選択したら、そのバス停にカスタマイズされたバスマップがPDFで出力される、といったアプリなどができます。

今回試作したアプリでも、各バス停に合わせて、作成されるPDF表示を変更できました。
データさえあれば、例えばそのバス停からの所要時間表・運賃表・時刻表・周辺の地図などもPDFに埋め込めます。(っていうサンプルを作りたかったのですが時間がなくてパスです😔)

運行系統図だけでなく、例えば地図ベースのバスマップのうち、付近を通るバス停だけ着色する、なんて処理もできます。いずれ作ってみたい。

終わりに

夢は広がりますが、時間は有限なので、予定日に間に合わなかったのは素直に反省です😇

技術情報

内部的には、react-pdfはpdfkitをうまい具合にreactでできるようにしているものなので、たぶんpdfkitでも、使い方によっては日本語PDFが作成できるはずです。那須や源真ゴシック以外日本語フォントが使えなかったと記すGitHubでのコメントもあり、実際、自分も他のフォントだとうまくいきませんでした。対応しているフォント/していないフォントがあるようなので、注意が必要です。
また、react-pdfはそろそろv2の正式版が出ます。制作者さんが多忙で、1年以上ベータ版を作成している様子でしたが、あとはドキュメント程度、というのが近況だそうです(GitHubのv2へのタスクを確認のこと)。SVG対応など、欲しかったけど微妙に今まで使えなかった機能が目白押しなので、こちらも注目です！

今回主に活用したreact-pdfはこちら

• https://react-pdf.org/