こんにちは、n0bisukeです。ProtoPediaアドベントカレンダー6日目ですね！ 先月実施したヒーローズリーグのIoAT賞の審査会のときにちょっとしたハックを試していたのでその話をしようと思います。
ヒーローズリーグ
ヒーローズリーグは老舗のモノづくりコンテストです。
ProtoPedia(プロトぺディア)というサービスに作品を登録してコンテストに応募します。
ちょうど決勝イベントが今週土曜日（12/10）にありますね！
ヒーローズリーグの審査
ヒーローズリーグでは様々なパートナーやスポンサーが参画していて賞がたくさんあり、賞ごとに審査が行われています。
僕はIoTLTというコミュニティ名義でIoAT賞という賞の審査を行なっています。Internet of Awesome Thingsの略でイケてるIoT作品を審査します。
審査の際に事務局の方からスプレッドシートで応募作品一覧を送ってもらいます。
↑送られてきた素の状態です。
ここから以下の手順で作品を見ていくのが通常です。
- シートにあるProtoPediaの作品URLを開く
- ページ内で画像や概要を読む
- 動画を見る
数件なら良いですが、これが数十件を超えてくると時間もけっこうかかります。
IoAT賞の審査は時間との戦い
IoAT賞は審査会という形でイベント配信しながら審査をしていきます。
回数を重ねるごとに時間が長くなってきていて今年は7時間くらいかかりました。
全編YouTubeにあるのでよかったら見てくださいね！笑
https://www.youtube.com/watch?t=780&v=hqdgjrUXL1s&feature=youtu.be
予定している時間内に終えるために少しでも審査がスムーズにできると良いですよね。
- 審査会の前にまずはざっと把握しておくこと（審査会ではページ内もちゃんと見てみます）
- イベント時に動画をすぐ再生できるように動画リストを作っておくこと
といった下処理をして時短を目指しました。
サムネと動画URL抽出して審査をちょっと楽に
こんな感じでで動画のURLリストと画像のプレビューをシート内に表示させます。
プログラム不要！ IMPORTXML関数でスクレイピング
スプレッドシートにはスクレイピングっぽいことができるIMPORTXML関数というものがあります。
どんなことができるかはこのツイートをご参照ください。
嘘やろ…こんな事出来たんだ
— Naohiro IIDA (@dannymodules) October 13, 2022
超便利やないか https://t.co/U8Gx9nmDVQ
IMPORTXML関数を使うことでWebサイトのHTML要素を指定して引っ張ってこれます。
使い方は調べると色々と記事が出てくるので参考にさせて頂きました。
https://note.com/tomo_saka/n/n76c2864389ad
https://qiita.com/ktmg/items/d53440c913e20f8bb34c
ProtoPediaにIMPORTXML関数を使ってみる
試しにPOSMONのページで検証してみます。
view-source:https://protopedia.net/prototype/3459
ProtoPediaの作品タイトルを抽出
タイトルは以下のような形でtitleタグに入っているのでシンプルに抜き出せます。
<title>ポスモン 〜Qiita Edition〜 v0.1 | ProtoPedia</title>
=IMPORTXML(A2,"//title")とすることで抽出できました。
※A2にはURLが入ってる状態です。
ProtoPediaの作品動画URLを抽出
ProtoPediaの作品動画は以下のような形でiframeの中のsrcプロパティに記載があります。
<dl id="videoTitle" class="post-item release-item">
<dt>動画</dt>
<dd>
<div class="video-box">
<iframe class="video"
src="https://www.youtube.com/embed/2okL85bMLG4"
frameborder="0"
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
</iframe>
</div>
</dd>
=IMPORTXML(A2,"//iframe/@src")とすることで抽出できました。
ProtoPediaの作品サムネイル画像を抽出
サムネイル画像はmetaタグ内でOGP指定されています。
<meta property="og:image" content="https://protopedia.net/pic/82725217-33af-416d-9b18-22a5cf05f802.png">
=IMPORTXML(A2,"//meta[@property='og:image']/@content")と指定することで抽出できました。
また、IMAGE関数を使うことでプレビュー表示もできます。
=IMAGE(E2)としてして画像のプレビューまでできました。
※E2には抽出した画像URLが入る形になります。
理想と現実 - IMPORTXMLの限界
理想はこんな感じで全作品のプレビューが表示されて一覧で見れる状態でした。
....
・
・
・
・
結果どうかというと、処理速度問題か仕様の限界かで後半がこのように読み込まれない状態になってしまいました。
シートを開く時によってはある程度待てば表示してくれるときもあったのですが、多くの場合後半が読み込まれず、審査会をイベント形式でやる際にはちょっと本番で怖いなと思ったところです。
あとProtoPediaに無駄にリクエストかけてサーバー負荷も上げてしまってる感じもあるのでちょっと微妙な感じでした。
IMPORTXML関数、SNSとかではもうGASとかいらないじゃん...とか騒がれてたけど大量に使うには向いてなさそうですね。
結局GASを書くことに...
GASを書くと裏側で処理をしてくれてシートを開いたタイミングなど関係なくスクレイピングしてくれるので、IMPORTXML関数の限界を超えていけます。
少し長くなりそうなのでGASでどんなコード書いたかはまた別の機会に紹介しますが、UrlFetchApp.fetch()でコンテンツを取得してきて、match()と正規表現でIMPORTXML関数と同様なことをやっています。
締め: 誰でも賞の審査員に！
ちなみにヒーローズリーグは誰でも個人で賞を出すことできるので、誰でも賞の審査員になれます。
興味を持った方はぜひ賞を出してみましょう！（中の人ではないけど番宣）
12/10のイベントもぜひ参加してみましょ〜〜（中の人ではないけど番宣）