2006年12月アーカイブ


Google Toolbar 3 for firefox ベータ版」が話題です。
特に↓この Google Docs & Spreadsheets との連携機能がスゴイ!

ITmedia Biz.ID:OfficeファイルをダブルクリックしてGoogle Officeで開く
http://www.itmedia.co.jp/bizid/articles/0612/13/news122.html

いよいよ、さようならOfficeという感じ。

このGoogle Docsを使ってブログを書くことができるそうで、もしや便利かも?と思って、さっそく試してみました。


設定方法

Google Docs & Spreadsheets
http://docs.google.com/

設定画面(Setting→Documents→Blog settings)で



とやっておけば編集画面、右上のPublishからブログへの投稿が可能になります。
おそらく投稿用API が MovableType互換のブログサービスならだいたいいけるんじゃないでしょうか。


メリット

ほぼWORDを使ってる感覚で書けるので、見出しや修飾など簡単。
以前、紹介した Firefoxでブログが書けるエクステンション Performancing for Firefox で不満だった

  • 吐くHTMLがいまいち
  • 見出しが設定できない
  • リンクを別窓に設定できない。

なども解消されます。

ひとつ問題なのは、投稿したあとの修正ができない点かな。これは↑と併用で。


スクリーンショットを載せるTips

ソフトやGreasemonkeyスクリプトの説明にスクリーンショットは欠かせません。

flickr and WEBIMAGER

これを使ってます。
スクリーンショットを撮って flickr に直にアップロードするツール。
アップして、ブラウザ上に表示された画像をGoogle Docs の編集画面にコピー&ペースト。これだけ。

少しずつブログを書くための余計な作業が少なくなって、より内容に集中できる環境ができつつある気がします。<大袈裟?


今後の展開

現状、Google Docs APIは公開されてないですよね?
Spredsheetsはあるんですが。

公開されれば、こないだのWYSIWIGエディタライブラリ を、Greasemonkeyでテキストエディタ に組み込んで、Google Docsに保存・編集できるフロントエンドにしたら激しく便利な予感。


こないだから、ユーザースクリプトは次世代のプラットフォームだ!とか言ってますが、Webアプリケーションとの連携も発展方向かなと。

例えば、Livedoor Reader の API が正式に公開されれば、Greasemonkeyでライブドアリーダー とか作る人が出てくるんではないだろうか?という妄想が。

半年くらい言いつづけてみよう。


追記:この記事ではじめて投稿してみたのですが、タイトルの日本語部分が文字化けしました。本文は問題なし。
そのうち改善されると思われるけれど、少し不便。

Wiiどうにか発売日に手に入れました。
ネット関連の機能がほとんどまだなので、少し肩透しを喰らった感じ。
でも、Wiiスポーツで充分楽しめてますが。

Wii向けOperaブラウザのダウンロードは12月下旬に開始か(GIGAZINE) - むぅもぉ.jp
http://muumoo.jp/news/2006/12/14/1wiiopera.html

ただ、どうやらWiiにはOperaが既に入っているようです。過去のゲームをダウンロード購入したりするときに使う「Wiiショッピングチャンネル」は Webを利用しているようで、WebブラウザがWiiに入っていることになります。しかもパケットをキャプチャすると、USER_AGENTには Opera 9.00の文字が入っているという話も。

↓このサイトで詳細な情報が公開されてます。
http://retoor.googlepages.com/home

Wiiショッピングチャンネルへのアクセスを別のページに飛ばすことでOperaが使えるみたいです。
これが、ダウンロードチャンネルで提供されるOperaと同等なのかは不明ですが、Ajaxは?Flashは?機能が気になりました。

もうすぐ利用可能になるし、自分でやるのはちょっと面倒かなと思って、YouTubeで探したところやはりやってる人が。

Google Maps は完璧に動いてますね。
追記:これは公式サイトの動画が投稿されたものでした。現状のWiiに最初から入ってるOperaで動くかは不明です。


こちらは少し長め。
3分あたりでYouTubeを見てるけれど、現状ではFlashのプレーヤー部分が見れない模様。


コピペできるのか?
ウィジェットは?ユーザースクリプトは?
と気になることは一杯ですが、誰かが調べてくれるだろうという他力本願で、使えるようになるのを待ちます。

追記:Acid2テストを試した人も

正確に表示できてませんね。

「Opera 9」の最新ビルドでAcid2テストに合格
http://internet.watch.impress.co.jp/cda/news/2006/03/13/11208.html

ずいぶん以前にパスしたという記事があるのですが。
動画のコメント欄では、Mac用がベースなのかという話も。
WiiのCPUはPowerPC系なので、その可能性はあるかもしれないと思って手元のG4 MacにOperaを入れて試してみました。背景の色も含めて正常に表示されました。
このことから考えると、Wiiに最初から入っているOperaは同じバージョン9でも幾分古いビルドをベースにしてるのかもしれません。


ついでなのでWiiショッピングチャンネルを解析してみる

http://retoor.googlepages.com/home

によるとユーザーエージェントは

Opera/9.00 (Nintendo Wii; U; ; 1038-58; Wii Shop Channel/1.0; en)


Firefox用の機能拡張でユーザーエージェントを変更できるエクステンションがあります。

User Agent Switcher Extension
http://chrispederick.com/work/useragentswitcher/

これで変更してみるとWiiショッピングチャンネルにアクセスできます。


とりあえず試してみた。

Wiiショッピングチャンネル
http://oss.shop.wii.com/oss/common/vc/W_01.jsp?language=ja&region=Japan&country=JP
http://oss.shop.wii.com/oss/common/vc/W_03.jsp?language=ja&region=Japan&country=JP

ソニック・ザ・ヘッジホッグ
http://oss.shop.wii.com/oss/common/vc/B_05.jsp?titleId=000100014D41484A&language=ja&region=Japan&country=JP

ソフトのIDを調べて titleId= 以降にセットすることで各ソフトのページになる模様。


右上の↓が気になったのでソースを調べてみた。

<img src="/ja_JP/images//banner/help_a.gif" name="ManualImage" id="ManualImageID" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('ManualImage','','/ja_JP/images//banner/help_b.gif',1); wiiFocusSound();" onclick="showHelp(); wiiSelectSound();" border="0" height="55" width="52" />
ちょw MM_swapImage て Dreamweaverのビヘイビアそのままでんがな。


http://oss.shop.wii.com/ja_JP/js/oss.js

でshowHelp関数を見てみると


Wiiショッピングチャンネル ヘルプ
http://oss.shop.wii.com/ja_JP/html/manual/index/index_Frameset.html

というのも判明。

めんどいのでこれ以上追わないけど、音を鳴らす部分が追加されてる以外、Wii用のページは特別なことをしてないっぽい。

だいぶ量が多くなったので、現在、動作するものを一度まとめておきます。


Greasemonkeyって?

ページの見た目や機能をブラウザ側でカスタマイズできるFirefoxの機能拡張です。
好みのスクリプトを追加することでページを読みやすくしたり、便利な機能を追加することができます。


インストールの方法・簡単な使い方は以下のページの解説がわかりやすいと思います。
はてなグリースモンキー - グリースモンキーの使い方


他の方が作られたスクリプトを参照するにはGreasemonkey - Mozilla Firefox まとめサイトをご覧ください。


これまで作ったGreasemonkeyスクリプト


Google

Greasemonkey - Google のラジオボタン押したら検索
http://a-h.parfe.jp/einfach/archives/2006/0106171150.html
Google の検索フォーム下の↓コレを押したら検索結果が切り替わります。

Greasemonkey - Ctrl+EnterでI'm Feeling Lucky!
http://a-h.parfe.jp/einfach/archives/2006/0529185922.html
Googleでキーワードを入力し、CtrlまたはShiftキーを押しながらEnterで、I'm Feeling Lucky!できます。

Google ヘビーユーザーのための GreaseMonky スクリプト
http://a-h.parfe.jp/einfach/archives/2006/0105175809.html#search_word=greasemon
解説がわかりにくいのですが、Googleホームページを常に開いておくためのスクリプトです。
検索結果は、新規タブまたはウィンドウに開きます。

Google Maps に Pin を立てて、Gmailで知らせるGreasemonkeyスクリプト
http://a-h.parfe.jp/einfach/archives/2005/1005171239.html


Amazon

Amazon の商品ページに iTMS リンクメーカーを表示する Greasmonkey スクリプト
http://a-h.parfe.jp/einfach/archives/2006/0217173637.html

Amazon の商品ページに Yahoo!オークションの検索結果を表示する Greasmonkey スクリプト
http://a-h.parfe.jp/einfach/archives/2005/1227161457.html

amazie 用 GreaseMonkey スクリプト
http://a-h.parfe.jp/einfach/archives/2005/0622161750.html
amazonの商品ページにamazieへのリンクを追加します。


はてな

はてなブックマークの最適なアルゴリズムを探すためのGreasemonkeyスクリプト
http://a-h.parfe.jp/einfach/archives/2006/0824175505.html


Livedoor Reader

LDRの棒人間に怒られないようにするGreaemonkeyスクリプト(Windows限定)
http://a-h.parfe.jp/einfach/archives/2006/0905214308.html
IMEを自動的にOFFにするスクリプトです。
Livedoor Readerに同様の機能が実装されたので、そこでは意味がなくなったかも。
でも、GoogleReaderの利用者にも使っていただいてるみたいです。
ショートカットキーを使いたいWebアプリケーション全般に利用できます。


Twitter

Twitter で add を快適にする Greasemonkey スクリプト
http://a-h.parfe.jp/einfach/archives/2007/0411185259.html
friend アイコンにカーソルをあわせるとプロフィールを表示します。


グリモンアプリ

Greasemonkeyでテキストエディタ
http://a-h.parfe.jp/einfach/archives/2006/1121172220.html
超高速で起動するテキストエディター。
思いついたときにすぐメモできます。

Greasemonkeyでランチャー
http://a-h.parfe.jp/einfach/archives/2006/1127210217.html
よく利用するWebサービスやページを登録して、移動できます。

Greasemonkeyでサーチエンジン
http://a-h.parfe.jp/einfach/archives/2007/0110184405.html
いつでもどこでも使えるサーチエンジン。
思いついたときに即検索できます。

Greasemonkeyでコードリーディング
http://a-h.parfe.jp/einfach/archives/2007/0123211609.html
選択したテキストを入力していくアプリ。
好きなテキストでタイピングの練習ができます。

Gresemonkeyでブラウザー
http://a-h.parfe.jp/einfach/archives/2007/0427182354.html
Greasemonkey上で動くブラウザー。
リンク先をオーバーレイで表示します。


その他

ジョジョの奇妙なGreasemonkey
http://a-h.parfe.jp/einfach/archives/2007/1122223347.html
あの名ゼリフをTwitterやmixiで簡単に検索・引用するためのスクリプト。
設定を変えれば、どのサイトでも利用可能。


今後も、新しいスクリプトを作ったら、ここに追加していきます。


Greasemonkey本登場!!

海外ではオライリーから「Greasemonkey Hacks」という本が出ていたのですが、部数が見込めないのか日本語版は出版されていませんでした。
まとまったオフラインでの解説は、以前、Software Designの2006年4月号に川崎さんが記事を書かれてたのが、唯一だった気がします。そんな中、やっと日本語書籍が出版されます。


「Greasemonkeyスクリプティング TIPS&SAMPLES」と言う本を書きました
http://espion.just-size.jp/archives/06/338142930.html

Firefox 用エクステンション Greasemonkey の解説書を書かせてもらいました。秀和システム さんより、もうすぐ発売されます。300ページとちょっと。

いくつかウチで公開しているスクリプトも載せていただいてるみたいです。
Greasemonkey 好きな人はぜひ。


Greasemonkeyスクリプトを書く人のためのTips

いくつか役立ちそうな日本語情報を。

GreaseMonkey Driven Development / Shibuya.js Technical Talk #2
http://lowreal.net/2006/shibuya-js-2-lt
開発に役立つ情報満載です。
エディタの設定がずっと有効になってなくて、とても不便だったのですが、この情報で解決。


tapotの日記 - Greasemonkeyスクリプトを作成する際のTips
http://d.hatena.ne.jp/tapot/20050624/p3
実行されるタイミングや、GM_xmlhttpRequestなどのSpecial Functionsについて解説されています。


CMS researcher - Greasemonkeyでprototype.jsやscript.aculo.usを使う方法
http://d.hatena.ne.jp/ysano2005/20060127/1138382734


技術メモ帳 - Greasemonkeyで永続的に外部スクリプトを利用する
http://d.hatena.ne.jp/lurker/20060813/1155432961


技術メモ帳 - ページの閲覧者にGreasemonkeyを使用させない方法
http://d.hatena.ne.jp/lurker/20060818/1155913962


人力検索はてな - Greasemonkeyで、すべてのページのbodyタグのすぐ後ろにタグを挿入するスクリプトを書いたのですが、FRAMEやIFRAMEが使われているページではフレーム内のbodyにも適用され..
http://q.hatena.ne.jp/1153500408
frameやiframe内では実行されないようにする方法。


naoyaグループ - naoyaの日記 - それGre
http://naoya.g.hatena.ne.jp/naoya/20061006/1160116362
Greasemonkeyでどうやるかは聞いてねーよ!

これは何?

prototype.jsベースで、IE、Firefox、Opera、SafariをサポートするWYSIWYGエディタライブラリです。

車輪の再発明もいいところなのですが、なるべくシンプルなWYSIWYGエディタライブラリが欲しくて作りました。


どんなもの?

↓使ってみてください。RSSリーダーで購読されてる方は、こちらからご覧ください。


"コードを整える"のチェックをはずすとブラウザ本来のHTMLを出力します。
文字サイズの変更は、Firefoxのみ動作します。


基本コード
サンプルはこちらからダウンロードできます。
まだ荒削りなので、実際に使えるかわかりませんけれど。

<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" src="crosseditor.js"></script>
<link href="crosseditor.css" media="screen,print" rel="Stylesheet" type="text/css">

<ul id="menu"></ul>
<div id="pallete"></div>
<input name="checkbox" type="checkbox" id="translate" value="checkbox" checked="checked">
<label for="translate">コードを整える</label>
<div style="clear: both"><iframe id="edit" frameborder="0"></iframe></div>
<div id="preview"></div>
<textarea name="textfield" id="html"></textarea>


ライセンス

Open Source Initiative OSI - The MIT License:Licensing
http://www.opensource.jp/licenses/mit-license.html

MITライセンスとします。
無償・無保証・無補償ですが、商用・非商用問わず無償でご利用いただけます。


開発動機

数ヶ月前・・・

技術メモ帳 - Iframe の designMode="on" によるリッチテキストエディット
http://d.hatena.ne.jp/lurker/20060930/1159617939

さらに追記:

Firefox only かと思ったらSafari でも普通に動いた。

この調子なら、きっと Opera も大丈夫だ。

な、なんだってーー!!
Safariでも動く!?マジで!!

と思って、自宅のMacで試したところ動かない。
うーん、なぜだ!?と思って調べたところ

Surfin’ Safari - Blog Archive ? WebKit Fixes in Safari 2.0.2 / Mac OS X 10.4.3
http://webkit.org/blog/?p=32

Fixed designMode to allow editing in an <iframe> when the src attribute is "" or about:blank.

とあり、別のMacで試したところ、Safari 2.0.2以降なら動作しました。
Operaももちろん動いたので、じゃあライブラリにしてみようかと。


なので

・Safari1系はサポートしてません

クロスブラウザと謳ってますが、Panther以前のOSXでSafari1系使ってるユーザーは切り捨ててしまいます。

VOXはSafariだと、Firefoxを使ってねという旨のメッセージが表示されます。
僕も家では、まだPanther(OSX 10.3)なので、正直悲しいんですが。FirefoxよりSafariのが軽快に動作するので。Camino使えって話もありますが。

追記
と書いたのですが、↓どうもSafari1.3系以降でサポートされてる模様。要調査。

WYSIWYG comes to Safari 1.3 » All Forces
http://allforces.com/2005/04/19/wysiwyg-comes-to-safari-13/

各ブラウザの挙動メモ

このリッチテキストエリアは、iframeのdesignMode属性をONにすることで実現してます。
ただしブラウザ毎に微妙に挙動が異なります。

Safariはremoveformatできない。iframeのonloadが効かない。

IEはUndo・Redo効かない。(VOXはできてるので方法はあるのかも)


各コマンド時に出力されるHTML

あとでまとめる。>誰かまとめて
ブラウザ毎にだいぶ異なります。
それらをなるべくまともなHTMLに整形して出力してます。
Safariの吐くコードは頭おかしい超個性的。


注意点

・Firedoxでの問題

Firefoxユーザーは、mozlessの0.1.11以前のバージョンを入れていると今回のようなリッチテキストエリアでカーソルをキーボードで移動させることができません。
この問題はmozless-0.1.12でfixされています。
ただしFirefox2.0には未対応で更新確認にも出ないので、手作業で入れる必要があります。

しかも、ウチだけなのかもしれませんが、mozless-0.1.12を入れるとmozlessのキーがkeyconfigの"キーボードショートカットのカスタマイズ"メニューに出なくなり、従来カスタマイズしていたmozlessのキーも無効になってしまいます。これはかなり痛い><

それから個人的にsuperscrollというスペースを押した時のスクロールをコントロールする機能拡張をFirefox2.0に無理やり対応させて使っていたのですが、これも同様にカーソルがキーボードで操作できない現象を起こしていました。
↓こちらのGreasemonkeyに乗り換えました。

Out of Sync - スペースキーで LDR っぽいスクロールを実現する Greasemonkey スクリプト
http://d.hatena.ne.jp/nagaton/20060831/1156993415

ずっと、Gmailなどのリッチテキストエリアでカーソルがキーボードで動かせないのはFirefoxの謎仕様だとばかり思ってたorz

最近、キーボードのキーでよく使う機能を呼び出すのが便利だなぁと思ってます。

で、多用する"ページのタイトルとURLをコピー"する機能が欲しい。

過去にRakuCopyブックマークレットをつくりましたが、やはりショートカットキーでダイレクトにクリップボードに転送したい


Firefoxにはその用途のためのCopyURL+という便利な拡張があります。
ただ、現在Firefox2.0に対応しておらずインストールが面倒なのと、ショートカットキーに割り当てられるのかわからず。


そこで、以前にやったkeyconfig拡張で”Gmailで送信”と同様に、keyconfigを使ってショートカットキーに割り当てる方法。


使い方

keyconfigエクステンションをインストール。

"ツール" → "キーボードショートカットのカスタマイズ" で "新しいキーを追加"

/* CODE */と書かれている部分に以下のように書く。

var w = window._content;
var d = w.document;
var txt = d.title + '\n' + d.location.href;
const CLIPBOARD = Components.classes["@mozilla.org/widget/clipboardhelper;1"].getService(Components.interfaces.nsIClipboardHelper);
CLIPBOARD.copyString(txt);
これをお好きなキーに割り当てればおk。

とりあえず"C"に割り当ててワンキーのみで"ページのタイトルとURLをコピー"できるようになりました。



HTMLにしたい場合は、三行目を↓のように変更。

var txt = d.title + '\n' + '<a href="' + d.location.href + '" title="' + d.title + '">' + d.location.href + '</a>';

書式は簡単に変更できるのでよく使うもの(例えばAmazonのアソシエイト用HTMLコード生成とか)を入れといてもいいかも。


内容解説みたいなもの

まず、いつものようにGreasemonkeyでやろうかと思ったときに、すぐ思いついたのはこの方法。

最速インターフェース研究会 :: Firefoxでテキストをクリップボードにコピーする方法
http://la.ma.la/blog/diary_200601100445.htm

この方法はFlashのセキュリティが変更されて、dataスキームで読み出したFlashファイルはローカルから読み出したものと同様に扱われるらしく現在動作しない。


仕方ないのでKeyconfigエクステンションでできないか、とりあえず、調べる。

Keyconfig extension: Firefox - MozillaZine Knowledge Base
http://kb.mozillazine.org/Keyconfig_extension:_Firefox

readFromClipboardはあるんだけど、writetoClipboardみたいな機能がない!!


こりゃ、無理かもと思ったが、userChrome.jsというJavascriptでFirefoxを機能拡張しちゃう機能拡張用のコードを発見。

SCRAPBLOG » Blog Archive » [userChrome.js] Copy Title + URL
http://amb.vis.ne.jp/mozilla/?p=51

このクリップボードに転送するコード使えるんじゃね?
Keyconfigにぶちこんでみる。
ktkr!

Keyconfig エクステンション前提だが、どうにかワンキーでクリップボードに転送完了。


以下、余談

うーん、素人考えだけど、クリップボードを読むのはセキュリティ的に問題が大きいけれど、クリップボードに転送するのはもう少し緩やかにしてもいいんじゃないかと思ったり。


追記:

↓クリップボードに転送するのがなぜ危険か?

セキュリティホール memo - 2006.02
http://www.st.ryukoku.ac.jp/%7Ekjm/security/memo/2006/02.html#20060225_various
つまり、トロイなどのローカルアプリは、クリップボードを監視しているだけで、外部からのコマンドを入手できる、と……。

ってことらしい。可能性はゼロではないからなぁ。
ほんじゃ、クリップボードに転送できるIEって・・・orz

このアーカイブについて

このページには、2006年12月に書かれたブログ記事が新しい順に公開されています。

前のアーカイブは2006年11月です。

次のアーカイブは2007年1月です。

最近のコンテンツはインデックスページで見られます。過去に書かれたものはアーカイブのページで見られます。

ウェブページ