[JS]IE6/7/8でアクセスしたユーザーに新しいブラウザのインストールを促すスクリプト -IE Alert js
ユーザーがIE6/7/8でアクセスした際、IE9へのバージョンアップや他のモダンブラウザのインストールを促すjQueryのプラグインを紹介します。 IE Alert js [ad#ad-2] IE Alert jsのデモ IE Alert jsの使い方 IE Alert jsのデモ デモはIE6/7/8でご覧ください。 IE9、Firefox, Chrome, Safari, Operaでは、下記のように通常通りに表示されるだけです。 デモページ：IE7で表示 [ad#ad-2] IE Alert jsの使い方 使い方は簡単で、2ステップです。 Step 1: 外部ファイル 「jquery.js」と当スクリプト・スタイルシートを外部ファイルとして記述します。 iealertフォルダ内にスタイルシート、および必要な画像が入っています。 <link rel="stylesheet" type=
Webベースのダイナミックでクールなプレゼンテーションを実装する為のJavaScriptフレームワーク・Mosho - かちびと.net
この記事は年以上前に書かれたもので、内容が古かったり、セキュリティ上の問題等の理由でリンクが解除されている可能性があります。 Web上でプレゼンする為のJavaScript フレームワーク、Moshoのご紹介です。 impress.jsライクなダイナミックな 動きのプレゼンテーションをHTMLで 実装する事が可能です。シンプルで 良かったのでお勧め。 この手のは色々出ていますので探せばいくらでも見つかると思いますが、MoshoはjQueryやmootoolsなどのライブラリに依存しないスクリプトですので覚えておいて損は無いかも。 よくあるプレゼンのやつ。HTML5/CSS3/JavaScriptで作ります。サイズは非圧縮版で15KBほど。 以下にサンプル用意しました。矢印キーで操作します。 Sample data属性で指定する スライドごとの動きはimpress.js同様、カスタムデータ属
超定番の jQueryプラグインをサンプルと一緒に集めました。（商用利用OKなもの多め） | KAYAC DESIGNER'S BLOG - デザインやマークアップの話
超定番のjQueryのプラグインを厳選して集めました。 商用利用が可能なものを優先的にピックアップしています。 （利用する際はそれぞれライセンスをご確認くださいね） 超定番プラグイン アニメーションのイージングを簡単に扱えるプラグイン jQuery.easing jQuery.easing
業務システムに単なるCSVもリッチに表現·js-tables MOONGIFT
js-tablesはCSV形式のテキストをフィルタリングやソートに対応したテーブル表示にしてくれるjQueryプラグインです。 js-tablesは業務システムで使えそうなjQueryプラグインです。CSVファイルやCSVのテキストを渡してフィルタリングや並び替えに対応したテーブルを表示してくれます。 サンプルです。元データはCSVファイルとなっています。 カラムごとに入っているデータをグルーピングして表示します。そこから選べばデータがフィルタリングされます。 end tagと入っているデータだけ抽出しました。ソートもできます。 フィルタリングはインクリメンタルに行われます。 任意のCSVファイルを指定してテーブル化できます。1行目が自動的にヘッダーになります。 実際の使い方です。単純にテキストを入れるだけでテーブル表示にしてくれます。 CSVを表示する場合にはYahoo! Pipesを使
注目！サーバサイドからjQueryを使ってDOM操作·nodeQuery MOONGIFT
nodeQueryはnode.js用のサーバサイドjQueryで、サーバサイドでクライアントサイドのDOMを変更できたりします。 node.jsでjQueryライブラリを読み込むと、jQueryが提供するメソッドを使えますが、さらに一歩進めたのがnodeQueryです。サーバサイドからクライアントサイドの描画を変更できたりしてとても面白い実装ができます。 インストールはnpmで行います。 まずサンプルのブログです。普通に表示されているのが分かります。 サーバサイドです。node.jsのスクリプトの中でHTMLタグを出力しているのが分かります。構文にjQueryが使われているのも分かります。 ブログの新規投稿です。 投稿できました。 Twitter検索です。 時間が更新されるデモです。サーバサイドの時間であるのがミソです。 サーバサイドのソースです。 nodeQueryを使うとサーバサイドと
エラーやインフォメッセージの通知に使いたい。jQuery製通知ライブラリ·Notifier.js MOONGIFT
Notifier.jsはGrowl風通知を行うjQueryプラグインです。 Mac OSXではGrowlという有名な通知ソフトウェアがあります。バックグラウンドでの処理結果や、何か問題があった際に通知が出るのは慣れると手放せません。そんなGrowlに似た通知をjQueryで実現するのがNotifier.jsです。 リンクをクリックすると通知が右上に表示されます。この通知は一定時間が経つと消えます。 複数を同時に表示させることもできます。アイコン、タイトル、内容がカスタマイズできます。 いくつも出せます。 表示するコード。success、info、warning、errorを指定できます。 Notifier.jsを使えば見た目のデザインを変えずにエラーメッセージやお知らせを通知できるようになります。 Notifier.jsはjQuery/JavaScript製のソフトウェア（ソースコードは公
スマートフォンに特化することでjQuery API互換ながら5KB以下なJavaScriptライブラリ·Zepto.js MOONGIFT
Zepto.jsはjQuery API互換のスマートフォンブラウザ向けJavaScriptライブラリ。 Zepto.jsはJavaScript製のオープンソース・ソフトウェア。最近のWebシステム開発ではjQueryを使わないことがなくなったとさえ言えるかもしれない。それくらい頼り切ってしまっている。普通にJavaScriptを書くのが苦しくなるくらいだ。 サンプル。大抵の機能はデスクトップブラウザにも対応。 そのためスマートフォン向けのサイトでもjQueryを使ってしまう。だがデスクトップのように高速な回線でない場合もあるため、jQueryの90KBくらいのサイズは非常に重たいのだ。そこで使ってみたいのがjQuery API互換の軽量ライブラリであるZepto.jsだ。 Zepto.jsは何と5KB以下で提供されている。eachやmap、$を使ったDOMアクセス、Ajax、findなど基
知ってて当然？初級者のためのJavaScriptで使う即時関数(function(){...})()の全て
(function(){...})()は、 (function($){ $.hoge = function() { }; })(jQuery) みたいに使われていたりするコード。GreasemonkeyとかjQueryのプラグインとか、あれこれ見かけることがあると思います。 この話題はいくつかWebでも取り上げられていますが何がどうなってんのかちょっと難しいですね。しかし、誰でも理解できるレベルではあります。というのも、こういう種の難しさは体系的な知識が備わっているか否かということなのです。 でも、この知識を体系化する作業って結構しんどくて、難しくて、まーハゲるほど悩むこともあるかもしれない。それはきっと、とても毛根に悪いかもしれない。スカルプDも真っ青の状況になるかもしれない。それは、悲しいことなのだと思う・・・っ！ 毛根にはこれからもがんばってほしい！いつだって頭を温かいまなざしで見守
[JS]jQueryのプラグインを開発するためのテンプレート -jQuery Boilerplate
jQuery Boilerplate [ad#ad-2] jQuery BoilerplateはjQueryのドキュメント「Plugins/Authoring」から、より良いパフォーマンスとメモリ使用を提供することを目標として開発したとのことです。 jQuery Boilerplate (stripped version) jQueryのプラグインのテンプレート(stripped version)です。 ※2011年7月26日現在のものです。 (function($) { $.pluginName = function(element, options) { var defaults = { foo: 'bar', onFoo: function() {} } var plugin = this; plugin.settings = {} var $element = $(element)
Backbone.jsを利用したクライアントサイドMVCの導入についてそろそろ書いておくか - 出町ミスド攻防記
jQueryヘビーなアプリケーションの問題点と、MVCによる構造化の必要性 jQueryは、ブラウザ上で動くJSアプリケーションの開発生産性を劇的に向上させました。DOM操作による動的なページ書き換え処理などは、セレクタを使ってちょろっとコードを書くだけで、ほんの数行で記述できてしまいます。 しかし、この方法の延長で、大規模なJSアプリケーションを構築することは果たして現実的でしょうか。例えば「GMail」や「New Twitter」程度の規模のJSアプリケーションを書かなければならないとしたら、どうでしょう？ 大規模なJSアプリケーションを開発するには、こういった手法を延長するのではなく、より洗練されたデザインパターンを導入する必要があります。この目的にぴったりのデザインパターンが、「MVC」デザインパターンです。 MVCパターンは、Webの世界ではサーバサイドプログラミングで広く知られ
[JS]あらゆる要素をガタガタ、ぷるぷる、ちりちりと振るわせるスクリプト -jRumble
テキストリンクやナビゲーションなど、ページ上のあらゆる要素を振るわせるjQueryのプラグインを紹介します。 jRumble デモ 振るわせるアニメーションは、ガタガタをはじめ、ぷるぷる、ちりちり、などにすることができます。 [ad#ad-2] jRumbleの実装 jRumbleの実装は簡単です。 div要素でもリンクでも、あらゆるDOM要素をガタガタさせることができます。 JavaScript 「jquery.js」と「jrumble.1.0.js」を外部ファイルとして指定します。 <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jrumble.1.0.js"></script> JavaScript ガタガタさせるDOM要素をスクリプト
[JS]わずか2行のスクリプトで実装するアニメーション機能付きスライドショー
A slide-show in 2 lines of JavaScript デモページ [ad#ad-2] 下記は各ポイントを意訳したものです。 Step 1: コンテンツ（HTML） Step 2: ページめくり（JavaScript） Step 3: スタイリング（CSS） Step 1: コンテンツ（HTML） はじめに、スライドショーのコンテンツを用意します。 ここでは一つのスライドに一行のテキストを表示します。 HTML5 <!DOCTYPE HTML> <html> <head> <title>My slides</title> </head> <body> <section>This is the <em>first</em> slide</section> <section>This is the <em>second</em> slide</section> <secti
Javascriptのパフォーマンスをあげるポイント | Branberyheag Lab
30 best practices to boost your web application performance – Web User Interface Architect JavaScriptコーディング等を 書く上でのパフォーマンス確認事項３０。 自分へのインプット＆メモがてらにちょっとまとめてみます。 JavaScript DOMの操作は可能な限りやめる eval, new Function() は遅いので可能な限り使わない withステートメントを使わない（使った事ないですが） for-in 文ではなく for 文を使う。 ループの中で try-catch ではなく、try-catchの中にループを置く グローバル変数をなるべく使わない aaa+=’AAA’;aaa+=’BBB’; の方が aaa=’AAA’+'BBB’;より速い 複数の文字列連結には、Array で文字
【インフォシーク】Infoseek ： 楽天が運営するポータルサイト
日頃より楽天のサービスをご利用いただきましてありがとうございます。 サービスをご利用いただいておりますところ大変申し訳ございませんが、現在、緊急メンテナンスを行わせていただいております。 お客様には、緊急のメンテナンスにより、ご迷惑をおかけしており、誠に申し訳ございません。 メンテナンスが終了次第、サービスを復旧いたしますので、 今しばらくお待ちいただけますよう、お願い申し上げます。
Shibuya.jsのTest.jsというイベントに参加してきました。 - たかふーのブログ
最近のJavaScript熱は凄いものがあります。 去年まで僕がいたお仕事の世界では、「JavaScript＝Webアプリケーションで背景をちょっと変えたりする言語モドキ」として非常に扱いが低かったと記憶しております。それでもjQueryのプラグインなどで実現出来るカックイイUIなんかをユーザの人にリクエストされたりという事はありましたし、その為にjQueryの中身を覗いて「きんもー☆」って思ったりせっかく調べてドヤ顔でサンプルとか作ってみたのに「OSSってヤバイじゃん？」とヤバイご指摘で秒殺されたりしたのも、今となっては良い思い出です。 さらに、最近はやりのSmartPhoneでは結局Flashがどうなっちゃうんだかって状況が続いておりまして、折しもHTML5なんて目新しい話題も盛り上がってきている事からしても、これはもうiPhoneでもAndroidでもWebブラウザでも使えるJava
JavaScriptの3Dエンジン·Three.js MOONGIFT
Three.jsはJavaScriptのオープンソース・ソフトウェア。Webブラウザが高機能化していく中で競われているのがJavaScriptエンジンの性能だ。実行速度が向上することによって、Webアプリケーションなどの利用が促進される。HTMLレンダリング性能と合わせて重要な指針だ。 マウスの動きを追従する エンジンが高機能化すれば実現できる幅が広がる。その一つが3Dレンダリングだ。JavaScriptで3Dオブジェクトが表現できるようになれば、ゲームはもちろん様々な分野で活用できるだろう。そのレンダリングエンジンとしてThree.jsを紹介しよう。 Three.jsは3Dオブジェクトをレンダリングするライブラリで、先日話題になったGoogleマップを使ったマッシュアップ「The Wilderness Downtown」もこのThree.jsを使って作られた一つだ。さらにマウスで反応する
jQuery UIのウィジェットを使ってみよう
対象読者 jQuery UIに興味があり、使ってみたいと思っている方 必要な環境と準備 jQuery UIのダウンロード 執筆時点のjQuery UIの最新版は、1.8.2です。第1回を参考にダウンロードしましょう。 Dialog Dialogは、ユーザのアクションに対して、警告、問い合わせなどのダイアログを表示させたいときに利用します。例えば、ユーザ登録時に「登録します。よろしいですか？」といったメッセージや、データを削除させる時に「削除しますが、よろしいですか？」などのメッセージを表示させることができます。 今回は、ボタンをクリックすると、［OK］と［キャンセル］ボタンが配置されたダイアログが表示されるサンプルを取り上げます。 リスト1にDialogプラグインの使用例を、図1、図2に実行結果を示します。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML
jQueryを使って国際化処理を行う·jquery.localize.js MOONGIFT
多言語に対応したWebサイトを構築する場合、サーバサイドで対応するのが一般的だった。例えばGetTextを使った国際化処理が有名だ。サーバサイドで処理をできるのは手軽な反面、言語ごとにリソースを消費してしまうのが問題だ。 JavaScriptで国際化を行う 結局のところ、国際化とは見た目の話でしかない。であれば見た目を操作するのに向いたJavaScriptで行わせるというのはあながち間違っていないかもしれない。 今回紹介するオープンソース・ソフトウェアはjquery.localize.js、jQueryを使った国際化ライブラリだ。 jquery.localize.jsはrel="localize[hoge]"といった要素で国際化する際のキーを指定する（この場合hogeがキーになる）。そして別途JSONファイルを用意し、hogeに対応した各国語の文字列を指定する。後は読み込み時にjquery
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
