laymicビューワーの汎用サイト向け導入説明記事
2023/04/04 23:25
straw_man以外のサイトに対して、laymicビューワーを導入するための説明をしていきます。
laymicではLaymicとLaymicApplicator、二つのAPIを用意しているのですが、この記事では主にLaymicApplicator側の導入説明を行います。
もくじ
・結論から言うと
・漫画ビューワーの登録サンプル
・原稿画像サイズ指定について
・参考リンク
・補記: 展開後のlaymicビューワーに他要素が被さる場合の対処方法
追記
・WordPressへの導入
※元記事のキャッシュ
インターネットアーカイブ
googleキャッシュ
以下のコードを</head>の直上行あたりにコピペして、
以下のコードを</body>の直上行あたりにコピペすれば導入完了です。
上記コードを導入した場合、LaymicApplicatorは .laymic_templateというクラス名を持つ要素を読み取り、それらから漫画ビューワー用情報を自動生成します。
そのためには、ページ内の<body>から</body>の間の任意箇所に、以下のようなコードを挿入してください。
data-viewer-idとdata-forの値が不一致である場合は、ビューワー展開イベントが正常に紐付けされない点にはご注意を。
先程コピペしてもらった導入コードに、
といった記述がありました。
ここでのpageWidthとpageHeightに対しては、あなたが公開しようと考えている漫画の画像サイズを指定する必要があります。
pageWidthには漫画1ページの横幅解像度を、
pageHeightには漫画1ページの縦幅解像度を入力するようにしてください。
表示する画像と解像度指定値が食い違っている場合、高確率で表示崩れが発生します。
もし「この話だけ別解像度を指定したい」といった状況であるなら、
.laymic_template側に以下のような設定値を加える必要があります。
実際の記述サンプルはこんな感じ。
.laymic_template側に設定値が記述されている場合は、その値が優先されるようになっています。
laymic使用の上でさらなる情報をお求めの場合は、手前味噌ではありますが以下記事を参考にしてください。
straw_manテンプレートlaymicビューワー関連設定解説記事
この記事はFC2テンプレート向けの解説記事ですが、内部的にはこの記事でも説明したLaymicApplicatorを用いているので、非FC2ユーザーの方でもほぼほぼ参考に出来るというわけですね。
設置するサイトによっては、「展開後laymicビューワー上に他要素が覆いかぶさって邪魔になる」場合が発生するかもしれません。
そういった状況では以下コードを参考に、邪魔になっている要素より大きなz-index数値を入力するようにすると良いでしょう。
ただし、邪魔になっている要素に
z-index: 2147483647といった我の強い指定がなされている場合は、この方法では解決できません。
その場合は邪魔になっている要素側をなんとかできないか、別の方策を探すことをオススメいたします。
(2023/04/04 文責:秋田LV3)
当方(秋田LV3)WordPressに習熟していないため、代わりに導入を実践してくれた方の投稿を掲載しますので参考にしてください。

まださなぎ © Proudly written by dettalant
StrawMan Template総合案内板へ戻る
laymicではLaymicとLaymicApplicator、二つのAPIを用意しているのですが、この記事では主にLaymicApplicator側の導入説明を行います。
もくじ
・結論から言うと
・漫画ビューワーの登録サンプル
・原稿画像サイズ指定について
・参考リンク
・補記: 展開後のlaymicビューワーに他要素が被さる場合の対処方法
追記
・WordPressへの導入
※元記事のキャッシュ
インターネットアーカイブ
googleキャッシュ
当記事の文章とコードはリラ様の著作物です
リラ様のサイト『まださなぎ』では、StrawMan Templateとlaymicの実践的な解説を公開していましたが、サイトが消えてしまいました。
このままでは、StrawMan Templateとlaymicの普及と利用に支障が出るためキャッシュよりサルベージし再構築したのが当記事になります。
共同開発者のリラさんに連絡がつかず無断で転載している状態ですが、これが許されるとすれば共同開発者の私以外いないと判断しこのような形での公開となりました(詳細な経緯はこちら)。
もくじに本来のサイトの姿を保存していたキャッシュサイトを併記してありますが、キャッシュの性質上完全な再現とはならずいつ消えてもおかしくないのでリンク切れの際はご容赦ください。
最後に、当サイト『ヤマノス』では、他者の引用がなされたもの以外のすべてをフリー素材として公開しています(当サイトの著作物について)。
ですが、当記事はリラ様の著作物ですのでフリー素材ではありません。
ご注意願います。
文責:秋田LV3
結論から言うと
以下のコードを</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-idとdata-forの値が不一致である場合は、ビューワー展開イベントが正常に紐付けされない点にはご注意を。
原稿画像サイズ指定について
先程コピペしてもらった導入コードに、
- new laymic.LaymicApplicator(".laymic_template", {
- // 原稿画像横幅
- pageWidth: 690,
- // 原稿画像縦幅
- pageHeight: 976,
- })
といった記述がありました。
ここでのpageWidthとpageHeightに対しては、あなたが公開しようと考えている漫画の画像サイズを指定する必要があります。
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といった我の強い指定がなされている場合は、この方法では解決できません。
その場合は邪魔になっている要素側をなんとかできないか、別の方策を探すことをオススメいたします。
WordPressへの導入
(2023/04/04 文責:秋田LV3)
word pressで追加したいのですが、可能でしょうか?
word pressで追加する場合はどのようにしてhtmlをいじるのでしょうか?
word pressで追加する場合はどのようにしてhtmlをいじるのでしょうか?
当方(秋田LV3)WordPressに習熟していないため、代わりに導入を実践してくれた方の投稿を掲載しますので参考にしてください。
注意点としては、この部分の改行を全部削って右のようにする(改行タグ挿入されて動かんなるので) pic.twitter.com/RRMyG8KT41
— 伝説の溶接工 村上敏 (@nanobasonly) April 4, 2023
クッソ適当に無料WordPressに突っ込んだサンプル。https://t.co/5b92oq8rB4
— 伝説の溶接工 村上敏 (@nanobasonly) April 4, 2023

まださなぎ © Proudly written by dettalant
StrawMan Template総合案内板へ戻る
- 関連記事
名も無きハタハタ さんへの返信
よって、エンジニアの記事を目次に掲載しますのでそちらから参照願います。
word pressで追加する場合はどのようにしてhtmlをいじるのでしょうか?
名も無きハタハタ さんへの返信
コメントを受け、実装をテストしてくれた方がいましたので本文に追記しておきます。
参考になさっていただければ幸いです。
リラさんの説明書き移植してくださりありがとうございます。