2021.2.7
M5Stack ATOMという小さなデバイスの環境構築をした際の備忘録です。 M5Stack%20ATOM%E3%81%AE%E7%92%B0%E5%A2%83%E6%A7%8B%E7%AF%89%207c13b852ed59492baf7022d75ab0f2b2/Untitled.png 公式のクイックスタート 今回はこちらのAsduino IDEの方をやってみました。 M5Stack Docs - The reference docs for M5Stack products. Arduino IDE CP2104 driverをダウンロードします。思いのほか時間がかかりました。 M5Stack Docs - The reference docs for M5Stack products. 公式サイトからArduinoをインストールします。 M5Stack Docs - The…
Keep Reading →
Puppeteerで The "original" argument must be of type function のエラーが出た
2021.2.6
dockerでPuppeteerを動かそうと下記エラーが出ました。 調べてみるとnodeのバージョンが古いみたいです。Dockerfileを見るとnode:carbon-alpineを使っていることがわかりました。carbon-alpineはENV NODE_VERSION=8.17.0なので古かったです。 Docker Hub DockerfileのnodeのバージョンをFROM node:12.19.0にしたらビルドが通りました。
Keep Reading →
2021.2.6
Reactで動画を作成できるというライブラリ Remotion を試してみました。 Write videos in React | Remotion プロジェクトの作成 下記コマンドで一発でプロジェクトを作成できました。 レンダリングの仕組み レンダリングの際にpackages/renderer/src/render.tsを呼び出しています。Webページをpuppeteerで表示して1フレームずつスクリーンショットを撮っているっぽいです。 JonnyBurger/remotion 作成したスクリーンショットをffmpegを使ってつなぎ合わせて1つのビデオにしています。 JonnyBurger/remotion
Keep Reading →
Unity + Hololens 2 EmulatorでQRコードトラッキングを試してみたが使えなかった
2020.10.17
こちらのサンプルを試してみました。実機ではなく、エミュレーターでのデモを試してみましたが、使えなかったのでその備忘録として。。。 HoloLens 2 QRコードトラッキング (追跡) サンプルを試してみる 【 Unity 】 - Qiita サンプルコード こちらからコードを落としてきます。 chgatla-microsoft/QRTracking このプロジェクトをUnity Hubに追加して起動します。ビルドターゲットをUWPに変更してビルドします。生成されたソリューションファイルをVisualStudioで開いて、デバッグターゲットをエミュレーターに設定して起動してみました。が、しかしエラーが起こってしまいました。 Unity%20+%20Hololens%202%20Emulator%E3%81%A6%E3%82%99QR%E3%82%B3%E3%83%BC%E3%83%88%E…
Keep Reading →
Unity + Hololens 開発環境構築 -プロジェクトの作成からエミュレーターでのデバッグまで-
2020.10.16
UnityでHololensエミュレータの開発環境を構築したのでその備忘録です。 入門チュートリアル Microsoftの入門チュートリアルに沿って環境構築を進めます。 入門チュートリアル - 1. 入門チュートリアルの概要 - Mixed Reality Unity Hubインストール Unity HubというUnityのプロジェクトやバージョンを管理できるソフトウェアを入れます。Unityの管理が楽になるので入れておきます。インストールするとライセンス認証を求められるのでUnityアカウントを持っていない場合は作成して認証します。 Download Unity! Hololens開発環境 こちらのドキュメントを参考にしました。 MR の基本 100 - Unity の概要 - Mixed Reality 必要なツール 適切な ツールがインストールされた WINDOWS 10 PC…
Keep Reading →
GatsbyJSで作成したブログのデータソースをNotionにする
2020.9.6
GatsbyJS%E3%81%A6%E3%82%99%E4%BD%9C%E6%88%90%E3%81%97%E3%81%9F%E3%83%95%E3%82%99%E3%83%AD%E3%82%AF%E3%82%99%E3%81%AE%E3%83%86%E3%82%99%E3%83%BC%E3%82%BF%E3%82%BD%E3%83%BC%E3%82%B9%E3%82%92Notion%E3%81%AB%E3%81%99%E3%82%8B%2004fe823549fc475abe358a923e9d406f/Untitled.png 今まではGatsbyのデータソースにNetlifyCMSのマークダウンエディタを使っていました。 普段のメモにNotionを使っています。Notionには記事をそのまま公開できる機能があり、これをそのままGatsbyのデータソースに使ってみました。 blog…
Keep Reading →
Preact × Webpack 環境で Emotion を使う
2020.8.12
Reactの軽量版という立ち位置のPreactでEmotionを使おうとして少しハマったので備忘録として書き残します。 Fast 3kB alternative to React with the same modern API Preactは上記のように書かれているのでライブラリとしてはかなり軽量な部類に入るのではないでしょうか。バンドルサイズを軽くしたいときはReactではなくこちらを使うと良いかと思います。今回もその理由でPreactを採用しました。 React × TypeScript 環境でEmotionを使うのは以下を参考にすれば良かったです。 Emotion - TypeScript インストール Preact × Webpack × TypeScriptのプロジェクトを作っていきます。 ディレクトリはこんな感じです。 src/index.tsx…
Keep Reading →
2020.6.18
個人的にWebSocketを使うことになり、環境構築したのでそのメモです。 Socket.IOのサイトのGet startedを参考に環境構築していきます。このサイトに沿ってやれ Get started | Socket.IO node.jsでサーバを動かす(TypeScript, express) こちらの記事でnode.jsでTypeScriptを動かす環境を用意します。 TypeScriptでExpress(node.js)を動かす | blog.kwst.site 以下のコマンドでTypeScript、expressを動かします。 main.tsはこんな感じ socket.ioでリアルタイム通信する socket.ioをインストールして単純な疎通確認をしてみます。 型定義もインストールしましょう。 main.tsはこんな感じです。socket.ioにhttp…
Keep Reading →
2020.5.24
Using TypeScript with React Native · React Nativeを参考にしながらReactNativeでTypeScriptを使う環境構築をしていきたいと思います。 ReactNative自体の環境構築は以前のこちらの記事を参照してください。 React Native環境構築 | blog.kwst.site ReactNativeプロジェクトにTypeScriptを導入していく initコマンドでプロジェクトをまず作ります。 TypeScript関連のモジュールをインストールする TypeScriptの他に既にインストールされているモジュールの型定義モジュールをインストールします。 tsconfig.jsonを作成する プロジェクトルートにTypeScriptのための設定ファイルtsconfig.json…
Keep Reading →
docker-compose で network Error が出たとき
2020.5.23
docker-composeを使っていて下記のようなnetworkエラーが出たときの対処法です。 単純にコンテナを消すと直りました。
Keep Reading →
2020.5.21
ラズパイをいじっているとOSのバージョンやモデルを確認することが多いです。よく使う各種コマンドをまとめました。 RaspberryPiのOSバージョンを確認する RaspberryPiのモデルを確認する cpuinfoのRevisionを使用してモデルを確認する方法 RPi HardwareHistory - eLinux.orgに書いてある表からモデル版法を参照できます。 私の手元のモデルはこれのようです。 device-tree/modelを使用してモデルを確認する方法 カーネル情報を確認する 使用しているカーネルのバージョンはこれで確認できます。 こちらでもカーネルが見れます。
Keep Reading →
RaspberryPi上でOpenCVでWebカメラの映像入力を使う(node-opencv使用)
2020.5.14
RaspberryPiでWebカメラの映像を使ってOpenCVを使った画像認識などをしようと思い試行錯誤してみました。 今回使用しているのは下記の全方位カメラです。 Insta360 Air | Insta360 360度ビデオカメラ | 株式会社アスク node-opencvをRaspberryPiで動かすまでの記事はこちらです。 RaspberryPiでnode.js上でOpenCVを使う | blog.kwst.site Webカメラの映像を表示するサンプル実行 OpenCVでWebカメラの映像を表示するサンプル(main.js)を実行してみます。 実行します。 エラーが出ました。 現在NODE_MODULE_VERSION 72を使っているのですが、node-opencvではNODE_MODULE_VERSION 64が必要だというエラーのようです。 リリース一覧でNODE…
Keep Reading →
RaspberryPiでnode.js上でOpenCVを使う
2020.5.13
RaspberryPi上でnode.jsを使ってOpenCVプログラミングをして見たいと思います。 Webカメラを使って画像認識させます。Webカメラをラズパイ上で動かすまでの記事はこちらです。 RaspberryPiでカメラを使う(raspivid, raspistill, fsbcam) | blog.kwst.site node.jsをラズパイ上でバージョン管理するまでの記事はこちらです。 RaspberryPiにnvmを入れてnode.jsのバージョン管理を行う | blog.kwst.site node-opencvをインストール 今回はnode.jsで動かしてみます。 opencv - npm インストールしてみます。 いきなりエラーが出ました。おそらくOpenCV本体がインストールされていないのが原因みたいです。 コンパイル済みのOpenCV…
Keep Reading →
RaspberryPiでカメラを使う(raspivid, raspistill, fsbcam)
2020.5.13
RaspberryPi上でカメラの画像や映像を扱うにはraspividコマンドやraspistillコマンドやfsbcamコマンドを使う。これらを試してみた。 RaspberryPiのOSのバージョン 使うWebカメラ こちらの全天球カメラをRaspberryPiに接続して使う。 Insta360 Air | Insta360 360度ビデオカメラ | 株式会社アスク カメラモジュールを扱うraspistill, raspividコマンドを使ってみる raspistillは画像を保存するAPI。 raspistill - Raspberry Pi Documentation raspividは動画を保存するAPI。 raspivid - Raspberry Pi Documentation…
Keep Reading →
RaspberryPiにnvmを入れてnode.jsのバージョン管理を行う
2020.5.12
nvmを入れてRaspberryPi上のnode.jsのバージョン管理を行う。 GitHub - nvm-sh/nvm: Node Version Manager - POSIX-compliant bash script to manage multiple active node.js versions インストールする。 コマンドを有効化する。シェル起動時にコマンドが有効になるように.bashrcに下記を追記。 インストールできるバージョン一覧。 node.jsをインストールする。 ディレクトリごとにバージョンを変えたい場合は.nvmrcを配置してバージョンを書き込む。
Keep Reading →
2020.5.12
node.jsのバージョン管理にnodenvを使ってみる。 GitHub - nodenv/nodenv: Manage multiple NodeJS versions. インストール コマンド有効化 .bash_profileにPATHを追加した。 node-buildプラグインをインストール node.jsのバージョン一覧を取得するのにnode-buildプラグインが必要。 GitHub - nodenv/node-build: Install NodeJS versions nodenv installコマンドが使えるようになるので、下記コマンドでバージョン一覧を確認できる。 node-build-update-defsプラグインをインストール node.jsのインストールできるバージョン一覧を更新するためのプラグイン。nodenv install --list…
Keep Reading →
RaspberryPi開発でVSCodeのRemote Developmentを試す
2020.5.12
RaspberryPiでOpenCVを動かすことになり、開発環境を構築してみる。普段Macで開発しているのでそのままMacで開発しているようにできないか調べてみた。 VSCodeのRemote Developmentを使ってみる。 Remote Development - Visual Studio Marketplace こちらの記事が大変参考になった。というかこれそのもの。 Raspberry Piで電子回路開発はVSCode Remote Developmentがイイ感じ - Qiita インストールする。 raspberrypi.localに接続。 簡単に接続できて拍子抜けした。このままローカル開発のような感覚で開発ができそう。
Keep Reading →
MediaRecorder APIでCanvasを録画してみる
2020.1.5
ブラウザで動画をトリミングして軽く編集できるツールを作りたくて色々調査していくとMediaRecorderというAPIでCanvasをまるまる録画して動画データに変換できることを知りました。 MediaRecorder - Web API | MDN Canvasにマウスで線を引く様子を録画する Canvas上にマウスで線を引く様子を動画ファイルに変換するサンプルを作りました。 Canvasを録画するサンプル MediaRecorderの使い方 Canvasのstreamをコンストラクタに入れます。オプションとしてmimetypeを設定することができます。 ブラウザがサポートしているmimetypeはMediaRecorder.isTypeSupportedで調べることができます。 MediaRecorder.isTypeSupported - Web API | MDN…
Keep Reading →
WebGL開発環境を整える(Parcel + TypeScript + Three.js)
2020.0.9
TypeScript を使った Three.js の開発環境を構築してみました。 最終的なソースコードはこちらに置きました。 sandbox/three-js at master · SatoshiKawabata/sandbox · GitHub Parcelを使う モジュールバンドラにはParcelを使います。とりあえずTypeScriptとWebGLが動く環境が欲しかったのでWebpackを使うまでもないかなと思いParcelを使いました。 Parcel インストール HTML、TypeScriptの準備 Parcelの起動htmlファイルsrc/index.htmlを作成する。index.tsを読み込むようにします。 TypeScriptファイルsrc/index.tsを作成する。ただhelloと出力されるだけのTypeScriptです。 起動 下記コマンドでdev…
Keep Reading →
フロントエンドカンファレンス福岡 雑多メモ #fec_fukuoka
2019.10.16
フロントエンドカンファレンス福岡行ってきました。発表者の方々、運営の方々おつかれさまでした。良い刺激になりました。 Frontend Conference Fukuoka 2019 聞いた発表の雑多なメモのまとめです。雑多なので正確性は保証できません。。。 『HTML Optimization for Web Performance』by 泉水 翔吾 氏 パフォーマンスのメトリクスの種類と計測方法の紹介。将来的に実装されるAPIなども紹介。 以下、発表中にとった雑多メモ クリティカルレンダリングパス CSSSOM パフォーマンスメトリクス 元来はLoadとかDOMContentLoadedとか使ってた youtubeならvideoが表示されたタイミングが大事 でもそれはDOMContentLoadedでは取れないよね Time to interactive demo User…
Keep Reading →
github を使う上で便利な hub コマンドを使ってみる
2019.10.13
コマンドラインから github に PR などを作成できる hub コマンドが便利だったので備忘録。 GitHub - github/hub: A command-line tool that makes git easier to use with GitHub. インストール Homebrew からインストールします。 git コマンドのエイリアスに設定する .bash_profile に下記を追加します。 bash 以外にも fish を使うのでconfig.fishに設定を追加します。 実行してみる 最初は github の認証が求められるので入力するか、~/.config/hubに認証情報を追加するかします。 下記コマンドで実行。タイトルやメッセージを入力後、PR が作成されます。 ドラフトにしたい場合は-dをつけます。 参考 GitHub のコマンドラインツール「hub…
Keep Reading →
swagger で定義した型から TypeScript のコードを生成する
2019.10.4
Swagger を使って API 定義を書いた後、型定義を出力したいなーと思い TypeScript のコード生成をやってみました。 sw2dts を使ってみる お手軽に型ファイルを生成できそうだったのでこれを使ってみました。 GitHub - mstssk/sw2dts: Generates TypeScript definition file(d.ts) from swagger.json for edge cases. swagger.yamlのdefinitionsで定義されているモデルを抽出して型ファイルとして保存できます。 インストール ts ファイルの生成 試しに Swagger Petstore を変換してみます。 Swagger Petstore 変換コマンドはこんな感じです。 生成された ts ファイルはこちらです。 お手軽に型定義だけを生成したかったので sw2dts…
Keep Reading →
npm installしたときに脆弱性(severity vulnerabilities)のエラーが出た
2019.9.22
npm installしたとき下記のエラーが出ました。脆弱性に問題のあるパッケージが見つかったとのことです。 npm auditで詳細をみてみます。全てpm2に関連するものです。 pm2とはnode.jsのプロセスマネージャです。 pm2 - npm npm audit fixをやれば直ると書いてあるのでやってみました。 もう一度npm auditをやってみると直っていました。 Docker内でも同様のエラーが出るので対処したい Docker内でもnpm installしているので同様のエラーが出てしまいイメージのビルドができません。かと言ってDocker内でnpm audit fixを実行するのも面倒です。 今回はhttps-proxy-agentというモジュールひとつだけの脆弱性なのでこのモジュールをpackage.jsonに追加してやります。 これでDocker…
Keep Reading →
TypeScriptでExpress(node.js)を動かす
2019.9.18
node.jsのプロジェクトでも型の恩恵を受けるためにTypeScriptを使いたいと思うことが多いです。ts-nodeを使ってExpressの環境構築をしてみました。 ts-node を使用する 普通にTypeScriptをコンパイルしてjsを吐き出してそれを実行する方法でもいいですが、TypeScriptを使ったnode.jsの実行環境としてts-nodeがあるのでそれを使ってみます。トランスパイルなしにTypeScriptを実行できます。 GitHub - TypeStrong/ts-node: TypeScript execution and REPL for node.js インストール typescriptと型定義モジュールも一緒にインストールします。 実行 index.tsを下記のように書いてnpx ts-node index.tsで実行できます。 ts-node-dev…
Keep Reading →
2019.9.11
GatsbyJSのshowcaseに自分のサイトを載せる | Blog の記事でshowcaseにプルリクエストを送りました。それがマージされて公開されました🎉 blog.kwst.site,: Showcase | GatsbyJS | GatsbyJS サイトのスクリーンショットの日本語が表示できていないですね…。差し替えることはできないだろうか。 説明文を日本語で書いていたのですが、英語にしてくださいということだったのでそこは直しました。 Could you add an English translation to this description as well? We want to make sure the showcase is accessible for "all" users. chore(showcase): Add blog.kwst.site by…
Keep Reading →
Puppeteer(Headless Chrome)でDOMの追加・変更を検知する
2019.9.11
Headless Chromeでサイトにアクセスして、DOMの追加や変更を検知してなにか(例えばDOMがロードされたタイミングでスクショを撮ったりなど)処理をしたい場面が結構あります。 そういうときに使えるのがPage.waitForメソッドです。 このメソッドはwaitForSelectorとかのラッパー関数なのでセレクタも指定することができます。 使い方 .selectorというクラスがbodyのどこかのDOMに足されるまで待つという処理になります。 デモコードを用意しました。
https://github.com/SatoshiKawabata/puppeteer-waitfor-example index.htmlはこんな感じで、3秒ごとにDOMにnotify-〇〇というクラスが付与されるだけのプログラムです。 main.jsでは、notify…
Keep Reading →
2019.9.4
Showcase | GatsbyJS Showcaseに載せてもらうためには下記の手順を踏みます。要はdocs/sites.ymlを更新すれば良いみたいです。 Submit to Site Showcase | GatsbyJS Gatsbyのリポジトリをフォークしてきてプルリクエストを投げました。 chore(showcase): Add blog.kwst.site by SatoshiKawabata · Pull Request #18146 · gatsbyjs/gatsby · GitHub sites.ymlの書き方はsite-showcase-submissionsに記載の通りで、今回はこんな感じで書きました。 説明文を日本語にしましたがPRが通ることを願います。categoriesの項目はcategories.ymlから選ぶことになっています。個人的にはJapanese…
Keep Reading →
2019.9.1
プロジェクトが一段落して落ち着いたときなどにnpmモジュールのバージョンを上げる作業が入ったりします。プロジェクトが走っているときにライブラリのメジャーバージョンアップなんかがあったけど、破壊的変更あるからちょっと後回しにするなんてことよくあるんじゃないでしょうか。 一つ一つpackage.jsonの記述を消して再度npm i hogeを実行するのも面倒です。npm-check-update一気にアップデートしてみました。 現在のバージョンのチェック npm outdatedコマンドでバージョンの状態をチェックできます。 出力結果はこんな感じです。Currentがインストールされているバージョン、Wantedがsemverの条件に当てはまる最新版、Latestがそのライブラリの最新版となります。 ライブラリを一気にアップデートする npm-check-update…
Keep Reading →
GatsbyJS製サイトでビルドエラー "The page component must export a React component for it to be valid" を解決した
2019.8.26
Gatsby製のサイトで下記のビルドエラーが出たので解消した作業ログ。ローカルではエラーは出ないのですが、Netlifyに上げたときのビルドだけで出たのでちょっと焦りました。 こちらのissueに解決方法が書いてありました。 gatsby build error #11328 A page component must export a React component for it to be valid. Please make sure this file exports a React component: /Users/tiagosanchez/Documents/Projects/personalBlog/node_modules/gatsby-plugin-offline/app-shell.js · Issue #17059 · gatsbyjs/gatsby…
Keep Reading →
Gatsby製のサイトにrobots.txtを配置して検索サイトのクロールを制御する
2019.8.26
検索サイトにインデックスさせたくないページがあったり、まだ公開したくないページなどがある場合、robots.txtで検索サイトのクローラを制御することができます。 Gatsby製のサイトでrobots.txtを配置したかったのでプラグインを試してみました。 gatsby-plugin-robots-txt プラグインを使う gatsby-plugin-robots-txt gatsby-config.jsに以下の設定項目を追加します。 上記の設定で下記のrobots.txtが作成されます。 デプロイする環境ごとに設定を変える 例えばS3にstaging環境を用意している場合などはクロールさせたくありません。そういう場合は環境変数で場合分けすることができます。 gatsby-config.jsにenvを追加してdevelopmentとproductionを追加します。なぜかstaging…
Keep Reading →
TypeScript × React × Webpack のプロジェクトでsvgをimportしてjsxとして使用する
2019.7.20
画像などのjs以外のリソースをimportしてjsxで使用したいということがまぁまぁあると思います。react-svg-loaderというパッケージを使うとsvgをimportしてjsxとして使用することができます。 react-svg-loader - npm インストール 導入 インラインで直接使う場合は以下のようにimportすればOKです。この書き方初めて知りました。 Webpackで使用する Webpackで使用する場合は、READMEの導入を参考にwebpack.config.jsのloaderに設定を追加します。 ReactのコードもREADMEにならってこのように書きます。jsxで書けるのがいいですね。 エラーが出ました Webpackを起動するとエラーが出ました。jsxをゴニョゴニョしてるところでエラーが出てるのでしょうかね？もしかしたらTypeScript…
Keep Reading →
Storybookでレスポンシブなコンポーネントをデバイスごとに確認できるaddon-viewportを試してみた
2019.7.15
レスポンシブなWebアプリを作っているとデバイスごとの表示を切り替えるために、いちいち画面サイズを変えるのは面倒です。Storybook上でMediaQueryを切り替えられると大変便利です。addon-viewportを使うと簡単に確認できます。 @storybook/addon-viewport - npm インストール .storybook/addons.jsに以下を追加してアドオンを登録します。 使い方 .storybook/config.jsに以下を追加します。公式サイトに書いてあるとおり、kindleFire2とkindleFireHDを設定してみます。 こんなドロップダウンメニューが出てきて、選ぶとスクリーンサイズが切り替わります。 以下のようにして、コンポーネントごとにデフォルトのサイズを指定することもできます。
Keep Reading →
2019.7.10
WebpackDevServerでローカル開発をする際にAPIのモックサーバを立てて開発したい時があると思います。そういうときにWebpackDevServerで簡易的なサーバを実装する機能が便利です。 WebpackDevServerのbeforeプロパティを使えばかなり簡単にモックサーバを立てることができます。 devServer.beforeを使ったモックサーバ devServer.before | webpack webpack.config.jsのdev serverの設定でbeforeというプロパティでexpressのようなノリでサーバを実装できます。 webpack.config.jsに下記のように実装できます。 リクエスト リクエストはこんな感じで書けば良いです。 もしくはFetch API…
Keep Reading →
2019.7.3
Webアプリケーションのフロントエンジニアをやっているとクライアントからの報告を受けてバグ調査をする機会がたくさんありますが、ユーザから得られる情報には限界があります。エンジニアとしてはクライアントのスタックトレースが得られればバグ調査はかなりやりやすくなります。 Sentry エラーログを収集して参照しやすくするサービスです。普段の業務でも使っていて、バグ調査にかなり役立っています。 Sentry | Error Tracking Software — JavaScript, Python, PHP, Ruby, more 料金 個人で使う分にはフリープランで全然よさそうです。フリープランは一人までしか使えません。 Sentry Pricing アカウント作成 Githubアカウントから認証することができます。 プラットフォームを選択 かなりたくさんサポートされています。今回はReact…
Keep Reading →
GatsbyJS製のサイトにGoogleAnalyticsを導入する
2019.6.30
GatsbyJSで作ったサイトにGoogleAnalyticsを導入します。思いの外、簡単にできたので拍子抜けしました。 アカウントを作成 GAの管理画面から新しくアカウントを作成します。 Google AnalyticsをGatsbyJSプロジェクトに設定する Adding analytics のページの通り進めると簡単に導入できます。 gatsby-plugin-google-analyticsのインストール gatsby-plugin-google-analyticsというプラグインで簡単にサイトにGAを追加することができます。 gatsby-config.jsに以下の設定を追加します。trackingIdはGAの管理画面から参照できるIDです。 これで設定完了です。
Keep Reading →
Storybook v5 を TypeScript × React 環境に導入する
2019.6.29
以前、GatsbyJS × TypeScript製のサイトにStorybookを導入する ではGatsbyJSの環境でセットアップしました。今回は通常のTypeScript × React環境にStorybookをセットアップしたいと思います。 React環境でStorybookをインストールする Storybook for React のAutomatic setupに沿ってやっていきます。手動で入れたい場合はManual setupを参照してください。 以下のライブラリが自動でインストールされます。 以下のnpm scriptも自動で挿入されます。 以下の設定ファイルも自動で作成されます。 .storybook/addons.jsは以下の通りです。 .storybook/config.jsは以下の通りです。 stories/index.stories.js…
Keep Reading →
2019.6.25
フロントばっかり触っていてインフラの知識が皆無なので、EC2に入門してみました。 インスタンスの作成 Amazon マシンイメージ (AMI)の選択 インスタンスタイプの選択 無料利用枠の対象のものを選びます。 インスタンス作成の確認 これは何もせずにそのまま起動を押します。 キーペアの作成 既存のキーペアがなかったので、新しくキーペアを作成しました。 作成できた キーペアに権限を与える 以下のコマンドでキーペアに権限を与えます。 ec2インスタンスにssh接続 下記コマンドでssh接続できます。 これで一応ec2インスタンスにssh接続できました。ここにGitとかNodeとか入れてアプリケーションを作っていくことができます。 次回はECSを使ってみたいです。 参考 AWS EC2でNodeを動作させる - Qiita
Keep Reading →
TypeScirptでnode.js(express)を動かす
2019.6.24
ts-nodeを使ってTypeScriptでexpressを動かす環境を構築しました。 インストール 今回は簡単にts-nodeを使って動かします。 GitHub - TypeStrong/ts-node: TypeScript execution and REPL for node.js 起動ファイル ./src/index.tsをこのような感じにします。 import express from "express";ではエラーが出てしまったので*をつける形で対処しています。 tsconfig.json tsconfig.jsonはこんな感じにしました。 モジュールインポートでエラー ts-nodeで起動してみるとエラーが出ました。モジュールのインポートのところでコケています。 "module": "commonjs",を指定するとうまく行きました。 TypeScript…
Keep Reading →
jsコードジェネレータ hygen でReactのコンポーネントの雛形ファイルを自動生成する
2019.6.23
Reactのプロジェクトで作業をしているとコンポーネントクラスを毎回コピペで作るのが辛くなってきます。(Reactに限った話ではないですが) コードジェネレータでワン・コマンドで作れないかなーと思って探してみるとありました。 GitHub - jondot/hygen: The simple, fast, and scalable code generator that lives in your project. これを使うとテンプレートを記述しておけば簡単にコンポーネントの雛形を作ってくれます。 インストール 生成したいファイル コンポーネントの他にもstorybook用のstoriesファイルも生成したいです。 テンプレートの作成 拡張子の末尾に.tがつくのがテンプレートファイルです。 パラメータの挿入 テンプレートファイルでは(component.tsx.t)、<%= hoge…
Keep Reading →
EmotionでCSSをresetする(emotion-reset)
2019.6.19
Emotionを使用していて、イケてる感じでCSSをリセットする方法はないかなーと思い探してみました。 最初はressを使おうと思いましたが、cssをimportする必要がありcss-loaderの設定をしないといけないのでちょっと微妙でした。 そこでemotion-resetというライブラリを見つけました。 GitHub - Sayegh7/emotion-reset: Reset file for Emotion CSS-in-JS library. 元をたどるとこちらのreset-cssを参照しているようです。 GitHub - shannonmoeller/reset-css: An unmodified copy of Eric Meyer's CSS reset. PostCSS, webpack, Sass, and Less friendly…
Keep Reading →
2019.6.17
LPなんか作るときにこういったSNSボタンを埋め込むことがあります。ただReactのサイトで埋め込もうと思ったらReactのライフサイクル上でscriptの読み込みなどを発生させる必要があるので、少し面倒なところがあります。 LINEの友だち追加ボタンの埋め込みコードは↓ここから取得できます。 LINE Social Plugins 今回はこのボタンを埋め込みます。 埋め込みコードはこんな感じ。scriptタグがあるので、div要素がちゃんとマウントされた状態でscirptを読み込む必要があります。 Helmetを使ってみた React HelmetはReactでheadタグが記述できるライブラリです。 GitHub - nfl/react-helmet: A document head manager for React これだとdiv…
Keep Reading →
静的サイトだけどSPAのような感覚でページ遷移したい-ReactでCode Splitting-
2019.5.28
静的サイトなんですが、一度アクセスした後はSPAのような感覚でページ遷移するようなサイトを作りたくてCode Splittingを実装したのでその作業ログです。 具体的には、S3などの静的サイトホスティング上で配信するサイト上で、hoge.com/page1のようなサブページにアクセスした後もSPAのような感覚でページ遷移できるようにしたいです。 Code Splittingとは 各ページで必要なjsファイルだけとってきてページ遷移するときに次のページで必要なjsファイルだけとってくるような構成を作ってみたかったので、やってみました。最初のアクセスでページのロード時間を短くしたいのです。スマホの回線環境とかだとSPAを開こうとしたときにたくさんページがある場合に初期表示に不要なファイルのロードも走るので時間がかかってしまいます。それを解消するための手法としてCode Splitting…
Keep Reading →
CloudFront経由のS3で公開した静的サイトでサブディレクトリにアクセスしたときにindex.htmlを返すようにする
2019.5.25
やりたいこととしては、www.hoge.com/aboutにアクセスするとwww.hoge.com/about/index.htmlのページが見れるようにしたいです。 デフォルトのままだとwww.hoge.com/aboutにアクセスしてもAccess Deniedになってしまいます。 CloudFrontのOrigins設定を変更する ここのホスティングしているエンドポイントを直接CloudFrontのOriginsに設定します。デフォルトではバケットのurlになっています。 CloudFrontのOrigins設定を変更します。Editから変更可能です。 ここに先程のホスティングしているエンドポイントを入力します。 StatusがIn Progressになるのでしばらく待ちます。数分はかかります。Enabled…
Keep Reading →
静的サイトにpuppeteerとresemblejsでスクリーンショットテスト環境を作る
2019.5.22
静的サイトを作っていて結構思うことなのですが、こういうこと↓が結構あります。 「CSS変更したら全然違うページが崩れちゃった」 「コンポーネント変更したら別のページでも使われているの知らなくて崩れちゃった」 これらを回避するために、デプロイする前に全ページ確認する作業をやらなくてはいけません。これはかなり面倒です。サイト全体のスクショを開発前と開発後で差分を抽出して、意図しない見た目の変更をキャッチできるようにすれば確認する手間が減ります。 そんな手間を省くためにサイト全体のスクリーンショットの差分を取得できる環境を作ってみました。 流れとしてはこんな感じ 現在のサイトのスクリーンショットを保存する 開発中のスクリーンショットと比較する 差分があれば差分画像を保存する pupeteerのインストール GitHub - GoogleChrome/puppeteer: Headless…
Keep Reading →
2019.5.22
Jestのテスト環境をTypeScriptで動かしたかったのでメモ。テストコードでも型安全に書きたいです。 インストール 必要なモジュールをインストールします。 jestの設定ファイル jest.config.jsをプロジェクトに追加します。.spec.tsがテスト対象になるようにします。 テストコード test.spec.tsを下記のようにします。 テスト 今回は./test/配下にテストコードを置きました。 実行スクリプトは下記の通りです。--watchAllを入れることでテストコードを監視して再実行してくれます。 実行結果 TypeScriptのコンパイルエラー プロジェクトにspec.tsのテストコードを追加すると、こんな感じのエラーが出ます。これはJestのモジュールをimportすることなくtsファイルに書けてしまうのが原因のようです。 なのでtsconfig.json…
Keep Reading →
2019.5.16
個人的なプロジェクトでejsで作られたS3上の静的サイトをGatsbyJSに移しています。その過程でリダイレクトさせる必要が出てきました。 S3でリダイレクトさせる方法 S3でリダイレクトさせるには以下の2つ方法があります。今回はリダイレクションルールを使います。 リダイレクションルール(バケットごとに設定) ウェブページリダイレクト(S3ごとに設定) やりたいこと htmlページをディレクトリにリダイレクトさせたいです。 hoge.com/page-2.html→hoge.com/page-2/ 404→Gatsbyの404ページ 設定方法 静的ウェブホスティングの設定のリダイレクトルール (任意)から設定可能です。 ルールにはこのように記述します。 これでできました。便利ですね。
Keep Reading →
2019.5.8
Emotionとは emotion CSS in JSのライブラリ一つでJavaScriptの中でCSSも書くことでコンポーネントファイルの中でスタイルも含めて管理しやすくなります。スコープの閉じられることになるのでスタイルが他のDOMに影響を与えることがないのが最大のメリットです。 CSS in JSのライブラリは色々存在していてstyled-componentsが有名どころです。EmotionはObjectとしてスタイルを扱うことができるのが他のライブラリとの大きな違いです。 CSS-in-JSのライブラリとして「emotion」を選択している理由 - Qiita 導入 GatsbyJSへの導入方法はこちらを参考にしました。 Emotion | GatsbyJS インストールします。 gatsby-config.jsのpluginsにgatsby-plugin-emotion…
Keep Reading →
GatsbyJS × TypeScript製のサイトにStorybookを導入する
2019.5.8
GatsbyJS製の静的サイトでStorybookを使うと結構いい感じにパーツごとに分けて作ることができて良いんじゃないかなと思いやってみました。同じデザインで画像などのコンテンツが異なるだけのページを作るときなんかに効果的です。また、普通にhtmlで作るときはエディタの文法の間違いなんかは見つけづらいですが、TypeScriptで書くことでそれもなくせます。 基本的にはこのページを参考に進めます。 Visual Testing with Storybook | GatsbyJS インストールします。 GatsbyJSのプロジェクトのルートでStorybookを初期化します。 Storybookの設定ファイル.storybook/config.jsを下記のようにします。 Storybook用のwebpack設定ファイル.storybook/webpack.config.js…
Keep Reading →
AWS CloudFrontのキャッシュをクリアしてS3の静的サイトを更新させる
2019.5.7
最近個人的なプロジェクトでS3を触っています。ちゃんと触るのは初めてなので色々調べながらやっています。 S3で公開している静的サイトを更新しようとファイルアップロードしてもなかなか更新されなかったのを解決した備忘録です。 Amazon CloudFront とは - Amazon CloudFront Amazon CloudFront は、ユーザーへの静的および動的ウェブコンテンツ (.html、.css、.js、イメージファイルなど) の配信を高速化するウェブサービスであり、CloudFront ではエッジロケーションと呼ばれるデータセンターの世界規模のネットワークを通じてコンテンツが配信されます。 要するにCDNですね。これのキャッシュが効いていてコンテンツが更新されなかったのが原因のようでした。 キャッシュクリアする方法 CloudFrontでInvalidation…
Keep Reading →
AWS CLI をインストールしてS3のバケットのファイルを確認する
2019.5.6
個人的なプロジェクトでS3をAWS CLIから使ってみました。 AWS CLIをこれに沿ってインストールします。 pythonのバージョン確認。 バンドルされたインストーラをダウンロード。 解答します。 インストールコマンドを実行します。 インストールできました。 credential情報を設定します。AWS Access Key IDとAWS Secret Access KeyとregionをAWSのコンソールから取得して設定します。 S3のファイルの確認 S3のバケットの中身を確認します。 コマンドラインからS3のバケットのファイルをダウンロードできます。 参考 macOS に AWS CLI をインストールする - AWS Command Line Interface 【AWS S3コマンド】S3から複数ファイルを同時にダウンロード/アップロードする方法。 - Qiita
Keep Reading →
2019.5.5
React勉強会@福岡 vol.2に登壇しました。 発表スライドはこちらです。 『GatsbyJSで自分のブログ作った話』 内容的にはReactというよりも #22 「Trello があるので眠れない」 の紹介とブログの宣伝になってしまいました。
Keep Reading →
React NativeとFirebaseでチャットサンプルを作る
2019.5.3
React NativeとFirebaseを使って簡単なチャットのサンプルを作ってみました。 React NativeとFirebaseを連携させるためにReact Native Firebaseを使います。 react-native-firebase-starterでプロジェクトの雛形を作る 以前の記事『React Native環境構築』ではreact-native-cliを使ってプロジェクトを作りましたが、今回はトップページのBasic Starter Kitを使ってプロジェクトの雛形を作ります。 まずクローンします。 クローンしたディレクトに移動して依存モジュールをインストールします。 CocoaPodsでiosのモジュールをインストールします。(CocoaPods…
Keep Reading →
2019.4.29
会社の同僚とアルゴリズムの勉強会を少人数で始めました。最終的にはGoogleに転職する頭でアルゴリズムを考える力をつけるのが目的です。実際にやってみて一人で勉強していくよりも相談しながら解いていくほうが考えがより深まるような感じがあります。 今回はナップサック問題を動的計画法で解くのを勉強しました。数年前に応用情報を受験したときの本番で出た問題でした。当時はナップサック問題を知らなかったので、なんとなく解いた記憶があります。 ナップサック問題 容量 C のナップサックが一つと、n 種類の品物（各々、価値 pi, 容積 ci）が与えられたとき、ナップサックの容量 C…
Keep Reading →
2019.4.17
前回の記事(React NativeアプリをFirebaseと連携させようとしたけど失敗した)で、firebaseを連携させるところで手詰まりになってしまったので、公式サイトのGetting StartedをみつつExpoを使わずに構築してみます。 一応、Expoを使って環境構築した記事はこちら Expoを使ったReact Native環境構築 インストール 前提として、XcodeとAndroid Studioのインストールは済んでいます。 一応nodeのバージョンは10.15.3です。 react-native-cliをインストールします。 プロジェクトを作成します。 iOS iOSで起動してみます。 起動できました！なんと簡単なのでしょうか。 Androind 次はAndroidで起動してみます。 $HOME/.bash_profileにSDKの設定を追加します。 Android…
Keep Reading →
React NativeアプリをFirebaseと連携させようとしたけど失敗した
2019.4.16
前回の記事(Expoを使ったReact Native環境構築)で環境構築しまして、更にFirebaseと連携させるところまでやりたかったんですが、途中でエラーが解消できず手詰まりになってしまいましたが、失敗ログとして書き残します。 React Native Firebaseというモジュールを使います。 公式サイトに導入方法が載っています。こちらを参考にして進めていきます。 https://rnfirebase.io/docs/v4.0.x/installation/initial-setup 今回は以前に作ったプロジェクトをそのまま使います。 expo ejectが必要 expoというプラットフォームを使っているのでXCodeプロジェクトが隠蔽されています。なのでexpo ejectでプロジェクトを展開してやる必要があります。 展開方法やXCodeとAndroid Studio…
Keep Reading →
2019.4.12
React Nativeは今まで扱う機会がなかったので、今回初めて使ってみました。練習としてチャットアプリのサンプルを作ってみます。環境構築の作業ログです。 一昔前はiOSアプリの環境構築するだけで一苦労だったので、導入がものすごく簡単で感動しました。いい時代になりましたね。 インストール 公式サイトのGetting Startedの通りに進めてみる。expo-cliというパッケージでプロジェクトを作成することができます。元々create-react-native-appだったらしいのですが、今はExpo Cliに統合されたらしいです。React Nativeに限らずモバイルアプリを作るためのプラットフォームというイメージでいいと思います。 プロジェクトを作成。 expo initのログはこんな感じに出ます。expo-template-tabs…
Keep Reading →
2019.4.1
1記事/週のペースをなんとか維持できてます。このペースをずっと維持していきたいです。 Webフロントエンドの開発環境を構築する機会があったので作業ログ。 ちゃんとしたプロジェクトだとreact-create-appは使う気になれないので、毎回これめんどくさいんだけど毎回やってます。ボイラープレート作れって話だけど、ライブラリのトレンドとかその時々の状況によって変えたいのであえていつも0から構築するようにしてます。 ソースはここに置いてあります。 sandbox/webpack-react-typescript at master · SatoshiKawabata/sandbox · GitHub パッケージのインストール まず必要なパッケージをインストール。 @types/react: ReactのTypeScript定義モジュール @types/react-dom: ReactDom…
Keep Reading →
2019.3.28
Flutterアプリ上でFirebaseを使えるようにした作業ログです。authログインを作りました。 firebaseの公式サイトにやり方が載っています。基本的にはこれに沿ってやっていけばFlutterアプリ上でFirebaseが使えるようになります。 https://firebase.google.com/docs/flutter/setup?hl=ja 下記の記事を参考にさせていただきました。ほぼこれをなぞっただけです。 flutterでfirebaseを使いチャットアプリを作る（auth編） - Qiita fireaseの設定 プロジェクトを追加 Androidアプリの設定 iosアプリの設定 Xcodeプロジェクトの設定 ios/Runner.xcodeprojを開きます。Runnderを選択し、GeneralタブのBundle IdentifierにFirebase…
Keep Reading →
2019.3.28
FlutterはDartでios/androidの両方のアプリを作れるフレームワークです。環境構築してみたのでその作業ログです。 基本的には公式サイトを参照しました。Flutterの公式ドキュメントはかなり充実していて、結構簡単に構築することができました。 https://flutter.dev/docs/get-started/install 参考リンク https://qiita.com/ikemura23/items/7a73219657dbdc63845f https://qiita.com/mkosuke/items/7957e71968aefc6558be FlutterのインストールからHello Worldまで SDK取得 https://flutter.dev/docs/get-started/install/macos からsdkをダウンロード インストール .bash…
Keep Reading →
2019.3.19
NetlifyにはFuntionsという機能があります。これを使えばNetlifyでデプロイしたサイトでAmazon Lambdaを使えるようになります。 チュートリアルをやってみる チュートリアルをやってみました。 Netlify Functions Examples deploying a copy to Netlify.のリンクを踏むと自分のNetlifyに飛んで、プロジェクトをコピーするかどうか聞かれます。私はGithubアカウントと連携しているのでGithubにリポジトリをコピーしました。 出来上がったリポジトリはこちら。 これをNetlifyでデプロイすると先程のチュートリアルページと全く同じものがデプロイされます。こちらのurlにデプロイしてみました。 https://netlify-functions-example-kwst.netlify.com…
Keep Reading →
2019.3.19
何を今更Parcelやってるんだという感じはしますが、さくっとReactの環境構築が必要な機会があったので備忘録としてまとめておきます。Parcelは軽いものをちゃちゃっと作りたいときに便利ですね。 parcelをインストールします。 必要なbabelのモジュールをインストールします。 reactをインストールします。 .babelrcを作成して以下を記述します。 エントリーポイントの作成。webpackと違ってhtmlファイルがエントリポイントになります。 index.html index.js style.css 起動 これでlocalhost:1234にアクセスするとページが開きます。デフォルトでソースマップもホットリロードも走ります。 ビルドしてhtml/js/cssを出力する場合はbuildコマンドをたたきます。
Keep Reading →
2019.3.17
ブラウザだけで動画編集できないかなーと以前から妄想している話。 探せばすぐにこういうまとめページは見つかります。 ブラウザで動画編集できる無料サービスWE VIDEOの使い方 | カンタン動画入門 撮影・編集・webにアップする方法まで こういうWebで動画編集できるアプリって書き出しのときはやっぱりサーバサイドでやってるんじゃないでしょうか？どうやってるんだろう。 ↓これくらいの機能があれば十分だと思います。 動画の切り貼りができる テキストの挿入ができる フェードイン・アウトができる 軽くフィルタ(ブラーとか色調補正とか)ができる 書き出しができる 一番ネックになってくるのは書き出しのところだと思います。複数の動画ファイルをくっつけて書き出すってできるのかな？ 書き出しをサーバサイドでやってしまえば、そこが課金ポイントになるでしょうね。でも動画ファイルって数GB…
Keep Reading →
Netlify CMS、Gatsby、Netlifyがそれぞれやってくれること
2019.3.13
このブログはNetlify CMS、Gatsby、Netlifyを組み合わせて作られています。 あまりにも簡単につくれてしまうので、それぞれが何をやっているのかわからなかったので、まとめました。 大まかな流れはこの図のようになります。 Netlify CMSがやってくれること Netlify CMSがやってくれるのはmdファイルの作成とGithub等へのコミットです。 adminページへのログイン たぶん連携しているサービスに依存(Github, Gitlabなど)します。 記事の作成・編集・削除が可能 それぞれがこんな感じで対応します。 作成: mdファイルの作成コミット 編集: mdファイルの更新コミット 削除: mdファイルの削除コミット 記事の下書き、公開 ここらへんのことはこちらの記事にまとめています。 まとめるとこうなります。 下書き: masterブランチへのPR…
Keep Reading →
Netlify CMSのブログ記事のURLに日本語が含まれないようにしたい
2019.3.13
生成される記事のマークダウンのファイル名に日本語が含まれないようにしたので、その作業ログです。 config.ymlにあるslugというプロパティがマークダウンのファイル名になっているっぽい。 Netlify CMSのドキュメントを確認すると For folder collections where users can create new items, the slug option specifies a template for generating new filenames based on a file's creation date and title field. と書いてあるので、slugがマークダウンのファイル名のテンプレートになっていることがわかります。 更に、時刻まで指定できるので、これを使いましょう。 {{minute}}: 2-digit minute of…
Keep Reading →
Netlify CMSとGatsbyで作られたブログ記事が公開されるまで
2019.3.13
Netlify CMSとGatsbyで作られたブログ記事が公開されるまで このブログはNetlify CMSとGatsbyJSで作られています。 導入がかなり簡単で↓こちらの記事の通りに進めるだけですぐに公開できました。 Gatsby + Netlify CMSで作ったブログをカスタマイズする 備忘録として、記事を書いてから公開されるまでのフローをまとめてみます。 0. 前提(Github連携、下書き機能) 前提として、GithubリポジトリとNetlifyを連携しているので、masterブランチにpushされる度にNetlifyでデプロイが走るようになっています。 また、Netlify CMSの下書き機能を使用しているので、Githubのプルリクエストと連動するようにしています。Github…
Keep Reading →
2019.3.13
この記事の通りやったらできました。ありがとうございます。 GatsbyでYouTubeとTwitter埋め込み | Takumon Blog Twitterはこんな感じ。 こう書くと埋め込めます。 youtubeはこんな感じ。これは学生時代に手がけたミュージックビデオ。 マークダウンでこれをこう書きます。
Keep Reading →
NetlifyCMSと連携したGatsbyのプロジェクトにTypeScriptを使えるようにする
2019.3.13
NetlifyCMSと連携したGatsbyのプロジェクトにTypeScriptを使えるようにする TypeScriptを導入してみた作業ログです。 手順は主にこれの通りやりました。 https://qiita.com/otanu/items/f8840e66fb5e0993086d Gatsbyのプラグインをインストール gatsby-config.jsにgatsby-plugin-typescriptを追加します。 tsconfig.jsonを追加 コンパイルエラー除去 起動してみるとコンパイルエラーがたくさん出たので、全て修正しました。 足りないパッケージをインストール。 コンポーネントに対して全て型を付けていきました。 ステートレスなコンポーネントの型の付け方は↓こちらの記事を参考にしました。 TypeScript & Stateless Component でchildren…
Keep Reading →
2019.3.11
ブログを始めてみます。どうせならHeadlessCMSでやってみようとか思いGraphQLを使うGraphCMSを使おうかと思いましたが、運用が楽そうなNetlify CMSを選びました。 こちらの記事
Gatsby + Netlify CMSで作ったブログをカスタマイズする通りに進めたら1時間もかからずブログを作る土台ができたので感動しました。ここまで簡単に導入できるとは思いませんでした。Next.jsとgithub pagesでブログを作ってみようとして途中で挫折したこともありました。 今までの人生で日記やブログが続いた試しがないですが、細々と続けていけたらと思います。
Keep Reading →