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

2023/03/11 17:43

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

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

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

もくじ
・基本的な使用方法
・デフォルト設定の指定について
　・srcでなくdata-srcでの指定をおすすめする理由
　・「一瞬表示されて消える現象」を強制的に無くす
・サムネイル画像を別途指定する
・laymicオプション引数紹介
　・javascript側におけるオプション引数紹介
　・html指定時におけるオプション引数紹介
・laymicビューワー展開時のキーボードショートカット
・laymic内ページに使える雛形セット
　・固定表示型雛形cssコード
　・縮小表示型雛形cssコード
　・雛形htmlテンプレート
　・雛形htmlテンプレートの記述例
　・雛形htmlテンプレートクラス名説明
・straw_manにおけるlaymicのアップデート方法

※元記事のキャッシュ
インターネットアーカイブ
googleキャッシュ

当記事の権利と経緯について

当記事の文章とコードはリラ様の著作物です

リラ様のサイト『まださなぎ』では、StrawMan Templateとlaymicの実践的な解説を公開していましたが、サイトが消えてしまいました。

このままでは、StrawMan Templateとlaymicの普及と利用に支障が出るためキャッシュよりサルベージし再構築したのが当記事になります。

共同開発者のリラさんに連絡がつかず無断で転載している状態ですが、これが許されるとすれば共同開発者の私以外いないと判断しこのような形での公開となりました（詳細な経緯はこちら）。

もくじに本来のサイトの姿を保存していたキャッシュサイトを併記してありますが、キャッシュの性質上完全な再現とはならずいつ消えてもおかしくないのでリンク切れの際はご容赦ください。

最後に、当サイト『ヤマノス』では、他者の引用がなされたもの以外のすべてをフリー素材として公開しています（当サイトの著作物について）。

ですが、当記事はリラ様の著作物ですのでフリー素材ではありません。
ご注意願います。

文責：秋田LV3

基本的な使用方法

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

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



<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-idとdata-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-widthとdata-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読み込みここからで検索するとすぐ見つかります。

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

この部分にどういう内容を指定できるかは、このページ内のjavascript側におけるオプション引数紹介部分に譲りますが。
pageWidthとpageHeightの二つだけは、貴方の漫画原稿解像度に合わせて指定しておくことを強くオススメします。

ここの指定さえすれば、
毎回data-page-widthやdata-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側におけるオプション引数紹介

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

※クリックで拡大
こちらに画像の引用元がありますのでコピペを希望の方はどうぞ

指定例



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側記述とそう変わりません。

※クリックで拡大
こちらに画像の引用元がありますのでコピペを希望の方はどうぞ

指定例



<!-- 自動改行設定が有効な際の書き方 -->
<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アップデートで追加されたキーボードショートカット一覧です。

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

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

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

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

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

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

・固定表示型
シンプルながら大雑把な固定配置を行う。
表示調整などは行わないため、表示領域依存での表示崩れが起きる可能性あり

・縮小表示型
表示領域に合わせて内容を縮小表示する。
「最大サイズに対する現在縮小率」が適用されるので、場合によっては小さくなりすぎるかも

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

固定表示型表示サンプル（2ページ目に広告あり）
縮小表示型表示サンプル

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記述を加えればオッケーです。

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

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



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

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



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

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



<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>

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



<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が上手く動かなくなるので慎重に上書きしてね！　ヨロシク！

関連記事

当記事の文章とコードはリラ様の著作物です