mkasumi.com


先日、2016年12月22日(木)に発売された電子書籍版のデザイニングWebアクセシビリティを株式会社ボーンデジタル岡本さんよりいただきました。岡本さん、ありがとうございます!そして、関係者のみなさま、待望の電子書籍の出版おめでとうございます。


(写真)

デザイニングWebアクセシビリティをiPad Proに入れてみました

もともと電子書籍版デザイニング Webアクセシビリティは発売決定をセミナーで知り、「EPUB版だったらソースコードが見れるよ!」と代表から聞いたことから、ひそかに発売を楽しみにしていました(ちなみに、電子書籍入手後、きちんとマークアップされたソースコードを確認できました)。

「デザイニングWebアクセシビリティ」という名前だけど、コーダーも楽しめる本

実はすでに弊社にはこちらの書籍自体は2冊あります。ですが、タイトルに「デザイニング」とついていることから、気になるところだけかいつまんで読んだことはあったのですが、恥ずかしながらきちんと読んだのはこれが初めてでした。

実際に読んできたところ、書籍の中にはマークアップに関わるお話もありますし、アクセシビリティに対するそもそもの考え方から教えてくれています。Webアクセシビリティをする際の実装テクニックではなく、「そもそもなぜ対応するのか?どう考えて対応するのか?」といった考え方の部分にとくに私は興味を持っているので、とても楽しく読めました。

「マークアップってどういうことなの?」「Webアクセシビリティって何をしたらいいの?」という方におすすめします。マークアップ・Webアクセシビリティへの学習の仕方を尋ねられらることが多くなってきたのですが、一言で考え方を伝えるのは難しいので、これからはこちらの書籍を紹介したいと思います。

出版から1年経って読むときに気をつけたいところ

出版されたのが2015年7月ですが、書籍で紹介されている JIS X 8341-3 の2016年版である JIS X 8341-3:2016 が2016年3月に公表されています。これから読む方は書籍内で紹介されている JIS X 8341-3:2010 の部分は JIS X 8341-3:2016 を代わりに参照していただくと良さそうです。

前述しましたが、実装のテクニックというよりはそもそもの考え方の部分を教えてくれる本なので、書籍自体は2015年に発売されたものですが、1年経った今でもとても楽しくかつ面白く読むことができます。

各電子書籍版の違い

デザイニングWebアクセシビリティでは、以下のファイル形式が用意されています。.azkと.mobiの拡張子のものについては、ボーンデジタルさんでご購入いただいた場合に付録としてついくるものになります。

岡本さんに聞くと、それぞれの形式に合わせて工夫がされているとのことだったので、PDF版とEPUB版を重点的に比べてみました。.mobi形式のファイルも、KindleのiPhoneアプリに入れてみました。

各形式を比較してみた結果

スクリーンリーダーでも読んでみましたが、きちんとマークアップされているおかげで、見出しレベルも読み上げてくれます。スクリーンリーダー読みでは一番EPUBが個人的には聞き取りやすかったです。

そして、EPUB版であれば書籍内で紹介された語句や事例サイトにはリンクがついているので、とても便利にページを移動できます。Web系の書籍ではURLが引用されていることが多いのに、わざわざPCを開いてURLを叩かなくてはいけないことに面倒を感じていたので、「ストレスレスになって、電子書籍ってとてもいいな!」という印象です。索引もPDF版とは違って表示方法が工夫されていて、EPUB版ではアクセスしやすいようにリンクが追加されています。

EPUB版は機能が豊富でベタ誉めしていますが、PDF版は視覚的に読みたいときにおすすめです。EPUB版はスタイルがPDF版ほど種類が豊富ではないこともありますが、フォントやレイアウトを書籍から引き継いでいるPDF版のほうが視覚的に読むときには読みやすい印象を受けました。

まとめると、豊富な機能を利用したい(スクリーンリーダーで読みたい・紹介されているURLに手軽にアクセスしたい、メモを取りたい)場合はEPUB版、視覚的に読みたい(フォントやレイアウトはキレイな状態で・1ページの情報量をいっぱいにして読みたい)場合はPDF版を選ばれることが個人的にはおすすめです。

いろいろと見比べてみましたが、スクリーンリーダーから読んでみても理解しやすい書籍でした。きっと、(書籍になっているものなので当たり前かもしれませんが)わかりやすい言葉選びをされていることと、きちんとマークアップされているおかげだと思います。書籍の感想からは外れてしまいますが、今回読み比べてみてやっぱりマークアップって大事だなあと実感しました。


Tag:アクセシビリティ  

Posted by 森田かすみ at 11:31  Permalink

こちらの記事は a-blog cms Advent Calendar 2016 の2日目の記事です。

たとえば、「製品名の名前が変わったので、サイト内に載っている製品名をすべて書き換えたい」、「リンク先が変わったので、サイト内に掲載しているリンク先を書き換えたい」などの要望をお客さんから受けたことはありませんか?

コンテンツが数ページであれば困りませんが、コンテンツ量が多いサイトでは困ることが多いのではないかと思います。

「a-blog cmsに登録されたテキストの置換を効率よく行うための小ネタ」のつづきを読む


Posted by 森田かすみ at 00:00  Permalink

2016年9月23日(金)に、DevLOVEという勉強会に話し手として参加しました。今回は東京でしたが、DevLOVEは仙台や関西でも開催している勉強会です。なんと今回が198回目だそうです。


(写真)登壇風景

今回お話しした理由

今回の勉強会では、「マークアップの最適解を見つけ出す方法」というタイトルでお話ししてきました。もともとアップルップルの社内勉強会で、後輩に向けて話した内容だったので基本よりももっと根っこになる考え方の部分についてお話ししました。

私がこの内容を話そうと思った理由は、これから勉強する人たちに私みたいにマークアップで悩まないで欲しかったからです。私はとても長い間マークアップに悩んでいました。今はたくさん学ばなければいけないことがたくさんあるので(開発環境、作業効率、メンテナンス性などなど)、なかなかじっくり悩むということが難しいかもしれません。ですが、マークアップはまだまだ重要ですし、だからこそ基本のところは知って欲しいという思いがあります。

なので、私が何に悩んで、どういう風に普段落とし所を見つけているのかを共有したいと思いました。マークアップは一般的な正解を導き出すのはなかなか難しく、意見がたくさんあります。どのマークアップを選ぶのか、悩んだときにどうやって解決するのかを自分で導き出して欲しいと思ったので、納期を守りつつ、クライアントの要望に沿いながら、どうやって最適な解答を導き出したらいいのかを、マークアップエンジニア歴3年半の私の考え方をまとめました。

今回のセッションは考え方の部分が多いので、がっちりしたテクニックの知識がほしかった方には物足りないように感じたかもしれません。ですが、私が今回聞いてほしいと思っていたマークアップをこれから始める方にはしっかりと伝えられたようでよかったです。

「「マークアップの最適解を見つけ出す方法」というセッションをDevLOVEにて発表しました」のつづきを読む


Tag:コーディング HTML セミナー マークアップ 

Posted by 森田かすみ at 21:41  Permalink

もしかしたら中には難しいことをせずに、画像でマスクしてトリミングしている方もいるかもしれませんが、今回は以下の理由があり、SVGのclipPath要素を使うことにしました。

  • デザイナーさんから手書き風に画像をトリミングしたいという要望があった
  • クライアントがCMSから画像を更新するとき、画像を加工する手間を省きたい
  • パスをモーフィングアニメーションさせたい

子猫の顔が全部見えないのが悲しいですが、クリップパスの実装イメージ


実際のコードは以下のURLからご覧ください。

※Part1のソースコードはなんだかぎこちなかったので、改良したソースコードがPart2になります。

「SVGのclipPath要素を使ってモーフィングアニメーションする」のつづきを読む


Tag:SVG アニメーション 

Posted by 森田かすみ at 13:27  Permalink

2016年8月20日(土)に開催された WCAN mini 2016 Vol.2 SVG Maniax in Nagoya で、制作したSVG絵本「ピヨスケとたまごのぼうし」についてライトニングトークとして発表しました。

もともと、私は学生時代は絵本専攻を選択していて、「Webなら読者が参加できる絵本を作れるのでは?」という思いも少し持ちつつこの道を選択した理由でもあったので、個人的には念願のWebでの絵本制作でした。

今回はSVGがテーマだったため、SVGの技術を使った絵本を制作しました。私が作成した絵本は以下のリンクからご覧いただけます(※ SVGの学習用の制作物のため、一部ブラウザで正常に動かないことがあります。CSSアニメーションを使っているので、IEやEdgeでは正常に動きません。デスクトップのChrome・FireFoxでは正常に動きます。Safariでは6ページ目が動きません)。

制作した絵本



「WCAN mini 2016 Vol.2でSVG絵本「ピヨスケとたまごのぼうし」を発表しました」のつづきを読む


Tag:SVG 絵本 

Posted by 森田かすみ at 23:13  Permalink

プロフィール

森田かすみ

名古屋のWeb制作会社でマークアップエンジニアとして働いています。マークアップ勉強会名古屋という勉強会の主催もやっています。

  • はてなブックマーク

カテゴリー