私は現在、Blueskyに投稿されたWebコミックへのリンクを取得し、それを集計して記録する「ブルスコミックログ」を作成している。 Webコミックの情報は、基本的にWebコミックのサイトにプログラムでアクセスして取得できる OGP(Open Graph Protocol) より収集しているが、Webコミック毎に OGP に書かれた情報は微妙に異なっている。その違いを記録するため、このテキストを作成する。
また、集計する際にはマンガのタイトルを抽出する必要があるため、OGPから取得したタイトル (og:title) からマンガのタイトルのみを抽出する正規表現についても記録する。
- 作品URL
- OGPの内容
- 作品タイトルの抽出方法
- アプリの場合の変化点
- 所感
https://shonenjumpplus.com/episode/ + 17文字以上の数値
項目 | 内容 | 例 |
---|---|---|
og:title | 作品のタイトル | [第一話]モノクロのふたり - 松本陽介 | 少年ジャンプ+ |
og:url | 作品URL | https://shonenjumpplus.com/episode/17106567255706134238 |
og:type | ページの種類 | article |
og:image | 作品タイトル画像のURL | https://cdn-ak-img.shonenjumpplus.com/public/series-thumbnail/... |
og:image:width | サムネイル画像の幅 | 482 |
og:image:height | サムネイル画像の高さ | 482 |
og:site_name | サイト名 | 少年ジャンプ+ |
og:description | 作品の説明 | <毎週日曜更新>優秀なサラリーマンとして日々働く男・不動花壱。... |
twitter:card | TwitterCardの種類 | summary_large_image |
twitter:site | Xアカウント | @shonenjump_plus |
twitter:title | og:title と同一 | [第一話]モノクロのふたり - 松本陽介 |
twitter:description | 短い作品の説明 | 諦めた未来へ、もう一度。 |
twitter:image | 今回のエピソードのサムネイル | https://cdn-ak-img.shonenjumpplus.com/public/... |
twitter:imageの画像サイズは 840x420px
例:[第一話]モノクロのふたり - 松本陽介 | 少年ジャンプ+
- 先頭の[…]を除去
- ' - ' から後ろの文字列を除去
- https://shonenjumpplus.com/app/viewer/ + 'ec' + 6文字以上の数値
- https://shonenjumpplus.com/app/episode/ + 'ew' + 6文字以上の数値
アプリが生成したURLにWebブラウザでアクセスすると、レスポンスヘッダのLocationに作品ページのURLが入っている。ブラウザは、そこに指定された作品ページへリダイレクトする。
GigaViewer for Web採用サイトで最も標準的な仕様。 Web、アプリ用URL共にOGPが取得でき、OGPからはSNS投稿に必要な全ての要素が格納されているので、そのまま使用できる。 twitter:description に、投稿可能な文字列が短いSNS共有用に簡潔な作品の説明文章が入っているところも良い。現段階で最も理想的なWebコミックサイトと言える。
https://www.sunday-webry.com/episode/ + 17文字以上の数値
- ジャンププラスと同等
- og:image:widthとog:image:heightには(ジャンププラスと同じ)482が指定されているが、og:imageで指定された画像のサイズは965x561px
- twitter:imageで指定された画像のサイズは540x384px
例:第1話 うろんな転校生 / 写らナイんです - コノシマルカ | サンデーうぇぶり
- 文字列の一番最後に出てくる「 / 」から前の文字列を削除
- 「 - 」から後の文字列を削除
ブラウザアクセス時のリダイレクトはジャンプ+と同様。 アプリには存在するが、Webでは公開していない作品の場合は、サンデーうぇぶりアプリのティザーサイトに移動する。その場合はOGPに作品情報は入らない。
基本的にジャンプ+と仕様が同様なので、処理しやすい。 ただ、サンデーうぇぶりは「アプリのみ公開でWebでは公開しない」作品も多く、その作品へのURLをSNSに張った場合はSNSで表示されるサムネイルには作品名や作品の画像が表示されない。「アプリでのみ期間限定公開!」的なキャンペーンでこの現象が頻発するのが惜しい。
https://tonarinoyj.jp/episode/ + 17桁以上の数字
- ジャンププラスと同等
- og:imageの画像サイズは500x500px
- twitter:imageの画像サイズは800x400px
例:[第4話] 男×4寮!生態記録 - 原作:相島桃志郎 作画:天道グミ | となりのヤングジャンプ
- 先頭の[…]を除去
- ' - ' から後ろの文字列を除去
サムネイル画像のサイズ以外はジャンプ+と仕様が同一。同じジャンプ系列だからだろうか。
https://comic-days.com/episode/ + 17桁以上の数字
- ジャンププラスと同等
- og:image:widthとog:image:heightには482が指定されているが、og:imageで指定された画像のサイズは900x506px
- twitter:imageで指定された画像のサイズは285x189px
例:チンチンデビルを追え! - くぼたふみお / 第1話 チンチンデビル襲来! | 月マガ基地
- 「 - 」から後の文字列を削除する
https://comic-gardo.com/episode/ + 17桁以上の数字
- ジャンプ+と同様
- og:imageの画像サイズは500x500px
- twitter:imageの画像サイズは900x596px
例:暁の魔女レイシーは自由に生きたい~魔王討伐を終えたので、のんびりお店を開きます~ - 蔦千鳥/雨傘ヒョウゴ/京一 / 第4話「新たな始まり」(2) | コミックガルド
- 「 - 」の後ろの文字列を削除する
https://viewer.heros-web.com/episode/ + 17桁以上の数字
- ジャンプ+と同様
- og:imageで指定された画像のサイズは791x791px
- twitter:imageで指定された画像のサイズは981x490px
例:あつあつ!スタグル旅 - 能田達規 / MatchDay22:沼津 | コミプレ|ヒーローズ編集部が運営する無料マンガサイト
- 「 - 」から後ろの文字列を削除する
https://kuragebunch.com/episode/ + 17桁以上の数字
- ジャンプ+と同様
- og:imageで指定された画像のサイズは710x710px
- twitter:imageで指定された画像のサイズは981x650px
例:徳川埋蔵金はアメリカにござる - 大柿ロクロウ / 第3話 イエヤスとの約束 | コミックバンチKai
- 「 - 」から後ろの文字列を削除する
https://comic-action.com/episode/ + 17桁以上の数字
ジャンプ+と同様
- og:imageで指定された画像のサイズは556x791px
- twitter:imageで指定された画像のサイズは800x400px
例:第1話 夢ヶ原さんは夢見がち! / 夢ヶ原さんは夢見がち! - 砂履シンシャ | webアクション
- 「 / 」から前の文字列を削除する
- 「 - 」から後ろの文字列を削除する
https://comic-ogyaaa.com/episode/ + 17桁以上の数字
- ジャンプ+と同様
- og:imageの画像サイズは600x600px
- twitter:imageの画像サイズは309x205px
例:Season13/1本目 ボルテスV レガシー / 邦画プレゼン女子高生 邦キチ! 映子さん - 服部昇大 | COMIC OGYAAA!! (コミックオギャー)|おもしろい、がうまれるところ
- 「 / 」から前の文字列を削除
- 「 - 」から後の文字列を削除
https://comic-zenon.com/episode/ + 17桁以上の数字
- ジャンプ+と同様
- og:imageの画像サイズは504x504px
- twitter:imageの画像のサイズは879x583px
例:ワカコ酒 - 新久千映 / 第603話 ズッキーニ味噌添え | ゼノン編集部
- 「 - 」から後の文字列を取り除く
https://comic-growl.com/episode/ + 17桁以上の数字
- ジャンプ+と同様
- og:imageで指定された画像のサイズは981x694px
- twitter:imageで指定された画像のサイズは912x605px
例:第2話 / 僕のいけずな婚約者 - 漫画:冬谷リク | コミックグロウル |無料で読めるWEBマンガ!
- 「 / 」から前の文字列を削除
- 「 - 」から後ろの文字列を削除
https://feelweb.jp/episode/ + 17桁以上の数字
- ジャンプ+と同様
- og:imageで指定された画像のサイズは556x791px
- twitter:imageで指定された画像のサイズは981x651px
例:第1話 / そこここに愛 - カニマスクキミヨ | FEEL web|マンガの数だけ愛がある
- 「 / 」から前の文字列を削除
- 「 - 」から後ろの文字列を削除
https://comici.jp/ + 英文字 + /series/ + 13桁の16進数
項目 | 内容 | 例 |
---|---|---|
og:local | 言語 | ja_JP |
og:type | ページの種類 | article |
og:image:width | サムネイル画像の幅 | 1200 |
og:image:height | サムネイル画像の高さ | 630 |
twitter:card | TwitterCardの種類 | summary_large_image |
note:card | NoteCardの種類 | summary_large_image |
og:title | 作品のタイトル | かわいい人たち |
og:description | 作品の説明 | かわいい人たち by コジママユコ。街で見かけた「かわいい人たち」を描いていきます。 |
og:url | 作品URL | https://comici.jp/https://comici.jp/cotori9/series/... |
og:image | サムネイル画像のURL | https://cdn-public.comici.jp/series/... |
twitter:image | og:imageと同一 | https://cdn-public.comici.jp/series/... |
- og:imageの画像サイズは1280x672px
例:かわいい人たち
- og:titleがそのままタイトルなので編集する必要なし
コミチは「コミチ+」というマンガSaaSを開発しており、チャンピオンクロスなどが採用している。 noteへのリンクの貼り付けに対応した、note:card というOGPが採用されているのが興味深い。 or:urlに設定されている文字列は明らかに間違えていると思われる(最初の "https://comici.jp/" は不要)。
- https://championcross.jp/series/ + 13桁の16進数の文字(作品紹介ページ)
- https://championcross.jp/episodes/ + 13桁の16進数の文字(各話)
項目 | 内容 | 例 |
---|---|---|
og:title | 作品のタイトル | 僕の心のヤバイやつ【最新話無料】・Karte.156 私は本音を言う |
og:url | 作品URL | https://championcross.jp/episodes/4c1236fa1da44 |
og:image | 今回のエピソードのサムネイルURL | https://cdn-public.comici.jp/articlevisual/... |
og:description | 作品の説明 | 僕の心のヤバイやつ【最新話無料】... |
note:card | NoteCardの種類 | summary_large_image |
twitter:card | TwitterCardの種類 | summary_large_image |
twitter:image | og:imageと同一 | https://cdn-public.comici.jp/articlevisual/... |
- og:imageの画像サイズは900x472
- og:titleとtitleタグに書かれている内容が異なる。titleタグにはサイト名が付いているが、og:titleには付いていない。
例:僕の心のヤバイやつ【最新話無料】・Karte.156 私は本音を言う
- 「・」から後ろの文字列を取り除く
チャンピオンクロスも「コミチ+」を採用している。 作品のページと作品の各話のページが分かれている、作品URLで英数字13桁が使われていること以外は「ジャンプ+」と同様で処理しやすい。 リニューアルオープンした直後は動作が安定しない時があったが、現在は安定している。
- https://bigcomics.jp/series/ + 13桁の16進数の文字
- https://bigcomics.jp/episodes/ + 13桁の16進数の文字
- チャンピオンクロスと同等
- og:imageの画像サイズは1200x630px
例:ヨシダ檸檬ドロップス・第2話 履修登録トーホールド
- 「・」から後ろの文字列を取り除く
ビッコミも「コミチ+」を採用している。
https://pocket.shonenmagazine.com/
https://pocket.shonenmagazine.com/episode/ + 17文字以上の数値
- ジャンププラスと同等
- og:image:widthとog:image:heightには(ジャンププラスと同じ)482が指定されているが、og:imageで指定された画像のサイズは640x368
- twitter:image の画像サイズは 320x160
例:さわらないで小手指くん - シンジョウタクヤ / 【第1話】「さわらないで小手指くん」 | マガポケ
- ' - ' から後ろの文字列を除去
- https://s.magazinepocket.com/ldg?t= + 数値 + &e= + 数値
アクセスすると、以下の(Webサイトとは内容が異なる)OGPを含んだHTMLを返す。
項目 | 内容 | 例 |
---|---|---|
og:title | 「マガジンポケット」固定 | マガジンポケット |
og:type | ページの種類 | website |
og:image | サムネイル画像のURL(320x160) | https://mgpk-cdn.magazinepocket.com/static/... |
og:site_name | サイト名 | マガジンポケット |
og:description | 作品の説明 | 部活JK×マッサージで悶絶必至♡ |
twitter:card | TwitterCardの種類 | summary_large_image |
twitter:site | Xアカウント | @magapoke |
twitter:title | og:title と同一 | マガジンポケット |
twitter:description | og:descriptionと同一 | 部活JK×マッサージで悶絶必至♡ |
twitter:image | og:imageと同一 | https://mgpk-cdn.magazinepocket.com/static/... |
アプリが生成したURLにWebブラウザでアクセスした場合の作品ページへのリダイレクトは、レスポンスヘッダのLocationではなく、HTMLに書かれたJavascriptをブラウザが実行することよって行われる。 JavaScriptでは、https://pocket.shonenmagazine.com/red/content/ + e=の数値のURLにリダイレクトする処理を行っている。
Webページにアクセスした場合はジャンププラスと同様だが、アプリが生成するURLにアクセスした場合は作品ページには自動的にリダイレクトされないため、SNSにはタイトルが欠けたOGPの情報が表示される。 個別の作品名よりも「マガジンポケット」というアプリの文字列をSNSに表示することを優先した仕様だと考えられるが、個人的にはやはり作品名はOGPに入れて欲しい。
https://ciao.shogakukan.co.jp/
https://ciao.shogakukan.co.jp/comics/title/ + 数値 + /episode/ + 数値
ちゃおプラスは挙動が非常に特殊で、ブラウザではなくプログラムでURLにアクセスした場合、以下のOGPが含まれたHTMLを返す。
項目 | 内容 | 例 |
---|---|---|
twitter:card | TwitterCardの種類 | summary_large_image |
HTMLがブラウザに読み込まれると、HTMLに書かれたJavaScriptが実行され、その結果として以下のOGPを含んだ通常のマンガビューアのページが出力される。
項目 | 内容 | 例 |
---|---|---|
og:description | 作品の説明 | ふしぎな猫のまち メルティア 第1話 はじめまして、猫のまち… |
twitter:description | og:descriptionと同一 | ふしぎな猫のまち メルティア 第1話 はじめまして、猫のまち… |
og:title | 作品のタイトル | ふしぎな猫のまち メルティア / 佐倉おりこ / 第1話 はじめまして、猫のまち - ちゃおプラス公式サイト |
og:url | 作品URL | https://ciao.shogakukan.co.jp/comics/title/00511/episode/7781 |
og:type | ページの種類 | article |
og:image | サムネイル画像のURL | https://cdn.ciao.shogakukan.co.jp/static/titles/... |
og:image:width | サムネイル画像の幅 | 482 |
og:image:height | サムネイル画像の高さ | 482 |
og:site_name | サイト名 | ちゃおプラス公式サイト |
通常、SNSでリンク先の情報を取得する場合はSNSのサーバがプログラム的にURLにアクセスするが、読み込んだHTMLの中に入っているJavaaScriptを実行して再レンダリングする処理は行われないので、SNSに https://ciao.shogakukan.co.jp/comics/title... のURLを貼っても、リンク以外は何も表示されない。
- https://api.ciao.shogakukan.co.jp/ldg?t= + 数値 + &e= + 数値
XやLINEの共有ボタンを押すと、api.ciao.shogakukan.co.jp から始まるリンクが生成される。 このリンクにアクセスすると、以下のOGPを含んだHTMLが出力される。
項目 | 内容 | 例 |
---|---|---|
og:title | 「ちゃおプラス」固定 | ちゃおプラス |
og:type | ページの種類 | website |
og:image | サムネイル画像のURL | https://cdn.ciao.shogakukan.co.jp/static/titles/... |
og:site_name | サイト名 | ちゃおプラス |
og:description | 作品の説明 | (空白) |
twitter:card | TwitterCardの種類 | summary_large_image |
twitter:site | Xアカウント | @ciao_manga |
twitter:title | og:title と同一 | ちゃおプラス |
twitter:description | og:descriptionと同一 | (空白) |
twitter:image | og:imageと同一 | https://cdn.ciao.shogakukan.co.jp/static/titles/... |
ちゃおプラスもマガジンポケットと同様、シェア用のURLにアクセスした時に作品ページへの移動は、レスポンスヘッダのLocationではなく、HTMLに書かれたJavascriptをブラウザが実行することよって行われる。 JavaScriptでは、https://ciao.shogakukan.co.jp/comics/title/ + t=の数値 + /episode/ + tの数値 のURLにリダイレクトする処理を行っている。
作品のWebページにプログラム的にアクセスした時に意味のあるOGPを全く返さない点、シェア用のリンクURLをSNSに貼ってもサムネイル以外に有効な情報を返さない点を考えると、ちゃおプラスは意図的にSNS等に作品の情報をシェアされ辛くする仕様にしているものと考えられる。個人的には非常にもったいない仕様だと思う。
- https://yanmaga.jp/comics/ + 作品タイトルをURLエンコードした文字列(作品紹介ページ)
- https://yanmaga.jp/viewer/comics/ + 作品タイトルをURLエンコードした文字列 + / + 32文字の16進数の文字列 (作品ページ)
項目 | 内容 | 例 |
---|---|---|
og:title | 作品のタイトル | 私とセイコウしませんか!? - 第1話 マッチングアプリ |
og:description | 作品の説明 | 私とセイコウしませんか!?。関わる異性は担当編集だけ... |
og:type | ページの種類 | article |
og:image | サムネイル画像のURL | https://eh96lnrmau.user-space.cdn.idcfcloud.net/thumbnail/episode/... |
og:url | 作品URL | https://yanmaga.jp/comics/... |
og:local | 言語 | ja_JP |
twitter:title | og:title と同一 | 私とセイコウしませんか!? - 第1話 マッチングアプリ | ヤンマガWeb |
twitter:card | TwitterCardの種類 | summary_large_image |
twitter:site | Xアカウント | @yanmagaweb |
twitter:description | og:descriptionと同一 | 私とセイコウしませんか!?。関わる異性は担当編集だけ... |
twitter:url | og:urlと同一 | https://yanmaga.jp/comics/... |
- og:imageの画像サイズは900x472px
例:私とセイコウしませんか!? - 第2話 おはなししよう | ヤンマガWeb
- 「 - 」から後ろの文字列を削除
OGPの構成が独特。og:localが入っているのが珍しい。 また、作品のURLにエンコードされた作品タイトルが入っているのも珍しい。SEO的に有利になるんだろうか。
https://rookie.shonenjump.com/
- https://rookie.shonenjump.com/series/ + 11 文字の英文字 (作品紹介ページ)
- https://rookie.shonenjump.com/series/ + 11 文字の英文字 + / + 11 文字の英文字 (作品ページ)
項目 | 内容 | 例 |
---|---|---|
og:title | 作品のタイトル | ふつうの軽音部 1話 - ジャンプルーキー! |
og:type | ページの種類 | article |
og:url | 作品URL | https://rookie.shonenjump.com/series/... |
og:image | サムネイル画像のURL | https://cdn-img.rookie.shonenjump.com/public/cover_images/... |
og:description | 作品の説明 | 【告知】「ふつうの軽音部」、ジャンプ+で1/14(日)より連載開始します... |
og:site_name | サイト名 | ジャンプルーキー! |
twitter:card | TwitterCardの種類 | summary_large_image |
twitter:site | Xアカウント | @shonenjump_plus |
twitter:image | X用のサムネイル(1ページ目の縮小)のURL | https://cdn-scissors.gigaviewer.com/image/scale/... |
twitter:title | og:titleと同一 | ふつうの軽音部 1話 - ジャンプルーキー! |
twitter:description | og:descriptionと同一 | 【告知】「ふつうの軽音部」、ジャンプ+で1/14(日)より連載開始します... |
- og:imageの画像サイズは640x640px
- twitter:imageの画像サイズは522x783px
例:ふつうの軽音部 1話 - ジャンプルーキー!
- 最初に出てくる空白から後の文字列を取り除く
ジャンプルーキーのサイトのシステムは、「ジャンプ+」とは全く異なる独自のものになっている。 twitter:imageが縦長の画像なのは珍しい。
- https://manga.nicovideo.jp/comic/ + 数字 (作品紹介ページ)
- https://manga.nicovideo.jp/watch/mg + 6桁の数字 (作品ページ)
項目 | 内容 | 例 |
---|---|---|
og:title | 作品のタイトル | じゃんげま 430. 『おかえりなさい』 / Game*Spark |
og:type | ページの種類 | book |
og:url | 作品URL | https://manga.nicovideo.jp/watch/... |
og:image | サムネイル画像のURL | https://cdn-img.rookie.shonenjump.com/public/cover_images/... |
og:description | 作品の説明 | シューター女子のちょっぴりコミカルでドタバタでだらだらフレンドリーファイアな日常... |
og:site_name | サイト名 | ニコニコ漫画 |
twitter:card | TwitterCardの種類 | summary |
twitter:image | og:imageと同一 | https://deliver.cdn.nicomanga.jp/thumb/mg_thumb/... |
- og:imageの画像債は160x90px
例:じゃんげま 430. 『おかえりなさい』 / Game*Spark
- 最初に出てくる空白から後の文字列を取り除く
リニューアル以前はニコニコ静画の中でマンガを公開しているスタイルだったと記憶しているが、現在はマンガとイラスト(静画)でドメインが分かれている。現在は、マンガへのリンクが欲しい場合は manga.nicovideo.jp を対象とすればよいと思う。 og:descriptionには(投稿ユーザーが設定した)HTMLタグが入っている場合があるが、それをそのまま表示すると問題が起こる場合があるので、そのまま使わない方が良い。
https://comic-walker.com/detail/KC_ + 数字 + _S/episodes/KC_ + 数字 _E
項目 | 内容 | 例 |
---|---|---|
og:url | 作品URL | https://comic-walker.com/detail/... |
og:title | 作品のタイトル | ゴリラの神から加護された令嬢は王立騎士団で可愛がられる|カドコミ (コミックウォーカー) |
og:description | 作品の説明 | 16歳になると、さまざまな動物神から加護を得られる世界――気弱な伯爵令嬢ソフィア・リーラーは... |
og:image | サムネイル画像のURL | https://cdn.comic-walker.com/integration/cdpf/resources/... |
og:site_name | サイト名 | カドコミ (コミックウォーカー) |
og:type | ページの種類 | website |
og:local | 言語 | ja_JP |
twitter:card | TwitterCardの種類 | summary_large_image |
twitter:site | Xアカウント | @kado_comi |
- og:imageの画像サイズは960x540px
例:ゴリラの神から加護された令嬢は王立騎士団で可愛がられる|カドコミ (コミックウォーカー)
- 「 | 」から後ろの文字列を削除
カドコミはOGPや作品URLの構造が独特。他とは異なるSaaSを使っているように思える。
https://comic-fuz.com/manga/viewer/ + 数字
項目 | 内容 | 例 |
---|---|---|
twitter:card | TwitterCardの種類 | summary_large_image |
og:title | 作品のタイトル | 廣井きくりの深酒日記 ぼっち・ざ・ろっく!外伝 31話 |
og:description | 作品の説明 | (空白) |
og:type | ページの種類 | article |
og:url | 作品URL | https://stg.krr.pw/manga/viewer/... |
og:image | サムネイル画像のURL | https://img.comic-fuz.com/e/... |
og:image:width | サムネイル画像の幅 | 800 |
og:image:height | サムネイル画像の高さ | 500 |
例:廣井きくりの深酒日記 ぼっち・ざ・ろっく!外伝 31話
- 最初の空白から後ろの文字列を削除
作品URL、OGPともに独特。og:descriptionが空白なのは珍しい。 og:urlは「stg.krr.pw」から始まる文字列になっているが、ここにアクセスすると403エラーが表示される。ドメイン名から推測すると、アプリのテスト環境用のドメインなのではないかと思われる。stg.krr.pwをcomic-fuz.comに差し替えると動作する。
これ以外のWebコミック(リマコミ・裏サンデー・ハヤコミ・Seasons)、いわゆるマンガアプリ(現在把握しているアプリは、ピッコマ・LINEマンガ・コミックシーモア・eBookJAPAN・めちゃコミック・Renta・マンガONE・がうがうモンスター・マンガPark・マンガMee・DMMブックス・マンガ王国・サイコミ・ヤンジャン!・ゼブラック・ジャンプTOON)が生成するURLやOGPについての調査結果は、後日ここに追記する予定。
Written with StackEdit.