Docurain Labo

Docurainサービス開発日記

【新機能】カウンターが利用できるようになりました

前回の記事では本物のExcel時刻表を作りました。

blog.docurain.jp

この中でセルの横方向に配列の内容を表示していくために、 $idx = 0 と、変数を宣言して参照した後に1ずつ数を増やしていくという処理を書きました。

f:id:withpop:20190331114440p:plain

f:id:withpop:20190331114706p:plain

ただ、 $idx = $idx + 1 という書き方は若干の煩わしさを感じてしまいますよね。弊社エンジニアの間でも話題となり、新しい機能として実装することとなりました。

カウンター

#set($idx = $Numbers.counter()) としてカウンターオブジェクトを生成した後、 $idx.next で参照する度、 0, 1, 2, 3, ... が得られます。C言語等の後置インクリメント相当の動作になります。

これを利用すると、

f:id:withpop:20190402164626p:plain

という簡潔で直観的な表記で済みます。

カウンターを使用したExcel時刻表のテンプレートとデータは(こちら)https://docurain.jp/wp/wp-content/uploads/2019/04/zikokuhyou2.zipからダウンロードできます。(すでにカウンターは利用可能です)

関数としては、

  • $idx.current : 現在の値を参照
  • $idx.next : 値を参照した後にインクリメント(後置相当)
  • $idx.prev : 値を参照した後にデクリメント(後置相当)
  • $idx.increment : インクリメントした後に値を参照(前置相当)
  • $idx.decrement : デクリメントした後に値を参照(前置相当)

が利用できます。

日夜アップデートしてます

Docurainはもともと、弊社が受託開発で使用するために作成したライブラリの一つでした。弊社エンジニアが実際に使い続けた経験をフィードバックして成長しており、今後もそれは続きます。

個人的には「良いソフトウェアシステムを開発するにはまず自分自身がユーザーでなくてはならない」との考えを持っていますが、Docurainはそれを地で行くサービスとなっております。

最も生産性の高い帳票エンジンを目指して日々開発しています(現段階でもかなり高い生産性を誇っていると自負していますが)ので、気になった方は是非公式サイトからユーザー登録してお試しください。

私が本物のExcel時刻表ってやつを見せてあげますよ

こないだ、こういうツイートを目にしました。

よくある駅時刻表ですが、この左下をよく見るとExcelのフッターが記載されています。ということはこの時刻表、Excelで書いていたのか…という驚きが話題を呼んだわけです。

Excelの表現力ってかなり高く、特にこういう行列が整った日本人好みのキッチリしたレイアウトを作るにはExcelが得意とするところだと思います。

「普通はこういうものはIllustratorで作る」みたいな意見も見かけましたが、Adobe Illustratorでこういうのを書くのって意外に面倒くさいと思います。グリッド(行列)で表現可能なものはグリッド付きのエディタ、つまりExcelで書いたほうが個人的には楽だと思いますね。

と、考えていたところ、以下のような記事が公開されました。(当時。リンク先はInternet Archive)

web.archive.org

 -時刻表はエクセルで作ってあるんですか?  名鉄広報部:「違います!当社では独自のシステムで時刻表を制作しているんですが、印刷する際にエクセルに貼り付けて印刷しているだけなんです。これまでに問い合わせ? いえいえ、今回が初めてです。まさかそんな噂になるとは…。よく気付かれましたね」

そういうわけで残念ながら(?)この時刻表は独自のシステムで出力したものをExcelに貼り付けているだけ、つまり時刻表自体はExcelで作られてなかったとのことです。

そうですか…。個人的にはExcelで書くのもアリというか、十分検討するに値する選択肢と思っていたんですよね。

…いや、Excelで作られた時刻表がないなら私が本当にExcelで作られた時刻表を作ればいいのでは?それが本物のExcel時刻表になるのでは?というのが今回の試みです。

本物のExcel時刻表を作る

このブログはDocurain(下記)

docurain.jp

の(いわゆる)エンジニアブログなのでDocurainを使って進めます。DocurainはExcelで帳票をデザインできるクラウドサービスです。

Excelで帳票をデザインし、データを流し込んでPDFやExcelデータとして出力することができます。

ただExcelで作るなら誰でも作れますよね。でも動的にデータをはめ込んで出力できたらすごいのではないでしょうか。テンプレ化しておいて時刻表が更新されるたびにExcelから時刻表が作れたなら…。

そんなこともできますよ。そう、Docurainならね。

では作っていきましょう。

大雑把なレイアウトを組む

先程のツイートにあった写真を参考にして、大雑把にここまで作りました。

ちなみに、今回の時刻表に出てくる会社名・駅名などはすべて架空のものです。

f:id:withpop:20190330123407p:plain

「あれ?時刻表なのに時刻が5時台しかないのでは?」

と思いましたか?大丈夫です。Docurainはテンプレートの一部分をデータに応じて繰り返す機能があります。後々設定していきましょう。

時刻(分)の書式をなんとかする

実際の時刻表を見ると、字の色や背景色、枠の色で電車の種類(特急、快速、普通など)を表現するのが一般的なようですね。まずは、時刻(分)の書式を設定することをなんとかしたいと思います。

動的に背景色や字の色、枠の色や有無などを表現するにはどうすればいいでしょうか?Excelなら条件付き書式を使うのが良さそうです。

こんな条件にしました。

f:id:withpop:20190331113154p:plain:h300

INDIRECTとADDRESSを用いて「一つ上のセルがxxxxという文字列ならば」という条件にしています。条件の一覧は

f:id:withpop:20190331113054p:plain

こんな感じで、「上に入っている値に応じて適切な書式を設定する」という条件付き書式を設定しました。書式を指定したい上のセルに書式を指定するためのテキストを入れれば、動的に書式が変更できます。

条件の適用範囲は必要な範囲全部を含めています。こうすると、関係ないところまで書式が適用されている可能性がありますが、書式を指定するテキストを他のセルで出現しないようなものに設定すれば問題ないでしょう。

では試してみます。

f:id:withpop:20190331113601p:plain:w200 f:id:withpop:20190330124349p:plain:w200 f:id:withpop:20190330124404p:plain:w200

上に入っているテキストに応じて書式が自動設定されます。

ただ、このままでは書式を指定するテキストまでもが表示されてしまいます。これは後でこの行の高さをゼロにすることで非表示にして対応します。

データ

大雑把に作ったら今度はデータを用意しておき、データ構造を意識しつつ作成していきましょう。流し込むデータはJSONで定義します。

{
  "hour_table": [
    [{ "minute": 5, "dest": "新山村", "style": "r" }, { "minute": 10, "dest": "新山村", "style": "" }],
    [{ "minute": 5, "dest": "新山村", "style": "" }],
  ]
}

Docurainでは任意の形式のJSONを利用できるのでなんでもいいのですが、今回はこんな感じの表現にしてみました。

hour_table が2次元配列になっていて、そのまま時刻表に対応するイメージです。分数、行き先、表示書式(テキストで指定)というデータを持っています。

このデータをExcelに流し込んで柔軟に時刻表を出力するということをやってみます。

時刻の繰り返しを何とかする

次はデータの量に応じて行を動的に増やす処理を入れます。

DocurainではExcel中でテンプレートエンジン的な記述ができるようになっており、今回の処理は foreach によって実現できます。

f:id:withpop:20190330125504p:plain

プログラマの方ならば何をやっているのか直感的に理解していただけるものと思います。要するに、 hour_table の要素数分、 foreachend で囲まれた部分を繰り返し表示するということですね。

試しにDocurainでデータを流し込んでPDFを作成してみましょう。以下はDocurainのAPIを簡単に叩くためのコンソールで、ExcelとJSONをアップロードするとExcelにJSONデータを流し込んでPDF(など)として出力してくれます。

f:id:withpop:20190330125735p:plain:h400

適当に5つ分要素を作って実行すると、

f:id:withpop:20190330125803p:plain

5行に増えました。ただ、これでは中の文字列が固定ですべて5時台の時刻表がとして出力されますので、あとで動的に値を変える必要があります。

ただ、その前にもう一つやることがあります。実際の時刻表を見ると、行方向に見やすいように背景が白と淡色のストライプになっています。これも表現できるようにしましょう。

f:id:withpop:20190330130011p:plain

安易な方法ですが、白と灰色の2色の背景を持った二行をデータ数分出力するようにしました。

ただ、これだと偶数分の行しか表示できないです。これを回避するためにはセルの背景を条件付き書式で変更するか、またはDocurainの機能でデータに応じて背景色を変える機能があるのでそれを用いれば良いでしょう。

一度の foreach の繰り返しで2行を表示させるため、 foreach で繰り返す対象の配列も chunk() 関数で2個にまとめておきます。

${e.hour_table.chunk(2)} と記述することで、 hour_table 内の配列が二個ごとにまとめられて $r に渡されるようになります。

動的に値を表示する

さて、まずは時の表示を実装しましょう。今回は単純に

{
  "hour_start": 5,
  "hour_table": [
    [{ "minute": 5, "dest": "新山村", "style": "r" }, { "minute": 10, "dest": "新山村", "style": "" }],
    [{ "minute": 5, "dest": "新山村", "style": "" }],
  ]
}

hour_start というデータを持ち、ここに表示された時刻から1時間きざみで表示させることとします。

f:id:withpop:20190330130625p:plain

時刻表示させるセルの内容はこんな感じです。

まず、上方の2行目のセルで hour_table を-1した上で hour に代入しておきます。そこから、この時刻のセルを表示させるたび、 hour に1を追加した上で表示を行います。

これでもう一度出力してみましょう。

f:id:withpop:20190330131112p:plain

ちゃんと時刻のところが5, 6になりました。では続けてほかの分のところも実装していきましょう。

f:id:withpop:20190330131323p:plain

f:id:withpop:20190330131359p:plain

$r には2行分のデータが入っており、上の行は $r[0] , 下の行は $r[1] にデータが入っています。2つの行で添字をいちいち指定したくないので、最初に $s という変数にその行で表示させるべきデータを代入しておきます。

時刻表の分の列を仕上げる

とりあえず20個の分表示ができる(1時間に20本までの発車時刻を書ける)領域を取りました。

ある時刻に到着する列車時刻は配列の中に格納されていますので、左から右に向かって参照する要素の添字を一ずつ増やした ( $list[0] , $list[1], ... , $list[19] )参照をセルに書いていけばOKです。

が、堪え性のない子が作業しているので20個を手動でプチプチ編集していくのは無理でした。

面倒くさいので添字を変数にして参照するたび1ずつ増やすようにします。

f:id:withpop:20190331114440p:plain:w400

一番最初のセルで #set($idx=0) としておき、添字を参照したあとに $idx = $idx + 1 とします。

f:id:withpop:20190331114706p:plain:w400

二個目のセル以降はすべてこのようにセルを参照して一つ加える、という記述を単純にコピペすればいちいち添字を $list[0] , $list[1], ... , $list[19] と20個も書いていかなくて済みます。

凡例とQRコード

実際の時刻表を見ると、右下に凡例があったのでこれも書きます。

DocurainではExcelのシェイプもそのまま出力できるので(制限はありますが)、特に何も考えずシェイプを組み合わせて書きます。

f:id:withpop:20190330132439p:plain

そして実際の時刻表の右側には…ああっ!QRコードがありました。QRコードで「ホームページでも確認できます」と誘導しています。

ガラケーがQRコード読み取りに早くから対応してたからだと思いますが、こういう場面ではQRコードが利用されるケースが多いです。個人的には短縮URLでもいいと思うんですが、見かけるのはQRコードが多い印象があります。

しかしExcelはQRコードに対応していない…やっぱりExcelで時刻表を作るなんて無理やったんや…。

大丈夫です!!!Excelが対応してなくてもDocurainがQRコードやバーコードの表示に対応しています。

f:id:withpop:20190330132925p:plain

このように #QR_CODE という特殊な文字列(マクロ)が入ったシェイプを用意すると、それがそのままQRコードに変換されます。

備考と停車駅案内

停車駅案内(下記画像のようなやつ)に関してはシェイプで書いてもいいのですが、今回はとある機能を説明したいためにIllustratorで描きました。

f:id:withpop:20190330133324p:plain

(図を描くよりも架空の駅名を考える方に時間がかかってしまいました)

作成した画像はExcelにそのまま貼り付けてもいいのですが、Docurainにデータとして画像を差し込む機能がありますので、せっかくなのでこれも使ってみましょう。

f:id:withpop:20190330133540p:plain

このように #FITTED_IMAGE と記述したシェイプを配置することで、このエリアに動的に画像データを流し込んでサイズを整えて表示できます。流し込むデータはBASE64でエンコードした文字列をJSONに指定します。

備考欄は単なるテキストなので行ごとに分けてテキストを入力していくようにします。

ここまでで一回出力してみましょう。

f:id:withpop:20190330133814p:plain

ちゃんと停車駅案内の画像とQRコードが出力されていますね。

仕上げ

なんとなくロゴも出力してみようかなと思ったので架空の社名をでっちあげてかっこいいフォントで出力してみました。

f:id:withpop:20190330134025p:plain

透過PNGも正しく解釈して透過した状態で出力できます。

完成

それっぽいデータを増やして…できました!!!

f:id:withpop:20190331115237p:plain

すごい!それっぽい!時刻表っぽい!自分で出力してびっくりしました。これくらいのクォリティがあれば実用に耐えうると思うのですがどうでしょうか?

今回作成したExcelデータと流し込むJSONデータはこちらです。

Docurainのアカウントを取得(初期費用無料)するか、以下のリンク先にあるフォームにアップロードすることですぐに試すことができます(透かしが入ります)。

帳票開発を、もっと簡単に「Docurain-ドキュレイン-」|帳票開発エンジン

まとめ

Excelで時刻表は作れる。

自分で言うのもアレですが、これって実はすごいことだと思うんですよ。これを作るのにかかった時間って、ブログ書く時間を含めて半日くらい、実質の作業時間はおそらく4~5時間しかかかっていないのではないでしょうか。無駄に駅名とかロゴとか手を加えていなければ更にもう少し早く作れたと思います。

これをその他のサービスやシステムと比較することは中々難しいと思いますが、しかしそれでもDocurainでの帳票作成効率はかなり高いはずだと我々は自負しています。

ちなみにDocurainでは1帳票5円~という低い料金で利用することができます。具体的には出力ファイルサイズで決まり、今回の帳票はギリギリで5円に収まらず6円でしたが、まぁそれでも6円ですよ!!奥さん!!今後どんなに時刻表が変わったとしても、このテンプレートがあれば毎回6円1で新しい時刻表を出力することができます!

帳票でお困りの方、時刻表をExcelで作ることを無上の喜びと感じる奇特な方がいらっしゃいましたら、ご連絡お待ちしております。


  1. 使用した月は最低利用料金が加算されるので請求額が6円になるわけではないですが、それでも数百円といったオーダーです

はじめましての記事

はじめまして。DocurainというWebサービスを開発している由利と申します。 ネットではwithpopという名前で長いこと活動してきました。

最初の記事なので簡単にここは何のブログなのか・何を書くのかなどを説明していきたいと思います。

Docurainとは何か

帳票作成サービスです。

帳票というのは、請求書や領収書など、「紙に印刷して使用することを想定した書式の出力」です。わかりやすく言うと、表やグラフなどのリッチな表現でPDFやExcel、画像などをレンダリングし、出力する処理一般を指します。

Docurainが提供するサービスをごく簡潔に説明すると、「Excelで作成した帳票テンプレートにデータ(JSON, CSV, 他)を差し込みPDF/Excel/画像として出力」するサービスです。

誰でも使い慣れたExcelでデザインし、かつExcel内にテンプレートエンジン的な機能を取り入れたことで柔軟な表現を可能としたところが売りです。その売りを紹介するというのがこのブログの一つの目的です。

書くこと

  • Docurainサービスの紹介
  • Docurainの使い方やTipsの紹介
  • Docurain開発中で学んだ技術やサービスなどの紹介
  • Docurainを利用した事例やサンプルなどの紹介
  • DocurainやExcelを利用した何か面白いことを配信

ただの技術ブログや開発ブログじゃなくて読んでいて面白い、笑えるような記事を書くことを目指しています。

書く人の自己紹介

由利 誠と申します。2019年時点で34歳児です。

f:id:withpop:20190328182348p:plain
withpop

こういう自画像?で活動してきました。

もともとメーカーで働いており、原発、医療、SIerっぽいことなど、雑多な領域でプログラマをやってきました。C#, Java, Kotlin, Scala, JavaScriptあたりが得意です。C, C++, Pythonあたりも打てますがそこまで得意じゃないです。Excel VBAは好きじゃないです。

子供が2人います。

書いている人のDocurainへの思い

メーカーを辞めてからDocurainの開発にJoinし、コアエンジン以外のほぼ全ての開発に携わってきました。

Docurainは私がメーカーを辞めたきっかけとなったシステムです。私が帳票開発で悩み、苦戦していたところを有るべき姿で実装していると感じました。

日本は紙文化が根強く残っており、時にそれは撲滅させるべき対象として語られます。少なくとも、ITの普及と推進によって紙は完全に無くならないまでも主流にはなりえないでしょう。今はその過渡期にあります。

しかしながらその過渡期は、「帳票出力を楽にする」というビジネスが成り立つ程度には長く続くと我々は考えています。しかしながらこの、「いずれ滅ぶことが予想されている紙文化」という考えが、残念なことに帳票出力という分野において技術革新を阻んできた要因だと考えています。

紙文化はいずれなくなると予想されていますが、未だなお続いています。だから、みんな「面倒だけど必要な作業」という位置づけで仕方無しに作っているのが大まかな現状と言ってよいと思います。

ただ、ネガティブなことばかり書きましたが、紙で出力したほうが圧倒的に分かりやすい場面というのも存在すると考えています。 紙という物理媒体を手にして、そこにペンやマーカーでアナログ的に書き込み、それを保管してデスクに並べて眺めるという行為には、タブレットやマルチタッチディスプレイでは代替できない何かが潜んでいるとも(個人的には)感じています。

いずれ無くなるがそれは明日や来年ではない。それに紙が必要になる分野が無くなる事はない。だから我々は帳票出力を楽にすることに価値を感じます。

帳票出力はオシャレでセクシーな技術ではないですが、必要とされています。

帳票出力を簡単にして本業に集中してもらえればみんなが少しずつ幸せになるだろう。それは小さいかも知れないけど、集まれば日本のIT業界の生産性を押し上げることが出来るだろう。と、そういう思いで日々開発を行っています。