株式会社moovyで妖精を担当している、まつおです。
では、弊社のデータベースと御社の採用ホームページと連携して、コンテンツを表示することができるAPIを提供しています。
という質問に対して、
と、言いたいが故に作成しています。
今回の記事は、Progateを学習中または終わったくらいの人向けの記事となります。
Progateはブラウザ上で完結するので、実際に自分のパソコン上でコードを書くと言うことに初めてチャレンジしたい人にもオススメです。
１年半前、自分もProgateで遊んでいたのですが、 Progateでひととおり遊び終わったあと、何をしようかな？ということで結構悩んでいたなぁと思い出し、
今回、moovyのコンテンツを練習用のAPIとして配布して実際に、手を動かして実装してもらうというプラクティス用の記事を作ることにしました。
APIとは
アプリケーションプログラミングインタフェースの略で、ざっくり言うと、
情報（データ）を送受信する仕組み
のことです。
今回の場合で言えば、APIのURLを叩くと、「データを取得することができる」という使い方をします。
細かい話はつまらないと思うので、今回はとにかく手を動かして実際にHTML＋CSS＋Javascript（jQuery）のコードを書いてみましょう。
ブラウザはGoogleChromeを使ってください。
質問フォームを作ったので、ご質問があればこちらからお願いします。
１ エティターのダウンロード
Visual Studio Codeというエディターを使っていきます。通称「VSコード」です。
https://azure.microsoft.com/ja-jp/products/visual-studio-code/
上記のURLからダウンロードできます。
２ プラグインを入れる
一度プラグインを入れると、ずっと楽ができるので、最初はめんどくさいところもありますが、やっておきましょう。
まず日本語化をします。
次に、便利なプラグインを紹介した記事です。
①LiveServer、④Prettier の２つは最低限いれてみてください。
Prettierの設定は記事の通りで良いと思います。
初心者のときは、閉じタグなどによるミスで無駄に時間を取られてしまうので、手間かもしれないですが、最初に入れておくのがオススメです。
３ ディレクトリ（フォルダ）を作成してVScodeで開く
Desktopに、「moovy_practice」というディレクトリを作成してください。
VSコードの左上をクリックするとフォルダを開くやつが出てきます。
そこで、先ほど作ったmoovy_practiceを開いてください。
４ ファイルを作成する
ファイルを作成します。
画像のような階層でファイルをディレクトリを２つ、ファイルを３つ作成してください。
５ 試しに表示してみる
index.htmlを開いてください。
英小文字で、 ! を入力してみてください。
このような表示になったら、予測変換ぽいやつの一番上を選択してください（エンターまたは、マウスクリックで選べます）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
</body>
</html>このような表示になったら成功です。これが基本形というか必須の内容なんだな、と思ってください。
これは、特に変更する必要はありません。
<html lang="en">
<html lang="ja">ここだけ変更しています。
<!-- headにはページの情報を書きます。 -->
<head>
<!-- UTF-8は世界で最も有名な文字コードで、これを使うと言ってます -->
<meta charset="UTF-8" />
<!-- デバイスの大きさによってCSSを変えるために書きます（「レスポンシブ」に必要） -->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- IEで最新版で表示するというやつです。不要かもですが、残しておきます。 -->
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<!-- タイトルは、ブラウザの上側に表示されるテキストです。 -->
<title>Document</title>
</head>
<body>
testtestesttest
</body>
</html>各行の意味をコメントアウトで記載しました。
<title>moovyプラクティス</title>すると、
ブラウザに書かれている文字がこのように表示されたと思います。
６ HTMLを書いてみる
色々書いてみましょう。
bodyタグの中に書いていきます。
基本的に、テキストとかはbodyタグの中に書くと思って間違いがないです。
<body>
<h1>moovyプラクティス</h1>
<h2>moovyプラクティス２</h2>
<h3>moovyプラクティス３</h3>
<h4>moovyプラクティス４</h4>
<h5>moovyプラクティス５</h5>
<h6>moovyプラクティス６</h6>
<p>ピータグ</p>
<span>スパンタグ</span>
<span>スパンタグ</span>
<span>スパンタグ</span>
</body>こんな感じで書きました。
表示はこんな感じになると思います。
タグの意味は興味があれば、個人的に調べてみてください。
最初は、文字の大きさが違うと言うこと、
<span></span>スパンタグは横並びになる、ってことだけ覚えておくのがオススメです。
７ CSSを与えて、スタイルを変更する
CSSは、「どこに」「どんな変更を与える」を指定するだけです。
まず、CSSファイルを読み込みます。
<title>moovyプラクティス</title>
<link rel="stylesheet" href="/css/index.css" />
</head>タイトルタグの下に、上のような、1行のタグを書いてみてください。
href=”/” まで入力すると、予測検索が出ると思うので、クリックすると選択できます。
CSSをタグに直接指定する方法
index.cssファイルに
h1 {
color: red;
}を書いてみてください。
一番上のh1だけ赤くなりました。
CSSをクラスで指定する方法
index.html
<h2 class="nandemoiiyo">moovyプラクティス２</h2>h2タグに、上のようにclassを書きます。上のような書き方だとクラス名は「nandemoiiyo」となっています。
文字通り、ここのクラス名は僕らが勝手に命名して良い場所となります。
index.css
.nandemoiiyo {
color: blue;
}
classを与えたところだけ、青色に変わりました。
このように、「タグを指定して与える」「クラスを付与して、クラスを指定して与える」
というのが基本となります。
８ Javascriptを書いてみる。
JavascriptもCSSと同様に、ファイルを読み込むところから始めます。
(予測検索はこんな感じで表示されます）
<span>スパンタグ</span> <script src="/js/index.js"></script> </body>
bodyの閉じタグの上に書くのがお作法となっています。これは、javascriptの読み込み順を配慮したお作法となっています。
では、javascriptを書いていきます。
コンソールで表示してみる
index.js
console.log('test');これを書いたら、ブラウザで、Macは指二本で触れながらクリック、Windowsは右クリック→検証を開いてみてください。
その中にConsoleというタブがあるので、それをクリックしてみてください。
このような画面になればOKです。
画像のように、「test」と記述があればOKです。
もしも、画像のようになっていなかったら
javascriptのファイルの読み込みを失敗しています。
ファイルの場所を間違えていたり、閉じタグが間違ったりしている可能性があります。
なので、コードで書くのではなく、うまく予測変換を使って指定してあげれば余計な記述ミスを減らすことができます。
便利な機能はどんどん使っていきましょう。
アラートを出してみる
index.js
console.log('test');
alert('テストアラート');
こんなかんじで出ればOKです。
９ jQueryを読み込んでみる。
index.htmlに追記します。場所は先ほど読み込んだindex.jsの上に書きます。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="/js/index.js"></script>これでjQueryが読み込めます。
このコードは、Web上に上がっているjQueryの読み込み用のコードで、ネットに繋がっていないと読み込まれません。
こういった、形で読み込むやつは、CDNと読ばれています。
今後、何かのドキュメントなどで、CDNの記載があれば、HTMLで読み込むんだろうなぁと思っていただければ良いと思います。
１０ jQueryで書いてみる
jQueryで使えるものの一覧は、こちらのページが便利です。
試しに使ってみましょう。
Javascript（jQuery)を使うときには、HTMLタグに、idを振ります。これは、「誰に」とか「誰が」みたいなニュアンスがわかりやすいかな？と思っていて、idを振ることで名前を付けると言う感じです。
index.html
<h3 id="h3noyatsu">moovyプラクティス３</h3>h3noyatsu と言う名前でidを振りました。
jsファイルに書いていきます。
一時的に使わないコードは、コマンド＋/でコメントアウトしましょう。
今回、h3noyatsuに対して、CSSでcolor:red;を与えるjQueryを書いていきます。
console.log('test');
// alert('テストアラート');
$('#h3noyatsu').css('color', 'red');３番目が赤くなりました。
$('#h3noyatsu').css('color', 'red');//↑どこに対して ↑どんな処理jQueryのコードを分解するとこんな感じの説明ができます。
さらに、jQueryでは、「いつ、それを実行するか」というのを指定しなければならないのですが、特に何も指定していないときは、「ページを読み込んだとき」になっちゃいます。
なので、今までのコードは最初に読み込まれていたということになります。
もう一個書いていきましょう。
index.html
<h4 id="fade_out_text">moovyプラクティス４</h4>index.js
$('#fade_out_text').fadeOut();
//id="fade_out_text に対して、fadeOut()させるブラウザで確認して、フェードアウトしたら成功です。
基礎知識とノリの部分は以上となります！！！
１１ 実際にAPIでデータを取得してみましょう
難しくなりますが、コピペで動かしてみて、「こんな感じなんだな！」っていうのが大事になってきます。
完成図です。
APIは、僕らmoovyが「このURLを叩いてデータを取得できますよ」と用意したURLを、ユーザーが叩くとデータをもらえる感じに作られています。
APIからデータを取得する方法は色々ありますが、今回は、jQueryのAjaxという機能でデータを取得したいと思います。
答えからいきます。
index.js
$.ajax('https://moovy.jp/api/practice', {
type: 'get'
}).done(response => {
console.log(response);
}).catch(error => {
console.log(error);
});いっぱい文字があってビビると思うのですが、やっていることは、
https://moovy.jp/api/practice
というURLを叩いて、返ってきたレスポンスデータをconsole.logで表示しています。
それでは、コードをみていきたいと思います。
$.ajax → 決まり文句（決まりなのでこのまま使えば良い）
(‘https://moovy.jp/api/practice’) → こちらで指定しているURLです。エンドポイントなんて呼ばれたりします。
type: ‘get’ → HTTPのリクエスト方法には、GETとPOST（他２つ）がありますがGETと言う方法でリクエストを送っています。
.done → うまくいったらカッコ内が動きます。後述。
response → うまくいったら、このresponseという変数にAPIから受け取るデータが入ります。responseという変数名はこちらが勝手につけた名前なので、aでもcでもなんでも良いです。基本的にresponseやresなどと名付けられることが多いです。
console.log(response) → 前述のresponseをconsole.log()で表示しています。
catchの中は、APIの呼び出しが失敗した場合に呼び出されます。
error → 失敗した場合のレスポンスが入ります。
console.log(error) → 前述のerrorをconsole.log()で表示します。
それでは結果をみていきます。
{practice_data: Array(16)}このような表示が出てきました。
左の矢印をクリックすると展開ができます。
{practice_data: Array(16)}
practice_data: (16) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
__proto__: Objectこんな感じで表示されたら、practice_dataをさらに展開します。
何やらいっぱい表示できています。
Array(16)っていうのは0~15まで配列がありますよっていう意味です。
展開する操作をコードでやっていきます。
まず、practice_dataの表示をします。
.done(response => {
console.log(response);
console.log(response.practice_data);
})このように書き換えてみてください。
こんな感じで表示されたらOKです。
.practice_data で階層を掘る感覚で表示していくことができます。
こうやって掘っていくんだなというのを手を動かして覚えていく方が効率良いと思います。
さらに掘っていきます。次は、配列の０番目を表示します。
.done(response => {
console.log(response);
console.log(response.practice_data);
//追記
console.log(response.practice_data[0]);
})
このような結果が得られればOKです。０番目の内容だけが取れました。
さらに、titleだけ取得します。
console.log(response);
console.log(response.practice_data);
console.log(response.practice_data[0]);
//追記
console.log(response.practice_data[0].title);
どんどん階層を掘っていったら、タイトルのテキストだけを取得することに成功しました。
次で、全てのデータを取得するにはどうすれば良いのかやっていきます。
12 for文を使ってみる
for文というのは、N回同じ処理を回す構文となります。
今回は、先ほど取得した16の配列を全て表示するような処理を書いてみます。
まず、配列の状態まで掘って、それを変数で定義します。
.done(response => {
const array = response.practice_data;
console.log(array);
})(16) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]arrayという変数に、配列が入りました。
arrayというのは、配列が入る前提の変数によく名付けられます。これは技術系のブログで前提知識となっているので覚えていきましょう。
しかし、このarrayは今回はふさわしくありません。
なぜなら、「配列というのはわかったけど、なんの配列か分からない」からです。
では、何が良さそうか・・・
const posts = response.practice_data;
console.log(posts);今回は、「投稿」という意味でpostsという名前にしました。
「複数形」は配列。「単数形」はそれ以外で使われることが多いです。
それでは早速、for文を使っていきます。
const posts = response.practice_data;
for (var i = 0; i < posts.length; i++) {
console.log(posts[i]);
}for文の基本的な書き方となります。
posts.lengthは、配列の数を示します。今回で言えば、16になるはずです。
確認するときは、
console.log(posts.length);このようにしてあげれば、コンソールで結果が出力できます。
console.logは本当によく使います。1行ごとに確認して少しずつ進むのも時には必要です。
さて、for文の結果を表示します。
こんな感じになりました。
試しに、
for (var i = 0; i < posts.length; i++) {
console.log(posts[i].title);
}こうしてみます。
タイトルだけ取れました。
これはどういうことか？というと、
i という変数が肝となっていて、iには、0 ~ 15の数字が入ります。
for (vari = 0; i < posts.length; i++) これで 変数iの初期値は0ですよ。iは１６未満ですよ。iは１ずつ増えますよ。
ということが書かれています。
つまり、１６回処理が回ると言う意味で、処理が回るたびに1が１ずつ増えているということになります。
確認していきましょう。
for (var i = 0; i < posts.length; i++) {
console.log(i);
// console.log(posts[i].title);
}
良さそうですね。
つまり、このfor文の中では、
console.log(posts[0].title);
console.log(posts[1].title);
console.log(posts[2].title);
console.log(posts[3].title);
console.log(posts[4].title);
...という感じで順番に回ったと言うことです。
以上がfor文となります。
13 取得したデータをブラウザで表示してみる。
まず、HTMLに、表示する場所を指定します。
さきほど指定したときの方法は、タグにidを振りました。
今回も同じように、タグにidをふっていきます。
今までのコードは全てコメントアウトして、id=contentsを与えたdivタグを作成します。
<!-- <h1>moovyプラクティス</h1>
<h2 class="nandemoiiyo">moovyプラクティス２</h2>
<h3 id="h3noyatsu">moovyプラクティス３</h3>
<h4 id="fade_out_text">moovyプラクティス４</h4>
<h5>moovyプラクティス５</h5>
<h6>moovyプラクティス６</h6>
<p>ピータグ</p>
<span>スパンタグ</span>
<span>スパンタグ</span>
<span>スパンタグ</span> -->
<-- 追加 -->
<div id="contents"></div>
この追加したid=”contents”に文字を表示してみましょう。
index.js
$('#contents').append(
'appendは、テキスト（タグも）をどんどん追加することができるやつ'
);表示をみてみます。
こんな感じで表示されました。
要素を確認します。「検証」を開いてください。
テキストがそのまま追加されました。
では、ちょっとアレンジします。
index.js
$('#contents').append(
'<p>appendは、テキスト（タグも）をどんどん追加することができるやつ</p>'
);これで検証をしてみます。
タグごと入りました。
classを与えて、CSSでクラスに対して色をつけてみます。
index.js
$('#contents').append(
'<p class="test_color">appendは、テキスト（タグも）をどんどん追加することができるやつ</p>'
);index.css
.test_color {
color: red;
}
クラスをつけたタグをappendして、CSSで色をつけることが可能だと分かりました。
プログラミングでは、「これできるんじゃね？」と仮説を立てて「検証」するというのを何度も繰り返して経験値を積むことが多いです。
それでは、今のコードをfor文の中に書いてみましょう。
いっぱいでてきました！
APIから取得するデータを表示するイメージが付いてきましたか？
１４ APIから取得したデータのタイトルを表示する
さきほどまでで、決まった文字列を、for文の回数だけappendで追加するというのを学んだと思います。
それにプラスして、APIからデータを取得したコードをガッチャンコして、タイトルだけを一覧で表示してみましょう。
.done(response => {
const posts = response.practice_data;
for (var i = 0; i < posts.length; i++) {
var title = posts[i].title;
$('#contents').append('<p class="test_color">' + title + '</p>');
}
})
タイトルの一覧を表示することができました！
これからやるものが少し複雑になっていくので、別の書き方をしたいと思います。
appendの中に入れるものを変数にしたいと思います。
//htmlという名前の変数で事前に定義してみる
var html = '<p class="test_color">' + title + '</p>';
//変数でappendする。
$('#contents').append(html);こうなります。
また、
//htmlという名前の変数で事前に定義してみる
var html = '<p class="test_color">' + title + '</p>';
//こういう書き方もできる。こっちの方が今回は見やすい。
// `は、shift+@で出せるやつです
var html = `
<p class="test_color">${title}</p>
`;下の書き方だと、+ではなく、変数は${}で囲みます。
改行の観点から今回は下のパターンの方が簡単だと思うので、下のパターンでやっていきます。
１５ APIから得られるデータを改めて確認する
console.log(posts);これでpostsの内容を見てます。
id、logo_url、message、name、position、thumbnail_url、title、type、url
の9個が得られることがわかりました。
中身を見ると、どうやらサムネイル画像は、thumbnail_urlっていう名前で送られてきているんだな、と分かるようになりました。
var html = `
<p class="test_color">${title}</p>
<img src="${thumbnail_url}"/>
`;試しにこんな感じに書いてみました。
これでは動きません。
Uncaught ReferenceError: thumbnail_url is not defined
と書いてあります。つまり、「定義されてません」とのことです。
正解は、
var thumbnail_url = posts[i].thumbnail_url;
var html = `
<p class="test_color">${title}</p>
<img src="${thumbnail_url}"/>
`;このように、事前に定義してあげればエラーは出ないはずです。
画像はいっぱい表示されましたか？
僕はスクリーンショットに収めきれないくらいでかい画像が大量に表示されました。
１６ リセットCSSを入れる
リセットCSSというのは、そのままの通りでCSSをリセットすることです。
どういうことかというと、CSSは人それぞれブラウザによって初期値が存在しており、同じではないため、最初にCSSをリセットするコードを記述しておいて、その後から、自分たちのCSSコードを書くという感じになっています。
リセットCSSにも色々な種類がありますが、今回は行数が少ないこれをコピペしてCSSファイルの一番上に追加してみてください。
２０番くらいまで、リセットCSSを入れ忘れていたので、スクリーンショットのレイアウトと少し違う感じになると思いますが、一度一気に進んでみていただければと思います。
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers
*/
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
/* border-collapse: collapse; */
border-spacing: 0;
}
/* iOSでのデフォルトスタイルをリセット */
input[type="submit"],
input[type="button"] {
border-radius: 0;
-webkit-box-sizing: content-box;
-webkit-appearance: button;
appearance: button;
border: none;
box-sizing: border-box;
cursor: pointer;
}
input[type="submit"]::-webkit-search-decoration,
input[type="button"]::-webkit-search-decoration {
display: none;
}
input[type="submit"]::focus,
input[type="button"]::focus {
outline-offset: -2px;
}１７ 画像のレイアウトを整える
現状、画像がでかすぎるので小さくします。
また、画像を左側、テキストを右側に配置するようにします。
Javascript上にHTMLのタグを書いて、CSSでスタイルを書けばできます。
var html = `
<div class="card_link">
<img src="${thumbnail_url}"/>
<p class="test_color">${title}</p>
</div>
`;２つをcard_linkという名前のクラスで囲ってみました。
card_linkにCSSを与えてみます。
.card_link {
height: 240px;
width: 50%;
overflow: hidden;
}縦が240px、横が50%、領域から画像がはみ出さない、というのが実装できました。
画像の幅/縦を調整します。
.card_link img {
max-width: 180px;
height: 240px;
object-fit: cover;
}
画像がいい感じになりました。横幅の最大値、高さ、画像を要素内にいい感じに収めるやつをCSSで書いています。object-fitは画像では、よく使います。containやcoverがよく使われると思います。
また、
.card_link img {
}というのは、card_linkクラスの中のimgタグに対してスタイルを当てるという書き方です。
間にあるのは半角スペースなので注意してください。
１８ 消えたタイトルの謎
タイトルが消えています。どこに行ったのでしょうか？
確認していきましょう。
検証→Elementsを見ると、画像のようになると思います。その中を掘り進んで、card_linkのところを表示します。
検証画面（右のやつ）の消えたテキストのところをクリックすると、左の画面で「ここにあります」みたいなやつがでてきます。
どうやら、下の画像と重なっているみたいです。
１９ 画像とテキストを横並びにしてみる。
横並びにする方法は、色々ありますが、今回はdisplay:flexというのを使います。
これは、親→子２つがあるとしたら、子の２つの要素を横並びにするというやつです（正確には、親の横幅が子の横幅の合計より大きい場合、横並びになります）
試しにやってみましょう。
今回、親要素は、card_linkというクラスなので、このクラスにdisplay:flexを与えてみます。
.card_link {
height: 240px;
width: 50%;
overflow: hidden;
display: flex;
}
横並びになりました。いい感じです。
画像がくっついているので、余白をつくります。
margin-bottom: 8px;
間隔が空きました。
このカード自体を横並びにして２列ずつにしたいと思います。
先ほどHTMLに書いたcontentsにclassを付与します。
index.html
<div id="contents" class="contents"></div>index.css
.contents {
display: flex;
}Javascriptでタグを付与する上のタグが親なので、その親に対してdisplay:flexを与えます。
上の画像みたいになりましたか？僕は、笑いました。
これは、display:flexが通常「折り返さない」になっているためです。
折り返すようなCSS を書いてあげましょう
.contents {
display: flex;
flex-wrap: wrap;
}
一気にゴールが近づいてきた！！！！！！！！
２０ タイトル、企業名、タグを整える
まず、サムネイルは左、テキスト系は右、というカードの構成なので、分かりやすいようにテキストである右側をdivで囲ってあげましょう。
var html = `
<div class="card_link">
<img src="${thumbnail_url}"/>
<div class="text_wrap">
<p class="test_color">${title}</p>
</div>
</div>
`;
for (var i = 0; i < posts.length; i++) {
var title = posts[i].title;
var thumbnail_url = posts[i].thumbnail_url;
var name = posts[i].name;
var type = posts[i].type;
var position = posts[i].position;
//htmlという名前の変数で事前に定義してみる
// var html = '<p class="test_color">' + title + '</p>';
//こういう書き方もできる。こっちの方が今回は見やすい。
var html = `
<div class="card_link">
<img src="${thumbnail_url}"/>
<div class="text_wrap">
<p class="job_title">${title}</p>
<p class='client_name'>
${name}
</p>
<div class='tag'>
<p class='job_type'>#${type}</p>
<p class='job_position'>#${position}</p>
</div>
</div>
</div>
`;
//変数でappendする。
$('#contents').append(html);
}一気にコード増えてますが、
name、type、positionの変数の定義、企業名とタグのHTMLを追記しました。
タイトルのところのクラス名をテストから変更しました。
テキストが現れたのでCSSを追加します。
.job_title {
font-size: 16px;
font-weight: bold;
padding: 8px;
margin-bottom: 0;
}
.client_name {
padding: 8px;
font-weight: lighter;
margin-bottom: 0;
}
.tag {
display: flex;
}
.tag p {
margin-left: 8px;
color: white;
background: rgb(50, 175, 223);
padding: 3px;
font-size: 11px;
border-radius: 15px;
margin-bottom: 4px;
}font-size: フォントのサイズ、font-weight; フォントの太さ、padding:要素ないの余白、background: 背景の色、 rgb():色の指定の仕方、 border-radius:角を丸める
いい感じすぎる。
２１ 企業名の前に企業ロゴを入れる
var client_logo = posts[i].logo_url; <p class='client_name'>
<span class='client_logo'>
<img src='${client_logo}'>
</span>
${name}
</p>spanタグは、インライン要素と言われるやつで、簡単な話、横並びになります。
.client_logo {
height: 24px;
width: 24px;
}
.client_logo img {
height: 24px;
width: 24px;
object-fit: contain;
}
ロゴが追加されていい感じになりました。
imgタグをspanタグで囲って、大きさをいい感じに調整しました。
※ここでリセットCSSを入れたので、スクリーンショットのレイアウトと少し違ったと思います。
２２ 残りの情報を表示する
var logo = 'https://moovy.jp/images/moovy_beta.png';
var message = posts[i].message;<div class=”tag”>の閉じタグの下に
<p class='job_message'>${message}</p>
<div class='logo_wrap'>
<img id='logo' class='logo' src='${logo}' class='client_logo' alt='ロゴ'/>
<p>動画を見る<span>▶︎</span></p>
</div>を追記します。
ちょっとメッセージの部分が長すぎるので、文字数を減らしたいと思います。
//メッセージの文字数を削って...にする
const MAX_LENGTH_MESSAGE = 40; //文字数上限
var cut_message = ''; //カット後の文字列
if (message.length == 0) {
} else if (message.length > MAX_LENGTH_MESSAGE) {
cut_message = message.substr(0, MAX_LENGTH_MESSAGE) + '...';
} else {
cut_message = message;
}message.length というのは、メッセージという変数の文字数を意味します。
40文字以上であれば、０〜４０文字を切り取って、…を足すというものです。
４０文字未満なら、そのままですね。
さきほど書いておいたメッセージの部分のところを
<p class='job_message'>${cut_message}</p>に書き換えます。
文字数が減って、…になりました。
が、しかし、何やら表示できている情報が減りました。
検証→Consoleのエラーを確認します。
index.js:27のところがエラーになっているとのことなので、27行目をみます。
if (message.length == 0) {この行がエラーになっているようです。
配列で７個目のデータがエラーになっているようなので、みてみます。
messageがNULLになっていることが分かりました。どうやらその辺がエラーに繋がっていそうな気がします。
lengthというのは、0文字であれば0が表示されるのですが、NULLであればエラーになるようです。
なので、
var message = posts[i].message || '';messageの定義の段階で、このようにしてみてください。
これは、posts[i].message があれば、それを代入する→なければ空のテキストが入る という意味になります。エルビス演算子というやつで、やっていることはif文と同じような感じですが、短くかけたりするというやつです。
バグが取り除かれて、表示されました。
最後に、動画を再生するためのページへのリンクを追加しましょう。
２３ カードにリンクを設定する
リンクを設定するときは、<a> </a> を使います。
今回は、
var html = `
`
の最初の<div class=”card_link”></div>を
に変えてみます。
リンクが設置できました！
ただ、テキストが変になりました。
なので、テキストの装飾を外します。
ついでに、枠線を書きます。
.card_link {
height: 240px;
margin: 0 auto;
overflow: hidden;
display: flex;
margin-bottom: 8px;
border: 1px solid #ddd;
width: 48%;
color: black;
text-decoration: none;
border-radius: 4px;
}border: 1px solid #ddd;
枠線の表示です。
width:48%にした理由は、borderの分領域が増えた分、50%を超えてしまって、行が変わってしまったためです。
ついでに、となりのカードと間隔を開けるため、48%にしました。
text-decoration:none; でaタグについてしまったアンダーラインを削除しています。
border-radius:4px; でカードの４角にちょっとした丸みを付与しています。
できました！！！！！！完成！！！！！！！
書いた人
24 全ての工程をすっ飛ばしてiframeで実装する
弊社では、さらに、iframeというタグを利用して、タグを埋め込むだけで実装することができます。
この2行のコードをHTMLファイルに埋め込んでみてください。
<iframe style="border: none; height: 305px; width: 100%; max-width: 400px; min-width: 240px;" id="moovy_iframe89" frameborder="0" scrolling="no" src="https://moovy.jp/api/projects/89"></iframe>
<iframe style="border: none; height: 305px; width: 100%; max-width: 400px; min-width: 240px;" id="moovy_iframe95" frameborder="0" scrolling="no" src="https://moovy.jp/api/projects/95"></iframe>このような表示なったでしょうか？
このように、コピペで実装する方法を用意しています。
コピーするコードは、コンテンツの１件１件URLが違うのですが、動画の管理画面上からコピーすることができます。
まとめ
いかがだったでしょうか？
一連の流れを全てやったので長かったと思うのですが、1個ずつ進めて、1個ずつ確認していくというのは、コードを書くのに慣れるまでは大切な手順だと思うので、ぜひやってみてください！
分かりにくかったー、というところがあれば、Googleフォームからお伝えいただければと思います。
よろしくお願いします。
