Lesson2 – ユーザインタフェースの作成

Shiny アプリの構造を Lesson 1 で説明しましたので、ここではゼロから最初のアプリを作成していきます。

このレッスンは、アプリに対するユーザ・インターフェイスの作成方法を説明するものです。ここでは、ユーザ・インターフェイスをレイアウト方法を学習すると共に、テキスト、画像、その他の HTML 要素を Shiny アプに追加していきます。

Lesson 1 で作成した App-1 アプリと同じものを作成します。先ず、app.R ファイルを開き、以下のスクリプトと同じになるようにスクリプトを編集してください:

このコードは、Shiny アプリを作成するのに必要な最小限のものです。 結果は、このレッスンの出発点として適切な、ユーザ・インターフェイスのない空のアプリケーションです。

レイアウト

Shiny は、関数 fluidPage を使用して、ユーザのブラウザ・ウィンドウと同じサイズになるよう自動的に表示領域を調節します。 fluidPage 関数に要素を配置することで、アプリケーションのユーザーインターフェイスをレイアウトします。

例えば以下の ui 関数は、titlePanel と、sidebarPanel と mainPanel 含む sidebarLayout を持つユーザーインターフェイスを作成しています。 これらの要素を、fluidPage 関数内に配置していることに注意してください。

titlePanel と sidebarLayout は、fluidPage に追加するための最も一般的な 2 要素です。これにより、サイドバーを持つ基本的な Shiny アプリが作られます。

sidebarLayoutは常に2つの引数をとります:

  • sidebarPanel 関数の出力
  • mainPanel 関数の出力

これらの関数は、sidebar または main パネルの何れかにコンテンツに配置します。

sidebar パネルは、デフォルトではアプリの左側に表示されます。sidebarLayout へ、オプションの引数 position = “right” を指定れば右側に移動することができます。

titlePanel と sidebarLayout は、Shiny アプリの基本レイアウトを作成しますが、さらに高度なレイアウトを作成することもできます。例えば、navbarPage を使用することで、ナビゲーションバーを含む複数ページのユーザ・インターフェイスをアプリに設定することができます。 また、fluidRow と column を使用することで、グリッドシステムからレイアウトを構成することもできます。これらの高度なオプションの詳細については、Shiny Application Layout Guide をご覧ください。 このチュートリアルでは、sidebarLayout を使用します。

HTMLコンテンツ

Panel 関数の中に配置することで、Shiny アプリにコンテンツを追加することができます。例えば、上のアプリでは、それぞれのパネルに文字列を表示しています。 sidebarPanel 関数に文字列を追加している(sidebarPanel(“sidebar panel”))ので、サイドバーパネルには “sidebar panel” という文字が表示されています。title パネルと main パネルのテキストについても同様です。

更に高度なコンテンツを追加するには、Shiny の HTML タグ関数を使用します。 これらの関数は、一般的な HTML5 のタグに対応しています。それらのうちのいくつかを試してみましょう。

shiny 関数 HTML5 作成
p <p> パラグラフ
h1 <h1> h1 ヘッダ
h2 <h2> h2 ヘッダ
h3 <h3> h3 ヘッダ
h4 <h4> h4 ヘッダ
h5 <h5> h5 ヘッダ
h6 <h6> h6 ヘッダ
a <a> リンク
br <br> 改行
div <div> ブロックレベル要素としてグループ化する
span <span> インライン要素としてグループ化する
pre <pre> テキストを固定幅フォントでそのまま表示する
code <code> フォーマットされたコードブロック
img <img> 画像
strong <strong> 太字のテキスト
em <em> イタリック体のテキスト
HTML HTML コードとして直接文字列を渡す

ヘッダ

ヘッダ要素を作成するには:

  • ヘッダ関数(例えば、h1 や h5 など)を選択し
  • ヘッダに表示するテキストを指定する

例えば、h1(“My title”) で “My title” という第1レベルのヘッダを作成することができます。 コマンドラインで次のコマンドを実行すると、HTML コードが作られることが分かります。

アプリ内に要素を配置するには:

  • titlePanel、sidebarPanel、または mainPanel の引数として h1(“My title”) を渡します

テキストは、Webページの対応するパネルに表示されます。 コンマで区切ることで複数の要素を同じパネルに配置することができます。

これを試してみてください。 以下の新しいスクリプトでは、6種類のレベルのヘッダをすべて使用しています。あなたの app.R をスクリプトと同じになるよう更新してから、runApp(“App-1”) を実行するか、Run App ボタンをクリックするか、キーボードショートカットを使用して Shiny アプリを再起動してください。

現在、あなたのアプリは次のようになっているはずです。


もしGeorge Lucas の最初のアプリであれば、それは次のようになっているかもしれません。

このエフェクトは、h6(“Episode IV”, align = “center”) のように、align = “center” で作成できます。 一般に、HTML タグ属性は Shiny タグ関数の引数として設定できます。

HTML タグの属性に精通していない場合は、w3schools などの多くの無料オンライン HTML リソースで属性を調べることができます。

スターウォーズにインスパイアされたユーザーインターフェイスの ui のコードは次の通りです:

書式付きテキスト

Shiny は、テキストに書式を設定するための多くのタグ関数を提供しています。これを理解する最も簡単な方法は、例を実行してみることです。

下の ui オブジェクトを app.R ファイルに貼り付けて保存してください。Shiny アプリがまだ動作しているなら、Webページやプレビューウィンドウを更新すれば変更を表示することができます。 アプリを閉じている場合は、再起動してください。

表示されたアプリと変更した ui オブジェクト定義を比較し、Shiny アプリにおけるテキストの書式設定方法を調べてください。

画像

画像は、アプリの外観を向上させるとともに、コンテンツを理解し易くします。 Shiny は、アプリに画像ファイルを配置するため img 関数を使用します。

画像を挿入するには、img 関数に src 引数として画像ファイル名を 指定します(例:img(src = “my_image.png”))。img は、入力を HTML タグに渡し、src はタグが要求するものなので、この引数は一字一句正確に記述しなければなりません。

height や width などの HTML に馴染みのパラメータを含めることもできます。height や width の数値はピクセル値ですので注意してください。

img 関数は、指定の場所から画像ファイルを検索します。ファイルは、app.R スクリプトと同じディレクトリにある www という名前のフォルダになければなりません。Shiny は、このディレクトリを特別な方法で扱います。 Shiny は、ここに置かれた全てのファイルを、ユーザの Web ブラウザと共有します。この www は、Shiny アプリの web コンポーネントを構築するのに必要な、画像、CSS、およびその他のものを格納する重要な場所です。

従って、rstudio.png という名前の画像を使用する場合、App-1 ディレクトリは次のようになります:

このファイル配置により、下の ui オブジェクトで図のようなアプリが作成できます。 rstudio.png をここからダウンロードして試してみてください。

その他のタグ

このレッスンでは、最も一般的な Shiny タグ関数についてのみ説明しましたが、もっと多くのタグ関数が使用できます。他のタグ関数については、「HTMLでUIをカスタマイズする」と「Shiny HTML タグ用語集」を参照してください。

やってみよう

Shiny のレイアウトや HTML、img 関数を使用すると、非常に魅力的で有用なユーザーインターフェイスを作成できます。 下の画像の Shiny アプリを再現して、これらの機能をどれくらい理解しているかを確認してください。 このチュートリアルの例を使用しながら、作成とテストをしてみてください。

答えは Model Answer ボタンの下にありますが、コピーして貼り付けるだけではダメです。次に行く前に、コードを理解しているどうかを確認してください。

モデル解答

Reveal answer

まとめ

新しいスキルにより、次のことが行えます:

  • fluidPage、titlePanel、sidebarLayout を使用してユーザーインターフェイスを作成する
  • Shiny タグ関数の 1 つを使用して HTML 要素を作成する
  • 各タグ関数の引数に HTML タグ属性を設定する
  • titlePanel や sidebarPanel または mainPanel に要素を渡すことで、Webページに要素を追加する
  • カンマで区切り、複数要素を各パネルに追加する
  • Shiny アプリ・ディレクトリ内の www フォルダに画像を配置し、img 関数を呼び出すことで画像を追加する

これで簡単なコンテンツをユーザーインターフェイスに配置できるようになりましたので、ウィジェットなどの複雑なコンテンツをどのように配置するかを見てみましょう。 ウィジェットは、ユーザーがアプリケーションを制御するために使用できるインタラクティブな Web 要素です。これは Lesson 3 の主題でもあります。

Lesson3 へ