infoScoopとJoomlaを連携する

infoscoop.orgは、Joomla!というオープンソースCMSを使って構築しています。
Joomla!はOpen Source CMS Awardで毎年のように3位以内に入っている有名なCMSです。
Joomla!は定型的なサイトを作るのは本当に簡単で、infoscoop.orgは1週間くらいで構築できました。*1

デモサイトにinfoScoopのダウンロードとマニュアルを表示したいというのもあり、JoomlaとinfoScoopを連携してみたので、そのときどうやったかをまとめてみます。

概要


これがJoomlaの典型的な画面です。
Joomlaにはモジュールという単位があり、上の画像で「Latest News」、「Popular」、「Main Menu」、「Polls」、「Template Changer」とかなっている部分がモジュールを表示しています。
後は真ん中の部分のメインコンテンツをコンポーネントと言います。*2

このモジュールとコンテンツ部分をinfoScoopのガジェットにしてしまって、自由に配置できるようにします。

こんなのができました。

Joomlaにはエクステンションがたくさんあり、どしどし機能を追加することができます。
ここでは以下のエクステンションを使っています。

追加したエクステンションを全てがジェットにすることができるので、JoomlaとinfoScoopを組み合わせると大量のガジェットを簡単に作ることができます。
他のエクステンションはHome - Joomla! Extensions Directoryから探すことができます。

Joomlaの視点から見ると、infoScoopと連携することでJoomlaにパーソナライズ機能を追加することができると言えます。

どうやったか

ガジェット用のシンプルなJoomlaテンプレートを用意して特定のURLのときにそのテンプレートを使用してJoomlaサイトを表示するようにしました。

手順
  1. JoomlaGear Template Changerをインストールします。
  2. ガジェット用のテンプレートを用意します。（gadgetという名前にします。）
  3. infoScoop側では、ガジェット化したいJoomlaの画面のURLの後ろに「?template=gadget」をつけたURLのミニブラウザを追加します。
JoomlaGear Template Changerをインストール

JoomlaGear Template Changerをインストールします。
これは、Joomlaのテンプレートをユーザが切り替えられるようにするプラグインです。
URLに「?template=xxx」とつけても、テンプレートが切り替わることがわかったので、それを利用します。

ガジェット用テンプレートの作成

infoscoop.orgでは、kodadesignというテンプレートを使っているので、これを改造します。
（ほとんど何もしないテンプレートを作るので、一から作ってもいいと思いますが、簡単なので。）

index.phpとtemplateDetails.xmlを修正します。

index.phpは以下のように修正します。

  1. 思いっきり削って一つのモジュールもしくはコンポーネントだけを表示するようにする
  2. リンクを別ウィンドウに開くようにするスクリプトを入れます。*3

templateDetails.xmlはテンプレート名が同じだとインストールできないので、そこだけ変えればOKです。

index.php

<?php
// no direct access
defined( '_JEXEC' ) or die( 'Restricted access' );
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" >
<head>
<jdoc:include type="head" />

<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/system.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/general.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/template.css" type="text/css" />
<!--[if lte IE 6]>
<link href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/ieonly.css" rel="stylesheet" type="text/css" />
<![endif]-->
<script>
function rebuildLinks(){
	var links = document.getElementsByTagName("a");
	for(var i=0;i<links.length;i++){
		var link = links[i];
		if(link.href){
			link.target = "joomla";
		}
	}
	var forms = document.getElementsByTagName("form");
	for(var i=0;i<forms.length;i++){
		var form = forms[i];
		if(form.action){
			form.target = "joomla";
		}
	}
}
</script>
</head>
<body onload="rebuildLinks()">
<a name="up" id="up"></a>
<jdoc:include type="message" />
<?php
	$module = $_GET["module"];
?>
<div id="main" style="margin-left:5px;width:100%">
	<?php if($module) : ?>
	<div style="float:left;"><jdoc:include type="modules" name="<?php echo $module;?>" style="<?php echo $_GET["style"];?>"/></div>
	<?php elseif($this->params->get('showComponent')) : ?>
	<div style="float:left;"><jdoc:include type="component" /></div>
	<?php endif; ?>
</div>
<jdoc:include type="modules" name="debug" />
</body>
</html>
infoScoopでミニブラウザガジェットを追加

infoScoopにはミニブラウザという標準ガジェットがあります。
指定したURLのページをガジェット内に表示するという単純なガジェットです。
一番簡単にミニブラウザガジェットを追加するには、infoScoopの左のサイドバーの「コンテンツの追加」にURLを入れて、追加を押せば追加できます。*4

例えば、記事をガジェットにするには、以下のように記事のURLに「?template=gadget」をつけたURLを追加すれば、

http://www.infoscoop.org/index.php/ja/infoscoop.html?template=gadget

infoScoopとはのページをガジェットにすることができます。

メニューのようにモジュールをガジェットにするには以下のように記事のURLに「?template=gadget&module=モジュール表示場所&style=スタイル」と指定します。

http://www.infoscoop.org/index.php/index.php?template=gadget&module=left&style=menu

この辺は、Joomlaを知っている人でないと難しいのですが、Joomlaではモジュール表示場所というのがあり、場所はテンプレートで決まります。
このgadgetテンプレートでは指定された表示場所に表示されるモジュールだけを表示するように作っています。

まとめ

そんなわけで最後は難しくなりましたが、infoScoopとJoomlaを連携することができました。
OpenSocialガジェット出力Joomlaエクステンションみたいのを作る方がスマートですけどね。
とりあえずほぼノンコーディングでできる方法でやってみました。

*1:その後、いろいろやろうとすると悩んでしまうことが多いのですが

*2:たぶん。ソースにそう書いてある。

*3:ガジェット内で画面遷移してしまうと使いにくいので

*4:他にも管理画面からメニューに登録し、メニューからドラッグ＆ドロップで追加するという方法もあります。