Web知識0の人間が最短でWeb謎を作るためのマニュアル①【HTML・CSS・JavaScriptとは何かを理解する編】
どうも、ナゴマです。
私は今まで「Fundamental Matters」や「The Tower of CATS」といったWeb謎を制作してきました。
全くWebプログラミングに関する知識はなかったですし、現在でも特に体系的に理解しているというわけではないのですが、世の中は便利なもので付け焼き刃的に知識を仕入れても何とか作品を作ることができました。
そこで、このブログではそうやって得た知識・技術をまとめて共有していこうと思います。
この記事は「Web謎の案はあるけどホームページ作成の初手から分からない」「調べたら全部分かるのは知ってるけどどれがWeb謎作りに必要な技術なのか判断できない」「LINE謎制作じゃ物足りなくなってきた」という方向けの記事です。
そのため、謎解き問題の作り方は扱いません。
また、きちんとWebプログラミングを勉強したい方はこの記事を読まないことをオススメします。
用語の使い方も雑ですし、解説しない部分も多いです。
詳しい人が見るとツッコミどころの多い記事となると思います。
あくまで最短ルートを通りたい人向けの記事なので、応用の利く技術を身に着けたいのであれば、きちんとした団体やプロの方が出している講座記事などを閲覧することをお勧めします。
とはいえ一回モノを作ってから色々付け足して勉強したい派の人はここから始めるのもアリかもしれない
記事は何回かに分けて投稿する予定です。
この記事は初歩の初歩、概念の理解の部分なのであまり具体的なものは登場しません。
ご了承ください。
Webサイトの作り方（何も知らない）
まずはWebサイトの作り方のイメージですが、「ちゃんとした言語で書かれた文章をそれ専用のアプリにアップロードすれば勝手にサイトができる」という認識で構いません。
もちろんそんなことはないのですが、世の中には「ホームページ作成サービス」みたいなのがあってそれを利用すれば勝手にWebサイトができます。
YouTubeなどの動画サービスに動画を上げさえすれば、再生位置や音量の調整機能は自動でついてきますよね？
それと同じで、ホームページ作成サービスに（対応した形式の）文章を上げればウェブサイト化する機能は自動で付いてきます。
今回はこれを利用します。
Webを構成する3種類のファイル（実質2種類）
そうすると、次に理解するべきは「どのようなファイルを作ればいいのか」ということです。
YouTubeに動画を上げるならmp4などの対応形式のファイルを用意すれば良いです。
Web謎を作るのに必要なファイルは3種類あります。
一つ目が「HTML」で、これはテキストや画像、フォームなどを「どこに置くか」決めるものです。
Wordで文書を作成するようなイメージ。
二つ目が「JavaScript」で、これはフォームや画像の変化、ページの移動など、HTMLで置いたものが「どのように動くか」を決めるものです。
三つめが「CSS」で、これは文字や背景の色など、サイトの飾りつけをするものです。
このうち、Web謎を作る際に重要になるのはHTMLとJavaScriptの2つです。
CSSは初期段階では上手く書けなくていいと思います。
私も書けません。
HTMLはサイトの「見かけ」を、JavaScriptはサイトの「中身」を作るものです。
これらを上手くつなぐことができればとりあえずサイトは動きます。
これらのファイルを書くために特別なソフトは必要ありません。
プログラムを動かす機能はホームページ作成サービス側が用意してくれますので、最悪でもメモ帳機能があればどうにかなります。
パソコンやスマホで文字を正しく打ち込んでいけばいつかは完成します。
「フォームに入力された単語が正解なら次のページへ進むプログラム」のイメージ
では、定番の「入力された単語が正解なら次のページへ進み、不正解なら『不正解です』と言う」プログラムの流れを見てみます。
概念的な説明で、まだ一切専門用語は使いませんのでご安心ください。
- まず、「入力フォーム」と「送信ボタン」が置いてある（＝HTMLで書かれている）。
- 「送信ボタンを押す」という動作が行われたタイミングで、「入力フォームに書かれた文字列が正解の単語と同じ」ならば「次のページを開く」という動作が行われる。また、「入力フォームに書かれた文字列が正解の単語と異なる」ならば「『不正解です』というメッセージを送る」という動作が行われる（これがJavaScriptで書かれている）。
こんな感じの流れです。
これを目で追って理解するのは難しくないと思いますし、HTMLとJavaScriptの違いも何となく理解できるかと思います。
とすると次にぶち当たる壁は「これをその言語でどうやって書くんだ」という部分だと思います。
また「書いたところでどうやってそれがサイトになるんだ」というのも壁です。
メモ帳に書いたHTMLが即座に検索したら出てくるサイトになるわけじゃないですし。
というわけで続いての記事は「とりあえずサイトを所持してみる」編です。
こちらもよろしくお願いします。
ではまた。