ハイパーマッスルエンジニア

Vim、ShellScriptについてよく書く

Javascript

Next.jsを使ったServer Sent Events (SSE)の実現方法

Server Sent Events (SSE)は、サーバからクライアントにリアルタイムで情報をプッシュするための技術です。この記事では、そのフロントエンドでの実装方法をいくつか紹介します。 完成品 今回実装したものは下記に収めてます。Next.jsを使っています。 githu…

Gather TownのWebSocket APIで入室時にslackに通知するようにした

バーチャルオフィス「Gather」ではWebSocketAPIがあり、 プレイヤー入退出のイベント プレイヤーをテレポートさせる プレイヤーのアバターを着せ替える など自由度の高いAPIが多く用意されている。 これらのAPIを使って 紙吹雪でプレイヤー吹き飛ばし プレイ…

CDNで簡単にホットリロード環境を導入する仕組みを作った

課題 jQuery, HTML, PHPで構成されているようなプロジェクトで、新たにnpmやcomposerの導入が難しく、巷のホットリロードのツールが利用できない場合を想定。 つまり既存のプロジェクトの構成は変えられないけど、ホットリロード機構は欲しかった。 作ったも…

iPhone,iPadでPDFが1枚目しか表示されない問題の解決策

iframeでPDFを表示すると、iPhoneやiPadでは1枚目しか表示されない問題がある。これはstackoverflowや他のサイトでも報告されているとおりブラウザのバグっぽい。 iPhoneだとPDFの1枚目しか表示されない PCだと1枚目以降も表示される 対応策 PDF.jsを利用す…

Next.js@12.3.2で画像アップロードできないのはmiddleware.tsがあるせいだった

現象 Next.jsで画像アップロードすると、アップロード処理がpendingで止まってしまう。 アップロード処理がpendingになる コードは下記。エラー判定はなどは飛ばしているが、FormDataをPOSTするシンプルなやつ。 pages/Index.tsx export default function Ho…

Reactでセグメントコントロール作る

にゅるっとした動きのものがなかったので作った。 Next.jsで動くのを目的に作ったので、styled-jsxを利用している。 SegmentControl.tsx import css from 'styled-jsx/css' import { useState, useEffect } from 'react' const styles = css` .controls { di…

Reactのアニメーションライブラリ「framer motion」がすこぶるいい

Reactでアニメーションコンポーネントをサクッと作れるライブラリ「framer motion」。 非常に簡単にアニメーションをつけることができたので伝えたい。 www.framer.com インストール yarn add framer-motion かんたんアニメーション こんなdiv要素を用意して <div style={{ width: '100px', height: '100px', background: 'blue' }}></div>…

10年もののシステムをPHP・Twig・jQuery・BootstrapからNext.jsにリプレイスするときにやったこと

Twig, jQuery, Bootstrap で構成されていたシステムをNext.jsでリプレイスしたときにやったことを書く。 前提 IE対応必須 ディレクトリ設計 github.com を参考にした。 ユニットテスト用の__test__は基本的に作らず、format.tsとformat.test.tsは同じ階層に…

Next.jsでバリデーションするなら「Ajv」がいい感じ

ajvはNode.jsとブラウザ用のバリデーションライブラリ。 Typescriptで利用できるバリデーションライブラリといえば、yup, zod, joiあたりが候補に上がるが、ajvを採用した。 理由はバックエンド・クライアント両方で使えること、スキーマファイルを使えるこ…

Next.jsのoutputStandalone:trueで、pages/_middleware.ts があるとビルドに失敗するのはnext@12.0.10に上げたら直る

Docker イメージを軽くするための設定でoutputStandalone: trueにしていた。 module.exports = { experimental: { outputStandalone: true, }, しかしpages/_middleware.tsがあると下記のエラーが出てnext buildに失敗する。 > Build error occurred [Error:…

webpack × SentryでSourceMapが読み込まれないときの解決法

ソースマップが読み込まれなくて困ったときの解決方法を書いていくで。 ・releaseタグをinit時にも書いてないか ・urlPrefixをつけているか ...

React, TypescriptでChrome Extensionを開発する(ホットリロード対応)

死ぬほど参考にさせていただいたサイト 基本的には下記のサイトを参考に進めればいけます。(最高の記事ありがとうございます、大感謝祭) code-log.hatenablog.com 本記事では上記で紹介されていたホットリロードがエラーで動かなかったため、別の方法でホッ…

ブラウザからTemrinalに接続するxterm.jsをNext.jsとNestJSで構築する

xterm.jsが楽しそう ブラウザにTerminalを設置できるxterm.jsというライブラリがある。VSCodeのTerminalやHyperなどに使われている。 xterm.jsが提供するのはざっくり言ってしまえばTerminalの形をしたテキストフィールドのみ。実際にTerminalに接続したりキ…

NestJSでよく見る@Decoratorって何なのかわからなかったからサクッと試してみた

NestJSで@Controllerのような@を使った書き方をよくみる。よくわからず使っていたけど調べてみたらなんてことなかったので書き留めておく。 こういうやつ。 @Controller('app') export class AppController { @Post() create(@Body() dto: CreateAppDto) {} …

NestJSとNext.jsをlernaでモノレポ化する

最近流行りのフレームワークたちをlernaを使ってモノレポ化する。 構成はこんな感じになる想定。 . ├── lerna.json ├── package.json └── packages ├── client <-------- Next.js │ └── package.json └── server <-------- NestJS └── package.json どこまで…

Github Actionsのアクション作ってみる(Typescript編)

Typescriptで独自アクション作る 以前GithubActionsを使ってHomebrewのリリースを自動化し、一部のstepを独自アクションとして切り出した。 www.rasukarusan.com www.rasukarusan.com 前回のDockerで書き出したアクションを、Typescriptで書いてみる。 対象…

Express, MonogoDB, React, TypeScriptの開発を始めるときに困ったこと、参考になったサイト

今まで業務ではPHP, MySQL, 素のJavascriptを触っていた、いわゆるサーバー側のWebエンジニアがオールJavascriptの開発をする上で困ったことをずらずら書いていく。 今回は誰かに見てもらうというより自分のメモを公開するに近いので、全くまとまっていない…

Webのリクエスト方法についてやんわりと考えてみる

先日GoでInstagramぶっこ抜きというものを作った時、リクエスト方法について少し悩んだ。 個人開発で大規模なものじゃないから、リソースについてそんなにシビアにならなくてもいいのだが、一度考えてみた。 rasukarusan.github.io 全体の動き サーバーにaja…

自作HPにコメントボックスを追加する

WordPressを使わずにやりたい 自作HPにコメント欄をつけようと色々探していたが、どれもWordPress用のプラグインばかりでHTMLでコードを追加して実装するという方法がなく、どうしようかと悩んでいたところ、HTML Comment Boxというものを見つけた。 海外の…