CopyPasteJS - コーディングなしでクリップボード操作
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました HTML5のAPIによって、Webブラウザからクリップボードを操作できるようになっています。共有を促すときにメッセージをクリップボードにコピーしたり、別な機能でコピーしたテキストを貼り付けるといった操作が考えられます。 今回紹介するCopyPasteJSは、そんなWebブラウザのクリップボード操作を簡単に行えるようにするライブラリです。 CopyPasteJSの使い方 指定されたDOMの文字列をコピーする指定法です。 data-copy-text を使えばコピーする文字列を直接指定できます。 ペーストもターゲットを指定するだけです。 カットもできます。 コールバックを受け取ることもできます。 CopyPasteJSはJavaScriptをコーディングせずに実装できるのが利点です。あ
PlainDraggable - SVG/DOMのドラッグ&ドロップライブラリ MOONGIFT
Webアプリケーションが多機能になるにつれて、ローカルアプリケーションライクな操作が求められるようになっています。例えばドラッグ&ドロップはローカルアプリケーションであれば良くある操作と言えます。 そんなドラッグ&ドロップをスムーズに行えるライブラリがPlainDraggableです。 PlainDraggableの使い方 ベジュ曲線的なデモです。 グリッドを効かせたドラッグを行うデモです。 スナップする時に、スムーズに動くこともできます。 特定のDOM内には入らないように指定できます。 応用すると、二つのノード、それぞれが入れない場所を指定できます。 ソートにも使えます。 PlainDraggableはDOMだけでなく、SVGに対しても利用できます。ドロー系のアプリケーションであったり、簡易的なゲームなどでも使えそうです。ソートでも使えるので、様々な場面で利用できそうです。 PlainD
この発想はすごい！アニメーションgifの再生・停止をコントロールできるJavaScriptライブラリ -Freezeframe.js
アニメーションgifの再生・停止をホバー・クリック・タップ、そしてボタン・アイコンでコントロールできる軽量JavaScriptライブラリを紹介します。 canvasに書き込むという発想がすごいですね。 通常アニメーションgifは自動再生されますが、このスクリプトを使用すると、ユーザーの操作をトリガーに再生・停止させることができます。 Freezeframe.js -GitHub Freezeframe.jsの特徴 Freezeframe.jsのデモ Freezeframe.jsの使い方 Freezeframe.jsの特徴 Freezeframe.jsではアニメーションgifの最初のフレームだけをcanvasに書き込み、gifの静止画バージョンを自動作成します。あとは、この静止画バージョンとアニメーションgifをトリガーで切り替え、アニメーションgifを再生・停止させます。 下記は、ホバーで
jQueryライクな構文でDOM操作を行うために開発された超軽量ライブラリ・「femtoJS」
femtoJSはjQueryライクな構文でDOM操作を行うために開発された超軽量JavaScript(ES6)ライブラリです。たった20行、圧縮すると0.4kb程度のライブラリで、以下のように概ねjQueryと同じ書き方で使う事が出来ます。 $("div").css("background-color:green;").html("Hello World").addClass("new");同じく$を使うのでjQueryと併用するとコンフリクトを起こす事になります。DOM操作だけでjQueryを使っている場合はこのような代替ライブラリが軽くてパフォーマンスも向上しそうですね。使えるメソッドは16種ほどしかありませんが十分需要はありそうです。ライセンスはMIT。 femtoJS
howler.js - JavaScriptで音声/音楽ファイルを操作 MOONGIFT
HTML5になって音楽ファイルを扱うのが容易になりました。audioタグによって再生や停止をしたり、WebAudio APIでより細かく音声や音楽ファイルを操作できるようになります。しかし、まだまだそれほど活用事例が多くありません。 今回紹介するhowler.jsはJavaScriptベースのオーディオライブラリです。Web上で音を操作するのが簡単になるでしょう。 howler.jsの使い方 音楽プレイヤーの例です。プレイリストにも対応しており、音楽ファイルを再生できます。 ラジオ。つまりストリーミングでの再生です。 オーディオの分割もできます。 howler.jsはMP3以外にもMPEG/OPUS/OGG/OGA/WAV/AAC/CAF/M4A/MP4/WEBA/WEBM/DOLBY/FLACと幅広いフォーマットが扱えます。さらに自動キャッシングによってパフォーマンスやネットワーク帯域を
スクロールのイベントをIntersectionObserverで快適に実装する最新の軽量JavaScriptライブラリ -Scrollama
Intersection Observerを利用したWebページが増えてきました。 IntersectionObserversは、ターゲット要素がブラウザのビューポートと呼ばれるページの表示領域と重なる（または交差する「Intersection」）量を計算するもので、主要なブラウザに実装されています。 どんなことができるかというと、コンテンツのスクロールに応じてサイドバーをぴたっと配置したり、ヘルプや広告を表示したり、まだ表示されていないコンテンツや画像を先読みさせたりできます。これらを実装するには面倒なJavaScriptが必要でしたが、今では非常に簡単に実装できます。 IntersectionObserverを使用して、スクロールに応じたさまざまなイベントを実装する最新の軽量JavaScriptライブラリを紹介します。 Scrollama -GitHub Intersection Ob
DOM操作用に作られた軽量JavaScriptフレームワーク・Chibi
DOM操作用の軽量JavaScriptフレーム ワーク・Chibiのご紹介。圧縮版で 5KBほどのフレームワークで、単純な DOM操作をjQueryライクに出来ます。 オールドブラウザにも対応してくれて るみたいです。 単純なDOM操作用に作られたJSフレームワーク。軽量、IE6やモバイルを含む、様々なブラウザに対応できるみたい。 ChibiはDOM操作に特化したJSライブラリ。圧縮版で5KBほどです。単純なDOM操作だけの為にjQueryを使っているサイトなら、こういう軽いサイズのフレームワークを使ったほうがパフォーマンスの改善も期待できますね。 Sample 動作テスト。a要素を別窓になるように操作しました。 <script src="chibi-min.js"></script> <script> $('a').attr('target','_blank'); </script>こん
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
