- Published on
- 最終更新日: 2023年9月24日(日)
ブログに最近追加した機能など(202309)
- Authors
- Name
- reiji990
最近追加した機能についてのメモ。
Table of Contents
新テンプレートへの移行
Release of Tailwind Nextjs Starter Blog v2.0
移行するにあたっては、推奨されている通り新テンプレートをコピーし、これまでの編集履歴を反映し直して対応した。 記法に変更があったり、エラーも色々発生したが、ググれば解決できるレベルなので説明は省略。
検索コンポーネント(Algolia)について、現在使用しているライブラリ(plinyリポジトリ内のもの)が日本語に対応していないので、検索ボタンだけ削除している。早晩対応する。
コンテンツ埋め込み
まずはじめに、CSP(Content Security Policy)を設定。
next.config.js
const ContentSecurityPolicy = `
default-src 'self';
- script-src 'self' 'unsafe-eval' 'unsafe-inline' giscus.app analytics.umami.is;
- style-src 'self' 'unsafe-inline';
+ script-src 'self' 'unsafe-eval' 'unsafe-inline' 'giscus.app' 'analytics.umami.is' 'https://twitter.com' 'https://*.twitter.com' 'https://syndication.twitter.com' 'https://www.nicovideo.jp' 'https://open.spotify.com';
+ style-src 'self' 'unsafe-inline' 'https://www.youtube.com' 'https://twitter.com' 'https://*.twitter.com' 'https://syndication.twitter.com' 'https://www.nicovideo.jp' 'https://open.spotify.com';
img-src * blob: data:;
media-src *.s3.amazonaws.com;
connect-src *;
font-src 'self';
- frame-src giscus.app
+ frame-src giscus.app https://www.youtube.com https://twitter.com https://*.twitter.com https://syndication.twitter.com https://www.nicovideo.jp https://ext.nicovideo.jp https://open.spotify.com;
+ child-src https://www.youtube.com https://twitter.com https://*.twitter.com https://syndication.twitter.com https://www.nicovideo.jp https://ext.nicovideo.jp https://open.spotify.com;
`
𝕏
Vercelが7月に公開した埋め込み用ライブラリ。その後まもなく𝕏からのアクセス拒否(?)で使えなくなっていたが、9/15に復活した模様。
<Tweet id="1702605663770440074"/>
高尾山に登りました。
ニコニコ動画
ニコニコ動画公式の埋め込みコードはscriptタグを使用しているが、Next.jsではscriptタグを使えない。
Next.jsでは、HeadにScriptタグは使えません！
対応策として、今回は以下記事の方法2を採用。
作成したコンポーネント。頭の
'use client'とか、MessageEventの型とか、このブログで使用するにあたり少し変更がある。
<NicovideoPlayer id="so32488462" />
YouTube
YouTubeは動画ページから埋め込みコードを取得して貼るだけでも良いが、フルスクリーンにできないことと、幅固定になってしまいスマホで表示した時に表示が崩れる問題がある。 ニコニコ動画埋め込み用のコンポーネントをURLだけ変更してYouTubeに適用する。
<YoutubevideoPlayer id="1-o7fmQqSNg" />
Spotify
Spotifyも公式の埋め込みコードはそのままでは使えないのでコンポーネントを作成した。
<SpotifyPlayer id="7rNb5UJ9IhpTEw6Yl99FqT" />
サブタイトル、最終更新日追加
---
title: 記事タイトル
+ subtitle: サブタイトル
tags: ['test']
date: '1-1-1'
+ lastmod: '1-1-2'
draft: true
summary: '概要'
---
