採用動画メディアmoovy まつおです。
現在8月29日午前１時です。
最近、超暑いですね。
夏を体験するのは年齢的にも5回目なのですが、
この夏初めて気づいたことがありまして、
夏は暑いということ。
https://moovy.co.jp/column/?p=31
前回、弊社のシステムから、ご利用のクライアント様に対して、APIでデータ連携して、
<div class="bglight">
<h2>Apiサンプル</h2>
<div class="api_content" id="content"></div>
</div>HTMLタグ的にはこれだけで実装することができます。
実際に、コンテンツが描画されている場所は、id=”content”のdivタグの部分だけです。
この中に、APIから取得したデータを描画させていきます。
movie.js
$(function() {
$.ajax({
type: 'GET',
url: 'この中に弊社から発行するURLを入れる'
}).done(res => {
var movies = res.response;
movies.forEach(v => {
var url = v.url;
var thumbnail = v.thumbnail_url;
var moovy_logo = 'https://moovy.jp/images/moovy_beta.png';
var title = v.title;
var message = v.message || '';
var type = v.type;
var position = v.position;
//弊社のロゴです。
var client_logo =
'https://enjoy.moovy.jp/ClientLogo/2/9Ua8EwiXIdXur4e9e0im9mzBLaaaXkQITvyRcy3e.jpeg';
var name = '会社名';
const MAX_LENGTH_MESSAGE = 25; //文字数上限
let modStr = ''; //カット後の文字列
if (message.length == 0) {
} else if (message.length > MAX_LENGTH_MESSAGE) {
modStr = message.substr(0, MAX_LENGTH_MESSAGE) + '...';
} else {
modStr = message;
}
var html = `
<a href='${url}' class='card_link'>
<div class='card'>
<img id='thumbnail' class='thumbnail' src='${thumbnail}' alt='サムネイル画像' class='bookmark_img'/>
<div class='text_wrap'>
<p class='job_title' id='job_title'>${title}</p>
<p class='client_name'>
<span class='client_logo'>
<img src='${client_logo}'>
</span>${name}
</p>
<div class='tag'>
<p class='job_type'>#${type}</p>
<p class='job_position'>#${position}</p>
</div>
<p class='job_message'>${modStr}</p>
<div class='logo_wrap'>
<img id='logo' class='logo' src='${moovy_logo}' class='client_logo' alt='moovyロゴ'/>
<p>詳細を見る</p>
</div>
</div>
</div>
</a>`;
$('#content').append(html);
});
});
});
AjaxでAPIからの動画情報を取得し、取得されたデータが連想配列であるため、forEachで動画の回数だけ回します。
取得した結果を変数に格納し、変数htmlにタグと取得した結果を合わせたものを定義して、先ほどのid=”content”のdivタグの中に、動画の回数だけ放り込む、ということです。
この段階で、データの取得は完了しているので、残りはCSSとなります。
この記事ではCSSの内容は省略します。
コツというほどのことではないのですが、javascript関係で、HTMLタグを描く場合は、
“（⬅︎シフト＋＠で出せるやつ）で囲んでインデントをしっかりつけるとみやすいと思います！
このように、「APIと連携して採用ホームページに組み込む」と言われると小難しそうな話に感じる方も中にはいらっしゃるかもしれませんが、とても簡単です。
moovyは、採用動画メディアではあるのですが、企業様たちの需要には積極的にお答えしたいと思っていて、このような機能をつけさせていただきました。
まもなくAPIの導入事例も上がって参りますので、またご紹介できればと思います。
ご不明点、導入の検討されている方いらっしゃいましたら、お問い合わせください。
お問い合わせ moovy_support@moovy.co.jp
