オリジナル CMS サンプル
トップ > 当CMSの仕様について > 当CMS完成までのステップ
当CMS完成までのステップ（公開済）
URL：http://original-cms-sample.com/contents/cms/step/
リード文
このページでは自作CMSの学習を検討中の方向けに完成までのステップをご説明します。 詳細はnoteのオリエンテーションでご紹介しますので、ここではおおよその流れと雰囲気を掴むのにお役立てください。 noteのコンテンツは途中から有料ですが、このページには金額を掲載していません（金額がまだ未確定だから。あと記事のメンテナンス性を考えて）
目次
はじめに 開発環境の構築 フロント（画面）部分の作成 各テーブルの作成 編集画面の作成 おわりに
本文
h3:はじめに 最初に断っておきたいのですが、作成過程は結構地味です。 ファイルを用意して、プログラムを打って、画面確認して、動作確認して・・・の繰り返しになるので、割と根気強さのいる作業です。 それは私も十分理解しているので、ステップごとに明確な「進んだぞ！」という感覚を得ながら進めてもらえるように段取りを組んでいます。 /h3: h3:開発環境の構築 まず始めは開発環境の構築です。 開発はxamppで行います。xamppとはweb開発に必要なソフトが一通りそろったパッケージ、と理解してください。 これさえあれば自身のローカル環境に自分専用のwebサーバを立ち上げ、ここにwebサイトやサービスを立ち上げることができます。もちろんローカル環境ですので、他の人がアクセスすることはできません。 最初にいくつかの設定をすれば早速次のステップに進むことができます！ /h3: h3:フロント（画面）部分の作成 画面部分は早々に作ってしまいましょう。 サーバ側のロジックを先に作ってしまうと結局目に見える部分は全く進歩しておらずヤキモキさせられることになります。 視覚で分かる部分を充実させながら、徐々に進めていきます。 ここで、「フロント」とか「サーバ側」という言葉を使っていますが、それらの意味は実際の学習の段で詳しく説明しますので、ご安心ください。 /h3: h3:各テーブルの作成 つづいて、テーブルの説明です。 テーブルもなんぞや？って感じですよね。これは<a href="">こちらの記事</a>で説明しています。 テーブルはCMSを構築するにあたって管理する必要のあるデータを格納する箱みたいなものです。 カテゴリを管理する箱、コンテンツを管理する箱、コメントを管理する箱・・・などなど全部で5つあります。 各情報を巧みに連携させながらCMSを実現させます。 /h3: h3:編集画面の作成 編集画面の作成です。編集画面は ・タグ挿入ボタンの作成 ・画像の登録/削除 ・プレビューボタンの実装 ・不要ファイル削除機能の実装 ・編集内容保存の実装 ・関連記事の登録部分の実装 ・現在のファイルの表示 ・・・と、やることが盛りだくさんです。 それだけCMSの肝ということです。noteではそれぞれ丁寧にご説明します。 /h3: h3:おわりに 細かいところは端折りましたが、おおよそこのようなイメージです。 実際は各所にcss（スタイルシート）の編集・調整が入ったり、プログラムやシステムの概念の説明が入ったりするので、結構盛りだくさんになる見込みです。 ステップ的には多いですが、ご自身のペースで進めていただけたらと思います。 ありがとうございました。 /h3:
関連記事
2,2:このCMSでできること
2,3:このCMSでできないこと
3,1:作り方公開に至った経緯
3,2:自作CMSの最大のメリット
↓このコンテンツのファイル情報↓
ファイル名
更新時刻
サイズ(byte)
2020-07-11_01-07-56-p_lead.txt
2020/07/11 01:07:56
480 B
2020-07-11_01-07-56-p_message.txt
2020/07/11 01:07:56
3159 B
2020-07-11_01-07-56-p_toc.txt
2020/07/11 01:07:56
134 B
2020-11-02_17-41-56-p_lead.txt
2020/11/02 17:41:56
480 B
2020-11-02_17-41-56-p_message.txt
2020/11/02 17:41:56
3159 B
2020-11-02_17-41-56-p_toc.txt
2020/11/02 17:41:56
134 B
2022-05-02_00-55-34-p_lead.txt
2022/05/02 00:55:34
484 B
2022-05-02_00-55-34-p_message.txt
2022/05/02 00:55:34
3218 B
2022-05-02_00-55-34-p_toc.txt
2022/05/02 00:55:34
139 B
2022-05-02_00-56-05-p_lead.txt
2022/05/02 00:56:05
484 B
2022-05-02_00-56-05-p_message.txt
2022/05/02 00:56:05
3218 B
2022-05-02_00-56-05-p_toc.txt
2022/05/02 00:56:05
139 B
2022-05-02_00-56-21-p_lead.txt
2022/05/02 00:56:21
484 B
2022-05-02_00-56-21-p_message.txt
2022/05/02 00:56:21
3218 B
2022-05-02_00-56-21-p_toc.txt
2022/05/02 00:56:21
139 B
2022-05-02_00-56-39-p_lead.txt
2022/05/02 00:56:39
484 B
2022-05-02_00-56-39-p_message.txt
2022/05/02 00:56:39
3218 B
2022-05-02_00-56-39-p_toc.txt
2022/05/02 00:56:39
139 B
2023-04-17_18-40-11-p_lead.txt
2023/04/17 18:40:11
484 B
2023-04-17_18-40-11-p_message.txt
2023/04/17 18:40:11
3218 B
2023-04-17_18-40-11-p_toc.txt
2023/04/17 18:40:11
139 B
2023-04-17_18-40-51-p_lead.txt
2023/04/17 18:40:51
536 B
2023-04-17_18-40-51-p_message.txt
2023/04/17 18:40:51
3218 B
2023-04-17_18-40-51-p_toc.txt
2023/04/17 18:40:51
139 B
2023-04-17_18-41-08-p_lead.txt
2023/04/17 18:41:08
548 B
2023-04-17_18-41-08-p_message.txt
2023/04/17 18:41:08
3218 B
2023-04-17_18-41-08-p_toc.txt
2023/04/17 18:41:08
139 B
2023-04-17_18-41-32-p_lead.txt
2023/04/17 18:41:32
584 B
2023-04-17_18-41-32-p_message.txt
2023/04/17 18:41:32
3218 B
2023-04-17_18-41-32-p_toc.txt
2023/04/17 18:41:32
139 B
lead.txt
2020/03/28 21:15:41
480 B
message.txt
2020/03/28 21:15:41
3159 B
p_lead.txt
2023/04/17 18:41:32
584 B
p_message.txt
2023/04/17 18:41:32
3218 B
p_toc.txt
2023/04/17 18:41:32
139 B
toc.txt
2020/03/28 21:15:41
134 B
装飾・タグ(
固定
/
解除
)
太字
赤太字
青太字
蛍光ペン
取り消し線
下線
文中改行
大きめ
小さめ
言葉
コメントアウト
画像ファイル(
固定
/
解除
)
index.png
index2.png
関連記事(
固定
/
解除
)
作業進捗
このCMSでできること
このCMSでできないこと
当CMS完成までのステップ
プロパティの種類と設定方法
用意するテーブルたち
記事のつくりかた
作り方公開に至った経緯
自作CMSの最大のメリット
主のプロフィール
有料コンテンツにしている理由
noteの自作CMSの作り方記事が#10までいきました
サンプルページ
好きに触っていいページ２
再現用ファイル群受付用ページ
テスト
リンク
記事情報の更新
記事情報の削除
装飾・タグ
画像
関連記事
挿入対象コンポーネント
リード
目次
メッセージ
関連記事
プレビュー
お掃除
目次反映
