まずは書いて動かしてみる

ウェブプログラミングのための文房具

ウェブ制作に必要な道具は、エディタ、ブラウザ、サーバーの３つです。

デザインはセンス？

「ウェブデザインは見せ方なのでセンスの問題だ」と考える人がありますが、ウェブデザインはセンスというより勉強だと思います。そして勉強＝制作です。量が質に変わるように、自分にはセンスがないと思う人は単に、勉強不足＝制作不足だと思います。ウェブデザインの本はいくつも出版されており、図書館や書店で自分に合う本を見つけて取り組める時代です。参考にしたいサイトを見かけたら、ブラウザの「ソースを表示」機能を使ってソースコードを無料で読んでいけます。２～３年間、少しずつ取り組めば、一定の技術水準が身に付きます。その先は、自分の思うように制作を進められるようになっていますよ。

後悔しないための公開術

自分のＰＣで正しく動くか確認

世界にファイルを公開するサーバーに対して、自分で使うだけのＰＣをローカルマシンといいます。サーバーはサーバーソフトが動いているのでサーバーの機能を果たせます。サーバーソフトがなければただのＰＣです。ローカルマシンにもサーバーソフトが入ります。無料で入手できるＡｐａｃｈｅ（アパッチ）やWindows10に入っているＩＩＳがよく使われます。これらをローカルマシンで有効化すると、サーバーにアップロードしたのと同じような環境が実現します。また、エディタのプレビュー機能でソースファイルをブラウザで確認することもできます。サーバーにアップロードする前に、ローカルマシンで確認できるのです。

ローカルマシンで動作確認が終わってからアップロードする

Ａｐａｃｈｅ、 ＩＩＳ、 ローカルホスト、 ポート番号、 ＣＧＩ、 ＸＡＭＰＰ、 ドキュメントルート

すべてのブラウザで正しく動くか確認

ブラウザを作る各社をブラウザベンダーといいます。ベンダーごとに独自のデザインを開発しています。同じプログラムを異なって解釈したり、新しい機能への対応が遅れていたりします。なので、いくつかの主要なブラウザすべてで動作確認せざるを得ません。もしあるブラウザが意図しない表示で動いた時は、別の書き方に代えたり、新しい機能を取りやめたりします。書き方は意外と幾通りもあるものです。

ブラウザはそれぞれ別の機能やデザインをもつ

Ｆ１２開発者モード、 要素の検証、 ソースの表示、 デバッグ、 コンソール、 キャッシュ、 Ｃｏｏｋｉｅ、 Ｗｅｂストレージ、 ベンダープレフィックス

公開作業で失敗しないための小技

サーバーにコピーを置くことをアップロード、サーバーからコピーを得ることをダウンロードといいます。ポイントは、サーバーとファイルをやりとりするときは、いつもコピーのやりとりだということです。サーバーとやりとりするなかで、ファイルが移動したり消えてしまったりすることはないのです。なので、ローカルマシンでファイルを管理できていれば良いと思います。

サーバーとのやりとりはいつもコピー

  • 小技１：時刻で管理

    ファイルの新しさで管理する方法です。アップロードするときは更新したファイルだけでよいですが、どのファイルをアップロードするか判断するときは、ファイル名よりも更新時刻で判断すると簡単です。更新時刻順に並べ替え、サーバーにアップロード済のファイルの時刻と異なる時刻のファイルだけ、アップロードします。

  • 小技２：アップロードの前にバックアップ

    更新した後に更新前のファイルがほしくなることがあります。間違って同じ名前のファイルデータで上書きしてしまった時や、更新前のコードを参照したい時、サーバーは上書き前のバージョンを取っておいてはくれません。そこで、アップロードの前にアップロードするファイルのみを、別のフォルダに取り分け、フォルダ名を日付にすると、アップロード用のフォルダと制作用のフォルダを分けられます。

  • 小技３：ＵＲＬの管理法

    アップロードしたファイルはＵＲＬでアクセスできます。もしそのファイルを削除したくなってしまったら、ＵＲＬを変更する事情が生じたら、使わなくなるＵＲＬには何らかのファイルを当てがっておいてください。検索エンジンでヒットしても４０４エラーが出てしまい、ユーザーのアクセスがストップしてしまいます。４０４ページを置いたり、数秒後にジャンプするよう仕掛けたり、別のページにリダイレクトさせるなど、策はいろいろあります。ＵＲＬは一度作ってしまうと削除しにくいのです。

ＳＳＬ、 ＳＭＴＰ、 ＰＯＰ３、 ＩＭＡＰ、 ＩＰ、 ＴＣＰ、 ＦＴＰ、 ベーシック認証、 ダイジェスト認証、 アクセス解析、 ブロックチェーン
世界に向けて公開？

インターネットについて教わると、インターネットは世界に向けて公開されるから、公開には慎重になりなさい。と思わされます。確かに、ウェブは同時代のすべての人が見ることができます。しかし、現実では検索エンジンの上位に引っかかることさえ難しく、更新せず放置しておくとアクセスがほとんどなくなります。よくたとえられるのは、ウェブは出版社を自分で持てる、ということです。ＵＲＬを伝えることで、自分の本を人に見せることを、いつでもすぐに誰にでもできることが、ウェブの良さだと思います。腹を割って気さくに話す人は好かれるものです。情報をオープンにすることで、思いもよらないつながりができることがあります。本当に隠しておくべき情報は何か、一度整理してみるのも良いかと思います。

アップロードで経験値アップ

フリーミアムサーバー

フリーミアムサーバーは、無料で利用できる機能と有料版の機能を兼ね備えているサーバーのことです。無料版の機能で充分な場合には、無料でウェブサイトを持つことができます。無料版ではドメイン名にサーバー運営会社の名前が入ることが多いです。

クラウドホスティング

クラウドホスティングでは、利用量に応じて課金されます。ありとあらゆる機能が初めから利用できます。最初の数か月間は無料お試し期間です。今、国内企業や海外で大きなビジネスになっています。

ドメインを借りるには

ドメインを借りるには、まず「.com」や「.co.jp」「.net」など、ドメインの種類を選びます。600～1,000種類あるそうです。次に、ドメイン名を決めて、すでに使われていないかをチェックします。もし使われていなければ、そのドメイン名で借りられます。最後に、使用者情報や、毎月発生するレンタル料の支払方法を設定して、完了です。ただし、ドメインを借りても、サーバーがなければアップロードできません。ドメインとサーバーはセットで借りる、と覚えてください。また、ドメインとサーバーを同じ企業で契約した場合はすぐに利用できますが、ドメインを契約した会社とサーバーを契約した会社が異なる場合は、ドメインの管理ページにサーバー情報を自分で登録し、ドメインとサーバーを対応させる設定が必要です。

ドメイン料はドメインの種類によって異なります。「.net」や「.info」は毎月100円ほどですが、「.com」や「.jp」は万単位です。個人で利用する場合は、ドメインとサーバーのセットで年間5,000円～10,000円が相場と思います。

ウェブとＰＣの基礎

サーバーとはＰＣである

サーバーは、ＰＣをたくさんつないだものです。サーバー用のＰＣは重ねてたくさん置けるように平らなものが多く、それらがたくさん置かれた空間はデータセンターといわれます。ちなみに、市販の一般向けＰＣもサーバーにすることができます。ＰＣをサーバーにするには、次の３条件がそろえば、まずＯＫです。

  • インターネットにつなげられる
  • ストレージを充分そなえている
  • セキュリティ対策が万全である

ブラウザでインターネットを見るまでに、ブラウザはまずサーバーからソースコードファイルやマルチメディアファイルをダウンロードします。次にダウンロードしたソースコードファイルを表示できるよう変換します。最後に変換した画面を映します。ウェブ制作は、ブラウザに思ったような画面を映してもらえるよう、ソースコードを書く仕事です。

サーバーはコンピューターである

クラウド、 ＬＡＮ、 Ｗｉ－Ｆｉ、 ５Ｇ、 ＩｏＴ、 Ｓｏｃｉｅｔｙ５．０、 ＲＡＩＤ、 稼働率
コンピューターを分解する

コンピューターの３大要素は、ＣＰＵ、メモリ、ストレージです。ドライバーでねじを外してフタをとると、内部構造が見えます。メモリはすぐに交換できます。ストレージもねじをさらに外せば簡単に取り出すことができます。メモリは電源を消すと情報を忘れてしまうため、長持ちします。ストレージは電源を消しても情報を覚えており、情報を書き込むたびに寿命が縮みます。ＣＰＵは基板に付いているため、交換は難しいです。ＰＣを買うとき、ＣＰＵで選ぶと良いのは、交換が難しい部品だからです。ねじを外してしまうとメーカー保証対象外になってしまうので、保証期間が過ぎてからトライしてみてください。

フォルダとファイル

サーバーはＰＣですから、ファイルはフォルダに入っています。フォルダもフォルダに入っています。すべてのフォルダが入っているおおもとのフォルダをルートディレクトリといいます。そして、すべてのファイルは、入っているフォルダ名をたどっていき、ファイル名とつなげれば、そのファイルの入っている場所が表せます。ファイルの場所をパスといい、ルートディレクトリからたどったパスを絶対パス、ファイルからたどったパスを相対パスといいます。そして、この茂る木のような構造を木構造といいます。木構造は、狭い空間にたくさんの葉を茂らせるように、限られたストレージにたくさんのファイルを保存できます。また、パスを１ファイルに１つ持てるので、ファイルを探しやすいことも利点です。

ファイルは１種類のパスを持つ

ディレクトリ、 絶対パス、 相対パス、 木構造、 探索

偉大な発明、ＵＲＬ

サーバーはＰＣであり、ファイルは１つのパスを持っています。ブラウザはサーバーからファイルをダウンロードしますが、ダウンロードするファイルはパスを１つ持っています。そのパスに、通信情報を頭に付けたものを、ＵＲＬといいます。ＵＲＬは、「通信情報＋ＰＣ名＋パス」と思ってください。通信情報は、「http://」「https://」がよく使われます。「http://」から始まるファイルは第三者が改ざんできるため、「https://」での公開が勧められています。また、ＰＣ名を「ドメイン」といいます。ドメインは、世界中のドメインを管理するＰＣ「ドメインネームサーバー」から借りて使います。ＵＲＬは、世界中のドメインに置かれたファイルを、ブラウザでひとつひとつ見ることを可能にした、画期的な発明なのです。

ＵＲＬ=「http(s)://」＋「ドメイン名」＋「ファイルのパス」

ＨＴＴＰ、 ＨＴＴＰＳ、 ドメイン、 サブドメイン、 ＤＮＳ、 ＵＲＩ、 ＵＲＮ、 ４０４エラー
陸の孤島

ウェブはＵＲＬをリンク先にできるところが画期的な発明です。クリックするだけでファイルからファイルへ飛べる、しかもどんなファイルでも。検索エンジンで有名なグーグルのラリー・ペイジとサーゲイ・ブリンは、図書館学からヒントを得て、検索エンジンのアルゴリズムを開発しました。彼らのおかげで世界中の人々が作ったほとんどのページがリンクされました。コロンブスが新大陸を発見したように、検索エンジンが見つけられないページはほとんどなくなりました。検索上位に来るように個性的な固有名詞を作る、有名になってしまわないように凡庸な名前を付けるなど、検索エンジンの利用戦略もさまざまです。

ウェブページの著作権

オールライトリザーブド！…？

ウェブページは書き物なので、著作物として権利が保護されます。著作権は書いた時点で生じるので、「© All Rights Reserved」と書かなくても権利は発生しています。著作権法での著作物の定義、「思想又は感情を創作的に表現したものであつて、文芸、学術、美術又は音楽の範囲に属するものをいう。」にはソースコードも当てはまります。しかし、ソースコードは小説や絵画等の著作物とはやや性質が異なるため、現在も法律を整備・検討しているところです。

著作権は書いた時点で生じている

著作権法、 個人情報保護法、 使用許諾、 肖像権、 情報セキュリティ、 不正アクセス禁止法、 サイバーセキュリティ基本法、 特定電子メール法

クリエイティブ・コモンズ

ソースコードは簡単にコピーできることや、二次創作も盛んであるため、プログラマが積極的に著作権を放棄する仕組みがあります。たとえば、「クリエイティブコモンズ ライセンス」では、

  • 作品のクレジットを表示すること
  • 営利目的での利用をしないこと
  • 元の作品を改変しないこと
  • 元の作品と同じライセンスで公開すること
の４種類からいくつかを組み合わせて、自分で著作権の範囲を指定できます。また、ＭＩＴライセンスは、著作権表示とＭＩＴライセンスの全文を掲載することで、改変、再配布、商用利用、有料販売でも自由に無料で使ってもらえるよう宣言できます。ウェブによって情報が無料で閲覧、改変、複製、利用できる裏で、著作権制度が深くかかわっています。

フリーウェア、 シェアウェア、 パブリックドメイン、 ＣＣライセンス、 オープンソース、 コピーレフト、 ＭＩＴライセンス

Ｗ３Ｃが取り組んでいること

新しい物事は既存の物事の組み合わせといわれますが、新しい物事の登場は不思議と尽きません。制作者が増えても制作物を誰でも見られるよう、ウェブの言語はＷ３Ｃ（ワールドワイドウェブ コンソーシアム）が標準化しています。どのブラウザでもコンテンツが同じように見られるのは、Ｗ３Ｃがブラウザのために言語の仕様を決めているからです。

ウェブの仕様を決めている団体がある

Ｗｅｂ２．０、 ＳＮＳ、 ブログ、 ＣＭＳ、 Ｗｉｋｉ、 Ｗ３Ｃ
新しいものなどあるのか？

新しいものが生まれ続けるウェブはとても不思議です。同時代の世界中の才能が、日々創造的に仕事し、その結果が今のウェブなのです。石器の時代からコンピューターまで、人間は常に新しい道具や情報を作り出し、人々を助けながら経済を大きくしてきました。地球にある資源は昔から大して変わらないのに、科学で利用法を見出して可能性を広げてきたことも一因ですが、何より一部の人間の圧倒的情熱が世界を率いてきたと思います。新しい物事はこれからも生まれるでしょうし、世界はずっと変化していけると思います。