JSで通知ポップアップを出すライブラリ「PNotify」をご紹介。 サイト内でアラートや通知を表示する際に、画面の隅に表示する今時のライブラリです。 ↑デザインは色や画像の追加など簡単に出来るようになっているので、サイトに合わせて設定しやすくなっています。 スタイルはBootstrap / jQuery UIを組み合わせて簡単に組み込めるようになっています。 興味のある方は下のリンクからデモをご確認ください＾＾

お正月の間だけコンテンツを切り替えたいという相談があったので、JavaScriptで簡単にやる方法をメモしておきます。 企業サイトで年始に”謹賀新年”という表示をしたいという相談を受けたのですが、一般的にはお休みなので更新作業は出来ないですよね。 そんな時に使えるJavaScriptをご紹介します。 更新したいコンテンツの箇所にJavaScriptを挿入すればOKです。 日付と表示するコンテンツは適時変更してください。 /*****************************************************/ //指定期間にコンテンツを切り替えるJavascript /**設定項目 ******************************************/ //----開始日 YYYY/M/D 形式 半角数字で開始日指定 myStartDate="2013/

色情報をフォームに入力する際に、ピッカーがポップアップして 簡単に指定する事が可能になります。 テキストエリアの背景が指定の色になるので、見た目にも分かりやすく出来ています。 使い方はとっても簡単で、 JSを読み込んでテキストエリアにclassを指定するだけになっていました。 <script type="text/javascript" src="jscolor.js"></script> <input class="color" value="66ff00"> 対応ブラウザもIE6やFF2からiPhoneのSafariまで、クロスブラウザ対応されています。 詳細&ダウンロードは下のリンクからどうぞ〜。

HTML5に対応しているブラウザであれば、再生、一時停止、停止、ボリュームコントロールのようなアクションを制御する事ができるようになります。 それ以外にも、オーディオのループや再生時間の取得、イベントの取得などなど、 色々なAPIが用意されています。 対応しているファイル形式 ファイル形式はOgg、Mp3、Wav、Aacの４種類に対応しているようです。 音声の再生には以前はFlashが必須でしたが、こういったライブラリで手軽に設置できるようになって来たのが嬉しいですね。 ブラウザによっては動作しないものもあるようですが、 フェードイン/フェードアウトも実装されていました。 デモも非常に面白いサイトに出来上がっていました。 こういった便利なライブラリは覚えておくといつか使えそうです。 詳細&ダウンロードは下のリンクからどうぞ。

ブラウザの互換性を気にせずDOM操作やアニメーション、クッキーを操作したい際に使えるJavaScript「flow.js」をご紹介。 最近ではjQueryオンリーのような気もしますが、いろいろと機能を追加しようとして複数のプラグインを導入すると、だんだん動作が重くなってきます。 なるべく軽量のものが使いたい際の選択肢の一つとして覚えておくために自分用メモです。 まだ試してはいないのですがIE6やSafari2などのモダンブラウザでも動くようなので、なかなか良さそうです。 以下のような機能があるとの事。 DOM Level 3の API操作 アニメーション処理 クッキー管理 フォーム管理の簡素化 XMLHttpRequestのクロスブラウザ対応 ブラウザにはそれぞれ癖があるので、こういったライブラリを使用して間違いや非サポートの処理をしないようにしたいですね。 サンプル class属性にch

最近スマートフォン対応やタブレット対応の案件が増えてきて、スワイプに対応させたいと言われる事が結構多いです。 知ってる人も居るかもしれませんが、スワイプが出来るようになるjQueryプラグインをまとめてみました。 画像ギャラリー専用のものから、ページ全体をスワイプで区切るものまで色々ありますよ。 参考になれば幸いです。 jQuery Touchwipe iPhone、iPad、Android用にスワイプでスライドショーを移動できます。 スワイプした時のイベントが簡単に取得できるので、画像切替意外にも色々使えそう。 PCの場合には、アンカーテキストで画像の切替ができます。 サイズも1kB程度なので、モバイル端末に優しいですね。 PhotoSwipe jQuery Mobile対応の全画面イメージギャラリー。 写真を大きく表示させて、ツールバーで操作するタイプです。 jquery.flicks

「jQuery-URL-Parser」を使うと、URLを分解して簡単に値を取得できますよ。 使い方はこんな感じです。 var url = $.url('http://example.com/folder/index.php?item=value'); url.param('item'); こうするとクエリーのitemの値”value”が取得できるというわけです。 他にもホスト名やディレクトリ,#以降のアンカーの値も取得できますよ。 これはいいかも。 詳細＆ダウンロードは以下からどうぞ。

JavaScriptの使い方から、セレクターの使い方、プラグインの作り方などが詳細に説明されていますよ。 これから勉強する人からバリバリ使っている人まで、ひと通り読んでおくと良さそうです。 var foo = 'hello'; var sayHello = function() { console.log(foo); }; sayHello(); // logs 'hello' console.log(foo); // also logs 'hello' ↑スコープの使い方 $('p').click(function() { console.log('click'); }); ↑イベントの使い方 (function($){ $.fn.showLinkLocation = function() { return this.filter('a').each(function(){ $(this

iPhone/Androidアプリで大人気のAngry Birdsがブラウザで遊べるようになったようです！ Angry Birds 知らなかったので、メモメモ。 JavaScriptだけでヌルヌル動くようになっているのがすごい！ ちょっとマシンスペックが必要かもしれません。 面白いので、ぜひ遊んで見てください！

テキストにマウスオーバーした際に、エフェクトで遊べる「Lettering.js」面白かったのでご紹介。 jQueryプラグインとして実装されており、テキストをカラフルにしたり、文字をなめらかにスライドさせたりする演出をしてくれます。 デモ デザインブログのCodropsにて、Lettering.jsを使ったサンプルが紹介されています。 テキストにマウスオーバーすると、タイポグラフィが切り替わる演出が作り込まれています。 デモ チュートリアル 公式サイトに色々なギャラリーあり プラグインの公式サイトには、実際に使用しているサイトが紹介されています。 テキストを雪のように降らせたりするサイトがあって面白かったです。 Happy Holidays from Typek アイデアしだいで色々使えそうですね。 ダウンロードは下のリンクからどうぞ。

特定の用途だけに特化したフレームワークが必要な場合、シンプルなもので良いのではないだろうか。 「microjs」では、DOM構築後のタイミングで処理を実行したいだけのフレームワークやBase64処理をするだけの物、ブラウザ判別するだけの物など、 ちょっとした時に使えるフレームワークが50以上揃っています。 以下にいくつか気になった物をご紹介。 domReady DOM構築後のタイミングで処理を実行場合に使えます。0.2KB。 domReady(function () { // dom is loaded! }); Base64.js Base64処理ができます。0.9KB。 Bowser ブラウザ判別したい時に。0.2KB。 if (bowser().msie && bowser().version <= 6) { alert('hello China'); } Micro-Templat

これはちょっと使いたいかも。Canvasを手軽に扱えるライブラリです。 iPhone,iPad,Androidで動くように最適化されているので、スマートフォン用のHTMLアプリを作る際に便利ですね。 コードは以下にご紹介。 var interval_1=0; function startShow() { var r = Math.floor(Math.random() * (254)); var g = Math.floor(Math.random() * (254)); var b = Math.floor(Math.random() * (254)); var x = Math.floor(Math.random() * (439)); var y = Math.floor(Math.random() * (554)); fillStyle = "rgba("+r+", "+g+",

JavaScriptでは厳密にはオブジェクト指向をサポートしていませんが、プロトタイプ・ベースのオブジェクト指向を使う事でClassを定義する事が可能です。 しかし、毎回自前で実装するには大変なのでClassをサポートしてくれるライブラリを使ってみるのはいかがでしょうか。 Class.jsを使うと、まるでオブジェクト指向のような書き方で実装可能です。 以下のようなコードで実装可能になるようです。 クラスの定義 One = { message:'', set:function(val){ this.message = val; }, get:function(){ alert(this.message); } }; 使い方 var e = new Class(One); e.set('Hello, World!'); e.get(); 普段からオブジェクト指向なプログラムを書かれている方には

「gRaphael」はオープンソース製のJavaScript用グラフライブラリです。 いくつかの値を設定するだけで簡単に静的なグラフやインタラクティブなグラフを作成する事が可能です。 円グラフデモ カラーピッカーデモ 使い方も以下のように値と色の設定をするだけのようです。 // Creates canvas 320 × 200 at 10, 50 var paper = Raphael(10, 50, 320, 200); // Creates circle at x = 50, y = 40, with radius 10 var circle = paper.circle(50, 40, 10); // Sets the fill attribute of the circle to red (#f00) circle.attr("fill", "#f00"); // Sets the

「tx content assist」はテキストエリアの中に入力候補を表示させる事ができるJavaScriptです。 Googleなどで使われるサジェスト機能は便利なのですが、１行テキストの場合にしか使えていませんでした。 これをテキストエリアでも使えるようにしているので、かなり便利機能になりそうです。 試してみた所、日本語でも変換候補を表示できました。 （※ただし、単語の前にスペースが必要なようです） デモ 使い方ですが、まずはライブラリのJSとCSSを読み込みます。 <script type="text/javascript" src="content-assist.js"></script> <link rel="stylesheet" type="text/css" href="content-assist.css" media="all" /> 次にサジェストで表示させたい単語と

データのライブアップデートによるアニメーション効果もつけれるようで、オリジナルのグラフを作成する事ができます。 デモ デモ デモ データはjson形式で渡せるようです。 かなり効果的に見せる事ができそうですね。

「Slot Machine Tabs」というエントリーにて作り方が紹介されています。 タブをクリックした際にちょっとした効果を与える事ができます。 デモ javascript自体は以下のようなコードを実装するようです。 $(".box-wrapper .current .col-one").animate({ "top": 0 }, speedOne, function() { ifReadyThenReset(); }); var columnReadyCounter = 0; function ifReadyThenReset() { columnReadyCounter++; if (columnReadyCounter == 3) { $(".col").not(".current .col").css("top", 350); columnReadyCounter = 0; }

プログラムの開発にはテキストエディが必須ですよね。最近はWEBブラウザだけで簡単にプログラム開発ができるようになってきているので、手軽にプログラムを試して見る事ができます。 本日はオンラインで開発する事ができるサイトをまとめてみました。 詳しくは以下 wonderfl 面白法人カヤックが提供しているFlashをつくれるオンラインサービス。 既存のフラッシュをforkして新しいアプリケーションをコンパイルする事ができます。 公式サイト Zoho Creator Zoho CreatorでGoogle App Engine用のPythonソースが生成可能です。 公式サイト Amy Editor Mac風インターフェイスのエディタ。 HTML、JavaScript、PHP、Python、Ruby、Cのカラーリングが可能になっており、Ctrl + Z などのショートカットキーも動作。 タブ入力や行

Perfection kills » Javascript quizというエントリーのご紹介。JavaScriptのクイズが14問出題されていました。私にとっては超難問でした、、、、