会津ラボ

slickのことをjQueryプラグインとして覚えている人も多いと思う。slickは、スライダー＆カルーセルを実装するプラグインでカスタマイズオプションも豊富に用意されていて使い勝手がよい。 わたしも多くの案件でスライダー実装には、slickを使ったものだ。いまでも静的サイトコーディングでスライダー実装が必要ならば、真っ先にslickを検討するはずだ。 そんなslickだが、jQueryプラグインであることから、昨今のSPAやSSR案件では使う機会が遠のいているのも事実。ReactやVue、Angularといったライブラリにもスライダー＆カルーセルを実装するライブラリがあるからだ。そんな環境にわざわざjQueryを入れようとは思わない。 ところが、React用にモジュール化されたslickがあることを知った。 このエントリーでは、React環境でも使えるslickの移植版「react-slick」を紹介したい。 react-slickについて スライダー＆カルーセルを実装するモジュールだ。jQueryプラグインで広く知られるslickがReactコンポーネントで使えるモジュールとなっている。 【slick】https://kenwheeler.github.io/slick/ 【React Slick】https://react-slick.neostack.com/ 特徴 レスポンシブ対応している ブレークポイントごとにレイアウト変更できる CSS3で動作する スワイプ、マウスドラッグ 左右を少し見せる 矢印、ページネーション、自動再生、マウスオーバーで自動再生を停止 slickの破棄 react-slickを触ってみる react-slickのインストールと設置方法について触れてみよう。 インストール インストールは、プロジェクトルートで追加コマンドを実行する。 コマンド実行後は、package.jsonに”react-slick”: “x.x.x”,が追加されているはずだ。 CSSを設置 react-slickもslickプラグイン同様にCSSを設置しなければならない。react-slickはjQuery版slickの移植であるため、CSSはオリジナルのものを使わなければならない。CSSの設置は、CDNのものを使うか、slick-carouselをインストールして使う。 CDNで読み込む cdnjs CDNにホストされているCSSファイルを読み込む。<link>タグで読み込むのだから、publicルートのindex.htmlに記述するとよい。 npm (or yarn) でインストール いまほどインストールしたslick-carouselのCSSファイルをインポートする。 react-slickを使ってみる react-slickを使ってみよう。スライダーUI用のコンポーネントを作ることを想定している。保存するファイル名は任意にしてもらって構わない。 上記のソースコードでは、一枚ずつ切り替わるスライダーを実装している。settings定数に指定しているオプション名もオリジナルslickそのもので、jQuery版slickのオプションを流用すればよい。オプションをオブジェクト形式で記述しているところもまったく同じで懐かしさを覚える。 まとめ React環境でも使えるslickの移植版「react-slick」の紹介だった。 jQueryプラグインで使った経験があるのならば、余計な学習が不要で馴染みやすいものだと思う。あらたに使い始めるという場合においても、わずらわしい依存性がないことで導入しやすいはずだ。スライダーカスタマイズにしても、jQuery版slickの情報がたくさん公開されているので、困ることはない。ぜひ試してもらいたいモジュールのひとつだ。 このエントリーが、あなたのクリエイティビティを刺激するものであると期待したい。

タブ切り替えは、省スペースにコンテンツを配置できるUIで、Webサイト、ネイティブアプリ問わずに実装されている。 タブをクリック、もしくはタップすれば、対象エリアがそのタブに関連する情報に切り替わる仕組みだ。そしてクリックされたタブは、アクティブ状態のスタイルが付与される。これがフィードバックとなって、ユーザーは自身がクリックしたタブを認識できるということなのだろう。 このアクティブ状態の表現はさまざまで多種多様にある。たとえば、内包するテキストやロゴの色が濃くなったり、サイズが大きくなったりする。あるいは、タブ自体に罫線が付いたり、影が付いたりする。 さらにはアニメーションで表現するものもある。 アクティブ状態のタブの上辺か下辺にボーダーがあって、タブ切り替え時に横にスライドするといったものだ。タブの横幅が不一致である場合は、ボーダーも可変する。 このエントリーでは、タブ切り替えUIにスライドするインジケータを作る方法を紹介したい。 タブ切り替えUIをコーディングする HTML <li class=”tabbar-indicator”></li>がインジケータを担っている。タブ下辺にあるボーダーを表現するためだけのタグだ。 CSS (SCSS) .tabbar-indicator {…}がインジケータのスタイルだ。ポイントはposition: absolute;で、各タブの梱包要素を基準に絶対位置に配置している。この場合は、下部だからbottom: 0;というわけだ。そしてtransition: width 225ms ease, left 225ms ease;で変化するプロパティを指定している。この場合は、widthとleftが対象になる。 JS クリックしたタブの左辺オフセット値と横幅をインジケータ要素にスタイル付与している。CSSのtransitionでwidthとleftが対象だった。つまりクリックしたタブの左辺まで移動しながら横幅がフィットするようなアニメーションが実現する。 まとめ タブ切り替えUIにスライドするインジケータを作る方法の紹介だった。 タブ切り替えUIにおいてはサンプルのとおり記述してもらえば再現はするが、コンテンツ部分は記述しなかった。理解の妨げになると思ってのことだけれど、もし上記ソースコードをカスタマイズするならば、JSのif (e.target.matches(this.element)) {…}内で展開すればよい。イベントデリゲートでタブクリックだったか否かを判定してくれるif文だ。タブ要素に、data属性でも記述してコンテンツ要素と結びつければタブ切り替え機能の完成だ。機会があれば挑戦してみてほしい。 このエントリーが、あなたのクリエイティビティを刺激するものであると期待したい。

レスポンシブデザインに、iframeやcanvasのメディアタグ埋め込みが要求される場合、表示を維持するため縦横サイズが保たれた状態にしなければならない。きっとそのようなケースに少なくない。 そのようなときは、おそらくpadding-top: 56.25%;とかpadding-top: 75%;とかpadding-top: 66.6666%;などプロパティを目にすることもあると思う。 これは矩形要素がアスペクト比を維持するために適用するCSSプロパティのひとつなのだが、その比率によって数値が変わるわけだ。たとえば、横1920px縦1080pxの比率は「 16:9 」に該当する。横1024px縦768pxの比率は「 4:3 」に該当する。 ところが、デザインによってはこの限りではない。黄金比や白銀比だってあるし、固有の比率に調整しなければならないことだってある。 このエントリーでは、デザイン固有の縦横を維持させる方法を紹介したい。 アスペクト比とは アスペクト比は、矩形の縦横比率のこと。縦横比でも通じる。また映像デバイスの場合、画面比率と呼ばれることもある。 レスポンシブデザインがデファクトスタンダードとなった昨今では、メディアタグを可変対応するときにアスペクト比が用いられる。 埋め込みタグを可変にする それでは埋め込みタグを可変にする記述を確認してもらいたい。 HTML CSS 上記の例では、<iframe>だけれど<canvas>でも同様にすればよい。 まず埋め込みタグを梱包する要素が必要だ。上記の例では、<div class=”wrapper”>が梱包要素だ。この梱包要素でアスペクト比を維持して、埋め込みタグはそこにフィットさせるというのが作法になる。重要なのは梱包要素のpadding-top: ◯◯%;だけで、そのほかのプロパティは大概変わることがない。 さてポイントのpadding-top: ◯◯%;であるが、アスペクト比で変わる。前述したように、padding-top: 56.25%;やpadding-top: 75%;を目にしたことがあるのではないかと想像できたのは、オーソドックスなアスペクト比に準拠した％値だったからだ。 せっかくだから、そのまま覚えてしまうのがよいと思える。早見表を用意した。 アスペクト比 パーセント 16:9 56.25% 4:3 75% 3:2 66.6666% ここまでは、もっとも代表的な比率をもとに算出した結果であるが、デザイン固有のサイズだった場合は、別途アスペクト比を求めなければならない。計算しなければならないわけだ。これが面倒くさい。きっとこの対応を求められた頃には、計算式を忘れてしまっていることだろう。 だからツールを使うことをオススメする。 Googleマップを可変にする Googleマップの埋め込みタグを可変にしてみたい。この場合のアスペクト比は、「 5:3 」という世にも珍しい比率で試したい。計算したサイズは、横500px縦300pxである。 See the Pen Untitled by Takuya Takaku (@takuya-takaku) on CodePen. まとめ デザイン固有の縦横比を維持させる方法の紹介だった。一般的なアスペクト比であるならば、早見表のとおりにpadding-top: ◯◯%;を指定するとよい。デザイン固有のサイズを求められたならば、ツールを活用してみてはどうだろうか。…

Webアプリ制作には、管理者ページが付き物。商品管理やユーザー管理、アプリ全体の設定など管理者が行うためのWebページ設置は必然的といえる。 その管理Webページで求められる機能のひとつに、ガントチャートがある。スケジュールやシフトを確認するための棒グラフの一種だ。 このエントリーでは、ガントチャートをCSS Grid Layoutでコーディングする方法を紹介したい。 ガントチャートを作る 以下のガントチャートは、シフト表をイメージしている。8時〜23時までの15分単位で、勤務時間を棒線で示す。棒線の色の違いは、シフトパターンやスタッフの雇用形態などを想定してのことだ。 全体に関わるスタイルの差異によってはイメージしたものにならないかもしれない。その場合は、都合よく調整してほしい。 HTML SCSS まとめ 以上が、ガントチャートを構成するHTML,CSSだ。 ご覧のとおりHTMLには、インラインスタイルばかりで気になるかもしれないが、動的にフレーム数が増減したり、grid-columnの開始,終了地点が変動したりを考慮して、やむを得ずだ。ちゃんと分離する方法があるなら、そうするとよい。 インラインスタイルのプロパティで-msから始まるものは、IE用のベンダープレフィックスだ。IE10,11に適用されるはずだが、確認はしていない。IE対応が必要なら必ずチェックするように！ このエントリーが、あなたのクリエイティビティを刺激するものであると期待したい。

カード型UIは、情報をグループ化することでユーザーの視認性を高めてくれる。さらに領域自体がクリッカブルになることで、操作性の向上が見込め、ユーザビリティ観点からみても魅力的なインターフェースであることは間違いない。 カード型UIの構造としては、画像、要約、リンク、シェアボタンなどで組まれることが多い。画像は、円形でアバター写真だったり、カード背景全面に表示したり、アレンジしたものも見受けられる。リンクは、詳細ページへの誘導を目的としていて、遷移先にさらにボリュームをもった情報があることを感じさせる。 柔軟なレイアウトをもつカード型UIであるが、レスポンシブデザインで勝手がよい。要約文が増えればカードが伸びるし、表示幅が変わればカード幅が可変する。またカルーセル式に配置して省スペースを有効活用する場合にも効果的だ。 そんなカード型UIがいかにしてコーディングされているのか、いくつかcodepen.ioのサンプルを紹介したい。 カード型UIのコーディング Bumble Card See the Pen Bumble Card by Dave Kwiatkowski (@davekwiatkowski) on CodePen. Awesome Profile Card See the Pen Awesome Profile Card by SercaN (@iZMiRLy) on CodePen. Visit Card See the Pen Visit Card by Slavko (@djoga98) on CodePen. Card [WIP] See the Pen Codepenchallenge: Card by Travis John (@travis_john)…