簡単なWebサイトをつくってみる #1
こんにちは。
最近いいカメラを買いました。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を書き始めます！
書いたコードはこちらに載せていく（かもしれません）
文字ばっかりになってしまった...。
小学生でも出来る！C++プログラム
はおっ（０＾∀＾）ノ お久しぶりです。渚です。
プログラムしか書けない私たちですが、この度は同人界隈向けに、
なんとなくこんな風に作ってるよーというのを発信すべく、
定期的にブログで紹介してみようかということになりました。
この記事はそんな連載の第2回です。
渚からは最初のテーマとして「小学生でも出来る！C++プログラム」
を紹介していこうと思います。
今のご時世，小学生でもプログラムしますよね！
みたいなことありますよね。。；ほんと大変。
まぁ，なので，塾に通わなくても，簡単にプログラムを学べるよ～！
っていうのをやります。
ちょっとしたゲームを作るところまでできれば…とは思いますがそれは追々…。
超初心者向けでお届けします。
関連ブログ
目次
＜人物紹介＞
渚：プログラムを教えてくれる先生
ココ：いんたーねっとって聞いたことがあります！
マナブ：将来はゲームプログラマーになりたいな！
プログラムってなんだろう？
渚＞プログラムって聞いたことありますか？
ココ＞ぷろぐらむ？
マナブ＞ゲームを動かすためのもの？
プログラムとは
簡単な言い方をすると，コンピュータに出す命令のこと
ゲームを動かすために，様々な命令がゲーム機に出されているので，
プログラムは，ゲームを動かすためのものって言えます！マナブくん正解！
でも，ゲーム以外にもコンピュータで動いているものはたくさんあります。
渚＞コンピュータが入ってるものって，なにがあるだろう？
ココ＞スマホ！
マナブ＞車や，全自動洗濯機とか，テレビもかな。
ココ＞えっ？！テレビってコンピュータなの？
渚＞テレビ＝コンピュータとすると不思議な感じがするけれど
テレビの中にもコンピュータは入ってるよっ♪
コンピュータとは 通常，パソコンと言われる機械を指します。 でも，マイコン(マイクロコンピュータ)や，スパコン(スーパーコンピュータ) と呼ばれるコンピュータも仲間です。 車やテレビには，このマイコンと呼ばれるコンピュータが入っています。
ココ＞いろんなものにコンピュータって入ってるんだね
渚＞そうですね。そして，コンピュータを動かすための命令がプログラムです。
マナブ＞プログラムって言っても，いろんな種類があるんだよね？
渚＞そうですね。いろんな種類があります。でも，その説明の前に
プログラミング言語についてお話しますね。
プログラミング言語ってなんだろう？
プログラミング言語 日本語や英語のような，コンピュータに対して命令する専用の言葉です アメリカ人に，日本語で，「絵を描いてくれませんか？」と言っても「？？？」 ってなりますよね。それと同じで， コンピュータに，日本語で，「絵を描いてくれませんか？」と言っても「？？？」 となるわけです。 アメリカ人とは英語で話すように，コンピュータとはプログラミング言語で 会話できるようになりましょう♪
ココ＞コンピュータにお願いするときは，プログラムっていう言葉を使うんだね
渚＞その通り！
ココ＞どんな言葉なの？
渚＞日本語，英語，フランス語のように，プログラムにもいろんな言葉があります。例えば，C/C++や，Java，C#などが有名ですね。
マナブ＞HTML/CSSや，PHP，アセンブリとかも聞いたことがあるよ。
渚＞それらは，ひとくくりにすると，大人の事情で怒られそうだけど
それも，プログラムのお仲間と言ってもいいかな＾＾；
プログラムの種類 プログラム言語にも色々な種類があるよ詳しい話をすると，時間が掛かっちゃうので簡単に紹介すると 低級言語は，コンピュータにとって最も理解しやすい言語だけど， 人にとっては，使いこなすのがかなり難しい言語です。 高級言語は，低級言語よりは，扱いやすいけれど，それなりに知識が必要です。 コンパイラ言語は，書いたらすぐ動かすことができるスクリプトと違って コンパイルというホンヤクを行う必要がある言語です。 スクリプト言語は，ホンヤクしながら実行される言語です。 つまり，通訳さんがいるときに会話をするようなものですね！
ココ＞なんかいっぱいあるんだね・・；
渚＞そうですね。いっぱいある内の１つである，C++を学ぶってことだけ覚えておいてね！
マナブ＞でも，なんでC++にしたの？
渚＞ぉっ，いい質問ですね！
C++ってなに？
渚＞プログラミング言語には，色々あるけれど，C++を選んだ理由は
一言でいうと「見栄」かな？
マナブ＞えっ・・・・
渚＞プログラム言語としての認知度や汎用性が高くて，でも習得するには結構
むつかしい。専門用語を使うと，オブジェクト指向と手続き型の両方に対応しているから難しい。
むつかしいからこそ，C++できます！って言えると，かっこいいｗ
マナブ＞C++できるとかっこいいんだ
渚＞C++をちゃんと習得してる人は，他のプログラム言語も，体得しやすいっていうメリットもあるよ。
ココ＞ほぇ～，なんかすごいんだねぇ
渚＞そぅそぅ。C++できたら凄いよ！
ココ＞がんばってみようかな
C++(シープラ)とは？ 汎用性が高く，あらゆる分野のコンピュータで使われている言語 C言語の上位互換版で，C言語の機能に，オブジェクト指向等の使用を追加したもの。 基本的に何でもできるが，プログラムするのに時間がかかりやすい。 使いこなせる人はかっこいい
次回
とうわけで、超簡単にではありますが、プログラムについての紹介でした！
次回は，最も時間がかかる環境構築！
---フリー素材提供--------------------------------------
[ジュエルセイバーFREE] URL：http://www.jewel-s.jp/
