CMS制作に際して気を配った点。学びになった点など。

今回WardPressに頼らず独自に農家さん向けCMSを1から制作する中で、気を配った点や苦労した点。

またはそれによって、得られた学びなどについてざっくりまとめてみたいと思います。

開発環境

まずサイト自体はLAMP環境で動いてます。

と言ってもLinax、Apache、その他、エックスサーバーというレンタルサーバーを元々契約していたのでそちらで諸々提供されている機能(phpMyAdmin等)を利用させてもらってます。

開発過程で使用したソフトについてですが、ワイヤーフレームはPhotoshop。IDEはCloud9。テキストエディタはATOMをそれぞれ導入して制作を進めました。

今回ちゃんとワイヤーフレームを作ってwebサイトを構築するというのは初めての試みだったのですが、これはPhotoshopの操作練習も兼ねてのことでした。

前回の記事でもお伝えしたのですが、ロゴやボタンなんかの素材を拾ってくるのではなく自分でちゃんと作ってみたので、基礎の基礎という意味では少し慣れることができたのではないかと思います。

残念だったのは、自分の学習スピードが追いつかず、PHPに関してはフレームワークの使用にまで至らなかったという点です。

と言っても、本来フレームワークは効率的な開発を実現するためにあるものだと思うので、その意味での矛盾感は拭えないのですが…

もっと早い段階で、Laravelやcake等の勉強を開始しておけば良かったと後悔しています。

CSSのフレームワークに関しては、このブログではfoundationを使っているのですが、今回の制作物では特に何も使用しませんでした。

ソースコードはGitHubの方に上げています。

制作にかかった期間、時間

一週間、そして凡そですが50時間くらいではないかと思います。

  • 初日PHPコーディング。
  • 2日目、ワイヤーフレーム作成。
  • 3、4日目、HTML,CSSコーディング。
  • 5、6日目、マークアップにPHPを組み込む、整形。
  • 7日目、テスト、UXについて気づいた点などの改善。

と言った感じです。かなりざっくりですが。

その後改善等で20〜30時間くらいかけているのが現在の状況です。

それではちょっと考えて実装してみたところや、苦労した点などを振り返ってみたいと思います。

入力バーリデーションをどうするか。

制作物は農家さんが使うことを想定したCMSということで、管理画面の操作性をなるべく簡易、明瞭にすることを心がけました。

そこで、「入力したのになんだかうまくいかない」。「反映されない」。といった事態を招かないよう、その抑止策としてformを使った入力をどこまで、どの程度厳密に行うか?について自分なりに考えてみました。

ホームページ側のログイン機能等については、スペースの入力を全て禁止してしまうと、もしかしたら農家さんは商品名やコメントの文章の間にスペースを入れたいかもしれません。

それなので、管理画面は管理画面で別途に実装する必要性などが見えてきました。

通常の未入力はHTML5のプロパティで便利なrequiredのタグなんかで対応できちゃうのですが、困ったことにスペースだけ入力された場合はsubmitの際に引っかかってくれないことに今回テストしていて気づきました。

これに関してはREQUESTを受け取る側の方で、入力値をtrim関数を使い前後の空白を詰めた上で、文章間に含まれる空白のみを認識させるようにしたらうまくいってくれました。

また、商品の数量や、価格の入力についても、農家さんは全角で入力するかもしれません。なので、全角は半角に変換処理してあげた上で、数字以外の入力をエラーにしてあげることで、一応何とかこれもうまくいきました。

ただしその他セキュリティに関しては多々実装漏れがあるので、(とりあえず間に合わせでBasic認証してますが)少しずつ実装を進めていきたい次第です。

画像の置き場をどうするか。

どんなのが鉄板のやり方なのかなぁと検索して調べてみたりしました。とりあえずですが、自分の既成の知識技術で手っ取り早くできそうだったので普通にディレクトリの中に入れて、DBに登録した商品テーブルの名前と紐づけて取得することにしました。

と言っても登録時の画像ファイルの名前が色々なので、rename関数で名前の値を付与し、拡張子も変更してやることで解決しました。

商品説明欄の「はみ出し」をどうするか。

画面の構成上、商品詳細に表示されるコメントの枠が限られているので、短いコメントなら全然OKなのですが、もしかしたら、農家さんは事細かく商品栽培の経緯とか、そこに込められた愛情などをコメントに書きたいかもしれません。

なので200字まで入力可能にしたのですが、フォントサイズを文字数に応じて変更してあげないと当然のことながら説明枠からのはみ出し現象が起きてしまいます。

ということでmodelの方で、条件分岐でフォントサイズを変更するユーザー定義関数を作っておき、viewの方では、mb_strlen関数で吐き出された文字数を、先ほどの関数の引数に与えてあげることで何とか解決が図られました。

まとめ

途中途中で、マークアップが意図した表示にならなかったり、と、思いきやFlexBoxの便利さに驚愕したり、
割と簡単にできるんだろうなぁ、と思いきや、実際書いてみるとその通り動かなかったり。

プログラム書いたのに進めていくうちに実はHTML、CSSで簡単に実装できることが判明したりと、ところどころで苦労や喜びがありました。

また反省点としては設計の甘さで、やはりきちんとした設計があって初めてスムーズな作業、その先にあるクオリティがあるのだなぁと強く実感しました。

ワイヤーフレームではボーダーのピクセル数の誤算があったり、CSSなどももうちょっとモジュール化できそうなところを厳密に炙り出してから作業に移った方が結果的に自分が楽なんだなという気付きなんかもあったりしました。

まだまだコードに冗長な部分が多いことに加えて今回沢山の方から頂いたレビューもあり、現時点でissue山積み状態なので自身の技術力向上も含め、今後も制作物には度々向き合っていきたいと思っています。

今回の制作は正直自分にとってかなり勉強になりました。