RX100で撮り歩くブログ

RX100やRollei B35で写真を撮ったり何やかんやするブログ

ReactでスライダーライブラリのSwiperを使う

jQueryを使っていた時によく使っていたスライダーのライブラリ「Swiper」をReactで使ってみました。 swiperjs.com 先日作った写真のポートフォリオサイトのモーダルで、画像をスライドさせるために使っています。 photo.mismith.me Reactで使う Reactでの導…

Next.js + tailwindcss + microCMS + Vercelで写真のポートフォリオサイト作ってみた

年末の技術の勉強もかねて簡単な写真のサイト作ってみました。 photo.mismith.me 作った理由 Next.js + microCMS next/imageが便利 tailwindcss Next.jsでtailwindcssを使う チートシート Components hover ブレイクポイント 独自のUtilityを追加 アイコン V…

VercelでのデプロイなどのイベントをSlackに通知する

デプロイが開始したり、完了した時にSlackに通知する方法です。 以下のIntegrationを追加するだけです。beta版(2020年12月28日現在)のようで細かい設定は全くできないですが、逆に設定がすごくシンプルです。 vercel.com 手順は以下です addボタンをクリッ…

Next.jsをTypescriptではじめる覚書

Next.jsをTypescriptで書き始めるときに毎回探してるのでメモ程度に 公式はこちら nextjs.org tsconfigをつくる touch tsconfig.json 中身はこんな感じに。 { "compilerOptions": { "target": "es5", "lib": ["dom", "dom.iterable", "esnext"], "allowJs": …

webpack5でdevtoolが空でエラー

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

今年やってよかったこと Advent Calendar 2020の17日目担当です。 adventar.org 今年はコロナの影響でできないことが増えましたが、逆にやってよかったと思うこともいろいろとありました。 3月ごろの梅田はこんな感じでしたね。 ここが人の少なさ分かりやす…

React Hook FormをUIライブラリのAnt Designで使う時にちょっと面倒だったのでメモ

Ant Designというよりは、Material UIや React-Selectなどフォーム関連の外部ライブラリを使う時にControllerというものを使う必要があるようです。 react-hook-form.com 最初は以下のように書いてましたが、refを認識しないようで、送信時のdataが空っぽで…

今年買ってよかったもの Advent Calendar 2020

今年買ってよかったもの Advent Calendar 2020の14日目担当です。 adventar.org 去年買ってよかったものはこちら blog.mismith.me 加湿 空気清浄機 プラズマクラスター 7000 キャスター付きサイドテーブル ミニホットプレート ホットサンドメーカー 保冷リュ…

SlackのIncoming WebhookとJavaScriptでSlackに通知する

以前以下の記事でSlack APIでアプリを作成してそのトークンを使う方法はやりましたが、esaとかのサービスを参考にするとIncoming WebhookでWebhook URLを取得する方法かなと思って試してみました。 blog.mismith.me Webhook URLを取得 以下のIncoming WebHoo…

意外と写真を撮ってた2020年 ~今年撮った写真Advent Calendar 2020~

今年もAdvent Calendarの季節になりました。つまりもう年越し...早い...。 昨年も参加した「今年撮った写真Advent Calendar」の1日目担当です。 adventar.org 昨年の記事 今年はフィルムカメラを買った フィルムで撮った写真 レタッチをVSCOへ コンデジで撮…