こんにちは。 今回は前回書いたWordPressの次に試した手法について書いていきます。 ここからはがっつりコーディングとかをした話なので、少しややこしくなってくるかもしれません。 まだ今回はそんなにややこしいことはないと思いますが。

HTMLについて

以下は「HTMLとは」でググって出てきたSearch Labsの出力結果の1番目のコピペです。 ちなみにSearch Labsはグーグルの生成AIで、検索に対する回答を生成するAIです。

HTML(HyperText Markup Language)は、Webページを作成するために開発されたマークアップ言語で、 Web制作の現場で基礎知識として必要になります。 マークアップとは、文章の構成や役割を示すことを意味し、 HTMLはコンピューターに構成指示を与えて、表示したい文章や写真などの情報を形作ります。

要するにWebサイトを作るときに使う言語です。 HTMLの文法に従って書いたhtmlファイルをサーバーにアップロードすることでWebサイトが公開できます。 ご存じの方もいらっしゃると思いますが、Webサイトを作るための言語としてはHTML以外にもCSSやJavaScript、PHP等があります。 Webサイトの内容を作るのがHTML、色やフォントなどのスタイルを決めるのがCSS、 サイトに動きを付けたりより複雑な処理をするのがJavaScriptやPHPといったイメージです。 前回紹介したWordPressのようなノーコードで編集可能なCMSは、マウス等で要素を動かしたりするときっと内部ではHTMLが対応するように書き換えられているんでしょうね。

サイトのソース(HTMLなど)の確認方法

前節で普段みなさんが見ているWebサイトは、HTML等で書かれていることがわかりました。 では、具体的にどんな感じで書かれているか気になりませんか？

WebサイトはHTMLファイルをブラウザで処理することで表示されます。 そして大体のブラウザ(PC版)では表示しているHTMLを含むソースを表示できる機能があります。 今回は私の環境であるPC版のChromeで説明します。 PCのブラウザであれば大筋は変わらないと思います。スマホは知らん。

HTMLを確認したいWebサイトの適当なところで右クリックをします。 すると以下のようなメニューが出てきます。

私のChromeはいろいろ拡張機能を入れているので、それ関連のメニューが大量にあってわかりづらいですが。 一番下のところに「検証」という項目があると思います。 これをクリックすると以下のように左側にWebページ、右側になにやら難しそうな表示が出ます。 この右側に表示されているのが、このページのHTMLファイルになります。 HTMLの文法を知らなければ何が何やらかと思いますが、 ここに書いてある内容をすべてコピーしてhoge.htmlとかで保存してブラウザで開くと、表示しているWebサイトがローカルで表示できます。 まあHTMLファイルを保存するだけなら、Ctrl+Sとかで保存できますが。 これを悪用して、たとえば銀行の残高表示のページを保存して残高の数字だけ書き換えたりなんかすると、 金持ちを装えたりします。このようにWebサイトは自分で表示する分には簡単に書き換えられるので、 偽装した残高のスクショに釣られて詐欺に巻き込まれたりしないように気をつけましょうね(何の話)。

これのまっとうな使い道としては、今回のように自分でWebサイトを作成するときのデバッグに使ったり、 Webサイトの情報をプログラムで取得するスクレイピングをするときに取りたい情報のid等を調べるのに使ったりです。

本サイトを作成するうえで、前回書いたようにWordPressでプロトタイプを作成して、そのHTMLファイルを今回紹介した方法で丸々コピーして次節以降で紹介する方法で公開しました。

Git, GitHubについて

ガラッと話が変わりまして、ここではGitとGitHubについて軽く説明します。 Gitについては私も割と理解が浅いので…。 一旦GitとGitHubの説明もGoogle Search Labsくんの説明を貼ろうと思いましたが、「Git とは」等で検索してもSearch Labsが表示されませんでした。 なので私の言葉での説明になります。

Gitはプログラムのソースコード等の変更履歴を記録、管理するためのバージョン管理ツールです。 プログラムを変更するときは、「ちょっと変えたら動かなくなったからさっきの状態に戻したい」、 「この機能を追加したいけど、そのうち消すかもしれないから機能追加前の状態にすぐ戻せるようにしたい」 みたいな状況が割とよくあります。 そういうときにGitで変更履歴を管理していると、簡単に以前の状態に戻すことができます。 Wordとかでも変更履歴を残せたりするので、それのちょっと小難しい版でイメージしてもらえば大丈夫だと思います。

GitHubはGitで管理していた変更履歴をオンラインで管理、共有できるサービスです。 プログラムは複数人で1つのプロジェクトを進めることがよくあるので、1つのプロジェクトを共有して変更履歴を他の人にわかるように管理する必要があります。 そのほかにも自分が作成したコードをGitHubで不特定多数に公開することで、界隈の進歩に貢献したり自分の技術を示すポートフォリオに用いたりもされます。 私はあまり複数人でコードをいじることをした経験がないのと、仕事で作成したコードを公開するわけにはいかないのでGitHubに自分のリポジトリ(変更履歴のことだと思って大丈夫です) を共有したことはないですが、GitHubで公開されているコードを使わせてもらうことはあります。

GitHub Pagesについて

前節でGitとGitHubについて説明しました。 バージョン管理はコーディングに深く関係がありますが、なぜここでその話をしたかについてをここから述べていきます。 HTML等のファイルをGitでバージョン管理し、GitHubにpush(≒アップロード)することでオンラインで共有できることを述べました。 ところで、Webサイトを公開するのに必要なものは Webサイト作成手法比較 の記事で説明したように

• Webサイト本体
• サーバー

の2つでした。 今回の方法でWebサイト本体については、HTML等を自分でコーディングすることで作成していました。 後はサーバーがあればよいのですが、GitHubをサーバーとして使おう というのが今回のアプローチです。 GitHubにはそれが実行可能なサービスがあります。 GitHub Pagesというものです。 GitHubにpushされたHTML等から生成したWebサイトを公開できるというものです。 この手法のよいところとしては、GitHubが無料なのでGitHub Pagesも無料で利用できるという点があります。 Webサイト作成手法比較で述べたように、 無料レンタルサーバーを利用すると広告表示をはじめとした制限がかかりますが、 GitHub Pagesにはそういった制限はありません。 そのため、自分でHTMLやCSSのコーディングができる人はWordPressなどで作成するより自由に無料でWebサイトが作成できるということですね。 GitHub Pagesにも有料プランはありますが、

• 複数人でリポジトリの使用が可能
• 公開できるサイトの数が増える(無料だと1つ)
• リポジトリを非公開にできる(無料ではできない)

といった違いなので、個人で1つのサイトを作成する場合は無料で十分だと思います。 他の制限として、公開できるのが静的サイトのみで動的サイトが作れないという点です。 静的サイトと動的サイトについては次回説明しようかと思います。

〆

今回は、HTMLの自前コーディングとGitHub Pagesを用いたWebサイト作成について説明しました。

HTMLについては、大雑把な説明とブラウザでの確認の方法を述べました。 このあたりは最近の学生とかは情報の授業でやるんですかね。 私はちょろっとだけやった気はします。

バージョン管理ツールであるGitと、それのオンライン共有、管理サービスであるGitHubについても述べました。 Gitの使い方は少し知識が必要なのですが、今回はGitHub Pagesを説明するために触れたのでそのあたりは省きました。

雑記の新規ポストのタイミング以外にもちょこちょこ修正したりするのに時間を取られていますが、 せっかくなのでなるべくこまめに更新できるように頑張りたいなあ。