省エネエンジニア

ゆるっとエンジニアやってます。働きたくない系エンジニア。Android、Webのお仕事やってます。

【Android】エンジニアだってデザインの話がしたい勉強会へ行ってきました

nohana.connpass.com

先日、こちらの勉強会へ行ってきました。
内容は、Androidのデザインの話について。

一番面白かったのは、「iOSと同じで」って言われた時の対策ですかね。
これ、よく言われるんですよね。

オーナーさんも何も考えずに言ってるんだと思うんですよ。
しかし、こちらからしたらいやいやって話で。

現在お仕事させてもらっているプロジェクトでも言われてたんですよ、当初。
しかし、ここのオーナーさんは物分かりの良い方だったので、
iOSと全く同じにはできないし、Androidマテリアルデザイン の思想で作るのが良い」ということを説明したところ納得していただけ、
今ではiOSのデザインを元に私がよしなにAndroidっぽく作らせてもらってます。 結局のところ、Android向けのデザインを作ってくれるデザイナーさんがいないという場合が多いかと思いますので、
自衛の為にもエンジニアもデザインについて知っておく必要があるかと思います。

他にもデザインを考える上で、うちの会社はこうしているみたいなノウハウを教えていただき、
とても勉強になりました。

エンジニアって機能や使いやすさみたいなところばかり考えがちですが、
見た目も大事だと思いますので、上手く兼ね合わせていけたらいいですね。

【Android】アプリをリリースしました。Uroovy(ウルービー)です。

play.google.com

2018/3/24に個人プロダクトのアプリをリリースしました。
デザイナーさんと一緒に月1でコツコツと作りました。
なんやかんやで開始から2年くらいかかっちゃいました...

アプリの概要

同人誌即売会やフリマのようなイベントで使える簡易レジです。
事前に写真付きの商品データを登録しておき、 イベントで売りたい商品をあらかじめ選択しておきます。

当日は、登録して商品をリストからタップして、 会計の合計金額を表示したり、預かったお金を入力すると自動でおつりを計算してくれる機能なんかもあります。

当日、持って行く在庫を入力すると残在庫も表示できます。

また、終了したイベントでどれくらい売れたかという記録も見ることができます。

開発

一緒にアプリを作ったデザイナーさんと知り合ったきっかけがとある会社のスマートレジのお仕事をしたことでした。
その時の経験を生かし(?)レジっぽいもの作ってみようかってことではじめました。
勉強もかねて、簡単なものを1つ作るつもりでした。

作業時間は月に1回、5〜6時間くらい。
はじめたのが2年前だったので、その間にも知識はついていっちゃいますよね。
自分の書いたプログラムがアレすぎてリファクタしたり、古い技術やバージョンのライブラリを使ってるところを直したり、
なんやかんやと納得のいく形になるまで2年かかっちゃいました。

チャレンジ

プログラミング言語はKotlinではじめました。
今でこそお仕事でKotlinを使えてますが、2年前はまだまだKotlinを実践で使える機会はないだろうな、
と考えていたのでここぞとばかりにKotlinではじめました。

これから

まだ全然DLされていないのですが、DLしてもらえるように頑張って宣伝とかしようと思います。
また、類似アプリも沢山ありますので負けないように便利な機能とか増やしていけたらいいなと思ってます。

ぜひぜひ、DLしてください。

【カンファレンス】MANABIYAへ行ってきました

manabiya.tech

2018年3月23日に開催されたMANABYAへ行ってきました。

私が聴講したのは下記の画像の黒枠にしたやつです。

f:id:qkuroneko:20180326190722j:plain:w400

VRって面白そうですね。
なんか作ってみたいけど、3D難しい。。。。

Dockerのお話やクラウドのお話も聞きたかったのですが、前の発表が終わって外出たら、長蛇の列ができてて部屋に入ることができなかった(できても立ち見)ので諦めました。
40分立ち見はきつい(笑)

LINEのbotも面白そうでしたね。
私もなんか作ってみたい。

カンファレンスの参加は久々だったのですが、
こういうの参加すると何か作りたいっていう意欲が湧いてきますよね。
参加してよかったと思います。

【Android】定期購読のテスト

こんにちは。 今月、お客様先で課金の実装をしておりまして、 テストを開発者以外の人達にやってもらったときに指摘されたことがありまして。

定期購読のパターンを1週間、1ヶ月、1年にして登録していたのですが、 テスト時になぜか1週間、1ヶ月は5分ごとに課金処理がされる。 1年の場合30分ごとに。

色々調べてみたのですが、日本語のサイトでは原因を特定することができず、 ここでやっとわかりました。

android-developers.googleblog.com

先月、仕様が変わったばかりみたいですね。 テスト購入の時の定期購入のサイクルを短くするよっていうことらしいです。

つまり。

バグじゃないです。

仕様です。

【Go】リファクタリング

こんにちは。 2017年4月からGoでアプリを開発しておりますが、4月時点では完全にGo初心者でひどいコードを精製してしまったのでリファクタをしたいと思います。

現状

mainパッケージにしたapp.goに全てを書いている状態です。
最悪ですね。

フレームワーク

github.com

Ginを使っています。
超軽量フレームワーク
最低限の機能だけはいっているフレームワークなので、構成なんかは自力でなんとかしなくてはいけない。

調査

Goのアーキテクチャって何がいいんだろうと思って調べてみました。

qiita.com

クリーンアーキテクチャーかぁ…。
とりあえずやってみようと思って途中まで実装してみたのですが、
難しくてやめました。

こういう繊細なやつは私には向いてない。

MVC

せめてMVCくらいにはしたい。
と、思って考えたパッケージ構成はこれです。

└── src
    ├── app.go
    ├── controllers
    ├── database
    │   └──  models
    ├──  utils
    └── templates

役割

app.go

このファイルは一番最初に読み込むmain関数が書いてるファイルです。 中はこんな感じにしました。

package main

// importは省略

func main() {
    router := gin.Default()
    router.GET("/", func(c *gin.Context) {
        controllers.Index(c)
    })
        router.GET("/main", func(c *gin.Context) {
        controllers.Main(c)
    })
    router.Run(":5000")
}

dbの接続なんかもここでやってます。
router的な役割にして、必要なcontrollerを呼び出すようにしています。
controllerでdbが必要な時はここで、dbも渡すようにしています。

controllers

ざっくり、画面や機能に合わせていくつかのファイルに分けています。
中はこんな感じ。

package controllers

// importは省略

func InputedCompany(c *gin.Context) {
    c.HTML(http.StatusOK, "inputed_company.tmpl", gin.H{})
}

func User(c *gin.Context, db *sql.DB) {

    users, err := models.SelectUserAll(aaaaID, db)
    if err != nil {
        fmt.Printf(err.Error())
        c.Redirect(http.StatusMovedPermanently, "/error")
    }

    c.HTML(http.StatusOK, "user.tmpl", gin.H{
        "users": users,
    })
}

modelから画面表示に必要なデータをとってくる。
入力がある場合にはmodelを呼び出して入力をやってもらう。
そして、最後に表示したいテンプレートを呼び出す。

models

package models

// importは省略

// User is personal information
type User struct {
    ID        int
    Name      string
    Mail      string
    Pass      string
}

// SelectUserAll is acquire all user data
func SelectUserAll(db *sql.DB) (users []User, err error) {
    query := "SELECT id, name, mail, pass FROM user;"
    result, err := db.Query(query)
    if err != nil {
        return users, err
    }
    var id int
    var name string
    var pass string
    var mail string
    for result.Next() {
        if err := result.Scan(&id, &name, &mail, &pass); err != nil {
            return users, err
        }
        users = append(users, User{id, name, pass, mail})
    }
    return users, nil
}

こんな感じ。
データをSelect,Insert,Update,Deleteするだけ。

utils

よく使う処理や定数をここにまとめました。 内容は割愛。

やってみて

初期状態がひどすぎるのであれなのですが、 かなりすっきりしたと思います。

私の知識不足でcontrollerがまだ煩雑な感じになってしまっているので、 今後なんとかしたいです。

【Go】golint解決

こんにちは。
現在、GoでWebアプリケーション及びWebApiを作成しております。
エディタはAtomを使っているのですが、golintを入れたらもの凄い数の警告が出ましたのでそれに対応したときのメモです。

exported function [メソッド名] should have comment or be unexported

ほとんどがこれ。
何かというとコメントを書けよっていう警告。

// CreateSample is Make Sample User
func CreateSample(c *gin.Context) {
    c.HTML(http.StatusOK, "created_sample.tmpl", gin.H{})
}

みたいに、[メソッド名] isで始まるコメントを書くと警告が消えます。

var xxId should be xxID

xxidみたいな変数名を使っているとidIDにしろっていう警告が出ます。 xxIDにすれば解決。

他にも大文字にしろって言われたやつ。私が対応したものだけですが、参考になれば。。。

Uid -> UID Sql -> SQL Json -> JSON

ineffectual assignment to err

xxID, err := xx.LastInsertId()

みたいな処理があって、err使われてないけど?っていう警告。
xxIDを使わないとビルドエラーになるけど、errorは警告になるだけなんですね。

xxID, err := xx.LastInsertId()
if err != nil {
  fmt.Printf(err.Error())
}

エラー時の処理を書いてあげれば警告は消えます。

警告の数はファイル毎に下のほうに出してくれます。
f:id:qkuroneko:20180223165313p:plain:w300

また、警告のあるファイルはリストのファイル名のとこで黄色い波線になるのでどのファイルで警告が出てるのか一目でわかります。
便利ですね。

【CSS】ポートフォリオサイトを作りました

こんにちは。
ポートフォリオサイトを作ってみました。

QKURONEKOP.COM フリーランス エンジニア ポートフォリオ

全画面に表示している画像はこちらのサイトで配布されていたものを使用しました。

www.pakutaso.com

全画面表示するには、

html,body,div {
  width: 100%;
  height: 100%;
}

みたいに、一番外側から100%にしていく。

  <div>
     <img src="imag.jpg">
  </div>

これで、全画面表示できるが、画像はブラウザのサイズに合わせて伸び縮みしちゃう。
それだと、比率が変わってかっこ悪いので、こうする。

  img {
     object-fit: cover;
  }

こうすると比率を維持した状態で親に合わせて画像をトリミングしてくれます。

使用前 使用後
f:id:qkuroneko:20180207122601p:plain f:id:qkuroneko:20180207122550p:plain

画像の上には半透明のグラデーションを乗せています。

f:id:qkuroneko:20180207123024p:plain:w300

グラデーションのやり方はこう。

 div {
      background: linear-gradient(-135deg, #F57F17, #FFFDE7);
      opacity: 0.4;
   }

linear-gradientで直線方向にグラデーションをつけてます。
一番最初の数値は傾きです。
opacitydiv全体を半透明にしています。

フォントにはGoogleのWebFontを使用しています。

fonts.google.com

この画面に白い文字やボーダーを乗せたところ、ぼんやりしていたので、 文字とボーダーに影をつけました。

影の付け方はこちら。

ボーダー

  box-shadow: 0 2px 5px #BDBDBD;

文字

  text-shadow: 1px 1px 5px #BDBDBD;

どちらも、水平方向 垂直方向 ぼかし 色 の順です。

リンクをクリックした時のに真ん中に白い画面を出すところはjQueryを使っているのですが、 onClickもcssでできるようになるといいですね。

:activeを使う方法もあるみたいですが、隣接した要素じゃないとうまくいかないのかな? 色々試してみたのですが、うまく行きませんでした。

やり方がわかったら直すかもです。