R Shiny を使ってWebアプリを作って動くまでやってみる（5）ダッシュボードの設定1

2019.11.09

本シリーズでは、「心理学の尺度開発」に特化した、GUIベースの統計処理ソフトを作り上げることを目指しています。

本日は、フレームワークとなるshinydashboardの設定です。

作りながらUPしていますので、ご指摘など歓迎です。

フレームワークの設定

shinyのプログラムはui.Rとserver.Rからなっています。ここは第2回目でmultiple filesで作り始めたので主要なプログラムが二つに分かれています。

確認するとui.RはWEBのUI部分のプログラムを書き込む部分で、server.Rがバック（ロジック）側のプログラムを書き込む部分です。

また、shinyにはプログラムの立ち上げ時に最初に読み込まれるglobal.Rというファイルをつけることも可能です。ライブラリーなど共通のコードはここに書いておけばコード全体がすっきりしますので、ここで設定しておきたいと思います。

左上のアイコンからR Scriptをクリックして新しいファイルを作ります。

そして名前[global.R]としてSave asしておきます。

最初のプログラムの確認

まずは何もない状態からスタートです。

唯一ui.RにはfluidPage( )が残っています。これは、Web画面を拡大縮小したときに全体の大きさも拡大縮小して見栄えが良くなるためにbootstrapを使うために必要なコードで基本デフォルトで入れておく物と考えても良いかと思います。Bootstrap自体についてはサイトを探すとたくさん情報ありますのでそちらも参考にしてみてください。

#global.R
library(shiny)

#ui.R
shinyUI(fluidPage(
   
))


#server.R
shinyServer(function(input, output) {

})

ではここで試しに動かしてみましょう。画面中央上ほどにRun Appというボタンがあります。そこをクリックしてみてください・・・・・

はい・・・真っ白な画面が出るだけで何も出ませんね。まだ何も書いてないのでこれでOKです。

プログラムのベース：　shinydashboard

ではプログラムのベースとなるダッシュボードを入れていきます。ダッシュボード自体については、本ブログでも取り上げていますので是非ご覧ください。

基本的なコード構成を確認すると以下の通りです。まずはdashboardPageで3つの要素header,siderbarおよびbodyを囲みます。

これを先ほどのプログラムに組み込みました。4-8行目が該当部分です。

# ui.R
shinyUI(fluidPage(

    dashboardPage(
        dashboardHeader(),
        dashboardSidebar(),
        dashboardBody()
    )
    
))

なお、ダッシュボードを動かすためにはlibrary(shinydashboard)でライブラリを設定しておく必要があります。これは他のライブラリーと一緒にglobal.Rに置いておくことにします。

# global.R
library(shiny)
library(shinydashboard)

このプログラムを改めてRun Appで走らせてみてください。青色の画面がたちあがりました。

画面をよく見ると大きく3つの要素からできています。それぞれが追加したコードと対応しています。

まとめ

今回は、プログラムの箱を作るところまで実行しました。

次回はもう少しダッシュボードを設定してタブによる画面切り替えなど、プログラム全体がわかり安くなるように作ってみます。