Zend Framework で巨大な Web サイト (フロントと管理側) を作成しました。ZF でモバイル デバイス用に同じプロジェクトを実行したいと考えています。
私は確かにHTML5とjQueryモバイルを使用しますが、先に進み、モバイルWebサイトの開発を開始する前に、それを行うための優れた、簡単で効率的で最適化された方法は何か専門家に尋ねたいですか???
1940 次
3 に答える
4
ContextSwitch View Helperをチェックアウトすることをお勧めします。これにより、「format」パラメーターに基づいてビュースクリプトを切り替えることができます。これを使用して（または拡張して）、ビューをよりモバイルフレンドリーなテンプレートに切り替えることができます。
特にJSONコンテキストを見てください。これにより、レイアウトが無効になります。モバイルリクエストが検出された場合、同じ手法を使用してレイアウトを切り替えることができます。
もちろん、いくつかのCSSメディアクエリで必要なことを達成できるのであれば、それは確かに進むべき道です。
またZend_Http_UserAgent、モバイルデバイスの利用可能な機能を検出するのに役立つ場合があります。繰り返しますが、メディアクエリで可能なことと似ていますが、それでも役立つ場合があります。
しかし、肝心なのは、サイトを「変換」する必要がないということです。デスクトップユーザーとモバイルユーザーの両方が同じサイトにアクセスできるようにするためのツールはたくさんあります。
于 2012-05-15T06:54:07.353 に答える
1
私をクリックし てください、私を読んでください、そして私はあなたが私を好きになると確信しています
于 2012-05-15T07:01:50.730 に答える
0
インターネットから姿を消した Fawad Ghafoor のアンサーとして (Web アーカイブhttps://web.archive.org/web/20110225213957/http://www.web-punk.com/2010/03/zend-で引き続き利用可能) Framework-applications-for-iphone-blackberry-co/ )
それでいいのかわかりませんが、ここにウェブサイトのコンテンツをコピーしてフォーマットします。
iPhone、BlackBerry & Co 向けの Zend Framework アプリケーション
モバイル デバイスは、ここ数年で非常に重要になってきました。このチュートリアルでは、Web サイトを改善し、iPhone、BlackBerry などのモバイル デバイスに対応させる方法を説明します。
始める前に: このブログの他のすべての投稿と同様に、あなたはソフトウェア エンジニアであり、MVC (モデル / ビュー / コントローラー) パターンとおそらく Zend_Layout を使用して Web アプリケーションを実装していることを期待しています。
1. 必要なもの
基本的に、Web アプリケーションをモバイル デバイス用に準備するときに行う必要があるのは、a) ユーザーがモバイル デバイスまたは非モバイル デバイスを使用してサイトにアクセスしたかどうかを検出し、b) 結果に従って MVC の V を変更することだけです。の）。
ただし、このアプローチを少し拡張することは非常に便利だと思います。ビューをモバイル デバイス用のビューに置き換えるだけでなく、Web アプリケーションで使用されるレイアウト (Zend_Layout) も置き換え、別の翻訳ファイル (Zend_Translation) を使用します。レイアウトの置き換えが役立つ理由は明らかですが、なぜ別の翻訳ファイルを使用する必要があるのでしょうか。実際にはその必要はありませんが、大画面用の翻訳ファイル (長いテキストの説明を使用したい場合) とモバイル デバイス用の翻訳ファイル (鮮明な説明、エラー) があれば非常に便利です。メッセージ、ラベルなど)
後で説明するように、Zend Framework のコンテキスト スイッチ ( http://framework.zend.com/manual/en/zend.controller.actionhelpers.html ) が (ほぼ) 必要なすべてです… ContextSwitch は、「要求に応じてさまざまな応答形式を返すことを容易にすることを目的としています。」このアクション ヘルパーには、すぐに使用できる 2 つの異なるコンテキスト (JSON と XML) が付属しています。この例では、「mobile」という名前の追加のコンテキストを作成します。
制御フロー スキーマが失われました... ある時点でここにありました: http://www.web-punk.com/wp-content/uploads/2010/03/mobile_wf-300x94.png
基本的に、制御フローは図「制御フロー」に示すように機能する必要があります (図をクリックして拡大します)。ユーザーがhttp://mobile.example.com/controller/actionにアクセスすると、正しいコンテキスト「モバイル」を直接設定します。ユーザーがhttp://www.example.com/controller/actionにアクセスすると、モバイル デバイスを使用しているかどうかを確認します。モバイル デバイスを使用している場合は、Web アプリのモバイル バージョンとデスクトップ バージョンのどちらを使用するかをユーザーに尋ねます。ユーザーがページを要求するたびにモバイル版を使用するかどうかをユーザーに尋ねたくないので、ユーザーの決定をセッション変数に保存します (そして、ユーザーが非アクティブだった場合にのみ、もう一度尋ねます)。数分）。
このワークフローの例として、http: //www.qulpa.com をご覧ください。
2. モバイル プラグインの作成 目標を達成するために、小さなプラグインを実装します。このプラグインを実装する前に、現在のユーザーがモバイル デバイスを使用しているかどうかを確認する関数が必要です。これを行うには、WURFL のようなスマートなソリューションを使用できます。ただし、この例では、ユーザーがモバイル デバイスを使用している場合は true を返し、それ以外の場合は false を返す単純な関数を使用します。グーグルで検索すると、その仕事をする何十もの関数が見つかります。Brain Handles で見つけた関数を使用します。
それでは、プラグインを作成しましょう。\plugins フォルダーに Mobile.php というファイルを作成し、次のソース コードをコピーして貼り付けます。
<?php
class Plugin_Mobile extends Zend_Controller_Plugin_Abstract
{
// instead of defining all these parameters here,
// you could also put them into your application.ini
// if user is inactive for X minutes and surfs to
// www.example.com, we'll ask him again if he wants
// to user mobile or desktop version
private $ask_again_after_x_minutes = 10;
// used to test your mobile layout. Set this
// to 1 to emulate a mobile device
private $test_mobile = 0;
public function dispatchLoopStartup(Zend_Controller_Request_Abstract $request)
{
// did we already ask the user?
if (isset($_SESSION['mobileasked'])) {
// is mobile session still valid?
if (time() < $_SESSION['mobileasked']) {
// update session
$_SESSION['mobileasked'] = time() + $this->ask_again_after_x_minutes * 60;
// continue with requested page
return $request;
}
}
// otherwise, check if user is using a mobile device
// or if we are in test mode.
if ($this->checkmobile() || ($this->test_mobile == 1)) {
// if requested page != MOBILE.example.com
if (!(Zend_Registry::isRegistered('directmobile') && Zend_Registry::get('directmobile') == '1')) {
// set mobile session
$_SESSION['mobileasked'] = time() + $this->ask_again_after_x_minutes * 60;
// ask user if he wants to use mobile or desktop version
$request->setControllerName('index')
->setActionName('askmobile')
->setParam('format', 'mobile')
->setParams($request->getParams())
->setDispatched(false);
}
}
return $request;
}
/**
* This function returns true if user is using a mobile device. False otherwise.
* (c) by http://www.brainhandles.com/techno-thoughts/detecting-mobile-browsers
*/
private function checkmobile(){
if(isset($_SERVER["HTTP_X_WAP_PROFILE"])) return true;
if(preg_match("/wap\.|\.wap/i",$_SERVER["HTTP_ACCEPT"])) return true;
if(isset($_SERVER["HTTP_USER_AGENT"])){
// Quick Array to kill out matches in the user agent
// that might cause false positives
$badmatches = array("OfficeLiveConnector","MSIE\ 8\.0","OptimizedIE8","MSN\ Optimized","Creative\ AutoUpdate","Swapper");
foreach($badmatches as $badstring){
if(preg_match("/".$badstring."/i",$_SERVER["HTTP_USER_AGENT"])) return false;
}
// Now we'll go for positive matches
$uamatches = array("midp", "j2me", "avantg", "docomo", "novarra", "palmos", "palmsource", "240x320", "opwv", "chtml", "pda", "windows\ ce", "mmp\/", "blackberry", "mib\/", "symbian", "wireless", "nokia", "hand", "mobi", "phone", "cdm", "up\.b", "audio", "SIE\-", "SEC\-", "samsung", "HTC", "mot\-", "mitsu", "sagem", "sony", "alcatel", "lg", "erics", "vx", "NEC", "philips", "mmm", "xx", "panasonic", "sharp", "wap", "sch", "rover", "pocket", "benq", "java", "pt", "pg", "vox", "amoi", "bird", "compal", "kg", "voda", "sany", "kdd", "dbt", "sendo", "sgh", "gradi", "jb", "\d\d\di", "moto","webos");
foreach($uamatches as $uastring){
if(preg_match("/".$uastring."/i",$_SERVER["HTTP_USER_AGENT"])) return true;
}
}
return false;
}
このプラグインを登録していることを確認してください。そのためには、ブートストラップに次のようなものが必要です。
// init PluginLoader. Adopt folder to your application...
$loader = new Zend_Loader_PluginLoader(array(
'Plugin' => APPLICATION_PATH . '/application/controllers/plugins',
));
// define plugin names and classes
$pluginList = array(
'plugin1' => $loader->load('Plugin1'),
'plugin2' => $loader->load('Plugin2'),
// [...]
'mobile' => $loader->load('Mobile'),
);
// get your front controller
$frontController = Zend_Controller_Front::getInstance();
// Register your plugins
foreach ($pluginList as $pluginClass) {
$frontController->registerPlugin(new $pluginClass());
}
3. コンテキスト検出
モバイルプラグインで行う必要があるのはこれだけです。次にやらなければならないことは、正しいコンテキストを確実に検出することです。ブートストラップでこれを行います。bootstrap.php を開き、次のように記述します。
// set correct context
$domains = explode('.', $_SERVER['HTTP_HOST']);
if ($domains[0] == 'mobile' || $frontController->getParam('format') == 'mobile') {
if ($domains[0] == 'mobile') {
// if set, user will be redirected directly to requested page
Zend_Registry::set('directmobile', '1');
}
Zend_Registry::set('context', '\mobile');
} else {
Zend_Registry::set('context', '');
}
4. ユーザーへのお願い
アプリケーションのモバイル バージョンとデスクトップ バージョンのどちらを使用するかをユーザーに尋ねたいので、インデックス コントローラーで簡単なアクションを作成します。モバイルプラグインでユーザーをこのコントローラー/アクションにリダイレクトします (第 2 章を参照)。
IndexController.php を開き、askmobileAction を作成します。
public function askmobileAction()
{
// nothing to do here...
}
このアクションは基本的に…まあ、何もしません;-)。それでは、askmobile ビューを見てみましょう。ビュー フォルダー (おそらく \views\scripts\index になる) に、askmobile.mobile.view という名前のファイルを作成し、次のような内容を入れます。
How do you want to use this application?<br/>
<a href="<?= 'http://mobile.fopp.de' . $_SERVER["REQUEST_URI"]?>">MOBILE VERSION</a>
<br></br>
<a href="<?= 'http://dev.fopp.de' . $_SERVER["REQUEST_URI"] ?>">DESKTOP VERSION</a>
それは本当に複雑ではありませんね。ご覧のとおり、このビューの名前は他のすべてのビューの名前とは異なります。このチュートリアルの後半で説明するように、ContextSwitch は、コンテキスト MOBILE にいる場合、name.phtml の代わりにビュー name.MOBILE.phtlm が呼び出されていることを確認します。
5. モバイルレイアウト
次のステップは、モバイル バージョン用の独自のレイアウトを作成することです。これが必要かどうかは、アプリケーションによって異なります。ただし、ほとんどの場合、アプリケーションのデスクトップ バージョンには複雑なレイアウトを、モバイル バージョンには軽量レイアウトを使用することは理にかなっています。まず、\layouts フォルダに \mobile という名前のディレクトリを作成します (フル パスはおそらく \application\layouts\mobile のようになりますが、これはアプリケーションによって異なります)。このフォルダーに layout.phtml というファイルを作成し、次のようなものを入れます。
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<?php echo $this->headTitle() . "\n" ?>
<?php echo $this->headLink() . "\n" ?>
</head>
<body>
<div id="header">This is your header</div>
<div id="content"><?= $this->layout()->content ?></div>
<div id="footer">This is your footer</div>
</body>
</html>
これは、モバイル コンテキストの非常に単純なレイアウトです。モバイル デバイス用に作成したとしても、CSS ファイルなどを含める可能性が高いため、レイアウトがはるかに複雑になる可能性が非常に高くなります。
6. すべてをまとめる
私たちはすでにほぼ完成しています。最後のステップは、コントローラーでコンテキストを使用することです。このチュートリアルでは、IndexController の init() メソッドを使用します。これは、アプリケーション内の他のすべてのコントローラーのテンプレートとして使用できます。実際には、このコードをすべてのコントローラーにコピーするよりも、OO-Design パラダイムを利用するスマートな方法を好みます (たとえば、Zend_Controller_Action を拡張するクラス MyMobileController を作成し、application.ini から必要なすべてのパラメーターを取得します)。このチュートリアルの仕事をします。
IndexController.php ファイルを開き、次のソース コードをコピーして貼り付けます。 /** * コントローラーとコンテキストを初期化します * * @return void */
// are we in the mobile context?
if (Zend_Registry::get('context') == '\mobile' || $this->getRequest()->getParam('format') == 'mobile')
{
// Mobile format context
$mobileConfig =
array(
'mobile' => array(
'suffix' => 'mobile',
'headers' => array(
'Content-type' => 'text/html; charset=utf-8')),
);
// Init the action helper
$contextSwitch = $this->_helper->contextSwitch();
// Add new context
$contextSwitch->setContexts($mobileConfig);
// This is where you have to define
// which actions are available in the mobile context
// ADOPT THIS TO YOUR NEEDS!
$contextSwitch->addActionContext('index', 'mobile');
$contextSwitch->addActionContext('askmobile', 'mobile');
// enable layout but set different path to layout file
$contextSwitch->setAutoDisableLayout(false);
$this->getHelper('layout')->setLayoutPath(APPLICATION_PATH . '/application/layouts/mobile');
// Initializes action helper
$contextSwitch->initContext('mobile');
}
}
7. モバイル ビューを作成する
最後に、モバイル ビューを作成する必要があります。(コントローラーの init() メソッドで定義されているように) モバイル コンテキストで使用可能なビューごとに、モバイル ビューを作成する必要があります。そのため、myaction というアクションがある場合、アプリケーションのデスクトップ バージョンには myaction.phtml が、モバイル バージョンには myaction.mobile.phtml が必要になります。
おめでとう！初めてのモバイル Web アプリケーションを作成しました ;-)
付録: モバイル デバイス用の翻訳ファイル
第 1 章で約束したように、モバイル デバイス/モバイル コンテキストには別の翻訳ファイルを使用します。これは、ラベル、説明テキスト、エラー メッセージなどを短くしたい場合に非常に便利です。もちろん、このようなものが必要ない場合は、この付録を飛ばしてもかまいません。
基本的には、アプリケーションがどのコンテキストにあるかを確認し、対応する翻訳ファイルをロードするだけです。
翻訳ファイルを \application\translations\ フォルダーに保存し、英語版とフランス語版のアプリケーションがあるとします。fr.php および en.php ファイルのほかに、翻訳フォルダーに各言語のモバイル バージョン (mobile_en.php および mobile_fr.php) が必要です。次のコード スニペットは、対応する翻訳ファイルを読み込みます。
// Init Zend_Locale with corresponding language (assuming that $lang is set to 'en' or 'fr')
// and store the Zend_Locale object in the registry
Zend_Registry::set('Zend_Locale', new Zend_Locale($lang));
// Load translation file and store it in the registry
$langFile = APPLICATION_PATH . '/application/translations/';
if (Zend_Registry::get('context') == '\mobile') {
// if context = mobile, get translation file for mobile device
$langFile.= 'mobile_' . Zend_Registry::get('Zend_Locale')->getLanguage() . '.php';
} else {
$langFile.= Zend_Registry::get('Zend_Locale')->getLanguage() . '.php';
}
Zend_Registry::set(
'Zend_Translate', new Zend_Translate('array', $langFile)
);
于 2016-11-21T11:22:18.943 に答える