R Shinyでは、グラフやスライダーなどを使ったWebアプリだけでなく、文章や図表を表示する教育用アプリも作成できます。
例えば、大学の授業で薬理学や薬物動態の教材を使用する場合、説明文、計算式、表、画像などをShinyアプリ内に表示できます。
このような教材を作成する際に便利なのが、HTMLです。
ただし、Rを使ったことがあっても、HTMLファイルを自分で作成した経験がない方もいると思います。
そこで今回は、HTMLファイルの作成方法から、R Shinyへの組み込み方法までを順番に紹介します。
今回の記事では、次の内容を扱います。
- HTMLとは何か
- Windowsのメモ帳でHTMLファイルを作成する方法
- HTMLのコメントの書き方
- 見出し、文章、箇条書き、表、画像の表示方法
- CSSを使ったデザインの変更
- HTMLをブラウザで確認する方法
- HTMLファイルをR Shinyに組み込む方法
HTML()、includeHTML()、iframeの違い
今回のサンプルコードには、初心者でも内容を理解できるようにコメントを付けています。
問題の出題や回答の正誤判定については、次回以降の記事で紹介します。
R Shinyの基本的な使い方については、以下の記事も参考にしてください。
1. HTMLとは？
HTMLは、Webページの構造を記述するための言語です。
例えば、HTMLでは見出し、段落、箇条書き、表、画像、リンクなどを指定できます。
HTMLは、Rのようにデータ解析や計算を行うための言語ではありません。
主に、Webページの内容と構造を指定するためのものです。
例えば、次のHTMLを見てください。
<!-- h1はページの大きな見出しを表す -->
<h1>薬物動態の基礎</h1>
<!-- pは文章の段落を表す -->
<p>
クリアランスは、薬物の消失能力を表す指標です。
</p><h1> は見出し、<p> は段落を表します。
<h1> と </h1> のように、開始タグと終了タグで内容を囲むのが基本です。
なお、<img> や <meta> など、終了タグを必要としない要素もあります。
HTMLにもコメントを書ける
Rでは、次のように # を使ってコメントを書きます。
# ここはRのコメントHTMLでは、次のように書きます。
<!-- ここはHTMLのコメント --><!-- と --> で囲んだ部分がコメントになります。
コメントは通常、ブラウザの画面には表示されません。
例えば、次のように使用できます。
<!-- ここから薬物動態の説明 -->
<h2>薬物動態の基本事項</h2>
<p>
薬物動態では、吸収、分布、代謝、排泄を扱います。
</p>
<!-- ここまで薬物動態の説明 -->HTMLのコメントは、コードの内容を説明したり、区切りを示したりするときに便利です。
ただし、コメントは画面に表示されないだけで、ブラウザの「ページのソースを表示」などから確認できます。
パスワードや個人情報など、秘密にしたい内容はコメントに書かないでください。
2. Windowsのメモ帳でHTMLファイルを作成する
まずは、RやRStudioを使用せずにHTMLファイルを作成してみます。
Windowsに標準搭載されている「メモ帳」を使用します。
① 作業用フォルダを作成する
デスクトップに Shiny_HTML_Lesson という名前のフォルダを作成してください。
② メモ帳を開く
Windowsのスタートメニューから「メモ帳」を起動してください。
③ HTMLコードを入力する
以下のコードをすべてコピーし、メモ帳に貼り付けてください。
<!DOCTYPE html>
<!-- HTML5形式の文書であることを宣言する -->
<html lang="ja">
<!-- HTML文書の開始。lang="ja"は日本語の文書を表す -->
<head>
<!-- ページの設定情報を記述する部分 -->
<meta charset="UTF-8">
<!-- 日本語の文字化けを防ぐため文字コードを指定 -->
<title>薬物動態の基礎</title>
<!-- ブラウザのタブなどに表示されるタイトル -->
</head>
<body>
<!-- ここからブラウザ画面に表示する内容 -->
<!-- 教材のタイトル -->
<h1>薬物動態の基礎</h1>
<!-- h1：大きな見出し -->
<p>
この教材では、薬物動態の基本事項を学びます。
</p>
<!-- p：文章の段落 -->
<h2>クリアランスとは？</h2>
<!-- h2：中見出し -->
<p>
クリアランス（CL）は、単位時間あたりに
薬物が除去されたとみなせる
血漿の容積を表す指標です。
</p>
<h2>分布容積とは？</h2>
<p>
分布容積（Vd）は、体内薬物量と
血漿中薬物濃度の関係を表す
見かけ上の容積です。
</p>
</body>
<!-- ブラウザに表示する内容の終了 -->
</html>
<!-- HTML文書の終了 -->④ HTMLファイルとして保存する
メモ帳の「ファイル」→「名前を付けて保存」を選択します。
保存先は Shiny_HTML_Lesson フォルダです。
以下の設定を確認してください。
- ファイル名：
lesson.html - ファイルの種類：「すべてのファイル」
- 文字コード：UTF-8
注意： lesson.html.txt という名前になっていないか確認してください。
Windowsのエクスプローラーでファイル名拡張子を表示すると確認できます。
3. HTMLファイルをブラウザで開く
作成した lesson.html をダブルクリックしてください。
通常はChromeやEdgeなどのブラウザで開きます。
「薬物動態の基礎」という見出しと、クリアランス、分布容積の説明が表示されれば成功です。
ここでは、まだRもShinyも使用していません。
HTMLファイルはブラウザだけで表示できます。
HTMLを修正してみる
例えば、メモ帳で次の部分を変更します。
<!-- 教材のタイトル -->
<h1>薬物動態の基礎</h1>これを次のように変更します。
<!-- 教材のタイトルを変更する -->
<h1>薬理学の学習教材</h1>ファイルを上書き保存し、ブラウザを再読み込みしてください。
見出しが変更されていれば、HTMLの編集ができています。
4. HTMLの基本的な書き方
教材作成によく使うHTMLタグを紹介します。
見出し
<!-- h1：ページ全体の大見出し -->
<h1>薬物動態の基礎</h1>
<!-- h2：章の見出し -->
<h2>クリアランス</h2>
<!-- h3：章の中の小見出し -->
<h3>クリアランスの単位</h3>見出しには <h1> から <h6> まであり、数字は見出しの階層を表します。
段落
<!-- p：文章の段落 -->
<p>
クリアランスは薬物の消失能力を表します。
</p>
<!-- 次のpで別の段落を作成 -->
<p>
分布容積は見かけ上の容積です。
</p>HTMLのコード内で改行しても、ブラウザ上では通常、その位置で改行されません。
段落を分けたい場合は、別の <p> タグを使用します。
箇条書き
<!-- ul：番号なしの箇条書き -->
<ul>
<!-- li：箇条書きの各項目 -->
<li>クリアランス（CL）</li>
<li>分布容積（Vd）</li>
<li>消失半減期（t1/2）</li>
</ul>番号付きのリストには <ol> を使用します。
<!-- ol：番号付きの箇条書き -->
<ol>
<li>教材を読む</li>
<li>計算式を確認する</li>
<li>理解度チェックに回答する</li>
</ol>文字の強調
<p>
<!-- strong：重要な文字を強調する -->
<strong>重要：</strong>
消失半減期はCLとVdによって決まります。
</p>表
<!-- table：表全体 -->
<table border="1">
<!-- tr：表の1行 -->
<tr>
<!-- th：見出しセル -->
<th>指標</th>
<th>意味</th>
</tr>
<tr>
<!-- td：通常のデータセル -->
<td>CL</td>
<td>薬物の消失能力</td>
</tr>
<tr>
<td>Vd</td>
<td>見かけ上の分布容積</td>
</tr>
</table>border="1" は、表の枠線を簡単に表示するための指定です。
実際のデザインではCSSで枠線を設定する方法が一般的です。
画像
<!-- img：画像を表示する -->
<!-- src：画像ファイルの場所 -->
<!-- alt：画像の説明 -->
<img
src="figure.png"
alt="薬物動態の説明図"
>lesson.html と同じフォルダに figure.png があれば、画像を表示できます。
リンク
<!-- a：リンクを作成する -->
<!-- href：移動先のURL -->
<a href="https://www.r-project.org/">
R Projectの公式サイト
</a><a> タグを使用すると、別のWebページへのリンクを作成できます。
5. CSSでHTML教材の見た目を変更する
HTMLは、見出しや段落などの構造を指定するためのものです。
一方、CSSは、文字色、背景色、余白、枠線などのデザインを指定します。
CSSにもコメントを書くことができます。
ただし、HTMLとは書き方が異なります。
/* ここはCSSのコメント */例えば、次のコードを使用します。
<style>
/* body：ページ全体のデザイン */
body {
/* 使用するフォント */
font-family: Arial, sans-serif;
/* 行間を文字サイズの1.8倍にする */
line-height: 1.8;
/* 内側の余白を20pxにする */
padding: 20px;
}
/* h1：大見出しのデザイン */
h1 {
/* 見出しの文字色を青系にする */
color: #1f4e79;
}
/* h2：中見出しのデザイン */
h2 {
/* 文字色を濃い灰色にする */
color: #333333;
/* 見出しの下に線を引く */
border-bottom: 2px solid #cccccc;
}
</style>このコードをHTMLファイルの <head> と </head> の間に追加すると、文章や見出しのデザインが変わります。
CSSでは、例えば次のような設定を使用します。
| 設定 | 意味 |
|---|---|
color | 文字色 |
background-color | 背景色 |
font-size | 文字サイズ |
font-family | フォント |
line-height | 行間 |
padding | 内側の余白 |
margin | 外側の余白 |
border | 枠線 |
border-radius | 角の丸み |
6. CSSを組み込んだ完成版HTML教材を作る
ここまでの内容を組み合わせて、少し見た目を整えたHTML教材を作成します。
先ほどの lesson.html をメモ帳で開き、内容をすべて削除して、次のコードに置き換えてください。
今回は、HTMLとCSSの各部分にコメントを付けています。
<!DOCTYPE html>
<!-- HTML5形式の文書であることを宣言 -->
<html lang="ja">
<!-- 日本語のHTML文書 -->
<head>
<!-- ここからページの設定 -->
<meta charset="UTF-8">
<!-- 日本語の文字化けを防ぐ -->
<meta
name="viewport"
content="width=device-width, initial-scale=1.0"
>
<!-- スマートフォンなどの画面幅に対応する設定 -->
<title>薬物動態の基礎</title>
<!-- ブラウザのタブに表示するタイトル -->
<!-- ===================================== -->
<!-- CSS：教材のデザイン設定 -->
<!-- ===================================== -->
<style>
/* ------------------------------------- */
/* ページ全体のデザイン */
/* ------------------------------------- */
body {
/* 使用するフォント */
font-family: Arial, sans-serif;
/* 文章の行間 */
line-height: 1.8;
/* ページ外側の余白をなくす */
margin: 0;
/* ページ内側の余白 */
padding: 20px;
/* 背景色を白にする */
background-color: #ffffff;
/* 文字色を濃い灰色にする */
color: #333333;
}
/* ------------------------------------- */
/* 教材全体を囲む枠 */
/* ------------------------------------- */
.lesson-box {
/* 最大幅を900pxにする */
max-width: 900px;
/* 左右中央に配置する */
margin: 0 auto;
/* 枠の内側の余白 */
padding: 24px;
/* 背景色 */
background-color: #f8f9fa;
/* 枠線 */
border: 1px solid #dddddd;
/* 角を丸くする */
border-radius: 8px;
}
/* ------------------------------------- */
/* 大見出し */
/* ------------------------------------- */
h1 {
/* 見出しの文字色 */
color: #1f4e79;
/* 見出し上部の余白をなくす */
margin-top: 0;
}
/* ------------------------------------- */
/* 中見出し */
/* ------------------------------------- */
h2 {
/* 見出し上部の余白 */
margin-top: 28px;
/* 見出し下部の内側余白 */
padding-bottom: 6px;
/* 見出しの下に線を引く */
border-bottom: 2px solid #cccccc;
}
/* ------------------------------------- */
/* 表のデザイン */
/* ------------------------------------- */
table {
/* 表の横幅を表示領域に合わせる */
width: 100%;
/* セルの枠線を重ねて表示する */
border-collapse: collapse;
/* 表の上下の余白 */
margin-top: 16px;
margin-bottom: 20px;
}
/* 表の見出しセルと通常セル */
th, td {
/* セルの枠線 */
border: 1px solid #cccccc;
/* セル内側の余白 */
padding: 10px;
/* 文字を左揃えにする */
text-align: left;
}
/* 表の見出しセル */
th {
/* 見出しの背景色 */
background-color: #e8eef5;
}
/* ------------------------------------- */
/* 重要事項を表示する枠 */
/* ------------------------------------- */
.important {
/* 背景色を薄い黄色にする */
background-color: #fff4d6;
/* 左側に太い線を引く */
border-left: 5px solid #e0a800;
/* 内側の余白 */
padding: 14px;
/* 上側の余白 */
margin-top: 20px;
}
/* ------------------------------------- */
/* 計算式を表示する枠 */
/* ------------------------------------- */
.formula {
/* 背景色を薄い青にする */
background-color: #eaf3ff;
/* 内側の余白 */
padding: 16px;
/* 文字を中央揃えにする */
text-align: center;
/* 文字サイズ */
font-size: 20px;
/* 太字にする */
font-weight: bold;
/* 上下の余白 */
margin: 20px 0;
/* 長い文字列がある場合は折り返す */
overflow-wrap: anywhere;
}
</style>
</head>
<body>
<!-- ここからブラウザに表示する教材 -->
<!-- ===================================== -->
<!-- 教材全体を囲む領域 -->
<!-- ===================================== -->
<div class="lesson-box">
<!-- class="lesson-box"は上のCSSと対応 -->
<!-- 教材のタイトル -->
<h1>薬物動態の基礎</h1>
<!-- 教材の導入文 -->
<p>
この教材では、薬物動態の基本事項を学びます。
</p>
<!-- =================================== -->
<!-- 第1章：クリアランス -->
<!-- =================================== -->
<h2>1. クリアランス（CL）</h2>
<p>
クリアランスは、単位時間あたりに
薬物が除去されたとみなせる
血漿の容積を表す指標です。
</p>
<!-- =================================== -->
<!-- 第2章：分布容積 -->
<!-- =================================== -->
<h2>2. 分布容積（Vd）</h2>
<p>
分布容積は、体内薬物量と
血漿中薬物濃度の関係を表す
見かけ上の容積です。
</p>
<!-- =================================== -->
<!-- 第3章：消失半減期 -->
<!-- =================================== -->
<h2>3. 消失半減期（t1/2）</h2>
<p>
線形の1-コンパートメントモデルでは、
消失半減期は次の式で表されます。
</p>
<!-- 計算式を目立つ枠で表示する -->
<!-- class="formula"はCSSの設定と対応 -->
<div class="formula">
t1/2 = 0.693 × Vd / CL
</div>
<!-- =================================== -->
<!-- 第4章：薬物動態パラメータの表 -->
<!-- =================================== -->
<h2>4. 主要な薬物動態パラメータ</h2>
<!-- 表を作成する -->
<table>
<!-- 表の見出し行 -->
<tr>
<!-- thは見出しセル -->
<th>指標</th>
<th>意味</th>
<th>代表的な単位</th>
</tr>
<!-- CLの行 -->
<tr>
<!-- tdは通常のセル -->
<td>CL</td>
<td>薬物の消失能力を表す指標</td>
<td>L/h</td>
</tr>
<!-- Vdの行 -->
<tr>
<td>Vd</td>
<td>薬物量と血漿中濃度の関係</td>
<td>L</td>
</tr>
<!-- t1/2の行 -->
<tr>
<td>t1/2</td>
<td>薬物濃度が半分になるまでの時間</td>
<td>h</td>
</tr>
</table>
<!-- =================================== -->
<!-- 重要事項を強調表示する -->
<!-- =================================== -->
<!-- class="important"はCSSの設定と対応 -->
<div class="important">
<!-- strongで重要な文字を強調 -->
<strong>重要：</strong>
消失半減期はCLとVdの両方によって決まります。
</div>
</div>
<!-- 教材全体を囲む領域の終了 -->
</body>
<!-- ブラウザに表示する内容の終了 -->
</html>
<!-- HTML文書の終了 -->ファイルを上書き保存し、ブラウザを再読み込みしてください。
先ほどよりも、教材らしいデザインで表示されるはずです。
classとは？
今回のコードには、次のような記述があります。
<!-- lesson-boxという名前を付けた領域 -->
<div class="lesson-box">
<h1>薬物動態の基礎</h1>
</div>class は、HTMLの要素に名前を付け、CSSでまとめてデザインを指定するためなどに使用します。
例えば、CSSで次のように書きます。
/* lesson-boxというclassを持つ要素に適用 */
.lesson-box {
background-color: #f8f9fa;
padding: 24px;
}CSSでは、クラス名の前に . を付けます。
このように、HTMLの class="lesson-box" とCSSの .lesson-box が対応しています。
7. HTML教材をR Shinyに組み込む
HTML教材をShinyに組み込む方法はいくつかあります。
今回は、次の3つを紹介します。
| 方法 | 特徴 |
|---|---|
HTML() | HTMLをRコード内に直接記述する |
includeHTML() | 外部HTMLファイルの内容をShiny画面に挿入する |
iframe | HTMLページを独立した表示領域に読み込む |
方法① HTML()を使う
HTML() は、文字列をHTMLとして扱うための関数です。
以下は、app.R にコピーするコードです。
# Shinyパッケージを読み込む
library(shiny)
# 画面を作成する
ui <- fluidPage(
# アプリのタイトル
titlePanel("HTML表示テスト"),
# HTMLを直接記述して表示する
HTML("
<!-- h2：見出し -->
<h2>薬物動態の基礎</h2>
<!-- p：文章の段落 -->
<p>
クリアランスは薬物の消失能力を表します。
</p>
")
)
# サーバー側の処理
server <- function(input, output, session) {
# 今回は計算処理を行わない
}
# アプリを起動する
shinyApp(ui, server)この方法は、短い説明文を表示する場合に便利です。
ただし、HTMLが長くなると、RコードとHTMLが混在して管理しにくくなります。
方法② includeHTML()を使う
includeHTML() は、外部HTMLファイルの内容をShiny画面に挿入するための関数です。
例えば、次のように記述します。
# 外部HTMLファイルの内容を読み込む
includeHTML("lesson.html")この方法では、HTMLファイルを別に編集できます。
ただし、includeHTML() はHTMLファイルの内容を現在のShinyページに挿入するため、独立したHTMLページとして表示するわけではありません。
そのため、<html>、<head>、<body> を含む完全なHTML文書をそのまま挿入するより、見出しや段落などのHTML断片を使用する方が適しています。
また、CSSの指定がShiny本体の画面にも影響する場合があります。
＊フォルダの中に、app.Rとhtmlファイルの両方を入れておく必要があります。
方法③ iframeを使う
iframe は、別のHTMLページをShinyアプリ内に埋め込む方法です。
例えば、次のように記述します。
# HTML教材を独立した表示領域に読み込む
tags$iframe(
# 読み込むHTMLファイル
src = "lesson.html",
# 表示領域のサイズ
style = "width: 100%; height: 500px;"
)この方法では、HTMLページをShinyの画面内に独立した領域として表示できます。
今回のように、CSSを含む完成済みのHTML教材を表示する場合に便利です。
＊フォルダの中に、app.Rファイルと、htmlファイルが入ったwwwの名前のフォルダの両方を入れておく必要があります。
8. 完成したHTML教材をShinyに表示する
今回は、先ほど作成した lesson.html を、そのままShinyに表示します。
① フォルダを準備する
最初に作成した Shiny_HTML_Lesson フォルダの中に、www という名前のフォルダを作成してください。
そして、作成済みの lesson.html を www フォルダに移動します。
最終的に、次の構成にします。
Shiny_HTML_Lesson
│
├── app.R
│
└── www
└── lesson.htmlwww フォルダは、ShinyアプリでHTML、画像、CSS、JavaScriptなどの静的ファイルを配置するために使用します。
② app.Rを作成する
RStudioで新しいR Scriptを作成し、次のコードをコピーしてください。
# ============================================
# R Shiny HTML教材表示サンプル
# ============================================
# Shinyパッケージを読み込む
library(shiny)
# --------------------------------------------
# 1. 画面を作成する
# --------------------------------------------
ui <- fluidPage(
# アプリのタイトル
titlePanel("HTML教材表示アプリ"),
# 説明文
p(
"外部HTMLファイルをShinyアプリ内に表示します。"
),
# 区切り線
hr(),
# ------------------------------------------
# HTML教材をiframeで表示する
# ------------------------------------------
tags$iframe(
# wwwフォルダ内のHTMLファイルを指定
# URLではwwwを含めずlesson.htmlとする
src = "lesson.html",
# 表示領域のサイズと枠線を設定
style = paste(
"width: 100%;",
"height: 650px;",
"border: 1px solid #cccccc;",
"border-radius: 6px;"
),
# iframeの内容を説明するタイトル
title = "薬物動態の基礎教材"
)
)
# --------------------------------------------
# 2. サーバー側の処理
# --------------------------------------------
server <- function(input, output, session) {
# 今回は入力処理を行わないため空欄
}
# --------------------------------------------
# 3. アプリを起動する
# --------------------------------------------
shinyApp(
ui = ui,
server = server
)このコードを app.R という名前で、Shiny_HTML_Lesson フォルダに保存してください。
③ Run Appをクリックする
RStudioで app.R を開き、「Run App」をクリックしてください。
Shinyアプリが起動し、その中に先ほど作成したHTML教材が表示されます。
HTMLの文章やデザインを変更したい場合は、lesson.html を編集します。
HTMLを変更した後は、ファイルを保存し、Shinyアプリの表示を再読み込みしてください。
9. HTML教材に画像を追加する方法
教材に画像を追加したい場合は、www フォルダに画像を保存します。
例えば、figure.png という画像を追加する場合、フォルダ構成は次のようになります。
Shiny_HTML_Lesson
│
├── app.R
│
└── www
├── lesson.html
└── figure.pnglesson.html の表示したい場所に、次のコードを追加します。
<!-- ===================================== -->
<!-- 薬物動態の模式図を表示する -->
<!-- ===================================== -->
<!-- h2：画像の見出し -->
<h2>5. 薬物動態の模式図</h2>
<!-- img：画像を表示する -->
<!-- src：画像ファイルの場所 -->
<!-- alt：画像の説明 -->
<!-- style：画像の表示サイズを調整する -->
<img
src="figure.png"
alt="薬物動態の模式図"
style="max-width: 100%; height: auto;"
>max-width: 100% は、画像が表示領域より大きい場合に、横幅に合わせて縮小するための指定です。
height: auto は、画像の縦横比を保つための指定です。
10. よくあるトラブルと対処方法
HTMLファイルを開くとコードがそのまま表示される
ファイル名が lesson.html.txt になっていないか確認してください。
日本語が文字化けする
HTMLファイルの保存時に、文字コードをUTF-8に設定してください。
また、HTMLファイル内に次の記述があるか確認します。
<!-- 日本語の文字コードを指定 -->
<meta charset="UTF-8">ShinyでHTMLが表示されない
app.R と www フォルダの位置を確認してください。
今回のサンプルでは、app.R と www は同じ階層に配置します。
また、lesson.html は www フォルダ内に保存します。
HTMLを変更しても表示が変わらない
HTMLファイルを上書き保存した後、ブラウザを再読み込みしてください。
ブラウザのキャッシュによって、古い内容が表示される場合もあります。
画像が表示されない
HTMLに記載した画像ファイル名と、実際のファイル名が一致しているか確認してください。
また、画像が lesson.html と同じフォルダに保存されているか確認します。
11. HTML教材とShinyの役割を分ける
今回の方法の利点は、HTML教材とShinyアプリの役割を分けられることです。
HTMLでは、教材の文章、図表、見た目などを管理します。
Shinyでは、入力フォーム、ボタン、グラフ、計算処理などを管理します。
例えば、今後、理解度チェックを追加する場合は、HTML教材の下にShinyの選択肢や回答ボタンを配置できます。
また、教材の文章を修正する場合は、HTMLファイルだけを変更できます。
ただし、今回使用した iframe は、HTML教材を独立したページとして表示する方法です。
HTML内のボタンや入力欄をShinyの入力機能と直接連携させたい場合は、別の方法や追加の処理が必要になります。
また、HTML() や includeHTML() で信頼できないHTMLをそのまま表示すると、意図しないスクリプトが実行されるなどの問題が起こる可能性があります。
今回のように、自分で作成した信頼できるHTMLを使用してください。
www フォルダ内のファイルは、通常、ブラウザから取得できる公開用ファイルとして扱われます。個人情報や管理者専用の情報は保存しないでください。
12. まとめ
今回は、HTML教材を自分で作成し、R Shinyに組み込む方法を紹介しました。
まず、Windowsのメモ帳を使ってHTMLファイルを作成し、ブラウザで表示する方法を確認しました。
次に、見出し、文章、箇条書き、表、画像など、教材作成によく使うHTMLタグを紹介しました。
さらに、CSSを使って教材のデザインを調整しました。
最後に、完成したHTMLファイルをR Shinyの iframe に組み込み、アプリ内に表示しました。
今回の重要なポイントは、次の4つです。
- HTMLファイルはメモ帳などのテキストエディターで作成できる
- HTMLでは
<!-- コメント -->の形式で説明を書ける - CSSでは
/* コメント */の形式で説明を書ける - 作成したHTML教材をShinyに組み込むことができる
今回のサンプルでは、HTML教材の作成と表示に集中しました。
次回は、R Shinyで選択式の理解度チェックを作成する方法を紹介します。
選択肢の表示、回答ボタン、正誤判定、解説の表示などを実装し、学生が操作しながら学習できるアプリを作成します。
コメント