デモとして、このブログに Pagefind を導入してみました。ヘッダーの検索アイコンをクリックすると検索フォームが表示されるので、キーワードを入力して検索してみてください。 使い方 Pagefind は構築済みの UI ライブラリと、CLI コマンドとしてインデックスを作成するためのツールから構成されています。まずは UI ライブラリの部分から見てみましょう。 UI ライブラリ Pagefind の UI ライブラリは、検索フォームと検索結果を表示するためのコンポーネントから構成されています。この UI は以下のコードを追加するだけで簡単に利用できます。 <link href="/pagefind/pagefind-ui.css" rel="stylesheet" /> <script src="/pagefind/pagefind-ui.js"></script> <div id="s
はじめに こんにちは、フロントエンドエンジニアの多田です。 フロントエンド領域の勉強をはじめて 1 年が経ち、今回個人でゼロからアニプラさん(バルーンショップを経営してる会社)のバルーンサイトの検索システムを作らせていただく機会に恵まれました。 開発にかけられる総時間が 200 時間(つまり工数 1 人月ちょいぐらい、、)というだいぶヤバめなチャレンジングな時間的制約の中、要件定義・デザイン・フロントエンド・バックエンド・インフラ周りまで通して全て 1 人で開発し、完成させることができました。 はじめてfigmaでデザインしてみた アニプラさんより記事を書く許可をいただいたので、開発の裏側の話を記事にまとめます。 開発したサイトはこちら ↓ (今回の記事のメインとなる Next.js で作ったバルーンプラン一覧検索画面) 本記事の内容 (ほぼ)個人開発においての、要件定義 → デザイン →
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
