blockun dialy

同人ゲーム制作サークル「SaNa」のメンバーが書くゆるーいブログです。

簡単なWebサイトをつくってみる #1

HTML CSS JavaScript 同人サークル ニコ生

こんにちは。
最近いいカメラを買いました。soraです。

プログラムしか書けない我々ですが、この度は同人界隈向けに、なんとなくこんな風に作ってるよーというのを発信すべく、定期的にブログで紹介してみようかということになりました。この記事はそんな連載の第1回です。

自分からは最初のテーマとして簡単なwebサイトを作っていこうと思います。
サークルを作ったらWebサイトを公開したい！！みたいなことありますよね。

webサービスのようなものを作るところまでできれば…とは思いますがそれは追々…。

超初心者向けでお届けする予定です。

関連ブログ

  • #1 webサイトをつくる準備・どうやってつくる？

目次

Webサイトを公開するとはどういうことか

誰でも閲覧可能なWebサイトを公開するということは、誰でもアクセス可能なサーバに公開したいファイルを置くことです。もっと言葉を簡単にすると、「誰でもダウンロードできる場所に、みてほしいファイルを保存する」ことです。

WebブラウザはHTML（Webページを記載するためのマークアップ言語）ファイルをダウンロードしたとき、それを解釈していつもみているようなWebサイトを表示しているにすぎません。

つまりまとめると、「誰でもダウンロードできるところにHTMLファイルを置けばいい！」わけですね。

必要な技術

とはいえ、HTMLだけではいつも見ているWebサイトのように華やかなレイアウトや、ボタンを押した時の動きは再現できません。Webページは一般的に、次の3つの技術を用いて解釈されています。

HTML

Webページを記載するためのマークアップ言語。
* この部分は段落ですよ
* こっちは画像ですよ
といった文章の意味づけの役目も持ちます。

CSS

Webページのレイアウト、見た目を記述するための言語です。 背景の色を変えたり、文章の行間を変えたり、角丸を指定したり…。

JavaScript

ブラウザ上で実行されるプログラミング言語です。ここまでくるとプログラム書いてる感が出てくると思います。
CSSによるレイアウト定義だけではできない、さらに複雑な動作をさせる時は必要になるケースがあります。
必須なものではないので作るページの内容によっては必要ないかもしれません。
この連載？ではせっかくなので超導入部分だけ扱っていこうと思います。

基本的に、どんな複雑なWebサイトもこの３つで動作しています。

同人サークルで考えられそうなサイトを公開する方法

おまけコーナーです。記事ではHTMLを書こう的なことを書きましたが、細かいことはわからなくても公開できる方法はあるので、メリット・デメリットと一緒にサイトを公開する手法を並べてみたいと思います。

Webサイトを作成できるWebサービスを使う

見出しがちょっと複雑になりました。HTMLやWebについての知識がなくても、簡単にサイトを公開できるサービスがあります。wix等が有名かもしれません。こういったサービスを使ってサイトを公開しているサークルさんもまあまあ見かける印象です。

  • 難易度：★
  • メリット：何より簡単。HTML等の知識がなくても大丈夫。
  • デメリット：ある程度決まったレイアウトの上で作成するので、カスタマイズできる範囲に限度がある。独自ドメインが使えない(?)。

もう少し高度なWebサイト作成サービス

WordPressが有名ですが、上記のようなサービスのようにレイアウトを変更できるだけでなく、プラグインという形で多くの機能を追加できます。ブログみたいなサイトを作ったり、ECサイトみたいなものを作ったりできる様々なものが提供されていますが、つくるサイトによっては上記に比べると難易度はかなり上がります。

  • 難易度：★★★
  • メリット：単純なサイトをつくるだけなら簡単。HTML等の知識がなくても大丈夫。プラグインで機能追加も
  • デメリット：ある程度決まったレイアウトの上で作成する。カスタマイズは可能ですが、より高度な知識が必要。

HTMLを書いてどこかに置く

前の節までで説明してきた方法で、連載でもここを扱います。つまり、サイトの内容は自分でコードを書いて作成し、それを誰でも見える場所にアップロードしてしまう方法です。HTML、CSS等の知識は必要ですが、自由自在にサイトをつくれます。アップロードする場所は誰でもアクセスできる場所であればどこでも大丈夫ですが、独自ドメインを使いたい場合は、対応しているアップロード先を選ぶ必要があります。

  • 難易度：★★
  • メリット：自由自在に思う通りのレイアウトがつくれる
  • デメリット：HTML、CSS、JavaScriptなどの知識は必要。

サーバを立てる

ここまでするとレイアウトはもちろんのこと、基本的になんでもできます。SaNaではこの方法で作成していて、サイト内に表示するゲームやお知らせなどの情報は、コードを変更しなくてもアクセス管理したコンテンツ管理画面から変更することができるようになっています。

  • 難易度：★★★★
  • メリット：レイアウト、機能など基本的になんでも自由に作れる。
  • デメリット：HTML、CSS、JavaScriptなどに加え、プロトコル、サーバ構築に関する知識が必要。

次回

とうわけで、超簡単にではありますが、こんなものが必要ですという紹介でした。
次回はHTMLを書くのと、CSSを書き始めます！

書いたコードはこちらに載せていく（かもしれません）

文字ばっかりになってしまった...。