華麗なるWebフレームワーク Astro の使い方 - コムテブログ
ひょっとしたら、デザイナーさんの方で React や Next.js を使うのが難しいと感じる人がいらっしゃるかもしれません。そんな方におすすめなのが、Astro です。React を使わずに、ネイティブな JavaScript と、html と css だけで、フロントエンド開発を行うことができます。 静的サイトジェネレータである Astro は、フロントエンド開発の新しいフレームワークで、静的サイト生成(SSG)とサーバーサイドレンダリング(SSR)を効率的に組み合わせることが可能です。 Astro の特徴は多岐に渡りますが、特に注目すべきはそのパフォーマンスと開発者体験です。これは、Astro が「0-JS」の原則に基づいて構築されているからです。 「0-JS」の原則とは何かというと、フロントエンドで JavaScript のバンドルを全く必要としない、つまり最小限の JavaScr
Astro+WP APIでPageSpeedInsightsで簡単に100点取る
前書き WordPressで稼働しているリニューアル案件で、Astroを使って実装を行った。 ライブラリにサイトが完全に依存するデメリットもあるものの、 Astroを使用した理由としては、コンポーネント指向による保守性拡張性の観点からと、サイトの最適化の観点から採用した。 結果普通のレンタルサーバーでPageSpeedInsightsでほぼ100点満点。 SPの点数 PCの点数 使用感と感想 正直これまでのタスクランナーやモジュールバンドラーなどを使ったHTML開発は若干レガシー化している感があった。 そんな中、まさに現時点でのWeb開発ベストプラクティスを詰め込み、ほぼ何も考えずに最適化されたサイトを実装できる非常にすぐれたライブラリだと感じる。 また、これまでPageSpeedInsigthsの点数を上げようと思ったら、構築後、PageSpeedInsightsの助言に一つ一つ従いなが
全力で爆速にするAstro.js
注意 この記事は、私が2024年4月頃に書いた記事の再編集です。情報が多少古い、もしくは検証しきれていない箇所がありますがご了承ください。 はじめに 皆さんはよくAstroでWeb制作をすると思います(圧)。 Astroでサイトを作ると特に対策せずとも爆速なサイトが出来上がりますが、それだけでは物足りずちゃんと対策して高速化を図る記事です。 すっごーい簡単な内容なのでご承知ください。 Lighthouse 実際にページのパフォーマンスを計測するにはよくLighthouseを使います。このサービスはGoogleがオープンソースで開発しているページインサイトツールです。馴染み深いですね。 これでサイトの計測をしている人が一番多いんじゃないでしょうか。 Chrome拡張機能をいれることで、オフライン環境であってもlocalhostサイトの計測ができます。 すでに公開済みのページなどでテストする場
Firebase HostingでAstroをSSRモードにして動かす時の設定 | JavaScriptに関するお知らせ
こんにちは！SSRを刺されと読むMizutani(@sirycity)です。CSRは腐れです。 今日はFirebaseとAstroとSSRについてです。 結論 Firebase Hosting(とFunctionsとCloud Run)ではAstroをSSRモードで動かすことができます。だが設定が本当にめんどい。 はじめに Firebase hosting(以下hosting)は静的サイトのホスティングサービスです。で、Astroは静的サイトジェネレーターです。つまりAstroで作ったWebサイトはhostingにデプロイできます。まあ当たり前ですね。 hostingのサーバーサイドレンダリング(SSR)について hostingは一部のFWについては例外的にサーバーサイドレンダリング(以下SSR)をサポートしています。サポートしてるFWは以下の通り。 FirebaseExtended/fi
Firebase & Astro
Firebase is an app development platform that provides a NoSQL database, authentication, realtime subscriptions, functions, and storage. See our separate guide for deploying to Firebase hosting. A Firebase project with a web app configured. An Astro project with server-side rendering (SSR) enabled. Firebase credentials: You will need two sets of credentials to connect Astro to Firebase: Web app cre
ウェブメディアの開発に最高かもしれない WACK Stack の紹介
WACK Stack というウェブメディア向けの開発スタックを考えてみました。まだ本番運用はできていませんが、PoC としてプロトタイプを作ってみたところ「いやこれ、マジでかなりいけるんじゃないか？」という感触を得たので紹介したいと思います。 WACK Stack とは、 WordPress Astro CDN Kysely のそれぞれの頭文字をとったもので、これらから構成されるスタックに名前を付けたものです。WordPress を CMS として使いながら、パフォーマンスとスケーラビリティに優れ、モダンなスタイルで高速に開発とリリースがしやすいウェブメディアのための構成として考えました。 前置き 弊社 KODANSHAtech の主な業務の1つにウェブメディアの開発があるのですが、そのときにWordPress を使うことが多いです。 WordPress を採用しておけば、すぐにほぼ完全に
AstroでSwiperを使用する
カルーセルコンポーネントの実装 カルーセルコンポーネントを実装する。 デフォルトのページネーション、ナビゲーションボタン、スクロールバーを入れているので、不要な場合は削除する。 --- import { Image } from 'astro:assets' import slide01 from '/public/ged038.jpg' import slide02 from '/public/ged039.jpg' import slide03 from '/public/ged040.jpg' import slide04 from '/public/ged041.jpg' import slide05 from '/public/ged042.jpg' import slide06 from '/public/ged043.jpg' import slide07 from '/pu
Astroを業務で使ってみて
Astro builds fast content sites, powerful web applications, dynamic server APIs, and everything in-between. Astroを触ってみて、これはいいかも…と思い、業務でも何度か使ってみました。感想と、いくつか知見を書いておきます。 所感 まず、Next.jsなどと違い（基本的には）JSフリーの状態でビルドされるのが良いです。「納品後はこっちで更新したい」と言われることも多く、お客様の手で変更できないのはNGな案件が結構多いんですよね…。逆に納品後も保守契約を結ぶなどしてずっと手元で触れるなら、そこまで重要ではなさそう。 記法はかなりとっつきやすいので、コーディングはたまにやる程度のデザイナーとも協業しやすそうです。 --- import '@/styles/global.css'; imp
Astroで画像を最適化にして使い分けるの巻
はじめに ども、もりみちです。 Astroに組み込まれている、<Image>コンポーネントやgetImage()って画像を最適化できてとても便利ですよね。今回は画像を最適化した後に任意のメディアクエリを使って画像を使い分けたりしていきたいと思います。 対象にする人 astroで画像をwebpに変換したい人 暇な人 本編の巻 そもそもなんで今回コンポーネントを作ったかというと、画像を最適化させる度に画像をimportして<Image />もしくはgetImage()もimport。別のファイルでもimport。別のファイルでもimport。別のファイルでもry。といった現象が起こったり、画像を大量にimportした暁にはこのようにフロントマターがアホみたいに埋まってしまいました。 --- import { Image } from 'astro:assets'; import hoge01
さくらのレンタルサーバ ライトを使用し、GitLab CI/CDを活用して、Astroのビルド成果物を自動的に公開する方法
さくらのレンタルサーバ ライトを使用し、GitLab CI/CDを活用して、Astroのビルド成果物を自動的に公開する方法 公開日時: 2023年11月19日 2:20 お久しぶりです。ニシキです。 ドメイン名の自動更新をしっかり忘れていて、しばらくブログが見れない状態になっていました。 みなさんはこういうことにならないように、ドメイン名の有効期限をしっかり管理してくださいね。 さて、今回は、さくらのレンタルサーバ ライトを使用し、GitLab CI/CDを活用して、Astroのビルド成果物を自動的に公開する方法を紹介します。 具体的には、以下のような流れをGitLab CI/CDで実現します。 Astroのビルドを実行する。 ビルド成果物をさくらのレンタルサーバ ライトにアップロードする。 今回、2.の処理にはlftpを使用、FTPSでのアップロードを行います。 ソースコード 今回のソー
【Astro】Google Analyticsを導入する - Qiita
はじめに Astroで作ったWebサイトにGoogle Analyticsを導入したときのメモです。 Google Analyticsを使うとアクセス数やユーザ情報が分かるので便利です。 手順 Google Analyticsのトラッキングコードを取得する Google Analyticsの登録方法についての解説は省略します。 UAは2023年7月に廃止となるので、GA4がよいでしょう。 登録ができたら、トラッキングコードを取得します。 トラッキングコードは以下のような形式です。 <!-- Google tag (gtag.js) --> <script async src="https://www.googletagmanager.com/gtag/js?id=GA_MEASUREMENT_ID"></script> <script> window.dataLayer = window.
AstroとmicroCMSで作ったサイトにページネーションを実装する
この記事は microCMS Advent Calendar 2022 の25日目の記事です。昨年に引き続き参加させて頂きました。今回は、AstroとmicroCMSで作成したWebサイトにページネーションを実装する内容について書いています。 はじめに microCMSは日本製のヘッドレスCMSです。日本語の分かりやすい管理画面でコンテンツを管理して、APIベースで簡単にデータを扱うことができます。 AstroはWebサイトを構築するためのフレームワークです。公式サイトのトップに"Build faster websites."とあるように、高速なWebサイトを構築することを目的としていて、完全な静的HTMLを生成することもできるといった特徴があります。また、Astroにはページネーションに必要な機能がビルトインでサポートされています。本記事ではこの機能を利用して、以下のような2種類のページ
JSX記法によるパンくずリストの作り方(フレームワークAstroでの実装) | ARCUSS
パンくずリストはサイト訪問者が現在地を知るため(サイト内で迷子にならないため)にあるものですが、SEO対策においても重要な施作の一つです。 当サイトでもページの左上に設置しています。 パンくずリストを含めたSEOに関する詳細内容は、以下のページでご確認ください。 SEO対策とは？上位表示を目指すうえで気を付けるべき5つのチェックリスト WordPressであれば、All in One SEOなどのプラグインを利用すれば簡単に導入できますが、そうでない場合はコードを書く必要があります。 １ページずつ同じコードをコピペして書くこともできますが、記述ミスや手間、保守面を考えると、非常に効率が悪いですよね。 というわけで今回は、プログラムで作成する方法をご紹介します。 実装は、当社で普段から使用しているフレームワークAstroで行います。 アストロについての詳細は以下の記事をご覧ください。 超高速
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Share state between Islands
How to Add Google Analytics to your Astro Website
Creating an Accessible Accordion Component in Astro
import.meta.globEager · vitejs/vite · Discussion #7066
Custom Elements / Web Components with specific attributes cause the markdown renderer to break · Issue #9717 · withastro/astro
Import SVG file in Astro and use it without the <img /> tag
Using SVGs as Astro components and inline CSS | David Warrington