面倒な作業不要で、Webアプリ開発が劇的にはかどる！至高のJavaScriptライブラリ6選 - paiza times
どうも、まさとらん（@0310lan）です！ 今回は、Webサービスやアプリ開発などにとても便利なJavaScriptライブラリを厳選してご紹介しようと思います！ 強力な独自機能を簡単に追加できるものやトレンドに合わせたWebデザインを構築できるもの、そのままWebサービスとして利用できるものまで、ピックアップしてみました。 これからWeb開発を始めようという人はもちろんですが、開発ネタに困っている人も何か良いアイデアが発見できるかもしれないので、ぜひ参考にしてみてください！ ■波形表示やプレイヤーも作れる高機能な音楽ライブラリ！ 【 wavesurfer.js 】 音声ファイルを読み込むだけでグラフィカルな波形表示が可能で、多彩なオプションを利用することで自在に音声を制御できるJavaScriptライブラリです。 音声の再生・早送り・巻き戻し・ミュートなどの基本機能はもちろん、音声の書き
サラッとスライスで切り替わるスライダー実装「Slice Slider」 – bl6.jp
Slice Sliderはサラッとスライスでシンプルに切り替わるスライダーを実装できます。さりげなく、気品を感じさせるスライスアニメーションによるスライダーを設置したい人には最適ですね。 以下のページからSlice Sliderの実際のデモやコードをチェックできます。 Slice Slider デモではスライダーの画面内で上下にスクロールすると前後のコンテンツに切り替わります。もしくはスライダーの右側に設置された「Prev」「Next」をクリックすることでも切り替えることが可能です。 切り替わり時のアニメーションでは、メイン画像が少し縮小（後退）した後に上からスライドで次の画像が表示されます。その後、元のサイズに戻る仕組みです。また、画像が切り替わる時にはスライダーのコンテンツ内のテキストも切り替わります。 シンプルながらも細部の動きやタイミングまでしっかり考えられて設計されている印象です
【JavaScript】指定した要素がビューポートに表示されたことを［Emergence.js］で検出する。
【JavaScript】指定した要素がビューポートに表示されたことを［Emergence.js］で検出する。 指定した要素がブラウザの可視領域に入ったことを検出するJavaScriptのライブラリ［Emergence.js］を紹介します。 ブラウザをスクロールして、指定した要素が特定の範囲に入ったときにアニメーションを実行させることができる便利なプラグインです。 サンプルのデモサイトは以下より。 デモ : https://xtianmiller.github.io/emergence.js/ こちらのサンプルでは、丸、四角、三角の要素が、スクロールに伴ってピンク色の背景内に来ると、そのタイミングでアニメーションと共に拡大されるようになっています。 さらにスクロールしてピンク色の背景から外れると、今度は縮小して元のサイズに戻ることを確認できるはずです。 ［Emergence.js］の実装方法
スクロールに応じて指定した要素に任意のclassを付与できるスクリプト・「scrollClass」
scrollClassはスクロールの挙動に応じて任意の要素にclassを付与するためのスクリプトです。jQueryに依存しています。上に動作サンプルを用意しました。初期は文字が赤、下にスクロールすると途中で緑、上に戻す時は青と変化するように設定しました。ライセンスですが、一通り動作確認したあと確認しようとしたらユニコーン出てて見れませんでしたので後で確認します。 scrollClass
【JavaScript】簡単にMasonry風グリッドレイアウトを実装できる［Macy.js］の使い方
Masonry風のグリッドレイアウト採用時に、ぜひ導入したいJavaScriptのライブラリ［Macy.js］を紹介します。 まずは動作サンプルをご覧ください。 Macy.js : 動作サンプル ウィンドウサイズの変えると、その横幅に応じてカラム数が増減します。 jQyeryなどの外部ファイルは一切不要で、単体で動作するスグレモノ。 実装方法は以下より。 プラグイン［Macy.js］の使い方 早速ですが、まずは公式サイトから、必要なファイルをダウンロードしてきます。 Macy.js : 公式サイト 最低限必要なファイルは「macy.js」または１つだけ。あらかじめ圧縮されているのでダウンロードしたものをそのまま使いましょう。 htmlファイルの適当な個所で読み込んでおきます。 <body> <script src="macy.js"></script> </body> 続いて［Macy.j
HTMLフォームの検証を簡単に実装できる「JS Form Validator」 – bl6.jp
JS Form ValidatorはHTMLフォームの検証を簡単に実装することができます。JQueryを必要とせず、純粋なJavaScriptを使ったバリデーションになります。ユーザーによって入力されたデータの正当性をチェックできる機能をサクッと取り入れたい人には最適です。 以下のページから、JS Form Validatorの実際のデモンストレーションをチェックできます。 デモ デモでは1〜3の全部で3つのサンプルが用意されています。例えば、1のSIMPLE FORMでは、名前、メールアドレス、パスワードの項目を検証してくれます。全てを正しく入力しないと、下にある「Create account」ボタンをクリックできない仕組みです。 データを送信する前に入力されたデータの正当性をしっかり検証してくれるので、入力ミスも軽減できますね。ユーザーとサイト運営者の双方にとって便利な機能といえます。
あれ、いつも書いてるな～というJavaScript の小技集 | バシャログ。
いい加減髪を切りたいminamiです。 JavaScriptでいつも書いてるな～という処理や、知っていると便利なTipsを簡潔に集めた記事を見てほお～と思ったものがいくつもあったので抜粋してみました。 ※追記1： ご指摘がありましたので一部修正しました。「配列をソートする」ではなく「配列をシャッフルする」でした。 ※追記2：「HTMLをエスケープする」のソースがまちがって表示されていました。修正しました。 ※追記3：予想以上に反響が大きく、多数ご指摘を受けてしまいました。よく使う処理の書き方もいろいろあるんだな～という参考程度にご紹介したのですが、参照元の記事の内容の検証が不十分なまま紹介してしまい申し訳ありませんでした。いろいろと勉強になりました！ 45 Useful JavaScript Tips, Tricks and Best Practices 配列からランダムで値を取り出す v
スクロールのイベントをIntersectionObserverで快適に実装する最新の軽量JavaScriptライブラリ -Scrollama
Intersection Observerを利用したWebページが増えてきました。 IntersectionObserversは、ターゲット要素がブラウザのビューポートと呼ばれるページの表示領域と重なる（または交差する「Intersection」）量を計算するもので、主要なブラウザに実装されています。 どんなことができるかというと、コンテンツのスクロールに応じてサイドバーをぴたっと配置したり、ヘルプや広告を表示したり、まだ表示されていないコンテンツや画像を先読みさせたりできます。これらを実装するには面倒なJavaScriptが必要でしたが、今では非常に簡単に実装できます。 IntersectionObserverを使用して、スクロールに応じたさまざまなイベントを実装する最新の軽量JavaScriptライブラリを紹介します。 Scrollama -GitHub Intersection Ob
スクロールイベントを実装できるモダンで軽量なJSライブラリ「scrollama.js」 – bl6.jp
scrollama.jsは、スクロールイベントを実装することができるモダンで軽量なJavaScriptライブラリです。IntersectionObserverを使用しているとのこと。スクロールされた位置によって要素のカラーを変更したりなんてことができます。 以下、scrollama.jsの実際のデモページになります。 デモ デモページでは中央に赤い点線が引かれていて、ここがトリガーとなっています。スクロールした時に要素がこの位置を通過してから通りすぎるまでの間、要素のカラーが変化します。 スクロールにより、特定の位置をトリガーとして要素に何かしらの変化を施したい場合に便利ですね。応用次第でさまざまなシーンに役立つ機能といえるのではないしょうか？ オプションには、step、container、graphic、offset、progress、debugがあります。デフォルト値は、offsetが
JavaScriptで自分だけのWeb製作エディタを構築できる「GrapesJS」を使ってみた！ - paiza開発日誌
どうも、まさとらん（@0310lan）です！ 今回は、ドラッグ＆ドロップで誰でも簡単にWebサイトを製作できるサービスのご紹介です！ そのままでもWebオーサリングツールとして大変便利なのですが、JavaScriptで好きなようにカスタマイズしてオリジナルのエディタを開発＆公開できるという面白い特徴があります。 現在、オープンソースとして活発に開発が進められているので、ぜひこの機会にみなさんも試してみてください！ 【 GrapesJS 】 ■「GrapesJS」の使い方！ それでは「GrapesJS」を使ったWeb製作エディタがどのようなツールなのかを見ていきましょう！ トップページにある「Webpage Demo」というボタンからアクセスすることができます。 登録なども不要で、すぐにブラウザ上で「エディタ」が表示されます。 この画面上で、自分の好きなようにWebサイトを製作することができ
レスポンシブ対応！Webサイトにグラフを表示できるJavaScriptライブラリー3つ
2017年11月16日 JavaScript グラフを必要とするWebサイトは限られるかもしれませんが、いざという時に知っておくと便利なグラフ作成用JavaScriptライブラリー。意外とレスポンシブ対応のものが少なかったので、対応しているものを集めてみました。 ↑私が10年以上利用している会計ソフト！ 1. Chart.js 公式サイト｜サンプル｜ドキュメント｜GitHub Chart.jsはグラフ作成用JavaScriptライブラリーの大御所とも呼べるのではないでしょうか？手軽にアニメーションのついた美しいグラフを表示できますよ。棒グラフ、円グラフ、折れ線グラフ、極座標グラフ、バブルチャート等、様々な種類が用意されています。もちろんレスポンシブ対応！どのグラフ描画ライブラリーにするか悩んだら、ひとまずChart.jsを試してみるといいでしょう。 Chart.jsの読み込み まずはファイ
[JS]要素がビューポートや指定した範囲に表示されたか判定する超軽量スクリプト -Emergence.js
ページをスクロールして、指定した要素がビューポートに表示されたかを判定し、アニメーションなどを適用できる超軽量のスクリプトを紹介します。 ビューポートだけでなく、範囲を指定することもできるので、かなり面白いと思います。 単体で動作し、しかも1KBの超軽量スクリプトです。
![[JS]要素がビューポートや指定した範囲に表示されたか判定する超軽量スクリプト -Emergence.js](https://cdn-ak-scissors.b.st-hatena.com/image/square/cfd16f6b3cf9495ffab4b2256010a83797a2cf0d/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201704%2F2017110801-02.png)
[JS]このスクリプト一つで、さまざまな用途に合わせたスライダーが実装できて便利 -Tiny Slider
スライダーとしてのあらゆる機能を備えた単体で動作する軽量のスクリプトを紹介します。シンプルなHTMLでスライダーを実装でき、ベーシックなスライダーからフルカスタマイズされたスライダーまで、簡単に実装できます。 Tiny Slider Tiny Slider -GitHub Tiny Sliderの特徴 Tiny Sliderのデモ Tiny Sliderの使い方 Tiny Sliderの特徴 シンプルなHTMLで、高性能なスライダーを実装。 他のJavaScript, CSSへの依存は無し。 さまざまなスライダーに対応。水平・垂直・自動再生など、カスタマイズも簡単。 矢印キー、ドラッグやタッチ操作にも対応。 レスポンシブ対応、ブレイクポイントの設定も簡単。 CSS3対応のすべてのモダンブラウザをサポート。 古いブラウザにはCSS2のフォールバックでサポート。 サポートブラウザ Firefo
![[JS]このスクリプト一つで、さまざまな用途に合わせたスライダーが実装できて便利 -Tiny Slider](https://cdn-ak-scissors.b.st-hatena.com/image/square/f9e39760f07a971737ce07c2990fc51b6bdbcff7/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201704%2F2017110711.png)
画像の遅延読み込みを実装できる軽量のJavaScriptプラグイン「justlazy.js」 – bl6.jp
justlazy.jsは画像の遅延読み込みを実装することができるJavaScriptプラグインです。ファイル容量も軽量で、jQueryに依存することなく使用可能なところがうれしいですね。Webページの読み込み速度を少しでも短縮させたい人にはとても便利な機能といえます。 justlazy.jsの実際のデモや具体的な実装方法は以下のページから確認できます。 デモ デモでは画像以外のコンテンツが先に読み込まれた状態になっていて、画像が表示される場所にはローディングアイコンが表示されています。画像が読み込まれるとローディングアイコンがある位置に画像が表示されます。 先にテキストなどのコンテンツが読み込まれるので、重い画像を読み込んでいる間でもユーザーを無駄に長い時間待たせなくて済むのがいいですね。 画像が読み込まれるまでテキストなどを読み進めることができるので、とても効率的です。 使い方も簡単で、
パスワードの表示・非表示を切り替えれる「Bootstrap Show Password」 – bl6.jp
Bootstrap Show Passwordは、Bootstrapによるパスワードの表示・非表示を切り替えることができるプラグインです。パスワードをテキストボックスに入力する際に、入力したパスワードを簡単に表示させたり非表示にさせたりすることができます。 以下のページから、Bootstrap Show Passwordの実際のデモ動作をチェックできます。 デモ デモではページ読み込み時にテキストボックスに入力されたパスワードが非表示の状態になっています。「Show password」という項目にチェックを入れると、非表示になっているパスワードが表示されます。 また、テキストボックスの隣に設置されている目のアイコンをクリックすることでも、パスワードの表示・非表示を切り替えることが可能です。どちらも、手軽に切り替えれるのでとても便利ですね。 使い方もシンプルでわかりやすいほか、オプションもい
high-performance-sticky-sidebar.html
サイドバーをスクロールに合わせて、ぴたっとくっつける快適に動作する超軽量スクリプトを紹介します。 コンテンツが長い・短い場合はもちろん、サイドバーが長くてビューポートをはみ出す場合にも期待通り完璧に対応します。スクリプトは単体で動作し、jQueryのプラグインとして動作させることも可能です。 スクロール時にすべてのサイズを計算するのではなく、必要なサイズだけを再計算。 スクロール時のラグやジャンクを発生せず、リフローを起こさずにスムーズに動作。 サイドバーとコンテナのサイズが変更された時は、それらのサイズを正確に再計算。 特定の状況下でフックするために、イベントトリガーを用意。 コンテナが長くても短くてもサイドバーを扱うことができます。 他のスクリプトへの依存はなく動作。 jQueryやZeptoのプラグインとして利用することも可能。 実装はスーバー簡単！ Sticky Sidebarのデ
Web制作者は要チェック！モーダルダイアログをアクセシブルに実装する超軽量スクリプト -Micromodal.js
ちょうどいいモーダルってなかなか見つからないんだよな、と探している人は要チェックです。シンプルで操作性もよく、アクセシブルに実装する超軽量の単体で動作するJavaScriptのライブラリを紹介します。 WAI-ARIAガイドラインに準拠したモーダルダイアログを実装。 1.9kbの超軽量のJavaScriptライブラリ。 aria属性でモーダルの開閉を切り替える。 オーバーレイをクリックすると、モーダルを閉じる。 escボタンを押すと、モーダルを閉じる。 モーダル内のタブをフォーカス。 モーダル内の最初のフォーカス可能な要素にフォーカスを合わせる。 モーダルを閉じた後、フォーカスされた要素の状態を保持。 Micromodal.jsのデモ デモでは実際の動作を楽しめます。 モーダルを閉じるトリガーは、Closeボタン、Xボタン、オーバーレイのクリック、escボタンが用意されています。
【インスピレーション／スニペット】CSSとJavaScriptで作る！無料オンボーディングUI 10選
オンボーディング、つまりサービスに接した最初の瞬間をいかにデザインするかは、新しいユーザを獲得する上で決定的な重要性をもっています。 さまざまな方法があり、唯一の正しい方途などないですが、様々なサイトやアプリから自分自分のデザインのためのアイデアを拾い集めることは有用です。 本記事では、10のCSSまたはJavaScriptの無料オンボーディングUIを紹介します。 インスピレーションを得るのもよし、コード・スニペットを拾うのもよし、ぜひ活用してみてください。 （画像をクリックするとCodePenへとびます） オンボーディング・デザイン全般については、以下の記事も参考にしてみてください。 ・【アプリもWebサイトも第一印象が大切！】ユーザがときめく第一印象のデザイン戦略 １．カルーセルスライド くるくる回るオンボーディングカーソルは画面の小さなモバイルで人気ですが、ウェブサイトでも情報を素早
クイックな開閉で使いやすいアコーディオン実装「Accordion.JS」 – bl6.jp
Accordion.JSは、開閉の動作がクイックで使いやすいアコーディオンを実装することができるjQueryプラグインです。ファイル容量も軽量で、gzip圧縮で〜1KBというのもうれしいですね。オプションやHTML5のdata属性を使用して設定することができます。 Accordion.JSの実際のデモ動作は以下のページから確認できます。 デモ 「Section 1」や「Section 2」などのヘッダー部分をクリックすると、その場所のコンテンツがスライドで開閉されます。開閉のスライドは、とてもクイックに動作するのでストレスなくサクサクとコンテンツを閲覧していくことが可能です。 デザインもシンプルで余計な装飾もなく、いろんなWebサイトに合わせやすいと思います。 デモページには、デフォルトのサンプルをはじめ、Second section active（例えば、Section 2のコンテンツを
ウィンドウをリサイズした時にイベント発生できる「jquery.resizeend」 – bl6.jp
jquery.resizeendは、ブラウザのウィンドウをリサイズした時にイベントを発生させることができるjQueryプラグインです。ウィンドウのサイズ変更後に何かのイベント処理を行いたいという人にはピッタリの機能ですね。 以下のページからjquery.resizeendの実際のデモ動作を確認できます。 デモ DEMOの項目では、ページを読み込んだ時は「No event」と表示されていますが、ブラウザのウィンドウをリサイズし始めると「Resizing」に変わり、リサイズが終了すると「Resizing Complete!」に変化します。 このように、ウィンドウをリサイズすることで任意のイベントを発生させられるのがこのプラグインの特徴です。リサイズ後に何かのアクションを起こさせたいという場合に役立ちますね。 基本的な使い方もシンプルでわかりやすいので、リサイズ後に自分の好きなイベントを設定した
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
