管理画面2019.08.31管理(admin)画面作成の基本TweetShareHatena弊社では、ウェブアプリケーションやシステムを作成する際に、社内向けや運営者向けに簡単な管理画面を作って欲しいと依頼されることがよくあります。ここでいう管理画面とは、ここではwebアプリケーション等のデータベースを管理するための、運用サイドの画面のことを指し、初めて管理画面を作成するエンジニア向けに、管理画面の特徴や作成時の注意点について解説していきたいと思います。管理画面では、以下の要素は基本的に必須となります。1つずつ解説していこうと思います。管理者のログイン・ログアウト管理画面では、データの管理を行うことが想定されるので、あらゆるユーザーに自由にアクセス出来ては困ります。管理者毎に権限をつける事や、どの管理者がどのような操作をしたというログを取っておくためにログインをつける事が多いです。IP制限等を行っているサーバー等アクセスが限られている場合、簡易的にログイン無しで管理画面を作る場合も稀にあります。出来るような画面を作成します。それぞれの機能が実現出来ればよいのですが、管理画面のデザインテンプレート等を見ていると、下記の画面と機能を用意することが多いかと思います。こちらの記事にて管理画面に有用なデザイン・ツールをご紹介しているので気になる方はご覧下さい。管理画面ではデータを管理できるため、セキュリティ対策は必須です。管理画面が公開されている場所においてある場合は、下記の点を注意して作成しましょう。◎は必須、○は出来れば設定したほうがよい項目となります。できるかを設定できる機能です。複数人管理者がいる場合で、権限を分けたい場合は必要になってくる機能となります。適切なバリデーションバリデーションとは、フォームの入力値のチェックのことです。データベースはint型なのに文字列が送られてきたり、日付型なのに違うフォーマットで送られてきたりする場合にエラーを出力します。この実装は通常サーバーサイドで行います。フロントエンドでJavaScriptを使用してバリデーションを行うこともありますが、その場合でもサーバーでのバリデーションは必須です。管理画面では、重要なデータを扱うことが多いため、どのデータをいつ、誰か追加・編集・削除したのかというログを取っておくことは、後のトラブル回避や原因追求するためにも重要です。データが編集された場合には、編集前と編集後のデータの差分を取っておくと、よりよいでしょう。データの検索機能データの検索フォームを作成し、検索内容に応じて一覧画面に表示するデータを変えるような作りが一般的です。検索での注意点は、完全一致にするのか部分一致にするのか。日付・時間の場合はFROM/TOを指定させる方が良いかどうか等があります。CSVダウンロード/アップロードこちらは結構依頼されることが多い機能です。データを管理画面ではなく、CSVで一括管理してアップロードにて反映したり、現在のデータをCSVとしてダウンロードして分析したいという要望です。CSVは一覧画面のデータをそのままダウンロードしてくることが多いですが、windowsの場合enchodingをShift-JISにしてダウンロードさせるよう注意しましょう。(Excelで文字化けしてしまいます。管理画面にはダッシュボードページを実装し、ダッシュボードページ上でデータの集計結果やグラフ・チャートを表示することが多いです。chart等のJavaScriptのチャート作成ライブラリを活用すると比較的簡単にデータからチャートを作成出来るのでおすすめです。Framework】という簡単な管理画面作成ツールを提供しています。以下の機能をインストールするだけで使うことが可能です。・自分の作成したコンテンツだけを編集出来る「サブ管理者」機能こちらよりデモを触ることができます。