ゼロからわかるMintJams CMS #5｜index.md を置くだけでWebページになる

この記事をお読みいただくと、HTMLコードを1行も書くことなく、文章ファイルをフォルダーに置くだけで綺麗な社内サイトのWebページが出来上がる手軽さを実感していただけます。

前回は、ファイルを「安全に保管して素早く探す」ためのContent Browser（コンテンツブラウザー）の活用法をご紹介しました。

第5話となる今回は、保管したファイルを「社内Webページとして美しく見せる」という、MintJams CMSの真骨頂とも言えるテーマに入ります。 記事の後半には、実際にご自身の環境でWebページの生成を試していただける「お知らせページのサンプル」と実践ステップをご用意しております。ぜひお手元の環境でお気軽にお試しください。

※この記事は MintJams CMS 0.1.34-beta の情報をもとに作成しています。プレビュー版のため、実際の画面デザインなどは今後変更される可能性がございます。

困りごと：「ページを追加して」が、誰かへの負担になっていませんか？

「社内ポータルにお知らせを1件掲載したいだけなのに、毎回Web担当者にお願いしなければならない……」 そんなもどかしさを感じたことはありませんか？

文章自体はすでに準備できているのに、いざWebページとして公開しようとすると、HTMLと呼ばれる専用のコードで形を整えたり、ヘッダーやメニューのデザインを他のWebページと揃えたりする作業が必要になります。その結果、どうしても「コードが書ける専門の人」へ依頼して作業完了を待つことになりがちです。

一方、依頼を受ける側のWeb担当者からしても、送られてきたテキストを毎回手作業でHTMLに流し込む作業は単純でありながら手間がかかり、本来集中したい業務を圧迫してしまいます。

MintJams CMS は、この課題に対して非常にスマートな解決策をご提案します。 「文章を書く人」と「見た目（デザイン）を整える人」の役割を、仕組みとして完全に分離するという考え方です。

こうなる：ファイルを置いた場所が、そのままWebページのアドレス（URL）になる

MintJams CMS におけるWebページ公開の仕組みは、「ファイル」「見た目」「アドレス（URL）」の3つの要素でシンプルに成り立っています。これらが独立して機能している点が大きなポイントです。

1. ファイル：あなたが用意するのは、シンプルな文章ファイルだけ

Webページの元になるのは、「index.md」といった名称の一般的な文章ファイルです。 ファイル名の末尾についている .md は「Markdown（マークダウン）」形式のテキストであることを示しています。見出しに # をつけたり、箇条書きの行頭に - を置いたりする程度のシンプルなルールで記述できるため、普段メールやチャットを書いている方であればどなたでも作成できます。

この文章ファイルを、第4話でご紹介した Content Browser を使ってサイト用のフォルダーにドラッグ＆ドロップするだけです。文章を書く方の作業は、たったこれだけで完了します。

2. 見た目：テンプレートがデザインを自動で整える

フォルダー側にはあらかじめ「このフォルダーにある .md ファイルは、このテンプレートを使って表示する」という約束事（.web.yml という小さな設定ファイル）を配置しておきます。

「テンプレート」とは、ヘッダー・メニュー・カラーデザイン・フッターなどを備えた「見た目の型」のことです。あなたが配置した文章ファイルは、ブラウザで開かれるたびにこの型へ自動的に流し込まれて表示されます。

この約束事やテンプレートを用意するのは、サイト構築時にWeb担当者やエンジニアが一度だけ行えば十分です。一度用意してしまえば、その後フォルダーに文章ファイルを配置する人は、デザインやHTMLのことを一切意識する必要がありません。さらに、テンプレートを更新すれば、そのフォルダー内にあるすべてのWebページの見た目を一括で更新できます。

3. アドレス（URL）：フォルダーの配置場所がそのままWebページのアドレスに

Webページのアドレス（URL）は、ファイルを配置したフォルダーの場所（パス）がそのまま反映されます。 例えば、サイトフォルダー内の「news」フォルダーへ index.md を置くと、Webページのアドレス（URL）は自動的に .../news/index.html となります。別途管理画面から登録作業を行ったり、「公開ボタン」を押したりするような複雑なステップは存在しません。

なお、外部のブラウザから見えるのは、型に流し込まれた完成後の index.html だけです。元ファイルである index.md 自体が外部にそのまま露出することはありません。

アドレス（URL）の構成について

お試し環境（ローカル環境）では、Webページのアドレス（URL）は次のような形式になります。

http://localhost:8080/bin/cms.cgi/（ワークスペース名）/content/news/index.html

bin/cms.cgi/（ワークスペース名） の部分が CMS の共通入口となっており、それに続くパスが Content Browser で見ているフォルダー階層そのままに対応しています。実際に社内Webポータルとして運用する際は、Web担当者が https://portal.example.co.jp/ のようなスマートなドメインへ割り当てを行いますが、その場合も後ろのフォルダー構造や規則性は変わりません。

やってみる：サンプルを入れて、文章を書き換えてみましょう

第2話の手順で準備したお試し環境に admin アカウントでサインインした状態で、実際の挙動を体験してみましょう。

まずは、本記事の末尾にある「お知らせページのサンプル（パッケージ）」をご自身のパソコンにダウンロードしてください。このファイルの中には、「見た目の型（テンプレート）」とフォルダーの約束事、そして見本の記事が含まれています。

1. サンプル（パッケージ）をインストールする
   デスクトップのアプリ一覧から「Tasks（タスク）」を開き、画面上の「（プロセスを開始）」➔「パッケージのインストール」を選択します。ダウンロードした zip ファイルを指定して進めると、確認画面が表示されますので、内容を確認して「インストール」をクリックします。その後、すぐにタスク一覧にインストールの進捗タスクが表示されますので、結果を確認して「タスクを完了」をクリックします。（※パッケージ機能の詳細については第12話で詳しく解説します）

3. ブラウザでWebページを開いて確認する
   ブラウザの新しいタブを開き、以下のアドレス（URL）にアクセスします。ヘッダーやフッターが綺麗に整えられた「お知らせ」ページが表示されることを確認してください。

http://localhost:8080/bin/cms.cgi/system/content/news/index.html

3. 文章を書き換えて更新してみる
   Content Browser で content ➔ news フォルダーを開くと、index.md と welcome.md という2つの文章ファイルが入っています。index.md をダブルクリックして「Text Editor」で開き、「最近のお知らせ」という見出しの下に - 来週の全体会議は水曜に変更 と1行書き足して保存（Ctrl + S または Command + S）します。先ほど開いたブラウザのWebページを再読み込みすると、追加したテキストが即座に反映されます。

HTMLコードを一切触ることなく、簡単なテキスト編集だけでWebページが更新できました。 ためしに、ブラウザのアドレスバーの末尾を index.md に変えてアクセスしてみてください。「ページが見つかりません（404）」と表示され、元データが保護されている安全性を実感していただけます。

新しいWebページを追加するのも簡単です

新しく記事を追加したい時は、news フォルダー内で右クリックし、「新規ファイル」から kaigi.md のように .md で終わる名前のファイルを新規作成して文章を保存するだけです。Webページのアドレス（URL）は自動的に .../news/kaigi.html となり、誰かに作業を依頼する必要はありません。サンプルの welcome.md に見出しや箇条書きの書き方がまとまっていますので、参考にしてみてください。

※本番環境で本格運用する際は、自分用のフォルダーを新しく作成し、そこに同じ約束事ファイル（.web.yml）をコピーしてご利用ください。なお、現時点ではWebページのアドレス（URL）さえ知っていれば、誰でも閲覧できる状態になっています。「サインイン済みのユーザーにだけ公開したい」「自分の所属する部門やチームのメンバーにだけ公開したい」など、閲覧権限の詳細な設定方法については第13話で詳しく解説いたします。

ひとこと用語解説

• Markdown（マークダウン）
  見出しに # をつけたり、箇条書きの頭に - をつけたりするだけのシンプルな文章記述ルールです。特別な専門知識がなくても手軽に書くことができ、拡張子は .md となります。
• テンプレート（見た目の型）
  ヘッダー、メニュー、カラーデザイン、フッターなどをあらかじめ組み込んだデザインの枠組みです。年賀状のデザインテンプレートにメッセージだけを差し替えるイメージに近く、Webサイトごとに一度準備しておけば文章の作成者が触る必要はありません。

サンプルファイルのダウンロード

• お知らせページのサンプル（パッケージ）
  Tasks（タスク）からインストールしてお使いください。

次回予告

ファイルを安全に置く・探す、そしてWebページとしてきれいに見せる基本機能が一通り揃いました。

次回のテーマは 「メモ、付箋、エディタ、PDFビューア」 です。それらのファイルを「その場でサッと書く・読む」ための便利な内蔵ツール群のご紹介です。

日常のちょっとした作業でわざわざ他のアプリを開く必要がなくなる、ストレスフリーな作業体験をお届けします。どうぞお楽しみに！