laymicビューワーの汎用サイト向け導入説明記事

straw_man以外のサイトに対して、laymicビューワーを導入するための説明をしていきます。

laymicではLaymicLaymicApplicator、二つのAPIを用意しているのですが、この記事では主にLaymicApplicator側の導入説明を行います。

スポンサーリンク

結論から言うと

以下のコードを</head>の直上行あたりにコピペして、

<!-- laymic.js v2.2.2 - github.com/dettalant/laymic -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@dettalant/laymic@2.2.2/dist/laymic.min.css">

以下のコードを</body>の直上行あたりにコピペすれば導入完了です。

<!-- laymic.js v2.2.2 - github.com/dettalant/laymic -->
<script src="https://cdn.jsdelivr.net/npm/@dettalant/laymic@2.2.2/dist/laymic.iife.min.js"></script>
<script>
  new laymic.LaymicApplicator(".laymic_template", {
    // 原稿画像横幅
    pageWidth: 690,
    // 原稿画像縦幅
    pageHeight: 976,
  })
</script>

漫画ビューワーの登録サンプル

上記コードを導入した場合、LaymicApplicator
.laymic_templateというクラス名を持つ要素を読み取り、それらから漫画ビューワー用情報を自動生成します。

 

そのためには、ページ内の<body>から</body>の間の任意箇所に、以下のようなコードを挿入してください。

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

 

data-viewer-iddata-forの値が不一致である場合は、ビューワー展開イベントが正常に紐付けされない点にはご注意を。

原稿画像サイズ指定について

先程コピペしてもらった導入コードに、

new laymic.LaymicApplicator(".laymic_template", {
  // 原稿画像横幅
  pageWidth: 690,
  // 原稿画像縦幅
  pageHeight: 976,
})

といった記述がありました。

 

ここでのpageWidthpageHeightに対しては、あなたが公開しようと考えている漫画の画像サイズを指定する必要があります。

pageWidthには漫画1ページの横幅解像度を、
pageHeightには漫画1ページの縦幅解像度を入力するようにしてください。

表示する画像と解像度指定値が食い違っている場合、高確率で表示崩れが発生します。

 

もし「この話だけ別解像度を指定したい」といった状況であるなら、
.laymic_template側に以下のような設定値を加える必要があります。

名前 指定する値
data-page-width 漫画ページ横幅解像度
data-page-height 漫画ページ縦幅解像度

 

実際の記述サンプルはこんな感じ。

<!-- 横600縦800の画像解像度を指定 -->
<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>

.laymic_template側に設定値が記述されている場合は、その値が優先されるようになっています。

参考リンク

laymic使用の上でさらなる情報をお求めの場合は、手前味噌ではありますが以下記事を参考にしてください。

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

 

この記事はFC2テンプレート向けの解説記事ですが、内部的にはこの記事でも説明したLaymicApplicatorを用いているので、非FC2ユーザーの方でもほぼほぼ参考に出来るというわけですね。

補記: 展開後のlaymicビューワーに他要素が被さる場合の対処方法

設置するサイトによっては、「展開後laymicビューワー上に他要素が覆いかぶさって邪魔になる」場合が発生するかもしれません。

 

そういった状況では以下コードを参考に、邪魔になっている要素より大きなz-index数値を入力するようにすると良いでしょう。

.laymic_root {
  /* 上に覆いかぶさる要素より
    z-index数値を大きくすることが重要 */
  z-index: 10;
}

 

ただし、邪魔になっている要素に
z-index: 2147483647といった我の強い指定がなされている場合は、この方法では解決できません。

その場合は邪魔になっている要素側をなんとかできないか、別の方策を探すことをオススメいたします。