Zenn
Closed7

ブラウザの初期画面のダッシュボードを簡単に自作する

ariryoariryo

ダッシュボードを自作する

なるべく効率的に実装したいので，スクラップはメモ程度の情報を残す．

ChatGPTに聞いてみた

私：ブラウザの初期画面として，カスタムのダッシュボードを設定したいです．方法としてはHTMLファイルを自分で用意する，Notionのような自分で設定するサイトを用意する．を考えています．他の選択肢を上げてください

ChatGPT：
ブラウザの初期画面としてカスタムダッシュボードを設定するための方法として、以下の選択肢を挙げます：

  • HTMLファイルを自分で用意する: ローカルのHTMLファイルをブラウザのホームページとして設定する方法です。CSSやJavaScriptを使用して、見た目や機能をカスタマイズできます。
  • Notion: Notionを使用して、ページのレイアウトや内容を自分好みにカスタマイズし、そのページをブラウザのホームページとして設定する方法です。
  • ブラウザ拡張機能を使用する: 例えば「Momentum」や「Infinity New Tab」などのブラウザ拡張機能を使用して、新しいタブを開いたときの画面をカスタマイズできます。
  • Webサービスを使用する: 「Start.me」や「iGoogle」のようなサービスを使用して、オンラインでカスタムダッシュボードを作成し、それをブラウザのホームページとして設定する方法です。
  • 自分のサーバーを使用する: 自分のサーバーを用意し、そこにカスタムダッシュボードをホスティングする方法です。これにより、どのデバイスからでもアクセスできるホームページを作成できます。
  • ブックマーク管理ツールを使用する: 「Raindrop.io」や「Toby」のようなブックマーク管理ツールを使用して、よくアクセスするサイトやリソースを一覧表示するダッシュボードを作成し、それをホームページとして設定する方法です。
  • ダッシュボードテンプレートを使用する: インターネット上には、無料で使用できるダッシュボードテンプレートが多数存在します。これを利用して、独自のダッシュボードを作成することも可能です。
  • ウィジェットを追加する: ウェブ上には、天気やニュース、カレンダーなどのウィジェットを提供しているサービスが多数あります。これを組み合わせて独自のダッシュボードを作成することも考えられます。

これらの選択肢をもとに、自分のニーズやスキルに合わせて最適な方法を選択してください。

すでにそういったサービスはあるようだ．今回は修行も積みかつデザインを細かくカスタマイズできるようにしたかったので，ローカルで静的サイトをビルドして，ブラウザでそこにアクセスすることにする．

ariryoariryo

要件を定義する

  • ブラウザで新しいタブを開いたときのダッシュボード自分用にカスタマイズしたい
  • 初期画面として設定できる形式（HTML形式）
  • 何をカスタマイズできるようにするか
    • いくつかのリンクをグリッド形式で表示する
    • カレンダーを埋め込みたい
    • リーディングリストがほしい
    • to do リストがほしい

いくつか静的サイトだけではできないものも有るので，適宜外部サービスを利用するとして，とりあえずダッシュボードの元となる静的サイトを生成する．

ariryoariryo

ChatGPTに使うフレームワークを聞いてみた．

User: ローカルでファイルを用意することとします．静的サイトを生成するために利用するフレームワークの構成案を出力してください．例えばAstroとSveltiで静的サイトをジェネレートするやHTMLファイルを手書きで用意するなどです
ChatGPT: 静的サイトを生成するためのフレームワークの構成案をいくつか提案します：

  • Astro + Svelte:

Astro: 最新の静的サイトジェネレーターで、複数のフレームワークとの組み合わせが可能。ページごとのフレームワーク選択や、最適なパフォーマンスのための部分的なレンダリングが特徴。
Svelte: コンポーネントベースのフレームワークで、ランタイムが不要。コンパイル時に純粋なJavaScriptに変換される。
この組み合わせでは、Astroを主体として静的サイトを構築し、Svelteをコンポーネントとして活用します。

  • Eleventy (11ty) + Vanilla JavaScript:

Eleventy (11ty): シンプルで柔軟性の高い静的サイトジェネレーター。複数のテンプレート言語をサポートしている。
この組み合わせでは、11tyで基本的なサイト構造を構築し、必要に応じてVanilla JavaScriptで動的な機能を追加します。

  • Next.js + React:

Next.js: Reactベースのフレームワークで、サーバーサイドレンダリングや静的サイト生成が可能。
React: 人気の高いコンポーネントベースのライブラリ。
この組み合わせでは、Next.jsを使用してページを生成し、ReactでUIコンポーネントを構築します。

  • Gatsby + React:

Gatsby: Reactベースの静的サイトジェネレーターで、GraphQLを使用してデータを取得。
この組み合わせでは、Gatsbyを使用してページを生成し、ReactでUIコンポーネントを構築します。

  • Handwritten HTML + CSS + JavaScript:

伝統的な方法で、HTML/CSS/JavaScriptを直接手書きで作成します。フレームワークやライブラリの依存がなく、完全な制御が可能ですが、大規模なサイトや複雑な機能を持つサイトの場合は手間がかかる可能性があります。
これらの構成案から、プロジェクトの要件や好みに合わせて選択してください。

User: 以上の構成を比較して一番モダンで効率的な構成を提案してください
ChatGPT: 上記の構成の中で、最もモダンで効率的と考えられるのはAstro + Svelteの組み合わせです。以下にその理由を説明します。

Astro + Svelte の特徴:
最適化されたパフォーマンス: Astroは、ページの内容に応じて必要なJavaScriptのみをロードすることで、非常に高速なサイトを構築することができます。これにより、ページの読み込み速度が向上し、ユーザーエクスペリエンスが向上します。

フレームワークの柔軟性: Astroは、複数のフレームワーク（React、Vue、Svelteなど）と組み合わせて> 使用することができます。これにより、既存のコンポーネントやライブラリを再利用することが容易になります。

Svelteの効率性: Svelteは、ランタイムが不要なフレームワークであり、コンパイル時に純粋なJavaScriptに変換されます。これにより、不要なコードが削除され、最終的なバンドルサイズが小さくなります。

開発の効率: AstroとSvelteの組み合わせは、モダンな開発環境を提供し、コンポーネントベースのアプローチを採用しているため、再利用性とメンテナンス性が高まります。

環境の成熟度: Astroは新しいフレームワークでありながら、急速に成熟してきています。コミュニティのサポートやドキュメンテーションも充実してきており、開発者にとって安心して使用できる環境が整ってきています。

このような理由から、現代のウェブ開発のトレンドや最適化のニーズを考慮すると、Astro + Svelteの組み合わせは非常にモダンで効率的な構成と言えるでしょう。

ということだったのでAstro + Svelteで実装します．

ariryoariryo

以下のコマンドを打つ．ちなみにWinowsで開発しているのでコマンドプロンプトで実行している．

> node -v                          
v20.9.0

> npm -v                           
10.2.1

> yarn create astro astro-svelte
...省略

> npm install @astrojs/svelte
...省略

> npm start
...省略

以下のようなページが生成されたら勝ち
表示されるページ

ariryoariryo

svelteの設定をする．

以下のコードを/src/components/MyComponet.svelteに記載する

<script>
  let message = "Hello from Svelte!";
</script>

<h1>{message}</h1>

以下のコードをindex.astroに追加する

---
import MyComponent from '../components/MyComponent.svelte';
---

<MyComponent />

astro.config.mjsの以下の場所を変更

import { defineConfig } from 'astro/config';
// 追加
import svelte from '@astrojs/svelte';

// https://astro.build/config
export default defineConfig({
// 追加
	integrations: [svelte()],
});

もう一度npm startを実行してHello from Svelte!が表示されたら成功

ariryoariryo

Cardコンポーネントを利用して，いくつかのお気に入りのサイトを登録する

次に，HeadlessCMSを利用して，お気に入りサイトを動的に追加して，様々なデバイスから利用できるようにする．

このスクラップは2024/03/30にクローズされました