Maplace.js - 軽量なjQuery × Googleマップライブラリ MOONGIFT
Googleマップをプログラマブルに組み込むのに良さそうです。 GoogleマップはAPIの多彩さ、機能の柔軟さもあって様々なサービスで使われています。位置情報や地図を扱おうと思ったら一番に考えるのではないでしょうか。 そんなGoogleマップをさらに手軽に使えるようにしてくれるライブラリがMaplace.jsです。機能は限られますが広範囲に利用できそうです。 まずは簡単なデモ。地図の表示を行います。コードとしてはたった数行です。 // JavaScript var maplace = new Maplace(); maplace.Load(); // or new Maplace().Load(); // HTML <div id="gmap"></div> その結果は次のようになります。 シンプルな地図表示。 次はドロップダウンやリストを使ったマーカーのデモ。マーカーは自動的に中央に表
Tocify - Boostrap対応の目次生成ライブラリ
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました お。これはプロジェクトサイトのヘルプや説明ページに使えそうですね。 BootstrapをベースにWebサイトを構築するメリットとして、多彩なプラグイン/ウィジェットの存在があります。こんなこと実現できるかな、と思って調べてみれば大抵そういったソフトウェアが存在するのが強みです。 例えばメインコンテンツの左側に見出しを目次として並べたい、そう思ったならばTocifyを使ってみましょう。Bootstrap + jQueryで格好いい目次表示を行ってくれます。 使い方としてはまずスタイルシートとJavaScriptを読み込みます。 <link type="text/css" rel="stylesheet" href="jquery.tocify.css" /> <link type="
Saving jQuery UI Sortable's order to Backbone.js Collection
$(document).ready(function() { $('#collection-view').sortable({ // consider using update instead of stop stop: function(event, ui) { ui.item.trigger('drop', ui.item.index()); } }); }); The stop event is bound to a function that triggers drop on the DOM node for the item with the item's index (provided by jQuery UI) as data. Item view Application.View.Item = Backbone.View.extend({ tagName: 'li', cl
Backbone.Modelのattributesにオブジェクト入れるときの注意 - Webtech Walker
Backbone.js Advent Calendarの15日目です。軽めにいきます。 Backbone.Modelのattributesにオブジェクトを設定するときの注意点など。attributesはsetとかで設定される値をオブジェクトして持っているやつです。 まず次のようにsetでattributesを設定します。 var MyModel = Backbone.Model.extend(); var m = new MyModel(); m.set('hoge', 'fuga'); m.set('foo', { bar: 'baz' }); このようにhogeには文字列、fooにはオブジェクトを設定しました。そしてtoJSONでattributesを取得して値を更新してみます。 var attrs = m.toJSON(); attrs.hoge = 'new fuga'; attr
Require.js を使ってみる - Memo
メモ。 いい加減やらないと行けないと思いつつ、二回ほど試して上手く行かなくて放置してたので再入門した。 ディレクトリ構成 ├── app.js ├── entities ├── libs │ ├── backbone-0.9.9-min.js │ ├── bootstrap-2.2.2-min.js │ ├── jquery-1.8.2-min.js │ ├── jquery-layout-1.3.0-30.77.js │ ├── jquery-ui-1.9.1.custom.js │ ├── jquery.jsPlumb-1.3.16-all.js │ ├── micro-log.js │ ├── moment-1.7.0-min.js │ ├── require-2.1.2-min.js │ └── underscore-1.4.3-min.js ├── main.js ├── mod
WYSIWYGエディタを実装するjQueryプラグイン・jQuery TE - かちびと.net
WYSIWYGを実装するjQueryのプラグイン、jQuery TEのご紹介です。WYSIWYGエディタの割に軽量との事です。触って見たいけど時間無いので備忘録的にメモ。 jQueryでWYSIWYGエディタを実装する、というもの。サイズは16KBと、WYSIWYGエディタの割には軽量なのではないかと思います・・でも、他のをあまり良く知らない。 ロゴがなんとなく公式っぽい感じがしますけど・・jQueryのアカウントのGithubには無いから違うのかな。 シンプルな設計で使いやすい印象ではあります。 ライセンスはMITとGPLのデュアルライセンスです。ドキュメントも充実していますのでチェックしてみては。 jQuery TE
jQueryで地震分布図を作成しよう
地理情報を含むデータを表現する場合、地図上で表すことで視覚的にその情報を認知しやすくなります。例えば、車のナビや道路標識などでは、単純に方向や座標だけを示すのではなく、地図上に表現することで、見た人が直感的に認知できるようにしています。本稿では、jQuery対応コントロール集である「Ignite UI 2013 Volume 1」のigMapというコントロールを用いて、地震分布図を作成していきます。 対象読者 JavaScriptの経験者、地図アプリに興味のある方。 必要環境 IDEは特に必要がなく、コード編集用のエディタと動作確認用のブラウザがあれば良いです。 今回使用するigMapコントロールは、jQuery UIウィジェットの一つであり、jQueryライブラリとjQuery UIライブラリに依存します。そのため、対応ブラウザについてもjQuery UIに依存します。 プログラム実行時
文字や画像にリアルタイムでモザイク処理がかけられるjQueryプラグイン「SPOILER ALERT!」:phpspot開発日誌
文字や画像にリアルタイムでモザイク処理がかけられるjQueryプラグイン「SPOILER ALERT!」 2013年03月21日- SPOILER ALERT! 文字や画像にリアルタイムでモザイク処理がかけられるjQueryプラグイン「SPOILER ALERT!」。 $ ('spoiler, .spoiler').spoilerAlert()のように初期化するだけで、画像や文字をモザイク処理することが出来ます。 マウスオーバーでうっすらみえるように、クリックでモザイク解除みたいなことが可能です。 あとはどう使うか？というところですが、実装の際にJS側でやってしまえるというのは楽でいいですね。 関連エントリ アニメーションしながらソートできるjQueryプラグイン「Animated Table Sorter」 高機能なカラーピッカーを実現出来るjQueryプラグイン「Spectrum」 i
MVCフレームワークのBackbone.jsが正式版1.0に到達。jQuery互換のモバイル向け「Zepto」も1.0に
MVCフレームワークのBackbone.jsが正式版1.0に到達。jQuery互換のモバイル向け「Zepto」も1.0に JavaScriptのMVCフレームワークとして、おそらくもっとも知名度が高いと思われるBackbone.jsが、ついに正式版となるバージョン1.0としてリリースされました。 Backbone.jsは、わずか1500行程度のとても軽いフレームワークなのが最大の特徴です。昨年末には翻訳コミュニティのenja-ossによってコメントをすべて日本語訳したソースコードが公開されています。 MVCを実現するのにフォーカスしたフレームワークのため、jQueryやテンプレートエンジンのHandlebarsと組み合わせて使うのが一般的です。 バージョン1.0をリリースし、今後のBackbone.jsはどうなっていくのでしょうか？ ドキュメントには次のように書いてあります。 In an
ドラッグ＆ドロップで並び替えができるダッシュボード作成jQueryプラグイン「sDashboard」:phpspot開発日誌
ModelN/sDashboard GitHub ドラッグ＆ドロップで並び替えができるダッシュボード作成jQueryプラグイン「sDashboard」。 次のようなパネル状のUIでパネルを好きな位置に移動できたり、ウィジェットを追加したりすることのできるフレームワークです。 管理画面等のダッシュボード作成の際に活用できる場面がありそう 関連エントリ 画像レイアウト関連で便利なjQueryプラグイン等まとめ テキストを新聞風のレイアウトにできるjQueryプラグイン「Columnizer」 アイテムをドラッグ＆ドロップで画面レイアウト出来るjQueryプラグイン「gridster.js」 ブロック要素の高さを簡単に揃えられるjQueryプラグイン「equalize.js」 レスポンシブなテーブル作りに役立つjQueryプラグイン「FooTable」 アイテムをタイル状に並べる新しいjQuer
jQuery公式プラグイン・レジストリが公開。GitHubと連携など、今風の仕組みに惚れ惚れ
白石 俊平 ニュース jquery 0 Comment 2013年1月17日、jQuery「公式」のプラグイン・レジストリ（プラグインの集積場）が公開されました！ URLはこちらになります。 http://plugins.jquery.com/ このプラグイン・レジストリの目的は、従来のプラグインサイトでは解決できなかった、「断片化」と「配布」の問題を解決することだそうです。 「断片化」・・・「jQuery プラグインがWeb上の至る所にあり、探すのが面倒」という、現在の状況 「配布」・・・作成したプラグインを配布するためのサイト作成や宣伝に手間がかかる、従来のプラグインサイトでは登録が面倒だった 新しいプラグイン・レジストリは、GitHubと連携することを前提として、こうした問題をエレガントに解決し、従来のプラグインサイトを完全に置き換えるものです。 開発者にとっては、プラグインを公開
IFrame内もレスポンシブ対応にするjQueryプラグイン「ResponsiveIframes.js」:phpspot開発日誌
IFrame内もレスポンシブ対応にするjQueryプラグイン「ResponsiveIframes.js」 2012年10月09日- ResponsiveIframes.js IFrame内もレスポンシブ対応にするjQueryプラグイン「ResponsiveIframes.js」 ページ内や画像をレスポンシブ対応にするものはありますが、ページ内に貼りつけたiframeでさえもブラウザサイズに応じて伸縮させることができます。 単にiframeのサイズを変えるだけじゃなくてiframeの中身のサイズも変えなくてはいけないため、結構大変そうですがライブラリで簡単に対応できそうですね 関連エントリ ブロック要素の高さを簡単に揃えられるjQueryプラグイン「equalize.js」 Gmailスタイルのemoticonを実装できるjQueryプラグイン クリックで水滴を落としたようにアニメーションさ
jQueryをロードする際のナイス！と思った書き方
概要 ▶ 出典：Initializr - Start an HTML5 Boilerplate project in 15 seconds!先日開催された「CSS Nite in NIIGATA, Vol.3 with Microsoft」でせっかくHTML5の事を学んだので、実際に使ってみようと勉強を進めています。このブログも実はPC版は形式上HTML5のページになっているんです。見た目はほとんど変わって本ページはプロモーションが含まれている場合があります 出典：Initializr - Start an HTML5 Boilerplate project in 15 seconds! 先日開催された「CSS Nite in NIIGATA, Vol.3 with Microsoft」でせっかくHTML5の事を学んだので、実際に使ってみようと勉強を進めています。 このブログも実はPC版は
JavaScript ユーザエージェント条件分岐便利スニペット｜Web制作 W3G
Updated 2014.04.07 / Published 2011.04.28 下記に記載の内容では、2015年現在新たに登場してきているOSまで対象にするには限界がありますので、Mobileの判定をMobileとTabletにだけフィーチャーさせた2015年版JavaScriptユーザエージェント判別もあわせてご参照ください。 jQuery.supportだけで代表的なブラウザの判別を行うことができなくなってしまったので、UA情報には依存しないブラウザがサポートしている機能でブラウザ判別を行う試みです。ただし、モバイルかどうかの判別をするためにWindows Phoneに限ってはUA情報に依存する必要があります。 判別用コード var _ua = (function(){ return { ltIE6:typeof window.addEventListener == "undefi
jQuery Mobile 1.1、正式版が早くも登場！
昨年11月にjQuery Mobile 1.0として最初の正式版が登場してからわずか5カ月。最初の大きなバージョンアップとなるjQuery Mobile 1.1.0がリリースされました。 jQuery Mobileは、HTML5のタグを書くだけでプログラミングをせずにモバイルアプリケーションが作れるJavaScriptのフレームワーク。開発されたアプリケーションは、iOS、Android、WebOS、Windows Moblie、Symbianなどさまざまなモバイルプラットフォームで動作します。 jQuery Mobile 1.1では、画面上部もしくは下部につねに表示されるFixed Toolar（固定ツールバー）のちらつきがなくなった点、画面遷移がよりスムーズになった点などの改善が行われています。 固定ツールバーがCSSベースに モバイルデバイスのユーザーインターフェイスとして、画面上部
レスポンシブウェブデザインの画像問題を解決する「Response JS」
配布元:Response JS: mobile-first progressive enhancement in HTML5. ライセンス:MITライセンス 「Response JS」はレスポンシブウェブデザインの画像問題を解決するためのJavaScriptライブラリです。 レスポンシブウェブデザインではPCだけでなくiPhoneやAndroid、iPadなど複数の解像度、画面サイズ向けのデザインを1つのHTMLで提供します。そのため、スマートフォン向けのデザインなのにPC向けの画像が読み込まれてしまうことがあります。 「Response JS」を利用すると画面サイズごとに読み込む画像を選択できる為、無駄な画像リクエストの発生を抑えることが可能です。 Response JSの利用方法 まずはjQuery本体とダウンロードしたResponse JSのスクリプトファイルをhead要素内などで読
スマホアプリの作り方【超まとめ】Web編：HTML5やjQuery MobileなどスマホWebアプリ開発に役立つ記事52選 - ＠IT
Web編：HTML5やjQuery Mobileなど スマホWebアプリ開発に役立つ記事52選 ＠IT編集部 2012/1/31（2013/2/28 改訂） iOS（iPhone／iPad／iPod touch）、Android、Windows Phoneなど、さまざまなスマートフォンのプラットフォームのアプリを作るための＠IT記事のまとめです。今後、順次更新・追加していきます。 開発者が登録したApp StoreやMarketplaceなどからダウンロードしてインストールするアプリ、もしくは、あらかじめインストールされているアプリは、「ネイティブアプリ」と呼ばれています。iOSやAndroid、Windows PhoneといったOS上で動き、マイクやカメラなどデバイスの機能を十分に使えるのが特徴です。作り方は、基本編やデザイン／グラフィック編で紹介した記事が参考になると思います。 一方で
動的なページ作成 | jQuery Mobile 1.1.0 日本語リファレンス
jQuery Mobileと動的なページ生成 jQuery Mobileは、デフォルトでリンクがクリックされた際の動作を乗っ取り、ページを動的にDOMへ挿入するようにしています。あるいは手動で $.mobile.changePage() 関数が呼ばれた際も同様です。これはサーバ側でHTMLを出力する場合には非常に優れていますが、時にはJSONなどで取得したデータをクライアント側でジェネレートしたいような場合もあるでしょう。それは通信量やパフォーマンス的な問題かもしれませんし、連携するサービスのフォーマットによる問題かもしれません。 クライアント側でページのマークアップを作成する必要がある場合、$.mobile.changePage()関数による通知の仕組みについて知っておくことが重要です。それによって、ナビゲーションの流れの適切なタイミングで処理をフックすることが出来るようになります。 c
注目！サーバサイドからjQueryを使ってDOM操作·nodeQuery MOONGIFT
nodeQueryはnode.js用のサーバサイドjQueryで、サーバサイドでクライアントサイドのDOMを変更できたりします。 node.jsでjQueryライブラリを読み込むと、jQueryが提供するメソッドを使えますが、さらに一歩進めたのがnodeQueryです。サーバサイドからクライアントサイドの描画を変更できたりしてとても面白い実装ができます。 インストールはnpmで行います。 まずサンプルのブログです。普通に表示されているのが分かります。 サーバサイドです。node.jsのスクリプトの中でHTMLタグを出力しているのが分かります。構文にjQueryが使われているのも分かります。 ブログの新規投稿です。 投稿できました。 Twitter検索です。 時間が更新されるデモです。サーバサイドの時間であるのがミソです。 サーバサイドのソースです。 nodeQueryを使うとサーバサイドと
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - jplayer/jPlayer: jPlayer : HTML5 Audio & Video for jQuery
