管理(admin)画面作成の基本

弊社では、ウェブアプリケーションやシステムを作成する際に、社内向けや運営者向けに簡単な管理画面を作って欲しいと依頼されることがよくあります。

ここでいう管理画面とは、ここではwebアプリケーション等のデータベースを管理するための、運用サイドの画面のことを指し、初めて管理画面を作成するエンジニア向けに、管理画面の特徴や作成時の注意点について解説していきたいと思います。

管理画面に必要な要素

管理画面では、以下の要素は基本的に必須となります。1つずつ解説していこうと思います。

  • 管理者のログイン・ログアウト
  • データのCRUD(追加・閲覧・編集・削除)
  • セキュリティ対策

管理者のログイン・ログアウト

管理画面では、データの管理を行うことが想定されるので、あらゆるユーザーに自由にアクセス出来ては困ります。また、管理者毎に権限をつける事や、どの管理者がどのような操作をしたというログを取っておくためにログインをつける事が多いです。

IP制限等を行っているサーバー等アクセスが限られている場合、簡易的にログイン無しで管理画面を作る場合も稀にあります。

データのCRUD(追加・閲覧・編集・削除)

管理したいデータの追加・閲覧・編集・削除が出来るような画面を作成します。

それぞれの機能が実現出来ればよいのですが、管理画面のデザインテンプレート等を見ていると、下記の画面と機能を用意することが多いかと思います。

こちらの記事にて管理画面に有用なデザイン・ツールをご紹介しているので気になる方はご覧下さい。

  • 一覧画面
    • 詳細ボタン
    • 編集ボタン
    • 削除ボタン
  • 詳細画面
    • 削除ボタン

セキュリティ対策

管理画面ではデータを管理できるため、セキュリティ対策は必須です。管理画面が公開されている場所においてある場合は、下記の点を注意して作成しましょう。

◎は必須、○は出来れば設定したほうがよい項目となります。

  • ◎SSLを使用する
  • ◎アクセスログを取得・保管する
  • ◎ログイン・編集ログを取得・保管する
  • ○PHP等、モジュールのバージョンを最新安定版にする
  • ○ログインパスワードを簡単な値にセット出来ないようにする

よく管理画面で実装される機能

また、必須ではないですが、よく管理画面で必要になってくる要素としては以下が挙げられます。

  • 管理者権限設定機能
  • 適切なバリデーション
  • ログ機能
  • データの検索機能
  • CSVダウンロード/アップロード
  • グラフや集計結果の表示

管理者権限設定機能

管理者毎にどのデータを閲覧・挿入・編集・削除できるかを設定できる機能です。複数人管理者がいる場合で、権限を分けたい場合は必要になってくる機能となります。

適切なバリデーション

バリデーションとは、フォームの入力値のチェックのことです。

例えば、データベースはint型なのに文字列が送られてきたり、日付型なのに違うフォーマットで送られてきたりする場合にエラーを出力します。

この実装は通常サーバーサイドで行います。フロントエンドでJavaScriptを使用してバリデーションを行うこともありますが、その場合でもサーバーでのバリデーションは必須です。

ログ機能

管理画面では、重要なデータを扱うことが多いため、どのデータをいつ、誰か追加・編集・削除したのかというログを取っておくことは、後のトラブル回避や原因追求するためにも重要です。

データが編集された場合には、編集前と編集後のデータの差分を取っておくと、よりよいでしょう。

データの検索機能

データの検索フォームを作成し、検索内容に応じて一覧画面に表示するデータを変えるような作りが一般的です。

検索での注意点は、完全一致にするのか部分一致にするのか。

また、日付・時間の場合はFROM/TOを指定させる方が良いかどうか等があります。

CSVダウンロード/アップロード

こちらは結構依頼されることが多い機能です。データを管理画面ではなく、CSVで一括管理してアップロードにて反映したり、現在のデータをCSVとしてダウンロードして分析したいという要望です。

CSVは一覧画面のデータをそのままダウンロードしてくることが多いですが、windowsの場合enchodingをShift-JISにしてダウンロードさせるよう注意しましょう。(Excelで文字化けしてしまいます。)

グラフや集計結果の表示

管理画面にはダッシュボードページを実装し、ダッシュボードページ上でデータの集計結果やグラフ・チャートを表示することが多いです。

ここではgoogle chart等のJavaScriptのチャート作成ライブラリを活用すると比較的簡単にデータからチャートを作成出来るのでおすすめです。

安全な管理画面を簡単に作成するには

時間がない方や、豊富な機能を使いたい方用に、弊社では【Pigeon Framework】という簡単な管理画面作成ツールを提供しています。

以下の機能をインストールするだけで使うことが可能です。

主要機能

・データベースから一覧・詳細・編集画面の自動生成
・グラフ・チャートの自動生成
・選択形式、ラジオボタン、リッチテキストエディタ、画像・ファイルアップロード等様々な形式のフォームに対応
・スマートフォンやタブレットに対応
・データ検索機能
・CSVでのダウンロード・アップロード
・管理者権限の設定
・自動ログ記録機能
・自分の作成したコンテンツだけを編集出来る「サブ管理者」機能

こちらよりデモを触ることができます。