Help us understand the problem. What is going on with this article?

R MarkdownにBootstrapのLabels機能の実装

More than 1 year has passed since last update.

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

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

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

これら2つが使えるということは、Webにおけるいろいろな要素を簡単に組み込むことができます。そこで今回は、BootstrapのLabels機能を,jQueryを利用して実現させてみます。

BootstrapのLabels機能とは

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

238342982.png

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

なおRmdに実装するなら,上記のようなhtmlタグを使えば達成できます(詳しくはこちら)。しかしそれは手間がかかります。そこでjQueryのコードによってうまくできるようにしました。

目標

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

Badgeを実装した時とほぼ同じですね。

実装

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

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

基本的な考え方は,R MarkdownにBootstrapのBadge機能を実装とほぼ同一です。上記の目標は全てクリアしていますし、primaryとかにも対応させました。以下手順を少し細かく。

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

これが実装のコアです。以下のようなhtmlファイル(ここでbs_label.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機能の実装のjsコードと同じです。ただ今回は識別子から各種タイプを振り分けているので、このように分岐をつけました。このコードをコピペしてファイルを準備してもらえればOKです。

Rmdファイル側の設定

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

yamlフロントマターの設定

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

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

ラベルの挿入

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

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

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

232222344.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!

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away