CircleCiでGithub->Firebase Hostingにデプロイする

誰もがなんども書いたネタだけど最低限の内容で残す。

①プロジェクトの配下に

.circleci/config.yml

を作成する

②内容を書く

# Javascript Node CircleCI 2.0 configuration file
#
# Check https://circleci.com/docs/2.0/language-javascript/ for more details
#
version: 2
jobs:
  build:
    docker:
      - image: circleci/node:8

    working_directory: ~/repo

    steps:
      - checkout

      - run: npm install

      - run:
          name: 'Install Dependecies'
          command: npm install --save-dev firebase-tools

      - attach_workspace:
          at: .

      - run:
          name: 'Deploy to Hosting'
          command: node_modules/.bin/firebase deploy --only hosting --project "$FIREBASE_PROJECT_ID" --token "$FIREBASE_TOKEN"

ここまで一旦GithubにPushしておく。

ここで重要なのは
・$FIREBASE_PROJECT_ID
・$FIREBASE_TOKEN

これらを環境変数としてCircleCIに設定する必要がある

③トークンを調べる

自分のローカルで

firebase login:ci

と打つと何やらURLが表示されブラウザが開く。
そしたらFirebaseでつかってるGoogleアカウントでログインする
無事にログインするとコンソールに何やら出てくる。

✔  Success! Use this token to login on a CI server:
 1-3rjJIBzbz-sdg４５-kZOMSRV-rtyjturtgterte-hic_UA3HxUjny1Wfjx

このトークンとプロジェクトIDを設定していく。
プロジェクトIDはFirebaseコンソールトップでも確認できる
プロジェクト名の下の薄いグレーの文字がID

④Circle CIの環境変数を設定する

Settings -> Projects -> 対象プロジェクト↗️の歯車を押す。


Environment Variables -> Add Variable で
・Name:FIREBASE_PROJECT_ID Value:プロジェクトID
・Name:FIREBASE_TOKEN Value:トークン
を設定してあげる

ここまでやってGithubにpushすれば
とりあえず自動でFirebase Hostingにデプロイされる！

node.js(express + swagger) でRest API環境構築編

お仕事の関係でnode.jsのサーバーサイドをがっつり弄ることになったけど
頂いた開発環境が良くできすぎていて何が起こっているのかさっぱりだったので
最低限の環境を自分で作ってみます。

今回は CentOS に MySQL と Node.jsでRest APIのシンプルな環境。
MySQLのORMであるSequelizeは触ったことはあったけどmigrationもscaffoldもやったことがなかったので
そのあたりの環境構築のお話。

まずはサーバー構築から。コスパ重視でConohaVPSで動かしてます。

DBとかOS寄りの話は割愛。とりあえずこれ見れば全部できる。

ここから本番。

swaggerをinstallする。swagger自体には色々な機能がある。
Swaggerの概要をまとめてみた。 – Qiita

何はともあれインストール。

1
npm install swagger -g

この時に使うフレームワークは何か？と聞かれるので「express」を選択。
他もそのうち触ってみたい。

プロジェクトを作成

1
swagger project create PROJECT-NAME

プロジェクトを起動

1
swagger project start

一旦ここまででデフォルトのポート10010で http://x.x.x.x:10010/hello にアクセスするといい感じにAPIっぽくなってる。

MySQLのORM「Sequelize」をインストール
Sequelizeを使用してデータベースを操作するための基本的な情報 – Qiita

npmコマンドの –save オプションは package.jsonのdependenciesに追記するためのもの。
これ入れ忘れるとinstallしたのにsequelizeなんてないって言われるけど！！！ってなる。

1
npm install --save sequelize

Sequelizeのコマンドを使用するためにswquelize-cliが必要。

1
npm install -g sequelize-cli

SequelizeのコマンドでDB接続周りの設定を初期化

1
sequelize init

すると必要なフォルダとconfigファイルが生まれる。
プロジェクト内のconfig/config.jsonを開くとjsonで環境ごとのDBの接続先が定義されているので
環境に合わせて変更する。

1
2
3
4
5
6
7
8
9
10
{
  "development": {
    "username": "user",
    "password": "pass",
    "database": "databaseName",
    "host": "x.x.x.x",
    "dialect": "mysql"
  },
〜
}

モデルを自動で生成してさらにいい感じにテーブルまで作る。(migration)
Node.jsのSequelizeでDBのmigrationを実行する – Qiita

1
sequelize model:create --name user --underscored --attributes name:string,birth:date,country_code:integer

するとuser.jsと言うのがmodels配下にできる。

カラムと型等定義されてるのがわかる。 Lengthの設定とかもしたいときは上のQiitaのページで教えてくれてるので手でいじる。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
'use strict';
module.exports = (sequelize, DataTypes) => {
  const user = sequelize.define('user', {
    name: DataTypes.STRING,
    birth: DataTypes.DATE,
    country_code: DataTypes.INTEGER
  }, {
    underscored: true,
  });
  user.associate = function(models) {
    // associations can be defined here
  };
  return user;
};

さらにmigration配下に
テーブル定義の書かれたものが出来上がる。
桁とかNull許容とかIndexとかここに追記していくことになる。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
'use strict';
module.exports = {
  up: (queryInterface, Sequelize) => {
    return queryInterface.createTable('users', {
      id: {
        allowNull: false,
        autoIncrement: true,
        primaryKey: true,
        type: Sequelize.INTEGER
      },
      name: {
        type: Sequelize.STRING
      },
      birth: {
        type: Sequelize.DATE
      },
      country_code: {
        type: Sequelize.INTEGER
      },
      created_at: {
        allowNull: false,
        type: Sequelize.DATE
      },
      updated_at: {
        allowNull: false,
        type: Sequelize.DATE
      }
    });
  },
  down: (queryInterface, Sequelize) => {
    return queryInterface.dropTable('users');
  }
};

Migrationしてテーブルを作成する

1
sequelize db:migrate

migration配下のjsの分だけテーブルが作成される。

今回使うことはないけど念のためにscaffoldもやってみた。適当にテーブルを作っておく。

1
2
3
4
5
6
CREATE TABLE `scaffold_test` (
  `id` int(11) unsigned NOT NULL AUTO_INCREMENT,
  `name` varchar(11) DEFAULT NULL,
  `titile` varchar(11) DEFAULT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

こちらは追加のモジュールが必要なのでインストール
Sequelize-Autoを使ってみた。 – Qiita

インストール。グローバルに

1
npm install -g sequelize-auto

node.jsでMySQLを使えるようにする

1
npm install -g mysql

新しいバージョンのMySQLとかMariaDBだとMySQL2も入れろって言われる可能性。

1
npm install -g mysql2

DBの中身を読み取っていい感じにモデルを生成

1
$ sequelize-auto -h <ホスト名> -d <データベース名> -u <ユーザ名> -x [パスワード] -p [ポート番号]  --dialect [例：mysql] -c  -o [出力ディレクトリ]

するとmodels配下にいい感じにjsが増えてる。

一旦ここまでで環境構築完了！

Web Animations APIをもっと触ってみたお話 2

前回の投稿で１個のアニメーションを実行するのに三行にまとめることができた。

Web Animations APIをもっと触ってみたお話

1
2
3
4
5
6
7
var key = { transform: ['translateX(-120px)', 'translateX(120px)'] };
// タイミング
var timing = { duration: 2000, iterations: 1, direction: 'alternate', fill: 'forwards', easing: 'ease-out' };
// DOMにアニメーションを割り当てる 第四引数は即実行するか
singleDomAnimation('#utan', key, timing, true);

でもまだこのコードの中にKeyframeEffectとTimingを毎度記述しているのが気持ち悪い。
なのでこいつらも外に切り出してみた。

1
2
3
4
5
6
7
8
9
10
11
12
13
const ANIMATIONS = {
    BG: {
        SUNNY: {
            key: [{ backgroundColor: '#666' }, { backgroundColor: '#94dfff' }],
            timing: { duration: 1000, iterations: 1, direction: 'alternate', fill: 'forwards' }
        },
        RAINY: {
            key: [{ backgroundColor: '#94dfff' }, { backgroundColor: '#666' }],
            timing: { duration: 1000, iterations: 1, direction: 'alternate', fill: 'forwards' }
        },
    },
 
〜略〜

一つのアニメーションに関する情報を一つの構造にすることでなるべくシンプルにしてみた。
さらに関数側もkeyとtimingを別に分ける必要がなくなったので引数も１個減らすことができた

1
2
    // 背景色を変更する
    singleDomAnimation('body', ANIMATIONS.BG.RAINY, true);

とはいえ使いまわしたい時用にkeyとtiming等をもっと使い回す関数も用意しておく。
非エンジニアにオーバーロードを意識させるのはいやなので別な関数にした

1
2
3
4
5
6
7
8
9
10
11
12
// 特定のDOMを動かす関数 Keyframeとtimingは別で設定可能
function singleDomAnimationWithOption(targetDom, key, config, start) {
    var elem = document.querySelector(targetDom);
    var effect = new KeyframeEffect(
        elem,
        key,
        timing);
    const animation = new Animation(effect, document.timeline);
    if (start) {
        animation.play();
    }
}

Web Animations APIをもっと触ってみたお話

非エンジニアでもアニメーションを作れるWeb Animations API Wrapperを作りたいなとおもって
まずはゴリゴリと自分用のポートフォリオを作り始めていた中で気づいたこと。
１イベントで複数DOMを同時に動かすようなアニメーションを書いていると

1
2
3
4
5
6
7
    const keyframeEffect = new KeyframeEffect(
        document.querySelector('#utan'),
        { transform: ['translateX(-120px)', 'translateX(120px)'] },
        { duration: 2000, iterations: 1, direction: 'alternate', fill: 'forwards', easing: 'ease-out' }
    );
    const animaton = new Animation(keyframeEffect, document.timeline);
    animaton.play();

結局こんなアニメーションの記述がずらずらと並んでくることになる。
冗長な記述は省きたい。

大きく分けるとすれば
・KeyFrameEffect
・Event
なのだがアニメーション終了後などのイベントを伴わない場合の記述的には
・動かしたい対象
・動き
・アニメーション設定
以外の記述が冗長になるので関数にしてしまえる。
まずは一旦関数化

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// アニメーションの動きを設定
var key = { transform: ['translateX(-120px)', 'translateX(120px)'] };
 
// タイミング
var timing = { duration: 2000, iterations: 1, direction: 'alternate', fill: 'forwards', easing: 'ease-out' };
 
// DOMにアニメーションを割り当てる 第四引数は即実行するか
singleDomAnimation('#utan', key, timing, true);
 
// 特定のDOMを動かす関数
function singleDomAnimation(targetDom, keyframeEffect, timingOption, start) {
    var elem = document.querySelector(targetDom);
    var effect = new KeyframeEffect(
        elem,
        keyframeEffect,
        timingOption);
    const animation = new Animation(effect, document.timeline);
    animation.play();
}

一旦これで関数化はできたが、アニメーションに関する設定の記述が
他の処理と並ぶのは楽しくないので外部に切り離したい。
次の記事にまとめていく。

Web Animations APIを触ってみたお話。

アニメーションというかお絵かきはそもそも絶望的にセンスのない私が
Web Animations Apiを触ってみたお話。

うぇぶあにーめしょんあーぴーあいってなに？

ウェブアニメーション API

「ウェブアニメーション API を使うことで 、Web ページの見た目の変更を同期させたり時間を調整すること、
つまり DOM 要素のアニメーションが可能です。
これらはタイミングモデル及びアニメーションモデルという2つのモデルの組み合わせによって実現されます。」

CSS Animationじゃだめなの？とおもったけど
コードでかけるなら直感的に連続的なアニメーションがかけるのでは！？とおもって
なんとなくコードを書いてみました。

Flashとかやったことのある人だとキーフレームっていうのが伝わりやすいけど
簡単にいうと１フレームずつパラパラ漫画が動くなかで
変化の起点になるフレームのこと。

３０枚で１秒のパラパラ漫画を書いてその中で人が右に向かって歩いていたのを
0.5秒経過したときに方向転換したい！ってなったら15フレーム目がキーフレーム。
なんだけど15なんていう指定はせずにアニメーションをさせて
その変化の50%まで行った時！みたいな指定ができる。

そんな感じでひとつの動きの中にいくつかのキーを作ることができるんだけど
実際には複数のDOMをこのDOMのアニメーション終わったら次こっちみたいな感じで
動かしたい時どうするんだろうとおもってやってみたのが
このブログのロゴのぶるぶるしてるアニメーションです。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
window.onload = function () {
    const logoChr = ['a', 'b', 'a', 'l', 'o', 'l', '.', 'c', 'o', 'm'];
    var index = 0;
    var aniArr = [];
    logoChr.forEach(function (v, i, ar) {
        var div = document.createElement('div');
        div.className = "logoChr";
        div.id = 'lc_' + i;
        div.textContent = v;
        document.querySelector('#logo').appendChild(div);
        const keyframes = new KeyframeEffect(
            document.querySelector('#lc_' + i),
            { transform: ['translateY(0)', 'translateY(-' + (Math.floor(Math.random() * 10) + 2) + 'px)'] },
            {
                duration: (Math.floor(Math.random() * 100) + 50),
                iterations: 1,
                direction: 'alternate',
                easing: 'cubic-bezier(.77,2.55,.15,-1.45)'
            }
        );
        const anim = new Animation(keyframes, document.timeline);
        anim.onfinish = function () {
            aniArr[i < logoChr.length - 1 ? i + 1 : 0].play();
        };
        aniArr[i] = anim;
    });
    aniArr[0].play();
}

ここでまず文字数分のdivを用意

1
2
3
4
        var div = document.createElement('div');
        div.className = "logoChr";
        div.id = 'lc_' + i;
        div.textContent = v;

動きを指定

1
2
3
4
5
6
7
8
9
10
const keyframes = new KeyframeEffect(
            document.querySelector('#lc_' + i),
            { transform: ['translateY(0)', 'translateY(-' + (Math.floor(Math.random() * 10) + 2) + 'px)'] },
            {
                duration: (Math.floor(Math.random() * 100) + 50),
                iterations: 1,
                direction: 'alternate',
                easing: 'cubic-bezier(.77,2.55,.15,-1.45)'
            }
        );

1
transform : translateY　

は単純にY座標の相対的な動きを指定できる。座標0から乱数で作った座標まで

1
duration: (Math.floor(Math.random() * 100) + 50)

は0.1〜0.15秒かけて動かす。

1
easing: 'cubic-bezier(.77,2.55,.15,-1.45)'　

この部分は動きの変化の具合を指定しているんだけどベジェ曲線が使える。
数値だと何しているかわからないし逆に動きを数値化するのが難しいのだけど
こちらでその変化の具合を可視化してくれるよと教えていただきました。
koutar0さんありがとうございます！
cubic-bezier.com

この .onfinishはアニメーションが終わった時に呼ばれるので
そこで次のdomのアニメーションをplayするように設定。
最後まで行ったらまた最初の文字からループするようにしている

1
2
3
        anim.onfinish = function () {
            aniArr[i &lt; logoChr.length - 1 ? i + 1 : 0].play();
        };

そんな感じで全体としては無限ループになってるアニメーションなんだけど
１個１個のエレメントは

1
                iterations: 1,

で繰り返しはせず１回に設定されています。

連続的で複数のDOMをより直感的にダイナミックにアニメーションさせたい時は
圧倒的にCSS Animationより楽そうでした。

もっとかっこいいもの作りたい

.net core + MySQLでEF coreしてみる

Macから.net coreでWeb API を作ろうとしたらハマったので備忘録。
Visual Studio for Mac上ではできずコマンドでやることになった。

環境は .net core 2.1 + MySQL 5.x 古いのは実業務に寄せたため。
たぶん8だと最初は認証周りであれこれしないといけない。

プロジェクトの作り方とかはこちらを参考にしました。
ASP.NET Core 2.0 EntityFrameworkCoreでMySQLを使う CodeFirst

まずはモデルを設計してテーブルを生成 & ALTERするケース（コードファースト）。

コードファーストってナーニって人はこちら。
早い話がモデル（クラス）設計したらテーブル自動でできてほしいよねってこと。
EF 4.1の目玉機能「コード・ファースト」を理解しよう（1/3） – ＠IT

①ビルドする 当たり前だけどビルド通らないとうごかない

1
dotnet build

②migrationする　正解がわからないけどテーブル設計変更するたびにコードレベルで別物として残るのでなんとなーくバージョンみたいなの付与してみた

1
dotnet ef migrations add Drabbit_v0.0.4

ちなみにこんなふうに全部過去のやつのこってる

③更新する

1
dotnet ef database update

ここまで問題なく動くと

こんな感じになる。

でこんな風にテーブルができてる。

テーブルを作成してモデルを自動生成するパターン（データベースファースト）。
既存のシステムへ使ったりする時はこちらが良いが複合主キーなどどこまでやってくれるか詳細不明

①ビルドする 当たり前だけどビルド通らないとうごかない

1
dotnet build

②scaffoldする

1
dotnet ef dbcontext scaffold "Server=localhost;User Id=id;Password=password;Database=dbName" "Pomelo.EntityFrameworkCore.MySql" -c Drabbit -o Models

-o で指定したフォルダに出力される

問題がなければこんな風に勝手にモデルに追加される。