Docurain Labo

Docurainサービス開発日記

Unicode絵文字に対応済みです

以前、Docurainが「外字」または異体字セレクタ(IVS)に対応済みであることお知らせしましたが、 Unicode絵文字の出力と絵文字に対しての文字列操作も対応しています。

ja.wikipedia.org

早速、絵文字を出力してみよう

テンプレート・JSONは以下のように作成しています。

テンプレート

https://s3.ap-northeast-1.amazonaws.com/site.docurain.jp/blog/2021/02/スクリーンショット-2021-02-26-14.32.12.png

JSON

{
    "農家": "👩‍🌾",
    "家族": "👨‍👩‍👧",
    "One": "1️⃣",
    "自転車": "🚵‍♀️",
    "国旗": "🇯🇵🇯🇵🇯🇵",
    "農家_es": "\ud83d\udc69\u200d\ud83c\udf3e",
    "家族_es": "\ud83d\udc68\u200d\ud83d\udc69\u200d\ud83d\udc67",
    "One_es": "1\ufe0f\u20e3",
    "自転車_es": "\ud83d\udeb5\u200d\u2640\ufe0f",
    "国旗_es": "\ud83c\uddef\ud83c\uddf5\ud83c\uddef\ud83c\uddf5\ud83c\uddef\ud83c\uddf5",
    "農家_ucd": "\\U+D83D\\U+DC69\\U+200D\\U+D83C\\U+DF3E",
    "家族_ucd": "\\U+D83D\\U+DC68\\U+200D\\U+D83D\\U+DC69\\U+200D\\U+D83D\\U+DC67",
    "One_ucd": "\\U+0031\\U+FE0F\\U+20E3",
    "自転車_ucd": "\\U+D83D\\U+DEB5\\U+200D\\U+2640\\U+FE0F",
    "国旗_ucd": "\\U+D83C\\U+DDEF\\U+D83C\\U+DDF5\\U+D83C\\U+DDEF\\U+D83C\\U+DDF5\\U+D83C\\U+DDEF\\U+D83C\\U+DDF5"
}

JSONはこのようになります。 以下のそれぞれで設定が可能です。

  • 絵文字
  • Unicodeエスケープシーケンス
  • Unicode(UTF-16)

上記テンプレート・JSONで出力してみましょう。

https://s3.ap-northeast-1.amazonaws.com/site.docurain.jp/blog/2021/02/スクリーンショット-2021-02-26-14.39.34.png

問題なく絵文字が出力されています。(macOS上のExcel)

ただし、Windows版のExcelやPDFでは以下のように表示されます。

Windows Excel PDF
https://s3.ap-northeast-1.amazonaws.com/site.docurain.jp/blog/2021/02/スクリーンショット-2021-02-26-14.41.47.png https://s3.ap-northeast-1.amazonaws.com/site.docurain.jp/blog/2021/02/スクリーンショット-2021-02-26-14.42.42.png

このように、Docurainとしては絵文字の出力に対応していますが、 表示する側がまだ対応できていないことがあります。

絵文字の文字列操作

次にこの絵文字に対しての文字列操作です。

例えば

"🍣と🍺".length

とJavascriptで実行すると、3ではなく5が返ってきます。

これは↓の以前のブログでもご紹介している通り、🍣や🍺はサロゲートペアであるためです。 blog.docurain.jp

また、"👨‍👩‍👧と🏖".length"👩‍❤️‍👨で🎡".length は どちらも11となります。

これは 👨‍👩‍👧 や 👩‍❤️‍👨 は

👨‍👨‍👦 = 👨 + 👧 + 👩

👩‍❤️‍👩 = 👩 + ❤️ + 👩

のようにできている絵文字だからです。

"🍣と🍺".length

"👨‍👨‍👦と🏖".length

"👩‍❤️‍👨で🎡".length

いずれも3が欲しいですよね...

対応してます!

Docurain独自の関数

Docurain独自の関数u_lengthを使えばOKです。

実際に確認してみましょう。

  • テンプレート

https://s3.ap-northeast-1.amazonaws.com/site.docurain.jp/blog/2021/02/スクリーンショット-2021-02-26-18.13.00.png

  • JSON
{
    "arg1": "🍣と🍺",
    "arg2": "👨‍👩‍👧と🏖",
    "arg3": "👩‍❤️‍👨で🎡"
}
  • 出力結果

https://s3.ap-northeast-1.amazonaws.com/site.docurain.jp/blog/2021/02/スクリーンショット-2021-02-26-18.13.26.png

それぞれ3となりましたね!見た目上の文字数でカウントすることができました。

Docurainでは、以下のようなユニコード専用の文字列操作を用意しています。 JSONで送ったデータの文字列オブジェクトのメソッドとして呼び出すことができます。

関数名 説明
u_length ユニコードを考慮した文字列長を返す。サロゲートペアや異体字セレクタなどの 書記素クラスタ(grapheme cluster) の文字を全て1文字とカウントする。例えば"🍣と🍺と䄂\uDB40\uDD01"の長さは5とカウントする。
u_charAt(int index) ユニコードを考慮した文字取得メソッド。オリジナルのString#charAtとは異なり、このメソッドの戻り値は「1文字」を表す文字列になる。書記素クラスタの文字は1文字とカウントする
u_toCharArray() ユニコードを考慮して文字列を文字に分解する。オリジナルのString#toCharArrayとは異なり、このメソッドの戻り値は「1文字」を表す文字列の配列になる。書記素クラスタの文字は1文字とカウントする。
例えば`'🍣と䄂\uDB40\uDD01'`.u_toCharArray()の結果は["🍣","と","䄂\uDB40\uDD01"]になる
u_substring(int from), u_substring(int from, int to) ユニコードを考慮した部分文字列取得メソッド。書記素クラスタの文字は1文字とカウントする
u_hasIVS() 異体字セレクタを含む文字列か判定する
u_removeIVS() 異体字セレクタを除去して通常の字体のみにする

最低限必要なものは用意しましたが、不足がありましたら随時追加していきます。

絵文字やを扱う帳票作成が必要な際はぜひ試してみてください!

他にも様々な機能がありますので、ぜひアカウント無料登録してマニュアルを参照しお試しください。

Windowsの「外字」とは?基礎から解説 & Docurainでの対応

Docurainは、純粋な意味の外字も使用可能です。検証結果を以下に記載します。

「外字」とは

「外字」とは、本来システムに登録されていない文字のことを指します。よくある例としては、漢字の異体字などです。これをシステムから利用できるようにするための機能が各種OSには備わっていたりします。これが本来の意味ですが、私の経験上では単に「マイナーな異体字」を「外字」と表現する人も多々見かけてきました。

異体字の多くはUnicodeでもすでに定義されていますので、「外字でなくてUnicodeを使いましょう」という運動が昨今進んでいます。以下はMicrosoft ブログから引用です:

Windows と日本語のテキストについて - Windows Blog for Japan

Unicode を使用することにより、人名地名に使用される漢字等を正確に表現するニーズにも対応することができます。従来、このような用途では外字を使用するケースが多くありましたが、現在「外字でなければ表示できない文字」をお使いのお客様は限定的です。Unicode に定義されており、Windows に同梱のフォントを使用して標準の状態でも表示可能な文字を、外字にいわば「再定義」してお使いのお客様が非常に多くいらっしゃいます。

(中略) 現在外字を使用している国としては日本が突出しており、外字が既にレガシーな機能であることもお伝えしなければなりません。

(中略) 外字を使用していることや、テキストを Shift-JIS で保存していることがクラウド移行の大きな障壁となるケースが急増しています。

ということです。つまり、

  • 外字はレガシーな機能であり、移行が必要
  • 異体字はUnicodeで表現可能なことがほとんど

ということが言えると思います。

今日、システム上で異体字を扱わなければならないケースが生じた際には、

  • Unicodeに対応したシステムを構築する(UTF-8, サロゲートペア、Unicodeエスケープなどへの対応)
  • IPAmj明朝などの異体字が表現できるフォントを利用できるようなシステム設定を行う

という対応をすることが正攻法になるでしょう。なぜなら、これが将来的な技術的負債となる可能性が大きいからです。「外字」として独自の文字を定義するのは最後の手段と考えたほうが良さそうです。

なお、Docurainは既にIPAmj明朝には完全対応しています。

blog.docurain.jp

今回の検証は、何らかの理由によりIPAmj明朝が使えないケースのための予備調査となります。

Windowsにおける外字機能

Windowsにおける外字機能としては、古くから「外字エディタ」が提供されてきました。この機能は現在のWindows10からも利用可能です。試しに使ってみましょう。

使う場合は、Windowsメニューから「外字」で検索するか、Winキー+Rを押してから「eudcedit」と入力してEnterを押します。

f:id:withpop:20210426114421p:plain

すると、こういった画面が表示されます。

f:id:withpop:20210426114542p:plain

一度も使ったことがなければ、ここには灰色の空のマスが並んでいます。このE000というのはUnicodeです。E000〜F8FFまでは「私用領域」として定められており、通常ここに文字(グリフ)が割り当てられることはありません。名前の通り、グローバルに何かを定めるためのものではなく、ユーザーが定義して使うために領域を残しているわけです。

つまり、これは「外字」そのものですね。

f:id:withpop:20210426115135p:plain

特定のUnicode コードを選択すると文字のエディタが立ち上がります。ここで任意の文字を作成して定義できます。ここでは、ShiftJISでF042、UnicodeでE002の場所におにぎりを表す漢字を独自に定義しました。これ一文字で「おにぎり」と読みます。私が勝手に定義して私的に利用する漢字です。

続いて今回は「ドラえもん」「うずまき」という漢字を作ってみました。

では定義した文字はどのようにして利用すれば良いのでしょうか?この文字が「おにぎり」と読むことをシステムは知りません。なので、IMEから「おにぎり」と入力して変換してもこのおにぎり漢字が出てくることはありません。

Microsoft IMEの「IMEパッド」は任意の文字を入力できるのでこれを利用すると入力することが出来ます。

f:id:withpop:20210426115904p:plain

「Unicode(基本多言語面)」→「私用領域」とたどると今回定義した文字が出てくるので、ここをクリックするとその文字が入力できます。

f:id:withpop:20210426120235p:plain

「おにぎり」と入力したらこの文字が表示されるようにしたい場合は、IMEから単語登録すればよいでしょう。外字エディタではその文字の「読み」は気にしません。私用領域の特定のコードに編集した文字を割り当てる、それだけを外字エディタは行います。

では、Windowsではどのようにしてこの機能を実現できているのでしょうか。

実は、外字エディタで編集した文字は c:\windows\fonts\EUDC.TTE というファイルとして保存されます。これは拡張子がTTEとなっていますが、実態はTrueTypeフォントのようです。

Windowsでは、表示中のフォントで定義されていないおにぎりグリフ(E002)があった場合にEUDC.TTEで定義されている文字にフォールバックするように設定されているようです。

ここまでの話をまとめると、外字エディタとは

  • 独自のグリフをドットで作成し
  • 私的領域の任意のコードに割りあて
  • Windowsがそのコードの表示を行う時にEUDC.TTEをフォールバックフォントとして設定する

ような機能であると言えます。

もちろん、ここで定義した文字はいわゆる機種依存文字になりますから、他のコンピュータでは表示できません。機種依存どころか特定のマシン依存です。他のコンピュータで表示するためにはEUDC.TTEを表示するコンピュータにインストールする必要があります。

逆に言えば、EUDC.TTEを表示するコンピュータにインストールすればおにぎり漢字も表示できるはずですね。

EUDC.TTEを調査する

ではこのフォントを調査してみましょう。このフォントをファイルとして抽出するためにはコマンドプロンプトでコピーする必要があります。

f:id:withpop:20210426120918p:plain

エクスプローラで c:\windows\fonts\ を開くとフォントのリストを表示する特殊な表示となってしまい、EUDC.TTEが見つかりませんでした。

ここからはLinux(Ubuntu)で作業をします。まずはFontforge(フォント編集ソフト)でフォント情報を見てみましょう。

f:id:withpop:20210426121039p:plain

フォントファミリーは「EUDC」、スタイルは「Regular」であることが分かります。ベンダIDには「RICO」(ママ)の文字が入っていました。この機能はリコー(RICOH)が開発に携わっているのでしょうか?

f:id:withpop:20210426121403p:plain

定義されているグリフを見ると、確かに私的領域に今回作成した3文字が入っています。その他は全部空欄でした。

f:id:withpop:20210426121545p:plain

ちなみに、ここまでのスクリーンショットをご覧になったところでお気づきの方も多いと思われますが、編集はドットで行った(つまりラスタ画像)のに、フォントはそれを平滑にしたようなベクタ画像になっています。もともと外字エディタってこの仕様だったのでしょうか?中々すごい機能が備わっていますね。

Docurainの外字対応

ここまででWindowsの外字とは何か?ということを説明しました。

冒頭に説明したとおり、外字はレガシーな機能で使うのを避けてUnicodeと対応フォントに移行すべきではありますが、「ではそうしましょう!」で何も問題なくプロジェクトは実際少ないだろうことは皆さんお察しのとおりです。

というわけで今回、Docurainでも外字対応が可能かどうかを検証しました。と、言えどもここまでに調べた仕様から察するに特に問題なく表示できるでしょう。

どのような設定を行ったかはDocurain内部システムの構成の話になるので省きます。

今回は以下のようなテンプレートを作成しました。

f:id:withpop:20210426122216p:plain

text1〜3に任意の文字を入力して表示するだけです。ただ、任意のフォントからフォールバック可能であることを検証するためにそれぞれ違うフォントを設定しています。

使用するエンティティデータは以下のようになります。

f:id:withpop:20210426122340p:plain

外字は対応するコードのUnicodeエスケープで記述します。必ずUnicodeエスケープで記述しなければならないというわけではありませんが、開発ツールやIDEなどの親和性を考えると楽なのはUnicodeエスケープで記述する方法です。

f:id:withpop:20210426122622p:plain

出力したPDFファイルです。フォント埋め込みなので、ここで出力したファイルはあらゆるデバイスで同じように表示できます。

こちらからダウンロードして皆さんの環境でも同様に表示できることを確かめてみて下さい。

まとめ

今回はWindowsの外字機能の概要をまとめた上で、DocurainからもWindows外字エディタで作成した文字が利用可能であることを確かめました。

もし、帳票開発をもっとモダンなものに置き換えたいが外字対応がネックになっている…という方はぜひご相談下さい。

1セル内の複数フォントスタイル設定が可能になりました

Docurainではこれまで一つのセル内で複数のフォントスタイルを設定できない制限事項がありましたが、それが可能になりました!

これまでは...?

例えば以下のように文字の部分は明朝体、数字部分はゴシック体にしたい場合にこれまではセルを分ける必要がありました。

  • 想定出力結果

https://s3.ap-northeast-1.amazonaws.com/site.docurain.jp/blog/2021/01/スクリーンショット-2021-01-14-14.29.35.png

  • テンプレート(これまで)

https://s3.ap-northeast-1.amazonaws.com/site.docurain.jp/blog/2021/01/スクリーンショット-2021-01-14-14.31.23.png

はい、面倒ですね!

これが今回の対応により、一つセル内でそれぞれフォント設定を行えば良いことになります。

https://s3.ap-northeast-1.amazonaws.com/site.docurain.jp/blog/2021/01/スクリーンショット-2021-01-14-15.10.49.png

いくつかのフォントスタイルで確認

これまでは一つのセル内では先頭行のスタイルがセル内のすべてのテキストに適用される仕様でしたが、上記の通りテンプレートで設定したように出力されますので、いくつかのフォントスタイルで確認してみます。

  • テンプレート

https://s3.ap-northeast-1.amazonaws.com/site.docurain.jp/blog/2021/01/スクリーンショット-2021-01-14-15.06.34.png

  • JSON
{
    "font1": "IPA ゴシックフォント",
    "font2": "IPA P ゴシック フォント",
    "font3": "IPAex 明朝 フォント",
    "font4": "IPAmj明朝 フォント",
    "font5": "Rounded M+ フォント",
    "font6": "Noto Sans CJK JP フォント",
    "font7": "刻明朝 フォント"
}
  • 出力結果
https://s3.ap-northeast-1.amazonaws.com/site.docurain.jp/blog/2021/01/スクリーンショット-2021-01-14-15.06.54.png https://s3.ap-northeast-1.amazonaws.com/site.docurain.jp/blog/2021/01/スクリーンショット-2021-01-14-15.07.00.png

このようにテンプレートの設定のまま出力されるようになりました。

他にも様々な機能がありますので、ぜひアカウント無料登録してマニュアルを参照のうえ、お試しください。

Power Automate DesktopとDocurainはもちろん連携できます

[忙しい方向け]
MSのRPAであっても依然として苦手*1な「帳票」はDocurainと連携することで簡単に解決できます!




本日(日本時間2021年3月3日)より、Windows 10 を利用しているユーザーは追加費用なく個人レベルでのデスクトップ操作を自動化させるためにPower Automate Desktop が利用可能となりました。

このPower Automate Desktopから、Docurain APIを利用して帳票を作成できることを確認しました!

以降の手順は、Power Platform(Power Apps、Power Automate)を利用できることが前提です。 Power Platform の利用開始についてはこちらのOffice 365 E3へサインアップを参考にしてください。 (引用: Windows 10 さえあれば追加費用なくPower Automate Desktop を使ってタスクや業務の自動化が可能に - 吉田の備忘録)))

flow.microsoft.com

早速やってみよう

*windows10上での手順です

Power Automate Desktop セットアップ

Power Automate Desktop をダウンロードし、インストーラを起動します。

  • インストール

    指示に従ってインストールを進めます。

    https://s3.ap-northeast-1.amazonaws.com/site.docurain.jp/blog/2021/03/スクリーンショット-2021-03-03-12.19.43.png https://s3.ap-northeast-1.amazonaws.com/site.docurain.jp/blog/2021/03/スクリーンショット-2021-03-03-12.20.02.png https://s3.ap-northeast-1.amazonaws.com/site.docurain.jp/blog/2021/03/スクリーンショット-2021-03-03-12.20.18-1.png https://s3.ap-northeast-1.amazonaws.com/site.docurain.jp/blog/2021/03/スクリーンショット-2021-03-03-12.23.57.png https://s3.ap-northeast-1.amazonaws.com/site.docurain.jp/blog/2021/03/スクリーンショット-2021-03-03-13.44.18.png

  • Power Automate Desktop 起動

    https://s3.ap-northeast-1.amazonaws.com/site.docurain.jp/blog/2021/03/スクリーンショット-2021-03-03-13.44.18-1.png

    起動後にログインを求められるのでMicrosoftアカウントでログイン

    以上でセットアップ完了です。

デスクトップフローでデータ作成を自動化

Power Automate Desktopではデスクトップフローと呼ばれるローカル端末のあらゆる操作を自動化できます。

docs.microsoft.com

今回はこのデスクトップフローで端末上にある2つのデータ(Excel)を1つのデータにまとめ、そのデータとテンプレートファイルを元にDocurainのAPIにリクエストして帳票を作成します。

  • 新しくフローを作成

    https://s3.ap-northeast-1.amazonaws.com/site.docurain.jp/blog/2021/03/スクリーンショット-2021-03-03-14.59.56.png

    https://s3.ap-northeast-1.amazonaws.com/site.docurain.jp/blog/2021/03/スクリーンショット-2021-03-03-15.00.16.png

  • 取引先情報、注文情報の2つのファイルを1つにまとめます。

    取引先情報 https://s3.ap-northeast-1.amazonaws.com/site.docurain.jp/blog/2021/03/スクリーンショット-2021-03-03-20.45.14.png

    注文情報 https://s3.ap-northeast-1.amazonaws.com/site.docurain.jp/blog/2021/03/スクリーンショット-2021-03-03-20.44.24.png

  • デスクトップフローを作成し、取引先情報と注文情報をまとめたデータを保存します。
    *今回はデスクトップフローでDocurain連携についてのご紹介のため、データをまとめるフローについては詳細は省略します https://s3.ap-northeast-1.amazonaws.com/site.docurain.jp/blog/2021/03/スクリーンショット-2021-03-03-21.07.35.png

  • デスクトップフローを実行し、データを作成します

    注文情報に顧客情報を追加したものです https://s3.ap-northeast-1.amazonaws.com/site.docurain.jp/blog/2021/03/スクリーンショット-2021-03-03-21.18.50.png

Docurain連携

テンプレートはごく単純な請求書です。 https://s3.ap-northeast-1.amazonaws.com/site.docurain.jp/blog/2021/03/スクリーンショット-2021-03-03-21.35.11.png

デスクトップフローからDocurainと連携するには1つのフローを追加するだけ

システムタブ内にあるPowerShellスクリプトの実行をフローに追加して、curlでDocurainのレンダリングAPIへのリクエストを行いレスポンスをファイルに保存します。 https://s3.ap-northeast-1.amazonaws.com/site.docurain.jp/blog/2021/03/スクリーンショット-2021-03-03-21.25.38-1.png

https://s3.ap-northeast-1.amazonaws.com/site.docurain.jp/blog/2021/03/スクリーンショット-2021-03-03-21.46.19.png

以下のようなコードを記述しています。 *こちらはサンプルです

curl.exe -X POST https://api.docurain.jp/api/instant/pdf
  -H 'Authorization:token [トークン]'
  -H 'Content-Type:multipart/form-data'
  -F 'template=@template.xlsx;type= application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
  -F 'entity=@data.xlsx;type= application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
  -o output.pdf

最後に追加したら、フローを実行してみましょう。 https://s3.ap-northeast-1.amazonaws.com/site.docurain.jp/blog/2021/03/スクリーンショット-2021-03-03-21.56.20_2.png

上記のcurlで指定したパスでPDFが出力されました。 https://s3.ap-northeast-1.amazonaws.com/site.docurain.jp/blog/2021/03/スクリーンショット-2021-03-03-22.01.07.png

Power Automate Desktop x Docurainでできること

デスクトップフローでは、端末のあらゆる操作が可能ですので、もっと複雑なデータを結合させたりすることも可能です。

また、Docurain連携を行い帳票を出力した後、任意のオンラインストレージにアップしたりメールに添付することも可能です。

単純だけど面倒な作業はどんどん自動化して、重要な業務に集中しましょう!

他にも様々な機能がありますので、ぜひアカウント無料登録してマニュアルを参照しお試しください。

*1: 細かいレイアウト指定や大量出力を想定しています

異体字セレクタも出力可能です

以前、Docurainが「外字」に対応済みであることをお知らせしましたが、Docurainは異体字セレクタ(IVS)にも対応*1しました。

blog.docurain.jp

異体字セレクタ(IVS)とは

Ideographic Variation Sequence(異体字シーケンス)の略称で、異体字の関係に
ある文字に「異体字セレクタ」(VS / Variation Selector)というコード(枝番号)
を振ることで、より確実な文字情報の交換を可能にする技術のこと

ja.wikipedia.org

使用例

例えば、「尊」の異体字である

は対応するセルのフォントをIPAmj明朝にした上で、以下のようなJSONで表示できます。

https://s3.ap-northeast-1.amazonaws.com/site.docurain.jp/blog/2021/01/スクリーンショット-2021-01-12-19.06.11.png{ "str": "尊\uDB40\uDD04" } または { "str": "尊\\U+E0104" }

https://s3.ap-northeast-1.amazonaws.com/site.docurain.jp/blog/2021/01/スクリーンショット-2021-01-12-19.05.11.png{ "str": "尊\uDB40\uDD05" } または { "str": "尊\\U+E0105" }

Docurain独自の記述方法

上記 https://s3.ap-northeast-1.amazonaws.com/site.docurain.jp/blog/2021/01/スクリーンショット-2021-01-12-19.06.11.png のIVS(右側)について、本来であれば

{ "str": "尊\U+E0104" }

\(バックスラッシュ)は一つになるべきですが(実際これでもDocurainでは動きますが)、これはJSONエディタではエラーに判別され開発時に扱いづらいため、独自に { "str": "尊\\U+E0103" } でも受付可能にしました。

異体字セレクタ(IVS)のデータで出力してみよう

テンプレート・JSONは以下のように作成しています。
サンプルはこちらからダウンロードできます。

  • テンプレート https://s3.ap-northeast-1.amazonaws.com/site.docurain.jp/blog/2021/01/スクリーンショット-2021-01-13-15.25.17.png

  • JSON(IVSで記述)

{
  "str1": "\\U+E0103",
  "str2": "\\U+E0104",
  "str3": "\\U+E0105",
  "str4": "\\U+E0101",
  "str5": "\\U+E0100",
  "str6": "\\U+E0103",
  "str7": "\\U+E0101",
  ...省略...
}

出力結果は以下のようになります。

https://s3.ap-northeast-1.amazonaws.com/site.docurain.jp/blog/2021/01/スクリーンショット-2021-01-13-15.34.50.png

問題なく出力されていますね。

IPAmj明朝の文字一覧に存在するIVSの1万1,382文字は全て検証済みで出力可能です!

異体字セレクタ込みの文字列操作も簡単に

サロゲートペアを扱ったことがある方でしたらご存じの通り、 サロゲートペアが含まれた文字列は、もはや通常の「文字列」として扱うことができません。 なぜなら、サロゲートペアは「2文字で『1文字』を表す」という特殊な文字だからです。

例えば🍣や🍺はサロゲートペアです。なので、

"🍣と🍺".length

とJavascriptで実行すると、3ではなく5が返ってくるあたりで辛さがわかると思います。

先頭の1文字を切り取ろうとして、

"🍣と🍺".substring(0, 1)

とやると、"�"という壊れた文字が返ってくる*2わけです。ましてや、IVS文字は「3文字で『1文字』を表す」という世界なので、例えば

"🍣と🍺と䄂\uDB40\uDD01".length

9になるわけです。表示結果は5文字*3なのに。辛い。

そこでDocurainでは、ユニコード専用の文字列操作を用意しています。 JSONで送ったデータの文字列オブジェクトのメソッドとして呼び出すことができます。

関数名 説明
u_length ユニコードを考慮した文字列長を返す。サロゲートペアおよび異体字セレクタの文字は1文字とカウントする。例えば"🍣と🍺と䄂\uDB40\uDD01"の長さは5とカウントする。
u_charAt(int index) ユニコードを考慮した文字取得メソッド。オリジナルのString#charAtとは異なり、このメソッドの戻り値は「1文字」を表す文字列になる。サロゲートペアおよび異体字セレクタの文字は1文字とカウントする
u_toCharArray() ユニコードを考慮して文字列を文字に分解する。オリジナルのString#toCharArrayとは異なり、このメソッドの戻り値は「1文字」を表す文字列の配列になる。サロゲートペアおよび異体字セレクタの文字は1文字とカウントする。
例えば`'🍣と䄂\uDB40\uDD01'`.u_toCharArray()の結果は["🍣","と","䄂\uDB40\uDD01"]になる
u_substring(int from), u_substring(int from, int to) ユニコードを考慮した部分文字列取得メソッド。サロゲートペアおよび異体字セレクタの文字は1文字とカウントする
u_hasIVS() 異体字セレクタを含む文字列か判定する
u_removeIVS() 異体字セレクタを除去して通常の字体のみにする

最低限必要なものは用意しましたが、不足がありましたら随時追加していきます。



今回作成したサンプルは、無料トライアルページからも登録不要で試してみることが出来ます。 外字・異体字を扱う帳票の作成・出力が必要な際はぜひ試してみてください!

他にも様々な機能がありますので、ぜひアカウント無料登録してマニュアルを参照しお試しください。

*1:「対応しました」というか、元々IVSは対応済みだったのですが、完全対応済みであることを改めて検証しました

*2:サロゲートペアを構成する2文字の先頭の1文字だけを切り取っているから

*3:正確には「グリフ5個が表示される」

pptxテンプレート機能をリリースしました

本日は、非常に大きな機能追加をお知らせします💪


pptxでテンプレートを記述して*1新たにpptxを生成したり、Excelのテンプレートにpptxテンプレートを埋め込んで、動的な図形を出力することが可能になりました。

Excelに埋め込む*2場合、pptxファイルをOLEで埋め込むと画像として最終結果へ出力されます。

しかも、画像はベクターグラフィック形式*3のため、ピクセルパーフェクトな図表として埋め込まれる仕様です。



帳票に複雑な図表を入れることは多々あると思いますが、Excel上でこれを実現するとなると、かなり面倒ですよね...

それが、Docurainでpptxを使えるようになったため、ずっと簡単に複雑な図表を動的に差し込むことができるようになりました!

早速試してみよう!

まずpptxを作成します。

今回は以下のようなpptxを考えてみます。

サンプル(pptx,xlsx,json)のダウンロードはこちらです

https://s3.ap-northeast-1.amazonaws.com/site.docurain.jp/blog/2021/01/スクリーンショット-2021-01-12-14.58.20.png

  • テストの点数を横棒チャートで表示する
  • 点数に応じて横棒の長さが可変
  • 横棒のテキストで点数も表示する(「80点」のように)
  • 科目数は可変、1科目~4科目の任意

シェイプの表示非表示を制御する

https://s3.ap-northeast-1.amazonaws.com/site.docurain.jp/blog/2021/01/スクリーンショット-2021-01-12-14.58.47.png

棒チャートの2つのシェイプ(科目名表示部と棒チャート)をグループ化し、 グループ化されたシェイプに対して代替テキストで

#if(!%{科目4名称}) #REMOVE #end

と指定します。すると、 科目4名称が無ければこのシェイプを削除する という意味になります。

シェイプの大きさを可変にする

https://s3.ap-northeast-1.amazonaws.com/site.docurain.jp/blog/2021/01/スクリーンショット-2021-01-12-14.58.55.png

棒チャートの長さを点数に応じて可変にするため、棒チャートの代替テキストに以下のように指定します。

#SCALE(`%{科目4点数} / 100.0`, 1)

%{科目1点数} / 100.0は、マクロ#SCALE(number, number)を用いてシェイプの長さを動的に変更する指定について、 第一引数であるx軸方向の縮尺を計算する指示です。ここでは式リテラルを用いて簡潔に表現しています。

なお、100ではなく100.0なのは、整数と整数の除算結果は整数になる仕様のため、50/100 = 0ではなく50/100.0 = 0.5としたいためです。

JSONの用意

データのJSONを用意します。以下の通りです。

{
  "科目1名称": "算数",
  "科目1点数": 95,
  "科目2名称": "国語",
  "科目2点数": 70,
  "科目3名称": "理科",
  "科目3点数": 85
}

以上でpptxとデータの準備ができましたので、まずはこのpptxをテンプレートとして出力してみます。

https://s3.ap-northeast-1.amazonaws.com/site.docurain.jp/blog/2021/01/スクリーンショット-2021-01-12-14.41.41.png

データの通りシェイプや文字列が出力されましたね!

これでデータに基づいた動的な図を作成できました。

Excelテンプレートにpptxを埋め込む

次にExcelテンプレートを作成し、pptxを埋め込んで出力してみましょう。

[挿入]タブ -> [テキスト]グループ -> [オブジェクト] で↑で作成したpptxを選択し埋め込みます。 https://s3.ap-northeast-1.amazonaws.com/site.docurain.jp/blog/2021/01/スクリーンショット-2021-01-12-15.08.26.png

以下のようなExcelとなります。

https://s3.ap-northeast-1.amazonaws.com/site.docurain.jp/blog/2021/01/スクリーンショット-2021-01-12-14.43.44.png

このExcelテンプレート用にJSONを用意します。以下の通りです。

{
    "年度": 2,
    "学年": 5,
    "クラス": 1,
    "児童名": "佐藤 太郎",
    "科目1名称": "算数",
    "科目1点数": 95,
    "科目2名称": "国語",
    "科目2点数": 70,
    "科目3名称": "理科",
    "科目3点数": 85,
    "科目4名称": "社会",
    "科目4点数": 68
}

出力してみると...

https://s3.ap-northeast-1.amazonaws.com/site.docurain.jp/blog/2021/01/スクリーンショット-2021-01-12-14.45.02.png

問題なく出力されましたね。 図の変更時もpptxを編集して挿入し直すだけなので簡単にできます。

このPowerPointテンプレート・Excelへのpptx埋め込みにつきまして詳細はマニュアルもございますので、そちらも参照ください。(ログイン要)

今回作成したサンプルを、こちらのページからも登録不要で試してみることが出来ますので、気になったらぜひ試してみて下さい。

他にも様々な機能がありますので、アカウント無料登録してマニュアルを参照のうえお試しください。

*1:*.ppt形式は使用できません

*2:pptxを埋め込めるのはxlsxのみです

*3:具体的にはSVGです

わかりやすいテンプレートのために - 番号付き省略記法のご紹介

新年あけましておめでとうございます。 今年もDocurainは開発者の皆様をラクにする、便利な機能をどんどん開発していきます!

さて、本日は「番号付き省略記法」のご紹介です。

以前、省略記法を紹介しました。

今回はその省略記法で同時に複数のコンテキスト(省略記法の起点となるオブジェクト) を設定できるようにした番号付き省略記法を紹介します。

{
  "先月": {
    "売上": 1234,
    "来客数": 123
  },
  "今月": {
    "売上": 5678,
    "来客数": 456
  }
}

上記のようなJSONがある場合、テンプレート側で

#with(%{先月})

としてJSONの先月#WITH or #withの引数に指定すると、以下のように簡潔な書き方で参照できるようなります。

https://docurain.jp/wp/wp-content/uploads/2020/11/スクリーンショット-2020-11-05-11.14.34.png

これが省略記法です。

ただし、コンテキストを「先月」にすると、「今月」の売上は%{売上}では参照できないため

https://docurain.jp/wp/wp-content/uploads/2020/11/スクリーンショット-2020-11-05-11.15.35.png

のように書くことになります。

このようなケースで使えるのが番号付き省略記法です。

#with(%{先月})
#with2(%{今月})

とすることで

先月の売上は%{売上}、今月の売上は%2{売上}です

のように参照することが可能です。なお、番号は1から9まで使用できます。

https://docurain.jp/wp/wp-content/uploads/2020/11/スクリーンショット-2020-11-05-11.17.15.png

#with2で指定したオブジェクトは%2{XXXX}のように
#with3で指定したオブジェクトは%3{XXXX}のように
記述が可能になります。*1

このようにテンプレートを分かりやすく簡潔にするための機能も随時追加しております。

テンプレートは最大限シンプルにしていきましょう!

他にも様々な機能がありますので、ぜひアカウント無料登録してマニュアルを参照のうえ、お試しください。

*1:番号は1から9まで指定可能です。0は無指定と同義です。すなわち#with0(...)と#with(...)は同じです。