vol.45 すぐに使える！アコーディオンメニューの実装
こんにちは。エンジニアの富澤です。
今回はWebページでよくみかけるアコーディオンメニューについて勉強しましたのでご紹介します。
アコーディオンメニューは、限られた範囲で多数の項目を一覧したいときに便利です。
※本TIPSではHTMLとCSSの基本的な知識があることを前提とします。
また、jQueryも使用しているためこちら（jQueryサイト）からソースをダウンロードするかgoogleなどが配信しているCDNサービス（https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js）を利用し、HTMLに読み込んでください。
シンプルな実装
シンプルなアコーディオンメニューを実装していきます。
html
<div class="a_container">
<div class="a_item">demo</div>
<div class="a_contents">
<p>ダミーダミーダミー</p>
<p>ダミーダミーダミー</p>
<p>ダミーダミーダミー</p>
</div>
</div>
css
.a_container{
width:500px;
margin:50px auto;
}
.a_item{
background:#70f9a1;
color:#fff;
text-align:center;
padding:10px;
cursor:pointer;
}
.a_contents{
display:none;
padding:10px;
height:110px;
border:solid 1px #d6dddf;
}
.a_contents p{
margin:10px 0;
border-bottom:dashed 1px #d6dddf;
}
jQuery
$(document).ready(function(){
$(".a_item").click(function(){
$(this).next().slideToggle(300);
});
});
class名「.a_contents」を「display:none;」に設定し、アコーディオンメニューのコンテンツ部分を非表示にしておきます。
class名「.a_item」に対しクリックによって発動するイベント「click(function(){});」を、その中に「slideToggle()」を設定し、クリックした時にスライドしながらコンテンツ部分が開閉するようにします。
ワンポイント
.click(function(){});
クリックした時に処理を実行するイベントを登録できます。特定のclass名、id名に対して、設定をすることができます。ここではclass名「.a_item」がクリックされたときにイベントを発生させます。
$(this).next().slideToggle(300);
「this」はイベントを登録している要素に対し、そのアクションを行った要素のみに有効です。class名などを指定すると、「そのclassがあたっているすべての要素」に対して発動してしまいますが、「this」にすると押したボタンに対してのみにイベントが有効になります。
「next()」は、「次」にあたる兄弟要素を指します。ここでは、クリックしたボタンの次の要素のコンテンツ部分（「.a_contents」）を指します。
「slideToggle()」は要素が非表示の時はslideDownを行い、要素が表示している時はslideUpを行います。（）内には時間を指定することができます。「slideToggle(300)」の場合、アニメーションに0.3秒の時間をかけて動作します。
リッチな実装
シンプルなアコーディオンメニューを元に機能を増やし、リッチな実装にしていきます。
増やしていく機能を下記にまとめました。
・マウスオーバーしたとき、色を変化させる
・クリックしたとき、選択中のものに色をつける
・一方が開いていて、開いていない方のアコーディオンをクリックしたとき、
開いているアコーディオンを閉じる
・クリックし、選択したものの本文を遅れてフェードインさせる
・右側の矢印に開閉が分かるようなアニメーションをつける
html
<div class="a_container">
<div class="a_item_r">demo</div>
<div class="a_contents_r">
<p>ダミーダミーダミー</p>
<p>ダミーダミーダミー</p>
<p>ダミーダミーダミー</p>
</div>
<div class="a_item_r">demo</div>
<div class="a_contents_r">
<p>ダミーダミーダミー</p>
<p>ダミーダミーダミー</p>
<p>ダミーダミーダミー</p>
</div>
</div>
css
.a_item_r{
background:#70f9a1;
color:#fff; text-align:center;
padding:10px; cursor:pointer;
position: relative
}
.a_contents_r{
display:none;
padding:10px;
height:110px;
border:solid 1px #d6dddf;
}
.a_item_r:hover{
background-color:#6aec99;
}
.selected{
background-color:#ffc44d;
}
.a_contents_r p{
display:none;
margin:10px 0;
border-bottom:dashed 1px #d6dddf;
}
.a_item_r:after{
background:url(arrow_dw.png) no-repeat left top;
content: "";
display: block;
width: 20px;
height: 12px;
position:
absolute;
right: 20px;
background-size: 100% auto;
top:15px;
bottom:0;
-webkit-transition: 0.3s linear;
-moz-transition:0.3s linear;
-ms-transition:0.3s linear;
transition: 0.3s linear;
}
.open_close_r:after{
-webkit-transform: rotateZ(180deg);
transform: rotateZ(180deg);
}
ポイント１ 擬似要素「:hover」
指定することでマウスオーバーしたとき、CSSに変化を与えることができます。
ここでは「.a_item_r:hover」にbackground-colorを指定することで「.a_item_r」をマウスオーバーしたとき、色に変化をさせることができます。
ポイント２ 擬似要素「:after」
要素の末尾に要素を追加し、CSSでデザインすることができます。
ここでは右側の矢印を「:after」で挿入しています。「:after」を使うときcontent:""を指定するのがポイントです。
ポイント３ 「transiton」
時間的変化をまとめて指定することができます。ここでは「transition: 0.3s linear;」（0.3秒間を一定のスピードで変化）を指定しています。 これにより上記ソースにある「transform」のスピードを調整しています。
ポイント４ 「transform」
要素に対して回転させたりする動きを適用する際に使用します。ここでは「.open_close_r:after」に「transform: rotateZ(180deg);」を指定することで、アコーディオンメニューが開いた時に180度回転する設定をしています。
※「transition」「transform」は、CSS3から新しく登場したプロパティで記述の際、各ブラウザ用の"ベンダープレフィックス"が必要になります。
-webkit-transform : Safari,Google Chromeなど
-moz-transform : Mozila Firefox系
-ms-transform : Internet Explorer系
$(document).ready(function(){
$(".a_item_r").click(function(){
$(".a_item_r").removeClass("open_close_r");
$(".a_contents_r p").css("display","none");
$(this).next().slideUp(300);
$(this).removeClass("selected");
if($(this).next().css("display")=="none"){
$(this).addClass("open_close_r");
$(".a_contents_r").slideUp(300);
$(this).next().slideDown(300);
$("+.a_contents_r p",this).fadeIn(1500);
$(".selected").removeClass("selected");
$(this).addClass("selected");
}
});
});
class名「.a_item_r」に対しクリックによって発動するイベント「click(function(){});」を設定します。
その中に、2回目以降の動作を正しく実行するよう
「$(".a_item_r").removeClass("open_close_r");」→「.a_item_r」から「.open_close_r」を消去
「$(".a_contents_r p").css("display","none");」→「.a_contents_r p」を非表示にする
「$(this).next().slideUp(300);」→クリックした要素の次の要素に対しslideUpする
を設定しておきます。
次に、ifについてです。if構文は「条件分岐」といいます。
「if($(this).next().css("display")=="none")」は、もし「this」の次の兄弟要素が非表示ならば、何らかの処理を実行する、という意味になります。
何らかの処理に値する部分はif( 条件式 ) { 何らかの処理 }中括弧部分に記述します。
$(this).addClass("open_close_r"); 「open_close_r」を追加する
$(".a_contents_r").slideUp(300); 「.a_contents_r」をスライドアップする
$(this).next().slideDown(300); 「this」の次の兄弟要素をスライドダウンさせる
$("+.a_contents_r p",this).fadeIn(1500); 「"+.a_contents_r p",this」をフェードインする
$(".selected").removeClass("selected"); 「.selected」に対し「.selected」を削除する
$(this).addClass("selected"); 「this」に対し「selected」を追加する
・マウスオーバーしたとき、色を変化させる
.a_item_r:hover{background-color:#6aec99;}
background-colorを指定することで「.a_item_r」をマウスオーバーしたとき、色に変化をさせることができます。
・クリックしたとき、選択中のものに色をつける
$(this).removeClass("selected");
$(this).addClass("selected");
「removeClass」は指定したclassの削除をします。「addClass」は指定したclassの追加をします。
ここではマウスオーバーしたときのために入っています。
・一方が開いていて、開いていない方のアコーディオンをクリックしたとき、開いているアコーディオンを閉じる
$(".a_contents_r").slideUp(300);
$(this).next().slideDown(300);
最初に開いているアコーディオンを閉じる処理をし、次にクリックしたアコーディオンを開きます。
・クリックし、選択したものの本文を遅れてフェードインさせる
$("+.a_contents_r p",this).fadeIn(1500);
「fadeIn()」プロパティをつかって、非表示の要素をフェードインさせます。
ここでは、アコーディオンメニューが開いたときに文字がフェードインするようにしています。「.fadeIn(1500)」の場合、アニメーションに1.5秒の時間をかけて動作します。
・右側の矢印に開閉が分かるようなアニメーションをつける
$(".a_item_r").removeClass("open_close_r");
$(this).addClass("open_close_r");
「.open_close_r」が矢印のアニメーションに必要な設定になっています。
そのため、「removeClass」と「addClass」を用いてclassの削除と追加をします。
アニメーションの設定はCSSで設定しています。
ワンポイント
if( /* 条件式 */ ){
/* 何らかの処理 */
}else{
/* 別の何らかの処理 */
}
if内の要素が真である場合に処理を行います。偽の場合、else{}内の処理を行います。
CSS3での実装
これまではHTML+CSS+jQueryで実装を行いました。実はCSSのみでの実装も可能なのです。
CSSのみで実装を行うためにはフォームの構成部品であるチェックボックスのON・OFFを利用します。
html
<div class="a_container">
<label for="Panel1">demo<label>
<input type="checkbox" id="Panel1" class="open_close_c"/>
<ul>
<li>ダミーダミーダミー<li>
<li>ダミーダミーダミー<li>
<li>ダミーダミーダミー<li>
<ul>
<div>
css
label {
display: block;
background-color: #70f9a1;
color: #fff; padding: 10px;
text-align:center;
}
label:hover{
background-color:#6aec99;
}
input[type="checkbox"].open_close_c{
display: none;
}
ul{
border:solid 1px #d6dddf;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
transition: all 0.3s;
margin: 0;
padding: 0;
list-style: none;
}
li{
margin:10px 0;
color:#666666;
border-bottom:dashed 1px #d6dddf;
}
input[type="checkbox"].open_close_c + ul{
height: 0;
overflow: hidden;
}
input[type="checkbox"].open_close_c:checked + ul{
height: 110px;
padding:10px;
}
class名「.open_close_c」に「display:none;」を設定し、チェックボックス自体は非表示にします。「ul」に対してアニメーションが発生したときのスピードを、「transition」で設定します。
「ul」を非表示にする際には「display」での非表示をつかわず、hightをつかいます。
「transition」のアニメーションがdisplayに対して無効のため、アニメーションにできないからです。
設定は「height:0;」「overflow:hidden;」とします。
チェックボックスをチェックしたとき、「height:auto;」を設定することで、「hight」が0から110pxになる過程が、アニメーションするようになります。
非表示のチェックボックスをチェックするような動作をさせるために「lavel」を利用します。
「input type="checkbox"」に対して、idを設定しておきます。
「label」タグ内にforを設定します。「for」は「input type="checkbox"」で設定したid名と同様にしておきます。
この設定をすることにより、「label」をクリックとチェックボックスのON・OFFが連動するようになります。
これによって、
「input[type="checkbox"].open_close_c + ul」の場合（チェックされていない場合）と
「input[type="checkbox"].open_close_c:checked + ul」の場合（チェックした場合）で
CSSを分けて書くことができます。
ワンポイント
input[type="checkbox"].open_close_c:checked + ul
「input[type="checkbox"」は、属性を使ったCSSの指定方法です。属性名や属性値によりスタイルの適用を指定することができます。
「input[type="checkbox"].open_close_c:checked + ul」は、クラス名「.open_close_c」を持つ「input[type="checkbox"」の次の兄弟要素である「ul」対してCSSをかけるための記述です。
まとめ
いかがでしたでしょうか？
アコーディオンメニューは、「click」イベントを用いて対象に「class」を追加することで様々な実装をすることができます。しかし、jQueryはソースを上から読み込んでいくため、記述は正しくても順番が違うと実装できないことがあり苦労しました。またCSS3の登場でjQueryを使わなくても実装可能になりました。今後も新しい実装方法が出てくるかも知れません。Web業界の進歩はとても早いので遅れをとらぬよう、日々勉強していきます。
vol.44 モバイルページ高速化 AMP HTMLを作成してみよう
こんにちは。エンジニアの毛利です。 PCと同等のWeb環境が見られるスマホが普及し、年々Webコンテンツは肥大化しています。
Webページ表示の高速化は、限られた通信環境で快適な閲覧をするために必須となっています。
高速化のアプローチ方法は、Webプログラミングの最適化、画像の最適化、サーバー強化、チューニング、検索エンジンへの最適化など様々な方法があります。
Googleをはじめとして様々な検索エンジンはユーザーのニーズに応えるため、検索エンジンでの表示をモバイル最適化を優先、優遇しています。
「モバイルファースト」の概念が、一般的に定着してつつある中、 Googleはスマートフォンで静的なページを瞬時に表示できるようなフレームワークの提供を開始しました。
それが「AMP」。
今回はWebを高速表示させるための新しい枠組み「AMP」についてご紹介します。
AMPとは
Accelerated Mobile Pagesのことで、Google主導のもと、モバイルページの速度向上のために発足したオープンソースプロジェクトです。
AMP HTMLという新しいフレームワークの規則に沿って、コーディングを進めていきます。
従来HTMLそのままの形だと、画像やインタラクションなど、流用できない部分が多々あり、新たにデザイン、コーディングが必要になるものが多いです。 ただ、タグに関してはほとんどHTMLのマークアップ規則のもとで記述できるので、コツさえおさえれば間違いのないものになります。
プロジェクトが発足してすでにページに組み込まれているAMPですが、現在も開発が進んでおり、今後AMP専用の新しいカスタムタグが増えるそうです。
基本的なサンプルは以下のサイトで書かれていますので、これらを実際にコーディングをしてポイントをおさえていきます。
https://github.com/ampproject/amphtml/blob/master/spec/amp-html-format.md（英語）
AMPのよい所
・表示速度が早い
単純な高速化だけではなくAMP HTMLでマークアップすることで検索エンジン側のサーバーにキャッシュされる仕組みとなっています。
・AMPコンテンツとして画像付きでわかりやすい一覧が表示される
検索トップに画像付き一覧で表示されるため、他コンテンツと比較し目立ちます。
AMPの注意点
・AMP HTMLフレームワークの規則に沿ってコーディングをするため、従来のHTMLを変えなくてはならない
記述そのものに制約や独自のきまりがあり、外部から自分で記述したcssやjsも読み込めません。
・タグの使用に制限がある（img、iframe、form、inputなど）
高速化、コンテンツ最適化のためにいくつかのタグは使用することを制限、もしくは禁止されています。
imgやiframe等はそれぞれamp-img、amp-iframeなどのカスタムタグを使うように決められています。
formやinput等は仕様が禁止されています。
h1などの見出しタグ、div、p、ul、li、tableタグなど基本的なタグは使用可能です。
・JSが使えない
Javascriptは原則使えません。AMPページを検索結果に表示する時に必要な「application/ld+json」のみ記述できます。
AMPでコーディング
コーディングを進めていくためのポイントを解説していきます。
<!doctype html>
<html ⚡>
<head>
<meta charset="utf-8">
<title>Sample document</title>
<link rel="canonical" href="オリジナルページのリンク">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<style amp-custom>
h1 {color: red}
</style>
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "NewsArticle",
"headline": "Article headline",
"image": [
"thumbnail1.jpg"
],
"datePublished": "2015-02-05T08:00:00+08:00"
}
</script>
<script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>
<style amp-boilerplate>
body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;
-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}
@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}
@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}
@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}
@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}
@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style>
<noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
<script async src="https://cdn.ampproject.org/v0.js"></script>
</head>
<body>
<h1>Sample document</h1>
<p>
Some text
<amp-img src=sample.jpg width=300 height=300></amp-img>
</p>
</html>
!doctype
宣言はhtml5と同様になります。
html
「<html ⚡>」もしくは「<html amp>」と記述します。
link rel="canonical"
オリジナルページのURLを記述します。
meta name="viewport"
content="width=device-width,minimum-scale=1,initial-scale=1"
<style amp-custom>
オリジナルのCSSはここに記述します。外部CSSを読み込むことはできません。
<script type="application/ld+json">
schemaの記述ができます。
amp-carousel-0.1.js
必ず読み込みます。
<style amp-boilerplate>
必ず記述します。内容の変更はできません。
img
画像はamp-imgというカスタムタグで読み込みます。
width、heightが必須項目です。layoutというオプションが4種類あります。
amp-pixel
analyticsコードを入れます。
tid=アナリティクスID
画像のlayoutオプション一覧です。
fixed
width、heightに従い、固定幅になります。
responsive
コンテンツ幅に応じて、画像が拡縮します。画像比率はwidth、heightに基づきます。
fixed-height
縦幅のみ固定になります。widthは指定しない、もしくはautoにします。
fill
ブラウザの有効幅いっぱいに表示されます。画像比率は保持されません。
json Schemaの記述です。必須項目を抜粋しました。
Google Developerから情報が出てますので、推奨項目も含めた詳しい情報はこちらを参照下さい。
Mark Up Your Content Items | Search | Google Developers
headline
見出しを110 文字以内で書きます。
image
記事の画像です。
image.url
画像URLです。
image.height
image.width
画像の幅を設定します。画像の横幅は696px以上です。
publisher
記事の発行者を書くのに必要な項目です。
publisher.name
発行者の名前です。
publisher.logo
ロゴの名前です。
publisher.logo.height
publisher.logo.width
ロゴの幅を設定します。
datePublished
記事が公開された日時です。ISO形式で書きます。
author
記事の著者情報の項目です。
author.name
著者名です。
最後にオリジナルページに下記のタグを挿入します。
<link rel="amphtml" href="./amp/vol44_amp.html">
なお、公式のガイドラインは下記のページにのっていますので一度目を通してみてください。
https://github.com/ampproject/amphtml/blob/master/spec/amp-html-format.md#html-tags（英語）
まとめ
以上がAMPのためのコーディングのポイントになります。
現状、AMPが検索エンジンに適用されているサイトがあまりなく、確実に確認できるのがGoogleがAMPプロジェクトのパートナーとして認めているメディアサイトでしょうか。
（産経新聞やマイナビニュースなどをGoogle検索すると確認できます。）
検索方法も確立しておらず、どうすればAMPが表示されるかはしばらく試行錯誤が必要なのではないでしょうか。
今回TIPSで作ったHTMLを設置し、サイトをAMPとして表示させるために色々と模索していきたいと思っています。
vol.43 動画コーデックをマスターしよう
こんばんは。ディレクターの白子です。
動画編集をしたり、編集した動画を書き出す際に必要になってくる「コーデック」。
たくさんの種類があり、どこでどのコーデックを使うのがいいのかなど
迷ってしまいますよね。
今回は、動画を編集する際に必要なコーデック、 動画を書き出す際に必要なコーデックをご紹介します。
（使用PC：Mac／アプリケーション：Adobe premiere CC）
そもそもコーデックとは？
動画は簡単にいうと「静止画がたくさん集まったパラパラ漫画のようなもの」です。
動画の編集の際に必ず出てくる「フレームレート」は1秒間に何枚静止画が使われているかを表すものです。
例えば「1920×1080」のフレームレート「30fps」は1秒間に1920×1080の静止画が30枚使われていることになります。
そうなると1分間に「1920×1080」の静止画が「1800枚」必要となります。
この膨大な静止画の集合をそのまま動画にしてしまうと、短い尺でも何GBという大きなファイルサイズになってしまいます。
そのため「コーデック」という「圧縮のアルゴリズム」を使い、何枚もの静止画を色々な方法で動画ファイルへと圧縮しています。
圧縮することで、動画のファイルサイズを大幅に小さくしています。
コーデックの圧縮方法
コーデックで圧縮する方法は主に2つの方法があります。
1：可逆圧縮（ロスレス圧縮）
圧縮したデータをデコード（再生）したときにオリジナルと全く同じ状態（音質・画質が劣化しない）に復元する圧縮方法。
ファイル内のまとめられる部分をできうる限りまとめファイルサイズを圧縮します。
無圧縮データよりもファイルサイズは小さくなりますが、非可逆圧縮と比べるとファイルサイズは断然大きいままです。
オリジナルデータを損ねないという点でとても優れていますが、ファイルサイズの大きさ、また汎用性の面で非可逆圧縮コーデックの方が扱いやすいです。
2：非可逆圧縮
圧縮したデータをデコード（再生）したときにオリジナル通りに復元できない（音質・画質が劣化する）圧縮方法。
人が、見分け（聞き分け）られないレベルの部分をなくしてファイルサイズを圧縮します。
圧縮率が高いほど削ぎ落とされるデータ量が増えるので、圧縮率は高くファイルサイズは小さくなりますが、音質・画質は劣化してしまいます。
代表的なビデオコーデック
たくさんの種類がある中で代表的なものはMPEG-1、MPEG-2、MPEG-4/AVC（H.264）、DivX、WMVなどです。
今主流のコーデックはMPEG4 AVC（H.264）。
MPEG4、AVC、H.264など呼び方はちがいますが全て同じものです。
高画質で圧縮率も高く、低ビットレートから高ビットレートまで対応、Blu-Rayや最新のビデオカメラなどに採用されています。
Apple ProRes 422について
そんなたくさん種類がある中でのおすすめはApple ProResです。
ほとんど劣化がなく、放送レベルの映像をMacでも編集できるデータの規格です。
非圧縮のファイルよりファイルサイズが小さく、動作性もよく編集時の操作性が損なわれません。
SDファイルサイズで HD画質を実現しているため、映像業界で広く採用されています。
動画の編集はアプリケーションを行ったり来たりを繰り返して進んでいきます。
色調整や補正をしてレンダリング（書き出し）、特殊エフェクトを使ってレンダリング、映像のカットの並び替えをしてレンダリング、文字を入れてレンダリングして…というように何回も映像に手を入れてレンダリングすることになります。
何度も何度もレンダリングを繰り返すうちに、映像ファイルはどんどん劣化してしまっています。
その点、ProResは何回レンダリングを繰り返しても品質が劣化しない特徴があります。
私も過去には、何度もレンダリングを繰り返し、その度に画質が悪くなっていく…という経験をしました。
そのときはエンコード（変換）の設定が合っていなかったのかを必死に探していましたね。
動画の編集は編集する映像をまずProResに変換して、ProResで編集、ProResで書き出し…とProResで完結するため幅広く支持されています。
実際にMacでProResを使う
まずは以下のページからにProRes書き出し用のプリセットをダウンロードします。
そしてAdobe Media Encoderにプリセット（.epr）を読み込めば使えます！
Adobe premiereを使用している場合、直接premiereから書き出すこともできるのですが一度に複数書き出すときなどにMedia Encoderを使うと便利です。
エンコードに使うコーデックの選び方
最終的に編集した動画を書き出す場合、動画の使い方によって使うコーデックはかわってきます。 Youtubeにアップする、Facebookにアップする、Instagramでアップ…など、SNSだけでも様々なファイル形式が必要になってきます。
動画はコンテナと呼ばれる規格の中にさまざまな圧縮形式で、圧縮された動画が格納される構造になっています。
そのため形式(コンテナ)の種類をまず選択します。
形式の選択
よく使用される形式についてご紹介します。
・MPEG2
容量が少なく他に比べると処理時間も短い
・Microsoft AVI
Microsoftが策定した規格
・QuickTime
Appleが策定した動画の規格。
macで見る場合などにQuickTimeがいいでしょう。
他の形式よりも多少サイズが大きくなる傾向があります。
・H.264
Blu-rayなどで利用されている新しい規格で、容量が軽く高画質なのですが、圧縮に時間がかかる。
youtubeなどが推奨しているのはこの規格です。
・WindowsMedia
非常に容量が軽く、ネットにアップしたりするには便利ですが、画質はそれほどよくない。
プリセットの選択
次に動画を使用する用途に合わせてプリセットを選択します。
「こう使いたい！」にピッタリ合ったプリセットがあれば、この後の設定は全部自動で選択してくれます。
用途に合うプリセットがない場合は、カスタムで設定していきます。
・NTSC DV
日本で使用されている非ハイビジョンテレビくらいの画質といわれています。
（PALはヨーロッパで使用されている形式。国内では使用する機会はほぼない）
・NTSC DV ワイド
上記と同じ解像度ですが、画面の比率が16:9で、ピクセル縦横比が1.2。
・HDV/1440×1080
HDVテープに記録を行う形式で、HD（ハイビジョン）です。
AVCHDと比べると編集に必要なマシンスペックが低くてもよい点や、テープメディアに記録できる点に安定性があり、業務用途で使用されています。
画面サイズは1440×1080、29.97フレームです。
・720p
画面サイズ1280×720で、ハイビジョンの中では最も解像度が低い規格です。
pはプログレッシブ形式の記録形式です。エフェクトや合成を行うのにオススメです。
・1080i/p
画面サイズ1920×1080です。フルハイビジョンと呼ばれます。
最も解像度が高いため、データ容量は重くなってきます。
コーデックの選択
ここで圧縮の形式を選択します。
形式でH.264などを選んだ場合には、圧縮形式も自動的にH.264となってしまうため、選択出来ない場合があります。
・H.264
高画質ですが、処理に時間がかかります。
・DV NTSC
DV画質の圧縮形式。画質と比べ容量が大きい。
・なし(非圧縮)
圧縮がかかっていないので、最も高画質で劣化が無い状態です。
そのため容量がとても大きく不便です。容量が大きいので、低スペックのPCだと再生に負荷がかかったり、再生出来ないということが起こります。
合成などで使用する場合には非圧縮がオススメですが、撮影段階から非圧縮データで保存していた方がよいです。
ムービーの画面サイズを設定
使う用途によって画面サイズは変化します。
一般的な用途としては以下のサイズが考えられます。
・ 640×480：PC上で4：3の画面比率として使用される
・720×480：HD(ハイビジョン)でないアナログテレビの画面サイズ
・ 1280×720：一番解像度の低いハイビジョンの規格
・ 1440×1080：HDVなどで使われるハイビジョンの解像度
・ 1920×1080：フルハイビジョン
フレームレートの設定
一般的には29.97です。
24フレームなどを利用する場合は、撮影段階からフレームレートを考えておいた方がよいでしょう。
おわりに
いかがでしたか？
コーデックなどと一言でいってもたくさんの種類があり、それにまつわる設定がたくさんあります。
これらを全て覚えなくても必要なもの、よく使うものをまずはおぼえていければと思います。
参考サイト
Adobe Premiere Pro CCは、ノンリニア編集ソフトのデファクトスタンダード（業界標準）か!?
Adobe Media Encoder CC でProRes変換
QuickTime-ProRes422とは一体…
vol.42 コンフリクト、エラーに対応しよう！ Github運用実践編
こんにちは。Webエンジニアの毛利です。
今回はGitHubについての話です。 GitHubではソースやファイルを管理するとき、複数の更新者が同時に更新しても変更点のみが蓄積されていくのでファイルをサーバーから直接ダウンロードしたり、そのためファイルの受け渡しや、最新版かどうかを確認したり、間違えて古いファイルを編集してしまった場合のリカバリーなどの必要がなくなるため、ファイル管理の手間が大きく減少します。
ただ、一方で問題も起こります。
よく発生する問題が「コンフリクト」です。
今回この「コンフリクト」がどの場合にどういう風に起こるのか、デスクトップアプリを運用してわかったことをまとめていきます。
また「コンフリクト」以外のトラブルに関しても「commit」、「syncできない！」「デスクトップアプリケーションが動かなくなった！」などといった問題を「Github Desktop」アプリケーションで運用する際、解決する際に、役立ちそうな方法をご紹介します。
コンフリクトとは？
「変更の競合」を指します。複数人で同じファイルを編集し、同じ箇所を変更したり、
編集者が記述の順番を大きく変えたりなど変更があったとき、変更をマージできなくなる現象です。
どのような場面で起こるのか？
「Github Desktop」の場合、変更点をリモートリポジトリにcommitをpushするときに起こります。
具体的な操作方法は変更点を「commit」し、「Sync」するときに発生します。
コンフリクトが発生すると、黄色で示されます。
どうすれば解決できるのか？
この状態になったら、一度commitを「undo」し操作を取り消し、もう一度「Sync」を押します。
そうすると、コンフリクトを起こしたファイルに以下のようなメッセージが入ります。
========の上に表示されているのが「リモートリポジトリ」の変更点で、
========の下に表示されているのが「ローカルリポジトリ」自分が行おうとしている変更点です。
「Github Desktop」のアプリケーションでは基本的に==の下が自分が行った変更点として表示されます。
これらは内容を確認し、手動で修正する必要があります。
リモートリポジトリに反映した作業者に確認が必要な場合は確認をしてから変更を行うようにしましょう。競合箇所を修正し、再度「commit」、「Sync」することでコンフリクトを解消できます。
※コンフリクトが起こったファイルを修正せずに、そのままcommitしリモートリポジトリにpushしてしまうとエラーの文言が入った状態で「正しいデータ」として反映されてしまいます。
コンフリクトが起こった場合は必ずソースを確認し、手動で修正する必要があります。
Githubから出されるメッセージはよく確認しましょう。
コンフリクトを起こす「Github」運用4選
ローカルリポジトリから最新ファイルを取得しないで編集する
長い期間編集しておらず、他編集者が変更を加えていた場合、変更をリモートリポジトリから取得せずに編集を続け「commit」してしまうと高確率で起こります。
作業開始前には必ず「Sync」し、ローカルデータを最新化しましょう。
同時に同じファイルの同じ箇所を編集する
同じソースの同じ箇所を編集していると起こります。
共同作業者と連絡が取れる場合、自分がどこを編集するか伝えましょう。
編集箇所が競合する場合、作業のタイミングをずらしましょう。
ファイルサーバーから取得してファイルを更新する
リポジトリからデータを取得するのではなく、Webを公開しているサーバーなどからデータを取得して反映した場合に起こることがあります。
あまりこのような事を行うことはないと思いますが、サーバーOSによっては改行コードが変わってしまったり、見えないところでファイルの情報が変わってしまい、Githubのリポジトリデータとは全く同じデータではないかもしれません。
改行コードが変わってしまったとき
改行コードが変わると全行変更扱いになります。また、CRは基本的に認識されません。
（改行が反映されているはずなのにGithub上では全て1行に見える場合はこの状態になっている場合が多いです。）
改行コードはCRLF（Windows）、LF（Mac OSX、Linuxなど）が標準的です。
コンフリクト以外のエラー
コンフリクト以外にデスクトップアプリケーションのエラーがあります。
運用していて比較的起こりやすいエラーについて以下にまとめてみました。
文字エンコーディング
最近ではutf-8がほぼ定着しましたが、shift-jisで運用しているサイトもあると思います。「Github Desktop」では、shift-jisだと文字化けを起こしたり、意図した動作にならない場合があります。
大きいファイルを扱う場合
大きいサイズのファイル、または大量のファイルをリモートリポジトリに反映するとき、時間がかかったり、通信エラー、タイムアウトエラーが起きやすくなります。
通信環境に依存する部分でもありますが、GBを超えるデータを反映したり、数千のファイルを一気に反映するのはできる限り避けましょう。
ファイル数が多い場合、多少手間となりますが何回かに分けてcommitするとエラーを回避できます。
操作ミスや強制終了よるエラー
大きいファイルをcommitしようとして処理が終わらない、undoの反映前にアプリケーションで別の操作を行った、大きいファイルをリモートリポジトリから取得したときなど アプリケーションがエラーを起こしたり操作不能になる場合があります。
エラーの場合
操作不能の場合、一度強制終了し、アプリケーションを再起動します。
アプリケーションを再起動しても復帰しない
アプリケーションを使用しているパソコンの再起動をしてみましょう。処理途中のものがキャンセルされることで復帰できる場合があります。
パソコンの再起動をしても復帰しない
この場合はローカルリポジトリのデータを一度削除し、再びクローンする必要があります。
・アプリケーションを終了
・ローカルリポジトリファイルをゴミ箱に入れ消去
※削除するときはリポジトリをクローンしたフォルダごと削除
（隠しファイルが残っている場合があるため）
※ゴミ箱に入れたファイルが使用中で消去できない、またはゴミ箱に入らない場合、パソコンを再起動
・再起動後、残ったファイルを消去
削除完了後、アプリケーションを起動し、再びリポジトリをクローンします。
まとめ
いかがでしたでしょうか？
今回はGithubの運用に関して実務的な面からアプローチしていきました。
これらの便利な仕組みも必ずエラーや予期しないことが起こります。
エラーが起きた際、どう対処するか、落ち着いて的確に行わなくてはなりません。
いざ起こったときに慌てないように、こういったパターンを想定しておけば落ち着いて適切な対処ができるはずです。
より円滑に、より快適に開発運用するためにはノウハウを蓄積していくことが大変重要です。
ノウハウを少しずつでもためていき、より良い運用が行えるようにしていきましょう！
vol.41 ハンバーガーボタン実装で学ぶJSの基礎
こんにちは。デザイナーの寺田です。
Webサイトでよくみる三本線のメニューボタン。
海外でハンバーガーに見えると言われ 「ハンバーガーボタン」という名前になっています。
「ハンバーガーボタン 実装」で検索すれば ソースを公開しているサイトはヒットしますが、
ソースの中身を理解していないと実装しても不具合が出たり、 そもそも動きが実現できないことも。
今回は、Webサイトのメニューとしてよく使われる
ハンバーガーボタンをもとにJSの基礎をご紹介します。
デザイン上で長所と短所
◎長所
メニューの内容をWebサイト上に表示させなくとも、コンテンツリンクを実装できるハンバーガーボタンは、画面の表示領域を広くもつことができます。
そのため、ゆったりとしたデザインや大胆なレイアウトをスマートフォンでもできることが魅力です。
◎短所
コンテンツリンクを押すために1動作増えたことから、ユーザーエンゲージメントが半減したという記事もあります。
そのことは、Webサイトのユーザー離脱へとつながる可能性が高まります。
（ユーザーエンゲージメントとは、実際にアクションが取られたかどうかの指標。）
日頃、サイトに慣れ親しんでいるユーザーはハンバーガーボタンを認識していますが、 使用頻度の低いユーザーにとってはメニューを押すのに 1回動作が増えることは無意識的にストレスを感じているのかもしれないです。
作るサイトのターゲットによって、ハンバーガーボタンを使用することが合っているのかは考える必要があると思います。 ハンバーガーボタンだけでなく、デジタルの技術やWebの開発の進化が進んでいった際に、 サイトをつくる側の考えとつかう側の考えにすれ違いがないのか考えることが 最適なUIになると考えています。
苦労した下積み時代から、JS全盛期へ
JavaScriptの誕生は「1995年」。
意外と昔からある技術です。
1996年にマイクロソフトのInternet Explorer 3.0に搭載され、普及しました。
ですが、当初はプログラミングの知識がなくても手軽に始められる言語ということから、 素人が使うものとして扱われました。
また、無駄な動きを入れてページの読み込みを遅くするものとして敬遠されていたそうです。
Googleが2005年にGoogle MapでAjaxを使用。
ページの再読み込みをすることなく、Webサイト上で自分の位置が リアルタイムに移動する機能は多くの人が驚きました。
Ajaxを通してJSが注目され始めました。
現在、手軽にちょっとした動きをつけられたり、
簡単に面白いことができるJSはWebサイトで必ず使用されている言語ですね。
まずソースを見てみよう
今回はボタンを押したら、メニューが順に表示されるハンバーガーボタンを実装します。
※HTMLとCSSの基本的な知識があることを前提に説明を進めます。
jQueryも使用しているためこちら（jQueryサイト）からソースのダウンロードをお願いします。
今回JSで記述する内容はこれだけです。
$(document).ready(function() {
$(".menu-trigger").click(function () {
$(this).toggleClass("active");
$(this).next().toggleClass("onanimation");
$('ul li').hide();
$('ul li').each(function(i) {
$(this).delay(80 * i).fadeIn(500);
});
});
});
htmlの内容はこちら
※オレンジ色の文字は注釈のため記述しないでください。
<div class="gblnv_box">
<a class="menu-trigger" href="#"> ←ハンバーガーボタン
<span></span>
<span></span>
<span></span>
</a>
<div class="gblnv_block">
<ul class="gblnv_list"> ←ハンバーガーボタン内、グローバルメニュー
<li><a href="">グローバルメニュー1</a></li>
<li><a href="">グローバルメニュー2</a></li>
<li><a href="">グローバルメニュー3</a></li>
</ul>
</div>
</div>
JSの基本構造について、プログラムでは一つの処理ごとに「 ; 」で区切ります。
下記ソースの説明を進めます。
$(document).ready(function(){});
このソースの内容は、WebページのDOMの準備ができたら内容を実行することができます。 JavaScriptはDOMを手軽に扱える言語で、Webぺージの要素をDOMとして読み取り WebぺージをDOMを通して書き換えることができます。
DOMは「Document Object Model」の略で、Webサイトの構造をツリー状のデータとして扱うことができます。
ソースを細かく見てみよう
$(".menu-trigger").click(function (){});
上記の記述は、ハンバーガーボタン「.menu-trigger」をクリックした時に処理を実行させるものです。 この中に実行したい内容を入れることにより、ハンバーガーボタン内のメニューを表示させます。
$(this).toggleClass("active");
「toggleClass」は指定したclassの追加と削除の切り替えを行います。
これにより、ハンバーガーボタンのクリックに合わせてメニューの表示・非表示を行っています。
$(this).next().toggleClass("onanimation");
「next()」は、「次」にあたる要素を選択します。
ここでは、「.menu-trigger」の次の要素
「.gblnv_block」にtoggleClassでクラスを追加しています。
$('ul li').hide();
$('ul li').each(function(i) {
$(this).delay(80 * i).fadeIn(500);
});
上記記述は、ハンバーガーメニューリンクを表示をさせるときに、
各要素を遅延表示させるものです。
「hide()」は英語の意味通り、表示を隠します。
「fadeIn(500)」で要素を表示させています。
「fadeIn(500)」の500という数字は、 アニメーションが行われる秒数を表しています。
500の場合、0.5秒かけてアニメーションが行われます。
「each」は、繰り返し処理を行っています。
なぜ、繰り返し処理を行っているのかというと、各要素がそれぞれに遅延させるためです。
繰り返し処理を行わないと、全部のハンバーガーメニューリンクの表示が遅れてしまいます。
1番目のliが表示されたら2番目のliの表示処理の遅延を行っています。
「each(function(i){}」の「i」は、変数になります。
繰り返しの指定では「i」を用いることが多いです。
「delay(80 * i)」で各リストを80ミリ秒ずつ表示開始時間を遅延させ、
その後、「fadeIn(500)」で500ミリ秒かけてフェードイン（徐々に表示）させています。
ハンバーガーメニューボタンの動きについて
今回ハンバーガーメニューの参考としたサイトは下記です。
CSSで実装するハンバーガーメニュークリック時のエフェクト 10＋
css3の「transform」と「@keyframes-animation」を使用して、ハンバーガーメニューの動きを入れています。
上下の線は、「transform:rotate()」を使用して、回転させています。
真ん中の線は、「@keyframes-animation」を使用して、移動とフェードアウトをさせています。
最後に
いかがでしたでしょうか。
Webは技術の進歩が早く、追いついていくので精一杯な分野かもしれません。
ですが、Webは今ある知識を発想次第で 新しいものを作れる可能性がたくさんある分野でもあると思います。
可能性が広い分、楽しいことがたくさんできる。
進歩と可能性に満ちたWebの勉強は続けていきたいですね。
vol.40 デジタルイラストで毛の質感を表現する
こんにちは。イラストレーターの西山です。
今回はBOELの2016年賀状のイラストをもとにphotoshopで動物の毛を表現する方法をご紹介します。
photoshopで緻密に動物の毛を描くとき、線を一本一本描くだけではうまくいきません。
とくに失敗に陥りやすい点が2つあります。
・立体感がなくなる
・毛の生え方にムラが出てまとまりがない。
この2点に注意して毛の細かいイラストを描いていきます。
ベースを決める
まずは、毛を生やすためのベースを作成します。
作成した線画とは別に新規レイヤーを作成します。べた塗りで良いので色を塗ります。
色を塗るときは塗った輪郭がはっきり出ないぼかしブラシを使います。
質感のあるぼかしブラシで影を塗る
ベースの後は毛のことは考えず、まず質感があるブラシで影を大まかに塗ります。
今後毛を書くときにどこに影を落とすかわかりやすくするためです。
この手順を踏むと立体感を意識して毛を描きやすくなります。
今の段階でも毛が生えたときのイメージがつくようにしたい…ここで便利なのが質感のあるブラシです。
輪郭がガサガサしたブラシを使って塗れば毛がついたときの輪郭に近づけます。
今回は墨汁を習字紙に飛ばしたしぶきを使用して作ったブラシを使ってます。
紙へ自然にじんだ輪郭が細かい毛先に似ていたため使用しています。
水と混ぜてしぶきに濃淡が出るようにしておくと、よりリアルなブラシが作れます。
ベースからスポイトで
色を取りながら毛を描く
描きたい位置の色をスポイトで選択します。ベースで作った陰影を保ちながら描いていきます。
ペンのサイズは3〜4px程度。
最小サイズは仕上げで使う。
1px～2pxのペンは最後の仕上げに使うため、この段階では3px～4pxのペンで毛の流れを意識して描きます。毛を描く際は新規作レイヤーに描いていきます。
柔らかい毛の質感を作る
線と線の間にムラができるため、一通り毛を描いたら、柔らかい毛の質感になるよう加工します。
1 まずベースと毛を描いたレイヤーを複製し、結合します。
2 複製したレイヤーの描画モードを変更します。初期設定だと「通常」になっているので「スクリーン」に変更します。
スクリーンは色を重ねるほど白くなるモードです。
毛と毛の間や不要な影を自然と明るくして、ふわりとまとまった質感を出してくれます。
細いペンで細部を書き込む。
加工をしたことで柔らかい印象になりましたが、毛一本一本の質感は落ちています。
そのため、再度潰れた箇所を新規レイヤーで描き込みます。
毛を描き分ける
・体のキワは極細のペンで描く
・中央に行くほど一本を長く描いて毛の流れを強調する
・毛の流れに逆らった毛も入れる。
全て同じ毛の流れにしないで異なる色や流れの毛を体のパーツごとに2、3本程度描く。
最後にスクリーン効果を弱くかける
細部を書き込んだところで今度は新規レイヤーのみ複製し、描画モードをスクリーンにして馴染ませます。
細部を書き込んで描画モードをスクリーンする工程を、自分が納得する毛並みになるまで行います。
まとめ
いかがでしたか。
今回の描き方はデジタルイラストの参考書より、実は日本画の画集や参考書をもとに考えました。
媒体は違いますが、アナログ（日本画、油絵、水彩など）の描き方はデジタルイラストでも有効に使えます。色々な描き方に挑戦して、デジタルイラストに応用してみてはいかがでしょうか。
vol.39 CentOS7にハイパフォーマンスな Webサーバーをインストールしよう！ 準備編
こんにちは。Webエンジニアの毛利です。
今回はサーバーの構築のお話です。
ウェブサイトを公開したいと思ったとき、Webサーバーの環境が必要になります。
その時、共用レンタルサーバーがもっともお手軽で、わかりやすいです。
しかし、簡単である反面、本格的にやってみたい、カスタマイズしてみたいと思ったときに難しいことが多く、汎用性に欠けます。
また、同じ環境内に他ユーザーがサーバーを共有している状態のため他ユーザーのサイトトラフィックの影響を受け、他ユーザのサイトがアクセス過多となったとき、リソースがそちらに割かれるため自分のサイト動作が重くなってしまうなどが起こり得ます。
自由にカスタマイズしたい場合、OSのroot権限が必要になり、OSそのものをフルで操作できる環境が必要になります。
以前までは専有サーバーが選択肢にあがっていましたが共用サーバーに比べ料金が高く、気軽に利用できるようなものではありませんでした。
しかし最近では、OS単位で環境を利用できる、安価なサービスが続々と登場しています。
VPSやクラウドサーバーなどによってサーバー環境を提供するサービスが多様化し、思い描くサーバー機能を実現できる環境を気軽に利用できるようになりました。
今回はLinuxディストリビューションの1つ、CentOSでWebサイトを公開するための環境を構築していきます。
サーバー設定を始めよう
Webサーバー構築の作業はMacからリモート接続で行います。
サーバーのOSはCentOS7で設定を進めます。
サービスによって使えるOSは多少異なりますが、大きくWindows系サーバー（Hyper-V）かLinux系サーバー（KVM）であることが多いです。
また、Linuxの場合、OSのディストリビューションやバージョンが自由に選べ、サービスによってはOSのISOのイメージをそのままマウントし、インストールして使うことができる場合もあります。
※OSバージョンによってはサービス側でテクニカルサポート対象外としている場合があるので要注意です。
ターミナルからSSH経由でリモートログインし、設定を行っていきます。
他にもSSHリモートログイン用のソフトはありますが、操作的には直感的でターミナルがシンプルで使いやすいと感じていますのでターミナルで行っていきましょう。
ディストリビューションとは
Linuxには様々な種類があります。
Linuxはオープンソースのため、OSの開発者が多数いるため、その幅は無数です。 国によって人気のディストリビューションに特色があります。
日本ではサーバー構築に特化して利用者数が多いのがCentOSです。
また、Ubuntuも有名です。 サーバーの選定基準としては、安定性、堅牢性、更新頻度（開発が続けられている）などあり、シェアが多いものを選ぶのが最適です。
SSHでログイン
まず以下の設定を済ませておいてください。
・公開鍵認証の設定（サーバー側）
・秘密鍵の取得と配置（ローカル側）
VPSやクラウドサービスではSSHでのログインのみを許可している場合が多いです。
その場合サーバーのコントロールパネルから鍵ファイルをダウンロードできます。
ユーザールート/.ssh/
.sshディレクトリのパーミッションを700に変更します。
$ chmod 700 ~/.ssh
秘密鍵のパーミッションを600に変更します。
$ chmod 600 ~/.ssh/（自分でつけた秘密鍵の名前）
ここまで設定を済ませたら、ログインを試してみます。
$ ssh -i 鍵のディレクトリ/鍵ファイル ユーザー名@サーバーホスト（IPアドレス、ドメイン）
例えば下記のようになります。
$ ssh -i ~/.ssh/id_rsa user@example.jp
ログインが完了したら早速インストールしていきます。
Nginxのインストール
WebサーバーNginxをインストールします。
インストールは下記コマンドで行います。
# rpm -Uvh http://nginx.org/packages/centos/7/noarch/RPMS/nginx-release-centos-7-0.el7.ngx.noarch.rpm
# yum install nginx
rpmコマンドでnginxのリポジトリを追加し、yumコマンドでインストールをしました。
PHP-FPMのインストール
続いてphp関連パッケージをインストールします。
インストールするバージョンは最新版のphp7系にします。
# wget http://rpms.famillecollet.com/enterprise/remi-release-7.rpm
# rpm -Uvh remi-release-7.rpm
標準リポジトリからは最新バージョンのphpがインストール出来ないため、remiリポジトリを 追加しました。
# yum --enablerepo=remi --enablerepo=remi-php70 install php php-fpm php-mysqlnd php-gd php-mbstring php-pdo
必要であれば依存関係パッケージも一通りインストールします。
これでphp関連のインストールは終了です。
MariaDBのインストール
続いてMariaDBをインストールします。
MariaDBはMySQLをフォークして立ち上げられたプロジェクトによって開発が進められているため、MySQLと互換性があります。
基本的にMySQLと同様の運用が可能と思って良いでしょう。
Wordpressを動かすのに支障はありません。
最新版をインストールするにはリポジトリを追加します。
# vi /etc/yum.repos.d/mariadb.repo
[mariadb]
name = MariaDB
baseurl = http://yum.mariadb.org/10.1.10/centos7-amd64
gpgkey=https://yum.mariadb.org/RPM-GPG-KEY-MariaDB
gpgcheck=1
保存したら下記のコマンドを実行しインストールします。
# yum install mariadb mariadb-server
これで基本的なインストールは完了となります。
まとめ
今回「準備編」ではターミナルでSSHログインをし、各種Webサーバーに必要な各種機能をインストールしていきました。
CentOS標準のパッケージだと最新版をインストール出来ない場合が多く、任意でリポジトリを追加してインストールする必要があります。
今回はyumでインストール可能な最新版のものに焦点を当てました。
ソースからビルドする方法もありますがそれはまたの機会にご紹介できればと思います。
次回「設定編」ではそれらを実際に設定し、Webサイトを見れるようにしていきます。
参考URL
CentOS 7 でLAMP(Apache+MariaDB(MySQL)+PHP)インストールからWordPressを動かすまで(Apache編)
