ホームページ（ウェブページ）を作るのに必要な知識
HTMLドキュメント
インターネット上に展開されているウェブサイトはHTMLドキュメント（ウェブページ）で構成され、それらページがハイパーリンクで繋がっています。このHTMLドキュメントを作ることでウェブサイトを構築して情報提供したりインターネット上で様々なサービスを提供しています。
HTMLとはHyper Text Markup Language（ハイパーテキスト・マークアップ・ランゲージ）の略で、ここでいうハイパーテキストとは、ドキュメント同士をつなぐテキストの事を言います。皆さんがウェブサイトなどを閲覧するときに文字をマウスでクリックすると次のページに移動することができるこの仕組みの事を言います。
WWW（ワールド・ワイド・ウェブ）
このようにコンピュータ内のドキュメント同士をハイパーリンクで繋いでいくと、ドキュメントを閲覧している人は簡単に次から次へと文書へ移動していく事が出来て非常に便利です。このようにドキュメントが繋がっている様子はまるでWEB（ウェブ:蜘蛛の巣）のように見えます（上図）。このドキュメント間の移動は、インターネット上で公開されているコンピュータ上にあれば、他のコンピュータに置いてあるドキュメントへも移動できます。次の図は、あるウェブサイトがあって、その中の文書が他のコンピュータ（サーバー）上にある文書へとハイパーリンクしている様子です。
このように、インターネット上で公開されているドキュメントがハイパーリンクで世界中のドキュメントに簡単にジャンプできるようなネットワークを世界中に張り巡らされた蜘蛛の巣に見立てて「ワールド・ワイド・ウェブ：World Wide Web」と呼んでいます。このハイパーリンクで書かれたドキュメントをインターネット上で公開するためには、公開用のコンピュータを用意してインターネット上で誰でもアクセスできるようなサービスを展開します。これを「Webサーバー」と言います。
WEBサーバー
WEBサーバーは、HTMLで書かれた文書を保存してある場所をインターネット上で公開して誰でもアクセスできるようにサービスを提供するプログラムです。WindowsやMacでもWebサーバーと呼ばれるプログラムを動かして、そのサービスを開始できますが、多くの場合Linuxを使っています。これはLinuxには元々サーバーとして利用するためのツールが沢山そろっていて、サーバーOSに適しているからです。LinuxベースのRaspberry Pi OSももちろんWebサーバーを構築できます。
TCP/IPの決まり事
TCP/IPとは、インターネット上で通信を行うためのいろいろな決まり事です。外部のコンピュータがサーバーなどにアクセスする際に通信方式や、IPアドレスなどの決まりを定めたものです。これらを全て理解すると言うのはとても大変ですが、ホームページを作ってインターネット上で自分のドキュメントを公開していきながら必要なものを少しずつ覚えていきましょう。
ラズベリーパイでWEBサイトを作って公開するために必要なもの
ラズベリーパイはウェブの学習を行うには最適のコンピュータです。ラズベリーパイのRaspberry Pi OSがあれば、特別用意しなくても以下のものをダウンロードして利用すればすぐにホームページを作る練習ができます。
- WEBサーバー（Apache、nginx）
- エディタ
これだけでHTMLファイルの作成と公開のテストが可能です。更に高度なウェブサービスを構築するためには以下のもの必要になってきます。
- PHP（WEBプログラミング言語）
- データベース（MySQL、PostgreSQL、MariaDBなど）
WEBサーバープログラム
ラズベリーパイ上でWEBサーバーというサーバープログラムを動作させることで、ラズベリーパイに外部からウェブブラウザを使ってアクセスして、ラズベリーパイの公開用ディレクトリにあるHTMLファイルを見る事ができるようになります。このWEBサーバーのプログラムとして代表的なものが以下の２つになります。
- Apache Webサーバー（アパッチ）
- nginx Webサーバー（エンジンエックス）
どちらも利用者が多く、それぞれ設定方法などが若干異なります。
HTMLドキュメントを作るソフト
これも、Raspberry Pi OSには様々なものが用意されています。エディタと呼ばれるプログラムであれば、どれでもHTMLファイルを作れます。Linuxでポピュラーなviエディタなどでも作れます。HTMLはプログラミング言語の1つであるため、書き方などが決まっています。そのため、文章部分とHTML言語部分が色分けされて表示してくれるととても見やすくなります。Raspberry Pi OSにインストールされている「Geany」にはその機能がついています。
- Geany（ジニ―） 図のようにHTML部分が青く色分けされている。
＞＞ bluefish 公式サイト http://bluefish.openoffice.nl/index.html
blufishはHTML作成におすすめなソフト
普通のエディタでも作成できるのですが、HTMLはプログラミング言語の１つで、文法がきちんとあります。できれば文法が間違っていたらそのエラーを教えてくれる機能がついていた方が便利です。ラズベリーパイでもホームページ作成ソフトのようなものがあって、それが「bluefish」です。ウェブページを構成するHTMLファイル内で使われるHTMLをさらに色分けして表示し、ウェブサイトのファイル構成なども管理できるようになっているためとても便利です。
画像を作成・編集するためのソフト
ウェブサイトを作るときには写真などのが画像やイラストなどを使うと見やすく分かりやすいウェブサイトが作れます。インターネット上で利用できる画像の形式は限られていて、主に以下のファイル形式のものを利用します。
- GIF ーーー 256色 単色がきれいにでてファイル容量が軽い。写真などには不向き。
- JPEG ーーー 1678万色のフルカラーが利用でき、圧縮率も高いため写真などに向いている。
- PNG-８/24/32 ーーー PING-8は256色、PING-24,32は1678色、
- SVG ーーー ベクタ―形式の画像でXML形式で記述されているもの。
なかでも、GIF やJPEGはかなり利用される機会が多く、これら画像を編集するためのソフトもラズベリーパイに入れておく必要があります。
高機能な画像処理定番ソフト「GIMP」
GIMP（ギンプ）はLinuxの画像処理ソフトとしては定番で、AdobeのPhotoshopのように複雑な画像処理が可能です。もちろんウェブサイト用の画像を作ったりも可能です。パッケージはaptコマンドでインストールが可能です。
$ sudo apt install gimp
高機能なソフトウェアだけに、インストールにも少し時間がかかります。インストールが完了すると、ラズベリーパイメニューの中の「グラフィックス」の中に「GIMP（GNU Image Manipulation Program）」というアイコンが出来上がっています。これを起動して、写真を開いたのが以下のような画面になります。ウェブページを作るときには画像の加工やバナーの作成など様々な操作が入ってきます。
GIMPは高機能であるがため、ある程度の性能をもったLinuxマシンなどで動かすには最適ですが、性能が低いラズベリーパイでは少し動作が遅いと感じるときがあるかもしれません。ウェブサイトを制作している時には、画像加工やアイコン、ボタンの作成などを行う中でも簡単な操作だけが必要な作業も沢山あります。そのような場合は他のもう少し簡単な作業用のアプリをりようすると良いかもしれません。
ラズベリーパイでホームページを作るのはとても有効！
ラズベリーパイには、ウェブサイトを構築するためのツールが沢山そろっていて、公開する場合の本番環境と殆ど同じ状態を作ることができます。本体自体がウェブサーバーになり、そのウェブサーバーが動作しているコンピュータ上でそのままホームページを作成し、公開用ディレクトリに保存するだけで、同じネットワーク上の他のコンピュータからアクセスしてローカルエリアだけで架空のWWWネットワークを構築することができます。
Fabshopでもラズベリーパイで学ぶインターネットの世界として様々な記事や特集を用意していますので、是非そちらもご覧ください！