wani 0.1.14 → 0.1.15

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: f47f0147e24156fd966b89b0185cacd07d7afd45d285c0a0d607d44de3cb6406
-  data.tar.gz: d8209c67e888d8e909551c0842167724fa8562934fc29f76a874de0a11c2d96d
+  metadata.gz: 7082411823ce9ed8947c371bc7e16d786fc39f6e90a2b6d3f7a9d184b256fdcb
+  data.tar.gz: 3206f7bc05c39168c14007f5c958e07a4e04ddc4791ca05f7fc65e4dbd7969fc
 SHA512:
-  metadata.gz: 0a89984cbbbb6c8466b69b89affab16e36d0791bf63bc7ecc687ee06765be2899f6f3af75b526463e26ba5cf52917b6b1f09d5584af708456365cb2eb80e71f1
-  data.tar.gz: 565853474a5a6054b46042b8bced8759a4339d12845fd4ccc2fe28f6e862013c9c802913543cf68707e166d7d80f1fdadcce7df6d9e3cdfa087f53a1640115c7
+  metadata.gz: cc53a8dbcc69c9f768f2af129f650d71263f8239ce0416b6c48420681f958a60feb5012402eea9f11478fa04a32a660c4f3fcec3c48111eb6ae19d9e81be5f70
+  data.tar.gz: dd12aa99c08476117ed9e76c5dd2bab050680ba2e6d79d3ed8998c29c625e3353851d4d79206ed2f89906bf99eb4bff95c362e4f482a86a9869bcb7cf44ba9f1

data/README.md

@@ -2,33 +2,23 @@
 
 Markdown からスライドを作り、ブラウザー内の Ruby でプレゼンテーションするツールです。
 Rabbit へのオマージュとして、因幡の白兎に登場するワニ（鮫）にちなんだ名前です。
+兎とワニがスライドの進み具合を楽しく伝えます。
 
 **Markdownを書いたら、あとは話す準備を。**
 
-waniは、内容に合わせて文字サイズを自動調整するプレゼンテーションツールです。
-タイトルも本文もスライドに収まる大きさに自動調整。
-文字サイズの調整に手をかけず、伝えたい内容に集中してください。
+waniは文字サイズを自動調整するプレゼンテーションツールです。
+表紙のタイトルは中央に、本文は固定サイズで右下に右揃えで表示します。タイトルと本文が重なる場合は警告します。2枚目以降はタイトルも本文もスライドに収まる限り最も大きく表示します。
+文字サイズの調整に手間を掛けません。
 
-兎とワニがスライドの進み具合を楽しく伝えます。
 持ち時間も、発表の演出に。
 最後の5秒は観客と一緒にカウントダウン。
 時間になるとワニが登場し、発表のフィナーレを飾ります。
 
-<p align="center">
-  <img src="docs/images/wani-characters.png" alt="ノートパソコンを使う兎と、それを見守るワニ" width="640">
-</p>
-
-<p align="center">
-  <img src="docs/images/rabbit.png" alt="ノートパソコンを持った兎" width="240">
-  <img src="docs/images/wani.png" alt="笑顔のワニ" width="240">
-</p>
-
 ## インストールと開始
 
 ### インストール
 
 [RubyGems.org](https://rubygems.org/gems/wani) からインストールできます。
-Ruby 3.2 以上が必要です。
 
 ```sh
 gem install wani
@@ -47,11 +37,10 @@ wani check
 wani serve
 ```
 
+http://127.0.0.1:8000/ をブラウザーで開きます。
 
-表示された http://127.0.0.1:8000/ をブラウザーで開きます。
-
-`new`コマンドで生成されるプロジェクトには、Markdown記法を紹介する10ページの `slides.md` とサンプルSVG画像が含まれます。
-`slides.md` を編集したらブラウザーを再読み込みしてください。
+`new`コマンドで生成されるプロジェクトには、Markdown記法を紹介する10ページの `slides.md` とサンプルSVG画像が含まれています。
+`slides.md` の変更はブラウザーを再読み込みすると反映されます。
 
 ## Markdown記法
 
@@ -79,16 +68,21 @@ notes:
 見出しレベルが違っても、タイトルのデザインは同じです。
 ```
 
-- 独立した `---` の行でスライドを分割
-- 各ページの最初の見出しをタイトルに
-- 本文には段落、強調、リスト、引用、コード、リンク、画像、表が使用可能
-- コードフェンスに `ruby` や `js` などの言語名を付けると、スライド・ノート・PDFで構文ハイライトを適用
-- 画像は、slides.mdを基準に相対パスで記述
-- `<!-- notes: ... -->` は発表者ノート
-- `<!-- page-footnote: ... -->` はページごとの脚注
+- タイトル：各ページの最初の見出し
+- 画像：slides.mdを基準に相対パスで記述
+- 発表者ノーと：`<!-- notes: ... -->`
+- 本文： 段落、強調、リスト、引用、コード、リンク、画像、表が使用可能
+- ページ区切り : `---`
 
 詳細は [Markdown記法ガイド](docs/markdown.md) を参照してください。
 
+## フォント文字サイズを自動調整
+
+- タイトルは1行に収める
+- 本文は全角20文字当の幅を超える場合は自然に折り返し
+- 明示的な改行は維持
+- 文字サイズは本文全体で共通
+
 ## コマンド紹介
 
 ```sh
@@ -162,62 +156,44 @@ wani --help
 
 ## 発表タイマー
 
-hashなしのURLで開くと、最初のスライドに半透明の黒いベールと「スタート」ボタンを表示します。
-待機中はページ移動と計測を止め、ボタンを押すとベールが消えてタイマーが始まります。Fキーで全画面にして待機できます。
-`#slide=1` などのhash付きURLでは、読み込み完了から計測します。
-既定では5分で時間切れ画面を表示します。
-Front Matter の `time_limit` に分数を指定して変更できます（小数も可）。
-`time_limit: 0` でタイマーを無効にします。
+最初のスライドに半透明の黒いベールと「スタート」ボタンを表示します。
+URL でスライド番号を指定した場合は、ボタンを表示せず、タイマーも使用しません。
+ボタンを押すとベールが消えてタイマーが始まります。
 
 残り30秒になると、全画面表示中もカウントダウンを表示します。
-残り5秒は中央に数字を表示し、画面の短辺に対して20％・40％・60％・80％・100％と強調サイズを増やします。
-各数字は0.8秒で通常サイズに戻ります。動きを減らす設定では拡大アニメーションを省略します。
+残り5秒は中央に数字を表示します。
 時間切れになると、兎柄フードをくわえたワニ（さめ）の画像を表示します。
-画像は軽量なWebP形式で配布し、発表開始前に読み込みとデコードを済ませて、時間切れの文字と同時に表示します。
 左右キーまたは「スライドに戻る」ボタンで、時間切れ直前のスライドに戻れます。
-戻った後は通常通りページを移動でき、時間切れ画面は再表示しません。
-最終スライドの表示中はタイマーを一時停止し、カウントダウンも時間切れ画面も表示しません。
-前のスライドに戻ると、停止前の残り時間から再開します。1ページだけの場合も停止します。
-ページを再読み込みするとタイマーも最初から始まります。
-開始待ち画面、タイマー、時間切れ画面はPDFには含めません。
 
-## スライド
+既定では5分です。
+Front Matter の `time_limit` に分数を指定して変更できます（小数も可）。
+`time_limit: 0` でタイマーを無効にします。
+
+
+## スライドのフォーマット
 
 - 1920×1080、16:9
 - 白背景
 - 画像は比率を維持して縦に配置し、画像だけの場合は本文領域を広く使います。
-- `#slide=3` のようなハッシュ付き URL で特定のスライドを開く
-
-### 画像とフォントを読み込み、幅と高さに合わせて文字サイズを自動調整
-- タイトルは1行に収める
-- 本文の段落・見出し・箇条書きは、使用フォントの全角20文字（「あ」20個）相当の幅以下なら折り返さず、それを超える場合は自然に折り返し
-- 明示的な改行は維持。改行ごとに幅を判定
-- 文字サイズは本文全体で共通
 
-
-### 警告
+## 警告
 
 - 収まらない内容に警告を表示
 - 画像の読み込みを最大15秒待ち、失敗やタイムアウトを通知
 
 ## 印刷
 
-ツールバーの「PDF」「ノート付き PDF」から印刷ダイアログを開き、PDFとして保存します。
+ツールバーの「PDF」「ノート付き PDF」から印刷ダイアログを開き、PDFとして保存できます。
 Ctrl+P でも印刷できます。
+用紙は320×180mmを指定し、ブラウザーのヘッダー・フッターはオフにしてください。
 
-- 用紙は320×180mmを指定し、ブラウザーのヘッダー・フッターはオフにしてください。
-- 通常版は1スライド1ページ、ノート付きは各スライドの次に対応するノートを置きます。
-- 画像・フォントの完了後に印刷し、ページごとの脚注とページ番号を出力します。兎と鰐の装飾は常に非表示です。
-
+- 通常版は1スライド1ページ、ノート付きは各スライドの次に対応するノートを配置
+- ページごとの脚注とページ番号を出力
 
 ## 同梱フォント
 
 日本語・英数字の標準書体は **IBM Plex Sans JP** です。
-通常と太字のフォントを gem に同梱します。
-
-本文・タイトル・発表者画面・PDF に同じ書体を使います。
-コードには **UDEV Gothic** を使い、日本語も半角1:全角2の等幅で表示します。
-UDEV Gothic も通常・太字を同梱するため、外部への通信やOSへのインストールは不要です。
+コードは **UDEV Gothic** を使い、日本語も半角1:全角2の等幅で表示します。
 
 フォントは SIL Open Font License 1.1 です。原文のライセンス・著作権表示と配布元・チェックサムは
 [third_party/ibm-plex-sans-jp](third_party/ibm-plex-sans-jp/README.md) と
@@ -226,7 +202,7 @@ UDEV Gothic も通常・太字を同梱するため、外部への通信やOSへ
 ## フォントを変更する
 
 タイトルと本文には、[Fontsource](https://fontsource.org/fonts)のフォントを追加して使えます。
-フォントの追加時にはインターネット接続が必要です。追加後はオフラインで表示・PDF出力ができ、OSへのフォントのインストールやNode.js・npmは不要です。
+フォントの追加時にはインターネット接続が必要です。追加後はオフラインでも表示・PDF出力ができます。
 
 ### Fontsourceのフォントを使う
 
@@ -305,24 +281,6 @@ wani font remove noto-sans-jp
 
 スライドで使用中の場合は確認を求めます。削除する場合は、Front Matterの`font`も削除するか、別の追加済みフォントに変更してください。
 
-### 他の人に渡す場合
-
-追加したフォントは`fonts/ID/`、登録情報は`.wani/fonts.yml`に保存されます。
-`slides.md`や画像と一緒に、`fonts/`と`.wani/fonts.yml`も保存・配布してください。`.wani`は隠しディレクトリなので、コピーし忘れないようにしてください。
-
-各フォントのライセンスは`fonts/ID/LICENSE`に保存されます。Web公開・再配布・PDF配布の際は、そのフォントのライセンス条件を確認してください。
-
-## 動作環境と制約
-
-確認済みの環境は Linux / Ruby 4.0.7 / Chrome 156.0.8078.47 です。
-Windows・WSL2、Edge / Firefox / Safari、通常ブラウザーの印刷ダイアログ操作は未検証です。
-
-WSL2 内で `wani serve` を起動した場合は、Windows 側のブラウザーで http://localhost:8000/ を開きます。
-環境のポート転送設定に応じて `--bind 0.0.0.0` を指定してください。
-
-複雑に入れ子になった Markdown 方言、最適な画像の自動配置、ライブリロードは対象外です。
-発表者画面はメイン画面の終了・再読み込み後に開き直してください。
-
 ## 開発者向けドキュメント
 
 - [アーキテクチャ](docs/architecture.md)：共通モジュール、静的配信、wasm・ローダー、フォント、レイアウトの設計

data/assets/build.json

@@ -1,6 +1,6 @@
 {
-  "version": "0.1.14",
-  "source_sha256": "c3e705b68ea3335c7704a5be6989fd09d40d0bbc6f8dd6a2d26dd7ea9a49d05a",
+  "version": "0.1.15",
+  "source_sha256": "a9ec44f0f122168b5bdce3783ea9188f6955f1835f53ad67258bebcff1252aaf",
   "loader_commit": "dc6b0ffd5800ed9bfc49268ed8021d456f10ddf8",
-  "wasm_sha256": "feac70ebd959b1aa5d8f628fce3bb8d5570b4404a3128cd37f721f611fe62d83"
+  "wasm_sha256": "bad1062bd0f007e51f7278365f14537dd974666f8c6442c304c13223cb78f3e4"
 }

data/assets/style.css

@@ -53,6 +53,10 @@ button:focus-visible, a:focus-visible { outline: 2px solid #557e64; outline-offs
 .titleless .body > * { flex-shrink: 0; }
 .titleless .body > :last-child { margin-bottom: 0; }
 .titleless .body img { margin-inline: auto; }
+.cover .title { margin-top: 396px; text-align: center; }
+.cover .body { display: flex; flex-direction: column; align-items: flex-end; justify-content: flex-end; text-align: right; }
+.cover .body > * { flex-shrink: 0; max-width: 100%; }
+.cover .body > :last-child { margin-bottom: 0; }
 .body ul, .body ol { margin: .2em 0 .4em; padding-left: 1.35em; }
 .body pre { margin: .3em 0; padding: .4em .55em; background: #f3f6f2; white-space: pre-wrap; tab-size: 2; }
 .titleless .body pre { width: fit-content; max-width: 100%; margin-inline: auto; text-align: left; }
@@ -75,11 +79,15 @@ button:focus-visible, a:focus-visible { outline: 2px solid #557e64; outline-offs
 .rabbit-image { display: block; width: 84px; height: 40px; }
 .decorations[data-direction="left"] .rabbit-image { scale: -1 1; }
 .slide.active .bridge-segment[data-appearing="true"] { animation: wani-arrive .35s ease-out; }
-.slide.active .decorations[data-moving="true"] .rabbit-position { animation: rabbit-advance .45s ease-in-out; }
-.slide.active .decorations[data-moving="true"] .rabbit-image { animation: rabbit-hop .45s ease-in-out; }
+.slide.active .decorations[data-moving="true"] .rabbit-position { animation: rabbit-advance .45s linear; }
+.slide.active .decorations[data-moving="true"] .rabbit-image { animation: rabbit-hop .45s linear; }
 @keyframes wani-arrive { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } }
 @keyframes rabbit-advance { from { left: calc((100% - 84px) * var(--rabbit-from)); } to { left: calc((100% - 84px) * var(--rabbit-progress)); } }
-@keyframes rabbit-hop { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
+@keyframes rabbit-hop {
+  0% { transform: translateY(0); animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
+  50% { transform: translateY(-60px); animation-timing-function: cubic-bezier(.333333, 0, .666667, .333333); }
+  100% { transform: translateY(0); }
+}
 @media (prefers-reduced-motion: reduce) { .decorations * { animation: none !important; } }
 #stage .slide:not(.active) { display: none; }
 .help { padding: 8px 24px; font-size: 11px; color: #718578; display: flex; gap: 22px; }

data/lib/wani/browser/application.rb

@@ -17,6 +17,8 @@ module Wani
         response = JS.global.fetch("/talk/slides.md").await
         raise "Markdown を読み込めません (HTTP #{response[:status].to_i})" unless response[:ok] == JS::True
         @presentation = Core::Parser.new.parse(response.text.await.to_s)
+        title = @presentation.slides.first.title
+        @document[:title] = title unless title.empty?
         @presentation.diagnostics.each { |item| warn("#{item.slide ? "スライド #{item.slide}: " : ""}#{item.message}") }
         @renderer = Renderer.new(@document, @presentation)
         @sections = @presentation.slides.map { |slide| @renderer.slide(slide) }
@@ -36,8 +38,6 @@ module Wani
           element("start-overlay")[:hidden] = false
           element("viewport")[:inert] = true
           element("start-presentation").focus
-        else
-          start_timer
         end
         element("status")[:textContent] = "準備できました"
       end

data/lib/wani/browser/layout.rb

@@ -5,6 +5,7 @@ module Wani
       HEIGHT = 1080
       BODY_MIN = 16
       BODY_MAX = 160
+      COVER_BODY_SIZE = 48
       TITLE_MIN = 24
       TITLE_MAX = 220
       NO_WRAP_EMS = 20
@@ -60,8 +61,26 @@ module Wani
         body = section.querySelector(".body")
         prepare_wrapping(body)
         fit_images(body)
-        fit_font(body, BODY_MIN, BODY_MAX)
-        @warn.call("スライド #{number}: 本文が収まりません: #{body[:textContent].to_s[0, 120]}") unless fits?(body)
+        if section[:classList].contains("cover") == JS::True
+          body[:style][:fontSize] = "#{COVER_BODY_SIZE}px"
+        else
+          fit_font(body, BODY_MIN, BODY_MAX)
+        end
+        body_fits = if section[:classList].contains("cover") == JS::True
+          cover_body_fits?(body)
+        else
+          fits?(body)
+        end
+        @warn.call("スライド #{number}: 本文が収まりません: #{body[:textContent].to_s[0, 120]}") unless body_fits
+        if section[:classList].contains("cover") == JS::True && title[:style][:display].to_s != "none"
+          title_rect = title.getBoundingClientRect
+          overlap = body[:children].to_a.any? do |child|
+            rect = child.getBoundingClientRect
+            rect[:top].to_f < title_rect[:bottom].to_f && rect[:bottom].to_f > title_rect[:top].to_f &&
+              rect[:left].to_f < title_rect[:right].to_f && rect[:right].to_f > title_rect[:left].to_f
+          end
+          @warn.call("スライド #{number}: タイトルと本文が重なっています") if overlap
+        end
         footnote = section.querySelector(".page-footnote")
         if footnote[:scrollWidth].to_i > footnote[:clientWidth].to_i + 1
           @warn.call("スライド #{number}: 脚注が1行に収まりません。短くするか、詳細を本文へ移してください。")
@@ -119,6 +138,15 @@ module Wani
         node[:scrollWidth].to_i <= node[:clientWidth].to_i + 1 && node[:scrollHeight].to_i <= node[:clientHeight].to_i + 1
       end
 
+      def cover_body_fits?(body)
+        bounds = body.getBoundingClientRect
+        body[:scrollWidth].to_i <= body[:clientWidth].to_i + 1 && body[:children].to_a.all? do |child|
+          rect = child.getBoundingClientRect
+          rect[:top].to_f >= bounds[:top].to_f - 1 && rect[:bottom].to_f <= bounds[:bottom].to_f + 1 &&
+            rect[:left].to_f >= bounds[:left].to_f - 1 && rect[:right].to_f <= bounds[:right].to_f + 1
+        end
+      end
+
       def fit_font(node, minimum, maximum)
         low, high, best = minimum, maximum, minimum
         while low <= high

data/lib/wani/browser/renderer.rb

@@ -17,6 +17,7 @@ module Wani
           title[:style][:display] = "none"
           section[:className] = "slide titleless"
         end
+        section[:classList].add("cover") if slide.number == 1 && !notes
         body = child(section, "div", "body")
         body[:innerHTML] = notes ? slide.notes_html : slide.html
         resolve_links(body)

data/lib/wani/version.rb

@@ -1,3 +1,3 @@
 module Wani
-  VERSION = "0.1.14"
+  VERSION = "0.1.15"
 end

data/templates/slides.md

@@ -6,10 +6,6 @@ time_limit: 5
 
 Ruby と Markdown でプレゼンテーション。
 
-- 左右キー・Space で移動
-- F で全画面
-- N で発表者ノート
-
 <!-- page-footnote: Wani のサンプルへようこそ -->
 
 <!-- notes:
@@ -160,6 +156,7 @@ N キーで、このページの実際のノートを確認できます。
 
 # 発表と配布へ
 
+- 左右キー・Space で移動し、F キーで全画面にする
 - N キーで、このページの発表者ノートを開く
 - 「PDF」でスライドを保存する
 - 「ノート付き PDF」で説明も一緒に配布する

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: wani
 version: !ruby/object:Gem::Version
-  version: 0.1.14
+  version: 0.1.15
 platform: ruby
 authors:
 - ledsun