視覚障害者の利用しやすさを目指したチャート記述法─Markdownによる─ 関田 巖1），竹下 浩2） 筑波技術大学 保健科学部 情報システム学科1）　筑波技術大学 保健科学部2） 要旨：シンプルなテキストで構造的な文章を表現できるMarkdownやチャートを表現できるMermaidやPlantUMLを用いてチャートを表現することで，視覚障害者が清書されたチャートを生成でき，晴眼者とチャートを共有できるようにすることを目指した記述方法を紹介する。有効性についての評価は不十分な段階ではあるが，シンプルなテキストで記述されているため，書き方のルールを工夫し，なおかつ，視覚障害者が記述方法に慣れることができれば，有効性を期待できる。 キーワード：視覚障害，チャート，Mermaid，PlantUML，Markdown １．はじめに 　チャートやグラフは情報を視覚的に伝える重要な手段として，多くの分野で使用されている。視覚障害者にとって，これらを理解・生成する能力は，情報アクセスの平等性や就労の拡大，社会参加を強化する上で不可欠である。視覚障害者がチャートやグラフ，概念的スキルを獲得するには，特別な指導や訓練が必要となっている。 　視覚障害者のチャートなどの理解に関しては，立体図の認識や点図ディスプレイを使用した作図方法など，一部の先行研究が行われているものの，職場で用いられる清書されたチャートを描けるようになるまでには至っていない。 　清書されたチャートを晴眼者が簡便に記述する方法として，Markdown（マークダウン）記法[1]が知られている。本稿では，視覚障害者向けのチャート理解・生成のための表現方法として，Markdownで表現する方法に着目し，検討中の表現方法を複数種類紹介する。 　現段階では評価が不十分のため，視覚障害者にとってよりわかりやすい手法と，それを記述する方法，また，それらを学習しやすい教材作りについては，今後の課題である。 ２．準備 ２．１　概念図に重要なノードとリンク 　教育心理学では，概念図（概念をノードで表し，ノード間に関係のあることをリンク（線）で表し，その関係性の意味をリンクに付記する）の作成行動が知識の保持と伝達（有意味学習）に影響を及ぼすことが実証されている[2]。 ２．２　Markdownでのチャート表現 　Markdownは，軽量のマークアップ言語として知られており，書きやすく読みやすいプレーンテキストで，章立てや箇条書きなどの構造的な文書を記述することができる。そして，Markdownからは，HTMLの他，PDFやWordファイルなどへ変換するソフトウェア（pandocやVisual Studio Code（VSCode）[3]など）が開発されている。また，Markdownは拡張性も優れており，近年では，PlantUML[4]やMermaid[5]などの各種チャートを取り込んで，プレビュー，出力できる環境（VSCodeなど）が構築されている。 　このため，Markdownは多くの分野で利用されており，チャートを含めた文書を効率的に作成することのできる文書作成ツールとなっている。 　本稿でのプレビューされた画像は，VSCodeによるものであるが，Mermaidはウェブサイト[6]で，PlantUMLはウェブサイト[4]で見ることもできる。 ３．視覚障害者の利用しやすいMarkdownによるチャート表現 ３．１　概念の表現 　概念はチャートの中でのノードに相当し，概念には，他者から観測可能な概念と観測できない概念の２種類がある。観測可能な概念は四角い枠で囲んで表現し，観測できない概念は楕円もしくは楕円のような角の丸い枠で囲んで表現する。そして，枠の中に概念の名称を書く。 ３．１．１　観測可能な概念 　Mermaidでは，flowchartの中で，概念の名称を書けば，四角い枠で囲まれる。例えば，観測可能な「概念Ａ」では， flowchart 概念Ａ により，図１が描画される。 図1　「概念A」が観測可能であることを表す 　なお同じものを，以下の３．１．２のように概念ラベル付きで表現する方法もある。Mermaidのflowchartの中で，概念ラベル[概念の名称]を記述する。 ３．１．２　観測できない概念 　観測できない概念は，Mermaidのflowchartの中で，概念ラベル([概念の名称]) を書けばよい。ここに概念ラベルは，その概念を再び参照する際に用いられる名前であり，単に記述するだけならば短い記号などのほうが複数回記述するときに楽ではある。しかし，一般に短い記号から概念の名称を把握するのに負担が生じやすく，視覚障害者にとってなおさらである。そこで，概念ラベルから概念の名称を把握しやすくするために，以下のルール１を推奨する。 推奨ルール１ 「概念の名称」とできるだけ同じものを「概念ラベル」とする 例えば，Mermaidで観測できない「概念Ｂ」では， flowchart 概念Ｂ([概念Ｂ]) により，図２が描画される。 図2　「概念B」が観測できないことを表す 　なお，概念の名称や以下でのsubgraphの名称などに特殊な役割を持つ文字が含まれてエラーが生じる場合には，ダブルコーテーションで名称などを囲む。 ３．２　関係や推移の表現 　概念間に関係のあることをリンク（線）で表し，関係に向きがあるときは矢印で表す。 　また，概念が段階的に推移することを，太い矢印で表す。Mermaidでは，細線の矢印と太線の矢印とを表現できるが，プレビューした矢印を視覚的に区別することがしばしば困難であるため，ここでは点線と太線で表現する方法を提案する。 ３．２．１　概念間の関係 　例えば，「概念Ａ」から「概念Ｂ」に関係があるとき，Mermaidで flowchart LR 概念Ａ .-> 概念Ｂ により，図３が描画される。 図3　「概念A」から「概念B」に関係のあることを表す 　flowchartの後のLRはLeft to Rightの意味であり，後述のTDはTop to Downであるが，複雑なチャートの場合に，矢印の向きを制御することは難しい。Mermaidによる記述は，基本的に概念間の論理的な関係を示すためのものである。プレビューしたときの概念の位置関係は，チャートの内容などに依存する。 　関係に向きがない場合には，記号>を除く。例えば，図３において，「概念Ａ」と「概念Ｂ」を点線でつなぐには， flowchart LR 概念Ａ .- 概念Ｂ とする。 　概念間の関係がどのような関係なのかを明記する場合には，リンク（線や矢印）の後に記号｜を使って関係性を囲んで記述する。例えば，「概念Ａ」から「概念Ｂ」へ「関係Ｃ」があるとき，Mermaidで flowchart LR 概念Ａ .-> | 関係Ｃ | 概念Ｂ により，図４が描画される。 図4　「概念Ａ」から「概念Ｂ」へ「関係Ｃ」があることを表す ３．２．２　段階の推移 　例えば，「段階Ａ」から「段階Ｂ」へ段階が推移したとき太線で関係を示すため，Mermaidで flowchart LR段階Ａ ==> 段階Ｂ により，図５が描画される。 図5　「段階Ａ」から「段階Ｂ」へ段階が推移することを表す ３．３　概念の循環 　関係を表すリンクがループ状になっているとき，循環という。 　例えば，「概念Ａ」から「概念Ｂ」へ，「概念Ｂ」から「概念Ｃ」へ， 「概念Ｃ」から「概念Ａ」へ関係があるとき，Mermaidでは，個々の関係ごとに１行で書き合計３行で書くこともできるが，循環を明記するために１行で， flowchart LR 概念Ａ .-> 概念Ｂ .-> 概念Ｃ .-> 概念Ａ により，図６が描画される。 図6　「概念Ａ」，「概念Ｂ」，「概念Ｃ」の関係が循環していることを表す ３．４　１つの概念が複数の概念へ関係するとき 　１つの概念から２つの概念に矢印があるときを考える。例えば，「概念Ａ」から「概念Ｂ」に関係があり，「概念Ａ」から「概念Ｃ」にも関係があるときを考える。この場合，２つの関係を２行で記述してもよいが，直ちに複数の概念と関係のあることを把握できるようにするために，以下のルール２を推奨する。 推奨ルール２　１つの概念から複数の概念への関係があるとき，どのような関係かを明記する必要がないか，または関係性が同一ならば，関係先の複数の概念を記号＆を用いて列記する。 　例えば，「概念Ａ」から「概念Ｂ」にも「概念Ｃ」にも関係があり，どのような関係があるかを明記する必要がなければ，Mermaidで， flowchart LR 概念Ａ .-> 概念Ｂ & 概念Ｃ により，図７が描画される。 ３．５　比較 　選択枝Ａと選択枝Ｂを比較し，それぞれの選択枝を採用したときにどのような処理に進むのかを示すことを考える。現在，以下の複数の記述方法を検討中である。 ３．５．１　「比較」から始まる名称をsubgraphに使用 図7　「概念Ａ」が「概念B」にも「概念C」にも関係のあることを表す 　Mermaidのflowchartではsubgraphからendまでを１つの四角い枠に囲んで表現できる。そこで，subgraphの名称を「比較」から始めることで，比較であることを明示する。 　例えば，選択枝Ａと選択枝Ｂを比較し，選択枝Ａを選択したときには処理Ａとなり，選択枝Ｂを選択したときには処理Ｂとなるとき，Mermaidで， flowchart TD subgraph “ 比較：何々について” 選択枝Ａ .-> 処理Ａ 選択枝Ｂ .- > 処理Ｂ end により，図８が描画される。 図8　「選択枝Ａ」と「選択枝Ｂ」とを比較し，各々を選択したときに，各々「処理Ａ」，「処理Ｂ」が実行されることを表す 　図８で，選択枝の比較のみを強調する場合，subgraphで囲む範囲を選択枝だけにして， flowchart TD subgraph “ 比較：何々について” 選択枝Ａ 選択枝Ｂ end 選択枝Ａ .-> 処理Ａ 選択枝Ｂ .-> 処理Ｂ とすることもでき，図９が描画される。 図9　上記図８と同様な意味で，選択枝の比較のみを強調 ３．５．２　PlantUML のmindmapを使用 　PlantUMLのmindmapのリンクを矢印に変更することは困難であるが，リスト形式でチャートを表現できる。トップのノードを「比較」とすることで比較であることを表す。例えば，上記３．５．１と同じ意味のチャートは， @startmindmap * 比較：何々について ** 選択枝Ａ *** 処理Ａ ** 選択枝Ｂ *** 処理Ｂ @endmindmap により，図10が描画される。 図10　３．５．１と同じ意味を表すPlantUMLのmindmap 　もしも枠の形を全て四角に変更したい場合には，@startmindmapの直後に， を挿入すればよい。 ３．５．３　Markdownの箇条書きリストを使用（図ではない） 　図ではないが，本文を記述するときに使うことが見込まれるMarkdownでは，箇条書きリストを容易に記述できる。それを利用して「比較」を表現することもできる。例えば，上記５．３．１と同じ意味は， 比較：何々について - 選択枝Ａ 　- 処理Ａ 　- 選択枝Ｂ 　- 処理Ｂ により， 比較：何々について ●　選択枝Ａ 　　○　処理Ａ ●　選択枝Ｂ 　　○　処理Ｂ が表示される（ただし，実際に表示される●○は半分程度に小さい）。 ３．５．４　ExcelやMarkdownの表を使用（図ではない） 　図ではないが，表を表現する方法はいろいろあり，Excelがよく用いられている。Markdownでも表を表現できるが，視覚障害者にとって，Markdown の表からの把握はExcelから把握するよりも困難なようである。 参考までに，Markdownでの表は， | 選択枝A| 選択枝B| |---|---| | 処理A| 処理B| により生成できる。 　各処理の中でさらに条件で分類するときには，行方向の分割により分類することができる。 ３．６　分類 　複数の項目を，意味，形状など，各種見地から似ている仲間を近くに集めるという分類を考える。ここでも検討中の複数の記述方法を示す。 ３．６．１　subgraphでまとめる 　近いものを集めて，見出しをつけ，その見出しをsubgraphの名前にする。 　例えば，見出し1には項目aとbがあり，見出し2には項目cがあるとき，Mermaidで， flowchart subgraph 見出し1 項目a 項目b end subgraph 見出し2 項目c end により，図11が描画される。 図11　「見出し1」には「項目ａとｂ」があり，「見出し2」には「項目ｃ」があることを表す ３．６．２　PlantUMLの配置図を使用 　PlantUMLの配置図では，階層が深いほど下方に表出される。またノードの形は各種ある。ここでは角が若干丸い四角形（card）の例を示す。記号~~は点線を表す。 上記３．６．１と同じ意味を表すとき，PlantUMLでは， @startuml card 見出し1 card 見出し2 card 項目a card 項目b card 項目c 見出し1 ~~ 項目a 見出し1 ~~ 項目b 見出し2 ~~ 項目c により，図12 が描画される。 図12　３．６．１と同じ意味を表すPlantUMLの配置図 ３．７　見通し 　ある数値の変動の概要を視覚的に表現することを考える。ここでも検討中の複数の記述方法を示す。 ３．７．１　Mermaidのjourney diagramを使用 　Mermaidでは，journey diagramを使うと，簡潔に表記できる。journey diagramの見方は，矢印で推移のベースとなっている軸を表し，その下にある顔マークの位置と表情で数値の高さを表す。 　例えば，数値の見通しが，現在1%で，5年後に6%とすると，Mermaidで journey section 数値の見通し 現在:1: 数値１％ ５年後:6: 数値６％ により，図13が描画される。 図13　数値の見通しが，現在1%で，5年後に6%であることを表す ３．７．２　PlantUMLの配置図を使用 　上記３．７．１と同じ意味で，「数値１％」から「数値６％」への見通しを右上に向かう太矢印で示すことを考える。このためにPlantUMLの配置図を使用する。ただし，「数値１％」の下に「現在」を置き， 「数値６％」の下に「５年後」を置くが，さらに，「数値１％」の上に太矢印で連結して「数値６％」を置き，且つ，「現在」の右に矢印で連結して「５年後」を置くことを指定した，若干無理のある配置を指定することで，「数値６％」が「数値１％」の右上に来ることを期待している。 すなわち，PlantUMLで， @startuml usecase " 数値１％ " usecase " 数値６％ " rectangle " 現在" rectangle "５年後" " 数値１％ " ~~ " 現在" " 数値６％ " ~~ "５年後" " 数値１％ " =u=> " 数値６％ " " 現在" -r-> "５年後" @enduml により，図14が描画される。 図14　３．７．１と同じ意味を表すPlantUMLの配置図 ３．８　評価軸 　４つの領域をつくり，その中央に評価軸を明記し，複数の項目を配置したい。しかし，今のところ評価軸をMarkdownで明記することは難しい。そこで，評価軸を文字から類推してもらう方法を示す。 　例えば，評価軸１と２があり，評価軸１が大きく評価軸２が小さいところに項目A があり，評価軸１が小さく評価軸２が大きいところに項目Bがあるとする。MermaidのQuadrant Chartを用いると， quadrantChart title 評価軸１，２における項目Ａ，Ｂの配置 x-axis " 評価軸１が小" --> " 評価軸１が大" y-axis " 評価軸２が小" --> " 評価軸２が大" " 項目Ａ": [0.75, 0.25] " 項目Ｂ": [0.25, 0.75] により，図15 が描画される。 図15　「評価軸１」が大きく「評価軸２」が小さいところに「項目Ａ」があり，「評価軸１」が小さく「評価軸２」が大きいところに「項目Ｂ」があることを表す ３．９　組織図 　階層的に構成されている組織の組織図を考える。ここでは，PlantUMLの作業分解図wbs（work breakdown structure）を使用して木構造で表現する方法を示す。 　例えば，部１には課Ａ，Ｂがあり，部２には，課Ｃがあるとき，PlantUMLの作業分解図で， @startwbs * 組織名 ** 部１ *** 課Ａ *** 課Ｂ ** 部２ *** 課Ｃ @endwbs により，図16が描画される。 図16　「部１」には「課Ａ，Ｂ」があり，「部２」には「課Ｃ」がある組織図を表す 　その他，Markdownで階層構造を表現する方法は複数ある。例えば，前述のPlantUMLのmindmapを使う方法，Mermaidのflowchartのsubgraphを使う方法なども考えられる。 ４．Markdownからチャートを把握しやすくするための追加推奨ルール 　単純な図に対する推奨ルールは，前述の３．１．２や３．４で示した。ここでは，subgraphを複数用いて記述する際に推奨したいルールを示す。 　三森[7]の第３章にわかりやすく情報を組み立てるポイントが書かれている。これらの中から特に，「段階的に」，「大から小へ」に基づき，以下のルールを推奨する。 推奨ルール３　大局的なことから局所的なことへ順番で記述することを優先する。例えば，subgraphが入れ子構造になっている場合，外側のsubgraphの内側にあるsubgraphの内容は，外側のsubgraphの中に展開して記述することをせず，外側のsubgraphの記述の後に記述する。 ５．おわりに 　本稿では，清書されたチャートをMarkdownを用いてテキストで表記する際，視覚障害者にとってわかりやすいと思われる方法として，MermaidとPlantUMLによる記述法から一部を選択したものを紹介し，書き方に関する推奨ルールも提案した。しかし，実際に使いやすいかどうかについては，視覚障害当事者の職場で求められるスキルを訓練するサイト[8]において，ごく少数の評価を開始したばかりなので不明である。 　今後の課題として，多くの視覚障害者からの評価を受け，それに基づいて内容を精査すると共に，そのほかに必要なチャートの表記法などを追加していきたい。そしてわかりやすい学習教材を作っていきたい。 参照文献 [1] John Gruber, Markdown https://daringfireball.net/projects/markdown/ [2] Nesbit J. C. and Adesope O. O. Learning with Concept and knowledge maps: a meta-analysis. 2006; Review of Educational Research, 76 (3), pp.413-448 https://www.sfu.ca/~jcnesbit/research/NesbitAdesope2006.pdf [3] Visual Studio Code, https://code.visualstudio.com/ [4] PlatUML, http://PlantUML.com/ [5] Mermaid, http://mermaid.js.org/ [6] Mermaid Live Editor, https://mermaid.live [7] 三森 ゆりか，ビジネスパーソンのための「言語技術」超入門，中公新書ラクレ，2021 [8] 竹下 浩，関田 巖，一人で出来る！視覚障害者のためのスキルアップゼミ， https://www.cs.k.tsukuba-tech.ac.jp/labo/sekita/takeshita/training_alone/ Chart description method in Markdown aimed at ease of use for the visually impaired SEKITA Iwao1), TAKESHITA Hiroshi2) 1)Department of Computer Science, Faculty of Health Sciences, Tsukuba University of Technology 2)Faculty of Health Sciences, Tsukuba University of Technology Abstract: Markdown represents structured text with simple text, and Mermaid and PlantUML represent charts. This manuscript introduces description methods that aim to enable the visually impaired to generate clean charts and to share charts with people without visual impairments using Mermaid and PlantUML. Although the effectiveness of these methods has not yet been fully evaluated, they are expected to be effective if writing rules are devised and if visually impaired persons become familiar with the methods because they are written in simple text. Keywords: Visually impaired, chart, Mermaid, PlantUML, Markdown