自作CMSの作り方#4 トップページを作ろう
こんにちは。suipediaです。
本連載では自分自身によるオリジナルCMSの作成方法について伝えています。前回の#3xamppの初期設定とエディタの準備では基本的な環境設定を行いました。
今回からゴリゴリと内部の作成作業に入っていきます！
出来るだけ1回1回ちゃんと「今回も進んだぞ！」という感覚を得ながら進められるようにレクチャーしていきますので、どうぞよろしくお願いします。
今回の#4 トップページを作ろうでは文字通り、トップページの作成を行います。↓この状態ができるところまでです。
では、参りましょう。
index.htmlファイルを用意する
Visual Studio Codeを開いてください。
上図のような状態だと思います。前回ダウンロードしていただいたindex.htmlファイルを開くとおそらくですが・・・
文字化けしているでしょう。。。このファイルはお試しとしての用途だったのでもう用済みです。削除しましょう。
ファイル上で右クリックしメニューを開きます。その中から削除を選びましょう。
「ゴミ箱に移動」をクリックします。
ファイルが消えてこのような状態になりました。寂しいですね。
では改めて、index.htmlファイルを作りましょう。
カーソルが「cms」フォルダの上にある状態で右クリックし「新しいファイル」をクリックします。
index.htmlファイルできました！
文書型宣言を入力する
では、index.htmlファイルを開いていただきまして実際の中身を書いていきましょう。
まず、上図の状態で「<」の一文字を入力してみてください。すると
このように予測変換がたくさん出てくると思います。一番上の「!DOCTYPE」が選択されている状態でEnterキーを押下しましょう。
DOCTYPE（ドックタイプ）の入力が済みました。
「DOC」は「DOCUMENT」の略です。文書ですね。これは「このファイルの文書型はhtmlですよー」という宣言をしています。あまり深く考えずに「ふむふむ、こういうものなんだな」程度に押さえておいてください。
head情報を入力する
で、次が肝心のhead情報です。
head(ヘッド)って言うのはそのまま「頭」の意味ですね。この後body(ボディ)タグも出てくるのですが、人間と同じように皆さんが普段閲覧するwebページも頭と体で構成されています。
headタグ内に書いたソースは直接画面に表示されることはありません。人間の頭の中も外からは見えないのと同じですね＾＾
htmlは基本的に
<dummy>～～</dummy>という形で開始タグと終了タグで要素を囲む形で内容を記載していきます。
では<head>タグを書いてください。
このようにできればOKです。次に一気に進みますが、以下のソースをheadタグ内に張り付けてください。
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>自作CMSトップページ</title>
<!-- BootstrapのCSS読み込み -->
<link href="/assets/css/bootstrap.min.css" rel="stylesheet">
<!-- jQuery読み込み -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- BootstrapのJS読み込み -->
<script type="text/javascript" src="/assets/js/bootstrap.min.js"></script>
上図のようになります。一つずつ説明しましょう。理解するのが面倒な方、あとで読むという方は飛ばしてもらって大丈夫です。
これからもそうですが、理解できていなくてもソースコードさえ揃っていれば自作CMSは実現できますので(・∀・)
metaタグとは・・・？
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">まず、先ほど「htmlは開始タグと終了タグのセットで記載」という話をしましたが、終了タグが不要なケースも存在します。詳しくはご自身で調べていただくとして、ここで紹介するmetaタグ(メタタグ)はその1つです。
タグにはいろんな役割をするものがありますが、このmetaタグで指定するのはwebページそのものの情報や概要です。
「headタグ内にwebページの情報を書いたところで誰が見るんですか？」
と思った方、いい質問ですね（池上彰風）。実際のwebページが貴方の目に届くには検索エンジンがページを解釈し検索結果一覧に表示するというステップを踏まねばなりません。
つまりmetaタグの情報は検索エンジンやブラウザに伝えるために存在します。
そして今回の例では3つのmetaタグが登場しますね。
<meta charset="utf-8">ひとつめはmetaタグの「charset」属性に「utf-8」が指定しています。charset(キャラセット)は文字コードのことです。それをutf-8(ユーティ－エフエイト)にしています。
これはおまじないみたいなものだと思っておいてください。htmlの入門書には毎回必ず決まって指定する設定を「おまじないです」と逃げている書籍がままあります(笑)
まあ厳密には細かく説明しても冗長になるし、ちゃんと理解することがそこまで重要じゃない、という感じです。
<meta http-equiv="X-UA-Compatible" content="IE=edge">次の設定です。これはブラウザのInternet Explorer向けの設定です。これも私の中ではおまじない的な立ち位置ですが、ちゃんと理解したい方はこちらのサイトをご覧ください。
「わざわざ指定する必要はないかも」って書かれてる・・・(´ﾟдﾟ｀)
<meta name="viewport" content="width=device-width, initial-scale=1">
3つ目のこの指定は結構重要です。ここ最近はレスポンシブデザインが完全に主流になりました。端末ごとに画面描画を最適化する技術ですね。
この設定はその役割の一部を担っています。「viewport」は表示領域のことで、「width=device-width」はアクセスしてきた端末の幅に合わせようという設定です。「initial-scale=1」も初期倍率を1としているので意味合い的には同じことをしています。
titleタグの役割
metaタグの次にtitleタグが出てきましたね。タイトルタグです。
<title>自作CMSトップページ</title>
これは文字通りタイトルを示すタグです。開始タグと終了タグの間に書かれたテキストがそのページのタイトルということになります。
先ほどheadタグに書いた情報は画面上のどこにも表れないとご説明したのですが、これだけは例外です。
じゃあどこに出るのか・・・？それはですね。ズバリ、ブラウザのタブです。
上図のような感じです。headタグ内の指定はだいたいのページで共通するのですが、このtitleタグだけはページ毎に固有のものになります。
次にいきます。
<!-- BootstrapのCSS読み込み -->
<link href="/assets/css/bootstrap.min.css" rel="stylesheet">
これはlink(リンク)タグといって外部のファイルを活用したい（読み込みたい）ときに使います。
上記のソースではassetsフォルダのcssフォルダにあるbootstrap.min.cssというファイルを読み込んでいます。これ、あとで触れるので一旦「そういうものなんだ」という程度にとどめておいてください。
次が最後です。
<!-- jQuery読み込み -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- BootstrapのJS読み込み -->
<script type="text/javascript" src="/assets/js/bootstrap.min.js"></script>
scriptタグです。スクリプト、と読みます。これはJavaScriptと呼ばれるブラウザで動くプログラムがあるのですが、これを文書内に書いたり、外部から呼び出すときに使います。
この例では外部から呼び出しています。これもまたあとで触れます。
ここまででheadタグの説明が終わりました。webページの情報を検索エンジンに伝えたり、ブラウザにこの要素はこういう風に表示してくれ、と教えたり（後述）、プログラムを書いたりできます。
では、一部後でまた触れたり設定する部分もありますが、ひとまずbodyタグの説明に入ります。
bodyタグを用意する
では、以下のソースを張り付けてください。先ほどのheadタグの下に。
<body>
<header><a href="/">オリジナル CMS サンプル</a></header>
<div id="headerFiexdBlock"></div>
<div class="container-fluid">
<section class="container">
<div class="row">
<main class="col-md-8">
<section>
<h2>このサイトについて</h2>
<p>ここは自作CMSのサンプルサイトです。</p>
<p>このサイトで使用しているコンテンツマネジメントシステムの作成方法はこちらのnoteで紹介しています。</p>
<p>ステップごとに有料コンテンツとなっていますので、進める中であなたにとって必要かどうか、判断しながらご利用ください。</p>
<p>本サイトの中では好きなだけCMSを動かしてみて実際に作成に着手してみるか是非ご判断ください！</p>
<p>note内でも記載していますが、これをもとにオリジナルCMSを極めるもよし、もっとセキュリティや運用面をもっと洗練させて製品化のベースとするもヨシです。</p>
<p>また初心者の方も実際にHTML,CSS,PHP,JQuery,MYSQL等の技術を習うのにご活用ください。</p>
</section>
<section>
<h2>新着情報</h2>
<div class="container-fluid">
<section class="container">
<div class="row contents_list_wrap">
</div>
</section>
</div>
</section>
</main>
<div class="col-md-4 side">
<aside>
<h4>CMSの管理ページは<a href="/admin/">こちら→</a></h4>
<p>実際に触ってみて！</p>
</aside>
<nav>
<h3>最新記事</h3>
<ul class="ul_new_contents">
</ul>
</nav>
<nav>
<h3>カテゴリ</h3>
<ul>
</ul>
</nav>
<nav>
<h3>アーカイブ</h3>
<ul>
</ul>
</nav>
<nav>
<h3>最近のコメント</h3>
<ul>
</ul>
</nav>
</div>
</div>
</section>
</div>
<footer>c 2019 <a href="/">オリジナル CMS サンプル</a></footer>
</body>で、ですね。この状態で一度「http://localhost」にアクセスしてみてください。すると以下のようになります。
すごくシンプルですね。これはですね、「スタイルシート」と呼ばれるものが適用されていないからです。
正確にはカスケーディングスタイルシート、略してcss(しーえすえす)といいます。bodyタグ内の各要素をどのように表示するか、というのを指定するのがcssの役目です。
アニメーションをつけたり要素にマウスが乗った時の変化を演出するのもcssです。
これを今から適用しましょう。cssにはフレームワークという便利な機構が用意されています。これは予め開発を効率よく進めるための便利な設定が揃ったパッケージのようなものと捉えてください。
では、こちらのページからダウンロードします。
赤枠のボタンを押下します。ダウンロードし、展開すると「bootstrap-4.1.3-dist」というフォルダがあると思います。
そしてその中に、「css」と「js」というフォルダがあるでしょう。
これをそれぞれ中のファイルを移動します。移動の前に移動先のフォルダを作りましょう。先ほどheadタグ内にした設定を思い出してください。
<link href="/assets/css/bootstrap.min.css" rel="stylesheet">
まずこれ↑です。URLやパスが「/」で始まる場合、それはルートフォルダを示しています。ルートフォルダは今回で言うと「cms」フォルダのことです。
ですので、その中にassetsフォルダとcssフォルダを階層構造にして作りましょう。エクスプローラーから作ってもいいですが、visual studio code上で作ってもよいです。
↑このようになればOKです。
<link href="/assets/css/bootstrap.min.css" rel="stylesheet">
head部分では上記の様に指定しています。ダウンロードした中に含まれるcssフォルダ内の「bootstrap.min.css」ファイルを今作ったcssフォルダの中に移動しましょう。
このようになればＯＫです。
この時点で画面を表示すると
こうなります。少し変わりました。では次にjsの設定のしましょう。「js」は「JavaScript」の略です。
<script type="text/javascript" src="/assets/js/bootstrap.min.js"></script>上記のようなソースをhead部分に書きました。jsフォルダを作り、ダウンロードしたものの中から「bootstrap.min.js」をもってきます。
このようになればＯＫです。・・・でですね。画面を再度更新してほしいんです。私、とんでもないことに気づきました。。。
目標としてた画面になってない！！！え！？想定と違う・・！！
あ・・・わかった( ﾟДﾟ)
ひとつファイルの存在を忘れていることに気づきました。それを今から追加します。
myStyle.cssを追加する
先ほど、cssのフレームワークを使うから便利♪♪という話をしたのですが、1から10まですべてフレームワークで賄えるかというと決してそういうわけではなく、自分で手を動かす（ソースを追加する）局面も出てきます。
そして今からそれの完成系のファイルを追加します。完成系なので今時点では不要な情報もたくさん載ってますが、このまま置いておくと後々便利なのでもう完成版を適用します。
以下のファイルをダウンロードしてください。
これをcssフォルダ内に置きます。そして
<link href="/assets/css/mystyle.css" rel="stylesheet">
このコードを追加します。どこに追加するかといえば
<link href="/assets/css/bootstrap.min.css" rel="stylesheet">の次の行です。
これで再度画面を更新していただけますか。
ほいｷﾀ━━━━(ﾟ∀ﾟ)━━━━!!・・・いや～すみません。
とりあえず今回はここまでです。あとは「これからの進め方のお話」と「おわりに」をお茶でもすすりながら読んで、汗を拭ってください。拭うのは私の方ですね(^_^;)
これからの進め方のお話
今回で4回目だったのですが、初心者のことも考慮しながら説明を進めていくのはむずかしい！という結論に達しました。
ファイル構成やダウンロードの丁寧すぎる説明はテンポを悪くするので、次からはだいたいの基礎は分かってくれている体で進めていきます。
そのうえで、調べてみてもどうしてもわからない！という部分があったらご質問くださいませ。今回から有料化の予定でしたが、書きながらだんだん「金出すほどのもんか？」と思えてきて実施には至りませんでした。
いや～悔しいっ！
おわりに
おわりです。次回からはもう少し淡々と進めていきます。
ぶっちゃけ学ぶ側もソースさえあればいいと思うんですよ。あとは自分で読み解いてより最適化していって・・・みたいなことなんで。
今回も読んでいただきどうもありがとうございました。
次回もよろしくお願いします！
完成系はこちら。
自作CMSの作り方#5 テンプレート機構を実装する につづく。
この記事が気に入ったらサポートをしてみませんか？