オリジナル CMS サンプル

当CMS完成までのステップ

このページでは自作CMSの学習を検討中の方向けに完成までのステップをご説明します。

詳細はnoteのオリエンテーションでご紹介しますので、ここではおおよその流れと雰囲気を掴むのにお役立てください。

noteのコンテンツは途中から有料ですが、このページには金額を掲載していません(金額がまだ未確定だから。あと記事のメンテナンス性を考えて)

はじめに

最初に断っておきたいのですが、作成過程は結構地味です。

ファイルを用意して、プログラムを打って、画面確認して、動作確認して・・・の繰り返しになるので、割と根気強さのいる作業です。

それは私も十分理解しているので、ステップごとに明確な「進んだぞ!」という感覚を得ながら進めてもらえるように段取りを組んでいます。

開発環境の構築

まず始めは開発環境の構築です。

開発はxamppで行います。xamppとはweb開発に必要なソフトが一通りそろったパッケージ、と理解してください。

これさえあれば自身のローカル環境に自分専用のwebサーバを立ち上げ、ここにwebサイトやサービスを立ち上げることができます。もちろんローカル環境ですので、他の人がアクセスすることはできません。

最初にいくつかの設定をすれば早速次のステップに進むことができます!

フロント(画面)部分の作成
画面部分は早々に作ってしまいましょう。

サーバ側のロジックを先に作ってしまうと結局目に見える部分は全く進歩しておらずヤキモキさせられることになります。

視覚で分かる部分を充実させながら、徐々に進めていきます。

ここで、「フロント」とか「サーバ側」という言葉を使っていますが、それらの意味は実際の学習の段で詳しく説明しますので、ご安心ください。

各テーブルの作成

つづいて、テーブルの説明です。

テーブルもなんぞや?って感じですよね。これはこちらの記事で説明しています。

テーブルはCMSを構築するにあたって管理する必要のあるデータを格納する箱みたいなものです。

カテゴリを管理する箱、コンテンツを管理する箱、コメントを管理する箱・・・などなど全部で5つあります。

各情報を巧みに連携させながらCMSを実現させます。

編集画面の作成

編集画面の作成です。編集画面は

・タグ挿入ボタンの作成
・画像の登録/削除
・プレビューボタンの実装
・不要ファイル削除機能の実装
・編集内容保存の実装
・関連記事の登録部分の実装
・現在のファイルの表示

・・・と、やることが盛りだくさんです。

それだけCMSの肝ということです。noteではそれぞれ丁寧にご説明します。

おわりに

細かいところは端折りましたが、おおよそこのようなイメージです。

実際は各所にcss(スタイルシート)の編集・調整が入ったり、プログラムやシステムの概念の説明が入ったりするので、結構盛りだくさんになる見込みです。

ステップ的には多いですが、ご自身のペースで進めていただけたらと思います。

ありがとうございました。

関連記事情報

コメント

コメント一覧