importするときに何もしていないと以下のように相対パスで書きますが、階層が深くなると面倒です。 import { Button } from '../../components/Button それを以下のように書けるようにします。 import { Button } from '@/components/Button Next.jsでは以前…
カレンダーを実装しようと思って使ってみました。なかなかしっくり来るカレンダーライブラリがなかったですが、Ant Designのカレンダーがちょうどよかったです。 ant.design ただ、カレンダーに内容を表する場合に公式のExampleだと日付だけで判定していて、…
jQueryを使っていた時によく使っていたスライダーのライブラリ「Swiper」をReactで使ってみました。 swiperjs.com 先日作った写真のポートフォリオサイトのモーダルで、画像をスライドさせるために使っています。 photo.mismith.me Reactで使う Reactでの導…
年末の技術の勉強もかねて簡単な写真のサイト作ってみました。 photo.mismith.me 作った理由 Next.js + microCMS next/imageが便利 tailwindcss Next.jsでtailwindcssを使う チートシート Components hover ブレイクポイント 独自のUtilityを追加 アイコン V…
デプロイが開始したり、完了した時にSlackに通知する方法です。 以下のIntegrationを追加するだけです。beta版（2020年12月28日現在）のようで細かい設定は全くできないですが、逆に設定がすごくシンプルです。 vercel.com 手順は以下です addボタンをクリッ…
Next.jsをTypescriptで書き始めるときに毎回探してるのでメモ程度に 公式はこちら nextjs.org tsconfigをつくる touch tsconfig.json 中身はこんな感じに。 { "compilerOptions": { "target": "es5", "lib": ["dom", "dom.iterable", "esnext"], "allowJs": …
LPとかを作る時用にstaticサイト用の開発環境のwebpackのバージョンを5にあげてみたときに以下のエラーが出た ValidationError: Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API sch…
今年やってよかったこと Advent Calendar 2020の17日目担当です。 adventar.org 今年はコロナの影響でできないことが増えましたが、逆にやってよかったと思うこともいろいろとありました。 3月ごろの梅田はこんな感じでしたね。 ここが人の少なさ分かりやす…
Ant Designというよりは、Material UIや React-Selectなどフォーム関連の外部ライブラリを使う時にControllerというものを使う必要があるようです。 react-hook-form.com 最初は以下のように書いてましたが、refを認識しないようで、送信時のdataが空っぽで…
今年買ってよかったもの Advent Calendar 2020の14日目担当です。 adventar.org 去年買ってよかったものはこちら blog.mismith.me 加湿 空気清浄機 プラズマクラスター 7000 キャスター付きサイドテーブル ミニホットプレート ホットサンドメーカー 保冷リュ…
以前以下の記事でSlack APIでアプリを作成してそのトークンを使う方法はやりましたが、esaとかのサービスを参考にするとIncoming WebhookでWebhook URLを取得する方法かなと思って試してみました。 blog.mismith.me Webhook URLを取得 以下のIncoming WebHoo…
今年もAdvent Calendarの季節になりました。つまりもう年越し...早い...。 昨年も参加した「今年撮った写真Advent Calendar」の1日目担当です。 adventar.org 昨年の記事 今年はフィルムカメラを買った フィルムで撮った写真 レタッチをVSCOへ コンデジで撮…
VScodeでPrettierが動かなくなりコード整形が突然できなくなりました。 以下を確認しました Format on Saveがオフになってないか 設定→書式設定→Format on Saveにチェックが入ってるか確認。 Default Formatterの確認 設定を開き、上部にある検索から「Defau…
firebase init をすると、途中の What file should be used for Firestore indexes? という質問で、 Error: Error fetching Firestore indexes とエラーがでる。 原因 Firestoreのデータベースを用意していないだけ 解決法 コンソール画面へログイン Cloud F…
久しぶりにCreate React Appで一からプロジェクトを作ってyarn startしてみるとエラーが出てしまう npx create-react-app myapp --template typescript yarn start TypeError: Cannot assign to read only property 'jsx' of object '#<Object>' 解決法 なにやらバー</object>…
連休2日目は京都の叡電沿いのお寺に行く予定でしたが、久しぶりに比叡山延暦寺まで行きました。 初日のハイライト 2日目スタート 八瀬比叡山口駅 比叡山を登る 比叡山延暦寺 その他撮った写真 撮影機材 初日のハイライト 初日は滋賀の琵琶湖ビエンナーレに行…
琵琶湖ビエンナーレ2020に行ってきました。 energyfield.org 琵琶湖ビエンナーレは滋賀の近江八幡を拠点に開催されている芸術祭です。前回が2018年だったので、おそらく2年おきで開催されています。琵琶湖ビエンナーレのいいところは、様々な芸術家の作品を…
以前は一眼レフやミラーレス機、交換レンズを持ち歩いていましたが、荷物になるのが嫌になって、数年前からコンパクトなカメラ装備にしたいと思うようになりました。 そして、コンデジや小さめのフィルムカメラを持つようになり、今では理想のカメラ装備にな…
テレビを見なくなって1年以上。今までテレビがある生活が当たり前だったので、もしかしたら必要な場面があるかもしれないと思って置いてましたが、全く見なくなったためテレビを処分して、NHKを解約しました。 お、NHKから支払い済みの受信料の返金きた。こ…
Lomochrome Purpleというフィルムを使ってみました。 Lomoのサイトに書かれてるように「ブルーがエメラルドグリーンに、グリーンがパープルに、イエローがピンクにシフト」とかなり独特な色のフィルムです。 shop.lomography.com 撮ってみた 川沿いの草木が…
サイクリング欲高まる秋。先日のサイクリングがいい感じのコースだったので記録しておきます。 11:00 淀川 12:00 淀川（此花付近） 12:30 舞洲ロッジ 13:30 天保山渡船場 14:30 築港麺工房 15:00 大阪港ダイヤモンドポイント 16:00 中之島 さいごに 撮影機材…
自転車を買った時にサイクリングついでにいつかやってみたいと思っていた焚火をしてきました。また、その焚火をつかってご飯を作ったりお湯を沸かしてコーヒーを淹れました。 焚火の煙と夕方の光で神々しくなってる写真 作った料理 ほうれん草とベーコンのバ…
久しぶりに京都に行きたくなり、一乗寺にある圓光寺へ行ってきました。 対策すれば外にでてもいいような風潮になってきてますが、それでも外国からの旅行客は減っており、京都は以前よりかなり人が少ないです。 今回行ってきた圓光寺も人が多くて行くのを控…
DaVinci Resolveこつこつ勉強してます。 学習動画を見たりしていると、動画やオーディオをフェードイン・フェードアウトしたいときに白い点がでるので、それをドラッグするといいですよと言われるんですが、これが出てこない。 なんでだろうとググっていると…
DaVinci Resolve 16の基本的な操作まとめ 動画カット ブレード編集モードを選択し、任意の場所でクリックし分割。不要な動画をDeleteキーで削除
DaVinci Resolve 16で動画編集の勉強で知ったことをまとめる記事 便利コマンド ショートカットキー 操作 cmd + i メディア読み込み スペース 再生/停止 J 巻き戻し（複数回クリックで倍速） K 停止 L 再生（複数回クリックで倍速） cmd + n 新規タイムライン…
以前、大阪の京橋に「花京」というラーメン屋がありましたが。商店街の工事で京橋店はなくなってしまいました。 どこかに移転したのか調べてみると何店舗かあるようで、今回は鴫野店に行ってきました。 hanakyo.owst.jp おそらくこってり背脂中華そばが人気…
コロナウイルスでの自粛期間がひとまず解消されましたね。まだまだ油断はできないですが、人混みに気をつけて予防すれば外に出やすくなりました。 そこで少し遠出もしたくなりましたが、やはりなるべく公共交通機関は避けたいということで自転車を購入しまし…
react-hook-formを使っていて、後からvaluesの値を変えたい時。例えば、編集画面で、フォームの値を取得しそれをフォームにセットしたい時など。 setValueを使えばいける react-hook-form.com こんな感じ setValue([ { title: title }, { content: content },…
毎回調べてるのでメモ程度に cherry-pickをすると特定のコミットを取り込むことができる。すべてをマージしたくないが、あるコミットだけ先に取り込みたい時に使える。 基本 git cherry-pick [commit id] 複数 git cherry-pick [commit id] [commit id] [com…
