自作CMSの作り方#1 オリエンテーション編

こんにちは。Suipediaです(∩´∀｀)∩。

この連載企画「自作CMSの作り方」では今回を含めた全24回にわたり0からの自分オリジナルCMS（コンテンツマネジメントシステム）の作り方をレクチャーします。

（サーバにアップする編として25～27回を追加しました（マガジン外）。2020/09）

・プログラミングの勉強を始めたものの行き詰っている方、

・なにか作ってみたいけど何をしたらいいか分からない方、

・まだまだ初心者でプログラミングって何をするのかもわからない方

などに是非活用いただければと思います。

第1回目のこのページでは完成するのはどんなCMSなのか、作るにあたって必要な技術は？必要なレベルは？必要な時間は？・・・などについてご説明します。

開発環境の構築以降は有料コンテンツとなりますので、このページと実際のサンプルCMSを見て作ってみるかどうかを判断してください。

あなたが作るCMSはこちら

それでは早速制作対象のCMSをご紹介しましょう。

こちらです。『オリジナルCMSサンプル』というタイトルのサイトです。

こちらは自作CMSのサンプルとしてだけの理由で存在しています。

ですから、用意されたコンテンツを読むことはもちろん、実際に記事を作成・編集・削除等の操作をあなたにしていただけます。

詳しい操作方法はここで説明すると長くなるので、サンプルCMSの方に譲ります。

記事のつくりかたやこのCMSでできることというページではだいたいの仕様や実際の動かし方が分かります。もちろん他のページも覗いてみてください。

使用している技術や内部構造についてご説明しています。詳細はこのnoteにて案内していきますので、今よくわからなくても不安を抱くことはありません。

使用する技術

次に、CMSの作成において使用する技術を紹介します。

HTML、CSS、PHP、JQuery、JavaScript、MySQLが主に使用する技術、言語です。

CMSの肝はどちらかというと見た目のデザイン部分ではなく内部ロジックやファイルの構成、データの持ち方等です。

ですので、HTML・CSSの説明については少々薄味になることは予め理解しておいてください。もちろん質問等をいただけたら丁寧に回答します。

※2023/11/14 追記
MacOSの場合、ご質問をいただいても私の手元で再現できる環境がありませんので、回答しかねます。予めご了承ください。

必要な技術レベル

できれば「初心者でも簡単！」という謳い文句をつけたかったですが、正直言うと全く丸腰の初心者はまま苦労すると思います。

連載内の内容だけでは理解が追い付かない、説明が足りない場合はその都度他のサイトでも知識を補完しながら進めてみましょう。

入門書を一冊終えてからか、入門書を傍に置いてすすめられるとよいでしょう。

プログラミング初心者は最初苦労するかもしれませんが、はじめのうちは「そういうものなんだ」という感じでコピペするだけでも構いません。

実際に書いて、動きを確認して、その過程でなんとな～く理解していければOKです。プログラミングって一度で完璧に理解できることはそうそうないので、何周かしていただいて、徐々にあなた自身に浸透されるようなイメージで臨まれるといいです。

プログラミングは習うより慣れろって習いましたから(^_^;)

HTMLやCSS、PHP、MySQLの経験がある程度ある方であれば、内容としてはそれらの応用編です。要はもっている知識をどのように組み合わせるか、という話になります。

ご自身の技術や視野を広げるために是非活用してください。

完成までにかかる時間

毎日1～2時間、作業ができる場合でおよそ1ヶ月程度とみています。全24回なのでやらない日があっても一カ月くらいでしょう。

もちろんただただコピー＆ペーストを繰り返していくのか、ちゃんと理解してから次にいくのかでも進むペースは変わってきますので、あくまでおおよその目安です。

お仕事をされている方は仕事の日はお忙しいと思います。そんなときは休日だけに絞って気長にゆるゆるとやっていきましょう。

ただ、あまり間をあけすぎると再開したときにどこまで進んでいたのか、なにをやっていたのかが分からなくなります。鉄は熱いうちに打て的なテンションでやってください。

最後までやりきるためのコツ

プログラミング技術をグッと上達させるコツは「作りたい！」という想いを強くもって実際に手を動かすことです。

それを本連載は叶えるわけですが、実際に「作りたい！」「完成させたい！」という想いが継続するのは（私の経験では）自身が作成するシステムなりサービスを使ってやりたいことがあるからです。

ですから、自作CMSができたらそこで終わりではなくサーバにあげてブログとして運用をスタートしてもいいですし、もっとカスタマイズを加えて自分専用の個性の尖ったCMSまで昇華させるのもありです。

作る過程でこの連載が終えたとき、次にどんな動きをするかも考えながら取り組めるとGoodです。

各回の内容を簡単に紹介

2020/01/18に最終回を迎え、CMSの作り方に関してすべてをお伝えすることが叶いました。

以下に各回の概要と所感を伝えます。

■自作CMSの作り方#2 開発環境の構築

使用OSの案内、XAMPPの説明～ダウンロード～インストール、標準ページの表示をやります。この段階はまだCMSの開発は始まっておらず準備段階なので、ぶっちゃけつまらないと思います。我慢してください。

■自作CMSの作り方#3 xamppの初期設定とエディタの準備

XAMPPの初期設定、開発エディタのインストール、開発のための設定を少し、の内容でお届けします。この回も準備段階なので、淡々と説明通りに手を動かしてください。各種説明は「へ～」くらいで流していただいてOKです。

■自作CMSの作り方#4 トップページを作ろう

いよいよ開発を始めます。index.htmlというファイルでトップページを作ります。HTMLソースの大まかな作りとCSS（カスケーディングスタイルシート）についてご理解いただくのが目的です。難しい方はググって知識を補完しながら進めていただけるとGoodです(・∀・)。

■自作CMSの作り方#5 テンプレート機構を実装する（300円）

CMSとして各種ページを作成していくための基盤を作ります。この回からPHPというプログラミング言語が登場します。

■自作CMSの作り方#6 データベースと連携する（200円）

『データベース』について学習します。CMSではデータベースとの連携が必須なので、その基礎となる内容です。データベースにテーブルを作成し、データを取得するところまでをやりますが、CMSの作成的にはあまり進展しないのですこし退屈かもしれません。我慢してください(´Д⊂ヽ

■自作CMSの作り方#7 トップページに新着情報を表示する（300円）

この回から一気に本格的な作成が始まります。PHPプログラミングもバンバン出てきます。難しい！と感じた方は入門書をそばに置き、またいろんなサイトで調べながら進めましょう。

■自作CMSの作り方#8 サイドメニューを実装する（300円）

ここまでで、トップページのメイン部分ができたので、次にサイドメニューを作ります。#5（テンプレート機構）の実装でサイトの共通部分の実装は各ページに自動的に反映されるようにしたので、この回の実装はサイトのデザインとして非常に重要な回です。まだ材料不足で詳細な実装ができないところもあるので、後続記事への布石をたくさん置く内容になっています。

■自作CMSの作り方#9 管理者ページをつくる。その１（200円）

CMSの肝である管理者ページの実装に取り掛かります。管理者ページ編は全部で5回ありますが、第一回目は管理者用のトップページを作ります。ここでも#6でやったデータベースとの連携が生きてきます。

■自作CMSの作り方#10 管理者ページをつくる。その２（300円）

この回では各テーブルのリストページを作成します。「テーブル」については進める中で理解できますのでご安心を。ただ、実装内容のレベルとしてはグッと上がります。書いてある通りに手を動かせば作成は進みますが、理解がおぼつかない場合は「ふ～ん」と思いながらついてきてください。理解はあとからついてくるものです。

■自作CMSの作り方#11 管理者ページをつくる。その３（300円）

これまではデータベースに対してデータを取得するだけだったのですが、この回はデータを登録します。画面の入力値をサーバに飛ばす方法や登録する方法を学びます。どんなテーブルでも一つのソースコードで対応できるようにしている都合で、この回も#10同様に難しいと思います。

■自作CMSの作り方#12 管理者ページをつくる。その４（300円）

この回はデータベースへの更新をやります。#11の登録ではデータを新たに作る、という内容でしたが更新はすでにあるデータに対して干渉する、という点が大きな違いです。この回も割とボリュームがあるので心してかかってください。

■自作CMSの作り方#13 管理者ページをつくる。その５（100円）

管理者ページ編の最後は削除処理の実装です。#11,#12の内容でカバーできている（流用できる）ところが多いため、この回は割とサクッと終わります。

■自作CMSの作り方#14 カテゴリ/アーカイブ内の記事一覧を実装（200円）

管理者ページの実装が終わりまして、ユーザに見える部分の実装に戻ります。この回では#8で置いたサイドメニューの布石を回収します。#8時点では材料不足や背景知識のなさから早いと判断し、割愛したところの実装です。ここまでで作った関数（これも進める中で理解できる）を使いまわせるので、割とすんなりいくかと思います。

■自作CMSの作り方#15 記事編集のメイン部分を実装する（200円）

いよいよ、記事を編集する部分の実装です。この回では開発時にたまにお世話になるGitHubに触れています。というか実際にお世話になります。

■自作CMSの作り方#16 記事編集のサイド部分を実装する（300円）

サイドメニューの作成は#8で行ったのですが、この回では編集ページ専用のサイドメニューを作ります。いろんな要素が盛りだくさんで説明がかなり長くなるので詳細な部分は#19でご説明するようにしています。

■自作CMSの作り方#17 記事の内容を保存する（200円）

編集ページが少しずつできてきていますが、編集した内容を保存する部分を学びます。このCMSはデータベースではなくテキストファイルに保存するので、PHPプログラミングでテキストファイルを作成し保存する、という処理を実装します。

■自作CMSの作り方#18 コンテンツを表示する（300円）

ここまでで、編集した内容を保存することができました。この回ではその保存した内容をユーザ向けに表示する部分を実装します。なかなかハードな内容ですので、一度で理解できなくて当然！くらいの気持ちで臨んでいただけますと幸いです。

■自作CMSの作り方#19 編集時の各処理について（300円）

#16で編集時のサイドメニューを作ったのですが、各要素の内部処理の実装や説明は追いついていない、という状況でした。それを回収するのがこの回です。この回を終えると記事の作成・編集についてはひととおりできることになります。

■自作CMSの作り方#20 関連記事の設定を実装する（200円）

記事ページの下部にある「関連記事」を実装します。関連記事の登録～更新～削除～表示を学びます。ここではこれまで出てこなかった「デリートインサート」の方法で実装します。

■自作CMSの作り方#21 コメントの投稿/表示を作る（200円）

コメントの投稿フォームと登録処理、管理方法を学習します。ここまでくるとこれまでにお伝えしてきた内容、蓄えてきた知識でほぼほぼカバーできるので楽勝だと思います。

■自作CMSの作り方#22 プロパティの制御を実装する（300円）

プロパティについて学びます。プロパティの制御はCMSとしてはオプション的な立ち位置ですが、実装をより楽しくしたり、あなた独自の個性の尖ったオリジナルCMSへと発展させるヒントがふんだんに盛り込まれた内容となってます。

■自作CMSの作り方#23 やり残したことを回収する（300円）

ここまでの学習でやり残したことを回収します。手を動かしていただくのはこの回が実質最後です。サイトとしての見栄えを整えたり、記事中に関連記事を挿入したり、スムーズスクロールを実装したり、レスポンシブデザインであることを確認したり・・・まあいろいろやります(笑

■自作CMSの作り方#24（最終回） ふりかえりとごあいさつ

いよいよ最後です。最後は実装等はせずに純粋な振り返り・ご挨拶の内容です。私が実際にこのCMSを改修して適用している自身のサイトを紹介したり、これからの拡張性、発展性についてご説明しています。

購読マガジンについて（2020/1/30価格改定）

有料部分についてパッケージングしたマガジンを用意しています。

※2020/1/30　価格改定しました。（早期に購入された方、ごめんなさい）

■前半・後半バージョン
前半（#5～12）は単体購入だと2200円のところを1600円にしています。
後半（#13～23）は単体購入だと2600円のところを2000円にしています。

■全編バージョン
全編収録版は単体購入だと4800円のところを3200円にしています。

→全編収録版の価格を3000円にしました。（2020/07/01～）

というわけで、前半後半分けてご購入いただくと合計1200円のお得！

全編バージョンだと1600円のお得！です。
→1800円のお得！（2020/07/01～）

こちらのPHP教本（私もやりました）はPHPの基礎の基礎を扱っていますが、発展編としてより込み入った実装を行うこの『自作CMSの作り方』の連載は決して高い値段ではないです。

難しいと思われた方へ --2020/4/11追記

自作CMSの開発をやってみたいが、プログラム初心者で自信がないという方へ。もうひとつシステム開発の連載をご用意しています。

掲示板システムの作り方で全19回の内容です。

自作CMSより内容がシンプルでまた実装内容も簡単です。（簡単と言ってもそれなりに手ごたえはあります。）

つくる掲示板は

こんなのです(∩´∀｀)∩。第一回目はこちら↓！

すべて終えた方の感想（2020/06/30 追記）

月を重ねるごとに、マガジンをご購入いただけることが増えてきまして、そうなると当然、本連載をすべてクリアした、という方も出てくるようになりました。

ここではその感想を一部紹介させてください。

この24回に渡るレクチャーノートは、私がこれまでに読んだWeb技術に関する文章の中で最も刺激的な内容でした。目からウロコが落ちることの連続で、すっかりウロコが無くなってしまいました（笑）
～中略～
こんな素人にもとても分かりやすい、すばらしいレクチャーでした。
ありがとうございました。

上記は#24のコメント欄で全文をご覧いただけます。

今回のプログラミング体験では、
CMSの大まかな枠組みは理解できましたが
私が全くの初心者ということもあり、現段階では、
あまり深いところまで、理解できていません。

でも、自分が作ったものが画面に表示され、
動作が確認できた時は、ｷﾀ━(ﾟ∀ﾟ)━! というのが、
まさにピッタリな感情を味わうことが出来ました。

この連載でプログラミングの楽しさ、面白さを
知ることが出来たのは大きな収穫です。

作りたいものを作るって大事ですね。
ありがとうございました。

こちらのコメントは#21のコメント欄にいただいたものです。（#24までクリアされてからこちらに書き込まれました）

おわりに

ここまでで実際のサンプルCMSと使用する技術、必要なレベル、かかる時間、続けるコツ、各回のだいたいの内容、マガジンについて、をお伝えしました。

次は早速開発環境の構築に入っていきましょう。

初めての方は不安も多かろうと思いますが、できるだけ画面キャプチャを多く張って書いてあるとおりにやりさえすればうまくいく、という説明を心がけます。

どうぞよろしくお願いします。↓次回。