会津ラボ

縦長サイトはスクロール量が大変多い。目的のエリアに到達するまでに相当量スクロールしなければならないサイトもあるほどだ。ユーザーにとっては、わずらわしく非常にストレスのかかる行動であることは間違いない。 スクロールしていると退屈で通り過ぎてしまう、なんてこともあるだろう。リズミカルにスクロールしだすと止まらないものだ。これはサイトオーナーにとっては、もっとも回避しなければならないし、ましてや正しい情報が認知されずサイト離脱など阻止しなければならない。ユーザーとオーナーの双方にとって損害といえる。 縦長サイトでスクロールさせること自体に問題はなく、成功しているサイトだって少なくないが、退屈させるのがいけないのだ。そんなスクロール時の退屈の方策に、アニメーションエフェクトを加えて飽きさせないものがある。 このエントリーでは、スクロール時の表示領域の侵入をトリガーにしてフェードインするテクニックを紹介したい。 はじめに まず表示領域というものに言及しておこう。ここでいう表示領域は、いわゆるビューポートのことで、現在あなたがブラウザ内に視える領域のことを指す。スクロールしないと視えない領域はビューポート外ということだ。 この表示領域に侵入したか否かを判定するアイデアとして、スクロールをトリガーにして、ターゲット要素が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の情報がたくさん公開されているので、困ることはない。ぜひ試してもらいたいモジュールのひとつだ。 このエントリーが、あなたのクリエイティビティを刺激するものであると期待したい。