注目キーワード
  1. Wordpress
  2. テーマ
  3. プラグイン
  4. SEO
  5. 集客

どのJavaScriptフレームワークでも使えるVanillaなドラッグ&ドロップライブラリ・「DFlex」


目次

DFlex


DFlexはどのJavaScriptフレームワークでも使えるVanillaなドラッグ&ドロップライブラリです。

他のD&Dライブラリとの大きな差として、最小限のレイアウトシフトをあげています。Webページで操作する要素が多い程、累積レイアウトシフト(CLS)が多くなり、結果としてレイアウトのズレを発生させ、UXに影響が出る、というものをGoogleがCore Web Vitals(コア・ウェブ・バイタル)の3つの指標の1つとして提唱しました。

[ad]
CLSは上のようにテキストを確認してボタンを押そうとしたら、遅れて表示されたコンテンツによりボタンの位置がズレ、本来押すつもりのなかったボタンを押してしまう、といった現象で、GoogleのPageSpeed Insightsでも数値化され評価の対象として位置づけられています。

そのレイアウトシフトを最小限に抑える事が出来るD&Dライブラリとして設計、開発されているそうです。DOM要素は実際に並べ替えられずに、「変換」されており、影響を受けた要素のみが操作されるそうで、これにより大量の要素にも対応可能でレイアウトシフトなどの副作用等も最小限に抑えられるのだそう。実際にDevtoolsで確認しながら操作しましたが順序は変わっておらず、表示のみ変わったように見せているようでした。

開発しているアプリで、仕様上実際に要素を並べ替えられる必要がある場合はDFlexは利用できない、という事になりそうです。DFlexはGPLライセンスのもと、OSSとしてソースコードが公開されていますが、バグ修正やアップデートのサポート等の有償プランも用意されています。

DFlexGithub

#wordpress #ワードプレス #SEO #集客

「かちびと.net」を閲覧する

最新情報をチェックしよう!
>WordPressに関連する情報まとめ

WordPressに関連する情報まとめ

ブログ / ホームページの価値の最大化をさせるCMS、WordPress(ワードプレス)。フリーのブログとは違い、いくらか敷居の高い印象がありますが、一つ一つクリアにしてみるときっとあなたもWordPressのパワーの恩恵に預かれると思います。当サイトを見て、まずはトライしてみましょう!

CTR IMG