Web知識0の人間が最短でWeb謎を作るためのマニュアル②【とりあえず自分のページを無料で持ってみる編】
どうも、ナゴマです。
超適当Web謎制作講座第二弾です。
前回はHTMLとJavaScriptが何者なのかということについて解説しました。
今回はいよいよ無料ホームページサービスを利用してサイトを持ってみたいと思います。
WordPress.comとFC2ホームページ
無料ホームページサービスはいくつかありますが、ここではWordPress.comとFC2ホームページを取り上げます。
まず、昨今のいわゆる「襲来戦」で多く利用されたのがWordPress.comです。
実はWordPressにはWordPress.orgとWordPress.comの2種類があります。
ホームページを作るときにはサーバーと呼ばれるものが必要なのですが、.orgの方はそのサーバーをレンタルするなどして自力で用意する必要があります。
一方で.comの方はすでにサーバーが準備されており、アカウントの無料登録さえすれば完全に無料でnoteなどと同じブログサービスとして利用できます。
.orgの方が自由度が高く、収益化につなげることができるという利点もあるのですが、やや複雑でサーバーの初期費用もかかります。
画像やリンクを置く程度のサイトであれば無料の.comで完結させることができます。
このWordPressには「ビジュアルエディタ」という機能があり、HTMLを書かなくてもかなり直感的に操作してサイトを作ることができます。
正直これはめちゃくちゃ簡単です。
Webプログラミングの知識なんていりません。
だから襲来戦ブームでこれが使われまくりました。
しかし、このWordPressは自由度が低いです。
投稿は全てブログの記事として扱われるので、ページのタイトルは常に表示されますし前後の投稿が見えたりします。
デザインも好きなようにはできませんし、何より好きな場所に入力フォームを置く、みたいなことができません。
（ソースエディタを上手く扱うとできるのかもしれませんが、WordPressブログとしての体裁のせいで勝手に整えられたりして逆に煩雑になってしまいます。）
ちなみに、この入力フォームが置けないことに対する苦肉の策が「パスワードをヘボン式ローマ字で入力」です。
ひたすら謎を並べて答えを入力して……みたいなWeb謎（塔とか）であればそれでも十分なのですが、「タイミングよくメッセージが表示される」「答えを入力すると謎の画像が切り替わる」みたいなことができません。
そこで利用するのが「FC2ホームページ」です。
これもWordPressと同じように、アカウントの登録さえすればサーバーを準備せずとも無料でホームページを作ることができます。
また、比較的簡単にJavaScriptを適用させることができます。
つまりギミックが置きやすい。
今回はこれを利用します。
サイトのアドレスを作る
さて、いよいよサイト作りですが、まずはFC2ホームページへのアカウント登録が必要になります。
このステップはしゑひさんという方が分かりやすくまとめてくださっているので、以下の記事をご覧ください。
ここで注意したいのが「ドメイン名」です。
FC2ホームページでWebサイトを作った場合、ページのURLは「https://××××××××.web.fc2.com/○○○○○.html」のような形式になります。
このうち、「https://」の部分と「.web.fc2.com/」の部分は変えられません。
また、HTMLでサイトを作るなら最後の「.html」もついてきます。
つまり自由に決められるのは「××××××××」の部分と「○○○○○」の部分だけです。
この「××××××××」の部分がドメイン名で、上記の記事にあるようにアカウント作成の段階で決めるのですが、これは1つのアカウントにつき1つしか決めることができません。
また、後から変更することもできません。
そのためあまり適当に決定しない方が良いです。
一方で「○○○○○」の部分ですが、これはそのページを書いているHTMLファイルの名前になります。
つまり右クリックして「名前の変更」をするだけで簡単に書き換わります。
もし謎解きのギミックにURLを利用したいのであれば、URLのどの部分であれば自由に弄れるのかということを意識してから作り始めるようにしましょう。
逆にURLを弄られて想定しないルートで進行することを防ぎたい場合は、ファイル名をランダムにするなどの対策をしておいた方が良いです（ファイル名を「Wave1」「Wave2」とかだけにしてると先のアドレスが簡単に推測されます）。
（HTMLを一切書かずに）最初のページを作る
さて、いよいよページ作成です。
ログイン後、「ファイルマネージャー」という部分をクリックするとこのような画面になります。
これがいわばあなたのホームページの機関室です。
この部分にHTMLファイルを置けばそれだけでページが完成します。
index.htmlとあるのは初期ページですが、無視してOKです。
.htaccessというのはホームページをホームページたらしめるために何か重要な働きをしているファイルだと思いますが、内容を理解する必要は全くありません。
ただし、絶対に消去しないでください。
たぶんめんどくさいことになります。
ではページ本体を作ります。
ファイルマネージャーの白い部分を右クリックして、「ファイルを作成」をクリックするとテキストファイルが生まれます。
この辺はPCの管理画面と全く同じなので慣れてれば直感的に扱えるかと思います。
この新しくできたファイルに「（適当な名前）.html」という名前を付ければ完成です。
ただし、（適当な名前）の部分は半角英数字（と一部の記号）のみにしてください。
ひらがなとか使うと多分動きません。
こんな感じになればOKです。
あとドメイン名はめっちゃ適当に付けてますが気にしないでください
次に、このままだとページが白紙なので内容を書いていきます。
HTMLファイルを右クリックして「ソース表示で編集」を選択してください。
こんな感じの画面になります。
ここにHTMLなどのプログラミング言語で色々書いていくとページが充実します。
ではどんなことを書けばいいのか。
私の過去のWeb謎のファイルを覗いてみましょう。
何となく理解してもらえば良いのですが、ホームページに直接表示されない部分の記述が多いです。
冒頭の<html> <head> <meta……の部分は事務的な内容ですし、<h1……みたいな部分は文字の大きさや太さを規定しているものです。
この辺を理解するには体系的な学習が必要になります。
つまり面倒です。
さっきの白紙のソース画面に冒頭の部分からタイピングしていくのはただただ疲れます。
そこでビジュアルエディタを併用します。
もう一度ファイルマネージャーの画面に戻り同じファイルを右クリックして、今度は「TinyMCEエディタで編集」を選んでください。
こんな感じの画面になります。
嬉しいことに、このエディタではフォントサイズ・色・太字・斜体・画像・リンク・アンダーバー・文章の揃え方などの便利機能が備わっており、ボタン一つで扱えます。
WordやGoogleドキュメントなどを扱える人ならそのまま操作できるはず。
これで適当に入力して、ホームページっぽくしてみます。
見出しについて
「段落」というところをクリックすると「Heading ○」というのが選べますが、これは見出しのことです。
ページのタイトルとか付ける時に使います。
数字が小さいほどデカい見出しになります。
改行について
普通にエンターキーを押して改行しようとすると段落が切り替わり微妙な隙間が生まれます。
この文章みたいに段落を変えずに改行したいならシフトキーを押しながらエンターを押せばOKです。
さて、ある程度書けたらとりあえず「上書き保存」を押します。
再びファイルマネージャーに戻り、さっきまで編集していたHTMLファイルをダブルクリックすれば出来上がったホームページが開きます。
これでOKです。
あなたのホームページができました。
あれ？じゃあHTMLは……？ソースコードは……？さっき言ってた事務的な作業は……？みたいな感じになりますが、もう一度ソースコードを覗いてみると、
なんと綺麗に全部書いてくれています。
冒頭のなんかよくわからない部分もきちんと書かれている。
ビジュアルエディタで編集した時点できちんとしたホームページになるようにFC2のサービス側が勝手に整えてくれてるわけです。
これで内容を書くと同時にややこしいセットアップも完了しました。
（この画面の内容が理解したいなら検索すればどうにかなります。例えば<ul>の意味が知りたければ「HTML ul」で検索すると大体分かります。）
というわけで「ホームページを持つ」という目標を達成できました。
正直文字ベースのサイトを作るのであれば先ほどのビジュアルエディタだけで十分です。
ですが、この記事の目的はWeb謎を作ること。
謎の画像や解答入力フォームを置きたいわけです。
これを行うには結局HTMLでソースコードを書く必要があります。
ですが、面倒な部分は今回の記事のビジュアルエディタですっ飛ばしたので結構楽です。
というわけで次回の記事は「HTMLをある程度理解しながら画像とかを配置する編」になると思います。
ではまた。