R MarkdownにBootstrapのLabels機能の実装

タイトルの通りです。htmlタグ直打ちではなく，スムーズに任意の位置に任意の文字列でできるようにしました。

## R Markdownが読み込んでいるもの

R Markdownの基本outputであるhtml_documentには、Bootstrapというデザインワークフレームが組み込まれています。その関係で、jQueryも合わせて読み込まれています。したがって、意図的に除去しない限りはこれら2つは標準で利用可能となっています。

これら2つが使えるということは、Webにおけるいろいろな要素を簡単に組み込むことができます。そこで今回は、[BootstrapのLabels機能](https://getbootstrap.com/docs/3.3/components/#labels)を，jQueryを利用して実現させてみます。

## BootstrapのLabels機能とは

よく「NEW!」とかを示すときに、わかりやすくするためのマークみたいなものです。本家ドキュメントのキャプチャは以下の通りです:

![238342982.png](https://qiita-image-store.s3.amazonaws.com/0/35118/28411890-0de1-6701-c014-e915e57e9848.png)


上の画像を見てわかるとおり，`<span class="label label-default">Default</span>`というように適切なclassを付与した`<span>`タグが使えれば適用できます。

なおRmdに実装するなら，上記のようなhtmlタグを使えば達成できます(詳しくは[こちら](http://qiita.com/kazutan/items/3cac34671631ac2bf299))。しかしそれは手間がかかります。そこでjQueryのコードによってうまくできるようにしました。

## 目標

- htmlタグなしで実装
- 任意の位置に設置可能
- 設置も簡単で，なるべく他と競合しない
- 部品化して，簡単に他のRmdファイルでも使えるようにする

[Badge](http://qiita.com/kazutan/items/e2834b18a2ae4a874d27)を実装した時とほぼ同じですね。

## 実装

できました。以下の手順となります:

1. スクリプトのみを記述したhtmlファイルを準備
2. Rmdファイルを準備
3. Rmdのyamlフロントマターに1のhtmlファイルをincludeさせる
4. ラベルを挿入したい場所へ`**lbl hoge**`のような感じで,ラベル用識別子をつけたのを付与

基本的な考え方は，[R MarkdownにBootstrapのBadge機能を実装](http://qiita.com/kazutan/items/e2834b18a2ae4a874d27)とほぼ同一です。上記の目標は全てクリアしていますし、primaryとかにも対応させました。以下手順を少し細かく。

### スクリプトのhtmlファイルを準備

これが実装のコアです。以下のようなhtmlファイル(ここで`bs_label.html`)を準備します:

```html:bs_label.html
<script type="text/javascript" charset="utf-8">
  $(function(){
    $("strong").each(function(){
      var txt = $(this).text();
      if(txt.match("^lbl")){
        var strLabel = txt.replace(/^.* /g, '');
        var type = txt.match(/^lbl-?(p|s|i|w|d)?.* /)[1];
        switch(type){
          case 'p' : typeClass = 'primary'; break;
          case 's' : typeClass = 'success'; break;
          case 'i' : typeClass = 'info'; break;
          case 'w' : typeClass = 'warning'; break;
          case 'd' : typeClass = 'danger'; break;
          default : typeClass = 'default'; break;
        };
        $(this).replaceWith("<span class='label label-"+typeClass+"'>"+strLabel+"</span>");
      }
    });
  });
</script>
```

jsのコーディング規約とか全く知らないので，汚い書き方になってしまいすみません。考え方は上述の通り[Badge機能の実装](http://qiita.com/kazutan/items/e2834b18a2ae4a874d27)のjsコードと同じです。ただ今回は識別子から各種タイプを振り分けているので、このように分岐をつけました。このコードをコピペしてファイルを準備してもらえればOKです。

### Rmdファイル側の設定

当然ですが，出力はhtml形式で，BootstrapとjQueryが読み込まている必要があります。大抵の場合デフォルトで組み込まれています。含まれていないフォーマットの場合は適宜読み込ませるようにしてください。

#### yamlフロントマターの設定

以下のように，先ほどのhtmlファイルを組み込んでください:

```yaml
---
output: 
  html_document:
    include:
      after_body:
        - bs_label.html
---
```

#### ラベルの挿入

Rmdファイル内に，以下のように指定します:

```md
**lbl ほげ**
```

```md
- あああ**lbl default**
- いいい**lbl-p primary**
- ううう**lbl-s success**
- えええ**lbli info**
- おおお**lbl-warning warning**
- かかか**lbl-d danger**
```

上記のコードだと、以下のようになります:

![232222344.png](https://qiita-image-store.s3.amazonaws.com/0/35118/bbced5f2-a172-3af4-7a73-3d4db47628c2.png)

基本的には、`**lbl (文字列)**`というようにすれば、その文字列をラベルにしたものが生成されます。この場合、`class=label label-defualt`と指定したのと同じ結果となります。

また、BootstrapのLabelにはprimaryやwarningなどコンテクストなtypeも指定できます。今回の実装では、以下のようにすれば反応するようにしています:

1. `**lbl-p (文字列)**` 識別子にハイフンつなぎで各種タイプの頭文字
2. `**lblp (文字列)**` 識別子+各種タイプの頭文字
3. `**lbl-warning (文字列)**` 識別子にハイフンつなぎで各種タイプをフル入力

1.と3.はほぼ同じ処理です。**重要なのは識別子の後の半角スペース**です。これは必須です。

## 解説

先に触れたのBadge機能実装とほぼ同一です。そちらを参照してください。

## 雑感

これをR Markdownで使いたかった方は多いと思います。特にR MarkdownでWebサイトを構築している場合はそうではないかと思います。私自身これが欲しかったので、がんばって実装してみました。

ただもっと汎用的にいけるかなと思っていますし、このアイデアを元にまた別のRmd拡張ができるはずです。それはまたそのうちUpします。

**Enjoy!**