Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

This article is a Private article. Only a writer and users who know the URL can access it.
Please change open range to public in publish setting if you want to share this article with other users.

More than 5 years have passed since last update.

JIC ... CSV ファイルの見た目を整形する

Last updated at Posted at 2015-01-31

JSON in CSV. これは CSV ファイル内に、その CSV をどのように見せたいのかという情報を JSON で書き加えて、CSV ファイルを出力するという開発者の利便性と、Microsoft Excel のようにリッチな帳票を必要としているユーザーの希望を実現するための提案と、それを実現させる為のアドインを提供するものです。

Description

アプリケーション開発者は、しばしば Microsoft Excel で閲覧あるいは編集可能な帳票を出力してほしいというユーザーの希望を聞くことがあります。そして多くの場合、アプリケーションから ".xls", ".xlsx" ファイルを出力する為に、なんらかのミドルウェアを導入することになります。しかし残念ながら(そして往々にして)完成するまでの間、出力するファイルには多くのバグが混入します。そのとき開発者はこんなダイアログを目にすることになります。

ファイル形式が無効です。

開発者は正しいファイルを作っているつもりなのに何が間違ったのか。不親切なことで有名なその会社のアプリケーションが表示する冷徹なダイアログは何も教えてくれません。そしてファイルが開けないためことは、その間違いを見つけることが困難であるということも示しています。優れた開発者でもこれには狼狽するか、少なくともストレスを感じます。

しかし CSV ならテキストエディタを用い内容を簡単に確認することができるためテキストとして書き出されることが多いであろうエラーメッセージを取得するのが容易になります。

また、もしそれが運用後に発見された潜在バグであることを考えた場合、破損したファイルを前に途方にくれるのは開発者よりも、データが参照できないことによりビジネスチャンスを逃してしまうユーザーです。しかし CSV なら、火急の場合に少なくともテキストエディタを用いてデータ内容を確認することだけはできます。

もちろん、通常は十二分に検証を重ねたシステムがリリースされ、そのようなことにはならないかもしれません。しかし今日、納期は縮まるばかり、いいえ、ビジネスの遅れによる損失と、潜在バグの混入による僅かなユーザビリティの低下を天秤にかけ、スピード感を優先させる案件が増えつつあることも考えれば、リスクを軽減する意味でも、データはプレーンテキストで出力できる CSV が見直されてもよいのでは
ないのでしょうか。

また多くの場合ユーザーの使用するマシンも CSV ファイルの整形を行うだけのマシンパワーは余るほどあります。かつて「シン=クライアント」が謳われ、サーバーに集中してしまった処理を、もう一度クライアントに戻してみてはいかがでしょうか。

それに CSV は Excel がインストールされていればダブルクリックで開くことができます。アドインをはじめにインストールする手順を除けば、ユーザーにとっての利便性は変わりません。

Why JSON?

最初は XML を考えていたのですが、もうそうなったら XML をそのまま Excel で開けばよいのではないかという気がしてきたのと、記述量が若干多いため採用をためらいました。

多くはスタイルを定めるのだから、CSS を使ってもよいかと思いました。しかしスタイルを適用する場所セルを定義するのは CSS 以外の記述に頼らざるを得ず(知らないだけかもしれませんが)、そうなると複数の記法が混在してしまう。それは避けたい。

しかしながら JSON 以外にも魅力的なデータ形式は数多くあります。CSV ファイルに情報を付加するというこのソリューションの有用性は他のデータ形式を使っても損なわれるものではありません。

Requirement

CSV を出力するシステムのユーザーが Microsoft Excel を持っていることが必要です。もしビュワーだけなら期待する動作はしないでしょう。

また、ほかの Office Suite を使用している場合、別途、それらに適したアドインの開発が(あるいはいずれ誰かが作ってくれるのを待つことが)必要になります。

Usage

使用法、JIC で出来ることを下記に例示します。

CSV の中で JIC を示す。

CSV ファイルの中にいきなり JSON コードが出てきても厳しいので、XML ライクにタグを書き、その中に JSON コードを記述してください。
将来の為に、バージョン番号を書き入れることも出来ます。

jic_tags
<jic version="1.0">
...
</jic>

オブジェクトの配列

JSON コードは、オブジェクトの配列として記述します。全てのオブジェクトは "type" を持ちます。

"type": "range"

"range" オブジェクトは必須属性として "address" を持ちます。この "address" は Excel と同じように記述できます。そして、"style[]" を記述できます。

font-bold_and_normal.csv
Bold-Test,normal
<jic version="1.0">
[
    {
        "type": "range",
        "address": "A1",
        "style": {
            "font-weight": "bold"
        }
    }
]
</jic>

上の例にある CSV をレンダリングすると、以下のようになります。

font-bold and normal.png

"style[]" の例

"rowHeight" および "colWidth"

行高さと列幅を設定します。

width_and_height.csv
rowHeight = 50,
,colWidth = 25
<jic version="1.0">
[
    {
        "type": "range",
        "address": "A1",
        "style": {
            "rowHeight": "50"
        }
    },
    {
        "type": "range",
        "address": "B2",
        "style": {
            "colWidth": "25"
        }
    }
]
</jic>

結果:

width and height.png

"font-*"

フォントの装飾をします。

font-x.csv
Bold & Italic
Red & under_line
xlThemeColorAccent2
<jic version="1.0">
[
    {
        "type": "range",
        "address": "A1",
        "style": {
            "font-weight": "Bold",
            "font-italic": "true"
        }
    },
    {
        "type": "range",
        "address": "A2",
        "style": {
            "font-color": "#FF0000",
            "font-underLine": "1"
        }
    },
    {
        "type": "range",
        "address": "A3",
        "style": {
            "font-themeColor": "6"
        }
    }
]
</jic>

結果:

font-x.png

"frame-*"

枠線を描画します。

frames.csv
,
,,frame-top,
,<-frame-left,,frame- left->
,,frame-bottom
,
,,frame-mid-*
,
,
,
,
,
<jic version="1.0">
[
    {
        "type": "range",
        "address": "C2",
        "style": {
            "frame-top": "1"
        }
    },
    {
        "type": "range",
        "address": "B3",
        "style": {
            "frame-left": "1"
        }
    },
    {
        "type": "range",
        "address": "D3",
        "style": {
            "frame-right": "1"
        }
    },
    {
        "type": "range",
        "address": "C4",
        "style": {
            "frame-bottom": "1"
        }
    },
    {
        "type": "range",
        "address": "A7:E11",
        "style": {
            "frame-mid-h": "1"
        }
    },
    {
        "type": "range",
        "address": "A7:E11",
        "style": {
            "frame-mid-v": "1"
        }
    }
]
</jic>

結果:

frames.png

"text-align" および "text-valign"

テキストの配置を制御します。

text_align.csv
text-align: left,text-align: right,text-align:center
text-valign: top,text-valign: middle,text-valign: bottom
<jic version="1.0">
[
    {
        "type": "range",
        "address": "A1",
        "style": {
            "text-align": "left",
            "colWidth": "25"
        }
    },
    {
        "type": "range",
        "address": "B1",
        "style": {
            "text-align": "right",
            "colWidth": "25"
        }
    },
    {
        "type": "range",
        "address": "C1",
        "style": {
            "text-align": "center",
            "colWidth": "25"
        }
    },
    {
        "type": "range",
        "address": "A2",
        "style": {
            "text-valign": "top",
            "rowHeight": "50"
        }
    },
    {
        "type": "range",
        "address": "B2",
        "style": {
            "text-valign": "middle"
        }
    },
    {
        "type": "range",
        "address": "C2",
        "style": {
            "text-valign": "bottom"
        }
    }
]
</jic>

結果:

text_align.png

"type": "class"

よく使うスタイルを一つの "class" として定義し、繰り返し使うことも出来ます。

class.csv
Number,Name
1,Andy
2,Bob
3,Cristy
<jic version="1.0">
[
    {
        "type": "class",
        "name": "indexStyle",
        "style": {
            "font-weight": "bold",
            "background-color": "#0000DD",
            "frame-all": "1",
            "text-align": "center"
        }
    },
    {
        "type": "class",
        "name": "dataStyle",
        "style": {
            "frame-all": "1"
        }
    },
    {
        "type": "range",
        "address": "A1:B1",
        "class": "indexStyle"
    },
    {
        "type": "range",
        "address": "A2:B4",
        "class": "dataStyle"
    }
]
</jic>

結果:

class.png

Install

Excel アドインのインストール方法に従ってください。詳細は割愛します。

Contribution

公開されている以下のソースコードを借用しています。

JSONLib

Dictionary Class in VBA instead of Scripting.Dictionary

Licence

私が開発した部分は MIT ライセンス
とします。

借用している部分のソースコードはそちらのライセンスに従ってください。

Author

TachyPochy

0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?