IMPORTXML関数でヒーローズリーグの審査をちょっと楽にする 〜 IoAT賞を支えた技術 #protopedia #ヒーローズリーグ


こんにちは、n0bisukeです。ProtoPediaアドベントカレンダー6日目ですね！ 先月実施したヒーローズリーグのIoAT賞の審査会のときにちょっとしたハックを試していたのでその話をしようと思います。

## ヒーローズリーグ

ヒーローズリーグは老舗のモノづくりコンテストです。

> ![スクリーンショット 2022-12-06 19.14.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/35387/bcff1def-9ba6-205a-0cdb-cda26d2e65a5.png "スクリーンショット 2022-12-06 19.14.01.png")
> https://heroes-league.net/

ProtoPedia(プロトぺディア)というサービスに作品を登録してコンテストに応募します。

> ![スクリーンショット 2022-12-06 19.14.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/35387/ddd08877-9775-8f76-2f0c-7c4f978e854e.png "スクリーンショット 2022-12-06 19.14.51.png")

> https://protopedia.net/

ちょうど決勝イベントが今週土曜日（12/10）にありますね！

> https://connpass.com/user/mashupaward/open/

## ヒーローズリーグの審査

ヒーローズリーグでは様々なパートナーやスポンサーが参画していて賞がたくさんあり、賞ごとに審査が行われています。

僕は[IoTLT](http://iotlt.connpass.com/)というコミュニティ名義でIoAT賞という賞の審査を行なっています。Internet of Awesome Thingsの略でイケてるIoT作品を審査します。

審査の際に事務局の方からスプレッドシートで応募作品一覧を送ってもらいます。

> ![スクリーンショット 2022-12-06 14.52.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/35387/605f846e-a7aa-00da-a842-5d13d90bfdcc.png "スクリーンショット 2022-12-06 14.52.33.png")
> ↑送られてきた素の状態です。

ここから以下の手順で作品を見ていくのが通常です。

- シートにあるProtoPediaの作品URLを開く
- ページ内で画像や概要を読む
- 動画を見る

数件なら良いですが、これが数十件を超えてくると時間もけっこうかかります。

## IoAT賞の審査は時間との戦い

IoAT賞は審査会という形でイベント配信しながら審査をしていきます。

回数を重ねるごとに時間が長くなってきていて今年は7時間くらいかかりました。

全編YouTubeにあるのでよかったら見てくださいね！笑

> ![スクリーンショット 2022-12-06 19.35.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/35387/cf369315-3456-03d7-f4c7-bb510c19e9bb.png "スクリーンショット 2022-12-06 19.35.50.png")
> https://www.youtube.com/watch?t=780&v=hqdgjrUXL1s&feature=youtu.be

予定している時間内に終えるために少しでも審査がスムーズにできると良いですよね。

- 審査会の前にまずはざっと把握しておくこと（審査会ではページ内もちゃんと見てみます）
- イベント時に動画をすぐ再生できるように動画リストを作っておくこと

といった下処理をして時短を目指しました。

## サムネと動画URL抽出して審査をちょっと楽に

こんな感じでで動画のURLリストと画像のプレビューをシート内に表示させます。

> ![スクリーンショット 2022-12-06 15.00.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/35387/3c20219e-992f-f608-dd5d-9c528a23e49a.png "スクリーンショット 2022-12-06 15.00.17.png")

## プログラム不要！ IMPORTXML関数でスクレイピング

スプレッドシートにはスクレイピングっぽいことができる`IMPORTXML関数`というものがあります。

どんなことができるかはこのツイートをご参照ください。

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">嘘やろ…こんな事出来たんだ<br>超便利やないか <a href="https://t.co/U8Gx9nmDVQ">https://t.co/U8Gx9nmDVQ</a></p>&mdash; Naohiro IIDA (@dannymodules) <a href="https://twitter.com/dannymodules/status/1580432952927735810?ref_src=twsrc%5Etfw">October 13, 2022</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

IMPORTXML関数を使うことでWebサイトのHTML要素を指定して引っ張ってこれます。

使い方は調べると色々と記事が出てくるので参考にさせて頂きました。

https://note.com/tomo_saka/n/n76c2864389ad
https://qiita.com/ktmg/items/d53440c913e20f8bb34c

## ProtoPediaにIMPORTXML関数を使ってみる

試しに[POSMON](https://protopedia.net/prototype/3459)のページで検証してみます。

> `view-source:https://protopedia.net/prototype/3459`

### ProtoPediaの作品タイトルを抽出

タイトルは以下のような形でtitleタグに入っているのでシンプルに抜き出せます。

```html
<title>ポスモン 〜Qiita Edition〜 v0.1 | ProtoPedia</title>
```

`=IMPORTXML(A2,"//title")`とすることで抽出できました。

※A2にはURLが入ってる状態です。

> ![スクリーンショット 2022-12-06 18.47.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/35387/b008cb40-539c-cbf1-4d41-8487af69161a.png "スクリーンショット 2022-12-06 18.47.59.png")

### ProtoPediaの作品動画URLを抽出

ProtoPediaの作品動画は以下のような形でiframeの中のsrcプロパティに記載があります。

```html
        <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")`とすることで抽出できました。

> ![スクリーンショット 2022-12-06 18.50.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/35387/f41fe99e-2161-27ab-b00f-79002de647b5.png "スクリーンショット 2022-12-06 18.50.31.png")

### ProtoPediaの作品サムネイル画像を抽出

サムネイル画像はmetaタグ内でOGP指定されています。

```html
<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が入る形になります。

> ![スクリーンショット 2022-12-06 18.56.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/35387/7dd6456d-d3d4-c704-c621-652648698bae.png "スクリーンショット 2022-12-06 18.56.27.png")

## 理想と現実 - IMPORTXMLの限界

理想はこんな感じで全作品のプレビューが表示されて一覧で見れる状態でした。

> ![スクリーンショット 2022-12-06 18.58.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/35387/8337cf16-0ea3-d1aa-aaea-0f9653077861.png "スクリーンショット 2022-12-06 18.58.19.png")

....

・
・
・
・


結果どうかというと、処理速度問題か仕様の限界かで後半がこのように読み込まれない状態になってしまいました。

> ![スクリーンショット 2022-12-06 18.58.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/35387/3deee901-553b-9988-a285-a2e014fea4fa.png "スクリーンショット 2022-12-06 18.58.04.png")

シートを開く時によってはある程度待てば表示してくれるときもあったのですが、多くの場合後半が読み込まれず、審査会をイベント形式でやる際にはちょっと本番で怖いなと思ったところです。

> ![スクリーンショット 2022-12-06 19.01.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/35387/0c5fd39b-907a-9654-7b0f-d9c5efb63062.png "スクリーンショット 2022-12-06 19.01.33.png")

あとProtoPediaに無駄にリクエストかけてサーバー負荷も上げてしまってる感じもあるのでちょっと微妙な感じでした。


IMPORTXML関数、SNSとかではもうGASとかいらないじゃん...とか騒がれてたけど大量に使うには向いてなさそうですね。

## 結局GASを書くことに...

GASを書くと裏側で処理をしてくれてシートを開いたタイミングなど関係なくスクレイピングしてくれるので、IMPORTXML関数の限界を超えていけます。

少し長くなりそうなのでGASでどんなコード書いたかはまた別の機会に紹介しますが、`UrlFetchApp.fetch()`でコンテンツを取得してきて、`match()`と正規表現でIMPORTXML関数と同様なことをやっています。

## 締め: 誰でも賞の審査員に！

ちなみにヒーローズリーグは誰でも個人で賞を出すことできるので、誰でも賞の審査員になれます。

興味を持った方はぜひ賞を出してみましょう！（中の人ではないけど番宣）

12/10のイベントもぜひ参加してみましょ〜〜（中の人ではないけど番宣）

https://mashupawards.connpass.com/event/253633/

https://mashupawards.connpass.com/event/265935/