【T7】テクニカルセッション

17Th
Developer Camp「RadPHPでスマホアプリを作ろう！」

エンバカデロ・テクノロジーズ
エヴァンジェリスト 高橋智宏
1

アジェンダ• RadPHP XE2 に関するアップデート• Web画面のレイアウト調整 デモ– 横幅が重要• PHP & JavaScriptのイベントの実装詳細– 画面右端に張り付くボタンを実機で確認• iOS (iPhone 4, iPad 2)• Android 2.2～ (スマホ, タブレット)• Windows Phone 7.5• BlackBerry• 少し本格的なWebアプリを作ってみる

デモ– jQuery Mobile 特有の注意点!!
– TMS社のIntraWeb iPhone Controls Packのデモアプリと同様のものを• Webアプリをフルスクリーンで– iOS Safari

2

17Th
Developer CampRadPHP XE2 に関するアップデート

13アップデート – 主な変更点• Update 4– ビルド番号: 4.4.0.1656• ZendFrameworkのサンプルを追加– ZHttp, ZJson, ZJsonServer, ZRestClient, ZRestServer• モバイル端末の背景を追加– 各種Android端末– BlackBerry• JQuery Mobile 1.0 final を統合– jQuery 1.6.4 を内蔵• PhoneGap 1.3.0 を統合– 生成コンテンツは Windows Phone 7.x でも利用可能
4

17Th
Developer Camp

jQuery Mobile

2

5

jQuery Mobile とは？
• 2010年8月11日に始まったオープンソースプロジェクト• jQueryをベースに、モバイルデバイスのWebブラウザに特化したGUIを提供するJavaScriptライブラリおよびCSS– 先日 1.0 Final がリリースされました6サポートされるプラットフォーム• Aグレード(フルサポート)7

横幅は重要• 基本的に、モバイルWebアプリは横スクロールしません– もちろん、縦スクロールはします• Web画面の横幅は、端末ごとに異なります– さらに、iOS, Android, WP7 では、端末の回転により変化します– 横幅は、JavaScriptの window.innerWidth で取得可能

8

端末の回転を検知するには？
• iOS– jQuery Mobile の orientationchangeイベント を利用する• window.onresizeイベントの監視は不要!!

• Android 2.2～
– window.onresizeイベントを利用する• orientationchangeイベント が来ても無視する!!
– innerWidthは回転前の値を示すので使えない…

• Windows Phone 7.5– window.onresizeイベントを利用する• そもそも orientationchangeイベント が発生しない…

• BlackBerry– PlayBookも含め、そもそも回転しない(はず)9viewport metaタグのwidthパラメータ• スマホでもタブレットでも width=320 でOK !?
– WP7以外の端末• window.innerWidth  端末の向きに応じた実際の横幅– Windows Phone 7.5• window.innerWidth  常に320 !?
– 端末が横向きなら画面全体が拡大表示されてしまう!!

• viewoport で width=device-width を指定すると…
– window.innerWidth  端末の向きに応じた実際の横幅

10画面右端に張り付くボタン• PHP側の実装• 手順その1 : MPageのOnCreateイベント– WP7に対処• 手順その2 : MPageのOnStartBodyイベント– ボタンの移動を行う関数をJavaScriptで記述– jQueryのAPIで、ボタンの外側のdivのCSSの left を変更

11画面右端に張り付くボタン• 手順その3 : MPageのOnOrientationChange Javascriptイベント– Android に対処• 手順その4 : MPageのOnPageShow Javascriptイベント– Android, WP向けにonresizeイベントハンドラのインストール– とりあえず、すぐにボタンの移動を行う

12

実機で確認 – 画面サイズ, ボタンサイズ, 回転••••iPhone 4, iPad 2
Androidスマホ, Androidタブレット
Windows Phone 7.5
BlackBerry13

17ThDeveloper Camp

少し本格的なWebアプリ

314

jQuery Mobile 特有の注意点• 複数のWebページのイメージが、単一のWeb画面内で同居することがある– Ajaxを利用した画面遷移• 例: 横にスライドしながら新しいページが表示される場合– そのため、あるページを設計・実装する際、その中に配置するコンポーネント名は、複数ページ全体で一意になるようにすべき。
• 同一のidを持つHTML要素が、同居して競合を起こすのを防ぐ• 独自に、コンポーネント名(変数名)の命名規約を設けてください。

• iOS 5.0 の iPhone の Safari 向けには、MPageのtouchOverflowEnabledプロパティを false に設定!!
– 今後、jQuery Mobile 1.1.0 以降は非推奨にもなる
15

まずは、お手本となるWebアプリを確認• Delphi XE2(C++Builder XE2)– IntraWeb XII– TMS IntraWeb iPhone Controls Pack(トライアル版)のデモアプリ16

メインページ – デザイン
• MListは、PHP側で動的に構築
MLink
画面遷移に使う。単にボタンとしても使える

MobileTheme
テーマを指定する。
カスタムテーマへの応用も可
MList
リストビュー。行数は可変なので、高さが変わる
項目クリック時に編集ページに遷移させる。

MToolBar
複数のMlinkを配置できる
Settingクリック時に設定ページに遷移させる
17

メインページ – コード• MPageのOnCreateイベントで、MListの項目を動的に生成。Web画面の高さ、およびツールバーの位置を調整

18

設定ページ – デザイン
• Saveボタン: PHPの $_SESSION 変数をAjaxで更新

MLink
遷移元(前)のページに戻る、特別なリンク
MToggle２つの値を管理できるトグルスイッチ

MButton
画面情報をPHPに送信
AjaxモードでRadPHPのイベントハンドラを起動可

19

設定ページ – コード• トグルスイッチの値を $_SESSION で管理。最初に画面を生成する際に、トグルスイッチの初期値を指定• [Back]ボタンに関する処理は無い– Webブラウザ内だけで、前の画面を復帰させてしまう。
• 前の画面の内容を、PHP側で更新できないので注意!!

20

編集ページ – デザイン
• Backボタンは、UpdateボタンでAjax更新後、モードを変更
MLink
遷移元(前)のページに戻る、特別なリンク

MEdit
文字列を編集する

MSlider
例: 最小値(0)～最大値(100) のスライダ

MComboBox
項目を選択するコンボボックス。複数選択可
MButton
画面情報をPHPに送信
AjaxモードでRadPHPのイベントハンドラを起動可
21

編集ページ – コード• MSliderとMComboBoxの値はテキトーに設定する– [Save]ボタンを押して、Ajax経由で画面を更新• Backボタンは、[Save]ボタンで画面を更新後、メインページを明示的に呼び出すリンクに変化させる。
– メインページの内容を更新して表示させたいので

22

17Th
Developer CampiOS で Webアプリをフルスクリーン表示423

iOS専用のタグを<head>…</head>に追加• MPageのOnShowHeaderイベントを利用– スプラッシュ画像を用意– iPhone,iPhone(Retina),iPad用に3種類のアイコンを用意– フルスクリーン可であることを知らせるmetaタグ• iOSのSafariで[ホーム画面に追加]を利用

24

17Th
Developer Camp

Q&A

25