WebOS Goodies

WebOS の未来を模索する、ゲームプログラマあがりの Web 開発者のブログ。

WebOS Goodies へようこそ! WebOS はインターネットの未来形。あらゆる Web サイトが繋がり、共有し、協力して創り上げる、ひとつの巨大な情報システムです。そこでは、あらゆる情報がネットワーク上に蓄積され、我々はいつでも、どこからでも、多彩なデバイスを使ってそれらにアクセスできます。 WebOS Goodies は、さまざまな情報提供やツール開発を通して、そんな世界の実現に少しでも貢献するべく活動していきます。
Subscribe       

TEXTAREA に履歴保存機能を追加するブックマークレット「GearSaver」

Google Gears を利用した素晴らしく便利なユーティリティーが登場しました!その名も「GearSaver」、任意のサイトの TEXTAREA に履歴付きの保存機能を追加してくれるブックマークレットです。

http://dready.org/projects/gears/

例えばこのページで実行すれば、コメントフォームが以下のような保存機能付きのテキストエリアに早変わりします。

GearSaver : コメントフォームに履歴保存機能を追加

データは Google Gears を使ってローカルの HDD に保存されるので、ブックマークレットを実行すればいつでも履歴が復元されます。コメントの入力中に誤ってブラウザを閉じて、せっかくの文章が消えてしまった経験は誰しもあると思います。でも、この GearSaver を使えば、そんな不幸ともおさらばですね。こまめに保存することで被害を最小化できるでしょう。また、履歴の保存機能は、 blog 本文などの長文入力にとくに便利です。やっぱり前の言い回しのほうが良かったな、なんてときはいつでも復元できます。

そんなとても便利な GearSaver 、以下で詳しい使い方をご紹介していきます。

※現在 Google Gears がサポートしているのは IE と Firefox だけなので、残念ながらその他のブラウザーでは利用できません。 Google さん、早く Opera もサポートしてください(TT;

インストール方法

GearSaver を使うには、まず先に Google Gears をインストールしなければなりません。 Google Gears のインストール手順は以下のとおりです。

  1. ブラウザでこちらのページを表示する。
  2. 右上に表示される "Install Google Gears (BETA)" のボタンをクリックする。インストーラがダウンロードできます。
  3. ブラウザを閉じ、ダウンロードしたインストーラを実行する。

Google Gears がインストールできたら、あとは こちらのページで「Launch GearSaver」と書いてあるリンクをブックマークすれば、準備完了です。

使い方

それでは、さっそく使ってみましょう。ここでは例として、このページのコメントフォームに適用する方法をご紹介します。まずはおもむろにブックマークレットを実行してください。 Google Gears の使用許可を選択するダイアログが表示されますので、「Allow」ボタンをクリックしてください。すると、コメントフォームが以下のように変化するはずです。

GearSaver : 実行直後

適当に文章を入力し、右上の「save」をクリックしてください。「1 saved revisions」と表示され、内容が保存されたことを示します。ここで「save」の右の「+」をクリックすると、以下のように保存内容が表示されます。

GearSaver : 履歴を保存

さらにフォームの内容を少し変更して、もう一度「save」をクリックしてください。ふたつめの履歴が保存されます。

GearSaver : もうひとつ保存

それでは、最初に保存した状態を復元してみましょう。最初の履歴(下側)の右にある「preview」をクリックしてください。

GearSaver : プレビューを表示

この状態で「use」をクリックすれば、その履歴の内容がフォームに復元されます。

GearSaver : 履歴を復元

これだけ。簡単ですね。もちろん、リロードしたり別のページに移動したりしても、上記の履歴は保存されていますので、不慮の事故にも安心です。

ちなみに、保存内容はサイト内で共通のようで、例えばこのページのフォームで保存した内容はサイト内の他のページでも使いまわされます。このあたりは好みが分かれるところかもしれませんね。

デフォルトで GearSaver を有効にする

自分のサイトに Google Gears をインストールしたユーザーが訪れた際、デフォルトで GearSaver が有効になるように設定することもできます。以下の SCRIPT タグを HTML に埋め込むだけです。

<script src="http://dready.org/projects/gears/gs04/loader.js" type="text/javascript"></script>

ただ、この方法だとページを表示した直後に Google Gears の利用許可を求めるダイアログが表示されてしまい、場合によっては好ましくないかもしれません。代わりに以下のコードを使うと、ユーザーが「Click here to enable GearSaver」のリンクをクリックするまでは GearSaver を起動しないようにできます。

<html>
  <head>
    ...
    <script src="http://dready.org/projects/gears/gs04/loader-noinit.js" type="text/javascript"></script>
    ...
  </head>
  <body>
    ...
    <a href="#" onclick="if (!gearsaver.initialized && gearsaver.init()) gearsaver.initPanels(); return false">Click here to enable GearSaver</a>
    ...
  </body>
</html>

上記の例では GearSaver 作者さんのサーバーを直接参照していますが、レスポンスを考えると自サーバーにダウンロードしたものを使ったほうが良いかもしれません。いずれにせよ、自己責任でお願いします。

以上、本日は Google Gears を利用した便利なブックマークレット GearSaver をご紹介しました。個人的には、 Google Reader のオフライン化よりも数倍画期的だと思いますが(笑)、いかがでしょうか。皆さんもぜひ Google Gears をインストールして試してみてください。

そして、 Google Gears をインストールしたついでに私の Infosketch もぜひお試しください。まだ実用的なものではありませんが、先日アップデートして Ext JS ベースの GUI に一新しました。こちらもどうかよろしくご贔屓のほどを(^^ゞ

関連記事

この記事にコメントする

Recommendations
Books
「Closure Library」の入門書です。
詳しくはこちらの記事をどうぞ!
Categories
Recent Articles