なぽろぐ

気ままに感じたことを記事にまとめます。

codesandboxでvim extensionを有効化して快適に使う方法

web

codesandboxでvimを有効化したい

File > Preferences > CodesandboxSettings

Enable VIM extensionのトグルボタンをonにすればとりあえずはvscode使用のvim extensionが効く。もしかしたらreloadしないといけないかも

codesandbox editor setting
editor setting

ESC入力するとエディターからのフォーカスが切れちゃうとき

  • Vimiumが悪さしてる可能性が高いです

github.com

このようにcodesandboxだけ除外しておきましょう. codesandbox開いた状態でAdd Rule -> Save Changesすれば効きます

連続入力できない(Mac)

こうなる時がある

こちらの記事を参考にGoogleIMEを入れることで解決した nakamura001.hatenablog.com

ABCになっていると連続入力できないのでGoogleIMEの英数を使用すると治ります

終わりに

codesandbox良すぎる。環境1クリックで作れるし、URL共有すればペアプロもできる。しかも作ったものをすぐSNSに投稿できるのでサクッとなにか作って見せたいときには便利だと思った〜

課金しました

声だけでツイートできるアプリvoitterを作りました

React

Voitter

ライブ中にキーボードを打ちたくない，でもツイートはしたい！というツイ廃向けかも知れません．．．．

voitter.web.app

使い方

Twitterでログインして

Image from Gyazo

ハッシュタグをつけて

Image from Gyazo

Start押すだけ

Image from Gyazo

あとは喋ればツイートされます！

実際に使ってみると．．．．

こんな感じになります．誤認識とかもあるのですが，それも含めて楽しんでいただけると！

Image from Gyazo

終わりに

MU2020最高すぎてキーボードを打つ時間すらもったいなく感じたので作りました．

ライブとかその辺向けに作ったつもりだったんですけど，誤認識が結構面白かったw

firebase + React + antdでさくっと作れたのでloginだけfirebaseに任せてtokenとるってやり方は結構良さそうだな〜って感じました

生配信をしたくなってきた

日常のこと

したいです生配信を．

 

covid-19の影響でほんとに引きこもりになってしまいました．

 

自分の気持ちで引きこもるのと，言われて引きこもるのだとやはり後者の方が辛いですね

 

なんか，勝手にやる勉強は好きだけど親からやれって言われる宿題は嫌い的なね

 

そんなわけで，もともと引きこもりの僕でも結構この状況はきつい（幸いなことに週末には話す相手は数人はいる）

 

ぼけーとお風呂に入りながら自分のこの状況を少しでもよくできないかなぁと考えていたところ，生配信，youtubeとかニコ生とかツイキャスとか，媒体はなんでもいいのですがやってみようという気になってきました．

 

なぜ生配信なのかというと，僕の働いている会社がストリーミング配信系の会社でもありドメイン知識を獲得しようかなぁという背景もあります．

 

なんか仕事のためみたいなことを書きましたが，本質はただただコミュニケーションを不特定多数の人間と顔を合わせずにしたいだけなんですよね．

 

僕はあまり顔をみて話すのが得意ではないため，ボイスチャットとか，テキストベースの会話は結構好きなんすよね．

 

だらだら書いてしまった・・・・

 

 

何をやりたいかっていうと．フロントエンジニアとして一応生きているしUI（ユーザーインターフェース）を作るのが好きなので，UIのリクエストを何かしらの媒体で受けてそれをひたすら喋りながら作っていくのがいいんじゃないかなぁと考えています．

 

媒体とぼかしたのは，開発者じゃない人たちも参加してくれたら嬉しいなぁと思ったからです．イラストでこんなのつくって．とか映像でも面白いかもしれませんね

 

普段はこんなのを作っています．

 

 

 

 

まずは今週末やれればいいなぁとか考えています．リクエストあればこちらに！ 

marshmallow-qa.com

 

ボイチェンとかしてみようかなぁとひっそり考えています・・・・

 

Firebase + Nextjsに挑戦していました（できませんでした）

Typescript Next.js firebase

firebase難しくない？

Nextjs(ssr)のデプロイ環境を作ろう思って挑戦したのですが，時間だけとかして日曜日が終わりそうなので日課にしたいブログを書くことにしました．

気分転換です💢

理想型

開発時

firebase emulatorで下記のindex.tsをbuildしたものを動かしてdev modeでfirestore等を使いながら開発する

import * as functions from "firebase-functions";
import next from "next";

const dev = process.env.NODE_ENV !== "production";
const app = next({ dev });
const handle = app.getRequestHandler();

export const nextApp = functions.https.onRequest((req, res) => {
  console.log("File: " + req.originalUrl);
  return app.prepare().then(() => handle(req, res));
});

プロダクション

distにindex.jsとnextjsのbuild結果を吐きだして, NODE_ENV=production firebase deployしたら配信完了！

Image from Gyazo

みたいな感じを想定していました．

現実

なんとかデプロイできました．理想型の開発環境作るのはできなかったです💢

最後に

もうちょっと頑張って，次はできたよっていう記事を書きたいです．

では，また

グリッチぽいアニメーションで遊んでみた

React

こんなのを作った

Image from Gyazo

OGPもなんもついてなくてすみません:bow:

naporin0624.github.io

どうやるの？

ReactならこのGlitchコンポーネント持っていけばすぐできます．今のところstringにしか対応してない・・・というかpタグにしか対応してないって言い方の方が正しいかな．

github.com

基本的にはこれの丸パクリです・・・・animation追加したり，styled-componentsに書き換えたりしただけ！ qiita.com