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

Presentation on theme: "８. JAIRO Cloud デザイン自由自在 2014年8月29日 v2.4　国立情報学研究所."— Presentation transcript:

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

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

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

4 JAIRO Cloud NetCommons WEKO

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

48 参考：他のモジュールについて知りたいときは
この章で紹介していないモジュールについて、詳しい機能や使い方は、以下のURLを参照してください NetCommonsユーザーマニュアル 　7　各モジュールについて

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

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

51 補足情報 4

52 他機関の構築公開済みJAIRO Cloud
作例 総合研究大学院機関リポジトリ　 他機関の構築公開済みJAIRO Cloud

53 NetCommonsの詳しい情報を知りたいときは

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

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

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

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

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

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

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

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

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

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

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