【完成】ポートフォリオ用ショッピングサイトの制作
前回、新たなポートフォリオを作成しているとの日記を書きましたが、随分日が経ってしまいました。
しかし、ようやく簡易ショッピングサイトが正式に完成し、サーバーにUP出来ましたので報告致します。
今回ショッピングサイトを作るきっかけでもあり、多くの内容を参考にさせて頂いたのが、谷藤賢一氏著書の『気づけばプロ並み PHP ショッピングカート作りにチャレンジ！』という書籍です。
生のPHPを用いて、
- データベースを用いて、管理者ログイン及び商品の登録や変更、削除の実施。
- 一般ユーザーとして商品の選択、カートへの追加、数量の決定や削除。
- 入力フォーム、そしてメール送信。
これら一連の処理を一通り作成してシミュレーションを行える本で、自分も何回か通しでコードを完成させました。
ですが、現在ではセキュリティ関連の処理が古いのと、cssとの連携の概念は無かったので、前々からこの書籍を参考にデザインやセキュリティ向上も含めた本格的なショッピングサイトを制作したいと思い、今日まで頑張ってきました。下記サイトが完成品です。
このサイトの構成ですが、下記となります。
- フレームワークを用いず、生のPHPで作成。
- デザインレイアウトについてはBootstrap4は使わず、CSSのGrid Layout（grid-template等）にてレスポンシブを作成。
- デザインカンプはFigmaを用い、全て私オリジナルで考案、制作。
- データベースはMysql。
- 開発環境はVagrantによるCentOS7で実施。
- アニメーション等はjQueryを使わず、生のJavascriptを使用。
PHPの大半の部分は上記の書籍を参考にさせて頂きましたが、CSSとの連携やpassword_hashによるパスワード管理、カート内商品の個数をセレクトボックスによって管理、入力フォームのバリデーション処理等は全てオリジナルです。出来上がってしまうと「意外と単純だな」と思いますが、上手く動作させるまでが非常に大変でした。いかにAmazonや楽天等のサイトが恐ろしい事をやっているのか、その片鱗を垣間見えただけでも大きな収穫だったと思います。
また、Bootstrap4を使わなかった理由については、どうしても自由なデザインがしづらかった事ですね。初の本格的なGrid Layoutへの挑戦でしたが、慣れるとそれ程苦も無く組み立てられます。flex boxやfloatとの共存も比較的容易に出来るので、Grid Layoutの可能性を見出だせたかなと。Bootstrapの便利さは実感していますが...。
会員登録機能等、まだ搭載していないものがあるにはありますが、まずは一般ユーザーとして商品の閲覧にカートへの投入、購入手続き等を疑似体験して頂ければ幸いです。
【トップページ】
【管理者画面】
【商品修正画面（スマホ）】
ポートフォリオ用ショッピングサイトの制作01
今は新たなポートフォリオとして、PHPを用いた簡易ショッピングサイトを制作しております。
今回のショッピングサイトの特徴ですが、
- フレームワーク等は一切使わず、生のPHPでデータベースへの接続等を実施し、レコード取得もPHPのみで構築する。
- CSSについては当初はBootstrap4を予定しておりましたが、微調整等が出来ない為に急遽、Grid Layoutでレスポンシブに挑戦。
- アニメーション等においても、jQueryは使わず生のJavascriptにて実装。
これらを目標に、
管理者ページにて商品の「追加・修正・削除」機能を設け、一般ユーザーがカート形式での買い物シミュレーションをする事が出来るサイトを目指しております。
フレームワークを使わない為、ログイン情報の保存やSQL文、そしてPHPを交えたHTMLにGrid Layoutを織り込むという大変な作業の連続ですが、現時点でようやく管理者側による商品の取扱い機能の実装が完了しました。
今後PHPフレームワークを使用して実績を作っていくとしても、データベースへの接続におけるPHPの処理自体の内容を予め理解出来ていた方が習得もスムーズに行なえると思い、まずはPHPそのものを深く知る事を前提としております。
次からは一般ユーザー側として、「商品をカートに入れる・支払い画面に行く・購入決定の際のメールの送信（実際は送信しません）」を実装していきます。
※Twitterに一連の登録・修正・削除の動作を動画にしておりますので、良かったら観て下さい。
『東京不穏詩 -Bad Poetry Tokyo-』の映画を観てきました。
今回はプログラミングの話とは異なりますが、先日、ホームページ制作にて関わった俳優さんからのお誘いで、彼が参加する映画を観てきました。
『東京不穏詩 -Bad Poetry Tokyo-』という邦画です。
http://www.imageforum.co.jp/theatre/movies/3126/
映画館に訪れるのは実に5年ぶりくらいなんですが、本当に面白い作品でした。
監督はなんとインド出身の「アンシュル・チョウハン」という方なんですが、ここまで東京の裏や日常のリアルな描写を作れる事に驚きでした。長年日本に滞在しているとの事でしたが、センスの塊とも言える程のクオリティだと思います。主演女優の名前も、その他の俳優の名前も知らない人達ばかりでしたが、非常に観ごたえがあって約2時間、全く飽きる事無く楽しめました。やっぱりプロの俳優の演技力は素晴らしいです。自分には絶対に出来ない世界だなと（笑）。
さらに、実は先日19日は舞台挨拶を行なう日でもあったので、何と出演俳優の皆さんが直接映画館にいらっしゃった為、人生で初めて俳優さんを生で見て話す事になりました。本当に新鮮で興奮する1日でしたね。
ホームページ制作のモデルとなりました俳優、真柴幸平さんとも直接お話し出来まして、出来栄えに関してお褒めの言葉を頂き、本当に嬉しかったです。デザインも可能な範囲でベストを尽くし、特にレスポンシブデザインについては妥協せずに検証した努力が報われた一瞬でもありました。
ポートフォリオ作成の為にホームページ制作の話を引き受けて下さいました真柴様、そしてデザインやホームページの実装、公開方法やブラウザに検索される為の作業を教えて頂いた皆様、心より感謝致します。
次回のプロジェクトも全力で頑張っていきたいと思います。
ようやく制作済みのホームページが一般公開出来ました
昨年11月から始動したホームページ制作のプロジェクトですが、昨年末に一度は制作完了したにも関わらず、レンタルサーバー選定やGoogle Search Consoleでの登録で随分と時間が掛かってしまいました。
ですが、ようやくWebブラウザにて検索ヒットされる様になり、無事に一般公開する事が出来て一安心です。
今後も少しずつ更新は行なっていく予定ですが、まずは本格的な業務を無事終了する事が出来ましたので報告致します。
Kohei Mashiba Official Homepage
Google Chrome等のブラウザでも「真柴幸平 ホームページ」等で検索を掛けると、恐らく早い順位で出てくると思いますので。
比較的オーソドックスなデザインのホームページですが、レスポンシブについてはPC版・スマホはもちろんの事、タブレットやiPad等の媒体にも対応させましたので、宜しかったら一度完成品をご覧下さい。
次回からはまた新たなプロジェクトの報告を随時していきます。
ホームページの制作完了
ホームページ制作ですが、12月中旬位にデザインも正式に決まり、28日に無事コーディングも終わりました。
デザイン考案は本当に大変でしたが、それに伴い、AdobeXDやFigmaというデザイン制作ソフトも使いこなせる様になり、基本的なWebサイトの特徴やレイアウトの考え方も勉強出来たので、得られるものは多かったです。
そして本業のコーディングですが、Bootstrap4を使わず、生のhtml・cssで書きました。
ボタン機能を追加する際にjQueryを使用しましたが、今ではcss3にて簡単なアニメーション実装、そしてレイアウト調整がかなり楽になっている事。そしてSassの存在によって、容易に構造が把握しやすくなった事もあり、レスポンシブ対応もそこまで苦戦する事無く終わらせられました。
とは言っても、やはりiPadやiPad miniにも対応させるとなると、それ専用のメディアクエリを用いる事となりましたが...。
来年頭から、有料サーバーの選定をお客様と相談しながら進めていき、無事決まれば晴れて一般公開です。ご本人様が心より満足頂けるか？ そして世間の反応はどうなるか...？ 多少なりとも不安はありますが、一般公開を楽しみにしつつ本年度を締めさせて頂きます。
では良いお年を。
『やさしいデザインの教科書』を読んで
現時点ではこれで最後にしますが、デザイン関連の書籍をもう1つ読んでみようと、瀧上園枝氏著書の『やさしいデザインの教科書』を読んでみました。
各ページの上段に1 - 3デザイン、そして下段にそのデザインの説明文を載せているという非常に読みやすい本で、これも参考になりました。
記載されているイラストや広告を見る限り、「お金と時間を掛けて丁寧に作られている」のが伝わってきます。本当に1つ1つの色や構成が意味をなしている事を実感し、自分もこういう優れたデザインの媒体を当たり前の様に作れたらなぁとしみじみ思いました。
結論としては、やはり日頃から色々なものを見ては感じ取り、それをデザインに落とし込む習慣なりを身に付ける必要があるという事ですね。これは「デザインという分野に対して好きであるか？」も重要な要素です。自分はどうなんだろうか...。
それにしても、『デザインに答えは無い』という言葉が身に染みます。
正解は無い。けれど、「良いデザイン・悪いデザイン」というものは確実に存在する。これは確かな事実です。人の感覚というのはそれ程曖昧だけど、確かなものである。
『デザイン力の基本』の書籍によるWebデザインの勉強
ホームページの制作において、デザインの確定は非常に重要であると教わり、フォントの選定やサイズ、マージン（余白）の正確な指定、色の使い方等、学ぶ事が多過ぎて未だにデザインカンプが完成しておりません。
本番を想定したデザインカンプを作る事がこれ程大変で、少しのズレや色使いやフォントの大きさまでも、妥協の許されない状態というのは非常に大変だと思い知らされました。
思えばデザインについては自分の感覚のみで考えてコーディングしてきたので、いざ一般に公開となると非常にアンバランスな出来になってしまう事に気付き、まだまだ最低限のデザインの考え方や作り方を速攻で学ぶ必要があると思い、下記の書籍を入念に読みました。
ウジ トモコさん著書の『簡単だけど、すごく良くなる77のルール デザイン力の基本』という本です。
Webデザインの「いろはの『い』の字も知らない」素人の方でも押さえておくべき、デザインの基本の基本を学べる内容となっております。
結論を言うと、読む価値は大いにあります。
とにかく、最低限把握しておきたい余白の使い方、フォントの選び方、色の使い方、ページ全体で表現したい内容の組み立て方が非常に分かりやすく書かれており、正に今の自分にとって重要な内容だと感じました。
やはりデザインの最低限のルールは知っておかないとどうにもなりません。本当に滅茶苦茶なレイアウトになります。それを思い知らされると同時に、大きなヒントを得られました。この書籍を糧に頑張ってデザインカンプを完成させたいと思います。
