こんにちわ！矢作です。
今回の記事は、クエステトラが提供するクラウドサービス「Questetra BPM Suite」に関する Tips です。
「Questetra BPM Suite」の操作画面をより分かりやすくするために用意された機能に「ガイドパネル型」があります。この機能の使い方について初歩的なことを紹介します。
本記事のターゲットは次の 2 種類の人！
- HTMLの基礎の基礎を知りたい人
- 「Questetra BPM Suite」でプロセスモデラーを使う人
操作画面を豊かにする「ガイドパネル型」
「ガイドパネル型」はデータ型の一種ですが、数値や文字のようなデータを扱うものではありません。
「ガイドパネル型」を使うと、Questetra BPM Suite で作業（工程の処理）を行う操作画面に、注意するべきことや具体的な手順などを書くことができます。
そのような注意点や手順などを書くのに必要となるのが HTML に関する知識です。
シンプルに一言だけ書きたい、1行の文章だけ書きたい、というような場合には HTML に関する知識はなくても良いのですが、ちょっとした装飾（※）をしたいと場合には HTML の知識が必要になります。
※ちょっとした装飾 ＝ 改行したい、文字を太くしたい、箇条書きにしたい、というようなこと。
逆に言うと HTML の知識を豊富にお持ちの人は、とても見やすい画面を作ることができるということです。JavaScript によるリッチな画面を作ることも可能です。
この記事は、HTML について勉強するなんて大変！という人のためにあります。これから紹介する、たった 3 つのタグを知るだけでも、十分に画面を豊かなものにすることができます。
超カンタンに使える HTML タグ（2つ）
HTML タグとは、ここは改行ですよ〜とか、ここからここまでは太文字ですよ〜とか、そういうことを示す「目印」のことです。
「改行」するタグ
ガイドパネル型に文字を書き、その中で改行しても操作画面上ではその改行は消えてしまいます。
でも、改行を表す HTML タグ <br> を改行したいところに書けば、それで改行ができるようになります。
「文字を太く」するタグ
文中の文言を強調したいような場合、その文字を太くしたい場合があります。文字を太くするための HTML タグは <strong> で、次のようにで太くしたい文字を <strong> と </strong> で囲みます。
<strong>太くしたい文字</strong>
太くしたい文字の後ろに配置する </strong> は、strong の前に / （スラッシュ）を忘れないようにしてくださいね。
超 ではないけどカンタンに使えるタグ（1つ）
改行・太文字については、すごくカンタンな方法で実現できることがご理解いただけたかと思いますが、次は「箇条書き」に挑戦です。
改行・太文字ほどではありませんが、それでもカンタンに箇条書きも書くことができます。
箇条書き
箇条書きを書くためには、<ul> タグと <li> タグを利用します。使い方は、次のような形です。
<ul> <li>....箇条1....</li> <li>....箇条2....</li> <li>....箇条3....</li> ... </ul>
ちょっとややこしいですね。
箇条書きにしたい各箇条（項目）を <li> と </li> で囲みます。全ての箇条が書けたら、それら全体を <ul>と </ul> で囲みます。
後ろに配置する </ul> と </li> は、それぞれ / （スラッシュ）を忘れないようにしてくださいね。
◇◇
カンタンな HTML タグを知っているだけで、Questetra BPM Suite の操作画面が少しでも使いやすいものに仕上げることが可能です。
改めて、HTMLタグを使う前の状態（BEFORE）と使った後の状態（AFTER）を見てみましょう。
今回紹介した3つのHTMLタグを使うだけで、すごく見やすい画面になったと思います。
ガイドパネル型だけでなく、その他のデータ項目における「説明」というところでも同じように HTML タグを使って注意点などを書けますので、そちらでもお試しください。
今回はここまで！
