タグ検索の該当結果が少ないため、タイトル検索結果を表示しています。
7年間使ってきたWordPressを捨ててContentful+Gatsby+Netlifyにしたら爆速になったし経緯とか教訓とか語る - Qiita
7年間使ってきたWordPressを捨ててContentful+Gatsby+Netlifyにしたら爆速になったし経緯とか教訓とか語るWordPressReactNetlifygatsbycontentful こんにちは、古都ことと言います。普段はブログやらなんやらをやっているのですが、今回ブログのお引っ越しをしたのでその経緯などについてお話ししたいと思います。 先にまとめ ブログをVPSとWordPressで7年間運営してきた 速度面やメンテナンス面でそろそろガタがきていた Contentful+Gastby+Netlifyの構成に移行した Lighthouseで高スコア叩き出せた 技術選択って難しいね 運営しているブログ Subterranean Flower Blogというブログをやってます。 主にフロントエンド周りのことを取り扱っており、たまにマリオ64の記事や、転職の記事などでも
こんにちは、@f_subal です。 pixivFACTORY というサービスで普段はフロントエンドをやっています。 今回は Rails のサービスに Headless CMS の Contentful を導入し、ワークフローを改善した話をします。 ランディングページ、あるいはマスターデータの詳細について pixivFACTORY はグッズおよび同人誌がブラウザ上で簡単に作れるサービスです。 取り扱っているグッズは 60 種類以上あり、各グッズごとに仕様が大きく異なります。 グッズにはそれぞれ、仕様や出来上がりの写真を載せたページ（以下、product 詳細とも呼びます）が存在します。 要するに、以下の状況を想定してください。 運営が管理する静的なドメインモデル（ここでいう「作れるグッズの仕様」）が存在する モデルの各内容について説明するページが存在する 各ページの内容は DB の内容から
技術ブログをNuxt + Netlify + Contentfulから、はてなブログ for DevBlogに移行しました - もふもふ技術部
こんにちは。出口です。 タイトルにある通り、技術ブログをはてなブログに移行しました。 この記事では、なぜ移行することになったのか、どうやって移行したのか、移行で苦労したところなどをまとめておきたいと思います。 もし脱セルフホストブログ、脱Contentfulや、はてなブログへの移行をお考えであれば参考になるのではないかと思います。 なぜ移行したのか Nuxt 3への移行が大変すぎる Contentfulへの不満が募ってきた 当初の計画 改めて移行を考える 移行について 記事移行 インポート機能を使ってWXRを取り込む場合 AtomPubを使ったパターンの場合 サブディレクトリオプション Netfilyのリバースプロキシ設定 robots.txtを設置 NetlifyのPrerenderingオプション設定 検証ツールで1つだけ検証失敗する まとめ なぜ移行したのか まずそもそもなぜ移行した
largest contentful paint の画像のプリロードしてWebページの読込速度を高速化する方法
画像をギリギリまで圧縮してもpage speed insightsでLCP時間を改善する為にプリロードしてくださいと表示されますがどうすればいいの？ Weｂサイトやブログを運営するなら画像を入れて読みやすいページを作りたいでも画像を入れすぎると読込速度が遅くなってしまい せっかく記事を読みに来てくれた方が最後まで読まずに途中で離脱してしまい結果アクセス数が激減してアドセンスやアフィリエイトの収益も減ってしまいます。 最近のGoogleはユーザーの利便性を重要視しているので表示速度も評価項目の対象になりSEO(検索エンジン最適化)にも影響が出るのでなるべく記事を軽くする事が大切です。
Largest Contentful Paint (LCP) Stay organized with collections Save and categorize content based on your preferences. Historically, it's been a challenge for web developers to measure how quickly the main content of a web page loads and is visible to users. Older metrics like load or DOMContentLoaded don't work well because they don't necessarily correspond to what the user sees on their screen. A
Nuxt + Contentful + Firebase Hosting のJamstackを使ったサービス開発 | GiFT（ギフト）株式会社
Nuxt + Contentful + Firebase Hosting のJamstackを使ったサービス開発2019.12.13 今年はContentful芸のブログばかり書いていたら、Jamstackおじさん（通称Jamおじさん）になってしまいました。 今回は実際にリリースしたサービスでどのように実装したかを書いてみたいと思います。 最終更新 : 2019/12/16 今年はコーポレートサイトやオウンドメディアの開発には ContentfulやFirebaseを使ったサーバーレスな構成を多用させていただきました😇 2019年にContentfulを使って作ってきたものは、表に出せるもので以下のものがあります。 株式会社Neo Sports様 コーポレートサイト大崎電気工業株式会社様 farmwatch ブランドサイト弊社コーポレートサイトそれらの開発の中で知見が溜まってきたな〜とい
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
These times are guidelines, not strict rules. If your pages' LCP times are consistently 2.5 seconds or less, then it doesn't really matter what the breakdown looks like. However, if your delay categories are unnecessarily long, you'll have trouble reaching the 2.5 second target. We recommend thinking about the LCP time breakdown as follows: The vast majority of the LCP time must be spent loading t
Contentfulの料金と使い方を整理しつつ、Nuxt.jsと組み合わせてブログを作る - Qiita
ヘッドレスCMSでも自由に記事を組みたい。 ContentfulのComposeでブロックエディター(ライク)に記事を書いてみる！ | DevelopersIO
ヘッドレスCMSでは、バックエンドのCMS（記事の管理）とフロント側が切り離されることで、アーキテクチャ全体としてセキュリティを向上させるなど多くのメリットがある一方、CMS側で動的にコンテンツを変化させる構造に弱かったりします。 例えばWordpressのGutenbergのようなブロックエディタでは、編集者に権限さえあれば、自由にテキストやブロックを追加して即座にフロント側にも公開できるのですが、ヘッドレスCMSの場合、フロント側で前もって新しいページの生成ロジックが必要です。 今回はContentfulに新しくリリースされたCompose機能を使い、Contentfulにはデフォルトで存在しない、ブロックエディタライクな記事入稿画面を作ってみます。 前提 この記事は、ContentfulやヘッドレスCMSをある程度使っている人向けです。若干ややこしい説明もでてきます。またフロント側の
4種類のHeadlessCMSを試してみた感想（wordpress/strapi/contentful/microCMS） - Qiita
4種類のHeadlessCMSを試してみた感想（wordpress/strapi/contentful/microCMS）JavaScriptJAMstackHeadlessCMS この記事はJAMstack Advent Calendar 24日目の記事です。 前提 本投稿にはJAMStackとヘッドレスCMS自体の説明は省きます。 JAMStackとは何か、ヘッドレスCMSとは何かといった所については、JAMstack Advent Calendarの主催者であるshibe97さんが大変分かりやすい日本語記事を幾つか投稿してくださっているので、是非見てみてください。 JAMstackとは何を指すのか今一度考えてみる Jamstack公式ページの和訳 + 考察記事 ヘッドレスCMSとは何か？従来CMSとの違いやメリデメを解説！ GitベースのCMSとAPIベースのCMSの比較 はじめに
Contentfulの有料プランでは何ができるの？ 無料版との違いや便利な機能を解説 | DevelopersIO
[初心者向け]Contentfulの全体像・記事投稿の流れ・便利な機能をまとめてみた | DevelopersIO
どうも、ベルリンオフィスの小西です。 ヘッドレス CMS の Contentful について、そういえば概要説明的な記事は書いたことがなかったなと思い、本記事を執筆してみました。 この記事で Contentful の全体像や使用する際の流れを把握できるようにしているつもりです。 こういう情報が欲しいなどあればお気軽にご連絡ください。 Contentfulについて Contentful はヘッドレス CMS の一つです。 Contentful では記事やアセット（画像など）の管理を行い、記事の取得や表示などを行う「ビュー（View）」は外部に委ねるため、ヘッドレスと言われます。 Contentful はドイツの会社で、弊社のヨーロッパオフィスと同じベルリンに本社があり、アメリカ・ヨーロッパを中心にグローバルにサービス展開しています。 Contentfulの全体像 Contentful の基本
![[初心者向け]Contentfulの全体像・記事投稿の流れ・便利な機能をまとめてみた | DevelopersIO](https://cdn-ak-scissors.b.st-hatena.com/image/square/ea57ff72b375f8110786fdfce004a8904911e6ea/height=288;version=1;width=512/https%3A%2F%2Fd1tlzifd8jdoy4.cloudfront.net%2Fwp-content%2Fuploads%2F2022%2F12%2FUntitled6-3.png)
CircleCI × Contentful × S3で作るJamstackなブログ環境。 | DevelopersIO
こんにちは、ベルリンオフィスの小西です。 最近日本語の記事も充実してきたJamstack。説明はこちらの記事で書かれているので省略しますが、要はサイト表示が高速でセキュリティも強くてスケーラビリティもある環境構成のことです。 今回は爆速にページを表示でき、記事データの管理も楽で、かつセキュリティもあまり気にしなくていいブログサービスを構築したいと思います。 目次 環境構成 前提 1. Contentfulの準備 2. Gatsbyアプリの立ち上げ 3. S3へのアップロード 4. CircleCIのセットアップ 5. ContentfulとCircleCIの連携 さいごに 記事が長めで初歩的なことも書いてたりするので、適宜必要な見出しまで飛んでってください。 ローカルでアプリ立ち上げたいだけなら1と2だけ、既にContentfulアプリがあってCircleCIと連携したい人は5だけ読んでい
はじめまして！飲むヨーグルト飲みすぎてお腹壊してる系エンジニアの ryt_kwzacky です！！ flintチームに加わってから、クラウドリンクスのフロントエンド開発をしたりチームのビジネス課題をエンジニアリングで解決したり飲むヨーグルトを飲んだりしています。 現在flintではハイエンド向け副業プラットフォームクラウドリンクスという事業を作っています。 2020年1月に正式ローンチした本サービスですが、実際にプラットフォーム上でマッチングする例が多々出てきました。 そこで、発生したマッチング事例を取りまとめメディアとして発信していくことになり、そのメディアを開発する上で採用したHeadlessCMSであるContentfulについて紹介させていただきます。 最終的な結論としては、Contentful + Nuxt.js + Firebaseの構成で自由度の高いメディアをすぐに立ち上げら
28 March, 2022 Optimising Largest Contentful Paint Written by Harry Roberts on CSS Wizardry. Table of Contents Solve Everything Beforehand Optimise Your LCP Candidate Avoid Image-Based LCPs Use the Best Candidate Demos <img> Elements <picture> and <source /> <image> in <svg> <video> Elements’ poster Attribute background-image: url(); Getting Around background-image Issues Summary Don’t Shoot Yours
ドイツ企業、Contentfulの面接を受けてみた
opinionドイツ企業、Contentfulの面接を受けてみたJuly 12th, 2019どうもー、ドイツでフリーランスのフルスタック&フロントエンド エンジニアをしています、Arisaです。 先月、Contentfulを使ってこのポートフォリオ&ブログサイトを開発&公開したら、Contentfulのエヴァンジェリストの人が、このサイトの記事を読んでSNS上でアドバイスになるコメントをくれたり、人事の人からデモ開発のポジションの面接を受けてみないかと、連絡が来たりしました。 Contentfulは使って見て面白かったし、これからいろんなUI エクステンションを実装しようと思っていたところに、意外なお誘いがあって、びっくりしました。 今の完全リモートの働き方を変えるのは譲れませんでしたが、リモートでもいいよと交渉したらOKをもらえたので、受かったら出張が待っていましたが、受かってから考え
WordPressが嫌でNuxt.js+Contentfulでブログを作ったけどHugoに移行した話-前編 | JavaScriptに関するお知らせ
2019/09/17VueJavaScriptOthersWordPressが嫌でNuxt.js+Contentfulでブログを作ったけどHugoに移行した話-前編 こんにちは！今日は先日書いたブログをNuxt.jsとContentfulベースから Hugoベースに移行した理由について書きます。 まずはWordpressじゃ駄目だった理由 ブログと始めるにあたってまず思いついたのがwordpressです。 シェアも多分WPが圧倒的です。...が、WP使う気はなかったです。 個人的な理由は...↓ DB周り詳しくない WPはMySQL使います。といってもそんな難しくないんだけど、 SQLとかRDBMSにそこまで詳しくない人が触ってるとなんかのエラーが起きたときに対応できない気がするんだよなー 遅そう(MPA) MPAだとやっぱ再描画とかに時間かかりそう(多分) WPは特にDBを基に動的にレン
ヘッドレスCMSのContentfulではリッチテキストで文章を書くことができます。 今回はContentfulと組み合わせることが多い静的サイトフレームワークのGatsby.jsでリッチテキストを出力する方法を備忘録として記載しておきます。 前提 Contentful & Gatsbyですでにアプリを運用している 1. Contentfulでリッチテキストを投稿する Contentful側のContent Modelで「Rich text」というフィールドタイプが用意されています。 シチュエーションに応じて、エディタから不要なHTMLタグを隠すこともできます。 以上のフィールドを追加したのち記事を投稿しておいてください。 2. リッチテキストをレンダリングするプラグインのインストール Gatsby.js側で、プラグインをインストールします。 $ npm install @contentf
Contentfulのフラッグシップイベント、Storylines 2023 @ベルリンに参加してきた！ | DevelopersIO
Contentfulのフラッグシップイベント、Storylines 2023 @ベルリンに参加してきた！ Contentfulのフラッグシップイベント、Storylines in Berlinに参加してきました！ イベントの規模もコミュニティの熱も想像以上で大いに刺激を受けたので、本日はそのイベント内容をシェアします。 Contentful Storylinesとは コンテンツ管理プラットフォームであるContentfulから、中の人・関係者・ユーザーが一堂に会して講演やネットワーキングが行われるフラッグシップのオフラインイベントです。 https://www.contentful.com/storylines/berlin/ 「技術スキルや経験は必要ありません」の通り、開発者向けの内容だけでなく、サービスのビジョン、新機能の紹介、成功事例の共有、インタビュー、ワークショップなど全方位に向
趣味をアウトプットするためにブログをはじめようと思い立ちまして、 せっかくなので最近勉強中のNuxt.jsを使用してブログを作成してみました！ 記事表示までの手順をまとめてみたので、参考にしていただければと思います！ <前編>ではNuxtプロジェクトの作成からContentfulのセットアップまで、 <後編>では記事の作成、Nuxtでの表示、Netlifyへのデプロイまでの手順をまとめてあります。 なお、この記事はこちらの動画を大いに参考にしています。 併せて参考にしていただければと思います。 Nuxtプロジェクトの作成 前提条件として、nuxtはインストール済みとします。 $ npx create-nuxt-app <project-name> nuxtで新しくプロジェクトを作成します。 設定はすべて初期設定のままです。 次に必要な物をインストールします。 $ cd <project-n
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Rails + Contentful で LP のコーディングをゼロにする - pixiv inside
Largest Contentful Paint (LCP) | Articles | web.dev
Optimize Largest Contentful Paint | Articles | web.dev
【Contentful】入門。Conentfulとは？導入方法・設定手順の解説 | FromsBlog
新規事業のメディア開発にContentfulを採用した話 - クラウドワークス エンジニアブログ
Optimising Largest Contentful Paint – CSS Wizardry
Contentful + Next.js + Vercelでブログを作る - ひよこまめ
【邦訳】GraphCMSとContentfulの比較 - Qiita
Contentful & Gatsby.jsでリッチテキストを扱う | DevelopersIO
Contentfulを使い倒したくてContentful芸を磨く【検索・絞り込み編】 | GiFT（ギフト）株式会社
Nuxt + Contentful + Netlifyでブログ作成全手順<前編>
www.hokkaido-np.co.jp
www.techno-edge.net
togetter.com
smart-flash.jp
www.hokkaido-np.co.jp
tech.preferred.jp