fabshop website

ラズベリーパイでウェブサイトを構築するには?

ホームページ(ウェブページ)を作るのに必要な知識

HTMLドキュメント

インターネット上に展開されているウェブサイトはHTMLドキュメント(ウェブページ)で構成され、それらページがハイパーリンクで繋がっています。このHTMLドキュメントを作ることでウェブサイトを構築して情報提供したりインターネット上で様々なサービスを提供しています。

HTMLとはHyper Text Markup Language(ハイパーテキスト・マークアップ・ランゲージ)の略で、ここでいうハイパーテキストとは、ドキュメント同士をつなぐテキストの事を言います。皆さんがウェブサイトなどを閲覧するときに文字をマウスでクリックすると次のページに移動することができるこの仕組みの事を言います。

fabshop Hypertext

WWW(ワールド・ワイド・ウェブ)

このようにコンピュータ内のドキュメント同士をハイパーリンクで繋いでいくと、ドキュメントを閲覧している人は簡単に次から次へと文書へ移動していく事が出来て非常に便利です。このようにドキュメントが繋がっている様子はまるでWEB(ウェブ:蜘蛛の巣)のように見えます(上図)。このドキュメント間の移動は、インターネット上で公開されているコンピュータ上にあれば、他のコンピュータに置いてあるドキュメントへも移動できます。次の図は、あるウェブサイトがあって、その中の文書が他のコンピュータ(サーバー)上にある文書へとハイパーリンクしている様子です。

fabshop website

このように、インターネット上で公開されているドキュメントがハイパーリンクで世界中のドキュメントに簡単にジャンプできるようなネットワークを世界中に張り巡らされた蜘蛛の巣に見立てて「ワールド・ワイド・ウェブ: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サーバーのプログラムとして代表的なものが以下の2つになります。

  • Apache Webサーバー(アパッチ)
  • nginx Webサーバー(エンジンエックス)

どちらも利用者が多く、それぞれ設定方法などが若干異なります。

HTMLドキュメントを作るソフト

これも、Raspberry Pi OSには様々なものが用意されています。エディタと呼ばれるプログラムであれば、どれでもHTMLファイルを作れます。Linuxでポピュラーなviエディタなどでも作れます。HTMLはプログラミング言語の1つであるため、書き方などが決まっています。そのため、文章部分とHTML言語部分が色分けされて表示してくれるととても見やすくなります。Raspberry Pi OSにインストールされている「Geany」にはその機能がついています。

  • Geany(ジニ―) 図のようにHTML部分が青く色分けされている。

Geany Fabshop

>> bluefish 公式サイト http://bluefish.openoffice.nl/index.html

blufishはHTML作成におすすめなソフト

普通のエディタでも作成できるのですが、HTMLはプログラミング言語の1つで、文法がきちんとあります。できれば文法が間違っていたらそのエラーを教えてくれる機能がついていた方が便利です。ラズベリーパイでもホームページ作成ソフトのようなものがあって、それが「bluefish」です。ウェブページを構成するHTMLファイル内で使われるHTMLをさらに色分けして表示し、ウェブサイトのファイル構成なども管理できるようになっているためとても便利です。

BLUE FISH Fabshop

画像を作成・編集するためのソフト

ウェブサイトを作るときには写真などのが画像やイラストなどを使うと見やすく分かりやすいウェブサイトが作れます。インターネット上で利用できる画像の形式は限られていて、主に以下のファイル形式のものを利用します。

  • GIF ーーー 256色 単色がきれいにでてファイル容量が軽い。写真などには不向き。
  • JPEG ーーー 1678万色のフルカラーが利用でき、圧縮率も高いため写真などに向いている。
  • PNG-8/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 Grasphics

GIMPは高機能であるがため、ある程度の性能をもったLinuxマシンなどで動かすには最適ですが、性能が低いラズベリーパイでは少し動作が遅いと感じるときがあるかもしれません。ウェブサイトを制作している時には、画像加工やアイコン、ボタンの作成などを行う中でも簡単な操作だけが必要な作業も沢山あります。そのような場合は他のもう少し簡単な作業用のアプリをりようすると良いかもしれません。

ラズベリーパイでホームページを作るのはとても有効!

ラズベリーパイには、ウェブサイトを構築するためのツールが沢山そろっていて、公開する場合の本番環境と殆ど同じ状態を作ることができます。本体自体がウェブサーバーになり、そのウェブサーバーが動作しているコンピュータ上でそのままホームページを作成し、公開用ディレクトリに保存するだけで、同じネットワーク上の他のコンピュータからアクセスしてローカルエリアだけで架空のWWWネットワークを構築することができます。

Fabshopでもラズベリーパイで学ぶインターネットの世界として様々な記事や特集を用意していますので、是非そちらもご覧ください!

fabshop website
最新情報をチェックしよう!
>FabShop®

FabShop®

Fab(ファブ)とはFabricationの略で、日本語では「モノづくり」を意味します。Shop(ショップ)は工房や工作所の事をさす英単語です。この2つを合わせて、モノづくり工房の意味で「Fabshop®(ファブショップ)と名付けました。
Fabshop®では、今は当たり前のように普及したコンピュータやインターネットを活用して新しい時代のものづくりを提案していきます。

Fabshop®は登録商標です。

CTR IMG