AstroとTailwind CSSを使ってDeveloper Siteをリデザインした話 | 株式会社ヌーラボ(Nulab inc.)
はじめに 今回のDeveloper Siteリデザインの目的は英語のコーポレートサイト（https://nulab.com/ ）とのUIを合わせることでした。旧Developer Siteのヘッダーやフッターなどの共通パーツは古いデザインのままだったため刷新する必要がありました。 旧Developer Siteのトップページ Developer Siteのトップページ 使用した技術 今回使用した技術は、静的サイトジェネレータであるAstroとユーティリティファーストのCSSフレームワークであるTailwind CSSです。 旧サイトはHugoとSCSSを用いて構成されており、今回はコンテンツはそのままで見た目のみを変更する制作だったため仕様の変更は不要でした。しかし、パフォーマンスの向上を目指し、かつ新しい技術に挑戦するためAstroとTailwind CSSを採用することにしました。 A
Astro+WP APIでPageSpeedInsightsで簡単に100点取る
前書き WordPressで稼働しているリニューアル案件で、Astroを使って実装を行った。 ライブラリにサイトが完全に依存するデメリットもあるものの、 Astroを使用した理由としては、コンポーネント指向による保守性拡張性の観点からと、サイトの最適化の観点から採用した。 結果普通のレンタルサーバーでPageSpeedInsightsでほぼ100点満点。 SPの点数 PCの点数 使用感と感想 正直これまでのタスクランナーやモジュールバンドラーなどを使ったHTML開発は若干レガシー化している感があった。 そんな中、まさに現時点でのWeb開発ベストプラクティスを詰め込み、ほぼ何も考えずに最適化されたサイトを実装できる非常にすぐれたライブラリだと感じる。 また、これまでPageSpeedInsigthsの点数を上げようと思ったら、構築後、PageSpeedInsightsの助言に一つ一つ従いなが
Astro DBでTODOリストを作成
AstroからデータベースプラットフォームとしてAstro DBがリリースされました。 色々と触ってみたのでチュートリアルとしてTODOリストを作成する方法を解説します。 Astroのインストール まずは通常のAstroのインストールを行います。 npm create astro@latestでproject名を「astro-todo」、Emptyプロジェクトを選択して作成します。 % npm create astro@latest astro Launch sequence initiated. dir Where should we create your new project? ./astro-todo tmpl How would you like to start your new project? Empty ts Do you plan to write TypeScrip
「Astro DB」登場。LibSQLベース、TypeScript ORM搭載、1GBまで無料。静的サイト生成用データベース
「Astro DB」登場。LibSQLベース、TypeScript ORM搭載、1GBまで無料。静的サイト生成用データベース 静的サイトジェネレータAstro用のデータベースサービス「Astro DB」が登場しました。 簡単にAstroに組み込むことが可能で、Astroのバックエンドデータベースとして、例えばフォームやコメントのデータの入出力、ユーザー認証などに利用可能です。 Introducing: Astro DB Add a hosted database to any Astro project in seconds. Includes a TypeScript ORM, schema manager, and automatic migrations out-of-the-box. Try it today! Every database comes with a generou
Astro DBをAstro以外で使う
TL;DR Astro DBはDrizzle LibSQL(SQLite)互換 内部でAPIにSQLを送信している 仕組み上、Astroなしで無理矢理使うことができるがアンドキュメンテッドなのでお勧めしない Astro DBとは Astro DBはAstroが提供するフルマネージドなSQLデータベースです。Astro Studioというプラットフォームの一部で、Astroで構築するウェブサイトのバックエンドのDBとして利用できます。 ユースケースとしてはウェブサイトの問い合わせの保存先やコンテンツのマスターデータの管理などを想定していそうです 使い方は以下のドキュメントに載っています 静的なSSGでも動的なSSRでも使えます 以下のstudio-templatesリポジトリにサンプルプロジェクトがあります Astro DBのアーキテクチャ Astro DBはDrizzle ORMを拡張して
Astro ゆく年くる年
8 月 30 日に v3.0 がリリースされ、それから約 3 ヶ月後の 12 月 5 日には v4.0 がリリースされており、メジャーアップデートのペースがやや早かったように感じますね。Astro の co-creator である Matthew Phillips によると、v4.0 における大きな変更の一つに Vite 5 へのアップデートがあり、これはもともと v3.0 に含まれる予定だったのが、Vite 5 のリリースが遅れてしまい、一方で v3.0 の目玉機能である View Transitions を早くリリースしたかったため、まず先に v3.0 をリリースし、その後に v4.0 で Vite 5 を含めるという流れとなり、結果的に v3.0 と v4.0 のリリースが短期間で連続してしまった、という事情があったようです。 GitHub スター数の推移 https://star-
Why I use Astro
Why I use Astro Dec 13, 2023 I’ve been thinking about writing this since a few months ago when some prominent people in the industry were battling “why I use Next.js” vs “why I use Remix”. Now, I don’t try to claim that this is the thing you should do. It’s just a collection of thoughts on why I use Astro. What works for me. And what works for me might not be what works for you. That said, I’ve be
Astro と Tailwind CSS でこの Blog をリニューアルしました
Blog をリニューアルするにあたり、今までの Movable Type でテンプレート作って、という手法から、Movable Type は JSON データの書き出しだけ担当させて、フロントエンドは Astro と Tailwind CSS で開発する形に切り替えたので、その概要を簡単にメモ。 この Blog は立ち上げ当初から Movable Type で運用していますが、MT タグを書いて、テンプレートを作って、という一般的な運用っていうんですかね？ それをやめて、Movable Type は記事データの管理と JSON を書き出す役割だけにして、フロントエンドは Astro + Tailwind CSS でリニューアルしました。 面倒だったのでデザインは大きく変えず、ぱっと見はリニューアルしたのがわかりにくい感じになっていますが、Movable Type とフロントエンドを完全に分
Astro の pros / cons
Vercel * Astro を使った開発を行い気づいた点を共有します。
Astro でクライアント側の処理を書いたら辛かった
画像は明日トロに見せかけた昨日トロだ。iPhone の謎のカメラ設定使ってみた。この OGP を作るために昨日大急ぎで閉店前にくら寿司に駆け込んだ。びっくらポンは全部外れた。 古来よりゲームの攻略ツールを作ることでプログラミングができるようになるとある。そのような期待を持ち、paimon.moeで満足できなくなった私は原神の TODO リストを最近作り始めた。原神はリポップの時間がイベントやアイテムでバラバラなのでそれを管理するためのツールだ。iOS 向けの Push 通知のサンドボックスだったり、OSS として公開して yaml で入稿する口を用意することで自分でセルフホストして自分に都合の良い TODO リストを作れるようにもしようとしていた。が、技術選定を間違えたなと思っていま作り直している。その間違いについて書く。 原神は去年の１１月くらいからすっかりハマっている。 FYI: ht
ブログをAstro に移行しました - As a Futurist...
式年遷宮の様な感じですが、数年おきにブログを作り直してます(前回)。今回は Gatsby でデザインした UI をほぼそのままに、フレームワークを Astro に移行しました。静的サイトの作成では Astro の開発者体験が最高に優れているので、2 年間ほぼ塩漬けにしてしまっていた Gatsby のコードを無事に移行できてよかったです。 Astro とは？ Astro は 一言で言うと、Better HTML です。Astro というフォーマットでサイトが記述できるのですが、普通の(素の)HTML も Astro としてそのまま使えます。厳密には違いますが、HTML のスーパーセットみたいな感じです。その HTML の要素群を component としてまとめることで関心を分離できて(この辺は Web Components でも実現できます)、必要に応じてビルド時にロジックも走らせることが
Astroを選ぶ理由 🚀 Astroドキュメント
Astroは、ブログやマーケティング、eコマースなど、コンテンツ駆動のウェブサイトを作成するためのウェブフレームワークです。Astroは、新しいフロントエンドアーキテクチャを開拓し、他のフレームワークと比較してJavaScriptのオーバーヘッドと複雑さを低減することで知られています。高速でSEOに優れたウェブサイトが必要なら、Astroが最適です。 Astroはオールインワンのウェブフレームワークです。 Astroには、ウェブサイトを作成するために必要なすべてが組み込まれています。また、さまざまなインテグレーションやAPIフックがあり、プロジェクトを自分のユースケースやニーズに合わせてカスタマイズできます。 特筆すべき点は以下の通りです。 アイランド: コンテンツ駆動のウェブサイトに最適化されたコンポーネントベースのウェブアーキテクチャです。 自由なUI: React、Preact、Sv
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
2024年6月にXに投稿したCSSテクニックのまとめ – TAKLOG
Astro DB
Webフレームワーク「Astro」を便利に使う～環境のカスタマイズとAstro 4.3までの新機能まとめ～