babelquartoによるQuartoウェブサイトの多言語化

Making a multilingual Quarto website with babelquarto

ニッタ ジョエル
Joel NITTA

https://joelnitta.github.io/2024-12-07-japanr

Japan.R2024

Image: Alexandre Debiève on Unsplash

自己紹介：@joelnitta

• 千葉大学 准教授
• シダ植物の進化と生態学
• Rパッケージ開発
  （進化生態学向け）

https://www.joelnitta.com

I am an assoc. prof. at Chiba University in Japan studying fern ecology and evolution. I develop R packages for eco-evo.

Quarto はすごいぞ

• QuartoはRやPythonの計算結果を直接文章に入れるツール。
  • HTML（ウェブサイト、スライド、本）
  • PDF
  • MS Word

Artwork from “Hello, Quarto” keynote by Julia Lowndes and Mine Çetinkaya-Rundel, presented at RStudio Conference 2022. Illustrated by Allison Horst.

Quarto is a fantastic tool for data science. It supports multiple programming languages and output formats.

Quartoの多言語機能は未完成

• しかし、Quartoは比較的新しいため、まだ欠けて
  いる機能があります。

• 標準では多言語機能が
  ありません。

https://github.com/quarto-dev/quarto-cli/issues/275

But Quarto does not yet support multilingual websites.

babelquarto

• @maelleと@NenuialによるQuarto BookやWebsiteの各言語のバージョンをレンダーする Rパッケージ。

• （翻訳とは別）

https://docs.ropensci.org/babeldown/

babelquartoby @maelle and @Nenuial renders a multilingual Quarto Book or Website (separate from actual translation)

例：ソフトウェア・カーペントリー日本

Example: https://swcarpentry-ja.github.io/

注意

• 将来的にQuartoに多言語機能が加わる可能性が
  あります。

• その場合、babelquartoは不要になるでしょう。

• しかし、現時点で多言語のニーズがある場合は十分活用できます。

Caution: there is a possibility that support for multilingual websites will be added to Quarto, so someday you won’t need to use babelquarto. But it is a good option for now.

babelquarto demo

基本的なサイトを作る

library(quarto)
quarto_create_project(
  name = "example",
  type = "website",
  no_prompt = TRUE,
  quiet = TRUE
)

example
├── _quarto.yml
├── about.qmd
├── index.qmd
└── styles.css

First step: create a Quarto website

基本的なサイトを作る

library(quarto)
quarto_create_project(
  name = "example",
  type = "website",
  no_prompt = TRUE,
  quiet = TRUE
)

example/_quarto.yml

project:
  type: website

website:
  title: "example"
  navbar:
    left:
      - href: index.qmd
        text: Home
      - about.qmd

format:
  html:
    theme: cosmo
    css: styles.css
    toc: true

First step: create a Quarto website

主言語を登録する

library(babelquarto)
register_main_language(
  main_language = "ja",
  project_path = "example"
)

example/_quarto.yml

project:
  type: website

website:
  title: "example"
  navbar:
    left:
      - href: index.qmd
        text: Home
      - about.qmd

format:
  html:
    theme: cosmo
    css: styles.css
    toc: true




babelquarto:
  languagecodes:
  - name: ja
    text: "Version in ja"
  mainlanguage: 'ja'
lang: ja

Next step: add main (default) language

翻訳言語を追加する

library(babelquarto)
register_further_languages(
  further_languages = c("en"),
  project_path = "example"
)

example/_quarto.yml

project:
  type: website

website:
  title: "example"
  navbar:
    left:
      - href: index.qmd
        text: Home
      - about.qmd

format:
  html:
    theme: cosmo
    css: styles.css
    toc: true




babelquarto:
  languagecodes:
  - name: en
    text: "Version in en"
  - name: ja
    text: "Version in ja"
  mainlanguage: 'ja'
  languages: ['en']
title-en: title in en
description-en: description in en
author-en: author in en
lang: ja

Next step: add further language(s)

_quarto.ymlを編集する

example/_quarto.yml

project:
  type: website

website:
  title: "example"
  navbar:
    left:
      - href: index.qmd
        text: Home
      - about.qmd

format:
  html:
    theme: cosmo
    css: styles.css
    toc: true




babelquarto:
  languagecodes:
  - name: en
    text: "Version in en"
  - name: ja
    text: "Version in ja"
  mainlanguage: 'ja'
  languages: ['en']
title-en: title in en
description-en: description in en
author-en: author in en
lang: ja

→

example/_quarto.yml

project:
  type: website

website:
  title: "テスト用のサイト"
  navbar:
    left:
      - index.qmd
      - about.qmd

format:
  html:
    theme: cosmo
    css: styles.css
    toc: true




babelquarto:
  languagecodes:
  - name: en
    text: "English"
  - name: ja
    text: "日本語"
  mainlanguage: 'ja'
  languages: ['en']
title-en: Test Site
description-en: My test website
author-en: Joel Nitta
lang: ja

Next step: edit _quarto.yml

翻訳ファイルを追加する

example
├── _quarto.yml
├── about.qmd
├── index.qmd
└── styles.css

→

example
├── _quarto.yml
├── about.en.qmd
├── about.qmd
├── index.en.qmd
├── index.qmd
└── styles.css

Next step: add translated files, e.g. index.en.qmd (English version of index.qmd)

example/index.qmd

---
title: "ホーム"
---

これは Quarto のウェブサイトです。

Quarto のウェブサイトについて詳しく知りたい場合は、<https://quarto.org/docs/websites> をご覧ください。

example/index.en.qmd

---
title: "Home"
---

This is a Quarto website.

To learn more about Quarto websites visit <https://quarto.org/docs/websites>.

レンダーする

注意：quarto renderが使えません

render_website(project_path = "example")


[1/2] about.qmd

[2/2] index.qmd

Output created: _site/index.html


[1/2] about.qmd

[2/2] index.qmd

Output created: _site/index.html

Render website. Note you cannot use quarto render, use babelquarto::render_website() instead. To serve, use servr::httw().

サーブする

注意：quarto previewが使えません

servr::httw("example/_site")

https://joelnitta.github.io/example-babelquarto/

内容の自動翻訳

• Markdownやコードごと翻訳されると困ります。

• 「ChatGPT、これを翻訳してね」

::: {.columns}

::: {.列}

• いや、だからそうではなく・・

If you try to use AI for automated translation, it might translate the actual Markdown code.

内容の自動翻訳

• 解決策 ①：Custom GPT。プロンプトでMarkdownをいじらないように頼む。

Japanese Code Proofreader

Solution 1: use a Custom GPT with a prompt to preserve Markdown formatting.

内容の自動翻訳

• 解決策 ②：babeldown。DeepLに送る前にMarkdownをXMLにパースすることで内容だけを翻訳する。

https://docs.ropensci.org/babeldown/

Solution 2: use babeldown, which parses the Markdown into XML and only translates the content using DeepL.

翻訳の維持

• 元の文章が変わると翻訳を更新する
  必要があります。

• POファイルの使用によって、各文章とその翻訳を管理できます。

• CrowdinやTransifexなどのクラウドツールは、POファイルを裏で使っています。

https://localazy.com/term/free-po-editor

You need to update the translation if the source changes. PO files are good for this, and are used by cloud services like Crowdin and Transifex.

翻訳の維持

• ザ・カーペントリーズではCrowdinを使っています

https://swcarpentry-ja.github.io/r-novice-gapminder/

At Software Carpentry Japan, we use Crowdin for community-based translations.

まとめ

多言語化はアクセスを増やすためだけでなく、コミュニティを育むためにも重要です！

Enjoy!

Take-home message: internationalization is important not only for accessibility but for growing communities!