前回の基本設定とリストページの定義編から結構期間が空いてしまいましたが、続きの詳細ページとギャラリーページ編を解説していきます。
Yealicoの基礎から解説しているため、まだ読んでいない方はそちらから読んでください。
この記事ではYealicoサイトルールの作成方法について解説します。 以前、YealicoサイトルールWikiの記事を出しましたが、 Wikiだけではよく分からない方も多いかと思うので、実際に作成してみましょう！ という記事で[…]
前回はリストページと言ってタイトルとカバー画像、作者名を表示する所まで作成しました。
この記事ではその先の詳細ページ(チャプター一覧など)とギャラリーページ(漫画などの画像を閲覧するページ)を作成していきます。
いよいよ、読めるようにするステップです。
詳細ページの定義
詳細ページはリストページにて選択したコンテンツ(漫画タイトルなど)の詳細情報を表示するためのページになります。
Titleセレクタの定義
詳細ページのタイトルを定義するセレクタになります。
ジャンプルーキーの作品タイトルはseries-titleクラスがついているh1タグにて定義されているので、
Selector欄には
h1.series-titleと入力します。
そしてTitleの場合は特に加工も必要なく、要素内の文字列を取得するだけでいいのでFunction欄には「text」を入力します。
Deacriptionセレクタの定義
ここは作品の説明テキストを定義するセレクタになります。
ジャンプルーキーの作品の説明はseries-descriptionクラスがついているpタグにて定義されているため、
Selector欄には
p.series-descriptionと入力します。
先ほどと同じく、特に加工も必要なく、要素内の文字列を取得するだけでいいのでFunction欄には「text」を入力します。
Coverセレクタの定義
これは言うまでもなく、カバー画像の定義ですね。
カバー画像はcover-imageクラスがついているimgタグにて定義されているため、
Selector欄には以下のように入力します。
img.cover-imageさらに、今回の場合はsrc属性内のURLを取得する必要があるため、Functionに「attr」、Paramに「src」を設定します。
他にもカテゴリ、作者など諸々定義する箇所がありますが、今回は最低限にしておきたいので省きます。
応用力を上げる為、自分で考えてそれぞれ定義してみてください。
ChapterRuleの定義
チャプタールールは、詳細ページに表示されているチャプターを定義するためのルールになります。
Itemセレクタの定義
ジャンプルーキーのチャプターは、IDがepisode-listのulタグ内にliタグで定義されています。
Selector欄には以下のように入力します。
#episode-list>li
ID Codeセレクタの定義
HTMLとURLの構造を見てみましょう。
それぞれのチャプター情報が入っているliタグの中にaタグがあり、そこに漫画を読むページのURLが存在します。
よって、ID Codeは以下のように設定します。
ちなみに、ブックマーク機能を使わない場合はチャプタールールのID Codeは不要です。
Titleセレクタの定義
各チャプターのタイトルですね。
先ほどの画像にも写っていましたが、episode-titleクラスがついているspanタグにて定義されています。
Selector欄には以下のように入力します。
span.episode-titleそして、Function欄には「text」。
URLセレクタの定義
漫画を読むページのURLを設定します。
これですね。
以下のように設定します。
ほとんどID Codeと同じですね。
これで詳細ページの定義は終わりです。
保存し、詳細がきちんと表示されたか、チャプターは表示されるか開いて確認してみましょう。
ちなみに、タイトルとカバー画像はリストページにてきちんと定義されていれば詳細ページのルールで定義していなくても流用されます。
ギャラリーページの定義
いよいよ漫画を読むための部分。ここが本命ですね。
ここを使うために今までの定義を行ってきたといっても過言ではないです。
構造を見てみましょう。
image-containerクラスをもつdivタグの中にpタグがあり、さらにその中にjs-page-imageクラスをもつimgタグが存在します。
そのimgタグのsrc属性に画像のURLが設定されているようです。
Itemの定義
色々簡略化していますが、Selectorには以下のように入力します。
.image-container img.js-page-imageちなみに、以下のなSelectorでも動作します。
div.image-container p.page-area img.js-page-imagediv.image-container>p>img.js-page-image
Image URLの定義
ここで画像のURLを指定します。
Itemにてimgタグを指定しているため、あとはsrc属性を取得するように指定すればいいだけ。
Selectorは「this」、Functionに「attr」、Paramに「src」でOK。
これでチャプターを選択すると画像が表示され、漫画が読めるようになりました。
お疲れ様です
これで最低限の設定ができました。
あとは検索機能をつけたり、タグに対応させたりと色々ありますが、今回はここまで。
また時間があるときに続きを書きます。
