Google Material Design

俺が☆爆発☆してWEBデザイナーを目指すよ（汗）の記録ブログ。

あなた様の貴重な時間を割いてこの記事を読んで下さり恐悦至極に存じます。

ブログ更新を放置してました＞＜

いいかげん、ペットサイトを完成させなきゃいかん！

とりあえず、ベータ版を作って、細かいところは後で手直ししよう。


●Google Material Design

デザインセンスの乏しさをカバーするために役立つツールがありました。

［速報］Googleが新しいUXの体系「Material Design」を発表。あらゆるデバイスとスクリーンに適用。Google I/O 2014

Googleは6月26日（現地時間25日）、米サンフランシスコでイベント「Google I/O 2014」を開催。
次期Androidの「L」とともに、今後Googleがあらゆるデバイスとスクリーンに適用する新しいUXの体系「Material Design」を発表しました。

Androidのスマートフォンやタブレットだけでなく、ChromeによるWebも含んだ、Google全体で適用できる一貫したビジョンであり、モバイルやデスクトップなどを超えて利用できるものだ。

Googleが提唱する、新しいWebアプリのデザインが「Material Design」です。

Google の新しいデザインガイドライン「Material Design」
Material Design のゴールは次の2点と述べられています。

多様なプラットフォーム・デバイスサイズ間で統一感のある体験ができる、単一の基盤となるシステムの開発

・シンプルな「フラットデザイン」がベース
・影をつけて、立体感を出す＝「ドロップシャドウエフェクト」

スマホを意識してか、グリッド（レイアウトの枠）は、Windows8のメトロUIみたいにパネルを並べたかんじにすると、分かりやすいのかも？

●色のセット

色の組み合わせも、よく悩むところですが、Material Designでは色見本もバッチリ提供してくれています！

Material Design - Style Color
http://www.google.com/design/spec/style/color.html

これを基にすれば、無難な色のセットが簡単に作れますね～。

Material Designを参考にして、Webアプリの開発効率を改善したいです！

フラットデザインの基本ルール Webクリエイティブ&アプリの新しい考え方。 佐藤 好彦 インプレスジャパン 2013-11-22 ￥ 2,138

ハッピーシンセサイザ (巡音ルカ)

何の取り柄も無い　僕に唯一つ
少しだけど　出来る事
心躍らせる　飾らない　言葉
電子音で伝えるよ

4月21日〜4月27日に投稿したなう

ペット探して！さんの投稿したなう

やっと時間が捻出できた！ペットサイトの作成を再開！ER図は、まずは手書きでOK！仕様変更や追加などの変化、リファクタリングに強い＝ロバストネスな設計にするためには、DOA＝データ中心で考えておくと良い、とのこと。

4/26 11:17

行方不明のペットを探せす＝「アニマルファインダー」のリバイバル→ http://googlejapan.blogspot.jp/2011/04/blog-post_14.html → http://www.mdn.co.jp/di/newstopics/17838/

4/26 11:21

「アニマルファインダー」のデータ構造を参考にして、エンティティを分析。「ペット」というスーパータイプに、どんなサブタイプがぶら下がっているか？→ 種別、性別、住所、種類（犬、猫、鳥）、特徴（色、識別器具＝首輪）などがある？

4/26 11:25

アニマルファインダーでは、これら全てのサブタイプが、串刺しで一括検索できるようになってる。＝検索用のデータマート、マテリアライズド・ビューを持ってるかんじ？検索性能の向上や利便性は、別に分ける＝後で考えることにして、オーソドックスなテーブル設計にしてみよう！

4/26 11:30

>>もっと見る

Webデザインのテコ入れ

俺が☆爆発☆してWEBデザイナーを目指すよ（汗）の記録ブログ。

あなた様の貴重な時間を割いてこの記事を読んで下さり恐悦至極に存じます。

2014年も、もうすぐ5月ですね！

ひぇ～、時間が経つのが早い！

ペットのサイトを作ろうと思いつつ、他のこともやっていたら、
え？もうそんなに時間経っちゃったの？ってかんじ＞＜

1日が72時間ぐらいあったらイイのに…（笑）


●Twitter Bootstrap のカスタマイズ

Webサービス構築に必要な作業を、一人で全部できるフルスタックエンジニアを目指してます。

(1) インフラ → ネットワーク技術、サーバー構築
(2) サーバーサイド → Webプログラミング
(3) クライアントサイド → Webデザイン

この(1)と(2)は、もうだいたいOKなんだけど、問題は(3)なんです。
＝絵心というか、デザインセンスだけは、テクニックじゃカバーできないかんじ。

・イラスト → Illustrator、ペンタブレット → 放置状態＞＜
・画像 → Photoshop → OK
・CSS → 基本文法はOK、コードは読める → ゼロからフルスクラッチでデザインするのは、まだ無理＞＜

それで、CSSデザインのスキルの低さを、カバーする方法を検討＆調査しました。

現時点での解決策は、「CSSフレームワーク」を使うことで、CSSのスキルの低さをカバーするというもの。

とりあえず、定番の「Twitter Bootstrap」を使っているけど、
Bootstrapをカスタマイズしたくて、まだまだ調査が続くよ～☆＞＜！

昨日、本屋でイイ本見つけました！（・∀・）

（最近、本を買うときは、Amazonじゃなくて、本屋で中身を見てから買う機会が多いです。）

↓↓↓

これからの「標準」を身につける HTML+CSSデザインレシピ (Web Designing Books) エ・ビスコム・テック・ラボ マイナビ 2014-03-20 3110円

・CSSデザインの基本テクニック
・Bootstrapを使ったCSSデザイン
→ 今の自分が知りたいことに、一番近い内容でした！！！

・ヘッダーのカスタマイズ
・ナビゲーションのカスタマイズ
→ 悩みの種が、解決しました！

他にも、自分が知りたいことに近い内容の本があったけど、今回はパス。

↓↓↓

現場でかならず使われている CSSデザインのメソッド 北川 貴清 エムディエヌコーポレーション 2013-09-25 3024円

「HTML+CSSデザインレシピ」が、総論的な話だとすると、
「CSSデザインのメソッド」は、各論的な話でした。
　↓
先に、総論（全体の概要）を押さえてから、
次に、各論（各部の詳細）を押さえる、という順番にした方が良い、と判断。
　↓
「HTML+CSSデザインレシピ」を読み終えてから、
「CSSデザインのメソッド」を読めばOK？


●Angular.js

Webサイトを見るデバイスの多様化（PC、タブレット、スマホ、etc.）
↓
レスポンシブデザインの普及
↓
Webデザインに、JavaScriptによるレイアウトの制御が入りだす
↓
jQuery＋Bootstrapで、簡単レスポンシブデザイン
↓
jQuery＋Bootstrapの限界を、他の方法でカバー
↓
Angular.js、Saas、Compassなどのライブラリー、フレームワークで補完？

…というわけで、Bootstrapに慣れたら、次は他の方法を調査してみたいです。

jQueryの次は、Angular.js。

なんだろ？…必要なものを集めだすと、きりがない！？

Sass、はRubyでいじれるみたいなので、Webアプリ用のLLも、PHPからRubyに変更しよう！

Web制作者のためのSassの教科書 これからのWebデザインの現場で必須のCSSメタ言語 平澤 隆 インプレスジャパン 2013-09-13 ￥ 3,024

AngularJSアプリケーション開発ガイド Brad Green オライリージャパン 2014-04-18 ￥ 2,592

4月14日〜4月20日に投稿したなう

ペット探して！さんの投稿したなう

やっと、忙しい日々を脱出できた。たまってしまった課題を、どんどん消化していきたい！

4/20 19:05

データベースの設計で、ER図を書く練習をしたい。定番のツールって、どんなのだろう？→ http://treeapps.hatenablog.com/entry/20110505/p1 なんか、ERMasterとか、MySQL Workbenchというのが人気みたい？

4/20 19:07

毎日コードを書くこと → http://goo.gl/0dpBWz 毎日30分、自分のプロジェクトのコードを書いたらイイってさ！よっしゃ！やってみよう（・∀・）

4/20 19:15

プロジェクトったら、のびのびになってるペットサイトしかない！今回はDOAで進める → ER図書くことから始めてみようと思います！

4/20 19:18

普段、データベースにはMySQLを使ってるから、ER図の作成ツールには、MySQL Workbench を使ってみればいいのかな？ペットサイトのエンティティーは、「ペット」「ユーザー」「登録」とか？

4/20 19:24

>>もっと見る

JavaScriptの勉強

俺が☆爆発☆してWEBデザイナーを目指すよ（汗）の記録ブログ。

あなた様の貴重な時間を割いてこの記事を読んで下さり恐悦至極に存じます。

2014年も、もうすぐ4月ですね！

ひぇ～、時間が経つのが早い！

ペットのサイトを作ろうと思いつつ、他のこともやっていたら、
え？もうそんなに時間経っちゃったの？ってかんじ＞＜

1日が48時間ぐらいあったらイイのに…（笑）


●Google Apps Script

最近、Googleドライブをよく使っていて、「スプレッドシート」のカスタマイズをやってます。

＝スプレッドシートってのは、Excelみたいな表計算ソフト（アプリ）ですね。

Excelは、VBAを使うと独自の機能を作ることができて、
Googleスプレッドシートは、Google Apps Scriptを使うと独自の機能を作れます。

で、この「Google Apps Script」ってのが、JavaScriptを拡張したものなので、
結局、JavaScriptが使えれば、いろんな機能を追加できると。

Google Apps Script入門 - ドットインストール

初心者のためのGoogle Apps Scriptプログラミング入門


●JavaScript

Webサイトを作るとき、JavaScriptでプログラミングする機会が多くて、JavaScriptも勉強しなくちゃ！と思ってました。

Webサイト制作じゃなくて、Google Apps Scriptという、意外な形でしたが、思いがけずJavaScriptを勉強する機会に恵まれました。

小さいプログラムを書くだけなら、JavaScriptで用意されている高度な機能は必要としないので、結構簡単に書けるもんですねー！


●参考書

GoogleドライブのAPIには、いろいろ制限があるので、思い通りに動かせなくて苦労する場合もあります。

ネットで検索しても、すぐに答えが見つからない場合もあるので、参考書を買ってきました。

Google クラウドスクリプティング Google Apps ScriptによるGoogleパワーアップ活用ガイド 早坂 清志 マイナビ 2012-06-16 2415円

本屋さんで、Google Apps Scriptの本を比較したら、スプレッドシートの説明が一番多かった「Google クラウドスクリプティング」という本が分かりやすかったです。

JavaScript逆引きハンドブック 古籏 一浩 シーアンドアール研究所 2012-09-08 3990円

「正規表現」で文字列を抽出するとき、書き方がよく分からなかったりとか、
何かと文法を調べることが多くて、手元に一冊JavaScript辞典を置いておきたいと思いました。

機能別にまとめてあった「JavaScript逆引きハンドブック」を選んでみました。


●Googleドライブの弱点

カスタマイズすると、Googleドライブはすごく便利です☆

だけど弱点もあって…それは、ネットにつながっていないと使えないこと！

昨日、会社のネットワークが不安定になって、接続の切断が頻発してました。
せっかく作ったデータを保存しようとしたら、そのときネットにつながっていなくて、全部パー＞＜

Googleドライブをオフラインでも使えるようにするためには、Googleドライブのアプリを自分のPC等にインストールして、データをローカルに保存すればOKみたいです。

Google 文書、スプレッドシート、プレゼンテーションをパソコンと同期させる



JavaScriptを使って、いろいろ作ってみます！