appgiga.jp2024 著作権. 不許複製 プライバシーポリシー
簡単にリッチなチャートが作れるC3.jsを使ってみた - undefined
C3.jsとは? C3.js | D3-based reusable chart library C3 はチャートに特化したビジュアライゼーションライブラリです。D3 のラッパーライブラリで、D3 の見た目の美しさやインタラクション性などの特徴を残しながら、チャートライブラリとして分かりやすいインターフェースを提供するという方針で開発を進めています。 http://blog.xica-inc.com/about-xica/member-12/ これはまではhighchart.jsを使っていましたが、商用利用は有償だったりするので今回C3.jsをいじってみます。 サンプル どんなチャートが作れるか以下のサンプルを見れば分かります。 C3.js | D3-based reusable chart library 使ってみる 音ゲーなどではゲーム終了時にスコアの軌跡がグラフとして描画されたりしま
2次元物理計算エンジンをブラウザで実現する「Matter.js」
面白いアニメーションを作るために物理演算エンジンを使いこなせればとても便利ですが、自力で物理演算に取り組むには高度な知識と技術が必要となります。そんな扱いの難しい物理演算を手軽に導入できるJavaScriptのAPIが「Matter.js」です。 Matter.js - a 2D rigid body JavaScript physics engine http://brm.io/matter-js/ Matter.jsでどんなことができるのかはデモを見れば一発で分かります。上記サイトの「Demo」をクリック。 すると、「Matter.js Physics Engine Demo」という物理エンジンのデモページが開くので、プルダウンメニューにあるデフォルトパラメータを指定して、「Reset」をクリックすればOK。2Dのアニメーションが再生され、Matter.jsでどんなことができるのかが直
Matter.js
Rigid bodies Compound bodies Composite bodies Concave and convex hulls Physical properties (mass, area, density etc.) Restitution (elastic and inelastic collisions) Collisions (broad-phase, mid-phase and narrow-phase) Stable stacking and resting Conservation of momentum Friction and resistance Events Constraints Gravity Sleeping and static bodies See all features
ブラウザで自然言語処理 - JavaScriptの形態素解析器kuromoji.jsを作った
概要 簡単に使える Pure JavaScript の形態素解析器 kuromoji.js を書きました。今回は、簡単に kuromoji.js を紹介したあと、セットアップ方法を解説します。ついでにロードマップ的なものも晒してみます。みんなでブラウザ NLP しよう！ kuromoji.js とは 言わずと知れた Java の形態素解析器 Kuromoji を JavaScript に移植したものです。 kuromoji.js の GitHub リポジトリ と言っても、機械的に Java から JavaScript に置き換えたものではないため、API も違いますし、メソッド名やその内部も大幅に異なります。そもそも自分が形態素解析について勉強するために書き始めたため機械的なトランスレートに興味がなかったこと、また言語ごとに使いやすい API は異なると考えていることが理由です。 Node
kuromoji.js使って構文解析した - Qiita
こんにちは、らこです。先日から話題になってるJavaScriptの形態素解析器kuromoji.jsを使って、確率自由文脈文法で構文解析してみました。(注意:アルゴリズムの解説記事 ではない です) 結論 kuromoji.js遊びまくれるのでみんな使おう kuromoji.d.ts書いた 私は型大好き人間なのでTypeScript使ってkuromoji.js使いました。型定義ファイルは自分が使う部分だけエイヤっと自作しました(laco0416/kuromoji.d.ts)。 あと、プロジェクトに↑の自作型定義ファイルを読み込むのにdtsm使いました。tsd使ってたのが馬鹿らしくなるくらい便利です。作者のvvakameさんによるわかりやすい紹介はこちら 確率自由文脈文法とは ちゃんと説明すると長くなりますしうまく説明できる自信もないので、ばっさりカットします。 雰囲気つかむにはここらへんを
QuaggaJS - JavaScript製のバーコードリーダー
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました コンピュータと現実世界との間で情報をやりとりする方法はいくつかあります。目で見てキーボードで入力するのも一つですが、非常に面倒くさいです。昔からある手法として知られているのがバーコードです。 バーコードスキャナーを使うことで伝票や商品に印字されたバーコードを読み取れます。しかしいくつかのバーコードを読み取るだけでスキャナを購入したくないという方はQuaggaJSを使ってみてはいかがでしょう。 QuaggaJSの使い方 QuaggaJSはJavaScriptで書かれたバーコードリーダーです。 残念ながらQuaggaJSはCode128とEANにのみ対応しており、日本で使われているCode39には対応していません（フォークして作れそうな気もしますが）。Androidは既に対応しているの
JavaScriptで画像やテキストにモザイクをかける方法【SPOILER ALERT!】
ネタバレなど掲載する際、画像やテキストにぼかし処理をしておき、ユーザーが自由に解除できるコンテンツをJavascriptで作る。
interact.js for drag and drop, resizing and multi-touch gestures – Mozilla Hacks - the Web developer blog
interact.js for drag and drop, resizing and multi-touch gestures interact.js is a JavaScript module for Drag and drop, resizing and multi-touch gestures with inertia and snapping for modern browsers (and also IE8+). Background I started it as part of my GSoC 2012 project for Biographer‘s network visualization tool. The tool was a web app which rendered to an SVG canvas and used jQuery UI for drag
ProgressBar.js - Progress bars with JavaScript
With ProgressBar.js, it's easy to create responsive and stylish progress bars for the web. Animations perform well even on mobile devices. It provides a few built‑in shapes like Line, Circle and SemiCircle but you can also create custom shaped progress bars with any vector graphic editor. ProgressBar.js is lightweight, MIT licensed and supports all major browsers including IE9+. Usage A simple cod
米Yahoo!、国際化対応の日付、小数点、メッセージなどをアプリに組み込めるJavaScriptライブラリ「Format.JS」、オープンソースで公開。
米Yahoo!は、JavaScriptで開発するアプリケーションを国際化対応にするためのJavaScriptライブラリ「Format.JS」をオープンソースで公開しました。 アプリケーションの国際化では、表示されるメッセージを多言語対応するだけでなく、例えば小数点の表記が日本で一般的な「100.01」のようなピリオドではなく「100,01」のようにカンマを使うケースや、日付の表記に「2014/10/27」と年/月/日だけでなく月/日/年や日/月/年の順に鳴るケースなど、表記にさまざまなパターンが必要となります。 Format.JSは、多言語に対応したメッセージの差し替えだけでなく、日付や小数点の国際化にも対応したアプリケーション国際化（i18n）のためのライブラリです。 テンプレートライブラリと統合利用 Format.JSではロケールコードを指定すると自動的に対応する表記を出力してくれます
動作が軽快なシンタックスハイライター「highlight.js」
ソースコードのシンタックスハイライトについては、さまざまなプラグインが用意されています。しかし、必要以上の内容が詰め込まれていたり、カスタマイズ性に欠けていたりと、なかなか自分に「ピッタリ」なものを見つけるのは難しいです。そこで、今回は、「必要なものだけを自分で最適化できて」「動作が軽快な」プロダクトをご紹介します。 必要最小限の機能に絞り込む事が可能な「highlight.js」 highlight.jsは、さまざまな言語に対応したシンタックスハイライト。既存のコードにスタイルシートと JavaScript を埋め込むだけで使用できます。特徴は、何と言っても対応している言語の多さとデフォルトで用意されているさまざまなスタイルシートです。 対応している言語は豊富ですが、すべてを使用する必要はまったくなく、自分にとって必要な言語に絞ってダウンロードすることもできるため、ソースコードが負担にな
[JS]イベントを時間軸で表すタイムスケジュールシートをシンプルなコードで作成できるスクリプト -Timesheet.js
スケジュールの横軸と各アイテムを定義するだけでタイムスケジュールシートを簡単に作成できるスクリプトを紹介します。 jQueryやAngular.JSなど他のスクリプトは不要です。 Ilya Grigorik Timesheet.jsの使い方 Step 1: 外部ファイル 当スクリプトを外部ファイルとして記述します。 <head> ... <script src="/javascripts/timesheet.js" type="text/javascript" /> </head> Step 2: HTML タイムスケジュールシートを配置する空のdivを用意します。 <div id='timesheet'></div> Step 3: JavaScript 一行目は配置する要素、自至、二行目以降はアイテムを配列で記述します。 new Timesheet('timesheet', 2002,
![[JS]イベントを時間軸で表すタイムスケジュールシートをシンプルなコードで作成できるスクリプト -Timesheet.js](https://cdn-ak-scissors.b.st-hatena.com/image/square/fbbf9a8239270b982158e9318db2dd638d1ac2f8/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201403%2F2014090802.gif)
HTML5 CanvasをjQueryライクに操作できるプラグイン「jCanvas」
はじめに HTML5において追加されたCanvasは、HTMLとJavaScriptを用いてWebページ内に図形や線などを描画できる機能で、動画や音楽を再生するvideoタグやaudioタグなどとともに、HTML5の代表的な機能としてしばしば紹介されます。 Canvas機能を用いるとHTMLのcanvas要素で定義された領域に対してJavaScriptで描画処理を行えます。以下のような描画を行うAPIが提供されています。 線（直線、曲線） 図形（四角形、円） 色とスタイル（単色、グラデーション、影） 文字の描画（サイズ、フォント、色の指定） 変形（拡大、回転、マトリクス変換） しかし、Canvas描画処理のJavaScript APIはグラフィックス処理独特の記述方法となっており、学習のハードルはそれなりに高いものになっています。 今回紹介するjCanvasは、HTML5 Canvasの機
Mozilla Labs : TogetherJS
Collaboration made easy. Add real time collaboration features to your website today! Get Started TogetherJS is a free, open source JavaScript library by Mozilla that adds collaboration features and tools to your website. By adding TogetherJS to your site, your users can help each other out on a website in real time!
[JS]画像を用意しなくていいから簡単！クリッカブルに対応した日本の都道府県の地図を表示するスクリプト -Japan Map
デモページ 2 Japan Mapの使い方 Step 1: 外部ファイル jquery.jsと当スクリプトを外部ファイルとして記述します。 <head> ... <script src="https://code.jquery.com/jquery-2.1.1.js"></script> <script src="jquery.japan-map.min.js"></script> </head> Step 2: HTML 日本地図を配置するdivをセットします。 <body> ... <div id="map-container"></div> ... </body> Step 3: JavaScript jQueryのセレクタで配置する場所を指定し、スクリプトを実行します。 <script> $(function(){ $("#map-container").japanMap({ on
米Microsoft、JavaScript向けのアプリケーションフレームワーク「WinJS」をオープンソース化 | OSDN Magazine
米Microsoftは4月3日、JavaScriptライブラリ「Windows Library for JavaScript（WinJS）」をオープンソースで公開した。元々は「Windows 8」向けに用意したもので、開発者はHTML/CSS/JavaScriptを利用してWebや非Windowsデバイス向けにもWindows風の見栄えを持つアプリケーションを開発できるという。 Windows Library for JavaScript（WinJS）はMicrosoftがWindows 8に向けて作成したライブラリで、Windows Storeアプリを容易にすることを目的に開発された。開発者はHTML、CSS、JavaScriptといったWeb技術を利用しつつ、ネイティブ並みの体験を提供するWindows Runtimeアプリを開発できるという。 ページ制御、データバンディングなどの機能
2行追加するだけでWebサイトを高速化するInstantClick.io - atskimura-memo
Before visitors click on a link, they hover over that link. Between these two events, 200 ms to 300 ms usually pass by (test yourself here). 引用：InstantClick — JS library to make your website instant リンクにマウスオーバーしてからクリックするまでには200msから300msほど時間がかかるそうです。実際このテストページでクリックしてみるとMacのトラックパッドだとさらに遅く500msくらいかかってました。 InstantClick.ioはその間に裏でリンク先ページをロードして勝手にリンクをpjax化してしまうという高速化ライブラリです。 やってることはRails4のturbolinksと似てます
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://qiita.com/hp0me/items/1c8d099bacbb5e068081
GitHub - metafizzy/infinite-scroll: 📜 Automatically add next page
