Google ChromeのJavaScriptデバッガの進化がすごい - os0x.blog
Chrome版のFirebugことGoogle Chrome Developer Toolsですが、以前gihyoで解説したときよりさらに便利になっているので、少し紹介します(元はWebKitなので、そのうち(近いうちに)Safariでもそれなりに使えるようになるはずです)。 圧縮されたコードの整形 まず、目立つところからいきましょう。ちょうど先日更新されたChromeのdev版(12.0.742.0)に搭載されたばかりの機能で、minifyされているJavaScriptコードを読みやすいように整形して表示してくれるというものです(IE9の開発者ツールにも実装されている機能です)。 例えば、Google Analyticsのコードは圧縮されていて普通は読めません。 しかし、Chromeのデベロッパーツールなら、 このように整形してくれます。 やり方は簡単で、デベロッパーツールのScript
月のオリジン - bkブログ
スクリプト言語の挙動について、コマンドラインから試すには次のように実行します。 % perl -le 'print((localtime)[4])' 0 % echo "print ((new Date).getMonth())" | js 0 % ruby -e 'p Time.now.month' 1 % ruby -rdate -e 'p Date.today.month' 1 % perl -MDateTime -le 'print DateTime->now->month' 1 % perl -MTime::Piece -le 'print Time::Piece->new->mon' 1 % python -c 'import time; print time.localtime()[1]' 1 % python -c 'import datetime; print datet
javascriptの関数が変態すぎる
冬の早朝散歩 もう春になってしまうから、大好きな冬の記録を残しておこう。 朝型であるがゆえ、6:00くらいにはアラームなしで毎日自然と目が覚める。 日によって、体が「歩きたいんですけどー」と言ってる日があるので、そういう朝はするすると支度して早朝散歩に行く。 冬の方がな…
Treesaver.js
Treesaver® is a JavaScript framework for creating magazine-style layouts using standards-compliant HTML and CSS. Download Download the latest stable beta version, 0.9.2: treesaver-0.9.2.js (21kb minified & gzipped) For uncompressed or debug versions, see the downloads section of the Treesaver.js GitHub repository. Demos Some examples of the Treesaver framework in use: Nomad Editions’ Real Eats Sam
オレオレ専用のはてぶWebアプリを作る - ふにゃるんv2
前回、ローカルアプリケーションキャッシュ機能を使って、Xmarksに替わる、オレ専用のブックマークWebアプリを作る - ふにゃるんを作った訳ですね。 それから更に調子に乗って、オレオレ専用のはてぶWebアプリを作ってみました。 何で作ろうと思ったか iPodというかiPhoneには、元々はてぶアプリがあるんですが、出来るのはブックマークかWebブラウジングのみ。 iPodのはてぶアプリで、ブックマークしようとすると、以下の問題に突き当たります。 無線LANといえど、パソコンでWebブラウズする方が視認性が良いし速い。 (現在の所、iPodのWebブラウズは補助的に使っている状態。未だにメインはパソコンなんですね) ブックマークする際、タグをiPodで打ち込むのは、恐ろしい苦行なり。 (ブラインドタッチに慣れているので、思考と入力が一致しないのは、恐ろしく不便) パソコンでは、オレ専用のブ
Amazonからカーリル(全国図書館検索)へ飛ぶブックマークレット - Koonies/こりゃいいな！
⇒ greasemonkey版はコチラへ 全国4300以上の図書館から貸し出し状況が検索できてしまうという超絶便利！なカーリル。同じく普段からよく使ってるAmazon。 この２つをむすんじゃえ！と作ったのが今回のbookmarklet（ブックマークレット）です。 ★ スクリーンショット Amazon.co.jp： 必死のパッチ: 桂 雀々: 本 ↑ アマゾンの商品ページで実行すると、↓ カーリルの個別ページにジャンプします。 必死のパッチ | カーリル ★ インストール javascript:if(location.href.search(/[^0-9A-Z]([B0-9][0-9A-Z]{9})([^0-9A-Z]|$)/)!=-1){void(location.href='http://calil.jp/book/'+RegExp.$1);} ブックマークに登録するには一旦このページを
jQuery Mobile [基礎編]
日頃より楽天のサービスをご利用いただきましてありがとうございます。 サービスをご利用いただいておりますところ大変申し訳ございませんが、現在、緊急メンテナンスを行わせていただいております。 お客様には、緊急のメンテナンスにより、ご迷惑をおかけしており、誠に申し訳ございません。 メンテナンスが終了次第、サービスを復旧いたしますので、 今しばらくお待ちいただけますよう、お願い申し上げます。
Titanium mobile で開発を始める時に役立つ情報のまとめ | astronaughts.net
かなり熱くなってきた Titanium mobile 去年あたりから JavaScript で iPhone や Android のネイティブアプリが開発できる Titanium mobile が注目を集めています。実は僕も、この Titanium mobile を使用してアプリを開発しています。まだ何もリリースできていませんがっw Titanium mobile の情報は、有志の方々がドキュメント等を日本語でまとめてくださっているんですが、まだまだ細かい情報が少なく、分散してしまっているのが現状のようです。 そこで、自分が集めた情報を一度まとめてみました。これから Titanium mobile を触ってみようと思われる方は一度目を通してみてください。 Titanium mobile 入門関連 まず Titanium mobile を触る前に必ず見ておきたいサイトです。 チュートリアル
HTML5 Drag and Drop API についてのまとめ 〜その１ 概要〜 - COBALT
UIとして 例えばどこかのサイトでメモしておきたい画像があったとして、 それを自分のオンラインストレージに保持したいというシーンがあったとする。 これまでは対象の画像を右クリックして画像のURLをコピー。 そしてアプリ上に入力フォームを表示する操作の後、先程のURLを入力して決定ボタンを押す。 といった操作によって対象の画像をメモするフローが多数を占めているかと思う。 この操作は大きく見ると大体６ステップのユーザ操作が必要となる。 もしこの操作を Drag and Drop により実装すると、対象画像を指定領域にドロップする。 以上の操作で行うことが出来る。 という事で効果的なUIのためにも、新しいアプリの可能性のためにも、Drag and Drop API は素敵。 ＜ みんな知ってる 実装 まずはdrop領域に対して以下のイベントを付与する。 drop dragover dropを実現
node.js+socket.ioを使ったライブコーディングwebアプリを作ってる - すぎゃーんメモ
かれこれ2ヶ月くらい、ちまちまと作り続けていたのがようやく動くようになったかなーという状態になったので公開してみる。 http://www1216u.sakura.ne.jp/livecoder/ 公開停止しました 手元のMacでChrome, Safari, Firefoxでは動いていた。IEは知らない。 ソースはGithubに。 https://github.com/sugyan/live-coder 使い方 Twitterでsignin。 /edit のエディタ上でテキストを編集すると、 /view/ でリアルタイムに編集が反映される(こちらはread only)。 同じユーザのページを見ているユーザ同士でのテキストチャットが可能。 構成 Server node.js v0.4.1 ライブラリはnpmにて socket.io, express, ejs, oauth, configを
JS でプレゼン用スライド : web dimension maker
社会人になって初めて社外でプレゼンさせて頂く機会があり、折角なのでスライドを自作しました。 事前に kutil.js という DOM を操作するためのライブラリぽいものを自作していたので、これを使って作りました。( 発表で実際に使った時とは少し変わっていますが。) プレゼン テンプレート 動作確認 Win XP : FF3.6, Chrome9, IE6/7/8 Mac 10.6 : FF3.6, Chrome9, safari5 Opera は動かないです。。気が向いたら対応します。。JS 切っても大体は見れます。 CSS3 のアニメーションを使うのが時代なのかもしれませんが、色々な勉強会の報告を見させてもらうと、まだまだ JS で速度を追求した方が無難なような気がしています。 それにしても IE で JS の速度を出すのは困難です。。もっと修行が必要です。。
ドラゴンボールで学ぶオブジェクト指向
オブジェクト指向の基本亀仙流やつ鶴仙流など、世の中にはいくつかの流派（＝クラス）があり、それぞれの流派にかめはめ波やどどん波、舞空術などの技（メソッド）がいくつかあります。 実際に流派にある技を使う場合、技を覚えているZ戦士（インスタンス）が必要になります。 例）亀仙流を覚えた孫悟空を使ってかめはめ波を放って敵を倒す goku = new KamesenRyu("goku"); goku.shootKamehameha(teki); Z戦士によっては複数の流派の技が使えたり、自分の技を人に教えることが出来ます（継承）。 また悟空とクリリンのように同じ流派でも同じ技で違う性能を持っていたり、オリジナルの技を持っているなどの違いがあります。 クラスはセルを作るためのZ戦士達の遺伝子情報と言っても良いかもしれません。 例）セルを作りましょう。 class Cell extends Goku,Ve
jQuery.extend マニアックス - てっく煮ブログ
JavaScriptjQuery の extend メソッドは便利なんだが複雑で忘れてしまいがちなのでメモしておく。jQuery.extend の呼び出しパターンは次の４通り。$.extend([deep,] target, obj1, [obj2, [obj3, ...)$.extend([deep,] obj)$.fn.extend([deep,] obj)$(...).extend([deep,] obj)全てのパターンで第一引数に [deep,] がある。これはオプションの引数で true を指定するとディープコピーしてくれる。以下では分かりやすくするために deep オプションは省略した一覧を掲載する。$.extend(target, obj1, [obj2, ...)$.extend(obj)$.fn.extend(obj)$(...).extend(obj)だいぶシンプルにな
こてさきAjax:Stream APIで、カメラの映像をWebSocket ライブ配信 - livedoor Blog（ブログ）
ずっと、待ち焦がれていたAPIが、ついにテスト実装されました。ブラウザから、カメラのライブストリームを取得するStream API (仕様はWHAT WGのサイトに記載)です。 この機能により、Webアプリのポテンシャルが飛躍的に向上すると期待されます。例えば、ビデオチャット。 カメラから取得した映像データを、Websocket で相互に交換すれば、ブラウザのネイティブ機能だけで、簡単に実現できます。 この機能が、実装されたのは、Opera mobileのテクニカルプレビュー(for Android)。以下のサイトの[Android build]からインストール出来ます。 http://my.opera.com/core/blog/2011/03/23/webcam-orientation-preview また、詳しくは以下のブログ(WebOS Goodies)で紹介されています。是非、ご
Stream APIを使ってAndroidのカメラの映像をjavascriptでリアルタイム顔認識(難航中) - 最高のコンピューティング環境とは？
こてさきAjax:Stream APIで、カメラの映像をWebSocket ライブ配信 - livedoor Blog（ブログ） http://blog.livedoor.jp/kotesaki/archives/1667452.html 上記のブログで、Stream APIを使ってカメラの映像をブラウザで取得できると知ったので、下記のjavascriptで顔認識ができるライブラリを使って、カメラの映像の顔認識を試してみた。 JavaScript+canvasで顔認識 - 開発な日々 http://hinata.in/blog/20100227231617.html 実行 1. http://my.opera.com/core/blog/2011/03/23/webcam-orientation-preview にあるOpera mobileのテクニカルプレビューをインストール 2. op
WebSocketを使って重い処理の進み具合をリアルタイムにクライアントへ通知する - Csideのダイアリー
分割が可能な重い処理をサーバー側で実行して、処理の状況の変化をクライアント側で表示させたいとき（プログレスバーみたいなのを作るとき）、どういう方法がいいかちょっと考えてみた。問題は「どうやって処理の進歩状況の情報をクライアントサイドでリアルタイムに受け取るか」ということ。 まず最初に浮かぶのが、分割されたタスクを１つ行うAPIをサーバー側で用意して、クライアント側からJSのsetTimeoutなりライブラリのdeferredなり使って並行リクエストして、コールバックでプログレスバーを書き換える・・・みたいなのが浮かんだ。けれど、PerlにはCoroやAE::HTTPみたいな便利なものがあるし、「折角なので並行処理の制御はあくまでサーバー側でできないか？」と考えていた。 で、次に思い付いたのが、「分割されたタスクが１つ終わるたびにサーバー側からクライアント側に情報をpushする」こと。これを
僕がShibuya.jsに参加してきたたったひとつの理由 - As a Futurist...
今日は仕事を抜けだして、JavaScript の勉強会「Shibuya.js」に参加してきました。今回のテーマは「JavaScript でのテスト」ということで、@t_wada の t は Test の t として有名な和田さんはじめ、そうそうたるスピーカーの方々のありがたいお話を聞けて幸せでしたー。感謝！ ちょっとまて。 僕の仕事はそもそもサーバサイドで JavaScript とか一切書いてないし、JS に限らずそもそもテストとか書いてない。間違いなくあの場で僕が一番の場違い参加者だったでしょう。じゃあなんでそんな僕が、補欠者数が参加者数を上回る人気イベントにわざわざ参加したのかって？ これくらい未知の領域でも勉強会行くのは怖くないよ！ 新卒準備カレンダーに限らず、勉強会いいよいいよと言われてますね。でもやっぱりなかなか勉強会に行くというのは最初は腰が重いもの。自分がわかるのなんて ◯◯
Sapporo.jsでJavaScriptの成り立ちについてLTしてきました。 - I am bad at math
当初はNodeのことを5分で話すつもりでしたが、id:tricknotesの「時間はどのくらいあればいいですか？」という有難い申し出を受けて設定したのが20分。 さすがに手元の資料では足りないのでJavaScriptの歴史についても話してきました。 そちらについては資料すら作ってなかったのでホワイトボード使いつつ記憶を頼りに延々しゃべっていくという・・・さらに字が汚くて見えづらかったと思います。すみません。 JS history View more presentations from badatmath で、帰ってきてからざざざっと資料を作りました。 まずはECMAのトコまで。 JSってサイドストーリーがとっても多い言語なので突っ込んで調べるといろいろ新しい発見があり、ネタに事欠かない言語でもあります。そういうのを調べて行くとかなりJavaScriptに親近感が湧くようになるのでみなさん
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
サーバーサイドJavaScriptとHTML5アプリ
jQuery Mobile: Demos and Documentation