presentr
presentrは他ライブラリに依存せず単体で動作するミニマルなプレゼンライブラリです。圧縮版で1.8kbほどと軽量でシンプル、BootstrapやVueとの併用などにも対応できるそうです。近年ではさほど高い需要は無い印象ですが扱いも楽なので一応メモ。ライセンスはMIT。
↧
非依存型のミニマルなプレゼンテーションライブラリ・「presentr」
↧
シンプルなbefore/afterコンテンツを作成できるスクリプト・「beerslider」
beerslider
beersliderは上記のようなbefore/afterコンテンツを作成できるスクリプトです。他スクリプトに依存せず、単体で動作しますが、jQueryやZeptoとの併用も可能です。25kbほどの軽サイズで扱いやすい印象でした。ラベル文字はカスタムデータ属性で、開始場所も以下の方法で設定可能です。
new BeerSlider( document.getElementById( "beer-slider" ), { start: 25 } );
手軽で良いんじゃないでしょうか。ライセンスはMIT。
↧
↧
ページのスクロールに応じて任意の要素にアニメーションエフェクトを付与できる非依存の軽量ライブラリ・「ScrollOut」
ScrollOut
ScrollOutはページスクロールに応じたアニメーションエフェクトを任意の要素に与えるライブラリです。非依存で圧縮版なら1kbほどと非常に軽量なライブラリとなっています。Animate.cssとの併用も出来るみたいですね。個人的にはこちらの方法が凄く楽そうでした。
ScrollOut({
onShown(el) {
el.classList.add("animated");
}
});
軽量、非依存で機能もなかなか充実してるので扱いやすそうでした。ライセンスはMIT。
↧
レスポンシブなWebページを簡単に作成できるWebページビルダーを作るためのスクリプト・「GrapesJS」
GrapesJS
GrapesJSはWebページを簡単な操作で作成できるWebページビルダーを構築する為のスクリプトです。CMS等に内蔵させて管理画面内で動作させるのが主な目的のようです。以前からありましたが、非依存型になる等かなり改善されたようなので備忘録も兼ねて再掲。レスポンシブなWebページにも対応できるように設計されています。プレビューペインで直接的に内容を調整できる系のUIなので直感的に操作しやすいんじゃないかなぁと思います。動作サンプルも用意されているのでご興味のある方は触ってみては如何でしょう。GrapesJSは3条項BSDライセンスのもと、OSSとして公開されています。
↧
軽量で使いやすい非依存のオートコンプリートライブラリ・「autoComplete.js」
autoComplete.js
autoComplete.jsはinput要素で自動補完を実装するためのシンプルなスクリプトです。非依存で軽量、高速なのが特徴みたいです。自動補完用のリストも簡単に作れますので個人的にも扱いやすそうという印象です。また、ロードマップも公開されており、今後さらに使い勝手が良くなりそうなので覚えておくと良さそうですね。ライセンスはApache 2.0とのこと。
↧
↧
モバイルフレンドリーで軽量、高速なコンテンツスライダーを実装できるスクリプト・「Glider.js」
Glider.js
Glider.jsはモバイルフレンドリーなコンテンツスライダーを実装できる軽量で高速なスクリプトです。使い方も簡単で動作も軽量(圧縮版で2.5kbほど)、マークアップもシンプルな状態を保てますので使い勝手も良い印象です。タッチイベントへの対応も可能でレイアウトもRWD対応となっています。本スクリプトの詳細ページではカルーセルと謳っていますが、カルーセルを定義するループ処理はデフォルトでは備えられていないようなのでコンテンツスライダーと表記しています。なかなか良いんじゃないでしょうか。ラインセスはMIT。
↧
ドラッグ&ドロップでWebページを作成できるスクリプト・「VvvebJs」
↧
任意のコンテンツを他言語に対応するための軽量なスクリプト・「Translater.JS」
Translater.JS
Translater.JSはWebページ内の任意のコンテンツを他言語対応にするためのライブラリです。基本的にはAPIを使った自動翻訳等ではなく、他言語も自身で書くタイプのものとなりますのでCMSなどで生成された大量ページの翻訳には向きませんが、ペラサイト等には最適かもしれません。仕様上、非依存且つ軽量なスクリプトとなっています。上動作サンプルのように画像とそのaltやtitle属性も対応可能です。使い方もシンプルで
var tran = new Translater();
if (tran.getLang() === "default") tran.setLang('jp');
デフォルトの言語を設定すれば後はマークアップするだけです。
<a href="javascript:tran.setLang('default');">日本語</a>
<a href="javascript:tran.setLang('en');">English</a>
<a href="javascript:tran.setLang('cn');">中文</a>
言語の切り替えボタンです。
<div class="txt">
こんにちは、世界！
<!--{cn}你好 世界!（任意のテキストを表示できます）-->
<!--{en}Hello World（任意のテキストを表示できます）-->
</div>
切り替えられる言語はデフォルトではコメントアウトをし、冒頭に{cn}といったように国コードを入れて翻訳テキストを含めるだけで、切り替えボタンで切り替わるようになります。
<img alt="画像です" alt-cn="图片" alt-en="image" title="画像なんだよ" title-cn="图片!" title-en="I's image." src="https://picsum.photos/300/200" data-lang-cn="https://picsum.photos/301/200" data-lang-en="https://picsum.photos/302/200" />
画像の切り替えも可能です。個人的には使いやすい印象でした。ライセンスはApache 2.0となっています。
↧
Webサイトに訪問したユーザーの行動を記録し、再生できるライブラリ・「rrweb」
rrweb
rrwebはWebサイトに訪問したユーザーの行動を記録、再生する為のWebセッションリプレイライブラリです。主に行動分析やバグの再現によるフィードバック向上、Webサイト上におけるユーザーとの対話(チャット等)の記録などを目的としているそうです。うまく使えれば便利そうですね。
あけましておめでとうございます。
本年も宜しくお願いいたします。
↧
↧
three.jsよりも軽量なJavaScript 3Dライブラリ・「Shree.js」
Shree.js
Shree.jsは3D描画ライブラリの代表ともいえるthree.jsよりも軽量な3Dライブラリです。豊かな機能性の代償にサイズが大きくなりがちですが、もう少し機能を抑えても良いので軽くしてほしい、というニーズは少なくない印象で、Shree.jsもそういった軽量版のニーズに答えた形となります。一定の層には需要ありそうな気がします。ライセンスはMITとのこと。
↧
スマフォ等の傾きに応じてコンテンツに反射効果を付与するスクリプト・「Shiny」
Shiny
Shinyはスマフォ等の傾きに応じてコンテンツに反射効果を付与するスクリプトです。モバイルデバイスで加速度センサーの値を取得し、コンテンツにリフレクションエフェクトを付与する、というもの。上gifはデスクトップブラウザのシミュレーターで動かしたものになりますが、動きに合わせて光沢が付与されているのが確認できると思います。ライブラリは非依存で、単体で動作します。ライセンスは明記無いので利用の際は開発者にお問い合わせ下さい。
↧
モジュール式のモダンなフロントエンドコンポーネントライブラリ・「Undernet」
Undernet
Undernetはモジュール式のフロントエンドコンポーネントライブラリです。CSSの記述を極力削減し、必要な箇所はJSを使い、一般的なUIパターンを使用する事で開発者のエクスペリエンスを簡素化することを目的としたそうです。用意されたUIは必要とされやすいモーダルやボタン、フォーム、アコーディオンやドロップダウン等といくつかのユーティリティです。また、WAI-ARIAガイドラインを念頭に設計されているようです。ライセンスはMITとの事。
↧
OSSのJavaScript製スプレッドシート・「x-spreadsheet」
x-spreadsheet
x-spreadsheetはOSSのJS製スプレッドシートWebアプリです。canvasが用いられているのにはDOMレンダリングよりもパフォーマンスが期待できるのとコードを書くのが簡単だからだそうです（HNより）。スプレッドシートの機能としても十分備わっている印象です。個人的にはもう少しいろいろドキュメントがあると嬉しいです。余談ですがx-spreadsheetを略してXSSだそうです。ライセンスはMITとの事。
↧
↧
JavaScriptでロングタップイベントを実装する・「long-press-event」
long-press-event
long-press-eventはスマホ等の長押しイベントを実装するJSライブラリです。シンプルな作りで、非常に軽量で非依存型となっています。要素を長押しすると、data-editing=”true”が与えられるのでCSSでアニメーションなどのスタイルを付与する、というのが基本的な使い方となります。長押しの時間もカスタムデータ属性で制御する事が出来ます。
<div data-long-press-delay="500">0.5秒</div>
凝ったことはこのままだと出来ませんがシンプルに長押し後に何かアクションを挿入したい、という時は良いかもしれませんね。ライセンスはMITとのこと。
↧
Webページに訪問したユーザーのマウスの動きを再現するスクリプト・「viewRecorder」
viewRecorder
viewRecorderはWebサイトでユーザーが動かしたマウスの動きを記録、再現するスクリプトです。jQueryに依存しています。以前ご紹介したrrwebと少し似ていますがもう少しシンプルで導入ハードルも低めな印象です。用途もrrwebと概ね同じでWebアプリ等におけるユーザーへの操作サポートなどでしょうか。
有効に活用できそうだとは思いますが、最近スクリプトの使用によって捜査対象となった報道が相次いでいる為、若干使用を躊躇しますね。forによる無限ループだけで補導されるなら書き方を書いてるサイトは総じてアウトになりそうだし、この手のスクリプトに限らず、当局が罪だと言えばどんな理由であれ罪になってしまいそうで、いついかなる理由でも検挙/逮捕される可能性も否めません。
高いスキルを持ってたり上昇志向がある方は日本よりもITリテラシーの高い傾向にある国に行った方が安心かもしれませんね。余談が過ぎましたが、たまにはいいかな。ライセンスはGPL。
全然関係ないですけど、兵庫県警のWebサイトではなんでjQueryのコアが3つ読み込まれてるんですかね
↧
jQueryライクな構文でDOM操作を行うために開発された超軽量ライブラリ・「femtoJS」
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。
↧
座標とタイムスタンプのデータをJSONで渡すとGoogleマップ上でその経路をアニメーション表示してくれるスクリプト・「maps-journey-replay」
maps-journey-replay
maps-journey-replayは座標とタイムスタンプのデータをJSONで渡すとGoogleマップ上に経路をアニメーション表示してくれるスクリプトです。説明下手なせいでピンとこないかもなので動作サンプル見て頂いた方が早いですね。以下のようなJSONデータを渡す事で実装できるのだそう。
[
{
"lat": 53.94632335995299,
"lng": -1.3704424708440581,
"timestamp": 1486291045000
},
{
"lat": 53.94624075051081,
"lng": -1.3701714873316115,
"timestamp": 1486291052000
},
.....
]
マラソン大会の経路説明とか店舗やオフィスまでの道順案内とか旅行サービスとか他にもいろいろ使えそうですね。ただし、このままだとユーザーの意思と関係なく動作するのでクリックで発火させる等を施さないと日本では犯罪になる可能性があるみたいなので気を付けたいですね。ライセンスはMIT。
↧
↧
スクロールに応じて要素にアニメーションエフェクトを付与できるシンプルで軽量なスクリプト・「lax.js」
lax.js
lax.jsはスクロールに応じて要素にアニメーションを付与させる軽量スクリプトです。圧縮版で2kbほど、非圧縮でも8kbほどで依存性もありません。基本的にはスクリプトを読み込んで初期化、カスタムデータ属性で設定するだけのシンプルな仕様です。
<p data-lax-preset="spin fadeInOut">foobar!</p> <img src="huga.jpg" data-lax-translate-y="0 0, vh 200" />
こんな感じの書き方で後はCSSでスタイルする流れとなります。簡単に導入できて良いんじゃないでしょうか。ただし、しつこいようですが、明確な理由のない導入はいたずらと判断され逮捕されかねませんので注意して検討する事をお薦めします（冗談ではなく）。ライセンスはMIT。
↧
ブロックレベルで編集できるオープンソースのリッチテキストエディタ・「Editor.js」
Editor.js
Editor.jsはブロックスタイルのリッチテキストエディタです。個人的に身近なもので言うとWordPressのGutenbergなんですが、WP使わない方だとピンとこない説明かもですね。ごめんなさい。画像やテキスト、見出しなどのブロック毎に編集、上下の位置を変えられるという特徴があり、テキストの編集はMediumのエディタのようにテキストを選択する事でツールバーが表示されるようになっています。Editor.jsの基本機能はシンプルなものですが、もともと拡張前提の設計となっており、プラグインによる機能追加をする事でエディタとして完成させていく流れとなっています。なので、不要な機能は加わらず、ユーザーにとっては軽量で分かりやすいエディタを提供できる事に繋がります。
ちょっと話はそれるのですが、Editor.jsはシンプルで分かりやすいですが、個人的にはGutenbergによってブロックスタイルのエディタの印象は非常に良くないものとなっています。顧客も自分も含め、現在商用サイトではGutenbergは利用しておらず、旧エディタを使ってもらっています。勿論、ブロックスタイルが今後の主流になっていく事をWPは想定して導入に踏み込んだのかもしれませんが（※内部の事情は把握してません）、それ以前に初期導入なのだから選択できるようにしてほしかったと思います。強制的にUIも良いとは言えないブロックエディタに移行、古いエディタはプラグインで対応するけどサポートする時期は短い、と言われたら印象悪くもなりますね。とはいえ、自分がそう思うのはそろそろWordPressを卒業する時期に差し掛かってるのかもしれないのでそこまでWPが悪いと思っているわけではありません。当ブログはWPで続けますが、事業案件では別の形を提案する流れに変えていくと思います。（顧客がWPを望むなら使いますけど）
余談でした。ライセンスはApache2.0とのこと。
↧
CMSやフレームワークとの統合を目的としたブロックベースのコンテンツエディタ・「Hyper Editor」
Hyper Editor
Hyper EditorはCMSや各フレームワークとの統合を目的としたブロックベースのコンテンツエディタです。JS製で、バックエンドに依存しないのが特徴だそうです。JS製のエディタである事で、一方のCMSでは使えるけど他でも使えない、といった問題を解決し、様々な場所で同じエディタの使用を可能とします。エディタの学習コストを無くすことで、ユーザーは開発や編集に集中する事が出来ますね。デモではテキストや画像だけでなく、切り替え式のタブコンテンツの要素の追加も可能となっている等、従来のCMSに備わっているようなWYSIWYGエディタには出来なそうな編集も用意に行えるものとなっています。拡張的な設計だそうで、プラグインの開発も進んでいるそうです。
なかなか期待できそうですし、個人的にはとっつきやすい印象でした。某CMSの新しいブロックエディタも、せめてもう少し使いやすさがあれば良かったんですが。Hyper EditorはOSSとして公開されており、ライセンスはMITとなっています。
↧
