NetCommons メニューデザイン・パーツ
使用説明書
2010-12-14 版
O
pen
S
ource
W
ork
S
hop
【目次】 I. はじめに ... 1 1. 改定履歴 ... 1 2. NetCommons について ... 1 3. NetCommons メニューデザイン・パーツとは？ ... 1 4. 必要なスキル ... 1 5. この資料の目的 ... 2 6. 商標 ... 2 7. ライセンス ... 2 8. 免責 ... 2 9. お問合せ先 ... 2 II. NetCommons メニューデザイン・パーツ使用方法 ... 3 1. デザインを選ぶ ... 3 2. ダウンロードする ... 3 3. ファイルの説明 ... 4 4. 自分の PC で動かしてみる ... 4 5. お知らせモジュールの準備 ... 4 6. HTML、CSS、JavaScript、NetCommons に精通している方へ ... 5 7. お知らせモジュールにアップロード ... 6 8. 画像ファイルのパスを記録 ... 7 9. サンプルの HTML を開く ... 8 10. 編集用の HTML を編集する ... 9 11. お知らせモジュールに貼り付ける ... 10 12. 貼り付け後のメニュー表示 ... 11 13. 文字（titles）の編集 ... 11 14. リンク先アドレス（urls）の記述 ... 12 15. リンク方法（targets）の記述 ... 12 16. テスト ... 13 17. xcf ファイル ... 13 18. その他 ... 13I. はじめに 1. 改定履歴 2010-12-08：初版 2. NetCommons について NetCommons は大学共同利用機関法人「情報・システム研究機構」に属する国立情報学研 究所が開発するオープンソースの情報共有基盤システムです。 NetCommons 公式サイト http://www.netcommons.org NetCommons は非常に使いやすく、便利なオープンソースの情報共有システムです。 ホームページからブログ、スケジュール共有やファイル共有などのグループウェア、企 業内の様々な業務システムとして使用できます。 3. NetCommons メニューデザイン・パーツとは？ この便利な NetCommons、使っていると、もっとメニューのデザインパターンがあれば良 いのに、と思ってしまうことがあります。 株式会社オープンソース・ワークショップでは、そのような声にお応えして、NetCommons で使用できるデザインパターンを配布します。 ただし、NetCommons のカスタマイズではなく、SaaS（ASP）などで提供されている NetCommons でも使用できるように、メニューのテンプレートではなく、デザインパーツと して提供させて頂きます。 ※ ここで提供しているデザインパーツは NetCommons2 を想定しています。 4. 必要なスキル HTML、スタイルシート（CSS）、JavaScript の基礎知識を必要とします。
O
pen
S
ource
W
ork
S
hop
5. この資料の目的 この「NetCommons メニューデザイン・パーツ使用説明」は、株式会社オープンソース・ ワークショップが提供する、NetCommons システムで使用できるメニューデザインの使い方 を説明するものです。 6. 商標 NetCommons は、大学共同利用機関法人「情報・システム研究機構」の登録商標です。 詳しくは NetCommons 公式サイトよりご確認ください。 7. ライセンス NetCommons2 は FreeBSD ライセンスで公開されています。 詳しくは NetCommons 公式サイトよりご確認ください。 また、株式会社オープンソース・ワークショップが提供する NetCommons デザインパーツ も NetCommons2 のライセンスと同様、FreeBSD ライセンスで提供します。 8. 免責 株式会社オープンソース・ワークショップでは、当資料、および NetCommons メニューデ ザイン・パーツを使用したことで生じたいかなる損害も、その原因の如何を問わず、一切 の責任を負いません。 ご使用は自己責任の下でお願い致します。 9. お問合せ先 株式会社オープンソース・ワークショップ 担当 ：永原 篤 e-mail ： [email protected] WEB ： http://opensource-workshop.jpII. NetCommons メニューデザイン・パーツ使用方法 1. デザインを選ぶ 株式会社オープンソース・ワークショップの WEB サイトより、使いたいメニューデザイン を選びます。 ここでは、「menu0B_Blue3」というデザインをサンプルに見ていきましょう。 「menu0B_Blue3」は水色のバーでオンマウス時には濃い青になるメニューデザインです。 2. ダウンロードする 使いたいメニューデザインをダウンロードします。 ダウンロードしたファイルは zip 形式で圧縮されていますので、展開します。 以下は展開した後のフォルダの内容です。 フォルダの中の部品はメニューデザインによって異なります。
O
pen
S
ource
W
ork
S
hop
3. ファイルの説明 フォルダの中の部品はメニューデザインによって異なります。 以下にファイル一覧の例を記載します。 【必ずあるファイル】 readme.txt 各画像の説明が書かれたファイルです。 test.html 実行すると、自分の PC でメニューの動きを確認できます。 【デザイン部品のファイル】 デザイン部品のファイルはデザインごとに異なります。 以下はサンプルの「menu0B_Blue3」の場合です。 menu0B_Blue3_1.gif 通常のメニュー画像 menu0B_Blue3_2.gif オンマウス時のメニュー画像 menu0B_Blue3_back_l.gif 左端の画像 menu0B_Blue3_back_r.gif 右端の画像 4. 自分の PC で動かしてみる test.html を実行してみる。 test.html をダブルクリックすることで、実行できます。 自分の欲しいデザインや動きかなど、確認してください。 5. お知らせモジュールの準備 このメニューはお知らせモジュールに貼り付けて使用します。 そのため、まずはメニューを置きたい場所にお知らせモジュールを配置します。メニューデザインで使用するお知らせモジュールの推奨設定は以下の通りです。 設定項目 設定値 テーマ シンプル 一般：ブロック名称 [空白] 一般：最小の広さ 使用する画像の幅とメニューの数を計算して設定 一般：マージン 上下左右のマージンをページのデザインに合わせて適切 に設定します。 6. HTML、CSS、JavaScript、NetCommons に精通している方へ このメニューデザインの使用方法は、お知らせモジュールに貼り付けた画像を使用して、 JavaScript、CSS でメニューの動きを実現しているものです。 この項以降の説明はかなり細かく書いている部分もありますので、必要な部分を適宜お読 みください。
O
pen
S
ource
W
ork
S
hop
7. お知らせモジュールにアップロード まずは、お知らせモジュールにデザインパーツの画像をすべてアップロードします。 アップロードできたら、保存しましょう。 ※ パブリックスペースにアップロードしてください。 ※ パブリックスペース以外にアップロードした画像はキャッシュされないことがあるた め、メニューにマウスを持って行った際に「ちらつき」が生じる場合があります。 ［アップロードした状態］ ［保存した状態］8. 画像ファイルのパスを記録 お知らせモジュールを編集で開き、画像ファイルのパスを記録 アップロードした各画像ファイルのパスを記録しておきます。 ここでは、各画像が以下のパスになっていることがわかります。 ［通常のメニュー画像］ http://localhost/?action=common_download_main&upload_id=12 ［オンマウス時のメニュー画像］ http://localhost/?action=common_download_main&upload_id=13 ［左端の画像］ http://localhost/?action=common_download_main&upload_id=14 ［右端の画像］ http://localhost/?action=common_download_main&upload_id=15
O
pen
S
ource
W
ork
S
hop
9. サンプルの HTML を開く サンプルとして付けている HTML をメモ帳などで開きます。 アップロードするために編集・保存するため、必要ならば html ファイルをコピーしてバッ クアップを取ります。 以下、赤枠内が画像のパスになっています。 以下は「menu0B_Blue3」の場合です。画像のパスが記載されている場所はデザインによっ て異なります。 画像ファイル の指定 文字の色や大き さなどの指定 バナー上の文字や リンク先の指定10. 編集用の HTML を編集する 先ほど開いた html ファイルの画像のパスを編集します。 Image().src = "" の "" の中を編集します。 元の画像ファイルの名前と対応した行を編集してください。 ［画像のパスを編集した状態］ 画像ファイル の指定
O
pen
S
ource
W
ork
S
hop
11. お知らせモジュールに貼り付ける 画像のパスが編集できたら、お知らせモジュールの HTML 編集エリアに貼り付けます。 貼り付ける部分は画像の指定を行っている<div>タグの範囲です。 以下の枠内を貼り付けます。 【貼り付けに関する注意点】 貼り付けは以下の赤枠の中だけです。 お知らせモジュールの「HTML」タブに貼り付けます。 「HTML」タブに貼り付けた後は「決定」をクリックします。 「プレビュー」、「編集」タブを開いてはいけません。（対応できていません） 「決定」後にブラウザをリロードすると、メニューが表示されます。12. 貼り付け後のメニュー表示 貼り付けた後、ブラウザをリロードします。 ここまでで、以下のようにメニューが表示されます。 ※ お知らせモジュールの編集モードから戻った際は、ブラウザをリロードする必要があ ります。 ※ これは、このメニューは JavaScript を使用して出力されるのですが、編集モードから 戻った際には、お知らせモジュールに埋め込んだ JavaScript が実行されないためです。 13. 文字（titles）の編集 リンク先のページ名などがわかるように、メニュー上の文字を編集します。 メニュー上の文字は以下の var titles の後の部分を編集します。 "" の中の文字を編集します。指定する数を増やす場合は , で区切って増やします。 文字の区切りを増やす場合は、リンク先（urls）、リンク方法（targets）も同じ数になる ように増やします。 リンク先の文 字の指定
O
pen
S
ource
W
ork
S
hop
14. リンク先アドレス（urls）の記述 メニューの画像ファイルに対応するように、リンク先を記述します。 リンク先は以下の var urls の後の部分を編集します。 "" の中の文字を編集します。指定する数を増やす場合は , で区切って増やします。 リンク先の区切りを増やす場合は、メニューの文字（titles）、リンク方法（targets）も 同じ数になるように増やします。 15. リンク方法（targets）の記述 メニューの画像ファイルに対応するように、リンク方法を記述します。 リンク方法は以下の var targets の後の部分を編集します。 "" の中の文字を編集します。指定する数を増やす場合は , で区切って増やします。 通常は "_self"、新しいウィンドウにするには、"_blank" を指定します。 リンク方法の区切りを増やす場合は、メニューの文字（titles）、リンク先（urls）も同じ 数になるように増やします。 リンク先のアド レスの指定 リンク方法の 指定16. テスト 一通りの動きをテストして完成です。 17. xcf ファイル データ中に拡張子が xcf のファイルがあります。 ここでのデザインは、GIMP という GPL ライセンスの画像編集ソフトで作成しています。 xcf という拡張子は GIMP のファイルです。 GIMP の詳細やダウンロードは以下のサイトを参照してください。 http://www.gimp.org/ もちろん、xcf ファイルを使用して、オリジナルのデザインを作成して頂くことも OK です。 18. その他 画像の大きさを変更したり、動きを変えてみたり、画像を編集したり CSS や JavaScript を変更したりすることで、いろいろな使い方ができると思います。 ぜひ素晴らしいデザインを作る足しにしてください。
