開発日誌

開発した時に躓いたこととかの記録

2023-01-01から1年間の記事一覧

NILTOを使ってみようとした

フェンリルのCMS、NILTOをちょっと試してみました。 結論として自分の用途にはアンマッチだったので止めたのですが、そこまでの感想をば。 NILTOとは 公式はこちら → NILTO (ニルト) - チームの理想を実現するヘッドレスCMS フェンリルが出している新しいCMS…

Cloudflare PagesのサイトをGithub Actionsを使って定期デプロイする

ある日、GtihubActionsからエラー通知が届いた。 私のサイトはRSSで自分のブログの記事を表示しているのだが、これをVercel→Cloudflareに移したことで落ちてた模様。修正する。 結論 完成品 scheduleで"0 0 * * *"にすれば毎日0時0分にデプロイされるのでそ…

cloudflareの*.pages.devを閉じる

astroで作っているサイトをcloudflareに移動した。ドメインはcloudflareで管理しているので、独自ドメイン設定も楽々完了。 設定画面を見ていて気付く。独自ドメインを設定したのに、Cloudflare Pagesのデフォルトである『*.pages.dev』が生きている。同じペ…

astro view transitionを導入する

最近色々なサイトを見て良い!と思ったのをメモるようにしている。(メモ → manas-design-input ) その中で『ページ遷移時のアニメーション、最近トレンドかも』と気づいた。 そういえばastroでそういう機能が実装された気がするので、やってみる。 公式Doc…

スクロールに応じて画像がふわっと拡大するやつの実装メモ

スクロールに応じて、画像がふわっと拡大する | manasas ui sandbox というのを実装してみた。GSAPは『知ってればすぐ実装できるが、情報にたどり着くまでに時間がかかる』ことが多いので、数こなしたら表現の幅が広がって楽しくなれそうだなあ、という印象…

はてなブログなどのRSSの日付を上手に表示する

rss

※RSSによって返ってくるものが若干異なっていることがあるので確認の上で実装してください 弊ブログにてRSSで表示してるコンテンツに日付をだしたかったけどそのまま出したらグリニッジ標準時っぽいのが出たのでお直し。 コード RssPosts.astro 利用している…

astro2.8から3.0にアプデした記録

PR: astro3.0にアップデート by thetalemon · Pull Request #55 · thetalemon/manasandbox 何するの astroの3.0が出た。パフォーマンスや最適化がより向上しているし、Astro View Transitionsという良い感じの遷移ができる機能もできたようで、色々試したい…

astroを利用したサイトをfirebaseからVercelに移行した

astroとVercelと公式にホスティングパートナーになったようです。 astro.build AstroのMiddlewareがVercelのEdge Middlewareを利用して実行できるようになったり、Vercelの画像最適化をAstroで利用できるようになったりするようです。(※ 誤訳しているかもし…

メインブランチ名をmaster -> mainに変更した

ポートフォリオのリポジトリのmasterブランチをmainブランチにrenameした。コピペしたGithubActionsの中に『main』という文字列があり、今まで変更作業をしたことがないので、この機に変更するか!と思い立ってみた。 基本は↓の記事を参考にしたのだが、同じ…

devドメインをGoogle DomainsからCloudflareに移管した

ついに!Cloudflareが.devドメインに対応しました!! TLD Policies | Cloudflare Google Domainsの売却が発表された当初はClouflareは.devドメインは『Available soon』ステータスでした。 soonってどのくらい!?と思いながら首を長くして待…っていたわけ…

自ブログをPages RouterからApp Routerに変更した

自ブログをPages RouterからApp Routerに変更してみました CMSはNewtですが特にCMS依存な点はない 参考記事はこのへん Data Fetching: Fetching | Next.js Next.js を Pages Router から App Router に移行するときにやったこと pages routerをapp routerへ…

Yew(Rsut)をGithubActionsで自動デプロイする

いつかに作ったYew(Rust)のサイトを自動デプロイにのせたい 上記サイトの作り方の参考サイトはこちら → Web フロントエンドエンジニアのための Rust 製 Web フロントフレームワーク Yew 入門 検討 Vercel, Cloudflare 両方試したが、リポジトリ接続はfaile…

React Hook Formとreact-dropzoneとZodでファイルアップロードフォームを作って、nodemailerでファイルをメール送信する

React Hook Formとreact-dropzoneを組み合わせた時にバリデーションを発火させるのに手間取ったのでメモ。知ってれば難しいことはない。 Next.jsのAPIでnodemailerを使ってメールを送るのアップデート版 textareaのinputをメール送信するだけの機能に、下記…

Newtの複数参照フィールドで絞り込みをする

個人ブログのタグで絞り込みの書き方がイケてないのを思い出した APIによるタグの絞り込みが方法がわからなかったので下記のように全記事を取得してきてjsでフィルタをしていた。記事が少ない&ページングもしてない今は良いが、記事が増えたら破綻するので…

はてなブログからmicroCMSにデータ移行する方法

既存CMSからmicroCMSに移行できるのか気になった 個人でCMSを持ってないので、はてなブログをmicroCMSにデータ移行をやってみた データ移行だけ試してみるだけなのでこのブログは引き続きはてなブログで運営する 題材のブログは読書記録ブログの方 ※諸注意 …

VPSのSFTP接続設定をして、CalckeyをWindowsでPWAした時のアプリアイコンを変更したかった

【追記】 packagesの中を自分で置き換えるのは推奨されないようで、customディレクトリ内にファイルを置いてpnpm run gulpするのが推奨のやり方のようです。 が、Calckeyの最新のstableバージョンである13.1.4.1 ではassets配下のディレクトリの中身のコピー…

Sassを利用しているNext.jsをStorybook6から7に移行する

Storybookのv7がでてたのでアップデートしてみる。2023/5/18時点の7.0.12にアプデする。 リポジトリ 道のり 6 -> 7に移行し、起動できるようになるまで 公式の Migration guide for Storybook 7.0 のupgradeコマンドをたたくも、何故かupgradeされない 仕方…

Next.jsのAPIでnodemailerを使ってメールを送る

メール通知を作ってくれ。Next.jsのAPI Routesで。と言われて『できるんだ……』ってなったのでやってみるなど。 Routing: API Routes | Next.js ざっくり仕様 メールはGmailを使う ライブラリはnodemailerというやつを使う FWはもちろんNext.js 結果 textarea…

個人サイトをポコポコ作るには

最近個人サイトをポコポコ生やしてるので書く。 更新間に合ってないが作った主な個人サイトは https://manasas.dev に適宜まとめている)。 前提 使うもの Github ホスティングサービス Firebase Vercel Cloudflare ホスティングサービス、どれを選ぶ? やり…

Astroでいにしえの個人サイトを作った

いにしえの個人サイトをつくった。 ここでいう『いにしえの個人サイト』とは『1ページ1ページ真心込めてHTML+CSSを凝り凝りしてるサイト』のことをさす。 サイトはコレ↓ 北極の とある倉庫 やりたかったこと いにしえの個人サイトをpushで自動デプロイで作り…

Svelteの書き方の特徴をざっくり語る

mana's tools というのをSvelteで作ったので、他フレームワークに比べて特徴的な書き方だと思った点を語る コンポーネントのファイルの構成 コンポーネントの引数定義 jsの変数をCSSに渡したい時 headの書き換え方 学習用コンテンツ おわりに コンポーネント…

Next.js(app directory)でMarkdownを読み込む

やりたいこと Next.jsのapp directoryモードで.mdファイルを読み込んでページの途中に表示するやつをやりたい やり方 公式にもやり方は書いてある Render Markdown - Dynamic Routes | Learn Next.js ただし上記の方法はapp directoryでは使えないのでapp di…

README

manasas tech journal 開発の時に詰まった些細なことをとかを書き残しておく 『自分が詰まったら書く』のでどんな些細なことでも書く 書いてる人 まなさす 6年目くらいのエンジニア 現フロントエンド、元バックエンド 色んなフレームワーク試すのが趣味、浅…