無料ソフト「NetCommons」で作る学校ホームページ【2・3限目】

無料ソフト「NetCommons」で作る学校ホームページ【2・3限目】
学校ホームページとしてのページ内容作成編
http://opensource-workshop.jp 1

講師
永原篤（@nagasheep）
•株式会社オープンソース・ワークショップ代表取締役
•NPO法人コモンズネット理事
（NetCommonsを普及促進するNPO）
•Twitter：@nagasheep
•Facebook：atsushi.nagahara

ライセンス・ソフトウェアについて
•当資料中で記載する「NetCommons」は[大学共同利用機関]情報・システム研究機構の登録商標です。
•画像編集にGIMP（ギンプ）というオープンソース画像編集ソフトウェアを使います。
http://www.gimp.org/
•一部、アイコンなどをCreativeCommonsライセンスでOpenClipArtサイトよりダウンロードして使用しています。
https://openclipart.org/

ご参加の皆様に質問させてください
いつでも良いので、チャット欄にコメントいただけるとうれしいです。
1.この授業を受講しようとしたきっかけ。
2.この授業をどうやって探されたか？
3.この授業に期待すること。
4.NetCommonsを使ってて、わからなかったり、うまく行かなかった経験のある方

ホームページを作ってみよう
•この授業では、ホームページを作ります。
•ホームページと言っても、さまざまなものがありますが、この授業では「学校ホームページ」をイメージして作ります。

事例を見てみよう
佐野日本大学学園様のNetCommonsホームページ事例です。
佐野日本大学中等教育学校
http://ss.sanonihon-u-h.ed.jp/
佐野日本大学高等学校 http://high.sanonihon-u-h.ed.jp/

イメージ：最終的な完成図

NetCommonsとは
•NetCommonsとはホームページ作成用ソフトウェアです。
•開発、提供は国立情報学研究所が行っています。
•ライセンスはオープンソースのFreeBSDライセンス
•無料でダウンロードすることができます。

NetCommonsの特徴
•ホームページ作成用ソフトウェア（NetCommons）はサーバにインストールします。
•ホームページの閲覧、編集はブラウザのみでOK
•ID、パスワードを入力すれば、どこからでも編集可能
•災害や緊急時にも、どこからでも編集でき、情報を伝えることができます。
•ルームと呼ばれるグループを作り、ユーザIDごとに権限管理が行うグループウェアとして使用できます。

ブラウザ
【図解】NetCommonsの特徴
10
自分のPCなど
インターネットにつながるPC
ホームページ作成用
ソフトウェア
（NetCommons）
ホームページの記事
参照
サーバ
（レンタルサーバなど）
サーバ
記入
http://opensource-workshop.jp

1限目の訂正内容
自分で実践する際に見直してください。

1限目の訂正内容
1.メニュー項目がページによって異なる部分があったため、資料などを修正してアップロードしています。
2.資料のダウンロードページ
https://opensource- workshop.jp/download/seminar/
3.IE11パッチについて
4.php.iniのサーバ時間設定について

NetCommons IE11パッチ
•NetCommons2.4.2.0はIE11では一部、動作しません。（もしかするとIE10も）
•そのため、パッチを当ててから、インストールします。
http://www.netcommons.org/
＞ヘルプデスク> バグレポート一覧から、
2420-1 のファイルをダウンロードする。
（TemplatesMainHeader.zip）

NetCommons IE11パッチ
•TemplatesMainHeader.zip を展開し、出てきたwebappフォルダを展開した NetCommons のwebappフォルダに上書きする。
•実際には、以下の一つのファイルが上書きます。
•webapp/templates/main/header.html

•パッチを当てずに、IE11でインストールした場合、メニューが正常に機能しないなど、不具合がでます。
•NetCommonsインストールの章にあった「NetCommons IE11パッチ」ファイルをインストールしたNetCommonsに上書きし、NetCommons をインストールしたフォルダの webapp/templates_cの中にあるファイルをすべて削除します。
•ファイル名が% で始まるファイルがたくさんあります。
•これらは、画面のプログラムですが、削除しても、必要に応じて自動で作成されるので大丈夫です。
IE11

C:¥NetCommons¥php¥php.iniを編集
[Date]
; Defines the default timezoneused by the date functions
; http://php.net/date.timezone
;date.timezone= Europe/Berlin
date.timezone= Asia/Tokyo
date.timezoneが Asia/Tokyo以外の場合、 Asia/Tokyoを指定する。
先頭の;はコメント
カレンダーで10/26が2つあった原因は、ドイツでは10/26がサマータイムの切り替え日になっていたからでした。

共通部分の設計
全ページに共通する内容を考えよう

共通部分とは？
NetCommonsには、「カラム」というものがあります。
ヘッダーカラム、左カラム、右カラムが共通の内容を表示するカラムになります。
ページ独自のコンテンツを表示するのはメインカラムになります。
左はシステム管理のレイアウト設定で、ここで設定したものが標準になります。
レイアウト設定は各ページで変更できます。

共通部分の設計
ヘッダーロゴ
横型メニュー（プルダウンつき）
バナー
カウンター
縦型メニュー
所在地
ここに各ページの
メインコンテンツ
【ヘッダーカラム】
学校ロゴを配置
横型メニューを配置
【左カラム】
バナー、縦型メニュー、カウンター、所在地情報を配置

ヘッダーの作成
ヘッダーの内容を作ってみよう

ヘッダーから不用な部分を削除
ヘッダーから不要な部分を削除します。
最初からあったロゴと検索をいったん削除しましょう。

ヘッダーから不用な部分を削除
ヘッダーの「モジュール追加」から「お知らせ」を選択します。
「お知らせ」とは、文字や画像を貼り付けられる枠のことです。

ロゴ画像の挿入
「お知らせ」モジュールで画像の挿入アイコン＞画像の選択＞決定でロゴを追加

ロゴ画像の挿入

画面幅の固定
NetCommonsでは、ブロック単位で幅を設定する方法はあるのですが、画面の全体幅を設定する方法が用意されていません。
ブロックの幅を設定し忘れていると、画面が横に伸びることがあります。
そこで、ヘッダーのバナーの下にスタイルシート（CSS）を記載して、画面の全体幅を固定します。
<style type="text/css">

</style>

メニューの追加
メニューのテンプレートは「jq_gnavi_pldwn_blue」を選択します。

メニューの追加
メニューとロゴの入れ替え
メニューとロゴの隙間をなくす

メニューとロゴの入れ替え
マウスでドラッグ＆ドロップで入れ替えます。

メニューとロゴの位置調整
メニューブロックを編集＞ブロックスタイル＞一般でマージンを 0にして決定

ロゴからトップページへのリンク
お知らせモジュールを編集モードにし、リンクを設定したい画像をクリックしてから、リンクアイコンをクリック
リンク先URLを設定して「リンクの挿入」＞お知らせモジュールの「決定」

左カラムの作成
左カラムの内容を作ってみよう

バナーエリアの作成
リンクの挿入で「ターゲット」を「新規ウィンドウ」にしておく。

ロゴとロゴの間隔を少し空けたい。
ロゴ画像のプロパティを開き、余白で調整します。

ロゴのブロックでは、ブロックの枠線を消したい。
ブロックの編集＞ブロックスタイル＞テーマ＞シンプルを選択して「決定」

カウンターの作成
左カラムの「モジュール追加」から、「カウンタ」を選択する。
位置の変更
カウンタブロックの編集で表示桁数などの設定を変更
ブロックスタイルをシンプルに。

アクセスブロックの作成
左カラムの「モジュール追加」から、「お知らせ」を選択する。
位置の変更
ブロックスタイルを点線＞点線パネル(スカイ)に。

アクセスブロックの作成
WYSIWYGエディタで住所を記載
「アクセス情報はこちら」の部分を選択し、リンクの設定
リンク先はアクセスページのURL

トップページの設計
各ページに配置する内容を考えよう

トップページの設計
ヘッダー
左
【特筆情報】
特にアピールしたい内容があれば記載する。
【新着情報】
サイト内の新着情報を自動的に表示
【学校だより】
授業の様子や学校からのお知らせを記載
新着情報
学校だより
特筆情報

トップページの作成
トップページに必要な機能を配置しよう

トップページの作成–新着情報
トップページに「新着情報」を配置
編集＞表示方法変更より、以下の項目を設定する。
項目
設定値
表示方法
フラットで表示する
最新ｘｘ件を新着とする
選択
表示項目
件名、ルーム名、登録日
RSS配信
する
表示モジュール
日誌

トップページの作成–学校だより
トップページに「日誌」を配置
編集＞一覧表示＞編集より、以下の項目を設定する。
設定ができたら、何件か記事を登録してみる。
項目
設定値
日誌タイトル
学校だより
記事投稿権限
主担
投票有無
あり
コメント投稿有無
なし
Twitter,Facebookアイコン表示有無
あり
New記号表示期間
7日間

トップページ
完成したトップページ
「特筆事項」は他のページの記事を書いてから作成します。

学校紹介カテゴリの作成
学校紹介の各ページに必要な機能を配置しよう

学校紹介カテゴリの設計
ヘッダー
左
【学校紹介】
校長先生から
の言葉
校長先生の写真
ヘッダー
左
【本校の特徴】
•学校の特徴
•箇条書き
ヘッダー
左
【学校生活】
•表を使った学校生活の案内
学校紹介
本校の特徴
学校生活

学校紹介
お知らせモジュールを使用
記事を書く。
写真は右寄せ＆写真の下に名前を表示したい。
縦にセルが2つある表を作成
上のセルに写真を挿入
下のセルに名前を挿入
表プロパティで罫線を削除
セルプロパティで罫線を削除
セルプロパティで名前を真ん中よせ
表を選択して右寄せ

学校紹介–本校の特徴
WYSIWYGエディタの箇条書き機能を使って、箇条書きをしてみる。

学校紹介–学校生活
WYSIWYGエディタの表機能を使ってみる。
表を追加（2列×5行）
タイトル行に「月」、「行事」を入力
月を記入
行が足りないので、行の追加
内容の記述
表の幅調整
表全体を選択して、セルの余白を5px
タイトル行の背景色
行事列の幅調整

行事予定ページの作成
行事予定ページにカレンダー機能を配置

行事予定ページの設計
ヘッダー
左
【行事予定】
カレンダー機能
行事予定
行事予定ページでは、カレンダー表示で行事予定を記載します。
画面を表示すると、当月が最初に表示されるので、次にどういった行事があるのか、探しやすくなっています。
また、カレンダーをめくって、他の月の予定も見ることができるので、先の日程の行事も確認できます。

行事予定
カレンダモジュールを使用
表示方法は月表示(拡大)を選択

メール設定
メールサーバの設定

メール設定
管理＞システム管理＞メール設定で
送信者メールアドレス、メール送信方式など設定してください。

クラブ活動ページの作成
クラブ活動ページに日誌機能を配置

クラブ活動ページの設計
ヘッダー
左
【クラブ活動】
ブログ機能
クラブ活動
8/17
記事・・記事・・・
記事・・
写真
クラブ活動ページでは、各クラブに記事の投稿権限を持つIDを発行する。
記事が投稿されたら、ホームページの管理者にメールが届く。
ホームページの管理者は内容を確認し、承認を行うことで、記事が公開される。

クラブ活動ページの作成
日誌モジュールを使用
新しい日誌を作成（クラブ活動）
カテゴリーにクラブ名を登録
【以下は承認権限用の設定】
記事投稿権限は「一般」までチェック
日誌投稿の承認設定で「主担の承認が必要」を選択
日誌投稿承認完了通知設定で「メールで通知する」を選択

クラブ活動を記述するユーザの追加
コントロールパネルの「会員管理」から「会員登録」
権限は「一般」
パブリックスペースに「一般」権限を付与

クラブ活動の記事を記載する
サッカー部のIDでログイン
クラブ活動ページに記事を記載
「未承認」記事となる。

クラブ活動の記事の承認メール
記事が記入されたら、左記のメールが送られます。
承認者はメールのURLをクリックすることで、記事の詳細画面を開くことができます。

クラブ活動の記事の承認メール
記事の内容を確認して、承認などを行います。
承認された場合、記事の投稿者に承認完了通知がメールされます。
記事が承認されると同時に、トップページにある新着情報一覧にタイトルが表示され、記事へのリンクが張られます。

トップページの特記事項
特記記事を記載してリンク設定する

トップページの特記事項
「お知らせ」モジュールを配置
記事の記入
リンクの設定
ブロックスタイルの変更

進路情報ページの作成
Excelなどで作成したグラフを貼り付け

Excelで作成したグラフの画像化
Excelでグラフを作成します。
クリップボードに画面をキャプチャして、必要な部分を切り出し、画像として保存します。

グラフ画像の貼り付け
Excelから作成した画像を貼り付けた状態。
画像の貼り付けは「お知らせモジュール」以外にも、WYSIWYGエディタの部分で可能。

入学案内ページの作成
キャビネット機能を使って資料の共有

入学案内ページの設計
入学案内ページでは、キャビネット機能を使って資料を配布します。
また、資料の上に説明を加えます。
ヘッダー
左
【入学案内】
キャビネット機能
入学案内

入学案内ページ–資料の共有
お知らせモジュールとキャビネットモジュールを使用
キャビネットモジュールの編集で表示する項目の設定
1ページに複数の機能（モジュール）を配置する例です。

アクセスページの作成
GoogleMapの埋め込み

アクセスページの設計
アクセスページでは、Googleマップと連動して地図を表示します。
ヘッダー
左
【アクセス】
GoogleMap
アクセス

Google mapの貼り付け
Google mapで地図を埋め込む＞カスタムサイズで大きさの調整。今回は幅690px
IframeタグをWYSIWYGのHTML タブに貼り付け
Iframeタグ

アクセスページ
地図の上にお知らせモジュールでアクセス情報を記述

完成！
ぜひ皆様も試してくださいね。

次回予告

無料ソフト「NetCommons」で作る
学校ホームページ【TIPS編】(仮)
2014年12月7日(日)13:00～14:00を予定
次回予告

お知らせ

スクー＆全国各地オフラインセミナー
オフラインセミナー
・聴講したセミナーをその場で他の参加者
とも共有し深めたい
・もっと質問があるが時間になってしまった
・オンラインでは質問がしにくい
オンラインセミナー
・遠隔地なので会場まで行けない
・自宅／オフィスを離れられない
・当日は他の予定もある
セミナーの流れ
・講義担当会場よりのSchoo授業
・授業終了後、講義会場にチャットで質問
・各会場でセミナーの続き
（各会場をSkypeで繋ぐ事も可）
大阪
会場
北海道
会場
名古屋
会場
九州
会場
Schoo
で配信
広島
会場
東京
会場Ⅱ
東京
会場
Schoo授業を全国に展開
オフラインとオンラインを融合

株式会社オープンソース・ワークショップでは、この授業『無料ソフト「NetCommons」で作る学校ホームページ』をオフラインセミナーとして開催します。
聞くだけなら半日、ワークショップなら1日弱のコースになると思います。
地方出張セミナー

呼んでいただければお伺いします。
授業料（講師費用）は不要です（無料です）
交通費は東京から往復1万円以上の場合は応相談（日帰りできない場合は宿泊費も）
⇒ 複数の学校様が集まる会なら交通費もこちら持ちもありかも。
⇒ それ以外なら出して欲しいけど応相談
地方出張セミナー

ネタ募集

今回の授業が終わった後
次にやって欲しいネタはありますか？
•WYSIWYGやモジュール設定の小ネタとか
•バナーなどのアドオンモジュールとか
•各クラブでユーザ権限を分けるとか
•ログインして使うグループウェアとか
•緊急連絡網サイトの使い方とか
•CSSでデザインカスタマイズとか
•動画サイトとか
ネタ募集

お問い合わせ先

お問い合わせなど
株式会社オープンソース・ワークショップ
http://opensource-workshop.jp
お問い合わせページ
もしくは
メール：info@opensource-workshop.jp
もしくは
永原のソーシャルアカウントまで。
お気軽にどうぞ（^-^）

無料ソフト「NetCommons」で作る学校ホームページ【2・3限目】

Recommandé

Recommandé

Contenu connexe

Similaire à 無料ソフト「NetCommons」で作る学校ホームページ【2・3限目】

Similaire à 無料ソフト「NetCommons」で作る学校ホームページ【2・3限目】 (20)

Plus de 株式会社オープンソース・ワークショップ

Plus de 株式会社オープンソース・ワークショップ (17)

Dernier

Dernier (8)