abalol

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

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

名前1H1Day平日時間土日Google Map
The Company 福岡PARCO50015009:00-21:009:00-21:00①Map
The Company キャナルシティ博多前店50015009:00-21:00Map
The Company 中洲川端50015009:00-21:00Map
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:00Map
SALT200010:00-19:00Map
天神仕事基地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:00Map

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

②現金払い不可

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

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-sdg45-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

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

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

プロジェクトを作成

プロジェクトを起動

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ウェブアニメーション API

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

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

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

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

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

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

動きを指定

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

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

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

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

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

で繰り返しはせず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

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

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

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

③更新する

ここまで問題なく動くと

こんな感じになる。

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

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

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

②scaffoldする

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

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