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

無料ソフト「NetCommons」で作る学校ホームページ【１限目】
インストール＆ページ枠作成編
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.NetCommonsの存在を知っている方
2.NetCommonsを使った（記事を書いたりした）ことがある方
3.NetCommonsをインストールしたことがある方
4.NetCommonsを使ってて、わからなかったり、うまく行かなかった経験のある方

1限目の内容
•学校ホームページを作ってみよう
•どんな学校ホームページができるか、事例を見てみよう
•自分のPC環境を準備しよう（Windows編）
•自分のPCにNetCommonsをインストールしてみよう
•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の特徴
11
自分のPCなど
インターネットにつながるPC
ホームページ作成用
ソフトウェア
（NetCommons）
ホームページの記事
参照
サーバ
（レンタルサーバなど）
サーバ
記入
http://opensource-workshop.jp

サーバの準備
自分のPCをサーバにしてみよう

本日のサーバについて
•サーバはまだない想定なので、自分のパソコンをサーバにします。
•自分のパソコンをサーバとして動かすために、「環境設定」ということをします。
•ホームページを公開するためにサーバにアップロードする方法は別途、学びます。
•レンタルサーバなどにNetCommonsをインストールする場合は、このサーバ設定は不要です。

ブラウザ
【図解】本日のサーバについて
自分のPC
サーバ用設定
XAMPP＋NetCommons
ホームページの記事
参照
今回はこのXAMPP部分の
準備を環境設定と呼びます。
サーバへアップロード（別の回）

XAMPP「ザンプ」とは？
•XAMPPは「ザンプ」と読みます。
•NetCommonsを動かすために必要なサーバ用ソフトウェアをパッケージにしたもの。
•具体的にはWebサーバ（Apache）、DBサーバ（MySQL）、プログラム言語（PHP）などが入っています。
•https://www.apachefriends.org/jp/

XAMPPダウンロード
https://www.apachefriends.org/jp/index.html
「その他のバージョンについてはこちらをクリックしてください。」をクリック

「More Downloads」
をクリック

「XAMPPWindows」
をクリック

文字がすべて表示されていないので、難しいのですが、
「xampp-portable-win32-1.8.3-4-VC11.zip」をクリック
マウスをもって行くと、ファイル名が表示されます。

XAMPPの展開

XAMPP展開後

XAMPPフォルダ以下を全選択

C:¥NetCommonsへ移動
C:¥NetCommonsフォルダを作成してから移動します。

XAMPPのセットアップ
XAMPPを配置したパス（C:¥NetCommons）で動作させるために、XAMPPのセットアップを実行します。
実行方法は、setup_xampp.batをダブルクリックします。
この処理は初回のみ、行います。

XAMPPセットアップ実行

XAMPPの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を指定する。
先頭の;はコメント

XAMPP実行
XAMPPを実行します。
実行方法は、xampp-contrall.exeをダブルクリックします。

警告メッセージ
警告メッセージが表示されることがありますが、実行をクリックしてください。

言語の選択
言語の選択画面が表示されるので、英語を選択してSaveをクリックします。

XAMPP展開後
右のXAMPP Control Panel が表示されていないときは、タスクバーの xamppアイコンを右クリックして、Show / Hide をクリックします。

Apache、MySQL起動
ApacheとMySQLの右にある「Start」をクリックしてそれぞれを起動します。

Windowsファイアウォール-Apache
初回起動時のみ、Apacheに対する通信を許可するか確認されます。
プライベートネットワークをチェックし、「アクセスを許可する」をクリックします。

Windowsファイアウォール-MySQL
初回起動時のみ、MySQLに対する通信を許可するか確認されます。
プライベートネットワークをチェックし、「アクセスを許可する」をクリックします。

Apache、MySQL起動完了
Apache、MySQLが起動したら、 Module列の名前の背景が緑色になり、 PIDやPort情報が表示されます。
Apache、MySQLを終了する場合は、「Stop」をクリックしてください。
PCをシャットダウンする際などは Apache、MySQLを終了してください。

ブラウザでアクセス
ブラウザで
http://localhost/
へアクセスし、左の画面が見えれば、Apacheが起動しています。
localhostというのは、ネットワークのルールで自分のPCを指す名前です。

XAMPP注意点
•使用するPCで他のWebサーバが動いていないこと。
•例えば、IISなど
•使用するPCでMySQLがインストール・起動されていないこと。
•Webサーバ、MySQLがすでにインストールされていて動いていると、XAMPPに含まれているWebサーバ（Apache）、MySQLと競合してエラーが発生し、動作しないので注意してください。

NetCommonsをインストール
NetCommonsをインストールしてみよう

NetCommonsダウンロード
http://www.netcommons.org/

ダウンロードしたNetCommonsの圧縮ファイルを展開します。
インストールで使用するのはhtmlフォルダの中身です。
docsフォルダにはレンタルサーバなど、UnixやLinuxへインストールする際に必要な情報がありますので、必要な際に参照してください。

インストールフォルダの確認
C:¥NetCommons¥htdocsに NetCommonsをインストールします。
この段階では、左記のようなフォルダやファイルが入っています。

インストールフォルダの準備
C:¥NetCommons¥htdocs
のファイルを削除し、空にします。

NetCommonsファイル配置
C:¥NetCommons¥htdocs
にNetCommonsのインストール用フォルダ、ファイルを配置します。
（先ほど展開したものを移動）

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
•これで、続きを進めます。

NetCommonsインストール
japaneseを選択して次へ

説明ページって、あまりちゃんと読まずに飛ばしちゃう人も多いとは思いますが（笑）、大切なことが書いているので、一度は読んでみてください。

今回は、以下の内容を入力
データベースのホスト名：localhost
データベースユーザ名：root
データベースパスワード：（空白）
データベース名：netcommons
テーブル接頭語：netcommons2
データベースへ持続的接続：いいえ
NetCommonsへのURL：http://localhost
URLは要注意
/htdocsを取ります。

データベースが存在しないと言われますが、今回はそのまま進むと、データベースを作成できます。

サイト管理者のハンドル、ID、パスワードを設定します。

インストール完了
ここをクリックするとトップ画面に遷移します。

NetCommons初期画面
インストールが完了すると、この画面になります。

ログイン
ログインしてみましょう。
ログインするには、右上の「ログイン」をクリックします。
インストール時に登録したID/パスワードでログインしましょう。

ログイン直後の画面
ログイン直後は左のような画面です。
この画面は「プライベート・スペース」と呼ばれる場所（ページ）が表示されています。

【図解】NetCommonsのスペース
グループ・スペース
パブリック・スペース
プライベート・スペース
ログインしたユーザのみ、見ることができる場所
公開されている場所
自分だけが見ることができる場所
※NetCommonsの「スペース」について、説明します。

ホームページ構成の設計
階層設計をしてみよう

作成するサイトの設計
トップページ
学校紹介
行事予定
クラブ活動
進路情報
※以下の構造を持つ学校ホームページを作成します。
本校の特徴
学校生活
入学案内
アクセス

ホームページ構成の作成
実際に階層・ページを作ってみよう

トップページに移動
左にあるメニューから、トップページをクリックして、トップページに移動します。
NetCommonsでは、ページの移動はこのメニューを使って行います。

トップページのお掃除
セッティングモードにします。
不要な「ブロック」の「削除」をクリック
「削除」が見えていないブロックは、マウスを近づけると「×」のアイコンが出ます。
Welcome to NetCommons!とIMAGINE を削除します。

不要なブロックの削除後
不要なブロックを削除した後
「セッティング終了」し、セッティングモードを解除した状態

メニューの編集
メニューの「編集」をクリックし、メニューを編集モードにします。
カテゴリ追加、ページ追加を使って、ホームページの構成を作成します。
カテゴリはその下にページがあるもの、ページは最下層のページを意味します。
今回は学校紹介がその下にページを持つので、カテゴリ。他はページとして作成します。

メニューの編集後
カテゴリ、ページを作成したところ
設計した階層が作成されていることがわかります。

メニューの編集
セッティングモードを終了して、学校紹介をクリックしたところ。
各ページが作成されていることがわかります。
NetCommonsでは、カテゴリもページのひとつとして表示されます。

ホームページの全体設定
全ページに共通する設定をしておこう

管理画面
ヘッダーの「管理」をクリックして「コントロールパネル」を開きます。
「コントロールパネル」の「システム管理」を開きます。

システム管理–一般設定
サイト名
標準の開始ページ
ログイン直後に開きたいページを指定します。

システム管理–メタ情報
作成者
著作権表示
キーワード
サイトの説明

システム管理–ページスタイル–一般
行揃えを「中央」に
これで、ページが全体的に中央よせになります。

システム管理–入会退会設定
「自動会員登録を許可する」を「いいえ」にする。
会員制サイトを作成する場合などはここを「はい」にして、会員登録を受け付けることができます。

補足

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

次回予告

無料ソフト「NetCommons」で作る
学校ホームページ【２限目】
2014年10月5日(日)13:00～14:00
次回予告

ネタ募集

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

お知らせ

株式会社オープンソース・ワークショップでは、 PHPプログラマを募集しています。
詳しくは会社のホームページに情報があります。 http://opensource-workshop.jp/
社員募集

お問い合わせ先

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

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

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (6)

Similar to 無料ソフト「NetCommons」で作る学校ホームページ【１限目】

Similar to 無料ソフト「NetCommons」で作る学校ホームページ【１限目】 (20)

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

More from 株式会社オープンソース・ワークショップ (14)