1月2012

西部地域障害者パソコンボランティア特別研修を受講しました

ザザシティ浜松にある西部パレットで、平成23年度の西部地域障害者パソコンボランティア特別研修が2012年1月21日～22日に開催です。

見習、平成22年度版に続き、2度目の受講ですぅ。

研修会の会場

研修会の会場

普段はかけだしウェブデザイナーとして、「ちょっと見習さん、なんなのこれ！」と注意を受けるのを仕事としてますが、お休みの日は、たまーに、ですが、障害者の方々のパソコン講習会のボランティアのお手伝いしてます。単に、ケーブルもって走りまわってるだけですけど。

自分じゃ、どう考えても作れないような、キレイなサイトだけど、目が見えない方だとどうやっても目的のページへ行き着けない！とか、ブラウザのヘンなところへカーソルがはまり込んじゃって、ニッチもサッチもいかない！ということがあります。ホントは、そういうときに、「はい、こうやると、きちっと目的のページへいけます」とかかっこよくサポートできればいいのですが、ボランティアとしても見習なので、「すみません、私もわかりません、とりあえず、ブラウザ閉じて、やり直してもいいですかぁ」と悲しい状況になるので、ちょっとでもレベルアップしたくて、受講しました。

2日間の研修ですが、今日は、１日目の内容についての感想です。

ECサイトこそ、アクセシビリティ？

研修は、まず、全般的なことからスタートしました。障害者の方にとって、パソコンやネットは、「楽しみ」というより「生活の質をぐぐっと向上させる大切なツール」だということが大テーマです。大切な情報をきっちり取得、必需品をお買いもの、とか、ネットでできることがたくさんあるからです。実際、かなりの方がネットでお買い物をされているんだそうです。

ここのところ、実は、ひえー。となりました。アクセシビリティとかが見栄えよりも必要なのは、福祉のページだけじゃない、むしろ、ECサイトとかの方が重要かも･･･ということかも･･･。見習、間に合わないよー、こんなカッコいいデザイン、つくれな～い、となると、「ええい、画像一枚張りでとぼけよう」とか考えてましたが、もっとがんばって勉強して、そういうのを減らさなきゃ（やめると言い切れないところが悲しいけど･･･）と思います。ホント、困ると<html><head></head><body><img src="toppage_img.jpg"></body></html>と逃げたい衝動に駆られますが、もっとレベルアップしなきゃです。それから、あんまり目がよくないというかローガンが始まってる？見習は、自分が見やすいフォントサイズでコーディングしたら、字が大きすぎだった、という過去がありますが、「字が大きい＝目が悪くても見やすい」というのは100%ではないんだそうです。見えるところはしっかり見えるけど、「視野がうんと狭い」という方もあるそうで、そういう場合、字が大きいと、いっぺんに見える文字数が少ないので、「使いにくいサイト」になってしまうのだとか。がーん。

ほかにも、「明るい色使い＝見やすい」じゃない。とか、色のみで情報を伝えるサイト（たとえばヘルプは黄色、次へ進むは全部みどりのボタンとか）だと、色の識別が難しい人には、使いにくさ100%だそうです。複数の手段（色、テキスト、形とか）で情報を伝えるようにしなきゃダメだということです。

Windowsの設定の実習もありました。昨年度の講習では、WindowsXPでの実習でしたが、今年はWindows7です。実は、去年のボランティアで、XPを使っているユーザさんに7の機能説明をするクラスのサポートがありました。視覚障害の人も、XPのほうが使いやすいから、ぎりぎりまでXPで伸ばしてきたそうですが、やはりもう潮時というか、7しか買えないので、対応していくとか、そういうことだったと思います。Vistaからですが、7では、UACとか、不要と思えるほど、何かをすると、「バン」という音とともに、ダイアログが出て、作業がとまってしまうので、やりにくさ抜群だと思ってました。でも、そうとも言い切れないみたいです。

コンピューターの簡単操作

Windows7では、「コンピューターの簡単操作」というのがあります。XPでもほとんど同じ機能がありますが、Windows7の場合、コントロールパネルの「コンピューターの簡単操作」からまとめてアクセスできます。（カテゴリ表示の場合）

キーボードだけで操作ができるようにする設定、音声入力するための設定、警告音とか、サウンドで知らせてくるものを、視覚情報に置き換える設定、マウスを見やすく、使いやすくする設定、などなど･･･。Windowsをインストールするだけで、別にアプリをインストールしなくても使える機能がいっぱいです。

たとえば、指一本でキーボード操作できるようにする設定では、CTRL+Cというようにふたつのキーを一緒に押さなければならないのをCtrl→Cというように順々に押してもきっちり反応してくれるようにできます。お大福食べならが仕事ができるじゃん、というヨコシマな考えはさておき、ほんと、便利です。

ちなみにこの設定をするには、

コントロールパネル→コンピューターの簡単操作→キーボードの動作の変更→固定キー機能を有効にする

で設定します。

ここでチェックを入れると、Ctrl、Alt、Shift、Windowsキーは、それぞれ2回連続して押すとロックがかかり、いっぺんに押す必要がなくなります。たとえば、Ctrl+Cとしたいなら、Ctrl→Ctrl→Cと順に押せばOKです。これにShift＋→でする範囲選択もShift→Shift→矢印キーとして、組み合わせて行えば、キーボードを指一本使って操作するだけでコピーアンドペーストができます。うむうむ。

「まぁ、便利、でも、お高いんでしょう？」「ええ、お高いんです！」

PC-Talkerというソフトで読み上げ設定

PC-Talkerというソフトで読み上げ設定

それから、専用のソフトの体験実習もありました。使ったのは、PC-Talkerというソフトです。テキストやコマンドとかを読み上げてくれます。これで、視覚障害があっても、どのメニューを出しているのか、どんな画面なのか、どんなテキストが書いてあるのか、とかいったことが分かります。こういう、便利なソフトや器具って、けっこうあるそうですが、実はけっこう、お高いんだそうです。「うわぁー、すごーい、便利ですねえぇ、でも、お高いんでしょ？」と聞くと、答えは「ええ、けっこうお高いんです」と帰ってきます。「それが、なんと、たったの○○円です！」とテレビ通販のようにはいかない。

本当は、もっといっぱい、内容の濃い研修1日目でしたが、ザルな脳みそを持つサル見習なので、うへーと、理解なかばに終了しました。もっといいサイトを作れるようになって、使う側としても迷わないようなスキルを身につけたいなぁと、心に誓う見習です。

2012年1月22日1:20 AM| カテゴリー： 勉強会,見習い奮闘記| コメント (0)

CSSファイルとJSファイルでのパスの書き方

CSSファイルとJava Scriptファイルでのパスの書き方につまずきました･･･。(相対パスの場合です）

ディレクトリ構造

ディレクトリ構造

このようなディレクトリ構造の場合、img01.jpgの書き方はこのようになります。

index.html

<div id="div1"><img src="imgs/imgs01.jpg" /></div>

このindex.htmlでCSSを外部化してstyle.cssに書いたとします。

style.css

#div1 {
	background-image:url(../imgs/img01.jpg);
}

実際に読み込まれるindex.htmlから見たパスではなく、style.cssから見た画像ファイルのパスになります。

このindex.htmlで読み込まれるJava Scriptを外部化してbase.jsに書いたとします。

base.js

 // JavaScript Document
$(function(){
$('#div1 img').attr('src','imgs/img01.jpg');
});

というように、Java Scriptファイルからのパスではなく、index.htmlからのパスになります。
Java Scriptがまず、index.htmlへ読み込まれてから、画像の読み込みが実行されるから、index.htmlからのパスになるようです。

となると、せっかくJava Scriptを外部化したメリット、他のHTMLでも使いまわしできる！を最大限活用するのであれば、絶対パスだとか、（絶対）URLだとかで記述したほうがいいってことですよね。

CSSのときとJava Scriptのときでパスの書き方が違うとは…。
やっぱり奥が深いのねとタメイキをつく、見習です。ふー。

2012年1月21日1:38 AM| カテゴリー： Java ScriptとJ Query,見習い奮闘記| コメント (0)

Photo Shopで角丸バナーに枠をつけたい

このまえ、やっとのことでPhoto Shopで角丸四角のバナーを作りましたが、そのとき、まだワクがついていませんでした。でも、角丸のバナーって、サイトのイメージカラーとか、薄いグレーとかで、1pxくらいの細いフチがついていることが多いです。

前回のPhoto Shopで角丸四角のバナーは、こちら。

Fire Worksでは、内部にペーストで線を残すとか、塗りのない角丸四角を上からもう1つ乗せるとかで対応できました。

Photo Shopのほうは、そのままでした…。Fire WorksやIllustratorとかではある、「塗りなし」という選択がが、Photo Shopでは見当たらない！
「うへー」となりましたが、見習、なんとかできました。

ということで、この前作った角丸四角のバナーに角丸のフチをつけます。Photo Shopで。ちなみに使ったのはPhoto Shop CS5です。

今回準備してあるのは、この左側の画像です。サイズが200×138です。このサイズぴったりに収まるようにしてフチをつけます。

画像を開く

画像を開く

まず、Photo Shopで画像を開きます。(ってあたりまえか…)

角丸長方形ツール

角丸長方形ツール

角丸長方形ツールをクリックします。

角丸長方形の設定

角丸長方形の設定

ここで、「シェイプレイヤー」「丸み5px」を選択します。そして「丸み」の横にある下向き▼のオプションをクリックすると、

角丸長方形オプション

角丸長方形オプション

角丸長方形オプションが出るので、ここで「固定」をチェックし、指定のサイズ（ここではW200px　H138px）を入力します。

画面をクリックで、指定サイズの角丸長方形

画面をクリックで、指定サイズの角丸長方形

この状態で画面をクリックすると、指定のサイズのシェイプレイヤーができます。ぴっちりと、元の画像とかどをあわせます。ここでは、塗りに指定された色で塗りつぶされているので、元の画像が見えなくなっています。

塗りを0%

塗りを0%

レイヤーパネルで、いま作ったシェイプレイヤーを選択して、塗りを0%にします。

「境界線」をクリック

「境界線」をクリック

そしてこのレイヤーパネルの下にある[fx]をクリックするとレイヤースタイルが設定できるので、「境界線」を選択します。

レイヤースタイルダイアログ

レイヤースタイルダイアログ

レイヤースタイルの設定ダイアログボックスが出るので、ここで「サイズ」を1px（ここは任意の値、線の太さ）、位置を「内側」、カラーで、フチの色を指定します。

ここで位置を「内側」にすることで、先ほど作ったシェイプレイヤーのサイズの内側に線が引かれるので、指定のサイズぴったりのバナーが作れます。内側意外にすると、先ほどつくったシェイプレイヤーのサイズより大きくなってしまうので、注意です。

OKをクリックすると…。

でけた！でけた！でけた！

みょーにうれしくなっている見習です。よーし、もっとがんばるぞー。

2012年1月20日1:27 AM| カテゴリー： Photoshop,画像処理,見習い奮闘記| コメント (0)

« 古い記事 新しい記事 »