22

私は光沢のあるアプリを学んでおり、レイアウト、特にスタイルとフォントの微調整についていくつかの基本的な質問があります。ポインタまたは明示的な回答に感謝します、ありがとう!

基本的な入出力アプリを考えてみましょう。ユーザーは sidebarPanel にデータを入力し、mainPanel に反応的に結果を出力します。

ここに画像の説明を入力

  1. mainPanel の出力テーブルを sidebarPanel のようにフォーマットするにはどうすればよいですか? 色付きの背景 (おそらく別の色) とほぼ同じサイズの長方形と、同様のサイズのボックスに表示されるデータを言います。

  2. パネル内のフォント タイプ、フォント サイズ、およびフォント サイズを制御するにはどうすればよいですか?

コードからわかるように (以下の数行の runGist の詳細を参照)、sidebarPanel の numericInput ボックスのサイズをカスタマイズすることには成功しましたが、フォント スタイルを制御することはできませんでした (is my tag$スタイルコードが間違っていますか?)。

さらに重要なのは、見た目を美しくするために、mainPanel を sidebarPanel のようにフォーマットする方法がわかりませんでした。ほとんどの場合、光沢のある Web サイトの例を変更しましたが、明らかにいくつかの重要なことを見逃していました。

編集 1: Scott Chamberlain の提案に従って、server.R および ui.R ファイルを github にコピーしました。

library("shiny") 
runGist("gist.github.com/annoporci/7313856")

編集 2: Scott は、Chrome/Firefox の「Inspect Element」を使用することを提案しました (html ページの本文を右クリックすると、他のブラウザでも同じ機能が得られる場合があります)。以下はスクリーンショットです。

要素を検査

ここに画像の説明を入力

「Inspect Element」ツールを使用するという Scott の提案は、非常に実り多いものでした。

これが私が学んだことです（私が間違っていなければ）：

  • container-fluidrow-fluidコンテナ全体を制御します。
  • span12を制御しますheaderPanel
  • span4を制御しますsidebarPanel
  • span8を制御しますmainPanel
  • shiny-bound-input入力側用です
  • shiny-bound-outputおよびshiny-html-output（両方とも有効であるように見えます）は出力側用です

これらの発見に基づいて、私は HTML スタイルを mainPanel に配置しました。pageWithSidebar() のすぐ内側に配置する方が (私にとっては) 直感的ですが、うまくいきませんでした。

編集された光沢は次のとおりです。

runGist("https://gist.github.com/annoporci/7346772")

HTML スタイルは次のとおりです。

  HTML('<style type="text/css">
    .row-fluid { width: 50%; }  
    .well { background-color: #99CCFF; }
    .shiny-html-output { font-size: 20px; line-height: 21px; }
  </style>')

コンテナ全体の幅を小さく保つために、50% を選択しました。

sidebarPanel と mainPanel に同じ色を選択しました。

出力用に大きなフォントを選択しました。これは、ここでは見栄えがよくありませんが、実際のアプリでは意味があります。それに加えて、私は何よりも実験しています。

出力ボックスの高さを入力ボックスと同じになるように微調整するためだけに、デフォルトの 20px ではなく 21px の行の高さを選択しました。もう一度、実験です。

server.R の表示スタイルも変更しました。

output$myResults <- renderText({
  r <- myFunction(input$myinput)
  c("My Output:","<br><br>",r)
})

これは、「My Output」という言葉の下に結果を表示したかったためです。試行錯誤の結果、ベクトル内の文字列を区切り文字として強制的に改行できることを発見しましc()た<br><br>。これが推奨されるアプローチであった場合、私はショックを受けるので、これを行う正しい方法を知っている場合は、チャイムを鳴らしてください。

重要度の低いフォローアップの質問:

sidebarPanel の入力番号と同様の白いボックスに出力結果を表示する方法を見つけることができるかどうかを確認します。どんな提案でも大歓迎です。

server.R および ui.R と一緒に保存するために、すべての html 変更を同じ別のファイルに収集することは可能でしょうか?

Scott の回答を選択します。なぜなら、彼は、私の出力をほぼ希望どおりにするのに十分な発見を手伝ってくれたからです。ただし、上記の説明に誤りや不正確さが見られる場合は、編集してください。

4

3 に答える 3