Skip to content

見た目でゴマカす超速Webアプリ開発 #1

wise9読者の皆さんこんばんわ。UEIのショーヤマ兄さんダヨ。

このwise9ブログでプログラミングを初めてきたみんなもそろそろアプリを作りたい!って思ってきたんじゃないかな?
でも、実際にアプリを作るとなると色々面倒な作業も覚えることも多いのだ。

例えばスマートフォンで言えば、AndroidだったらJAVA、iPhoneだったらObjective-cという言語を覚えなきゃいけないし、それぞれAndroid MarketやApp Storeに開発者登録をしなきゃいけなかったり色々と面倒だ!

そこで今回はiPhoneのWebアプリを作ってしまおうというこの企画!

む?Webアプリと言って今バカにした人もいるんじゃないか?
でもそんな心配はいらない。最近ではHTML5とCSS3のおかげでネイティブのiPhoneアプリと遜色ないレベルのWebアプリを作ることだって可能なのだ。それに加えてiOS4.2からはiPhoneのWebブラウザであるMobileSafariから現在位置情報や加速度、ジャイロセンサーなど色々なデータをとれるようになったんだ。

これらをうまく使えばWebアプリであっても本格的なゲームやお絵描きアプリなど、Objective-Cで書かれたiPhoneネイティブのアプリと遜色ないレベルのアプリが作れるようになるかもしれないぞ!

では早速下のサンプルをiPhoneで開いてみよう。

http://junk.wise9.jp/mitamewebapp.zip

iPhoneを持ってない人もMacやPCからでもwebkitベースのブラウザであるSafariやChromeから見ることができるぞ。

サンプル
http://junk.wise9.jp/mitamewebapp/

画面が表示されたかな?iPhoneを持ってる人は下のツールバーの真ん中のボタンをタップして「ホーム画面に追加する」を選んでみよう。
すると、ホーム画面にアプリのようなものが表示されたよね。
早速開いてみよう。起動時のスプラッシュ画面が現れて、また同じ画面が開いたかな?

同じ画面だけどさっきとは違いフルスクリーンで表示されたよね?何だか上のステータスバーも黒くなっている。そしてこの画面は全て画像なしのCSSで作られている!
どうだい?かなりアプリっぽくないかい?ちょっとかっちょよくないかい?こんなようなWebアプリを作ってみたくなったでしょ!

ではこんなようなアプリを早速つくっていくよー!
いくよー!そろそろいくよー!

HTMLを書こう

まずはHTMLを書くことから始めよう。このブログの読者ならもうできるね。テキストエディタで下記のようなコードを書いて、ファイル名を”index.html”にして保存しよう。HTML5だとこんなように簡単に書ける。


/*HTML5の基本*/

   test

作ったHTMLファイルをブラウザで開いてみてちゃんとページが表示されたかな?
ではこの元となるHTMLページを作りこんでいこう。


/*index.htmlのサンプル*/

     <!-- メインとなるスタイルシートを設定 -->
<div id="kanban">
   wise*9</div>
<div id="button">
   button1</div>
<div id="button">
   button2</div>
<div id="button">
   button3</div>

ここでheadタグの中でCSSのファイル”main.css”を読みこむぜ!ということを記述してあげたので”main.css”ファイルを用意してあげよう。作り方はHTMLファイルと同じようにテキストエディタで拡張子だけを指定してあげればいい。


/*main.cssのサンプル*/

@charset "UTF-8";

body {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px;
font-family:'Helvetica';
color: black;
line-height: normal;
text-align: left;
background: #BBB;
width:320px;/*iPhoneの横幅*/
height:480px; /*iPhoneの縦幅*/
}

p, span, img, ul, ol, li, h1, h2, h3, frameset, frame {
border: 0px;
margin: 0px;
padding: 0px;
}

p {
font-weight:bold;
color:#555;
}

ul {
list-style-type: none;
}

a {
text-decoration:none;
}

#kanban {
background-color: #E75990;
width:300px;
height:80px;
color:#ffffff;
font-size:48pt;
text-align:center;
line-height: 1.3;
font-weight: bold;
margin-left:10px;
margin-top:20px;
border-bottom: 1px solid rgba(0,0,0,0.25);
border-top: 1px solid rgba(255,255,255,0.25);
float:left;
position: relative;
display: inline-block;
}

#button {
background-color: #ffc549;
width:260px;
height:40px;
color:#ffffff;
font-size:18pt;
text-align:center;
line-height: 1.7;
font-weight: bold;
margin-left:30px;
margin-top:20px;
border-bottom: 1px solid rgba(0,0,0,0.25);
border-top: 1px solid rgba(255,255,255,0.25);
float:left;
position: relative;
display: inline-block;
}

ブラウザで開くとこんな画面が表示されたかな?

さて、このままではただのHTMLなのでこの状態でいくら書いてもiPhoneで表示した時にはこんな風に表示されてしまう。

これにはiPhoneのブラウザであるMobileSafari特有のViewportという概念があるので、そこを調整しないといけないんだ。だが少し難しい内容なので今は理解する必要がないので、headタグの中に以下のようなコードを書いてみよう。


/*ビューポートの設定*/

<!-- ビューポートの設定 -->

このコードを書くと、画面が小さくならずにこのような画面になるね!
他にも色々なコードを書くことでiPhoneアプリの設定ができるが、それは後でまた扱うよ!

HTMLを動かそう!

さて今のままでは何も動かないページでつまらないので、javascriptで動的にページを書きかえてみよう。main.jsを作成してこんなコードを書く。


/*main.jsのサンプル*/
function changeName(){
var changename = document.getElementById("kanban");
changename.innerHTML = "CHANGE";
alert("書き換えたよ!");
}

このコードを動かすためにまずはindex.htmlのheadのタグ内に、


<!-- jsファイルの読み込み -->
<script src="main.js" type="text/javascript"><!--mce:0--></script>
[

と書いて”main.js”ファイルを読み込み、”index.html”のdivタグの中にonClick=”ChangeName()”と書いてみよう。


<div id="button" onclick="changeName()">
   button1</div>

そうすると見事に文字が変わったかな?

さて、wise9の読者ならここまではアクビがでるような内容だね。
では、ちょっとここからはレベルを上げていくよ!

現在位置付近のTweetを取得する!

では、現在位置付近のTweetを取得するというコードを書いてみよう。
まずは現在位置を取得するコードを書いてみよう!


function geoLocate(){
 if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position) {
        callback(position.coords.latitude, position.coords.longitude);
    });
} else {
  alert("お使いのブラウザでは現在位置情報が取得できません。");
}
}

function callback(lat, lon) {
    var geocode = "緯度" + lat + " 経度"+lon;
    alert(geocode);
}

このコードを実行すると、現在位置の緯度経度情報がアラートで表示されたよね?
では、この得られた緯度経度情報をTwitterのAPIに投げてあげよう。Twitter APIに緯度経度情報を投げてあげると周辺のTweet情報を投げ返してくれるのだ。

まずはTwitter APIに緯度経度情報を投げる準備をする。
search.json?の後にcallback=getTweetsと指定することfunction getTweets(json) を呼び出しているよ。


//URLの宣言
var url = "http://search.twitter.com/search.json?callback=getTweets";

また、さっき得られた緯度経度情報をTwitterに投げるための準備をしよう。


//現在位置の取得
function geoLocate(){
 if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position) {
        callback(position.coords.latitude, position.coords.longitude);
    });
} else {
  alert("お使いのブラウザでは現在位置情報が取得できません。");
}
}

//緯度経度情報をTwitterAPIに投げる準備
function callback(lat, lon) {
    var geocode = "&amp;geocode=" + lat + "%2C" + lon + "%2C1mi";
    var fullUrl = url + geocode;
    var head = document.getElementsByTagName('head');
    var script = document.createElement('script');
    script.src = fullUrl;
    head[0].appendChild(script);
}

function callback(lat, lon)はhtmlのheadタグ内に下記のようなscript要素を追加するコード。

<script src="http://search.twitter.com/search.json?callback=getTweets&amp;geocode=35.32311129%2C139.41601822333334%2C1mi"><!--mce:1--></script>

TwitterAPIから返ってきたJSONを以下のコードで表示してあげよう。tweetsというIDにひっかけてその中にJSONから取り出した要素を子要素としてdivタグに挿入しているので、htmlに

と追加してあげるのを忘れずに。


//tweetの挿入
function getTweets(json) {
    var q;
    var parent = document.getElementById('tweets');
    parent.innerHTML = '';
    var child;

    for (var i = 0; i &lt; json.results.length; i++) {
       q = json.results[i];
       child = document.createElement("div");
       child.setAttribute("class","tweet");
       child.innerHTML = '
<div><img src="'
+q.profile_image_url+'" alt="" width="48" height="48" /></div>
'
;
       child.innerHTML += '
<div><a href="http://m.twitter.com/'
+q.from_user+'">'+q.from_user+'</a> '+q.text+'
<div>'
+q.location+' ('+q.created_at+')</div>
</div>
'
;
       parent.appendChild(child);
    }
}

これで、現在位置情報のTweetを利用できるようになったので、後はcssでスタイルを整えてあげるだけ!

今回使ったようにTwitter APIではOAuthなどの難しい認証なしで利用できるものがあるので調べてみるといいよ。JSONはJavaScript Object Notationの略でもあるように基本的にJSON形式であれば、Javascriptで中身を取り出して綺麗に表示させることができる。またRSSであってもGoogle Feed APIを利用すれば、JSONで受け取ることができるし、他にもYahoo Pipesで面白いAPIを見つけて自分のアプリに表示してみると面白いので是非色々チャレンジしてみよう!

CSS3を使ったアニメーション

さて、ここまでhtmlを作ってきたけれどまだ何か楽しそうじゃないよね。そこで、CSSを使ったアニメーションをここで簡単に説明しよう。サンプルでは-webkit-keyframesを使って3種類のアニメーションを表示している。ここではその作り方を簡単に解説しよう。

まずは-webkit-keyframesを使ってアニメーションの名前を設定する。

@-webkit-keyframes ここにアニメーションの名前 {
}

次にアニメーション間隔ごとの動きを設定しよう。アニメーション中の動きはcssのプロパティであれば基本的に何でも使える。状態を%単位で指定することで細かくアニメーションの指定をつけることが可能だが、過剰なマークアップはよくないよ。0%やfromの表記はどちらでも問題ない。


/*-web-kit-transformを使って回転させた例*/
@-webkit-keyframes sample1 {
0%   { -webkit-transform: rotate(0deg); }
20%  { -webkit-transform: rotate(20deg); }
40%  { -webkit-transform: rotate(20deg); }
100% { -webkit-transform: rotate(340deg); }
}

/*背景色、ボックスシャドウを変えた例*/
@-webkit-keyframes sample2 {
 from {
  background-color: #75c5e3;
  -webkit-box-shadow: 0 0 9px #555;
  }
 50%  {
  background-color: #6AD0EB;
  -webkit-box-shadow: 0 0 18px #4694B2;
 }
 to   {
  background-color: #75c5e3;
  -webkit-box-shadow: 0 0 9px #555;
 }
}

次に-webkit-keyframesで設定したアニメーションをアニメーションさせたい要素に書き込む。

#kanban {
background-color: #E75990;
width:300px;
height:80px;
color:#ffffff;
font-size:48pt;
text-align:center;
line-height: 1.3;
font-weight: bold;
margin-left:10px;
margin-top:20px;
border-bottom: 1px solid rgba(0,0,0,0.25);
border-top: 1px solid rgba(255,255,255,0.25);
float:left;
position: relative;
display: inline-block;

-webkit-animation-name: sample1; /*設定したアニメーションを呼び出し*/
-webkit-animation-duration: 1s; /*アニメーションの表示秒数を設定*/
-webkit-animation-timing-function: linear; /*アニメーション進行割合の指定*/
-webkit-animation-iteration-count: once; /*アニメーションの繰り返し回数の指定*/
-webkit-transform-origin: middle center; /*アニメーションの始点の指定*/
}

もっとアプリっぽくしよう!

もっとWebアプリをアプリっぽくする為にホーム画面に追加された時にMobileSafariのナビゲーションバーを消してフルスクリーンにしたり、ホーム画面用のアイコンを設定したりしよう!尚、ステータスバー色の設定については必ずフルスクリーンに設定しないと使えないので注意しよう。


/*iPhone用の様々な設定の例*/

<!-- フルスクリーンに設定 -->

<!-- 数字で電話がかからないように設定 -->

<!-- ステータスバーの色を設定。値はdefault,black,black-translucentから選べる。-->

<!-- 起動時のスプラッシュ画面を設定 iPhone3GSの場合には320x460pxのものを用意する -->

<!-- デバイス毎のホームアイコンを指定-->
<!-- iPhone 57x57px-->

<!-- iPad 72x72px-->

<!-- iPhone4 114x114px-->

ではではだいぶ長くなってしまったのでこの辺で。
Webアプリを作ることを楽しんでもらえたかな?
またお会いしましょう!さようなら

練習問題

・Safari Developers Referenceを読もう!
ADC(Apple Developers center)をのぞいてみよう。 ADCにはSafariの開発者リファレンスや沢山のサンプルコードがあるよ。

・横画面に対応してみよう!
リキッドレイアウトにする、縦横画面を検出してスクリプトを走らせる、cssを出し分けるなど自分なりの解決法を見つけよう。

・iPadに対応させてみよう!
iPadの大きな画面にどうやって対応させるか?考えてみよう。

・色々なAPIを読み込んでみよう!
色々なタイプのJSONを読み込んだり、情報のリロード、もっと古い情報を読むにはどうすればいいのか考えてみよう。
・RSSを読みこんでみよう!
google feed apiを使えばRSSをJSONでコールバックしてくれるよ。RSSリーダーを作ってみよう。

文・ショーヤマ
このエントリーをはてなブックマークに追加
はてなブックマーク - 見た目でゴマカす超速Webアプリ開発 #1
Post to Google Buzz
Share on GREE

Related posts:

  1. かんたんプログラミング #1:亀の子グラフィック
  2. 近代プログラマの夕(ゆうべ)5 #1
  3. shi3z式ゲームプログラミング入門 #3 “ゲームらしく”する

Facebook comments:

Post a Comment

Your email is never published nor shared. Required fields are marked *
*
*