DB PrismaでエックスサーバのMariaDBにアクセス+Renderでのデプロイ
はじめに最近自分のポートフォリオサイトを作り始めている。ポートフォリオサイトの一部データをDBで管理してみたいと考えた。現在自分はエックスサーバをレンタルしているため、そこで使えるMariaDBを使ってアクセスしよう！と思った。ポートフォリ...
DB 
React React Router v7(Remix) に Eslint v9 を設定する
はじめにQitaのトレンドで以下のような面白い記事を見つけた。Next.jsがいまいちしっくり来なかったので、試しに公式で勉強してみたところ面白そうだったため使ってみることにした。使うにあたりEslintの設定をしたかったのだが、React...
CSS CSSのvar関数で、カラーパレットを作って設定を共有する方法
はじめに仕事でデザーナーが作成したfigmaのデザインから、ReactでUI実装をしていた時に顧客からUIがある程度できた段階で、カラーパレットを用意したからデザイン全体の色を変えて欲しいという要望があった。デザイナー側は、figmaの機能...
Docker docker-composeでFastAPIを簡単構築
はじめに以前Nginxの記事でFastAPIを使ったが、環境構築方法は残していなかったのでメモ。今回のリポジトリは以下で公開している実装構成今回はdocker-coposeで環境構築を行うため、以下のような構築FastAPIでのapiは "...
DB docker-composeでMySQLの環境構築をした(8.4 LTS版)
はじめにDocker環境で、MySQLをよく構築するが何も考えずにいつもコピペしたいたので、改めて公式ドキュメントを読みつつ理解していく。まあ、構築自体は色々記事はあるけどだいたい公式ドキュメントのソースがないから本当にあっているかの検証。...
Docker Nginx&オレオレ証明証でNextJS&FastAPIをSSL化&HTTPS通信を行う
はじめに自分でNext.jsでアプリを作っているときにスマホからPCのIPにアクセスしてデザインを確認したい場面があった。しかし、位置情報を使うアプリだったためスマホからはHTTP通信で位置情報はHTTPS通信を使うため実行エラーになる時が...
ブログ改造 PRISMとCocoonを使ってHighlighting Code Blockでコードを表示できないときの解決策
Prismを使用してHighlighting Code Blockに言語を追加したい Prism.js,Prism.cssを指定してみたところ なにかデザインが変なように見えたし、スタイルも適用できていないように見えた。 色々調べてみて修正方法がわかったのでメモ。 これで、うまいこと実装が表示されることは確認ができた。
Iphoneアプリ [SwiftUI]Alamofire とSwiftyJSONの使い方をホットペッパーAPIを使って試してみた
はじめに最近SwiftUIを勉強していて、何か外部ライブラリを使用してみたいと思った。そこで調査をしいたところ、HTTP通信のライブラリAlamofireとJsonファイルを操作できるSwiftyJSONの存在を知った。ちょうどホットペッパ...
StoryBook StorybookのINITIAL_VIEWPORTSをストーリに指定する
概要StoryBookのテストを作っているときに、画面サイズをIphone13 miniにしたいなと思った。 その時にどうやって画面サイズって調べるんだ?と思ったのでメモ指定方法StorybookのINITIAL_VIEWPORTSのVIE...