Loox Uと初音ミクで行こう！

スマートフォン向けサイトのソースコード、どうやって見ていますか どうも、お久しぶりです。 最近、全然こちらのブログに書くネタが無くて全くブログを書かない人になっちゃいました。 もっとも、趣味のとあるソシャゲに関しては毎日更新をしているので（文章力が上がるかどうかは別として）、アウトプットはギリギリできている感じです。 ただ、本質的なアウトプットでは無いので、今回はちゃんと意味があるアウトプットが出来るので、個人的には嬉しいです。 閑話休題 さて、最近は、スマートフォン向けサイトをデバッグする事が多いのですが、そのページのソースコードを見るのに四苦八苦していました。 普段は、Google Chromeの開発ツールを立ち上げて、こんな風にしてデバッグしています。 分かりますでしょうか？ この状態で、メニューの「ページのソースを表示」を選ぶと、PCサイト向けのHTMLが表示されます。 巷のテクニックですと、 view-source: を使うみたいですが、この手法すら知りませんでした(´・ω・｀) 今までどうやっていたかというと、わざわざSafariを立ち上げて、そこでソースコードを表示すると、うまい具合に開発ツールにスマートフォン向けのソースコードが表示されるので、それを使ってほげほげするみたいなやり方をしていました。 リソースタブを使おう Google Chromeの開発ツールには、リソースタブがあります。 これを活用する事で、スマートフォン向けサイトのソースコードを簡単に見ることが出来ます。 こんな感じです。 Framseの直下にあるhtmlを選択すればばっちり見えるという訳ですね。 多分、お手軽さでは、view-source:の方が便利なんだと思いますが、こういう方法もありますよーって事で。 以上です。

前書き JavaScript Advent Calendar 2011(フレームワークコース)  8日目担当 ArcCosineです。 JavaScriptのフレームワークは数多く存在しますが、国内産で優秀な機能を持つuupaa.js(Ver0.8)についての解説もどきを書きたいと思います。 本エントリでは最後のTipsにHTML5のCanvasを用いているため、IEでは正常に表示できない可能性がありますが、仕様ですのでご了承ください OperaかGoogle ChromeかFirefoxかSafariでの閲覧を強くおすすめします。 excanvas.js?(∩ ﾟдﾟ)アーアーきこえなーい

タイトルのとおり Google Chromeは大変速いブラウザですが、その速さ故か、たまにDOMContentLoadedが発生しないケースがあります。 以下のようなコードで再現確認できます。

いつもの前振り 初めましてもそうでない方もお元気ですか。 元気があれば何でも出来る！出来ません。 JavaScript Advent Calender 、１３日目担当のArc Cosineです。 今回はJavaScriptのネタを何か書こうと思いましたが、どうせならツールの一つくらい作ったほうがいいだろうと言う事で土日に突貫工事で作ってみました。 Extension Maker http://www.tunsns.net/ExtensionMaker/ 時間切れで間に合いませんでしたが、Opera拡張だけは作れるようになっていますので、試してみてください。 チュートリアル トップヘアクセスしたら右下にある「今すぐ試してみる」をクリックしましょう。 そうしますと、基本情報を入力する画面が出ますので、必要な情報を入力してください。 今は入力チェックしていませんが、将来的にはちゃんとチェックするようにします。 次に、コードを入力する画面が出てきますので、ここにコードを貼り付けましょう。 Operaで動くUserScriptを試しに貼ってみると良いでしょう。 例えば、僕が昔書いたcolorful_favstarとかね！ コード貼っておきますね。 コピペする場合は、view plainをクリックすると楽にコピペ出来ますよー。view plainの文字、薄くて見づらいけれど。 // ==UserScript== // @name Colorful Favstar.fm // @namespace http://moco.nond.es/ // @description Change tweet color and font size by favourites count like Favotter.net. // @version 0.1.1.20100808 // @include http://favstar.fm/* // @include http://ja.favstar.fm/* // @include http://de.favstar.fm/* // ==/UserScript== (function(doc){ ...

ヒゲの土管工経由 で、 Moonflower JavaScript Benchmark 1.5.0 alpha 1 の存在を知ったので、ベンチマーク取りました。 条件は下記の通り ・Opera,Chrome,Firefox,IE,Safariを全画面表示で起動 ・開いてるタブはそれぞれベンチマーク用ページのみ ・CPU:Ahtlon64 X2 3800+(2.00GHz) Mem:1.96GB OS:Windows XP Pro SP3 ・テストは3回実施した平均点 結果 ・Totalで見るとGoogle Chrome ・一部のテストではOpera、Safari ・Firefoxもまぁまぁ、早い ・IEは論外 参考画像 結果表 n/a Opera 10.50 build 3218 Chrome 4.0.302.3 Firefox 3.6 IE 8.0.6001.18702 Safari 4.0.4(531.21.10) Simple loop 0.67 0 0 0.67 0.33 Decimal calculation 1 4.67 2 31.67 1 RN generation 8 1 3 23.33 6.33 String process 4.33 4.33 8.67 31 7 Regex 46.67 52.33 288.67 363 92 Eval 30.67 40.33 108.33 411.33 30.67 Date 274.33 36.67 251.33 159.67 79.33 Document manipulation 29.33 12.67 47.67 141.33 23.33 Rendering 133.67 133.67 148 200.33 152.33 Total 527.67 285.67 857.33 1361.67 391.67 Opera最強伝説はまだ始まったばかり！ Opera先生の次回作にご期待下さい！

勝手にMIT Licenseとかどんだけーって感じですがががが。 偉大なる元ネタ Popup Nico Dict for Greasemonkey http://userscripts.org/scripts/show/48300 劣化版 Popup Nico Dict for Iframe for Greasemonkey http://userscripts.org/scripts/show/50681 今後はこっちをちょこちょこ修正していければと思います。

前回のエントリで書いたように、Google Chromeで動くマウスジェスチャスクリプト書いた。 githubへコミットしておきました。 今回はcodereposへのコミットはなし。 だって、Google Chromeでしか動作確認していないんだもん(爆) って事で、 人柱募集中 Google ChromeでUserscriptを実行できるようにするには、以下のエントリを参考にして下さい。 Loox Uと初音ミクで行こう！: Google ChromeのDev版でGreasemonkeyを動かす http://looxu.blogspot.com/2009/01/google-chromedevgreasemonkey.html 右クリック後のアクションは以下の4パターン。これ以上複雑なことはちと難しいかも……。 L：戻る R：進む DR：タブを閉じる UD：タブを更新する コードを見ると分かるとおり、どっかのスクリプトからぱくりまくってくっつけてぐちゃぐちゃにしている感じです。 ライセンスは多分、GPLv3を適用させないと駄目かも。 これを使って商用ソフト作ったぬっころされると思いますよ。 ＃ぬっころされないけど、そのソフトのソースコード公開が求められるとおもふので、なるべく組み込まないことをお勧めしますって、そんなソフト無いわ、ぼけぇ！ ライセンス関係が微妙なので、また後で調べて追記したいと思います。 gdgdですんません。 3/31追記 今回作成した、スクリプトは、gomitaさんが作られたLightweight customizable mouse gesturesがベースになっています。 ライセンス確認のメールをしたところ、改変／再配布について一切の制限が無いとの事でしたので、著作者の名前の記載のみを強要するMIT Licenseを採用することにしました。 スクリプトにもライセンスは記載済です。 ついでなので、ほんのちょこっとだけ機能アップデートしています。Dアクションで、新規タブを開くようになりました。 重要：リンク先が変わっていますので、以前のバージョンを落とされた方は改めてアップデート願います。

Google ChromeがUserJavascriptをサポートするようになって、真っ先に思い浮かんだのがマウスジェスチャの搭載。 #まあ、僕は発想が右斜め上なので、キーバインド変更のコード書きましたが 確か、ぐりもんでそれっぽいマウスジェスチャできるコードあったよなぁ等と思いながら口を開けて待っていたんですが、誰もコード書かない。 おかしいよ、この世界！(おかしくありません) Google Chromeみたいな軽量なブラウザにマウスジェスチャが無いなんて操作性を減らすだけで意味ねーじゃん！ ってな不満をふつふつと抱きつつ、日々を過ごしていた訳ですが、もう限界。 俺が作る。 って事で昨日からなにやらコード書いています。 ちょっと疲れたので、今一休みしていますが、明日か明後日くらいには公開できるかと。 意外と色々面倒なんだよね、マウスジェスチャって。それをUserscriptでどうにかごにょろうという発想がそもそも間違っている気がするけど気にしないよ、僕は！

Google ChromeのGreasemonkeyを書いていたんだけど、はまったのでメモ。 例の如くキーボードショートカットをカスタマイズするという変態コードを書いていたんだけれども、Ctrl系のイベントキャンセル(preventDefault)が上手く行かない。 結論から言うと、イベントを割り当るタイミングが悪く、keypressではなくkeydownにするべきだった。 今までの自分の知識ベースはkeypressでキーバインド割り当ては何とかなっていたけど、それだと駄目なケースがある事を知らなかった。 周知の通り、keypressよりkeydownの方が先にイベント通知が来る。 以下の文は憶測であり、現時点(2009/03/05)での結果を元にArcCosineが勝手に想像して書いているので、頭から信じないこと OperaやFirefoxはkeypressでpreventDefaultすれば大体のキーのイベントキャンセルできる。 でも、Chromeはちょっと変態ちっくな作りになっていて、Ctrlとの同時押下時はkeypressより前にイベントが走る作りになっている。 イメージとしては (通常) keydown ↓ keypress ↓ デフォルトイベント (Ctrl押下時) keydown ↓ デフォルトイベント ↓ keypress こんな感じでイベントが発生するので、keypressのタイミングでpreventDefaultをかましても後の祭りって落ちだった訳。 もしかしたら、Ctrlキー限定でなくて特殊キーなら何でもかもしれないけど、ちゃんと調べてないので、何とも言えない。 暇な人は是非チェックしてみて下さい。 以上、駄文でした。

ここを見ると分かる通り DevバージョンによってUserScriptディレクトリが違う。 最初はC:\scriptsフォルダに作っていたのに急に動かなくなってイラッとした。 ChangeLog嫁って話だよね。うん。 って事で、以下メモ。 自分は、XPなので C:\Documents and Settings\<ユーザ名>\Local Settings\Application Data\Google\Chrome\User Data Vistaの人は C:\Users\<ユーザ名>\AppData\Local\Google\Chrome\User Data\Default 上記のディレクトリ直下に User Scripts というディレクトリを作り、そこにGreasemonkeyスクリプトを突っ込む形になる。 後は、起動時の --enable-user-scripts オプションを忘れずに。

英語が読めれば2秒で出来る(大嘘) １．まず、ここにアクセス http://dev.chromium.org/getting-involved/dev-channel/ ２．Google Chrome Channel Chooserをダウンロードする ３．Google Chrome Channel Chooser(chromechannel-1.0.exe)を実行すると↓みたいな画面が出てくるので、devを選択。 ４．Updateボタンを押せばOK。 ５．×ボタンでGoogle Chrome Channel Chooserを終了させた後、GoogleChromeを更新するとDevelopperバージョンがダウンロードされる。

以前にもやったこのサイトのブラウザ比率。 あれから少し変動がありました。 Firefox 38.45% IE 26.80% Opera 26.42% Chrome 4.33% Safari 2.68% その他 略 Firefoxの利用率がアップし、変わりにOperaが落ちました。 IEも若干落ちています。 Chromeは変わらず。 Safriは若干アップって感じですか。 ってか、何でこんなにFirefoxのパーセンテージがアップしてるんだろう。 うーむ。

前はFirefoxが一位だった気がするんだけど、今日久々に見てみたら、 Opera 33.23% Firefox 32.34% Internet Explorer 27.15% Chrome 4.36% Safari 1.99% って比率に変わってた。 OperaとFirefoxが30%越え。 超健全サイトですね！（違 もともとOpera比率は高かったんですが、最近はOperaな人がたくさん訪れているみたいで感謝感謝。 むしろ、Safariの少なさにびっくり。 Safariユーザが絶対的に少ないってのがあるんだろうけど、少なすぎる気がする。 逆にChromeが多すぎる気がする ＃いや、それを言うなら、Operaが多すぎってのは（ｒｙ

元ネタは ZDNet Japan から ・テーマをゲットしてくる www.themesforchrome.com にアクセスして好きなテーマをダウンロード ・ダウンロードしたZipファイルを展開する ・以下のディレクトリにアクセス ■Windows XPの場合：＜ドライブ文字＞\Documents and Settings\＜ユーザー名＞\Local Settings\Application Data\Google\Chrome\Application\＜バージョン番号＞\Themes\ ■Windows Vistaの場合：＜ドライブ文字＞\Users\＜ユーザー名＞\AppData\Local\Google\Chrome\Applications\＜バージョン番号＞\Themes\ ・デフォルトのスキンを残したい場合は、そこあるdefault.dllの名前を適当な名前に変更する （自分の場合は、default.dll.orgみたいにした) ・先に展開したディレクトリからdefault.dllをコピーする 以上。

正確には、 Greasemetal 使って実現。 Chromeのキーボードショートカットは使いにくいんだよ、F○ck！とか言いそうな人が居るから、ちょこっと作って見た。 やってる事は大したことない。 J Scroll Down K Scroll Up R Reload Tab D Close Tab Z History Back X History Forward 全部小文字ね。ってか、ソース読んだほうが早いかも。 仕組み的には超大したことないから、誰でもハックしまくれるよ。 テストしてないけど、普通にグリモン入れてるFirefoxやOperaで使えると思う。 ページごとの制限はかけていないから、色々とウザイかもしれないけど、そこは適当に頼むよｗ（超無責任） あと、縦スクロールの移動幅は8行目あたりのnyって所で指定してるから、好きにいじって。 読むのが速い人はny=60遅い人はny=15くらいでよさげ。 z,xで進む戻るはOpera仕様なのは勘弁な？ｗ // ==UserScript== // @name vimlike // @namespace http://looxu.blogspot.com/ // @author Arc Cosine // @version 1.0 // ==/UserScript== (function(){ ny = 30; function sendDw(){ y = window.pageYOffset; y = y + ny; scroll(0,y); } function sendUp(){ y = window.pageYOffset; y = y - ny; scroll(0,y); } function reLoad(){ location.reload(); } function delTab(){ window.opener = window; var win=window.open(location.href,"_self")...

昨晩劣化版Operaになると書きなぐったけど、訂正。 機能限定版Opera だね。 ショートカットのカスタマイズは出来ないし、マウスジェスチャはないし、UIの変更も出来ないし、パスワードは丸見えだわ、インストール先が変だわツッコミどころ満載。 とはいえ、そのレンダリングスピードという一点においては現状では最速であると言い切れる。 ＃あ、いわゆる普通のGUIブラウザではって事ね。w3mとかいう異常な速さのテキストブラウザは別格。 さて、機能限定版と書いたのはこれほど素早く画面表示が出来るのに、ショートカット周りがしょぼすぎるから、自分の思考速度と指の速度が合わず不満が溜まりまくったので。 OperaとFirefoxの優れている点をここで改めて実感した。 詰まる所、自分みたいなブラウジングスピードが異常な変人の異常さを支えているのは、レンダリングスピードだけでなく、実はキーボードやマウスジェスチャと言った物理的なI/Fだったということ。 (UI、UIって色んなところで騒がれているけど、実は見た目の「インターフェース」よりも操作感の「インターフェース」がめちゃくちゃ重要なんだね) 実際、マジでかったるくってしょうがないんです。 矢印キーでのスクロールとかタブキー連打しないとフォーカスを移動できないとかもうやってらんないね！ 時代はワンキー操作だよ！ なんて事を主張してるだけなのもアレなので、Hit-A-Hintを拡張するかぁ。 edvakfさんとかが（何 冗談はさておき。 ChromeはIEから乗り換えるのに良いブラウザだと思う。 IEの貧弱な操作感でスピードだけはそれこそ108倍くらい違うから、素人が乗り換えるのにはぴったり。 (位置的にはSafariが居たポジションかなぁ) 逆に、Opera信者や狐使いといったヘビーユーザがChromeに乗り換えるのはちょっと難しいかも。 ま、実際のところそーゆー人たちに限ってデフォでメジャブラウザは全部インストール済なんだよね。 しかも、最新版が。 おかしいよ！　お前ら！ ＃俺もだけど。 IE8入れてみっかなぁ……。

Chromeが出た事だし、ACID3やるのは常識だよね！ 結果： Opera9.52 10108 83/100 Google Chrome 79/100 Safari3 75/100 Firefox3 71/100 実は 6/20にもテストやっていて 、その時のOperaは素の9.5だった気がする。 ちょっとスコアがあがっていてびっくり。(82→83) Chromeの成績はなかなか優秀だと思う。 FirefoxはSIRETOKOを使うともう少し成績がよくなるかもしれない。 試して無いから分からないけど。