contentful field というのは、contentful で利用されている入力項目の種類のことです。 こちらでマークダウン形式で入力できるようにフィールドを追加していきます。 手順 1 Add field ボタンでフィールドを追加 2 フィールドの種類は「text」を選択 (「Ric…

vercelでのデプロイがうまくいかなかったので 最初から作りました。手順メモ。 特に難しくはないのですがポイントが二つあります。 * Create Team は skip すること * .env.localで設定した環境変数を設定すること 方法 ・vercelにアクセスし、下記画像からC…

apiの値を変数に代入する際に、以下のような方法だと可読性が上がります。 const obj = {name: "ko", age: 23, female: true} const {name, age, female} = obj; console.log(name); // "ko" { var } に代入すると、オブジェクトのキーがvarの値だけを取得で…

記事の詳細を作成するときに 記事内容をRich Text で記述するようにしました。 他の項目のようにpropsを渡すだけではなかったので方法を記述します。 contentfulの取得方法はこちら↓ https://okinawanpizza.hatenablog.com/entry/2021/10/21/010930 document…

こんにちは、本日はcontentfulのエントリーの内容を詳細ページに追加していこうと思います。 なお、エントリーは一記事単位の呼び方です。 (下記図参照) 結果 以下が全体図です。 //pages/posts/[slug].js import { createClient } from "contentful"; impor…

//http://localhost:3000/posts/test2 export async function getStaticProps({ params }) { console.log(params) // {slug: "test2"} const { items } = await client.getEntries({ content_type: "article", "fields.slug": params.slug }) return{ props:…

contentfulと言うHeadlessCMSで作成した記事内容をNext.js側に出力する方法について。 手順 contentfulをインストール データの取得 コンポーネントに渡す contentfulをインストール npmでインストール npm install contentful index.jsxインポート import {…

モジュールの読み込み時によく見かける {} と そうでないものの違いがわからなかったのでまとめてみました。 今回は default export と default import について。 import React from "react"; import { BookDescription } from "./BookDescription"; defaul…

今回は type と interface の違いについて。 # オブジェクトに型を定義する アノテーションの部分をオブジェクト{}にすることで可能。 ※型アノテーション = stringやbooleanのような注釈をつけて型を定義すること //通常の型アノテーション let name: string…

HeadlessCMSと従来のCMSの違いについてまとめました。 HeadlessCMSとは Head(ビュー、見た目を構築する部分)less(がない)、つまりレイアウトをツール内で管理しないCMSのこと 入稿画面付きのapi作成ツールと考えるとイメージしやすい メリット マルチデバイ…

こんにちはkoです。 来年に向けてブログのリニューアル行っています。 Contentfull × Vercel × Next.js でブログを作成しようと思っています。 今日はそのうち、Contentfulに関する設定方法を記述していきます。 目次 Contentfulとは 初回登録 Space Content…

コンポーネント 見た目と機能を持つUI部品 「関数コンポーネント」「クラスコンポーネント」の二つが代表される クラスコンポーネント ① React.Component を拡張して作られるJavaScriptクラスである。 import React, { Component } from "react"; //拡張する…

typescriptに scss を import しようとするとエラーになってしまう。 解決 next-env.d.tsファイルに以下を追記 //make it possible to import scss file declare module '*.css'; // or scss declare module '*.scss'; これで import が可能になります。 参…

はじめに wordpressサイトの目次に関する不具合の改修を行なっている際に起こったエラーのメモです。 次のような配列を作成しようとすると 「Parse error: syntax error, unexpected '[' in ～」というエラーになりました。 'hoge', 'bar' => 'hoge' ]; ?> …

wordpressの制作案件の時に多いのでメモ！！ justify-content: space-between; を使う際に もし左寄せにしたい場合は擬似要素を使って残りの要素分を埋めてあげましょう！ ちょうどこちらのcodepenの三番目のレイアウトになります。 3カラムの場合、余白をマ…

再帰についての章を学習したので、 そのまとめ。 再帰について 再帰とは自身を関数として呼び出す処理のこと。 足し算がわかりやすい例です。 例えば 5 + 5 のような加算も 5 + 1 + 1 + 1 + 1 + 1 とすることで 「5に1を足す」を繰り返している処理だと気づ…

関数の抽象化 具体的な処理を一般化することをいいます。 関数の抽象化を行うと、現実に存在するような複雑な問題を 小さなステップに分解することで効率よく処理ができるようになります。 メソッドチェーン メソッドを実行して、その結果に対してさらにメソ…

第１章の分野を終えたので まとめの問題のようなものに取り掛かりました。 At Coder でよく見かけるような競プロ問題なので、 問題と学んだ関数について記載していきます。 まずはこちら 文字列 s と数値 i を受け取り、i 番目に「_」を入れた文字列を返す、…

ライブラリ 関数は一つにつき一つのタスクを実行するものであり、 汎用性が高いファイルがまとめられたものをライブラリという。 例) Mathライブラリ ... 数学の関数を一括でまとめている図書館のようなイメージ (pythonやJava は import する必要があるみた…

本日は関数について 関数の生成方法 プログラミングでは関数は以下のような構図になっている。 ヘッダー(データ型、関数名、パラメーター) 本体(処理内容) ステートメント 命令や宣言内の実行されるコードのまとまりのこと return 〇〇; や let squaredX = x…

演算子の優先順位と結合性 演算子の優先順位 一連のルールに従ってどの演算子を実行するかを決定すること ()が一番優先順位高い 演算子の結合性 二つの演算子が同じ優先順位をもっている 時にどの演算子を優先的に実行するか決定すること。 リテラル ソース…

プリミティブ型 以下のような基本的なデータ型のこと boolean型 int型 str型 shar型 undefined https://developer.mozilla.org/ja/docs/Glossary/Primitive プログラミング言語によって扱うデータ型が違う 数値に使われるデータ型において、 C#は以下のデー…

フロントエンドエンジニアとしてスキルアップするべく コンピューターサイエンスの勉強を始めようと思います。 きっかけ きっかけは、csの学習方法で検索したときに recruision という学習支援サービス (progateのcs版？？)を見つけて試しに少しだけやってみ…

サーチコンソールに出たampのエラーを解決したのでログとして残しておきます。 今回は 「スクリプトタグに無効な JSON が含まれており、パースできません。」 について。 原因 構造化データの作成に用いるJSON+LDの部分でこけていました。 <script type="application/ld+json"> { "@context": "h…

記事内のimgタグをamp-imgタグに変換した際に起こったエラーについて。 今回行ったこと preg_replaceを用いて、 imgタグをamp-imgタグに置き換える。 //<img>を<amp-img>に差し替え $content = preg_replace('/<img (.*?)>/i', '<amp-img layout="responsive" $1></amp-img>', $content); $content = preg_replace('/<img (.*?) \/>/i', '<amp-img layout="responsive" $1></amp-img>',…</amp-img>

こんにちは！ ampなどに使われるwebworkerについて気になったのでまとめてみました。 webworkerとは javascriptをマルチスレッドで処理を行えるようにした、web api の一つです。 メインスレッドを止めることなくjavascriptを利用できるようになります。 オ…

今回は実際に構造化データを作成していきます。 構造化データとは okinawanpizza.hatenablog.com schema.org ・構造化データにおいて使用されるボキャブラリーの一つ。 ・グーグル、マイクロソフト、ヤフー、ヤンデックスが手を組んだ。 ・既存の情報をより…

amp化も残りは記事内の置換の部分と構造化データに関する部分となってきました。 ampのテストを行っていると、どうやら構造化データの追加も任意ではあるが必要になってくるとのことでした。 こちら構造化が完了した際の画像 いろいろ調べたことを追記します…

amp対応日記二日目 今日はamp用のテンプレートを実際に作成していきます。 前回の記事はこちらです。 okinawanpizza.hatenablog.com 今回も独断と偏見がすごいです。(笑) ampページのurlを作成 今回、テンプレートを切り分ける方法として記事のurlに「amp=1…

今日から仕事での開発の話もブログにしていこうと思います。 今回三つのAMP対応を任せてもらえることになりました！ かくいう私は一回もamp対応したことがなく、、 せっかくなので、ログを残していこうと思います。 AMP日記二日目 okinawanpizza.hatenablog.…