Vimeo のサムネイル表示方法
動画共有サービスといえば「YouTube」がパッと思い浮かぶと思います。2016年に実施された5ヶ国での「インターネット動画サービスの利用経験」アンケートではYoutubeの利用率が6割〜7割という結果が出ました（総務省｜平成28年版 情報通信白書｜ネット動画視聴の広がり）。そんなYouTubeとよく比較されている動画共有サービスに「Vimeo」というものがあります。Vimeoはアーティストやクリエイターに重宝されており、実はYouTubeよりも数ヶ月前から始まったサービスなのです。動画共有サイトで初めて一般向けにHD(1280×720)サポートし始めたのもVimeoだったりします（Vimeo - Wikipedia）。余談ですが発音は[ˈvɪmiːoʊ]だそうで、カタカナにすると「ヴィメオ」と読むみたいです。ということで、前置きが長くなりましたが今回のブログではVimeoのサムネイル画像を表示させる方法を書いていきます。
Vimeoのデータを取得
Vimeo動画にはそれぞれIDがふられています。その動画IDさえわかればその動画自体はもちろん、サムネイル画像もとってくることができます。
Vimeo ID
動画IDを知るには、Vimeoサイト内の表示させたい動画ページのURLを見ます（私がみた感じでは...）。https://vimeo.com/動画ID のような形になっているはずです。または、埋め込み用リンクをみてください。動画ページの「共有」という紙飛行機のアイコンがついたボタンをクリックすると「埋め込み用リンク」を見ることができます。
Vimeo ID
Vimeo動画のサムネイル一覧
Vimeoの動画情報は、oEmbed API を使ってJSON形式で持ってくることができます。oEmbedとは、埋め込み用コードを取得するためのシステム、統一規格です。TwitterやYoutube、Vimeoなどといった世界的に有名なwebサービスの各々がこのoEmbedの規格を採用しています（引用元：oEmbed APIの使い方まとめ！URLから埋め込みHTMLタグを作ろう！）。
サムネイルということで、下の画像のように画像を一覧にして並べていることを想定しながら進めていきます。
イメージ
下記URLからJSON形式で動画のサイズや、サムネイル画像、サムネイル画像のサイズなどの情報をとってくることができます。詳しくはVimeoのデベロッパーサイトに記載してあります。
https://vimeo.com/api/oembed.json?url=https://vimeo.com/動画ID
JSONデータをどこからとってくるのかが分かればあとは、jQueryで情報を入れて、HTML、CSSで形を整えればVimeoのサムネイル一覧は完成です。ソースコードはこんな感じでしょうか。
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>VimeoThumbnail | Rachicom</title>
</head>
<body>
<div class="vimeo-thumbnail-container">
<ul class="vimeo-thumbnail-list">
<li class="vimeo-thumbnail-item js-vimeo-thumbnail-item">
<img src="https://placehold.jp/320x180.png?text=画像" alt="" class="vimeo-thumbnail-img js-vimeo-thumbnail-img" />
<p class="js-vimeo-thumbnail-title"></p>
<input type="hidden" name="vimeo-id" value="195304295" class="js-vimeo-thumbnail-id">
</li>
<li class="vimeo-thumbnail-item js-vimeo-thumbnail-item">
<img src="https://placehold.jp/320x180.png?text=画像" alt="" class="vimeo-thumbnail-img js-vimeo-thumbnail-img" />
<p class="js-vimeo-thumbnail-title"></p>
<input type="hidden" name="vimeo-id" value="192646839" class="js-vimeo-thumbnail-id">
</li>
<li class="vimeo-thumbnail-item js-vimeo-thumbnail-item">
<img src="https://placehold.jp/320x180.png?text=画像" alt="" class="vimeo-thumbnail-img js-vimeo-thumbnail-img" />
<p class="js-vimeo-thumbnail-title"></p>
<input type="hidden" name="vimeo-id" value="201014301" class="js-vimeo-thumbnail-id">
</li>
<li class="vimeo-thumbnail-item js-vimeo-thumbnail-item">
<img src="https://placehold.jp/320x180.png?text=画像" alt="" class="vimeo-thumbnail-img js-vimeo-thumbnail-img" />
<p class="js-vimeo-thumbnail-title"></p>
<input type="hidden" name="vimeo-id" value="202791609" class="js-vimeo-thumbnail-id">
</li>
<li class="vimeo-thumbnail-item js-vimeo-thumbnail-item">
<img src="https://placehold.jp/320x180.png?text=画像" alt="" class="vimeo-thumbnail-img js-vimeo-thumbnail-img" />
<p class="js-vimeo-thumbnail-title"></p>
<input type="hidden" name="vimeo-id" value="147088266" class="js-vimeo-thumbnail-id">
</li>
<li class="vimeo-thumbnail-item js-vimeo-thumbnail-item">
<img src="https://placehold.jp/320x180.png?text=画像" alt="" class="vimeo-thumbnail-img js-vimeo-thumbnail-img" />
<p class="js-vimeo-thumbnail-title"></p>
<input type="hidden" name="vimeo-id" value="185700918" class="js-vimeo-thumbnail-id">
</li>
</ul>
</div>
</body>
</html>CSS
<style>
.vimeo-thumbnail-container {
max-width: 1000px;
margin: 0 auto;
}
.vimeo-thumbnail-list {
list-style: none;
margin: 70px 15px;
padding: 0;
display: flex;
justify-content: space-around;
flex-wrap: wrap;
}
.vimeo-thumbnail-item {
width: calc(100% / 3 - 20px);
margin: 0 5px 10px;
}
.vimeo-thumbnail-img {
box-sizing: border-box;
max-width: 100%;
width: 100%;
}
</style>JavaScript
<!-- jQuery読み込み -->
<!-- jQuery slimバージョンの中にはJSONを処理する関数がないので注意 -->
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<script>
$(function(){
// vimeoのサムネイル画像表示処理
$('.js-vimeo-thumbnail-item').each(function() {
// リストアイテム取得
var $this = $(this);
// vimeoID取得
var vimeoId = $this.find('.js-vimeo-thumbnail-id').val();
// JSON取得
$.getJSON(
'https://vimeo.com/api/oembed.json?url=https://vimeo.com/' + vimeoId,
null,
function(data) {
// thumbnailURL格納
$this.find('.js-vimeo-thumbnail-img').attr("src", data.thumbnail_url);
// ついでにタイトルもとってくる
$this.find('.js-vimeo-thumbnail-title').text(data.title);
}
);
});
});
</script>サムネイル一覧デモ
ついでにデモもしてみます。（適当に動画のサムネイル持ってきたので著作権とかに触れていたら、こっそりTwitterで教えてください...。）ここで注意点なのですが、Vimeoに上がっている動画はだいたいは16:9の大きさですがちょいちょい縦横比が違ってくる動画もあるので注意が必要です。
Vimeo動画を扱う機会があったので、忘れないようにメモとして残してみました。他のVimeoに関する記事では動画を表示させる内容が多く、サムネイル画像について書かれている記事は少なかったように感じました。oEmbed自体はとても扱いやすく、YoutubeやInstagramでも採用されているためweb業界の人たちにとっては馴染みのあるやり方なのかもしれません。
