■JavaScript=jQueryをjoomla!に組み込む

joomla!にjavascriptを組み込む場合、すんなりいかない。まずオープンソースのCMS特有の独自のフィルター機能が作動している。そしてもう一つの大きな問題は読み込んだjsスクリプトが他のスクリプトとぶつかるケース。そして当たり前だがjsに付随するCSSがある場合、そもそもこちらで組んでいるスタイルシートとぶつかる事も考えられる。
単純に考えれば、この3つさえクリアできれば、jQueryなどスクリプトは動作することとなる。

●まず、一つ目のjoomla!独自のブロックを外すには、

まず、メニューバーから、［コンテンツ］-［記事管理］を選択して、開いた記事管理の［パラメータ］でフィルタリングオプションの内容を変更する。

という事らしい。要は、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をもってきてそれがぶつかる場合は地道に探っていくしか手はない!!