省エネ

Flutter、vue3修行中。

【カンファレンス】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を使う方法もあるみたいですが、隣接した要素じゃないとうまくいかないのかな? 色々試してみたのですが、うまく行きませんでした。

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

【PHP】【Atom】syntax check

こんにちは。
フリーランスになってから、コーポレートサイトの製作などもちょっとやったりしています。

とあるお客様がデザイン会社にHP作成のお見積もりを出したところ、
月々のサーバー代が1万以上になるとのことでもう少し費用を抑えたいとのこと。
私のところにお話がきた時に月々の費用を安く抑えられるようにしようということでお安いレンタルサーバーでのご提案をさせていただきました。

保守費用もなしにして、ある程度お客様自身で更新ができるようにしました。
(これは私自身も都度都度更新の依頼をされるのが嫌だったから。)

レンタルサーバーで使用できる言語は次の3つです。 * Ruby * Perl * PHP * Python

この中で、一番手軽かなと思ったPHPでの実装を決めました。

エディタはAtomを使っています。

しかし、PHPってエラーの場所がわかりにくい。
見つけるのに時間がかかるのは;のつけ忘れとか。

そこで、AtomPHP-linter。

atom.io

これをinstallすると、 f:id:qkuroneko:20180204164540p:plain

こんな感じでsyntaxエラーを教えてくれます。

便利ですね。 これで作業が捗りそうです。

【Go】database migration tool

qkuronekop.hatenablog.jp

こちらに引き続き、環境の構築をしているのでメモ的に残そうと思います。

Databaseはmysqlを使っていて、テーブルを作成するのにgooseを使っています。

bitbucket.org

こちらは、プロジェクトにimportしていないので、go getで別途取得します。

install

go get bitbucket.org/liamstask/goose/cmd/goose

.bash_profile

export PATH="$GOPATH/bin:$PATH"

これでgooseコマンドが使えるようになります。

$ goose

goose is a database migration management system for Go projects.

Usage:
    goose [options] <subcommand> [subcommand options]

Options:
  -env string
        which DB environment to use (default "development")
  -path string
        folder containing db info (default "db")
  -pgschema string
        which postgres-schema to migrate (default = none)

Commands:
    up         Migrate the DB to the most recent version available
    down       Roll back the version by 1
    redo       Re-run the latest migration
    status     dump the migration status for the current DB
    create     Create the scaffolding for a new migration
    dbversion  Print the current version of the database

Configuration

プロジェクトフォルダの下にdbというフォルダを作成します。 dbの下にdbconf.ymlファイルを作ります。

ファイルの中はこんな感じ。

# test:
#     driver: mysql
#     open: tcp:localhost:3306*[db_name]/[user_name]/[password]

development:
    driver: mymysql
    open: tcp:localhost:3306*[db_name]/[user_name]/[password]

# production:
#     driver: postgres
#     open: user=liam dbname=tester sslmode=verify-full

customimport:
    driver: customdriver
    open: customdriver open
    import: github.com/custom/driver
    dialect: mysql

environment_variable_config:
    driver: $DB_DRIVER
    open: $DATABASE_URL

今はdevelopmentしか使ってないです。

migrationファイル

goose create [マイグレーション名] sql でファイルを作成できます。

-- +goose Up
-- SQL in section 'Up' is executed when this migration is applied


-- +goose Down
-- SQL section 'Down' is executed when this migration is rolled back

中はただこれだけなので、ここにSQLを書いていきます。

例えばこんな感じ。

-- +goose Up
-- SQL in section 'Up' is executed when this migration is applied
CREATE TABLE IF NOT EXISTS sample (
  id INT NOT NULL AUTO_INCREMENT,
  name VARCHAR(255),
  update_at DATETIME,
  create_at DATETIME,
  PRIMARY KEY (id)
) ENGINE = InnoDB;

-- +goose Down
-- SQL section 'Down' is executed when this migration is rolled back
DROP TABLE sample;

UP

$ goose up
goose: migrating db environment 'development', current version: 20170923140458, target: 20180129163234
OK    20180129163234_sample.sql

できた。

DOWN

$ goose down
goose: migrating db environment 'development', current version: 20180129163234, target: 20170923140458
OK    20180129163234_sample.sql

簡単です。