Open Bento (open-bento-next) — ポートフォリオ作成用オープンソーステンプレート

概要

Open Bento は、bento.me の機能性と見た目をオープンソースで再現した Next.js（TypeScript）製のポートフォリオテンプレートです。複数種類の「カード」（SNSリンク、画像、動画、GIF、地図、テキスト、GitHub統計など）を並べ、ドラッグ＆ドロップでレイアウトを直感的に調整できます。GIF のアニメーション保持や画像の再配置ツール、SNS 自動判別など、ポートフォリオ作成に便利なユーティリティが揃っており、レスポンシブデザインでスマホ・デスクトップ両対応のページを素早く構築できます。

リポジトリの統計情報

スター数: 1
フォーク数: 0
ウォッチャー数: 1
コミット数: 2
ファイル数: 10
メインの言語: TypeScript

主な特徴

直感的なドラッグ＆ドロップでカードを並べ替え・配置可能。編集UIからレイアウトを即時反映できます。
多様なカードタイプをサポート（SNSリンク、画像／GIF、動画、地図、テキスト、GitHub ステータス等）で表現の自由度が高いです。
SNS 自動判別により、URL を貼るだけで適切なアイコンや埋め込みプレビューを生成。複数プラットフォームに対応します。
GIF のアニメーションを保持したまま表示でき、画像のトリミングや再配置ツールも備えているため見た目を細かく調整できます。

技術的なポイント

Open Bento は Next.js を基盤に TypeScript で実装されており、ページルーティングと静的/動的レンダリングの恩恵を受けられます。カードはコンポーネント化されており、各カードのレンダリングロジックと編集 UI が分離されているため拡張しやすい設計です。ドラッグ＆ドロップやグリッドレイアウトはクライアント中心で動作する想定で、レスポンシブ対応により画面幅に応じた列数やカードサイズを調整します。SNS 自動判別は URL パターンやホスト名による振り分けで行い、適切な埋め込み形式（リンク、iframe、プレビュー）を選択します。GIF のアニメーション保持や画像の再配置はフロントエンドでの表示制御とブラウザ互換性を考慮して実装されており、ローカル／クラウド上の静的アセット管理にも対応できる構造になっています。TypeScript による型定義で各カードのプロパティを厳密に管理し、将来的なカード追加や外部 API 統合（例：GitHub 統計の取得）も組み込みやすい作りです。

プロジェクトの構成

主要なファイルとディレクトリ：

.gitignore: Git 管理外のファイルを指定する設定。ビルド成果物や環境設定を無視します。
LICENSE: オープンソースライセンス表記。利用条件や再配布ルールを明記しています。
README.md: プロジェクトの概要・導入手順・機能一覧の説明ファイル。導入時の参考になります。
next.config.js: Next.js のビルドや公開設定を記載する設定ファイル。画像最適化や環境変数の扱いなどに用いられます。
package-lock.json: 正確な依存関係ツリーを固定するためのロックファイル。再現可能なインストールに必要です。

…他 5 ファイル

各ファイルは Next.js アプリの典型的な構成に沿っており、コンポーネント、スタイル、静的アセット、API 呼び出しロジックなどを分離して配置する想定です。TypeScript を採用しているため、型定義ファイルやインタフェースによりカードデータやページ設定を明確に扱えます。コミット数やファイル数は現時点で少なめですが、プロジェクトのコアとなる機能は README にまとまっており、拡張やカスタマイズの余地が大きい点が特徴です。

まとめ

Next.js + TypeScript で構成された拡張しやすいポートフォリオテンプレート。手早く見栄えの良い個人ページを作れます。