HTML5とCSS3でソースを組んだことはあるのですが、実際に「HTML5らしい」アプリケーションなどをつくったことがなかったので、簡単に試してみました。
こちらからご利用できます。Artpad。
■機能
Canvas機能は非常に応用の効く素晴らしい機能なので、iphoneアプリと同時進行でサービスサイトを一つ立ち上げてみようと思います。
やはり、HTML5がFlashと肩を並べ、追い抜く日も遠くないなと実感します。
私が思うに、Adobe Flashのような優れたUIのJavaScriptベースのソフトが発売され、そういった対抗馬のシェアをAdobeが無視できなくなったときにAdobeからJavaScriptベースのソフトがリリースされると推測しています。
そして、その時がAdobeがFlashによるWebリッチコンテンツ独占を諦めたときであり、HTML5とFlashの地位が逆転する瞬間なのではないか、と。
HTML5、CSS3、JavaScript、およびサーバーサイドプログラムの連携が基本になったとき、
今の制作現場の常識は通用せず、今までにない新しいアイデア、考え方、制作進行が必要になると思います。
プログレッシブ・エンハンスメントも含め、そういった変革が現場で必要になってくるのは先のことではなく、今からですね。
それぞれ人によってルールも考え方も違うので、ソース全体のルールを把握してから取り掛からないと、後から見たときに「グチャグチャ」なんてことになってしまいます。
今回は、私の考える「汎用性のあるHTMLとCSSのソースのルール」をご紹介します。
ルール1、区切りの良いところでインデントとコメントを入れる。 後から見たときに、どこからどこまでが一つのブロックかが分かるように、インデントとコメントをつけよう。
<!-- START header -->
<div class="header">
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<!-- END header -->
ルール2、よく使うスタイルは、テンプレートとして用意しておこう 下記のようなよく使うスタイルは別で用意してあげておくと、CSSファイルが無駄に縦に伸びないのでシンプルになります。
.mb10{ margin-bottom:10px; }
.mb20{ margin-bottom:10px; }
.mb30{ margin-bottom:10px; }
.mb40{ margin-bottom:10px; }
.strong{ font-weight:bold; }
ルール3、クラス名とコンテンツの内容は関係ないものにする 「news」や「interview」など、コンテンツの内容を表すクラス名を設定してしまうと、
これを防ぐには、コンテンツの要素ではなく、マークアップ的観点からクラス名を設定します。
<!-- START header -->
<div class="box01">
<ul class="list01">
<li></li>
<li></li>
<li></li>
</ul>
<p class="txt01"></p>
</div>
<!-- END header -->
簡単にいうと、どこでも使える汎用的な名前にしようね、ということです。
.txt01{ //中身 }
.box01{ //中身 }
.cont01{ //中身 }
.tit01{ //中身 }
.list01{ //中身 }
.dl01{ //中身 }
txt02、txt03、と別バージョンが増えていくわけです。
ルール4、ズラズラ複合セレクタを指定しない。 たまにあるのが、下記のようなクラスの指定をする方法。
div.header .news dl dd.tit01 p span.color01{ //中身 }
こういう指定をしちゃうと、例えば似たような「tit02」を別の場所に指定してあげたいときに、
大体こういう指定をする人は、「div.header」や「.news」などにもいろいろ指定しているので、
なので、複合セレクタはあんまり長くせずに、その場所を最も的確に表す、かつ固有のセレクタにしましょう。
ルール5、目次を作ろう 初見のCSSでもどこになにがあるか分かるように、CSSソースの最初には目次を作ろう。
/* txt */
/* tit */
/* box */
/* margin */
/* header */
/* main */
/* footer */
あとは、更新の度にしっかり整理整頓することですかね。
これからプログラムばかりでコーディングをスッカリやらなくなるかもなので、
なにかのお役に立てば幸いです。
HTML5はHTML4やXHTML1.0から様々な要素が増えたため、リセットで指定する要素も自然と増えます。
HTML5に対応したリセットをまとめたものが、コリスにて紹介されていました。HTML5+CSS3用のブラウザのスタイルをリセットするテンプレートファイル -HTML5 Reset
通常のリセット以外に、印刷用のCSSも（ガワだけ）用意されていました。
IE用のパッチがたくさん入っていましたが、個人的にはもうHTML5やCSS3に対応しないブラウザは知らない！というスタンスなので、IE用は削除して使おうかな、と思います。
ゲームとかでよくある横向きアプリですが、いざ作ろうとしてみると「どこを設定すればいいの？」という感じで最初はハマると思いますので、
設定自体はチョー簡単なので、心配ご無用です。一度やっちゃえば次回は1分。
１、あなたのプロジェクトの「○○○.info.plist」をいじる
○○○.info.plistの表の最後に項目を追加し、「UIInterfaceOrientation」みたいなのを選択します。
２、メインのなんたらViewController.mをいじる
ルートになる、まぁ一番メインの（デリゲートでない）ViewController.mをひらきます。
どこかに「// Override to allow orientations other than the default portrait orientation.」と書いてあって、
そして、そのコメントアウトじゃなくなったソースの中の
３、Interface builderの向きを変える
一部のテンプレートではこれだけでは横向きにならないそうですが、まぁ大体これだけでだいじょぶです。
Xcodeで「○○○ViewController.xib」を開き、アプリの画面が表示されてるウィンドゥ（View）の右上の矢印をクリックします。
これでくるんと画面が回転するはずです。
おわり
iphoneアプリはちょっとしたことをするのでも、「どうすればいいかさっぱりわからない」ということが多くて大変ですね。
でも、わかっちゃえば簡単簡単。
「簡単なんだよこんなの～♪」を合言葉に、くじけずいっしょに楽しみながらつくっていきましょう。
それではまた。
約2週間前から作業開始したのですが、その途端に仕事やその他プライベートが猛烈に忙しくなり、実質2日くらいしか作業時間がとれず、ようやくデザインが完成した段階です。
さて、今回は「iphoneアプリを作りたい！でもどうすればいいの？」という方に、初めてiphoneアプリを作るときに便利なサイトをまとめたいと思います。
1、iphoneアプリの作り方を覚える！
なにはともあれまずはこのサイトです。サルにもできるiPhoneアプリの作り方
iphoneアプリ作成に必要なもの、知識、効率のよい進め方などが、これでもかというほど分かり易く説明してあります。感謝です。
2、iphoneアプリを実機に登録する！
なんとiphoneアプリは、自分のiphoneに入れるだけでもかなり手間がかかります。最初はここで泣きそうになるくらいの覚悟が必要です。EZ-NET 登録レポート： 開発機として使用する iPhone 実機を登録する
とりあえず書いてあるとおりにすれば問題ないはずです。
3、iphoneアプリをitunesに公開する！
さて、ようやく公開だ、あ～つかれた！と思ったとき、公開の手順も泣きそうになるくらい手間がかかります。慣れるとラクになりますが。目指せ！iPhoneアプリ開発エキスパート
実はちょっと情報が古いので現状とは違う部分もありますが、そこらへんは調べましょう。まぁ調べなくてもノリでいけます。
4、その他
さて、なんど上記3サイトだけ見ればiphoneアプリが作れるというナイスな状況ですが、iphoneアプリには意外な落とし穴がたくさんあります。
1、対応OSの部分をiphone3.0に変更しよう。
なんにも気にせずそのままリリースすると、iphone OS4の人しかダウンロードできなくなります。これは、iphoneアプリの設定で「対応OSを4.xx以上」とデフォルトでなっているからです。
2、日本語名のアプリは、ローカライズして英語版の情報を作ってあげよう
たとえば、「えっちなアプリ」みたいなタイトルのアプリがあるとして、アメリカに住んでいるアンダーソンさんはそれをみても「ワット？」な感じなわけです。日本語のタイトルなので。
たぶん海外のitunesでは英語版のタイトルで表示される、はず。
なんか他にもたくさんあったけど、1ヶ月ぶりなので忘れてしまいました。思い出したら追記します。
というか眠くてねむくて。。。
世間を騒がせているHTML5。
他人の書いたソースを修正するのって大変ですよね。
今回は横向きアプリの作り方をご紹介します。
