プログラム ／ src/chrome/editor.html
src/chrome/editor.html
<!doctype html><html lang="ja"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>縦書き原稿</title><link rel="stylesheet" href="editor.css"></head><body><div id="startup-status" role="status" style="position:fixed;top:8px;left:8px;right:8px;z-index:2147483647;padding:12px 16px;background:#fff4d6;color:#392c12;border:1px solid #aa8541;white-space:pre-wrap;font:14px/1.6 sans-serif">Chrome試作版：原稿用紙の起動を待っています。この表示が続く場合は、画面の状態をお知らせください。</div><script src="startup.js"></script><section id="recovery-panel" class="safety-panel" role="alert" hidden><p id="recovery-message"></p><button id="recover-current" type="button">現在の原稿をJSONで保存</button><button id="recover-all" type="button">全原稿をJSONで保存</button><button id="recover-original" type="button" hidden>保存先の元データを保存</button><button id="retry-storage" type="button">ブラウザ記録を再試行</button></section><p id="operation-status" class="safety-panel" role="alert" hidden></p><main id="main"> <div class="side-stack"> <aside> <div class="panel-top panel-actions"><div class="panel-icons"><button id="flip-panel" class="flip-panel" type="button" title="パネルを反対側へ" aria-label="パネルを反対側へ">⇄</button><button id="hide-panel" class="flip-panel" type="button" title="パネルを隠す" aria-label="パネルを隠す">‹</button></div></div> <label for="name">原稿名</label> <input id="name" type="text" placeholder="無題"> <span id="sample-protection" class="small-note" hidden>見本の原文（保護中）</span><div class="panel-buttons"><button id="copy-sample" type="button" hidden>コピーして編集</button><button id="toggle-protection" type="button" aria-pressed="false">保護する</button></div> <input id="panel-side" type="hidden" value="left"> <div class="project-controls"> <label for="project-select">原稿を切り替える</label><select id="project-select"></select> <div class="panel-buttons"><button id="new-project" type="button">＋ 新しい原稿</button><button id="delete-project" class="delete-action" type="button" title="確認画面を開きます。ここでは削除しません。">削除の確認…</button></div> </div> <div class="edit-controls"> <h2 class="panel-heading">編集</h2> <select id="manuscript-font" aria-label="書体"><option value="mincho">游明朝</option><option value="gothic">游ゴシック</option><option value="biz-mincho">BIZ UD明朝</option><option value="kyokasho">UDデジタル教科書体</option><option value="shippori-b1">しっぽり明朝B1</option><option value="klee-one">クレー One</option><option value="yomogi">よもぎ</option></select> <button id="ruby-open" class="panel-action" type="button">ふりがなを付ける・直す</button> <p id="ruby-status" class="small-note" role="status"></p> </div> <div class="file-controls"> <h2 class="panel-heading">ファイル</h2> <p class="file-label" id="save-buttons-label">この原稿を保存</p> <div class="save-buttons" role="group" aria-labelledby="save-buttons-label"><button id="save-json" type="button" title="本文・ふりがな・書体・編集履歴を保存（Ctrl+S）">JSON</button><button id="save-txt" type="button" title="本文のみをテキストで保存">TXT</button><button id="save-pdf" type="button" title="印刷画面からPDFに保存">PDF</button></div> <button id="open-file" class="panel-action" type="button">ファイルを開く<span class="file-types">.json ／ .txt ／ .docx</span></button> <input id="import-file" type="file" accept=".json,.docx,.txt,application/json,application/vnd.openxmlformats-officedocument.wordprocessingml.document,text/plain" hidden> <input id="import-backup" type="file" accept=".json,application/json" hidden> <input id="import" type="file" accept=".txt,text/plain" hidden> <input id="import-word" type="file" accept=".docx,application/vnd.openxmlformats-officedocument.wordprocessingml.document" hidden> <div id="json-picker" hidden><label for="json-project-select">ファイル内の原稿を選択</label><select id="json-project-select"></select><button id="open-json-project" class="panel-action" type="button">選んだ原稿を開く</button><button id="cancel-json-project" class="panel-action delete-action" type="button">閉じる</button></div> <p id="file-status" class="file-feedback" role="status" aria-live="polite"></p><span id="save-feedback" class="save-feedback" role="status" aria-live="polite"></span> <p id="status" class="save-status" hidden></p> <details class="history-controls" name="panel-details"><summary>編集履歴・復元</summary><p class="small-note">この端末のChrome内に、編集時に約1時間ごと・最大50件の履歴を自動保存します。日時を選んで「この日時に戻す」を押すと、その時の原稿に戻ります。間違えて戻したときは、履歴の「戻す前の原稿」を選ぶと、元に戻せます。</p><label for="versions" class="file-label">戻したい日時</label><select id="versions"><option value="">まだ履歴はありません</option></select> <div class="panel-buttons"><button id="checkpoint" type="button">今の状態を残す</button><button id="restore-version" type="button">この日時に戻す</button></div> </details> </div> <div class="drive-controls" hidden> <h2 class="panel-heading">Google Drive</h2> <div id="drive-actions" hidden> <button id="drive-save" class="panel-action primary-action" type="button" disabled>Driveに保存</button> <div class="panel-buttons"><button id="drive-save-as" type="button" disabled>別名で保存</button><button id="drive-open" type="button" disabled>Driveから開く</button></div> </div> <p id="drive-status" class="small-note" role="status" aria-live="polite">Chrome試作版のDrive連携は未実装です。原稿はこのブラウザに自動保存します。Google版との受け渡しには原稿（.json）を使ってください。</p> </div> <details class="help-controls"><summary>使い方・見本</summary><p id="build-version" class="small-note">Chrome試作版 {{VERSION}}</p><p class="small-note">クレー One・よもぎはアプリに同梱しています。その他は端末の書体を使います。</p><p class="small-note">保存形式：JSONは本文・ふりがな・書体・編集履歴を保存します。TXTは本文のみ。PDFは印刷画面で保存先をPDFに選びます。Word（.docx）は本文とふりがなを開けます。</p><p class="small-note">標準見本：『注文の多い料理店』『蜘蛛の糸』『去年の木』と確認用1件。<a href="notices.txt" target="_blank" rel="noopener noreferrer">作品の出典</a></p><button id="chumon-sample" class="panel-action" type="button">注文の多い料理店の見本を開く</button><button id="literature-sample" class="panel-action" type="button">蜘蛛の糸の見本を開く</button><p class="small-note">ふりがな：本文をドラッグで選択し、「ふりがなを付ける・直す」を押します。</p><p class="small-note">原稿：ブラウザ内に自動で記録します。ファイルとして残すときはJSON・TXT・PDFのボタンを押します。</p><button id="ruby-sample" class="panel-action" type="button">まとめた確認用原稿を開く</button></details> </aside> <div class="page-tools" aria-label="ページ操作"><div class="page-tools-row"><button id="first-page" type="button" title="最初のページへ">先頭</button><span id="page-indicator">1 / 1</span><button id="last-page" type="button" title="最後のページへ">末尾</button><button id="overview-toggle" type="button" title="全ページを一覧表示" aria-label="全ページを一覧表示">一覧</button><button id="find-open" type="button" title="原稿を検索（Ctrl+F）">検索</button></div><div class="char-count">文字数 <span id="count">0</span>字</div></div> </div> <section class="workspace"> <div id="paper-scroll" class="paper-scroll"><textarea id="input" aria-label="原稿本文" autocomplete="off" spellcheck="false"></textarea><div id="pages"></div></div> </section></main><div id="print-pages"></div><dialog id="delete-dialog" aria-labelledby="delete-dialog-title"> <h2 id="delete-dialog-title">この原稿を削除しますか？</h2> <p id="delete-project-name"></p> <p class="small-note">この端末のChrome内にある本文と編集履歴を削除します。この操作は元に戻せません。保存したファイルは残ります。</p> <div class="panel-buttons"><button id="cancel-delete" type="button" autofocus>キャンセル</button><button id="confirm-delete" type="button" class="danger-action">この原稿を削除</button></div></dialog><dialog id="drive-dialog" aria-labelledby="drive-dialog-title"> <h2 id="drive-dialog-title">Google Driveから原稿を開く</h2> <p class="small-note">このアドオンで保存した原稿を表示します。今の原稿は残し、別の原稿として開きます。</p> <label for="drive-files" class="file-label">保存済みの原稿</label><select id="drive-files" size="8"></select> <p id="drive-list-status" class="small-note" role="status" aria-live="polite"></p> <div class="panel-buttons"><button id="drive-refresh" type="button">再読み込み</button><button id="drive-more" type="button" hidden>さらに表示</button></div> <div class="panel-buttons"><button id="drive-load" class="primary-action" type="button" disabled>選んだ原稿を開く</button><button id="drive-cancel" type="button">閉じる</button></div></dialog><button id="show-panel" type="button" title="パネルを表示" aria-label="操作欄を戻す">操作欄を戻す</button><div id="find-bar" class="find-bar" role="search" hidden><input id="find-query" type="search" aria-label="原稿内を検索" placeholder="原稿内を検索"><span id="find-count" aria-live="polite">0 / 0</span><button id="find-prev" type="button" title="前の一致箇所">↑</button><button id="find-next" type="button" title="次の一致箇所">↓</button><button id="find-close" type="button" title="検索を閉じる" aria-label="検索を閉じる">×</button></div><dialog id="ruby-dialog" aria-labelledby="ruby-dialog-title"><form id="ruby-form"><h2 id="ruby-dialog-title">ふりがなを付ける・直す</h2><label>選択した本文<output id="ruby-base"></output></label><label for="ruby-reading">ふりがな</label><input id="ruby-reading" type="text" required autocomplete="off" placeholder="例：とうきょう"><p class="small-note">京都なら「きょう｜と」のように、文字ごとの読みを縦線で区切れます。列をまたいでも指定した読みを保ちます。「今日」のようにまとめて読む場合は「きょう」と入力します。区切り未指定で列をまたぐ場合は※を表示します。</p><p id="ruby-error" role="alert"></p><div class="panel-buttons"><button id="ruby-apply" type="submit">付ける</button><button id="ruby-remove" type="button">ふりがなを外す</button><button id="ruby-cancel" type="button">キャンセル</button></div></form></dialog><script src="editor.js"></script></body></html>