作ってみた

先週からいよいよ、実際のプロジェクトでデザインなどをさせてもらっています。

ちょっと触らない間にフォトショップの使い方を忘れかけていました。

自分のトリ頭にびっくりです。

さすがに少しやり始めたら手が動きましたが、はじめたばかりのPHPやcakePHPやangularJSは触らないと忘れてしまいそう。

せっかくなので、おさらいがてら何か作ってみることにしました。

カラーコードをメモするアプリを作ってみた

「作ってみた」というタイトルですが、まだ出来ていません。

作りたいもの

練習だけどせっかくなので自分が実際に使う想定で何か作ってみようと思い、以下のテーマにしました。

• 仕事で使うプロジェクトごとのHEXカラーコードのメモ用アプリ。

  （今は共有のaiやpsdで確認したり、都度実物からとってきたりしているけれど、面倒だし把握しきれていないので何か考えたい。実際にこれでやるかは別にして。）

• HEXカラーコード（#0084cfみたいなの）と、色と、使用箇所などが視覚的に分かりやすくまとめて見られる。
• この３週間で勉強した内容をできるだけ盛り込んでつくる。
• デザインは楽しくいろいろやってみる。（でも画像つくったりはやらない。）

とりあえずプロジェクトの一覧画面を作ってみました

こんな感じです。

データの登録はまだ画面がないのでデータベースに直接しました。

それをとってきて、プロジェクトごとの一覧を表示するページです。

プロジェクトのテーマカラーとそれ以外、それからベースなのかメインなのかアクセントなのか、の項目を色テーブルに持たせて、入力があればそれに応じた表示になるようにしました(半端に製品名を入れてしまっていますが、色は私が適当にいれたダミーです)。

ちょっと真っ白すぎない？

いいんです。登録した色の邪魔をしないように基本の背景は真っ白でいきたいと思います。

右上のボタンをポチっとすると、DTPなどで使うカラーチップ風の表示になります。

あら可愛い！

というのはなかなか伝わりにくいと思いますが、細い画面にした時などにコンパクトで良いのではないかと思います。

ちょっとやってみたかった、アイコンフォント特大サイズもやってみました。

（スマホだと見えないかもしれないけど、よーく見ると薄く入っているタイトルの、MEM「O」部分のニコちゃんマーク。本当はもっと大きくしたい。）

今回、私この二つの表示がやってみたかっただけという話もあります。

そして、右上の色玉をポチっとすると。。。

背景の色が変わって色合わせ遊びができます。

 このように遊び始めてしまい、結局1日かけて進んだのは、一覧表示と、新規プロジェクト（プロジェクト名だけ）登録と、プロジェクト編集ボタンを押すと「僕、モーダル。」と言ってくるだけのモーダル画面（Bootstrapから貼り付けただけ）設置までです。

実用化は未定ですが、楽しいので引き続きいろいろ機能を作ってみたいと思います。勢いよく画面を載せてしまいましたが、英語の間違いなど見つけた方はそっと教えてください。

プログラミングについての所感などは長くなりそうなのでまた今度にします。

おやすみなさい。