卒業プロジェクトについての紹介文(画像多い注意)
こんにちは、いつでも行方不明になりっぽい紅茶妖怪(Neko3000)です。
この二ヶ月間にはずっと卒業プロジェクトの完成を努めています。
「卒業プロジェクト」と言えば、「ただ大学の宿題みたいものじゃないか」と認める気があります。その確かに、卒業プロジェクトに対して、指導教師から合格の結果になれば問題がありませんと思いますが、私の場合としたら、せめて自分が満足される作品を出さなければならないと考えてますので、少しでももっと時間と精力を注ぎたいです。
※作業のすべてはまだ100％完成してないが、コードの部分とデザインの部分がすでに終わりましたので、でもこの時点にもう大体見るだけで分かる程度になりました。あとは好きに内容を添削したりレーアウトを調整したりだけの工作です。
========================================================================================================
テーマ
全面的にカスタマイズした個人商店ウェブアプリケーション
主な内容
ある喫茶店にめぐって、全面的に喫茶店そのものに相応しいスタイルをデザインし、そして喫茶店として必要なファンクション開発し、この両者を合わせて現実でも基本的に応用できるウェブアプリケーションを作ること
述べ
A.Design
Front-End Framework = Bootstrap3.0
Javascript Library = jQuery2.20 , jQuery UI1.11.4
Tool = PhotoshopCC2015 , AfterEffctsCC2014 , CINEMA4D R16
A1.ユーザーインターフェースのスタイル
図1.ページ_商品リスト
図2.ページ_バスケット
図3.ページ_公告内容
※以上は全部のページを含んでなし、ただ一部分のページであり
デザインそのものは、目標は一つのみ、できるだけお客様に本喫茶店の印象を深く残ることである。
配色はユーザーにサイトの閲覧を楽しんでもらうのに一役かっている
レーアウトは、デザイン分野において欠くことのできない重要な作業である
この段階は、まずは主題カラーを慎重に選択して作ったカーラスキームを利用し、そして、ページに含むべきの様々な要素を考え、喫茶店の風格をめぐってゼロから設計することであり。
図4.Navbarの細部
図5.商品情報の細部
図6.本店紹介の細部
図7.割引きの細部
最初の段階として、一言に言えば、この期間は高質量なデザイン原稿を作ることを中心とする。更に、効率向上と質量保証のために、厳格に標準のデザイン流れを従っていた。
これから、デザイン原稿に関して詳しく検討する。
図8.デザイン原稿_公告リスト
すべてのデザイン原稿は、PhotoshopCC2015に作り出るものである。
ウエブアプリケーションに含んでる各ページに対して、まずはオリジナルトラフト描くことであり。そして、PhotoshopCC2015のArtBoardという新たな機能を使用し、そのオリジナルトラフトを４つコピーして、各コピーに対して注記を作成することである。
見ての通り、一番目はオリジナルトラフト（あらゆるVisual Version）であり、その順番はサイズ注記、ディスタンス注記、スタイル注記である。
図10,11,12,13.News_オリジナルトラフト（Visual Version），News_ディスタンス注記，News_サイズ注記，News_スタイル注記
図13.デザイン原稿さんたち
すべての原稿を完成した後には、ファンクションによりページを添削する、また、内容によりレーアウトを修正するなどの場合もあるので、完成した原稿が最終的な決定稿とするにはいけない。ただの「参考用原稿」とすれば理解しやすいと考える。
その後は、当然はデザイン原稿を参考して各ページを作ること。Bootstrapというフレームワークを利用する理由は、「その中に気軽に使えるGridシステムという存在」のことである。しかし、自分がスタイルをカスタマイズする場合には、Bootstrap本来のスタイルを使いかねないことになり、Bootstrapのスタイルファイルをリライトする必要がある。
基本的には、cssの拡張言語「LESS」で書き、Bootstrap本来のスタイルファイルをリライトすることである。
図14.やはりこれ以上には行数が気楽に2500を超え
このレベルのスタイルファイルは、単純なcssに対してはちょっと難しいと考え、LessまたSassを使うことをおススメる。
A2.レスポンシブデザイン
例の話通り、BootstrapのGridシステムはとっても重要な部分である。なぜなら、レスポンシブデザインに対してGridシステムは重要な役割を果たす。Gridシステムを利用しては、パソコンやスマートフォン、タブレットなどの端末の画面サイズに対応られることになる。
（当然、Bootstrapだけではなく他のフレームワークにもGridシステムがある）
図15.画面サイズにより表現方法が変わる
レスポンシブデザインを達成するためには、最初からデザイン原稿を作成しながらページ各要素を合わせて考え、適当な表現方法を求める。
図16.レスポンシブデザインのため原稿の注記マーク(例：商品の画像がテーブルに3列、携帯に12列とする)
A3.ユーザーエクスペリエンス(UX)
図17.バスケットボタン
図18.注文レコードページ
図19.割引きページの現れ
UXというものは、制作者自身がページにスムーズな体験を深く埋めてるものであると考えられる。
私の場合は、UXを向上させるように細かいところにアニメション効果を活用する傾向がある。そこで、アニメション効果を重視し、画面のスムーズ感を一番優先することになる。だが、ウエブデザインは、私が慣れた映像編集と違い、たまには機能また性能に妥協するしかないこともある。
※UXはプロジェクトの最後の階段にページを修正して完成するの考えもあり、さらに、各ページにはまだUX向上する余裕が常にあるので、決していつでも終わらないことである。
B.Code
IDE = VisualStudio 2015 Community
Back-End Framework = Asp.NET MVC5
B1.オンライン注文サビース
図20.通販サビース部分のデータベース関係
喫茶店としては、最も大事な部分がオンライン注文と言っても過言ではない。このファンクションは、顧客さまが喫茶店のサイトに注文して（例えば仕事中の休憩時間）、そして、喫茶店の側の社員が配送業務を担当し、注文した商品を配送することである。もちろん、これはただ仮想のファンクションであり、現実にはこの過程についていろいろな仕事を検討しなければならない。しかし、ひとまずサイトの一部分としてうまくやれると考える。
Microsoftは、Asp.NET MVCに関する開発技術を広めるため、あるMusicStoreという開発ヘルプみたい例がある。このMusicStoreは、大体簡単な商品情報や、注文サービスなどのファンクションを配置してる。私はこの例を参考して、すべてのコードを分かってから運用できる上で、自分のプロジェクトに応用できるように既に存在するコードを強化し、計画予定に含むオンライン注文のファクションを完成した。
図21.MVCの原則に従うコードファイルさんたち
オンライン注文ついてのファンクション
- 商品リスト - キーワード検索や、また、価格の安い/高い順番、販売数の多い/少ない順番などの並べ替えも含む
- 商品情報 - 各商品の詳細情報
- カートに入れる(Ajax) - 商品情報ページに商品の数とスタイル（コーヒーが例として熱いヒーコーそれとも寒いヒーコーを選択すること）を入力し、Ajaxで送信して、カートに入れること
- カート - Sessionを使用する以上は、使用者がログインしてなくても問題なし。匿名使用者がカートに入れる商品は、後でログインしてから自動的にアカウントのカートに転移するから
- 注文を決める - アドレスや携帯番号などをフォームに入力して注文を決めること
- 注文履歴 - 各注文レコードに対して詳細な表示ページ
B2.公告システム
図22.公告システム部分のデータベース関係
喫茶店は、たまにお知らせや割引きメーセージなどを投稿する必要があるので、サイトの一部分としてに公告システムを開発した。そこで、お客様が受け取りやすいように、ブログみたいな部分を作成することになった。
図23.公告リスト
図24.公告内容
ただのブログ文章みたい公告内容は、「普通すぎだと思わない？」の考えもあるので、「なら、もっと面白くさせる」って発想がある以上、LineとSkypeみたいバブル型対話内容を作りみった。
図25.バブル行為をコントロールするコードの一部
基本的には、jQueryを利用し、ページサイズと内容により、対話のバブルを調整することである。
公告システムついてのファンクション
- 公告リスト - 文章のタグによって検索する考えもあるけど、まだ検討中
- 公告 - タイトル、分類、ダグ、バブル対話、文の内容...ブログと言ったら頭に浮かべる部分を全部含み
B3.付属管理システム
このウェブアプリケーションを開発してるときに、喫茶店のマスターとしてどんなに店内商品また公告を管理するかって問題考えてみた。そして、この問題のソリューションは、付属管理システムを配置するのを決めることになった。なぜなら、あのときに私が考えるのは、やはり開発者に頼らなくて自分が管理者を担当したほうがいい。
図26.商品リスト
図27.商品情報の編集
この管理システムのユーザーインターフェース部分は、BracketというCMSフレームワーク依存して商品や公告などのプロパティーにより、管理者が使用する便利性の考えも加え、適当に配置して作り出したものである。
機能についての部分は、着々にデータベースとアクセスする業務コードを備え、主に生成、読み取り、更新、削除の機能を完備することである。
見ての通り、商品情報更新ページには、複数スタイルがある商品にとって、複数の選択もできる。そして、Dropzone.jsを利用する以上は、複数の商品画像をアップロードする機能も備えてる。
当然、公告や注文履歴などの管理にとってもこのパターンに従ってる。
※上記内容は、ただの紹介文であるので、詳しい部分はGithubに御覧ください
※ このプロジェクトは非営利目的で、ただのデモであり、一切の責任を取らない
Thanks for your time.
