pal*systemの注文入力を楽にしたい

4年ぶりのblog更新です。

自宅へ配達してくれる生協pal*systemはWebから注文できます。

注文用紙にマークすることもできるのですが、基本的に我が家ではWebから注文しています。
しかし、なかなか楽に注文できないので、なんとか楽にしたいと思っています。

まずはいまある問題点を挙げます。

1. 注文番号、個数を入力する部分の移動が面倒
2. 注文番号を入力しても品名表示を押さないと品名がでない
3. 注文番号、個数を入力しているときに合計金額が見えない
4. ページを開くと一番上に戻り、すぐに注文番号を入力できない(2010/06/03追加)
5. 注文番号、個数のところがオートコンプリートになる(注文番号は毎週違うので再利用できない)(2010/06/03追加)

そこでgreasemonkey  のユーザースクリプトで解決しようと思います。
以上の問題を解決すべく、そのユーザースクリプトの機能要件は以下のとおりと仮決めしました。

1. ユーザーは注文番号、数量を矢印キーで移動できること(上下、左右)
2. ユーザーが注文番号をいれたら、品名表示ボタンを押さなくても商品名を読むことができること
3. ユーザーが注文番号と個数を入力しながら、合計金額を読むことができること
4. 注文ページを開いたら、次に入力する注文番号欄にフォーカスしていること(2010/06/03追加)
5. 注文番号、数量のオートコンプリート状態になっていないこと(2010/06/03追加)

おそらく2,3の実現は少し難しいと思っています。まずは、この要件で作ってみたいと思います。

参考リンク

• pal*system
• greasemonkey
• userscript.org

NHK技研公開(2006)

NHKの技研公開にいってきました。その中で、印象に残ったものを1つだけ紹介します。

印象に残ったものは、人にやさしい情報提示技術です。これは、EPG(電子番組表)などの文字放送のデータをXMLに変換して、それを触覚デバイスや音声読み上げにより提示したり、画面表示を一部拡大したりすることで、多様な利用者に対して、利用可能にするものです。

この触覚デバイスでは、表のどの部分を選択しているか？選択肢は全部で何個あるのか？ということを提示できます。

しかし、この研究では、現在の文字放送の上に、このシステムを構築しているため、人手でルールを作って、文字放送からXMLに変換しなければなりません。文字放送で、テレビに届く情報は、ほとんど、画像と文字を無理やり組み合わせているようなものなのですね。デジタルになってきている世の中で、文字放送のデータが使いやすくなれば、このような技術も使えるかも知れません。

あと、ここで展示しているものは、テレビ以外にも使えると思うのですが、それでもテレビに限定してしまっているように思います。パソコンで使うのであれば、ここで示した触覚デバイスは物足りないですし、画面読み上げならば、パソコンのほうがすすんでいます。テレビとパソコンが融合してきている今としては、パソコンでテレビを見ながら、このような機能を使えるとよいと思います。

そのほか、高臨場感の超大画面のスーパーハイビジョンは、本当に臨場感があふれていました。ニューヨークの上空からの映像は、臨場感がありすぎて、ちょっと怖かったです･･･。

Firefox 拡張の試作

Firefoxの拡張を試作しました。 まさしくHello World です。

Mozilla Firefox まとめサイト トップページ > 拡張の作成 を参考にしました。

実は、Firefox 1.5用のまとめが
Mozilla Firefox まとめサイト トップページ > 拡張の作成 > For Fx1.5 にあったので、今度はこちらを試して見ます。

さて、Firefox を作成するには、xpiファイルというものを作る必要があります。 また、xpiの中に、javascriptなどをまとめるjarファイルがあります。 これらのファイルは、zipファイルなので、sampleのファイルを解凍して、 中身を参考文献にあるとおり変更しました。

そして、何度かデバッグして出来上がったのが、otah.xpi[試す場合はリンク先を保存してください。] です。 ちゃんとインストールされ、 Hello, This is otah! が表示されました。

まずは、第一歩。これから少しずつ勉強していきたいと思います。

スクリーンの動画をキャプチャーする

PCのスクリーンの動画と読み上げ音声を同時にキャプチャするためのソフトを見つけました。

フリーソフトを探していましたが、やっと見つけました。CamStudio というソフトです。 しかし、これを作成していたRenderSoftという会社(組織)が作っていたようですが、Adobe(Macromedia)に買収されたのか、ページが見つかりません。

かろうじてソフトはダウンロードできるようです。(2006年5月6日現在) CamStudioのダウンロードページ

このソフトを使うと以下のことができます。

1. スクリーンの動画のavi, swfでの保存
2. 音声のwavファイルでの保存
3. スクリーンの動画と音声の統合
4. aviからswfへの変換

非常に使えるソフトだと思います。

動作結果は、次に示します。

スクリーンキャプチャのサンプル[swf,1MB]

現在は、Macromedia Captivate として、製品になっているのではないかと推測します。

Fire VoxでWebページの読み上げ

ゴールデンウィークの余暇を利用して、 以前紹介したFire Voxにて、 Webページを読み上げできるかどうか試してみました。

環境は次のとおりです。

OS

Windows XP sp2

ブラウザ

Firefox 1.5.0.3(日本語版)

FireVoxプラグイン

FireVox 日本語版 et-web 開発室版

音声エンジン

ドキュメントトーカ 日本語音声合成エンジン for Windows

FireVoxで読み上げができるようにするには、次のとおり環境を整えます。

1. SAPI5対応の音声エンジンをインストールする。
2. 音声エンジンを日本語に対応したものに切り替える。
   1. コントロールパネルから音声認識を開く。
   2. 音声の選択 にて、標準のSamから太郎(ドキュメントトーカー)に変更する。
3. FireVoxのプラグインをFireFoxにインストールする。
   1. fileclc_firevox_jp-3.5.2-fx.xpi, fileclc_utils_jp-2.5.2-fx.xpi, fileclc_tts_jp-2.0.2-fx.xpi の3つのファイルをダウンロードする。
   2. それぞれをFirefoxにドラッグする。
   3. Firefoxを終了する。
4. FireFoxを立ち上げ、ページを読み上げる。

以上の手順により、Firefoxにて、読み上げができました。(このページの読み上げ結果[mp3,2.5MB]。) 現時点では、次のような問題点があるように思いますが、これから成長に期待です。

よいところ

1. ヘッダ、リンクなどの詳細がわかる。
2. JavaScriptで動的に変化した内容も読み上げできる。

よくしたいところ

1. ショートカットキーが他のプラグインと重複する。
2. ショートカットキーを大きく変更できない。

テクニカルエンジニア(情報セキュリティ)

きょうは、テクニカルエンジニア(情報セキュリティ) の試験を受けてきました。受験場所は、池袋の立教大学のキャンパスでした。

そこには、机と合体している椅子 があり、体の大きい人が非常に使いづらそうでした。

大学などでは、やはり、いろいろな人が利用しやすいように、カスタマイズできるものが必要だと思いました。

試験の行方は…。まぁ、受かるかもしれませんが、受からないかもしれません。とにかく疲れました。

日本のユーザーエージェントの機能調査

日本語環境では、PC-Talker, 95Reader, HPR, Jaws などのWebのユーザーエージェントが利用できます。 ここで、HPR以外はInternet Explorerなどで表示したWebページをスクリーンリーダにて読み上げるものです。

そのユーザーエージェントの機能を調査した結果が報告されています。

この報告は、ユーザーエージェントにより、どのような機能が実現されているかを示しています。 PC-Talker, 95ReaderはMSAAだけを利用しているため、 ヘッダータグやリストなどのHTMLの詳細に読み上げることができていませんが、 ＨPR, Jaws ではDOMを利用しているため、HTMLの詳細を読み上げることができています。

この報告の結論としては、ユーザーエージェントがHTMLの詳細を読み上げできないといって、コンテンツ作成者は適切な記述をするべきである としています。(しっかりヘッダータグを使うなど)

また、WCAG2.0で規定する日本でのbaselineについて、日本でも支援技術がHTMLの詳細を読み上げできるものとして定義するべきであるとしています。

プログラム的に決められている("programmatically determined")ということが必要ですね。

リンク: 日本の視覚障害者用ウェブ利用ソフトの機能調査.

Webページの詳細内容の読み上げ

Webページを音声で読み上げるためには、次のような複数の方法があります。

音声ブラウザを使う

Home Page Readerなどの音声ブラウザを使い、Webページを読み上げる。

スクリーンリーダと普通のブラウザを使う

PC-Talker,95Reader,Jawsなどのスクリーンリーダを使って、普通のブラウザを読み上げる。

それぞれ、次のような状況だと思います。

音声ブラウザを使う

音声ブラウザが、タグを解釈してくれて、詳しい内容を知ることができる。

スクリーンリーダとは別に、音声ブラウザを購入する必要がある。

スクリーンリーダと普通のブラウザを使う

PC-Talker,95Readerでは、タグなどの詳細な情報を読み上げできない。

Jawsでは、詳細まで読み上げできるが、高価。

以上のことから、Webページを詳細に読み上げするには、音声ブラウザを購入するか、 Jawsを購入する方法があるといえます。

また、Firefoxというブラウザは、これまで、PC-Talkerなどのスクリーンリーダでは、 読み上げできないという問題がありました。

しかし、最近、FireVoxというプラグインが日本語でも利用できるようになっているようです。 まだ、試していないのですが、もし、PC-Talkerの音声エンジンをFireVoxが利用できれば、 PC-Talkerなどのスクリーンリーダとフリーのソフトで詳細なWebページの読み上げができるようになります。

このように、ブラウザ側が詳細情報をスクリーンリーダに渡すことができれば、 安価に詳細なWebページを読み上げることが可能になります。 このようなアクセシブルな技術の発展に期待をしています。

Firefoxのプラグインについてもいろいろ勉強していきたいと思います。

et-web 開発室:FireVoxの日本語版を開発している

CSSでの音声用の設定よりも、構造化されたWebページを

構造化されたWebページを作っていきましょう。 (自戒の念をこめて。)

CSS 2 やCSS 3 には、スクリーンリーダや音声ブラウザのために、 たとえば、次のような設定項目があります。

読み上げの音量:

大きな声にしたり、小さな声にしたり。

読み上げの方法:

1文字ずつ分けて読むか、つなげて読むか。(たとえば、「エヌイーティー」か「ネット」か)

読み上げの特徴:

速く読むか、遅く読むか、男性の声か女性の声か。

いろいろな設定がありますが、スクリーンリーダの利用者は、 実際には、アナウンサーが読み上げる速さの2倍程度のスピードで Webページを読んでいます。 また、カタカナとひらがなで読み上げの音声を切り替えて認識していたりもします。

その中で、Web作成者が、スクリーンリーダのことを思って、 男性の声と女性の声を切り替えたり、読み上げスピードの上げ下げをすると、 スクリーンリーダの利用者は困惑するのではないでしょうか？

もちろん、ビジュアルのCSSと同様に、ユーザー独自のCSSを持っていて、 サイトのCSSを上書きするようにしておけばよいのですが、 Webの作成者が、しっかりとした意識をもっていなければ、 CSSでの音声用の設定は正しく設定できません。

CSSは、Webページを訪れるすべての人に同様の表現を適用しようとします。
逆に、アクセシビリティでは、いろいろな人が、いろいろなやり方で利用できることが重要です。
そこをはずさないように、Webの作成者は考慮しなければならないと思います。
構造化されたWebページを作っていきましょう。

CSS3の音声用の設定

CSS3 Speech Module.

CSS2の音声用の設定

CSS2 Aural Reference.

スクリーンリーダを利用してのWebページの読み方

Observing Users Who Listen to Web Sites.

アメリカでアクセシビリティがないことで通販サイトが提訴される

アメリカで、ネット通販サイトが提訴されたそうです。 「カリフォルニアの法律に抵触しているのではないか」との理由で、 障害者団体が提訴したとのこと。

このようなサイトは、公共のものなので、みんなに使えなければならない ということのようです。

私の英語の理解が間違っていたら教えて下さい。

リンク: Disability Rights Advocates Case: NFB v. Target.