コメントを書く、のレスポンシブ化＋α: I Found It!

2016/10/20

コメントを書く、のレスポンシブ化＋α

スマホ版とＰＣ版を統合してしばらく経ちますが、最近になって「コメントを書く」のフォームがちゃんとレスポンシブになってないことに気が付きました。「スマホ版とPC版を統合する前に確実にレスポンシブ化しておいてください」とか書いてたのに…すみません。ということで、修正しましたのでこちらの方法も紹介します。テンプレートを変更しながら、レスポンシブ化とは別に、いくつか気になった点も修正しました。
今回もレスポンシブ化にはBootstrapを使います。Bootstrapの適用方法については以前紹介した。レスポンシブデザインことはじめなどを参考にしてください。

変更の前にあらかじめcssとhtmlのバックアップを取っておいてください。

今回作成する「コメントを書く」の入力フォームはこんな感じのデザインにします。

入力フォームはシンプルに、見出しをつけずにplaceholderを使用しています。placeholderというのは入力フィールドに入力すべき項目がうっすら表示されている、あれ、です。なんとなくかっこいい、というのもありますが、スマホサイズにした時、見出しがあると入力フィールドの幅を確保するために縦並びになって入力フォームだけで高さをとってしまうのを避けるために、placeholderを採用しました。以前はjQueryのプラグインを使ったりしてたけど…HTML5でplaceholderが使えるようになって便利になりました。残念ながらIE8、IE9は未対応です。IE8、IE9で、placeholderもどきを表示させるためにスクリプトを追加する、という手もありますが、IE8、IE9ってことはPCなので、placeholderじゃなくても別にいいな、と思い、筆者はIE8、IE9では下記の表示になるようなつくりにしました。

メインレイアウトへのグリッドシステム適用

Added at 2016/10/29
コメント入力フォーム部分にBootstrapのグリッドシステムを使うためにはまずメインレイアウト（メインコンテンツ部分とサイドバーのレイアウト）部分にこのグリッドシステムを使う必要があります。まずメインレイアウトにグリッドシステムを採用する方法を参考に、メイン部分にグリッドシステムを使うよう変更してください（左右のサイドバーがない場合はid="containter"にcontainerクラスを追加する部分とcontainerのスタイル指定削除部分だけでOKです）。今回はコメント入力フォーム部分を入れ子にするためにrowにしていくのですが、フォーム用に用意されたform-groupクラスがrowの機能を持つのでこれでrowを兼ねます。

htmlの変更内容

今回はhtmlの変更がメインなので先にhtmlを紹介します。フォームの配置さえ期待通りにできればスタイル指定は後から自由にできます。htmlのテンプレートにはコメント入力フォームが2か所あります。まず最初に出てくる記事に対するコメント入力フォームから。（テンプレートによっては順番が逆かもしれません。隠しフィールドarticle_child__article_idに<% individual_article.id %>が埋め込まれてる方です。）<form>…</form>を書きかえます。筆者は文字認証をOFFにしているので、下記にはそれが含まれていません。他のフィールドを参考に追加してくださいね。テンプレートを見ていると、各フィールドに「必須フラグが立ってたら"[必須入力]"と表示する」らしき記述がありましたが…そんな設定ファンブログにない（と思う）ので、この処理も消しています。

<form action="<% blog.page_url %>_pages/user/comments2/regist/input" method="post" name="comment-form" class="form-horizontal">
    <div class="form-group">
        <!--[if lte IE 9]>
            <label class="col-sm-2 text-right">Name</label>
        <![endif]-->
        <div class="col-sm-10">
            <input type="text" required class="form-control" placeholder="Your Name" name="article_child__writer" style="width:300px; max-width:100%;">
        </div>
    </div>
    <div class="form-group">
        <!--[if lte IE 9]>
            <label class="col-sm-2 text-right">Email</label>
        <![endif]-->
        <div class="col-sm-10">
            <input type="email" class="form-control" placeholder="Email" name="article_child__email">
        </div>
    </div>
    <div class="form-group">
        <!--[if lte IE 9]>
            <label class="col-sm-2 text-right">Home Page</label>
        <![endif]-->
        <div class="col-sm-10">
            <input type="url" class="form-control" placeholder="Home Page" name="article_child__homepage">
        </div>
    </div>
    <div class="form-group">
        <!--[if lte IE 9]>
            <label class="col-sm-2 text-right">Comment</label>
        <![endif]-->
        <div class="col-sm-10">
            <textarea required class="form-control" rows="4" placeholder="Comment" name="article_child__body" style="height:80px;"></textarea>
        </div>
    </div>
    <input type="hidden" name="article_child__article_id" value="<% individual_article.id %>">
    <input type="hidden" name="article_id" value="<% individual_article.id %>">
    <% if:individual_article.accept_comment_permission_mode -%>
    <span style="font-size:12px;">※ブログオーナーが承認したコメントのみ表示されます。</span>
    <% /if -%>
    <div><input name="posted" class="btn" value="Send" type="submit"></div>
</form>

コピペできるように、フォーム全体を貼り付けたので長いですが…ポイントを紹介していきます。基本的にはform要素のaction属性と各要素のname属性の値を間違えなければちゃんと動きます。class指定に「form-control」を指定すれば、input要素をform直下に配置してもスマホサイズにおさまるように幅が調整されます。form-horizontalやform-groupを使っているのはIE8、IE9で見出しを表示させた時にレイアウトを整えるための記述です。を使って、IE8、IE9では見出しを表示させています。常に見出しを表示させたい方はこの判定を消して中身だけにすればOKです。placeholderは属性で文字列を指定するだけで使えます。レスポンシブ化とは関係ありませんが、名前とコメントのinput要素にはrequired属性を追記しました。これもHTML5から追加された属性ですが、これをつけるだけで「送信」ボタンを押した時に簡単な入力チェックを行ってくれます。厳密には入力チェックはサーバー側で行うべきですし、これもIE8、IE9は未対応なんですが、チェックできる範囲ではチェックしたいな、ということで。あとは、input要素のtype属性をEメールは「email」に、ホームページは「url」に変更しました。これで入力値のごく簡単なフォーマットチェックをしてくれます。ちなみにこれもIE8、9未対応ですが、未対応だとデフォルトで「text」になるので大丈夫です。これで一つ目のコメント入力フォームは完成です。テンプレートではもう一つの入力フォームのレイアウトや文言が微妙に違ってちょっと違和感があったので、もう一つは先に作ったフォームをコピペして必要なところだけ、変更します。変更は二箇所のみです。まず下の方の二つの隠しフィールド（type="hidden"）のvalueを空（""）に変更します。もう一つはブログオーナーが承認したコメントのみ…の出力の判別に使っている変数をindividual_article.accept_comment_permission_modeからarticle.accept_comment_permission_modeに変更します。htmlの変更は以上です。

参考：当サイトのcss

最後に参考までに当サイトの該当箇所のcssを貼り付けておきます。セレクタはそのまま使えると思うので、色やサイズ、フォントなど、お好きなスタイルに変更してください。placeholderのスタイル指定はコメント以外にも適用しています。placeholderの色指定の方法はブラウザにより異なるので長くなってます。フォーカスが当たるとゆっくり枠の色が変わる指定になってます。

/* placeholderに使用しているGoogle Webフォント*/
@import url(http://fonts.googleapis.com/css?family=Lato:100,300,400,700,900,100italic,300italic,400italic,700italic,900italic);

・・・

#comments input.form-control,
#comments textarea.form-control {
margin-bottom: 10px;
}

#comments .form-control {
    display: block;
    width: 100%;
    height: 40px;
    padding: 7px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    color: #555;
    border: 1px solid #d1d3cf;
    border-radius: 0;
    -webkit-transition: none;
    -o-transition: none;
    transition: none;
    transition: all 0.5s;
}

#comments .form-control:focus {
    border-color: #6c4f70;
}
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { 
    color:    #222222;
    font-family: 'Lato', sans-serif;
    font-size: 13px;
    letter-spacing: 1px;
    font-style: italic;
}
input:-moz-placeholder, textarea:-moz-placeholder { 
    color:    #222222;
    font-family: 'Lato', sans-serif;
    font-size: 13px;
    letter-spacing: 1px;
    font-style: italic;
}
input::-moz-placeholder, textarea::-moz-placeholder { 
    color:    #222222;
    font-family: 'Lato', sans-serif;
    font-size: 13px;
    letter-spacing: 1px;
    font-style: italic;
}
input:-ms-input-placeholder, textarea:-ms-input-placeholder { 
    color:    #222222;
    font-family: 'Lato', sans-serif;
    font-size: 13px;
    letter-spacing: 1px;
    font-style: italic;
}
#comments input[type=submit] {
    font-weight:bold;
    font-family: 'Montserrat', sans-serif;
    text-transform: uppercase;
    letter-spacing: 2px;
    background-color: transparent;
    padding: 5px 20px;
    border: 1px solid #6b82a8;
    color: #6b82a8;
    -moz-transition: all 0.5s;
    -o-transition: all 0.5s;
    -webkit-transition: all 0.5s;
    transition: all 0.5s;
}
#comments input[type=submit]:hover{
    background-color: #6b82a8;
    color: #ffffff;
}
#comments .form-group{
    margin-bottom:0;
}