８. JAIRO Cloud デザイン自由自在 2014年8月29日 v2.4　国立情報学研究所

全体の流れの中では・・・・ リポジトリの画面をデザインする方法を説明します。 画面デザインの 方法を説明します 準備 2

本日の講習会で行うこと ふきだしでどんなことをやるか核 このようなリポジトリの画面を デザインしていきます

JAIRO Cloud NetCommons WEKO

JAIRO Cloudの構成 JAIRO Cloud参加機関の管理領域 コンテンツ管理 WEBデザイン WEKO (コンテンツ管理) NetCommons (WEBデザイン) ここむずかしいので飛ばしていいかな？ このコマで実習する内容 ※ミドルウエア（データベース等） ※ OS ※　国立情報学研究所で管理 ※ ハードウエア

NetCommonsとJAIRO Cloud JAIRO Cloudでは、NetCommonsを使ってリポジトリのWebサイトを作成しています。（参考：http://www.netcommons.org/） NetCommonsのページはモジュールの組み合わせでできています イメージ 画面の例 Photo : Copyright © 2004 Gérald Anfossi モジュール 折り詰め箱 が NetCommonsのページ 寿司　 　　が モジュール　　　　※WEKOはモジュールの一種

NetCommons レイアウトと テーマの設定 1

ウェブページを、自分好みのデザインに変えましょう！ この章で実習すること NetCommonsでは、ページごとに、画面のレイアウトや テーマ（背景や枠の配色とデザイン）を変更することがで きます。 Before（イメージ） After（イメージ） ・画面レイアウト ・配色、デザイン 　　　を設定します ウェブページを、自分好みのデザインに変えましょう！

準備：JAIRO Cloudのログイン ① ログインをクリック ② ログインID, パスワードともに”admin” 準備手順であることをかく ② ログインID, パスワードともに”admin” ※ 本番環境での作業時は、NIIが送信する 　 環境提供メール内のIDとパスワードを使用 ページの最上部が admin | メッセージ(0) | 管理 | ログアウト | … に変化すれば、ログイン成功

１-１．レイアウト設定 選択したレイアウトに合わせて、ページの画面レイアウ トを変えることができます。 レイアウトの変更では、 ヘッダーカラム レイアウトの変更では、 各カラムの表示 / 非表示の 設定を行えます。 左サ イ ド カ ラ ム 右サ イ ド カ ラ ム センターカラム レイアウト （例）

実習：レイアウト設定 ① ページスタイルをクリック ② レイアウトタブをクリック ③ 3カラム+ヘッダ レイアウトをクリック レイアウトを 3カラム＋ヘッダ　　 に設定します ① ページスタイルをクリック ② レイアウトタブをクリック レイアウトを選ぶということを書く ③ 3カラム+ヘッダ レイアウトをクリック ④ 決定をクリック

１-２．テーマ設定 ページのテーマ（配色、デザイン）を変えることができ ます。 このほかにもいろいろなテーマが選べます

実習：テーマ設定 ① ページスタイルをクリック ② クラシックテーマを選択 ③ 決定をクリック テーマを「クラシック」に設定します テーマをえらぶということを書く ② クラシックテーマを選択 ③ 決定をクリック

達成目標完了で、NetCommonsを使う準備は完了(^^ ふりかえり 1 ここまでの達成目標 JAIRO Cloud、NetCommons、WEKOの関係の理解 JAIRO Cloudのログイン NetCommonsのページレイアウトとテーマを変更 Advanced レイアウトとテーマを自分好みのものに設定 Advanceはいらない？ 達成目標完了で、NetCommonsを使う準備は完了(^^

２つのモード とモジュール 基本４操作 2

この章で実習すること NetCommonsでは、モジュールを組み合わせて使うことによって、自由にウェブページを作ることができます。 この章では、モジュールを 使う際の４つの基本操作 について説明します。 モジュールの追加 モジュールの編集 モジュールのタイトル変更 モジュールの削除 モジュール Photo : Copyright © 2004 Gérald Anfossi 折り詰め箱 が NetCommonsのページ 寿司　 　 が モジュール

ウェブページの中身（モジュール）を追加していきましょう！ この章で実習すること Before（イメージ） After（イメージ） 追加した モジュール モジュールの追加など、 4つの基本操作を行います ウェブページの中身（モジュール）を追加していきましょう！

準備：通常モードとセッティングモード NetCommonsには2つのモードが存在します。 通常モード 一般ユーザが利用するためのモード じゅんびであることを書く セッティングモード モジュールを追加・編集・削除するためのモード ウェブページにモジュールを追加するためには、 セッティングモードへの切り替えが必要です。

① ログインした状態で画面右上のセッティングモードをクリック 準備：セッティングモードへの切り替え ① ログインした状態で画面右上のセッティングモードをクリック ページの最上部が admin | … | セッテイング終了 であればセッティングモードへの切り替えOK セッティングモード中はページの各所に 　　　　　　　　　　　　　　　　　　　　　が表示されます

２-１．モジュール基本操作1 : 追加 新しくモジュールを 追加します Before（イメージ） After（イメージ） 追加した

２-１．モジュール基本操作1 : 追加 ① セッティングモード中に からモジュールを選択 ② 決定をクリック ① セッティングモード中に　　　　　　　　　からモジュールを選択 　　 　　　　　　 　　　　　-> プルダウンの位置にモジュールが追加 ② 決定をクリック 新しくモジュールができました

２-２．モジュール基本操作2 : 編集 モジュールの内容を 編集します Before（イメージ） After（イメージ） 編集した

モジュールの中の文章や図などの編集ができました ２-２．モジュール基本操作2 : 編集 ① セッティングモード中に右上の編集をクリック -＞モジュールの内容の編集を開始 ② 内容を編集し、決定をクリック モジュールの中の文章や図などの編集ができました

参考：編集・削除リンクの表示形式 クラシック以外のテーマ（１章参照）では、モジュール の編集・削除リンクがレンチボタン・×ボタンに変更に なります。 レンチボタン・×ボタンはマウスオーバー時のみ表示さ れます。 クラシックテーマ クラシック以外のテーマ

２-３．モジュール基本操作3 : タイトル変更 モジュールの タイトルを編集します Before（イメージ） After（イメージ）

２-３．モジュール基本操作3 : タイトル変更 ① セッティングモード中にモジュールタイトルをダブルクリック タイトルを書き換えました。 -> モジュールのタイトル書き換え タイトルを書き換えました。

２-４．モジュール基本操作4 : 削除 Before（イメージ） After（イメージ） 削除する モジュール モジュールを 削除します

① セッティングモード中にモジュール右上の削除をクリック ２-４．モジュール基本操作4 : 削除 ① セッティングモード中にモジュール右上の削除をクリック ② 「OK」をクリック -＞モジュールが削除されます

実習 : ロゴの追加 「お知らせモジュール」というモジュールを 使って、ヘッダカラムにロゴを追加しましょう

実習 : ロゴの追加 ① ヘッダカラムにお知らせモジュールを追加 ② 画像の挿入アイコンをクリック ③ 参照ボタンから、ロゴ画像ファイルを選択 ④ 画像の挿入ボタンをクリック ※ 講習会では、デスクトップにあるWEKO講習会用データフォルダの 　 「講習会サンプルロゴ.jpg」を使用すること

応用編１：モジュールの移動 Before（イメージ） After（イメージ） 移動したモジュール モジュールの 位置を移動します

応用編１：モジュールの移動 モジュールのタイトルバーをドラッグ＆ドロップ 別カラムには移動できないため、次ページのコピー操作を行ってください

応用編２：モジュールのコピー Before（イメージ） After（イメージ） コピーしたモジュール モジュールを コピーします

応用編２：モジュールのコピー ① セッティングモード中に右上の編集をクリック ② ブロック操作をクリック ③ コピーしたいカラム（またはページ）を選択 ④ コピーをクリック

ブロックスタイル編集では、それぞれのモジュールのデザインを 応用編３：ブロックスタイル編集 ブロックスタイル編集では、それぞれのモジュールのデザインを 変更することができます ①モジュールの編集をクリック ブロックスタイル編集対象 この変どうする？ テーマ 配色 モジュールの幅 マージン（余白） ブロック名称　など・・・ その他モジュールの種類による ②ブロックスタイルタブを選択

達成目標完了でNetCommonsの基本操作はマスター(^^ ふりかえり 2 ここまでの達成目標 モジュールによってNetCommonsのウェブページが構築　　 できることを理解している 通常モードとセッティングモードの使い分けができる モジュールの追加・編集・タイトル変更・削除ができる Advanced モジュールの移動やコピーができる ブロックスタイル編集ができる 達成目標完了でNetCommonsの基本操作はマスター(^^

モジュールの 紹介と 便利な機能 3

ウェブページの中身（モジュール）のバリエーションを この章で実習すること NetCommonsでは、たくさんのモジュールの種類があります。この章では、特によく使われるモジュールについて、使い方を説明します。 Before（イメージ） After（イメージ） 追加した モジュール ウェブページの中身（モジュール）のバリエーションを 増やしましょう！

モジュールの種類 NetCommonsのモジュールは約20種類あります。 次のページから、よく使われるモジュールとその使い方を 紹介します。 JAIRO Cloudで使用できる主なモジュールの機能と名称 次のページから、よく使われるモジュールとその使い方を 紹介します。 モジュールの主な機能 モジュールの名称 テキストや画像の入力 お知らせ、FAQ サイト内の情報の集約 検索、新着情報、オンライン状況、カウンタ 外部サイトの情報の表示 RSS、iframe 情報の管理 カレンダー、リンクリスト、登録フォーム 情報の共有 掲示板、キャビネット リポジトリの構築 WEKO 言語設定 言語選択

テキスト、画像を配置するためのモジュール ３-１．お知らせモジュール テキスト、画像を配置するためのモジュール 汎用性 　: ★★★ 利用難度 : ★ お知らせ文章やロゴなどを表示できます

実習：お知らせモジュールの追加 ① 「モジュール追加」 ②文書編集モードで文章や画像を入れる ③「決定」ボタンで確定 プルダウンメニューで 「お知らせ」を選択 ②文書編集モードで文章や画像を入れる ③「決定」ボタンで確定

NetCommonsの更新情報を集約して表示するモジュール ３-２．新着情報モジュール NetCommonsの更新情報を集約して表示するモジュール 汎用性 　: ★★ 利用難度 : ★★ 新しく追加・更新した情報を まとめて表示することができます

③WEKOをチェックするとWEKOの更新情報（新しく登録したコンテンツなど）が新着として表示される 実習：新着情報モジュールの追加 ① 「モジュール追加」 プルダウンメニューで 「新着情報」を選択 ②「最新xx件を新着とする」にチェック ③WEKOをチェックするとWEKOの更新情報（新しく登録したコンテンツなど）が新着として表示される ④「決定」ボタンで確定

Webページを箇条書きにして表示するモジュール ３-３．リンクリストモジュール Webページを箇条書きにして表示するモジュール 汎用性 　: ★★ 利用難度 : ★ 関連するウェブサイトへの リンクを、箇条書きで表示できます

実習：リンクリストモジュールの追加 ① 右カラムに「リンクリスト」モジュールを追加 ② リストマーカーなどを選択し、「決定」ボタンをクリック ⇒ リンクリスト編集画面が表示されます ② リストマーカーなどを選択し、「決定」ボタンをクリック ③ 「リンク追加」をクリック 　⇒ リンク情報追加ダイアログが表示されます ④貴機関のURLを入力し、タイトルが自動で表示されたことを確認 してから「決定」ボタンをクリック リンク情報追加 ダイアログが 表示される ① ③ ② ④

応用編：RSSモジュール 汎用性 : ★★ 利用難度 : ★★ RSSで配信された情報（外部ウェブサイトの 記事の見出しなど）を、読み込んで表示するモジュール 汎用性 　: ★★ 利用難度 : ★★ RSS　 で配信された情報を 読み込んで表示できます

応用編：RSSモジュールの追加 ① 「モジュール追加」 ②RSSを受信したいURLを入力 ③「決定」ボタンで確定 プルダウンメニューで

参考：他のモジュールについて知りたいときは この章で紹介していないモジュールについて、詳しい機能や使い方は、以下のURLを参照してください NetCommonsユーザーマニュアル 　7　各モジュールについて http://manual.netcommons.org/%E3%83%A6%E3%83%BC%E3%82%B6%E3%83%BC%E3%83%9E%E3%83%8B%E3%83%A5%E3%82%A2%E3%83%AB/7_%E5%90%84%E3%83%A2%E3%82%B8%E3%83%A5%E3%83%BC%E3%83%AB%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6

達成目標完了で、よく使われるモジュールの基本操作はマスター(^^ ふりかえり 3 ここまでの達成目標 よく使われるモジュールの追加・編集ができる Advanced RSSモジュールの使い方を試してみる ３章で紹介したモジュール以外の追加・編集を試してみる 達成目標完了で、よく使われるモジュールの基本操作はマスター(^^

まとめ 機関の担当者はコンテンツ管理とWEBデザインを行う NetCommonsのページはモジュールの組み合わせ モジュール基本4操作 : 追加 削除 編集 タイトル変更 貴機関にふさわしい coolなページを作り上げましょう！ Photo : Copyright © 2004 Gérald Anfossi

補足情報 4

他機関の構築公開済みJAIRO Cloud 作例 総合研究大学院機関リポジトリ　 http://ir.soken.ac.jp/ 他機関の構築公開済みJAIRO Cloud https://community.repo.nii.ac.jp/link/

NetCommonsの詳しい情報を知りたいときは http://manual.netcommons.org/%E3%83%A6%E3%83%BC%E3%82%B6%E3%83%BC%E3%83%9E%E3%83%8B%E3%83%A5%E3%82%A2%E3%83%AB

NetCommonsの使い方を試したいときは JAIRO Cloudのテストサイトで、NetCommonsの使い方を自由にお試しいただけます。 JAIRO Cloudテストサイト 　※　「1.ユーザ登録マニュアル」で設定したログインIDと 　　　パスワードで、テストサイトにもログインできます。 https://test.repo.nii.ac.jp/

メニュー モジュールと ページの３操作 参考

この章で説明すること NetCommonsでは、ウェブサイトのページの数を、増やしたり減らしたりすることができます。 この章では、ページに関する３つの基本操作 　　　　　　　　　　　　　　について説明します。 Photo : Copyright © 2004 Gérald Anfossi New！ New！ 折り詰め箱 が NetCommonsのページ 寿司　 　 が モジュール ページの追加 ページの名前の変更 ページの削除

ページの数を増やして、いろいろな情報を載せられる この章で説明すること Before（イメージ） After（イメージ） New！ ウェブサイト内のページの追加・削除をします ページの数を増やして、いろいろな情報を載せられる スペースを増やしましょう！

ページの追加＆削除を行うには、メニューモジュールが必要です 準備：メニューモジュールを追加する ページの追加＆削除を行うには、メニューモジュールが必要です ① セッティングモード中に　　　　　　　　　からメニューを選択 　　 　　　　　　 　　-> プルダウンの位置にモジュールが追加されます メニューモジュールを追加する方法 医めー図 メニューモジュールができました

ページ基本操作1 : 追加 ①ページを追加したい場所を選択してページ追加をクリック メニューモジュールで、ページの追加を行います メニューモジュールを追加する方法 医めー図 ①ページを追加したい場所を選択してページ追加をクリック 新しいページができました

ページ基本操作2 : タイトル変更 ①メニューモジュールの編集をクリック ②ページ名をクリックしてタイトルを入力 ページのタイトルを変更できました

ページ基本3操作 : 削除 ①メニューモジュールの編集をクリック ②ゴミ箱のアイコンをクリック ページを削除できました

やってしまった場合は、NIIが復旧作業のお手伝いします。 よくある作業ミス メニューモジュールよりトップページを削除すると、作成 したサイトが閲覧できなくなってしまいます。 注意 やってしまった場合は、NIIが復旧作業のお手伝いします。

参考：NetCommons ページの種類 パブリックスペース 誰でも閲覧可能 admin（ユーザー名）のお部屋 自分のみ閲覧可能 グループスペース 自分が参加しているグループメンバが閲覧可能 ユーザやグループの作成は、管理画面 （https://idp.repo.nii.ac.jp/admin/menu/xxx（ホスト名）/）から行え ます。 閲覧権限にちがいがあるということえおかく

NetCommonsのページはモジュールの組み合わせ ページの中身を編集するには・・・ 追加したページの編集 ２章で紹介した手順で、モジュールの操作をすればOK（^ ^ NetCommonsのページはモジュールの組み合わせ Photo : Copyright © 2004 Gérald Anfossi 折り詰め箱 が NetCommonsのページ 寿司　 　 が モジュール モジュール