parallax.js
WOW, that's deep man! parallax.js reacts to the orientation of your smart device, offsetting layers depending on their depth within a scene... Oh, you don't have a smart device? No worries, if no gyroscope or motion detection hardware is available, parallax.js uses the position of your cursor instead. Radical. This project is a collaboration between Matthew Wagerfield & Claudio Guglieri.
AngularJSに触れてみる その1
AngularJSはGoogle社が開発しているJavaScriptのMVCフレームワークです。Webの技術を使うMonacaでももちろん使うことができます。また、jQueryなどの他のライブラリと併用することもできます。MVCとはModel(モデル)、View(ビュー)、Controller(コントローラー)の略称でありそれぞれのコンポーネントにアプリケーション中の役割を分割する思想、手法です。 Model:アプリケーション内で使うデータ構造。 View:マークアップなどアプリケーションのユーザーの実際に目にするもの。 Controller:アプリ内で使うデータを操作するコンポーネントであり、ModelとViewを操作するもの。 AngularJSのMVCに関して本家ドキュメントへのリンクを貼っておきますので、詳しくはこちらを参照してください。 Model View Controller
Canvasできれいな色相環を描画する : document
8月14 Canvasできれいな色相環を描画する はじめに JavaScript で Canvas を使っていると、HSV の Color Picker とか作りたくなって色相環を描画したくなることがよくあるとおもいます。 ここでは、自分の行っている色相環の描画方法を説明します。 準備 色相を扱うのために HSV 色空間を使います。HSV から RGB への変換は以下の function を用います。 function hsvToRGB(hue, saturation, value) { var hi; var f; var p; var q; var t; while (hue < 0) { hue += 360; } hue = hue % 360; saturation = saturation < 0 ? 0 : saturation > 1 ? 1 : saturation; v
require.js 環境で mocha + expect + testem を使った JavaScript テスト - naoyaのはてなダイアリー
先日書いた自分用アプリケーションのひな形 http://d.hatena.ne.jp/naoya/20130503/1367581629 http://d.hatena.ne.jp/naoya/20130504/1367640512 これに、JavaScript のテスト環境も追加したい。 結論からいくと、フレームワークには mocha + expect、ランナーは testem を使うことにした。ついでにテストダブルライブラリとして Sinon.js も有効にした。 ちなみに今回の文脈は End to End のテストではなくてユニットテスト周りのおはなしです。 mocha + expect JavaScript のこの辺のテスト周りは今もいろいろなツールの整備が進んでいて、今回採用した以外にも Jasmin や QUnit そのほか色んな物がある。昨今の状況に関しては 先日の HTML
マイクロテンプレートエンジン jQuery Tempura | それなりブログ
jQuery Tempura は jQuery 依存の簡単な Templating Engine です。 この記事のものや jQeury Plugin Registry などを調べたのですが、 自分の要望を満たすものが無いので、オレオレにしちゃいました。 普通のHTMLファイルの上から、正しいHTMLを維持したまま使える {{foo}} や <%= foo %> といったテンプレ変数を埋め込まなくて良い。AngularJS のようにHTML属性値でテンプレ変数とリンクする。 これは一言で言えば「HTMLがまんま残るのは良いことだ」という利点であるが、「別のテンプレートエンジンと併用が可能」という側面もある。 必要な部分だけを更新する 更新の度に、テンプレ全体を再生成しない。 テンプレ変数が足りなくても空白になったりしない、前の状態が残る。 なので、イベントハンドラを生かし易い。大体のケース
WebCrypto APIのJavaScript実装·PolyCrypt MOONGIFT
PolyCryptはJavaScript製、BSD Licenseのオープンソース・ソフトウェアです。 HTML5で策定が進んでいる仕様の一つにWebCrypto APIがあります。これはWebブラウザの標準機能として暗号化を提供するものです。しかし実際に実現するにはまだしばらく時間がかかるでしょう。そこで使ってみたいのがPolyCryptです。 デモです。入力と暗号化しての出力、そして復号化が行われています。 SHA-256のハッシュ値を算出するデモです。 メールアドレスとパスワードを指定して、PEM/P12の証明書を出力するデモです。 ダウンロードするとちゃんと証明書になっています。 PolyCryptはWebCrypto APIのJavaScript実装です。Androidのデフォルトブラウザ、Opera Mini、IE10未満では動作しませんのでご注意ください。先進的な機能を先んじ
3つのMVC系人気フレームワーク、Backbone.js／AngularJS／Knockout.js ［スライド＆動画］
それぞれのJavaScriptフレームワークに詳しい3人の講師が、30分ずつ、フレームの概要や基本的な使い方を紹介。その後の10分ほどで、それぞれの講師への質疑応答や、それぞれのフレームワークの機能比較や意見交換を行うパネルディスカッションを実施。 ［Backbone.js］LINE株式会社 開発１室 UITチーム 清水 大輔 ［AngularJS］金井 健一（AngularJS Japan User Group 管理人） ［Knockout.js］沢渡 真雪 ［質疑応答＆パネル・ディスカッションのモデレーター］グレープシティ株式会社 八巻 雄哉 ← 前回 連載 INDEX 次回 → 6月8日（土曜日）に開催したセミナー「第1回 Build Insider OFFLINE」のRoom A 14:35～16:30のセッション動画（115分）とスライドを視聴・閲覧できます（映像上ではスライドの
数行加えるだけでパララックススクロールを実装できるチュートリアル | コリス
実装は簡単です。 既存のページにもこれなら簡単に組み込めると思います。 HTML パララックススクロール用の背景を配置するために先頭に空のdiv要素を加え、あとのコンテンツは普通に実装します。 <div class="background"></div> <div class="wrapper"> <h1 class="pageTitle">見出しLv1</h1> <h2 class="pageSubTitle">見出しLv2</h2> <p>パラグラフ</p> <p>パラグラフ</p> <p>パラグラフ</p> </div> <div class="slogan"> <h2 class="sloganTitle"> Parallax scrolling </h2> </div> <div class="wrapper"> <h1 class="pageTitle">見出しLv1</h1>
JavaScriptエラーを表示・確認する方法のまとめ
JavaScriptエラーを表示・確認する方法をまとめました。 １．はじめに ブラウザでページを表示したときに正しく表示されない、あるいはjQueryで設置したパーツなどが動作しない場合、JavaScriptエラーが発生している可能性があります。 JavaScriptエラーが発生しているかどうかを確認するためにはエラーを表示するためのコンソールを開く必要がありますが、コンソールの開き方が分からなかったり、ブラウザで操作方法も異なります。 このエントリーでは、以下のブラウザを対象にしてJavaScriptエラーの表示・確認方法を解説します。 Google Chrome Firefox IE ビギナーの方向けの内容です。 ２．エラーになるJavaScriptのサンプル エラーになるJavaScriptのサンプルとして、次のサンプルを用いて解説します。このJavaScriptを実行するとシンタッ
スライドショーのようなページが作れるjQueryプラグイン「ScrollIt.js」:phpspot開発日誌
ScrollIt.js by @ChrisPolis スライドショーのようなページが作れるjQueryプラグイン「ScrollIt.js」 ↑↓キーでページがスクロールし、かつナビゲーションメニューも備えたようなページが作れます 何らかの製品等の紹介サイトを１ページでサクっと作りたい場合に使いやすく、分かりやすいページが作れて便利かも ページごとダイナミックに切り替わるあたりもクールでモダン。 関連エントリ 縦方向にスクロールするクールなティッカーを実装できるjQueryプラグイン「vTicker」 アニメーションスクロールをデフォルト化できるjQueryプラグイン「Scroll To」 スクロールすると上に固定される一見普通のナビゲーション実装jQueryプラグイン「SMINT」 どんなリストも横スクロールさせられるjQueryプラグイン「any list scroller」 スクロール
WebKit系ブラウザ（Chrome／Safari）で両端揃えはできないの？jQueryで検証してみた | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。カートン買いでライターが溜まっているライターの内藤です。 先日、とある案件で「pタグの部分、両端揃えした方がきれいに見えない？」という話が出て、FirefoxとIE10は問題なかったのですが、WebKit系（ChromeとSafari）が対応していないことに今更気づき、何とかできないものかと思ったのがこの記事の経緯です。 具体的には、 text-align: justify; text-justify: inter-ideograph;（IE用） がWebKit系だと綺麗に見えないぜ！ということです。 目次 ブラウザによる両端揃えの見え方の違い 参考になったjQueryコード slabTextとFitText WP slabText 試してみた 研究してみた 自作の幅調整jQueryとその解説 プロトタイプ1 プロトタイプ2 この問題の最新事情 まとめ ブラウザによる両端揃えの
もっと読む、を簡単に実装できるjQueryプラグイン「Readmore.js」:phpspot開発日誌
もっと読む、を簡単に実装できるjQueryプラグイン「Readmore.js」 2013年07月22日- Readmore.js: jQuery plugin for long blocks of text もっと読む、を簡単に実装できるjQueryプラグイン「Readmore.js」。 ブログ等でよくある、「ReadMore」。クリックすることで全文が見れるような物ですが、サーバサイドでやるとリロードが必要。 jQueryで$(element).readmore() ってやればすぐにテキストを短くしてくれるところが便利そうです。 クリック時のアニメーションなんかもできます。地味だけど便利ですね 関連エントリ selectをカッコよくしてくれるjQueryプラグイン「Minimalect」 タブ切り替え時のエフェクトがクールなタブUI実装jQueryプラグイン「Tabulous.js」 サ
JavaScriptによる小数計算の誤差を無くす
ファッ！？ 0.1kg痩せたはずが、0kgと表示されてしまいました。 たかだか100gとはいえ、こんな表示になったらガックリきますね。 一行ずつ値を追っていくとわかるのですが、4行目で減算した時点でdiffの値が "0.09999999999999432" とズレてしまっています。 これはJavaScriptがIEEE 754という規格に従って実装されているためです。 つまり、この計算結果はJavaScriptの仕様なのでJavaScript的には正しい値であり、避けようがありません。 このIEEE 754と小数計算の誤差についての関係は下記のURLの解説が分かりやすくオススメです。 http://pc.nikkeibp.co.jp/pc21/special/gosa/eg4.shtml これの対処法として、小数値に10^Nの数値をかけて整数値にしてから計算してしまおう！ といった対処法を
ピアノロールを使ってWeb上で音楽を奏でよう·PianoRoll.js MOONGIFT
PianoRoll.jsはJavaScript製のソフトウェア（ソースコードは公開されていますがライセンスは明記されていません）です。 Web上で音楽を作る方法は幾つかありますが、今回はPianoRoll.jsを紹介します。いわゆるピアノロールを使ってマルチトラックの音楽を作成できます。 Firefoxで試しています。Google Chromeでは音符部分が表示されませんでした。 音符の記号を選んで、ピアノロールに描画します。 トラックを変更してピアノ以外の音を出す事もできます。再生時には全て一斉に再生されます。 試した感じでは同じトラックの音を同時に奏でる事ができませんでした。しかし他のトラックの音は流せるので音楽の幅が広がりそうです。ぜひ創作活動に励んでください。 MOONGIFTはこう見る 何となくですがピアノロールの方が楽譜に書くよりも直感的に音楽の創作ができる気がします。幾つか適
Angular.jsでDeferredしたくて頑張ってみたらcss animationが綺麗に書けた - Qiita
myDeferredA = (state) -> deferred = $q.defer() successMsg = 'Success!' errorMsg = 'Error!' setTimeout( -> $scope.$apply -> if state == 0 deferred.resolve successMsg else deferred.reject errorMsg , 3000) deferred.promise promiseA = myDeferredA(Math.random()*2|0) promiseA.then (msg) -> console.log "success: #{msg}" , (msg) -> console.log "error: #{msg}" 非同期処理の場合Viewの更新が必要になるので、 $scope.$applyの中でdefer
Canvasで超可愛いグラフが作れる！「Chart.js」の紹介 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。デザイナーのハルエです。 最近ちょくちょくグラフを用いた制作物に関わることがあり、案件によってはエンジニアさんにお願いしたりIllustratorのグラフツールで作ったりしていたのですが、なんやかんやで時間とられちゃうんですよね。で、もっとこうオシャレでスマートにさくっとハイテンションで作れるものはないかと探してみました。 そこで見つけたのがこれ。「Chart.js」。 めちゃくちゃ愛くるしい動きをしてくれます。デザインもフラットでいい！ ポートフォリオやプレゼンなんかにもきっと役立ちますよ。 Chart.jsとは？ 折れ線グラフ、棒グラフ、円グラフ、レーダーチャートなど、6種類のグラフが簡単に描けてしまうJavascriptのライブラリです。 HTML5のCanvasを使って描画され、表示の際の気持ちいいアニメーションの動きが特徴的です。とても分かりやすいマークアップなので、
最近のJavaScript開発まとめ
こんにちは、中川です。 ここ1・2年ですが、私の担当するプロジェクトでは、 PHPよりもJavaScriptの開発が多い状態が続いております。 JSのプロジェクトを重ねるにつれ、開発環境も段々と整理されてきましたので、 一旦、最近のJS開発で利用しているライブラリやツールなどをまとめてみました。 フレームワーク ●Backbone.js http://backbonejs.org/ JavaScriptのMVCフレームワーク。 何も使わない(もしくは我流)よりは、これを使って欲しいと思えるフレームワークです。 利用者が多く日本語情報も豊富にあるのと、フレームワーク自体が1500行程度と軽量なため、学習コストを低く抑えることができます。 ●AngularJS http://angularjs.org/ データバインディングを備えたフレームワーク。 高機能なテンプレートや、DIの仕組み、ルーテ
軽量JSONパーサー『jq』のドキュメント：『jq Manual』をざっくり日本語訳してみました | DevelopersIO
jq Manual jqで簡単JSON加工 ｜ Developers.IO jqコマンドが実は高性能すぎてビビッた話 - beatsync.net JSONを超絶に読みやすくする jq コマンド - WebAPIバリバリ使うor開発する人必須 CLIでJSONの整形をする - ( ꒪⌓꒪) ゆるよろ日記 JSON形式の情報を様々な条件や書式として成形、フィルタリングツール『jq』。上記関連エントリで私もこのツールの存在を知る事になったのですが、ツールの簡易さ・便利さに感動しながら私もちょくちょく利用させてもらっています。 そこでこのエントリでは、jq公式ページに展開されている利用ガイド・リファレンス的な位置付けの『jq Manual』を写経がてらざっくり日本語訳してみました。ざっくり訳なのでこの部分の訳おかしい・間違ってる等ありましたら御指摘頂けると幸いです。例示されているサンプルコードも
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Facebookのようなサイトツアーを実装できるjQueryプラグイン5選
startapp.jp
