タグ検索の該当結果が少ないため、タイトル検索結果を表示しています。
最近流行りの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のダッシュボードを立ち上げ、いくつかの
Tailwind CSSチーム、GitHubスター数2.4万超のUIコンポーネント集「Headless UI」をメジャーアップデート
5月8日、Tailwind LabsはReact用の「Headless UI v2.0」をリリースした。 Headless UIとは、Tailwind CSSベースのUIコンポーネント集である。 Tailwind CSSチーム自身が開発を行っており、GitHubスター数も2.4万を超えるなど、高い人気を博している。 このアップデートは、開発者がより少ないコードでより良い開発体験を実現できるようにするための多数の改善を含んでいる。 主な更新点は以下の通りだ。 組み込みアンカーポジショニングのサポート 新しいチェックボックスコンポーネントの追加 HTMLフォームコンポーネントの拡充 状態検出の向上 コンボボックスリストの仮想化 新しいウェブサイトと改善されたドキュメント 組み込みアンカーポジショニングのサポート Floating UIがHeadless UIに直接統合され、Menu、Popov
Headless UI
Completely unstyled, fully accessible UI components, designed to integrate beautifully with Tailwind CSS.
Speaker : Yuito Kawashima ( https://github.com/yuitokawashima ) at 「Vue.js v-tokyo Meetup #20」 https://vuejs-meetup.connpass.com/event/318066/
いまさら気づいたけど 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
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コンポーネ
Rustでブラウザを操作する「rust-headless-chrome」を試してみた | DevelopersIO
こんにちは。MAD事業部のきんじょーです。 最近Rustの入門書を読んだので、何かに使ってみようと模索していました。 その中で、Rustでヘッドレスブラウザを動かすライブラリを検証したのでこの記事にまとめます。 ヘッドレスブラウザとは ヘッドレスブラウザはGUIを持たないWebブラウザです。 一般的なブラウザと同じく、HTMLを解析しJavaScriptを実行できますが、GUIを持たないため、CLIやプログラム上から操作を行います。 主に以下のような用途で用いられます。 WebアプリケーションのE2Eテストの自動化 Webページのスクリーンショット取得 JavaScriptの自動テスト Webページで行うワークフロー処理の自動化 Webページのクローリング 古くはPhantomJSやCasperJSなどを用いていましたが、現在では主要なブラウザもネイティブでヘッドレスモードを搭載しています
この記事は何 2023年、世間はLLMで大騒ぎですが、データの業界ではセマンティックレイヤー・Headless BIへの注目も高まっています。 これは、まだ国内では黎明期ともいえるそんな技術が、今後どんな存在となりうるのかを、筆者の個人的な解釈と妄想をもとに述べる長文ポエムです。 セマンティックレイヤーとは まず最初にセマンティックレイヤーについて解説します。 セマンティックレイヤーとは セマンティックレイヤーとは、データベースとデータ利用者の間に入り、両者間のやりとりを円滑にする存在です。 データ統合プラットフォームを提供するAirbyte社は、セマンティックレイヤーをデータとビジネスユーザーの中間に位置する、複雑なデータを理解可能なビジネスの概念に変換・翻訳するレイヤーと説明しています。 A semantic layer is a translation layer that sits
↓動画でも解説しています。 Headless CMSとは？ 近年、目にする機会が増えた「Headless CMS」という単語。この記事では、Headless CMS、関連技術、人気のサービスなど、導入に向けた基礎知識をご紹介していきます。導入のためのイメージ作りになれば幸いです。 キーワード1：CMS（Content Manegement System） CMS（Content Manegement System）は、コンテンツ、ファイル、ワークフロー、リポジトリなどの情報を管理・公開するシステム。身近なところでは、WEBメディアの記事、企業サイトの各ページ、ECサイトの商品情報などの管理・公開など幅広く使われています。 画像などのファイルや、投稿の変更履歴、権限の管理など、様々な機能を技術者でなくても利用できるのが特徴です。 CMSを代表するのがWordpress。 2003年にリリース
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
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
はじめに 今回、はじめてアドベントカレンダーなるものに参加することになりました松原です。 よろしくお願いします！ まずは簡単に自己紹介 沖縄のIT企業でリゾートウェディングやマリンスポーツ＆アクティビティのポータルサイトの運用をしています。 色々とあって今年、約５年ぶりにエンジニアとして復帰したのですが周りについていくのに必死で、浦島太郎状態ですが、これをキッカケに学んだことをアウトプットしていきたいと思います！ ここからが本題 さて、今回はちょっと前から気になっていたコマンドラインからブラウザの動作確認ができる「Headless Chrome」に関して書いていこうと思います。 「Headless Chrome」とは まず「Headless Chrome」とは通常はGUIを通してChromeを実行しますが、Headless Chromeはコマンドラインを通して実行します。つまりGUIを持た
inject と Headless Vue インスタンスを活用したリアクティブな認証管理 - ElevenBack LLC. Engineering
この記事は Nuxt.js アドベントカレンダー 24 日目の記事です。 ここ一年ほどほとんど Nuxt.js で Vue.js を単体で使うことがめっきり減った @potato4d です。 今回はニッチな話題として、「JavaScript の世界のオブジェクトに Vue.js のリアクティブ機構をもたせる」という話をしたいと思います。 なお、今回はややこしいコードベースを省く意味でも Nuxt.js 環境を前提とします。 実現したい要件 まずは実現したい要件を定義します。 今回は、現在弊社にて開発中の Web サービスのシステムをベースとして考案します。 Firebase Authentication を使ってユーザー情報をやりとりする データベースヘの取得・保存操作では、 Firebase 側のユーザーの uid を利用するためグローバルから認証情報にアクセスできてほしい できればその
この記事では、Seleniumでクローリング・スクレイピングを実践で安定稼働させるために行うべき設定を3つにまとめました。 待機処理 エラー内容を通知する 処理をリトライする ちゃんと設定すれば、不安定なSeleniumでも、安定して定期実行できるようになるでしょう…！ 厳しいことを言うと、苦労して作ったSeleniumテストが不安定だったら現場には無価値ですしね〜。 この記事にまとめた内容が活かされて、安定したクローリング・スクレイピングが行えるようになったら…と祈るばかりです。 待機処理 Seleniumを使用したクローリング・スクレイピングのプログラムを安定稼働させるために、まず設定して欲しい項目があります。 それは、Web Driverの待機処理を追加することです。 Seleniumのエラーの原因は、find_element_xxxメソッドで、指定した要素が見つからないことが95%
GitHub - andyk/ht: headless terminal - wrap any binary with a terminal interface for easy programmatic access.
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 - Shopify/hydrogen: Hydrogen lets you build faster headless storefronts in less time, on Shopify.
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
Shopify’s headless stack that’s engineered for performance and productivity.
Chrome Headless mode | Chromium | Chrome for Developers
In 2017, Chrome 59 introduced Headless mode, which let you run the browser in an unattended environment, without any visible UI. Essentially, you could run Chrome without chrome. Headless mode is a popular choice for browser automation, through projects like Puppeteer or ChromeDriver. Here's a minimal command-line example using Headless mode to create a PDF file of a given URL: chrome --headless -
デジタルキューブが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
参考 Installing from CLI インストール それでは、Strapiアプリケーションをローカル環境で実行してみたいと思います。 --quickstartオプションを指定すると SQLite データベースを利用した構成のアプリケーションがインストールされます。 yarn create strapi-app example-app --quickstart or npx create-strapi-app example-app --quickstart ご紹介したコマンド実行しアプリケーションをインストールします。正常にインストールが実行されると以下のログが表示されます。 success Installed "[email protected]" with binaries: - create-strapi-app Creating a new Strapi app
Simplify your stack and build anything. Or everything.
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 😅
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
サーバーレスな Headless CMS を自作して始める Jamstack - 病みつきエンジニアブログ
この記事は Jamstack Advent Calendar 2020 の 23 日目の記事です。 Jamstack なサイトのアーキテクチャ Jamstack の厳密な定義などは一旦置いといて、今回は、次のような構成のサイトについて考えます。あまりわかりやすい図ではないかと思うのですが、上段は非同期アクセス、下段はエンドユーザー(閲覧者)からのリアルタイムアクセスです。 Jamstack構成図 この構成はざっくりいうと、 データは「Headless CMS」と呼ばれる CMS で管理されており、エンドユーザーには見えない エンドユーザーは静的な HTML のみを閲覧する *1 なんらかの方法で、「静的な HTML」は非同期に動的更新される (Webhook や Incremental Static Regeneration など) といった特徴があります。Django や Rails な
GitHub - payloadcms/payload: The best way to build a modern backend + admin UI. No black magic, all TypeScript, and fully open-source, Payload is both an app framework and a headless CMS.
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
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
GitHub - chakra-ui/ark: A headless library for building reusable, scalable design systems that works for a wide range of JS frameworks.
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
とよももです！ お仕事でHeadlessCMSのstrapiを触る機会がありました。情報が少なくて苦労したので、誰かの助けになる様にまとめたいと思います。 ちなみにvue + strapiでアプリを作ってみました。axiosでgraphqlを使いたい方など、参考に見てみてください。 ・レポジトリ Strapiでの認証方法記事も書きました。 ・Strapiに認証機能を追加する（特定のユーザしかAPIが呼べない仕様に変更する） 事前知識 CMSとは CMSとは、Contents Management Systemの略です。CSSやHTMLなどのWEBサイトを構築するための専門的な知識を持っていなくてもWEBサイトやコンテンツを構築し、管理ができるシステムです。 最も代表的なCMSは「WordPress」。「はてなブログ」や「Qiita」、「Note」もCMSです。 CMSを使うことで、簡単にW
とある理由から、スクレイピングした結果をDBに保存する処理を定期実行させる簡単なプロダクトを作りたくなった為、AWS Lambda上でSelenium + Headless ChromeをPythonで動かす為の基盤作成を行った際の記録です。 作業時に部分的に参考になる資料は沢山あったものの、事前準備から始まり、Lambdaをどう作るかの作成部分、Lambdaからスクレイピングを実施する為のコード内記述、実行後に多くのケースでハマるポイントへの対処などなど、通しで書かれた内容が少なかった事もあり、振り返りの意味も含めて一度まとめてみます。 やりたいこと 冒頭にも書いたとおり、スクレイピングした結果をDBに保存する処理を定期実行させる簡単なプロダクトを作る為の実行基盤を作るのが目的です。 何故AWS Lambda上で動かす必要があったのか スクレイピング処理をLambda上で実行させる理由は
WordPressのの認証方法はいくつかありますが今回はクッキー認証を前提に解説を進めていきます。クッキー認証はWordPressの管理画面とプレビュー画面のURLが同一である必要でありますので注意してください。 異なるURLでも対応可能なアプリケーションパスワード認証はApp Routerでの表示と合わせて解説しておりますので必要な方はそちらを参考にしてください。。 Next.js(App Router)でWordPressのプレビュー機能を実装する – to-R Media まずは/preview/index.jsx というプレビュー用のページを作成します。プレビュー用のページではAjaxを利用してWordPressのRest APIよりプレビュー用のデータを取得します。 const Preview = () => { if (typeof window === 'undefined'
Chrome Remote Desktopで、Headless HostのWindows Serverでも1920x1080で使う方法 - orangeitems’s diary
はじめに 「Chrome Remote Desktopで、Headless HostのWindows Serverでも1920x1080で使う方法」と書いてピンと来る人は少ないと思うのだが、多分世界で初めての記事なので書いておく。Qiitaでも良さそうな話だけども。 目的 Google Remote Desktopは超便利です。だってリモートデスクトップのようにポート（3389/TCP）を外部にオープンにしなくても使える。VPNもいらない。Googleアカウントさえあれば、Chromeブラウザからリモートのホストにログインできる。 で、クラウド上のWindows ServerでGoogle Remote Desktop使った人ならわかると思いますが、クラウド上のOSは物理モニターとつながっていません。だから、つなげると解像度が強制的に1024 x 768になってしまう。 これを、強制的に1
はじめに この記事は、Go言語でヘッドレスブラウザを実装したサーバ（サーバレスなので実際にはコンテナという表現が正しいかも知れません）を作り、Google Cloud Platform (GCP) の Cloud Run (Knative を使用) でセキュアに実行する内容となります。 ハンズオンではありませんが、少し手を加えれば動くものが作れるレベルの資料としています。 一応、なるべく幅広い読者層に分かりやすく伝えるため、人によって冗長的な説明に感じるところもあると思います。その場合は本題に入る「Go で ヘッドレスブラウザ を実装したサーバを用意するの」 の章から読み進めて下さい。 Goals Go で CSR (Client Side Rendering / クライアントサイドレンダリング) に対応する方法が知れる たとえば CSR 対応のテストやスクレイピングなどの環境を作る知識が
Create fast and scalable APIs effortlessly using your Drizzle Schemas, and deploy it on the edge with Hono. Built on top of Hono, Drizzle, Zod, and Vite. HonoHub is currently in the "alpha stage". Breaking changes are introduced without following semantic versioning.
Pyppeteer(with headless Chromium) + GitHub Actionsでoptuna-dashboardの継続的E2Eテスト - c-bata web
以前 optuna-dashboard というWebツールを開発・公開しました。 もともと Goptuna のために実装したReact.js + TypeScript製のSPAのWebツールでしたが、Optunaでも使えるようにしたところ、周りでも使ってるよという声をいただくことが増えてきて、公式に利用が推奨されるようになりました。 Optuna v2.7.0 released, with new tutorials, examples, and code improvements! @c_bata_ has fully redesigned the dashboard. Try out the new version with `pip install optuna-dashboard` and then `optuna-dashboard $STORAGE_URL`!https://t
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
AstroでWordPressを爆速Headless化してみる - Qiita
HeadlessなUIライブラリを利用する価値
CSSを持たない Headless な UI ライブラリと ChatGPT によるマークアップ生成を試してみる
Headless UI v1.0 - Tailwind CSS
Faust.js + Headless WordPress + Vercel での Jamstack アーキテクチャでプレビューを実現する手順(カスタムポスト作成あり) - necco note | necco inc.
セマンティックレイヤー / Headless BIとは
Headless（ヘッドレス） CMSとは？ 代表的な１０のCMS比較！ | 株式会社ウェブ企画パートナーズ
「Google Chrome 85」のPDF印刷は障害者に優しく ～タグ付きPDFを標準化／「Chrome Headless」でも利用可能
WindowsとWSLでHeadless Chromeを使ってみよう！ - Qiita
Seleniumを安定稼働させるために行うべき３つの設定(Headlessモードにも対応)
Hydrogen: Shopify’s headless commerce framework
Headless CMS の Strapi を試してみた #strapi | DevelopersIO
Payload: The fastest growing open-source headless CMS
Next.jsを使った静的なHeadless WordPressサイトの作り方
Strapi (Headless CMS)を使ってみたので使い方まとめ + GraphQL - Qiita
AWS Lambda(Python)でSelenium + Headless Chromeの実行
headless WordPressを利用したNext.jsのプレビューをVercelを使わずに実現する
GoでHeadless browserを使いClient Side Renderingを Cloud Run で動かす
HonoHub - Open Source Honojs Headless CMS
l.smartnews.com
www.watto.nagoya
ushidayo3.hatenablog.com
digital-trend.reinforz.co.jp
newsdig.tbs.co.jp
www.sanyonews.jp