iPhoneの最近のブログ記事
今日からOpera Mini for iPhoneがAppstoreで公開されていました。
以前より噂には聞いていたので、公開自体に驚きはありませんが、使って見ての驚きは、今までiPhone用Safariのみを考えて作っていたので、iPhone専用サイトで一部挙動やレイアウト崩れが出てしまいました。
とくに、JSはなんでそんな動きをするのかわからない挙動もありました。
ハックをいろいろ駆使してなんとかするか
or
そもそもU/AでOperaをはじくべきか
難しい選択です。
ひとまず、JSでuserAgentを下のように取得して分岐していた場合は、OperaではPCサイトに流れるので、しばらくは安心できそうです。
以前より噂には聞いていたので、公開自体に驚きはありませんが、使って見ての驚きは、今までiPhone用Safariのみを考えて作っていたので、iPhone専用サイトで一部挙動やレイアウト崩れが出てしまいました。
とくに、JSはなんでそんな動きをするのかわからない挙動もありました。
ハックをいろいろ駆使してなんとかするか
or
そもそもU/AでOperaをはじくべきか
難しい選択です。
ひとまず、JSでuserAgentを下のように取得して分岐していた場合は、OperaではPCサイトに流れるので、しばらくは安心できそうです。
<script type="text/javascript">
if(navigator.userAgent.indexOf("iPhone") != -1){
window.location.href = "/XXX/index.html";
}
</script>
iPhone用サイト内で、iframeを使った場合、window.orientationで画面縦横変更のトリガーがiframe内ではうまく動作しませんでした。
そこで、代わりに親htmlから縦横が変わった際にiframe内のJSを実行させることで、iframe内でも縦横によって違う動作をさせる(CSSでパーツの幅を変えるなど)ことができました。
そこで、代わりに親htmlから縦横が変わった際にiframe内のJSを実行させることで、iframe内でも縦横によって違う動作をさせる(CSSでパーツの幅を変えるなど)ことができました。
//親html内
//iframe_idは、iframeのid名
document.getElementById("iframe_id").contentWindow.setOrientation_i(引数);
//iframe内
function setOrientation_i(dl) {
//処理をココへ
}
iPhoneサイトを作る際に、Flashが使えないので、Javascriptに頼ることになります。
今回は、iPhoneのiTunesなどのように、ページ遷移などをiPhoneのUIのように動くWebアプリケーションを作りたいので、下の2つのフレームワークが候補になりました。
iui
http://code.google.com/p/iui/
jqtouch(jquery拡張)
http://code.google.com/p/jqtouch/
どちらを使っても、サンプルをいじるだけで、iPhoneライクなUIや動きが表現できます。
ｊqtouchでは、サイト内でXMLをパースして表示させるのにJQueryも使うので、仲良く出来そうかなということや、日本では今のところ関係ありませんが、G1やPreなどにもそのまま対応できるらしいのが気になりました。。
ただし、今回はjqtouchのbetaというところに引け目を感じ、iuiを研究して使って見ることにしました。
iuiの詳細に関しては後々アップ予定です。
今回は、iPhoneのiTunesなどのように、ページ遷移などをiPhoneのUIのように動くWebアプリケーションを作りたいので、下の2つのフレームワークが候補になりました。
iui
http://code.google.com/p/iui/
jqtouch(jquery拡張)
http://code.google.com/p/jqtouch/
どちらを使っても、サンプルをいじるだけで、iPhoneライクなUIや動きが表現できます。
ｊqtouchでは、サイト内でXMLをパースして表示させるのにJQueryも使うので、仲良く出来そうかなということや、日本では今のところ関係ありませんが、G1やPreなどにもそのまま対応できるらしいのが気になりました。。
ただし、今回はjqtouchのbetaというところに引け目を感じ、iuiを研究して使って見ることにしました。
iuiの詳細に関しては後々アップ予定です。
iPhone用サイトを作る場合は、画面サイズが縦横で異なります。
画面解像度は320×480なので、コンテンツの幅が320と480の両方に対応して作ります。
表示の際の幅はmeta内のviewportで設定しますが、画面閲覧中に縦横を切り替えた場合の画像サイズの切替を行いたくていろいろ調べました。
下のサンプルでは、SitePoint内の記事を参考に、div#mainimage内のimg1.jpgの幅を、縦の場合は320×160、横の場合、480×240で表示します。
その他レイアウト等もCSS内に同様に記述することで、縦横で分岐することが出来ます。
今回のキーポイントは、iPhoneの表示角度を利用するときに使う、window.orientationです。window.orientationchangeで、縦横切替の際のトリガーになります。
参考記事
Sitepoint : New Articles, Fresh Thinking for Web Developers and Designers
http://articles.sitepoint.com/print/iphone-development-12-tips
画面解像度は320×480なので、コンテンツの幅が320と480の両方に対応して作ります。
表示の際の幅はmeta内のviewportで設定しますが、画面閲覧中に縦横を切り替えた場合の画像サイズの切替を行いたくていろいろ調べました。
下のサンプルでは、SitePoint内の記事を参考に、div#mainimage内のimg1.jpgの幅を、縦の場合は320×160、横の場合、480×240で表示します。
その他レイアウト等もCSS内に同様に記述することで、縦横で分岐することが出来ます。
今回のキーポイントは、iPhoneの表示角度を利用するときに使う、window.orientationです。window.orientationchangeで、縦横切替の際のトリガーになります。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:spry="http://ns.adobe.com/spry">
<head>
<meta name="viewport" content="initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
<script type="text/javascript">
window.addEventListener('load', setOrientation, false);
window.addEventListener('orientationchange', setOrientation, false);
function setOrientation() {
var orient = Math.abs(window.orientation) === 90 ? 'landscape' : 'portrait';
var cl = document.body.className;
cl = cl.replace(/portrait|landscape/, orient);
document.body.className = cl;
}
</script>
<style>
body.portrait #main_image img{
width:320px;
height:160px;
}
body.landscape #main_image img{
width:480px;
height:240px;
}
</style>
</head>
<body class="portrait">
<div id="main_image">
<img src="img1.jpg" width="320" height="160" />
</div>
</body>
参考記事
Sitepoint : New Articles, Fresh Thinking for Web Developers and Designers
http://articles.sitepoint.com/print/iphone-development-12-tips
PC用とiPhone(iPod Touch)用にサイトを作る際に、レイアウトや、ボタンなどの細かなデザイン処理を替える必要はあるけれど、HTMLは更新性も考えて1つにしたいというジレンマに陥りました。
そこで、HTMLは1枚しか作成しませんが、読込ませるCSSを分岐させることでこれを実現するサンプルです。
下部のAタグでは、リンク先をそれぞれ別に指定するため、HTML内には2つの<a>が並んでいますが、クラス名に.pcbtnと.ipbtnを指定しておき、それぞれのCSSで、不要な方をdisplay:none;で指定して片方のみを表示するようにしてあります。
これは、<a>以外でも同様のクラスを使うことで、<div class="ipbtn">なら、div内をPCなら非表示にしたりすることも可能です。
サンプルページでは、PCとiPhoneで見た時で、コンテンツの幅と背景色、ボタンの飛び先が異なります。
サンプルページは以下から
iPhone&PCで、表示振り分けCSS サンプル
https://www.bute-studio.com/lab/iphone-btn/
サンプルHTML
サンプルiPhone.css
サンプルPC.css
そこで、HTMLは1枚しか作成しませんが、読込ませるCSSを分岐させることでこれを実現するサンプルです。
下部のAタグでは、リンク先をそれぞれ別に指定するため、HTML内には2つの<a>が並んでいますが、クラス名に.pcbtnと.ipbtnを指定しておき、それぞれのCSSで、不要な方をdisplay:none;で指定して片方のみを表示するようにしてあります。
これは、<a>以外でも同様のクラスを使うことで、<div class="ipbtn">なら、div内をPCなら非表示にしたりすることも可能です。
サンプルページでは、PCとiPhoneで見た時で、コンテンツの幅と背景色、ボタンの飛び先が異なります。
サンプルページは以下から
iPhone&PCで、表示振り分けCSS サンプル
https://www.bute-studio.com/lab/iphone-btn/
サンプルHTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>iPhoneCSS_test</title>
<meta name="viewport" content="width=380" />
<link media="only screen and (max-device-width:480px)" href="iPhone.css" type="text/css" rel="stylesheet"/>
<link media="screen and (min-device-width:481px)" href="pc.css" type="text/css" rel="stylesheet"/>
<!--[if !IE]>-->
<link media="only screen and (max-device-width: 480px)" href="pc.css" type="text/css" rel="stylesheet" />
<!--<![endif]-->
</head>
<body>
<div id="wrapper">
<h1>iPhone&PCで、表示振り分けCSS</h1>
<div id="pc">PC</div>
<div id="iphone">iPhone</div>
<a href="http://yahoo.co.jp" class="pcbtn">リンク(PC用)</a>
<a href="http://google.co.jp" class="ipbtn">リンク(iPhone用)</a>
</div>
</body>
</html>
サンプルiPhone.css
@charset "UTF-8";
#wrapper{
width:320px;
margin:0 auto;
}
#iphone{
background:#3CF;
color:#fff;
width:100%;
height:100px;
}
#pc{
display:none;
}
.pcbtn{
display:none;
}
サンプルPC.css
@charset "UTF-8";
#wrapper{
width:900px;
margin:0 auto;
}
#pc{
background:#FCF;
color:#fff;
width:100%;
height:100px;
}
#iphone{
display:none;
}
.ipbtn{
display:none;
}
iPhoneやiPodTouchでPC用に作られたサイトを見た場合、1pxの幅や高さの画像は、縮小されてみた場合に表示されなくなってしまうことがあります。
1pxの幅や高さの画像は、borderの代わりに使い、角丸の枠線を作りたいときなどにも使っています。
そこで、今回はこれを回避するために、iPhoneなどで縮小したときにも表示される角丸の枠線のついたエリアを作ってみました。
IEではCSSのborderで角丸にできないので、画像で対応しています。下のCSSは、IE,Safari(&iPhone),FireFoxを想定しています。
実際には、文字の拡大縮小に対応するために、IEなど、画像にする場合は、バックグラウンドに敷く画像を上部、中央(リピートさせる)、下部に分割させて使います。
1pxの幅や高さの画像は、borderの代わりに使い、角丸の枠線を作りたいときなどにも使っています。
そこで、今回はこれを回避するために、iPhoneなどで縮小したときにも表示される角丸の枠線のついたエリアを作ってみました。
IEではCSSのborderで角丸にできないので、画像で対応しています。下のCSSは、IE,Safari(&iPhone),FireFoxを想定しています。
実際には、文字の拡大縮小に対応するために、IEなど、画像にする場合は、バックグラウンドに敷く画像を上部、中央(リピートさせる)、下部に分割させて使います。
div{
width:300px;
height:100px ;
border:1px #000000 solid;
-webkit-border-radius:10px;/*Safari(iPhone含む)*/
-moz-border-radius: 10px;/*FireFox*/
/*この下IE用にborderを削除し、画像で対応*/
*border:none;
*background:url(bg.gif);
}
