JAMstack

どうもSassyです！ 最近JAMStackについて興味を持っています。 JAMStackを調べていると出てくるのがヘッドレスCMSですね。 CMSと聞くと真っ先に思いつくのがWordPressかなと思います。 CMSとはContentsManagementSystemの略でWebサイトのコンテンツを管理するための仕組みです。 WordPressはユーザーに見せる画面を持つ他に管理機能を備えた管理画面を持っています。 皆さんはブログを作ったことはあるでしょうか？ 小さな会社や個人事業主、またはブロガーさんであればWordPressを使って自社のサイトやブログを作成したことがある方が多いと思いま…

こんにちわ。 システム開発部ネットワーク課のsupercontinueです。 ゲーム内お知らせやガチャの情報を扱うWebアプリケーションのサーバ側の仕組みを紹介します。 Jamstack を採用して、低コスト・安全 な仕組みができました。 Jamstackとは Jamstackとは、フレームワークなどの具体的なものではなく、Webアプリケーションを対象とした設計パターンです。 https://qiita.com/ozaki25/items/4075d03278d1fb51cc37 にわかりやすい説明があります。 特徴 基本的に、CI(継続的インテグレーション。Jenkinsなど)の利用を前提と…

先日、(2021年3月3日) Gatsby v3.0がリリースされました。 Introducing Gatsby 3.0 – Faster in Every Way that Matters いくつかの変更がありますが、特に気になった項目が V3 for Content Editors: Faster build times on any service (あらゆるサービスでのビルド時間の短縮) です。 Faster build times on any service 項目を大胆に丸々引用します。 Last year Gatsby introduced a breakthrough in s…

モダンなWEBサイト制作・WEBシステム開発では、いわゆるJamstackと呼ばれるアーキテクチャを採用することが増えています。 このようなアーキテクチャを採用する場合はFirebaseのようなmBaaSを利用したり、自身でAPIを開発したり、データを永続的に保存するための方法が必要です。 APIを開発する場合、LaravelやCakePHPなどのフレームワークを利用して開発することも可能ですが、少なくない工数が発生します。 Strapiはオープンソースで開発されているHeadless CMSで、初期設定さえエンジニアが行えば誰でも管理画面を通じてGUIでAPIを作成できます。 strapi.…

タダです. microCMS + Nuxt.js + Vue.js のコンテンツを GitHub Actions を使ってビルド,S3 にコンテンツを配備する設定を行いました.また,コンテンツが更新された時にも自動でデプロイされるような設定も行ったので振り返り目的で各設定についてまとめていきます. GitHub Actions の定義 参考情報 microCMS 設定部分 GitHub Actions 定義 参考情報 まとめ 関連記事 GitHub Actions の定義 まず,GitHub Actions の定義部分です.やっている処理は S3 にアップロードするためのアクセスキーとシークレ…

はじめまして、株式会社カミナシのエンジニア @tomiです。 カミナシは、2020年10月にサービスサイトをフルリニューアルしました。 kaminashi.jp 今回のサイトリニューアルでは、どのような構成で作ったのか、また技術選定で考慮した点をお伝えします。 Jamstackな静的サイト構成 Gatsby.jsとWordpressを使いJAMstack構成で作成しました。 最終的に以下の画像のような構成になりました。 利用した技術を並べると、 Gatsby.js Typescript StyledComponents GraphQL EsLint + Prettier Wordpress +…

どうも、まさとらん（@0310lan）です！今回は、JAMstack*1を構成できるさまざまなサービスと連携してサイトを手軽に作成できる無料のWebサービス「Stackbit」をご紹介します！しかもプログラミング不要で、話題のノーコード（NoCode）サービスとしても人気が高いことで知られています。面倒な処理はすべて自動化されているので、誰でも手軽に最新のWebサイトを作ることができます。Webサイト制作やJAMstackなどにご興味ある方は、ぜひ参考にしてみてください！ 【 Stackbit 】 ■「Stackbit」の使い方 それでは、基本的な「Stackbit」の使い方から見ていきましょ…

2024/12/14 https://stacknagoya.connpass.com/event/334211/ 感想 7月のvol.2に続いて今回も参加しました 名前は知ってるけど話を聞くのは初めての人が多くて面白かったです 斬新な企画発想術 Clap 前川さん イノベーティブな企画術 制作会社 成果にコミットして他社と差別化されるようなイノベーティブなものを求められている ラテラルシンキング 水平思考 既成概念を無視して考えを広げる思考法 前提を疑う ロジカルシンキングは対義語で垂直思考で絞り込んでいく 成果にコミットする必要もある ラテラルに広げてロジカルに落とし込む 熱狂が伝播するチ…

こんにちは、XI本部プロダクトイノベーションセンターの瀧川亮弘です。 現在行っているWebサイトの運用において、ヘッドレスCMSの導入を検討しています。 本記事では、ヘッドレスCMSの選定で調査したことを共有します。 ヘッドレスCMSとは ヘッドレスCMSとは、フロントエンドを持たない、CMS（コンテンツ管理システム）のことです。 ここで言うコンテンツとは、ウェブサイトやアプリで使用される、テキスト、画像、動画、音声、ドキュメントなどのデジタルデータを指します。 WordPressのような従来型のCMSでは、コンテンツの管理と表示が一体化しています。 管理画面からフロントエンド含めてオールイン…

こんにちは。33歳、独身エンジニアのサムです。 突然の報告になりますが、8年以上続けていた前のブログが消えてしまいました。アカウント削除という形で。画面に表示された削除完了の通知を見たとき、まるで自分の一部が消し飛んでしまったような喪失感を覚えました。 よく絡んでくれていたヤマトさん、五月雨さん、もっちゃんには本当に謝らなければならないね。しばらく浮上していなかったからね...。 喪失感がすごかったんですよ...。 8年間の軌跡 振り返れば、私が最初のブログを始めたのは25歳のときでした。新卒で入社した会社を辞め、Web系企業に転職したばかりの頃です。当時はjQueryが全盛期で、Reactや…

こんにちは！ABEJA でエンジニアとして活動している飯嶌です。今年の4月に新卒で入社しました！今回は技術設計やドキュメント作成を支援するAIツールである「Eraser AI」に関して、今まで個人利用で使ってきてその感想とその使い方に関してお話しできればと思います。 Eraser AI とは : 自然言語プロンプトを使用して技術図解やドキュメントを生成できるAIツール 1. 図表生成：4つの種類の図表に対応 2. 無限キャンバス：大規模設計も自由自在 3. Diagram-as-code：バージョン管理が簡単に 4. デザイン性：充実したアイコンやカラーリング Eraser AIの料金体系 1…

目まぐるしくトレンドが変化するフロントエンドの世界。フロントエンドの開発を加速させるフレームワークの選択肢も多様化しており、どのライブラリを選ぶかはプロジェクトの成功に大きく影響します。 最近はNext.jsが次々と新機能を発表し、飛ぶ鳥を落とす勢いで人気を集めています。しかし、Next.js以外にも優れたフレームワークは存在し、ユースケースによっては他のフレームワークの方が適している場合もあります。 今回は、そのうちの静的サイトジェネレータのフレームワークであるGatsbyに焦点を当て、Gatsbyが好きな理由を取り上げます。この記事を読んでくださる方に新たな視点や選択肢を提供できれば幸いで…

はじめに こんにちは。Webフロントエンドチームの山口です。 この記事では、N予備校の規約類を microCMS で管理して、運用を改善した取り組みについてご紹介します。早速ですが、前置きは抜きにして本題に入りたいと思います。ぜひお付き合いください！ 背景、前提 N予備校では、基本的な 利用規約 の他、定期的に開催されるキャンペーンの応募規約など、様々な規約を公開しています。 中野信子講座での著書プレゼント企画 受講者参加型お悩み相談企画 総数は年々少しずつ増加しており、記事の執筆時点で23件もの規約が存在します。これらは全てプロダクトのコードベースにハードコードされており、開発チームが社内の…

クラウドサービスの利用は、個人から企業まで幅広いニーズに応えるために不可欠です。しかし、多くのクラウドプロバイダーは無料の試用期間を提供しているだけで、長期的には有料プランへの移行が必要になります。今回は、試用期間ではなく、無料で使い続けることができるクラウドサービスを紹介します。※内容は変更される場合がありますので、最新の情報を確認してください。 Google Cloud Platform (GCP) Always Freeティア Google Cloud Platformは「Always Free」ティアを提供しており、特定のサービスを無料で利用できます。 Compute Engine: …

はじめに 技術構成（before）と課題 技術構成（after）と選定の理由 改善したこと パフォーマンスの向上 デリバリー速度の向上 セキュリティ面でのリスク低下 大変だったこと 記事のマークダウン変換 段落分けと改行の区別 字下げ 書式の追加 Lintが必要になった 記事ごとのOGP画像周りの実装 URL変更に伴うリダイレクト設定 標準の検索機能がない おわりに はじめに 技術部の @mom0tomo , @etsxxx です。 技術部では、事業部横断的な仕事としてコーポレートサイトの運用も行っています。このたびWordPress on EC2で運用されてきた弊社のWebメディア（Q by…

長すぎるだろ この記事は5000文字くらい。 icalo35.hatenablog.comこの記事は17000文字くらい。 icalo35.hatenablog.comこっちは25000文字くらい。 icalo35.hatenablog.comこれは35000文字くらい。 icalo35.hatenablog.com長すぎワロタ。 いくらなんでも長すぎるので 流石に個別の記事が重すぎるので、今後は短く刻んで絞ったテーマについて書いたり、技術的、創作的な試みの備忘録とかメモ書きを書いていく事にしよう。 技術Blogを書く謎の人物に私もなりたいよな。最近は技術者はQiitaとかZenn、他はnot…

※本記事は、技術評論社「Software Design」(2024年1月号)に寄稿した連載記事「Google Cloudを軸に実践するSREプラクティス」からの転載1です。発行元からの許可を得て掲載しております。 はじめに 前回はDatadogによるクラウド横断のモニタリング基盤について解説しました。 今回はCloudflareとは何か、なぜ使っているのか、各サービスとポイント、キャディでの活用例を紹介します。 ▼図1 CADDiスタックにおける今回の位置付け Cloudflare とは 本記事では、Cloudflare社が提供しているプラットフォーム全体を「Cloudflare」とします。 …