スマートフォン向けのWebサイトなどでは画面遷移が大事です。普通のURLを遷移するような動きではUXがよくありません。新しいコンテンツがスライドしてきたり、前の画面と滑らかに入れ替わることでユーザの意識を切らさずに操作を継続できるようになります。 そうした動きをサポートしてくれるライブラリがsmoothState.jsです。履歴管理も行ってくれるライブラリです。 smoothState.jsの使い方 デモです。クリック時にコンテンツがスムーズに表示されます。 アニメーションのされ方も複数あります。 メニューで使うパターンです。 smoothState.jsを使うと画面遷移はもちろん、履歴管理も行ってくれます。スマートフォンはもちろんデスクトップブラウザでも利用できるでしょう。多くのフレームワークでは同様の機能がありますが、大げさになってしまいます。遷移機能だけ欲しい時に良さそうです。 sm

MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました スマートフォンのカメラの性能が大幅に向上し、1ファイルのサイズが肥大化する傾向にあります。JPEGなのである程度圧縮がかかっているものの、それでも数MBあったりします。ブログなどで使うのであれば、正直そこまでの品質や画像の大きさは不要でしょう。 そこで使ってみたいのがimage-compressorです。Webブラウザベース、クライアントサイドだけで画像のサイズを縮小できます。 image-compressorの使い方 上がオリジナル、下が変更後です。品質を80%にしたくらいでは0.27%の削減にしかなりません。 60%まで下げると一気に40%の削減になります。 image-compressorではJPEGの品質の他にも画像サイズも変更できます。クライアントサイドのJavaScri

HTML5の表現力が上がったことで、SVGなどを使ってプログラマブルなドローが実現できるようになってきました。パスを編集するだけで形を変更できるので、ある形から別な形に変更するのも難しくはありません。しかし、それが自然かどうかは別です。 もし自然なモーフィングを求めているならばflubberを使ってみましょう。 flubberの使い方 flubberの例です。変化が滑らかなのが分かります。 州の形に次々と変わる例。 州になった後、左右で四角い形になる例。 分裂と結合を繰り返す例。 flubberのアニメーションは非常に滑らかです。単にアニメーションするだけでなく、その差分を計算することによって、より自然な変化を実現できるようになっています。できていることは同じですが、こうしたUXにこだわったライブラリは今後増えていくのではないでしょうか。 flubberはJavaScript製のオープンソ

QRコードというと小さな四角が並んだ白黒の模様で、一般の人からするとよく分からないものに見えます。見た目の違いも分かりづらく、目を引きづらいため最近ではカラーにしたり、他の絵柄を混ぜると言った手法も開発されています。 今回紹介するQArt.jsもその一つで、好きな画像をベースにQRコードを生成してくれます。 QArt.jsの使い方 一例です。こんな細かいQRコードですが、ちゃんと読み取れます。 MOONGIFTのロゴでミックス。印刷では分かりませんが、Webブラウザに写しているものはちゃんと読み取れました。 QArt.jsを使うと、かなりアーティスティックなQRコードになります。ぜひ自分の好きな写真、イラストなどで試してみてください。 QArt.jsはJavaScript製のオープンソース・ソフトウェア（GPL v3）です。 QArt.js Example kciter/qart.js:

MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Web上で大量のDOMを表示するのは自殺行為です。Webブラウザの動きがガクガクになったり、フリーズしてしまったりします。そのためページネーションが使われるのですが、業務要件として全データの表示を求められることは多々あります。 そんな時にはscrollMonitorを使ってみましょう。大量のデータであってもスムーズなスクロールが可能になります。 scrollMonitorの使い方 利用例です。実際に表示されているのはこの見えている部分だけで、黄色と紫色の部分は消えたり、新しくDOMに追加表示されます。 見出しを残してスクロールもできます。 scrollMonitorではデータはメモリ上にありますが、それをスクロールにあわせて描画しています。また、不要になった部分は破棄しています。こ

Webページの表示を遅くする要素としてJavaScriptがあります。Webページは縦長になりがちで、表示されていない部分も含めて処理を行ってしまうと使えるようになるまで時間がかかってしまいます。 そこで使ってみたいのがin-view.jsです。指定したDOMが表示されている、または非表示になったタイミングでイベントが実行できます。 in-view.jsの使い方 例えば表示されたタイミングでは次のように指定します。 inView('.someSelector').on('enter', doSomething); 逆に消えた時には次のようにします。 inView('.someSelector').on('exit', doSomething); ソーシャルボタンなど、一度だけ実行されればいいものはonceを使います。 inView('.someSelector').once('enter'

Web上で音楽を楽しむ環境は整いつつあります。SoundCloudにアップしている人も多いですし、YouTube上にある音楽を聴く人も多いでしょう。そんな音楽メディアに欲しい情報として波形があります。 wavesurfer.jsは音楽ファイルを読み込み、波形を表示してくれるJavaScriptライブラリです。JavaScriptだけで作られているのが特徴になります。 wavesurfer.jsの使い方 例えばこんな感じです。 再生済みの部分は色が濃くなっています。 ドラッグ&ドロップで任意の音楽ファイルを解析できます。 wavesurfer.jsは数MBある音楽ファイルもすぐに解析することができます。そして波形を表示して、そのまま再生ができます。YouTubeのように動画がない場合、音楽メディアの見た目の楽しさとして表示すると良さそうです。サビ部分が一目で分かるのも良さそうです。 wave

MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました レスポンシブWebデザインの面倒なところは同じような設定が散見されることではないでしょうか。上の方で幅の定義があるものの、実際のクラス定義はどの幅に対するものなのか分かりづらいことがあります。 そこで使ってみたいのがaltclassです。JavaScriptを使いますが、幅によってクラスを付け替えてくれる便利なライブラリです。 altclassの使い方 ブレークポイントは設定を使って自由に指定できます。 <div data-altclass="[less than 320] 320 [at least 320 & up to 479] 480 [at least 480]"> altclassは幅の変化を見てクラスの付け替えを行っています。スタイルシート側は widget-* とい

box2d-jQueryはbox2dをjQueryに対応させたライブラリです。 最近は素のJavaScriptを書くことが減っているように思います。大抵jQueryを使ってしまいます。既にある他のライブラリもjQueryに対応してくれるとさらに利便性が高くなりそうです。そこで今回はbox2dをjQueryに対応させたbox2d-jQueryを紹介します。 デモ。動画が落下していきます。落下しながらも再生しています。 マウスで飛ばしたりできます。 101個のボールが落ちてくるデモ。 ぼんぼん飛びます。 使い方はシンプルで、重力の影響を与えたいDOMに対してbox2dメソッドを呼び出すだけです。その影響度合いは数値で指定が可能です。既存のコンテンツをいきなりばらばらにしたりもできる面白いライブラリです。 box2d-jQueryはjQuery/JavaScript製、zlib/libpng L

BonsaiJSはFlashアニメーション並みの動作が可能なJavaScriptライブラリです。 JavaScriptによるアニメーションライブラリが増えています。BonsaiJSもその一つです。多彩なアニメーション処理が可能になっていますのでぜひご覧ください。 トップページです。ここもアニメーションされています。 マウスを動かすとブロックが表示されます。 グラフです。マウスのあたっている部分が大きくなります。 スターです。ぐりぐり動きます。 オブジェクトが飛び交います。 Pongを実際に遊べます。 円がダンスするように動きます。 ドラッグで動かせます。 デモを実際に動かした動画です。 BonsaiJSはキーフレームベースのアニメーション、画像だけでなくパスにも対応し、モーフィングもできます。マウスによる操作も可能で、Flashの代わりはもちろんゲーム開発にも使えるのではないでしょうか。