【16-D-4】3分ではじめるスマホアプリのビジュアル開発

3分ではじめる
スマホアプリのビジュアル開発

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

Developers Summit 2012

アジェンダ
アジンダ
 Embarcadero Technologies とは?
とは?
 ボランド(Borland)？
ボーランド Borland)？
ボーランド(
ランド(
 ネイティブ言語で iOS アプリ開発
 Webアプリ
Webアプリ
 ネイティブアプリ
 PHP言語でモバイルアプリ開発
PHP言語でモバイルアプリ開発
 Webアプリ
プ
Webアプリ
 ネイティブアプリ


エンバカデロについて
ソフトウェアにソフトウェアライセンスネットワーク管理型グローバル企業
かかわってきた管理技術を提供してライセンス供給のとして展開
0年以の歴史
20年以上の歴史 10年以上
年以パイオア
パイオニア

ソフトウェアの開発 • 320万のユーザー
ネットワークベースの
から管理に至るまで 2000万以上の • global 2000の97%
ライセンスを12,000
ポートフォリオを拡大ライセンス • 80ヶ国
以上の組織が利用

エンバカデロ設立ボーランド(Borland)の
(本社は米国サンフランシスコ) 開発ツール部門と合併
AppWave
ToolCloud
T lCl d
1983 1993 1995 1997 2000 2006 2007 2008 2009
2010 2011

ER/Studio DB Optimizer
RapidSQL Change EA/Studio PowerSQL
Delphi Manager RAD Studio
JBuilder All-Access
InterBase
Delphi.NET
p
CM/Data XE2
CM/Config
IDEの発明 DBArtisan C++Builder
RadPHP ER/Studio Enterprise
Turbo Pascal 3rdRail


Embarcadero Delphi XE2
 コンポーネントによるビジュアル開発で高性能アプリケーションを
コンポネントによるビジュアル開発で、高性能アプリケションを
開発できるクロスプラットフォーム開発環境(
開発できるクロスプラットフォーム開発環境(IDE) の最新版
 http://www.embarcadero.com/jp/products/delphi
 サポートするプラットフォーム
 Windows OS 32bit / 64bit : Windows XP から Windows Server 2008 R2
 MacOS X : Snow Leopard(10.6) と Lion(10.7)
 iOS : 4.2 から 5.0


ネイティブ言語でWebアプリを構築
VCL for the Web(IntraWeb)

IDE + ビジュアルデザイナ

Delphi言語 C++言語

I t W bによるW bサバ内蔵W bアプリ
IntraWebによるWebサーバー内蔵Webアプリ
•スタンドアロンなWindowsプロセス
•IIS向けのISAPI DLL

デスクトップ版スマートフォンの
WAP
Webブラウザ Webブラウザ


通常のWebアプリ作成機能
 GUIアプリを作成する手順と同じ
GUIアプリを作成する手順と同じ
 画面設計
 イベントハンドラ
 画面の更新はAjax対応
画面の更新はAjax対応
 セッション管理は自動
 Web画面
Web画面
 ユーザーデータ
 デバッグ

 スマートフォントのWebブラウザからもアクセス可
スマトフォントの
スマートフォントのWebブラウザからもアクセス可
トフォントのWeb
 もちろんWeb画面の見た目は異なるが…
もちろんWeb画面の見た目は異なるが…

iOS向けWebアプリ
リ ( )
(※)

 コントロールを変えるだけで、iOSブラウザ(Webkit)
コントロールを変えるだけで、iOSブラウザ(
に特化したWebアプリに大変身
に特化したWebアプリに大変身

 iPadにも対応可能
iPadにも対応可能

※http://www.tmssoftware.com/site/tmsiwiphone.asp

ハイパフォーマンスな
GUIアプリケーションプラットフォーム

IDE + ビジュアルデザイナ

Delphi言語 C++言語

共通ランタイム + GUIフレームワーク「FireMonkey」

Direct 2D/3D OpenGL, Quartz OpenGL ES
GPU

Win32 / Win64 Mac OS X iOS


Why FireMonkey ？
 Windows上で開発
 Delphi(Object Pascal)言語で開発
 GUIはすべて OpenGL(ES) でフルレンダリング
p ( )
 JavaのSwingと似てますね!
 Cocoa APIなども呼び出せます
 FireMonkeyでの「iOSアプリ」開発手順
 フォームを作成
 コントロールを配置
 コントロールのプロパティを設定
 コントロールのイベントハンドラを実装
 Windows上でビルドして動作確認
 最後にXcode上でビルドするだけ


ビジネスアプリ


2D / 3D アプリ


iOSアプリでRESTfulなRPC
アプリでな
 モバイルアプリはリモートサーバーに接続してなんぼでしょ
モバイルアプリは、リモトサバに接続してなんぼでしょ
 サーバー側のビジネスロジックをiOSアプリ内から呼び出したい

 REST（Representational State Transfer）って？
 HTTP(s)を使用したクライアント／サーバープロトコル
( )を使用クラア
 Webサービス用の通信方式の一種

 よくある課題
 Webサーバーの選択
 サーバー側・クライアント側の言語の選択
 パラメータや戻り値のフォーマット
 JSON or XML ?
 コードは再利用不可

HTTP(S)/RESTful/JSONによる
サーバー&クライアント通信

 C++言語 or Delphi言語で、クラスのメソッドをクライアントに公開
言語言語クドをクイ開
 単一の.exeファイルで、HTTPサーバー機能も内蔵
 クライアント用プロキシコドは自動生成!!
クライアント用プロキシコードは自動生成!!
 C++(Win/Mac), Delphi(Win/Mac), .NET, PHP5, JavaScript に対応
 iOS Android BlackBerry Windows Phone に対応
iOS, Android, BlackBerry,

HTTP リクエスト
ビジネスロジック

HTTP(S)/RESTful/JSON

HTTP レスポンス


Before, After
,

Delphiで書くと…

Objective Cで自前で書くと…
Objective-Cで自前で書くと…


Embarcadero RadPHP XE2
 PHP開発で初めてドラッグ＆ドロップによるビジュアル開発
開発初めドグド
PHP開発で初めてドラッグ＆ドロップによるビジュアル開発プよるビジ開発
を実現した革新的な統合開発環境(
を実現した革新的な統合開発環境(IDE) の最新版
 htt //
http://www.embarcadero.com/jp/products/radphp
b d /j / d t / d h
 内蔵されるPHP環境
 Apache 2 2 15 (Win32)
2.2.15
 PHP 5.2.14 (VC6 x86, Thread Safe版)
 Xdebug 2.1.2
 200種類以上のコンポーネント(もちろん拡張可能)
 RadPHP Component Library
p y
 jQuery Mobile, jQuery, jQuery UI
 PhoneGap
 htt // l
http://rpcl.svn.sourceforge.net/viewvc/rpcl/trunk/rpcl/rpcl/
f t/ i / l/t k/ l/ l/


DelphiライクなPHP開発
 デザイン情報(.xml.php) + PHPコード(.php)
デ
デザイン情報(.xml.php) PHPコード(.php)
情報(
情報( p p) ( p p)
unit1.xml.php unit1.php

+


ASP.NETライクなPHP開発
 コンポーネント情報(.xml.php) + HTML(.html) + PHPコード(.php)
コンポーネント情報(.xml.php) PHPコード(.php)

unit2.html


PHPのSmartyエンジンと連携
 コンポーネント情報(.xml.php) + HTML(.html) + PHPコード(.php)
コンポーネント情報(.xml.php) PHPコード(.php)

index.html


モバイル対応Webアプリ？？


モバイル向けW bサイトのトレンド
モバイル向けWebサイトのトレンド

 Mobile Web Technology Report August 2011
 http://trends builtwith com/Reports/Mobile Web
http://trends.builtwith.com/Reports/Mobile-Web-
Technology-2011/Mobile-Web-Technology-2011.html
 <meta name=“viewport”> タグの登場
p
 モバイル専用コンテンツの提供率
 採用されているモバイル向けライブラリの割合
 jQTouch
 jQuery Mobile
 iUI
 Sencha Touch
 iWebKit
iW bKit


j
jQuery Mobile とは？
y
 2010年8月11日に始まったオープンソースプロジェクト
 jQueryをベースにモバイルデバイスのWebブラウザに特
jQueryをベスに、モバイルデバイスのWebブラウザに特
化したGUIを提供するJavaScriptライブラリ
 つい先日 1.0 Final がリリースされました


サポトされるプラットフォム
サポートされるプラットフォーム
 Aグレード(フルサポート)
グレドフルサポート)
グレード(フルサポト
ド( ト)


RadPHP XE2で
PHP Webアプリをビジュアル開発
プビ
 GUIアプリ開発と同じ手順で Pure PHP5 + jQuery Mobile のモバイル対応
GUIアプリ開発と同じ手順で、Pure
Webアプリを開発可能!!


AjaxモードでPHPを呼び出して
Web画面を更新


PhoneGap とは？
p
 旧Nitobi Software社（先日アドビに買収されまし
た）が開発していた「Webアプリをネイティブアプリ
としてラップしてくれるネイティブライブラリ」
 オプンソス(BSD or MITライセンス)
オープンソース(BSD
 現在は、Apache Callback プロジェクトという名称に変更
 主に iOS, Android, BlackBerry, Windows Phone 向け


PhoneGapのメリット、仕組み
 Objective-C, Java, .NETのコンピュータ言語や、
iOS Android BlackBerry WP特有のAPIを知らなくてもネイティブアプリを作
iOS,Android,BlackBerry,WP特有のAPIを知らなくても、ネイティブアプリを作
成&登録できる
 HTML, CSS, JavaScript を利用します
 モバイルデバイスやOS特有の機能は、JavaScript向けに用意されている
バイルデバイスやOS特有の機能は J S i t向けに用意されている
PhoneGapの標準API や Plugin を使ってアクセスします

HTML,CSS,JavaScript
JavaScript
Plugin
UIWebView / WebView

PhoneGapライブラリ

ネイティブアプリ

iOS / Android / BB / WP

PhoneGapのメリット、仕組み(続き)
 HTMLコンテンツの作成時に、さきほど解説した「jQuery Mobile」を使
用することも可能。
 PhoneGapで開発するネイティブアプリは基本的にWebページなので…
 プログラムは、PHP(サーバー側) or JavaScript(クライアント側)で書く
 jQuery Mobile に付属する jQuery も活用する
j y j y
 基本的にWebページなので、外部にアクセスする場合は Ajax, jQuery,
JSON, XML などを使用すればよい


RadPHP XE2
Wizard for PhoneGap
 基本的に、JavaScriptイントンドラを使用して
基本的に、JavaScriptイベントハンドラを使用してコーディングディング
 フォームの UseAjax と UseAjaxUri のプロパティを使用すれば、PHPのイベン
トハンドラも利用可能
 http://blogs.embarcadero.com/teamj/2011/10/12/2473/
 http://blogs.embarcadero.com/teamj/2011/10/13/2484/
 iOS (3.0 ～ 5.0)
 Xcode 3 2 6 ～ Xcode 4 2 1用のプロジェクト一式を生成
3.2.6 4.2.1用のプロジェクト式を生成
 Android (1.5 ～)
 Eclipse用プロジェクトにも使えるファイル群を生成
 BlackBerry


ネイティブアプリに変換すると…


Thank You 
ttakahashi@embarcadero.com

Delphi XE2
Delphi XE2
RadPHP XE2
RadPHP XE2

【16-D-4】3分ではじめるスマホアプリのビジュアル開発

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (20)

Similar to 【16-D-4】3分ではじめるスマホアプリのビジュアル開発

Similar to 【16-D-4】3分ではじめるスマホアプリのビジュアル開発 (20)

Recently uploaded

Recently uploaded (16)

【16-D-4】3分ではじめるスマホアプリのビジュアル開発