Joomla.orgでJoomla!1.5.15がリリースされたのを受けて、Juser.jpでもJuser版Joomla! 1.5.15 をリリースしました。

イントーラー以外の言語ファイルも若干修正を加えています。
障害等報告はjuserフォーラムまでお願いします。

ダウンロードはこちら:
http://juser.jp/download/2-joomla/12-joomla-1515-juser.html

  1. nucleusディレクトリにアクセスしたら管理画面にログインできるのに、フロントからのログインができない。再ログインしなければならない。
  2. ログインして記事編集中に画像を投稿しようとクリックすると、ポップアップしたウィンドウにページが見当たらない等のエラー表示。
  3. その他、再ログインの多発や不可思議なページが見当たらない等のエラーを見かけるとき。


上記のような症状は『グローバル設定』のパスの設定のホスト部分がバラバラなのかもしれない。

http://www.itami.info/suc/ の場合 http://itami.info/suc/ でもアクセスできるが、 設定はどちらか一方に統一しないと、上記の様なエラーに見舞われる。
注意が必要なのは『グローバル設定』以外に『メンバー管理』のWEBサイトのURLも影響する。これらの設定は全て同じにした方が良い。

選択ブログのアイテム群表示をコントロール

 「Company」ではサイトのトップページにアクセスした場合と他のページにアクセスした場合をカテゴリが選択されているか否かによって判断し、アイテムの表示を振り分けています。
 この振り分けを行うためにはプラグイン「NP_ShowBlogs」のインストールとスキン変数によりアイテム群の表示をコントロールする必要があります。
 「NP_ShowBlogs」は標準スキン変数であるの代わりに完全に差し替えて使用することができ、「Company」スキンで利用している機能以外にも様々な設定ができる強力なプラグインです。

 

<!-- page content -->
<div id="container">
<div class="content">
<%ItemNaviEX(1)%>
<%blog(default/index,10)%>
</div>
</div>
     <%image(20071211-ya2.gif|21|26|)%>
<!-- page content -->
<div id="container">
<div class="content">
<%ItemNaviEX(1)%>
<%if(category)%>
  <%ShowBlogs(default/index, 1, all,,ASC)%>
<%else%>
  <%ShowBlogs(default/index, 1, home,,ASC)%>
<%endif%>
</div>
</div>

 カテゴリ表示の時は全てのブロクを対象に「default/index」テンプレートを使用して1件のアイテム表示、それ以外(サイトのトップページへのアクセス)の場合はブログ「home」を「default/index」テンプレートを使用して1件のアイテム表示を行う。
※「company」スキンでは「company/index」を指定しています。

 主要な設定とサブカテゴリを可能とする「NP_MultipleCategories」の設定が済みましたので、ダミーのアイテムを各カテゴリやサブカテゴリに投稿してみましょう。
 パンくずやナビゲーションメニューが思ったように表示されればOKです。期待した状態にならない場合は各設定を再度確認します。

ダミーアイテムの投稿はサイトマップに従って行います。

ブログ「会社情報」の投稿アイテム例


アイテムを投稿したところ

ブログ「会社情報」のカテゴリ設定


カテゴリ設定

サブカテゴリのアイテム「株価情報」のカテゴリの設定


カテゴリ

サブカテゴリのアイテム「株価情報」の「Multiple Categories」の設定


アイテムを投稿したところ

アイテム投稿後、サイドバーの不要なタグなどを削除し解り易い状態に整形した「default」スキン。

メニューの出力

 パンくずの設定、セクションの生成、カテゴリの生成、アイテムリンクの生成、コンテンツの表示は他のスキンでも利用でき汎用性を持たせるために読込ファイルとして作成します。

読込対象として作成するファイルと内容
読込ファイル   目的   記述内容
mod_pathway.inc  パンくずの表示 <%ItemNaviEX(1)%>
mod_menu_section.inc  セクションの生成  <div id="section_bt">
  <%bloglist(default/index)%>
 </div>
mod_menu_category.inc  カテゴリの生成  <%ContentsList(@)%>
mod_menu_item.inc  アイテムへのリンクを生成 <%if(MultipleCategories, subcatid, 4)%>
  <%Pickup(3,,6)%>
 <%endif%>

mod_contents.inc 

コンテンツの表示
 

<%if(category)%>
  <%ShowBlogs(default/index, 1, all,,ASC)%>
 <%else%>
  <%ShowBlogs(default/index, 1, home,,ASC)%>
 <%endif%>

動作デモ

以下で紹介されている場所と同じ場所に設定していますので、ダブルクリックしてご確認下さい。

ダウンロード

設定方法
「メインの目次」、「個別のアイテム」などスキン編集により、mod_loginform.incは<%parsedinclude(mod_login.inc)%>として<body>直下に読み込みます。
loginbox.cssとloginbox.jsはヘッダ内でリンクします。
 

隠しログインフォームの設定

 Nucleusのブログでは管理領域へのログインフォームを常に表示している場合も多いのですが、企業サイトなどではログインフォームを常に表示する必要性はありません。
 不要なものを隠すことによって、サイトナビゲーションなどユーザビリティも向上し、少しばかりのセキュリティアップへもつながります。
 ページ上に表示されているログインフォームは、通常サイドバーにスキン変数<%loginform%>として記述されていますのでこの記述を削除すれば簡単に表示を消すことは可能です。しかしこの記述を削除した場合、ログインは/nucleusディレクトリにアクセスする必要が発生し、若干手間のかかるログイン方法となります。また、ページ面から該当記事を直接編集するといった便利さも失われてしまいます。
 そこで「Company」ではDreamweaverのビヘイビアに用意されている「エレメントの表示-非表示」を利用することによって、通常はログインフォームを隠しながら、隠しエリアをダブルクリックすることによって表示させる方法をとります。
 設定は他のスキンや将来的にも再利用可能なように読込ファイルとして作成します。

ログインフォームの表示と非表示の構造

  1. ログインのためのフォームが配置されているloginboxは不可視設定し、callLoginBox領域をダブルクリックすることによって表示される。
  2. loginbox内でダブルクリックしたらloginboxは閉じる。

 

設定の手順

以下はDreamweaverによる設定の手順を参考までに紹介しています。興味のある方はご覧下さい。
 

1)
 HTMLの構造は以下のとおりです。このHTMLを<body>タグの直下に配置します。

 


<div id="callLoginBox"></div>   
<div id="loginbox">
<dl>
<dt>Login</dt>
<dd><%loginform%></dd>
</dl>
</div>

2)
 CSSによりcallLoginBoxを設定します。最終的には非表示にしますが、設定中は場所や大きさを把握するために背景色を与えています。場所はposition: absolute;で絶対指定します。
 Dreamweaverであればマウスドラッグによる場所の移動も可能ですので、自分には覚え易く他の人には推測し難い場所を設定して下さい。


左に赤く見えるのが#callLoginBoxの設定です。


プロパティインスペクタの設定


設定したCSS


#callLoginBox {
    position: absolute;
    width: 20px;
    height: 20px;
    left: 0px;
    top: 120px;
    background-color: #CC0000; /*見えるように色付けしています。最終的には削除します*/
}

3)
CSSによりloginboxを設定します。場所はposition: absolute;で絶対指定しますが、z-indexは2を与え、表示された場合はcallLoginBoxよりも手前に配置されるように設定して初期値で非表示に設定します。


#loginboxの設定


プロパティインスペクタの設定


設定したCSS

#loginbox {
    position: absolute;
    z-index: 2;
    overflow: auto;
    visibility: hidden;
    top: 69px;
    left: -3px;
    border: 3px dotted #000000;
    padding: 15px;
    background-color: #33CC66;
}

4)
callLoginBoxに対するビヘイビアの設定
 HTMLソースからcallLoginBoxを選択し、ビヘイビアの「+」アイコンを押してドロップダウンリストから「エレメントの表示-非表示」を選びます。

ドロップダウンリスト
 

ダイアログボックスのエレメントにloginboxを選び、設定を「表示」にしてOKボタンを押します。

エレメントの表示-非表示ポップアップ
 

ビヘイビアパレットのイベントはonDblClickに変更します。これでcallLoginBoxをダブルクリックするとloginboxが表示されます。

ビヘイビアパレット
 

5)
 loginboxに対するビヘイビアの設定
 HTMLソースからloginboxを選択し、ビヘイビアの「+」アイコンを押してドロップダウンリストから「エレメントの表示-非表示」を選びます。

ドロップダウンリスト
 

ダイアログボックスのエレメントにloginboxを選び設定を「非表示」にしてOKボタンを押します。

エレメントの表示-非表示ポップアップ

 

ビヘイビアパレットのイベントはonDblClickに変更します。これでloginboxをダブルクリックするとloginboxが非表示になります。

ビヘイビアパレット
 

※callLoginBox、loginbox共イベントにダブルクリックを指定しているのは不用意なクリックによってフォームの表示/非表示が発生しないためです。
※Dreamweaverのバージョンなどによって手順や生成されるスクリプトに違いがあるかも知れませんのでご注意下さい。

完成した隠しログインフォームのモジュール化
 Dreamweaverのビヘイビアによって書き込まれた部分を切り出してmod_loginform.incとして保存します。また、動作に必要なjavascriptは<head>タグ内に記述されていますので、こちらも外部ファイルとして保存し、リンク使用します。


ビヘイビア設定後のHTMLコード


<div id="callLoginBox" ondblclick="MM_showHideLayers('loginbox','','show')"></div>   
<div id="loginbox" ondblclick="MM_showHideLayers('loginbox','','hide')">
<dl>
<dt>Login</dt>
<dd><%loginform%></dd>
</dl>
</div>

 


記述されたJavascript

// JavaScript Document
function MM_showHideLayers() { //v9.0
  var i,p,v,obj,args=MM_showHideLayers.arguments;
  for (i=0; i<(args.length-2); i+=3)
  with (document) if (getElementById && ((obj=getElementById(args[i]))!=null)) { v=args[i+2];
    if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v; }
    obj.visibility=v; }
}


mod_loginform.incは<%parsedinclude(mod_login.inc)%>として<body>直下に読み込みます。
loginbox.cssはヘッダ内でリンクします。
Javascriptはloginbox.jsとして保存し、こちらもヘッダ内でリンクします。
「メニュー」> 「挿入」> 「HTML」> 「スクリプトオブジェクト」> 「スクリプト」でJavascriptのリンクでリンク設定が可能です。


不可視の領域をダブルクリックすることによってログインフォームが現れます

 ここで今回構築する企業のサイトマップ例を示します。シンプルなサイト構造ですが、一般的なサイト構築に必要な階層構造を持っています。
ご利用の際は適宜ご自身のサイト構造に変更して下さい。
 正しいサイト構造の設計はそのサイトで扱わなければならない全情報の収集と、収集した情報の分類及びマッピングが必要です。サイトマップの作成によってボタンやナビゲーションに対するより具体的な設計が可能となります。

各階層と設定の関係

  • セクション(Nucleusの標準機能にによりブログを割り当てる)
    「HOME」「事例紹介」「会社情報」「お問合せ」

  • 「会社情報」のカテゴリ(Nucleusの標準機能によカテゴリを割り当てる)
    「社長挨拶」「沿革」「IR情報」

  • 「IR情報」のサブカテゴリ(プラグインNP_MultipleCategoriesによりサブカテゴリを割り当てる)
    「決算発表」「株価情報」

  • 「決算発表」のサブカテゴリ(プラグインNP_MultipleCategoriesによりサブカテゴリを割り当てる)
    「スケジュール」「第1四半期 連結決算」

  • アイテムへのリンク(プラグイン NP_Pickupによりアイテムリンクの作成)
    上記サイトマップには記述されていません。

必要なブログを増やす

 各セクションをブログで構築するために、管理領域のサイドナビゲーションから「新規Blogの作成」を選んで必要なブログを増やします。
 各項目に入力する値は以下のように設定します。

ブログ設定
 

セクションと作成するブログの設定
セクション名 Blogの名前 Blogの短縮名 URL
「HOME」  HOME  My Nucleus CMSを編集    home  http://YourSite.com/
「事例紹介」
 
事例紹介 cases   http://YourSite.com/cases/
「会社情報」
 
会社情報     info http://YourSite.com/info/
「お問合せ」 
 
お問合せ  contact   http://YourSite.com/contact/

セクションナビゲーションの設定

セクションナビゲーションのURLの生成にはv3.3で導入されたスキン変数のを使用しています。の使用によって、セクションの増減にナビゲーションレイアウトが自動で対応可能となります。
尚、の書式はとります。

のHTML出力

<dd><a href="/URL" title="">ブログ名1</a></dd>
<dd><a href="/URL" title="">ブログ名2</a></dd>
<dd><a href="/URL" title="">ブログ名3</a></dd>


「default」スキンへの記述

<!-- page menu -->
<h2 class="hidden">Sidebar</h2>
<div id="sidebarcontainer">
<%parsedinclude(sidebar.inc)%>
</div>

     

<!-- page menu -->
<div id="section_bt">
  <%bloglist(default/index)%>
</div>

<h2 class="hidden">Sidebar</h2>
<div id="sidebarcontainer">
<%parsedinclude(sidebar.inc)%>
</div>

URLを自由にカスタマイズ

 CMSから出力されるページのURLは“?”や“=”が含まれ、動的に生成されたページとして検索エンジンの収集などの際に不利だと思われています。そのため多くのCMSではURLを静的なものへと偽装する方法が提供されているのです。
 NucleusCMSにおいても標準で用意されている、「FancyURLモード」や「mod_rewrite」などの方法がありますが、「Company」スキンではプラグインの「NP_CustomURL」を利用することによってURLの変更を行います。
 「NP_CustomURL」はディレクトリやファイル名を自由に設定できる非常に強力なプラグインです。

動的なURLがシンプルな静的URLに変身

http://YourSite.com/index.php?itemid=6
        
http://YourSite.com/about/item1.html

パンくずの設定

 「パンくず」はユーザーのサイト上での現在位置を表すためのパス表示です。「breadcrumbs list」や「pathway」とも呼ばれるこの仕掛けはユーザビリティの高いナビゲーションでは必須とも言われています。
 静的で小規模なサイトであれば、手入力による「パンくず」の作成も可能ですが、動的に生成されるCMSでは動的に生成される「パンくず」が必要となります。
 Nucleusでは「NP_ItemNaviEX」を利用することによって「パンくず」を実現します。「NP_ItemNaviEX」はナビゲーションやサイト構造の確認のためにも大変便利なプラグインです。

「NP_ItemNaviEX」の設定

 プラグインをインストールした後、スキン(ここでは複製した「default」スキン)へはを記述することによって、記述場所に「パンくず」が表示されます。
 パラメータの1はデフォルト設定で省略可能ですが、“HOMEをデフォルトブログとしてパンくずリストを作成する”設定となります。

テンプレートの書き換え

 「NP_ItemNaviEX」のデフォルトのテンプレートでは過去ログへのリンクなどが作成されていますので、プラグイン画面の「NP_ItemNaviEX」の項目で「編集」をクリックして、一度全てのテンプレート内容を削除して、「topicPathTemplate」のフィールドにを記述して下さい。

NP_ItemNaviEXのテンプレートを修正

ItemNaviEX

のHTML出力
テンプレート変更後のによる実際のHTML出力は以下のようになります。

<a href="/URL">Home</a> &gt; <a href="/URL">会社情報</a> &gt; <a href="/URL">IR情報</a> &gt; 株価情報</div>

カテゴリナビゲーションの設定

 「Company」では基本的にカテゴリリストをナビゲーションとして利用します。しかしNucleus標準のカテゴリリストを生成するスキン変数は表示順位の変更などができません。
 そこで、より柔軟な指定と操作が可能な「NP_ContentsList」のプラグインを導入します。「NP_ContentsList」はカテゴリ表示の順位変更が可能となるだけでなく、アクティブカテゴリの装飾なども可能となります。
 「NP_ContentsList」によるカテゴリは変数によって生成します。はいくつかの引数による出力の指定が可能ですが、ここではと記述することによって“選択されているブログのみのカテゴリを表示する”設定を行います。

カテゴリ、サブカテゴリ リンクの表示順位をコントロール

カテゴリの順位変更

 「NP_ContentsList」による表示カテゴリ表示の順位変更は「表示ランクの編集」> 対象のブログ「カテゴリーランクの編集」をクリックして「表示ランク」の数字を操作して下さい。
 数字は小さいほど上位の表示となります。尚そのカテゴリのトップはリンクボタンとして表示しませんので、「非表示」に設定しています。

表示ランクの編集
表示ランクの編集

カテゴリーランクの編集
カテゴリーランクの編集
 

「NP_ContentsList」のテンプレート

 「NP_ContentsList」のHTML出力はテンプレートの記述によつて決まります。
 テンプレートの作成は「Contents List テンプレートの編集」> 「新しいテンプレート」で新たなテンプレートを作成します。次に「使用可能なテンプレート」の一覧に作成したテンプレートが現れるので、「編集」のリンクテキストをクリックしてテンプレートの編集画面に入ります。

 「company」テンプレートでは「ブログリスト」、「カテゴリーリスト」、「サブカテゴリーリスト」の三つの状態を設定します。
 尚、「サブカテゴリーリスト」は「プラグインオプションの編集」をクリックして“Use sub category template.(require NP_MultipleCategories0.30j-)”の項目を“はい”にすることによって現れます。
 この項目は「NP_MultipleCategories」のインストールによって設定可能な項目です。また、「NP_ContentsList」はHTMLの出力をテンプレートで記述することが可能です。以下は今回作成した「company」テンプレートです。

'company'テンプレート内容

「続きを読む」をご覧下さい。

アクティブなカテゴリの表現

 アクティブなカテゴリやサブカテゴリに関しては「カレントカテゴリーのフラグ」、「カレントサブカテゴリーのフラグ」の項目にHTMLやにCSSセレクタを記述することによって、“選択されているボタンを反転表示させる”などの動作が可能となります。

テンプレート“company”のHTML出力

<dt></dt>
<dd><a class="cat" href="/URL">社長挨拶</a>
<dd><a class="cat" href="/URL">沿革</a>
<dd><a id="catactive" class="cat" href="/URL">IR情報</a>
<dd><a id="subcatactive" class="subcat" href="/URL">株価情報</a></dd>
<dd><a class="subcat" href="/URL">決算発表</a></dd>
</dl>


「default」スキンへの記述例

<!-- page menu -->
<div id="section_bt">
  <%bloglist(default/index)%>
</div>
<h2 class="hidden">Sidebar</h2>
<div id="sidebarcontainer">
<%parsedinclude(sidebar.inc)%>
</div>
     
<!-- page menu -->
<div id="section_bt">
  <%bloglist(default/index)%>
</div>
<%ContentsList(@)%>
<h2 class="hidden">Sidebar</h2>
<div id="sidebarcontainer">
<%parsedinclude(sidebar.inc)%>
</div>

 



'company'テンプレート内容

 
カテゴリーリストフッター
カレントカテゴリーのフラグ
サブカテゴリーリスト
サブカテゴリーリストヘッダー
サブカテゴリーリスト本体
サブカテゴリーリストフッター
カレントサブカテゴリーのフラグ