FuelPHPによるMVCプログラミング入門

Assetクラスを利用する

全333コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
Assetクラスは、画像・CSS・JavaScriptを読み込むためのクラスです。これを利用すれば、JSのキャッシュを防いだり、パス切れを防ぐことができます。便利に活用しましょう。
講師:
06:52

字幕

ここでは「Asset クラスを利用する」としまして、JavaScript や CSS、画像などを読み込む時に便利なクラスであるAsset というクラスを利用してみたいと思います。それでは、まずはプロジェクトを準備します。ここでは lesson04-04 というフォルダにFuelPHP をセットアップし中に fuel の app の classes のcontrolller にまずは sample.php というファイルを準備しました。このファイルは Controller_Sample という名前でController を継承しており、action_bar_index ということでIndex のアクションが定義されています。そして、その中ではView を呼び出していて、sample/index が呼び出されています。その sample/index というビューですけれども、views の中の sample の中にindex.php というファイルを作り、この中は配布されているこちらのテンプレートのindex.html の内容を貼りつけました。そして images と style.css はこちらの public フォルダの中に収めています。 では、まずはこちらで表示を確認してみましょう。タイトルを適当に設定していますが、こちらで MAMP の「環境設定」をドキュメントルート、合わせておきます。そして、こちらのアドレスにアクセスしましょう。localhost:8888 の /sample にアクセスをするとこのように 「Asset を利用する」ということでページが表示されます。ではここで、例えば、ある JavaScript を組み込みたいとしましょう。例えば、ここでは1つ JavaScript を作りまして「ページタイプ」 JavaScriptそして「作成」します。ここでは JavaScript の詳しいことについては解説を省略しますので例えば alert として Hello というような簡単な script を組んでおきましょう。そして、この JavaScript ですけれどもここに保存をします。lesson04-04 の public の中のassets というフォルダのjs というフォルダが予め準備されています。これは FuelPHP をセットアップすると標準で準備されるフォルダです。特に、必ずここに設定しなければいけないわけではありませんがここに保存しておくと何かと便利なので今回は、ここを使いたいと思います。 では、ここに base.js というような名前で保存をして、まず、この js ファイルを読み込んでみましょう。通常、今のような js を読み込むためにはscript タグを書いて、ここに src= などと書いてここで相対パスで指定したり、または、ルート相対と言われるassets/js/ というような形で記述をしていきます。しかし FuelPHP を使っている場合、ここで非常に便利なスクリプトとしてAsset というクラスがあります。ここに :: (コロン・コロン)と書いてjs というふうに書き、ファイル名を指定していきます。このようになります。では、これでファイルを読み込んでみましょう。こちらの URL を改めて表示すると、このようにダイアログボックスが出ましてHello と表示されました。これは base.js が読み込まれているという証拠になります。では、その読み込まれている base.js のscript タグはどのようになっているでしょうか。「ページのソースを表示」すると分かるんですが、このように script タグ、そして src として、絶対パスで指定されています。/assets/js/ というのは予め指定されていてその後、ファイル名が指定されています。 そして、その後なんですが? (クエスチョン)の後にこのように数字が並んでいます。この数字は一体何を意味しているのかと言いますと、実は、ここが非常に便利なポイントです。例えば、ここ。末尾が今 748 となっていますが、もし JavaScript の内容を変更したとしましょう。ここでは、例えばGood bye に変更し、保存します。そして、ファイルを改めて読み直しましょう。すると Good bye に変更されていますがこの時 JavaScript を読んでいるソースを見てみると、このように、末尾の数字が 826 。先ほどは 700 番代でしたが、少し変わっています。この数字は一体何を意味しているのかと言いますと、JavaScript はWeb ブラウザによっては非常に強いキャッシュが残ってしまうことがあります。JavaScript を変更しているにも関わらず、あるブラウザでは古い JavaScript が読まれてしまうということが起こるのは、PHP などを作っているとよく起こることなのではないでしょうか。FuelPHP では、それを防ぐためにJavaScript のファイルが変更されるとそれを感知して ? (クエスチョン)などにそのタイムスタンプを貼りつけてくれます。 これにより、どんな Web ブラウザでも、キャッシュが残っていても必ず読み直してくれるという特徴がありますのでこの数字が付加されているのは非常に便利な特徴です。この Asset というクラスにはこの他にも例えば、画像を読み込むための Asset:img、それから css を読み込むためのAsset:css というメソッドがあります。いずれも使い方としては同様でファイル名だけを指定すればこの assets フォルダの中のcss 、 img のそれぞれのファイルを読み込んでくれる便利なメソッドです。必ずしも使う必要はありませんので、css を例えば、このように通常通り、link タグで読み込ませることもできますし、その場合にルート相対などを使えばパス切れなどを起こさずに読み込ませることもできるので無理に、全てに書く必要はありませんが便利な時は使っていくと良いでしょう。

FuelPHPによるMVCプログラミング入門

このコースでは、PHPのフレームワークのひとつであるFuelPHPを紹介していきます。フレームワークとはスクリプト開発における「足場」となるもので、近年のスクリプト開発においては非常に一般的な存在となっています。高速な開発スタイルをぜひとも身に付けていきましょう。

6時間19分 (47 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 3,990
発売日:2014年01月12日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。