Register as a new user and use Qiita more conveniently You get articles that match your needsYou can efficiently read back useful informationYou can use dark themeWhat you can do with signing up
こんにちは、2011年度新卒エンジニアの夏目です!突然ですがみなさんJavaScript書いてますか? 最近はjQuery Mobileなどを利用したスマートフォン向けアプリ開発において、クライアントサイドでもヘビーなJavaScriptのコーディングをする機会があると思います。そのようなときコードのいたるところにHTMLが混入したり、どこでどのデータを扱っているのか分からなくなるということになりがちです。 今回はそんな悪夢のようなコーディング生活に一筋の希望の光を照らすBackbone.jsを紹介したいと思います。 対象読者 JavaScriptでの開発経験がある方 Backbone.jsとは Backbone.jsはDocumentCloudが開発をしている、クライアントサイドのJavaScriptコードをModel、View、Controllerで構築するためのフレームワークです。b
jslintとjenkinsを連携させたかったので色々調べてみた。 jslint4javaっていうjslintのjavaバージョンがでていたのを発見したのでant使って連携してみました。 以下手順 とりあえず使用するプラグインいれておく Jenkinsの管理 > プラグインの管理 > 以下のプラグインを追加 Git Plugin ant Violations jenkins再起動 次にjslintにかける対象のjobを作成します。 新規Jobの作成 > (Job名を決めてから)フリースタイル・プロジェクトのビルド > ok プロジェクト名やもろもろ入力 今回はGitリポジトリ(Test)をjslintにかけるのリポジトリを設定 ちなみに今回対象にするリポジトリはこれ (https://github.com/nazomikan/Test) ビルドトリガのSCMをポーリングにチェックをいれる
Recent entries Apache2.4のリリース予定は来年(2011年)初め(あくまで予定) inoue 2010-12-23 Herokuの発音 inoue 2010-12-20 雑誌記事「ソフトウェア・テストPRESS Vol.9」の原稿公開 inoue 2010-12-18 IPA未踏のニュース inoue 2010-12-15 労基法とチキンゲーム inoue 2010-12-06 フロントエンドエンジニア inoue 2010-12-03 ASCII.technologies誌にMapReduceの記事を書きました inoue 2010-11-25 技術評論社パーフェクトシリーズ絶賛発売中 inoue 2010-11-24 雑誌連載「Emacsのトラノマキ」の原稿(part8)公開 inoue 2010-11-22 RESTの当惑 inoue 2010-11-22 「プ
Arborは複数のオブジェクトを関連性を含めてビジュアル化するライブラリ。 ArborはJavaScript/jQuery製のオープンソース・ソフトウェア。データをビジュアル化する方法は幾つか存在する。例えば棒グラフや折れ線グラフも一つのビジュアル化だ。どの方法を選ぶかはデータの種類と見せ方によって異なるだろう。 こんな表示も 幾つかのオブジェクト同士が関連して存在する場合に使えるのがArborだ。例えばソーシャルネットワークのユーザの関連性を表示したり、友人同士のつながりをビジュアル化するといった時に使えそうなライブラリだ。 Arborは幾つかのハブがあり、そのハブから枝が伸びて別なハブにつながっているようなビジュアル化を行う。表示して終わりという訳ではなく、常にゆらゆらと動いている。さらにハブをドラッグして移動させることもできる。その時には関連するハブも干渉して動く。 さらに複雑な描画
前置き custom eventとは何か?(前置きの前置き) ブラウザがサポートしているeventではない独自定義event。 clickとかはブラウザがサポートしているevent ユーザのアクションやブラウザの状態等によって直接発火されることはない click eventは、ユーザがマウスポインタを要素の上に移動後にマウスのボタンを押すと発火される DOMContentLoaded eventは、ページのHTMLがダウンロード完了し、すべてパースされると発火される jQueryではtrigger,triggerHandler methodでeventをユーザのアクション等に関係なく発火することが出来る custom eventも発火出来る 逆に言うとcustom eventはJavaScriptの側からしか発火されない 以前The JUI 2009 Returnsで話をしました。 htt
なぜ通常のXMLHttpRequestにはクロスドメイン制約があるのに、JSONPではクロスドメインでリクエストを送信できるのか?不思議に感じたので、ちょっと調べてみた。 クロスドメイン制約は「ブラウザ上で実行されるJavaScriptは同じドメインにしかリクエストの送信やクッキーの編集を行えない」という制限である。 なぜこのような制限が必要になるのか。クロスドメイン制約がなかったらどうなるかを思考実験してみよう。ブラウザ上では、いくつものサイトからダウンロードしてきたJavaScriptが同時に実行されることは珍しくない。また、悪意のあるページにアクセスしてしまい、悪意あるJavaScriptを実行してしまうことも、十分に起こり得る話である。間違えて変なページにアクセスしたら致命的な問題が起きました、ではまずいので、ブラウザではJavaScriptができる事にかなりの制限を与えている。X
ひとまず初期表示する。 DAOでは10件など固定の件数を取得する。 このサンプルでは、IDの順番に表示していく。 @RequestMapping(method = { RequestMethod.GET }) public ModelAndView index(@RequestParam(defaultValue = "0") Long Id) { // limit 10などのSQLを使って10件だけ取得する List<Dto> dtoList = this.service.list(Id); ModelAndView view = new ModelAndView(); view.addObject("list", dtoList); view.setViewName("index"); return view; } moreボタンを押したらローディング画像を表示する。 リクエストパラメ
@monjudoh scriptタグ内を<!-- // -->で括ってからJavaScript書くのってどの辺のブラウザ向けにやってるんだっけ? #javascript
jQuery のソースから拾ってきたネタなんすが、arguments.callee と setTimeout を使ったリトライ処理が超便利なのでご紹介。 まず基本形はこんな感じす。 (function() { // なんか処理 if (error) { setTimeout(arguments.callee, 20); } })(); 上のコードは error が真のとき20マイクロ秒後に無名関数の実行をリトライします。20マイクロ秒だとリトライ間隔が短いような気がするかもしれませんが、リトライ回数は1秒に50回ですので言うほどでもないです。 arguments.callee は関数内でのみ参照可能で、実行中の関数自身への参照を保持します。上の例では arguments.callee は無名関数への参照となります。setTimeout に arguments.callee を渡すその関数を
Learn Web Design Retro CSS Text Effect: A Step-by-Step TutorialCSS offers an array of tools that, when used correctly, can improve the visual experience on your website. In this tutorial, we’ll explore a straightforward way to design a retro text effect with pure CSS. The approach, while not overly complex, yields a visually appealing result and serves as a… UX surveys can be pivotal tools for des
ExtractContentJSはJavaScript製のオープンソース・ソフトウェア。ブログやWebサイトのデータを集積して、そこから情報を吸い出して何らかのサイトを構築するというサービスは多い。その時重要になるのが特定URLからの本文抽出だ。サイドバーやヘッダーなど余計な情報を省くことでより意味のあるコンテンツが得られるようになる。 画面下の文字列が本文抽出した結果 Rubyであれば以前紹介したExtractcontentというライブラリがある。そしてそれをベースのはてなにてJavaScript実装したのがExtractContentJSだ。JavaScriptベースの実装とあって、クライアントベースで抽出を行いたいという時に使えそうなライブラリだ。 使い方は簡単で、ExtractContentJSのオブジェクトを作ったら現在表示されているページのオブジェクト(document)を渡す
Webサイトの運営は孤独だ。ユーザからのフィードバックを得るというのはかなり難しい。対面式でない分、時間や地理的条件に束縛されないというメリットがある反面、訪問者が何を考え、どういう動きをしているのかといった情報が分からずユーザビリティの改善は困難だ。 ユーザのマウスの動きをトラッキングする だがデジタルだけに仕組みをうまく用いればもっとユーザの動向が分かるようになるはずだ。 今回紹介するオープンソース・ソフトウェアはsimple mouse tracking、マウスの軌跡を記録、再現するソフトウェアだ。 simple mouse trackingはJavaScriptとPHPで提供されるソフトウェアで、指定されたJavaScriptタグを埋め込むことで動作する。埋め込まれたWebサイトでマウスを動かすとその軌跡が記録され、管理画面から見ることが出来るようになる。 動きを追っているところ
IEでは遅延させないと、処理が追いつかず削除に失敗することがある。 id属性を指定していたりすると、重複した際IEが落ちるので注意が必要。 ■ 追記 2007年12月25日 os0x どういう条件で再現するのか気になるなー はてなブックマーク - removeChildを使う際はsetTimeoutでの遅延が必要 | mayokara memo デタラメにも程がある内容だったため修正。 どうも実行中のscript要素と絡むと怪しい模様。 具体的にはinnerHTMLにデータを流し込んだ直後にremoveChildしたときが怪しい。 関数の実行順の問題かもしれない。 その関係か、setTimeoutで登録しなおすとうまく行くみたいです。 あと、idが重複したから落ちるというのは私の間違いでした。 配列を用意してpush、shiftしても落ちます。 この場合もsetTimeoutで(一応)回避
外部スクリプトを呼び出すブックマークレットのスクリプトの中に、scriptタグをクリーンアップするコードを入れていたら、2回目の呼び出しでIE7が落ちた。リロードしてたりページ移動していても同じ。 外部スクリプト (bookmarklet_helloworld.js) (function() { alert('Hello World, from bookmarklet code'); var scripts = document.getElementsByTagName('script'); for (var i=0; i<scripts.length; i++) { var script = scripts[i]; if (/\/bookmarklet_helloworld\.js$/.test(script.src)) { script.parentNode.removeChild(s
時々、Webサイトで入力している内容をその場で判定するものがある。入力必須の項目やメールアドレス、パスワードの一致などでエラーがあればすぐに表示してくれるので、送信してから修正すると言った二度手間がなくて便利だ。 Webブラウザ上で入力チェックを実行する サーバ側でも入力チェックは行うが、ユーザビリティを考えるとオンラインでも検証したい。そんな検証システムを簡単に作れるのがyavだ。 今回紹介するオープンソース・ソフトウェアはyav、JavaScriptの入力チェックライブラリだ。 yavは入力必須はもちろん、数字のみや文字のみといったチェックもできる。メールや日付、文字の長さなどといったフォーマットによるチェックや、「and」と「or」による他の項目の値によって入力チェック内容を変更する機能もある。多言語にも対応している。 設定はこのようになる 入力フォーマットを規定することも可能で、予
jQuery、長いドロップダウンリストをインクリメンタルにしぼりこむサンプル with migemoっぽいもの 説明 たくさんのアイテムの中からひとつ選びたいというケース。 対象の名前は知ってる。でも検索するのもだるい。 単なるドロップダウンだとどこにあるかわからなくて困る。 というケースにどうぞ。 ユーザビリティメモ: jsが無効な人は恩恵を受けられないので代替手段を何とかしたほうがいいんじゃないっすかね。 ついでにmigemoっぽい検索する機能もつけてみた。 入力されたローマ字を元に正規表現作って読みデータ(ひらがな)を検索するだけ。 ちょっとかしこいハイライト機能つき。 操作: 上下キーで移動、Enterで確定、ESC or 検索窓がフォーカス失うとキャンセル。 Windows XP上のOpera 9.64、Firefox 3.0.10、IE 7.0で動作確認。
bookreader.jsは、長文を縦スクロールではなく、横スクロールで表示し読みやすくするJavaScriptライブラリです。 →プロジェクトのホーム (Google Code) - New!! →ダウンロード(ver 0.4.6) - 2009/04/18公開 ※ダウンロードの詳細については、こちらのページをご覧下さい。 まずは、このページで体験してみて下さい。キーボードの[→]/[←]キーが、「進む」あるいは「戻る」に対応します。画面上に表示される、半透明の▶/◀ボタンをクリックしてもOKです。使い方の詳細は「ヘルプ」を参照ください。 次期バージョンの開発状況 幸いにしてさまざまな方からフィードバックをいただきました。ありがとうございます。それを元に機能の絞り込みとWEBサイトへの「組込み方」について検討を行っています。まだ、実装の方針が定まった、という段階ですが次期0.8.x系のサ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く