スマホ向けFlashサイトを作るには? 第四回 HTML組み込み編

このエントリーをはてなブックマークに追加

『スマホ向けFlashサイトを作るには?』というテーマで更新をしています。

第三回まででFlashをSwiffy変換し、SWFファイルと、JSファイルを作るところまで紹介してきました。

最終回である第四回は実際にAndroid向けにはFlash、iOS向けにはFlashをSwiffy変換したデータを
HTMLページに組み込む方法をご紹介します。

スマホ向けFlashサイトを作るには?
■ 目次
第一回 準備編
第二回 Flash編
第三回 Swiffy編
第四回 HTML編 この記事です。

今回は、Android向け・iPhone向けそれぞれ別のHTMLで表示させることにします。

ポイントを説明していきますので、全ソースは一番最後のサンプルデータを
ダウンロードしてご確認ください。

※Javascript部分には一部jQueryを使用しています。
※Javascriptを用いて同一HTMLで出し分けることも可能ですが複雑になるので割愛します。

組み込むコンテンツは「スマホ向けFlashサイトを作るには? 第三回Swiffy編」でご紹介したフリックで動作するギャラリーをHTMLページに組み込みます。

ポイントは以下です!

■Swiffy(iPhone) / Flash(Android)をHTMLに組み込む際の共通ポイント

  1. ビューポートを設定する
  2. アドレスバーを上にあげる
  3. 画面の回転を検知する

■Swiffy(iOS)をHTMLに組み込む際のポイント

  1. Swiffyランタイムは一番最後に読み込む
  2. Swiffy非対応のiOSには非対応の文言を表示する

■Flash(Android)をHTMLに組み込む際のポイント

  1. AndroidOS2.0以下の端末は非対応の文言を表示する
  2. FlashPlayerが入っていない端末向けの表示画面を準備する
  3. 端末によって画面サイズが異なるので、Flashの横幅が100%になるようにJSで設定する
  4. Flashに強制的にフォーカスをあてる

■サンプルファイル

  1. サンプルファイル

[iOS/Android共通] ビューポートを設定する

iPhone向け、Android向けともにメタタグでviewportを設定します。
今回の「フリックで動作するギャラリー」は横幅320px・縦幅416pxで作っているので、
contentにはwidth=320pxを設定します。

<meta name="viewport" content="width=320px, user-scalable=no" />

一部のAndroid端末ではビューポートの設定が効きません。
ただし、今回Android向けには端末のブラウザサイズを取得してSWFの大きさを制御するので特に問題ありません。
(iPhone/Android共通のポイントとしていますが、Androidではこのメタタグは効かなくてもOKです)

ビューポートが効かないAndroid端末でも横幅を320px(もしくは640px)などにしたいという場合は以下のようなJavascriptを記述します。

cssのzoomプロパティを使用し、ページ全体を拡大させます。

▽Javascript

<script type="text/javascript">
//jQueryを使用
$(function(){
	//Androidの場合zoomの処理を行う
	if (navigator.userAgent.indexOf('Android') >0){
		$("html").css("zoom" , $(window).width()/320 )
	}	
})
</script>

[iOS/Android共通] アドレスバーを上にあげる

スマホ向けFlashサイトを作るには?第一回/準備編」でご紹介しましたが、
iPhoneや一部のAndroid端末ではアドレスバーを上にあげないとコンテンツの縦サイズである416pxを確保できません。

そこで、ページにアクセスした際に自動的にアドレスバーを上に上げる処理をJavascriptで記述します。

▽Javascript

<script type="text/javascript">
window.onload = function() {
	//100ミリ秒後に縦に1px移動させる
	setTimeout(scrollTo, 100, 0, 1);
}
</script>

※setTimeout(一定時間が経過したら処理を実行する)を設定しているのは、
 端末によって処理のタイミングがうまくいかないことがあるためです。

※この方法はHTMLに表示される中身がブラウザの縦幅より長くないと動作しません。
 CSSでマージン等を入れて調整して下さい。

[iOS/Android共通] 画面の回転を検知する

サンプル「フリックで動作するギャラリー」には、端末を横に持ったとき(ランドスケープ時)には対応していません。
端末の回転を制御できれば良いのですが、iPhoneもAndroidも画面の回転に関してはページ側では制限をかけれません。
苦肉の策ですが、今回は縦持ちでのみ閲覧して欲しいので横持ちにした時にアラートを表示させるようにします。

▽Javascript

<script type="text/javascript">
//複数のイベントを設定したいのでjQueryを使用
$(window).bind("load orientationchange",function(){
	if(Math.abs(window.orientation) == 90){
		alert('縦持ちで見てね!')
	}
})
</script>

上記の例のように、画面の回転の検知は、jQueryの「orientationchangeイベント」を
使用すると簡単です。
ページが表示された時点で横持ちになっている場合があるので「load」イベントも設定します。

端末側のalertウインドウだと素っ気無いのと「OK」ボタンをタップすると
ウインドウが消えてしまうので、アラート用のDIVを用意しておくのもいいと思います。

▽Javascript

<script type="text/javascript">
$(window).bind("load orientationchange",function(){
	if(Math.abs(window.orientation) == 90){
		//横持ち(ランドスケープ)のときに「#alert」を表示する
		$('#alert').show();
	}else{
		//縦持ち(ポートレート)のときに「#alert」を非表示する
		$('#alert').hide();
	}
})
</script>

※SWFの上にDIVを配置する方法は以下が参考になります。
zaru blog > Flashの上に画像やテキスト、DIVを重ねて表示する方法


ここからは、iPhone向け・Android向けそれぞれのポイントをご紹介します。
まずはiPhone(Swiffy)からです。

[for iOS] Swiffyランタイムは一番最後に読み込む

複数のJavascriptを読み込む場合は、Swiffyランタイムは一番最後に読み込む(=一番最後に記述します)ようにします。
こうしないと、jQueryで記述した部分や、onloadの処理が上手くいかない場合があります。

サンプルファイルでは以下の順番でJavascriptを記述しています。

1:jQueryなどのJSファイルを読み込む

2:アドレスバーなどをあげる処理を実行

3:Swiffyランタイム、別ファイル化したswiffyobjectを読み込む

▽HTML

<script type="text/Javascript" src="./jquery.js"></script>
 
<script type="text/javascript">
//アドレスバーなどをあげる処理を実行
</script>
 
<script type="text/Javascript" src="./gallery.js"></script>
<script type="text/Javascript" src="./runtime3.7.js"></script>

ただし、この記述順でもjQueryの「$(function(){処理}))(HTML文書の読み込み後に実行するイベント)」
は実行されない場合があるので使用は避けたほうが良いです。

[for iOS] Swiffy非対応のiOSには非対応の文言を表示する

iOS3.xはSwiffyに対応していないため、非対応の文言を表示するようにします。
iOS3.xからのアクセスの場合、ユーザーエージェントは以下のようになります。

▼iOS3
Mozilla/5.0 (iPhone; U; CPU iPhone OS 3_0 like Mac OS X;ja-jp AppleWebKit/528.18 (KHTML,like Gecko) Version/4.0 Mobile/7A341 Safari/528.16

▼iOS3.1
Mozilla/5.0 (iPhone; U; CPU iPhone OS 3_1 like Mac OS X; ja-jp) AppleWebKit/528.18 (KHTML, like Gecko) Version/4.0 Mobile/7C144 Safari/528.16

ユーザーエージェントの中で「iPhone OS 3」にマッチしたとき非対応の文言を表示させます。

▽Javascript

<script type="text/javascript">
window.onload = function() {
    //Swiffy非対応のiOSには非対応の文言を表示する	
    var ua = navigator.userAgent;
    var el = document.getElementById('message');	
    if (ua.indexOf('iPhone OS 3') > 0){
        //そのまま何もしない
    }else{
        //#messageを削除する
        el.parentNode.removeChild(el);
    }   
}</script>

▽HTML

<div id='message'>すいません、iOS3は非対応です。</div>

続けて、Android向けのFlashをHTMLに組み込むポイントをご紹介します。
簡単にSWFを挿入するために今回は「SWFObject」を使用します。
「SWFObject」を使用すると複雑なオブジェクトタグを記述することなくHTMLにSWFを埋め込むことができます。

SWFObject」から、Downloads > swfobject_2_2.zipをダウンロードしてHTMLページにパスを記述しておきます。

<script src="./swfobject.js"></script>

[for Android] AndroidOS2.0以下の端末は非対応の文言を表示する

Android OS2.0以下の端末では、そもそもFlashPlayerのインストールができないので非対応の文言を表示するようにします。
ユーザーエージェントの中にOSのバージョンが記述されているので、2.0以下にマッチしたとき非対応の文言を表示させます。

▽Javascript

<script type="text/javascript">
window.onload = function() {
	var ua = navigator.userAgent;
	if (ua.indexOf('Android 2.0') > 0 || ua.indexOf('Android 1') > 0){
		//jqueryを使用してアラート用のDIVを表示
		$('#message').show();
	}else{
		$('#message').hide();
	}
};
</script>

▽HTML

<div id='message'>すいません、Android OS2.0以下は非対応です。</div>

[for Android] FlashPlayerが入っていない端末向けの表示画面を準備する

Android2.1以上でも端末によってはFlashPlayerがインストールされていない場合があるので、その端末向けの画面を表示させます。

SWFObjectを使って簡単に実装ができます。

▽Javascript

<script type="text/javascript">
	//SWFの横幅
	var swfW = 320;
	//SWFの縦幅		
	var swfH = 416;	
 
	var flashvars = {};
	var params = {allowscriptaccess: "always"};	
 
	swfobject.embedSWF("gallery.swf", "flashContent", swfW, swfH, "8.0.0","expressInstall.swf", flashvars, params);
</script>

▽HTML

<div id="flashContent">
    <p>FlashPlayerがインストールされていません。<p>
    <p>FlashPlayerをインストールして<br>コンテンツをお楽しみください。</p>
</div>

これで、FlashPlayerがインストールされていない端末に対しては、
「flashContent」IDの中に記載したテキストが表示されます。
(FlashPlayerがインストール済みの端末にはテキストは表示されずにSWFのみが表示されます。)

[for Android] Flashの横幅が100%になるようにJavascriptで設定する

Android端末はブラウザのサイズが端末によって異なります。
SWFを横幅100%で表示させたいので、端末のブラウザサイズを取得して動的にSWFのサイズを変更できるようにしておきます。

▽Javascript

<script type="text/javascript">
	//SWFの横幅(ブラウザーの横幅)
	var swfW = window.innerWidth;
	//SWFの縦幅
	//横幅を元に、縦幅を算出。小数点になる場合があるので四捨五入しておきます		
	var swfH = Math.round(416 * (swfW / 320));
 
	var flashvars = {};
	var params = {allowscriptaccess: "always"};
 
	swfobject.embedSWF("/swf/gallery.swf", "flashContent", swfW, swfH, "8.0.0","expressInstall.swf", flashvars, params);	
</script>

[SWFObject] SWFObjectを使ったときに、SWFに変数を送る方法

SWFObjectを使ったときに、SWFに変数を送るには以下のように記述します。

<script type="text/javascript">
	//SWFの横幅(ブラウザーの横幅)
	var swfW = window.innerWidth;
	//SWFの縦幅
	//横幅を元に、縦幅を算出。小数点になる場合があるので四捨五入しておきます		
	var swfH = Math.round(416 * (swfW / 320));
 
	//SWFに「a=123」「b=こんにちは」の値を送る	
	var flashvars = {a: '1234',b:'こんにちは'};
	var params = {allowscriptaccess: "always"};
 
	swfobject.embedSWF("/swf/gallery.swf", "flashContent", swfW, swfH, "8.0.0","expressInstall.swf", flashvars, params);	
</script>

「var flashvars = {a: ‘1234’,b:’こんにちは’};」のように、
変数名:”値”」といったように記述します。渡したい値が複数あるときは「,(カンマ)」でつなぎます。

■Flashに強制的にフォーカスをあてる

HTML内にFlashを埋め込んでいる場合、Flash領域を一度タップをしないと
Flash内のメニュー等を操作することができません。
また、最初のタップ時にハイライト色も表示されてしまい少し格好悪いです。

最初からにフォーカスを当てた状態にするためには以下のように記述します。

▽Javascript

<script type="text/javascript">
window.onload = function(){
  var swf = document.getElementById("flashContent");
  swf.focus();
 };
</script>

■サンプルファイル

いままで説明してきた内容は、サンプルファイルに入っていますので、参考にしていただければと思います。
※本サンプルによって生じるいかなる不具合、トラブルや損害の責任を負いかねますので、自己責任でのご利用をお願いします。

サンプルファイルDL

■最後に

駆け足ですが、4回にわたり、説明してきました。
いかがだったでしょうか?要点をまとめたつもりですが、読みづらかったらスイマセン。

スマートフォンは、これからもメモリやCPUがどんどん高性能になり続けます。
JavaScriptの実行スピードが上がり、今でこそスマートフォンのコンテンツといえばダウンロード型のアプリですが、今後はブラウザでもそこそこできる、という風になっていくでしょう。
jQueryMobileぽい、いわゆるスマホのサイトがますます必要とされていく一方で、ちょっとしたゲーム等のコンテンツ部分も必要となってくると思います。
その時にFlashとSwiffyは心強い味方になってくれると思います。
簡単にFlashで作れるのですから!

なので是非チャレンジしてみてください!

そして何か作ったら是非教えてください~!!
情報交換しましょう^^

スマホ向けFlashサイトを作るには?第一回 準備編
スマホ向けFlashサイトを作るには?第二回 Flash編
スマホ向けFlashサイトを作るには?第三回 Swiffy編
スマホ向けFlashサイトを作るには?第四回 HTML編

2 Comments

  1. […] これで、変換前の「SWFファイル」と同じ内容の「JSファイル」ができあがった事になります。 これらのファイルは、次の第四回HTML組み込み編で使用します。 […]

  2. […] 内容は以下の4回です。 スマホ向けFlashサイトを作るには?第一回 準備編 スマホ向けFlashサイトを作るには?第二回 Flash編 スマホ向けFlashサイトを作るには?第三回 Swiffy編 スマホ向けFlashサイトを作るには?第四回 HTML編 […]

Leave a Reply