サーバーサイドDart Aqueductを推す！（IntelliJ IDEA編）

環境構築編でサーバがローカルで動いたので
実際にコードを書いていきます！

公式でもIntelliJ Ideaがおすすめされています。
まずはお試しで無料のCommunity Editionでやっていきます。
特にこちらで今の所困ることはないです。
「ダウンロードはこちら」

プロジェクトはすでに作成済みなのでOpenを選択します。
先程作ったプロジェクトを読み込みましょう

早速コードを！と行きたいところですがAqueductはIntelliJで触れる時
のテンプレートを用意してくれています。

こちらを参考にしてダウンロードしインポートしてください。
「https://aqueduct.io/docs/intellij/」
読み込まれたtemplateの各内容は別途説明します

File > Import Settings からダウンロードしたsetting.jarを読み込みます。
ダイアログが出るのでOKを。
一旦これで完了です。

はじめての起動だとDartプラグインが必要になります

install pluginsをクリックしてインストールしましょう。
完了するとIntelliJの再起動を求められるので素直に。OK

今度はDart SDKをダウンロードしろ！と言われるのですがこちらは
すでに入っているので別途設定します。

ターミナルで

brew info dart

とうつと

1
2
3
4
5
6
7
8
9
10
11
12
13
Abalols-Air:test_apps abalol$ brew info dart
dart-lang/dart/dart: stable 2.3.1, devel 2.3.2-dev.0.0
The Dart SDK
https://www.dartlang.org/
/usr/local/Cellar/dart/2.3.1 (367 files, 409.7MB) *
   Built from source on 2019-05-27 at 10:53:55
From: https://github.com/dart-lang/homebrew-dart/blob/master/dart.rb
==> Options
--devel
     Install development version 2.3.2-dev.0.0
==> Caveats
Please note the path to the Dart SDK:
   /usr/local/opt/dart/libexec

最後の行がSDKのパスになりますので
IntelliJ > Prefference Dartで検索してその他も設定していきます！

Apply > OKを押す。ここまで来るとbin/main.dartを右クリックするとRun ‘main.dart’ができるようになるので実行！

こうするとターミナルに

こんなふうに出るのでブラウザで再び

http://localhost:8888/example を叩きましょう。
無事表示されたら完了です！

右上の部分もアイコンが増えてデバッグで起動などできるようになりました。

サーバーサイドDart Aqueductを推す！（環境構築 とりあえず編）

Google I/O 2019でFlutter for Webなどが発表されて盛り上がっている中
一人でDartをもっと使いたい！と奮闘していました。

特に最近サーバーサイドのフレームワークがどの言語の何を触っても
・デフォルトで持ってる機能が中途半端
・追加で必要なパッケージ管理が面倒
・VS Codeでフォーマットすらできない
とかとかあっちを立てるとこっちが立たないみたいなものが多いなぁと不満が。

そんな時に見つけたのがサーバーサイドフレームワーク
「Aqueduct」です。
用意されたコマンドを数回叩くだけで
・ORM入ってる
・OpenAPI3対応している
・OAuth 2.0認証持ってる
・Test環境も整ってる
ビジネスロジックを書くまでの手間がとても少ないフレームワークです！
もちろん多種多様なDart用パッケージの恩恵も受けられます。

読み方は「アークァダクト」ぐらいの感じで意味は「水路」

さっそく環境構築をしていきます。
まずはDartとAqueductのコマンドを使えるように。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
# dartをbrewでインストール
brew install dart
 
# aqueductのコマンドををglobalで使えるようにactivate
pub global activate aqueduct
 
# ここでパス通してね！って出るので遠そう
#  Warning: Pub installs executables into $HOME/.pub-cache/bin,
# which is not on your path.
# You can fix that by adding this to your shell's config file
# (.bashrc, .bash_profile, etc.):
export PATH="$PATH":"$HOME/.pub-cache/bin"
 
# プロジェクト作成
aqueduct create my_app
 
# ディレクトリを移動
cd my_app
 
# サーバを起動
aqueduct serve

ブラウザで http://localhost:8888/example にアクセスして
以下のように表示されたらプロジェクト作成完了です！
次はIDEを設定していきましょう。

博多〜天神間のドロップインのあるコワーキングスペースだけまとめてみた

利用頻度は低いけどちょっと集中して作業したい時が結構あって
コワーキングスペースを都度探していたけど面倒になったので表にした。
時間と料金と場所だけでまとめたので快適さなどは考慮していない。
もちろんドロップインがないところもただのカフェなども載せていない。

名前1H1Day平日時間土日Google Map
The Company 福岡PARCO50015009:00-21:009:00-21:00①Map
The Company キャナルシティ博多前店50015009:00-21:00–Map
The Company 中洲川端50015009:00-21:00–Map
BASES50015009:00-17:009:00-17:00Map
ノマドクロス天神50016808:00-22:309:00-20:00Map
ヨカラボ50015009:00-23:0010:00-22:00Map
HOOD天神–200010:00-18:00–Map
SALT–200010:00-19:00–Map
天神仕事基地500(3h)100015:00-22:0010:00-22:00Map
勉強カフェ博多プレース600200012:00-22：309:30-20:00Map
DIAGONAL RUN50015009:00～22:00②–Map
ハカドルバ–98009:00〜18:00–Map

①The Company 福岡PARCOの土日祝は別途¥4,500/月

②現金払い不可

jsでオブジェクトのプロパティを必要なものだけに絞る

1
2
3
4
5
6
7
8
9
10
11
/**
* 特定のプロパティだけを抽出したオブジェクトを作成する
*/
function extractionProperties: (baseObjects, propertyNames) => {
  return baseObjects.map(baseObject => {
    return propertyNames.reduce((returnObjects, propertyName) => {
      returnObjects[propertyName] = baseObject[propertyName];
      return returnObjects;
    }, {});
  });
};

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 で指定したフォルダに出力される

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