Docurain Labo

Docurainサービス開発日記

APIを微修正しました(xlsとxlsx)

小改良です。

現在、Excel形式での出力を行う場合のエンドポイントは、事前に保存されたテンプレートの場合

https://api.docurain.jp/api/xls/[テンプレート名]

となり、インスタントAPIだと

https://api.docurain.jp/api/instant/xls

を指定します。

ただ、これはExcel 2007以降の拡張子(xlsx)と紛らわしく、 xlsxlsx と誤記してしまいがちなため(私自身もやってしまったことがあります…)、 xlsxxls と指定したときと全く同じ動作をするようにしました。

つまり、上記のエンドポイントは

https://api.docurain.jp/api/xlsx/[テンプレート名]

https://api.docurain.jp/api/instant/xlsx

と完全に同一です。

この二つは出力タイプをExcel 2007形式で出力するか、それとも97-2003形式で出力するのかを選択するものでは ありません ので注意してください。

Excel形式で出力した結果がExcel 2007形式であるのか、それとも97-2003形式であるのかは使用したテンプレートがどちらであったかに依存します。Excel 2007形式のテンプレートを使用して出力すればExcel 2007形式で出力されます。97-2003形式のテンプレートを使用して出力すれば97-2003形式で出力されます。

こういった細かい変更はブログでは紹介せずドキュメントの更新にとどめていましたが、これからは積極的にブログでも告知していきますので、Docurainユーザーの方はぜひ当ブログも継続的にウォッチして頂ければ幸いです。

よろしくお願いします!

DocurainはWord形式のテンプレートでも帳票出力が可能になります

近日公開予定の新機能です。DocurainはExcelを帳票デザインに使用することができる帳票出力サービスですが、この度Word形式のテンプレートでも帳票出力が可能になりました。

最初に実装された機能は、プレースホルダにデータを差し込み、 PDF / Word (docx) / SVG / その他画像形式で出力するというものです。

今回は機能を使って見るために、以下のような簡単な契約書のようなものを作成してみました。

f:id:withpop:20190805152952p:plain

動的に値を差し込む部分には %{date} のようにプレースホルダを記述しておきます。スタイルが適用されていてもそれが保持されたまま出力されることを確かめるために、書面下部にある住所氏名などの欄は適当にスタイルを適用させています。

また、これは1ページのみですが、もちろん複数にまたがるような文書も出力可能です。

差し込むデータはExcelテンプレートを使用するときと同じように、任意の形式のJSONとして記述します。今回は以下のようなデータを使用してみます。

{
    "date": "令和1年8月1日",
    "contractor": {
        "address": "東京都 新浜区 風の谷 12丁目34",
        "name": "猫丸商事",
        "representativeName": "多摩 三毛太郎"
    },
    "orderer": {
        "address": "東京都 勝節市 崖の上 2丁目3-1 10F",
        "name": "株式会社 ピッコロ",
        "representativeName": "紅豚 三郎"
    },
    "content": [
        "猫じゃらしにじゃれつく",
        "愛想をふりまく",
        "頭を撫でさせる"
    ],
    "payDateLimit": "当日の業務終了",
    "fee": "カリカリ1日分",
    "courtName": "勝節市動物愛護センター"
}

以上のWord文書とJSONデータを使用してPDF出力用のAPIを叩くと…

f:id:withpop:20190805154004p:plain

こういった感じでPDFのデータがレスポンスとして返ってきます。

罫線や表で構成されるいわゆる「帳票」はエディタがグリッドで構成されるExcelと相性が良いのですが、Excelで一般的な「文書」を使うのは不可能ではないものの使いづらいシーンがあります。

具体的には、Docurainではこれまでも契約書の類を出力されるような用途で使われることがありました。契約書を書くのにExcelを使うというのは、不可能ではないものの普通は正当な文書作成ソフトであるWordを使いたいですよね。今回、Word文書をテンプレートに使用できるようになることで、より広いシーンでDocurainが便利に使えるようになるはずです。

SVG形式に対応しました

こんにちは。久しぶりの投稿となってしまいました。 Docurainに関しては順調に利用量が増えつつあり、嬉しい限りです。

この度、SVG形式の出力とSVG形式の画像の差し込みに対応しました。

Docurainでは元々、PDF / Excel / PNG / JPEG / GIF 形式での出力が可能でしたが、ここに今回SVGが加わったことになります。

一応説明しますと、SVG(Scalable Vector Graphics)は汎用的なベクターグラフィック形式で、レイヤーやラスタ画像の埋め込みなどにも対応しています。ベクター形式なので印刷や高DPI環境でもきれいな表示が可能です。XMLで定義されており、HTML上にインラインで埋め込むことも可能で、JavaScriptやCSSとの親和性も高いです。

Docurainからの出力でベクタ形式での出力ではPDFが存在しましたが、PDFは単体でダウンロードして扱うには特に問題ないものの、何か既存のシステム(Webシステム、Windowsクライアントアプリなど)と組み合わせると面倒です。帳票を出力したいというシステムでは、既存の自システム上でプレビューを表示させたいとかいう要求はよくあることでしょう。

Webブラウザ上で別ウィンドウで開くのではなくページの一部分に表示させたいといった場合は不可能ではないものの、ブラウザごとの挙動の差が大きいのである程度の試行錯誤が必要になると思われます。各種ネイティブアプリにおいても、PDF表示のためのコンポーネントを使用するか(有償のものが多い印象)、もしくはWebView的なもの(C#ならばWebBrowserコントロール)を利用することになると思われます。後者の場合はやはり試行錯誤が必要になるでしょう。

そこでSVGであればHTML上では通常の画像とほぼ同じように利用できるため、かなり扱いやすくなります。帳票としての用途だけでなく、1日単位、1時間単位などで更新される1複雑なグラフをWebシステム上で表示したい、といった用途でも使いやすくなります。

ということで使ってみます。使うデータは前回の記事で作成したものです。

出力した結果は以下です。

おっ、余談ですがSVGな画像にCSSでshadowを落としていると要素ごとにちゃんと影が落ちるんですね。考えてみれば当たり前なのですが、初めて見たので感動しました。これを覚えていると表現の幅が広がりそうだな~と思いました。

ページを拡大表示して描画がなめらかになっていることを確認してみて下さい。

ちなみに出力ファイルサイズはPDFよりも大きくなる傾向があります。PDFの場合はテキストはそのままテキストデータ(と埋め込みフォント)として残っていますが、SVGの場合はすべての文字がパスに変換されますので。たとえば上記のガントチャートは310KBですが、PDFで出力したところ17.4KBで済みました。

続いて、SVG形式の画像の埋め込みを試してみます。

Docurainでは帳票テンプレートをExcelで、データをJSONで流し込みます。BASE64エンコードした画像をJSONに設定することで画像も動的に帳票に流し込むことができます。たとえば、何かの帳票の担当者氏名の横にそれぞれの担当者の印影を出したいとか…言われそうだよね?それ、意味あるの?って思うかも知れないけど、とりあえず言われそうだよね?そんなときでも大丈夫です。

ただ、SVG画像を動的に流し込む場合は、画像はラスタ形式に変換されます。これは、ExcelがSVGに対応していないためです。

とりあえずやってみましょう。以下のSVG画像を表示してみます。

使用するのは下記のようなごく簡単なテンプレートです。

f:id:withpop:20190710154155p:plain

実際にSVG形式で出力した画像が以下です。

拡大すると、テキスト部分はベクターになってますが、差し込んだSVG画像はラスタライズされているのがわかると思います。

今回使用したデータはこちらからダウンロードできます。

登録不要のお試しページではSVG画像が出力できないため、アカウント登録が必要です。

こちらから登録して、ぜひお試し下さい!


  1. Docurainは出力回数とデータ転送量に応じた課金方法なので、リアルタイムに更新されるデータを表示するには注意が必要です

Docurainで手軽にガントチャートを出力してみる

「帳票開発は面倒くさい」というのは古来、万葉集にも書かれている事実でありますが、その中でも特に面倒な類の帳票の一つがガントチャートだと思われます。

意外と面倒くさいガントチャート

私のこれまでの帳票開発経験を振り返ってみても、ガントチャートを出力したいというケースは結構多いんですよね。なにか長い期間をかけて行うプロジェクトは必ず工程管理が必要です。そして工程管理でよく使われる図の一つがガントチャートです。

しかしながら、意外と業務でガントチャートを扱うのは面倒くさいのです。

ガントチャートを扱うための選択肢として、ぱっと思いつくものは下記のとおりです。

  • Microsoft Project
  • Open Project
  • Redmine
  • Excel(+ VBA)
  • JavaScriptライブラリ

MS ProjectやOpen Projectははガントチャートのみならず、一般的にプロジェクト管理で必要になるようなリソース管理(平準化)、コスト管理、EVM(Earned value management)などなどの多数の機能が盛り込まれており、使用する場合も例えばPMBOKに記載されているようなプロジェクト管理の基礎知識が要求されます。したがって、ただ「ガントチャートを出力したい」という用途では重厚すぎる場合がほとんどでしょう。

Redmineに関してはプロジェクト管理ツールとして紹介されることも多いですが、基本的にはプロジェクト管理というよりはチケット管理のためのツールであるので、用途にフィットしないケースも多いと思われます。

「とりあえずガントチャートを描きたい」という用途ではExcelでそれを行うことが多いのではないでしょうか。ITエンジニアの皆さんであれば、一度はExcel VBA等々を応用して作成されたガントチャート作成ツールを用いてガントチャートを書いたご経験があると思います。

Excelは誰もが扱え、比較的簡単にデザインすることができます。ただ、Excelでの管理はプロジェクト管理上の重要なパラメータがExcelのファイル内に入ってしまっているという関係上、

  • Excelデータは編集を繰り返すと壊れることもあり、データストアとしてお粗末
  • データの再利用性があまりに低い(基幹システムと連携しにくい)
  • ビューとデータが一緒くたになって保守しにくい

というあたりが問題になるでしょう。

一方、世の中には手軽にガントチャートを描画できるJavaScriptライブラリがいくつか存在します。これらを使用してブラウザ上でガントチャートを表示するのは、これまで挙げた選択肢の中ではおそらく最も手軽で、かつ、システムの中でビューの責務だけをシンプルに実装できる方法なのであるべき姿に近いと考えられます。

ただし、それはJavaScriptライブラリが提供する表示フォーマットで合意が得られれば、の話です。実際には運用を重ねていく過程で使用しているJavaScriptライブラリでは容易に対応できない要求仕様が盛り込まれ、それなりに作り込みが必要になってくるはずです。印刷やPDF出力が要求されたときに困るという点も挙げられるでしょう。方法としてはブラウザの印刷機能に依存することになりますが、そもそもほとんどのライブラリは印刷までは想定していないはずで、印刷時にレイアウトが崩れるという可能性は十分に考えられます。

ではどうすればいいのか…。

Docurainでガントチャートを出力する

Docurainを使えば上記で述べたような課題は概ね解決でき、「とりあえずガントチャートを出力したい」という要求にフィットするはずです。

Docurainは帳票テンプレートをExcelでデザインできるので、今もしExcelでガントチャートを運用しているという場合にはそれを流用して最小限の実装量で基幹システムと連携できます。Docurainでの帳票出力はREST APIでテンプレートと挿入するデータを送信し、出力結果のバイナリ(PDFやExcel、画像など)を受け取るというだけの仕組みなので、ビューの責務を完全に分離できます。

というわけで、作ってみました。以下が今回つくったテンプレートです。

f:id:withpop:20190528173653p:plain

流し込むデータは下記のようなJSONとしてみました。 tasks という配列に、それぞれタスクの名前と担当者、開始日、終了日が入っているだけのシンプルな構造です。

{
    "projectName": "株式会社 FooBar様 取材記事公開スケジュール",
    "startDate": "2019/04/01T00:00",
    "tasks": [
        {
            "name": "取材",
            "lead": "高崎",
            "start": "2019/04/01T00:00",
            "end": "2019/04/08T00:00"
        },
        {
            "name": "記事本文作成",
            "lead": "高崎",
            "start": "2019/04/09T00:00",
            "end": "2019/04/15T00:00"
        },
        {
            "name": "記事レビュー",
            "lead": "岡田",
            "start": "2019/04/15T00:00",
            "end": "2019/04/20T00:00"
        },
        {
            "name": "撮影写真レタッチ",
            "lead": "山下",
            "start": "2019/04/09T00:00",
            "end": "2019/04/20T00:00"
        },
        {
            "name": "記事公開準備",
            "lead": "篠田",
            "start": "2019/04/21T00:00",
            "end": "2019/04/22T00:00"
        },
        {
            "name": "記事公開",
            "lead": "篠田",
            "start": "2019/04/23T00:00",
            "end": "2019/04/23T00:00"
        }
    ]
}

これでDocurainのAPIに対してリクエストを投げると以下のような出力結果が返ってきます。

f:id:withpop:20190528173452p:plain

解説

ではどんな仕組みになっているのか説明していきます。

f:id:withpop:20190528174338p:plain

#set($e=$ENTITY) は私が半ば癖のように書いている文です。Docurainの帳票テンプレート中ではJSONのルートオブジェクトは $ENTITY という名前で参照できますが、この名前が長いので $e として参照したいためにこのように $e という変数に代入をしています。

${e.projectName} はルート直下のprojectNameというキーの値を参照するという意味です。

$e.startDate も同様ですが、こちらは日付として整形して表示できるようExcel側で書式設定をしています。

以下の黄色部分は日付欄です。

f:id:withpop:20190528174838p:plain

一番左に開始日を挿入し、その他のセルは左のセル+1の値を表示するようにして開始日以降の日付を入力しています。

続いて #foreach です。

f:id:withpop:20190528174151p:plain

この #foreach は直感的にも明らかと思いますが、 tasks 配列の要素のぶんだけ、 #end までの行を繰り返し表示します。 各行では、タスクの名前と担当者、開始・終了日時を表示しています。

Docurain側の処理は以上で、あとはExcel固有の機能で帳票を作り込んでいます。

ガントチャート上の開始日~終了日までのラインや、土日(非稼働日)の背景色はすべて条件付き書式で実現しています。まず非稼働日の背景色について説明します。これは以下のような条件付き書式を設定しています。

f:id:withpop:20190528175126p:plain

INDIRECT(ADDRESS(7,COLUMN())) は、その列の7行目の値を参照する動作になります。7行目にはその列での日付が格納されています。 WEEKDAY は引数で与えられた日付に対する曜日を数値で返却します。これで、「特定の曜日だった場合に書式を適用する」という処理が可能です。

次はガントチャートの作業期間を示す線を条件付き書式で実現します。これは、下記のような11行目が非表示になっています。

f:id:withpop:20190528175647p:plain

11行目は「この日は作業期間に含まれるか否か」をTRUE/FALSEで示しています。

=AND(INDIRECT(ADDRESS(ROW()-1,4))<=INDIRECT(ADDRESS(7,COLUMN())), INDIRECT(ADDRESS(ROW()-1,5))>=INDIRECT(ADDRESS(7,COLUMN())))

という式は長ったらしいですが、その列が示す日にちは開始日以上かつ終了日以下であるか、を評価しています。

その下の12行目(ガントチャートのバーを表示する行)には、以下のように「上のセルがTRUEならば書式を設定する」という条件付き書式が設定されています。

f:id:withpop:20190528180125p:plain

これでガントチャートのバーを表示させるしょりは完了です。

…と言いたいところですが、もう一つやらなければならないことがあります。12行目には下記のように、数式で空白文字を値として設定しています。

f:id:withpop:20190528180013p:plain

これは、Docurainでは「foreachによる繰り返しの中で値の入っていないセルには条件付き書式は設定されない」という仕様があるためです(直感的に必要な場所にだけ条件付き書式を設定している動作を意図したもの)。

と、以上のように説明が必要なややトリッキーな要素はあるものの、Excelの基本的な使い方を知っていて、かつ基本的なプログラミングの知識がある(foreachという制御構造を理解できる程度で良い)ならば誰でも簡単に実装ができることがわかると思います。

今回作成したテンプレートとデータはこちらからダウンロードできます。

また、以下のページの「お試しフォーム」から登録不要でいますぐにAPIをお試しすることが可能です(ただし透かしが入ります)。

docurain.jp

もしご興味があれば公式サイトよりアカウントを作成してみて下さい!支払い方法を登録しない限りは請求が発生することはありません。

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

前回の記事では本物の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業界の生産性を押し上げることが出来るだろう。と、そういう思いで日々開発を行っています。