株式会社LIG TEL : 03-6240-1253 111-0056 東京都台東区小島2-20-11 LIGビル 1F受付
CSS3・JS・jQueryなど、フロントエンドでアニメーションを実装する方法 | LIG LIBRARY | 株式会社LIG
株式会社LIG TEL : 03-6240-1253 111-0056 東京都台東区小島2-20-11 LIGビル 1F受付
Vanilla JS
Vanilla JS is a fast, lightweight, cross-platform framework for building incredible, powerful JavaScript applications. Introduction The Vanilla JS team maintains every byte of code in the framework and works hard each day to make sure it is small and intuitive. Who's using Vanilla JS? Glad you asked! Here are a few: FacebookGoogleYouTubeYahooWikipediaWindows LiveTwitterAmazonLinkedInMSN eBayMicros
[JS]日本語もOK、行単位でスタイルを適用できるようにするスクリプト -Lining.js
demo 5 一行ごとにさまざまなアニメーションで表示します。 「rolling」のエフェクトかっこいいです。 Lining.jsの使い方 Step 1: 外部ファイル 当スクリプトを外部ファイルとして記述します。 <head> ... <script src="build/lining.min.js"></script> </head> デモにあるエフェクトを使用する時は、エフェクト用のスクリプトも加えます。 <head> ... <script src="build/lining.min.js"></script> <script src="build/lining.effect.min.js"></script> </head> Step 2: HTML 適用する要素に「data-lining」を加えます。 <p class="poem" data-lining>洋酒といえば、誰でも
![[JS]日本語もOK、行単位でスタイルを適用できるようにするスクリプト -Lining.js](https://cdn-ak-scissors.b.st-hatena.com/image/square/94a5e0fe3568ecb41b259e96c1bc62f0c1f09601/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201404%2F2014112501-01.png)
米Yahoo!、国際化対応の日付、小数点、メッセージなどをアプリに組み込めるJavaScriptライブラリ「Format.JS」、オープンソースで公開。
米Yahoo!は、JavaScriptで開発するアプリケーションを国際化対応にするためのJavaScriptライブラリ「Format.JS」をオープンソースで公開しました。 アプリケーションの国際化では、表示されるメッセージを多言語対応するだけでなく、例えば小数点の表記が日本で一般的な「100.01」のようなピリオドではなく「100,01」のようにカンマを使うケースや、日付の表記に「2014/10/27」と年/月/日だけでなく月/日/年や日/月/年の順に鳴るケースなど、表記にさまざまなパターンが必要となります。 Format.JSは、多言語に対応したメッセージの差し替えだけでなく、日付や小数点の国際化にも対応したアプリケーション国際化（i18n）のためのライブラリです。 テンプレートライブラリと統合利用 Format.JSではロケールコードを指定すると自動的に対応する表記を出力してくれます
[JS]Lightboxの進化形！クリックでもタップでも快適動作の画像を拡大表示させる超軽量スクリプト -Intense Images
サムネイル真ん中の風景写真は縦長 Intense Imagesの使い方 Step 1: 外部ファイル 当スクリプトを外部ファイルとして記述します。 ※jQueryなど他のスクリプトは必要ありません。 <head> ... <script src='../intense.js'></script> </head> Step 2: HTML 画像は2種類の配置方法があります。 img要素はサムネイルと拡大時の画像を兼用し、data-image属性は拡大時に高解像度の画像を利用することができます。 <img src="./img/awesome-source.jpg" /> <!-- OR --> <div class="anything" data-image="./img/awesome-source.jpg" /> data-imageを使用する時は、サムネイルはCSSで背景画像として指定
5分でわかるVue.jsと、jQueryで頑張ってはいけない理由｜技術ブログ｜北海道札幌市・宮城県仙台市のVR・ゲーム・システム開発 インフィニットループ
5分でわかるVue.jsと、jQueryで頑張ってはいけない理由 先日の「OpenIL vol.2」にて「5分でわかるVue.js」というLTを発表しました。 【スライド有】インフィニットループ公開勉強会「OpenIL vol.2」開催レポート 前編 【スライド有】インフィニットループ公開勉強会「OpenIL vol.2」開催レポート 後編 この記事は、その時のLTの資料を元にブログ化したものです。 jQueryは頑張れば頑張るほど辛くなる jQuery、簡単に動きのあるサイトを作れてとても便利ですよね。 // 何か画面に反映する $(".hoge").html("変更したい内容"); // 変更時に何か処理して変更する $(".foo").on("change", function() { $(".bar").html("変更したい内容"); }); イベントを受け取って、色々と処理をし
『RequireJS等はもう古い。WebPackとは？』
1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 はじめまして。 アメーバ事業本部 クロスイノベーション室のグンタ（@gunta85）と申します。 今回はフロントエンド開発用の、 ありとあらゆる依存関係を簡単に解決してくれる、 WebPackというスグレモノをご紹介します。 導入経緯大きなアプリを開発するにあたり、依存関係を解決してくれるものを探していました。 その中で、RequireJSやBrowserify、Componentなども候補に挙がりましたが、 諸々の理由でWebPackを選びました。 特徴の違いについては「WebPack vs Browserify」等で検索してみると良いかと思います
transitive.js - 路線図を生成するJavaScriptライブラリ MOONGIFT
データのビジュアル化を考えた場合、常に正確に出すのが最善とは限りません。トレンドを知りたい場合はその傾向を見るためにデータを無視したり、より特徴的なポイントに主眼を置いたりします。地図も同じです。 案内図などは正確性よりも直線や曲がり角を重視した図になっています。同様に路線図も駅の間隔や合流ポイントなどに主眼を置くでしょう。そんな分かりやすい路線図を生成できるのがtransitive.jsです。 transitive.jsの使い方 こちらがデモです。とても見やすい路線図ですね。 右側の路線をマウスオーバーすると、その路線だけがハイライト表示されます。 ズーム表示やマウスドラッグでの視点変更も可能です。 データを作るのが多少大変なように見えますが、一度作ってしまえば後はtransitive.jsが自動生成してくれるのが便利です。データ自体はデータベースに保存しておいてスクリプトで生成する形で
[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と似てます
formatter.js - ユーザストレスの軽減に。JavaScriptで入力フォーマット制御 MOONGIFT
よくある入力フォーマットに沿っていない時のエラーによるイライラが軽減しそうです。 テキストボックスを使ってユーザに入力を行ってもらうのはシンプルですが、それが指定したフォーマットに沿っているかどうかを判断するのは大変です。その結果エラーになったりするとユーザにとっても大きなストレスになります。 そこで予め決まったフォーマットに沿ってしか入力できないようにしてしまうのが良さそうです。そのためのソフトウェアがformatter.jsです。 使い方はjQueryを使う、使わないの2パターンが用意されているようです。 // jQueryを使わない方法 new Formatter(document.getElementById('credit-input'), { 'pattern': '{{9999}}-{{9999}}-{{9999}}-{{9999}}' }); // jQueryを使う方法
css-eblog.com - このウェブサイトは販売用です！ - css eblog リソースおよび情報
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
最近のJavaScript開発まとめ
こんにちは、中川です。 ここ1・2年ですが、私の担当するプロジェクトでは、 PHPよりもJavaScriptの開発が多い状態が続いております。 JSのプロジェクトを重ねるにつれ、開発環境も段々と整理されてきましたので、 一旦、最近のJS開発で利用しているライブラリやツールなどをまとめてみました。 フレームワーク ●Backbone.js http://backbonejs.org/ JavaScriptのMVCフレームワーク。 何も使わない(もしくは我流)よりは、これを使って欲しいと思えるフレームワークです。 利用者が多く日本語情報も豊富にあるのと、フレームワーク自体が1500行程度と軽量なため、学習コストを低く抑えることができます。 ●AngularJS http://angularjs.org/ データバインディングを備えたフレームワーク。 高機能なテンプレートや、DIの仕組み、ルーテ
JSでクロスブラウザの動作テストを自動化できる「DalekJS」:phpspot開発日誌
DalekJS - Automated cross browser testing with JavaScript JSでクロスブラウザの動作テストを自動化できる「DalekJS」。 テストコードをJavaScriptで記述すれば、指定したサイトを開いてスクリーンショットを撮って、指定位置をクリックして、といった具合にテストが実施できます Seleniumのような既にメジャーなツールもありますが、これもなかなか便利そうです。 node.jsベースで実装されているみたい。 関連エントリ JavaScriptのコードでPDFを生成できる「jsPDF」 ブラウザ上でRubyプログラムをJavaScriptに変換して実行できる「Opal」 JavaScriptオフ、CSSをのみで動くツールチップライブラリ「hint.css」
Bootstrapに便利な機能を追加できるjQueryプラグインまとめ
Lightbox・モーダルウインドウ関連 / Bootbox.js / Bootstrap-modal他...全17件
30以上のリッチコンポーネントが詰まったHTML5のUIライブラリ「Zebra」:phpspot開発日誌
| HTML5 Canvas Rich UI JavaScript Library 30以上のリッチコンポーネントが詰まったHTML5のUIライブラリ「Zebra」 グリッド、ツリービュー、タブ、フォーム等のリッチコンポーネントが詰まっていてスマホも対応しているUIライブラリ UIに若干クセがありますが、テーマ機能もあるので、今後に期待したいライブラリです 関連エントリ jQuery用のよく使うUIコンポーネントセット「ZinoUI」 BootstrapをベースとしたフリーのUIKit「Flat UI」 iPhoneのサイドメニュー風UIが作れるjQueryプラグイン「jPanelMenu」 ページを下に引っ張ると更新されるiPhone風UIを提供するjQueryプラグイン「Hook.js」 Bootstrapに追加で使えるjQueryベースのUIライブラリ「w2ui」 これは超使いやすい
様々なブラウザ環境に対応する為のJavaScriptライブラリ「Modernizr」
配布元：Modernizr ライセンス：MIT & BSD licenses. ModernizrはTwitterなどの大手サイトでも採用されているブラウザの機能の実装状況を調査するためのJavaScriptライブラリです。 たとえばModernizrを読み込んだサイトではhtml要素が次のように書き換えられます。 <html lang="ja" class="no-js"> ↓ <html lang="ja" class="js flexbox flexbox-legacy rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms c
【連載】Extend.jsで楽しくJavaScriptプログラミング！ - 第1回 Extend.jsのつかいかた (JavaScript,javascript,extend.js) - 株式会社あゆた
Extend.jsって？ どうも皆さんこんにちは。白石俊平と申します。 F-Questで書かせて頂く初めての技術記事として、今回はExtend.jsと言うフレームワークのご紹介をしたいと思います。 Extend.jsは、軽量なJavaScriptライブラリで、先日公開したばかりの新しいプロダクトです。 現在のバージョンは0.8で、今後は1.0のリリースに向けて、テストやドキュメントの整備を行っていく段階です。 ライセンスは制限の緩いMITライセンスなので、商用利用も自由に行えます。ディスカッション用のGoogleグループはこちらになります。 Extend.jsの目的は、JavaScriptでよく利用されるユーティリティ関数をコンパクトにまとめたライブラリを提供する事です。JavaScriptプログラミングをある程度経験した事のある方なら、頻出する処理をまとめた自作のライブラリ（common
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
alertの代替手段を提供するSweetAlert
JavaScriptユーティリティライブラリの紹介
