突然ですが、掲示板を作ることにします。
実は使いたい掲示板があるのですが、まだその掲示板を見たことがないので。
まあ使いたいってのは投票できるタイプの掲示板なんですけどね。
候補についてるボタンを押したら数値が増えて、誰にどれだけ投票したかがわかるという。
それだけだったらそこらの無料掲示板でも使えばいいという話なんですけど、私が使いたい仕様のものがないんです。
だったら自分で作るしかないなと。
とはいえ、基本的なものができないのではお話にならないので、まずは基本的な掲示板を作ることを目標とします。
で、追記でも書いてますけどHTML、CSS、JavaScriptを使えれば掲示板ができると思ってたんですけど、サーバー側をいじらないと他の人も見られる掲示板にはならないということを最近知った次第でして。
なので、まずはフロントエンドだけの（自分のパソコンでしか表示できない）掲示板を作ったあと、バックエンドを含めた（他のユーザーが使える）掲示板を作って行こうと思います。
使うエディターはVS Code。
エメットが使えて便利。
index.htmlというファイルを作って、このアプリで開いてコードを書いていきます。
で、書いたコードを確認するためにはindex.htmlを開かなくてはならないのですが、いちいちファイルをダブルクリックして開いていたのでは面倒です。
なのでVS Codeでは拡張として「Live Server」をインストールしておいてください。
拡張を探す方法はshift+Ctrl+Xを押して、一番上の検索窓に「Live Server」と入力すれば出てきます。
紫色のアイコンです。
こうすることで、index.htmlのコードを書いてから、右クリックで「Open with Live Server」を選べば、すぐにコードが反映された画面が出てきます。
さらに、CSSではSassという便利な機能を使うことになりますので「Live Sass Compiler」もインストールしておいてください。
これを作っておくとSassという書き方をしたとき、自動で本来の書き方に変換してくれます。
詳しくはCSSを書くところで説明します。
html-css-javascript.hatenadiary.com
本来の書き方だと結構時間を取られてしまうので、当ブログでも簡単な書き方で済むSassを使っていきます。
まず「！」だけでここまで書いてくれます。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>掲示板</title> </head> <body> </body> </html>
とりあえず、タイトルは「掲示板」にしときます。
思いつく必要なものは「名前を書く欄」「コメントを書く欄」「送信ボタン」といったところでしょうか。
3つ必要なものがあるので、なんとなくdivタグを3つ付けておいて、その中に押し込んでしまおうかと思います。
#item-$*3
と書けばIDに数字を付けたdivタグが出来上がります。
<div id="item-1"></div> <div id="item-2"></div> <div id="item-3"></div>
#はID、$は数字をいれるところですね。
3つ作りたいから*3。
こんな感じですね。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="item1"></div> <div id="item2"></div> <div id="item3"></div> </body> </html>
次に、名前を書く欄をつくります。
一行だけの文字列を入力できるフォームを作ればいいのでしょうけど、やり方がわからないので調べてきました。
<input>
というのが良いらしいです。
ではとりあえずinputタグを付けたらどうなるのか見てみます。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <input type="text"> <div id="item-2"></div> <div id="item-3"></div> </body> </html>
inputでエンターを押したら勝手にここまで書いてくれました。
<input type="text">
というのが、一行だけしか書けないという定義みたいです。
なんかこれだけだと、ホントにフォームが一つ出来上がったみたいな感じになるので、「名前を入力してください」くらいは付けておきます。
名前を入力してください<br> <input type="text" id="name" placeholder="名前を入力してください"> <div id="item-2"></div> <div id="item-3"></div>
こうかな？
inputにはもっといろいろ属性を付けられます。
その中でplaceholderというのを使えば、フォームの中に薄い字で文字を書けます。実際に入力したら消えるアレです。
ついでにIDも付与しておきます。
というか、inputにIDが付与できるなら、最初のdiv3つは要らない気がしてきました。
名前を入力してください<br> <input type="text" id="name" placeholder="名前を入力してください"> <div id="item-2"></div> <div id="item-3"></div>
こんな感じでしょうか。
ただ、「名前を入力してください」と直接書き込んでbrタグで改行するだけだと、CSSで操作することができなかったりと色々不都合が起こりそうな気がします。
なにかタグを使って起きたいところです。
リストとかではないただの文字列の文章を書くときはとりあえずpタグを使っておけ、という印象を持っているので、pタグを使っておきます。
駄目だったらあとから書き換えます。
<p>名前を入力してください</p> <input type="text" id="name" placeholder="名前を入力してください"> <div id="item-2"></div> <div id="item-3"></div>完成図はこんな感じです。
この状態ですと、「名前を入力してください」と入力フォームは横並びになりますが、そのあたりはあとでCSSで配置を考えることにします。
とりあえず名前の入力フォームはこんな感じで良さそうです。
次にコメントの入力フォームを作ります。
入力なのだからこれもInputタグで良さそうです。
typeを"text"とすれば一行しか書けないという定義だったので、このあたりを書き換えたいと思います。
と思って調べたんですけど、どうやらinputタグ自体、一行の文字列を入力するフォームというタグだったらしいです。type="text"は、デフォルトで適用されているようです。別に書かなくても良かったということですかね。
じゃあコメントを入力する、つまり複数行を書けるフォームはどういうタグなのかと調べたらtextareaタグが見つかりました。
とりあえず書いてみます。
<textarea name="" id=""></textarea>
エメットでここまで書いてくれました。
どうやらコメント欄の場合はname、つまり名前をつけることができるようです。
何に使うんでしょう？
と思って調べてみましたが、これはサーバーに送られるときに使われる名前になるようですね。
フォームに名前とパスワードを書いて送信をすることがよくあると思いますが、あれです。
フォームに書いたものをnameとしてサーバーに送ることで、それを名前として認識します。
placeholderは普通に「コメントを入力してください」にしておきます。
<textarea name="usercomment" id="usercomment" placeholder="コメントを入力してください"></textarea>
見た目はガタガタですが、とりあえずできました。
さて、本当にこれでいいか調べてみたのですが、もっとフォームを使いやすくする方法がありました。
labelというタグをが便利そうです。
上ではpタグにフォームに入力する内容を記しましたが、labelタグを使うともっと使いやすくなるようです。
上では「入力してください」とpタグで書きましたが、あくまでただの独立した文字列にすぎません。これが、文字列とフォームを一つのものとして関連付けることができます。簡単な例でいうと、「入力してください」という文字列の部分をクリック、もしくはタッチしたら入力フォームにカーソルが移動するので、とくにスマホなんかでは便利な仕様になりますね。
さて、ではlabelタグを書いていきます。
labelとiuputやtextareaと関連付けるには、iuputやtextareaにIDを付けて、label内でfor="名前"と書けば良いそうです。
labelで、ここまで書いてくれました。
<label for=""></label>
入力フォームにIDを付けて、forにその名前を入れれば良さそうです。
<label for="name">名前</label> <input type="text" id="name" placeholder="名前を入力してください">
こんな感じですね。
textareaでも同じようにします。
<label for="comment">コメント</label> <textarea id="comment" placeholder="コメントを入力してください"></textarea>
これでうまくいきました。
placeholderも付けておきました。
次は送信ボタンです。
これは簡単に
IDにsubmit（送信する）とでも付けておけば良さそうです。
<button id ="submit">送信</button>
さて、これで骨組みはできました。
というわけで、なにか他に必要がないか調べてみましたら、必要なことがありました。
どうやらフォームを作る塊（？）ではdivタグではなくformタグを使ったほうがいいそうです。
あんまり詳しいことはよくわかりませんが、divタグだと、あくまでただの形だけができるだけだそうです。
formタグにすることにより、送信に関する安全性が増し、プログラミングでいちいち書かなくてはいけないことが大幅に省かれるんだそうです。
ということでdivタグはformタグに書き換えてしまいます。
formと入力したらエメットで以下のように表示されました。
<form action=""></form>
actionというものを決めなくてはいけないようです。
で、調べてみたのですが、これは「どのURLにフォームの入力内容を送るか」ということを決めるものらしいです。今のとこ、どこに送るかは決めてないので空欄にしておきます。
インデントも整理して、全体的にこんな感じでいいかと思います。
<form action=""> <label for="name">名前</label> <input type="text" id="name" placeholder="名前を入力してください"> <label for="comment">コメント</label> <textarea id="comment"></textarea> <button id="submit">送信</button> </form>
さすがに本当にフォームだけというのも寂しいので、タイトルである「掲示板」もh1タグで表記しておこうと思います。
h1タグは見出しで一番大きなものという意味です。
<h1>掲示板</h1> <form action=""> <label for="name">名前</label> <input type="text" id="name" placeholder="名前を入力してください"> <label for="comment">コメント</label> <textarea id="comment"></textarea> <button id="submit">送信</button> </form>
完成図はこんな感じです。
「不格好」を絵に描いたような印象ですが、まあこれから手直ししていきますので。
あと、サーバーを使った掲示板の入力フォームものちの記事で紹介しています。
まあ基本は同じで、付け足す要素があるというだけなんですけど。
ネタばれ希望の方はどうぞ。
