9. テーマの修正と作成 ¶

New in version 2.2.0.

Contents

テーマの修正と作成

Metacat のテーマ機能である MetacatUI は、Metacat とは切り離してデプロイされており、より独立的にユーザインタフェイスを調整できる。 MetacatUI は、 Backbone.js を使用した model-view-controller 型の構造になっている。 Backbone.js に関する背景知識があれば MetacatUI の高度な修正に役立つだろうが、MetacatUI のビューに含まれている CSS と HTML の編集には必ずしも必要ではない。

MetacatUI の初期ホームページ。テーマを使って見た目を調整することができる。

9.1. デフォルトテーマを使ってみよう ¶

デフォルトテーマ（上の図）を使用するには、下記の手順に従って MetacatUI を開始する。

js/themes/default ディレクトリをコピーして、ユニークなテーマ名に名前を変える。
js/themes/<yourtheme>/config.js ファイルの 1行目にあるテーマ名を、 default から今選んだ新しいテーマ名に変更する。
js/themes/<yourtheme>/img ディレクトリに以下の画像ファイルを追加する。
- 自組織のロゴ
- フッタに使う、サポーターやドナーのロゴ
js/themes/<yourtheme> に templates ディレクトリを作成し、以下のファイルを js/templates から新しいディレクトリにコピーする。
- footer.html
- navbar.html
js/themes/<yourtheme>/templates/footer.html ファイルを開き、フッターロゴ画像のパスとフッター画像へのリンクと対応するウェブアドレスを変更する。例えば、
<a href="http://nceas.ucsb.edu" target="_blank"><img alt="NCEAS" src="./js/themes/themename/img/nceas-logo-white.png"></a>
フッタに表示される「ヘルプ」メールアドレスを追加したり修正したりもできる。
js/themes/<yourtheme>/templates/navbar.html ファイルを開いて、 Metacat のロゴファイルを自組織のロゴファイルに置き換える。
Open index.html. Edit the following line to reflect your theme name (data-theme) and your Metacat context (data-metacat-context):

index.html を開く。下記の行を編集してテーマ名(data-theme) と Metacat コンテキスト(data-metacat-context) を反映させる。
<script data-theme="default" data-metacat-context="metacat" id="loader" type="text/javascript" src="loader.js"></script>

9.2. テーマを自作する ¶

すべてのテーマは同じ CSS, HTML, JavaScript, 画像ファイルを共有している。これらのファイルはいずれも、新テーマを作成して好きな様に修正することができる。新しいテーマを作成することで、これらの共有ファイルは自作テーマのファイルに上書きされる。

js/themes にある既存のテーマディレクトリをコピーして、そのディレクトリを新しいテーマ名に変更する。なお各テーマディレクトリは以下のようになっている。
css/ img/ routers/ templates/ config.js
新しいテーマに必要なのは config.js ファイルだけである。必要に応じてこの設定ファイルに変更が加えられる。
js/themes/<yourtheme>/css/ ディレクトリに metacatui.css という名前の CSS ファイルを作成する。それが新テーマの CSS ファイルとなる。
js/themes/<yourtheme>/img ディレクトリに自作画像を追加する。
js/themes/<yourtheme>/templates ディレクトリに HTML テンプレートを追加する。
js/themes/<yourtheme>/config.js ファイルを開く。このファイル内で theme と themeMap を定義する。

var theme = theme || "default";
var themeMap =
{
        '*': {
                // example overrides are provided here
                //'views/AboutView' : 'themes/' + theme + '/views/AboutView.js',
                //'templates/navbar.html' : 'themes/' + theme + '/templates/navbar.html'
                }
};

1行目で、このテーマに名前を与える。そして themeMap にあるコメント行の例を参考にして、自作テーマのファイルで置き換えるべきファイルを明示的に MetacatUI に指示する。書き方は:

path/originalFile.html : 'themes/' + theme + '/path/newFile.html'

註: CSS と画像ファイルは置き換えなくてもよい。

index.html を開く。下記の行を編集して、テーマ名(data-theme) と Metacat コンテキスト(data-metacat-context)を反映させる。
<script data-theme="default" data-metacat-context="metacat" id="loader" type="text/javascript" src="loader.js"></script>

9.2.1. デフォルトテーマの背景画像を変更する ¶

js/templates/app.html ファイルは背景画像用の <img> 要素を含んでいる。

<img src="" class="bg" id="bg_image" data-image-count="9" />

data-image-count 属性を、自作テーマ内で画像を反復させたい回数に変更する。すべてのビューて同じ背景画像を使うには、この値を 1 に変更する。

img/backgrounds に背景画像ファイルを格納する。ファイルの命名規則は bg1.jpg, bg2.jpg... とし、 1 から順に、上で指定した値まで数字を振る（つまり、 bg1.jpg, bg3.jpg ... のように数字を飛ばしてはいけない）。

9.2.2. 自作テーマの高度な設定 ¶

MetacatUI をもっとカスタマイズするために、上級ユーザは JavaScript ファイルを置き換えることもできる。

router.js ファイルを修正すると URL に応じて異なるビューを表示することができる。たとえば、ホームページがなく、代わりにユーザを DataCatalogView ビューに進ませるテーマの場合、 router.js を以下のように修正する。

// MetacatUI Router
// ----------------
var UIRouter = Backbone.Router.extend({
        routes: {
                ''                                      : 'routeToData',    // default is data search page
                'about'                     : 'renderAbout',  // about page
                'about(/:anchorId)'         : 'renderAbout',  // about page anchors
                'plans'                     : 'renderPlans',  // plans page
                'tools(/:anchorId)'         : 'renderTools',  // tools page
                'data(/search/:searchTerm)(/page/:page)' : 'renderData',    // data search page
                'view/*pid'                 : 'renderMetadata',    // metadata page
                'external(/*url)'           : 'renderExternal',    // renders the content of the given url in our UI
                'logout'                    : 'logout',    // logout the user
                'signup'                                : 'renderLdap',    // use ldapweb for registration
                'account(/:stage)'          : 'renderLdap',    // use ldapweb for different stages
                'share'                     : 'renderRegistry'    // registry page
        },

この例では、index バス '' の値を、 IndexView.js ビューを表示する renderIndex から、 data に飛ばして更に DataCatalogView ビューを表示する routeToData に変更した。

routeToData: function () {
        console.log('Called UIRouter.routeToData()');
        this.navigate("data", {trigger: true});
},
註: 修正した各ファイル用に、 js/themes/<yourtheme>/config.js 内の置き換えリストに何らかのビューや router.js を入れることを忘れないように。

Backbone.js についてより詳しくは、 www.backbonejs.org にある Backbone.js の文書を参照すること。

9.3. 独自スキンを作成する ¶

Deprecated since version 2.2.0: 新しい UI を開発するには MetacatUI テーマを使用すること。 Metacat の元々のスキン機能はまだ付属しておりメタデータの表示に使用できるが、Metacat 用のウェブクライアント構築のための優先的方法ではない。

MetacatUI テーマに切り替えるには、管理インタフェイスのスキン設定においてデフォルトスキンとして metacatui を選択する。

スキンは、検索結果の見た目を調整したり、Metacat によって提供されるウェブインタフェイスを表示するために、Metacat 内で使用されるものである。スキンは Metacat インスタンスを既存のウェブサイトにぴったり統合するために使うことができるし、まったく調整可能である。

独自の Metacat スキンを作成し調整するには、最初にスキンのディレクトリを作成しなければならない。一番簡単な方法は、既存のスキンディレクトリのひとつをコピーすることである。独自スキンの作成と導入の手順は以下の通りである。

既存のスキンディレクトリをコピーする。 “default” ディレクトリをコピーすることをお勧めする。

sudo cp -r <CONTEXT_DIR>/style/skins/default/ <CONTEXT_DIR>/style/skins/[yourSkin]/
ここで、 <CONTEXT_DIR> は Metacat アプリケーションが置かれているディレクトリであり、 [yourSkin] は作成するスキンの名前である。

[yourSkin] ディレクトリ内で、 default.xxx という名前のファイルをすべて yourSkin.xxx に変更する。以下のファイルを変更するべきである。

default.css
default.js
default.properties
default.properties.metadata.xml
default.xml

metacat.properties(<CONTEXT_DIR>/WEB_INF/metacat.properties) で、 skin.names プロパティに [yourSkin] を追加する。
Tomcat を再起動する。 Tomcat サーバの実行ユーザでログインして、

/etc/init.d/tomcat6 restart

Metacat の設定ユーティリティに進み、スキン設定を選ぶ。スキン一覧の中に作った独自スキンが選択肢として出現しているはずである。新しいスキンディレクトリ内のヘッダ・フッタ・css 等のファイルを変更してレイアウトや体裁を変更すること。

重要な注意点として、独自スキンは Metacat を再インストールしたりアップグレードするとすべて上書きされてしまう。 Metacat の再インストールやアップグレード前には自分のスキンをバックアップすることを忘れないように。

Navigation

9. テーマの修正と作成¶

9.1. デフォルトテーマを使ってみよう¶

9.2. テーマを自作する¶

9.2.1. デフォルトテーマの背景画像を変更する¶

9.2.2. 自作テーマの高度な設定¶

9.3. 独自スキンを作成する¶