[iOS] アプリ制作日記　レスポンシブウェブとか

2012/10/18

こんにちは。きんくまです。

前回アプリの審査に出したと書いたのですが、結論から先にいうとまだ見てもらってません！
これはAppleが悪いのではなくて、一度自主的に審査を下ろして、改良してまた審査の列に並び直したからなんです。

というのも、はじめに審査に出してやれやれと思っていて、時間もあったので
ベータテスター（嫁）wに初めて見せたところ、「何をどうするのかさっぱりわからない」と言わてしまいまして。
「うーん、確かにそうかと」くやしいながらも納得。
なので、いったん審査に並び中のところを取り下げました。

そんで初回起動時にヘルプをつけたり、メニューの文言を修正したり、端末からサポートメールを送れるようにして、なるべく初見であまりこういう端末に詳しくない人にもわかりやすくなるように改良しました。
さらに、これまで曜日ごとにチェック日を設定できるのを、○日ごとチェックできる新機能をつけたりしました。
ようやく審査に出したのが先週末という感じです。

なので、来週明けには見てくれるんじゃないかなあと思ってる次第です。

レスポンシブウェブ

アプリのWebページを作ってあったのですが、これをiPhone / iPadから見たところ残念な結果になっていたことに気づきまして。
Appストアからリンクが貼られるのに、端末からちゃんと見られないのはマズイです。

で最近レスポンシブウェブっていうのがあるらしいので、それで対応しました。
今回はデフォルトとiPhone Portrait = 320pxの2つのメディアクエリーのバージョンにしました。
これでPCとiPhone / iPad でも快適に見られるようになりました。

今回はそのあたりのだらだら日記がメインです。

参考にした本

洋書なんですが、本家amazon.comで評判が良かったので買ってみることに。
和書だとこの本がレビューが良いみたいですが、現物は見れてないです。

それで、さっきの洋書は最初の1/3でレスポンシブにする方法を解説していて、残りの2/3でhtml5+CSS3を解説している感じです。
洋書は難しい英語とわりと読みやすい英語とあるんだけど、たぶん文系の人が書いたんだろうなと思うものは難しく感じて（よくわかんない部分がある）、理系の人が書いたものは読みやすく感じます。
この辺、日本語でも文系の方が難しい漢字を使ったりする傾向がある気がするので、そういうものかもしれない。
自分が見ててたぶん文系と思うWebサイトはSmashing Magazine。これはフロントエンド寄りの記事が多くてデザイナー、コーダー向けかも。
たぶん理系と思うWebサイトはRay Wenderlichでこれは完全にiOSのディベロッパー向け。
Smashing Magazineは言い回しとか、出てくる単語が難しい。Ray Wenderlichは、言い回しとか単語が割とわかりやすく感じる。
で、今回の本はフロントエンド系の人が書いているので難しいと思った。理解度は半分くらい。

SASS

話を戻して、今回のページ制作にせっかくなのでSASSを試してみようと思いました。

知らない人は下のところが良記事なのでおすすめです。

>> 【Webデザイナ－・コーダー向け】すぐに使えるSCSS入門｜基礎編｜クラスメソッド開発ブログ

すっごく簡単にいうと、変数や関数っぽいもの（mixin）を使えるようになったcssでしょうか。
最終的にscssというファイルをコンパイルしてcssに書き出します。
自分の場合はGUIでなくTerminalのコマンド打つ方が好きなんでそっちでやりました。

CSSは工夫しようとしてもなかなか早く書けない言語だったんで、scssはすごく気に入りました。
レスポンシブウェブだと幅を%でやったりするんで、目的の数値を引数にすれば大丈夫なmixinを書いておけば大分楽です。
あと定数を使ったりするところとか、別ファイルをインポートしておいてコンパイル時にインライン展開するのも何気に便利。

今回はそれにscssのライブラリのBourbonというのを使ってみました。
使ったといってもclearfixのところだけなんですけどね、、。ものは試しってやつで。

なんだかwebもだんだんコンパイル言語みたいになってきてますね。
このまま進んでいくと生のcssがバイナリとか言われたりするんですかね。
コンパイルといえばJavaSdriptでもMSのTypeScrptは試してみたいです。

それで話を戻して、今回最後に残ったのがIEさん対策です。
今回はIE6は対象外にしました。IE7以上だとだいたい同じに見れます。

本によるとModernizrというのがあるらしくてそれを使いました。

>> 様々なブラウザ環境に対応する為のJavaScriptライブラリ「Modernizr」-JavaScript Library Archive
>> Modernizr を使ってブラウザの機能にあわせた CSS, JS を書く | Tips Note

これを使ってもできなかったのはCSS3のセレクタの:nth-child()です。
これは認識してくれなかったので、ベタ打ちに切り替えました。
これで大丈夫になりました。