採用動画をホームページに載せるのって大変?HTML+CSS+jQueryでAPIからデータを取得して表示してみた。

APIスクショ

採用動画メディアmoovy まつおです。

現在8月29日午前1時です。

最近、超暑いですね。

夏を体験するのは年齢的にも5回目なのですが、

この夏初めて気づいたことがありまして、

夏は暑いということ。

 

 

本題です。

https://moovy.co.jp/column/?p=31

前回、弊社のシステムから、ご利用のクライアント様に対して、APIでデータ連携して、

moovyで入力したテキスト情報やサムネイル画像をクライアント様の採用ホームページに組み込む
ことができるようになりました。
動画自体はmoovy内で再生する必要があるのですが、
採用ホームページから閲覧しに来たユーザーに関しては、動画の閲覧はログイン不要という仕様になっています。
それでは実際に、どのように採用ホームページに組み込むか・・・という話なのですが、非常に簡単な形で組み込むことができます。
APIスクショ
これが実際に組み込んだ形なのですが、
HTML+CSS+jQuery だけで実装することができます。
しかも、HeaderやFooterを除けば、
      <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は、採用動画メディアではあるのですが、企業様たちの需要には積極的にお答えしたいと思っていて、このような機能をつけさせていただきました。

動画を採用ホームページに組み込みたいが、

○撮影、編集が大変

○1動画に数十万円もかけたくない

という方は、ぜひmoovyの活用をご検討してみてはいかがでしょうか?

まもなくAPIの導入事例も上がって参りますので、またご紹介できればと思います。

ご不明点、導入の検討されている方いらっしゃいましたら、お問い合わせください。

お問い合わせ moovy_support@moovy.co.jp

この記事を書いた人
松尾 圭介

公務員勤務を経た後、2020年4月、株式会社moovyにフルスタックエンジニアとして参画。Laravel+Vue.js+AWSでサーバーサイドから、フロントエンドでの開発も行う。 ジーズアカデミーTOKYO LABコースのLaravel授業の講師も受け持つ。