縦長サイトはスクロール量が大変多い。目的のエリアに到達するまでに相当量スクロールしなければならないサイトもあるほどだ。ユーザーにとっては、わずらわしく非常にストレスのかかる行動であることは間違いない。 スクロールしていると退屈で通り過ぎてしまう、なんてこともあるだろう。リズミカルにスクロールしだすと止まらないものだ。これはサイトオーナーにとっては、もっとも回避しなければならないし、ましてや正しい情報が認知されずサイト離脱など阻止しなければならない。ユーザーとオーナーの双方にとって損害といえる。 縦長サイトでスクロールさせること自体に問題はなく、成功しているサイトだって少なくないが、退屈させるのがいけないのだ。そんなスクロール時の退屈の方策に、アニメーションエフェクトを加えて飽きさせないものがある。 このエントリーでは、スクロール時の表示領域の侵入をトリガーにしてフェードインするテクニックを紹介したい。 はじめに まず表示領域というものに言及しておこう。ここでいう表示領域は、いわゆるビューポートのことで、現在あなたがブラウザ内に視える領域のことを指す。スクロールしないと視えない領域はビューポート外ということだ。 この表示領域に侵入したか否かを判定するアイデアとして、スクロールをトリガーにして、ターゲット要素がwindowオブジェクトの下辺を超えたら処理するというものがある。あなたも目にしたことがあるのではないだろうか。 しかしこの手法だと、イベントコール後もイベントリスナを削除しない限り、ずっとスクロールイベントが発生することになる。パフォーマンスとしていかがなものか。 そこでこのような要件に最適なIntersectionObserver APIを使う。 IntersectionObserver APIについて IntersectionObserver APIとは、ターゲット要素が表示領域と交差するたび実行されるというものだ。交差というのは、表示領域の一辺にターゲット要素の一辺が被ったか否かということで、一般的にスクロールすれば表示領域の下辺とターゲット要素の上辺が交差することになる。もちろん全面的に重なった状態も交差に該当する。 すなわち、windowオブジェクトの下辺を超えたら処理するなどの実装において、もっとも優れた代替案になるだろう。 IntersectionObserver APIの詳解はMDNで確認してもらいたい。 表示領域の侵入したらフェードインするデモンストレーション See the Pen Untitled by Takuya Takaku (@takuya-takaku) on CodePen. まとめ 表示領域の侵入を判定してフェードインするテクニックの紹介だった。 スクロールイベントが悪いわけもなく、パララックスサイトのような実装において、スクロール量を求める場合もある。ときと場合と要件で判断してもらうとよいだろう。 このエントリーが、あなたのクリエイティビティを刺激するものであると期待したい。

HTMLメールのコーディングが難しいという声を聞く。わたしも同感だ。 Webコンテンツであれば、Webブラウザで表示されるようにコーディングをする。ところがHTMLメールのターゲットであるメールクライアントには、Webブラウザほど優れたレンダリングエンジンを積んでいないものもある。 つまりWebコンテンツのようにCSSコーディングができない。HTMLメール作成においては、だいたいはテーブルコーディングを行う。このような条件でメーラー依存を吸収してコーディングするというのは、骨が折れる。 このエントリーでは、メールクライアント間の依存を解消できるHTMLメールフレームワーク「MJML」を紹介したい。 MJMLについて MJMLは、HTMLメールを作成するHTMLメールフレームワークである。カスタムタグでコンポーネントベースに構成されていて、<mj-body>、<mj-section>、<mj-row>、<mj-column>などのセクショニング・コンテンツの要領で簡単にセマンティックコーディングできる。これらカスタムタグは公開用ビルドをすることでHTMLに変換される。 【MJML】 https://mjml.io/ 特徴 MJMLに触れてみる まずはMJMLを導入してみよう。 初期化 任意のプロジェクトフォルダにpackage.jsonがなければ以下コマンドで初期化すること。 導入 つづいて以下コマンドで、mjmlパッケージモジュールをインストールする。この時点でプロジェクトフォルダには、node_modulesとpackage.jsonが生成される。 作成 つづいてmjmlファイルを用意する。このサンプルではinput.mjmlとしたが、ファイル名は任意で構わない。 レンダリング つづいてHTMLにレンダリングする。 そもそも導入時のnodeパッケージは、ローカルのプロジェクトフォルダにインストールしたものだった。したがって、実行コマンドは./node_modules/mjml/bin/mjmlを参照しなければならない。 パスを設定すれば、プロジェクトフォルダ内でmjmlが可能になるとのことだが、わたしの理解が曖昧なため触れないでおきたい。 気になる場合は、mjml-cliのREADME.mdを参考にするとよい。 果たして、ターミナルにHTMLソースコードがレンダリングされただろうか。 アウトプット アウトプット方法についても触れておこう。以下コマンドでinput.mjmlをoutput.htmlにアウトプットしている。 まとめ レスポンシブ対応のHTMLメールフレームワーク「MJML」の紹介だった。 プログレッシブ・エンハンスメントが叫ばれて久しい昨今でもテーブルコーディングを行わざるを得ないHTMLメールであるが、MJMLを使うことでわざわざ煩わされることもない。 コンポーネントベースに構成されたカスタムタグは、その名称からおよその使い所を推測することが可能だろう。<mj-button>ならばボタンを担うタグという具合に、セマンティックコーディングの要領で記述することができる。 日頃HTMLに慣れ親しんでいるならば、ほとんど学習コストがかからず楽に導入できるはずだ。HTMLメール作成することがあればMJMLを使ってみてはいかがだろうか。 このエントリーが、あなたのクリエイティビティを刺激するものであると期待したい。

全天球カメラやスマホアプリで撮った360度画像をWebページに配置するケースを考えてほしい。このようなときそのままimgタグで配置するようなことはあり得ない。360度画像を平面で見ても、せっかくの臨場感や没入感を味わうことができないからだ。 きっとぐるりと見渡すようなコンテンツを思い出すのではないだろうか。最近では不動産サイトや会社案内、宿泊施設などで活用されるシーンも増えていて目にすることがあると思う。 このエントリーでは、360度画像を表示するJavaScriptライブラリ「immersive-custom-elements」を紹介したい。 immersive-custom-elementsについて immersive-custom-elementsは、360度コンテンツをWebサイトに配置できる。ライブラリの読み込みとHTMLカスタム要素の配置のみの簡単仕様になっている。 特徴 ほかライブラリに依存しない 意識的にインスタンスしない HTMLカスタム要素で配置が簡単 オプションはHTMLカスタム要素の属性に記述 導入 導入は、CDNから読み込むかGitHubリポジトリから入手してほしい。今日現在ではnodeパッケージは無かった。したがって、いまはnpmインストールはできない。 CDNで読み込む 使い方 <img-360> 360度画像用のHTMLカスタム要素だ。 属性 型 必須 説明 src string yes 画像ファイルのパス width number yes 要素の幅 height number yes 要素の高さ <video-360> 360度映像を再生するHTMLカスタム要素だ。 属性 型 必須 説明 src strings yes 映像ファイルのパス width number yes 要素の幅 height number yes 要素の高さ loop – no ビデオループ muted…

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)…

一方向データバインディングといえば、Reactを思い浮かべるかもしれない。Reactを用いたSPA開発において、入力した内容がディスプレイに反映するシーンは一般的といえる。入力によるイベントを検知したら、入力内容でstateを上書きして、再レンダリングされる。 この実装においても、さほど難しいことはないのだが、入力内容の状態管理を必要としないならば、HTMLベースで代替することができる。 このエントリーでは、データバインディングっぽいことができる「outputタグ」を紹介したい。 outputタグとは HTMLのoutputタグは、フォーム関連要素の操作した結果を表示する。数値入力における計算結果やレンジ操作値を反映を前提としているため、JavaScriptが有効でなければならない。無効の場合は、outputタグ内の内容が表示される。 outputタグを使ってみる See the Pen Untitled by Takuya Takaku (@takuya-takaku) on CodePen. formタグのinputイベントハンドラで、inputタグのvalue値をoutputタグのvalue値に代入する式を実行している。つまり入力した内容が、outputタグに表示される。 前述では、outputタグは計算結果を表示するHTML要素である述べたが、文字列型がエラーになるということはないようだ。 計算結果というのは、数値の計算を意味するものなのか、レンダリングにおける計算処理の結果という意味なのか定かではない。 しかし文字列も表示できるため、Reactのバインディングのようにインタラクティブな使い方もできなくはない。 まとめ データバインディングっぽいことができる「outputタグ」を紹介だった。HTMLの記述のみで実現はしているが、決してHTMLだけでシームレスに反映しているわけではない。ちゃんとJavaScriptも用いていることがわかる。 そしてそもそもデータバインディングとも違うのだけれど、それっぽいインタラクティブなUIにすることは、できるかもしれない。 このエントリーが、あなたのクリエイティビティを刺激するものであると期待したい。