モダンなJSとCSSで作るライブラリ不要の全画面スクロール演出（2019年版） - ICS MEDIA

2019/12/11 220 users ライブラリ ICS MEDIA Jav GPLライセンス 一方

スクロールで全画面がスライドのように切り替わるウェブサイトの表現があります。手軽にこの表現を実装するJSライブラリ、fullPage.jsを使ったことのある方もいるのではないでしょうか？　かつては無料で使えたこのライブラリですが、現在はGPLライセンスのプロジェクト以外では使用料がかかります。 その一方、CSSとJav... 続きを読む

初心者でも音楽アプリが作れる！Web Audio APIを簡略化したJSライブラリ「Tone.js」でピアノ鍵盤を作ってみよう！ - paiza開発日誌

2017/03/01 90 users ピアノ鍵盤 paiza開発日誌 0310lan 実装 簡略化

2017 - 03 - 01 初心者でも音楽アプリが作れる！Web Audio APIを簡略化したJSライブラリ「Tone.js」でピアノ鍵盤を作ってみよう！ プログラミング初心者 プログラミング学習 Webサービス紹介 開発ネタ どうも、まさとらん（ @0310lan ）です。 今回は、Web Audio API の実装で面倒な処理をすべて簡略化し、 誰でも音楽プログラミングを楽しむことが可能な... 続きを読む

最速のアニメーションライブラリはこれだ!? JSライブラリの性能をDOMとWebGLで徹底検証 - ICS MEDIA

2017/02/21 61 users CPU アニメーション アニメーション実装 パフォーマンス

HTML5のアニメーション実装に役立つ様々なJavaScriptライブラリがあります。前回の記事「 ウェブのアニメーション制作に役立つ！ 流行りのJSライブラリのまとめ 」ではJSライブラリ7種類の特徴を紹介しましたが、本記事ではそれらのパフォーマンスを比較します。 JSライブラリのパフォーマンスが良いほど、たくさんのアニメーションがあっても滑らかに動きます 。また、パフォーマンスがよければCPU... 続きを読む

ウェブのアニメーション制作に役立つ！ 流行りのJSライブラリのまとめ - ICS MEDIA

2017/02/17 317 users アニメーション制作 ウェブ

ウェブサイトのインタラクションやUIの振る舞いなど、 HTML5でモーションを実装する機会は多々あります 。HTML要素の簡易的なアニメーションであればCSS Transitionを使ったことのある方も多いでしょう。しかし、WebGLやCanvas、SVGなどJavaScriptが実装の中心となる制作作業では、CSS Transitionでは対応しきれず、アニメーションライブラリ（トゥイーンライブ... 続きを読む

JavaScriptでグラフ描画入門！全８個のライブラリをコード付きで一挙に解説！ - paiza開発日誌

2016/06/07 785 users ライブラリ paiza開発日誌 0310lan グラフ 解説

2016 - 06 - 07 JavaScriptでグラフ描画入門！全８個のライブラリをコード付きで一挙に解説！ 開発ネタ Webサービス紹介 どうも、まさとらん（ @0310lan ）です。 今回は、 JavaScript を使って「 グラフやチャートを描きたい！ 」とか、「 さまざまなデータを可視化させたい！ 」という人にオススメの JSライブラリ をご紹介しようと思います。 また、すぐに使い... 続きを読む

Webカムに映った顔の位置を認識するJSライブラリ headtrackr.js がすごい « console.log :) | Don't forget trace :)

2015/09/08 63 users console.log Webカム GitHub 位置 デモ

Javascriptで実装された顔認識ライブラリ「headtrackr.js」がけっこうスゴイです。 Githubでソースが公開されています。 https://github.com/auduno/headtrackr/ 以下のデモでどういう機能か分かると思いますが、 Webカムに映った顔を認識し、その位置座標を取得できるものです。 実装されている処理は、ホワイトバランスを調整する処理や顔認識処理、... 続きを読む

ある要素が表示されるまで待つJSライブラリを書いた(MutationObserver) | Web Scratch

2015/04/06 51 users then セレクタ functio require ライブラリ

wait-for-element.js wait-for-element.js という関数一個だけのライブラリを書きました。 以下のような感じで、セレクタにマッチする要素が出現するまで待つというシンプルな関数です。 var waitForElement = require("wait-for-element"); waitForElement("#js-element").then(functio... 続きを読む

JavaScript - 俺のJSライブラリの世界観(2014末版) - Qiita

2014/12/11 446 users Qiita JavaScript 世界観

http://qiita.com/advent-calendar/2014/frontrend 概論 ここ近年のモダンJSは特に理由がなければcommon.jsのrequireスタイルで記述され、webpack/browserifyでビルド/読み込むことを前提にしてよい。今やビュー層を除いてブラウザとnodeのライブラリの境界は非常に曖昧である。 識者諸君においては常にどちらの環境でも読み込めるよ... 続きを読む

JSライブラリ/フレームワークの良い、悪いメモ - 素人がプログラミングを勉強していたブログ

2014/11/05 441 users フレームワーク Fac jsx プログラミング トランスパイラ

2014-11-05 JSライブラリ/フレームワークの良い、悪いメモ ※ただのメモで、未来志向なのであまり真に受けてはいけない。 良いっぽい React.js 早い/コンポネント志向/APIの設計がいい。JSXと他のトランスパイラの組み合わせという問題はある Promise ネイティブに入った、誰もが使ってる TypeScript ES6時代でも存在意義のある言語。TypeScript互換のFac... 続きを読む

様々なJavaScriptライブラリをコレクションしているWebサイト・JSDB.IO - かちびと.net

2013/02/10 135 users JavaScriptライブラリ net Webサイト イト

様々なJSライブラリのまとめサ イトのご紹介。主にクライアン トサイドのJSライブラリを中心 にコレクションしているみたい です。シンプルで探しやすかっ たのでメモ。 JSのコレクションサイト。サクサク動作して広告などの余計なコンテンツも無いので非常に探しやすい印象です。 JSDB.IO シンプルにまとめてくれいます。カテゴリから探すことも可能ですよ。 個別ページに移動することなく情報を表示してく... 続きを読む

世界地図でデータをビジュアライズする際に使えるJSライブラリ「DataMaps」:phpspot開発日誌

2012/12/17 90 users 国名 インタラクティブ カーソル ライブラリ マウスオーバー

DataMaps 世界地図でデータをビジュアライズする際に使えるJSライブラリ「DataMaps」。 マウスオーバーでインタラクティブにデータを表示できたりするライブラリです 次のように美しい地図を描けるので、管理画面や、プレゼン資料向けに使ってみてもよさそう １からやろうと思うとかなりの時間がかかりそうですが、これなら直ぐに使えそうです カーソルを合わせると国名が出る、というような世界地図にもで... 続きを読む

JavaScriptのライブラリを沢山集めてカタログ化しているWebサイト・Jster - かちびと.net

2012/11/22 484 users ライブラリ 既知 沢山 探し物 net

JSライブラリのまとめサイトの ご紹介。既知の方も多いかもし れませんが、探すのに便利なの で改めてご紹介します。カテゴ リ分けもしてくれているので探 しやすいです。 様々なJSライブラリがまとめられています。探し物がある際は覗いてみるといいかも。 Jster UIやメディア、グラフィック、ユーティリティなどのカテゴリに分けられています。現在は900ほどのライブラリがまとめられています。 シンプル... 続きを読む

サンプルだけでも見ておくべきHTML5のチュートリアル集:phpspot開発日誌

2012/07/25 122 users phpspot開発日誌 チュートリアル チュートリアル集

24 Useful HTML5 Tutorials and Examples サンプルだけでも見ておくべきHTML5のチュートリアル集。 ゲームやページレイアウトに関するHTML5のチュートリアル。結構色々な事ができるなというところで一度見ておくとよさそう。 覚えることが多くて大変ですね 関連エントリ HTML5で美麗なページめくり効果が作れるJSライブラリ「turn.js」 これは必見のWEBデ... 続きを読む

超面白！文字を選択してその文字にコメントできるJSライブラリ:phpspot開発日誌

2012/07/23 79 users phpspot開発日誌 超面白 文字 Saveボタン ＨＯＭＥ

Home - Annotator - Annotating the Web 超面白！文字を選択してその文字にコメントできるJSライブラリ。 ブログ等で記事のここにコメントしたい、といった場合に選択するとアイコンがあらわれます クリックするとコメント書き込みフォームがポップアップされます Saveボタンを押すと保存され、マウスオーバーでコメントが出るようになります コメント量の多いところはその分黄色... 続きを読む

美麗なグラフをSVGで描画できるJSライブラリ「dc.js」:phpspot開発日誌

2012/07/19 69 users SVG 描画 オブジェクト指向 phpspot開発日誌 グラフ

dc.js - Dimensional Charting Javascript Library 美麗なグラフをSVGで描画できるJSライブラリ「dc.js」 次のような円グラフや棒グラフをオブジェクト指向の分かりやすいコードで描画出来ます。 円グラフのコード例。メソッドをチェーンさせて直感的にグラフを描画可能。 SVG対応していないブラウザでは描画できませんが、軽くてよさそうですね 関連エントリ ... 続きを読む

スマフォのフリックにも対応しているカルーセルを実装できるJSライブラリ・inflickity - かちびと.net

2012/04/08 63 users カルーセル フリック ソフトウェア スマフォ マーケティング

スマフォのフリックにも対応しているカルーセルを実装できるJSライブラリ・inflickityのご紹介。永久にフリックできる、みたいな感じのカルーセルを実装します。 かちびと.netとは 貴方のネットビジネスを支えたい。かちびと.netはそんな思いを持ったサイトです。Web制作に役立つ素材やソフトウェア、Webサービス、マーケティングに役立つ情報などを配信しています。宜しければメモ代わりにご利用下さ... 続きを読む

ネットワーク図を美麗にビジュアル化できるJSライブラリ「sigma.js」:phpspot開発日誌

2012/04/02 72 users 美麗 phpspot開発日誌 インタラクティブ グラフィック

sigma.js | a lightweight JavaScript graph drawing library ネットワーク図を美麗にビジュアル化できるJSライブラリ「sigma.js」。 HTML5 canvasベースのスタンドアロンライブラリだそうです。マウスでドラッグしたりマウス位置に応じてインタラクティブに変化させることができます。 次のようにグラフィックが美麗であるので、個人的にはグ... 続きを読む

Facebookのデザインにも負けない超カッコいいタイムラインを作るJSライブラリ「Timeline」:phpspot開発日誌

2012/04/02 110 users TimeLine クオリ Facebook スライドショー

Facebookのデザインにも負けない超カッコいいタイムラインを作るJSライブラリ「Timeline」 2012年04月02日- Timeline Facebookのデザインにも負けない超カッコいいタイムラインを作るJSライブラリ「Timeline」。 一見スライドショーのようでもありますが、タイムライン付きのスライドショーになっています。何かの歴史を語る時には是非使いたいと思ってしまう程のクオリ... 続きを読む

モダンなJSライブラリのディレクトリ構成まとめ - CODESCRIBBLE

2012/02/21 133 users

JavaScriptのプロジェクトを新しく作るにあたってディレクトリ構成をどうするか悩んだので、オープンソースのライブラリなどを参考にすることに。ということで、モダンなJavaScriptライブラリ・フレームワークのディレクトリ構成をまとめてみました。 モダンと言ってはいますが、全然モダンじゃないライブラリも混ざってるかもしれないです。 jQuery jquery ├── build │   └─... 続きを読む

HTML5演出に最適な画像読み込み管理のJSライブラリ「LoadManager.js」 | ClockMaker Blog

2012/02/14 550 users ローディング ClockMaker Blog 前者 見栄え

HTMLで画像を読み込むとき、HTMLのimgタグだけだと不恰好となりがちですが、読み込みを管理すれば見栄えも整いますというデモとJSライブラリを作ってみました。次の2つのデモを見比べて何が違うのか確認ください。 デモ (通常のimgタグ) デモ (LoadManager.jsを使用) デモの違いとは 前者は画像がバラバラとインターレース的に読み込まれ、後者は読み込み終わるまでローディングが表示さ... 続きを読む

ブラウザ上でPDFを表示するJSライブラリ「PDF.js」:phpspot開発日誌

2012/02/10 51 users phpspot開発日誌 インタフェース PDF pdf.js

PDF.js PDF.jsを使えば、PDFをそれっぽいインタフェースとともにブラウザ上で表示してしまえます。 なんでもJavaScriptでやりゃいいってもんじゃないよ、という気もしますが、面白かったのでご紹介です。 PDFを一貫して同じインタフェースで表示させたいというようなニーズにマッチしそうですが、動かないブラウザもあるみたい。 世界は広いということを認識させられるライブラリですね 関連エン... 続きを読む

ページめくりを実現するためのjQueryプラグイン集:phpspot開発日誌

2012/02/09 120 users phpspot開発日誌 jQueryプラグイン集 ページ

ページめくりを実現するためのjQueryプラグイン集 先日のHTML5で美麗なページめくり効果が作れるJSライブラリ「turn.js」 では多くの反響を頂きましたが、他にも同様のページめくりライブラリがあるようです Booklet 個人的にコンパクトなインタフェースがいいなと思うライブラリです。 HTML5がなくともIE8でも動きます Create a page flip effect with ... 続きを読む

HTML5でテキストのシャッフル演出ができるJSライブラリ「ShuffleText.js」 | ClockMaker Blog

2012/02/07 122 users テキスト ClockMaker Blog Demo HTML

Flashでよく見かけるテキストシュッフル演出(文字列がランダムで切り替わる演出、正しい呼び名はわかりませんｗ)をHTML5で作ってみました。HTMLのタグ(pタグとか)に使うバージョンとHTML5の新要素Canvasを使うバージョンの二種類です。 demo (HTMLエレメント版) demo (Canvas版) Canvas版のほうはHTML5対応ブラウザ(ChromeやSafari)でなければ... 続きを読む

HTML5で美麗なページめくり効果が作れるJSライブラリ「turn.js」:phpspot開発日誌

2012/02/06 724 users phpspot開発日誌 turn.js iPhone 立体感

turn.js - The page flip effect for HTML5 HTML5で美麗なページめくり効果が作れるJSライブラリ「turn.js」 ドラッグ＆ドロップでべらっとめくるあのインタフェースがHTML5で実現でき、iPadやiPhoneなどでも動作します。 電子書籍ビューアとして使えそうですね ページに立体感を出すために影なんかも描画されてます。 マークアップや初期化も超簡単で... 続きを読む

2011年の中から選ばれた開発者のためのWEB開発リソース50選 | DesignDevelop

2011/12/18 66 users フレームワーク リソース CSS DesignDevelop

2011年も多くのWEB開発のためのリソースが公開され、開発者を助けてくれました。今回紹介するのは2011年に公開された中から選ばれた開発者のためのWEB開発リソース50個、紹介する「Our 50 Favorite Web Developers Resources and Tools from 2011」です。 Less Framework 4 CSSのフレームワークから、便利なjsライブラリ、オ... 続きを読む