Google Cloud BuildでSPAのビルドとFirebase Hostingへのデプロイを自動化する

やりたいこと 以下を自動化したい GitHubリポジトリのmasterブランチにコードをpushしたら Cloud BuildでSPAをビルドして Firebase Hostingにデプロイ 準備 https://console.firebase.google.com/ で新規プロジェクトを作成 アプリケーションはcreate-react-…

TypeScriptで書いたCloud FunctionsをCloud Buildでビルド&デプロイする際の設定

何? Cloud FunctionsをTypeScriptで書き、かつデプロイを自動化したい人向けの情報 前提 Cloud FunctionsをCloud Buildでデプロイする方法については id:selmertsx が以下のエントリで詳しく書いてくれている selmertsx.hatenablog.com TypeScriptで書いた…

create-react-app + antd-mobile + TypeScript環境へのStorybook導入

前提 create-react-app TypeScript antd-mobile(antdもほぼ同じ方法で対応可能) Storybookの導入 $ npm i -g @storybook/cli $ getstorybook 追加されたstoriesフォルダは /src 以下に移動する TypeScriptの型定義を追加 $ yarn add -D @types/storybook__re…

Ant Design Mobleをcreate-react-app(TypeScript)のプロジェクトで使う

Ant Design Mobileをcreate-react-app(w/ TypeScript)のプロジェクトで使う方法 create-react-appのセットアップに関しては別記事にまとめた nomusiclife.hatenablog.jp antd-mobileを追加 $ yarn add antd-mobile モジュール化されたantd-mobileを利用可能…

SPA開発時の環境構築

SPAプロジェクトの立ち上げ時にやっていること create-react-app w/ TypeScript create-react-appのTypeScript版ボイラープレートをセットアップする $ npm install -g create-react-app $ cd project_dir $ create-react-app . --scripts-version=react-scr…

Dockerでローカル開発用のMySQL DBを用意する

ローカルで開発を行う際、プロジェクト毎に独立したDBを使いたいのでDockerで立てる config/database.yml default: &default adapter: mysql2 encoding: utf8mb4 pool: <%= ENV.fetch("RAILS_MAX_THREADS") { 5 } %> username: root ? password host: 127.0.…

オンライン同期可能なシーケンサーを作った話 後編

今回作ったもの DEMO ソースコード 詳しい話は前編を参照 nomusiclife.hatenablog.jp Firebase 個人開発の強い味方、Firebase。 HostingやAuthも使っているが、今回はデータの保存と同期のため、Cloud Firebaseを重点的に使った。 Cloud Firestore Firebase…

TSLint 普段使っている最小限の設定

プライベートで何か作ったりするときの TSLint config についてまとめておく。 tslint.json { "extends": ["tslint:recommended", "tslint-react", "tslint-config-prettier"], "linterOptions": { "exclude": [ "config/**/*.js", "node_modules/**/*.ts", …

Visual Studio CodeでReact Appを開発する際の準備

Visual Studio Codeを使ってReact Appの開発を行う際に、 最低限追加しておきたいextensionsと設定をまとめておく 前提 プロジェクトでは以下を使用するものとする create-react-app TypeScript styled-components extensions TSLint TSlintの結果をインライ…

オンライン同期可能なシーケンサーを作った話 前編

少し前になるが、また音の出るおもちゃを作ったので記録を残す。 長くなりそうなので前編/後編に分ける。 作ったもの DEMO ソースコード ブラウザで動くマルチトラックシーケンサ ピアノロールによるエディットに対応 簡易的なシンセサイザーを内蔵 作成中の…

Ant Designのカスタマイズ内容をStorybookに反映するための設定

Ant Design(antd)のテーマをカスタマイズした内容をStorybookに反映する場合、少しややこしい設定が必要になるのでメモ 前提 プロジェクト本体はcreate-react-appで作成 TypeScriptを使用 antdのバージョンは3.7.3 設定方法 例: デフォルトのfont-familyを変…

Apollo ServerとNowで作るGraphQLモックサーバ #4 モニタリング編

前回の続き。 nomusiclife.hatenablog.jp 作成したGraphQLサーバをモニタリング可能な状態にする。 Apollo Engine Apollo Engine | The GraphQL Gateway with essential features like caching and performance tracing. GraphQL caching Query execution tr…

Apollo ServerとNowで作るGraphQLモックサーバ #3 デプロイ編

前回の続き nomusiclife.hatenablog.jp ZEIT Nowにデプロイする Deploying Node.js Apps - ZEIT Documentation 詳しい方法は公式ドキュメントに譲るとして... 一般的なnode appは特に設定をしなくてもプロジェクトディレクトリで now コマンドを実行すればデ…

Apollo ServerとNowで作るGraphQLモックサーバ #2 実装編

モックサーバの実装 前回 nomusiclife.hatenablog.jp 1. 型の定義を行う import { ApolloServer, gql } from 'apollo-server' const typeDefs = gql` type Person { id: ID name: String phone: String } type Query { people: [Person] } ` const mocks = {…

Apollo ServerとNowで作るGraphQLモックサーバ #1 準備編

GraphQLのモックサーバを作る際に使うものをメモ 使うもの TypeScript ts-node, ts-node-dev apollo-server, apollo-engine Zeit Now TypeScript 型があったほうが書きやすい 最近はクライアント(React)も全てTypeScriptで書いてるし... apollo-serverのパッ…

TypeScriptにおける、既存クラスの拡張

TypeScriptでAudioParam.cancelAndHoldAtTime()のコンパイルを通したかったが、本家の型定義には追加されていないので、自分で拡張を行ったときのメモ。 declare global { interface AudioParam { cancelAndHoldAtTime(cancelTime: number): void } } Declar…

create-react-appで絶対パスによるimportをする

src/Components/App.jsx を src/index.js からimportする場合、create-react-appでは import App from './Components/App'; と書くが、これを、 import App from 'Components/App'; こう書きたい。 が、デフォルトではパスの解決ができず、 Module not found…

TypeScriptによるStateless Functional Componentの定義

環境構築は create-react-app とMicrosoft/TypeScript-React-Starterでサクッと行う $ npx create-react-app my-app --scripts-version=react-scripts-ts $ cd my-app $ npm run start 以前、TypeScriptでReact app作ろうとしてセットアップに手間取ったとき…

React Sketch.app

フロントエンドのデザインと実装のワークフローをスムーズにできないか、というのを考えているときにReact Sketch.appというそれっぽい名前のツールを見つけた。 React Sketch.appとは そもそもSketch使ったこともなかった(UIに特化したIllustratorくらいの…

renderSomething() メソッドを潰す

年末だし大掃除しよう、 ということでClass Componentにある render* というメソッドを潰している。 stateless functionへの書き換え 具体的には、こんな感じになっているのを class Foo extends React.Component { renderSomething() { return <div>something</div> } …

作ればわかる、FM音源

この記事はSpeee Advent Calendar 2017 15日目の記事です。 前日は@cho3による「サンタクロースの正体を暴く」でした。 動機 昔からFM音源の音は好きだったが、どういう原理で音作りをしているのか詳しくは知らなかった。 FM音源がどんな音色を出すかについ…

Parcelで絶対パスを使う場合はbabel-plugin-module-resolverを使う

問題 Parcelのdocsには相対パスによるimportのサンプルしか載っていない import Box from ‘../../components/box’ とか書きたくない babel-plugin-module-resolverでrootを解決する 本家のIssueより、 babel-plugin-module-resolver を使う。 Alias definiti…

ちょっとしたappのビルドはParcelでいいかもしれない

Parcelというapplication bundlerが話題なので早速試してみた。 リリースから5日で7000以上のGitHub starを集めている。 Parcelとは Parcel fast, zero configurationを謳うapplication bundler。 要するにconfigの要らない、ビルドの速いwebpackのようなも…

Google Apps Scriptを正確なスケジュールで実行する

課題 GASで「毎日 HH:MM に実行」といった感じのタスクスケジューリングをしたい トリガー「時間主導型/日タイマー」だと「午前8時〜9時」のような、ざっくりとした指定しかできない 「時間主導型/特定の日時」は YYYY-MM-DD HH:MM で指定ができ、指定した時…

iPhone X ファーストインプレ

iPhone X、11/3(金)に入手することができた。 Apple表参道にピックアップに行ったが、3日の18時すぎだったので受け取りはスムーズに完了した。 忘れないうちにインプレを記しておく。 気づいた点 ホームボタンないのは1日で慣れる 3日経つと「最初からホーム…

teenage engineering OP-1

シーケンサを作っていた間は、影響をモロに受けてしまいそうなので我慢していたOP-1を、シーケンサの制作が一段落ついたこともあって買った。 触ってみるとシーケンサにあたるものはおまけ程度で、メインはシンセサイザー or ドラムキット(それに、FX/EQ)と…

Reactでパターンシーケンサを作った

以前、シンセサイザーを作ったが、 楽器が弾けないのでブラウザに自動演奏してもらうことにした。 Reaktion(DEMO) Flowtype シーケンスや音源のプリセットにflowtypeのアノテーションを使ったが、内部で生まれては消えるようなデータならわざわざclassを定義…

Kubernetesのsecretsをファイルから設定する

Google Container Engine から接続する | Cloud SQL for MySQL | Google Cloud Platform GKEからCloud SQL Proxyを使うにあたり、公式ドキュメントの方法で接続用のユーザアカウントをk8sのsecretsに登録していたのだが、件数が多い場合にコマンドで都度設定…

Container ComponentをTypeScriptで書く

react-reduxのContainer ComponentをTypeScriptで書き直した。 嫌いじゃないが、もう少しシンプルにならないものか。 途中でAtomからVS Codeに切り替えたが、 特にカスタマイズをしなくてもTypeScriptに対応していたり、 IntelliSenseがpropsやstateに対して…

はじめてのReact VR

Reactのコンポーネントの中にthree.jsのsceneを配置したら面白いんじゃないか… というようなことを考えていたらReact VRとやらが登場していたので少し触ってみた。 DEMO nishaya/my-first-react-vr componentの切り出しは、通常のReactと同様 export default…