【徹底解説】Shopify アプリ「シンプルPDFカタログ｜お手軽PDFフリップブック表示」でできること

【徹底解説】Shopify アプリ「シンプルPDFカタログ｜お手軽PDFフリップブック表示」でできること

紙のカタログや取扱説明書を持っている商品ほど、ネットショップの商品ページでは情報が足りなくなりがちです。寸法表、素材の一覧、使い方の図解、シリーズ全体のラインナップ。これらを商品説明に書き写すのは手間で、PDF のままリンクを置くと、お客様はダウンロードしてからビューアを開き、読み終えたら商品ページへ戻ってくる、という遠回りを強いられます。

「シンプルPDFカタログ｜お手軽PDFフリップブック表示」は、この遠回りを無くすために当社（UnReact）が開発した Shopify アプリです。アプリの管理画面で商品を選んで PDF を 1 冊登録すると、その商品のページにボタンが 1 つ現れ、お客様がそれを押した瞬間に画面全体が本のビューアになり、ページをめくるように読めます。登録する PDF は商品ごとに別々なので、スノーボードにはスノーボードの、ビンディングにはビンディングの 1 冊を見せられます。

この記事では、管理画面の 3 画面とテーマエディタの 14 項目を 1 つずつ、画面の画像を添えて解説します。初期設定の手順そのものは Shopifyで商品ページにPDFカタログをめくって読めるフリップブックで表示できるアプリについて徹底解説｜ご利用ガイド に詳しく書いてあるので、ここでは「それぞれの設定が何を決めているのか」「画面には出てこない上限や挙動」「用途ごとの組み合わせ方」に重心を置きます。後半では、アプリを使わずに Liquid と JavaScript で同じことを組む場合の手順と、カタログを作るタイプのアプリとの使い分けにも触れます。

「シンプルPDFカタログ」とは

「シンプルPDFカタログ」は、商品ごとに登録した PDF を、商品ページの上で全画面のフリップブックとして開く Shopify アプリです。英語名は UR: PDF Flipbook Catalog で、Shopify App Store から 7 日間の無料体験付きでインストールできます。

「フリップブック」は、PDF の各ページを本のように左右へめくって読む表示形式の呼び名です。スクロールで下へ下へと読む PDF ビューアと違い、見開きで組まれたカタログや、紙面のレイアウトに意味がある取扱説明書を、紙と同じ感覚で読ませられます。

アプリは 3 つの部品でできています。

• 管理画面 … 「PDF フリップブック」「設定」の 2 画面と、条件付きで出る「よくある質問」の計 3 画面です。やることは商品に PDF を登録・差し替え・削除することと、テーマへブロックを追加することだけで、見た目の設定はここにはありません
• テーマ拡張（アプリブロック） … 商品ページにボタンを 1 つ描き、押されたらビューアを立ち上げる本体です。ボタンの文言・形・色・大きさ・余白の 14 項目は、すべてテーマエディタの中で決めます
• データの置き場所 … PDF の本体は Shopify 標準の「コンテンツ > ファイル」に、商品との結び付きはその商品のアプリ専用メタフィールドに入ります。アプリ独自のデータベースは持っていません

インストール時に求める権限は、商品の読み書き、ファイルの読み書き、テーマの読み取りの 3 種類です。商品への書き込みはメタフィールドに PDF の参照を保存するため、ファイルへの書き込みは PDF をアップロードするため、テーマの読み取りは「設定」画面でテーマの一覧を出すためで、顧客や注文のデータには一切触れません。

「シンプルPDFカタログ」のメリット

商品ごとに別の 1 冊を、商品一覧から登録できる

カタログを 1 冊作ってストアのどこかに埋め込むタイプのアプリは、「この商品の資料だけ見たい」というお客様の目的に合いません。このアプリは商品一覧の行ごとに「PDF を登録」ボタンがあり、商品 A には A の取扱説明書、商品 B には B の仕様書、というように 1 対 1 で結び付けます。登録した商品のページにだけボタンが出て、登録していない商品のページには何も出ません。

アプリのサーバーが止まっても、お客様の画面は止まらない

PDF は Shopify の CDN（配信サーバー）に置かれ、商品ページの Liquid がその URL を直接読み、めくる処理はお客様のブラウザの中で完結します。つまり、お客様がカタログを開く一連の動作に、当社のサーバーは一度も登場しません。アプリ側に障害が起きても、すでに登録済みのカタログは表示され続けます。「アプリの不調で商品ページのボタンが消えた」という事態を、構造の時点で起こらないようにしています。

商品ページの表示速度を落とさない

商品ページを開いた時点で読み込まれるのは、ボタン用のスタイルシートと起動用のスクリプトを合わせて 10 KB ほどだけです。PDF を描画するライブラリ（pdf.js、約 1.7 MB）とめくり演出のライブラリ、そして PDF 本体は、お客様がボタンを押したあとに初めて読み込みます。カタログを登録したからといって、商品ページの初期表示が重くなることはありません。審査で見られるストアフロントの性能指標（Lighthouse）にも影響しないよう設計しています。

PC では見開き、スマートフォンでは 1 ページ

ビューアは表示できる幅を見て、見開き 2 ページで組むか 1 ページずつ組むかを自動で切り替えます。設定項目はありません。PC で見れば紙のカタログを開いたような見開き、スマートフォンで見れば 1 ページが画面いっぱいに出て、タップやスワイプで次へ進めます。

管理画面もボタンもビューアも 20 言語で動く

管理画面、商品ページのボタンの既定の文言、ビューアのツールバーの文言は、いずれも日本語・英語を含む 20 言語で用意してあります。日本語のストアなら「カタログを見る」、英語のストアなら「View catalog」と、お客様が見ている言語に合わせて自動で切り替わるので、海外向けに多言語で公開しているストアでも翻訳の手間がありません。

「シンプルPDFカタログ」のデメリット

1 つの商品に登録できる PDF は 1 冊だけ

カタログと取扱説明書の両方を 1 つの商品に付けたい、という場合でも登録できるのは 1 冊です。複数の資料を見せたいときは、1 つの PDF に結合してから登録することになります。

20 MB を超える PDF は登録できない

容量の上限は 20 MB で、これは Shopify のファイル機能そのものの上限です。アプリ側の設定で広げることはできません。写真を多く含む印刷用データはこの上限を超えやすいので、Web 用に画像を圧縮した版を用意してから登録してください。外部サイトに置いた PDF の URL を貼る方式には対応していません。

置けるのは商品ページだけ

ブロックは商品テンプレート専用で、トップページやコレクションページ、固定ページの「ブロックを追加」には出てきません。ストア全体の総合カタログを 1 冊置きたい、という用途には向きません。

ダウンロードや印刷を禁止することはできない

ビューアのダウンロードボタンは設定で消せますが、PDF は Shopify の公開 URL に置かれるため、ブラウザの機能で保存されることまでは防げません。印刷やコピーの禁止機能もありません。「見せてもよい資料」を載せる前提のアプリです。

商品ページに反映されるまで時間がかかることがある

PDF を登録・差し替え・削除しても、商品ページに反映されるまで数十分から数時間かかることがあります。商品データが Shopify の CDN にキャッシュされるためで、アプリ側で即時に反映させる手段はありません。管理画面の一覧にファイル名が出ていれば登録自体は完了しているので、焦らず待つのが正解です。

カタログを「作る」機能や、ページ内の商品をカートに入れる機能は無い

このアプリは、すでにある PDF を見せることに絞っています。アプリの中でカタログをデザインする機能、ページの上に商品へのリンクを置くホットスポット、3D のめくり演出、閲覧数の解析は持っていません。

料金プラン

料金プランは 1 つで、月額 4.99 ドルです。年払いを選ぶと 49.99 ドルで、月払いを 12 か月続けるより 2 か月分安くなります。インストールから 7 日間は無料で、期間中にアンインストールすれば請求は発生しません。無料プランや、登録した冊数に応じて金額が変わる課金はありません。

• 月額プラン … 4.99 ドル / 月
• 年額プラン … 49.99 ドル / 年（月払いの約 10 か月分）
• 無料体験 … 7 日間

課金は Shopify の仕組みを通して行われ、プランの選択と承認はインストール直後の画面で済みます。アプリ側で別途クレジットカードを登録する必要はありません。

インストール

インストールの入口は、Shopify 管理画面の左下の「設定」から「アプリと販売チャネル」を開き、そこにあるアプリストアへのボタンを押す経路です。アプリストアの検索窓に「UR: PDF Flipbook Catalog」と入れると一覧に出ます。

アプリの詳細ページで「インストール」を押します。公開から間もないあいだは検索結果の下の方に出ることがあるので、見つからなければ Shopify App Store のリンクから直接開いても同じです。

権限の確認画面が開きます。ここに並ぶのは「商品」「オンラインストア」「ファイル」の 3 つで、前述のとおり顧客や注文は含まれません。内容を確認して「インストール」を押すと、料金プランの承認を経てアプリの管理画面が開きます。

アプリ管理画面の構成

左のメニューに並ぶのは「PDF フリップブック」と「設定」の 2 つです。これに加えて、管理画面の表示言語が日本語で、かつ当社が「よくある質問」を 1 件以上公開しているときだけ、3 つ目として「よくある質問」が出ます。この記事を書いている時点ではまだ公開していないため、メニューは 2 つです。

役割の分担は単純です。「PDF フリップブック」が日々使う主画面で、商品と PDF を結び付ける作業はすべてここで行います。「設定」は最初の 1 回だけ触る画面で、テーマへの追加と、管理画面の言語の切り替えがあります。ボタンの見た目は管理画面のどこにも無く、テーマエディタ側に集めてあります。

各画面の説明

「PDF フリップブック」画面の反映に関する注意バナー

画面のいちばん上に、黄色いバナーで「登録した PDF が商品ページに反映されるまで、時間がかかることがあります。」と出ています。閉じるボタンは無く、常に表示されます。

商品ページのボタンは、商品に紐付いたメタフィールドの値を Liquid で読んで描画します。この値は Shopify の CDN に商品データごとキャッシュされるため、管理画面で登録・差し替え・削除をした直後は、古い状態の商品ページが配信され続けることがあります。遅れの長さはそのときどきで、数分で反映されることもあれば数時間かかることもあります。「登録したのにボタンが出ない」と問い合わせを受けたときに最初に疑う場所なので、消せない形で置いてあります。

「PDF フリップブック」画面の商品を検索

一覧の上にある「商品を検索」の欄（入力前は「商品名で検索」と薄く表示）に語句を入れて「検索」を押すと、商品名にその語句を含む商品だけに絞り込めます。部分一致で、大文字と小文字は区別しません。

検索語はページの URL に付きます。絞り込んだ状態のまま PDF を登録しても絞り込みは解除されず、ブラウザの「戻る」で検索前の一覧に戻れます。商品数が多いストアでは、先に検索してから登録する方が行を探す手間が省けます。

一致する商品が無いときは「商品がありません」と出ます。欄を空にして「検索」を押せば全商品の一覧に戻ります。そもそもストアに商品が 1 つも無いときは、ここに「ストアに商品を追加すると、ここに一覧が出ます。」と案内が出ます。検索の対象は商品名だけで、SKU やタグ、商品説明の中の語では探せません。

「PDF フリップブック」画面の商品一覧

一覧は 1 ページに 50 件、Shopify の商品一覧と同じ並び順（新しく作った商品が上）です。下書きやアーカイブ済みの商品も並ぶので、公開前の商品に先に PDF を付けておくこともできます。

列は 3 つあります。

• 商品 … サムネイルと商品名です。画像の無い商品には仮のアイコンが入ります
• PDF … 登録の状態です。未登録なら「—」、登録済みなら元のファイル名と容量が出ます
• 操作 … 未登録の行には「PDF を登録」、登録済みの行には「差し替え」と「削除」の 2 つが出ます

PDF 列には、ファイル名のほかに 2 種類のバッジが出ることがあります。

• 処理中（黄色） … アップロードは終わっているのに、Shopify 側でファイルの処理がまだ完了していない状態です。通常は数秒で消えるので、画面を読み込み直してください。長く残るときは「差し替え」で上げ直します
• ファイルが見つかりません（赤） … 登録はあるのに、参照先の PDF が「コンテンツ > ファイル」から削除されている状態です。この状態の商品ページではボタンが黙って消えます。「差し替え」で新しい PDF を上げるか、「削除」で登録を外してください

赤いバッジが出る典型は、「ファイル」画面の整理で古い PDF をまとめて消したときです。アプリは商品との結び付きだけを持っていて、ファイル本体の削除を止めることはできないため、一覧でこの表示を定期的に確認しておくと安全です。

「PDF フリップブック」画面の PDF を登録

未登録の行の「PDF を登録」を押すと、商品名を見出しにしたモーダルが開きます。「PDF を選択」を押してファイルを選ぶか、枠の中へドラッグ＆ドロップします。

ファイルを選ぶと、枠の中にファイル名と容量が表示され、「アップロード」が押せるようになります。

選べるファイルには 3 つの条件があります。

• 形式は PDF（application/pdf）だけで、1 回に 1 つです。画像や Word のファイルを選ぶと「PDF ファイルを選択してください」と赤字で出て、「アップロード」は押せません
• 容量は 20 MB（20 × 1024 × 1024 バイト）以下です。超えると「20MB 以下の PDF を選択してください」と出ます
• ファイル名は 200 文字以内です。超えると送信後に「入力内容を確認してください」で止まります

「アップロード」を押してからの流れは、画面には見えませんが 4 段階あります。まずアプリがファイル名と容量を Shopify に伝えて一時的な置き場所を発行してもらい、次にブラウザがその置き場所へ PDF を直接送ります。送信が成功すると Shopify のファイルとして正式に登録され、処理が終わる（READY になる）のを 1 秒おきに最大 20 回まで待ち、最後に商品のメタフィールドへ参照を書き込みます。PDF の中身がアプリのサーバーを経由することはありません。

処理中はモーダルのボタンが無効になり、閉じることもできません。終わると画面上部に「PDF を登録しました」のトーストが出て、一覧の PDF 列にファイル名と容量が入ります。小さい PDF なら数秒で終わります。

失敗したときのメッセージは 3 種類あり、原因がそれぞれ違います。「アップロードに失敗しました」はブラウザからの送信そのものが通らなかったとき（通信の不調など）、「アップロードの処理が完了しませんでした」は送信は済んだが 20 秒待っても Shopify 側の処理が終わらなかったとき、「入力内容を確認してください」はファイル名が長すぎるなど送った値がはじかれたときです。どの場合もモーダルは開いたままなので、ファイルを選び直して「アップロード」を押し直せます。処理が終わらなかった作りかけのファイルはアプリが自動で削除するため、「ファイル」画面にゴミは残りません。

「PDF フリップブック」画面の差し替え

登録済みの行の「差し替え」を押すと、「PDF を差し替え」という見出しのモーダルが開きます。中身は登録時とまったく同じで、新しい PDF を選んで「アップロード」を押すだけです。

差し替えが終わると、商品ページのボタンは新しい PDF を開くようになります。注意したいのは、古い PDF が「コンテンツ > ファイル」に残り続けることです。アプリは「そのファイルが他の場所で使われていないか」を判断できないため、勝手には消しません。カタログを毎シーズン更新するストアでは、差し替えのたびに古いファイルが 1 つ増えていくので、年に一度は「ファイル」画面で整理するとよいでしょう。

「PDF フリップブック」画面の削除

登録済みの行の「削除」を押すと、「PDF を削除しますか？」の確認モーダルが開きます。本文に「商品ページのボタンが表示されなくなります。ファイル自体は「ファイル」に残ります。」とあるとおり、消えるのは商品との結び付きだけです。

「削除」を押すと「PDF を削除しました」のトーストが出て、その行は「—」と「PDF を登録」に戻ります。商品ページのボタンは、反映の遅れを経て消えます。

一時的にボタンを隠したいだけなら、削除ではなくテーマエディタでブロックを非表示にする方が手早く、元に戻すのも簡単です。削除は「この商品にはもう資料を付けない」と決めたときに使います。

「PDF フリップブック」画面の前へ・次へ

一覧の末尾に「前へ」「次へ」のボタンがあります。商品が 50 件を超えると「次へ」が押せるようになり、次の 50 件に移ります。1 ページ目では「前へ」が、最後のページでは「次へ」が無効になります。

検索で絞り込んでいるときも同じ単位でページが送られます。登録済みの商品だけを一覧にする絞り込みは無いので、数百点の商品の中から「どれに PDF を付けたか」を見直したいときは、ページを順に送るか、商品名で検索して確かめます。

「設定」画面のテーマに PDF フリップブックを追加

左のメニューの「設定」を開くと、最初に「テーマに PDF フリップブックを追加」のカードがあります。左上の矢印で主画面へ戻れます。

• テーマを選択 … ブロックを追加するテーマを選びます。公開中のテーマには「（公開中のテーマ）」が付いていて、最初から選ばれています。選択肢に出るのは公開中と未公開のテーマで、処理中のテーマやデモ用のテーマは出ません
• テーマに追加 … 押すと新しいタブでテーマエディタが開き、商品ページ（product テンプレート）のメインセクションの末尾にブロックが入った状態になります。位置はドラッグで動かせます。テーマエディタの右上の「保存」を押すまでテーマには書き込まれないので、開いたら必ず保存してください
• テーマをプレビュー … 選んだテーマの商品ページを新しいタブで開きます。未公開のテーマに入れたブロックの見え方を、公開前に確かめるときに使います

カードの下には 2 つのお知らせが出ます。1 つは、管理画面が日本語表示のときだけ出る黄色いバナーで、自動追加がうまくいかないテーマではご利用ガイドを見て手動で追加してほしい、という案内です。もう 1 つは青いバナーで、テーマエディタからブロックを手動で追加すれば商品ページの好きな位置にボタンを置ける、ということを伝えています。

「設定」画面の言語設定

「言語を選択」で管理画面の表示言語を選び、「変更する」を押すと、その場で切り替わります。

選べるのは、チェコ語、デンマーク語、ドイツ語、英語、スペイン語、フランス語、イタリア語、オランダ語、ノルウェー語（ブークモール）、ポーランド語、ポルトガル語（ブラジル）、ポルトガル語（ポルトガル）、フィンランド語、スウェーデン語、トルコ語、タイ語、日本語、簡体字中国語、繁体字中国語、韓国語の 20 言語です。

ここで選んだ言語は、使っているブラウザの中に保存されます。別のブラウザや別の PC から開くと、Shopify アカウントの言語に従った表示に戻ります。スタッフごとに違う言語で使いたいときに便利な反面、「自分の PC では日本語なのに、同僚の画面では英語だった」という状況も起こり得るので、共有の手順書を書くときは言語を明記しておくとよいでしょう。この設定が影響するのは管理画面だけで、お客様に見えるボタンやビューアの言語には関係しません。

「設定」画面のおすすめアプリ

言語設定の下には、当社が公開している他の Shopify アプリの一覧があります。名前を押すとアプリストアのページが新しいタブで開きます。右上の「×」で一覧を閉じることもできます。

「よくある質問」画面

当社が日本語で公開している FAQ を、アプリの管理画面の中で読める画面です。FAQ が 1 件以上公開されていて、かつ管理画面の言語が日本語のときだけ、左のメニューに「よくある質問」が現れます。英語などの他の言語で使っているときは、FAQ があってもメニューには出ません。この記事の執筆時点では FAQ を公開していないため、画面の画像はありません。問い合わせを受けた内容のうち、他のストアにも当てはまるものから順に追加していく予定です。

テーマへの追加

ブロックをテーマに入れる方法は 2 つあります。手早いのは「設定」画面の「テーマに追加」で、押すだけで商品ページのメインセクションにブロックが入った状態のテーマエディタが開きます。

テーマによっては自動追加が効かないことがあります。その場合はテーマエディタで商品ページ（「デフォルトの商品」テンプレート）を開き、「商品情報」セクションの「ブロックを追加」から「アプリ」タブを選び、「UR: PDF Flipbook Catalog」を押して手動で入れます。

どちらの方法でも、テーマエディタの右上の「保存」を押すまでブロックは確定しません。追加した直後は PDF を登録していない商品が表示されていることが多く、その場合はプレビューに何も出ません。プレビュー上部の商品の選択から、PDF を登録済みの商品に切り替えると、ボタンが現れて位置や見た目を確かめられます。

ブロックの置き場所に決まりはありませんが、お客様の目線を考えると「商品説明の直後」か「購入ボタンの直後」のどちらかが自然です。前者は「説明を読んで、もっと詳しく知りたい人がカタログを開く」流れ、後者は「買う前に仕様を確かめたい人がすぐ開ける」流れになります。

ストアフロントの見た目を変える

ボタンの見た目は、テーマエディタでブロックを選んだときに左に出る設定パネルで決めます。パネルは「ボタン設定」「余白設定」「その他の設定」の 3 つのグループに分かれ、合計 14 項目です。変更は右のプレビューに即座に反映され、「保存」を押すまでストアには出ません。

ビューアそのもの（暗くなった全画面とツールバー）の配色や文言を変える設定はありません。ツールバーの文言はお客様の言語に合わせて自動で切り替わり、ボタンの色をどう変えてもビューアの見た目は共通です。

ボタン設定

• ボタンの文言（既定: 空欄）… ボタンに表示する文字です。欄の下に「空欄にすると、お客様の言語に合わせた文言を表示します。」とあるとおり、空欄のままならお客様の言語に応じて 20 言語の既定文言（日本語なら「カタログを見る」、英語なら「View catalog」）が出ます。何か入力すると、その文言がすべての言語のお客様にそのまま出ます。「取扱説明書を見る」「仕様書を読む」のように資料の種類に合わせて変えたい日本語専用のストアでは入力し、多言語で公開しているストアでは空欄にしておくのが基本です
• ビューアにダウンロードボタンを表示する（既定: オン）… ビューアのツールバーの右側に「PDF をダウンロード」のボタンを出すかどうかです。オフにすると、ツールバーからボタンが消えて閲覧専用の見た目になります。ただし前述のとおり、PDF が公開 URL にある以上、保存を完全に防ぐものではありません
• ボタンのスタイル（既定: 塗りつぶし）… 「塗りつぶし」は背景を「ボタンの色」で塗り、文字とアイコンを「ボタンの文字色」で描きます。「枠線」は背景が透明になり、枠と文字とアイコンの色が「ボタンの色」になります。枠線を選んだとき「ボタンの文字色」は使われません。購入ボタンより目立たせたくないときは枠線、カタログが商品の主役に近いときは塗りつぶし、という使い分けが分かりやすいでしょう
• ボタンの配置（既定: 左）… ブロックの幅の中でボタンを左・中央・右のどこに寄せるかです。「ボタンを横幅いっぱいにする」がオンのときは意味を持ちません
• ボタンを横幅いっぱいにする（既定: オフ）… オンにすると、ボタンがブロックの幅いっぱいに広がります。多くのテーマでは「カートに追加」「今すぐ購入」が幅いっぱいなので、オンにするとそれらと同じ幅でそろいます

• ボタンの色（既定: #111111）… 塗りつぶしのときは背景色、枠線のときは枠と文字の色です。欄を押すとカラーピッカーが開き、「#」の右の欄に 16 進数を直接入力できます。テーマの購入ボタンと同じ色にするとボタンが 2 つ並んで見えて迷わせるので、少し明度を変えるか、枠線スタイルと組み合わせて区別を付けると整います
• ボタンの文字色（既定: #FFFFFF）… 塗りつぶしのときの文字とアイコンの色です。濃い色の背景には白、淡い色の背景には黒系を選ぶと読みやすくなります
• 文字サイズ（PC）（既定: 16px、10〜32px を 1px 刻み）… 画面幅 768px 以上での文字の大きさです
• 文字サイズ（スマートフォン）（既定: 15px、10〜32px を 1px 刻み）… 画面幅 768px 未満での文字の大きさです。PC と別々に持っているのは、スマートフォンでは横幅が限られ、同じサイズだと文言が 2 行に折り返しやすいためです

ボタンの左には本を開いたアイコンが常に付きます。アイコンだけを消す項目は無く、消したいときは後述の「追加CSS」で非表示にします。

余白設定

• 上の余白（PC）（既定: 16px）… 画面幅 768px 以上での、ブロックの上側の余白です
• 上の余白（スマートフォン）（既定: 16px）… 画面幅 768px 未満での、ブロックの上側の余白です
• 下の余白（PC）（既定: 16px）… 画面幅 768px 以上での、ブロックの下側の余白です
• 下の余白（スマートフォン）（既定: 16px）… 画面幅 768px 未満での、ブロックの下側の余白です

4 つとも -100〜100px の範囲を 2px 刻みで指定できます。マイナスにすると上や下の要素に食い込む形で近づけられるので、テーマのセクションが持つ余白と二重になって間延びしたときの調整に使えます。余白はブロックの外側に付くため、ボタンそのものの大きさは変わりません。

その他の設定の追加CSS

• 追加CSS（既定: 空欄）… CSS を直接書いて、ボタンの見た目を上書きする欄です。書いた CSS はこのブロックの範囲（ブロック ID 付きのセレクタの内側）にだけ効くように出力されるので、他のセクションの見た目を壊す心配がありません。安全のため「<」の文字だけは取り除かれます

欄の注記にあるとおり、ブラウザの検証機能でクラス名を確かめてから書きます。よく使うクラス名は 3 つで、ボタン本体が .ur-pdf-flipbook-button、左のアイコンが .ur-pdf-flipbook-button__icon、文字が .ur-pdf-flipbook-button__text です。たとえば角を丸くしてアイコンを消すなら、次のように書きます。

.ur-pdf-flipbook-button { border-radius: 999px; }
.ur-pdf-flipbook-button__icon { display: none; }

1 行目でボタンの角を完全な丸みにし、2 行目でアイコンを非表示にしています。ビューア（全画面の部分）はページのいちばん外側に生成されるため、この欄の CSS は届きません。ビューアの色を変えたい場合はテーマの theme.liquid などに書く必要がありますが、ツールバーの構造はアプリの更新で変わることがあるので、おすすめはしません。

商品ページでの見え方とビューアの操作

設定を保存すると、商品ページのブロックを置いた位置にボタンが出ます。PC の商品ページでは商品説明の下に、スマートフォンでは同じ位置に幅に合わせて表示されます。

ボタンを押すと、画面全体が暗くなり、中央に PDF が開きます。このときに初めて PDF の描画ライブラリと PDF 本体を読み込むため、最初の 1〜2 秒は「読み込み中…」と出ます。8 ページ程度のカタログなら、押してから約 2 秒で表紙が開きます。

ビューアの操作はツールバーに集まっています。

• ページをめくる … ツールバーの「前のページ」「次のページ」（左右の矢印）、キーボードの ← →、ページの端をドラッグ、またはページをタップします
• ページ番号 … ツールバーの中央に「現在のページ / 総ページ数」が出ます
• 拡大・縮小 … 虫眼鏡の「拡大」「縮小」で、等倍・1.5 倍・2 倍の 3 段階です。拡大中はページの中をスクロールして読みます
• ダウンロード … 下向き矢印の「PDF をダウンロード」です。新しいタブで開き、登録したときのファイル名で保存されます。設定でオフにしていれば出ません
• 閉じる … 右上の「閉じる」（×）、キーボードの Esc、またはページの外側の暗い部分をクリックします

見開きにするか 1 ページにするかは、ビューアの幅が 640px 以上あるかどうかで決まります（1 ページの最小幅 320px の 2 倍）。表紙は見開きでも 1 枚だけで表示され、2 ページ目からが見開きになります。1 ページの幅は最大 1000px までで、それより大きな画面では左右に余白ができます。

スマートフォンでは、同じ PDF が 1 ページずつ表示されます。タブレットを横向きにすると見開き、縦向きにすると 1 ページになるのも、幅の判定による正常な動作です。

PDF が読み込めなかったとき（ファイルが削除されていた、通信が途中で切れたなど）は、ビューアの中に「PDF を読み込めませんでした。」と「PDF を開く」のリンクが出ます。リンクを押すと PDF を新しいタブで直接開けるので、お客様が行き止まりになりません。

キーボードだけでも一通り操作でき、ビューアが開くと「閉じる」にフォーカスが移り、閉じると元のボタンへ戻ります。スクリーンリーダーには「PDF ビューア」という名前のダイアログとして伝わります。

用途別の設定の組み合わせ

14 項目のうち、見え方を大きく左右するのは「ボタン設定」の前半 5 つです。目的別に組み合わせの例を挙げます。

購入ボタンの主役感を邪魔したくないときは、「ボタンのスタイル」を枠線、「ボタンの配置」を右にします。白地に枠だけの控えめなボタンが商品説明の右下に収まり、「気になる人だけ開く」導線になります。

カタログが購買の決め手になる商品（家具や楽器のような高単価の商品）では、「ボタンを横幅いっぱいにする」をオンにし、「ボタンの色」をブランドカラーにします。「カートに追加」と同じ幅でそろい、色で役割が区別できます。

資料の種類を伝えたいときは「ボタンの文言」に「製品カタログを読む」「取扱説明書を見る」のように入れます。海外のお客様にも同じ文言が出ることだけ念頭に置いてください。

閲覧専用にしたいときは「ビューアにダウンロードボタンを表示する」をオフにします。完全な複製防止ではありませんが、「その場で読むためのもの」という意図は十分に伝わります。

コードで自作する場合

アプリを使わずに同じことをしようとすると、どこまで手間がかかるのかを見ておきます。ここでは「商品ごとの PDF を商品ページで開く」最小構成を、Shopify のメタフィールドと Liquid、それに JavaScript で組みます。

最初に、商品ごとに PDF を持たせる入れ物を用意します。Shopify 管理画面の「設定 > カスタムデータ > 商品」で、タイプが「ファイル」のメタフィールド定義（たとえばネームスペースとキーを custom.catalog_pdf）を作り、各商品の編集画面から PDF をアップロードします。これで商品ページの Liquid から PDF の URL を取れるようになります。

次に、商品テンプレートのセクションか、テーマの「カスタム Liquid」ブロックに、ボタンを描く Liquid を書きます。

{%- assign catalog = product.metafields.custom.catalog_pdf.value -%}
{%- if catalog != blank and catalog.url != blank -%}
  <button type="button" class="my-catalog-button" data-pdf-url="{{ catalog.url }}">
    カタログを見る
  </button>
  <div class="my-catalog-overlay" hidden>
    <button type="button" class="my-catalog-close">閉じる</button>
    <canvas class="my-catalog-canvas"></canvas>
    <div class="my-catalog-nav">
      <button type="button" data-step="-1">前へ</button>
      <span class="my-catalog-page"></span>
      <button type="button" data-step="1">次へ</button>
    </div>
  </div>
{%- endif -%}

メタフィールドが空の商品では何も出さないように、最初の if で値と URL の両方を確かめています。ボタンに data-pdf-url として PDF の URL を持たせ、描画用の canvas と前後のボタンを含むオーバーレイを、最初は hidden で置いておきます。

続いて、ボタンが押されたときに pdf.js を読み込み、1 ページずつ canvas に描く JavaScript です。pdf.js は Mozilla が公開しているライブラリで、ここでは CDN から読み込みます。

document.querySelectorAll('.my-catalog-button').forEach((button) => {
  button.addEventListener('click', async () => {
    const overlay = button.nextElementSibling;
    const canvas = overlay.querySelector('.my-catalog-canvas');
    const label = overlay.querySelector('.my-catalog-page');
    const pdfjs = await import('https://cdn.jsdelivr.net/npm/pdfjs-dist@4/build/pdf.min.mjs');
    pdfjs.GlobalWorkerOptions.workerSrc =
      'https://cdn.jsdelivr.net/npm/pdfjs-dist@4/build/pdf.worker.min.mjs';
    const doc = await pdfjs.getDocument(button.dataset.pdfUrl).promise;
    let current = 1;

    const render = async () => {
      const page = await doc.getPage(current);
      const viewport = page.getViewport({ scale: 1.5 });
      canvas.width = viewport.width;
      canvas.height = viewport.height;
      await page.render({ canvasContext: canvas.getContext('2d'), viewport }).promise;
      label.textContent = `${current} / ${doc.numPages}`;
    };

    overlay.querySelectorAll('[data-step]').forEach((nav) => {
      nav.addEventListener('click', () => {
        current = Math.min(doc.numPages, Math.max(1, current + Number(nav.dataset.step)));
        render();
      });
    });
    overlay.querySelector('.my-catalog-close').addEventListener('click', () => {
      overlay.hidden = true;
    });
    overlay.hidden = false;
    render();
  });
});

ボタンが押されたときに初めて import() で pdf.js を読み込んでいるのは、商品ページの初期表示を重くしないためです。getDocument で PDF を開き、render 関数が現在のページを canvas に描きます。「前へ」「次へ」は current を増減して描き直すだけの単純な作りです。

ここまでで「商品ごとの PDF を商品ページで 1 ページずつ読む」最小限の動作は手に入ります。ただし、実際にストアで使える品質にするには、まだ次の仕事が残っています。

• めくる演出と見開き … 上のコードはページを差し替えるだけで、本をめくる動きも、PC での見開き表示もありません。めくり演出のライブラリを追加し、画面幅に応じて 1 ページと 2 ページを切り替える処理を書く必要があります
• 拡大・縮小とスクロール … 拡大率を変えると canvas のサイズも変わるため、オーバーレイの中でのスクロール位置の管理が要ります
• 多言語 … 「カタログを見る」「前へ」「次へ」「閉じる」を Liquid の翻訳（| t）に置き換え、テーマの各言語ファイルに文言を足す作業が、対応する言語の数だけ発生します
• 全画面の作法 … Esc で閉じる、開いている間は背面をスクロールさせない、フォーカスをビューアの中に留める、スクリーンリーダーにダイアログとして伝える、といったアクセシビリティの処理が未実装です
• 外部 CDN への依存 … pdf.js を CDN から読むと、その CDN の障害や広告ブロッカーの影響を受けます。テーマのアセットに同梱するなら、ライブラリの更新をテーマ側で追う必要があります
• 登録作業の動線 … 商品ごとの PDF は、Shopify の商品編集画面を 1 つずつ開いてアップロードすることになります。どの商品に付けたかの一覧は作れません
• テーマ更新への追随 … テーマを新しいバージョンに差し替えるたびに、Liquid と JavaScript を移植し直すことになります

「シンプルPDFカタログ」は、この一覧をすべて片付けた状態で提供しています。描画ライブラリとめくり演出はアプリの資産として同梱し、見開きと 1 ページの切り替え、3 段階の拡大、20 言語の文言、キーボードとフォーカスの管理、エラー時の逃げ道までを 1 つのブロックに収めています。月額 4.99 ドルは、この実装と保守を自分で抱え続ける手間と比べて判断してください。

カタログ作成アプリ・標準機能との違いと使い分け

Shopify のアプリストアで「PDF」「フリップブック」と検索すると、Real3D: Flipbook & PDF Catalog、K:PDF Viewer, Flipbook+Catalog、GA: PDF Catalog + PDF FlipBook、Simple PDF Flipbook など、同じく PDF をめくって読ませるアプリが見つかります。それぞれの細かな違いは別の記事に譲り、ここでは「どういう役割の違いがあり、組み合わせるならどう設定するか」をまとめます。

「作って埋め込む」と「商品ごとに見せる」は別の仕事

カタログ系のアプリの多くは、アプリの中にカタログを 1 冊作り、その埋め込みコードやブロックを任意のページに置く発想です。ストア全体のラインナップをまとめた総合カタログを、トップページや専用の固定ページで見せるのに向いています。ページの上に商品へのリンクを置いて、カタログからそのまま商品ページへ送る機能を持つものもあります。

「シンプルPDFカタログ」はその逆で、商品 1 つに資料 1 冊を結び付け、商品ページの中だけで完結させます。総合カタログを作る機能は無い代わりに、登録は商品一覧から行え、商品ごとの取扱説明書や仕様書といった「その商品を見ている人にだけ必要な資料」を、迷いなく出せます。

両方を入れるときの設定手順

総合カタログを固定ページに置き、商品ページには商品別の資料を置く、という併用は相性がよい組み合わせです。その場合は次の順で設定すると、お客様が混乱しません。

1. 総合カタログ側のアプリは、トップページや「カタログ」の固定ページにだけ設置し、商品テンプレートには置かないことにします。商品ページに「カタログ」と書かれたボタンが 2 つ並ぶと、どちらを押せばよいか分からなくなります
2. 「シンプルPDFカタログ」の「ボタンの文言」には、資料の種類が伝わる言葉（「この商品の取扱説明書」「仕様書を読む」など）を入れます。総合カタログ側のボタンと言葉を分けることで、役割の違いが一目で分かります
3. 「ボタンのスタイル」は、総合カタログ側のボタンが塗りつぶしなら枠線に、というように逆のスタイルを選びます。見た目の差が役割の差として伝わります
4. 商品ページのフッターやヘッダーのメニューから総合カタログの固定ページへリンクを張っておくと、商品別の資料を読んだお客様が、ラインナップ全体へも自然に移動できます

どちらを先に入れるかの判断

手元にある資料の形で決めるのが早道です。すでに商品ごとに PDF が分かれている（メーカーから取扱説明書が製品単位で提供されている、シリーズごとに仕様書がある）なら、「シンプルPDFカタログ」から始めると、登録するだけで今日中に商品ページへ出せます。逆に、手元にあるのが全商品を収めた 1 冊の総合カタログだけなら、それを分割するより総合カタログ系のアプリで 1 冊のまま見せる方が早く、後から商品別の資料が増えてきた段階でこのアプリを足すのが自然です。

アプリを使わず標準機能で済むケース

「読ませる」より「渡す」が目的なら、アプリは要りません。「コンテンツ > ファイル」に PDF をアップロードし、その URL を商品説明の中のリンクにすれば、お客様はクリックで PDF を開けます（ブラウザの PDF ビューアが開くか、ダウンロードされるかは端末次第です）。保証書の PDF や、印刷して使う組み立て図のように「手元に置いてもらう」資料はこれで足ります。商品ページを離れずに、紙面のレイアウトのまま読んでほしい資料のときに、このアプリの出番になります。

まとめ

「シンプルPDFカタログ｜お手軽PDFフリップブック表示」は、商品ごとに PDF を 1 冊登録し、商品ページのボタンから全画面のフリップブックで読ませる Shopify アプリです。管理画面でやることは商品一覧から PDF を登録・差し替え・削除することだけで、見た目の 14 項目はテーマエディタに集めてあります。

• 商品一覧の行ごとに PDF を登録でき、未登録の商品には何も出ません
• PC は見開き、スマートフォンは 1 ページで、拡大・ダウンロード・キーボード操作に対応します
• PDF は Shopify のファイルに置かれ、めくる処理はブラウザで完結するので、アプリのサーバーが止まっても表示は続きます
• 商品ページの初期表示で読むのは 10 KB ほどで、ページの速度を落としません
• 管理画面・ボタン・ビューアの文言は 20 言語に対応しています

制約もはっきりしています。1 商品 1 冊、20 MB まで、商品ページ専用、ダウンロードの完全な禁止はできない、反映に時間がかかることがある、の 5 つです。この条件に収まる資料を持っている商品があるなら、7 日間の無料体験のあいだに 1 商品だけ登録して、商品ページでめくってみてください。紙のカタログをそのまま売り場に置いたときの手応えが分かります。

おすすめ Shopify アプリ

当社では、商品ページの情報を厚くするアプリや、店舗運営の手間を減らすアプリを多数公開しています。PDF カタログと組み合わせやすいものを挙げます。

• シンプル型番・JANコード表示｜お手軽SKU・商品コード表示 … 商品ページに型番と JAN コードを表示します。カタログに載っている型番と商品ページの型番が並ぶので、お客様が照合しやすくなります
• シンプル再入荷日表示｜入荷予定日・在庫復活日告知 … 売り切れ商品のページに入荷予定日を出します。カタログを読んで欲しくなった商品が欠品していても、待てる見込みを伝えられます
• シンプルQRコード｜お手軽QRコード作成・印刷アプリ … 商品ページの QR コードを作って印刷できます。紙のカタログに QR コードを載せ、商品ページで同じカタログをめくれる形にすると、紙と Web が往復できます
• シンプル栄養成分・アレルギー表示｜食品表示 … 商品ページに栄養成分とアレルゲン情報を出します。食品のカタログと合わせて、法令で求められる表示も商品ページで完結させられます
• シンプルメガメニュー｜お手軽ヘッダー階層ナビゲーション … 画像付きの階層ナビゲーションをコードなしで作れます。シリーズやカテゴリの多いカタログ型のストアで、商品ページへの入口を整理できます