Reiketsu.netをご覧の皆さんこんにちは。このサイトのデザインやコーディングを行っているaotoです。
今回はReiketsu.netに冷血さんに内緒で（リリースノート投稿をしておいて内緒もクソもありませんが…）こっそり自分用に実装した、コンボページを綺麗に印刷できるコンボプリント機能のリリースノート投稿をしたいと思います。
コンボプリント機能の概要
コンボプリント機能はその名の通り、Reiketsu.netの各キャラクターのコンボ投稿ページを印刷用レイアウトに変換・綺麗に印刷するための機能になります。
この機能無しでコンボ投稿ページを印刷しようと思うと、SNS共有ボタンやサイト用のナビゲーション等不必要なものまで一緒に印刷を行ってしまいます。レイアウトも印刷用に最適化されている訳ではありませんので、お世辞にも綺麗に印刷できるとは言えませんでした。
これを印刷実行時に印刷に不要な要素を排除し、レシピの分断を防ぎつつグループ見出しで区切るなどレイアウトを印刷物向けに最適化するのがコンボプリント機能になります。
コンボプリント実装の背景
コンボ投稿は練習中や対戦中にその場で開くものであると同時に、繰り返し見返して体に覚えさせる資料でもあります。
サイト画面は情報量が多く、目次・サイドバー・絞り込み・各種UIなど、練習や確認のときには不要な要素も含まれます。一方で、紙に印刷できると次のような使い方がしやすくなります。
- 練習中に机の上でパッと確認でき、紙なのでディスプレイや壁に貼り付けることもできる
- 紙なのでボールペンや鉛筆で他に好きな情報を書き込める
- オフライン環境でもコンボレシピを参照できる
今回の印刷機能は、コンボレシピそのものに必要な情報だけを残して読みやすく出力することを目的にしています。
実際の印刷プレビュー画面
ご覧のようにヘッダーやサイドメニューといった不要な部分が排除され、純粋にコンボレシピのみが綺麗にレイアウトされています。印刷は表示した状態のまま不要な要素を排除した状態で行われますので、例えば初心者おすすめコンボや必修コンボだけを印刷するといった事も可能です。
改ページの設計
補助コードにより、1コンボ（1レシピ）の途中でページが分断されないよう設計しています。
また、2つ目以降のグループ見出し（例：インパクト壁やられ時限定コンボ）の直前で改ページされるので、セクションごとに区切られた資料として読みやすくなります。
この改ページ機能は今回の機能実装で最もこだわった点です。
折角綺麗にプリントアウトできても、コンボが途中で途切れていたり資料として見にくければ無意味です。
最初このコンボプリント機能は純粋に不要な要素を非表示にするだけだったのですが、最終的に上記のこだわりからプリントアウト専用のレイアウトを新規に構築・プレビュー時に分岐させる設計にしました。
〆技・備考の見え方
画面上では「〆」を押すと候補一覧が開きますが、印刷時は備考欄の下に常に展開されます。
この仕様は悩みましたが、最終的にレシピ行には「〆」だけを表示し、詳しい候補は備考の下にまとめて掲載するという紙の上でも読み返しやすい構成にしました。
絞り込み・表示切替はそのまま反映
印刷はその時点で画面に表示されている内容がそのまま出力されます。印刷ボタンを押す直前の状態がそのまま印刷される、というイメージです。
例えば「必修コンボのみ」に絞り込んだ状態で印刷すれば、条件に合うコンボだけ（必修コンボのみ）が印刷されます。コマンド表示・技名表示の切り替えも同様で、どちらの表記で見ているかがそのまま反映されます。
コンボプリント機能対象ページ
コンボプリント機能という名称通り、現時点では各操作タイプ（クラシック・モダン）の各キャラクターコンボまとめ投稿ページのみが対象となっています。トップページや用語集など、コンボ記事以外のページでは印刷用レイアウトは適用されません。
ご要望があれば他ページでの実装も考えます。
コンボプリント機能の使い方
コンボプリント機能は特別な印刷ボタンは設けておらず、各ブラウザの印刷機能をそのまま使用しています。
コンボ投稿ページを開いている状態で、必要なら絞り込みや表示切替を設定してからブラウザの印刷機能を使ってください。プレビュー生成時にページのレイアウトが印刷用のものに自動変換されます。
PC
- Windows：Ctrl + P
- Mac：⌘ + P
スマートフォン・タブレット
ブラウザの「共有」またはメニューから「印刷」を選びます。機種やブラウザによってメニューの場所は異なりますが、コンボページでも同じ印刷用レイアウトが適用されます。
以上、コンボプリント機能のリリースノートでした。
