自分だけの無料ウェブサイトを作る5部 - Quartoの基本を身につけよう

나만의 무료 웹사이트 제작 4부 - 배포(feat. Netlify) ポストまでは、オンライン上でウェブサイトを立ち上げることに集中していました。 今回のポストから何回かにわたって ウェブページを飾る方法について説明します。 そのために Rマークダウン 次世代バージョンである クォート(Quarto)について知っておく必要があります。 この2つの詳細については Rマークダウンに関するRマークダウンユーザーFAQでご確認ください。

* 写真をもう少し詳しく見たい方はクリックすると拡大表示されます。

Quarto(クォート) 文書概要

レンダリングプロセス

[ 렌더링 전후 화면 비교 ] 무료 웹사이트
[レンダリング前後の画面比較]

前回の記事で、クォートドキュメントは .qmd 拡張子名を持っていることを知りました。上の図で左がクォート文書で右がレンダリングされてViewer Panelに表示された結果です。クォート文書をレンダリング(rstudio-render-buttonショートカット: ウィンドウズ Ctrl+Shift+K, macOS ⇧+⌘+K)すると、基本的にHTML文書が生成されます。もちろん、PDFなど他のフォーマットへのレンダリングも可能です。

[レンダリングプロセス(出典:quarto.org) ]。

上の図は、クォート文書がMS wordなどの文書にレンダリングされる過程を示しています。 knitr パッケージはクォート文書でマークダウン(.md)を生成します。このファイルはまた、汎用文書変換器である パンドックによって最終的なレンダリング文書を作成します。ショートカット一つでこのような複雑なプロセスが行われます(特に指定がない場合、基本的にレンダリングされた文書形式はHTMLです)。

クォート編集モード

비주얼-소스-편집모드-비교
[Visual / Source編集モードの比較]

クォート文書は2つのRStudio編集モードで作成することができます。代表的な例として Visual編集モードではテキストを選択し Ctrl+B ホットキーを押すと太字に変換することができます。 Source 編集モードではこのために次のようにマークダウン形式を使います。下記の例はレンダリングされたHTML画面で 太字で表示されます と表示されます。 そして、この2つのモードはショートカットキー(Ctrl+Shift+F4, ⇧+⌘+F4)を一回押すと編集モードがビジュアルからソースへ、もう一度押すとソースからビジュアルへ画面が相互に切り替わります。

**太字で表示されます。 

無料ウェブサイト制作のためのクォートドキュメント構成

[ 쿼토 문서 구성 ]
[クォート文書の構成]

Quoto文書は上の図のようにヤムルヘッダー(YAML Header)、コードチャンク(Code Chunk)、マークダウンテキスト(Markdown Text)で構成されます。

YAML ヘッダー(YAML Header)

上下 3つのダッシュ(-)で区切られたヤムヘッダーにはタイトル、形式、エディタなどが明示されます。基本形式は key: valueの形で表現されます。上の例ではkeyがtitleで、valueが"Hello, Quarto"になります。 詳しくは後日、他のポストで説明します。

コードチャンク(Code Chunk)

上下の3つのバックティック("`)とせん断部{r}。でRコードの束(チャンク)オプションが表現されます。このチャンク内にヤム形式を使う時は #| labelはコードチャンク名を表し、includeはコードチャンクや出力をレンダリング画面で表示するかどうかを指定します。falseになっているので、一番最初の図でlibraryに対するコード自体とそのコード実行結果についてレンダリング画面では全く表示されないことが分かります。

マークダウンテキスト(Markdown Text)

Quoto文書はテキストとしてマークダウン構文を使用します。ビジュアル編集モードを使えば、文書を作成するために多くのマークダウン構文を覚える必要はありません。

以下は今まで上で説明してる内容のコードソース(出所: quantoホームページ)です。RStudioを実行してqmdファイルを作ってこのコードソースをコピーして入れてください。 そして直接2つの編集モードを変えながら変わる様子を確認する実習をしてみて、レンダリングもやってみてください。

---。
title: "Hello, Quarto"
editor: visual
プレビュー:ビューアー
--- title: "Hello, Quarto" (ハロー、クァルト)

```{r}
#| label: load-packages
#| include: false

library(tidyverse)
library(palmerpenguins)


## Meet Quarto

Quartoは、コンテンツと実行可能なコードを織り交ぜ、完成したドキュメントにまとめることができます。Quartoについて詳しくはをご覧ください。

## ペンギンとの出会い

![](https://raw.githubusercontent.com/quarto-dev/quarto-web/main/docs/get-started/hello/rstudio/lter_penguins.png){style="float:right;"fig-alt="パーマー諸島ペンギンの3種、チンストラップ、ジェントゥー、アデリーのイラスト。artwork by @allison_horst." width="401"}

penguins` data from the [**palmerpenguins**](https://allisonhorst.github.io/palmerpenguins "palmerpenguins R package") package contains size measurements for `{r} nrow(penguins)` penguins from three species observed on three islands in Palmer Archipelago, Antarctica.

下の図は、これらのペンギンのヒレの長さと嘴の長さの関係を示しています。

```{r}
#| label: plot-penguins
#| 警告false
#| echo: false

ggplot(penguins、
       aes(x = flipper_length_mm, y = bill_length_mm)) +
  geom_point(aes(color = species, shape = species)) +
  scale_color_manual(values = c("darkorange","purple","cyan4")) +
  labs(
    title = "フリッパーと嘴の長さ"、
    subtitle = "パーマーステーションLTERのペンギンの寸法"、
    x = "ヒレの長さ(mm)", y = "嘴の長さ(mm)"、
    color = "ペンギン種", shape = "ペンギン種"
  )+。
  theme_minimal()
''

整理する

今回のポストではQuotoの基本を固めるためにレンダリングプロセスを始め、Quoto文書の編集モードと構成要素について説明しました。 少しずつRとRStudio、Quotoに慣れてきましたか?そうでない方はもう少し頑張ってみてください。

以上、IT活用を通じた生活の豊かさを提供するために努力している secondlife.lolのテリーでした。

'secondlife.lol'のすべてのコンテンツは著作権法の保護を受けています。無断転載やコピー、配布などを禁じます。

類似の投稿