Connect-CMS の書
Ver3
Connect-CMS で PTA のデジタル強化！特集

新しいオープンソース CMS「Connect-CMS」の紹介本です。
今回は「Connect-CMS で PTA のデジタル強化！」の特集記事が入っています。
オープンソース CMS のため、無料でダウンロードできます。
詳しい情報は以下の公式サイトへ GO！
https://connect-cms.jp/

目次
1.

2.

3.

Connect-CMS とは.................................................................................................... 3
1.1.

Connect-CMS とは ............................................................................................ 3

1.2.

Connect-CMS の得意分野や考え方は？ ........................................................... 4

1.3.

JIS X 8341 への対応 ....................................................................................... 4Connect-CMS の機能紹介......................................................................................... 5
2.1.

公立学校サイトの統一性と自由度 .................................................................. 5

2.2.

スクールカラーの表現 .................................................................................... 6

2.3.

テーマチェンジャー機能でデザイン切り替え................................................ 7

2.4.

オリジナルデザインを簡単に作成 .................................................................. 8

2.5.

CSS や JavaScript を記述してデザインを作る ............................................... 9

2.6.

ワード感覚で記事を作成 .............................................................................. 10

2.7.

動画の埋め込みやアップロード ................................................................... 11

2.8.

写真や動画をアルバムで管理 ....................................................................... 112.9.

拡張機能 - PDF 自動サムネイル作成 ........................................................... 122.10.

拡張機能 - 写真の顔自動モザイク .............................................................. 122.11.

パスワード付きページ作成 ........................................................................... 132.12.

会計報告などの資料を管理 ........................................................................... 14

2.13.

カレンダー作成 ............................................................................................. 14

2.14.

保護者からの連絡を Web で受け付け ............................................................ 15

2.15.

拡張機能 - ドローンプログラミング .......................................................... 16

PTA の Web サイトで使ってみた例 ........................................................................ 173.1.

基本のブログ ................................................................................................. 173.2.

キャビネットで会則 ...................................................................................... 173.3.

ポスター募集と全員の作品掲載 ................................................................... 173.4.

ポスター作品はトップページにランダム表示.............................................. 183.5.

データベースと FAQ で校庭開放の案内......................................................... 193.6.

暑さ指数の自動取得でより安全な校庭開放 ................................................. 193.7.

イベントや依頼の動画での説明 ................................................................... 213.8.

フォームでアンケート収集 ........................................................................... 22

Page.1

3.9.
4.

ボランティア募集は重要記事の新着 ............................................................ 23

NetCommons からの移行について .......................................................................... 24
4.1.

NetCommons からデータを移行 ...................................................................... 24

4.2.

記事の自動スマートフォン対応 ................................................................... 25

5.

機能一覧 ............................................................................................................... 26

6.

あとがき ............................................................................................................... 30

Page.2

1. Connect-CMS とは
1.1. Connect-CMS とはConnect-CMS とは、Web サイトを簡単に作ることができるシステムです。
特徴はパソコン表示とスマートフォン表示のレイアウトが自動で変換される、スマートフォンにやさしいシステムという部分です。
2019 年に開発が始まった、まだ新しいソフトウェアということもあり、管理画面や編集画面の操作もスマートフォンでも行えるように設計・開発されています。
【パソコン表示】【スマートフォン表示】

レイアウトはスマートフォ
ン、タブレット、パソコンで自動的に変わります。

Page.3

1.2. Connect-CMS の得意分野や考え方は？
⚫
⚫
⚫

Connect-CMS は株式会社オープンソース・ワークショップが主として開発しています。
Connect-CMS は、教育機関や研究機関、自治体などで必要となる Web サイトを主なターゲットとして開発しております。
Connect-CMS は、オープンソース・ライセンスを採用しているため、誰もが自由にダウンロードして使用することができます。

⚫

開発では「すべての人にやさしく情報を提供する」ということを大切にしています。
「Connect-CMS」という名前には「つながる」という意味を込めていま⚫

す。
キャッチコピーは「つながる未来へ」。

1.3. JIS X 8341 への対応
今後、ホームページに求められていくものとして、「ウェブアクセシビリティ」があります。高齢者や障害を持つ者も含む誰もが利用できるものとなるよう、自治体や学校ホームページには「JIS X 8341」の準拠が求められていくようになると考えています。
Connect-CMS では、適合レベル AA の基準を満たすサイトが構築できます。(ソフトウェアとしての対応はできています。)※「JIS X 8341」はソフトウェアだけではなく、記載する記事も含めた対応が必要です。

Page.4

2. Connect-CMS の機能紹介
2.1. 公立学校サイトの統一性と自由度
学校ごとのメニューがあまりにバラバラだと、各校で同じコンテンツを配置したいときにうまく確認できなくて困ります。
また、メニューに自由度がないのも、自分の学校として発信したいことを伝えられないという問題が発生します。
Connect-CMS を公立校のホームページに導入する場合、基本となるメニューは自治体で揃えたものを作成し、各校ごとに不要なものは消し、独自のものは追加するという運用がよくあります。
これがやりやすいのも、Connect-CMS の特徴です。
【メニューの例】

Page.5

2.2. スクールカラーの表現
ホームページはスクールカラーを基調にしたい。
当然の要求ですが、今までの CMS では、細かな色の指定はできない、もし
くはカスタマイズが必要ということが多くありました。
Connect-CMS では、学校ごとにスクールカラーを表現できるように、初めから 25 色のカラーパターンを選択できます。さらに RGB で指定することも可能で、スクールカラーをしっかり表現することができるようになりました。

Page.6

2.3. テーマチェンジャー機能でデザイン切り替え
Connect-CMS は、テーマチェンジャー機能で、簡単にデザインを切り替えることができます。
以下は同じページでデザインを変更した例です。

オリジナルのデザインテーマを追加できちゃう。

Page.7

2.4. オリジナルデザインを簡単に作成「縦型メニュー」、「横型メニュー」、「フレームタイトル」の文字色や背景色などを設定し、オリジナルデザインを作ることができます。

横型メニュー

フレームタイトル

縦型メニュー

Page.8

2.5. CSS や JavaScript を記述してデザインを作る
Connect-CMS では、CSS や JavaScript を直接記述してデザインを編集することができます。ページやフレーム単位で任意の CSS クラスを設定できる機
能と組み合わることで、デザインを柔軟に施すことが可能です。
また画像をアップロードしてレイアウトに組み込むこともできます。

Page.9

2.6. ワード感覚で記事を作成⚫
⚫
⚫

ワードのような感じで、直観的に記事を作成することができます。
文章はもちろんのこと、表も作成できます。
リンクや画像、ファイルの挿入もできます。

Connect-CMS は、「閲覧する保護者や学校関係者に分かりやすくすること、記事を書く際の負担をできる限り減らすこと」にこだわって開発しています。
【記事作成編集画 - パソコン】【記事作成編集画 – スマートフォン】

Page.10

2.7. 動画の埋め込みやアップロード⚫

動画の埋め込み
動画の埋め込みについて、「Youtube にアップロードした公開動画を埋め込む」「Youtube にアップロードした限定動画を埋め込む」「Vimeo にアップロードしたものを埋め込む」という方式が使えます。

⚫

Connect-CMS に直接動画をアップロード
ビデオカメラやデジタルカメラ、スマートフォンなど、多くの身近な機器で撮影した動画をアップロードできます。

2.8.

写真や動画をアルバムで管理

文化祭、運動会などの写真や動画をアップロードし、管理できます。
写真については、複数の写真を zip ファイルにしてアップロードできます。
アップロードされた zip ファイルは自動的に展開されて登録されます。

Page.11

2.9. 拡張機能 - PDF 自動サムネイル作成
学校だよりなどの PDF をアップロードすると、PDF のサムネイル画像を自動で作成できます。
（公開されているインターフェースで実装が必要か拡張機能実装済みのサービスを使用する必要があります）

2.10.

拡張機能 - 写真の顔自動モザイク

写真の顔を AI 判定して、自動でモザイク加工することが可能です。
（公開されているインターフェースで実装が必要か拡張機能実装済みのサービスを使用する必要があります）

Page.12

2.11. パスワード付きページ作成
パスワード付きページを作ることができます。
ログイン ID を必要とせず、「パスワード」のみで制限できます。
プリントや一斉連絡メールなどでパスワードを伝えて使用することを想定しています。
パスワード付きページには、動画での補助教材や課題 PDF などをアップロードしておくことを想定しています。

学年毎にページを作成し、各ページにパスワードを設定することもできます。
幼稚園用、小学生用、中学生用と分けている自治体様もいらっしゃいます。

Page.13

2.12. 会計報告などの資料を管理会計報告書などのファイルをアップロードして管理します。

2.13. カレンダー作成
カレンダーに行事予定など登録できます。

Page.14

2.14. 保護者からの連絡を Web で受け付け
Connect-CMS のフォーム機能を使えば、保護者からのお休み連絡をホームページで受け取っておくことが可能です。登録された内容は、指定したメールアドレスに転送可能。保護者自身にも CC でメールが送られるので、お互いに誤解のない連絡のやり取りができます。
フォームの項目は設定画面で自由自在に増減可能。必須にする項目や選択項目の選択肢も自由に設定できます。

Page.15

2.15. 拡張機能 - ドローンプログラミング
オプションプラグインの DroneStudy をインストールすれば、ブロック・プ
ログラミングで DJI 社※の Tello※を動かすことができます。
児童・生徒はサイト上でプログラミングし、教員用の PC でプログラムを呼び出して実行できます。
安全に配慮した形で教室で小型のドローンを使ったプログラミングが行えます。
また、ドローンのカメラ映像を受信して写すことも可能です。

※

記載している会社名・商品名は、各社の登録商標または商標です。

Page.16

3. PTA の Web サイトで使ってみた例
この章では、Connect-CMS を実際に PTA サイトで使ってみて、この使い方が良かった。という例を紹介します。

3.1. 基本のブログ
情報発信の基本ということで、ブログを置いています。
⚫ 学校の授業やイベントを紹介し学校に対する理解を共有することで、学校のサポートにつなげます。
学校や PTA からの依頼を「周知」する場。別途、公式 LINE も使って、「通知」も行っています。

⚫

3.2. キャビネットで会則
PTA に対するお問い合わせやご意見などで、会則に書いてあることも割とあるなと感じていますので、会則をわかりやすく掲載してみました。
⚫

画面イメージ【固定記事】で会の目的（通常は第 1 章かな）のみテキストで。

【キャビネット】で会則や関係資料の PDF を掲載。

3.3. ポスター募集と全員の作品掲載
町のポスターを募集して、校庭回りの柵や近隣店舗、駅などに掲示していただいています。
しかし、物理的な掲示ではスペースの関係で全員分の掲示ができていませんでした。そこで、フォトアルバム機能を使って、全員の作品を掲示できました。
Page.17

⚫

⚫

画面イメージ（学年ごとのアルバム）
1 年生の作品

2 年生の作品

3 年生の作品

4 年生の作品

5 年生の作品

6 年生の作品

画面イメージ（アルバムの中）
作品画像

作品画像

作品画像

氏名

氏名

氏名

作品画像

作品画像

作品画像

氏名

氏名

氏名

3.4. ポスター作品はトップページにランダム表示
トップページも、ただ学校の写真を貼ってもつまらないので、児童・生徒ファーストということで、ポスターの作品がランダムにサムネイルで表示されるようにしました。
⚫

トップページイメージ
メニュー
作品

作品

作品

作品

サムネイル

サムネイル

サムネイル

サムネイル

新着などのトップページのコンテンツ

Page.18

3.5. データベースと FAQ で校庭開放の案内
校庭開放事業があり、校庭で思い切り遊べるのですが、子どもたちや保護者に校庭開放事業がうまく伝わっていなかったようなので、校庭開放でできることなどを周知しました。
⚫

画面イメージ【固定記事】実施する日・時間、注意点など【FAQ】校庭開放に関わる FAQ
自分の道具を持って行って良いの？自転車で行って良いの？など【データベース】用意している道具・遊び方紹介
道具や遊び道具の名前

方の写真

道具の説明、数など

道具や遊び道具の名前

方の写真

道具の説明、数など

3.6. 暑さ指数の自動取得でより安全な校庭開放
校庭開放の流れから。
夏、熱中症の危険性について、かなり気をつかいました。
朝に暑さ指数などを調べるのですが、担当者が見逃していた場合や担当者の負荷も考えると、もっと自動的に判断できる方法が欲しかったのです。
そこで、テストデータとして提供されているものではありますが、環境省のデータを自動で取得して表示するシステムを組み込みました。
PTA ホームページで常にその日の暑さ指数の情報が表示されていることで、もし見逃しても気づく人（目）が多いほど、事故は減らせると考えました。

Page.19

⚫

画面イメージ

Page.20

3.7. イベントや依頼の動画での説明
折り紙を折るイベントがあったのですが、折り方を動画にして PTA ホームページに載せることで、わかりやすく伝えることができました。

Page.21

3.8. フォームでアンケート収集
イベントの参加予定のアンケートやボランティア募集など、フォームはかなり役立ちました。
ファイルをアップロードしてもらう必要があるアンケートでは、Google フォームではログインをしなければいけなく、教員への依頼ではセキュリティ上、学校の PC では Google にログインできないなどの制約もありましたが、Connect-CMS のフォームでファイル型を使用することで問題なくアンケートを収集することができました。
⚫

フォームの例

Page.22

3.9. ボランティア募集は重要記事の新着Connect-CMS のブログには、「重要記事」という機能があります。
ここにチェックした記事は、新着情報で重要記事だけ一覧表示することができて、記事が流れて行ってしまうということを防げます。

Page.23

4. NetCommons からの移行について
4.1. NetCommons からデータを移行
NetCommons から Connect-CMS にデータを移行できます。
ページやブログ、添付の PDF も移行でき、これまでの資産を有効に引き継げます。
【移行前】

【移行後】

Page.24

4.2. 記事の自動スマートフォン対応
スマートフォン対応のシステムにデータを移すだけでは、実際にスマートフォンで見た際、きれいに見えないことが良くあります。
下は Google Map の埋め込み例です。
画面幅に合わせて、自動的に大きさが変わるようになるには、記事を変更しなければいけません。Connect-CMS の移行プログラムは、可能な限り、コンテンツ内もスマートフォン対応に自動変換します。
【パソコン表示】【スマートフォン表示】

Page.25

5. 機能一覧【一般プラグイン】
プラグイン名機能概要

固定記事（お知らせ） サイト上に文字や画像を配置できるプラグインです。
メニュー

ページ設定を元にメニューを表示できるプラグインです。

ブログ

ブログを作成できるプラグインです。サイトからのニュース配信などにも使用します。

カレンダー

カレンダーを作成できるプラグインです。予定の配信や共有に使用します。

スライドショー

画像をアップロードして自動スライド形式で表示することができます。

開館カレンダー

施設の開館カレンダーを作成できます。

新着情報新着情報を作成できるプラグインです。サイト内のプラグインから新着記事を集めます。

FAQ

FAQ を作成できるプラグインです。質問と回答をわかりやすく表示できます。

リンクリスト

リンクリストを作成できるプラグインです。よく使うサイトの URL を登録します。

キャビネットキャビネットを作成できるプラグインです。ファイルの管理に使用します。

フォトアルバム

写真などの画像や動画を管理できる、メディアアルバムです。

データベース

自由に項目を設定して、データベースを作成できる機能です。

OPAC

図書館などの蔵書を管理できるプラグインです。

フォームフォームを作成できるプラグインです。項目を自由に作成できます。

アンケート

アンケートを取ることができます。アンケートはフォームプラグインのアンケートモードで実現します。

カウンター

カウンターを作成できるプラグインです。日ごとの履歴もダウンロードできます。

サイト内検索サイト内のコンテンツを検索できるプラグインです。

データベース検索

データベースプラグインのデータを参照して、異なる画面として表示できる機能です。

掲示板

掲示板を作成できるプラグインです。

Page.26

施設予約

施設予約を作成できるプラグインです。会議室や設備の予約で使用します。

タブ

複数のフレームをタブで切り替えることができるようにするプラグインです。

テーマチェンジャー

テーマ設定を変更保存することなく切り替えて確認できるよ
うにするプラグインです。

課題管理（レポート） 課題を提示してレポートなどを収集できます。
テスト（開発中）フォームのテストモードとして実装中

RSS（開発予定）他サイトの RSS を取得して表示できるプラグイン

ToDo（開発予定）タスクを共有できる ToDo プラグイン

回覧板（開発予定）議題の既読確認のできる回覧板機能【共通機能】
機能名

機能概要

ログイン

ログイン・ログアウトなどログイン関係管理機能

プラグイン追加や管理者メニューなど、サイト管理機能への入り口です。

フレーム

フレームに関する操作ができます。

WYSIWYGWYSIWYG 機能で記事を編集できます。

パスワード付きページ

パスワード付きページを作成できます。

【他システム移行機能】
機能名

機能概要

NC2 ワンクリック移行

NetCommons2 のバックアップデータをアップロードして取り込むことができます。

NC コマンド移行

NetCommons2、NetCommons3 のデータを移行できます。
（詳細設定パラメータあり）

Page.27

【管理系プラグイン】
プラグイン名機能概要

管理画面

管理画面の初めに開く画面です。Connect-CMS の公式サイトより、最新情報を取得して表示します。

ページ管理

ページの作成や設定など、ページに関する機能が集まった管理機
能です。

サイト管理

サイトの基本設定など、サイト全体に関する機能が集まった管理機能です。

グループ管理ユーザをグループとして設定できます。
このグループにページ毎の権限を付与することができます。

ユーザ管理

ユーザの一覧や追加など、ユーザに関する機能が集まった管理機
能です。

セキュリティ管理

ログイン制限や HTML 記述制限など、セキュリティに関する機能が集まった管理機能です。

プラグイン管理

プラグイン追加時の表示設定など、プラグインに関する機能が集まった管理機能です。

システム管理デバッグモードや使用メモリ、ログなどシステムの基本に関する機能が集まった管理機能です。

API 管理API の Secret Code 設定を行い、他のシステムと接続できるように設定できます。

メッセージ管理

サイトの利用確認など、初回にアクセスした際に確認したいメッセージに関する機能が集まった管理機能です。

外部認証

他システムと連携した外部認証に関する設定が集まった管理機
能です。

外部サービス設定

Connect-CMS の外部サービス設定に関する機能が集まった管理機
能です。

アップロードファ
イル管理

アップロードファイルに関する機能が集まった管理機能です。

施設管理

施設予約で使用する施設を登録して管理する管理機能です。

テーマ管理

テーマに関する機能が集まった管理機能です。

連番管理

連番管理に関する機能が集まった管理機能です。

コード管理

各プラグインでユーザーが使用するコードを一括管理できる機
能です。

ログ管理

ログに関する機能が集まった管理機能です。

祝日設定

祝日に関する機能が集まった管理機能です。
Page.28

他システム移行

他システムからデータ移行する機能が集まった管理機能です。

バックアップ管理（開発予定）データ・ポータビリティを実現するためのバックア
ップ機能

Page.29

6. あとがきConnect-CMS は、パソコンだけでなく、スマートフォンでも写真や記事を投稿できます。
災害時の緊急時でも、スマートフォンさえあれば、情報発信ができます！
ここでは紹介しきれなかった機能がまだまだたくさんあります。
Connect-CMS の Web サイトより、詳細をご確認ください。

https://connect-cms.jp/

発行日：2023 年 8 月 13 日
発行者：Connect-CMS 同好会
連絡先：Twitter（@connect_cms）
https://connect-cms.jp/contact

Page.30

2023 年 12 月 31 日発行版