メインコンテンツへスキップ

サイト奥付 — テクノロジースタックとデザイン

巨人の肩の上にのる矮人

このページの内容 9

サイト歴

イソリアロゴ
巨人の肩の上にのる という西洋の比喩表現がありますが、このサイトもその例外ではありません。以前のイソリアのサイトでは、Rapidweaver、Wordpress、Typo3、Drupal、Hugo、そして最近のLumeを使用していました。これらのウェブサイト構築システムにはそれぞれの利点がありましたが、いずれもアップグレードや依存関係に関連するいくつかの脆弱性がありました。

SvelteKitとSvelte 5

このサイトは、Svelte 5を基盤とするフルスタックWebフレームワークSvelteKitで構築されています。SvelteKitは、サーバーサイドレンダリング、コード分割、ファイルベースのルーティングシステムを提供し、高速でアクセシブルなウェブサイトの構築を容易にします。

Svelte 5は、リアクティブな状態管理のための強力な_ルーンシステム_（$state、$derived、$effect、$props）を導入しています。コンポーネントは仮想DOMのオーバーヘッドなしで最小限のJavaScriptにコンパイルされ、優れたパフォーマンスを実現します。

コードベース全体でTypeScriptを使用し、厳格な型チェックとZodスキーマによるデータ境界のバリデーションを行っています。

Cloudflare Workers

サイトはCloudflare Workersにデプロイされ、世界中のデータセンターのエッジで実行されています。これにより、コールドスタートなしでグローバルに50ms以下のレスポンスタイムを実現し、自動スケーリングが可能です。Cloudflare Image Resizingは、各デバイスに適したサイズで最新フォーマット（AVIF、WebP）の最適化された画像を自動配信します。

DNSとCDNはCloudflareで管理され、堅牢で高速なDNS解決とDDoS保護を提供しています。

当サイトの外観

このウェブサイトのデザインは、いくつかのコンポーネントから出来てます。

まずは、CSS優先の新しい設定システムを備えたTailwind CSS v4をベースにしてます。Tailwindについて：

Tailwind CSSは、マークアップ内で直接任意のデザインを構築するために組み合わせることができるクラスが詰まったユーティリティファーストのCSSフレームワークです。

これにより、基本的なスタイルの一貫性、モバイルユーザーをサポートするための応答性が得られ、あらゆるサイトデザインの優れた出発点として機能します。

フォントについては、IBM Plex Sans JPを使用し、すべてのデバイスで最適なパフォーマンスと読みやすさを提供しています。

表示されているアイコンは、phosphor-svelte経由で統合されたPhosphor Iconsを使用しています。

写真や画像は主にコグレーが撮影したものを使用しております。

ホームページのヒーロー動画はCloudflare Streamで配信し、Pexels（ロイヤリティフリー）から取得しています：

  • 「渋谷交差点のタイムラプス」 Timo Volz撮影
  • 「東京」 Timo Volz撮影
  • 「高架線路を走るモノレール」 alenta azwild撮影
  • 「東京タワー前の建物に向かって歩く」 Simo Herold撮影
  • 「Peace 02」 Geun Goh撮影
  • 「モダンオフィスでのビジネスネットワーキングイベント」 Max Medyk撮影
  • 「混雑した通りを歩く人々」 Huu Huynh撮影

コンテンツパイプライン

コンテンツはYAMLフロントマター付きのMarkdownで作成され、unified パイプライン（remark + rehype）を通じて処理されます。GFMサポート、見出しの自動リンク、目次生成を提供します。HTMLの出力はセキュリティのためにサニタイズされてからレンダリングされます。

データ

ニュース記事やプロジェクト情報などの動的コンテンツについては、当社のクラウド型データーベースPROdbから引用しています。お問い合わせフォームも、PROdbへデータを書き込んでいます。

ソースコード

このサイトのレポジトリはGithubにてホストされています。コードベースは二層リンティング戦略（oxlint + カスタムSvelteルール付きESLint）と自動検証チェックを使用しています。

Humans(.txt)

Humans.txt ファイルをご存知でしょうか。Humans.txtはウェブサイトの奥付（サイト作製には何を実際に使ったかなど）の作る方法を比較的標準化しようとする試みであり、また検索エンジンのクローラープログラムに指示するrobots.txtとも関係してます。

クリックすると単純なテキストのみの形式で、この奥付ページと基本的に同じ内容の情報が表示されます。

ありがとう!

通常世の中のウェブサイトはこの様に「どのサービスを利用しているか」という内容を記載することは多くはないと思いますが、どのサイトであれ色々なサービスの恩恵を受けていることを忘れてはいけません。

開発時にはClaude Codeをコード生成やコンテンツ編集に使いました。

LumeとDenoチーム（前バージョンのサイトはLumeで構築し、大変お世話になりました）、Rich Harris氏とSvelteチーム、Cloudflare Workersチーム、そしてTailwind CSSチームに、このサイトを支えるツールを構築してくださったことに心から感謝します。

最後に、沢山の時間を費やしてくれたイソリアのみんなにありがとう。

さぁ、仕事に戻ろう！

技術概要 ソースコード ↗