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

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

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

スポンサーリンク

基本的な使用方法

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

 

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

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

 

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

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

 

複数登録例

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

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

<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 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が表示されてしまう」問題もなくなり、ちらつきは改善するはずです。

合計ページ数が奇数である場合の動作について

合計ページ数(isFirstSlideEmpty設定で追加される空ページを含む)が奇数でいて見開き2p表示の場合、laymicビューワーは少し特殊な挙動を見せます。

 

2pずつ表示されていって最後の1pが余る場合、一つ前のページと合わせて表示されてしまうのです。

これ、ライブラリとして使っているswiperの仕様なんですよね……。

 

この動きは直感的ではないので、v2アップデートにはこの問題を対処する追加機能を含む予定です。

そのアップデートまで待てないという方は、「最終ページに白紙または透明画像を入れる」などして対処すると良いでしょう。

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 横読み時一ページ目を空白として空ける設定
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-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には「HTML要素を一つのページとして掲載する」機能を持たせておいたので、商業サイトによくある「話末にアンケートリンク付き画像を貼る」といった表示も出来るように作っています。

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

雛形cssの導入

まずはテンプレート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: 原稿解像度アスペクト比の横数値

 

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

laymic v1の仕様上、この表示を実現させるためにはこうするしかなかったので面倒くさくてもゆるして。

雛形htmlテンプレート

後は.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 scaleなどをまとめて効かせるためのクラス名
bg_white つけた要素が白背景になるクラス名
laymic_page_landscapes 横長画像を縦に並べることを想定したクラス名。画像をひとつだけ入れると単体表示可能
laymic_page_portraits 縦長画像を横に並べることを想定したクラス名。これいる?

雛形セットにおける既知の不具合

アスペクト比を正確に入力しているならば、だいたいの場面では「漫画ページの表示サイズと同じように表示される」ようになっているのですが。

ごく一部の画面サイズの場合、漫画ページと違うサイズで表示される場合があります。

 

これはlaymic v1の仕様上対応が難しい部分なので、laymic v2アップデートをお待ちいただけると幸いです。

二度もコードをコピペするのはめんどいぜ」という人は、v2アップデートが行われるまで雛形cssコード導入を見送ったほうが良いでしょう。