WordPressのようなBlog編集機能を作成できないか
私がホームページを作成する場合、WordPress等を使わずHTML、CSS、PHPにて作成しています。しかし、Blog等を運用するクライアントにとっては、直感的に記事の作成、操作、編集ができるWordPressの方が利便性が高いのは間違いありません。しかし、工事記録や社内行事などの記事をより、簡単に、手軽に、直感的に作成、操作が可能なBlog作成編集機能に少なからずニーズがあるのではと思い、Blog記事作成機能を作成してみました。（このページ及びBlog内の記事はこのブログ記事作成機能を使って作成しました。）
1. 要件
- 簡単な社内記事、記録を作成対象とし、専門的な知識がなくても簡単に記事作成ができること。
- 新規作成、編集時の直感的に操作が可能であること。
- タイトル、記事、画像等の追加が簡単にできること。
- タイトル、記事、画像の表示順番を自由に入れ替え可能にすること。
- 一度使用した画像を再利用可能にすること。
- 表示される記事画面はホームページの表示に合わせたものであること。
- 画面を表示した時にレイアウト崩れが発生しないようにすること。
- 記事作成、編集途中でプレビュー画面で実際の表示を確認できるようにすること。
- カテゴリー、タグで分類分けを可能にすること。
- ログイン機能があり、セキュリティ対策がされていること。
- 管理者、記事管理者の登録と権限制限を可能にすること。
2.ログイン機能
セキュリテイ対策としてBlog編集画面ログイン機能を実装しました。
- ユーザー名、パスワードでログイン。
- ユーザー、パスワードは管理画面内の登録画面で登録、削除、編集が可能。
- 管理者編集登録画面にアクセスできるのは管理権限者のみ。
- 記事編集画面のみアクセスできる権限を実装。
3. 記事編集画面入力項目
固定選択入力項目
固定項目：公開日、タイトル、サブタイトル、タグ、アイキャッチ画像
選択項目：カテゴリー（新カテゴリー追加可能）
アイキャッチ画像の追加
新しい画像を追加する場合はファイルから、過去使用した画像を追加する場合はメディアから選択。
本文内を構成する追加ブロック
追加ブロック一覧から追加したいブロックをクリックし本文に追加。
追加したブロックを好きな順番の位置へドラックアンドドロップで移動。
追加ブロック一覧
- 見出し
- テキスト
- リスト
- 写真１枚
- 写真２枚
- 写真３枚
- 写真４枚
- 右写真左テキスト
- 左写真右テキスト
- 動画（YouTube画像埋め込み）
- 引用
- 区切り線
２.編集の自由性
直感的に、また自由に編集できるようにするため、自由項目：見出し、テキスト、リスト、写真１枚、写真２枚、写真３枚、写真４枚、右写真左テキスト、左写真右テキスト、動画、引用、区切り線を追加ブロックにしました。追加ブロックにすることで、Blogの記事の構成を自由に配置できるようにしています。また、順番の入れ替え、例えば写真の位置を後ろから前に変更等も、ドラックアンドドロップで直感的入れ替えが可能なようにしました。当然､モバイル端末からの記事のアップロードも想定し、編集画面もモバイル対応にしました。
3. プレビュー機能
編集中と編集後の確定画面でそれぞれ、実際に表示される画面を確認できるプレビュー機能を実装しました。
編集中では、画面下のプレビューボタンを押すと、別画面でプレビュー画面が開きます。
編集後の確定画面では画面内にプレビューが表示されます。
編集中でも実際に表示される画面を確認しながら編集ができるようにしました。
4．記事の管理
作成した記事は管理画面トップに一覧として表示されます。この画面から編集、削除が可能となっています。
WordPressは標準のブロックエディタは非常に開発が進んでおり、表（テーブル）の作成、アコーディオン（よくある質問）、カラム（段組み）の比率変更、SNS（X/Instagram等）の埋め込みなどが、マウス操作だけで直感的に行えます。また各種機能のプラグインも数万種類あり簡単に導入可能です。それに対し、このブログ作成機能は本当に必要最小限です。しかし、軽量なためサクサク動きますし、ニーズに合わせて必要な機能だけを追加していくことも出来ます。WordPress並みにすることは難しいですが、機能を絞り込み、本当に必要な機能だけで構成し、操作や記事の追加が簡単であることも継続性では大事です。実際に会社の業務で使用するものは限定された機能であることが多いものです。必要最小限の構成で、毎日簡単にが、この機能のコンセプトです。