| 
■JavaScript=jQueryをjoomla!に組み込む
joomla!にjavascriptを組み込む場合、すんなりいかない。まずオープンソースのCMS特有の独自のフィルター機能が作動している。そしてもう一つの大きな問題は読み込んだjsスクリプトが他のスクリプトとぶつかるケース。そして当たり前だがjsに付随するCSSがある場合、そもそもこちらで組んでいるスタイルシートとぶつかる事も考えられる。
単純に考えれば、この3つさえクリアできれば、jQueryなどスクリプトは動作することとなる。
●まず、一つ目のjoomla!独自のブロックを外すには、
まず、メニューバーから、［コンテンツ］-［記事管理］を選択して、開いた記事管理の［パラメータ］でフィルタリングオプションの内容を変更する。
| フィルターオプション |
フィルタリングを摘要するユーザのグループを選択する |
| フィルタの種類 |
- ブラックリスト
- フィルタータグで指定したタグを削除する
- ホワイトリスト
- フィルタータグで指定したタグだけを許可する
- htmlタグ全削除
- フィルタータグに関係なく、すべてのhtmlタグを削除する
|
| フィルタータグ |
フィルター対象のタグ名を指定する。複数ある場合はカンマかスペースで区切る。＜＞はつけない。 |
| フィルタ属性 |
フィルター対象の属性（class とか、id とか、hrefとかね）を指定する。複数ある場合はカンマかスペースで区切る。 |
ブラックリストはすべてのタグとブラックリストのそれら以外の属性を許容します。
デフォルトブラックリストは以下のタグを含みます:'applet', 'body', 'bgsound', 'base', 'basefont', 'embed', 'frame', 'frameset', 'head', 'html', 'id', 'iframe', 'ilayer', 'layer', 'link', 'meta', 'name', 'object', 'script', 'style', 'title', 'xml'
デフォルトブラックリストは以下のタグを含みま:'action', 'background', 'codebase', 'dynsrc', 'lowsrc'
ブラックリストへ追加タグとスペースかコンマのそれぞれのタグか属性名を切り離して、フィルタータグとフィルター属性に追加出来ます。
ホワイトリストはフィルタータグに記載されたタグとフィルター属性の属性のみ許容します。保存される時にHTMLも内容からすべてのHTMLタグを取り除くというわけではありません。これらの設定はあなたが使用しているエディタにかかわらず作動します。
あなたがWYSIWYGエディタを使用していても、データベースの情報を保存する前に、フィルタリング設定は追加タグと属性を削除する場合があります。
| フィルターオプション |
サイト管理者以外を選択 |
| フィルタの種類 |
ブラック |
| フィルタータグ |
空白 |
| フィルタ属性 |
空白 |
という事らしい。要は、JCEであれ標準装備のエディターであれ危険防止や間違いチェック防止機能が働いていたり判別不能のタグは排除しちゃうのだ。良くブログでも禁止タグが設定されているがあの類いだ。当然joomla!等のオープンソースは柔軟に設定できるし、記事からスクリプトを読ませる場合基本設定でTinyMCEを外してNoを選べば良いし、HTML Moduleモジュールから設置すればタグが蹴られる事はない。
それと最も注意すべきは、一度フィルターをクリアして入力した内容が、フィルター設定を戻したが為に保存した瞬間にデータが全て消えてしまう事が起こる。
●もう一つの大きな問題、スクリプト指示がぶつかる又は指示が通らないケースでは…
$(document).ready(function(){
// jQueryの処理
});
これをjoomla!に組み込んでみても動かない、このスクリプトをHTMLを丸ごとコピーして html ファイルを生成したら問題ない。
joomla!は標準で jQuery がアドオンされている、もしくはモジュールのHTML ModuleでjavascpiptからCSSやスクリプトまでを書き込めばテンプレートの母体に書き込まず必要な場所に指定して機能させれば動きも遅くならずに良い。
ただここでこのスクリプト文中の、jQuery の省略型である ” $(・・・・) ” という記述方法がくせ者。
これは、多くの CMS で該当すると思うのですが複数の JavaScript アドオンを導入していることでぶつかっている可能性が高い。もしくは「$の判別不能」とエラーになります。
つまり＄を使わないで jQuery を呼び出し、その命令内で省略形を別名定義すればいいのですね。
$ を jQuery に書き換えれば動く のです。ただ、全部の $ を差し替えるのも面倒なので、別名定義も同時に行います。改善後のコードが以下の通りです。
jQuery(document).ready(function($){
// jQueryの処理
});
このように、書き変えればOKです。function($) が別名定義になってくれています。さらに、
jQuery(document).ready(function($){ //ここから
$(document).ready(function(){
// jQueryの処理
});
}); //ここまで
といった感じで、該当の命令をごっそり
jQuery(document).ready(function($){}); で囲ってやれば良い。
最後のjsについているCSSをもってきてそれがぶつかる場合は地道に探っていくしか手はない!! |
自分のFacebookページ→
■M8812J/AiMacG4800MHz/17"TFT/256SD/80G/
yvcomment, カテゴリ: "WebDesign*"