無料ソフト「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」で作る学校ホームページ【１限目】

More Related Content

What's hot (20)

Viewers also liked (6)

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

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