jQueryだけ使うのが馬鹿らしくなる。KnockoutJSに触れる
久保田です。最近KnockoutJSというJavaScriptフレームワークを勉強しています。 KnouckoutJSはjQueryの上に構築されているフレームワークです。jQueryのみ使うのと比べてKnockoutJSを利用すると、ウェブページ上のインタラクションを圧倒的に簡単に記述できます。この記事では、簡単にKnockoutJSの概要を説明し、KnockoutJSを用いたデモを紹介します。 このフレームワークの特徴としてあるのは、HTML内に宣言的な記述を埋め込むことでインタラクションが実装できることです。HTML5のカスタム属性(data*属性)を用いて、その要素に関する処理を宣言してきます。裏側の処理は、JavaScriptでViewModelを定義し、そこにビューが必要とする値を管理します。 例えば、あるチェックボックスにチェックを入れると下の要素がトグルする簡単な例は、以下
最近よくみる定番の動きは、だいたいこれで対応できるjqueryライブラリ | バニデザノート
ウェブデザインのなかで、 jqueryをつかった、さりげない「動き」をウェブサイト上で導入するのが 定番になりつつありますね。 ふわっと、ポップアップみたいに浮き上がってくるウインドウ、 画像やテキストのスライドなど 最近良く見るjqueryでつくる「動き」で、おすすめのライブラリをまとめてみます。 要素をスライドさせるならJquery.cycle.plugin 画像や、テキストなど、 非常にシンプルなhtmlソースを認識して対応してくれるプラグイン。 上から落ちてきたり、横にスライドしたり、フェードイン・フェードアウトしたり スライド番号をつけたり、スライド領域の要素の右左に矢印をつけたりもできます。 シンプルなdemo Even More Demosもオススメです。 オプション一覧はこちら → jquery.cycle.plugin ページ内ポップアップ、lightbox風表現ならfa
jQueryのプラグインを三つ作りました。 - ?D of K
細々とした奴を作ったので置いておきます。 keychar.js キーコードを文字列に変換します。keyIdentifierが使えるようになるまでのつなぎ的なやつです。 $(window).keydown(function (evt) { if (evt.keyChar() === 'A') { //< ココ alert('shift + a'); } }); keydownでもkeyupでもkeypressでも変な記号でも割と動きます。 レポジトリ サンプル jquery.touchable.js mousedown、mousemove、mouseupをtouchstart、touchmove、touchendに読み替えるライブラリです。普通にmousedown等を使っているだけのコードがtouchイベントで動きます。 まだ、mouseupのtouchendへの読み替えが手抜きなので、後々
jQueryのアニメーションとか勉強しました。Google+のサークルっぽくリストを表示できるjQueryプラグイン作ったよ。 - kissrobberの日記
深刻なjavascript力不足から徐々に抜け出せつつあるような気がしている今日この頃ですが、 jQueryプラグインというものを初めてリリースしてみました。 CircleList jQuery Plugin http://kissrobber.appspot.com/circlelist_jquery_plugin/ ↑のデモのような感じで、htmlのリストをGoogle+のサークルっぽい感じで表示する事ができるプラグインです。 最初はプラグインとかじゃなくて普通にGoogle+っぽくアイコンをうごかすページを作ってたんですが、 jQuery UIの機能（draggableとかselectableとか）と連携したくなった時にプラグインのルールにしたがって作っといた方が連携しやすい事に気がついて、 作り直して、 あ、これ公開できるじゃんって感じで公開してみました。 いろいろ学んだ事はあるん
スマフォ向けサイト構築等に便利そうな、指定サイズに応じてclass名を加えてくれる軽量jsライブラリ・Selector Queries - かちびと.net
これはかなり便利そうだったので備忘録。 ディスプレイサイズに応じて指定した要素 にclass名を加え、そのclassを使ってデザ インする事でレスポンシブなWebデザイン を設計出来るようにする為のライブラリ。 かなり便利そうです。 この発想はちょっと素敵でした。指定したサイズに応じて要素にclassを与えるので、Media Queryを使用したPCとスマフォ向けサイトで見た目をまったく別のものにすることも出来そう。 特にjQueryやmootoolsといったスクリプトに依存してないのもいいですね。イメージ的には部分的にMedia Queryを手軽に使える、という感じでした。 わずか5KBほどの非依存型軽量ライブラリです。ディスプレイサイズ等で要素が指定した数値になると、class名を与えてくれるので、環境によってデザインを簡単に変更できるようになります。 上記はMedia Query T
YappoLogs: iPhone で position:fixed な UIToolBar を簡単に作る jquery.mobile.iscroll.js を作った
« iPhone とかの フリックで操作するカルーセル UI を jQuery mobile で作ってる話 (jquery.mobile.carousel) | Main | FizzBuzz最短回答 もしくは Yahoo!Japan 入社課題提出エントリ » iPhone で position:fixed な UIToolBar を簡単に作る jquery.mobile.iscroll.js を作った iPhoneのWebサイトを作っていて、良くあるアプリの上と下の position:fixed なメニューを実装しようとした時に、iScrollを使えばわりかし楽に実装出来ます。 jQuery mobile (1.0a2) を使ってると header/footer 要素に data-position="fixed" を書いておけばそれっぽい動きになるんですが、スクロールイベントを受け取るた
jQuery mobile で position:fixed をどうにかする - nihimotoの日記
本日始めて知ったのですがmobile safariではCSSのposition:fixedは使えないそうです。 よって、画面の一部分にボタンを固定して置いておく、というUIが作れない。 もちろんそれでは困るので、各種対策を試みている先達たちがおります。 色々調べてみましたが、「fixedできない？なら、しないでも大丈夫なようにすればいいじゃん」ということで、iscrollというjqueryプラグインを使うのがよさそうです。 iScroll これは、本来画面をタッチして指を滑らすとウィンドウ全体がスクロールされるのですが、このイベントを乗っ取ってしまい、ウィンドウがスクロールするのではなくて特定のdiv内がスクロールされるように、差し替えてしまうjqueryです。 fixedしたいオブジェクトをスクロールされるdivの外に置いておけば、まるでfixedされているかのように画面のスクロールに関
prototype.jsからjQueryに移行するたったひとつの冴えたやりかた - os0x.blog
どうもこんにちは、os0xです。 実は(Twitterに書いただけで)ブログに書いてなかったのですが、3ヶ月ほど前からクックパッドで働いています*1。なんかもう今更ですよね、すみません。 さてさて、クックパッドですが、つい一昨日までprototype.jsを使っていました。で、昨日jQueryへの移行をリリースしたところだったりします。 というわけで、その辺の話を少し書いてみたいと思います。 そもそも、なんでjQueryに移行するのか まあ、prototype.jsとjQueryどちらを使うかと問われたら、大抵の人はjQueryと答えますよね。確かにjQueryの使いやすさは魅力的です。使いやすいということは、みんなでjQueryを使ってサービスを作ることができます。特定の誰かに依存してボトルネックになったりすることがないなら、それは素晴らしいですね。 しかし、ライブラリを変えるのは簡単な
モテるJS系女子力を磨くための4つの心得 - KAYAC Engineers' Blog
1. あえてECMAScript3.0以前の実行環境を使う あえてECMAScript3.0の実行環境を使うようにしましょう。そしてATNDで好みの男がいたらLT参加を告知し、わざとらしく発表準備段階でコンソールを出していじってみましょう。そして「あ～ん！ この実行環境本当にマジでチョームカつくんですけどぉぉお～！」と言って、男に「どうしたの？」と言わせましょう。言わせたらもう大成功。「ECMAScriptとか詳しくなくてぇ～！ ずっとコレ使ってるんですけどぉ～！ Object.keysが使えないんですぅ～！ ぷんぷくり～ん（怒）」と言いましょう。だいたいの男は新しい実行環境を持ちたがる習性があるので、ECMAScript5の実行環境を使っているはずです。 そこで男が「新しい実行環境にしないの？」と言ってくるはず（Object.prototypeの拡張を勧める男はその時点でガン無視OK）。
「ノンプログラマーのためのjQuery入門」のスライドが凄く分かりやすいですね - かちびと.net
この記事は年以上前に書かれたもので、内容が古かったり、セキュリティ上の問題等の理由でリンクが解除されている可能性があります。 Twitterに流れてきたスライドがとっても 分かりやすかったのでブログでより多く の方に拡散。ノンプログラマー向けの jQueryの基本講座。これからjQuery を使おう、という方は読んでおくと良さ そうですね。 ノンプログラマー向けにjQueryの基礎をスライド化してくれています。 @pocotan001さん作のスライドです。 このスライドを見ながらコーディングする、というより、基礎知識を頭に入れるのに適したスライドだと思いますので気軽にご覧になってみて下さい。ハードルがかなり下がると思います。 また、当ブログでもjQueryプラグイン等の情報を取りあえげていますので合わせてどうぞ。 jQueryのリファレンスサイトと入門書籍 [2011.09.21アップデー
ジョン・レッシグに聞く、jQueryのこれから (1/2)
2011年03月11日 11時00分更新 文●西畑一馬／to-R、Web Professional編集部 スマートフォン用JavaScriptフレームワーク「jQuery Mobile」のリリースが近づいている。2月に出たアルファ3版に続き、今月下旬にはベータ版が、4月中には正式版がリリースされる予定だ。 世界中のWebサイトで広く使われている「jQuery」がベースだけに、jQuery Mobileに対するWeb制作者の期待は高い。jQuery MobileとjQueryの今後について、「ドーナツ本」の愛称でおなじみのベストセラー「Web制作の現場で使う jQueryデザイン入門」（Web Professional Books）の著者・西畑一馬氏が、Web Directions Eastの開催に合わせて来日した開発者＝ジョン・レッシグ氏（John Resig）に話を聞いた。 jQuery
[Web Design] 30 High Quality Charts And Graphs For Webdevelopers To Download - 汎用的に使えるグラフツール
[Web Design] 30 High Quality Charts And Graphs For Webdevelopers To Download – 汎用的に使えるグラフツール Pocket Tweet サイト上で汎用的に使えるグラフツール。多くはjQueryやmootoolsなどのJavascriptで描画するタイプのものですが、中にはFlashで作られたグラフもあります。サイト内でグラフ描画を行う際、通常は画像で制作しますが、この手のツールを使えば数値を変更するだけで更新ができるので、汎用性やメンテナンス性を考えるととっても便利。動きを使った見せ方が出来る点もナイス。 30 High Quality Charts And Graphs For Webdevelopers To Download
Web開発にお役立ちな30のハイクオリティなグラフ描画ライブラリ | TRIVIAL TECHNOLOGIES 4 @ats のイクメン日記
みんなのIoT/みんなのPythonの著者。二子玉近く160平米の庭付き一戸建てに嫁/息子/娘/わんこと暮らしてます。月間1000万PV/150万UUのWebサービス運営中。 免責事項 プライバシーポリシー Webにグラフやチャートを描画するライブラリを探していたら見つけました。いろいろあるもんですね:-)。 30 High Quality Charts And Graphs For Webdevelopers To Download 個人的に興味を持ったものをかいつまんでご紹介:-)。 gRaphaël Raphaëlというライブラリをベースに開発されているグラフ描画ライブラリ。MITライセンス。シンプルなコーディングで綺麗なグラフを描画できる。幅広いブラウザ(Firefox 3.0以上, Safari 3.0以上, Opera 9.5以上，Internet Explorer 6.0以上
YappoLogs: jQuery Mobile 所感
jQuery Mobile 所感 しばらくjQuery Mobileを弄ってて思った事をメモ。まだまだあるふぁ何で色々変わるとおもうけど。 ドキュメントがすくないよママン アルファリリースなんで仕様固まって無い部分もあるから放置され気味なんすかね。 素直に実装読んだ方が速い。 あるふぁ2からあるふぁ3にしたらへんになったよ アルファリリースっていってんだろがカスが！ 標準のCSSだけじゃiPhoneアプリっぽくならない 最初からついてるアイコンとかだけだと、良くあるiPhoneアプリの画面になりません。 Sencha Touchつかったほうがその辺充実してる。 テーマカスタマイズして頑張れって事ですかね。 正式リリースしたらテーマ作成ツールとかちゃんと出してくれるみたいだし、しばらく我慢の子。 heaer/footerの位置を固定にしてもなんか変 なんか頑張って実装してるんだけど、スクロー
個人的に使うことが多い9つのjQuery・JavaScriptスニペット :: 5509
プラグインだけど公開してないものだったり、いつも使ってるプラグインとの組み合わせだったり、ショートコードとかなんだか色々。どれもCodaにスニペットで登録してて一発変換で使ってます。 コードはアレなんですけど、ひょっとしてひょっとすると誰かの役に立つかもしれないので恥ずかしながら公開します。対象はちょっとだけJS書けるとかそういう人ですかねたぶん。書ける人はもっとキレイなやつ使ってるでしょうし。（もっときれいに書けとか何そのコードとかも歓迎） 紹介してるスニペットたち ページトップにスクロールするだけ テキストボックスにラベル表示するやつ 要素のサイズを取得するやつ タブきりかえるやつ IEで透過pngをフェードしたときに黒くなるやつ対策のshow()とhide() Google Analyticsのトラックイベント一括bind Ajaxサイトにするときに使うリンク置き換えプラグイン スク
JavaScript HTMLテンプレートエンジン SNBinder 公開
先日予告したSNBinderのオープンソース化、GitHubに簡単なREADME付きでアップロードしたのでご覧いただきたい。 https://github.com/snakajima/SNBinder SNBinderは、ひと言で言えば「ブラウザー上でView(テンプレート)とData（JSON）を結合して HTML を生成するテンプレートエンジン」である。 ９０年の半ばから急速に広まったインターネット。サーバー側でダイナミックに生成したHTMLページをブラウザーで閲覧するだけ、というシンプルでエレガントなアーキテクチャゆえの成功だ。しかし、ブラウザーの高機能化に伴い、JavaScriptを駆使して使いやすさを向上しようという試みが色々なウェブサイトで行われている。GMail、Google Docs、Facebookなどは良い例だ。 その方向性を究極にまで突き詰めると、サーバー側は（MVC
ゆーすけべー日記
サキとは彼女の自宅近く、湘南台駅前のスーパーマーケットで待ち合わせをした。彼女は自転車で後から追いつくと言い、僕は大きなコインパーキングへ車を停めた。煙草を一本吸ってからスーパーマーケットへ向かうと、ひっきりなしに主婦的な女性かおばあちゃんが入り口を出たり入ったりしていた。時刻は午後5時になる。時計から目を上げると、待たせちゃったわねと大して悪びれてない様子でサキが手ぶらでやってきた。 お礼に料理を作るとはいえ、サキの家には食材が十分足りていないらしく、こうしてスーパーマーケットに寄ることになった。サキは野菜コーナーから精肉コーナーまで、まるで優秀なカーナビに導かれるように無駄なく点検していった。欲しい食材があると、2秒間程度それらを凝視し、一度手に取ったじゃがいもやら豚肉やらを迷うことなく僕が持っているカゴに放り込んだ。最後にアルコール飲料が冷やされている棚の前へ行くと、私が飲むからとチ
jQuery MobileでiPhone用Webサイトを作成する - Pyro Memo
jQuery Mobilehttp://jquerymobile.com/ いろいろはまったので、メモ。バージョンは 1.0 ALPHA 2。 page毎にHTMLを分けて作成するこれは好みだと思うのだけど、URL直指定でそれぞれのページを呼び出せたりするようにするなら、分けた方が簡単な気がした。 構成としては、下記のような形にしてる。 html> head> link rel="stylesheet" type="text/css" href="sample_base.css" /> script type="text/javascript" src="sample_base.js">script> head> body> div data-role="page" class="user-home-page"> link rel="stylesheet" type="text/css"
HTML5でコーディングしたページでjQueryを使うときに気をつけること :: 5509
そろそろHTML5でコーディングする機会も増えてきたりするかもしれませんが、どうしてもブラウザ対応はしておきたいもの。jQueryで（※）要素をごにょごにょする際にちょっとはまったので一応書いておきます。 IE8以下での話ですが、IE8以下でHTML5を利用するときはHTML5の要素にCSSが適用されないので、html5.jsのようなスクリプトをヘッダで読み込ませたりすると思います。 ちなみに僕はわざわざ読み込むのもアレなので、以下のものを毎回貼ってます。 こんな感じでJavaScriptのcreateElementメソッドでHTML5の要素を追加すれば、CSSが使えるようになって見た目もだいたいばっちりになるんですけど・・・ jQueryで $(hoge).append('セクション') とか $(hoge).append([ '', '', // hogehoge '', '' ].j
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Build and implement a single sign-on solution
