ゆとりブログ

【フルスタックエンジニア】下期始まりました。というコトで上期の振り返りと意気込みを...

どもです。こすげでーす。
さてとりあえず告知させてください。

ブログを見てくれればわかると思いますが(右側みてみ)
Androidアプリリリースしました!

ゆーてダイナシユーザー専用的なところがありますが...。
数少ない読者のみなさま、これを機にダイナシ、使ってみてください。
そしてUIとかこんなことしたいとかありましたら
コメントでも、Twitterアカウントへでもいいので、文句言ってください。
すぐ自分から返事させて頂きます!!

ちなみに現状はiPhone用をツクル予定はないです...。
iPhoneユーザーさん、ごめんなさい。


という告知も終わり、今日はどんなコト調べて書こうかなーと考えて一つ思いついたことが。
※思ってた以上に長くなってしまったので、分けました。よかったら読んでくださいませ。

続きを読む

【Android】 デザイン的なUI的なお話

どもー。こすげっすー。

やって参りました。月曜日。

憂鬱な月曜日。

なんてものは俺にはない。



UIとかみなさん、どのように考えていますか?
ちょー有名なサイトをcopyしますか?
それともオリジナルを押して世に新たなstandardを広めていきますか?

自分はどちらかというとcopy派です。
ただ自分で組み立てるわけではありません。
やっぱどうしてここにこのボタンを置いたのか。
どうしてこのpageのURLをこれにしたのか。

全てにreasonがなければいけません。


そしてこの前androidのアプリをひとつ作りました。
既存userさん向けではありますが、いろんなアプリのUIを拝見させて頂きました。

そしてひたすらこだわりを持って作成しました。
明日リリースしまっす。(maybe)

UIって作ってる側は全てのデザイン(colorとかstyleとかposition ..etc)に対してreasonがなければならないですが、
使ってる側はその意図を汲み取るnecesarryはないと思います。
使う側が言うのは

「使いやすいか使いづらいか」

で使いづらいというのは違和感なわけで、
自分の作ったandroidアプリがworldを切り開くわけではないんですよ。
むしろ、既に出来上がってる場所に突っ込んでいくので、
ルールとかお決まり、習慣的なのを知っておく必要があります。


じゃないと使いづらいの一言で自分の中で画期的だと思った機能を十分使われないまま
uninstallされてしまいます。

Gunosyが注目されている理由に独自アリゴリズムでニュースをお送りしますとか新しい"機能"を提供している傍ら、デザインはUIは至ってシンプルだと思います。
だから機能のお話で盛り上がってます。

我々プログラマーにとって、作ったものの機能に評価をもらえるコトはとっても嬉しいことです。
ただ、そこのphaseに行くまでにUIという壁があるというコトを意識しなければなりません。

simple is best

大好きなwordですが、でもそこに自分の色みたいなものを入れていきたい年頃です。
はい。


という感じで明日色々リリースが控えているので、今日はここらへんで。





[Android] androidのデザインなんちゃら

ども。こすげっす!!

ついに始まりましたね!!!
いやーやっぱ面白いっす!!
確かに残念だったけども、面白かった!

え?なにがって??

コンフェデレーションズカップに決まってるじゃん!

ブラジル強すぎ。てかみんなウマすぎ。
トラップしかり、パスしかり。
日本とはそこの差が一番だったんじゃないですかねー。

まあ2日連続でサッカーネタ書くとサッカーバカみたいに思われちゃうので、
今回は今やってる

Androidアプリ

のお話。
※アンドロイドってなんとなくなんだけど、赤のイメージないっすか??
ちなみにiOSはシルバー的な...。俺だけ??



えー現在androidアプリを作成してます。
ちなみにUIとかもやってます。

こういうの気になり始めたら私止まらない性格でして...。
なれないデザインに手をつけはじめてます。

まあxmlでやるのにもだいぶ慣れまして、eclipseさんともだいぶお近づきになれたかなと...。

UIに関してはこちらのサイトを参考にしてます!!!

Android Application Design Acheve
http://dorodoro.info/aada/
アプリのUI集ですね。

こういうの眺めてるだけで幸せになれます...。
できればこういう書き方するんだよ的なアレも欲しかったですが、そこは我慢。。。

でですよ。
前に作ったサービスのアプリを開発しているのですが、デザインはサービスに準じたほうが
ユーザーも使いやすいと思うんですよねー。


で、一番色がでるのが、ボタンなのかなと。
あとはテキストね。


ってことで、デザイナーさんに主要の色を教わり、自分で作成しました!
カラーの参考にしたサイトは以下!!

Color Scheme Designer 3
http://colorschemedesigner.com/


ここに特定の色のカラーコードを入力すると
近しい色を教えてくれます!!

そうとう助かりました!
これやべーっすよ!



てな感じで最後にandroidのボタンのデザインの仕方でも...
※androidなんで赤系でねww


まずは res/values/直下に例にならってstyle.xmlを作成します!
そして下記コードを...


<style name="button_red" parent="@android:style/Widget.Button">
<item name="android:background">@drawable/button_red_style</item>
</style>

ここの

<item name="android:background">@drawable/button_red_style</item>


の部分に注目してください。

これなんぞやってまさに
res/drawable/button_red_style.xmlを指してます!
なんでそのファイルを作成してください!


# res/drawable/button_red_style.xml
<!--?xml version="1.0" encoding="utf-8"?-->
<selector xmlns:android="http://schemas.android.com/apk/res/android">
  <item android:drawable="@drawable/button_red_default" android:state_enabled="true" android:state_window_focused="false"></item>
  <item android:drawable="@drawable/button_red_enabled" android:state_enabled="false" android:state_window_focused="false"></item>
  <item android:drawable="@drawable/button_red_enabled" android:state_enabled="false"></item>
  <item android:drawable="@drawable/button_red_pressed" android:state_pressed="true"></item>
  <item android:drawable="@drawable/button_red_pressed" android:state_enabled="true" android:state_focused="true"></item>
  <item android:drawable="@drawable/button_red_default" android:state_enabled="true"></item>
  <item android:drawable="@drawable/button_red_focused" android:state_focused="true"></item>
  <item android:drawable="@drawable/button_red_default"></item>
</selector>

という感じです。

" android:state_* "ってやつが謎だと思いますが、調べてください。
大体読めばわかるはず!!

で、さらにココに出てくる
button_red_enabled やら button_red_pressed やら button_red_focused やら button_red_default がありますね。
勘のいい人はわかるかもですがこれも
res/drawable直下にxmlファイルを作ります!

一気に書いちゃいますね!

# res/drawable/button_red_default.xml
<!--?xml version="1.0" encoding="utf-8"?-->
<shape xmlns:android="http://schemas.android.com/apk/res/android">

<padding
android:bottom="10dp"
android:left="10dp"
android:right="10dp"
android:top="10dp" />

<corners android:radius="0dp"></corners>

<gradient
android:angle="270"
android:startColor="#E51600"
android:endColor="#950E00"
android:type="linear" />

<stroke
android:width="1dp"
android:color="#950E00" />

</shape>


# res/drawable/button_red_enabled.xml
<!--?xml version="1.0" encoding="utf-8"?-->
<shape xmlns:android="http://schemas.android.com/apk/res/android">

<padding
android:bottom="10dp"
android:left="10dp"
android:right="10dp"
android:top="10dp" />

<corners android:radius="0dp"></corners>

<gradient
android:angle="270"
android:startColor="#610900"
android:endColor="#3F0600"
android:type="linear" />

<stroke
android:width="1dp"
android:color="#3F0600" />

</shape>


#res/drawable/button_red_focused.xml
<!--?xml version="1.0" encoding="utf-8"?-->
<shape xmlns:android="http://schemas.android.com/apk/res/android">

<padding
android:bottom="10dp"
android:left="10dp"
android:right="10dp"
android:top="10dp" />

<corners android:radius="0dp"></corners>

<gradient
android:angle="270"
android:startColor="#F24E3D"
android:endColor="#F27A6D"
android:type="linear" />

<stroke
android:width="1dp"
android:color="#950E00" />
</shape>


# res/drawable/button_red_pressed.xml
<!--?xml version="1.0" encoding="utf-8"?-->
<shape xmlns:android="http://schemas.android.com/apk/res/android">

<padding
android:bottom="10dp"
android:left="10dp"
android:right="10dp"
android:top="10dp" />

<corners android:radius="0dp"></corners>

<gradient
android:angle="270"
android:startColor="#F24E3D"
android:endColor="#F27A6D"
android:type="linear" />

<stroke
android:width="1dp"
android:color="#950E00" />

</shape>


という感じです。
ファイル作成なら下から
(つまりbutton_red_*.xmlファイルから作成していったほうがeclipseさんも怒らず幸せに過ごせるかも...)

でこれをlayoutにてButtonのsytleに適用すればおk


<button
style="@style/button_blue"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />


完成はこんな感じです!

※ button_red_default


※ button_red_enabled


※ button_red_pressed と button_red_focusedはうまくとれなかったので、うまくやってください...。

そんな感じで頑張ってまーす!
ではまた!!