Webマニュアル

結論：このアプリでできること

詳しい説明は各章にありますが、まず全体像をつかみたい方向けに「今このアプリで実現できること」を一覧にしました。

サービスの全体像

このシステムは次の3つの部分でできています。

仕組みのポイント：PDFの変換は「あなたのブラウザの中」で行われます

まず動かす（P0確認）— サーバー不要・5分でできます

設置作業の前に、ビューワーの核心部分（ページめくり）が手元のパソコンで動くことを確認しましょう。

1. フォルダ内の public_html/demo/index.html をダブルクリックしてブラウザで開きます。
2. サンプルの本が表示され、ページの端をドラッグ（またはクリック）すると紙がめくれるアニメーションで次のページに進めばOKです。

Xserverへの設置手順（初回のみ・約30分）

大きく分けて「① データベースを作る → ② 設定ファイルを書く → ③ ファイルをアップロードする → ④ 動作確認」の4段階です。

準備するもの

• Xserverのサーバーパネルのログイン情報（契約時のメールに記載）
• FTPソフト（おすすめ：FileZilla（無料）。FTPとはサーバーにファイルを送る仕組みのことです）

① MySQLデータベースを作る

1. Xserverのサーバーパネルにログインし、「データベース」欄の MySQL設定 を開きます。
2. 「MySQL追加」タブで、データベース名（例：あなたのID_flip）を入力して追加します。文字コードは UTF-8 のままでOKです。
3. 「MySQLユーザ追加」タブで、ユーザー（例：あなたのID_flip）とパスワードを作ります。このパスワードはメモしてください。
4. 「MySQL一覧」タブに戻り、いま作ったデータベースの「アクセス権未所有ユーザ」からユーザーを選んで「追加」します（＝このユーザーにデータベースを触る権限を与える操作です）。
5. 同じ画面に表示されている MySQLホスト名（例：mysqlXXXX.xserver.jp）もメモします。

② テーブルを作る（phpMyAdmin）

1. サーバーパネルの phpmyadmin（データベース欄）を開き、①で作ったユーザー名とパスワードでログインします。
   ※ phpMyAdmin＝ブラウザからデータベースを操作できる管理ツールです。
2. 左側の一覧から①で作ったデータベース名をクリックします。
3. 上部の 「SQL」タブを開き、setup/schema.sql の中身をすべてコピーして貼り付け、「実行」を押します。
4. 左側に books・pages・toc という3つのテーブルが表示されれば成功です。

③ 設定ファイル（config.php）を編集する

public_html/inc/config.php をメモ帳などで開き、「★要変更」と書かれた行を①でメモした内容に書き換えます。

define('DB_HOST', 'mysqlXXXX.xserver.jp');  // ← MySQLホスト名
define('DB_NAME', 'あなたのID_flip');        // ← データベース名
define('DB_USER', 'あなたのID_flip');        // ← MySQLユーザー名
define('DB_PASS', 'メモしたパスワード');      // ← MySQLパスワード

define('ADMIN_PASSWORD', '自分で決めた管理用パスワード'); // ← 必ず変更！

提供元クレジットの設定（VIEWER_CREDIT）

閲覧画面（PC・スマホとも）の隅に小さく表示する提供元名を、同じ config.php で自由に設定できます。

// 空にすると何も表示しません
define('VIEWER_CREDIT', '');

// 例：自社名を控えめに入れる場合
define('VIEWER_CREDIT', '提供：株式会社〇〇');

• 閲覧の邪魔にならないよう、PCは画面右下・スマホは右上に、小さく薄く表示されます（出所・権利表示のためのものです）。
• お客様に納品するZIP（切り売り）や、お客様共有のライブラリページにも、ここで設定した名前が使われます。
• 空欄（''）にすると、どこにも社名は表示されません。

④ ファイルをアップロードする（FTP）

1. FileZillaを起動し、XserverのFTP情報（サーバーパネル「サブFTPアカウント設定」または契約時メールに記載のホスト名・ユーザー名・パスワード）で接続します。
2. サーバー側の ドメイン名/public_html/ の中に、置き場所のフォルダ（例：book）を作ります。
3. 手元の koubundou-flip/public_html/ の中身をすべて、いま作った book フォルダへドラッグしてアップロードします。
4. アップロード後、サーバー上の book/books/ フォルダのパーミッション（アクセス権：フォルダに「書き込みを許可するか」の設定）が 755 になっていることを確認します。FileZillaではフォルダを右クリック →「ファイルのパーミッション」で確認できます。

⑤ PHPバージョンの確認

1. サーバーパネルの PHP Ver.切替 を開き、対象ドメインの PHPバージョンが PHP 7.4系（または8系でも動作します）になっていることを確認します。7.0〜7.3の場合は 7.4 に変更してください。

⑥ 動作確認

1. ブラウザで https://あなたのドメイン/book/ を開く → トップページが表示される
2. https://あなたのドメイン/book/admin/ を開く → ログイン画面が表示され、③で決めたパスワードでログインできる
3. 「＋ 新しいブックを作成」から手元のPDFで1冊作ってみる → URLが発行され、めくって閲覧できる

管理画面の使い方（5ステップウィザード）

/admin/ にログインし「＋ 新しいブックを作成」を押すと、5ステップのウィザードが始まります。画面上部のステップ表示で、いまどの段階かが常に確認できます。

STEP 1｜入稿

本文PDF（必須）と表紙PDF（任意）を、点線の枠にドラッグ&ドロップします。この時点ではまだサーバーには何も送信されません。パスワード保護されたPDFは読み込めないため、事前に保護を解除しておいてください。

表紙PDFとは？ 表紙PDFを入れると、そのページが本文PDFの前に自動でつながって1冊になります（入れなければ本文PDFの1ページ目がそのまま表紙になります）。表1〜表4の並びが実際の仕上がりと違う場合や、見開き結合されている場合は、次のSTEP「面付け」で並べ替え・分割ができます。

仕上がりサイズ（トンボ・塗り足しの除去） PDFを読み込むと自動でそのページの実寸が入ります。トンボや塗り足しが含まれている場合は、実際の仕上がりサイズ（トリムサイズ、幅×高さ）に書き換えると、中央基準でその大きさに切り出されます。変更しなければそのままのサイズで使われます。

STEP 2｜面付け

表紙PDFのページが本文の前に自動で合体され、全ページのサムネイル（縮小画像）が並びます。

• 並び替え … サムネイルをドラッグして順番を入れ替え
• 90度回転 … 各サムネイルの回転ボタンで、そのページを90度回します。作成時に自動で回したページには点線の枠と「90°回転済」の印が付きます（このページを開いた閲覧者には「90度回転」ボタンが出ます）。並び替え・削除と違って「保存」を待たず、押した時点で反映されます（順番も読み取り情報も変わらないため）。PDF内リンクの位置も紙面と一緒に回ります。紙の色を設定しているブックでは、回したあとに紙の色を付け直してください
• 除外 … 右上の「×」で不要ページ（白ページなど）を除外
• 横長ページ … 黄色い枠が付きます。縦位置と横位置が混ざっている場合は、枚数の少ないほうが自動で90度回って向きがそろいます（回したページは点線の枠が付きます）。サムネイル右上の回転ボタンでページごとに向きを直せます（手で直したページは、以後の自動そろえで上書きされません）。
• 見開き結合表紙の分割 … 表4+表1（外側スプレッド）や表2+表3（内側スプレッド）のように1枚のPDFページに2面が入っている場合、黄色い枠のサムネイル下に出る「⇔ 分割する」ボタンから、左右どちらが表1〜表4のどれかを選んで2ページに分割できます。分割すると表1→本文→表3→表4の正しい順番に自動で並び替わります。背表紙に文字が入っている印刷用データは「背幅(mm)」を指定すると中央の背部分を除いて分割できます。すでに表1〜表4が別々のページになっている場合は分割不要（ドラッグで並べるだけ）です。

STEP 3｜設定

• タイトル（必須） … ビューワー上部とブラウザのタブに表示されます
• 公開設定 … 「公開」または「限定公開（パスワード必須）」
• 公開期限 … 指定日の23:59まで閲覧可。空欄で無期限
• テーマ … ビューワーの背景色（ライト／セピア／ダーク）
• 書き出し解像度 … ページ画像の精細さを選べます。標準1600px／高画質2000px（推奨）／超高画質2400px／カスタム（800〜3200pxの数値指定）。小さい文字の多い誌面は高めに設定してください
• 表示モード … 自動判定／見開き固定／単ページ固定。向きをそろえたあともまだ縦横が混ざっている場合だけ警告が出て、自動的に「単ページ固定」が選ばれます（横長ページが隣と大きさが合わず、見開きが崩れて見えるため）。どのページを回したか・どのページの向きが残っているかも一覧で表示されます
• オプション機能 … 各機能をブックごとにチェックボックスでON/OFFできます（後から「設定」でも変更可）
• 閲覧者アンケート … 項目ごとに収集方法・設問名・選択肢を設定できます（設定変更画面と同じ内容です）
• 目次 … 見出しとページ番号を登録すると、閲覧者が目次からジャンプできます。「✦ AIで目次を作る」を使うと手入力不要です（下記）

目次をAIに作らせる（約1分）

STEP 3の「✦ AIで目次を作る」を押すと、使うAIを2種類から選べます。

• Google Gemini … 「Geminiを開く」ボタンで Gemini を開き、PDFファイルを添付してプロンプトを貼り付けて送信。（目安：1ファイル最大約100MB／PDF最大約1,000ページ。上限は時期・プランで変わります）
• Google AI検索（AIモード） … 「AI検索を開く（プロンプト入り）」ボタンで、プロンプトが入った状態の Google AI検索 が開きます。まだ送信せず、入力欄のクリップ／＋アイコンからPDFを添付してから送信してください。（添付の対応状況・上限はGoogle側で変わることがあります。添付できないときは本文テキストを貼り付けてもOK）

1. 使うAIのボタンを選び、表示されたプロンプトをコピー
2. 「AIを開く」ボタンで開き、案内どおり（PDF添付など）で送信
3. 返ってきた「ページ番号,見出し」形式の目次を貼り付け欄にペーストし、「目次に取り込む」を押すと目次欄に自動で入ります

オプション機能 — ブックごとにON/OFF可能

閲覧者アンケートとマーケティングダッシュボード

「閲覧者アンケート」は年代・性別・職業・地域（都道府県）の項目ごとに「収集しない／任意／必須」を選べます。必須項目が1つでもあると回答するまで閲覧できません（個人を特定する情報は収集しません）。年代・性別・職業・地域の選択肢はブックごとに自由に編集できます（1行に1つ、または読点区切りで入力。空欄なら標準の選択肢を使用）。業種特化の冊子で職業欄を「医療・製造・小売…」に、地域密着の冊子で地域欄を市区町村（例：新宿区・渋谷区…）に変えるといった使い方ができます（地域を空欄にすると標準の47都道府県＋海外になります）。

分析ダッシュボードと共有レポートでは、各指標の見出しやKPIカードにマウスを当てると説明（何を見ていて、どんな判断につながるか）が表示されます。

ブック一覧の「分析」（ダッシュボード）では、アンケート・コメントに加えて以下が自動で計測・グラフ表示されます。お客様への効果報告や、次回の印刷物企画の提案資料にそのまま使えます。

• 期間フィルタ … 「全期間／直近7日・30日・90日／任意の開始日〜終了日」を切り替えると、すべての集計・グラフ・CSVがその期間で再計算されます。DM発送や展示会など施策の前後で比較すると効果測定になります
• 閲覧数の推移グラフ（面グラフ。縦軸に整数の目盛りと数値つき）… 62日以内の期間は日別、長い期間は自動で月別表示。配布・告知のタイミングと反応の関係が分かります
• PV/UU・リピート率 … 閲覧数（延べ回数）と閲覧した人数（匿名IDによる実人数）を分けて集計。2回以上読み返した人の割合も分かります
• 📄 ページ別分析 … どのページが何回読まれ、平均何秒滞在されたかをページのサムネイル付きで一覧表示。滞在時間は「有効滞在時間」（別タブに切り替えた時間や、1分以上操作がない離席時間は自動で除外）なので、置きっぱなしでも数字が汚れません。拡大操作🔍としおり登録🔖の回数も「注目シグナル」として表示されます
• 💡 自動インサイト … ページ別データから「閲覧は多いのに滞在が短い改善候補ページ」「閲覧数が半減する離脱ポイント」「細部が注視されているページ」などを文章で自動指摘します
• 🔥 ホットシグナル … 直近72時間で3回以上読み返している閲覧者がいると、ダッシュボード上部にアラート表示。検討が活発化しているサイン＝営業フォローの好機が分かります
• 流入元・ブラウザ … どのサイト・SNS経由で来たか（直接アクセス・QRコード経由も判別）と、閲覧環境の内訳。LINEのアプリ内ブラウザで開かれた分は「LINE」と出ます（この表示を入れる前の閲覧は、あとから分けられません）
• 広告・キャンペーン別（UTM） … 配布URLに ?utm_source=◯◯&utm_medium=◯◯&utm_campaign=◯◯ を付けるだけで、メルマガ・SNS・チラシQRなど経路ごとの閲覧数と読了深度（読まれ方の質）を比較できます
• リンクの関心タグ集計 … リンク集の各リンクに「事例」「料金」などのタグを付けておくと、読者が何に興味を持ってクリックしたかをタグ別に集計します
• 機械的閲覧の検知 … 全ページを極端な速さでめくった形跡（自動収集プログラム等の疑い）があると注意書きを表示し、数字の読み間違いを防ぎます
• 閲覧デバイス比率（PC/スマホ/タブレット） … QRコード起点かWeb起点かの傾向
• 読了深度・完読率 … どこまで読まれたか。誌面構成の改善材料に
• 平均閲覧時間 … 流し読みか熟読かの目安
• リンククリック数（ラベル別） … どの誘導ボタンが効いたか
• 閲覧データのリセット … 公開前に作業者が見たテスト閲覧は、ダッシュボード下の「閲覧データのリセット」で消せます（「すべての期間」または「この日より前だけ」。確認のため「リセット」と入力。30日間は元に戻せます。運営者のみ）。ダッシュボード上部の注意書きに、PDFの追加・差し替え・ページの並べ替え／削除をしたときの数字の扱いもまとめています
• 📈 データの読み方ガイド … 数字を次回企画へつなげる観点をダッシュボード内に常設
• CSVダウンロード … 全集計（ページ別分析含む）を1クリックでExcel向けCSVに書き出し（報告書作成用）

お客様への共有レポート・GA4連携

• 共有レポートURL … 分析画面の「↗ お客様に共有」を押すと、ログイン不要の閲覧専用レポートページの秘密URLが発行されます。お客様はこのURLだけでグラフ入りレポートを見られ、期間切替とCSVダウンロードも使えます（コメント削除などの管理機能は含まれません）。「共有レポートを停止」でいつでもURLを無効化できます
• Google Analytics 4 連携 … このブックの閲覧を、お客様（または自社）が普段使っているGoogleアナリティクスでも記録できる設定です。「設定」画面にGA4の測定ID（G-で始まる文字列。測定IDの調べ方）を入れると閲覧ページに計測タグが自動で埋め込まれ、アナリティクス側にもアクセス数が表示されます（当サービスの「分析」とは別に二重で記録されるイメージ。空欄なら何も埋め込みません）

定期レポート配信（メール／Googleチャット）

各ブックの「設定」画面の「定期レポート配信」で、決めた間隔（毎週／隔週／毎月／3か月ごと）で分析サマリーを自動送信できます。

• 配信期間の自動制限 … 「ビジネス情報」で設定した納期（due_date）を過ぎると自動的に配信が止まります（納期未設定なら無期限）。契約が終わった案件に配信し続けてしまう事故を防ぎます。
• 配信先 … メール、Googleチャット（Google Chatのスペースで「アプリと連携」→「Webhookを管理」→「Webhookを追加」で発行されるURLを貼り付けるだけ）、または両方から選べます。APIキーや契約は不要です。
• 今すぐテスト送信 … 保存前でも、入力した宛先へその場で1通お試し送信できます。
• 実際の送信は、サーバー側のcron（定期実行）で1日1回チェックする方式です。設置時にXserverの「Cron設定」で cron/send_reports.php を1日1回実行するよう登録してください（inc/config.php にコメントで手順を記載）。

🤖 この内容をAIに分析させる

分析ダッシュボードの上部にある「🤖 この内容をAIに分析させる」ボタンは、表示中の期間の分析データと「改善提案してください」という依頼文をまとめてクリップボードにコピーし、新しいタブでGeminiまたはGoogle AI検索を開きます。あとは開いた画面に貼り付ける（Ctrl+V／⌘+V）だけで、AIによる分析コメントがもらえます。APIキーの取得や契約は一切不要な、コピー＆ペーストだけの原始的な仕組みです。コピーがうまくいかない場合に備えて、「コピーされる内容を確認・手動コピー」から中身をそのまま見て手動でコピーすることもできます。

表示名の差し替え（ホワイトレーベル納品）

ブックの「設定」画面の「表示名（ホワイトレーベル）」に名前を入れると、そのブックについて読者・お客様の目に触れる次の箇所の表示が、通常の「甲文堂デジタルブック」から入力した名前に差し替わります。

• 閲覧画面のブラウザタブのタイトル・SNS共有時の表示名（OGP）
• お客様共有レポート（report.php）の見出しと発行者表記
• 定期レポート配信のメール件名の角カッコ内
• ZIP納品の README.html・access-report.html の発行者表記

デザインパターン（閲覧画面のレイアウトの切り替え）

ブックの「設定」画面の「表示」カードにある「デザインパターン」で、閲覧画面全体の構造（タイトル・操作バー・ナビの配置）と配色を切り替えられます。「テーマ（背景色）」（ライト／セピア／ダーク）とは別の軸で、両方を組み合わせられます。どのパターンでも☰メニューの全機能（目次・拡大鏡・マーカー・全画面・配色・単ページ・表示サイズ・しおり・共有・一覧・自動めくり・印刷・AI検索・リンク）は同じように使えます——見た目・操作系の配置だけが変わります。

• 標準（あたたかい紙・エディトリアル） … 温かいアイボリーの紙色に、テラコッタ色のアクセントと明朝体の見出し。上部中央にタイトル、下部に操作バー（従来のデザイン）。
• 没入フルブリード（墨色・紙面に没入） … 墨色の背景に紙面を大きく（フルブリードで）表示し、UIを極力ひかえめに。タイトルは上部のグラデーション帯、操作系（ページ送り・スライダー・☰）は下部中央の浮遊ピルにまとめます。紙面そのものを主役にしたいときに。
• サイドパネル和装本（藍・机上の本のような額装） … 生成りの面に、机に置いた本のように紙面を影付きで額装。上部に藍のタイトルバー、左端に藍のサイドレール帯。落ち着いた資料・作品集などに。
• フローティングドック（淡緑・ガラス調の浮遊ドック） … 淡い緑の明るい面に、半透明（ガラス調）の操作層を薄く重ねる構造。上部にガラスのタイトルバー、左右に丸い半透明ナビ、下部に浮遊するドック。モダンで軽やかな印象。

選んだデザインパターンは、通常の閲覧画面だけでなくZIP納品書き出し時にも反映されます（書き出し画面で個別に上書きも可能）。この3案は、閲覧ビューワーのレイアウト刷新案としてデザインを依頼して作成したものです。

ZIP納品（単品での切り売り）

ブック一覧の「ZIP納品」ボタンから、そのブック1冊だけをサーバー不要で閲覧できる電子ブックとしてZIPファイルにまとめて書き出せます。1冊単位でお客様に販売・納品する「切り売り商品」に使えます。

• 中身：index.html（ダブルクリックで閲覧できるページめくりビューワー）、ページ画像、README.html（使い方）。任意でaccess-report.html（書き出し時点のアクセス分析レポート）も同梱できます。
• 単品として安全：新規作成や他ブックの管理機能は一切含まれません。閲覧（と同梱した場合のレポート閲覧）のみができます。
• 任意で選べる項目：同梱する閲覧機能（共有・サムネイル一覧・自動めくり・印刷・全ページ印刷・AI検索）、リンク集の有無、テーマ、表示モード、分析レポートの同梱有無とその集計期間。
• 納品先での公開：ZIPを解凍したフォルダの中身をレンタルサーバー等にアップロードするだけで公開URLになります（データベース不要）。

STEP 4｜書き出し

「書き出しを開始する」を押すと、ブラウザ内でPDFを1ページずつJPEG画像に変換しながらサーバーへ送信します。進捗バーで進み具合がわかります。完了までブラウザを閉じないでください（目安：50ページで1〜3分。回線速度によります）。通信が一瞬切れても自動で2回まで再送します。

STEP 5｜完了

公開URLが発行されます。「コピー」ボタンでコピーして、メールなどで閲覧者にお伝えください。限定公開の場合はパスワードも一緒に伝えます。

作成後の管理（ブック一覧）

• 開く … ビューワーを新しいタブで表示（プレビュー）
• URLコピー … 公開URLをコピー
• 設定 … タイトル・公開設定・パスワード・期限・テーマ・表示モード・オプション機能を後から変更
• 削除 … ブックとページ画像を完全に削除（元に戻せません）

公開後にPDFを追加する（成長していく電子ブック）

「設定」画面の「＋ PDFを追加」から、公開済みのブックにも新しいPDFのページを末尾から追加できます。手順は新規作成と同じ5ステップウィザードを使い回しますが、追加時は以下のように動作が簡略化されます。

• 公開設定・パスワード・期限・テーマ・オプション機能・アンケート・リンク集などは変更されません（表示されるのは「書き出し解像度」と「目次」だけ）。これらを変更したい場合は通常の「設定」画面から行ってください。
• サイズの自動調整：追加するPDFのページサイズが既存ページと違っていても、既存ページの幅に合わせて自動的に拡大縮小されます。ページごとの縦横比が多少違っても、ビューワー側の表示の仕組み（余白を付けて中央に収める）で違和感なく表示されます。個々のページのサイズを厳密に揃える必要はありません。
• 目次：既存の目次がそのまま表示され、追加したページ分の見出しを続けて登録できます。
• 分析（MAツール）への反映：ページ数はブックの分析データにも自動的に反映されます。追加操作のためだけの特別な設定は不要です。

マンガモード（コマ送り）

マンガをスマホで読む人のために、コマを1つずつ画面いっぱいに大きく表示して読ませる機能です。見開きや1ページ全体では文字が小さすぎるマンガでも読めるようになります。日本のマンガ（右綴じ・右上から左下へ読む）を想定しています。

1. 種類を選ぶ：ブックを新しく作るときは、ウィザードのSTEP 3「作品の種類」でマンガを選べます（コマの位置は、発行したあとに次の手順で処理します）。作ったあとに変える場合は、ブックの「設定」の「作品の種類（マンガモード）」をマンガにし、「綴じ方向」を右綴じにして保存します。
2. コマを認識する：同じ画面の「コマを認識・手直しする」を開き、「全ページを自動認識」を押します。保存済みの紙面画像から、コマの位置と読み順を、このブラウザの中で認識します。「AIも使って認識する」にチェックがあると、学習済みのAIモデルも使って、コマの分け方をより正確にします（初回のみ約25MBを読み込みます。画像は外部へ送りません）。AIが読み込めないときは、AIなしで認識します（1ページ0.1秒ほど。数百ページでも1〜2分）。
3. 「要確認」のページだけ見る：認識に自信が持てないページには「要確認」の印が付きます。N キーで次の要確認のページへ、Enterで「確認済みにして次へ」。正しければそのまま Enter です。
4. 直す：コマをドラッグで移動、四隅・四辺のハンドルで大きさを変更、空いた所をドラッグで新しいコマを描きます。「線で分ける」で1つのコマを2つに、Shift+クリックで複数選んで「結合」、「読み順を付け直す」で読む順にクリック。右に、読者のスマホでの見え方のプレビューが出ます。

読む人の操作（スマホ）

• 右綴じ：画面の左をタップ、または右へスワイプで次のコマ。右をタップ／左へスワイプで前のコマ。（左綴じは逆）
• ページの最後のコマの次は、自動でページをめくって次のページの最初のコマへ。戻るときは、前のページの最後のコマへ。
• メニューの「コマ送り」で、入／切と文字の大きさ（標準・大きめ・特大）を選べます。大きくすると、大きなコマを複数の窓に分けて順に見せます。小さな文字が読みにくいときに使います。
• つまんで拡大・移動すると一時的に手動になり、「コマ送りに戻る」でいまのコマへ戻れます。
• マンガのブックは、PCでも開いたらまずコマ送りで始まります（矢印キー・クリックでコマを進められます）。画面上部のグレーの帯に「ページ／全体のページ数」と「コマ n/m」が出ます。右端の「コマ送りを終了」でふつうの表示に戻れます（その端末では覚えています。メニューの「コマ送り」で戻せます）。
• コマ送りでページを移るときは、めくりのアニメーションを付けず、すぐ切り替えます。

紙面に置く：リンク・動画・いいね・フォーム（リンクの自動検出）

ブック一覧の「動画・リンク」から開きます。紙面を見ながら、押せる範囲を置く画面です。中央が紙面、右が「このページの項目」と設定欄です。

1. 検出する：上の「このページを検出」（いまのページだけ）・「全ページを検出」（PDFの選び直しは不要）か、「PDFを選んで検出」（PDF内リンクも拾え、精度が高い）を押します。
2. 候補を見る：紙面に点線の枠（候補）が出ます。右の一覧にも並びます。ページ一覧のサムネイルには「○候補」と件数が出ます。
3. 範囲にする：そのまま使うなら一覧の「範囲にする」。位置やURLを直すなら、枠（または一覧の行）をクリックして整え、「設置して保存」。まとめて使うなら「このページ／全ページの候補をすべて範囲にする」。
4. 保存：右の「設置して保存」を押すと、その1件を設置して保存まで行い、公開ページに反映されます。枠を動かした・削除した・「すべて範囲にする」を使ったときは、画面上部に「未保存の変更があります」と出るので、「すべて保存」を押してください。

何を検出するか

• 紙面に印刷された http:// / https:// のURL（www.から始まる書き方も。改行で折り返されたURLもつなげます。URLの直後に日本語が続いても、日本語は含めません）。
• QRコードすべて：中身がURLなら、そのURLを範囲にします（ドメインだけの書き方は https:// を補います）。電話番号などURLでないQRコードも位置は点線（黄色寄りの枠）で示すので、リンク先を入力して範囲にできます。
• PDF内に埋め込まれたリンク（「PDFを選んで検出」のとき）。

いいねエリア

設定欄の「範囲の種類」でいいねエリアを選ぶと、URLの代わりに「いいね」を受け付ける範囲になります。商品写真や作品ごとに置くと、どれが好まれたかが分かります。閲覧画面では範囲の右下に「いいね」ボタンと件数が出ます（件数は読者にも見えます。0件のときは数字を出しません）。1つの端末から1エリアにつき1回まで数え、もう一度押すと取り消せます。件数は分析画面と共有レポートの「いいねエリア」に出ます。

フォーム（申込フォーム・アンケート）

管理画面の「フォーム」で作ります。作り方はGoogleフォームとほぼ同じです。

1. 作る：「申込フォームを作る」か「アンケートを作る」を押すと、よく使う設問が入った状態で始まります。設問カードをクリックすると編集でき、左のつまみのドラッグで並べ替え、右の「設問を追加」で下に足せます。
2. 受付を決める：「設定・受付」で、受付のスイッチ・開始と終了の日時・回答数の上限・1人1回・送信後の文を決めます。アンケートは「集計結果を回答者にも見せる」をONにできます。
3. 通知と控え：回答があると通知先のメールに届きます（空欄なら全体設定の受信メールアドレス）。チャット（Webhook）も足せます。回答者には控えのメールを送れます（メールの設問があるとき）。共用サーバーのメールは届かないことがあるため、送信後の画面にも控えを出し、PDFで保存できるようにしています。
4. 冊子から開く：「紙面に置く」で、範囲の種類を「フォームを開く」にして紙面に置くと、読者が押したときに冊子の上でフォームが開きます。単独のURL・QRコード（設定・受付の下）でも回答できます。冊子を関連づけると、単独ページで「冊子を読む」を案内します。
5. 回答を見る：「回答」の「概要」で設問ごとの集計、「個別」で1件ずつ（未対応／対応済み・メモ）。CSVで書き出せます。どの冊子から回答したかも残ります。

校正レビュー・範囲コメント

紙面の一部を囲んで付けるコメントです。ブックの設定画面の「校正レビュー・範囲コメント」で扱います。

校正レビュー（お客様との確認用）

1. 「校正レビュー用リンクを発行する」を押し、表示されたリンクをお客様に送ります。限定公開・非公開のブックでも、このリンクなら開けます（閲覧数には数えません）。
2. お客様は、メニューの「校正レビュー」→「紙面を囲んでコメントする」で、修正したい場所を囲んで書き込みます。紙面には番号つきの印が出ます。
3. 制作側は一覧で内容を確認し、修正したら「対応済みにする」。返信もできます。お客様が返信を追記すると「未対応」に戻ります。
4. 確認が終わったら「レビューを停止する」で、リンクを無効にできます（コメントは残ります）。

公開の範囲コメント（読者向け・承認制）

コメント機能がONのブックでは、読者もメニューの「範囲コメント」から紙面を囲んでコメントできます。発行者が「承認して公開する」を押すまで、ほかの読者には表示されません。返信・公開の取り下げ・削除もここで行います。

ノート（読者の書き込み）（試験運用中）

ブックの設定の「機能」でノートをONにすると、読者がタッチペンや指で紙面に書き込めます。教材・ドリル・塗り絵冊子向けです。

• ブラシ：ペン（筆圧対応）、万年筆、筆、鉛筆、クレヨン、エアブラシ、マーカーの7種類。見本の線つきの一覧から選びます。
• 道具：消しゴム（「部分消し」は触れた所だけ、「線ごと消す」は線をまるごと。ペンの消しゴムボタンにも対応。大きさは太さのスライダー）、塗りつぶし（線で囲まれた所をタップ。塗った範囲を消しゴムで押すと消えます）、テキスト、付箋、直線・四角・円。取り消し／やり直し。
• 色と太さ：色は12色のほか、虹色のボタンからフルカラーで選べます（色コードの入力・スポイトも可）。よく使う色は「今の色を登録」でマイスウォッチに保存できます（この端末に残ります）。太さは、線の見本つきのボタンか、1〜40のスライダーで決め、その場で見え方を確認できます。
• ペンと指：「指で触ると」を「めくる・拡大」にすると、指では書かず、横になぞるとページがめくれ、2本指で拡大・移動できます。手のひらが触れても線が出ないので、ペンで書くときにおすすめです。「書く」にすると、指でも書けます。
• 操作パネル：紙面をほぼ画面いっぱいに使えるよう、ブラシ・道具・色・太さの一覧は普段は隠れています。上のバーの見本ボタン（PCでは「ブラシ・色・太さ」）を押すと開き、選ぶと自動で隠れます。スマホでは、指の動作・ページを消す・ダウンロードは右上の「…」にあります（横向きでは一覧が右側に出ます）。
• ページの移動：上の三角のボタン（右開きのブックは向きが逆）、横になぞる、キーボードの左右キーで移れます。めくりのアニメーションが付きます。
• ノートで開く：ブックの設定の「機能」でノートで開くもONにすると、ブックを開いた時点でノートから始まります（ドリル・塗り絵向け。「閉じる」で通常の閲覧に戻れます）。
• 保存：書き込みは読者の端末（ブラウザ）の中だけに保存され、サーバーには送られません。ブラウザのデータを消すと書き込みも消えます。
• 送る：「ダウンロード」から、そのページを画像（PNG）、書き込みのあるページをまとめてPDFでダウンロードできます。送るときは、メールなどに添付してください。
• 書き込みは、ふだんの閲覧画面でも紙面に重ねて表示されます。

まとめて登録の使い方（事例つき）

（試験運用中）ブック一覧の「まとめて登録」で、複数のPDFを1冊ずつブックにします。最初は20冊ほどで試してから、少しずつ増やしてください。

1. 1. 共通の設定：全冊に共通の公開状態・顧客・分類・フォルダ・ライブラリ・機能を決めます。
2. 2. PDFを選ぶ：PDFを複数選ぶ、ZIPを選ぶ、またはフォルダごと選びます。
3. 3. 1冊ごとの設定：冊子ごとに変えたいところだけ書き換えます（空欄は共通の設定が入ります）。冊数が多いときは、サンプルCSV（画面の「サンプルCSVをダウンロード」）をExcelで開いて書き換え、「CSVを読み込む」で反映すると早く確実です。
4. 4. 登録する：1冊ずつ順に変換して登録します。失敗した冊子は「失敗」に残り、ほかの冊子は続きます。

CSVの列と書き方

事例

ホーム（顧客管理ダッシュボード）

ログインすると最初に表示される「ホーム」は、どの顧客がどのブックを持っているか、公開期限が近いブックはどれか、対応が止まっている顧客はいないかを一目で確認できる画面です。記憶に頼らず運用するための起点になります。

• 🔔 公開期限が近いブック … 30日以内に期限を迎えるブックを、残り日数・顧客名付きで警告表示します。クリックで即座に設定画面を開いて期限を延長できます。
• 😴 対応が止まっている顧客 … 90日以上ブックの更新・対応メモの追加がない顧客を自動的に検出します（フォロー漏れの防止）。
• 📩 未対応の作成依頼 ／ 🕐 最近の動き … 直近の依頼と、直近で作成・更新されたブックを一覧表示します。

顧客の登録・管理

上部メニューの「顧客」から、会社名・担当者名・連絡先・分類（業種など）を登録できます。ブック作成時（STEP 3）や、既存ブックの「設定」画面からも、その場で新規顧客を登録してブックに紐付けられます。

• 顧客ページには「対応メモ」を時系列で残せます。電話・打ち合わせの内容や次回の予定などを書いておくと、担当が変わっても引き継げます。
• 1顧客に複数のブックを紐付けられます。ブックの紐付け・解除はいつでも変更できます（ブック自体が消えることはありません）。
• お客様からの作成依頼（依頼フォーム）にも、内容を確認しながら既存顧客に紐付ける、または依頼内容から新規顧客を自動登録できます。
• 顧客を削除しても、紐づいていたブック・依頼は削除されず、紐付けだけが解除されます。

ブックのビジネス情報

各ブックの「設定」画面に「ビジネス情報」欄があります（閲覧者には表示されません）。

• クライアント（依頼を受けた相手）… 上記の「顧客」機能で紐付けます。
• エンドユーザー（最終的に使う相手）… クライアントと異なる場合（代理店経由の案件など）に使い分けられる、名前・連絡先の入力欄です。
• 案件ステータス（商談中／受注／制作中／納品済み／完了）・社内担当者・納期 … 社内の進行管理用。「公開期限」（閲覧できる期間）とは別物です。
• 収益額・入金状況（未請求／請求済み／入金済み）… 案件の収益と入金の管理に使えます。
• 契約内容 … 契約期間・支払条件・権利関係などを自由記述で残せます。

ブック一覧のカスタマイズ

ブック一覧の右上「⚙ 表示設定」から、この端末での見え方を自由に調整できます（他の端末には影響しません）。列を増やしても窮屈にならないよう、表全体は横スクロールに対応しており、タイトル列と操作列（アイコンボタン）は常に画面に固定表示されます。

• タイトルで検索 … 一覧上部の検索欄にキーワードを入れると、その場でタイトルに一致するブックだけに絞り込まれます。
• 表示する項目 … タイトル・操作以外の列（状態・案件ステータス・クライアント・エンドユーザー・ページ数・容量・収益額・入金状況・社内担当者・納期・公開期限・更新日）をチェックボックスでON/OFFできます。項目が増えて煩雑にならないよう、初期状態では一部だけが表示されています。
• 文字サイズ・行の高さ … コンパクト／標準／ゆったりの3段階から選べます。
• 列幅 … 各列の見出しの右端をドラッグすると幅を調整できます。
• 横スクロール … 表の下端だけでなく上端にもスクロールバーがあり、下端まで見なくても左右に動かせます。
• 操作列 … 開く／URLコピー／設定／分析／ZIP納品／削除は、省スペースのアイコンボタンです（アイコンにマウスを乗せると名前が出ます）。
• 「既定に戻す」でいつでも初期状態に戻せます。

ライブラリ（お客様専用ページ）

複数のブックから見せたいものだけを選んで、表紙サムネイルを並べた「ライブラリ」ページを作れます。お客様ごとに専用の入口を用意したいときに便利です（例：「〇〇株式会社さま 専用ライブラリ」）。

1. 管理画面の上部メニュー「ライブラリ」を開く
2. ライブラリのタイトル（と必要なら説明文）を入力し、並べたいブックの表紙をクリックして選ぶ（もう一度クリックで解除）
3. 「ライブラリを作成する」を押すと、専用URL（shelf.php?s=…）が発行されます。このURLをお客様にお渡しください

• URLを知っている人だけが見られます（秘密のキーが付いています）。あとから「編集」で並べるブックを追加・削除できます。
• ライブラリの表紙をクリックすると、そのブックの閲覧画面が開きます。限定公開のブックには🔒が付き、開くときにパスワードが必要です。
• 公開期限が切れたブックは、ライブラリから自動的に表示されなくなります。
• ライブラリを削除しても、中のブック自体は消えません。

ライブラリの閲覧記録

管理画面の左メニュー「ライブラリ ＞ 閲覧記録」（または「分析・請求 ＞ ライブラリの閲覧記録」、ライブラリ一覧の各行の「閲覧記録」）で、ライブラリごとの閲覧の様子を見られます。

• ライブラリの訪問数・訪問した人、ライブラリからブックまで開いた人の割合、ブックが開かれた回数と平均の読み進み・閲覧時間、くり返し訪れた人の割合。
• ブックごとの開かれ方：ライブラリの並び順（上ほど目に付きます）に、開かれた回数・人数・開かれた割合を並べます。一度も開かれなかったブックは「気づき」に出ます。
• 端末・どこから来たか（流入元・UTM）の内訳。ライブラリのURLに ?utm_source=メルマガ のように付けると、キャンペーン別に見られます。
• ライブラリの設定で検索をONにしていれば、ライブラリの中で検索された言葉（探されたのに見つからなかった言葉も）が出ます。次に作るブックのテーマの手がかりになります。
• テスト閲覧のリセット：公開前に作業者が見た分は、ライブラリの閲覧記録・ブックの分析画面の下の「閲覧データのリセット」で消せます（「この日より前だけ」を選べば公開日より前の分だけ。確認のため「リセット」と入力します。消したデータは30日間保管し、同じカードの下の記録から「元に戻す」ができます。個人の情報を含むデータをすぐに消したいときは「元に戻せなくなってもよい」を選びます。リセットと取り消しは、どちらも記録に残ります。運営者（管理者）だけが操作できます）。
• 記録するのは、匿名のランダムID・端末・流入元・検索語だけです（個人を特定する情報は集めません）。管理者の閲覧とLINE等の自動プレビューは数えません。ブックの閲覧記録と同じ仕組みで、この機能を入れた以降の閲覧から記録されます。

公開・限定公開・URL共有

URLは …/viewer/?b=ランダムな16文字 という推測困難な形式で発行されます。検索エンジンには、既定では登録されないよう設定されています（noindex）。「公開」設定のブックに限り、編集画面の「検索エンジンへの登録を許可する」をオンにすると、あえて検索結果に出すこともできます（初期値はオフ）。

ビューワーの操作方法（閲覧者向け）

閲覧者への案内にそのままお使いいただけます。画面下のバーは「めくる操作」と「☰メニュー」だけのシンプル構成です。目次・拡大鏡・共有・印刷などの機能はすべて☰メニューの中に集約されています。

画面幅の狭いスマホでは、自動的に見開き表示から1ページ表示に切り替わります。初めて開いたときは「めくり方のヒント」が数秒表示されます。

動作確認チェックリスト（P0〜P3）

P0：核心部分（ローカルで確認・サーバー不要）

• demo/index.html をダブルクリックすると本が表示される
• ページの端をドラッグすると紙のようにめくれる
• 下部の「☰ 目次」から見出しをクリックすると該当ページに飛ぶ
• マウスホイールを回すと本がその場で拡大縮小され、拡大中はドラッグで表示位置を動かせる（スマホはピンチ）
• ブラウザの幅を狭くする（またはスマホで開く）と1ページ表示に切り替わる
• 「↗ 共有」でQRコードが表示される／「▦ 一覧」でサムネイルから飛べる／「▶ 自動」で自動めくりが始まる／「🖨 印刷」で印刷画面が開く（デモは全機能ON）
• 「✦ AI検索」→ 誌面をドラッグで囲むと切り出し画像が表示され、Googleレンズ検索またはOCR→AI検索ができる

P1：管理画面ウィザード（Xserver設置後）

• /admin/ にログインできる
• STEP1でPDFをドラッグ&ドロップすると「✓ ファイル名（◯ページ）」と表示される
• STEP3のオプション機能でONにした機能だけが、発行後のビューワーに表示される
• STEP2でサムネイルが並び、ドラッグで並び替え・×で除外ができる
• 表紙PDFを付けた場合、本文の前に「表紙」バッジ付きで合体されている
• STEP4で進捗バーが伸び、「完了しました！」まで進む
• STEP5のURLを開くと、いま作った本がめくって読める

P2：URL発行・アクセス制限・一覧管理

• ブック一覧に作成したブックが表示され、「URLコピー」でコピーできる
• 限定公開ブックを開くとパスワード入力画面が出る（正しいパスワードで閲覧でき、間違いでははじかれる）
• 「設定」から公開期限を昨日の日付にすると「公開期限が終了しました」と表示される（確認後は戻す）
• テスト用ブックを「削除」すると一覧から消え、URLを開いても「見つかりません」になる

P3：仕上げ（スマホ・付加機能）

• スマホの実機でURLを開くと1ページ表示になり、スワイプでめくれる
• スマホで「🔍 拡大」→ ピンチで拡大縮小できる
• 目次登録したブックで、目次ジャンプが正しいページに飛ぶ
• テーマ（セピア／ダーク）を変えると背景色が変わる
• 横長ページ主体のPDF（見開き1枚もの）が1ページ表示モードで書き出される

技術メモ

ページめくりライブラリの比較（採用理由）

PDF→画像変換の方式について

本システムはブラウザ側変換（PDF.js）を標準採用しています。当初案の「サーバー側でImagick／Ghostscriptを使う方式」を採用しなかった理由は次のとおりです。

• Xserverの共用プランでは shell_exec によるGhostscript実行が保証されず、動かないリスクを抱えたまま核心機能を設計できないため。
• サーバー変換にはPDF本体のアップロードが必要で、アップロード上限（初期値は数十MB）やPHP実行時間制限（30秒前後）に引っかかりやすいため。ブラウザ変換ならPDFはサーバーに送らず、1ページずつの画像（数百KB）を送るだけで済みます。
• 将来サーバー変換に切り替えたくなった場合は、admin/api.php に「PDFを受け取って変換するアクション」を追加する拡張で対応可能です（ビューワー側は画像を表示するだけなので変更不要）。

表示品質について（HTML描画モード）

• ページめくりはStPageFlipのHTML描画モードで表示しています。Canvas描画モードは高精細画面（Retina・スマホ）で粗く表示されるため使用していません。ページ画像は元の解像度のままブラウザが描画するので、拡大してもくっきり表示されます。
• 綴じ方向は左綴じ・右綴じの両方に対応しています（ブックごとに指定。既定は左綴じ）。右綴じにすると、めくる向きのほか矢印ボタン・スライダー・ページ一覧の並びもすべて反転します。なお、このStPageFlipは右綴じに対応させた独自ビルドです（配布されているものは左綴じ専用のため）。差し替え手順は vendor-patches/stpageflip-rtl/ にまとめてあります。
• OCR（文字読み取り）は Tesseract.js（Apache-2.0ライセンス・CDN読込）を、閲覧者が使ったときだけオンデマンドで読み込みます。公開時の事前OCRは行いません（サーバー負荷ゼロ・公開作業も速いまま）。

現バージョンの既知の制限

• ページ内のリンクや動画の埋め込みには対応していません（画像として表示するため）。
• CDN（外部配信サーバー）からライブラリを読み込むため、閲覧にはインターネット接続が必要です。

フォルダ構成（サーバー上）

book/                  ← 設置先（名前は自由）
├── index.php          ← トップページ
├── disclaimer.html    ← 利用規約（免責事項を含む）
├── .htaccess          ← セキュリティ設定
├── inc/               ← 設定・共通処理（config.php はここ）
├── admin/             ← 管理画面
├── viewer/            ← 閲覧ビューワー
├── books/             ← ページ画像（ブックごとにフォルダが自動生成される）
├── demo/              ← P0確認用デモ（設置後は削除してもOK）
└── manual/            ← このマニュアル

よくある質問（トラブル対応）

Q. 「データベースに接続できませんでした」と表示される

A. inc/config.php の DB_HOST／DB_NAME／DB_USER／DB_PASS のどれかが間違っています。Xserverサーバーパネルの「MySQL設定」で正しい値を確認してください。特にホスト名は localhost ではなく mysqlXXXX.xserver.jp 形式の場合があります。

Q. 管理画面にログインできない

A. inc/config.php の ADMIN_PASSWORD に設定した文字列がそのままパスワードです。コピー時に前後の空白が入っていないか確認してください。

Q. 書き出し中にエラーで止まった

A. 「書き出しを開始する」を再度押すとやり直せます。何度も失敗する場合は、Wi-Fi等の通信環境が安定した場所で実行してください。作りかけのブックは一覧に「作成中」として残るので、削除してから作り直しても構いません。

Q. PDFを読み込めない

A. パスワード（セキュリティ）付きPDFは読み込めません。Acrobat等で保護を解除した複製を作ってから入稿してください。

Q. ページの文字がぼやける

A. ブック作成時のSTEP 3「書き出し解像度」を「超高画質（2400px）」またはカスタムでさらに大きい数値にして作り直してください（数値を上げるほど精細になりますが、変換時間と通信量が増えます）。すでに発行済みのブックの解像度は変えられないため、新しく作り直して古い方を削除してください。

Q. AI検索のOCR（文字読み取り）が遅い・精度が低い

A. OCRは閲覧者のブラウザ内で実行されるため、初回は読み取りエンジンの取得に数十秒かかることがあります（2回目以降は速くなります）。精度を上げるには、範囲を大きめに・文字がまっすぐ写るように囲んでください。読み取り結果は検索前に手で修正できます。なお、ページの事前OCR処理は行っていないため、公開作業が重くなることはありません。

Q. めくりアニメーションが表示されない（真っ白）

A. ライブラリをCDNから読み込めていない可能性があります。インターネット接続と、社内ネットワークのフィルタリング設定（unpkg.com / cdnjs.cloudflare.com への接続）を確認してください。

Q. 公開をやめたい／期限を延ばしたい

A. ブック一覧の「設定」からいつでも変更できます。完全にやめる場合は「削除」してください。

Q. 利用規約（disclaimer.html）はどんな内容？

A. 「本サービスを利用した時点で規約に同意したものとみなす」という同意条項に加え、当社（甲文堂）の事業上の判断でサービスの全部または一部を変更・終了できる旨を明記しています（運用継続が困難になった場合や、利用状況の低迷などを想定）。あわせて禁止事項・免責事項（当社の故意・重過失を除く責任の範囲）・準拠法／管轄裁判所も定めています。全ページ下部の「利用規約」リンクから、いつでも内容を確認・印刷できます。文面を変更したい場合は disclaimer.html を直接編集してください（法的な内容のため、実際の運用に即した文言か一度専門家にご確認いただくことをおすすめします）。