【Yealicoのサイトルールを作ろう！】基本設定とリストページの定義編

この記事ではYealicoサイトルールの作成方法について解説します。

以前、YealicoサイトルールWikiの記事を出しましたが、
Wikiだけではよく分からない方も多いかと思うので、実際に作成してみましょう！

という記事です。

では、やっていきましょう！

サイトルールの基本設定をしよう

まずサイトルールの基本からです。

Yealicoサイトルールを作成するにはYealicoを開いて右上のプラスアイコンを押します。

この画面がYealicoのサイトルールエディタです。

いくつかのタブに分かれていますね。

それぞれのタブは以下の役割があります。

Yealicoサイトルール：タブの役割

サイトルール・ルール・セレクタ・ページに関してはWikiの方で解説しています。

読んでない方は先に目を通してからこの記事を読むことをお勧めします。

関連記事

【Yealico】日本語版のサイトルール(siterule)Wiki

皆さん、超お久しぶりです。 この記事ではYealicoのサイトルール(siterule)を作るために必要な情報をまとめています。 基本的には、Yealico公式ブログのWikiを日本語訳していますが、自分的に理解しやすい言い回しなど[…]

• 一般
  サイトルールの基本的な設定を行います。
• Pages
  サイトルールのページを定義します。
• Series Page
  シリーズページのデフォルトルールを設定します。
• リストページ
  リストページのデフォルトルールを設定します。
• 詳細ページ
  詳細ページのデフォルトルールを設定します。
• ギャラリーページ
  ギャラリーページのデフォルトルールを設定します。
• 検索ページ
  検索ページのルールを設定します。
• タグリンクページ
  タグリンクページのルールを設定します。
• Extra Rules
  各ルールを複数(分けて)定義する必要がある際にここで定義できます。

一般の設定

タブの役割はなんとなく理解できましたか？

このチュートリアルでは
ジャンプでデビューできるマンガ投稿サービス「ジャンプルーキー！」のYealicoサイトルールを作成していきます。

Site Nameに「ジャンプルーキー」と入力し、

Index UrlにジャンプルーキーのトップページのURL「https://rookie.shonenjump.com/」を入力します。

ここで一旦保存しておきたいところですが、DetailUrlを入力しないと保存させてくれません。
エラーは「サイトは詳細ページルールを定義する必要があります。」と表示されていますが、Detail Urlを入力するだけでOKです。

Detail Urlを考えましょう。

Detail Urlとは詳細ページのURLのことです。

ジャンプルーキー！の場合、トップページから作品を選択すると作品のタイトルやカテゴリ、閲覧数や作者などの情報が載っているページに移動します。

これがYealicoで言う詳細(Detail)ページです。

では、Detail Urlはこの詳細ページのURLを入れればいいのか・・・？

そうではありません。

例えば転売ヤー撲滅子ちゃんのURLは「https://rookie.shonenjump.com/series/pGBIkZlMP4Q」ですが、URLにこれをそのまま入力してしまうとYealicoは転売ヤー撲滅子ちゃんしか開けなくなってしまいます。

Detail Urlには

https://rookie.shonenjump.com/series/{idCode:}

を入力します。

ここのポイントは「{idCode:}」プレースホルダーです。

この「{idCode:}」はリストページで取得したID Codeを置き換えることができます。

転売ヤー撲滅子ちゃんのURLは先ほども記述した通り「https://rookie.shonenjump.com/series/pGBIkZlMP4Q」ですが、
他の作品の詳細ページのURLはどうでしょうか。

ハッピーシュート！
「https://rookie.shonenjump.com/series/pGBIkZlLY1k」

花宮さんはアイドルを隠したい
「https://rookie.shonenjump.com/series/pGBIkZlNYe8」

焔トライブ
「https://rookie.shonenjump.com/series/pGBIkZlOfFs」

共通する点は「https://rookie.shonenjump.com/series/」までは同じで、そこから先が作品によって異なっていると言うことです。

https://rookie.shonenjump.com/series/??????

各作品の詳細ページを開くにはURLの??????の部分を作品によって変更する必要があります。

ここで「{idCode:}」を使うことでこの違う文字列の部分を各作品に合った文字列に置き換えてくれると言うわけです。

まだリストページのルールまで進んでいないので何を言ってるのかさっぱりな方もいると思いますが、とりあえず今は理解できていなくて大丈夫です。

一般タブには他にも設定項目がありますが、今の段階では入力しなくて大丈夫です。

次のステップへ行きます。

リストページの定義

ここから少し専門的な分野になってきます。

今回は人気作品を取得し、Yealicoで読めるようにしてみます。

タブを「リストページ」へ移動させてください。

ListRuleを作成していきましょう。

Itemセレクタの定義

まず一番最初の項目「Item」セレクタですが、まずここが結構重要です。

このItemはリストの各項目となる部分をYealicoに伝える役割があります。

ジャンプルーキ！の人気作品セクションのHTMLを見てみましょう。

PCを使っている方はブラウザ内蔵の開発ツール、PCがないiOSの方はWeb Inspectorを使って解析してみましょう。

App Store

‎Web Inspector

‎### Please refresh the page if you tap the "i" button and n…

構成的にはsectionタグで人気作品セクションが作られています。

そしてこのsectionタグにはid「popular-series」が付けられています。

さらにその中にolタグがあり、さらにその中にliタグがあります。

liタグの中身はこんな感じですね。
series-contentsクラスが付いたsectionタグをliタグで囲んでいる構成となっているようです。

つまり、この人気作品の各項目に該当するCSSセレクタは以下のようになります。

section#popular-series > ol.series-box-list > li > section.series-contents

これは結構厳密に指定していますが、以下のような簡易的な指定でも構いません。

section#popular-series section.series-contents

Itemセレクタの「Selector」に入力しましょう。

ここで一度右上の「保存」を押してサイトルールを開いてみましょう。

画像もタイトルも表示されませんが、項目として認識されて読み込まれていることが確認できますね。

ID Codeセレクタの定義

Itemが正常に認識されたので、次にID Codeセレクタを定義します。

このID Codeセレクタは基本設定の「Detail Url」でも説明した通り、詳細ページを開くためには欠かせない大切な存在です。

このID Codeを正しく取得できないと詳細ページが開けなくなってしまいます。

今回のDetailUrlには「https://rookie.shonenjump.com/series/{idCode:}」と入力していますね。

つまり、このIDCodeセレクタでは
https://rookie.shonenjump.com/series/??????の
??????の部分の文字列を取得する必要があります。

HTMLの構成を再度確認してみましょう。

aタグの中に詳細ページへのURLが入っているのが確認できますね。

aタグのhref属性にURLが入っているのでIDCodeセクションのSelector欄には「a」を入力します。

属性値を取得する必要があるのでFunction欄に「attr」を入力し、
Param欄に「href」を入力します。

これでIDCodeとしてこのURL(画像の場合「/series/pGBIkZlORcg」)が取得されるようになります。

しかし、これだけでは正しいURLが生成されません。

設定しているDetail Urlが「https://rookie.shonenjump.com/series/{idCode:}」なので

生成されるURLは
「https://rookie.shonenjump.com/series//series/pGBIkZlORcg」
になってしまいます。

しかし、望んでいる結果は「https://rookie.shonenjump.com/series/pGBIkZlORcg」です。

ここで選択肢が2つあります。

1つはDetail Urlを

https://rookie.shonenjump.com{idCode:}

に変更してしまう。

もう一つは取得した「/series/pGBIkZlORcg」から
更にRegexセレクタを使って「pGBIkZlORcg」の部分のみを抜き出すように指定すること。

以下の値をRegex欄に入れることで「/series/」以降の文字列のみを取得するようにできます。

/series/(.*)

Titleセレクタの定義

次にTitleセレクタを定義していきます。

作品のタイトルはseries-metaクラスが付いているdivタグの中にあるheaderタグの中にあるseries-titleクラスが付いているh1タグに定義されていますね。

Selector欄には

div.series-meta header h1

と入力しましょう。

そしてTitleの場合は特に加工も必要なく、要素内の文字列を取得するだけでいいのでFunction欄には「text」を入力します。

Coverセレクタの定義

続けてCoverセレクタを定義していきます。

これを定義しないとリストページに画像が表示されません。

カバー画像はcover-imageクラスが付いたimgタグで定義されて、src属性の中にカバー画像のURLが存在しますね。

CoverセレクタのSelectorには以下のように入力します。

img.cover-image

そして、src属性値を取得する必要があるのでFunction欄には「attr」を、Param欄には「src」を入力します。

Categoryセレクタの定義

少し飛んでCategoryセレクタの定義をします。

カテゴリですが、この人気作品セクションにはカテゴリ情報は存在しません。

なので、Authorセクションが別で設けられていますが、カテゴリとして作者の名前を登録します。

作者の名前はタイトルがあったheaderタグ内にありますね。

タイトルはh1タグですが、作者名は「p」タグなので、Selector欄には

div.series-meta header p

と入力しましょう。

確認！

これで保存し、サイトルールを開いてみましょう。

正常にタイトルとカバー画像、作者名を取得できていますね。

お疲れさまでした

基本設定とリストページの定義編は終了です。

よく分からなかった人も、少しは分かりましたか？

難しいけど挑戦したい方や、もっと理解を深めたい方はオンラインスクールで人に教えてもらうことをお勧めします。

>>定額制で質問し放題【Web食いオンラインスクール】

私がプログラミングを覚えたときは教えてもらえる環境がなかったので独学で勉強しましたが、今はいくらでも環境が整っています。

上記のオンラインスクールは数十万かかる他のオンラインスクールとは違いリーズナブルかつ定額制でいつでも辞めれるのでお勧めです。

まだリストページには結構細かく設定する部分がありますが、このチュートリアルではそこまで細かくは解説しない予定です。

この記事で覚えたことを応用して試してみてください！

今の段階ではまだ漫画を読むことはできませんが、次の詳細ページとギャラリページ編で読めるようになります。

次の記事でお会いしましょう〜！