メニューを開く 項目を開く 記事投稿時刻 コメント トラックバック カテゴリー ブログテーマ タグ URLリンク コメントの編集 コメントに返信する

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

2023/03/11  18:09
2
straw_man以外のサイトに対して、laymicビューワーを導入するための説明をしていきます。

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



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


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

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

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


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




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

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



文責：秋田LV3




結論から言うと


以下のコードを</head>の直上行あたりにコピペして、
  1. <!-- laymic.js v2.2.2 - github.com/dettalant/laymic -->
  2. <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@dettalant/laymic@2.2.2/dist/laymic.min.css">


以下のコードを</body>の直上行あたりにコピペすれば導入完了です。
  1. <!-- laymic.js v2.2.2 - github.com/dettalant/laymic -->
  2. <script src="https://cdn.jsdelivr.net/npm/@dettalant/laymic@2.2.2/dist/laymic.iife.min.js"></script>
  3. <script>
  4.   new laymic.LaymicApplicator(".laymic_template", {
  5.     // 原稿画像横幅
  6.     pageWidth: 690,
  7.     // 原稿画像縦幅
  8.     pageHeight: 976,
  9.   })
  10. </script>



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


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

そのためには、ページ内の<body>から</body>の間の任意箇所に、以下のようなコードを挿入してください。
  1. <div class="laymic_template" data-viewer-id="manga1">
  2.   <img data-src="1枚目画像url">
  3.   <img data-src="2枚目画像url">
  4.   <img data-src="3枚目画像url">
  5.   <!-- 以下、追加したい画像の数だけ書き加える -->
  6. </div>
  7. <button class="laymic_opener" type="button" data-for="manga1">
  8.   ここをクリックでビューワー展開
  9. </button>


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



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


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

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

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


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


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


表示する画像と解像度指定値が食い違っている場合、高確率で表示崩れが発生します。
もし「この話だけ別解像度を指定したい」といった状況であるなら、
.laymic_template側に以下のような設定値を加える必要があります。


名前　　　　　　　　指定する値

data-page-width　　 漫画ページ横幅解像度
data-page-height　　 漫画ページ縦幅解像度




実際の記述サンプルはこんな感じ。
  1. <!-- 横600縦800の画像解像度を指定 -->
  2. <div class="laymic_template" data-page-width="600" data-page-height="800" data-viewer-id="manga1">
  3.   <img data-src="1枚目画像url">
  4.   <img data-src="2枚目画像url">
  5.   <img data-src="3枚目画像url">
  6.   <!-- 以下、追加したい画像の数だけ書き加える -->
  7. </div>

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



参考リンク


laymic使用の上でさらなる情報をお求めの場合は、手前味噌ではありますが以下記事を参考にしてください。
straw_manテンプレートlaymicビューワー関連設定解説記事



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



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


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

そういった状況では以下コードを参考に、邪魔になっている要素より大きなz-index数値を入力するようにすると良いでしょう。
  1. .laymic_root {
  2.   /* 上に覆いかぶさる要素より
  3.     z-index数値を大きくすることが重要 */
  4.   z-index: 10;
  5. }

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

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




madasanagi_mini.png
まださなぎ © Proudly written by dettalant


StrawMan Template総合案内板へ戻る
関連記事

コメント

コメントアバター画像
名も無きハタハタ 2023/03/11 21:38

秋田LV3様、解説記事を掲載していただきありがとうございます。非常に助かりました。
コメントアバター画像
れべるさん 2023/03/11 21:44

名も無きハタハタ さんへの返信

数日中に全記事の移植が終わりますが、案内サイトの記事内リンクが膨大なためしばらく時間がかかりそうです。

よって、エンジニアの記事を目次に掲載しますのでそちらから参照願います。

コメントの投稿