18-1 電子書籍・ウェブ小説ビューア

自分の書いた文章を、本物の電子書籍やウェブ小説アプリで読むときのようにプレビューできたら?フロントマター一行だけで、普通のノートがページをめくる電子書籍に、スマホ画面の中のウェブ小説に早変わりします!📖📱

← ホームへ: ObsiKO 101 · 関連記事: 18 プレゼンテーションを作る · 18-2 キャラクター図鑑とキャラクター参照 · 18-3 メッセンジャー・ビジュアルノベルビュー

1分で分かる要点 ⏱️

• フロントマターに view: book を入れると → ページをめくる電子書籍ビューア 📖
• view: webnovel を入れると → スマホの中のウェブ小説ビューア 📱
• どちらのビューアも右下の丸い設定ボタン(フローティング) ひとつで、フォント・サイズ・余白・テーマを自由自在に切り替えられます!(23 設定とテーマの書式ツールと同じガラス風デザインです。)
• 魔法の呪文は 18 プレゼンテーションを作る の marp: true と全く同じ方法で入れます。

1. ビューアの呪文をかける 🪄

文書の一番上、フロントマター(身分証)欄に view プロパティを追加するだけです。

フロントマター欄がまだなければ、右クリック(iOSは長押し)メニューの「フロントマターを挿入」を押してください。欄の下にある「+ プロパティを追加」ボタンを押し、v と打つだけで出てくる view を選んで、値を book(電子書籍)または webnovel(ウェブ小説)にすれば完了です!

---
view: book
---

この呪文をかけると、上部の表示メニュー（👁）を開いたときに、普段は出てこない項目がぱっと現れます。 - view: book → 「本として読む」(開いた本のアイコン 📖) - view: webnovel → 「ウェブ小説ビュー」(スマホのアイコン 📱)

💡 ウェブ小説は webnovel のほかに web-novel・novel と書いても認識されます。大文字・小文字も区別しません(Book でもOK)。

2. 電子書籍ビューア 📖 — 本物の電子書籍のように

ボタンを押すと画面いっぱいに広がり、文書が画面サイズに合わせて自動でページに分割され、本のように見えます。

• 1ページ表示 / 見開き表示: デスクトップとiPadは既定が見開き表示(本を開いたように真ん中をぴったり合わせて表示)で、1ページ表示に切り替えることもできます。iPad以外のスマホ・タブレットアプリ(iPhone・Android)では画面幅の都合でつねに1ページ表示になります。
• フォント選び: マルブリ(既定)・リディバタン・KoPubWorld バタン/トドゥム・ソウルナムサンチェ・ポンゴディック・ポンミョンジョ・システムフォントから選べます。
• 文字サイズ・余白: 文字サイズはステッパー(− 数字 +)で、余白は狭め/普通/広めの3段階で調整。
• テーマ: 昼(明るい) · セピア(目に優しいオフホワイト) · 夜(暗い)。
• ページ番号・進行度: 各ページの下に番号があり、上部の進行度バーで今どのあたりを読んでいるかが一目で分かります。

ページをめくる

• → / Space / PageDown: 次のページ、← / PageUp: 前のページ
• 画面の左右の端をクリックするか、タッチ端末では左右にスワイプ
• Home / End: 最初 / 最後へすっと移動
• + / −: 文字サイズを大きく / 小さく

3. ウェブ小説ビューア 📱 — スマホの中のあの感じ

今度は本物のウェブ小説アプリのように、文章がスマホのフレームの中に収まって表示されます。フレームの上下にはカメラやホームボタンの余白まであって、本当に実機で見ているみたいです!

組版プリセット

実際のプラットフォームの組版用紙比率そのままの5つのプリセットを用意しました。プリセットごとに既定のフォント・文字サイズ・行間・背景が異なります。

右下のプリセットのドロップダウンは常に表示されているので、いつでもさっと切り替えられます。驚くことに、プリセットごとに変更した設定(テーマ・フォントなど)が別々に保存されるので、リディで夜モードにして読んだ後、カカオに移ってからまた戻ってもそのままです!

スクロール表示 ↕ vs ページ表示 📄

• スクロール表示: 上下にすーっと読む、おなじみの方式。自動スクロールボタン(速度3段階)をオンにすれば、手を触れなくてもすらすら読めます!
• ページ表示: 1画面が1ページ。左右にめくって読みます。画面が広ければ複数ページを並べて表示することもできます。
• 自動ボタンはページ表示でも使えます — このときは一定間隔でページが自動でめくられます。自動再生中は(対応端末で)画面が消灯しないようキープしてくれます。📱✨

次話へすっと — 連載を続けて読む 📚

• 同じフォルダに view: webnovel の文書が複数あれば(連載原稿のように)、最後のページで「次話 ▸」/「◂ 前話」ボタンでファイルを切り替えながら続けて読めます。ファイル名の順番で移動します。

その他の設定

• フォント・文字サイズ・行間・余白
• 配置: 左揃え / 両端揃え
• 背景: ホワイト・クリーム・セピア・グリーン・ダーク
• 💡 ObsiKOのウィンドウサイズを変えても内容は再配置されず、同じ比率のまま拡大・縮小します — 読んでいた流れが崩れません。

4. 両ビューア共通の小ワザ 🍯

• 読んでいた場所からすぐ続き 🔖: ビューアを閉じてまた開くと、読んでいた位置からそのまま続きが読めます(文書ごとに記憶)。最後まで読み終えた文書は、次回開くと最初から始まります。
• 目次へジャンプ 📑: 文書に見出し(#、##…)があれば目次ボタンが現れます。押すと章の一覧が開き、行きたい場所へすっと移動できます。
• 上部の進行度バーで移動: 上部の進行度バーをクリックまたはドラッグすると、その位置へすっとジャンプします(スクロール表示ではスクロール位置に移動)。
• 右上の情報表示: 今の文書が全部で何ページ・何文字・読了までの予想時間(約n分)かを教えてくれます(ウェブ小説のスクロール表示では文字数)。
• 右下のフローティング設定ボタン(丸い⚙): 押すと設定項目がすーっと上に開きます。もう一度押すか外側をタップすると閉じます。ページをめくるたびに開く必要はないので、普段は閉じておきましょう。
• BGMを消す ♪: 原稿にBGMが仕込まれていると、上部に♪ボタンが現れます。静かに読みたいときはトンと押してミュートしましょう。
• ボタンがすーっと隠れます: しばらく操作をしないと、ボタンや進行度バーが薄くなって隠れ、文章に集中できるようになります。マウスを動かすか画面をタップすると再び現れます。
• 本文中のリンクもクリックOK: 文章内の [[ウィキリンク]] やウェブリンクはそのままクリックして移動できます(ページめくり領域の上にあってもリンクが優先されます)。
• 終了: 画面右上の✕ボタンを押すかEscキー一発で編集画面に戻ります。

5. 何を入れられる? 🎁

普段使っているマークダウンのほぼすべてがそのまま綺麗に表示されます — 見出し・リスト・引用・表・ハイライト・画像、コードブロック、04 高度なマークダウンのチャートとダイアグラム、KaTeX数式まで!文章の雰囲気は、ビューアで選んだテーマ(背景・文字色)に合わせて変わります。

キャラクター参照とBGMも生きてきます 🎭🎵

18-2 キャラクター図鑑とキャラクター参照の <<이름:이미지>> 構文が入った原稿なら — - 人物参照は名前を出さずに丸い顔アイコン + 「かぎかっこ付きのセリフ」として、背景参照は「名前・画像名」の区切り線(場面転換)として表示されます。 - 音楽だけを単独で添付した行(![[曲.mp3]]・[[曲.mp3]]・パスのみ)は、その箇所が画面に表示されている間BGMとしてループ再生されます。次の曲の箇所に達すると、前の曲がフェードアウトしながらクロスフェードで滑らかにつながります。文中の効果音リンクや %%コメント%% は静かに非表示になります。

小説やエッセイ、長文を書いているなら、ウェブ小説ビューアで「読者にはこう見えるんだな」と確認するのにぴったりです。本にまとめる原稿なら、電子書籍ビューアで開いた本の感覚を先取りしてみてください!✨

← 前へ: プレゼンテーションを作る · 最初へ · 次へ: キャラクター図鑑とキャラクター参照 →