JavaScriptのthisの扱いが難しすぎる件 - Islands in the byte stream (legacy)
[再々追記] (o.f = o.f)()の結果は右辺値・左辺値というルールで説明できるようです。コメント欄参照のこと。 [/再々追記] [再追記] これの解釈はどうすれば…。 [/再追記] [追記] ([o.f][0])() -> o.f は ([o.f, "a"][0])() とすると分かりやすいが、単にレシーバがArrayになっているだけらしい。 また (o.f)()と(tmp = o.f)の違いはブコメで指摘されているとおり、 o.f が (C++的な意味での)参照を返すと考えると理解できる。 [/追記] だれかこの現象を説明できる人はいませんか。私には難しすぎます。 In node: #!/usr/bin/env node var o = {}, tmp; o.f = function() { console.log(this.toString()) }; o.toString =
30分、JavaScriptで作るWebサービスのモックアップ - ゆーすけべー日記
Instagramは日本のユーザーも多く、日常を切り取った写真がほとんどで、 またお洒落なものも混じっているのでたまに眺めると気持ちがホッコリしたりします。 特定のキーワードでInstagramの最新の写真を検索したい時があります。 例えば、みんなが今どんな「ご飯」を食べているのか、今日の「日の出」はどのような具合なのか、 がInstagramの写真を通して分かるかもしれません。 Instagramの写真検索サービスを探してみると、 Instagram自身が検索機能を提供してないので他の第三者が作ったサービスがいくつか出てきます。 使ってみたところ、もう少し自分で見た目やら機能を変えてみたいなーなんて思いました。 そこで、「Instagramの今の写真を検索できるサービス」といういわばWebサービスを作りたい欲求にかられます。 今回はこのようなちょっとした欲求から考えた「Webサービスのモ
JavaScript 3DレンダリングエンジンのThree.jsを試す
こんにちは。 KRAYアルバイトの浅海です。 今回は、最近ちまたで噂のThree.jsで遊んでみようとおもいます。 http://github.com/mrdoob/three.js webgl対応のブラウザで見ている方は、右上に3Dのボックスが表示されていると思います。 Three.jsを使えば、このようなことを簡単にJavascriptで実現できるのです。 半信半疑で使ってみたところ、たしかにThree.jsでは、3D特有の行列計算や数学的思考をせずとも、3Dを表示、操作することができました。 「ちょっとのプログラムで3Dができる。」 この面白さを皆さんに届けたいです。 目次 立方体を表示する 光をあてる テスクチャを貼り付ける マウスで回転させる マウスで移動させる クリック判定する Three.js web上には、HTML5のcanvasを利用した様々なサンプルページやアプリケーシ
From jQuery to JavaScript: A Reference | Envato Tuts+
Whether we like it or not, more and more developers are being introduced to the world of JavaScript through jQuery first. In many ways, these newcomers are the lucky ones. They have access to a plethora of new JavaScript APIs, which make the process of DOM traversal (something that many folks depend on jQuery for) considerably easier. Unfortunately, they don't know about these APIs! In this articl
高度な表現力を実現したJavaScriptフレームワーク·toxiclibs.js MOONGIFT
toxiclibs.jsはtoxiclibsをJavaScriptにポーティングするプロジェクトです。 コンピュータでプログラミングされたデザインを描き出すフレームワークにProcessingを用いたtoxiclibsがあります。それはJavaで開発されているのですが、何とJavaScriptにポートしたプロジェクトが登場しました。それがtoxiclibs.jsです。 デモを実際に試した動画です。以下はそれらの解説です。 こんな感じにボールが舞い降りてきます。 マウスの動作に追従して円の大きさが変化します。 マウスを動かすと色が変化します。 鎖を引っ張って動かします。 クリックするとアニメーションしながら一直線になります。 マウスの動きで変化します。 渦巻き模様がマウスの動きで大きくなったり小さくなったりします。 マウスで適当に引いたラインがスムーズに描かれます。 クリックする度に三角形が
リッチなWebアプリケーションを開発するフレームワークSproutCore後継プロジェクト·Ember.js MOONGIFT
Ember.jsは旧SproutCoreの後継プロジェクトです。リッチなWebアプリケーションフレームワークになります。 SproutCoreがFacebookに買収されました。SproutCoreはリッチなWebアプリケーションを開発できるフレームワークですが、今後の開発についてはEmber.jsとして継続される模様です。 スマートフォンに特化している訳ではありませんが利用できます。 デスクトップ向けでHello World。 コードを見ると分かりますが、HTMLを直接ではなく、テンプレートです。 デモのTodoアプリです。 登録したりチェックして削除したりできます。データは保存していないので再読み込みすると消えます。 Todoアプリのコード。こちらはビュー側です。 こちらはコントローラ、モデル側。コードは見やすいです。 Ember.jsはMVCに分かれており、コードも見やすく使い勝手が
[JS]ドラッグで移動も可能なモーダルウインドウを作成する軽量スクリプト -Simple Modal
アラート、コンファームだけでなく、AJAXコンテンツ、画像、動画など表示するモーダルウインドウを実装するスクリプトを紹介します。 Simple Modal [ad#ad-2] Simple Modalの特徴 Simple Modalのデモ Simple Modalの実装 Simple Modalのダウンロード Simple Modalの特徴 モーダルウインドウを簡単に生成します。 生成したモーダルウインドウは、ドラッグ操作で移動可能です。 コールバック関数を備えています。 画像や動画、AJAXコンテンツにも対応しています。 Simple Modalのデモ デモではSimple Modalのさまざまな実装例があります。
複数要素の関連をビジュアライズできるライブラリ「arbor.js」:phpspot開発日誌
arbor.js 複数要素の関連をビジュアライズできるライブラリ「arbor.js」 JavaScriptベースですが、Chromeで見るとなめらかに動作して良い感じです。 動きがカッコイイのでデモなんかで見せるとよい印象を得られるかも。 更に子要素をアニメーション 階層的にデータを現せます 関連エントリ HTML5のキャンバスと連動させて音声をビジュアライズしたデモ ブログのプチリニューアルに使った技術要素色々 HSL形式のカラーがブラウザ上で作れる「HSL Color Picker」
社内でbackbone.js with Rails勉強会を開催しました | mah365
backbone.js + Rails3.1で作成したサイト「best vimrc」を題材にSonicGarden社内で勉強会を開催しました。ustreamされながら話すのは緊張しますねー。。 結果的に「クライアントサイドのコードを無理にMVCで書く理由が分からない。もっとシンプルで分かりやすいアーキテクチャがあるのでは？」という話に落ち着きましたが、サーバ側がRailsでフルAjaxなアプリを作る際には、backbone.js + Railsはgemが充実しているので良い選択肢なのかなという気がしています。 Getting Start backbone.js with Rails 次はknockout.js + Sinatraの組み合わせを試してみよう。 「best vimrc」のソースコードはgithubにあげてありますので、興味のある方はご覧下さい。
はてなグループの終了日を2020年1月31日(金)に決定しました - はてなの告知
はてなグループの終了日を2020年1月31日(金)に決定しました 以下のエントリの通り、今年末を目処にはてなグループを終了予定である旨をお知らせしておりました。 2019年末を目処に、はてなグループの提供を終了する予定です - はてなグループ日記 このたび、正式に終了日を決定いたしましたので、以下の通りご確認ください。 終了日: 2020年1月31日(金) エクスポート希望申請期限:2020年1月31日(金) 終了日以降は、はてなグループの閲覧および投稿は行えません。日記のエクスポートが必要な方は以下の記事にしたがって手続きをしてください。 はてなグループに投稿された日記データのエクスポートについて - はてなグループ日記 ご利用のみなさまにはご迷惑をおかけいたしますが、どうぞよろしくお願いいたします。 2020-06-25 追記 はてなグループ日記のエクスポートデータは2020年2月28
HTML5とSilverlightを扱えるMS製動画プレイヤー実装用JSフレームワーク「Player Framework by Microsoft」:phpspot開発日誌
HTML5とSilverlightを扱えるMS製動画プレイヤー実装用JSフレームワーク「Player Framework by Microsoft」 2011年11月25日- Player Framework by Microsoft HTML5とSilverlightを扱えるMS製動画プレイヤー実装用JSフレームワーク「Player Framework by Microsoft」 動画プレイヤーにはSilverlightを使っているけど、スマホ対応なんかでHTML5にしたいみたいなニーズに応えられそうです。 両方を扱える同じAPIが存在しているので１個覚えれば両方使えるのも特徴 プレイリストなんかにも対応しているそうです 関連エントリ HTML5で色々作るチュートリアル＆チートシート HTML5で超リアルなページめくり効果を実装するチュートリアルとサンプル HTML5でプログレスバー付き
BlobBuilder で 外部ファイルの要らない WebWorkers はつくれる - つまみ食う
WebWorkersで別タブ選択中もきっちり動く無敵タイマーをつくる - つまみ食う http://d.hatena.ne.jp/mohayonao/20111108/1320756534 先日書いたこのエントリーで、別タブを選択したときも精度が落ちないタイマーを作った。 でも、外部ファイルが必要だったのでライブラリ的なものに組み込むときにパスを自己解決できないという問題があった。 // 問題点：muteki-timer.js の設置場所が制限される // もしくはライブラリの外から muteki-timer.js の場所を教えてあげる必要がある var url = "muteki-timer.js"; var timer = new Worker(url); 今回は外部ファイルを使わない無敵タイマー。以下手順 BlobBuilderっていうのを使ってコードを組み立てる。 すごいと評判*1
createObjectURLがすごい件 - プログラムモグモグ
最近またLocal Player (Chrome Player)を実装しなおしています. 一応説明しておくと, Local Playerは, 完全にローカルで動作する音楽プレイヤーです. シンプルさを求め(実装がめんどくさいだけ), 操作しやすく(これは大事), 良い感じのプレイヤーです. 半年前に, ソースコードがスパゲッティになって, 開発を中断していましたが, 最近また書きなおし始めたのです. 音楽プレイヤーをブラウザー上で実装するのには, 音楽ファイルをJavaScriptで読み込まなければなりません. そこでHTML5ですよ！！！ <audio src="url/to/musicfile.mp3" type="audio/mp3" /> みたいな感じで, 音楽を再生できます. 詳細は他のページに譲ります. さて, 音楽ファイルを再生するには, ローカルファイルからurlをaudi
今時のブラウザが例外発生時にどんな情報を出しているのか調べてみたよ - latest log
本文には反映していませんが IE10で Error#stack が実装されました http://blogs.msdn.com/b/ie_ja/archive/2012/05/17/diagnosing-javascript-errors-with-error-stack.aspx JavaScript では例外が発生すると例外オブジェクトが生成されます。 この例外オブジェクトの仕様は標準化されておらず、各ブラウザで実装が異なります。 最新のブラウザで JavaScript の Error オブジェクトや Error から派生しているオブジェクトが持つ属性を調べてみました。 Safari Stable (Safari 5.1.1) try { throw new Error("hoge"); } catch (err) { var i, ary = []; for (i in err) {
JavaScriptで全角/半角判定 — shibu.jp
Note 本コンテンツの一部は、業務時間内に調べた内容を含んでおり、株式会社ディー・エヌ・エーの提供でお送りしております。 とある理由で全角、半角の判定が必要になったのですが、簡単技(SJISなどに変換してバイト数計測など)はつかえなかったため、自作する方向で調べて見ました。 Pythonには unicodedata.east_asian_width() という関数があり、 エキスパートPythonプログラミング というすばらしい書籍の日本語オリジナルの文字コード関連の章によると、この関数が "F" 、 "W" 、 "A" (ただし、Aはフォントにより変わる曖昧な文字)が返すと全角としてカウントすればよい、と書かれています。 こちらを参考にJavaScriptの全角/半角判定を行った幅計算を実装してみます。 まずJavaScriptを知る¶ JavaScriptは内部では、UTF-16とい
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
米Microsoft、Excelによるマッシュアップ技術を公開 
Draw a Stickman
5509.me
javascriptで作った、フルフラッシュのようなサイト教えてください。
HostMetro.com