RX100で撮り歩くブログ

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

スライダープラグインのswiperをnpm installで使う

CDN経由やダウンロードして使う方法ではなく、npmからswiperをインストールして使う方法です。最近のweb制作ではこの方法が普通じゃないでしょうか。 公式のドキュメント見て書いてるので、分かるよって人は公式のドキュメントから。この記事では覚書程度に…

シェーダーに入門して画像をかっこよく切り替える

three.jsで表現の幅を広げるにはシェーダーは避けて通れなさそうなので、入門してみました。 とりあえず以下の記事を読んでみました。年数的には古い記事ですが、大きく変わっていないとは思うので、そのまま参考にしました。 qiita.com qiita.com あとはこ…

GSAPでスクロールするとテキストが紙芝居みたいに切り替わる動き

GSAPでスクロールで要素がビューポートに入ったときに動かすというのは以前やりました。 blog.mismith.me 今回は要素が見えたときという条件ではなく、スクロール量に応じてアニメーションするといったものを試しました。応用するとパララックス表現とかに使…

Three.jsとGSAPを組み合わせてボックスを回転させるだけ

GSAPとThree.jsを組み合わせられると聞いてどういうことかを確かめるために基礎的なことをやってみました。 GSAPとThree.jsを組み合わせる場合、Three.jsでオブジェクトを配置したりして、それをGSAPのタイムラインなどを使って動かせるようです。GSAPを使う…

ウェザーニュースきっかけで防災グッズ(緊急用リュック)を揃えてみた

最近ウェザーニュースにハマっていて、よく視聴しています。 YouTubeやニコ生、ミルダムなどの媒体で天気の情報を放送しているチャンネルです。主に天気の情報ですが、天気に関わる生活の豆知識や、災害情報なども詳しく解説されていて、とてもためになりま…

GSAPでscroll inview アニメーションなどいろいろやってみる

有名なアニメーションライブラリのGSAPでいろいろやってみました。 greensock.com ちょっと触ったことはありましたが、複雑なアニメーションでない限りはCSSとJSで自分で実装できるなと思い、使う機会はほとんどありませんでした。 しかし、2020年の6月にScr…

gatsby-remark-autolink-headersでマークダウンの見出しに自動でidを割り当てる

Gatsbyで gatsby-transformer-remark を使ってマークダウンを使えるようにし、見出しにidを付けたくなった場合は gatsby-remark-autolink-headers という gatsby-transformer-remark のプラグインを追加する yarn add gatsby-remark-autolink-headers gatsby…

ReactのuseEffectでcleanupするように言われた時~To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function

Reactで開発していてコンポーネントのアンマウント時に以下のようなエラーが出る場合があります。 Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix,…

Netlifyのビルド時にNodeのバージョンでエラーがでる~ The engine "node" is incompatible with this module. Expected version ">=12.13.0". Got "10.24.1"

GatsbyのサイトをアプデしてNetlifyにデプロイしようとするとビルド時に以下のようなエラーがログにでました。 Gatsbyのv3.7.1ではnodeのバージョンを12.13.0以上にしてねってことだと思うんですが、どうやって指定したらいいのかを調べました。 gatsby@3.7.…

タスクランナーにgulpではなくnpm scriptsを使う

たまにweb制作をやるときには特に何も考えずgulpを使っていましたが、npm scriptsで充分という声も聞くのでどんなものか試してみました。 やってみること 最低限で以下をやってみます。 htmlをdistへコピー(ejsやpugは使わないです) SassをCSSへコンパイル…

gulp-sassをNode SassからDart Sassへ移行する

Node Sassは非推奨でDart Sassの使用を推奨されているということでgulp-sassでDart Sassへ移行してみました。 Dart Sassを使うと @import の代わりに @use が使えるようになります。 まだ先の話にはなりますが(2021年6月現在)、2022年10月1日には @import …

postcss-cliをインストールすると Cannot find module postcss とエラーが出てしまう

開発環境を作っていて参考にしたコードなどを見ていると postcss-cli だけインストールしていればPostCSSが動くような書き方をされているが、なぜか自分が試すと Cannot find module postcss とエラーが出てしまってました。 postcssをインストールすれば解…

RX100 M6で撮った海の景色

RX100で撮り歩くブログといいつつ最近はフィルムの写真や関係ない記事が多く、半年ぶりぐらいにRX100で撮った写真の記事になってしまいました。 しばらくフィルムで撮る練習をしていましたが、またデジタルでも撮りたい気分になり再びデジタルでも頑張って撮…

Lomography Potsdam Kino Film でポートレートなど - 2021.03

LomographyのモノクロフィルムPotsdam Kino Film をポートレート撮影などで使ってきました。個人的にモノクロフィルムの中では一番好きで、ポートレートを撮る時はだいたいこれを使ってます。 shop.lomography.com 映画用モノクロフィルムの美しいトーン 20…

Lomography Fantôme Kino B&Wで街撮り - 2021.03

今回試したフィルムはLomographyのFantôme Kino B&Wです。ハイコントラストなモノクロフィルムということで街撮りしたらカッコよく撮れそうと思い、大阪をぶらぶら歩いてきました。 shop.lomography.com どうでもいいですが、この日は梅田から日本橋まで歩き…

Lomography Color Negative 100 2021.02

Lomography Color Negative 100で写真を撮りました。今まで日中は400を使ってましたが、個人的には100の方が合ってるかも

SlackbotのフレームワークBoltでモーダルを使ったアプリを作ってみる

SlackbotのフレームワークといえばHubotなどが有名ですが、Slackが公式に出しているBoltを使ってみました。使用する言語はJavaScriptです。ドキュメントに沿ってHelloと打ったら返事を返してくれるのと、モーダルでフォームに入力し特定のチャンネルに投稿す…

react-infinite-scrollerを使ってFirestoreで無限スクロールを実装する

react-infinite-scrollerというライブラリを使ってみました。 github.com react-infinite-scroll-componentというライブラリもあるようですが、react-infinite-scrollerの方がGithubスターの数が多いので、今回はreact-infinite-scrollerを選びました。 GitH…

Next.js+TypeScriptでimportのaliasを設定するのが楽になっていた

importするときに何もしていないと以下のように相対パスで書きますが、階層が深くなると面倒です。 import { Button } from '../../components/Button それを以下のように書けるようにします。 import { Button } from '@/components/Button Next.jsでは以前…

Ant DesignのCalendar UIを使ってみた

カレンダーを実装しようと思って使ってみました。なかなかしっくり来るカレンダーライブラリがなかったですが、Ant Designのカレンダーがちょうどよかったです。 ant.design ただ、カレンダーに内容を表する場合に公式のExampleだと日付だけで判定していて、…

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へ コンデジで撮…