簡単なWeb制作チュートリアルです。
このチュートリアルは、サイトのデザインではなく、Webページにコードを挿入して、その機能を実際に体験してもらうことを目的としています。
今回体験して頂くのは、サイトの運営で大切な、更新、お問い合わせ、そして分析に関してです。
更新はTwitterと連携させ、お問い合わせはGoogleフォームで、分析に関してはGoogleアナリティクスを利用して、サイトを作成したいと思ってます。
また、全ての工程をする必要はなく、興味があるものだけ試すことも出来ます。
少し長丁場になるかもしれませんが、最後まで読んで頂けたら幸いです。
ステップ１.Webページの元を作成する
以下のコードを、メモ帳などのテキストエディタに貼り付けます。
visualstudioコードなどのEmmet機能があるテキストエディタは、『！』を押せば表示されます。
テキストエディタで、index.htmlという名前でテキストファイル作成し、以下のコードを貼り付けし入力していきます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>テキストファイルに簡単な内容を入力します。
chromeやsafariなどのWebブラウザに内容を表示させるには、＜＞のタグを使用して記述していきます。
まず、簡単な自己紹介文を作成してみましょう。
<!– ステップ1:ここから –><!– ステップ1:ここまでの内容を入力 –>に挟まれたコードを参考に記述してみます。(貼り付けでもOKです。)
ちなみに、<h1>タグは大見出し、<p>タグは段落、<ul><li>タグはリストを表し、それをWebブラウザが解釈し、その内容を表示させます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- ステップ1:ここから -->
<h1>このサイトはチュートリアル用です</h1>
<p>自己紹介</p>
<ul>
<li>男</li>
<li>３０代</li>
<li>LittleRiver</li>
</ul>
<!-- ステップ1:ここまでの内容を入力 -->
</body>
</html>編集したファイルをブラウザで表示すると、入力した内容が反映されています。
ステップ2.SNSとリンクさせる
上記のサイトから、Twitter埋め込みを設定して、Twitterで更新した内容がサイトに表示されるように設定します。
Twitterの埋め込み機能の作成に関しては、別記事に記載しておりますので、こちらの記事をご参考ください。
（準備中）
<!– ステップ２:ここから –><!– ステップ２:ここまでの内容を入力 –>に挟まれたコードを記入してみます。(貼り付けでもOK)
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- ステップ1:ここから -->
<h1>このサイトはチュートリアル用です</h1>
<p>自己紹介</p>
<ul>
<li>男</li>
<li>３０代</li>
<li>LittleRiver</li>
</ul>
<!-- ステップ1:ここまでの内容を入力 -->
<!-- ステップ2:ここから -->
<a class="twitter-timeline" href="https://twitter.com/little_river_jp?ref_src=twsrc%5Etfw">Tweets by little_river_jp</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
<!-- ステップ2:ここまでの内容を入力 -->
</body>
</html>編集したファイルをブラウザで表示すると、入力した内容が反映され、Twitterの画面が埋め込まれ表示されています。
ステップ3.Googleフォームでお問い合わせ
ホームページで大切なのがお問い合わせフォームです。
上記のサイトから、Googleフォームの埋め込みを設定して、Googleフォームで作成したお問い合わせフォームがサイトに表示されるように設定します。
Googleフォームでフォームのフォーム作成に関しては、別記事に記載しておりますので、こちらの記事をご参考ください。
<!– ステップ3:ここから –><!– ステップ3:ここまでの内容を入力 –>に挟まれたコードを記入してみます。(貼り付けでもOK)
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- ステップ1:ここから -->
<h1>このサイトはチュートリアル用です</h1>
<p>自己紹介</p>
<ul>
<li>男</li>
<li>３０代</li>
<li>LittleRiver</li>
</ul>
<!-- ステップ1:ここまでの内容を入力 -->
<!-- ステップ2:ここから -->
<a class="twitter-timeline" href="https://twitter.com/little_river_jp?ref_src=twsrc%5Etfw">Tweets by little_river_jp</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
<!-- ステップ2:ここまでの内容を入力 -->
<!-- ステップ3:ここから -->
<iframe src="https://docs.google.com/forms/d/e/1FAIpQLSekm5LnZHAKOHZmAiMNbzjPhEplwyWHKiKoRGoSxnFm9d6CNw/viewform?embedded=true" width="640" height="948" frameborder="0" marginheight="0" marginwidth="0">読み込んでいます…</iframe>
<!-- ステップ3:ここまでの内容を入力 -->
</body>
</html>編集したファイルをブラウザで表示すると、入力した内容が反映され、Googleフォームで作成したお問い合わせフォームが埋め込まれ表示されています。
ステップ4.Googleアナリティクスで分析
そして、どれくらいの人がに流入したのかを見るのがGoogleアナリティクスです。
Googleアナリティクスで分析に関しては、別記事に記載しておりますので、こちらの記事をご参考ください。
以下のコードを記載すると反応します。
<!– ステップ4:ここから –><!– ステップ4:ここまでの内容を入力 –>に挟まれたコードを記入してみます。(貼り付けでもOK)
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- ステップ4:ここから -->
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-220109655-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-220109655-1');
</script>
<!-- ステップ4:ここまでの内容を入力 -->
</head>
<body>
<!-- ステップ1:ここから -->
<h1>このサイトはチュートリアル用です</h1>
<p>自己紹介</p>
<ul>
<li>男</li>
<li>３０代</li>
<li>LittleRiver</li>
</ul>
<!-- ステップ1:ここまでの内容を入力 -->
<!-- ステップ2:ここから -->
<a class="twitter-timeline" href="https://twitter.com/little_river_jp?ref_src=twsrc%5Etfw">Tweets by little_river_jp</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
<!-- ステップ2:ここまでの内容を入力 -->
<!-- ステップ3:ここから -->
<iframe src="https://docs.google.com/forms/d/e/1FAIpQLSekm5LnZHAKOHZmAiMNbzjPhEplwyWHKiKoRGoSxnFm9d6CNw/viewform?embedded=true" width="640" height="948" frameborder="0" marginheight="0" marginwidth="0">読み込んでいます…</iframe>
<!-- ステップ3:ここまでの内容を入力 -->
</body>
</html>編集したファイルをブラウザで表示しても、表示上は何も変わりませんが、サイトにアクセスすると、そのアクセス者に関して一部の情報を得ることが出来ます。
ステップ5.Webブラウザで確認
これでサイト制作は完了です。ローカル上で確認してある程度形になっているかを確認しましょう。
ステップ6.Githubアカウントを取得する
Githubのサイトから、登録を行います。
Githubの詳細な登録方法に関しては、別記事に記載しておりますので、こちらの記事をご参考ください。
ステップ7.Githubにてサイトを公開する
Githubにてサイトを公開する。
当サイトのコードは、以下のGithubのURLに公開しているため、確認してみるといいです。
実際にアクセスしてみて、Twitterが反映されているか、またフォームは正常に送信されているか、サイトにアクセスした時内容が反映されているかを確認してみます。
また、スマートフォンではどのように表示されているかも確認するのも、学習の一つです。
以下にGithubページしたURLを貼り付けてますので、ご参考ください。
まとめ
最後まで読んで下さりありがとうございました。
ここまで、実際に出来た方は、すぐにでもサイトを制作できます。
是非、Webサイトを運用して、仕事や日常生活で有効活用してみましょう。
今回、作成したページを、当サイトの他の記事で利用し、様々な機能を追加する記事を作成予定です。
ご興味があれば他のページも読んで頂けたらと思います。
また、テンプレートも用意しておりますので、ご興味がある方は、ダウンロードをして使用してみることをオススメします。
