どんどん簡単になっていく！最近見かけるアニメーションを伴ったさまざまなUIが実装できるスクリプト -LayerJS
アイコンをクリック・タップすると横からスライドして表示されるナビゲーション、サムネイルをタップするとズームして次のコンテンツを表示、今までとは異なるうるさくないパララックスエフェクト、ほかにもスライダーやアコーディオンやモーダルなど。 最近のWebページやスマホアプリでよく見かけるアニメーションを伴ったさまざまなUIが簡単に実装できる超軽量スクリプトを紹介します。 他のスクリプトやスタイルシートに依存はなく、React、VueJS、Angular、jQueryなどと一緒に利用することもできます。 ユニバーサル スライダー、ポップアップ、アコーディオン、メニュー、パララックス、ジャスチャーなど、さまざまなUIパターンを簡単に実装できます。 ピュアHTML HTMLのdata属性を使用して、インターフェイスをレイアウトし、インタラクションを定義します。 互換性 React、VueJS、Angu
[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
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と似てます
Bootstrap Admin Theme - Bootstrap3に対応した管理画面テンプレート
これは知っておいて損はないでしょう！ Bootstrapの便利な使いどころとして管理画面があります。管理画面は限られた関係者しか使いませんのでBootstrap臭がしても気にすることはありません。それなりの表示がすぐに実現できるのは使い勝手を向上します。 しかしそんな適当な範囲を超えて実用性のある管理画面を実現できるBootstrapテンプレートがBootstrap Admin Themeです。Bootstarp 3系に対応していますので最新のウィジェットもばりばり使えるでしょう。 Bootstrap Admin Themeの主なページとしては、 ログイン ダッシュボード カレンダー グラフ ボタン/アイコン WYSIWYGエディタ フォーム/ウィザード テーブル その他ウィジェット が用意されています。これだけあれば後は組み合わせるだけで（Bootstrap本来の機能も使いつつ）リッチな
HTML5のAPIでブラウザでのファイルアップロードをレジューム可能にする「Resumable.js」:phpspot開発日誌
Resumable.js, JavaScript magic for simultaneous, stable and resumable uploads HTML5のAPIでブラウザでのファイルアップロードをレジューム可能にする「Resumable.js」。 単体のファイルだけではなく、複数のファイルアップロードにも対応しているみたい。 大きなファイルをアップロードする必要のあるようなサイトを作る場合に使えそうですね。 関連エントリ ドラッグ＆ドロップでアップロードが簡単実現できるjQueryプラグイン「Dropzone.js」 DropBoxからファイルアップロードをする＆切り取って保存するデモ POSTやファイルアップロード等がPHPから簡単に行えるHTTPライブラリ「Unirest」
Introducing TogetherJS – Mozilla Hacks - the Web developer blog
What is TogetherJS? We’d like to introduce TogetherJS, a real-time collaboration tool out of Mozilla Labs. TogetherJS is a service you add to an existing website to add real-time collaboration features. Using the tool two or more visitors on a website or web application can see each other’s mouse/cursor position, clicks, track each other’s browsing, edit forms together, watch videos together, and
マイクロソフトがテストツール「BrowserSwarm」発表
テスト結果はInternet Explorer（IE）、Google Chrome、Firefox、Safari、OperaなどのWebブラウザのバージョンごとに合格率が表示される。テストに合格した項目と不合格だった項目は別々に参照でき、修正が必要な個所がすぐに分かるようになっている。 BrowserSwarmのプロジェクトは、jQueryライブラリの開発などに参加しているappendTo、クラウドベースのテスト用プラットフォームを提供するSauce Labs、マイクロソフトのInternet Explorer（IE）チームが協力して手掛けている。 IEチームは「質の高いフレームワークは現代のWebの基盤であるにもかかわらず、さまざまな端末やWebブラウザで横断的なテストができるリソースはあまり存在していなかった。BrowserSwarmでは相互運用性を備えたフレームワークの構築を支援する
テーブルの情報をJSON化·Table-to-JSON MOONGIFT
Table-to-JSONはjQuery/JavaScript製のオープンソース・ソフトウェア（MIT License）です。 先日、JSONからテーブルを自動生成するTablerを紹介しましたが、今回はその逆です。テーブルタグからJSONを生成するTable-to-JSONを紹介します。 デモのテーブルです。Convertボタンを押します。 ダイアログが表示されます。確かにJSONデータで取り出せています。 Table-to-JSONではオプションとして指定したカラムを省く（またはそれだけにする）ことや、非表示な行は省くといった指定ができます。テーブルタグのデータを再利用する際に役立つのではないでしょうか。 MOONGIFTはこう見る Table-to-JSONの面白い点としては任意のテーブルに対して使える点です。うまく使えばテーブルのデータをJSONとして扱いやすく取得できます。この手
jquery小技まとめ３２
作成：2013/07/1 更新：2014/11/01 Web制作 > 先日ECサイトを制作したときに、動きのあるサイトにしないといけなかったので、色々調べて組み込んでみたんですが、jQueryでもう何でも出来ちゃいますね。近い将来ローカルで画像なんかを編集しなくても、ブラウザだけで色々できるようになるんじゃないでしょうか。今回は定番からちょっとマイナー（Google Analytics関係とか）なものまでjQueryの小技、プラグインを集めさせていただきました。 エンジニア速報は Twitter の@commteで配信しています。 もくじ スクロール １．ページ内リンク／フッターまわり／トップに戻る ２．パララックス スライド ３．カルーセル ４．レスポンシブなスライダー ５．ヌルヌルサクサクなスライドメニュー ６．サムネイル付きクロスフェードスライドショー 補助 ７．Google Ana
Not Found |ミレスポ！ - Millennials Sports Marketing
横浜F・マリノスユース同期6人による新たな挑戦「ROOTS.」。新時代に適応するアスリートに必要な素質とは。
工業製品風の出力をWebに·Industrial.js MOONGIFT
Industrial.jsは体温計やタンクなどでの進捗表示ができるライブラリです。 処理の進捗を表すのにプログレスバーがよく使われますが、今回はメータグラフを使った手法を紹介します。利用するライブラリはIndustrial.jsです。 メーター表示です。液体や温度計風で面白いです。 その他LED、電光掲示板風もあります。 Industrial.jsではタンク、温度計、LED、電光掲示板、ゲージと種類が用意されています。いわゆる工業系の計測機器、出力機器を模しています。それぞれJavaScriptで指定するだけで使えるので手軽です。素材などを用意する必要もないので、プログレスバーの代わりに適用することも考えられるでしょう。 Industrial.jsはJavaScript製、MIT Licenseのオープンソース・ソフトウェアです。 MOONGIFTはこう見る リアル、ネットに限らず顧客がい
HTML/CSS/JavaScriptを編集してその場で結果確認·Editr MOONGIFT
EditrはWeb上でHTML/CSS/JavaScriptを編集して結果を確認できるサービスです。 最近、Jsdo.itのようにWeb上でコードを書いてその結果を確認できるサービスの人気があります。そのオープンソース版とでも言うべきなのがEditrです。 結果ページ。 JavaScriptの編集を行えます。 こちらはスタイルシート。 HTML。この3つを組み合わせて結果ページになります。 複数のHTMLを切り替えられます。 EditrはHTML/CSS/JavaScriptをWeb上で記述して、その結果もオンラインで確認ができます。ちょっとしたコードを試したり、一部の機能だけを取り出して遊んでみると言った時に使えそうです。 EditrはJavaScript製のオープンソース・ソフトウェア（MIT License）です。 MOONGIFTはこう見る プレイグラウンド的なサービスは特にWeb
HTML5のCanvasでつくるダイナミックな表現―CreateJSを使う 記事一覧 | gihyo.jp
運営元のロゴ Copyright © 2007-2025 All Rights Reserved by Gijutsu-Hyoron Co., Ltd. ページ内容の全部あるいは一部を無断で利用することを禁止します。個別にライセンスが設定されている記事等はそのライセンスに従います。
Highcharts - Interactive Charting Library for Developers
Our core library. Includes all standard chart types and more.
なんと！JavaScriptだけでテキスト読み上げ·Speak.js MOONGIFT
Speak.jsはJavaScriptだけでテキストを読み上げるソフトウェアです。 Webブラウザで音声ファイルを指定してJavaScriptで解析、なんてソフトウェアもありますが今回は一から“音声”を生み出してしまう驚きのソフトウェア、Speak.jsを紹介します。 ボタンを押すとHello Worldと話します。 こんな感じで任意の言葉を話させることもできます。 Speak.jsはジェネレータを通じて音声を動的に生み出します。対応しているのは英数字のみとなっており、日本語には対応していません。常に動的に生成しているので自由なテキストを読み上げさせることができます。 Speak.jsはJavaScript製のオープンソース・ソフトウェア（GPL）です。 MOONGIFTはこう見る テキストを外部サーバに送って、それを音声ファイルにして返すAPIも世の中にはあります。当然、こちらの方が英語
データ可視化のためのグラフ描画JavaScriptライブラリ20選 | ゆっくりと…
SixRevisionsでオンラインでグラフを描画する場合に活躍しそうなJavaScriptライブラリの特集がありましたので、紹介します。個人サイトではあまり役に立たないかもしれませんが、観ているだけで楽しくなります。元記事に敬意を表し、なるべく趣旨が異ならずかつ変な日本語にならないよう心がけたつもりですが、訳に間違えがありましたら容赦願います。 2010年1月17日 by Jacob Gube 退屈な数値データを美麗かつインタラクティブに解り易く可視化するためのJavaScriptライブラリは数多くあります。通常はHTMLテーブルで表現するデータを、JavaScriptを使って可視化し美しく見せる事ができればあなたのデータはアクセシビリティーの優れたものとなるでしょう。私は2008年にデータのグラフ化＆チャート化のためのJavaScriptを書き上げましたが、今回再び単なるデータに生命を
アニメーションするゲージを作れるJavaScriptライブラリ『JustGage』 | 100SHIKI
いつか使いそうなのでメモ的にエントリー。 JavaScriptでアニメーションするゲージを作れるのがJustGageだ。 ちょっとしたダッシュボードなどに使えていいのではなかろうか。 もちろん色やアニメーション速度もカスタマイズすることができる。 マークアップも簡単なので覚えておいてもいいですな。
Backbone.js
Backbone's only hard dependency is Underscore.js ( >= 1.8.3). For RESTful persistence and DOM manipulation with Backbone.View, include jQuery ( >= 1.11.0). (Mimics of the Underscore and jQuery APIs, such as Lodash and Zepto, will also tend to work, with varying degrees of compatibility.) Getting Started When working on a web application that involves a lot of JavaScript, one of the first things yo
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://qiita.com/hp0me/items/1c8d099bacbb5e068081
正しいクレジットカードの入力フォームを提供『Creditcard.js』 | 100SHIKI
