straw_manテンプレートlaymicビューワー関連設定解説記事

straw_manテンプレートにおけるlaymic関連部分の解説記事です。

laymicのAPIドキュメントというより、ユーザー側が使う上で便利な情報を記載することに注力しました。

 

この記事では「テンプレートcssの自由記述領域」という記述が多々ありますが、これは要するに「cssの一番下」ということです。

スポンサーリンク

基本的な使用方法

ライトボックス関連と同じく、導入設定は最初から済ませてあるので、記事内部に呼び出し記述を行うだけで表示されるようになっています。

 

その際の呼び出しコードはこういったもの。

<div class="laymic_template" data-page-width="600" data-page-height="800" data-viewer-id="manga1">
  <img data-src="1枚目画像url">
  <img data-src="2枚目画像url">
  <img data-src="3枚目画像url">
  <!-- 以下、追加したい画像の数だけ書き加える -->
</div>
<button class="laymic_opener" type="button" data-for="manga1">
  ここをクリックでビューワー展開
</button>

 

data-page-widthには原稿画像解像度横幅を、
data-page-heightには原稿画像解像度縦幅を指定するようにしてください。

data-viewer-iddata-forは同じ値である必要があります。また、同じページに複数のlaymicコードを登録したい場合は、それぞれ別の値を持たせる必要があります。

 

複数登録例

<!-- 漫画の一話 -->
<div class="laymic_template" data-page-width="600" data-page-height="800" data-viewer-id="manga1">
  <img data-src="1枚目画像url">
  <img data-src="2枚目画像url">
  <img data-src="3枚目画像url">
  <!-- 以下、追加したい画像の数だけ書き加える -->
</div>

<!-- 漫画の二話 -->
<div class="laymic_template" data-page-width="600" data-page-height="800" data-viewer-id="manga2">
  <img data-src="1枚目画像url">
  <img data-src="2枚目画像url">
  <img data-src="3枚目画像url">
  <!-- 以下、追加したい画像の数だけ書き加える -->
</div>

<button class="laymic_opener" type="button" data-for="manga1">
  ここをクリックで一話展開
</button>

<button class="laymic_opener" type="button" data-for="manga2">
  ここをクリックで二話展開
</button>

 

漫画ページ画像指定に上限数はありません。

が、実用上はある程度小分けにしたほうが読みやすくなるとは思います。

デフォルト設定の指定について

先程書いた表記例ではなにやら、
data-page-widthdata-page-heightという記述がなされていました。

しかし、実を言えばこの二つの記述は省略可能であったりします。

 

必要最低限のlaymic登録コードサンプル

<div class="laymic_template" data-viewer-id="manga1">
  <img data-src="1枚目画像url">
  <img data-src="2枚目画像url">
  <img data-src="3枚目画像url">
</div>

<button class="laymic_opener" type="button" data-for="manga1">
  ここをクリックで一話展開
</button>

こういったようにオプション指定を省略した際には、デフォルト設定が使用される仕組みになっているからです。

 

そのデフォルト設定がstraw_manテンプレート内でなされている箇所は、
# laymic.js読み込みここからで検索するとすぐ見つかります。

laymic options設定部位参考スクショ

具体的にはこのスクショに映っている箇所がそうです。

 

この部分にどういう内容を指定できるかは、このページ内のjavascript側におけるオプション引数紹介部分に譲りますが。

 

pageWidthpageHeightの二つだけは、貴方の漫画原稿解像度に合わせて指定しておくことを強くオススメします。

ここの指定さえすれば、
毎回data-page-widthdata-page-heightを長々と打ち込まなくてもよくなるので……。

 

一応補足しておきますが、こういった部分での数字指定は必ず半角英数を使うように注意してください。

全角数字で打ち込むと十中八九上手く動きませんので、あしからず。

srcでなくdata-srcでの指定をおすすめする理由

.laymic_templateでの画像指定時には、
<img src="">という記法と
<img data-src="">という記法、両方を使えるようにしています。

<!-- data-srcバージョン -->
<div class="laymic_template" data-viewer-id="manga1">
  <img data-src="1枚目画像url">
  <img data-src="2枚目画像url">
  <img data-src="3枚目画像url">
</div>

<!-- srcバージョン -->
<div class="laymic_template" data-viewer-id="manga1">
  <img src="1枚目画像url">
  <img src="2枚目画像url">
  <img src="3枚目画像url">
</div>

この二つの記述、最終的な結果としては同一内容。

しかし、srcの側には致命的な欠点がありますので、制作者としてはdata-srcの使用をデフォルトとして考えています。

 

それは「src指定の場合、ページ読み込みと同時に画像が読み込まれる」というブラウザの仕様が関係するもの。

laymicビューワーではページ読み込み軽量化のため「ビューワーが開かれるまで原稿画像を読み込まない」ようにしているのですが、src指定の場合はそれが無駄になってしまうのです。

 

data-srcならばページ読み込みと同時に画像読み込みが始まることはなく、laymic側で処理される上ではsrcと同等。

そのため、laymic制作者としてはlaymic登録用途としてはdata-src属性を使用することを強く推奨しています。

「一瞬表示されて消える現象」を強制的に無くす

どうしてもsrc属性を使いたい場合や、このあとのlaymic内ページに使える雛形セットあたりの記述を使った場合、強引にちらつきを無くしたい場合が出てくるでしょう。

 

その場合には、以下のような記述を行うようにすればオーケーです。

<div class="laymic_template" data-viewer-id="manga1" style="display:none;">
  <!-- 画像やらページやらがここに入る -->
</div>

 

ただ単に、style="display:none;"をつけるだけ。

これで「laymic cssが読み込まれるまでlaymic_templateが表示されてしまう」問題もなくなり、ちらつきは改善するはずです。

サムネイル画像を別途指定する

laymic v2アップデートで「サムネイル機能で表示する画像を別途指定する」機能を追加しました。

主に以下のような状況を対処するためのものです。

 

  • 適切なサムネイル画像サイズで読み込み速度を向上する
  • html要素を挿入したページの場合での「サムネイルサイズでもクリックポイントが生きている」不具合の対処

 

気になる指定方法は以下のようなもの。

<div class="laymic_template" data-viewer-id="manga1">
  <img data-src="1枚目画像url" data-thumb-src="1枚目サムネイル画像url">
  <img data-src="2枚目画像url" data-thumb-src="2枚目サムネイル画像url">
  <img data-src="3枚目画像url" data-thumb-src="3枚目サムネイル画像url">
</div>

 

このdata-thumb-srcによる指定はlaymic_template直下の要素全てに指定可能です。

つまりは<img>以外のhtml要素にも指定可能だということです。

laymicオプション引数紹介

html/javascriptそれぞれの側から指定できる引数名リストです。

指定した値の優先度は「html側 > javascript側 > laymic初期設定」となっています。

javascript側におけるオプション引数紹介

デフォルト設定の指定についてで紹介した部分に指定できるオプション引数リストです。

名前 初期値 説明
viewerId "laymic" インスタンスと紐付けられる文字列
pageWidth 720 原稿画像横幅
pageHeight 1024 原稿画像縦幅
vertPageMargin 10 縦読み時のページ間余白ピクセル数値
horizPageMargin 0 横読み時のページ間余白ピクセル数値
viewerPadding 10 漫画ページ表示コンテナ周囲の余白ピクセル数値
viewerDirection "horizontal" 漫画を読み進める方向の初期値指定。
横読みなら"horizontal"
縦読みなら"vertical"
isLTR false 左から右へと流れていく表示形式ならtrue
isVisiblePagination false ページ送りボタンを表示する設定。
モバイル端末だと強制的に無効化
isFirstSlideEmpty true 横読み時一ページ目を空白として空ける設定
isAppendEmptySlide true 横読み時 + ページ数が偶数の場合最終ページに空白を追加する
isInstantOpen true location.hashviewerIdが一致した場合、ページ読み込み直後にビューワーを開く機能。
falseで無効化
progressBarWidth "auto" 進捗バーの太さを変更する。
使用できる値は"auto", "none", "tint", "medium", "bold"の五つ

 

指定例

new laymic.LaymicApplicator(laymicTemplateSelector, {
  // 原稿画像横幅
  pageWidth: 690,
  // 原稿画像縦幅
  pageHeight: 976,
  // ページの流れ方設定
  // `true`ならば左から右へとページが流れる
  isLTR: true,
  // 1p目を空白にして左始まりとする設定
  isFirstSlideEmpty: false,
  // ページ送りボタン表示設定
  isVisiblePagination: false,
  // ビューワー表示領域周囲の余白
  viewerPadding: 20,
  // ビューワーの初期方向設定
  viewerDirection: "horizontal",
  // ページ読み込み直後にビューワーを展開する機能設定
  isInstantOpen: true,
  // ページ送りボタン表示設定
  isVisiblePagination: true,
  // プログレスバー表示の太さ
  progressBarWidth: "bold",
})

html指定時におけるオプション引数紹介

html側から指定できるオプション引数リストです。

ほとんどの引数はjavascript側記述とそう変わりません。

名前 説明
dir ltr設定を有効にするには"ltr"を指定。
isLTRtrueである場合と同等の設定)
data-viewer-id viewerIdと同様
data-page-height pageHeightと同様
data-page-width pageWidthと同様
data-viewer-direction viewerDirectionと同様
data-is-visible-pagination isVisiblePaginationと同様
data-is-first-slide-empty isFirstSlideEmptyと同様
data-is-append-empty-slide isAppendEmptySlideと同様
data-is-instant-open isInstantOpenと同様
data-vert-page-margin vertPageMarginと同様
data-horiz-page-margin horizPageMarginと同様
data-viewer-padding viewerPaddingと同様
data-progress-bar-width progressBarWidthと同様

 

指定例

<!-- 自動改行設定が有効な際の書き方 -->
<div class="laymic_template" data-viewer-id="manga1" data-page-width="800" data-page-height="600" data-is-visible-pagination="true" data-is-first-slide-empty="false" data-viewer-padding="20" data-progress-bar-width="bold" dir="ltr">
  <img data-src="1枚目画像url">
  <img data-src="2枚目画像url">
  <img data-src="3枚目画像url">
</div>

<!-- 改行設定が`HTMLタグのみ`の場合はこう書いても良い -->
<div class="laymic_template"
  data-viewer-id="manga1"
  data-page-width="800"
  data-page-height="600"
  data-is-visible-pagination="true"
  data-is-first-slide-empty="false"
  data-viewer-padding="20"
  data-progress-bar-width="bold"
  dir="ltr">
  <img data-src="1枚目画像url">
  <img data-src="2枚目画像url">
  <img data-src="3枚目画像url">
</div>

laymicビューワー展開時のキーボードショートカット

laymic v2アップデートで追加されたキーボードショートカット一覧です。

共通

キー名 効果
Escape ビューワー、展開中モーダル要素を閉じる
Shift + Space, PageUp 前のページへ
Space, PageDown 次のページへ
D 縦読み/横読み切り替え
V ビューワーUI表示切り替え
P 設定画面表示切り替え
F フルスクリーン切り替え
T サムネイル画面表示切り替え
H ヘルプ表示切り替え
Z ズーム切り替え(モバイルブラウザでは無効)
Tab ビューワーUIを表示(ブラウザデフォルトのフォーカス移動も行う)

 

横読み時

キー名 効果
ArrowRight 前のページへ
ArrowLeft 次のページへ

 

横読みLTR設定時

キー名 効果
ArrowLeft 前のページへ
ArrowRight 次のページへ

 

縦読みモード固有

キー名 効果
ArrowUp 前のページへ
ArrowDown 次のページへ

 

ズーム中固有

キー名 効果
ArrowUp 上へ少しスクロール
ArrowDown 下へ少しスクロール
ArrowLeft 左へ少しスクロール
ArrowRight 右へ少しスクロール
Shift + Space, PageUp 上へ大きくスクロール
Space, PageDown 下へ大きくスクロール

※モバイル端末ではズーム時ショートカットキーは使用できません。

laymic内ページに使える雛形セット

雛形テンプレート仕様例スクショ

(画像は雛形セット使用時の参考スクショ)

 

laymicには「HTML要素を一つのページとして掲載する」機能を持たせておいたので、商業サイトによくある「話末にアンケートリンク付き画像を貼る」といった表示も出来るように作っています。

が、「機能は用意したから後はセルフで使ってね!」というのは不親切だろうと思ったので、その機能用の雛形を用意しておきました。

 

cssバリエーションは以下の通り。

種類 機能
固定表示型 シンプルながら大雑把な固定配置を行う。
表示調整などは行わないため、表示領域依存での表示崩れが起きる可能性あり
縮小表示型 表示領域に合わせて内容を縮小表示する。
「最大サイズに対する現在縮小率」が適用されるので、場合によっては小さくなりすぎるかも

 

これだけだとわかりづらいかもしれないので、サンプルページを用意しました。

PCをお使いの場合は、サンプルサイトを開きながらウィンドウサイズをぐりんぐりん変えると違いがわかりやすいかと思われます。

 

やっつけコードなので、二つを併用することはできません

どちらも一長一短あるので、表示したい内容に応じて選択してください。

 

ちなみに、laymic v1で縮小表示型を使用することはできませんので、あしからず。

固定表示型雛形cssコード

固定表示型はシンプルな仕組みなので、表示内容と表示環境の組み合わせによっては表示崩れが発生します。

一ページ内での表示内容を少なくするなど、表示崩れしにくいhtml構造にすると良いでしょう。

 

導入方法は、まず以下コードをテンプレートcssの自由記述領域にコピペします。

/* laymic 固定表示型雛形cssここから */
.laymic_page_wrapper {
  /* 原稿画像のアスペクト比をここに入力 */
  --page-aspect-height: 488;
  --page-aspect-width: 345;
  /* 2p表示時の表示横幅 */
  --slide-width: calc(50vw - var(--viewer-padding));
  width: 100%;
  height: 100%;
  display: flex;
  flex-flow: column nowrap;
  overflow: hidden;
  max-height: calc(var(--slide-width) * var(--page-aspect-height) / var(--page-aspect-width));
  color: #fafafa;
  justify-content: center;
  align-items: center;
}

.laymic_isVertView .laymic_page_wrapper,
.laymic_isSingleSlide .laymic_page_wrapper {
  --slide-width: calc(100% - var(--viewer-padding) * 2);
}

/* リンクカラー変更 */
.laymic_page_wrapper a {
  color: #fafafa;
}

.laymic_page_wrapper br {
  display: none;
}

.laymic_page_wrapper span {
  margin: .5rem 0;
}

/* 白背景とするやつ */
.bg_white {
  background: #fff;
  color: #333;
}

.bg_white a {
  color: #333;
}

/* 横長要素複数を想定したラッパー */
.laymic_page_landscapes,
/* 縦長要素複数を想定したラッパー */
.laymic_page_portraits {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  /* 入れ子要素ごとの区切り余白 */
  margin: 1rem 0;
}

.laymic_page_landscapes {
  flex-flow: column nowrap;
}

.laymic_page_landscapes:first-of-type {
  justify-content: flex-end;
}

.laymic_page_landscapes:last-of-type {
  justify-content: flex-start;
}

.laymic_page_landscapes:only-of-type {
  justify-content: center;
}

.laymic_page_portraits:first-of-type {
  align-items: flex-end;
}

.laymic_page_portraits:last-of-type {
  align-items: flex-start;
}

.laymic_page_portraits:only-of-type {
  align-items: center;
}
/* laymic 固定表示型雛形cssここまで */

 

さらに、コピペしたcssコード内
.laymic_page_wrapper部分の下記変数を、貴方の原稿サイズに応じた適切な値に書き換える必要が有ります。

  • --page-aspect-height: 原稿解像度アスペクト比の縦数値
  • --page-aspect-width: 原稿解像度アスペクト比の横数値

 

アスペクト比計算ツールなどを用いて、原稿画像のアスペクト比を計算・入力してください。

縮小表示型雛形cssコード

縮小表示型はだいたいの表示環境において縮小表示を行うので、最大サイズで表示されることのほうが少ないです。

そのため、この雛形コードを用いてGoogle Adsenseなどの広告を表示させた場合、「広告表示を改変してはいけない」規約に引っかかる恐れがあります。

 

なので、縮小表示型を使用する場合、laymic内で広告を表示することは避けるように注意してください。

 

導入方法は、以下コードをテンプレートcssの自由記述領域にコピペするだけ。

アスペクト比を手動入力する必要はありません。

/* laymic 縮小表示型雛形cssコードここから */

/* 固定幅で描画してからscaleをかける */
.laymic_page_wrapper {
  width: var(--page-max-width);
  height: var(--page-max-height);
  transform: scale(var(--page-scale-ratio));
  flex: 0 0 auto;
}

/* こちらが実質的なpage wrapper */
.laymic_page_inner_wrapper {
  display: flex;
  flex-flow: column nowrap;
  width: 100%;
  height: 100%;
  color: #fafafa;
}

.laymic_isVertView .laymic_page_wrapper
.laymic_isSingleSlide .laymic_page_wrapper {
  --slide-width: calc(100% - var(--viewer-padding) * 2);
}

/* リンクカラー変更 */
.laymic_page_wrapper a {
  color: #fafafa;
}

.laymic_page_wrapper br {
  display: none;
}

.laymic_page_wrapper span {
  margin: .5rem 0;
}

/* 白背景とするやつ */
.bg_white {
  background: #fff;
  color: #333;
}

.bg_white a {
  color: #333;
}

/* 横長要素複数を想定したラッパー */
.laymic_page_landscapes,
/* 縦長要素複数を想定したラッパー */
.laymic_page_portraits {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  /* 入れ子要素ごとの区切り余白 */
  margin: 1rem 0;
}

.laymic_page_landscapes {
  flex-flow: column nowrap;
}

.laymic_page_landscapes:first-of-type {
  justify-content: flex-end;
}

.laymic_page_landscapes:last-of-type {
  justify-content: flex-start;
}

.laymic_page_landscapes:only-of-type {
  justify-content: center;
}

.laymic_page_portraits:first-of-type {
  align-items: flex-end;
}

.laymic_page_portraits:last-of-type {
  align-items: flex-start;
}

.laymic_page_portraits:only-of-type {
  align-items: center;
}
/* laymic 縮小表示型雛形cssコードここまで */

雛形htmlテンプレート

雛形CSS二種のうちどちらかを導入できたならば、
あとは.laymic_template要素内で画像登録と同じようにhtml記述を加えればオッケーです。

こちらも幾つかバリエーションを用意しておいたので、使用したいシチュエーションに応じて好きなものを選んで使用してください。

 

ページ中央に広告を一つ貼るケース

雛形テンプレート1参考スクショ

<div class="laymic_page_wrapper">
  <div class="laymic_page_inner_wrapper">
    <div class="laymic_page_landscapes">
      <span>画像説明文</span>
      <!-- 広告/画像貼り付けスペース -->
    </div>
  </div>
</div>

 

ページ中央に広告を一つ貼るケース(白背景)

雛形テンプレート2参考スクショ

<div class="laymic_page_wrapper bg_white">
  <div class="laymic_page_inner_wrapper">
    <div class="laymic_page_landscapes">
      <span>画像説明文</span>
      <!-- 広告/画像貼り付けスペース -->
    </div>
  </div>
</div>

 

ページ上部に単体画像、ページ下部に横長バナー画像複数のケース

雛形テンプレート3参考スクショ

<div class="laymic_page_wrapper">
  <div class="laymic_page_inner_wrapper">
    <div class="laymic_page_landscapes">
      <span>画像説明文</span>
      <!-- 広告/画像貼り付けスペース -->
    </div>
    <div class="laymic_page_landscapes">
      <span>横長バナー説明文</span>
      <!-- 横長複数画像貼り付けスペース -->
    </div>
  </div>
</div>

 

ページ上部に縦長画像複数、ページ下部に単体画像のケース(説明文なし)

雛形テンプレート4参考スクショ

<div class="laymic_page_wrapper">
  <div class="laymic_page_inner_wrapper">
    <div class="laymic_page_portraits">
      <!-- 縦長複数画像貼り付けスペース -->
    </div>
    <div class="laymic_page_landscapes">
      <!-- 広告/画像貼り付けスペース -->
    </div>
  </div>
</div>

雛形htmlテンプレートの記述例

話末に単体画像を貼る場合を想定。

<div class="laymic_template" data-viewer-id="manga1" style="display:none;">
  <img data-src="1枚目画像url">
  <img data-src="2枚目画像url">
  <img data-src="3枚目画像url">
  <div class="laymic_page_wrapper">
    <div class="laymic_page_inner_wrapper">
      <div class="laymic_page_landscapes">
        <span>画像説明文</span>
        <!-- 広告/画像貼り付けスペース -->
        <img src="四角画像url">
      </div>
    </div>
  </div>
</div>

雛形htmlテンプレートクラス名説明

要するにこういう効果なので、各自選んで使ってくれ〜〜〜〜〜!!!

クラス名 説明
laymic_page_wrapper 各ページの親要素となるクラス名
laymic_page_inner_wrapper 内部要素を整列させるための内部ラッパー
bg_white つけた要素が白背景になるクラス名
laymic_page_landscapes 横長画像を縦に並べることを想定したクラス名。画像をひとつだけ入れると単体表示可能
laymic_page_portraits 縦長画像を横に並べることを想定したクラス名。これいる?

straw_manにおけるlaymicのアップデート方法

最後に、すでにstraw_manを使用している方がlaymicを最新版へとアップデートするための方法を解説しておきます。

# laymic.js読み込みここからというコメントのしばらく後にある以下url指定部分を書き換えればオーケーです。

 

書き換え前

        [
          "https://blog-imgs-107.fc2.com/d/e/t/dettalant/laymic_v1_0_0_min.css",
          "https://blog-imgs-107.fc2.com/d/e/t/dettalant/laymic_iife_v1_0_0_min.js",
        ],

書き換え後

        [
          "https://cdn.jsdelivr.net/npm/@dettalant/laymic@2.2.2/dist/laymic.min.css",
          "https://cdn.jsdelivr.net/npm/@dettalant/laymic@2.2.2/dist/laymic.iife.min.js",
        ],

 

コピペ時に別の行をまとめて消したりすると、十中八九laymicが上手く動かなくなるので慎重に上書きしてね! ヨロシク!