編集

トップ > 当CMSの仕様について > このCMSでできること

このCMSでできること（公開済）

URL：http://original-cms-sample.com/contents/cms/can/

リード文

本文

h3:デザイン関係
h4:レスポンシブデザイン
このサイトはレスポンシブデザインを採用しています。

レスポンシブデザインとは今じゃすっかり当然のことになりました、パソコンにもスマートデバイスにも描画対応している画面デザインのことですね。

厳密にはパソコン、スマホに限定せずあらゆる画面デザインに対応することです。

スマホで開いた時にパソコン用の表示になるサイトは随分と減ってきました。

パソコンでアクセスされている方は試しに画面の横幅を広げたり狭めたりしてみてください。ある狭さを超えるとサイドメニューが下部に移動します。

こちらは実際に学習されるときに詳細を説明しますが、cssのフレームワーク『Bootstrap4.0』を使用しています。これを使うと簡単にできます。
/h4:

h4:ヘッダの固定が可能
「プロパティ」という概念でヘッダエリアを固定するか/しないかを自由に設定することができます。

よくあるサイトデザインパターンにヘッダに各ページへアクセスできるメニューを置いておいて、下スクロールしてもついてくる、というのがあります。それを実現する手段ですね。

今はヘッダがサイトタイトルだけでスッキリしていますが、メニューを配置するとよりユーザに優しいサイトデザインにできます。

ヘッダ固定の設定方法は<a href="/contents/cms/property/">こちらのページ</a>をご覧ください。プロパティ全般について説明しています。
/h4:
/h3:

h3:DBとの連携について
img:table.png
CMS(コンテンツマネジメントシステム)に欠かせないのがDB(データベース)との連携です。

DBとの連携で行っていることを紹介します。

h4:カテゴリ情報の登録・更新・削除
img:category.png
本CMSの中で『カテゴリ』は”コンテンツを束ねるジャンル”として扱っています。

例えば、現状ならサイドメニューの『カテゴリ』欄に並んでいる「当CMSの仕様について」や「CMS作り方公開の背景」がこれにあたります。

こちらのページから登録、更新、削除ができます。（ここは公開用サンプルのため、一部の機能は制限しています。

詳細は実際に学習されるときに譲りますが、データベース上に「カテゴリテーブル」というカテゴリ情報を管理するオブジェクトを作り、この機構を実現しています。
/h4:
h4:コンテンツ情報の登録・更新・削除
img:contents.png
コンテンツ情報もカテゴリ同様にDBで管理しています。

本CMSではコンテンツの記事の内容（今あなたが読んでいる文字たち）はテキストファイルで保存しています。

ですので、記事のテキスト以外の部分をDBで管理しています。ページタイトルやURL、作成日、更新日、公開フラグなどが管理する項目です。

これらもカテゴリ同様に管理者ページから編集することができます。

DBで管理することによって、新しい記事を公開したときに自動的にトップページの新着情報やサイドメニューに出すことが可能です。
/h4:
h4:プロパティの管理
img:property.png
先ほど少し出てきましたプロパティです。

「プロパティ」という言葉は人によっては聞きなれないかもしれませんが、ある対象物の状態や設定と受け取ってください。

本CMS上では画面や機能の各オプション設定項目的な役割で使っています。

例えば、以下のような設定ができます。
　・ヘッダを固定するかどうかを指定できる
　・新着記事に「new」を付けるのを公開から何日までにするか指定する
　・コメントが投稿されたとき、管理者にメールで通知するかどうか
　・そのメールアドレス（どこに飛ばすか）
などです。

この他にも設定できる項目をご用意していますし、もちろんあなたの手で追加することも可能です。

なぜならこれはあなたの”オリジナルCMS”になるからですね。
/h4:
h4:コメントの投稿
img:comment.png
記事に対するコメントの投稿もできます。こちらも当然DBでコメント情報を管理しているからです。

このページの下部にもコメントの投稿フォームがついています。良かったら一度試しに投稿してみてください。投稿内容はあとで消すことも可能です。

これを自分の力で実装できるって言うのはすごいことですね。

実際に運用してみると、「この記事にはコメントを受け付けたくないな」ということもあるかもしれません。

例えば炎上しそうな内容の主張があったり、グレーな情報を扱う場合がそれです。

そういうときは（今はやってないけど）先ほどのコンテンツ情報に「コメント受付フラグ」を用意してこの値次第でコメント欄を表示するかどうかのロジックを書くと、記事によっては”コメントを受け付けない”が実現します。

このように、自分で管理項目を用意しどのように扱うかを決め、実装すると文字通り”オリジナルCMS”として拡張していくことができます。
/h4:
h4:関連記事の登録
img:relation.png
ブログの運用を始めていき、ある程度記事がたまると、「この記事を読んでもらったらあっちの記事をオススメしたいな」ということがあると思います。

世の中のブログには記事の内容が終わったあたりに「関連記事」や「この記事を読んだ人はこちらも読んでいます」や「あわせて読みたい」などの文句でユーザサイトから逃さない工夫がされています。

それをこのCMSでも実現します。

乱暴な手法としてはなんでもいいからランダムで記事情報を並べる、という手もあるのですが、それだとなにも関係性のない記事が並んだりするので、ユーザを逃してしまうことになりますし、運用として美しくないです。

関連記事テーブルでは関連元記事と関連先記事の情報を1レコードに持ちます。・・・という説明ではピンとこないかもしれませんので、詳しく知りたい方は学習に取り組んでみてください！
/h4:

以上の5つでCMSを回していきます！
/h3:
h3:コンテンツの更新・サイトの運用について
CMSの肝、コンテンツの更新です。

コンテンツの更新では、記事の内容を入力し公開する情報を作りこむことができます。

巷の有名CMSであるWordPressやMovebleTypeはリッチテキストエリアを採用していますが、個人で作れるレベルのCMSではそれは難しいです・・・！（あれは高いレベルの技術が要るんです）

できないことについては<a href="">こちらの記事</a>を参照。

ですが、このCMSでも最低限のことはできます。

というかやり方を工夫さえすれば文字を太くしたり色を付けたりは可能です。

この↓ように画像を挿入することもできます。
img:01.png
また、先ほどから出ていますが、関連記事情報の挿入も容易にできるようにしています。
--ここに関連記事もいれるかあ・・

もちろん、「こういう入力もしたいな」というものがあればご自身でロジックを書くと可能です。このCMSの開発が終わるころにはそこまでの学びを通して難なくできるようになっているでしょう。
h4:プレビュー表示ができる
記事の編集中に実際にどのように表示されるのか、というのは必ず気になりますよね。

編集画面のサイドに「プレビュー」ボタンを用意しています。

これをクリックすることで、編集途中でも今の状態はユーザにどのように見えるか、を確認できます。
/h4:
h4:記事のバックアップを保存できる
記事の更新を続けていると、

「あの時点に戻したい！」

ということがあると思います。
このCMSでは保存ボタンを押したタイミングで①公開用のファイル　②バックアップとしてのファイル　をそれぞれ保存します。
img:02.png
↑このように管理しており、ファイル名の日付で前の更新時点の情報を参照することができます。

でも、「更新した分だけファイルが増え続けないか？」と思いますよね。大丈夫です。不要ファイルを削除する機構もご用意しています☆

これも詳しくは学習を始めてからご説明します。
/h4:
/h3:
h3:おわりに
当CMSで”できること”をご紹介しました。

記事中でもご案内しましたが、ここで紹介したものは『今できること』というだけで、実際に作ってみたり、運用を始めたりしてみると「こういう機能もほしい」「こういう表示がしたい」という要望が出てくると思います。

それはあなたの力でできるようになります。

是非チャレンジしてみてください。

作ってみたい方はこちら←これボタンにしたいな。
/h3:

↓このコンテンツのファイル情報↓

ファイル名	更新時刻	サイズ(byte)
2020-10-07_21-23-40-p_lead.txt	2020/10/07 21:23:40	422 B
2020-10-07_21-23-40-p_message.txt	2020/10/07 21:23:40	10038 B
2020-10-07_21-23-40-p_toc.txt	2020/10/07 21:23:40	116 B
2021-01-20_08-58-50-p_lead.txt	2021/01/20 08:58:50	422 B
2021-01-20_08-58-50-p_message.txt	2021/01/20 08:58:50	10041 B
2021-01-20_08-58-50-p_toc.txt	2021/01/20 08:58:50	116 B
2021-01-20_08-59-07-p_lead.txt	2021/01/20 08:59:07	422 B
2021-01-20_08-59-07-p_message.txt	2021/01/20 08:59:07	10038 B
2021-01-20_08-59-07-p_toc.txt	2021/01/20 08:59:07	116 B
2021-02-11_20-17-19-p_lead.txt	2021/02/11 20:17:19	383 B
2021-02-11_20-17-19-p_message.txt	2021/02/11 20:17:19	10038 B
2021-02-11_20-17-19-p_toc.txt	2021/02/11 20:17:19	116 B
2021-03-04_19-07-54-p_lead.txt	2021/03/04 19:07:54	422 B
2021-03-04_19-07-54-p_message.txt	2021/03/04 19:07:54	10038 B
2021-03-04_19-07-54-p_toc.txt	2021/03/04 19:07:54	116 B
2021-06-11_20-34-33-p_lead.txt	2021/06/11 20:34:33	422 B
2021-06-11_20-34-33-p_message.txt	2021/06/11 20:34:33	10038 B
2021-06-11_20-34-33-p_toc.txt	2021/06/11 20:34:33	116 B
lead.txt	2019/07/29 16:21:49	422 B
message.txt	2019/07/29 16:21:49	10038 B
p_lead.txt	2021/06/11 20:34:33	422 B
p_message.txt	2021/06/11 20:34:33	10038 B
p_toc.txt	2021/06/11 20:34:33	116 B
toc.txt	2019/07/29 16:21:49	116 B

このCMSでできること（公開済）

装飾・タグ(固定/解除)

画像ファイル(固定/解除)

関連記事(固定/解除)

リンク

装飾・タグ画像関連記事

挿入対象コンポーネント

このCMSでできること（公開済）

装飾・タグ(固定/解除)

画像ファイル(固定/解除)

関連記事(固定/解除)

リンク

装飾・タグ 画像 関連記事

挿入対象コンポーネント

装飾・タグ画像関連記事