こんにちは!!最近ガンプラ作りたいなーと思っているS.K.です。
息子がガンプラを作っているのを見て、何となく私も作りたいな～と思いつつ、作り切れる自信がなくて、なかなか踏み切れないんですよね。
素組み(切って組み立てるだけのことです)するだけなら、2時間くらいでできると思うのですが、切ったところの処理したり、スミ入れたり、塗装したりしようと思うと数日単位で時間がかかるので…
息子は時間も忘れてやっているので、ある意味うらやましいな～と思いながら見ています。
まあ、本当に時間を忘れて、宿題も忘れてやっているときもあるので、前回の記事で紹介した「やることりすと」を思いついたのもあるんですけどね。NOダラダラ!!
さて、今回は前回作った「やることりすと」の管理画面の紹介です。
こういったなんらかのデータを表示するようなものだと、後々編集がしたくなることがよくあります。
それほど時間がたっていなければ、プログラムやデータを直接修正することも可能ですが、数か月ぐらいたっていると何書いてあるかとかどこにファイルがあるかを忘れているんですよね（私だけかも…）
そうなったら編集するのにプログラムを読んでいって修正をかけるわけです。
それに、プログラムやデータを修正すると言っていも、目の前にソースコードを修正できたり、サーバーにアクセスできる環境があるとは限らないですよね？ちょっと変えたいだけなので、家に帰ってあれこれしないといけないのは、
はっきりいってめんどくさい!!
そんなことを考えるなら、管理画面を作ってスマホからちょいちょいと修正かけたほうが楽ちんです。
また、管理画面を作ることで、私だけでなく、管理画面にアクセスできる誰もが編集できるので、ちょっと手が離せないから修正しておいて!!ということもできるようになります。
ということで、そんなメリットが大きい管理画面を作ってみました。（まあ、作るの大変なんですけどね（汗））
管理画面を作ろう!!何を管理できるようにする??
今回は、やることりすとの仕様上、管理画面というよりは編集画面に近いのですが、どんなことができると便利かを考えて作っていきました。
内容はこんな感じです。
- やることりすとの項目の編集、追加、削除
- やることりすとの画像の編集、追加、削除
- OK画像の追加、削除
- Clear画像の追加、削除
- たまごこれくしょん画像の追加、削除
- ローカルストレージのフルリセット
それぞれの内容には、こんな時はこうしたいという思いがあります。
例えば、こどもが何か習い事を始めたら、それに合わせて項目を編集したい と言った理由です。
毛色が違うのがローカルストレージのフルリセットですが、プログラムの動作テストをする際に便利なので追加しました。
さて、前置きが長くなりましたが、いつも通りできたものはこのようになっています。
管理画面の動作
やることりすとはJavaScriptがメインでしたが、この管理画面はPHPをメインで使っています。
DBは使っておらず、CSVにやることりすとの項目を入れているので、管理画面からCSVのデータを読み込んで、編集するときは上書きをしている感じですね。
画像を追加・削除するのもそれぞれ関数を作って、フォルダ内を操作しているイメージです。
画像の種類が
- やることりすとの画像
- OK画像
- Clear画像
- たまごこれくしょん画像
と複数あるので、取得しやすいようにフォルダ構成に少し悩んだくらいでしょうか？
あとはそれほど難しい操作をしているわけではないので、気になる人は試してみると良いと思います。むしろ、慣れていないと画面構成（HTML,CSS）に手間取るかも(笑)
ちなみにJavaScriptを使って、画像を選択したときにプレビューを出せるようにしてます。
まとめ
これ管理画面を作った後すぐに、どくしょの項目を追加する必要が出たため、管理画面から追加しています。
データを直接触ると危険なこともあるので、こういった管理画面があると、やはり便利ですね!
通常はDBを組み合わせて、SQLを書いてといった作業もあるかと思いますので、自分でSQL文を書けるといいですね!
今回は以上です。
