【無職に転生 ~ 就職するまで毎日ブログ出す_21】【CSS】Materialize × JavaScript
はじめに
こんにちは、大ちゃんの駆け出し技術ブログです。
タイトルにあるとおり【無職に転生 ~ 就職するまで毎日ブログ出す】というチャレンジをしています！！！！昨日までは就活するまで本気出すでしたが、これだとまるで就活後は頑張らないのかと思われてしまいそうで、、、大人気アニメのタイトルのまるパクリチャレンジです。
RailsやらRubyやらSQLやらその他Webの知識やらが色々と抜け落ちているのを感じており、知識の定着のためにもアウトプットする機会を増やすためです。加えて、退職して文字通り無職に転生しましてプロニートになり、毎日時間に余裕ができたので引き締めるためにも毎日投稿を思い至りました！
【投稿内容】
- SQLの難しい処理 (副問合せ、JOINとか複雑な処理が書けない)
- Rails全般 (純粋に必要な知識が多すぎる、網羅的な理解が足りない)
- Rubyのあまり使わないメソッドや記述方法 (あまり重要ではないけど特に)
- Web知識全般 (クッキーやら、セッションやらなんとなくで理解しているものの自分の言葉で説明できない)
- 書籍 (スタートアップ企業に勤めるので、自分が会社に与える影響やパフォーマンスを高めるためビジネス書を読んでいきます。)
本日やること
本日はMaterializeとJSを組み合わせて様々な機能を実装してみたいと思います。前回Materializeについて書いたのですが、そのときは見た目を整える程度でただスタイリングしただけです。
【無職に転生 ~ 就職するまで毎日ブログ出す_16】【CSS】Materialize - 大ちゃんの駆け出し技術ブログ
Materializeが他のCSSフレームワークより優れている点として、公式でJSとの組み合わせ型でモーダル表示やサイドバーなどを表示する機能が紹介されているところです。この強みを紹介するべく今日はいくつかMaterializeとJSを組み合わせた機能を紹介します。
例により下記htmlファイルをコピペしてCDNでMaterializeを有効化します。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>マテリアルデザイン</title> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" /> </head> <body> <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script> </body> </html>
JSファイルの作成
今回はJSを使うのでHTMLファイルに適当なJSファイルを読み込ませましょう。
<body> ・ ・ <script type="text/javascript" src="js/sample.js"></script> ・ ・ </body>
作成したファイルは空のままでOKです。
Collapsibles
Collapsibles are accordion elements that expand when clicked on. They allow you to hide content that is not immediately relevant to the user. Collapsiblesは、クリックすると拡大するアコーディオン要素です。これにより、ユーザーにすぐには関係のないコンテンツを隠すことができます。
下記gifのようにクリックすると中の隠された要素が出現するような機能ですね。
それでは実装してみます。ほとんどサイトに書いてあるコードと内容は同じですが、せめて文章は変えています。下記のようにbodyタグの中に要素を配置します。
<ul class="collapsible"> <li> <div class="collapsible-header"> <i class="material-icons">filter_drama</i>天気予報 </div> <div class="collapsible-body"> <span >きょうは、日本海から近づく低気圧や、上空に流れ込む寒気の影響で、広い範囲で大気の状態が不安定になるでしょう。午前中は日の差す所もありますが、午後は雲に覆われて、雨の所が増えてきそうです。カミナリを伴う所もあるでしょう。急に強まる雨や、落雷、突風に注意が必要です。ひょうの降るおそれもあります。最高気温は、引き続き全国的に平年並みか低いでしょう。 </span> </div> </li> </ul>
ulタグにはcollapsibleクラスを、collapsible-headerクラスには表示されている要素、collapsible-bodyには表示されていない要素を設定します。現状はJSを設定していないため、スタイリングのみ適用されています。
それでは作成したJSファイルに下記内容を記載します。
// js/sample.js
document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('.collapsible');
var instances = M.Collapsible.init(elems);
});
これによってクリックすると要素が出現するようになりました。
下記の分で指定した要素にCollapsibleの機能を初期化しています。
var instances = M.Collapsible.init(elems);
この初期化の際により細かい設定(optioins)を施すことができます。例えば、要素が表示されるアニメーションをより遅くしたい場合、inDurationで開くときの速さ、outDurationで閉じるときの速さを設定することができます。デフォルトだとそれぞれ300で設定されているので、1000(1秒)かかるように設定します。
// js/sample.js
document.addEventListener("DOMContentLoaded", function () {
var elems = document.querySelector(".collapsible");
var instance = M.Collapsible.init(elems, {
inDuration: 1000,
outDuration: 1000,
});
});
開閉時間が上のgifに比べて遅くなりました。
このようにMaterializeはJSファイルで細かく設定することで少しリッチなモーションを実現することができます。
Media
こちらは画像のアップ表示を簡単に実装できるものです。下記ファイルを作成しましょう。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>マテリアルデザイン</title> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" /> </head> <body> <img class="materialboxed" width="650" src="images/sample.png" /> <script type="text/javascript" src="js/sample.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script> </body> </html>
images/sample.pngについては各自好きな画像を設定してください。あとはJSで初期化します。
// js/sample.js
document.addEventListener("DOMContentLoaded", function () {
var elems = document.querySelectorAll(".materialboxed");
var instances = M.Materialbox.init(elems);
});
画面を見てどう実装できたのか見てみます。
このような実装もMaterializeでは非常に簡単に行うことができました。
Modal
モーダルを表示させる方法です。下記ファイルをコピペします。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>マテリアルデザイン</title> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" /> </head> <body> <!-- Modal Trigger --> <a class="waves-effect waves-light btn modal-trigger" href="#modal1" >モーダル表示</a > <!-- Modal Structure --> <div id="modal1" class="modal"> <div class="modal-content"> <h4>衆院選 きょう公示 連立政権継続か 政権交代実現か 最大の焦点</h4> <p> 第49回衆議院選挙が19日公示され、12日間の選挙戦がスタートします。 今回の選挙は、与党が過半数の議席を確保して、連立政権を継続するのか、野党が勢力を伸ばして、政権交代を実現するのかが、最大の焦点となります。 </p> </div> <div class="modal-footer"> <a class="modal-close waves-effect waves-green btn-flat">閉じる</a> </div> </div> <script type="text/javascript" src="js/sample.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script> </body> </html>
表示要素はニュースにしてみました。Modal Structureの要素はモーダルを呼び出すためのボタンなどを設定します。Modal Structureはモーダルで表示する部分です。modalのクラスを設定することで画面上では非表示にし、ボタンが押された時に表示することができるようにします。
JSで初期化します。
document.addEventListener("DOMContentLoaded", function () {
var elems = document.querySelectorAll(".modal");
var instances = M.Modal.init(elems);
});
これにより簡単にモーダル表示機能が実装ができました。
optionsにopacity(不透明度)を設定することでモーダル背景の黒部分の不透明度を調整できます。
document.addEventListener("DOMContentLoaded", function () {
var elems = document.querySelectorAll(".modal");
var instances = M.Modal.init(elems, { opacity: 0.2 });
});
上の画像に比べてかなり薄くなりました。
終わりに
実際に使ってみて思ったのは本記事でも紹介したようにJSと組み合わせた実装方法が非常に多く公式で紹介されている点です。他のCSSフレームワークよりJSとの組み合わせ方がたくさん載っているので、様々な実装を簡易的に行うことができます。今後もこのフレームワークを使ってチーム開発を進めていきたいと思います。
