hpstyling のすべての投稿

青森市内で障害者関係の情報を探してきました

点字用PC

昨日の朝、急に思いついたんですが障害者(今回は視覚障害者)についての調べ物をするために青森市の各施設を回ってきました。

午前中は青森県視覚障害者情報センターへ。一応事前アポは取っていったんですが、期せずしていきなり所長様が対応してくださり色々お話を聞けました。「ホームページの制作者の方にこういう活動をしていただけることは本当に嬉しい。ぜひ頑張ってください」と励ましをいただきました。嬉しいですね(^^)そのあと職員の方に設備を色々を見させていただきました。上の写真は点字用のソフトを入れたPCで、キーの各所に点字が貼ってあります。キーボードの一部を点字の6点に見立てて、それを押すことにより点字で文章を入力することができます。

デイジー

上の写真はデイジーというもので、右の機械で音声データを抽出し、それを左のポータブル機に転送することで音声を持ち運べるというもの。右の機械には視覚障害者用の機能として見出しスキップやページスキップ等が付いていて、目が見えなくてもある程度快適に情報を探すことができます。他にも色々と面白いものや興味深いものがあったんですけどそれはまたの機会に。

昼頃、知り合いが務める福祉系の事務所へ。障害者用PC操作の講習みたいなのをやってる所ってないのか系の情報について聞き、それならねむのき会館が良いだろうとのこと。でもこの日はお休みらしかったのでまたの機会に。

午後、青森市民図書館へ。

青森市民図書館内にある視覚障害者用PC

視覚障害者情報センターの方が教えてくれたんですが、市民図書館にはスクリーンリーダーや音声ブラウザといった障害者向けソフトの入ったPCがネットにつながった状態であるとのことだったので、それを使わせていただきにいきました。ちなみにこちらは通常障害者の方しか使えないそうですが、今回は勉強のためということで許可をいただきました。余談ですが市民図書館の電話番号を調べる際に、ケータイサイトがあって重宝しました。

実は市民図書館には大学の頃お世話になった方が何人かいらっしゃったので、その方々と久しぶりにお話をしながらスクリーンリーダーを使ったりしてみました。ん~、やっぱりこういうソフトは手元にあると便利だなーと思ったんですけど、なかなか高額でちょっと手が出ないんですよね。。

青森市民図書館内、障害者向け機器

市民図書館にはPCの他にも色々な障害者向けの設備があります。

そいういえば年末ネットでたまたま知り合った方がいて、その方は全盲の方なんですが、この日行った視覚障害者情報センターと市民図書館双方の方がその方をご存知でした。ぜひ今度はお会いしたいなと!

ブログパーツ「Web単語帳」を仮リリースしました


Flashをいじっているうちにふと思いついたので、空き時間を使ってブログパーツを一つ作ってみました。

ブログパーツ「Web単語帳」は、ウェブ業界でよく目にするキーワードや用語などをランダムに一つずつ表示し、それについての簡単な説明を確認できるWeb初心者向けアプリです。ご自分のサイトやブログなどに自由に貼っていただき、簡単な勉強と復習に役立てていただければと思っています。現在は一応バージョン1.0ということでシンプルな機能ですが、折を見て機能追加などのバージョンアップができればと思っています。

ブログやサイトに貼ってみたいという方は、下記のソースを任意の場所にコピペしてください。貼っていただいた方は一報戴けると嬉しいです!

<script language=”JavaScript” src=”http://www.hpstyling.com//blogparts-webnote/js_lib/SWFLayer.js” type=”text/javascript”></script>
<script language=”JavaScript” src=”http://www.hpstyling.com//blogparts-webnote/web-words-blogparts.js” type=”text/javascript”></script>

もし、「中央寄せで貼り付けたい」という方は下記のソースでお試しください。

<div align=”center”><script language=”JavaScript” src=”http://www.hpstyling.com//blogparts-webnote/js_lib/SWFLayer.js” type=”text/javascript”></script>
<script language=”JavaScript” src=”http://www.hpstyling.com//blogparts-webnote/web-words-blogparts.js” type=”text/javascript”></script></div>

ちなみにリリースした現段階では収録してる単語数は20と少ないんですが、追々追加していきたいと思っています。追加についてはこちら側で行うので、ブログパーツを表示し直すという手間は必要ありません。

また、「ブログとかやってないよ」 という方も使っていただけるように、(できれば)近いうちにAIR版 をリリースしたいと思っています。AIR版というのはデスクトップアプリケーションのことで、普通にインストールして起動し、デスクトップ上で使用してい ただけるものにしたバージョンです。ブラウザを起動したりブログに貼りつけるといった手間をかけずに使っていただけます。

ここからは余談です。制作するにあたってActionscript(AS)2で作ろうと当初考えていたのですが、AIR版のことを考えるとAS3で 作った方がいいのかなと思ったりしてAS3で作りました。結果的になんですが、XMLをロードして表示する等の仕組みはAS3で意外とスマートにいったの でかえって良かったかなと思ったりしました。

今回のブログパーツを作ったことでまた違うアイデアが湧いてきたので、時間を見つけてまた作ろうと思っています。その他「こんなブログパーツがあったら面白い」などのアイデアがあったら教えてください。ついでですがブログパーツ制作の案件もお待ちしています。

Movable Typeのカテゴリ並び替え・任意カテゴリの表示と非表示についてメモ

Movable Typeのカテゴリまわりの調整で久しぶりにはまりました。が突破。ちょっと手こずったのでメモ。

Movable Type(今回はVer.4.23)でカテゴリの順番を自由に並び替えるのに使用するプラグインはSortCatFld。 プラグインの導入・設定方法は割愛。SortCatFldを使用して任意の並び順にしたカテゴリの一覧を表示するには下のような感じ(であってるかな?)。sort_methodを指定する。カテゴリの最初と最後辺りを調整するのにMTSubCatIsFirstとMTSubCatIsLastを使用。これが正しいかは微妙なのだけど、他の方法でうまくいかない部分があったのでこれで。

<MTTopLevelCategories sort_method=”SortCatFld::Sort”>
<MTSubCatIsFirst>
<ul>
</MTSubCatIsFirst>
<li><a href=”<$MTCategoryArchiveLink$>”><$MTCategoryLabel$></a></li>
<MTSubCatIsLast>
</ul>
</MTSubCatIsLast>
</MTTopLevelCategories>

この一覧の中から任意のカテゴリだけをピックアップして表示したり非表示にしたりするプラグインはFilterCategories。導入・設定方法は特に難しくないので割愛。例えば「会社案内」カテゴリだけ非表示にしたい場合は(※注:下のソースだとうまく機能しません。更に下で後述します)

<MTTopLevelCategories sort_method=”SortCatFld::Sort”>
<MTFilterCategories exclude=”会社案内”>
<MTSubCatIsFirst>
<ul>
</MTSubCatIsFirst>
<li><a href=”<$MTCategoryArchiveLink$>”><$MTCategoryLabel$></a></li>
<MTSubCatIsLast>
</ul>
</MTSubCatIsLast>
</MTFilterCategories>
</MTTopLevelCategories>

と、MTFilterCategoriesタグのexclude属性で、非表示にするカテゴリを指定する。逆に表示したいカテゴリを指定するならinclude属性にする。カテゴリを複数指定したい場合は

<MTFilterCategories exclude=”cat1 | cat2 | cat3″>

という具合に|で区切って複数指定が可能。ここで勘違いしやすいのは、includeやexcludeで指定する値はCategoryLabelに相当する部分で、CategoryID(カテゴリーのID)やCategoryDescription(カテゴリーの説明)ではないということ。カテゴリによっては上のソースのように日本語で指定することになる。ちょっと変な感じがするかもしれないけどこれでうまくいのでちょっと変な感じ。

しかし上のソースではまった。色々なページのTipsを見ていると、「MTTopLevelCategoriesタグの直後にMTFilterCategoriesを入れる」と書いてたのでそのようにしたら、うまくカテゴリの表示と非表示が機能しない。

解決法としては

<MTTopLevelCategories sort_method=”SortCatFld::Sort”>
<MTSubCatIsFirst>
<ul>
</MTSubCatIsFirst>
<MTFilterCategories exclude=”会社案内”>
<li><a href=”<$MTCategoryArchiveLink$>”><$MTCategoryLabel$></a></li>
</MTFilterCategories>
<MTSubCatIsLast>
</ul>
</MTSubCatIsLast>
</MTTopLevelCategories>

上のように、MTFilterCategoriesの位置を調整するとうまくいった。各タグや属性の使い方が正しいかは別として、ひとまずこれで思い通りのカテゴリ順序と表示非表示が実現できました。こういう調整は結構出てきそうなので議事録としてメモしときます。おかしいソースやもっとこうしたら良いというのがありましたらコメント等でお知らせください。

後で気づいたんですが、この問題を解決した時間よりこのエントリー書いた時間の方がかかったかも。。

Pick up remember 20090204

一つのテーマに絞ってがっつり書こうとすると時間がかかるので、色々思ったり考えたことを淡々と箇条書きで書いてみようと思います。

障害者とインターネット関連のこと、水面下で進行中

去年から考えていた障害者とインターネットのことについて、水面下で少しずつ準備をしています。端的に言うとサイトを作っています。障害者と健常者、そしてウェブ制作者が一緒にアクセシビリティについて考えていったり情報を共有できるような内容を考えています。最初は一からHTMLを書こうと思っていたんですが、あまり時間をかけていられないのもあってフリーのwordpressテンプレートをカスタマイズすることにしました。

久しぶりにwordpressダウンロードしましたけど、そういえばちょっと前のとは管理画面のインターフェイスがガラッと変わってたんですね。でも使いにくいことはない感じです。テンプレート側で独自に決めていた変数等の意味を理解するのにちょっと時間がかかりましたが、分かればなるほど便利なことになっているテンプレートで結構カスタマイズ甲斐があります。

良い仕事道具はいつになっても欲しい

以前はキーボードマニアだったんですが、最近はマシンがmacbook proに落ち着いたのもあって久しくキーボードを買ってません。去年の1月頃にRealforceを分不相応にも買ってみて使ったりもしたんですが、100%気に行って使い続けられるというものもなかなかないもんですね。

実はRealforceよりもHHKが欲しかったんですが、ProではなくLiteを試し打ちしてみて意外に重かったのもあってRealforceにしたんですけど、Realforceは若干キーの高さが自分に合わない(ちょっと高めな)ところがネックだったりします。あとキーボードに求めるのは横幅の小ささなので、つまるところApple Wireless Keyboardがベストなのかなとも思いつつ手が出てません。

道具と言えばIntelの新しいCPU、core i 7が速いと聞いて結構気になってます。 Core 2 Duoで十分感動してたんですが、core i 7も気になるところです。画像の加工だけでなくたまに動画も触るので、マシンが速いに越したことはないです。

コーディングはもっと速く正確にできるはず

仕事のたびにHTMLとCSSの書き方を少し変えながら書いてみてます。試行錯誤の甲斐あってか単に数をこなしてるからか、数年前に比べて完成までの時間は大分短くなったような気はします。CSSについてのTipsやバグの対処法などなど情報も良いのが出てきたおかげで、バグつぶしにかかる時間が大きく減ったのは体感してます。

でも自分の理想としてはもっと早く書けるようになりたいと思っています。 2時間かかっているコーディングなら、1時間で全部完了するようにしたいと思いますし、そのためにはどうすればいいのか、何を準備しておいたらいいのかということに色々頭を使ったりします。

仕事の企画・営業

今までありがたくもサイト開設以外の営業活動をしたことがほとんどなかったんですが(意識せずに営業につながっていたことはあったかもですが)、今年は「色々やりたいことをやりまくる」というテーマで頑張ろうと思っているので、仕事も一から企画し営業もしてみようと考えています。いくつか企画のネタはあって少しずつ進めているところです。上手くいくもの、いかないものも含めて全吸収で頑張ろうと思います。通れば嬉しいですし、自分の考えた仕事なら楽しくできるでしょうしね。

そういえば去年出していた代理店様経由のコンペ形式案件で一つダメだったものがありました。自分としてはデザインも提案内容もベストを尽くしたので、残念と言えば残念ですがあれでダメなら仕方ないという気持ちでまた次頑張ります。

WebAの課題

神君と一緒に主催しているWebA。今回は参加者の皆さんをグループに分けて架空サイトの企画とデザインを宿題にしてます。各グループの方の話をちらほら聞くと、順風満帆ガシガシ進んでますよというところはまず無さそうです(笑)。どっちかというと結構しんどそうだったりあたふたな感じなので、あまり気負いすぎず頑張ってください。あと、参加者の方ばっかりしんどそうなのもあれなので、自分も時間を見つけてなんとか一つ見せられるものを作っておきたいと思ってます。

OpenOfficeで一太郎のファイルを開ける拡張機能

ドキュメントを作るのにMicrosoft wordを使用している方は多いと思いますが、稀に一太郎のファイルを見たり編集したりする必要が出てくると思います。一太郎のドキュメントを見るために使う一太郎ビューアなどもありますが、どうせなら編集もできればよいですよね。そんなニーズにOpenOfficeなどが対応です。

フリーのオフィスソフト「OpenOffice」と「StarOffice」が一太郎に対応する拡張機能を発表したそうです。

 米Sun Microsystemsは1月30日、オフィスソフトの「OpenOffice.org」および「StarOffice」でワープロソフト「一太郎」の ファイルを開くための拡張機能「Ichitaro Document Filter」を公開した。OpenOffice.orgの機能拡張ページから無償でダウンロードできる。

Ichitaro Document Filterを適用すると、OpenOffice.org 3.0およびStarOffice 9以降で、一太郎 11/10/9/8で作成したJTDファイルおよびJTTファイルを読み込めるようになる。Windowsのみに対応する。(Internet Watch)

Ichitaro Document Filterのダウンロードページ(英文)
http://extensions.services.openoffice.org/project/ichitaro

Windows限定ですが、かゆい所に手が届く的な機能ですね。

実践して良いと思った4つのウェブ技術勉強法

尊敬するアートディレクターが勉強のことをスタディといっていたのをふと思い出しました。カッコいいなと思いつつ、自分はまだそう言えないなぁとも思ったりもします。

先週のWDHA 11も無事に講師役を終えることができました。当日の模様はWDHAのサイトにそのうちアップされると思いますが、結構時間アップアップで新機能を紹介できなかったものもありましたが、伝えたかった大方の機能については紹介することができたのではないかなと思っています。

今回のWDHAもそうでしたが、スクールや勉強会の講師などをさせてもらってると一見聞く側が主役の勉強の場という風に考えるかもしれません。しかし実際のところ、講師役の方が勉強になっている部分も多々あると思うんですね。これは仕事術やライフハック系の本でもよく取り上げられていますが、講師役になると参加者が理解できるよう説明する必要があるので、より深く理解しようと勉強したり試行錯誤をするためです。

また、講師という立場で参加者に言葉や映像(スライド)などで説明するということは、講師のアウトプットにつながります。脳科学者の茂木健一郎さんも、理解を深めるためにはインプットと同時にアウトプットも非常に大切と著書で言われています。茂木さんに限らずアウトプットの重要性は方々で言われていますし、自分としても何かしらの形でアウトプットを行うことで理解が深まっている気はするので、やはり講師役やプレゼンターになることは有益と考えられます。

さておき冒頭の勉強のことですが、時間の合間を見てしばらくできなかった勉強をちょこちょこしています。なにぶん興味のあることの幅が欲張りよろしく広いので、色々なものを広く浅くさらっている感じです。アクセシビリティ・CSS・Flash・モバイル等など尽きることはないのですけど、今はこれが良い感じのバランスを保っている感じがします。

手を広げ過ぎず一つに集中して取り組むべきとよく言われる気がしますが、今の自分としては様々な分野に少し手を出しては違う分野に手をつけ、しばらく経ったらまた違う分野へというこの流れが、ほどよい「飽き」の感じを保ちつつどの分野も面白く見て回れている感じがして心地良いです。

あとは場所を変えてみるのも好きです。普段自宅に一人でいる反動か、マクドナルドやモスバーガーなど多少騒がしい所に行って本を読んだりするとかえって集中できる感じがあります。 一見不思議なんですが、周りに人がいる環境がかえって良い刺激にもなっているもかもしれません。それにお店にいつまでもいられるわけではないですし、トイレに行きたくなった際にもしもトイレが遠い位置にあるお店だと、テーブルを離れにくいという意識も働きます。そうなるとより短時間に集中して勉強しようとも思うでしょう。「競争」「制限」この辺りは勉強にとって必要な要素だと思ったりします。

ということで表題の勉強法をまとめてみると

  • 講師役になってみる
  • アウトプットする
  • あえて幅広い分野に手をつけてみる
  • 意外な場所で勉強してみる

こんな感じでしょうか。

勉強法を書く予定ではなかったんですが、つらつらと書いているうちにいつの間にか勉強法としてまとまっていったのでこんな感じに結論付けてみました。他にも良い勉強法があればぜひ教えてください。

WDHA #11でスピーカーします

wdha

青森でウェブに携わる人、興味のある人が集う情報交換コミュニティWDHAの11回目(2009年1月17日土曜 13:00~17:00)の第二部でお話しすることになりました。公式サイトより発表が早くてアレなんですが、早いに越したことはないかなと思うのでお知らせします。

内容は昨年末に発売されたウェブ制作ツール「Adobe CS4」ファミリーの新機能などについてです。自分もまだ使い始めて間もないですが、来ていただく方の役に立つような各ソフトの機能をピックアップ+実演して紹介できればと思っています。 またこちらから一方的にしゃべっていても退屈だと思うので、座談会よろしく参加者の皆さんでソフトの機能や各種疑問などについて意見交換できるような進め方にもしていこうと思っています。

17日はWDHA、その次の週はWebAと新年早々からイベント目白押しですが、頑張っていきたいと思います!

2009年もよろしくお願いします

2009年1月

仕事始めということで遅ればせながら明けましておめでとうございます。

2009年はこれまで以上に色々な活動に手を広げていきたいと思っていますので、今年もどうぞよろしくお願いします。ちなみに上の花牛さん(勝手に命名)は年賀状用のデザインです。今年は仕事用・プライベート用合わせて3パターン作ったうちの一つです。

Adobe CS4さらっと使ってみて雑感

Adobe CS4 Dreamweaver画面

先日(2008年12月19日)Adobe CS4が発売されました。バージョンアップの関係で発売日の1~2日前に到着したユーザもいたそうですが、こちらは発売日ちょっきりに届きました。やっぱり高い買い物ですが、今後の諸事を考えて最新のものを使っておこうと思い切って買いました。一応実作業もCS4に切り替えたのでちょっとレビューをアップしてみます。

【Dreamweaver CS4】

上の画面はDreamweaverです。インターフェイスがだいぶ変わりました。挿入バーが右のパネル群に含まれた分、画面上側に空いたスペースには、メインで開いているファイルの関連ファイルへのリンクが設置されました。たとえば画像ではindex.html を開いていますが、すぐ上の部分にはindex.htmlで使用しているCSSファイルの一覧が表示されています。すぐにCSSを開けるので意外と便利です。また、今までの分割ビューではHTMLファイルを編集する場合、そのHTMLのデザインとソースを分割表示できるのみでしたが、CS4ではHTMLとCSSソースを分割表示といった具合に、自分の編集したいものに応じて画面を切り替えられるという機能になっています。使ってみるとなかなか効率的です。

Adobe CS4 Dreamweaver インジケーター機能

これに関係した機能で「インジケーター」というものがあります。これはページ中の任意の部分にカーソルを置いて一定時間経つとポップアップが表示され、任意の部分に関連したCSSセレクタが表示されるという優れもの。いちいち膨大なCSSファイルの中から目的のセレクタを捜す必要が無いので、別の制作者が制作したCSSの修正作業もかなり早くなりそうです。
※2008年12月25日追記:インジケーターは「コードナビゲータ」機能とも言うというか、そちらの方が正式っぽいです。また、Altキーを押しながら任意の部分をクリックすることで瞬時にインジケーターを表示できるようです。

【Fireworks CS4】

CS3に比べて重いかも。起動も動作の軽快さもCS3の方が良い気が…。ただ、その分機能は強化されている感じです。

Adobe Fireworks CS4 スマートガイド機能

スマートガイド機能は、オブジェクトを移動して配置しようとする際に、自動で揃えるラインを表示・吸着してくれる機能です。今まではガイドを引いたり整列機能をいちいち使う必要がありましたが、自動で逐一スマートガイドが調整してくれるので便利です。ただし細かい部分まで出てこられる際は逆に微調整ができず悶々としてしまうこともありますけど。あとやっぱり動作がちょっと重いです。CS3より落ちる確率が多い気もします。

【Flash CS4】

Adobe Flash CS4 アニメーション

アニメーションの作り方が今までと根本的に違いますが、より直感的になったといえばなったという気もします。ただ、まだちょっとピンとこない部分もあったりしてちょっと手間取る箇所もあります。ビデオファイルはまだ出力してないんですが、H.264形式ムービーの書き出しがどのくらい綺麗なのかやってみたいですね。

DreamweaverやFireworksにも言えると思いますが、インターフェイスがAdobe仕様に統一されているという感じです。Flashについては映像ソフトのPremiereやAfter effectsにかなり近づいた感じです。タイムラインも今まで上に表示されていたものが下に表示されるようになりました。

【全体】

まずインストールに時間かかりまくりです。全部インストールするのに2時間近くかかりました。これはもうちょっとなんとかなればなぁ。。 あとバージョンをアップしたら既存の設定が全て新しい方に移行されるわけではないことに注意。Dreamweaverのサイト定義はさすがに自動で移行されましたけど、カスタマイズしたキーボードショートカットの設定やFlashの設定などは再度設定する必要があります。これ意外と手間ですね。

ただ、どれも使い込んでいけばいくほど使い勝手や機能がより手になじんできそうな感じはします。 機能が充実しすぎて使う側がついていけてない感じはいつもなんですけど、必要な機能を必要なときスムーズに使うことができれば作業時間の短縮につなげられそうな機能は随所に見られる感じです。

全盲の方にPC操作の様子を見せていただきました

シンガーソングライター板橋かずゆきさん(中央)

障がい者関係やアクセシビリティのことで行動するという話を以前にも書いていましたが、それについてちょっと動いてきました。

今週はじめ、青森はむつ市在住で全盲のシンガーソングライター板橋かずゆきさんにお会いしてきました。ちょっと前から自分で連絡を取っていたのもあるんですが、青森県議会議員の一戸富美雄さんにきっかけを作っていただいて今回お会いすることができました(県庁の議会に行くのはちょっと緊張)。あとCSS Nite in AOMORIの山本さんも同席してお話をしてもらいました。

早速板橋さんが普段使用しているPCを操作してもらったんですけどなんかすごい。かなり操作に慣れているというのもあると思うんですけど、普通に自分が操作するのと変わらないようなスピードで操作されていました。ただ違うのはマウスを一切使わないこと。そしてインターネットのサイトは文字でだけ表示されることでした。

音声ブラウザ操作画面

いくつかのサイトを見て(読んで)いただいたんですけど、内容を把握しやすいサイトもあればどうしても把握できないサイトもあって。それの例として某ローカル局のサイトを取り上げていただいたんですが、重要な画像に代替テキスト(画像の情報を捕捉するテキスト)が入っていないので、知りたい内容が把握できないというものでした。代替テキストの重要性は分かってはいるつもりでしたが、実際にこういう感じで見せられると実感が違います。

他にも色々とお話を聞かせていただいて勉強になること多々でした。これからも交流を続けて情報交換や協力ができればいいなと思っています。