タグ検索の該当結果が少ないため、タイトル検索結果を表示しています。
最近流行りのAstroフレームワークで、WordPressの静的Headless化がかなりお手軽にできたのでまとめてみました。 開発環境 Astro 2.0 WordPress 6.1.1 Local node 18.12.1 Mac OS 13.2(Ventura) Visual Studio Code(Astroプラグイン入り） Astroとは？ Astroは、コンテンツにフォーカスした高速なWebサイトを構築するためのオールインワンWebフレームワークです。 (公式ドキュメントより) LocalでWordPressを構築 まずLocalを使って、ローカル環境にWordPressを構築します。 サイト名 Astro Blog（お好みで） サイトドメイン astro-blog.local WordPressの設定 WP AdminでWordPressのダッシュボードを立ち上げ、いくつかの
Headless CMSとは Headless CMSは、Wordpressなどとは違って本体のウェブサイトと管理画面が完全に分離されているのが特徴の CMS(コンテンツマネジメントシステム) です。 これを使うと、フロントエンドとCMS側が分かれるのでそれぞれを別の場所に配置することが可能です。 動的なコンテンツを表示することをサーバーを持たずに行うことが可能になるのが魅力です。 Micro CMSとは Micro CMSは国産のHeadless CMSです。 これまでのHeadless CMSというと「Contentful」が主流な気がします。 Contentfulは日本のサービスではないので英語が基本になりますが、Micro CMSはデフォルトで日本語に対応していたり、日本語でのチャットサポートがあるのが良いと思いました。 使い方 登録 上記画面の「無料ではじめる」または「新規登録」
いまさら気づいたけど Headless 系のUIライブラリが一番 AI と相性いいのではないか。 ロジックはプログラマで書けて自由度高いし、コンポーネントのネスト構造から意図を読み取れるだろうし、class 名は自由に書けるから意図を表明しやすい。 それをプロンプトとして ChatGPT or Codex にそのまま投げて書かせる、ができる。 というわけで vite + react + radix-ui + vanilla-extract で実験してみた。 プロンプト あなたは凄腕のマークアップエンジニアです。 radix-ui は Headless UI ライブラリで、UIとしてのセマンティクスのみを持っています。 次のコードは React + radix-ui + vanilla-extract で書かれた React コンポーネントです。 // Popover.tsx import
Headless UI
Completely unstyled, fully accessible UI components, designed to integrate beautifully with Tailwind CSS.
Last fall we announced Headless UI, a library of completely unstyled, fully accessible UI components, designed to pair perfectly with Tailwind CSS. Today we’re super excited to release Headless UI v1.0, which more than doubles the amount of included components for both React and Vue. What’s new We’ve added four new components to the React library, and five new components for Vue. Dialog (modal)
個人ブログを Next.js + Headless WordPressに 切り替えた話 / shifter-meetup-202011
個人ブログを Next.js + Headless WordPressに 切り替えた話 / shifter-meetup-202011
Faust.js + Headless WordPress + Vercel での Jamstack アーキテクチャでプレビューを実現する手順(カスタムポスト作成あり) Faust.jsとは？ Faust.jsとはについては公式サイトのトップに書いてありましたので引用します。 Faust.js is the Headless WordPress Framework. Faust.js provides a set of tools to make building front-end applications with WordPress as the headless CMS a pleasant experience for both developers and publishers. This framework consists of a WordPress plugin, a
Headless Component開発をはじめよう (Headless UI + React Spectrum)
はじめに この記事ではライブラリを活用したHeadlessなReact Component開発について紹介します。 Not Headless Component Headless Component の紹介の前にHeadless ComponentではないComponentとはなんでしょうか。 ReactでComponent を作成する際に Material-UIやAnt Designを使ったことがある人も多いのでは多いのではないでしょうか。 これらのライブラリは<Button />や<Menu />といったスタイル付属のReactコンポーネント集になっています。 自前でスタイルを書かずに使えるので便利ではあるのですが以下のような欠点があります。 細かい見た目の調整が難しい。 ライブラリにもよるのですが、細かい調整が難しいものが多いです。 例えばAnt DesignのButtonコンポーネ
Built-in data sources, components, and more to let you build incredibly fast.
Rustでブラウザを操作する「rust-headless-chrome」を試してみた | DevelopersIO
こんにちは。MAD事業部のきんじょーです。 最近Rustの入門書を読んだので、何かに使ってみようと模索していました。 その中で、Rustでヘッドレスブラウザを動かすライブラリを検証したのでこの記事にまとめます。 ヘッドレスブラウザとは ヘッドレスブラウザはGUIを持たないWebブラウザです。 一般的なブラウザと同じく、HTMLを解析しJavaScriptを実行できますが、GUIを持たないため、CLIやプログラム上から操作を行います。 主に以下のような用途で用いられます。 WebアプリケーションのE2Eテストの自動化 Webページのスクリーンショット取得 JavaScriptの自動テスト Webページで行うワークフロー処理の自動化 Webページのクローリング 古くはPhantomJSやCasperJSなどを用いていましたが、現在では主要なブラウザもネイティブでヘッドレスモードを搭載しています
↓動画でも解説しています。 Headless CMSとは？ 近年、目にする機会が増えた「Headless CMS」という単語。この記事では、Headless CMS、関連技術、人気のサービスなど、導入に向けた基礎知識をご紹介していきます。導入のためのイメージ作りになれば幸いです。 キーワード1：CMS（Content Manegement System） CMS（Content Manegement System）は、コンテンツ、ファイル、ワークフロー、リポジトリなどの情報を管理・公開するシステム。身近なところでは、WEBメディアの記事、企業サイトの各ページ、ECサイトの商品情報などの管理・公開など幅広く使われています。 画像などのファイルや、投稿の変更履歴、権限の管理など、様々な機能を技術者でなくても利用できるのが特徴です。 CMSを代表するのがWordpress。 2003年にリリース
この記事は何 2023年、世間はLLMで大騒ぎですが、データの業界ではセマンティックレイヤー・Headless BIへの注目も高まっています。 これは、まだ国内では黎明期ともいえるそんな技術が、今後どんな存在となりうるのかを、筆者の個人的な解釈と妄想をもとに述べる長文ポエムです。 セマンティックレイヤーとは まず最初にセマンティックレイヤーについて解説します。 セマンティックレイヤーとは セマンティックレイヤーとは、データベースとデータ利用者の間に入り、両者間のやりとりを円滑にする存在です。 データ統合プラットフォームを提供するAirbyte社は、セマンティックレイヤーをデータとビジネスユーザーの中間に位置する、複雑なデータを理解可能なビジネスの概念に変換・翻訳するレイヤーと説明しています。 A semantic layer is a translation layer that sits
Give your developers and marketers the toolkit to transform designs into optimized web and mobile experiences with half the effort.
最近のheadless chromeを利用したファイルダウンロードのテスト方法について - メドピア開発者ブログ
こんにちは。メドピアのRuby(Rails)化をお手伝いしている@willnetです。最近大阪Ruby会議02に妻子を連れて参加したのですが、👶が行き帰りの新幹線に合わせて寝てくれたおかげで大変スムーズに移動できました。 さて、以前poltergeistからheadless chromeへ移行する時に気をつけることというブログエントリを書きました。 その中で、ファイルダウンロードのテストをheadless chromeで実行するための設定について書いています。しかし、この設定では最近のchrome(chromedriver)では動かなくなってしましました。このエントリでは最新のやり方について紹介します。 これまでの設定例 以前のブログエントリに掲載したコードを一部再掲します。 Capybara.register_driver :headless_chrome do |app| drive
GitHub - ory/kratos: Next-gen identity server replacing your Auth0, Okta, Firebase with hardened security and PassKeys, SMS, OIDC, Social Sign In, MFA, FIDO, TOTP and OTP, WebAuthn, passwordless and much more. Golang, headless, API-first. Available as a w
The Ory Network is the fastest, most secure and worry-free way to use Ory's Services. Ory Identities is powered by the Ory Kratos open source identity server, and it's fully API-compatible. The Ory Network provides the infrastructure for modern end-to-end security: Identity & credential management scaling to billions of users and devices Registration, Login and Account management flows for passkey
当ポストはGo Advent Calendar 2019の5日目の記事です。基本ポエムを書いていて技術記事を書く感覚が鈍っていますが頑張ります。 今回はGoでheadless browser（Chrome）を用いた、動的な画像生成を行うというテーマで書きたいと思います。 なぜ画像生成したいのか？人はなぜ画像を生成したくなるのでしょうか？僕は漫然と画像を生成するのは、時間に限りがある身としてはよくないな、と思います。ということで理由が必要なのですが、最たる例はOGP画像の生成とかじゃないでしょうか？ あるいは任意のLGTM画像を生成したくて、文字を画像にかぶせたり、インスタグラムVer1.1みたいなサービスをローンチしたい時に、フィルター加工を実装したかったりするかもしれません。 Goで画像生成するには？Goで画像生成する方法に関してはこの１、２年でpo3rinさんや僕がしばしば登壇して解説
はじめに 今回、はじめてアドベントカレンダーなるものに参加することになりました松原です。 よろしくお願いします！ まずは簡単に自己紹介 沖縄のIT企業でリゾートウェディングやマリンスポーツ＆アクティビティのポータルサイトの運用をしています。 色々とあって今年、約５年ぶりにエンジニアとして復帰したのですが周りについていくのに必死で、浦島太郎状態ですが、これをキッカケに学んだことをアウトプットしていきたいと思います！ ここからが本題 さて、今回はちょっと前から気になっていたコマンドラインからブラウザの動作確認ができる「Headless Chrome」に関して書いていこうと思います。 「Headless Chrome」とは まず「Headless Chrome」とは通常はGUIを通してChromeを実行しますが、Headless Chromeはコマンドラインを通して実行します。つまりGUIを持た
Embed a button to share your Puppeteer script. The embed code below are designed to be used in README files, documentation sites, and anything that renders as an html file. You can also just share a link to this page. Markdown [](https://puppeteersandbox.com/) HTML <a href="https://puppeteersandbox.com/"><img src="https:/
inject と Headless Vue インスタンスを活用したリアクティブな認証管理 - ElevenBack LLC. Engineering
この記事は Nuxt.js アドベントカレンダー 24 日目の記事です。 ここ一年ほどほとんど Nuxt.js で Vue.js を単体で使うことがめっきり減った @potato4d です。 今回はニッチな話題として、「JavaScript の世界のオブジェクトに Vue.js のリアクティブ機構をもたせる」という話をしたいと思います。 なお、今回はややこしいコードベースを省く意味でも Nuxt.js 環境を前提とします。 実現したい要件 まずは実現したい要件を定義します。 今回は、現在弊社にて開発中の Web サービスのシステムをベースとして考案します。 Firebase Authentication を使ってユーザー情報をやりとりする データベースヘの取得・保存操作では、 Firebase 側のユーザーの uid を利用するためグローバルから認証情報にアクセスできてほしい できればその
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session.
この記事では、Seleniumでクローリング・スクレイピングを実践で安定稼働させるために行うべき設定を3つにまとめました。 待機処理 エラー内容を通知する 処理をリトライする ちゃんと設定すれば、不安定なSeleniumでも、安定して定期実行できるようになるでしょう…！ 厳しいことを言うと、苦労して作ったSeleniumテストが不安定だったら現場には無価値ですしね〜。 この記事にまとめた内容が活かされて、安定したクローリング・スクレイピングが行えるようになったら…と祈るばかりです。 待機処理 Seleniumを使用したクローリング・スクレイピングのプログラムを安定稼働させるために、まず設定して欲しい項目があります。 それは、Web Driverの待機処理を追加することです。 Seleniumのエラーの原因は、find_element_xxxメソッドで、指定した要素が見つからないことが95%
GitHub - Shopify/hydrogen: Hydrogen is Shopify’s stack for headless commerce. It provides a set of tools, utilities, and best-in-class examples for building dynamic and performant commerce applications. Hydrogen is designed to dovetail with Remix, Shopify
Hydrogen is Shopify’s stack for headless commerce. It provides a set of tools, utilities, and best-in-class examples for building dynamic and performant commerce applications. Hydrogen is designed to dovetail with Remix, Shopify’s full stack web framework, but it also provides a React library portable to other supporting frameworks. Demo store 👇🏼
Shopify’s headless stack that’s engineered for performance and productivity.
Chrome's Headless mode gets an upgrade: introducing --headless=new | Chromium | Chrome for Developers
Chrome's Headless mode just got a whole lot better! This article presents an overview of recent engineering efforts to make Headless more useful for developers by bringing Headless closer to Chrome's regular "headful" mode. Background Back in 2017, Chrome 59 introduced the so-called Headless mode, which lets you run the browser in an unattended environment without any visible UI. Essentially, runn
デジタルキューブがWordPressをテーマなしで使うCMS「Shifter Headless」の提供開始 | Web担当者Forum
オープンソースCMS(コンテンツ管理システム)事業のデジタルキューブは、新しいCMSサービス「Shifter Headless」をSaaS(サービスとしてのソフトウェア)として始めた、と4月14日に発表した。無料のCMSプログラムとして定評あるWordPressでコンテンツの入稿を管理し、サイトの見た目のデザイン(ヘッド)はWordPressと別のシステムを使う「Headless(ヘッドレス)CMS」を簡単に運用できる。 デジタルキューブは、無数にあるWordPressテーマ(サイトのデザイン)をそのまま使い、表示が速い静的サイトとして生成・運用する「Shifter」を2016年から提供し、約55の国と地域で利用されてきた。新サービスのShifter Headlessは、API経由でCMSのコンテンツデータを取得するが、サイトの描画などデザインや機能は最新のウェブアプリ技術の「Jamsta
Unity WebGL なゲームをNode.JS + jsdom + headless-glで動かしたかった - Qiita
えっ このネタ続くの。。？ 前回( Unity WebGLで使われているシェーダを抜き出してARBアセンブリを眺める )はWebGLビルドのUnityゲームをトレースして、使われているシェーダ命令があんまり多くないことを確認した。 ブラウザ上の動作では同期APIの実装に制約がありちょっと手を入れづらいため、Node.jsで動かしたかった。別案としてNW.jsを使うというのもあったが、今回の手法でもWebブラウザ側のDOMを使わないといけないところは一応クリアしている。 結果と手法 結局成功したんだか失敗したんだかよくわからないところまでは来たと思う。 結果 Node.jsでもUnity WebGLは起動して描画コマンドも発行する でも描画がまっくらなので、まだ描画が正常かどうかは確認できていない JSdomでWebAssemblyを使ったサイトがそのまま動くのは地味にすごい気はする。 手法
Headless CMS 軽く触って比較してみた(Contentful / microCMS / strapi / GraphCMS) - Qiita
Headless CMS 軽く触って比較してみた(Contentful / microCMS / strapi / GraphCMS)contentfulstrapiHeadlessCMSGraphCMSmicroCMS Blogを作ろう！ってなったものの、どのHeadless CMSを使えばいいか、全くわからなかったので、とりあえず調査しました。 はじめに この記事はあくまで自分がどのHeadless CMSを使ってblogを作るかを検討するための比較記事です。 欠けている機能説明等も多いと思いますが、ご了承ください。 HeadlessCMS比較記事は圧倒的に下記記事がわかりやすかったです。 4種類のHeadlessCMSを試してみた感想（wordpress/strapi/contentful/microCMS） 特徴 とにかく高機能、細かく設定できる、かゆいところに手が届く 無料枠 2
AWS Fargate使ってサーバーレスでSelenium+Headless Chromeを実行する - YOMON8.NET
この記事に行き着いた方でしたら、日々自動化を進めている中にも、ブラウザでのクリック、クリック、入力、クリック、みたいな作業が残っている人が多いと思います。 REST等でAPIが公開されていれば良いのですが、そういうAPIが提供されていないサービスもたくさんあります。 ブラウザの自動化でいつもお世話になっているSeleniumですが、一日数回の実行のためにサーバーを立てておくのももったいない。ということで、常時起動のサーバーを立てない方法としてFargateを使ってみることにしました。 やりたいこと シナリオ Dockerイメージ準備 プログラム ベースのイメージ Dockerイメージをビルド ECRへのデプロイ ECRログイン ECRにリポジトリ作成 ECRにイメージをデプロイ ECS(Fargate)へのタスク設定 CloudWatch Logsのグループ作成 クラスタ作成 タスク定義
GitHub - strapi/strapi: 🚀 Strapi is the leading open-source headless CMS. It’s 100% JavaScript, fully customizable and developer-first.
🚀 Strapi is the leading open-source headless CMS. It’s 100% JavaScript, fully customizable and developer-first.
参考 Installing from CLI インストール それでは、Strapiアプリケーションをローカル環境で実行してみたいと思います。 --quickstartオプションを指定すると SQLite データベースを利用した構成のアプリケーションがインストールされます。 yarn create strapi-app example-app --quickstart or npx create-strapi-app example-app --quickstart ご紹介したコマンド実行しアプリケーションをインストールします。正常にインストールが実行されると以下のログが表示されます。 success Installed "create-strapi-app@3.0.5" with binaries: - create-strapi-app Creating a new Strapi app
StrapiでHeadless CMS＋高速サイト制作を始めよう（インストール・使い方など導入解説） | 株式会社ウェブ企画パートナーズ
Strapiは話題のHeadless CMS Headless CMSとは？ Headless CMSは、コンテンツ管理などのバックエンド機能のみを提供するCMSです。 ユーザーに直接提示されるビュー＝フロントエンドを管理せず、APIを通してコンテンツを受け渡します。そのことで、フロントエンドの自由度が上がり、開発効率の向上も期待できます。 最新技術を用いたウェブサイトはもちろん、スマホアプリ、デジタルサイネージなど、様々なプラットフォームと連携させることが可能です。 Headless CMSについてはこちらの記事で詳しく説明しています。 Headless（ヘッドレス） CMSとは？ 代表的な１０のCMS比較！ Strapiのメリット Headless CMSの中で、近年注目を集めているのがStrapiです。 コーディングなしでも簡単＆高速にAPI開発が可能な、Node.jsベースのCMS
GitHub - TanStack/time: 🤖⏰ Headless utilities for building time and calendar components in TS/JS, React, Solid, Vue, Svelte and Angular
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
GitHub - drizzle-team/drizzle-orm: Headless TypeScript ORM with a head. Runs on Node, Bun and Deno. Lives on the Edge and yes, it's a JavaScript ORM too 😅
Drizzle is a modern TypeScript ORM developers wanna use in their next project. It is lightweight at only ~7.4kb minified+gzipped, it's tree shakeable with exactly 0 dependencies. Drizzle supports every PostgreSQL, MySQL and SQLite databases, including serverless ones like Turso, Neon, Xata, PlanetScale, Cloudflare D1, FlyIO LiteFS, Vercel Postgres, Supabase and AWS Data API. No bells and whistles,
Simplify your stack and build anything. Or everything.
デザイン部でフロントエンドエンジニアをしているkitoです。 近年のCMS界隈には、いわゆるHeadless化の波がきています。CMSのHeadless化とは、CMS(Content Management System)からクライアントサイドを切り離し、クライアントサイドのフレームワークでUIを構築するアーキテクチャです。 デカップルド・アーキテクチャと呼ばれることがあるようですが、サーバサイドとクライアントサイドがAPIを通じてコンテンツをやりとりすることで、Webアプリだけではなくてネイティブアプリからの要求にも適切に答えられるようになります。スケーリングに関しても、Headless CMSの方が取り回しが良いのではないでしょうか。 WordpressがWP REST APIを開発し、Headless化へと道筋をつけたことは特筆すべきです。WP REST APIの公式サイトでは、冒頭に
超簡単にAPIが作れる？Headless CMS “strapi” を触ってみる - Hivelocity (ハイベロシティ) デジタルでビジネスを最適化
HivelocityでフロントエンドエンジニアをしているHaradaです。 フロントエンド界隈では、シングルページアプリケーション（SPA）が盛り上がりを見せており、CMS構築においてもAPIファーストな考え方が主流となってきています。 そんななかコンテンツを管理するバックエンド側だけを提供する“Headless CMS”と呼ばれるツールがいろいろと出てきています。 今回は個人的に気になっていたstrapiを使って簡単なCMS機能を作ってみたいと思います。 正直、strapiについてすでに詳しく説明し尽くされた記事が多く出回っていると思います。 本記事は超初心者がやってみてつまづいた箇所などが追えるようになってはいると思いますが、すでにstrapiを使い倒している方は読み飛ばしていただければと思います。 strapiのセットアップ インストール https://strapi.io/ 早速、
サーバーレスな Headless CMS を自作して始める Jamstack - 病みつきエンジニアブログ
この記事は Jamstack Advent Calendar 2020 の 23 日目の記事です。 Jamstack なサイトのアーキテクチャ Jamstack の厳密な定義などは一旦置いといて、今回は、次のような構成のサイトについて考えます。あまりわかりやすい図ではないかと思うのですが、上段は非同期アクセス、下段はエンドユーザー(閲覧者)からのリアルタイムアクセスです。 Jamstack構成図 この構成はざっくりいうと、 データは「Headless CMS」と呼ばれる CMS で管理されており、エンドユーザーには見えない エンドユーザーは静的な HTML のみを閲覧する *1 なんらかの方法で、「静的な HTML」は非同期に動的更新される (Webhook や Incremental Static Regeneration など) といった特徴があります。Django や Rails な
A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Next.jsはReactを使ったアプリケーションフレームワークの1つです。Vercel, Incというホスティング会社を中心にOSSとして開発・公開されています。 事例もhuluやNIKE、Netflixなど数多く、Reactを使ってWebサイトを公開する際に選択されることの多いフレームワークの1つです。 この記事では、このNext.jsを用いてWordPressサイトのフロントエンドを構築する方法を紹介します。 完成イメージ すべてのソースコードを紹介することは大変です。そのため、サンプルサイトのソースコードをGitHubに用意しました。 このサイトのデータを利用してビルドした場合、以下のようなサイトが出来上がります。 Next.jsで「静的サイト」を構築する Next.jsでは2種類の方法でWebサイトを作ることができます。 Static Generation: ビルド時に静的なHT
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
AstroでWordPressを爆速Headless化してみる - Qiita
国産Headless CMS 「Micro CMS」を試してみた - Qiita
CSSを持たない Headless な UI ライブラリと ChatGPT によるマークアップ生成を試してみる
Headless UI v1.0 - Tailwind CSS
Faust.js + Headless WordPress + Vercel での Jamstack アーキテクチャでプレビューを実現する手順(カスタムポスト作成あり) - necco note | necco inc.
Plasmic - The headless page builder for your codebase
Headless（ヘッドレス） CMSとは？ 代表的な１０のCMS比較！ | 株式会社ウェブ企画パートナーズ
セマンティックレイヤー / Headless BIとは
Builder.io: Drag & Drop Headless CMS
Goでheadless browserを用いた動的画像生成｜Seiji Takahashi@ベースマキナ
「Google Chrome 85」のPDF印刷は障害者に優しく ～タグ付きPDFを標準化／「Chrome Headless」でも利用可能
WindowsとWSLでHeadless Chromeを使ってみよう！ - Qiita
Puppeteer Sandbox | Headless Chrome Playground
GitHub - rubycdp/ferrum: Headless Chrome Ruby API
Seleniumを安定稼働させるために行うべき３つの設定(Headlessモードにも対応)
Hydrogen: Shopify’s headless commerce framework
Headless CMS の Strapi を試してみた #strapi | DevelopersIO
Payload: The fastest growing open-source headless CMS
strapi+nuxt.jsでHeadless CMSの夜明けを感じる - astamuse Lab
GitHub - tinacms/tinacms: A headless CMS for Markdown
Next.jsを使った静的なHeadless WordPressサイトの作り方
pto6.hatenablog.com
womizu.hatenablog.com
shiyuzevo.hatenablog.com
www.aori.u-tokyo.ac.jp
www.nikkei.com
ayuichi27.blog.fc2.com