JSのライブラリ一つでJavaScriptの中でCSSも書くことでコンポーネントファイルの中でスタイルも含めて管理しやすくなります。スコープの閉じられることになるのでスタイルが他のDOMに影響を与えることがないのが最大のメリットです。EmotionはObjectとしてスタイルを扱うことができるのが他のライブラリとの大きな違いです。GatsbyJSへの導入方法はこちらを参考にしました。2019GatsbyJS製の静的サイトでStorybookを使うと結構いい感じにパーツごとに分けて作ることができて良いんじゃないかなと思いやってみました。同じデザインで画像などのコンテンツが異なるだけのページを作るときなんかに効果的です。普通にhtmlで作るときはエディタの文法の間違いなんかは見つけづらいですが、TypeScriptで書くことでそれもなくせます。基本的にはこのページを参考に進めます。GatsbyJSのプロジェクトのルートでStorybookを初期化します。2019最近個人的なプロジェクトでS3を触っています。触るのは初めてなので色々調べながらやっています。S3で公開している静的サイトを更新しようとファイルアップロードしてもなかなか更新されなかったのを解決した備忘録です。エッジロケーションと呼ばれるデータセンターの世界規模のネットワークを通じてコンテンツが配信されます。要するにCDNですね。これのキャッシュが効いていてコンテンツが更新されなかったのが原因のようでした。CLIから使ってみました。沿ってインストールします。pythonのバージョン確認。バンドルされたインストーラをダウンロード。インストールコマンドを実行します。インストールできました。credential情報を設定します。AWSのコンソールから取得して設定します。S3のバケットの中身を確認します。コマンドラインからS3のバケットのファイルをダウンロードできます。発表スライドはこちらです。紹介とブログの宣伝になってしまいました。NativeとFirebaseを使って簡単なチャットのサンプルを作ってみました。使ってプロジェクトの雛形を作ります。クローンしたディレクトに移動して依存モジュールをインストールします。CocoaPodsでiosのモジュールをインストールします。2019会社の同僚とアルゴリズムの勉強会を少人数で始めました。頭でアルゴリズムを考える力をつけるのが目的です。実際にやってみて一人で勉強していくよりも相談しながら解いていくほうが考えがより深まるような感じがあります。今回はナップサック問題を動的計画法で解くのを勉強しました。数年前に応用情報を受験したときの本番で出た問題でした。当時はナップサック問題を知らなかったので、なんとなく解いた記憶があります。みつつExpoを使わずに構築してみます。Studioのインストールは済んでいます。一応nodeのバージョンは10.15.3です。プロジェクトを作成します。iOSで起動してみます。起動できました!なんと簡単なのでしょうか。次はAndroidで起動してみます。)で環境構築しまして、更にFirebaseと連携させるところまでやりたかったんですが、途中でエラーが解消できず手詰まりになってしまいましたが、失敗ログとして書き残します。いうモジュールを使います。公式サイトに導入方法が載っています。こちらを参考にして進めていきます。expoというプラットフォームを使っているのでXCodeプロジェクトが隠蔽されています。プロジェクトを展開してやる必要があります。Nativeは今まで扱う機会がなかったので、今回初めて使ってみました。練習としてチャットアプリのサンプルを作ってみます。環境構築の作業ログです。一昔前はiOSアプリの環境構築するだけで一苦労だったので、導入がものすごく簡単で感動しました。いい時代になりましたね。いうパッケージでプロジェクトを作成することができます。統合されたらしいです。Nativeに限らずモバイルアプリを作るためのプラットフォームというイメージでいいと思います。ログはこんな感じに出ます。20191記事/週のペースをなんとか維持できてます。このペースをずっと維持していきたいです。Webフロントエンドの開発環境を構築する機会があったので作業ログ。したプロジェクトだとreact-create-appは使う気になれないので、毎回これめんどくさいんだけど毎回やってます。ボイラープレート作れって話だけど、ライブラリのトレンドとかその時々の状況によって変えたいのであえていつも0から構築するようにしてます。ソースはここに置いてあります。必要なパッケージをインストール。2019Flutterアプリ上でFirebaseを使えるようにした作業ログです。authログインを作りました。firebaseの公式サイトにやり方が載っています。基本的にはこれに沿ってやっていけばFlutterアプリ上でFirebaseが使えるようになります。下記の記事を参考にさせていただきました。これをなぞっただけです。2019FlutterはDartでios/androidの両方のアプリを作れるフレームワークです。環境構築してみたのでその作業ログです。基本的には公式サイトを参照しました。Flutterの公式ドキュメントはかなり充実していて、結構簡単に構築することができました。2019NetlifyにはFuntionsという機能があります。Lambdaを使えるようになります。チュートリアルをやってみました。リンクを踏むと自分のNetlifyに飛んで、プロジェクトをコピーするかどうか聞かれます。私はGithubアカウントと連携しているのでGithubにリポジトリをコピーしました。これをNetlifyでデプロイすると先程のチュートリアルページと全く同じものがデプロイされます。こちらのurlにデプロイしてみました。2019何を今更Parcelやってるんだという感じはしますが、さくっとReactの環境構築が必要な機会があったので備忘録としてまとめておきます。Parcelは軽いものをちゃちゃっと作りたいときに便利ですね。parcelをインストールします。必要なbabelのモジュールをインストールします。reactをインストールします。.babelrcを作成して以下を記述します。エントリーポイントの作成。webpackと違ってhtmlファイルがエントリポイントになります。アクセスするとページが開きます。デフォルトでソースマップもホットリロードも走ります。ビルドしてhtml/js/cssを出力する場合はbuildコマンドをたたきます。2019ブラウザだけで動画編集できないかなーと以前から妄想している話。探せばすぐにこういうまとめページは見つかります。いうWebで動画編集できるアプリって書き出しのときはやっぱりサーバサイドでやってるんじゃないでしょうか?どうやってるんだろう。↓これくらいの機能があれば十分だと思います。ネックになってくるのは書き出しのところだと思います。書き出しをサーバサイドでやってしまえば、そこが課金ポイントになるでしょうね。CMS、Gatsby、Netlifyを組み合わせて作られています。あまりにも簡単につくれてしまうので、それぞれが何をやっているのかわからなかったので、まとめました。大まかな流れはこの図のようになります。CMSがやってくれるのはmdファイルの作成とGithub等へのコミットです。Gitlabなど)します。それぞれがこんな感じで対応します。まとめるとこうなります。2019生成される記事のマークダウンのファイル名に日本語が含まれないようにしたので、その作業ログです。いうプロパティがマークダウンのファイル名になっているっぽい。マークダウンのファイル名のテンプレートになっていることがわかります。時刻まで指定できるので、これを使いましょう。導入がかなり簡単で↓こちらの記事の通りに進めるだけですぐに公開できました。備忘録として、記事を書いてから公開されるまでのフローをまとめてみます。Netlifyを連携しているので、masterブランチにpushされる度にNetlifyでデプロイが走るようになっています。CMSの下書き機能を使用しているので、Githubのプルリクエストと連動するようにしています。2019この記事の通りやったらできました。ありがとうございます。Twitterはこんな感じ。youtubeはこんな感じ。これは学生時代に手がけたミュージックビデオ。マークダウンでこれをこう書きます。TypeScriptを導入してみた作業ログです。手順は主にこれの通りやりました。起動してみるとコンパイルエラーがたくさん出たので、全て修正しました。足りないパッケージをインストール。コンポーネントに対して全て型を付けていきました。ステートレスなコンポーネントの型の付け方は↓こちらの記事を参考にしました。2019ブログを始めてみます。通りに進めたら1時間もかからずブログを作る土台ができたので感動しました。ここまで簡単に導入できるとは思いませんでした。pagesでブログを作ってみようとして途中で挫折したこともありました。今までの人生で日記やブログが続いた試しがないですが、細々と続けていけたらと思います。kwst.site.。