学校ホームページの運営管理問題を解決する(かもしれない)JS CMS という選択

『JS CMS』という国産のオープンソースCMSで公立小学校のウェブサイトを1年間運用したところ、ほぼ満足ゆく結果が得られたので記事にまとめました。

あなた誰?

とある地方都市(といってもプロフィールから特定されるでしょうが…)にある公立小学校の「学校運営支援員」です。教育委員会から任用通知書を受け勤務する非常勤職員というポジションで、2019年度で3年目になりました。

業務内容は、ウェブサイトの管理、軽微なトラブルシューティング、クラブの指導補助など。校内ICT環境整備という観点から教員を支援する立場です。

サイト管理にCMSを導入した背景

ずばり「ホームページビルダーもうヤダ」だったから。

職員室にある校務用共有PCにはホームページビルダーがインストールされており、長年(リニューアル前のサイトから察するに10年以上)ビルダーによるサイト管理がされていました。伝え聞くところによると、市内各小学校の校務用PCにビルダーが導入されているそうで、一太郎とかジャストスマイルとひっくるめて入札業者が一括納入したのだろうなと想像。

しかし、このビルダーがなかなかシビれるバージョンでして、吐き出すHTMLソースは大文字タグがデフォルト、fontタグでフォントサイズやテキスト色を指定みたいなことをやってくれちゃうのですね。

ウェブページの構成要素を単一のHTMLファイルにまとめる 「文書構造と見た目の同一化」 は、ウェブ制作に不慣れな方にとっては直感的でしょう。しかしサイト開設から10年近く経ち、マルチデバイス対応という要請もある中、やはり文書構造と見た目とは切り分けた設計に組み直したい。テーブルレイアウトで更新し続けるのもつらかった…

CMS導入の前に立ちはだかった「DB使用不可」の壁

となると、CMSを導入してマルチデバイス対応のテーマ使ってリニューアル…みたいな展開になるわけですが、勤務校を含め、市内各校のウェブページをホスティングする ed.jp ドメインのサーバは

  • データベース使えません
  • PHP使えません

校務用ネットワークからはデフォルトで『いらすとや』も使えません*という、これまたなかなかシビれる仕様。
* 画像データをホスティングしている blogspot.com ドメインにフィルタリングがかかっているため

複数校のサイトが同居するサーバなのでガチガチのポリシーで縛るのも分からなくはないですが、いや、しかし、そのまま大文字でHTMLタグ出力するビルダー使い続けないといけないというのは…

そこで、ガチガチに固められたリモート環境下でもストレスなくサイト運用できるような、静的サイトジェネレータ機能を持つCMSをぽつぽつと探していったのです。

人類の99%を置いていかない静的サイトジェネレータをたずねて

昨今のウェブ事情に明るい方なら、静的サイトジェネレータと聞いて Jekyll、Hugo、Hexoなどといった有名どころを思い浮かべることでしょう。でも、これらのアプリケーションはMarkdown記法によるコンテンツ管理が基本。しかも、環境構築のみならず、ページ生成時にも黒い画面でのコマンド入力が必須です。

Markdown が「手軽に文章構造を明示できること」「簡単で、覚えやすいこと」などの思想の下で考案されている(Markdownとは · 日本語Markdownユーザー会)とはいえ、いざ画像を配置しようとしたときに

![example alternative text](https://example.com/foobar.jpg)

などと書いたりする必要があり、ビルダーで地道にサイトを作ってきた教職員の方にはハードルが高いように映ってしまいかねない。私が学校運営支援員として任用されている間はMarkdownベースで運用できたとしても、「メンテナンスの継続性」を考えればあまりよい選択ではなさそうです。

余談ですが、静的サイトジェネレータについて『Capital P』の高橋文樹さんがこんな表現をしていたのが印象に残っています。

静的サイトジェネレーターの多くはMarkdownなどを利用しているが、「MarkdownをビルドしてHTMLを書き出しアップロードあるいはGitにコミット」という時点ですでに人類の99%が置き去りになってしまう。

WordPressによる静的サイトジェネレーターShifterのイベント #JP_GetShifter 参加リポート

「人類の99%を置き去りにしない静的サイトジェネレータ」。私も手を替え品を替えで検索ワードを組み合わせながら、その一つの解ともいえる国産のオープンソースCMS『JS CMS』にたどり着いたのです。

ユーザーフレンドリーな管理画面で静的サイトを生成

JS CMSは、小規模から中規模サイトに特化した「簡単・柔軟・リアルタイム」をうたうMITライセンスのCMS(GitHubリポジトリ)。ほとんどの処理をJavaScriptで行い、コンテンツなどのデータをJSON形式で保持する点に特徴があります。

基本的にはローカルPC上にXAMPPなどでコンテンツ管理+静的サイト生成環境をつくり、生成したHTMLファイルをFTPなどでリモートに転送するという運用になります。

JS CMSの特徴ざっくりと

  • WordPressのような「固定ページ」「投稿」を組み合わせた構成でサイトを構築可能
  • サイト全体はもとより、一部コンテンツだけをCMS化することも可能
  • ブロックエディタでコンテンツを作成
  • あらかじめ、レイアウト26タイプ×カラー20タイプのテーマファイルを提供 テンプレートカスタマイズも可能
  • もちろん、ヘッダやフッタなどのモジュール化(インクルード化)もOK
  • リモートサーバ上ではPHP・DBともに不要(リモートでPHPを動作させる運用法も一応あります)
  • 動画マニュアルが充実(ふだんの運用についてはほぼまかなえる)

ちなみに私の勤務校では、校務用共有PC(Windows 7)にXAMPPをインストールし、生成したHTMLファイルを画像ファイルとともに指定のリモートサーバに転送する運用を行っています。

標準的な運用と異なっている点を挙げるとすれば、XAMPPのhtdocsディレクトリの実体を校内のNASに置き、PCからシンボリックリンクをはっているということでしょうか。

あえて不満な点を挙げるなら、ページ間リンクが自動生成されないこと

ダッシュボードの画面遷移はキビキビしており、HTMLファイル生成もストレスないスピードで、個人的にはテスト使用時から好印象のCMSでした。

あえて不満点を挙げるとすれば、一般的なCMSなら自動的に設定してくれるページ間リンクを手作業で打つ必要があることでしょうか。サイト内ページや画像ファイルの所在などをツリー形式で選択するので、手打ちによるリンクミスというのはほぼありませんけれども。

それと、環境依存の事象かもしれませんが参考までに。

1年間で2回ほど、JSONファイルが壊れてコンテンツ保存や管理画面遷移などがにっちもさっちもいかなくなってしまったことがありました。

幸い、JSONファイルを含む html ディレクトリをすべてリモート側にアップロードしていたので、サイト全体がふっとぶという事態は免れましたが、こまめな保存、HTMLファイル生成(JS CMSでは「公開」と呼びます)をしたほうがよさそうですね。

今後のこと

JS CMSは「1~数百ページの小・中規模サイト」の運用を想定したCMSとのこと。1年間運用してみて、2018年度内に新規生成したのが約60ページだったので、この先5年くらいは継続運用できるのではと予想しています。

MITライセンスのオープンソースCMS(GitHubリポジトリ)とはいえ、開発者である田中成憲さんだけがコントリビューターとして参加している現状なので、何かしらのかたちで開発に貢献したいとも考えています。

JS CMS 公式サイト
https://www.js-cms.jp/

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください