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