iOS:jQuery問題集ver2が完成しました

つい先程アップルにjQuery問題集のバージョンアップ申請をしました。
デバッグ&機能確認をしていたら、400問を越えても問題なさそうだったので
以前に記事にした変更点を幾つかキャンセルしました。
 

復習データの制限はなし

意外だったのですが、私の古いiPodでも435問の連続解答で全く問題ありませんでした。
なので記録できるデータ数に制限は付けませんでした。
とはいえ、こまめな復習をお薦めします。
 

リストは廃止しませんでした

復習データと異なり、リスト画面は問題数の増加によって少しレスポンスが落ちました。
わたしの古いiPodではソートに2秒ほどかかります。とはいえ、予想よりも問題が無かったため
リスト画面は廃止しませんでした。
400問あるのでソートを利用しても200問目あたりにアクセスするのは大変なのですが、
問題のチェックは復習ページでも可能なので、問題は少ないとの判断もありました。
 

カテゴリの追加

カテゴリは予定通り追加しました。以下の様な感じになっています。
()内の数値は問題数です。画像クリックで拡大します。
写真
 

価格は300円になります

今回のバージョンアップから価格は300円になります。
購入をお考えの方は今がお得です!
 
 

Lite版もver2になります

有料版の問題数が増えたので、Lite版の問題数も増やしました。
50問に30問を追加して80問になりました。カテゴリ画面は以下の様になっています。
コアとセレクタでちょうど80問なのです。
スクリーンショット 2014-03-29 0.30.25
 
あとLite版では最初に有料版の紹介を表示するようにしました。
アプリからAppStoreを開くというのに挑戦したかったのです。
実際はURLリンクするだけなので凄く簡単でした。
スクリーンショット 2014-03-29 0.30.16
 
以上
あとは紹介ページのyoutube動画も作り直さないと…
動画の再生数が50回くらいで、ダウンロード数よりも少ないのです。
動画見ないでダウンロードする方がほとんどのようで、
モチベーションも上がらないのですが頑張ろうと思います。
 
 
 

備忘録:印刷への配慮

印刷への配慮

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」は必要ないことが判明。
アイコンなども置き換える必要があるので、管理しやすいように印刷用のブロックを作成し
そこに印刷用のページを生成するようにしました。
 
 
 

jQueryサイト:今週はリファレンスの更新なし

問題集アプリがとうとう予定していたdeferredまで終わりました。
callbacksのカテゴリは私がまだ良く理解していないので、もう少し理解が進んでから
問題にする予定です。
問題数は以下の通り435問(ID:0〜434)になりました。
写真

問題集アプリに伴うリファレンスの更新ですが、今週はありません。
以前の記事で色々追加済みだったので。
→参考:1/25日のブログ記事
→参考:→参考:2/1日のブログ記事
 
 

jQueryサイト:リファレンスv1.11対応

バージョン1.11

1月末に本家サイトにてjQueryのバージョン1.11がリリースされました。
→本家サイト:jQuery 1.11 and 2.1 Released
 
とはいえ、バグ修正がメインでメソッドやプロパティの仕様に変更はありません。
なので、今回のバージョンアップに伴うリファレンスの追加/修正はありません。
 
これでは、記事の内容が寂しいので本家サイトに記述されていたv1.11の「what’s new」
の概要を簡単に書いておこうと思います。
 

Fewer forced layouts

ブラウザが時間のかかるレイアウト(a time-consuming layout)を行うのを削減し、
機能を向上させました。全てのページで効果的というわけでなく、クラス名の変更が
発生するようなページで効果を発揮するそうです。

Granular custom builds

より細かくカスタムビルドを行えるようになったそうです。カスタムビルドとは
jQueryから自分が利用しない機能を削除し、自分用のjQueryを作成する事です。
余分な機能を削除することでjQueryのパフォーマンス向上が期待できます。
→google検索:jQuery カスタムビルド

Lower startup overhead

これまではjQueryの機能設定を読み込んだときにまとめて行っていたため、
スタートアップに時間がかかっていました(特にモバイル環境)。また、このことは
ユーザーが利用しない機能の分も含まれているので効率的ではありませんでした。
しかしv1.11では最初に行うのではなく、その機能が必要になってから行うようにした
のでスタートアップが早くなり、ユーザーが利用しない機能については処理されない
ので効率的です。

Published on npm

npmへの登録。npmとはNode Package Managerの略でnode.jsのパッケージ管理に
関するツールだそうです。ただしv1.11は対応していないそうです。
→参考:gihyo.jp様「基礎から学ぶNode.js

Published on Bower

Bowerというのもパッケージ管理ツールだそうです。
→google検索:javascript パッケージ管理
 
パッケージ管理は「どのように便利なのか」よく分からないので、時間のある時に
勉強しようと思います(たぶん)。
 
 
 

問題集アプリにともなう更新

今週はAjaxとユーティリティの校正をしたのですが、細かい文言の修正だけで
サンプルの追加修正をしたのはユーティリティのparseHTMLメソッドだけでした。
 

$.parseHTML

これまでのparseHTMLの記事はjQueryメソッドとの比較がメインになっていました。
→リファレンス:parseHTML「jQueryメソッドの危険性
→リファレンス:parseHTML「 parseHTMLは通常scriptは実行しない
 
このためparseHTMLメソッドとjQueryメソッドは同じ機能と思いがちなのですが
2つのメソッドは返値が異なるため同じ機能ではありません。
jQueryメソッドはjQueryオブジェクトを返しますが、parseHTMLは配列を返します。
 
なので、この違いを強調するような記事を追加しています。
→リファレンス:parseHTML「 返されるのは配列です
→リファレンス:parseHTML「 HTML要素になっていることを確認
→リファレンス:parseHTML「 jQueryメソッドの方が便利なケース
 
 
でもって、問題集アプリの問題数は401問となりました。来週末には問題をすべて
完成させることができそうです。そして再来週からは、カテゴリ別の機能を付けたりと、
アプリの仕様を変更する作業に入る予定です。
 
写真
 
 
 

jQueryサイト:リファレンス更新とアプリ更新

アプリ更新v1.1.0

今回の更新は5日で審査が通り、すでにAppStoreで更新されました。
スクリーンショット 2014-03-02 15.13.40
→iTunesプレビュー:jQuery問題集
 
 
 

リファレンス更新

問題集アプリの作成に伴うリファレンスの更新作業は、演出効果(effects)に
入りました。この項目での問題追加は40問くらいになりそうです。
 

show

showメソッドがhideメソッド以外の要因で消えている要素にも利用できることを
確認するサンプルを追加しました。
→リファレンス:showメソッド「hideメソッド以外にも利用できます
 

animate

animateメソッドにはv1.8で追加されたdeferred関連の機能について
幾つかサンプルを追加しました。
→リファレンス:animateメソッド「stopメソッドで停止された時の処理
→リファレンス:animateメソッド「stopメソッドを利用してもfailにならないケース
→リファレンス:animateメソッド「promiseオブジェクトの利用
→リファレンス:animateメソッド「アニメ前に実行する処理を設定
 

deferred.done

animateメソッドのサンプルを追加していて、deferredオブジェクトに追加した
サンプルのことを思い出し、こちらにも記事を追加しました。
→リファレンス:doneメソッド「アニメには異常終了は無い?
→リファレンス:doneメソッド「単体のアニメには異常終了があります
 
 
演出効果の項目は、あまり追加はありませんでした。
次週はAjaxの項目には入れそうです。