MediaRecorder APIでCanvasを録画してみる
February 05, 2020
ブラウザで動画をトリミングして軽く編集できるツールを作りたくて色々調査していくと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)
January 09, 2020
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
November 16, 2019
フロントエンドカンファレンス福岡行ってきました。発表者の方々、運営の方々おつかれさまでした。良い刺激になりました。 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 コマンドを使ってみる
November 13, 2019
コマンドラインから 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…
Keep Reading →
swagger で定義した型から TypeScript のコードを生成する
November 04, 2019
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 ファイルはこちらです。 お手軽に型定義だけを生成したかったので sw…
Keep Reading →
npm installしたときに脆弱性(severity vulnerabilities)のエラーが出た
October 22, 2019
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…
Keep Reading →
TypeScriptでExpress(node.js)を動かす
October 18, 2019
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…
Keep Reading →
October 11, 2019
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の追加・変更を検知する
October 11, 2019
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 →
October 04, 2019
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…
Keep Reading →
October 01, 2019
プロジェクトが一段落して落ち着いたときなどに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" を解決した
September 26, 2019
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を配置して検索サイトのクロールを制御する
September 26, 2019
検索サイトにインデックスさせたくないページがあったり、まだ公開したくないページなどがある場合、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…
Keep Reading →
TypeScript × React × Webpack のプロジェクトでsvgをimportしてjsxとして使用する
August 20, 2019
画像などの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…
Keep Reading →
Storybookでレスポンシブなコンポーネントをデバイスごとに確認できるaddon-viewportを試してみた
August 15, 2019
レスポンシブなWebアプリを作っているとデバイスごとの表示を切り替えるために、いちいち画面サイズを変えるのは面倒です。Storybook上でMediaQueryを切り替えられると大変便利です。 addon-viewport を使うと簡単に確認できます。 @storybook/addon-viewport - npm インストール .storybook/addons.js に以下を追加してアドオンを登録します。 使い方 .storybook/config.js に以下を追加します。公式サイトに書いてあるとおり、 kindleFire2 と kindleFireHD を設定してみます。 こんなドロップダウンメニューが出てきて、選ぶとスクリーンサイズが切り替わります。 以下のようにして、コンポーネントごとにデフォルトのサイズを指定することもできます。
Keep Reading →
August 10, 2019
WebpackDevServerでローカル開発をする際にAPIのモックサーバを立てて開発したい時があると思います。そういうときにWebpackDevServerで簡易的なサーバを実装する機能が便利です。 WebpackDevServerの before プロパティを使えばかなり簡単にモックサーバを立てることができます。 devServer.before を使ったモックサーバ devServer.before | webpack webpack.config.js のdev serverの設定で before というプロパティでexpressのようなノリでサーバを実装できます。 webpack.config.js に下記のように実装できます。 リクエスト リクエストはこんな感じで書けば良いです。 もしくは Fetch API…
Keep Reading →
August 03, 2019
Webアプリケーションのフロントエンジニアをやっているとクライアントからの報告を受けてバグ調査をする機会がたくさんありますが、ユーザから得られる情報には限界があります。エンジニアとしてはクライアントのスタックトレースが得られればバグ調査はかなりやりやすくなります。 Sentry エラーログを収集して参照しやすくするサービスです。普段の業務でも使っていて、バグ調査にかなり役立っています。 Sentry | Error Tracking Software — JavaScript, Python, PHP, Ruby, more 料金 個人で使う分にはフリープランで全然よさそうです。フリープランは一人までしか使えません。 Sentry Pricing アカウント作成 Githubアカウントから認証することができます。 プラットフォームを選択 かなりたくさんサポートされています。今回はReact…
Keep Reading →
GatsbyJS製のサイトにGoogleAnalyticsを導入する
July 30, 2019
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 環境に導入する
July 29, 2019
以前、 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 →
July 25, 2019
フロントばっかり触っていてインフラの知識が皆無なので、EC2に入門してみました。 インスタンスの作成 Amazon マシンイメージ (AMI)の選択 インスタンスタイプの選択 無料利用枠の対象 のものを選びます。 インスタンス作成の確認 これは何もせずにそのまま 起動 を押します。 キーペアの作成 既存のキーペアがなかったので、新しくキーペアを作成しました。 作成できた キーペアに権限を与える 以下のコマンドでキーペアに権限を与えます。 ec2インスタンスにssh接続 下記コマンドでssh接続できます。 これで一応ec2インスタンスにssh接続できました。ここにGitとかNodeとか入れてアプリケーションを作っていくことができます。 次回はECSを使ってみたいです。 参考 AWS EC2でNodeを動作させる - Qiita
Keep Reading →
TypeScirptでnode.js(express)を動かす
July 24, 2019
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のコンポーネントの雛形ファイルを自動生成する
July 23, 2019
Reactのプロジェクトで作業をしているとコンポーネントクラスを毎回コピペで作るのが辛くなってきます。(Reactに限った話ではないですが) コードジェネレータでワン・コマンドで作れないかなーと思って探してみるとありました。 GitHub - jondot/hygen: The simple, fast, and scalable code generator that lives in your project. これを使うとテンプレートを記述しておけば簡単にコンポーネントの雛形を作ってくれます。 インストール 生成したいファイル コンポーネントの他にもstorybook用の stories ファイルも生成したいです。 テンプレートの作成 拡張子の末尾に .t がつくのがテンプレートファイルです。 パラメータの挿入 テンプレートファイルでは( component.tsx.t…
Keep Reading →
EmotionでCSSをresetする(emotion-reset)
July 19, 2019
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 →
July 17, 2019
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-
June 28, 2019
静的サイトなんですが、一度アクセスした後はSPAのような感覚でページ遷移するようなサイトを作りたくてCode Splittingを実装したのでその作業ログです。 具体的には、S3などの静的サイトホスティング上で配信するサイト上で、 hoge.com/page1 のようなサブページにアクセスした後もSPAのような感覚でページ遷移できるようにしたいです。 Code Splittingとは 各ページで必要なjsファイルだけとってきてページ遷移するときに次のページで必要なjsファイルだけとってくるような構成を作ってみたかったので、やってみました。最初のアクセスでページのロード時間を短くしたいのです。スマホの回線環境とかだとSPAを開こうとしたときにたくさんページがある場合に初期表示に不要なファイルのロードも走るので時間がかかってしまいます。それを解消するための手法としてCode Splitting…
Keep Reading →
CloudFront経由のS3で公開した静的サイトでサブディレクトリにアクセスしたときにindex.htmlを返すようにする
June 25, 2019
やりたいこととしては、 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でスクリーンショットテスト環境を作る
June 22, 2019
静的サイトを作っていて結構思うことなのですが、こういうこと↓が結構あります。 「CSS変更したら全然違うページが崩れちゃった」 「コンポーネント変更したら別のページでも使われているの知らなくて崩れちゃった」 これらを回避するために、デプロイする前に全ページ確認する作業をやらなくてはいけません。これはかなり面倒です。サイト全体のスクショを開発前と開発後で差分を抽出して、意図しない見た目の変更をキャッチできるようにすれば確認する手間が減ります。 そんな手間を省くためにサイト全体のスクリーンショットの差分を取得できる環境を作ってみました。 流れとしてはこんな感じ 現在のサイトのスクリーンショットを保存する 開発中のスクリーンショットと比較する 差分があれば差分画像を保存する pupeteerのインストール GitHub - GoogleChrome/puppeteer: Headless…
Keep Reading →
June 22, 2019
Jestのテスト環境をTypeScriptで動かしたかったのでメモ。テストコードでも型安全に書きたいです。 インストール 必要なモジュールをインストールします。 jestの設定ファイル jest.config.js をプロジェクトに追加します。 .spec.ts がテスト対象になるようにします。 テストコード test.spec.ts を下記のようにします。 テスト 今回は ./test/ 配下にテストコードを置きました。 実行スクリプトは下記の通りです。 --watchAll を入れることでテストコードを監視して再実行してくれます。 実行結果 TypeScriptのコンパイルエラー プロジェクトに spec.ts のテストコードを追加すると、こんな感じのエラーが出ます。これはJestのモジュールをimportすることなく ts…
Keep Reading →
June 16, 2019
個人的なプロジェクトでejsで作られたS3上の静的サイトをGatsbyJSに移しています。その過程でリダイレクトさせる必要が出てきました。 S3でリダイレクトさせる方法 S3でリダイレクトさせるには以下の2つ方法があります。今回はリダイレクションルールを使います。 リダイレクションルール(バケットごとに設定) ウェブページリダイレクト(S3ごとに設定) やりたいこと htmlページをディレクトリにリダイレクトさせたいです。 hoge.com/page-2.html → hoge.com/page-2/ 404 →Gatsbyの 404 ページ 設定方法 静的ウェブホスティングの設定の リダイレクトルール (任意) から設定可能です。 ルールにはこのように記述します。 これでできました。便利ですね。
Keep Reading →
June 08, 2019
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…
Keep Reading →
GatsbyJS × TypeScript製のサイトにStorybookを導入する
June 08, 2019
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の静的サイトを更新させる
June 07, 2019
最近個人的なプロジェクトでS3を触っています。ちゃんと触るのは初めてなので色々調べながらやっています。 S3で公開している静的サイトを更新しようとファイルアップロードしてもなかなか更新されなかったのを解決した備忘録です。 Amazon CloudFront とは - Amazon CloudFront Amazon CloudFront は、ユーザーへの静的および動的ウェブコンテンツ (.html、.css、.js、イメージファイルなど) の配信を高速化するウェブサービスであり、CloudFront ではエッジロケーションと呼ばれるデータセンターの世界規模のネットワークを通じてコンテンツが配信されます。 要するにCDNですね。これのキャッシュが効いていてコンテンツが更新されなかったのが原因のようでした。 キャッシュクリアする方法 CloudFrontでInvalidation…
Keep Reading →
AWS CLI をインストールしてS3のバケットのファイルを確認する
June 06, 2019
個人的なプロジェクトで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コマンド】S…
Keep Reading →
June 05, 2019
React勉強会@福岡 vol.2 に登壇しました。 発表スライドはこちらです。 『GatsbyJSで自分のブログ作った話』 内容的にはReactというよりも #22 「Trello があるので眠れない」 の紹介とブログの宣伝になってしまいました。
Keep Reading →
React NativeとFirebaseでチャットサンプルを作る
June 03, 2019
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 →
May 29, 2019
会社の同僚とアルゴリズムの勉強会を少人数で始めました。 最終的にはGoogleに転職する 頭でアルゴリズムを考える力をつけるのが目的です。実際にやってみて一人で勉強していくよりも相談しながら解いていくほうが考えがより深まるような感じがあります。 今回はナップサック問題を動的計画法で解くのを勉強しました。数年前に応用情報を受験したときの本番で出た問題でした。当時はナップサック問題を知らなかったので、なんとなく解いた記憶があります。 ナップサック問題 容量 C のナップサックが一つと、n 種類の品物（各々、価値 pi, 容積 ci）が与えられたとき、ナップサックの容量 C…
Keep Reading →
May 17, 2019
前回の記事( 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…
Keep Reading →
React NativeアプリをFirebaseと連携させようとしたけど失敗した
May 16, 2019
前回の記事( 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…
Keep Reading →
May 12, 2019
React Nativeは今まで扱う機会がなかったので、今回初めて使ってみました。練習としてチャットアプリのサンプルを作ってみます。環境構築の作業ログです。 一昔前はiOSアプリの環境構築するだけで一苦労だったので、導入がものすごく簡単で感動しました。いい時代になりましたね。 インストール 公式サイトのGetting Started の通りに進めてみる。 expo-cli というパッケージでプロジェクトを作成することができます。元々 create-react-native-app だったらしいのですが、今は Expo Cli に統合されたらしいです。React Nativeに限らずモバイルアプリを作るためのプラットフォームというイメージでいいと思います。 プロジェクトを作成。 expo init のログはこんな感じに出ます。 expo-template-tabs…
Keep Reading →
May 01, 2019
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 →
April 28, 2019
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 →
April 28, 2019
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…
Keep Reading →
April 19, 2019
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 →
April 19, 2019
何を今更Parcelやってるんだという感じはしますが、さくっとReactの環境構築が必要な機会があったので備忘録としてまとめておきます。Parcelは軽いものをちゃちゃっと作りたいときに便利ですね。 parcelをインストールします。 必要なbabelのモジュールをインストールします。 reactをインストールします。 .babelrcを作成して以下を記述します。 エントリーポイントの作成。webpackと違ってhtmlファイルがエントリポイントになります。 index.html index.js style.css 起動 これで localhost:1234 にアクセスするとページが開きます。デフォルトでソースマップもホットリロードも走ります。 ビルドしてhtml/js/cssを出力する場合はbuildコマンドをたたきます。
Keep Reading →
April 17, 2019
ブラウザだけで動画編集できないかなーと以前から妄想している話。 探せばすぐにこういうまとめページは見つかります。 ブラウザで動画編集できる無料サービスWE VIDEOの使い方 | カンタン動画入門 撮影・編集・webにアップする方法まで こういうWebで動画編集できるアプリって書き出しのときはやっぱりサーバサイドでやってるんじゃないでしょうか？どうやってるんだろう。 ↓これくらいの機能があれば十分だと思います。 動画の切り貼りができる テキストの挿入ができる フェードイン・アウトができる 軽くフィルタ(ブラーとか色調補正とか)ができる 書き出しができる 一番ネックになってくるのは書き出しのところだと思います。複数の動画ファイルをくっつけて書き出すってできるのかな？ 書き出しをサーバサイドでやってしまえば、そこが課金ポイントになるでしょうね。でも動画ファイルって数GB…
Keep Reading →
Netlify CMS、Gatsby、Netlifyがそれぞれやってくれること
April 13, 2019
このブログはNetlify CMS、Gatsby、Netlifyを組み合わせて作られています。 あまりにも簡単につくれてしまうので、それぞれが何をやっているのかわからなかったので、まとめました。 大まかな流れはこの図のようになります。 Netlify CMSがやってくれること Netlify CMSがやってくれるのはmdファイルの作成とGithub等へのコミットです。 adminページへのログイン たぶん連携しているサービスに依存(Github, Gitlabなど)します。 記事の作成・編集・削除が可能 それぞれがこんな感じで対応します。 作成: mdファイルの作成コミット 編集: mdファイルの更新コミット 削除: mdファイルの削除コミット 記事の下書き、公開 ここらへんのことは こちらの記事 にまとめています。 まとめるとこうなります。 下書き: masterブランチへのPR…
Keep Reading →
Netlify CMSのブログ記事のURLに日本語が含まれないようにしたい
April 13, 2019
生成される記事のマークダウンのファイル名に日本語が含まれないようにしたので、その作業ログです。 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…
Keep Reading →
Netlify CMSとGatsbyで作られたブログ記事が公開されるまで
April 13, 2019
Netlify CMSとGatsbyで作られたブログ記事が公開されるまで このブログは Netlify CMS と GatsbyJS で作られています。 導入がかなり簡単で↓こちらの記事の通りに進めるだけですぐに公開できました。 Gatsby + Netlify CMSで作ったブログをカスタマイズする 備忘録として、記事を書いてから公開されるまでのフローをまとめてみます。 0. 前提(Github連携、下書き機能) 前提として、 Githubリポジトリ とNetlifyを連携しているので、masterブランチにpushされる度にNetlifyでデプロイが走るようになっています。 また、Netlify CMSの下書き機能を使用しているので、Githubのプルリクエストと連動するようにしています。Github…
Keep Reading →
April 13, 2019
この記事の通りやったらできました。ありがとうございます。 GatsbyでYouTubeとTwitter埋め込み | Takumon Blog Twitterはこんな感じ。 こう書くと埋め込めます。 youtubeはこんな感じ。これは学生時代に手がけたミュージックビデオ。 マークダウンでこれをこう書きます。
Keep Reading →
NetlifyCMSと連携したGatsbyのプロジェクトにTypeScriptを使えるようにする
April 13, 2019
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 →
April 11, 2019
ブログを始めてみます。どうせならHeadlessCMSでやってみようとか思いGraphQLを使う GraphCMS を使おうかと思いましたが、運用が楽そうな Netlify CMS を選びました。 こちらの記事
Gatsby + Netlify CMSで作ったブログをカスタマイズする 通りに進めたら1時間もかからずブログを作る土台ができたので感動しました。ここまで簡単に導入できるとは思いませんでした。Next.jsとgithub pagesでブログを作ってみようとして途中で挫折したこともありました。 今までの人生で日記やブログが続いた試しがないですが、細々と続けていけたらと思います。
Keep Reading →