完成像 フラッシュメッセージ（下記gif画像）をhtml, css, jqueryで実装したのでコードと利用方法の備忘録を残しておきたいと思います。コードも解説しているのでご参考になれば幸いです。 Codeと解説 html html <button class="js-show-flash-success">成功メッセージ</button> <button class="js-show-flash-fail">失敗メッセージ</button> <div id="flash-msg-area"></div> メッセージ表示用のボタン（成功/失敗メッセージ用）とフラッシュメッセージエリア css css #flash-msg-area { opacity: 0; position: absolute; left: 50%; top: -20px; transform: translateX(-50%); transition: all 200ms ease-out; } #flash-msg-area.show { opacity: 1; top: 20px; } #flash-msg-area .flash_message { display: inline-block; width: 200px; text-align: center; font-size: 15px; padding: 10px 20px; color: #fff; background-color: #86a3ff; box-shadow: 1px 1px 2px 1px #ddd; } #flash-msg-area .flash_message.error { background-color: #ff8e86; } このcssでやっていることは、 ・メッセージの表示位置を中央にする ・transitionをつけることでopacity=0～1、top=-20px～20pxの変化にグラデーションをつける(徐々にメッセージを表示しつつ、スライドインする動作) ⇒transitionは動作の変化を少しずつつけることができるプロパティです。ここが参考になります。 ・メッセージエリアはあらかじめ透明（opacity=0）として非表示にして、.showが追加されたときに不透明（opacity=1）として表示する(⇒transitionの効果と組み合わさって、.showが追加されると徐々に表示されて、.showが除かれると徐々に消えていく感じになる) ・メッセージエリアは非表示(opacity=0)のときに基準位置よりも20px上に配置しておき、表示(opacity=1)のときに基準位置よりも20px下に配置する(⇒transitionの効果と組み合わさって、.showが追加されると上から下スライドインし、.showが除かれると下から上にスライドアウトする) 図で示すと下記のような感じで、初期位置を上にずらして透明にしておいて、表示するときに不透明にしつつ元の位置に戻してあげれば、transitionの効果で最初に見せたフラッシュメッセージのような動作になります。 javascript javascript $(function(){ //フラッシュメッセージ用の関数をjqueryに登録 $.fn.flash_message = function(options) { //デフォルト値 options = $.extend({ text: '完了しました', time: 3000, how: 'before', class_name: '' }, options); return $(this).each(function() { //指定したセレクタを探して取得 if ($(this).find('.flash_message').get(0)) { $(this).find('.flash_message').remove(); } var message = $('<span />', { 'class': 'flash_message ' + options.class_name, text: options.text //フェードイン表示 }); $(this)[options.how](message).addClass('show'); //delayさせてからフェードアウト message.delay(options.time).queue(function(){ $(this).parents('#flash-msg-area').removeClass('show'); }); }); }; // ボタンクリックでフラッシュメッセージ（成功）を表示 $('.js-show-flash').click(function() { $('#flash-msg-area').flash_message({ text: '登録に成功しました', how: 'append' }); }); // ボタンクリックでフラッシュメッセージ（失敗）を表示 $('.js-show-flash-fail').click(function() { $('#flash-msg-area').flash_message({ text: '失敗しました', how: 'append', class_name: 'error' }); }) }) javascriptでやっていることは、 ・下記関数(flash_message)をjqueryに登録 　- 表示するときにメッセージエリア(#flash-msg-area)にshowクラスをつけ、ある時間が経過したら外す ・ボタンクリックされたら、flash_messageを動作させる ということです。 ひとつひとつコードを説明します。 ① $.fn.flash_message() $.fn.flash_message = function(options) { flash_messageをjqueryに登録します。登録しておくことで、通常のjqueryの関数を呼び出す感じでflash_messageを呼び出すことができます。$('#flash-msg-area').flash_message のような感じです。 このように記載すれば、通常の関数みたく呼び出せるんだ、という理解でいいのですが、より正確に理解するためには$.fnとは？というところから学ぶ必要があります。詳しく知りたい方はjQuery拡張の仕組み 〜 JSおくのほそ道 #013を参照ください。 ② $.extend() options = $.extend({ text: '完了しました', time: 3000, how: 'before', class_name: '' }, options); ここではフラッシュメッセージのオプションを設定しています。 オプション 初期値 説明 text 完了しました メッセージ内容 time 3000 メッセージ表示時間 how before メッセージテキストエリアの追加方法 class_name なし メッセージテキストエリア（.flash_message）に追加したいclass名 $.extend関数は、複数のオブジェクトをマージして返してくれるメソッドです。（第一引数に対し、第二引数をマージする） 参考サイト：jQuery.extend() メソッドの使い方まとめ 例えば、下記optionsを第二引数に与えた場合、 options = { time: 5000, class_name: 'warning' } 返却されるoptionsは、下記のようになります。 options = { text: '完了しました', time: 5000, how: 'before', class_name: 'warning' } つまり、第二引数で指定したものはその値に置き換わり、ないものは初期値が使用されるということです。 ③ $(this).each(function(index, element)) each関数は、$()にマッチした要素をひとつずつ取得して実行します。 例えば、下記HTML要素があって、javascriptを実行した場合、 html <ul> <li>html</li> <li>css</li> <li>jquery</li> </ul> javascript $('li').each(function(index, element){ console.log(element); }) ログには下記のように出力されます。 li要素にマッチするHTML要素が一つずつ順番に取得されているのがわかると思います。 ここで改めて下記コードを眺めてみます。 $(this).each(function() {}) eachは$(this)にマッチする要素を一つずつ取得して実行するはずです。では、ここでいう$(this)とはなんでしょうか。 $(this)をログに出力した結果、下記が1度だけ出力されていました。 つまり、$(this)にマッチするhtml要素はdiv#flash-msg-areaだけで、この要素に対して.each(function(){})のなかでshowクラスの付け外しを実施したということです。よくよくかんがえれば、id要素なのでひとつしかないのは当然で、あえてeachする必要はありませんが、class要素の場合は複数取得する可能性があるので、そのときも動作するようにケアしている感じです。 ④ $(this).find('.flash_message').remove() if ($(this).find('.flash_message').get(0)) { $(this).find('.flash_message').remove(); } flash_message関数内でメッセージ表示エリア(.flash_message)をフラッシュメッセージエリア(#flash-msg-area)に追加しています。なので、はじめに.flash_messageの要素を削除してから、新規の.flash_messageを追加しています。$(this).find('.flash_message').remove()を削除してコードを実行するとわかりますが、.flash_messageをremoveしておかないと下記のようにメッセージが重なって表示されます。 ⑤ $('<span />', { } ) var message = $('<span />', { 'class': 'flash_message ' + options.class_name, 'text': options.text }); この記述をすることで、下記html要素を作成することができます。 <span class="flash_message ">（options.textの内容）</span> この記述はちょっと見慣れないですが、$()は第一引数に何を指定するかによって返却されるものが大きくかわってくることを頭にいれておきましょう。下記を見れば、いろいろなケースがあるのがわかると思います。 jQueryセレクタの仕組み 〜 JSおくのほそ道 #011 上記参考サイトでいうと、今回のケースはパターン7に相当します。仕様についてより詳しく知りたいかたはjqueryの公式リファレンスを参照ください。 ⑥ $(this)[options.how](message).addClass('show'); $(this)[options.how](message).addClass('show'); フラッシュメッセージエリア(#flash-msg-area)内にフラッシュメッセージテキストエリア(.flash_message)を追加し、さらにshowクラスを追加しています。 このコードは下記と同義です。 $(this).before(message).addClass('show') なぜ$(this)[options.how]のような書き方をしているかというと、関数名を変数として扱っているので、$(this).options.how(message).addClass('show')と記述すると、まったく別の意味で解釈されてしまうからです。これを実行すると「Cannot read property 'how' of undefined」となります。そもそも$(this)にoptions関数（optionsオブジェクト）なんてないので当たり前です。 関数を変数内にいれて扱いたい場合はこのように記述することは覚えていてもよいかもしれません。 ⑦ message.delay(options.time).queue(function(){}) message.delay(options.time).queue(function(){ $(this).parents('#flash-msg-area').removeClass('show'); }); options.timeミリ秒後にメッセージエリア(#flash-msg-area)からshowクラスを外す動作をしています。これによりメッセージがoptions.timeミリ秒だけ表示されて消えるわけです。delayの後に実行したい関数をqueueにより独自に設定しています（ここではshowクラスを除く動作）。もし設定したい動作がjqueryオブジェクト内の関数でよいならqueueを使う必要はなく、message.delay(options.time).removeClass('show')のような感じ（メソッドチェーンと呼ばれます）で記載すればいいです queue関数について補足します。 まずは"キュー"の用語説明です。 キューとは、最も基本的なデータ構造の一つで、要素を入ってきた順に一列に並べ、先に入れた要素から順に取り出すという規則で出し入れを行うもの。順番を待つ人の行列と同じ仕組みであるため「待ち行列」とも訳される。 行列ができてるお店に並ぶことを想像するとわかりやすい(?)かもです。さきにならんでいる人から先にお店に入りますよね。そういうイメージです。 下記のようなjqueryのコードがあるとき、show⇒animate⇒slideToggle⇒slideToggle⇒animate⇒hide⇒show⇒slideUpの順にキューに登録されます。 function runIt() { $(div) .show( "slow" ) .animate({ left: "+=200" }, 2000 ) .slideToggle( 1000 ) .slideToggle( "fast" ) .animate({ left: "-=200" }, 1500 ) .hide( "slow" ) .show( 1200 ) .slideUp( "normal", runIt ); } 上記のケースは、jqueryオブジェクトが持っている関数を登録していますが、もし独自の関数を登録したい場合は、queue(function(){})に実装します。 function runIt() { $( "div" ) .show( "slow" ) .animate({ left: "+=200" }, 2000 ) .queue(function() { $( this ).addClass( "newcolor" ).dequeue(); }) .animate({ left: "-=200" }, 500 ) .queue(function() { $( this ).removeClass( "newcolor" ).dequeue(); }) .slideUp(); } 少し話はそれますが、、 はじめのコードに戻ると、、 message.delay(options.time).queue(function(){ $(this).parents('#flash-msg-area').removeClass('show'); }); このコードって、 message.delay(options.time).parents('#flash-msg-area').removeClass('show'); }); このように記載できそうじゃないですか？でもこの書き方はできません。 理由はメソッドチェーンは、戻り値がjqueryオブジェクトである必要があるからです。上記のparentsの返り値はjqueryオブジェクトではないのでメソッドチェーンで記載できないのです。 関数の戻り値がjqueryオブジェクトかどうか（メソッドチェーン可能かどうか）は、下記のサイトで関数を検索して、”戻り値”のところを確認してください。ここに”jqueryオブジェクト”とあればメソッドチェーンとして利用可能です。 おわりに 単純なコードでもいろいろと調べてみると勉強になりますね。 どなたかの参考になればうれしいです！

css style.css .nav { width: 100%; max-width: 600px; height : 50px; margin: 0 auto; } .nav > li { list-style: none; float: left; width: 33.333%; background-color: #CCC; text-align: center; line-height: 50px; color: #FFF; font-size: 20px; border-right: 2px #FFF solid; -webkit-box-sizing: border-box; box-sizing: border-box; } .nav > li:last-child { border-right: none; } .is-hidden { display: none; } .contents { width: 100%; max-width: 600px; padding: 30px; -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0 auto; border: 2px #CCC solid; border-top: none; } .contents > li { list-style: none; } html,jQuery index.html <!doctype html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <meta name="format-detection" content="telephone=no"> <title></title> <link rel="stylesheet" href="css/reset.css"> <link rel="stylesheet" href="css/base.css"> <link rel="stylesheet" href="css/style.css"> </head> <body> <div class="wrapper"> <ul class="nav"> <li>HOME</li> <li>NEWS</li> <li>MYPAGE</li> </ul> <ul class="contents"> <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li> <li class="is-hidden">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</li> <li class="is-hidden">Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</li> </ul> </div> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript"> // navの小要素であるliをクリックして、contents内の小要素であるli要素を表示させる。 // .index() 要素のindexを取得。 // .eq() 引数に応じたindexの要素を指定。 // .addClass() クラスを追加。 // .removeClass() クラスを削除。 $(function(){ $(".nav li").click(function(){//navクラスのliをクリックしたらイベントスタート var num = $(this).index();//navクラスのliのインデックス番号を取得 $(".contents li").addClass("is-hidden");//一旦contentsクラスのliにis-hiddenクラスを追加し、全て非表示にする $(".contents li").eq(num).removeClass("is-hidden");//eq()でnavクラスのliのインデックス番号を引数に指定し、 //contentsクラスの同じインデックス番号のliのis-hiddenクラスを削除。これで選択したタブと紐ずく内容だけを表示できる }) }); </script> </body> </html>

css style.css .nav { width: 100%; max-width: 600px; height : 50px; margin: 0 auto; } .nav > li { list-style: none; float: left; width: 33.333%; background-color: #CCC; text-align: center; line-height: 50px; color: #FFF; font-size: 20px; border-right: 2px #FFF solid; -webkit-box-sizing: border-box; box-sizing: border-box; } .nav > li:last-child { border-right: none; } .is-hidden { display: none; } .contents { width: 100%; max-width: 600px; padding: 30px; -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0 auto; border: 2px #CCC solid; border-top: none; } .contents > li { list-style: none; } html,jQuery index.html <!doctype html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <meta name="format-detection" content="telephone=no"> <title></title> <link rel="stylesheet" href="css/reset.css"> <link rel="stylesheet" href="css/base.css"> <link rel="stylesheet" href="css/style.css"> </head> <body> <div class="wrapper"> <ul class="nav"> <li>HOME</li> <li>NEWS</li> <li>MYPAGE</li> </ul> <ul class="contents"> <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li> <li class="is-hidden">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</li> <li class="is-hidden">Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</li> </ul> </div> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript"> // navの小要素であるliをクリックして、contents内の小要素であるli要素を表示させる。 // .index() 要素のindexを取得。 // .eq() 引数に応じたindexの要素を指定。 // .addClass() クラスを追加。 // .removeClass() クラスを削除。 $(function(){ $(".nav li").click(function(){//navクラスのliをクリックしたらイベントスタート var num = $(this).index();//navクラスのliのインデックス番号を取得 $(".contents li").addClass("is-hidden");//一旦contentsクラスのliにis-hiddenクラスを追加し、全て非表示にする $(".contents li").eq(num).removeClass("is-hidden");//eq()でnavクラスのliのインデックス番号を引数に指定し、 //contentsクラスの同じインデックス番号のliのis-hiddenクラスを削除。これで選択したタブと紐ずく内容だけを表示できる }) }); </script> </body> </html>

css style.css .modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: #000; } .modal-content { position: fixed; top: 50%; left: 50%; width: 300px; height: 300px; margin: -150px 0 0 -150px; background-color: #fff; border-radius: 20px; } .modal-text { display: table-cell; width: 300px; height: 300px; text-align: center; vertical-align: middle; } .modal-close { position: absolute; top: -10px; right: -10px; width: 30px; height: 30px; padding-bottom: 4px; background-color: #fff; border: 2px #777 solid; border-radius: 15px; color: #777; font-weight: bold; -webkit-box-sizing: border-box; box-sizing: border-box; } .modal-show { margin: 50px; } htmlとjQuery index.html <!doctype html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <meta name="format-detection" content="telephone=no"> <title></title> <link rel="stylesheet" href="css/reset.css"> <link rel="stylesheet" href="css/base.css"> <link rel="stylesheet" href="css/style.css"> </head> <body> <div class="wrapper"> <p class="modal-show">CLICK!!</p> <div class="modal" style="display: none;"> <div class="modal-content"> <div class="modal-text">MODAL WINDOW</div> <button type="button" class="modal-close">x</button> </div> </div> </div> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript"> // .modal-show をクリックすることで .modal をfadeInする。 // .modal-close をクリックで .modalがfadeOutする。 $(function(){ $(".modal-show").click(function(){ $(".modal").fadeTo(500,0.7);//第一引数に秒数、第二引数にopacityを設定し、その秒数をかけて設定したopacityに変化する。 }); $(".modal-close").click(function(){ $(".modal").fadeOut(500);//一定時間かけてフェードアウトする。 }); }); </script> </body> </html>

はじめに 本記事では、これまでに学習した中で、 ヒューマンエラー、ケアレスミスをしてしまったことを紹介いたします。 私としても、同じことを繰り返さないために、備忘録としてここに記述します。 ケアレスミス resources 例 （正） resources :prototypes resources :prototypes do resources :comments, only: :create end resources :users, only: :show （誤） resources :prototypes resources :prototypes do resources :comments, only: :create resources :users, only: :show end usersまでネストしていたため、 Prefixも異なる事態に陥りました。 モデル (正)model (誤)medel 見つけた時は、笑いが止まりませんでした。 locals 以前の記事にも、載せましたが、 （誤）local (正)locals です。 img src (誤)img scr (正)img src eachメソッド 例 （正） <% @prototype.comments.each do |comment| %> (誤) <%= @prototype.comments.each do |comment| %> =をつけるととんでもないぐらいブラウザに情報が飛び交う。 何に＝をつけるのか、つけないのか正確に理解する必要があります。 終了タグの抜け そのままの意味です。 アソシエーション (正) belongs_to :user has_one_attached :image has_many :comments , dependent: :destroy (誤) belong_to :user has_one_attached :image has_many :comment , dependent: :destroy 「s」抜け。見つけることは困難を極めます。 render （正） if prototype.save redirect_to prototype_path else render :edit end （誤） if prototype.save redirect_to prototype_path else render_to :edit end redirect_toに引っ張られないように。 ７つのアクション new・・・新規投稿ページを表示 create・・・データの投稿を行う *逆にしない！！ 終わり キリがないので、 これで終わりにします。 とにかくミスが発覚した時は、 例えケアレスだからと言って軽く扱わず、 間違えたことをアウトプットし、なぜ間違えたのかフィードバックを行うよう心がけましょう。 引き続き頑張ります！！

概要 基本Railsの記法に則り書いていきます！ １から全ての説明ではなく その中であれ？どうやるの？と 疑問に思った点や実装に困った箇所を ピックアップして紹介していきます♩ 設定と準備 ・Rails ・HTML ・CSS ・Javascript(jQuery) ↑上記の言語とフレームワークを使い 架空(自分で考えたテキトーなもの)のCafeの HPを作っていこうと思います！ 14日目の作業内容 ・単体テストコードの実行 14日目の気になった箇所 何百、何千字のある場合のテストコードはどのように 実行したらいいだろうか。 仮説 今まで自分が習ったテストコードの記述では spec/models/sample_spec.rb it 'textが10字以上だと追加できない' do @sample.text = "1234567890" @menu.valid? expect(@sample.errors.full_messages).to include('textは9文字以内で入力してください') end 一部抜粋して書いています。 このようにダブルクォーテーションで囲い文字列にして指定の文字数を入力していたが ここに何百時も何千時もい打ち込むのはめんどくさいし綺麗なコードとは言えない。 この文字列の部分を違う記述にすれば可能なはず。 結論 答えはとてもシンプルかつ簡単で spec/models/sample_spec.rb it 'textが100字以上だと追加できない' do @sample.text = "a" * 100 @menu.valid? expect(@sample.errors.full_messages).to include('textは99文字以内で入力してください') end このように1文字を100回反映させるように 演算子を使えば可能！ 1000字でも10000字でも同じ記述で簡単にできる！

本日の内容 レイアウト機能を用いて画面を構成するため必要な知識の備忘録 Thymeleafのレイアウト機能を用いて完成させる 共通レイアウトとしてヘッダー、フッター、サイドバーを用意し、個別画面の内容を出力する レイアウト機能を利用した画面は保守性、拡張性に優れている 画面イメージ レイアウト画面について レイアウトのhtmlにレイアウトとして使用するという宣言をする ヘッダー、フッター、サイドバー、コンテンツのスペースを確保するイメージ <!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org" th:fragment="layout(body)"> <head> <meta charset="UTF-8"> <link th:href="@{/css/layout.css}" rel="stylesheet"> <title>Insert title here</title> </head> <body> <div th:replace="~{header::layout-header}"></div> <div> <div th:replace="~{sidebar::layout-sidebar}"></div> <div id="main" th:replace="${body}"></div> </div> <div th:replace="~{footer::layout-footer}"></div> </body> </html> テンプレートを実装するにあたって th:fragment属性を記述→このHTMLをテンプレートとして使用するという宣言 fragment(フラグメント)→そのデータを識別する名前 th:fragment="layout(body)"→layoutという名前を付けて、そのテンプレートに個別画面のbodyの内容を埋め込む th:replace属性→共通部品の埋め込み先となるタグを記述する <タグ名 th:replace=~{ファイルのパス名 :: フラグメント名}">で記述 ファイルのパス名→templatesフォルダを起点としたファイル名(拡張子は除く) フラグメント名にはth:fragmentで設定した名前を記述 コンテンツ画面を埋め込む場所にはth:replace="${取得する情報の範囲}" 共通部品(ヘッダー、フッター、サイドバー)にそれぞれ名前をつける ヘッダー <div id="header" th:fragment="layout-header">ヘッダー</div> フッター <div id="footer" th:fragment="layout-footer">フッター</div> サイドバー <div id="sidebar" th:fragment="layout-sidebar">サイドバー</div> コンテンツ画面(テンプレートのメインに埋め込む画面) <!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org" th:replace="~{layout::layout(~{::body/content()})}"> <head> <meta charset="UTF-8"> <link th:href="@{/css/layout.css}" rel="stylesheet"> <title>Insert title here</title> </head> <body id="main"> <div>コンテンツ内容</div> </body> </html> コンテンツ画面にはth:replace="~{テンプレートのパス::フラグメント名(~{::コンテンツ画面から取得される情報の範囲})}"のように記載をする th:replace="~{layout::layout(~{::body/content()})}"→layout.htmlに対して、コンテンツ画面(index.html)のbodyタグの内容を埋め込んでいる bodyの後の/content()はbodyタグ内のコンテンツを取得するという意味 装飾 div#header { background-color: red; height: 100px; } div#sidebar { background-color: yellow; float: left; height: 300px; width: 200px; } div#main { float: left; height: 300px; } div#footer { background-color: green; clear: left; height: 100px; } ふりかえり thymeleafの機能を利用すれば比較的観点にレイアウト機能を実装できる 一度レイアウトの枠組みを作ってしまえば、あとは個別のコンテンツ画面を作るだけでいいので、ページ作成の効率化になる