【前編】Backbone.jsでつくるMVPなUIパターン【スクロールスパイ】 | DevelopersIO
前回の更新からだいぶ間が開いてしまいましたがこのシリーズはまだ終わりません！今回はTwitter BootstrapにjQuery Pluginとして実装されているScrollSpyを真似して作ってみたいと思います。 ちょっと解説が長くなってしまったので前後編に分けてご紹介します。 後半はこちら >> Backbone.jsでつくるMVPなUIパターン【スクロールスパイ】後編 デザイン 4つの文章に対しそれぞれナビゲーションが存在し、文章のエリアをスクロールして閲覧している文章に対応するナビゲーションがアクティブ表示になるというものです。 このUIのhtmlは以下のようにコーディングしました <div id="ui-scroll-spy"> <div class="scroll-spy-nav navbar"> <div class="navbar-inner"> <div class="
node.js + RedisによるWebチャット·Socket.io MOONGIFT
Balloons.IOはnode.js+Redisで作られたWebチャットサーバです。 node.jsを使ったWebアプリケーションとしてよく取り上げられるのがWebチャットではないでしょうか。WebSocketsとノンブロッキングなnode.jsの特徴を引き出したサービスです。そんなWebチャットを自分でも立ててみたいと思ったらBalloons.IOを使ってみましょう。 トップページです。認証はTwitterを利用します。 ログインしました。ついで部屋を作成します。 チャット画面です。 アイコンが表示されていませんが会話は出来ます。 日本語も特に問題なく使えます。 Balloons.IOはnode.js + Socket.io + Redisの組み合わせで実装されています。さらにTwitterによるOAuth認証も使われており、WebフレームワークにExpressを利用するなど今時の技術
Post by @0-9
これはRDocの脆弱性情報ですが、実際にはdarkfish.jsというファイルの修正のみでありJSの問題であることがわかります。 問題のdarkfish.jsを確認すると該当の処理は「var anchor = window.location.hash.substring(1);から取得した値を$(“a[name=” + anchor + “]”);に渡した」処理であったことがわかります。 （このファイルが脆弱性情報のファイルと同じかは確認してないですが、ファイル名とコードから同一と判断しました） 修正方法としては$(“a[name=” + anchor + “]”)でのセレクター埋め込みをやめて$(“a[name]”).eachのeach内で要素と変数を比較するようにした（$(this).attr(“name”) == anchor）なっています。
iPhoneSafariのデバッグ方法｜iPhone｜モバイル／スマートフォン｜PHP & JavaScript Room
Windows環境のChromeでiPhoneSafariのデバッグをする Edge Inspect使用 2012/11/6 iOS5までは、端末のSafariに開発メニューがあり、そこからコンソールログなど、Webサイトのデバッグ表示ができたのですが、見当たらないと思ってたら、iOS6からはWebインスペクタに変わっていました。 weinreというリモートで動くWebサイトのデバッグツールが使われています。 Adobe Community: Forum: Edge Inspect どんなものか試してみましたので、ここではWindows環境のChromeでiPhoneSafariをデバッグする手順を簡単にご説明します。 必要なものはこちら。一度インストールしてしまえばあとは接続するだけなので簡単です。 iPhone：実機（WiFi接続）＋「Edge Inspect」アプリ Windows：
node.jsを使ってjQueryチックにWebサイトをクローリングする方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
どうも僕です。 今日は、サーバサイドJavaScript（node.js）でjQueryチックにDOMを操作して、Webサイトをクローリングする方法についてまとめようと思うよ！ 要は、既存のWebサイトから必要な情報を収集してきて、データベースに突っ込もうということ。 これができると何がうれしいかって、簡単にまとめサイトが作れるんだよね。 クローリングする方法は数々あれど、なにゆえサーバサイドJavaScriptのnode.jsを使ってこれをするかというと、「クローリング対象の部分をjQueryのセレクタで指定できる」のが大きいわけです。 みんな、好きだよね！jQuery！とっても便利だよね！jQuery！ 好みにもよるかと思うが、JavaScriptのようなふにゃふにゃした言語をあえて使う理由は、クライアントサイドプログラミングを組むか、JQueryの恩恵を受けるためといっても過言ではあ
jQuery 1.9 に更新する際に注意すべき変更点の自分なりのまとめ | 私的なjQuery他
jQuery Core 1.9 Upgrade Guide | jQuery の「Changes of Note in jQuery 1.9」を読んで、 自分なりにまとめました。 誤訳して間違ったことをまとめてたり、 最新の情報でないかもしれないので 読まれる際はご注意下さい。 （※ページをそのまま訳したわけではないと、思います） jQuery 1.9 では API の削除や 挙動の変更を行っています。 この記事は、前のバージョンから更新した時、 既存のコードに影響がでそうな変更を 並べたものになります。 変更点を全部網羅しているわけではありません。 箇条書きにすると以下のような感じ： 削除された機能 .toggle(function, function) の用法 jQuery.browser() .live()と.die() jQuery.sub() document 以外の要素での A
Twitterが自社製JavaScriptフレームワーク「Flight」をオープンソースで公開
Twitterは自社サービスで利用しているJavaScriptフレームワーク「Flight」をオープンソースで公開しました。 Flightはコンポーネントベースの軽量フレームワーク。開発者に対して非同期で独立性の高いコンポーネントを定義する機能を提供することで、デバッグ、テスト、イベントハンドリングなどを容易にするフレームワークのようです。 Githubのページでは以下のように説明されています。 Components cannot be directly referenced, instead they communicate by triggering and subscribing to events. Consequently every component, and every component API, is entirely decoupled from every othe
スマートフォン JavaScript タッチ、フリックイベント実装
このサイトは、只今WEB業界で活躍中のデザイナー、プログラマーの方々の情報を集めたweb統合情報サイトです。 web帳 スマートフォンを操作する際、タッチや、フリック等、色々な操作方法があります。 タッチはご存知のとおり、スマートフォンのディスプレイにタッチすることです。 フリックとは、画面にタッチし指やペン等をスライドされる動作となります。 このタッチやフリックを操作する際、JavaScriptで取得出来、扱えるイベントは以下の通りとなっています。 touchstart touchmove touchend touchcancel gesturestart gesturechange gestureend これらのイベントを使い、操作していきましょう。 タッチされた場合のイベント まずは、タッチ出来るエリアの作成です。スマフォン用にviewportを設定します。 HTML <meta n
jQuery 1.9 のソースマップ対応で圧縮版でもデバッグが簡単になった話
jQuery 1.9 がリリースされました。1.9 の新機能の中ではあまり注目されていませんが、ソースマップに対応したのが地味に便利そうです。 というのも、圧縮版の jquery.min.js を使っていると 何か問題が起きたときにスタックトレースを眺めても jQuery の部分が意味不明 デバッガーで jQuery のソースにステップインしても意味不明 といった理由で、開発中には非圧縮の jquery.js を使うことが多かったわけです。 それが、1.9 からはソースマップに対応したので圧縮版のままでのデバッグが簡単になってます。 超簡単な使い方 ソースマップに対応したブラウザーは現時点では Google Chrome のみなので、Google Chrome の手順を説明します。 (Firefox はソースマップへの対応を計画中らしい) 事前準備を忘れずに Google Chrome で
JavaScriptのメモリリークを発見してくれるツール「Leak Finder」をグーグルが公開
ガベージコレクションの機能を備えるJavaScriptのような言語で開発されたアプリケーションでは、基本的にメモリリークは生じないはずですが、それでも回収されないメモリ領域がどんどん増えていくというメモリリーク的な状況は起こりえます。 leak-finder-for-javascript - Tool for finding memory leaks in JavaScript programs. - Google Project Hosting メモリリークは最終的にはそのソフトウェアの動作を遅くしたり不安定にしますが、短期的には問題なく動作しているように見え、単純なテストでは症状が表れにくいため、発見は難しいものです。 グーグルはこうしたJavaScriptのメモリリークを検出してくれるツール「Leak Finder」を公開したことを、ブログ「Leak Finder: a new to
iOSライクに各見出しを上部で固定して見やすくするjQueryプラグイン「jQuery List Plugin」
twitter facebook hatena google pocket リストを表示していくと長くなって見難くなることがあります。 そこでjQuery List Pluginを利用するとiOSみたいに上部で各見出しを固定してくれるので、自分がいまどの項目を見ているのか見やすくなります。 sponsors 使用方法 jQuery List Pluginからファイルをダウンロード。 <script type="text/javascript" src="jquery-1.8.3.min.js"></script> <script type="text/javascript" src="jquery.list.js"></script> <script type="text/javascript"> $(function () { $('#id名').list(); }); </script
設計から実装まで、今すぐ始める高速化
実務でよく使うhtml,css,jsの小技をつらつらと紹介します。 ※2/11のスクーの授業中で使った資料です。 https://schoo.jp/class/1776 【オシャレCSS編】 1. transformを使って要素を変形させるワザ 2. transitionを使い、CSSだけで簡単なアニメーションを行うワザ 3. keyframesを使ってCSSだけで複雑なアニメーションを行うワザ 4. 矢印アイコンをcssだけで表現するワザ 5. アイコンをアニメーションさせるワザ 6. CSSプロパティ”filter”で画像を加工するワザ 【地味だけど使えるワザ編】 7. 今どきの、要素を上下中央寄せにするワザ 8.「flexbox」で要素を自由自在に整列させるワザ 9. Windowsでwebfontをちょっとマシに見せるワザ 10. ア
少しのコードで実装可能な15のスマートフォンサイト用小技集
少しのコードで実装可能な15のスマートフォンサイト用小技集スマートフォンが普及してきて、Webサイトを作る時、スマートフォンサイトも一緒に制作している方も多くなってきていると思います。私もスマホサイトを制作する機会が増え、だんだんEvernoteに保存していたスマートフォンサイトを作る時の小技がたまってきたので、iPhoneで使える小技を中心にまとめて記事にしてみます。いくつかサンプルも作っているので、スマートフォンからあわせてご覧下さい！ スマートフォンサイト用小技集 目次いくつかサンプルも作ったのでスマートフォンから、もしくはブラウザーからユーザーエージェントを iPhone などに切り替えてご覧ください！ 横幅をデバイスの幅にあわせる文字サイズの自動調整をオフリストのクリック（タップ）範囲を広げる画面の幅にあわせて CSS を変えるリンクテキストのある Div 全体をクリック（タップ
営業日・定休日カレンダー
設置がやや大変ですが毎月○日とか毎週○曜日とかそういう指定と複数設置が簡単になったバージョンのカレンダーです。基本的な流れはステキカレンダーと同じですが、細部が調整されており、カスタマイズはしやすくなっていますが、設置作業にはちょっぴり知識が必要になったかもしれません。 営業日・定休日カレンダーの概要なるべく柔軟に更新せずにい営業日や定休日、イベントや商品発送予定日などの告知をわかりやすくカレンダー形式とリスト表示で告知するためのスクリプトです。 class指定の他に説明文やURLを指定することもできます。設置方法は2.x系と少し変わりましたがDOMを使って半永久的にめくることができる点などは変わっていません。 営業日・定休日カレンダーの機能 日曜日以外の曜日から開始できる カレンダーは基本的に一番左が日曜日ですが、一番左を月曜日にすることなどができます。 パラメータを付けてクリック 年・
ブラウザのしくみ: 最新ウェブブラウザの内部構造 - HTML5 Rocks
Preface This comprehensive primer on the internal operations of WebKit and Gecko is the result of much research done by Israeli developer Tali Garsiel. Over a few years, she reviewed all the published data about browser internals and spent a lot of time reading web browser source code. She wrote: As a web developer, learning the internals of browser operations helps you make better decisions and k
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Site Under Maintenance
IE8以下でメディアクエリーを有効にするためのJavaScript – creamu
Droppable - jQuery UI API 1.8.4 日本語リファレンス - StackTrace