第5回 画像・CSSファイル・JSファイルを使用する

プラグインで表示される各画面をデザインする際、
画像、CSS、Javascriptは欠かせません。

今回はプラグインページにそれらを適応させる方法を探っていきたいと思います。

今回の目次

  • ディレクトリ構成
  • 各ファイルの準備
  • ビューの修正
  • 画像の表示方法
  • CSSファイル、JSファイルの呼び出し方法
  • まとめ

ディレクトリ構成

make_dir.png

このような構成でディレクトリを作成しましょう。
これ、実はbaserCMSのドキュメントルートと同じ構成になっております。

各ファイルの準備

最終的には、フロント側にbaserCMSの公式キャラべっし〜を表示させ、
画像をクリックするとメッセージ(Hello World!! 設定したメッセージ)が
表示されるようにします。

べっし〜画像のダウンロードと配置

以下のページからダウンロードできます。

べっしー ダウンロード

ダウンロードが完了したら、/HelloWorld/webroot/img/フォルダに配置してください。

cssファイルの作成

先ほど作成した css フォルダの中にファイルを準備しましょう。

ファイル名はhello_world.cssにして、内容は以下のようにしておいてください。

jsファイルの作成

続いてjsフォルダに同じようにjavascriptファイルを作成しましょう。

ファイル名はhello_world.jsにして、以下の内容にしておきます。

ビューの修正

各ファイルを準備したので、それらを実際に使ってみましょう。

/HelloWorld/View/HelloWorld/index.php を以下のように修正します。

この時点で動作するはずなので、フロント側で確認してみましょう。

べっし〜が中央に配置され、画像をクリックするとポップアップウィンドウでメッセージが表示されます。

js_check.png

各ファイルの呼び出し方

画像の表示

画像ファイルを使用するにはbaserCMSの関数を利用すればOKです。
また、呼び出し方は以下の2パターンあるので、お好みでご使用下さい。

画像ファイルは拡張子まで記述する必要がありますので、気をつけましょう。

CSSファイルの読み込み

JSファイルの読み込み

css, jsは呼び出しの際、拡張子を省略可能です。
※拡張子をつけても問題ありません。そこはbaserCMSが良きに計らってくれます。

まとめ

お疲れさまでした!

これで、画像・デザイン・クライアントサイドの処理を自由に設定できるようになりました。

それらを駆使してユーザーエクスペリエンスまで考慮したプラグインを作りたいですね!

あっきー  - 放浪システムエンジニア

ユーザーインターフェイスに重点をおいた設計を常に心がけ、常に最新情報を模索している。