Vue.jsでSSGをする方法を探していたら、Gridsomeという素晴らしいフレームワークを見つけたので、紹介します。 Gridsomeとは？ Gridsomeの特徴は、Jamstackなフレームワークであり、すべてのデータソースに対してGraphQLを使ってアクセスできるところにあります。 たとえば、APIやMarkdownで書かれたファイルなんかをデータソースとして扱い、GraphQLを使ってアクセスできるという事です。このあたりは別途、下で解説します。 あと、プリレンダリングでHTMLを事前に生成しておくので（つまり、SSGなので）、「SEO」にも強い。 私個人の感想としては、GraphQLは人類には早すぎたものだと思っていました。 しかし、いざ使ってみるとこんなに便利なんだ・・・と、考えを改めるほど素晴らしいフレームワークだと感じました。 プロジェクトを作成して起動してみる np
Eleventy（11ty）で洗練された静的サイトを作成する方法
Eleventyを始めとする静的サイトジェネレーター（SSG）の登場により、これまで以上に簡単に、スタイリッシュで効率的な静的サイトを作成できるようになりました。 この記事では、Eleventyの使い方をご紹介し、サーバーサイド言語やデータベースを使わずに、魅力的で機能的な静的ポートフォリオサイトを作成していきます。 また、静的サイトをGitHubリポジトリから、Kinstaの静的サイトホスティングサービスに直接デプロイし、無料で利用できる「.kinsta.page」ドメインで素早くサイトを公開する方法も見ていきます。 Eleventyで構築した静的ポートフォリオサイトのデモはこちらでご覧いただけます。 クールな印象の静的ポートフォリオサイト より詳しい情報については、GitHubリポジトリを参照してください。 Eleventyとは Eleventyは「11ty」としても知られる静的サイト
このサイトについて
Introすべての人が等しく情報を受け取れるためにAccessible Website Galleryをご覧いただきありがとうございます！当サイトは、ウェブアクセシビリティに配慮し、私たちが素敵だと思ったWebデザインをご紹介するギャラリーサイトです。公共機関などと同様にWebデザインにもユニバーサルデザインがあたりまえの社会が少しでも早く訪れることを支援するために私たちは当サイトを運営しています。 Twitter 01.サイト掲載について当サイトでは、アクセシビリティとデザインの両観点において編集部が選定したサイトだけでなく、サイト訪問者の皆さまが推薦して下さったサイトについても掲載いたします。（掲載につきましては編集部にて検討させていただきますので、推薦いただいたサイト全てを掲載できるわけではございませんので予めご了承ください🙇） 掲載基準デザイン及びコードについては機械的な掲載審査
この記事は何 先日、何年かぶりに静的サイトジェネレーターの一つ「hugo」でwebサイトを構築する機会がありました。 その際に知人たちに色々聞かれたり、自分でもhugoの覚え直しが必要になったので、2024/03現時点までの備忘録として紹介記事とテーマ作成までのチュートリアル記事を投稿させていただきます。誰かのお役に立てば幸い。 本稿ではhugoの紹介と使い方、自作テーマの入り口のあたりまでご紹介します。 個人の感想多めでお送りしておりますがご容赦ください。 使用した環境 macOS Sonoma 14.4.1（23E224） Mac mini 2018モデル hugoバージョン 対象読者 静的サイト生成に興味がある人 コマンドライン怖くない人 gitコマンドが使えること いきなりgo言語のhtml/template構文が出てきても泣かない人 hugo is 何 人気の高いSSG = St
公式 github SurrealDBとは？ （公式より） SurrealDBは、ウェブ、モバイル、サーバーレス、Jamstack、バックエンド、従来のアプリケーションなど、モダンなアプリケーション向けに設計されたエンドツーエンドのクラウドネイティブデータベースです。 SurrealDBを使用することで、データベースとAPIインフラストラクチャを簡素化し、開発時間を短縮し、安全でパフォーマンスの高いアプリケーションを迅速かつコスト効率よく構築することができます。 特質すべき機能（公式より） 開発時間の短縮SurrealDB は、ほとんどのサーバーサイドのコンポーネントを不要にすることで、データベースと API スタックを簡素化し、安全でパフォーマンスの高いアプリケーションをより早く、より安く構築できるようにします。 リアルタイムに連携する API バックエンドサービスSurrealDB は
Next.js対応の海外のヘッドレスCMS比較5選 - 株式会社コムテは、Jamstack専門の Web制作会社です。Next.js を用いたWebアプリケーション開発を行っています。
Next.js対応の海外のヘッドレスCMS比較5選2023-05-10Next.jsTypeScriptHeadless CMSHOME > ブログ一覧 > Next.js対応の海外のヘッドレスCMS比較5選 ヘッドレス CMS とは ヘッドレス CMS（Content Management System）とは、従来の CMS とは異なり、フロントエンド（表示部分）とバックエンド（データ管理部分）が切り離された設計の CMS です。これにより、コンテンツの管理と表示が独立して行われるため、柔軟な開発が可能になります。 従来の CMS では、テンプレートエンジンやプラグインを使ってデザインや機能を追加・変更していましたが、ヘッドレス CMS では API を通じてデータを取得・送信することで、フロントエンドとバックエンドを自由に組み合わせることができます。これにより、ウェブサイト、モバイルア
この記事は「株式会社メンバーズ Jamstack研究会主催 Advent Calendar2023」の5日目の記事です。 4日目の「JamstackでWebサイトを脱炭素化しよう」に続いて、5日目はAstroとMarkdownが題材です。 6日目の記事は「記事をスクレイピングしてmicroCMSに移行してみた」 です。 他の記事もぜひご覧ください！ はじめにAstroはpagesディレクトリにあるMarkdownファイルをページとして扱うことができます。 会社に提出用のポートフォリオを作成することになり、Astro + microCMSで作れないか考えていたところ、microCMSを使う前段階としてMarkdownで簡易的なポートフォリオが作れそうと思い立ち、今回私自身の初めてのポートフォリオをAstroとMarkdownで制作していきます。 Astroのプロジェクトを作成▼環境 Node
静的サイトジェネレーターと Jamstack によくある 5 つの誤解
今回は静的サイトジェネレーターと Jamstack についてのよくある誤解についてお話しします。 いまウェブサイトの管理手法として「 Jamstack 」（ジャムスタック）が注目を集めています。 日本ではまだイノベーション理論でいうところのイノベーターとアーリーアダプターあたりまでの利用に留まっている感じですが、今のトレンドが続けば数年以内にアーリーマージョリティにも普及し、現在主流の動的 CMS と並んでウェブサイト管理の代表的な手法のひとつになっていくものと思います。 ただ、 Jamstack トレンドの中心的存在である「 JavaScript ベースの静的サイトジェネレーター」が国内ではまだ相対的にマイナーなこともあり、ビジネスにおける静的サイトジェネレーターと Jamstack の評価・活用が十分に進んでいるとはいえない状況です。 私が観測するかぎりでは、 Jamstack をすで
現在いるセルのURLを叩いてレスポンスを右側に格納する[GAS/Google Apps Script]書いた - Qiita
はじめに いい感じのスクリプト書いたので忘れないように投稿しておく。 イメージ コード fetchするURLは https://httpbin.org/get gasのコードはこんな感じ function fetchApi() { const ss = SpreadsheetApp.getActiveSpreadsheet(); const sheet = ss.getActiveSheet(); const cell = sheet.getCurrentCell(); const [col, row, url] = [cell.getColumn(), cell.getRow(), cell.getValue()]; const res = UrlFetchApp.fetch(url); const result = res.getContentText(); const code =
![現在いるセルのURLを叩いてレスポンスを右側に格納する[GAS/Google Apps Script]書いた - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/ba4d0bb57bb8e0cf3b06e1b75d5cde0be9c3c4b4/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-9f5428127621718a910c8b63951390ad.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZoPTMzNiZ0eHQ9JUU3JThGJUJFJUU1JTlDJUE4JUUzJTgxJTg0JUUzJTgyJThCJUUzJTgyJUJCJUUzJTgzJUFCJUUzJTgxJUFFVVJMJUUzJTgyJTkyJUU1JThGJUE5JUUzJTgxJTg0JUUzJTgxJUE2JUUzJTgzJUFDJUUzJTgyJUI5JUUzJTgzJTlEJUUzJTgzJUIzJUUzJTgyJUI5JUUzJTgyJTkyJUU1JThGJUIzJUU1JTgxJUI0JUUzJTgxJUFCJUU2JUEwJUJDJUU3JUI0JThEJUUzJTgxJTk5JUUzJTgyJThCJTVCR0FTJTJGR29vZ2xlJTIwQXBwcyUyMFNjcmlwdCU1RCVFNiU5QiVCOCVFMyU4MSU4NCVFMyU4MSU5RiZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnR4dC1jbGlwPWVsbGlwc2lzJnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9YjdhNzViZjcwOTIzMWY0OTQ5ODE3MTcyZjliNjc5NTc%26mark-x%3D142%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTYxNiZ0eHQ9JTQweWtoaXJhbyZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTM2JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9MzJmYjQxZjhhOGNjYjYxZjdhZDg2NjNjMDI1OTgzMTk%26blend-x%3D142%26blend-y%3D491%26blend-mode%3Dnormal%26s%3D42b041766cf32588477f656d0c91f16a)
自ブログからの引用です。 こんにちわ！ 本記事は2021年度の「株式会社カケハシ x TypeScript」アドベントカレンダーの3日目の記事として執筆いたしました。 概要 最近 0=>1 から開発に取り組んでいるプロダクトのフロントエンドで esbuild + React(TS) を利用した開発環境を選定しており、タイトルが若干盛っていることはさておき、リリースから少し時間もたったので、一度振り返って見たいと思います。 尚、今回ご紹介する開発環境はサンプルレポジトリ esbuild-dev-environment-sample を作成しましたので、適宜ご参照ください。 esbuildとは? この記事を見ている方はすでにご存知の通り、Webpackの100倍早いバンドラと謳われています。 その威力に関しては以前 ブログ に書きましたので、ご参考いただけると幸いです。 もしまだ esbuil
Jamstackとは？基礎知識から構築方法までどこよりもわかりやすく解説！｜JamJam(ジャムジャム)｜Jamstack特化メディア
昨今、流行を見せているJamstack。Webのパフォーマンスやセキュリティを高める方法としてスタートアップから大企業まで大きな注目を集めています。今回は、そんなJamstackにつてわかりやすく解説します。WordPressとの違いや、メリットデメリットを知りたい方はぜひご覧ください。 JamJam(ジャムジャム)は最新のWeb制作手法であるJamstackやヘッドレスCMSに関する基礎知識や最新情報から、開発や実装に関する技術的情報まで、お役立ち情報を提供するWebメディアです。
Astro + microCMS + Cloudflare Pagesでモダンブログを無料で作る方法｜東京のWEB制作会社・ホームページ制作会社｜株式会社GIG
Astro + microCMS + Cloudflare Pagesでモダンブログを無料で作る方法｜東京のWEB制作会社・ホームページ制作会社｜株式会社GIG こんにちは、株式会社GIG広報の北村（ゆうゆう）です。GIGでは毎月さまざまなテーマで勉強会を開催しています。 今回は庄子肇さんに、「Astro + microCMS + Cloudflare Pages でモダンブログを無料で作る方法」をテーマにお話いただきました。以下でその内容をくわしくご紹介します。 ■登壇者プロフィール 庄子 肇（しょうじ はじめ）：バックエンドエンジニア。宮城大学事業構想学部デザイン情報学科を卒業後、ベンチャー企業でエンジニアとして常駐先のシステム開発やサイト制作の経験を積んだのち、2019年10月にGIGにジョイン。 Astroとは 「Astro」とは、一言でいうと「スピードのために設計されたオールイン
2009年、JavaScriptの会社として株式会社ピクセルグリッドを設立。 多数のWebリニューアル、新規立ち上げを取り仕切った経験を持ち、情報設計、フロントエンド、クラウド活用、開発フローの効率化を得意とする。 Webをより発展させるため、新しくブラウザに実装された機能の活用事例を数多く生み出しつつ、日々、クラウドサービスを利用した効率のよい制作・開発手法の試行錯誤を続けている。現在の興味はWeb Componentsを使ったマークアップの改善とJamstack。 著書に『WebクリエイティブのためのDOM Scripting』（単著：毎日コミュニケーションズ、2007年）など。ここ数年は書籍の執筆をせず、フロントエンド技術情報メディア「CodeGrid」で精力的に執筆活動を行っている。
Documentary of 「Web大好きフロントエンドエンジニアが、インタラクティブエンジニアの第一歩を踏み出すまで」｜Think & Craft
Documentary of 「Web大好きフロントエンドエンジニアが、インタラクティブエンジニアの第一歩を踏み出すまで」 「インタラクティブコンテンツを実装できるエンジニアになりたいです！」 2020年3月。弊社Think & Craft（当時Dentsu Craft Tokyo）の中途面接で、純粋無垢な目をキラキラ輝かせながら熱く語りました。 晴れて採用された僕は、まずWebGLを勉強して、Three.jsやBabylon.jsを駆使した演出のある3Dサイト実装が（すこーし）できるようになった。WebARも勉強して、8thwallでARコンテンツを実装できるようにもなった。フレームワークはVue.jsしか使えなかったけど、Reactも勉強して、Next.jsで複雑なWebアプリも作れるようになった。JAMstack構成のサイトも作れるようになった。 もちろん課題はある。アクセシビリティ
ヘッドレスCMSの使い分け (3ページ目)
7:05 質問者 Next.js みたいなイケイケなものを使ったほうが流行に敏感なエンジニアを採用できるんじゃないか、なんで PHP にしたんだっていう、もう盛り上がってたんですけれども、その点についてはどう思われますか？ 7:26 回答者 デジタル庁のホームページでしょ、別にそんな最先端の技術を使う必要もないよね、思わん？それは普通のサイトや。（質問者: 思います笑）なんかさ世界に１つだけしかないなんかもう最先端ものを作って言うときに原始時代の道具で作ってたらあかんけどさ別に普通にほんま世界に何千何億とあるさサイトの１つを作るのに別にそこに古典的も最先端もないんじゃないかなって思う 7:50 質問者 とにかく見れたらそれでいいですよね 7:54 回答者 特にまあデジタル庁なんて観光庁（注釈: 官公庁の誤記でしょうか。デジタル庁は内閣に直属の組織になります。リンク）やからさ別に重要なデータ
こんにちは、「Drupalの開発・導入支援・保守管理サービス KAIZEN 」 をご提供するANNAIです。 このポストは Drupal プロジェクトの創始者およびリードであるドリース・バイテルトによる最新のブログポストの翻訳です。ここでドリースは、MACH や Jamstack のような比較的新しいアーキテクチャが、Drupal のような従来型の CMS と同じような形態に「進化」しているという見解を幾つかの例と共に示しています。 また Drupal のモジュラーなアーキテクチャーにも触れ、同 CMS がモノリシックであるという批判が的を射ていないことについても説明し、これらのアーキテクチャーの特性や長所・短所についての冷静な分析を添えた上で、テクノロジーを評価する際にはアーキテクチャーに惑わされず、何を基準にすべきかについて語っています。 Jamstack、MACH、また Drupal
Amplify + Next.js + microCMSのプレビュー環境について - yasutomogのブログ
概要 株式会社トライビート｜ TRIBEAT CO., LTD. では、数年前からJamstackなWebサイトやECサイトの構築を推進（提案）しており、年々こういったご相談を受けることが増えています。 選定技術はそのときの顧客要件によって変わりますが、Amplify、Next.js、microCMSを使うことが多いです。Jamstackな構成を検討していると、SSGしてファイル生成する都合上、プレビュー機能をどうする？って課題に当たります。Headless CMSで下書きしたとき（公開前）に、Webページとしてどう見えるかを確認するユースケースですね。 アーキテクチャ的にSSGしたものをCDNでホスティングすることで、「高速化、スケーラビリティ、セキュア」を担保する一方で、リアルタイムな表示は工夫が必要になります。プレビュー用のページもSSGすれば確認可能ではありますが、ビルドには大抵数
個人開発でWebサービスを作るにあたり、CloudflareやHonoなど普段の業務では縁のない技術を試してみた。 CRUD操作ができるところまでをまとめてみる。 Cloudflare Pagesとは Cloudflare社が提供するJAMstackプラットフォーム。 Freeプランで月500回までビルド可能、bandwidthが無制限と無料枠が充実しているのが特徴。 (Next.jsのホスティングといえばVercelだけど商用利用で$20/月は個人だと痛手。。) Honoとは 軽量かつ高速なWebフレームワーク。 Cloudflare Pages/Workersと親和性が高いExpress的なイメージ。 技術構成 CLI: wrangler2 Hosting: Cloudflare Pages + Functions(サーバー処理) FW: Next.js(App Router), Ho
7月にリニューアルしたACTANT FORESTのウェブサイトでは、デジタル・サステナビリティに配慮したサイト設計を行っています。情報の視認性やアクセス性を保ちながら、サイト訪問時のエネルギー使用量とCO2排出量をできるだけ低減しようと様々な選択肢を検討した結果、このようなシンプルなUIのウェブサイトに行きつきました。 サイトに搭載しているCO2計測サイト「Website Carbon Calcurator」によると、ローンチ時点での排出量は、1訪問あたり0.02gとなっており、同サイトでテストされたウェブサイトの平均値0.5を大きく下回っています。 ビジュアルに趣向を凝らしたウェブデザインはもちろん魅力的ですが、CO2のような環境負荷と引き換えにできるかという視点に立つと、これまでウェブサイトの「良さ」や「美しさ」だと思っていたものの基準もまた変わってきます。本記事では、こうした取り組み
企業のTechポータルをApp Runnerで？？ KDDI Engineer Portalの使用技術とサービス構成の全容
企業のTechポータルをApp Runnerで？？ KDDI Engineer Portalの使用技術とサービス構成の全容 概要 社内/社外に公開されたKDDI Engineer Portal。 リリースまでに陥った事や、アーキテクチャの選定などについてまとめつつ、 SSR/SSG/ISRをAWSで動かす方法やApp Runnerの魅力、App RunnerにおけるBule/Greenデプロイの方法について紹介します。 内容 モダンなWebアプリケーション SSR/SSG/ISRをAWSでホストする方法 社内/社外のサイト構築 (KDDI Engineer Portal) App Runner周りのお話 技術以外で大変だったよ、こんなとこ KDDI Engineer Portalとは・・？ KDDIエンジニアによる情報発信ポータルサイト 業務としてKDDIエンジニアの文化や雰囲気を社内外の
初めまして、2024年3月にちょっと株式会社に入社した安田です。 入社して1ヶ月ほど経ったなかでの経験談をまとめています。 この入社エントリ記事でちょっと社のことにもっと興味が持てたり、一緒にお仕事をするきっかけになったら嬉しいです！ 自己紹介 20代の頃は地元の書店や工場で働いていました。 コーディングを始めたのは20代半ばくらいでした。iPhoneをはじめとした個人ブログ全盛期で、iPhoneやMacの面白さに気づいて、レンタルサーバーを借りてWordPressでブログを作ったのが始まりです。AppBankなどのオフ会にもよく参加していてカメラマンをやったりしていました。 29歳のときに「CSS設計の教科書」という書籍に出会い転職を決意。知り合いにフリーランスのエンジニアがいたのでNode.jsの環境構築を手伝ってもらったり、転職支援を目的にデジタルハリウッドに週末通いしながら、30歳
いわゆるJamstack+ちょっとしたSPA的なものを触る必要があり、Elmの書き味でいけるならいってみたいなあと思い、elm-pages v3でかなり展望が開ける感じだったので、今の感動を書き留めてみます。 ちょうどよく時期なので、Elm Advent Calendar 2022の11日目の記事とさせてください。 elm-pages v3は、現時点でβ版であり 私自身も完全にキャッチアップはできていない状態のため、誤りや今後破壊的変更も十分にあり得ることをご注意ください。 elm-pages v3は、とても最先端のつくりをしており、不安もある一方で、とっても便利で刺激的なものになっているので、たくさん触ってフィードバックする人が増えると僕や他の使っている人も作者のdillonkearnsさんもきっと喜ぶ上 最高の開発体験が得られると思うので、開発者人口を増えることを願って、この記事を執筆
はじめに こんにちは！株式会社Rivine のつかもとです！ 普段はエンジニアとして、主にフルリモートの開発支援案件に従事しながら Rivine の取締役としても日々粛々と働いております。 前回の記事では、 Hugo のブログ開発について執筆しましたが、 今回は、弊社ホームページの利用技術でもある 「Cloudflare Pages」 を使って ハンズオン形式にて、前回の記事で作成した Hugo のブログを公開してみたいと思います。 ※ 本記事タイトルの「5分もあれば十分だ」という表現について ※ 5分もあれば十分だ という少しネタを交えた表現をしておりますが、トータルの作業時間については、各開発環境やネットワーク環境、作業スピードによって変動するかと思います。 あくまで、筆者が本記事の手順を滞りなく、スムーズに作業した上での 目安時間 だとご認識いただけますと幸いです。 今回公開するブロ
Astro 3.0で導入されたView Transitionsを使って、Astroで作ったブログをカスタマイズしてみた｜大西 薫
Astro 3.0で導入されたView Transitionsを使って、Astroで作ったブログをカスタマイズしてみた この記事は「株式会社メンバーズ Jamstack研究会主催 Advent Calendar 2023」の7日目の記事です。 はじめにAstro 3.0ではページ間のシームレスなアニメーションを可能にするView Transitionsがサポートされました。 これまでページ間の遷移アニメーションはシングルページアプリケーション(SPA)でのみ実装可能でしたが、Astro 3.0ではView Transitions APIを利用しシンプルかつ簡単にページ遷移アニメーションが実装できるようになりました。 View Transitions APIについてはMDNもしくはこちらの記事が非常に参考になります。 本記事ではAstro公式ドキュメントのView Transitionsを参
画像を別の形式に変換するクソアプリ - Qiita
クソアプリ Advent Calendar 2023 1日目の記事です。 アドベントカレンダーの記事投稿を終わらせた俺にかわせない攻撃は無い 前置き おはようございます。DE-TEIUです。 冬の季語でおなじみのクソアプリアドベントカレンダーの時間です。 過去にアドベントカレンダー用に作ったクソアプリ p5.jsで作ったダメなソリティア 絶対に作業できない作業用BGMサイト 社会に一石を投じるクソアプリ開発 鼻毛が生えるカメラアプリ 映画館のスクリーンでYouTubeが見られるクソアプリ 電卓の成長を体験できるクソアプリ JamstackだけどJamstackじゃないクソアプリ 画像ファイルを別の形式に変換するアプリって色々あるじゃないですか。 何か適当な画像ファイルを渡すと、以下の形式に変換して出力する、みたいなやつ。 jpg png gif webp tif etc... ちょっと軽く
You can read about these vulnerabilities in English at https://ec0.io/post/hacking-cloudflare-pages-part-2/ 免責事項Cloudflareは、HackerOne上で脆弱性報奨金制度(Bug Bounty)を実施しており、脆弱性の診断行為を許可しています。 本記事は、当該制度を通して報告された脆弱性をCloudflareセキュリティチームの許可を得た上で公開しているものであり、無許可の脆弱性診断行為を推奨することを意図したものではありません。 また、Cloudflareは脆弱性調査において他の研究者との協力を許可しており、脆弱性調査を目的とした他の研究者との脆弱性情報の共有が許可されています。 Cloudflareが提供する製品に脆弱性を発見した場合は、Cloudflareの脆弱性報奨金
自分は Next.js を使って Jamstack サイト制作や WEB アプリ開発をしています。やっぱりいつでもエラーとの戦いなので同じように今困っている方の少しでも役に立てれば良いなと思います。 こんなエラー起きていませんか？ ローカルで開発している時は全く問題なかったのにホスティングをしてコンソールをみると下記のようなエラーがめちゃくちゃ出てる！！！！！！！っていう経験ないですか？ Error: Minified React error #425; visit https://reactjs.org/docs/error-decoder.html?invariant=425 for the full message or use the non-minified dev environment for full errors and additional helpful warnin
経由 自分が管理しているサイトは更新頻度が少なく、総データも少ないため、ビルド時にデータを取得するJamstackを採用しています。 データはHeadless CMS(microCMS)と外部APIを利用しています。 Headless CMSはデータの更新時にWebhookによる通知ができます。これによってビルドサーバーに「投稿データを更新したから、再度ビルドしてデータを取得してね」と伝えることができます。 ただ、Webhookによる通知に対応していない外部のAPIを利用する場合、データが更新されてもビルドサーバーはその更新を知ることがないため、ビルドが実行されません。 対応策としては色々あるのですが、今回は多くて1日1回と更新頻度も多くないため、定期的にビルドする方針にしました。 余談: クライアントサイドFetch 他の対応策として「ページ表示時にクライアントサイドでFetchする」と
デジタル庁でjQueryが何をしているのか - laiso
TL;DR: jQueryはDrupalのバーター リニューアルするたびにWeb界隈の一斉レビューを受けることでお馴染のデジタル庁ポータルサイトがいつの間にかまたリニューアルされていて、フロントエンドがNext.jsからDrupalに変わって話題になっていたので1、私も旅券所持者として国政に関心を持ってゆく また、まわりのフロントエンドエンジニアの間でjQuery氏の入庁について「モダンブラウザ全盛の時代に必要か？」と疑念がとなえられていたので、これも追求してゆきたい どのような変更があったのか システム変更の経緯はプロジェクトの関係者であるHal Sekiさんの発言が正確なところだと思う Drupalが話題ですが、元々CMS側は2年前からずっとDrupalだったんです。設立当初はサイトもシンプルだったのでフロントエンド側はNextjsでヘッドレス構成だったのですが、構成が複雑になってきて
LINE友だちとのコミュニケーションツールを！非エンジニアが編集可能なアンケートアプリをNuxtとmicroCMSで開発した話 - Qiita
LINE友だちとのコミュニケーションツールを！非エンジニアが編集可能なアンケートアプリをNuxtとmicroCMSで開発した話AWSJAMstackNuxtLIFFmicroCMS はじめに この記事はエムスリーキャリア Advent Calendar 2023の15日目の記事です。 弊社では、医師や薬剤師のための人材紹介事業を展開しており、その一環としてLINE公式アカウントを活用しています。 求職者の転職意欲や希望条件を正確に把握することで、よりパーソナライズされたサービスを提供することができます。そこでLINE上でアンケートフォームを配信することにしました。 しかしこのアンケート、時期や転職市場の状況によって設問内容を変える必要があるため、エンジニアでなくても容易に編集可能なシステムが求められました。 この問題を解決するためにNuxtとmicroCMSを用いたJamstackなアンケ
環境に配慮したグリーンなウェブサイトを構築することで、持続可能性の向上に貢献できることをご存知でしたか？ 著者：Magda T. 2021年8月4日 気候変動の影響が懸念される中、環境に配慮したウェブサイトは、エネルギーを節約し、オンライン利用で二酸化炭素排出量に与える影響を軽減することができます。 The Shift Projectの報告書によると、世界の温室効果ガス排出量の3.7%をオンライン利用が占めていると推定されており、これは航空業界が排出する量とほぼ同じです。この数字は2025年までに増加すると予想されています。 インターネット業界の一員として、Bejamasはエネルギーと二酸化炭素の排出削減に貢献したいと考えています。環境に配慮したウェブサイトの構築は、簡単に始めることができます。そのために必要なことを説明します。 まず、グリーンまたはエコフレンドリーなウェブサイトとは何かを
各サービスの無料プランについて
mini Lateでは、本サービスを提供するにあたって、いくつかの外部サービスを利用しています。 いずれも殆どのケースで無料プランの範囲内に収まる想定ですが、相当数のアクセスやお問い合わせが見込まれる場合、一読いただければと思います。 より詳しく確認したい場合、各公式サイトをご覧ください。 GitHub ソースコードを管理するために、GitHubを利用します。 GitHubに関しては、Freeプランでもほぼ制限が有りませんので、課金が必要になるケースは有りません。 GitHubの公式サイト microCMS Webページを更新可能にするためのCMSの一つです。 無料のHobbyプランでは、データ転送量 20GB/月（超過時はAPI停止）、API数3個、コンテンツ数1万件、1メディア辺り40MB等の制限が有ります。 CMS化が可能なコンテンツ数＝API数になりますので、microCMSを利用
はじめに 今回はNextjsとmicroCMSを使って個人ブログを簡単に作ってみたので紹介します！ 個人的にブログを作りたい気持ちがめちゃくちゃあったので、もしそういう方がいたら参考になると幸いです！ 紹介 こんな感じでかっこいいブログが完成しました！！ 機能 microCMSからブログ記事を取得して表示する Qiitaの記事を表示 ブログ記事の場合は詳細ページを表示、Qiita記事の場合はそのリンクへ飛ぶことができる 使用技術一覧 Next.js microCMS Qiita API tailwindcss daisyUI firebase(ホスティング先) jest react-testing-library github actions(CI/CD) 技術紹介 今回の開発で初めて触れた技術について紹介したいと思います microCMS microCMSとは？？ microCMSはAP
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Vue.jsのSSGフレームワークGridsomeはすごいぞ!! - Qiita
hugo入門2024 インストールから自作テーマ作成とテーマのカスタマイズまで - Qiita
surrealdb 環境構築＋簡単なCRUDを試す(v1.1.1)
AstroとMarkdownで作るポートフォリオ｜Namiho Kawanishi
esbuild + React(TS) で実現する超軽量な開発環境
Jamstackを考える | 第1回 Jamstackとはなんだったのか？
新しい古典：Jamstack と MACH が従来の CMS の概念に向け進化する | ANNAIマガジン
Cloudflare Pages + Next.js + Hono + D1 + Drizzleで始めるフルスタック構成
デジタル・サステナビリティへ、初めの一歩｜ACTANT_FOREST
エンジニアとしての成長環境を求めてちょっと株式会社に転職しました｜chot Inc.（ちょっと株式会社）
Elmの最先端 elm-pages(v3) を触れてみている
【Cloudflare Pages】ブログを公開したい？...5分もあれば十分だ
Cloudflare Pagesにおける権限昇格と任意ページの改竄
Next.js で不用意に日付を扱うとエラーになるよ
Cron TriggersでCloudflare Pagesを定期的にビルドする
オンラインの二酸化炭素排出量を削減する！環境に優しいウェブサイトの作り方とは？
【Nextjs × microCMS × QiitaAPI】高校生が春休みに念願の個人ブログを開設 - Qiita