MacをJavaScriptの開発環境にするメモ - os0x.blog
以前は自宅も仕事もWindowsメインな環境だったんですが、仕事の方がでMac+英語キーボードな環境になり、ついでなので自宅もそれに合わせることにしました。 環境はMac miniの最新型で一番安いの(6月くらいに購入)とMacbook Airのやっぱり一番安いの(11月に購入)です。両方合わせて15万くらい。お手頃…なのか？どうでもいいけど、mac miniは1.3kgしかなくて、Macbook Airの13インチとほぼ同じ重さだっりします。miniデスネー。 ついでにWindowsのほうは2年半前に買ったCore2duo(Windows7アップグレード済み)で、当時そこそこハイエンドだったやつです(ちょうどMac miniと同じくらいのスペックだけどこいつは一体何kgあるんだろう…)。 以下、Macの開発環境をなるべく最近の流行りを取り入れてレポートします。 ブラウザ さて、マシンのセ
君は3つのリロードを知っているか？ - os0x.blog
はい、今さら聞けないウェブ開発者の基礎知識のお時間です。 ブラウザには3つの読み込みモードがあることはご存知ですか？ 2つくらいはわかるけど、3つ目が出てこないって方は少なくないかもしれません。 リロード 一番オーソドックスなのがブラウザのリロードボタンを押したときの挙動ですね。普通ですね。 スーパーリロード ブラウザによっては、スーパーリロードという機能を備えています。IEの場合Ctrl+F5(Ctrl+更新ボタン)、Firefoxの場合Ctrl+F5(Shift+更新ボタン)、Chromeの場合Shift+更新ボタン(Ctrl+Shift+R)などでスーパーリロードを呼び出すことができます。スーパーですね。 ページ遷移(リフレッシュ) 3つ目はちょっと良い名前が思いつかないのですが、リロードではなく、通常の画面遷移での読み込みのことです。アドレスバーにフォーカスしてenterするといっ
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
2011年のJavaScriptとかなんとか - os0x.blog
昨年に続いて、新春特別企画：2011年のJavaScript ─ウェブアプリ全盛の時代へ｜gihyo.jp … 技術評論社を書きました。 去年、当たったら(自分が)面白いよねくらいな気持ちで書いた「拡張」とか「サーバーサイドJavaScript」が見事に的中してて驚きました。特にNode.jsブームはすごいですね。 ってわけで今年は、Node.jsのどこが注目されているのかを書きました。あと、それに呼応してBigPipeにも言及。BigPipeはid:brazilが東京に来たときの飲み会で@kzysに教えてもらった。確かにかとーさんはいつも良いネタ持ってる印象があるなあ。 そういえば、今年の後半は色々忙しくてブログにあんまり書いてなかったけど、DeNA Technology Seminar #3 : ATNDでJavaScriptの未来みたいな話をしました。この時も@kzysが来ていた。@
JavaScriptのデバッグTips - os0x.blog
JavaScript Advent Calendar 2010 8日目担当のid:os0xです。 JavaScriptネタは案外範囲が広くて色んなネタがあるので、毎回が楽しみですね。 さて、私はデバッグをネタにしたいと思います。テストではなくデバッグです。誰かが書いたコードをメンテナンスしなきゃー、とか。jQueryプラグイン導入しようとしたけど、なんかうまく動かないーみたいなケースのおはなしです。 JavaScriptのデバッグは大変なので、多くの方が日々苦労されていると思います。なぜJavaScriptのデバッグが大変なのか少し整理してみましょう。 ブラウザ依存 まず、なんといってもJavaScriptはウェブブラウザ上で実行されるので、環境が一定ではありません。特定の環境だけを対象にJavaScriptを書くことは滅多にありません。PC向けではIE、Firefox、Chrome、Sa
HTML5ガイドブック - os0x.blog
Google API Expertが解説するHTML5ガイドブック 作者: 羽田野太巳,白石俊平,古籏一浩,太田昌吾出版社/メーカー: インプレスジャパン発売日: 2010/09/16メディア: 単行本（ソフトカバー）購入: 15人 クリック: 438回この商品を含むブログ (12件) を見る インプレスさんより、Google API Expertが解説する HTML5ガイドブックという本が2010/09/16に発売されます。 @futomiさん(Canvas、Drag&drop、FileAPI)、@Shumpeiさん(ApplicationCache、WebSocket、WebWorker)、@openspcさん(Video&Audio、Geolocation)に私(SVGと付録でECMAScript5とCSS3 Transitions)の4人での共著です。 内容はHTML5、というより
プログラミングに最適なConsolasとかInconsolataとか - os0x.blog
でInconsolataだけが紹介されているので、おまけ情報を少々。 Inconsolataというのは、Windows Vista/7 に標準で付属しているConsolasフォントに感銘を受けた作者がConsolasを意識して作ったフォントです。 ConsolasのほうはVista/7だけでなく、Visual Studioに付属してたりもします。一応、こちらからダウンロードもできるようです。 Download: Consolas Font Pack - Microsoft Download Center - Download Details Windows(少なくとも7では)ではConsolasのほうがより(ClearTypeの効きが)綺麗だと思います。というか、InconsolataはWindowsだとどうも今一つ…、ただMacやLinuxではWindowsでのConsolasと同じくら
script, styleタグ内のコードの書き方 - os0x.blog
# 最初にちょっと余談を。Chromium-Extensions-JapanのほうにChrome6 Betaの変更点を書きました。どうぞよろしく。 さて、scriptタグ内をHTMLコメントで括ってからJavaScript書くのって意味あるの? - Togetterの件に関して、関連ネタをいくつか書いておきます。。 まず前提として、scriptタグの中に直にコードを書くというのはできる限り避けたほうが良いです。とはいえ、ちょっとしたコードをいちいち外部ファイルにしていると読み込みのコストも馬鹿にならないので、インラインで書く事もよくあります。なので、以下は主に数行程度のコードをインラインに書く場合の話です。 scriptタグの中に直にコードを書くときはscriptタグに非対応なブラウザのために<！--で始め*1 // -->で閉じるというノウハウは今でも結構使われているみたいです。 しかし
Twitterで自分がブロックしているユーザーを確認するブックマークレット(とサービス) - os0x.blog
Who I Block? by @arikfrでSign in with Twitterボタンをクリック→Twitterのサイトに飛ぶのでそこで拒否か許可を選択。whoiblockに戻るとブロックしているユーザーが表示される。こちらでは下記のようなブラウザの再起動みたいな手間もなく割と安全に確認できるはずです。ただ、このサービスを私とは一切関係がないので本当に安全かどうかは(私は)保証できません。あしからず。 Twitterの仕様変更により、下記のブックマークレットは動作しません。 http://twitter.com/ を開いた状態で、下記をブラウザのアドレスバーに貼り付けて実行すると認証ダイアログが出るので、ユーザー名、パスワードを入力してください。サイドバーにユーザー名がずらっと出てくると思います(一人もブロックしてなければ何も出てきませんが)。 なお、一度認証を通すと、ブラウザを再
Safari拡張の自動更新方法 - os0x.blog
次のようなXMLを拡張子.plistで適当な名前で保存して、サーバーにアップします。 <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd"> <plist version="1.0"> <dict> <key>Extension Updates</key> <array> <dict> <key>CFBundleIdentifier</key> <string>net.os0x.autopatchwork</string> <key>Developer Identifier</key> <string>LAM47A73AC</string> <key>CFBundl
NinjaKit - os0x.blog
NinjaKit*1というChrome/Safari拡張を公開しました。 Chrome:Chrome Web Store - NinjaKit Safari:NinjaKit for Safari Source: os0x/NinjaKit · GitHub これはFirefoxのアドオンであるGreasemonkey相当の機能を実装することを目指しています。 今のところ、 GM_xmlhttpRequest GM_addStyle GM_getValue GM_setValue GM_deleteValue(new in ver 0.7) GM_listValues(new in ver 0.7) GM_log GM_openInTab GM_registerMenuCommand(Safari版は未サポート) Metadata @include @exclude @require @b
Safari拡張の作り方 - os0x.blog
Safari拡張をいくつか作って大体感覚は掴めたので、ざっくりと拡張の作成手順を解説してみます。 なお、Windows版で作業していますが、Macでもほとんど同じだと思います。 Safari拡張とは 最初に、Safari拡張とはなにか、について。Safari拡張はHTML/CSS/JavaScriptをベースに、ブラウザ側が用意したAPIを使ってブラウザを便利にするモジュールです。通常、JavaScriptだけではクロスドメインの問題など、実現できることに制限がありますが、その点を拡張用に用意されたAPIで補います。そのため、APIが用意されていない部分については対応できないという制限があります。しかし、開発のし易さ、ウェブとの親和性の高さからアイディア次第で便利で強力なツールとなるのがSafari拡張・Chrome拡張です。 なお、現状のAPIは暫定的なもので、ここで紹介するのもあくまで
Safari5の拡張作ってみた - os0x.blog
Chrome拡張をとりあえず3つだけSafari拡張に移植というか、どちらでも動くようにしてみました。以下からインストールできると思いますが、今のところ拡張は頻繁にクラッシュしますし、正式リリースされてないということは色々と問題が残っているということですから、そのあたりをご理解の上、ご利用は自己責任でお願いします。 http://ss-o.net/safari/extension/AutoPatchWork.safariextz AutoPatchWorkのSafari拡張版。いわゆるAutoPagerizeクローン。アイコンの色がおかしい？アイコンの色は制限されているみたいです。ちょうどいい機会なのでアイコンを廃止してページの下にラインを出すようにしました。 http://ss-o.net/safari/extension/SocialCounter.safariextz SocialC
W3C Widget とその応用を考える会でLTしてきました - os0x.blog
2010年5月27日開催 HTML5 TechTalkスペシャルにて、Canvasについてお話してきました。 発表に使ったスライド：Canvasでピクセル操作 by os0x デモはPixel Worksに(Opera Widgets用だけど普通のHTMLなので大抵のブラウザで動きます) 他の方の発表・資料はPast Events - html5j.orgに。 以下、適当に反省点などを箇条書きで。 この前のJSパーティクル崩しで使ったテクニックのネタ紹介のような感じです。 最適化前はこんなだったのがここまでになったよ。 (最初に移植した)kyo_agoさんよりAS版よりもJS版のほうがなぜかブロックが崩れやすいという指摘が。確かにそんな気がするのであとで調べるかも。 canvasが大きくなるとキツイので、ImageDataを分割して必要な範囲だけ再描画するなんて方法もやってたりします。JS
XMLHttpRequest Level 2 と wedata バックアップ - os0x.blog
http://ss-o.net/json/ 以下に対して、.htaccessで Header append Access-Control-Allow-Origin: *という指定をして、ヘッダーにAccess-Control-Allow-Originをつけているので、(*はすべてのドメインからのリクエストを許可) http://ss-o.net/json/wedataAutoPagerize.json http://ss-o.net/json/wedataLDRize.json などのファイルについてはFirefox3.5、Safari4、Google Chrome 2、IE8*1などのブラウザではクロスドメインでXMLHttpRequestを投げることができます。 サンプルコード javascript:(function(){ var xhr=window.XDomainRequest?
Google Chrome 2.0.170のGreasemonkeyとoAutoPagerizeについて - os0x.blog
Google Chrome 2.0.170から、Greasemonkey(というか、UserScriptsって言うべきか)の実装が変わり、oAutoPagerizeが動かなくなっていたので修正しました。本体、SITEINFO(必要であればSettingsも)全て更新の必要があります。 oAutoPagerize - 0xFF 以下、中の話。 今までは各スクリプトがグローバルスコープで実行されていましたが、2.0.107から各Scriptごとにスコープが作られるようになって、FirefoxのGreasemonkeyの実装に近くなりました。 Firefox版でいうunsafeWindowとして、contentWindow というグローバルオブジェクトが用意されています。(例えば、ページがjQueryを使っていた場合、 window.jQuery は undefined で、代わりに conte
AutoPagerizeで継ぎ足された部分に自分のスクリプトを適用する方法あれこれ - os0x.blog
以前からある手法から順番に見ていきます。 ページの高さの監視 setIntervalでページの高さを監視して、増えていたらAutoPagerizeが動いたとみなして処理を行う var THRESHOLD = 300; var _height = window.innerHeight; setInterval(function(){ if (window.innerHeight - _height > THRESHOLD) { // 処理 } _height = window.innerHeight; }, 300); メリット AutoPagerizeだけでなく、はてなダイアリー・ブックマーク、Twitterなどでのサイト側でのページの継ぎ足しにも対応できる デメリット THRESHOLDをいくつにするかなど、一概に決められない。タイマーをたくさん回すと重くなる。Floatしている要素を継
JavaScriptの勉強会資料を公開 - os0x.blog
私が講師役をしている社内向けJavaScript勉強会の資料をまとめて公開しました。 実践JavaScript - 株式会社ALBERT 社内勉強会資料 1回目を書いてからだいぶ間が空いてしまいましたが、その分6回分をまとめて、インデックスや見た目等々を整理してあります。 コードのハイライトには google-code-prettify - syntax highlighting of code snippets in a web page - Google Project Hosting を使用してみたのですが、すごく重かったので出力結果を静的に使っています。 オススメ回は実践JavaScript - JavaScript特有の問題・クロスブラウザなど - 株式会社ALBERT 勉強会資料でしょうか。特にクロスブラウザなDOMサイズ取得は自分でも良く参照してます。 間違いなどありましたら
JavaScriptは悪くない - os0x.blog
JavaScript の不思議な面白さ - Yahoo! JAPAN Tech Blog JavaScript の不思議な面白さ - 第二回 - Yahoo! JAPAN Tech Blog JavaScript の不思議な面白さ - 第三回 - Yahoo! JAPAN Tech Blog JavaScript の不思議な面白さ - 第四回 - Yahoo! JAPAN Tech Blog JavaScript の不思議な面白さ - 第五回 - Yahoo! JAPAN Tech Blog JavaScript の不思議な面白さ - 第六回 - Yahoo! JAPAN Tech Blog JavaScript の不思議な面白さ - 最終回 - Yahoo! JAPAN Tech Blog のシリーズがJavaScriptの面白さよりも、暗黒面ばかり伝えてしまっている印象で、連載モノだか
外部JavaScriptの動的ロード - os0x.blog
JavaScriptからJavaScriptを読み込むのは、(IEに対応する場合は特に)結構面倒です。 ちょうど昨日公開されたid:amachangのはてブにアクセスチャートを出す Greasemonkeyでは、こんな実装になっていました。 // for IE if (!document.evaluate) { var script = document.createElement('script'); script.src = 'http://svn.coderepos.org/share/lang/javascript/javascript-xpath/trunk/release/javascript-xpath-0.1.11.js'; document.body.appendChild(script); var callee = arguments.callee; var inter
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
