トップ » 技術記事 » ユーザインタフェースとアプリケーションは分離する

ユーザインタフェースとアプリケーションは分離する

タグ: GreaseMonkey

どうも、あかさたです。最近とあるウェブサイト開発で、GreaseMonkey スクリプトの AutoPagerize と LDRize 対応を行っていました。この作業の中でユーザインタフェースについて考えるところがあったので、紹介します。

きっかけはユーザスクリプト

私は、最近とあるウェブサイトの開発で、ユーザビリティ向上のために GreaseMonkey スクリプトの AutoPagerizeLDRize 対応を行っていました。

GreaseMonkey とは、ウェブページの閲覧時にスクリプト(ユーザスクリプト)を実行する Firefox のプラグインです。スクリプトの出来次第ではウェブページの見た目の変更やユーザビリティの改善などに絶大な力を発揮します。

AutoPagerize とは、Google 検索結果のような複数ページにまたがる情報を、ページの一番下までスクロールしたら自動的に次のページを読み込んで一番下に追記するというものです。AutoPagerize は Google、Twitter、ニコニコ動画などの先進的なウェブサービスだけではなく、ITPro などの通常のニュースサイトなどでも対応されています。

LDRize は Livedoor Reader のキー操作を実現するスクリプトです。たとえば、Google の検索結果であれば、j キーを入力すると一つ次の検索アイテムに移動(k で一つ前の検索アイテムに移動)し、o キーを押すとページを開き、p キーでクリップすることができます。つまり、「複数ならんでいるアイテムをキーボードを使って順々に手繰っていったり、クリップしてまとめてページを開いたりできる」ようになるスクリプトです。

いずれもウェブアプリのユーザビリティを飛躍的に向上してくれるユーザスクリプトですが、ウェブアプリ側でユーザインタフェースを一から作るとなるとそれなりに手間のかかるものです。ウェブアプリ側で対応した HTML を出力することで、上記のユーザスクリプトに簡単に対応することができます。

対応作業を行っていて感じたことですが、規格に従って開発したウェブアプリは、プラグインやユーザスクリプトによってユーザビリティの改善などを後付けで行うことができるということです。

使い勝手はアプリケーション開発者の手を離れつつある・・・?

ウェブアプリケーションが普及しだした頃から強く感じていることですが、使い勝手の開発の少なくない部分は、アプリケーション開発者の手を離れつつあります。これは、ウェブアプリケーションの使い勝手の少なくない部分はブラウザに依存するためです。もちろん、こうした流れにはアクセシビリティに関する大きなメリットがあります。

今でもウェブアプリのデザインは使い勝手の中で大きな割合を占めていますが、マークアップの構造に応じて使い勝手を強化するユーザスクリプトによって、良い意味でアプリケーション開発者の意図しない使い方がなされるようになっています。

また、Ruby on Rails は、レールに乗って開発すると、アプリケーションと同じ挙動を持つ REST API を半自動的に提供するようになります。ここまで来るとアプリケーションとユーザインタフェースは完全に分離します。レールに乗って開発しているかどうかはわかりませんが、Rails アプリで例を挙げるなら Twitter でしょう。

通常のアプリケーション開発者は、見た目を整えることはともかくとして、使いやすいユーザインタフェースを開発するためのスキルを持っていませんから、部分的にせよユーザインタフェースを別開発するという流れは歓迎すべきものかもしれません。

まとめ

今のところ、GreaseMonkey スクリプトのようなユーザスクリプトは、インターネットを使い慣れた人向けのものです。一般ユーザがユーザスクリプトによるユーザビリティ改善の恩恵を受けるにはまだまだ時間がかかる(そもそも普及にはユーザスクリプトとは根本的に異なるアプローチが必要かもしれませんが)かもしれません。

しかし、ユーザビリティの一部がアプリケーション開発者の手を離れ、「使い勝手に関する単体のモジュール」として開発され始めていることは事実です。今後はウェブアプリもそういったものに配慮して開発することが求められていくのではないかと考えられます。

ウェブサイトの AutoPagerize と LDRize 対応

既に多くのサイトで触れられていることですから、敢えてここで記述する必要もないかもしれませんが、備忘録代わりに書きたいと思います。

AutoPagerize 対応

AutoPagerize は、まず HTML で rel 属性に「next」が指定された a(もしくは link)要素から URL を取得してリンク先から HTML をダウンロードします。ダウンロードした HTML から class 属性が「autopagerize_page_element」である要素を抜き出します。そして、抜き出した情報を class 属性が「autopagerize_insert_before」である要素の前に代入します。

<!--ヘッダは省略-->
<div class="autopagerize_page_element">
  <a href="nextpage.html" rel="next">次の XX 件</a>
  検索結果一覧
</div>
<div class="autopagerize_insert_before">
  この要素の前に次のページの情報が読み込まれる。
</div>
<!--フッタは省略-->

AutoPagerize 対応のサンプル

ですから、AutoPagerize 対応は、「次のページの URL を把握するために、”次のXX件”などのリンクの rel 属性に next という値を設定」し、「ページの中からヘッダやメニューなどの情報をのぞいた必要な情報を指定するために class 属性に autopagerize_page_element という値を設定」して、「読み込んだ情報を挿入する場所を決めるために、class にautopagerize_insert_before」という 3 つの作業を行う必要があります。

詳細は 作者の方の解説を参照してください。

LDRize 対応

LDRize 対応は xFolk という仕様に従って行います。LDRize は多数のアイテムがならんでいるページで、キーボードで手繰っていくためのスクリプトです。各アイテムは選択可能であることを示すために class 属性に「xfolkentry」を付加して、リンク先の URL を設定させるために、a 要素の class 属性に「taggedlink」属性を追加して、アイテムの説明文には class 属性に「description」を設定してやれば、対応ができます。

以下、サンプルです。

<div class="xfolkentry">
  <div>
    <a href="http://hogehoge" class="taggedlink">
      アイテムのタイトル
    </a>
  </div>
  <div class="description">
    説明文。
  <div>
<div>

LDRize 対応のサンプル

いずれも 3 ステップ程度で対応できることがわかります。このように、HTML を特定の書き方をすることで、アプリケーション(この場合は GreaseMonkey スクリプト)にメタ情報を渡す考え方をマイクロフォーマット(マイクロフォーマット - Wikipedia)といいます。

マイクロフォーマットに従って書けば、使い勝手はユーザスクリプトやプラグインなどが補完してくれます。(マイクロフォーマットそのものは使い勝手だけには限らず、フィード生成などさまざまなことに使えます。)


執筆者紹介

あかさた

あかさた

未踏(2006年度下期)でWeb上で動作するモデリング環境 Kodougu の開発をしてました。こちらでもブログを書いています。

TrackBack URL :