WordPress 3.5.2 が同梱しているJavaScriptをリストアップした。 | Firegoby
ちょっと理由があってWordPressで wp_register_script() されているJavaScriptをリストアップしました。 これを知っておくと、プラグインやテーマでJavaScriptを仕込むときに、 wp_register_script() とか wp_enqueue_script() の $deps に識別子を配列で仕込んでおくだけでいいので便利っすよ。 たとえば、jQuery UIをオレオレスクリプトで使用したい場合は、以下のように記述するだけで必要なライブラリが全て読み込まれます。 <?php add_action('wp_enqueue_scripts', 'my_wp_enqueue_scripts'); function my_wp_enqueue_scripts() { wp_register_script( 'my-script', plugins_ur
色んなデータを便利に表示できる「Recline.js」:phpspot開発日誌
Home - Recline Data Explorer and Library 色んなデータを便利に表示できる「Recline.js」 データをExcel表風にしたり、グラフを描画したり、タイムラインにしてみたり、データを地図上にプロットしてみたりといったことが出来るライブラリだそう。 テーブルビュー。ソートなんかもできてこれだけでもリッチです このデータからグラフにしたいモノを選んでグラフ化も可能 データを元にタイムライン表示もできるみたい データを元に、地図上にプロットするなんていうこともできます なかなか面白いですね 関連エントリ 様々なグラフを描画できるJavaScriptライブラリ「NVD3.js」 HTML5で綺麗でインタラクティブなグラフが描けるライブラリ「Flotr2」 美麗なグラフをSVGで描画できるJSライブラリ「dc.js」
コンテンツをフルスクリーン表示にする際に便利なJSライブラリ「screenfull.js」:phpspot開発日誌
screenfull.js demo コンテンツをフルスクリーン表示にする際に便利なJSライブラリ「screenfull.js」 FullScreen API のクロスブラウザで動作するラッパーライブラリです。 例えば、ページ内に画像や動画があったとしてクリックするとフルスクリーンで楽しめる、的な使い方ができます。 screenfull.request( $('#container')[0] ); のように、screenfull.requrest( element ) でフルスクリーンが開始されます。 フルスクリーン化 フルスクリーンした後のイベントハンドラなんかも設定できるみたい。 関連エントリ フルスクリーン背景がスライドショーになるCSS3サンプル フルスクリーンでぼかしがカッコいいHTML5ギャラリーを作るサンプル １見の価値あり！なフルスクリーンWEBサイトのまとめ
JavaScriptでデータをダンプする「jQuery Dumpプラグイン」
PerlのData::DumperやPHPのvar_dump()のようなことをJavaScriptで行える「jQuery Dumpプラグイン」を紹介します。 jQuery Dump １．サンプル jQuery Dumpを使ってデータをダンプするには次のように設定します（青色部分）。 <pre id="dump"></pre> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script src="jquery.dump.js"></script> <script type="text/javascript"> $(function(){ var obj = { hubba: "Some string...", bubba: 12.5, dubba: ["One"
JavaScriptでQRコードを読み取る·QRcode decode javascript MOONGIFT
QRcode decode javascriptはJavaScriptで作られたQRコードデコーダです。 QRcode decode javascriptはJavaScript製のフリーウェア（ソースコードは公開されている）。最近、Google CodeでもQRコードが使われる等、利用の幅が広がっている。スマートフォンはもちろん、携帯電話のカメラを使って撮影できるのが便利だ。 右は画像。左はCanvasに読み込んだQRコード だが、PCでデータを読み取りたいと思った時には些か不便だ。目の前にコードがあるのに、何が書いてあるのか分からないのだ。携帯電話のカメラで読み取るのも煩わしい。使うのはQRcode decode javascriptだ。 QRcode decode javascriptはCanvasタグを使ってQRコードの画像を読み込み、JavaScriptを使って解析を行う。そして解
サーバー不要で保存できる「Web Storage」の使い方 (1/5)
HTML5とともにW3Cで標準化が進められているDOM APIの1つに「Web Storage」があります。Web StorageはCookieと同様にローカルディスク上にデータを保存する機能で、Cookieに比べて「有効期限がない」「データサイズの制限がない」といった特徴があります。ローカル上に永続的にデータを保存できるので、フォームの入力内容の保存やゲームのプレイ履歴の記録、各種サービスの状態保存など、などさまざまな用途に利用できます。 Web Storageにはローカルストレージとセッションストレージがあり、永続的にデータを保存する場合はローカルストレージを、ブラウザーを開いている間の一時的な保存であればセッションストレージを使います。ローカルストレージ、セッションストレージとも同じメソッドを持ち、記述方法に違いはありません。 今回のJavaScriptラボは、HTMLフォームに入力
値をそのまま編集できてソート可なテーブルを簡単実装できるJSライブラリ「EditableGrid」:phpspot開発日誌
EditableGrid - Make your HTML tables editable 値をそのまま編集できてソート可なテーブルを簡単実装できるJSライブラリ「EditableGrid」。 ベタ書きのテーブルタグや、XMLを読み込んでテーブルにすることも可能です。 カラムに型を定義することが出来て、編集時は単純なテキストエリアはもちろんですが、ドロップダウンメニューから選べるようにすることも出来ます。 テーブルヘッダーをクリックすればソートされます。 １から実装しようとするとかなり大変そうですが、ライブラリで比較的簡単に複雑でリッチなテーブルが実現出来ますね。 関連エントリ jQueryベースの多機能グリッドテーブル「DataTables」 jQueryでリッチなグリッドを実装「jqGrid」
高解像度の画像のURLを入れるだけでGoogleマップみたいに拡大機能を付けられる「Zoom.it」:phpspot開発日誌
高解像度の画像のURLを入れるだけでGoogleマップみたいに拡大機能を付けられる「Zoom.it」 2010年08月11日- Zoom.it 高解像度の画像のURLを入れるだけでGoogleマップみたいに拡大機能を付けられる「Zoom.it」。 こういうものを実現するライブラリ等はありましたが、Zoom.itはサイトにURLを貼りつけて送信するだけで、インスタントに実現でき、更に自サイトに埋めこむことだって出来ます。 大きなサイズの画像をうまく指定のサイズに収めつつ、拡大もさせたいという場合にかなり使えそうです。 コントロールボタンが右下に表示されるのでここで拡大・縮小が可能 めいっぱい拡大してこんな感じ。本来の美しさは損なわれません。 使い方によっては非常に便利に使えそうですね。 以下に実際に埋め込んでみました。
ストリートビューをカンタンに表示できるJavascript ライブラリ「stview.js」
Google マップのページから、ストリートビューの埋込みタグを取得するという手段もありますが、もっとシンプルに埋め込みたいと感じることもありますよね。 今回は、Google Maps API key の取得も不要で、住所やランドマーク名などをカンタンなタグで表記するだけでストリートビューを表示できる Javascript ライブラリをご紹介します。 組織のマインドマップツールをマインドマイスターにすべき理由 伸びてる産業、会社、事業を紹介しまくるStrainerのニュースレターに登録!! ストリートビューをカンタンに表示させられる「stview.js」「stview.js」は、住所やランドマーク名、緯度・経度を指定するだけで、カンタンにストリートビューをブログやサイトへ表示させられる Javascript ライブラリ。 日本語で海外のランドマークを指定することもでき、繰り返しストリートビ
コンテンツにエフェクトを掛けるjQueryプラグイン10個
個人的に必要になるかもと思ってメモ。 テキストや画像にエフェクトを与えて Webサイトを動きのあるサイトにする 手助けをしてくれるjQueryのプラグイン をいくつかご紹介します。 コンテンツに対するユーザーの興味を高めたり、画像を使用せずテキストを装飾したりと、使い方次第でいろいろ用途がありそうです。 Sliding Door Effect マウスオーバーで画像が4隅に開きます。動きも素敵。 Sliding Door Effect / デモ Rainbows テキストにグラデーションや影をつけます。これは凄いですね。 Rainbows / デモ Opacity to Show Focus マウスオーバーしたコンテンツ以外に半透明のエフェクトを掛けるjQueryプラグイン。テキストでも可能。 Opacity to Show Focus / デモ Color Changing Text an
JavaScript初心者におくる24のグレイトなtips - 三等兵
私が作ったわけではなく海外の記事です。自分も学習してみました。 phpスポーツ啓発日誌や、コカトリスさんや、アイスクレアームパラダイスさんのような、品質の良い訳は私にはできませんので見出しは意訳もしくは誤訳、文章は無視して訳してません。かつ、私がいろいろコードや文章つけたしてます。内容的にはほとんどズレてはないと思いますが、適当なのでおかしいところがあるかもしれません。 うっとうしい場合は原文をどうぞ。 24 JavaScript Best Practices for Beginners 1. 等価演算子で==使うなよボケ===だろナスチン野郎 ひぃぃぃ。 ==|!= だとねー、型は自動に変換されるんすよねー。ねー。 s = '1'; i = 1; alert(s == i); // true alert(s === i); //false えーと、==は「わし、数値も文字列も中身が一緒だ
HTMLテーブルの縦横を固定にしてデータを見やすく·Super Tables MOONGIFT
Super TablesはJavaScript製のオープンソース・ソフトウェア。業務システムをはじめ、レポート出力等で多用されるのがテーブル組みだ。縦横に長いデータを表示する場合、表計算ソフトウェアであればヘッダ部を固定表示にする。そうすればスクロールしても何の項目かすぐに分かる。 中央に表示されているテーブル だが素のままのHTMLではそのような柔軟な表示は行えない。そのためシステムによっては10行ごとにヘッダを繰り返し挿入したりする。だがそれも再利用性が悪くなるだろう。そこで使ってみたいのがSuper Tablesになる。 Super Tablesを使うとテーブルの縦方向ヘッダを固定にしてスクロールしても常に表示される。さらに横方向のヘッダも固定になり、一番左側のカラムが常に表示されるようになる。テーブルのユニークになるIDを常に表示したりすると便利だ。 実際のデータ。普通のテーブル組
jQueryによる画像に沿ったテキスト回り込みライブラリ·jQSlickWrap MOONGIFT
jQSlickWrapはjQueryベース、JavaScript製のオープンソース・ソフトウェア。Webページの中に画像を差し込んで表示することは多々ある。そんなとき、画像が四角であれば回り込みも綺麗に行われるので申し分ない。だが三角の画像や、人物だけの画像の時に四角く回り込んでいるのはあまり格好が良くないだろう。 画像をスムーズに回り込んでいる イラストやシンボルに限定されるかも知れないが、背景が透明のPNG画像を使えば画像の形に合わせた回り込みができるのがjQSlickWrapだ。jQueryベースのソフトウェアで、背景を柔軟に処理して表示が出来るようになっている。 幾つかのサンプルがあるが、画像の枠線に合わせて透明な背景を無視して回り込みをしてくれる。Web上でこのような表現をするのは困難だったので、まるで雑誌のような仕上がりになるはずだ。さらに透明な背景を指定した色に変更することも
かなりスタイリッシュかつ高機能なLightBox風ライブラリ「TopUp」:phpspot開発日誌
かなりスタイリッシュかつ高機能なLightBox風ライブラリ「TopUp」 最初見たときはLightBoxも驚きましたが、これがかなり進化してきています。 TopUpは、次のように、閉じるボタンやドラッグ＆ドロップでき、リサイズできるOSのようなLightBoxを実現できます。 実現できる機能を簡単にまとめてみました。 画像のスライドショー ズーム時のアニメーション機能 iframe呼び出し機能 Flash SWF再生 Flash FLV再生 QuickTime再生 WindowsMedia再生 RealPlayer再生 という感じで対応可能なメディアは全て対応している模様。 １つの選択肢として覚えておいてよさそうですね。 以下のエントリを参照してください。 The #1 Javascript Pop Up - Get TopUp! - Home 関連エントリ 表示法が新しくセクシーなLi
Excelっぽい機能も付いた検索＆ソート＆ページング機能付きテーブル実装JSライブラリ「TinyTable V3」:phpspot開発日誌
Excelっぽい機能も付いた検索＆ソート＆ページング機能付きテーブル実装JSライブラリ「TinyTable V3」 2009年11月18日- Excelっぽい機能も付いた検索＆ソート＆ページング機能付きテーブル実装JSライブラリ「TinyTable V3」。 次のような、ＵＩも美しい高機能なテーブルの実装が出来ます。 普通のテーブルをリッチに スタイルを切ると、次のような単なる<table>タグで定義されたデータなのですが、JavaScript とCSSの力によって大きく形を変えています。 機能紹介 検索機能。大量にデータがあった場合にこの機能はかなり重宝します。 ソート機能。データが一杯でも分かりやすい。全カラムにおいてソート機能が付いてます ページング機能によって縦幅が大きく取られることを防ぎます。view all ボタンで全部を表示することも可能。 縦方向の合計をExcelのsumっ
キーボードでアイテムやページの送り・戻しを簡単に実装できてしまうJavaScriptライブラリ「Paging Keys」:phpspot開発日誌
キーボードでアイテムやページの送り・戻しを簡単に実装できてしまうJavaScriptライブラリ「Paging Keys」 2009年10月15日- キーボードでアイテムやページの送り・戻しを簡単に実装できてしまうJavaScriptライブラリ「Paging Keys」 GoogleReader や Livedoor Reader でも実装されている機能で、これをサイトに実装すると便利になるサイトは多いのではないでしょうか？ <script>タグでページに読み込むだけで使えるので使い方も簡単です。 実装できる機能としては、以下のようになっています Kキー：前のアイテムへ Jキー：次のアイテムへ Lキー：前のページへ Hキー：次のページへ Rキー：リロード １つのアイテムをどのように定義するかというと、paging_keys.js という配布ファイルに含まれている以下の nodeSelecto
魅力的なUIにするためのjQueryプラグイン20 – creamu
Six Revisionsで、魅力的なUIにするためのjQueryプラグインが紹介されています。 ざっといくつかご紹介。 » SimpleModal シンプルなモーダルウィンドウ » Panel Gallery ユニークなトランジションを持つスライドショー » Easy Image Gallery サムネイル表示型のイメージギャラリー » PikaChoose Belvedere Incに見られるクールなギャラリー » SlideBox たくさんのリンクを表示できるスライドボックス » Single Drop Down Menu シンプルなドロップダウンメニュー » Mouse Over Animation for Text テキストにマウスオーバーすると、明度を変えてくれたりうにょ〜っと拡大してくれるエフェクト あまり見たことのないものやシンプルで使いやすそうなギャラリーなどが揃っていま
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
MdN Design｜総合情報サイト
IDEA * IDEA
IDEA * IDEA
