WinRoadのLaravel4初心者講座

次世代PHPフレームワークのLaravel4を初心者向けに解説して参ります。

Winroad徒然草の管理人がお届けします
jQueryMobileのセットアップ

jQueryMobileのセットアップ

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

携帯やタブレット主体のサイトを構築するには、jQueryMobileはかなり便利です。そのjQueryMobileをLaravelで使用する方法を調べてみたいと思います。

  1. jQueryMobileの最新バージョンは、1.4.1ですが、一部の携帯で不具合が出ますので、一つ前のバージョン1.3.2を使用する方法をご紹介します。
  2. まず、jQueryMobileは、CDNで提供されていますので、そちらを利用します。
  3. 下記にレイアウトのベースになるbase.blade.phpファイルを作成します。これはあくまでも例ですので、皆さんのサイトにあった内容で作成してください。
  4. (例)app/views/jqm/base.blade.php
    <!DOCTYPE html>
     <html>
     <head>
     <meta charset="utf-8">
     <title>Builwing</title>
     <meta name="viewport" content="width=device-width,minimum-scale=1">
     {{HTML::style('//code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css')}}
     {{HTML::style('/jqm/mystyle.css')}}
     {{HTML::script('//code.jquery.com/jquery-1.9.1.min.js')}}
     {{HTML::script('//code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js')}}
     </head>
     <body>
     @section('page')
     <div data-role="page" id="page1" data-theme="b">
     @show
     @section('header')
     @include('jqm.header')
     @show
     @yield('content')
     @section('footer')
     @include('jqm.footer')
     @show
     </div><!--end of page-->
     </body>
     </html>
    • 7行目:jQueryMobileのメインCSSをCDNサイトから読み込みます。
    • 8行目:public/jqmフォルダに、mystyel.cssファイルを作成します。自分のサイトのレイアウトを修正するときに使用します。とりあえずは中身は空で構いませんので、先に作成しておきます。
    • 9行目:jqueryをCDNサイトから読み込みます。
    • 10行目:jQueryMobileのメインJSファイルをCDNサイトから読み込みます。
    • 13-15行目:jQueryMobileのdata-role=”page”を読み込むために使用します。コンテンツファイルの先頭で、@extends(‘jqm.base’)を読み込むと、自動的に、この@section(‘page’)も読み込まれます。そして、コンテンツファイルの中で、この’page’の中身を変更することが出来ます。
    • 16-18行目:jQueryMobileのdata-role=”header”を読み込むために使用します。この場所に、app/views/jqmフォルダのheader.blade.phpファイルを読み込みます。
    • 19行目:メインコンテンツをここで読み込みます。
    • 20-22行目:jQuryMobileのdata-role=”footer”を読み込むために使用します。app/views/jqmフォルダにfooter.blade.phpファイルを作成します。
    • 23行目:divの閉じタグを忘れずに挿入しておきます。
    • 尚、上記base.blade.phpは、メインコンテンツで下記のように読み込みます。
      (例)app/views/user/index.blade.php
      @extends(‘jqm.base’)
      @section(‘content’)
      //ここにコンテンツを記述します。
      @stop
  5. header、footerそれぞれのページを作成します。
  6. (例)app/views/jqm/header.blade.php
    <div data-role="header" data-theme="b">
     <h1>Builwing</h1>
     <a href="/" data-icon="home" data-iconpos="notext" class="ui-btn-left">ホーム</a>
     </div>
    • 2行目:ページのタイトルをページごとに変更するためにはちょっとした工夫が必要です。後日その方法をご紹介します。
    • 3行目:ヘッダーの左側にトップページに戻るリンクを作成します。ホームアイコンのみが表示されます。
  7. (例)app/views/jqm/footer.blade.php
    <div data-role="footer">
     <div data-role="navbar" data-grid="d">
     <ul>
     <li><a href="#" data-theme="b">One</a></li>
     <li><a href="#" data-theme="b">Two</a></li>
     <li><a href="#" data-theme="b">Three</a></li>
     <li><a href="#" data-theme="b">Four</a></li>
     <li><a href="#" data-theme="b">Five</a></li>
     </ul>
     </div><!-- /navbar -->
     </div><!-- /footer -->
    • フッターにグリッドナビゲーションバーを作成します。上記の例では、フッターに5つのナビゲーションリンクが作成されます。
  8. 下記のようなサイトが簡単にできます。
  9. laravel036

« »

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です