<!-- docs: {"id":"editor","slug":"editor","locale":"ja","section":"start","order":15,"description":"ポストや参加投稿に使うブロックエディターの / メニュー、文字の装飾、リスト・コード・表、メディアと埋め込み、下書きの保存方法を表示例とともに紹介します。","keywords":["ポストエディター","投稿","参加投稿","ブロック","スラッシュメニュー","見出し","リスト","コードブロック","表","画像","ギャラリー","動画","埋め込み","下書き"]} -->

# ポストエディターの使い方

Boutletでは、通常のポストも参加投稿も同じエディターで作成します。短い感想から、体験や資料をまとめた長文まで、必要な要素を追加しながら書いてみましょう。

エディターは、**Notionに似たブロック形式**の編集に対応しています。段落、見出し、リスト、画像などがそれぞれ一つのブロックになり、追加や並べ替えによって文章を組み立てられます。

このページの表示例には、実際のポスト本文と同じレンダラーを使っています。**Markdown表示**では、同じ例をポストと同じ方法でMarkdownに変換して表示します。文字の色や配置、一部のメディアの表示方法は、閲覧方法によって異なります。

## `/`でブロックを探して追加する

1. 空の行で `/` を入力します。
2. ブロック名や検索語を入力します。
3. メニューの項目をクリックするか、上下の矢印キーで選んでEnterを押します。

`/` の後に入力する文字は、ブロックを探すための**検索語**です。コマンドを丸ごと覚えなくても、メニューで目的の項目を選べます。

| 追加するブロック         | 検索例                                   |
| ------------------------ | ---------------------------------------- |
| 標準テキスト             | `/標準テキスト`、`/paragraph`            |
| 見出し1〜6               | `/h1`、`/h2`、`/h3`、`/h4`、`/h5`、`/h6` |
| 箇条書き・番号付きリスト | `/箇条書き`、`/リスト`、`/ul`、`/ol`     |
| チェックリスト           | `/チェック`、`/check`                    |
| 引用                     | `/引用`、`/bq`                           |
| コードブロック・表       | `/code`、`/表`                           |
| 画像・動画               | `/画像`、`/video`                        |
| 画像スライダー           | `/gallery`、`/slider`                    |
| 区切り線                 | `/divider`                               |

ブロック横の **`+`** ボタンからも追加メニューを開けます。見出しやメディアは、エディター上部のツールバーからも追加できます。

## テキストと見出し

### 段落と見出し

そのまま入力すると通常の段落になります。Enterで次のブロックを作成し、同じ段落の中で改行したいときはShift+Enterを使います。

見出しは1〜6のレベルを選べます。`/h2` などで検索するか、上部の見出しメニューから選んでください。文章の中を区切る小見出しには、見出し2や見出し3が便利です。

行の先頭で `#` に続けてスペースを入力すると見出し1に、`##` に続けてスペースを入力すると見出し2に切り替わります。

**表示例**

# 実際に確認した結果

## 使用した環境

### 試した手順

#### 気づいた違い

##### 参考にした資料

###### まだ分からないこと

### 文字の装飾

文字を選択すると書式ツールバーが表示されます。**太字**、斜体、下線、取り消し線、インラインコードのほか、文字色や背景色、対応するブロックの文字揃えを変更できます。

リンクを付けるには、文字を選択してリンクツールにURLを入力します。短いコマンドや名前は、インラインコードにすると本文と区別しやすくなります。

**表示例**

**強調したい内容** · *補足したい考え* · 注目したい点 · ~~修正前の表現~~ · `関数名`  
[Boutletを見てみる](https://www.boutlet.io/)

### 引用

資料の一節や、本文から区別して見せたい文章には引用ブロックを使えます。`/引用` を選んで内容を入力してください。出典のある文章には、参照先のリンクも添えましょう。

引用ブロックは本文内の表示形式です。別のBoutletのポストを参照して新しいポストを書く「引用」機能とは、それぞれ別に使えます。

**表示例**

> 同じ手順でも、使用する環境によって結果が異なりました。

## リスト

関連する項目には箇条書き、手順には番号付きリスト、確認することにはチェックリストを使うと整理しやすくなります。

| リスト         | 追加方法                                                      |
| -------------- | ------------------------------------------------------------- |
| 箇条書き       | `/ul` を選ぶか、行の先頭で `-` に続けてスペースを入力         |
| 番号付きリスト | `/ol` を選ぶか、行の先頭で `1.` に続けてスペースを入力        |
| チェックリスト | `/チェック` を選ぶか、行の先頭で `[ ]` に続けてスペースを入力 |

Enterで次の項目を追加します。空の項目でもう一度Enterを押すと、通常の段落に戻ります。入れ子の項目は同じ種類のリストでまとめてください。番号付きリストは1から始まります。

チェックの状態は作成・編集画面で変更します。公開後のポストには、作成者が保存した状態が表示されます。

**表示例**

- 確認した画面を整理します。
- 違いのある部分を比べます。

1. 使用した環境を記録します。
2. 手順と結果をまとめます。

- [x] 資料の出典を確認する
- [ ] 別の環境でも確かめる

## コード・表・区切り線

### コードブロック

複数行のコードやコマンドを共有するときは、`/code` でコードブロックを追加します。ブロックの言語メニューで使用する言語を選ぶと、構文の色分けが適用されます。標準テキストとして表示することもできます。

コードブロックはコードを表示するためのもので、実行はしません。

**表示例**

```typescript
type Observation = { setup: string; result: string };

const observation: Observation = {
  setup: "mobile",
  result: "checked",
};
```

```javascript
const observations = ["first attempt", "second attempt"];

observations.forEach((item) => console.log(item));
```

### 表

`/表` で表を追加し、各セルに入力します。行と列のハンドルメニューから、行や列を追加・削除できます。

複数の項目を比較するときに便利です。最初の行に項目名を入れ、狭い画面でも読みやすいように、列数とセルの内容を簡潔にまとめましょう。

**表示例**

| 確認した項目 | 1回目 | 2回目 |
| 画面の説明 | 短い説明 | 例を添えた説明 |
| 分かりにくかった点 | リクエストの目的 | 追加の確認が必要 |

### 区切り線

話題が切り替わる場所には、`/divider` で区切り線を追加できます。

**表示例**

ここまでが、実際に確認できた内容です。

---

続いて、まだ確認できていない点をまとめます。

## 画像と動画

### 画像

`/画像` または上部の画像ボタンを選び、端末からファイルをアップロードします。画像ファイルをエディターへドラッグしたり、クリップボードの画像を貼り付けたりすることもできます。

画像が何を示しているのか本文に添えると、体験や結果が伝わりやすくなります。公開できる画像を使い、スクリーンショットに個人情報が含まれていないかも確認してください。

**表示例**

![観察した内容と根拠となる資料をつなぐ図](/docs/editor/observation.svg)

> Caption: 観察した内容に、根拠となる資料を添えてみましょう。

### 画像スライダー・ギャラリー

複数の画像を一つにまとめるには、`/gallery` または `/slider` で画像スライダーを追加します。上部のギャラリーボタンからも複数の画像を選択できます。

スライダーの編集画面で画像を追加し、順番を整えられます。画像ブロックのハンドルメニューには**スライダーとして表示**、スライダーのメニューには**個別の画像として表示**する機能があり、文章に合う形に切り替えられます。

**表示例**

<!-- boutlet:block {"version":1,"type":"imageCarousel","align":"center"} -->

- ![確認した内容を並べて比較する図](/docs/editor/comparison.svg)

  > 同じ基準で比較する項目を整理します。

- ![観察した内容と資料のつながりを示す図](/docs/editor/observation.svg)

  > それぞれの結果に根拠となる資料を添えます。

<!-- boutlet:block:end -->

### 動画

`/video` または上部の動画ボタンを選び、ファイルをアップロードします。アップロードと動画の処理が完了すると公開できます。

動画ファイルのアップロードと外部動画の埋め込みでは、追加方法が異なります。YouTubeの動画は、次のURL貼り付けの方法で追加してください。

**表示例**

[短い画面録画で、変化の様子を伝えられます。](/docs/editor/demo.mp4)

## リンクと外部ウィジェット

### リンクのプレビュー

空の段落にWebページのURLだけを貼り付けると、対応するアドレスをリンクのプレビューや外部ウィジェットに変換できます。

一般的なWebページは、タイトル・説明・画像の付いたリンクカードとして表示される場合があります。元のサイトが情報を提供していない場合やページにアクセスできない場合は、表示内容が限られることがあります。

文中の文字にリンクを付けたい場合は、文字を選択してリンクツールを使ってください。

**表示例**

[Boutlet — 気になる話題から、会話が広がる。](https://www.boutlet.io/)

### 対応する外部コンテンツ

ウィジェットは `/` メニューから選ぶのではなく、**対応するURLを空の段落に貼り付けて**追加します。

| サービス              | 追加できるコンテンツ                                                                          |
| --------------------- | --------------------------------------------------------------------------------------------- |
| YouTube               | 動画                                                                                          |
| X・Threads・Instagram | 対応する公開投稿                                                                              |
| Notion                | 公開またはWeb公開したページ                                                                   |
| Google Workspace      | ドキュメント・スプレッドシート・スライド・フォーム・カレンダー・Driveの対応する共有コンテンツ |

元のサービスの共有設定を確認してください。自分のアカウントで開けても、ほかの人には閲覧権限がない場合があります。Boutletに追加しても、元のコンテンツの閲覧権限は変わりません。

外部コンテンツの表示には、そのサービスへの接続が発生します。再生や追加の読み込みは、各サービスの提供状況と表示される案内に従って利用できます。

**表示例**

[YouTubeの埋め込み表示例](<https://www.youtube.com/watch?v=jNQXAC9IVRw>)

## ブロックの整理と保存

### 並べ替えと削除

ブロック横のハンドルをドラッグすると、好きな位置へ移動できます。ハンドルをクリックするとメニューが開き、不要なブロックを削除できます。

段落を見出しやリストに変えるときは、文字を選択して書式ツールバーのブロック種類メニューを使います。誤って変更した場合は、元に戻す操作で取り消せます。

### 下書きと公開済みポストの保存

| 作業の種類                               | 保存方法                                                                       |
| ---------------------------------------- | ------------------------------------------------------------------------------ |
| 新しいポスト・引用ポスト・参加投稿の作成 | 下書きが自動保存されます。画面を離れる前に、上部の保存状態を確認してください。 |
| 公開済みポスト・参加投稿の編集           | 編集後に**変更を保存**して反映します。                                         |

下書きを保存しただけでは公開されません。ファイルのアップロードと処理が終わったことを確認してから、公開ボタンを選んでください。

参加投稿にも同じブロックと書式ツールが使えます。作成画面の上部にある参加先と報酬案内を確認し、無料で一般公開できる内容を作成してください。公開後の編集を評価用の提出内容にも反映したい場合は、再提出できるか確認が必要です。参加の手順は[参加投稿の作成と提出](signals.md)で確認できます。