HTML5などなど次世代Web勉強会 in 福井に参加してきました。

11月27日に開催されました「HTML5などなど次世代Web勉強会 in 福井」に参加して自作アプリの紹介をしてきました。というより、悪ふざけしてきましたw

.fukuiでHTML+JavaScriptでつくるiPhoneアプリの勉強してたので、そのことについて簡単なデモを絡めたLTするだけのつもりだったんですけど、どうしてあんなことになったんだろう。。まぁいいやw
たぶんやってたこと自体はマジメなことだと思ってるので、自身の反省を兼ねて補足の記事を書いてみよう。

そもそも

iPhoneアプリつくりたいなっていう思いがずっと前からあって、でもobjective-cが高い壁なんだろうなーとか思っててなかなか手を出せなかったんですけど、HTML5の勉強をしようと思ってたときに、たまたま「HTML+JavaScriptでつくるiPhoneアプリ〜」みたいな記事を発見して、「これならデザイナーでもできんじゃん。HTML5とJavaScriptの勉強にもなるし一石二鳥じゃね＞＜」とか思ったので少し調べてみました。
そんなときに@shoitoと「HTML5の勉強会したいよねー」と話してたので、「じゃあ俺なにか発表します。」という簡単なノリでスピーカーに立候補しました。

「HTML5」っていう言葉がよく聞こえてくるようになって、じゃあ実際どうしたらいいの？いつから使い始めればいいの？っていうのがずっと疑問でした。多分仕様策定はまだ先なんだろうなー。でもいきなり「はい、来月からHTML5解禁です。」ってなっても多分対応できないだろうなって思ってたので、ぼちぼちと本読んだり、記事読んだりして情報は追っかけてるつもりでした。でも、本読んだだけでは何となくわかってるつもり程度にしかならないだろうなって思いはあって、やっぱり手を動かさないと身に付かないなと考えてたのでたまにコーディングしたりとかはしてたんですけど、実際に公開するサイトじゃないので、なんとなく楽しくなかったのです。現状IEではhtml5.js読ませれば形は多分整うんですけど、なんかブラウザ意識してつくるのもめんどくさいなーって思ってました。（仕事ではブラウザチェックしてますよw）
「あ、じゃあブラウザ限定されるスマートフォン向けにつくればいいじゃん。HTML5の勉強にもなるし、前から興味のあったiPhoneアプリ制作もできる＞＜」ということに気づきましたので、それ関係の制作tipsを少し調べたのでそれの紹介です。

まずは表示サイズを調整しよう

[php]

[/php]


iPhoneのMobileSafariではデフォルトで横幅980pxで表示されるそうです。ですがiPhoneの画面サイズは横幅320pxです（縦の場合）。なのでデフォルトではとても文字や画像が小さく表示されてしまいます。 その問題を解消するために、上記のmetaの記述が必要となります。contentの値を細かく設定できるみたいですけど、width=device-widthにしておけばとりあえずは問題ないと思います。

参考サイト：iPhone向けサイト構築 基礎文法最速マスター

不要なタスクバーを非表示にしよう

[php]

[/php]

一応今回つくるのは「MobileSafariで動くwebアプリケーション」になります。ですが作りたいのは「iPhone」アプリです。MobileSafariでブラウジングした場合、当然ながら画面上部にURLを入力するためのタスクバーが表示されます。ですがiPhoneアプリにはこのタスクバーはありません。なので非表示にしたいです。上記のmetaの記述をすれば非表示になります。（ただし後述のホーム画面にアイコンを設置する方法でのみ）

参考サイト：iPhone向けSafari、HTML拡張属性を使いこなす


自作アイコンを設置しよう

[php]

[/php]

「アプリ」っていう言葉を聞くと、スマートフォンのホーム画面にあるアイコンをタップして起動させるものってイメージがあります。MobileSafariのブックマークで、「ホーム画面に追加」というボタンがありますので、それをタップすれば ホーム画面上にアイコンを設置することができます。ですが設置されたアイコンは、画面キャプチャを小さくしたものになりますので、あまり見栄えが良くない場合があります。そこで、上記のlinkの記述をすれば任意の画像をアイコンとしてホーム画面に設置することができます。

参考サイト：WebClipアイコン(Apple touch icon)の覚え書き

起動画面を作ろう

[css]

[/css]

アイコンをタップして起動させるときに、起動画面があったほうがよりアプリっぽい感じがしますね。上記のlinkの記述をすれば任意の画像を起動画面に使用することができます。


ネットがなくても使えるようにしよう

Webアプリケーション= ネットワークに繋がってる環境のみで動くものです。
これまで説明して来たのは「Mobile Safariで動くWebアプリケーションをiPhoneアプリっぽく見せる方法」なので、ネットに繋がってないと動かないものです。でもそれってiPhoneアプリっぽくないですよね。なのでネットに繋がってなくても動くようにしちゃいましょう。そんなこともできます。そう、HTML5ならねw

「cash.manifest」っていう名前のmanifestファイルを作って下記のような内容を記述します。要はネット環境無しでも動かしたいファイルを記述します。注意点としてはUTF-8で保存するということです。

CACHE MANIFEST

# Version: 006

CACHE:

# html
index.html

# image
./image/icon.png
./image/startup.png

次にhtmlファイルのhtml要素にmanifest属性で先ほどつくったmanifestファイルを読み込ませます。

[php]

[/php]


最後に.htaccessに

AddType text/cache-manifest.manifest

と1行記述します。

以上の手順だけでネット環境なくても使えるようになります。たぶん厳密に言うとキャッシュが残るので、「一度ネット環境あるところでアクセスして使うと、ネット環境無しでも使えるようになる」って感じだと思います。
MacOSXのローカルホストで動かなかったので見事にはまりました...orz

参考サイト：アプリケーションキャッシュのサンプル

という感じで、以上のことを押さえておけばiPhoneアプリっぽくできるんじゃないでしょうか。

で、つくったものは。

「TouchPaint」というネーミングで、画面上をタップすればランダムな大きさと色のグラデーションの円を描画するというものです。使用技術としてはcanvas要素とそれに関連するJavaScriptです。

「HTML5=canvas」っていう思いがあったので、canvasを使ったなにかを作りたかったのです。見た目を表現できるので、デザイナー向けかなと思ってましたけど、他にもSVGとかWebGLとかもありますね。もしかしたらそっちの方追ったほうがいいのかも...とか思ったのは内緒の事実ですw

なにに使うかは・・・スライドみてくださいw

デザイナーが作るHTML5アプリ

View more presentations from Toshiaki Sasaki.

コードはjsdo.itにはりました。

HTML5などなど次世代Web勉強会 in 福井　発表用 - jsdo.it - share JavaScript, HTML5 and CSS

で、結局はなにが言いたかったかというと、今回みたいになにか作れば少なからずそのことについて勉強できるし、作ったものをああしたい、こうしたいみたいな気持ちになってさらに勉強したいという気持ちになるから、とりあえず何かつくろうってことです。
HTML5を本格的に使うようになったら、JavaScriptのことをもっともっと知らなくちゃいけないようになるから、今のうちに何か作って慣れておきましょう。
多分、そんなたいしたもの作らなくてもいいし、背伸びなんてする必要ないと思います。大事なのはなにかしようという気持ちですよはい。偉そうですねはい。

という感じで言い訳終わりですw
来年はもうちょっとマジメに生きますw

暖かく見守ってくださった皆様ありがとうございましたー。