DFlexはどのJavaScriptフレームワークでも使えるVanillaなドラッグ&ドロップライブラリです。 他のD&Dライブラリとの大きな差として、最小限のレイアウトシフトをあげています。Webページで操作する要素が多い程、累積レイアウトシフト(CLS)が多くなり、結果としてレイアウトのズレを発生させ、UXに影響が出る、というものをGoogleがCore Web Vitals(コア・ウェブ・バイタル)の3つの指標の1つとして提唱しました。 CLS CLSは上のようにテキストを確認してボタンを押そうとしたら、遅れて表示されたコンテンツによりボタンの位置がズレ、本来押すつもりのなかったボタンを押してしまう、といったもので、GoogleのPageSpeed Insightsでも数値化され評価の対象として位置づけられています。 そのレイアウトシフトを最小限に抑える事が出来るD&Dライブラリとし

cannon-esはWeb用の軽量なJavaScript製3D物理エンジンです。three.jsのシンプルなAPIをインスパイアしてるそうです。 開発の止まってしまったcannon.jsをフォークし、開発継続しているみたいですね。 例えば重力設定なら以下のように書けばいいみたいです。 const world = new CANNON.World({ gravity: new CANNON.Vec3(0, -9.82, 0), // m/s² }) 9.8(参照元)じゃないのかな、と思ったのですが9.82とされていました。数値はサンプルで示されていたコードを元に書いていますが、重力加速度に関して僕は素人なので正誤は分かりかねますが、そもそも日本国内だけでも重力に多少の差がみられるみたいなので細かい事は気にしない事にします。 単位は国際単位系(IS)が使われます。その他、基本的な使い方やAPI

MoonはVue.jsにインスパイアされた軽量なJSライブラリです。高速でフレキシブル、学習コストも低く、シンプルで軽量ながら高いパフォーマンスと、直感的でわかりやすいAPIが特徴とのこと。vueがmin+gzipで20kbほどなのに対し、Moonは7kbほどで構築されています。ほとんどのライブラリは膨大なファイルサイズになっているため、モバイルフレンドリーになっていない印象だったので、軽量でモバイルフレンドリーなライブラリを作りたかったそう。詳細は本サイトにて。ライセンスはMITです。 Moon

BotUIはチャットのような対話コンテンツのUIのためのJavaScriptフレームワークです。いわゆるbot用でしょうか。返すメッセージや内容、タイミングなどの設定も簡単に出来るようになっています。 var botui = new BotUI('botui-app'); //コンテナのID botui.message.bot({ // 最初のメッセージを表示 delay: 200, content: 'hello' }).then(function () { return botui.message.bot({ // 2つ目 delay: 1000, // 1秒待ってから表示 content: 'how are you?' }); }).then(function () { return botui.action.button({ // ユーザーの行動 delay: 1000, acti

Sirius UIはvue.js+FlexboxなUIフレームワークです。コンポーネントやらスタイルやらがいろいろと揃えられている、どちらかと言えばBootstrap寄りのコンセプトかもしれません。ある程度揃えられていて、少ない工数で設計出来る、みたいなの。個人的に好みでよく使う、骨組のみのものような類では無さそうですが、これはこれで良さげです。ライセンスはLGPL。 Sirius UI

Cosmo CMSはシングルページ向けのCMSです。AngularJS x PHPで出来ておりOSSでとして公開されています。モバイルファーストでRWD対応、SEO/ソーシャルフレンドリーな設計だそう。WYSIWYGはMediumライクでした。なかなか良さげです。ライセンスはMIT。 Cosmo CMS

Foundation for EmailsはRWD対応のHTMLメール用フレームワークです。名前の通り、多数の方に愛用されるCSSフレームワーク、Foundationを提供するZURBが公開しているもの。あらゆるメールクライアントで動作を確認しているそうで、Outlookでさえ問題ないとの事。テンプレートも用意してくれています。 スマフォの普及でHTMLメールも需要が増えた・・・なんて実感は思ったよりありませんが、いずれ需要は実感出来る程度には上がっていくんじゃないかなぁと思います。 まあでも格安SIMのユーザーが広がれば制限を気にしたりで需要は上がらないかもしれませんね。僕も東京デジタルホンから10年以上ずっと使っていたSoftbankに見切りをつけて格安SIMに変えました。連れと2人分なので月の携帯代は1万5000円から5000円に下がりました。基本家にいるので自宅ではWifiだから容

CodeLabはBootstrapで使えるコードスニペットを集めているWebサイトです。jQueryの情報を配信するjqueryRainというWebサイトで作っているコンテンツのようです。スニペットは動作デモも用意されています。100近い量があるのでBootstrapを使っている方はご覧になってみては如何でしょうか。 CodeLab

Economizzerはオープンソースの資金管理ソフトウェアです。PHPフレームワークのYiiをベースに構築されたパーソナルファイナンスマネージャーシステム、との事です。要は家計簿・・みたいなシステムっぽいです。用意されたデモでも支出にドッグフード、スーパーでの買い物などと書かれています。一応多言語対応ですが日本語にはまだ未対応です。ライセンスはMIT。 Economizzer On Github

CutestrapはコンパクトなBootstrap代替CSSフレームワークです。肥大化したBootstrapをもっとコンパクトに、というニーズはよく見かけますので結構この手のCSSは出回っていますが、本フレームワークもその1つ。コンパクトな設計を意識しているそうでサイズも8kbとなっています。個人的にもBootstrapの選択はかなり減ってしまっていますのでこういった代替フレームワークの存在は有り難い限りです。 Cutestrap

HelpSite.ioは、FAQページを作成、公開出来るWebサービスです。いわゆる「よくある質問」を手軽に作成できる、というもの。FAQページは検索も可能なので、沢山の質問が寄せられるようなWebアプリ等に良さそうですね。レスポンシブWebデザインにも対応しているそうです。Web制作の知識も不要で検索出来るヘルプページを作成出来るのはなかなか良いですね。Goldプランに限るようですが、CSS/HTMLでカスタマイズも可能だそう。無料プランも用意されていますのでお試しになってみては。 HelpSite.io

List.jsは既存のHTMLリストやテーブルに検索やソート、フィルタリング機能を付与するスクリプトです。他スクリプトを追加する事になりますが、ページネーションにも対応しているみたいです。他ライブラリに依存せず、シンプルながらパワフルな性能のスクリプトと言えそう。冗長化したリストは不便だったり視認性を欠いたりしがちなので本スクリプトなら利便性の向上に繋げられるかもしれませんね。ライセンスはMIT。 List.js

cssFiltersはInstagramライクな画像加工をCSSで施せるWebアプリです。画像はUnsplashから引っ張るか任意の画像をアップロードします。CSSgramが使用されており、プレビューを見ながらスクロールバー等で手軽に設定し、CSSコードも排出してくれる、というもの。CSSはちょっと場所が分かりにくいかもですが、右の編集ツールがあるエリア上部に「CSS CODE」とあるのでそこから。この手のアプリは何度か見かけていますが、一番良さそうでした。本アプリはGithubでもソースコードが公開されています。 cssFiltersOn Github