最強のJavaScript IDE 「WebStorm」を使ってみた
JavaScript対応のIDEをまとめてみたの続きのようなもので、その中で紹介していたWebStormが素晴らしいので別途紹介。 WebStormはHTML(5)+CSS+JavaScriptに対応してるIDEで、Windows, Mac OS、Linux上で動作します。 有料のソフトウェアですが、オープンソースライセンスがあったり体験版は45日間使えるのでとりあえず試してみましょう。 この記事の続編(アップデート版)を書きました 特徴 とにかく膨大な機能が載ってるので全てを紹介するのは無理があるため、凄いと思ったところを掻い摘んで紹介。 主にJavaScriptを書くエディタとして使っていますが、CSSやHTMLも普通のIDEより書きやすいです。 基本的にWebStormで日本語に関する問題は少なめです。一部IMEの変換候補が出てくる場所がずれたり、プラグインで日本語がダメだったりする
Canvas + File API + Drag&Drop API で Instagram みたいな画像フィルターを作ってみた - hakobera's blog
Instagram の画像フィルターみたいことを HTML5 (Canvas + File API + Drag&Drop API) で実装してみました。 Instagram みたいなの - jsdo.it - Share JavaScript, HTML5 and CSS 動作するブラウザは FireFox 3.6、Chrome 8 開発版です。(Chrome 7 は File API はサポートしていますが、どうやら iframe 内では動作しないため、上記 jsdo.it 上では動作しません。) できること これを こんな風に加工できます。 大学時代に画像処理の研究をやっていた身としては、ブラウザだけでもここまで出来るようになったのか、と少し感慨深いです。 やっていること Drag&Drop API で画像ファイルを取得 File API で画像ファイルを DATA URI 形式に変
Embedding SVG Examples
Above are various methods of embedding SVG in an HTML page (by reference, not inline). The <object>, <iframe>, and <embed> elements all have essentially the same effect: they establish a new browsing context, with its own DOM and scripting context, and interactivity and declarative animation work as defined in the SVG file. The <img> element displays the SVG, and declarative animation runs, but fo
HTML5 Canvas用の描画フレームワークを自作してみる - KAZUMiX memo
HTML5 Canvas Sprite test （最近のブラウザなら動くと思う。IEは9なら動く? Google Chromeは爆速） HTML5 Canvasに関しては、IE9が出てから本気出す！…つもりだったんだけど、その前に仕事でやってきて、いきなり本気を出さざるを得なくなったKAZUMiXです。 実際にCanvasを使ってみたら思った以上にローレベル！Flashみたいなものを作ろうとすると、自前で深度管理やらなにやらやらざるを得ない！ というわけで、Flash(AS3)で言うところのSpriteの仕組みが欲しくて作ってみたサンプルが上のものもです。 Spriteとして実装しているメソッドはaddChild, removeChildのみｗ とはいえ親子、兄弟関係に対応するだけで、楽しくなりますね。 サンプルのJavaScriptソース sprite.js (utf8) 追加したい機
JavaScriptのベストプラクティス大会 jsEdu
詳細は"10 Free Copies of “JavaScript Patterns” from O’Reilly Books | Nettuts+" http://net.tutsplus.com/freebies/books/10-free-copies-of-javascript-patterns-from-oreilly-books/ 要は #jsEdu つけてJavaScriptのTips投稿してね。の検索メモ。 追記:一部取り出して日本語にしてみました。 続きを読む
Titanium - JavaScript で iPhone/Android アプリを作る - naoyaのはてなダイアリー
Titanium Mobile は JavaScript で iPhone/Android のアプリ (not Webアプリ) を開発できる開発環境。詳しくは Titaniumで始めるモバイルアプリ作成の基礎知識 (1/3)：Web技術でネイティブアプリを作れるTitanium（2） - ＠IT などに解説があります。 少し時間があったので、JavaScript で作るというのがどんな感じか試してみました。作ったアプリは こんな感じで TableView があり、選択すると WebView でアプリ内ブラウザが立ち上がる、ブラウザはツールバーで「戻る」や「リロード」が可能。あとはタブコントロールがあったり･･･という単純なもの。初期起動画面のサイトリストは、HTTP でローカルに立てたサーバーから JSON で読み込んでいます。 Web上のドキュメントを見ながら2, 3時間試行錯誤で一応の
JavaScriptにおけるローカルファイルアクセス権限のポリシー - 発火後忘失
以下の記述はjQueryを利用したときに発見したものなのですが、XMLHttpRequestももちろん影響を受けますし、その他にもJDKのJavadocなどframeで別ページを開いているようなものが、別ウィンドウ(別タブ)で表示されるようになる、といった変化が動作に現れるようです。 Web系の技術って、(開発に携わっていると大丈夫なんでしょうけど、)Webに書いてあることは仕様が決まったり当時騒がれてた時の情報だったりして、現在の仕様がどうなってるのかフォローアップするのが中々大変ですね… JavaScriptにはsame-origin policy(オライリーのJavaScript第5版では”同一出身ポリシー”と訳されている)というものがある、ってのは理解していました。しかし、これってローカルファイルについては何も言っておらず、実際はどうなっているのか疑問でした。で、今回ハマったのでそ
canvas の getImageDataが少しめんどくさい（特にローカルで動かす場合） - 地平線に行く
egg (JavaScript Effect Library)にモザイクイン・モザイクアウトを追加しました。 egg とは？ HTML5 の canvas を使った画像エフェクトライブライブラリです。 まだ数は少ないですが、結構きれいなエフェクトがかかります。 Firefox, Google Chrome をご利用の方は、ぜひ下記のページからサンプルをご覧ください。 Ver0.1.1の変化点 モザイクイン・モザイクアウトを追加 ダウンロードとサンプルは こちら(egg (JavaScript Effect Library)) からどうぞ！ 今回追加したエフェクトで、初めて canvas の getImageDataを使いました。 ピクセル単位で色を扱えて便利かなーと思ったんですが、少し扱いがめんどくさかったです。 1．ピクセルデータはキャンバスからしか取得できない 画像から直接 getIm
CanvasタグとJavaScriptで3Dのデモを作ってみました | ClockMaker Blog
HTML5というわけではないですが、CavasタグとJavaScriptを使って3Dのデモを作ってみました。 デモを見る ソースコード (［右クリック］→［ソースを見る］を選択) こういうのを見れば「HTML5すごい、Flashいらない」と思う人もいるかもですが、冷静にファーストインプレッションを。同じものを以前Flashで実装したことがありますが（Papervision3D演出サンプルNo.01:羽ばたく蝶々）、両者のデモを比較することでメリット・デメリットが見えてきます。 ＜追記：2013年9月3日＞ Three.jsの最新版rev 60にアップデートしてみました。3年前に作成したときはrev 17だったのですが、別物のライブラリと言わんばかりにほとんどAPIが変わってしまっています。ちなみにTypeScriptで書きなおしています。 デモを見る ソースコード (TypeScript)
[js] webページ中のリンクをクリックするUIを改善する実験 - 生活。
次のような例を考えてみる。 webページを見ていて、ページ内のリンクを辿って他のページへ遷移する マウスの場合 マウスをリンクの上に持って行く マウスカーソルの形が変わることを確認する（変わらないかも知れないが） クリックする タッチパネルのインターフェースがあれば次のようになる タッチパネルの場合 目的のリンクの上をタッチする マウス、タッチパネルのいずれにおいても、目的のリンクの上をクリック（タッチ）する必要がある。僕はよくわからないが、老眼が進行すると小さいリンク要素を俺様がなんで頑張ってクリックせねばならないのだ!!!となる可能性がありそうなので怖い。また、今もiphoneのsafariでPC用のwebページを見る時に、よくクリック（タッチ）に失敗することがあり、なんとかしたい。 ただ、どうすればいいのかわからないので、とりあえずGreasemonkeyで実験してみた。 http:
![[js] webページ中のリンクをクリックするUIを改善する実験 - 生活。](https://cdn-ak-scissors.b.st-hatena.com/image/square/606ff252ee15e872474ed7a97fa3d663c6ad21f8/height=288;version=1;width=512/https%3A%2F%2Fogimage.blog.st-hatena.com%2F13208692334729896483%2F12704591929883951163%2F1338491075)
近くのリンクをクリックするnewmouse.user.js - hitode909の日記
ブラウザで，リンクとかボタンとかをクリックするときに，マウスカーソルをリンクの上まで持っていくのがめんどうで，困ってた． なにもないところでクリックしたときは，勝手に近くのクリックできそうな要素をクリックしてくれればよいと思ったので，Greasemonkeyを書いた． newmouse.user.js — Gist 動画 newmouse.user.js - YouTube 使い方 Greasemonkeyをインストールすると，旧来のマウスカーソル(旧マウスカーソル)と別に，マウスカーソルがもう一個表示されるようになる(新マウスカーソル)． 新マウスカーソルはせわしなく旧マウスカーソルの周りを動きまわって，リンクを見つけると，新マウスカーソルがリンクに張り付いて，クリックできますよ，という感じになる． 旧マウスカーソルが，なにもないところで(具体的には，aや，buttonなど以外の上で)ク
コア・JavaScript ( JavaScript. The Core. ) - oogattaの勉強日記
この文章は、 Dmitry A. Soshnikov さんの、 ECMAScript に関する優れた記事 "JavaScript. The Core." を許可を得て翻訳したものです。世の中に、 JavaScript のブラウザ API や、実装系に関する記事は多々あれど、 ECMAScript の仕様に則って、ここまで詳しく説明してくれている記事は殆ど無いと思います。今回は翻訳できておりませんが、文中で参照されている Dmitry さんの ES3 シリーズも、読み応えのある（ ECMAScript3 の仕様の副読本としても読める）素晴らしい内容ですので、是非チャレンジしてみてください！（ご要望があれば訳します翻訳許可を頂いたので、この記事内で参照されている章から逐次翻訳を進めます！）。 ちなみに Dmitry さんは、計算機科学や数学にも明るい方でらっしゃいます。が、私は違います。極力
Twitterの脆弱性騒動でブラウザに感謝した
Business Media 誠で編集長をしています。本ブログ＆Twitterでは、Webメディアや紙メディア、ネットビジネス、携帯電話、非接触ICなどについての話題が中心になる予定。 昨日（9月21日）、Twitterのタイムラインが大騒ぎになっていました。明らかに本意ではないはずの数種類のTweet（むきだしのJavaScriptのコード）が大量に流れていたのです（＝私がフォローしている人たちがずいぶん被害にあっていた、ということ）。 このJavaScriptがなかなか強力でして、Webブラウザで http://twitter.com/ にアクセスし、Twitterにログインした状態でコード上にマウスを載せると、意図しない投稿やRTをしてしまう、というもの。本来TwitterではJavaScriptを含む投稿はできないようになっていたはずなのですが、Twitterの脆弱性を利用して悪意
JavaScript関係のツールまとめてみた | Web scratch
最近使ってたりするJavaScript関係のツールまとめてみた。 主にWebサービスです。 Global is the new private JavaScriptライブラリの名前空間汚染をチェックするツール。 元々載ってるもの以外でも*Analyze your own scripts!*から調査したいライブラリを追加できる。 jsFiddle ブラウザ上で HTML / CSS / JavaScript の実行結果を表示できる。 Embedコードもあるので、ブログにjsやCSSなどを載っけるのに便利。 エディタ機能も整形、シンタックスハイライトしてくれるので使いやすい。 HTML5のコードを使うにはInfoからDTDを変更してから使う。 類似:MooShell Gist – GitHub gistです。コードスニペット共有サービスです。 Greasemonkey貼るときgist fill
サイボウズで学んだこと - IT戦記
はじめに 2010 年 9 月 15 日を持ちまして、サイボウズ・ラボを退職いたしたました。 報告も兼ねて、久しぶりにブログを書いてみたいと思います。 （写真はゆうすけべーさんです） この会社に入って、たくさんの学びと思い出がありました。 その一つ一つをまとめていければ、素晴らしい記事になるのかもしれませんが、僕は文章が苦手です。 ですので、うまく退職のエントリを書き上げることができません。 言葉にできない。そんな感じです。 なので、このエントリはサイボウズ・ラボやサイボウズ本社の仲間たちへのありがとうの気持ちをこめて、自分らしく最後まで JavaScript のことを書きたいと思います。 サイボウズでの最後の仕事 僕にとって、サイボウズでの最後の仕事は「JavaScript で新しいユーザーインタフェースを作ること」でした。 そして、その中で始めて複数人による大規模な JavaScrip
valueOfとtoStringとToPrimitive - os0x.blog
valueOfとtoStringメソッドの水深43cmぐらいの深さの話 - 三等兵のもう少し深いお話。コメント欄に書こうかとも思ったけど、最近ブログ書いてない気がしたのでちゃんと記事にしてみる。 まずは問題です。次のコードを実行したときにtrueかfalseのどちらがalertされるかそれぞれ当ててみてください。 var date = new Date(); var date_string = date.toString(); var date_value = date.valueOf(); alert(date == date_string); alert(date == date_value); true, true false, false true, false false, true (難しい問題ではないと思いますが、)この問題の答えは最後に。 続いて、もっとシンプルな問題です。
javascript - Mathを再発明してみた : 404 Blog Not Found
2010年09月14日06:30 カテゴリMathLightweight Languages javascript - Mathを再発明してみた 「基本というからには四則演算で三角関数実装しないとねー」と思いつつ書いていたら… C言語による最新アルゴリズム事典 奥村晴彦 [javascript]三角関数の基本 Math.random()を除いてMathを全部再発明しおえたので。 多倍長演算バージョンを作る時の下ごしらえにもなるかも。 下ごしらえ 仕様は Math - MDC アンチョコはもはや最新というにはあまりに古い、しかし代わりなき「C言語による最新アルゴリズム事典」。低レベルな車輪を再発明する人必携! 初期化と定数 定数の精度はおおげさに。 MyMath = {}; MyMath.E = 2.718281828459045235360287471352662497757; MyMat
JavaScript初級者から中級者になろう
JavaScript。「ジャヴァスクリプト」と読みます。主にWebページに動きを与えるものです。 現在では結構多くのページに使われていますが、その多くはとてもレベルが低く不適切なものです。もっと質の高いJavaScriptを使える人が増えるといいなという思いから、このページを作りました。 初級者の基礎知識 本文を理解するにはJavaScriptの知識がそれなりに要るので、JavaScriptがそもそもあまり分からない人は、この辺を読んでみましょう。 基礎第一回 基礎第二回 基礎第三回 基礎第四回 基礎第五回 基礎第六回 第一章 オブジェクト オブジェクトとは オブジェクトの実体 配列のコピー オブジェクトと関数 第二章 DOMの基礎 HTMLと木構造 DOMとは 基本的な操作とテキストノード 木構造の操作：ノードの除去 木構造の操作：ノードの追加 木構造の操作：さまざまな機能 木構造の操作
Dynamic favicons
Google Calendar released a new favicon which prompted a few mentions from friends on Twitter. The first, probably more important was from Cennydd: New Google Calendar icon most un-Googley. I like it. Then Danny pitched in with: I see Google Calendar has a new icon. They could use the current date rather than "31" though So let's fix that shall we? How it's done The trick here is to use a canvas el
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
event.preventDefault() と event.stopPropagation() の違い - @kyanny's blog
