タグ検索の該当結果が少ないため、タイトル検索結果を表示しています。
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(検索エンジン最適化)にも影響が出るのでなるべく記事を軽くする事が大切です。
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
Largest Contentful Paint (LCP) Stay organized with collections Save and categorize content based on your preferences. Largest Contentful Paint (LCP) is a stable Core Web Vital metric for measuring perceived load speed. It marks the point in the page load timeline when the page's main content has likely loaded. A fast LCP helps reassure the user that the page is useful. Historically, it's been a ch
Browser support Chrome 77, Supported 77 Firefox, Not supported Edge 79, Supported 79 Safari, Not supported Source Largest Contentful Paint (LCP) is an important, stable Core Web Vital metric for measuring perceived load speed because it marks the point in the page load timeline when the page's main content has likely loaded—a fast LCP helps reassure the user that the page is useful. Historically,
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
2019-11-07 【Contentful】入門。Conentfulとは？導入方法・設定手順の解説 #contentful#cms#blog#webアプリ#api#headless cms Contentfulとは？ Contentfulは、「Headless CMS」と呼ばれるAPIベースのCMSです。 従来のCMSとの違いや、料金体制などについて簡単に説明します。 従来のCMSとHeadless CMSの違い まずCMSとは、「Contents Management System」の略で、直訳すると、コンテンツを管理するシステムです。 CMSを利用する最大のメリットは、Webサイトを作成するためのHTMLやCSSの知識がなくても、ブログなどのコンテンツを管理できることです。 具体的に言うと、コンテンツ(ブログ記事など)の作成・編集・削除などを行うためのサービスです。 従来のCMS(W
Contentfulの料金と使い方を整理しつつ、Nuxt.jsと組み合わせてブログを作る - Qiita
Contentfulを使ってみたくなったので、印象に残った邦画を書き残すブログを作りました。ブログを作って満足してしまったので、記事の中身は（仮）です。Contentfulの考え方に馴染むのに少し時間がかかったので、そこのところの整理がメインの記事です。 ヘッドレスCMSというもの CMSというと、WordPressとMovable Typeぐらいしか知らなかったのですが、最近ヘッドレスCMSという言葉を耳にするようになりました。ヘッドレスCMSは、WordPressのようにテンプレートを表示する部分を持たず、APIでデータを提供することに特化している点が特徴です。 ヘッドレスCMSの選択肢は、こちらのサイトにたくさんありましたが、そのなかで、ContentfulというCMSのサービスが気になったので、Nuxt.jsと組み合わせて簡素なブログを作りました。 headlessCMS | A
ヘッドレス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
1. 有料版で利用できる機能 まず初めに、無料版では利用できない主な機能を紹介します。 Compose + Launch 簡単にいうと、 Compose ... 複雑な事前設定なしにページを作成・公開できる機能 Launch ... 複数記事をグルーピングして公開スケジュールを設定できる機能 です。 特にComposeについては以前に記事を書いており、基本的に事前定義が必要なヘッドレスCMSのとっつきにくさを解消してくれるものになります。 カスタムロール Contentfulダッシュボード上でどのような作業を許可または禁止するか、権限設定を細かくカスタマイズできる機能です。 イメージとしてはAWSのIAMロールに近いです。 例えばこんなユースケースで使えます。 「編集禁止」というタグをつけた記事について、Adminユーザー以外が編集できないようにする 「ライター」というロールに所属するユー
[初心者向け]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だけ読んでい
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を基に動的にレン
はじめまして！飲むヨーグルト飲みすぎてお腹壊してる系エンジニアの 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
Next.js で Markdown ブログを作るでは、記事をMarkdownファイルで作成したブログを作りました。 この記事では、ヘッドレスCMSであるContentfulで記事を管理するNext.js製のブログを作り、Vercelでホスティングする方法を説明します。 Contentfulとは Contentfulは、ヘッドレスCMSとよばれるAPIベースなCMSです。 ヘッドレスCMSなので、Wordpressなどの一般的なCMSのようにフロントエンドの部分がありません。 そのため、Next.jsやGatsbyのようなクライアント側をレンダリングするフレームワークと組み合わせて使います。 Contentfulでは、データの置き場（サイト）となるSpaceの中で、記事データ（Entity）を管理します。 記事データは、Content Modelと呼ばれる、タイトル、本文、日付などどんな項
オウンドメディアでも立ち上げたいなと思いまして、今だとCMS何がイケてるのかなーと調べてたらContentfulがイケてるのではと思ったので試してみます。 Contentfulは最近トレンドのheadless CMSというカテゴリのCMSで、コンテンツ管理画面はあるけど、コンテンツを表示する部分は含まれていなくて、APIでコンテンツデータを公開するもの。 フロントの自由度が高く、アプリにも使えるし、WEBにも使えるし、スマートにコンテンツ配信出来るわけ。逆に言うとWordpressのような従来のCMSに比べると、自分で表示部分を作り込まなければならないので大変手間がかかるのがデメリット。 Contentfulは無料プランで5,000レコードまでコンテンツを保存出来る模様。下記エントリでのざっくりとした目安では800記事くらいは書けるみたい。ありがた過ぎるやろ。 Contentful 料金
はじめに 以下は、GraphQLのCMS、GraphCMSオフィシャルブログにおいて、Fabian Beliza氏が2017年12月13日に投稿した記事の邦訳です。 Contentfulも、GraphCMSも、ヘッドレスCMSと呼ばれるサービスの一種であり、前者はREST APIによって情報に対してアクセスが行われるのに対して、後者ではGraphQLと呼ばれるクエリ言語を用いられています。元記事は、それぞれの長所・短所を具体例を交えながら解説したものです。 元記事: GraphCMS vs. Contentful - API Perspective 本文 ContentfulはCMS市場において一大勢力と言える存在であり、しばらくはその傾向が続くでしょう。しかしながら、利用する上で生じる問題や煩わしいと感じる点がないとは言い切れません。例えば、SDK上の問題や、多くのエンジニアが次なる代替
ドイツ企業、Contentfulの面接を受けてみた
opinionドイツ企業、Contentfulの面接を受けてみたJuly 12th, 2019どうもー、ドイツでフリーランスのフルスタック&フロントエンド エンジニアをしています、Arisaです。 先月、Contentfulを使ってこのポートフォリオ&ブログサイトを開発&公開したら、Contentfulのエヴァンジェリストの人が、このサイトの記事を読んでSNS上でアドバイスになるコメントをくれたり、人事の人からデモ開発のポジションの面接を受けてみないかと、連絡が来たりしました。 Contentfulは使って見て面白かったし、これからいろんなUI エクステンションを実装しようと思っていたところに、意外なお誘いがあって、びっくりしました。 今の完全リモートの働き方を変えるのは譲れませんでしたが、リモートでもいいよと交渉したらOKをもらえたので、受かったら出張が待っていましたが、受かってから考え
ヘッドレス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/ 「技術スキルや経験は必要ありません」の通り、開発者向けの内容だけでなく、サービスのビジョン、新機能の紹介、成功事例の共有、インタビュー、ワークショップなど全方位に向
Contentfulを使い倒したくてContentful芸を磨く【検索・絞り込み編】2019.08.10 Headless CMSとしても有名なContentfulですが、ブログ記事を見ているとそこまで使い倒している記事を見たことはない気がしたので、一歩踏み込んだ使い方を書いてみようかと思います。 （実際にやってみながら少しずつ追記します） タグ付けとタグでの絞り込みまずタグの作り方ですが、 Contentでブログ以外にTagなどを作成します。 Authorと同じですね。 そして、Blog記事のContent modelを編集し、 Referencesを追加します。 この時、1個のみでも複数でも構いません。 Contentでタグをいくつか作成し、記事に紐づけてみましょう。（Authorを選択するのと同じ要領です） それだけで記事にはタグ付けができた状態になります。 あとは、ブログ記事を表示
まず、Contentfulとは何か？ Contentful公式(英語)にある、キャッチを訳してみると… CMSがソフトウェアを出荷する途中に入ってはいけません。 Contentfulは、チームがあらゆるデジタル製品のコンテンツにパワーを与えることを可能にするコンテンツインフラストラクチャを提供します。 https://www.contentful.com/ コンテンツインフラ！ おお！これだ！(こういうの探してたw) WordPress(PHP)が好きじゃなくて、JavaScriptだけで構築できるWordPressみたいなCMSを探してたら、Qiitaの記事がヒットして発見〜♪ ↓その記事はこちら 次世代Headless CMS「contentful」事始め 上の記事見たら簡単に開始できました！ contentful図解 Contentfulだと何ができて何が嬉しいのか？ 【個人的に嬉し
趣味をアウトプットするためにブログをはじめようと思い立ちまして、 せっかくなので最近勉強中の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
![[VS Code]タブのカスタムラベル設定でpage.tsx、layout.tsxなどのファイルを見やすくする | DevelopersIO](https://cdn-ak-scissors.b.st-hatena.com/image/square/611914e4c074abe947efa5c820fc1646e6c60a0a/height=288;version=1;width=512/https%3A%2F%2Fdevio2023-media.developers.io%2Fwp-content%2Fuploads%2F2020%2F06%2Fvscode-2020-eyecatch-1200x630-1.png)
Largest Contentful Paint (LCP) | Articles | web.dev
Largest Contentful Paint (LCP)
Optimize Largest Contentful Paint | Articles | web.dev
【Contentful】入門。Conentfulとは？導入方法・設定手順の解説 | FromsBlog
新規事業のメディア開発にContentfulを採用した話 - クラウドワークス エンジニアブログ
Optimising Largest Contentful Paint – CSS Wizardry
Contentful + Next.js + Vercelでブログを作る - ひよこまめ
モダンなheadless CMS Contentfulを試してみる - もふもふ技術部
【邦訳】GraphCMSとContentfulの比較 - Qiita
Contentful & Gatsby.jsでリッチテキストを扱う | DevelopersIO
Contentfulを使い倒したくてContentful芸を磨く【検索・絞り込み編】 | GiFT（ギフト）株式会社
【WordPress脱却】APIベースなCMS「Contentful」と Nuxt.jsでブログシステム爆速構築の巻【ちゃんとSSRでSEO】
Nuxt + Contentful + Netlifyでブログ作成全手順<前編>
www.rbbtoday.com
detail.chiebukuro.yahoo.co.jp
iwakakeru-anime.com
kusuriyubino.hatenablog.com
www.rbbtoday.com
ameblo.jp/sametakun