備忘録:印刷への配慮

印刷への配慮

19日の記事の続き。です。時間が無いので箇条書きっぽくなっています。
 

印刷はいつでも利用される可能性がある

めでたく印刷画面の生成に成功したのですが、問題に気が付きました。
ブラウザの印刷機能は、結果画面だけでなく他の段階でも利用される可能性があります。
 
作成しているコンテンツのは複数の段階があるのですが、どの段階で印刷機能を
利用しても、印刷用に生成した「結果画面」を印刷してしまうのです。
 
結果画面以外で印刷機能が利用されることは少ないと思うのですが、これはいけません。
ということで、結果画面以外では印刷用に生成した画面を印刷しないように修正しました。
状況に応じて印刷用のclassを付け外しして対応。
 
 

ブラウザの印刷仕様

ブラウザには色々種類がありますが、大抵のブラウザではデフォルトで背景色/背景画像を
印刷しない仕様になっています(表示する設定にする事も可能)。
これはインクの消費量を抑える配慮らしいのですが、このことを頭に入れておかないと
必要な情報が印刷されないことになってしまいます。
 
 

印刷への配慮

印刷に配慮したcssの記事はネット上に多くみつけることができました。
ポイントとしては以下の通り。
・メニューやリンクなど紙面では機能しない部分は表示しない。
・モノクロ印刷でも見やすくするために文字色は黒に。 
 
 

背景利用したボタン

昔はマウスオーバーで画像を切り替えるのはjavaScriptを利用して、表示画像を切り替える
のが主流だったように思います(dreamweaverでもそのようなビヘイビアがありましたし)。
しかし、今では背景画像の表示位置を切り替えて対応する場合が多いと思います。
そうすることで、javaScriptを書かずに対応できプリロードの問題も無くなります。
詳しくは以下のページで。
→参考:サンプル「選択肢の作成(1)
 
この様に作成したボタンは印刷時に表示されないので「印刷への配慮」で記した
「紙面では機能しない部分は表示しない」にも繋がり一石二鳥です。
 
しかしコンテンツによっては、ボタンを印刷しないと画面が成立しないケースが
でてきます。現在作成している案件でも、そのような箇所があるので
部分的に昔ながらのjavaScriptで制御するボタンに切り替えました。
 
 

背景を印刷するモードもある

検証は色々なケースを考えて行ったのですが、印刷用のcssを用意している時に
「背景を印刷する」モードで印刷すると困るケースが出てきます。
例えばフッター部分を「黒背景に白文字」でデザインし、印刷時には
背景が表示されないから「文字を黒くする」ように設定するとします。
 
この場合、デフォルトの「背景を印刷しない」場合は問題ないのですが、
「背景を印刷する」の設定にすると、黒背景に黒文字になり読めなくなってしまいます。
なので、印刷用のcssには背景色を白にする記述も追加しなくてはなりません。
 
 

印刷に配慮することへのジレンマ

この段階で、ふと考えてしまいました。ブラウザの表示と同じ印刷結果が欲しくて
「背景を印刷する」設定にしても、印刷用のcssを利用していると、それとは異なる
結果が出力されることになります。これは良いのだろうか?
悩んだ時は、他の企業サイトを確認しましょう。
 
 

印刷への配慮は殆どされていない?

色々な企業サイトで確認したのですが、印刷時にメニューを印刷しないように
設定している企業は見つかりませんでした。やはり表示しているものをそのまま印刷
する用にした方が良いのかもしれません。私自身も、その方が安心する気がします。
 
以下のサイトは印刷時にサイドメニューは残しますが、上部メインメニューは
印刷されません。これは配慮なのか?と思ったのですが、上部メニューは背景画像を
利用したボタンなので意図せず印刷されないのでしょう。
→参考:プリウス「スペック
 
 

jQueryを利用したサイトこそ印刷への配慮を!

色々なサイトを確認して、jQuery等を利用したリッチコンテンツほど印刷に配慮
しなければいけないような気がしてきました。
jQueryを利用したコンテンツは従来の紙面を意識したデザインの壁を破ることが
できますが、そのことが印刷への未対応につながっています。
 
例えば以下のサイトで「MAP」ページに移動して印刷プレビューしてみてください。
地図は印刷する機会が多いと思いますが、地図が印刷できません…。
→参考:Dining kitchen
※「大きな地図で見る」ボタンをクリックしてgoogleマップに移動すれば印刷できます。
 
 

まとめ

大企業のサイトでも印刷に配慮したページは少ない。これは配慮していないというより
ブラウザの表示のままを印刷するようにしているのかもしれない。
これがデファクトスタンダードなら、メニューやリンクを表示しないなどの配慮は
やり過ぎない方が良いかも。
 
jQueryを利用したリッチコンテンツでも印刷が必要となるページ「地図など」は
きちんと印刷できるように配慮しよう。
 
 
 
 

備忘録:印刷用のCSS

現在、仕事で作成しているjQueryコンテンツで印刷機能の必要性があったので色々メモ。
サイトカラーが淡い色のため、そのまま印刷すると(特に白黒印刷)著しく可読性が
落ちるので、印刷用の画面を別途用意することにしました。しかし…
 

メディアクエリはIE9以降でないと利用できない

ざっと調べた結果、印刷対策にはメディアクエリを利用して印刷用のCSSを用意するとのこと。
しかしメディアクエリはcss3のためIE9以降でないと利用できないとのこと…。
 
ですが「css3-mediaqueries.js」を利用すればIE8以前でもメディアクエリが
利用できることが分かりました。注意点としてはlinkやimportの指定には対応していないこと。
→参考:メディアクエリをIE7、IE8でも使えるようにする
 
 

IE8以前でも部分的にメディアクエリに対応している?

でもってIEの開発者ツールを利用してIE7,8で動作確認。きちんと機能しています。
しかし、試しにcss3-mediaqueries.jsの読込をやめても、きちんと機能してしまいます…。
何故?
 
気になったので、開発者ツールでなく実際の古いブラウザで確認しようと思い
押し入れにしまってあるwindowsXPマシンをセットアップ。でもって検証(IE8)。
問題なく機能しているのを確認。さらにIE7で確認しようとするも、IE8がインストール
されているとIE7がインストールできない…。
 
なのでネットで情報収集。
以下のサイトの中程に、IE6は印刷時に画面をいい感じに縮小してくれないので
ページ内に納まるように印刷時にのみ縮尺を変更するテクニックを紹介しています。
→参考:印刷対応サイト
 
ここで@mediaを利用しているので「あれ?IE9以降ではないの?」と思いリファレンスサイト
で対応状況を確認。@mediaを利用して印刷用のcssを利用するのはIE5.5から可能という
ことが判明!
→参考:とほほのCSS「@media」
 
 

結論

メディアクエリと@mediaは別モノ。@mediaを利用した印刷用のcssはIE5.5から対応している
メディアクエリは、その進化形でIEは9以降で対応。画面の解像度や色数などでもcssを
振り分けることが可能。
→参考;MDN「メディアクエリ
→参考:はてなキーワード「メディアクエリ
 
結局、今回の案件では「css3-mediaqueries.js」は必要ないことが判明。
アイコンなども置き換える必要があるので、管理しやすいように印刷用のブロックを作成し
そこに印刷用のページを生成するようにしました。
 
 
 

windows8の購入

これまでのメインの仕事はFlashだったので、ブラウザごとの動作確認は必要なかったのですが
jQuery(というかCSS)の場合はブラウザごとに動作確認しなければなりません。
 
Windows8はマイクロソフトのサーフェイスがでるまで待とうと思っていたのですが
そうもいっていられなくなったので、購入することになりました。
 
windowsはデスクトップ機(osはxpでIEtesterのテスト環境)があるのでタブレット機から
windows8&タッチパネルを搭載しているものを選択することにしました。
 
色々悩んだのですが、解像度が1920×1080の「ICONIA W700」に決めました。
googleでの「ICONIA W700」の検索結果
 


上の写真がキーボードの付いていないwindows機のICONIAで、
下のはキーボード付きのスマートフォンのIS11T。
 
色々な方がレビューしているとおり、とても良いマシンだと思います。ただ..
メトロ版のIEには開発者メニューが付いていないため、IEのバージョンごとのチェックは
クラッシックモードで行うのですが、11.6インチに1920×1080を表示しているため
ボタン類がとても小さく、タッチペンでも碌に操作ができません…。結局タブレット機にマウスを
つなげて検証しました(写真で左上に小さな突起がありますが、これが無線マウスの端子)。
 
 
 

メトロ版のIEで気付いたことのメモ

IEはメトロ版もクラッシック版も同じ描画エンジンだけれど、微妙に仕様が異なっていました。
メトロ版では横にした時と縦にした時で表示の拡大率が変わりました。つまりAndroidやiOSの
タブレット機のブラウザと同じ仕様です。
 
なので、AndroidやiOSのviewportのような仕様を変更するメタタグが利用できるのか
確認したのですが機能しませんでした。特に問題も不満もないのですが、html側から制御
することはできるのか気になります。
→参考:仕様を変更するメタタグ
 
 
 

Windowsへのグチ

まだブラウザ以外はあまり利用していないのですが、Windowsストアに接続できない現象が
しばしば発生します…。解決方法は以下のサイトにあるようにWSReset.exeを実行します。
せっかく初心者にも利用しやすいメトロUIなのに、こんな操作をしなければならないなんて…
→:Windwsストアに接続できない場合の対策
 
 
 

jQueryサイトの更新

1月末が非常に忙しかったので、今週もサンプルを進めることはできませんでした…。
なので代わりに、使用例に3サイトを追加しました。
jQueryサイト:使用例
 
 
 

アンチウィルスソフト

アンチウィルスソフトは昔からノートンを利用していたのですが、ノートンのMac版は
win版より高いくせにwin版よりも機能が少なくて、なんだか残念に思っていました。
 
なので去年はカスペルスキーに切り替えたのですが、こっちもMac版はwin版より残念な
感じでした…。まぁMacはウィルスの危険性がwinよりも低いからしようがないので
しょうね。
 
ということで今年はノートンに戻そうと思って、最新の「ノートン360マルチデバイス」
を購入したのですが…。
 
OSがLionからしか対応しておらず、わたしのSnow Leopardにはインストールできません
でした…。折角なので、apple Stopで最新のOSであるMountain Lionを購入
しようとしたのですが、ユーザーのコメントに「メールが文字化けする」とか
「インストールが40%から進まない」とか「重い」とか沢山あって躊躇しまくり
 
いま仕事がたくさん重なって、週末も作業しなくてはいけないので
結局、購入を見送りました…。
で、カスペルスキーを延長して利用することにしました。
ノートンは次にMac本体を買い換えた後でインストールしようと思います。
 
でもカスペルスキーのマルチデバイスに対抗するためか、ノートンもマルチデバイス化されて
1パッケージで複数のMacに導入でき、昔よりお買い得感がUpして嬉しいです。
 
あとキャッシュバックキャンペーンにつられたのですが、現金でなくギフトカードなのは
ちょっとショック。キャッシュていうから現金だと思ったのに…。
(前にもノートンでギフトカードもらったけれど、そのときはどうだったのだろ?)
 
 
そんな分けで、jQueryのサイトもあまり進めることはできませんでした。
Ajaxの項目は完了しました。
Ajax:xml等との連携
 
 
 

あけましておめでとうございます。

本年もよろしくお願いいたします。
 
今年はカリキュラムのテキスト作成に本腰をいれるため、これまでのような執筆に時間の掛かる
学習系の記事は減ると思います。その代わりjQueryを利用した企業サイトやスマートフォン向け
のサイトなどを紹介していく予定です。あとjQueryのプラグインの紹介をしたいと考えています。
 
 
 

webデザイナー白書 [web designing]

9月は忙しくてweb designingの10月号を買いそびれていたのだけれど、Amazonで
まだ売っていたので11月号と合わせて手に入れました。
 
10月号にはwebデザイナー白書があり、Flashへの関心が予想以上に下がってたこと
に驚きました。習得したい技術では去年の3位から22位に下がり、習得したい言語
ではActionScript3.0でさえ去年から半減(34.1%→15.2%)…。
新しいカリキュラムではFlashバナーの講座も予定していたけれど、場合によっては
再考しないといけないのかもしれません。
 
Flashに代わってスマートフォン関連の技術が注目されているのは書店巡りでも少し
感じていたのだけれど、予想をはるかに超える人気なのもビックリ。jQueryついでに
jQuery Mobileもやっておいた方が良さそうですね。
 
内心スマートフォンなんてpcのブラウザとそれほど変わらないと思っていたので
記事中にスマートフォンではcssのposition:fixedやoverflow:hiddenが利用できないと
あって驚きました。これらの設定ってアプリっぽいjQueryコンテンツを作成するのに
不可欠だと思っていたので…。だからjQueryとは別にjQuery Mobileがあるのだろうか?
あとで調べないといけません。
jQuery Mobile 1.0b1 日本語リファレンス 
 
習得したい技術でiPhoneやAndroidのアプリ開発が大人気なのに、習得したい言語で
Java やC言語の人気がないのも、HTML5,CSS3,JavaScriptによるアプリ作成に興味が
あるということなのだろうか?
 
 

jQuery関連の書籍を見てきた

半日書店で本探し…疲れました

jQueryの書籍を1冊も読んだことがないので、どんな感じなのか上京して確認にいきました。
jQueryの本は最近たくさんあるので、Amazonで事前に評判を確認して良さそうだった7冊の
本を重点的にチェック。
 
ActionScriptでは、ある程度の分量をマスターしないとコンテンツを作成する事は難しいけれど
jQueryは少ない分量でも仕事に活用できるので、理解しやすい構成になっている気がします。
しかしインターネットで収集できる情報も、同じように理解しやすいものが多いので、独学
できる人にとっては必要のない本も多そうです。
 
リストアップした本のうち何冊かを購入するつもりだったのですが、結局は以下の1冊しか
購入しませんでした。コアjQuery+プラグイン/jQuery UI 開発実践技法
私はjQueryを学び始めてからは日が浅いのですがjavaScriptの経験は長いので、初心者向けの
本は必要なく少し踏み込んだ内容の本が欲しかったので。
 
 
 

書籍とかぶらないカリキュラム

jQueryはActionScriptに比べて学びやすく、ある程度の方はネットや書籍で独学が可能なので
初歩的な講座は人を集めることができない気がします。かといって難易度の高い講座は
ActionScript講座の経験からいって採算が取れません…。ではどの様なカリキュラムにすれば
よいのだろう…。
 
とは言ったものの、すでに決まっています。「ネットや書籍とかぶらない初心者向け」の
カリキュラムにする予定です。被らないようにするために、沢山の書籍を見て回ったのです。
現時点で考えているポイントは以下の通り。

・デザインやcssを絡めて完成度の高いサンプルを作成する。

 jQueryの書籍は分かりやすくするため、jQuery以外のcssやデザインは省く傾向がありました。
 なので分かりやすい反面、サンプルがシンプルです。基礎を学ぶ際には、それでよいのですが
 実際に仕事にする場合は、それをどの様に肉付けしてデザインしていくかがポイントになります。
 ですのでカリキュラムではjQueryに絡めてcssやデザインの説明をして完成度の高いサンプルを
 作成できるようにします。
 ※プラグインを紹介している書籍では完成度の高いサンプルもありました。カリキュラムでも
  カスタマイズが容易で汎用性の高いプラグインは紹介していこうと思います。
 

・なぜタブメニューとかスライドトグルが消えていったか

 このブログでも紹介したスライドトグルやプラグインで簡単に実現できるタブメニューは、
 一時期、企業のサイトでよく採用されていました。しかし現時点ではタブメニューや
 スライドトグルはかなり減っていると思います。その理由などを明かしながらユーザ
 ビリティの重要性を説明をしたり、逆にどのようなjQueryの用途が残っていくかを説明
 したいと思います。
 

・診断系コンテンツ

 ネットや書籍に無いコンテンツで汎用性が高く、仕事にも利用できそうなものとして
 jQuery版の診断系コンテンツ(Flash版のサンプル)を作成するカリキュラムを考えています。
 Flashよりも演出面では劣ると思いますが、Flashが利用できない方でも更新できます。

 
 
 

その他

jQuery関連の本を調べると、iPhoneアプリやAndroidアプリをjQuery(mobile)を利用して
作成する本が幾つかありました。これらでもストアに登録するようなアプリが作成できる
らしいけれど、jQueryやAjaxコンテンツであればwebブラウザで閲覧できるのだから、
アプリ登録はしないで野良アプリにするのもアリな気がします。
短期プロモーションではアプリの登録や解除、更新とか忙しそうだし。とはいえアプリを
ストアに登録したり解除したことはないので、良く分からないのですけどね。
  
今までのアンチウィルスソフトはNortonだったのだけれど、Mac版は大切にされてない
感じがして(需要がないからしょうがないのでしょうが…)いたので、Mac版は更新しないで
カスペルスキーに乗り換えてみました。とはいえMacではスパムメールが数回反応しただけで
ウィルスの検出は1度もないため、どれくらい違うのかは分からない気がします。
 
 
 

web designのパターン学習と応用

●デザインの習得には時間がかかる

webは紙媒体に比べてデザインに制限(例えばレイアウトやフォントサイズ等)が
多いため、デザインのバリエーションが比較的狭く、デザインの中では学びやすいと
思います。それでも0から始めると、習得にはかなりの時間が必要になるでしょう。
 
 
 

●パターン学習

デザインの習得法には色々あり、人により最適な習得方法は異なってくると思うのですが
多くの人にとって、短期間での習得に向いているのが「パターン学習」だと思います。
多様なバリエーション(パターン)のサイトを課題に沿ってデザインすることで、表現の
幅を広げ、模写と同じように見る目を養い、デザインを実現する技術を習得していきます。
 
しかし、この方法だと学んだバリエーションと似たようなデザインしか作成できる
ようにならず、応用性が低くなりがちです。これをフォローするためにパーツ(ヘッダ、
見出し、ボタン、バナー、etc)毎にパターン学習をして、それを再構成/再調整する
練習もする予定です。単純に組み合わせのバリエーションでフォローするだけですが
応用性は上がると思います。
 
 
  

●カリキュラムの流れ

カリキュラムの流れとしては以下の様になります。HTMLやCSSは他にセミナーや
書籍がたくさんあるので、デザインドリルでカリキュラム化する予定はありません。

・パーツのバリエーションを学ぶ:技術の習得と見る目を養う
  ↓
・全体の構成法を学ぶ:トーン&マナーの調整、統一感の理解。
  ↓
・テーマに沿った課題サンプルの作成
 
 
 

●新カリキュラムにデザインを入れた理由

設立時のデザインドリルのターゲット層は「すでにデザイナー/コーダーとして働いている
社会人」でした。しかし実際に開始してみると、web系スクール(○○ハリウッド等)の方も
意外と多く。そのような方から「Flashコンテンツの作成を学んでも、デザインができない
ので素人っぽいコンテンツになる」という意見が何件かありました。
そこで以前から、デザイン系の講座も必要だなと考えており、新カリキュラムを期に実現
しようと思ったわけです。しかしFlash限定のデザインではターゲット層が狭いので、この
ようにwebデザインのカリキュラムとしたわけです。