♻️ Added post and fix components

.vscode/extensions.json

@@ -13,7 +13,8 @@
     "znck.grammarly",
     "unifiedjs.vscode-mdx",
     "esbenp.prettier-vscode",
-    "rvest.vs-code-prettier-eslint"
+    "rvest.vs-code-prettier-eslint",
+    "taichi.vscode-textlint"
   ],
   "unwantedRecommendations": []
 }

astro.config.ts

@@ -12,7 +12,7 @@ import rehypeAutolinkHeadings from 'rehype-autolink-headings';
 import rehypePrettyCode from 'rehype-pretty-code';
 import rehypeSlug from 'rehype-slug';
 
-import remarkLinkCard from './src/lib/remark-link-card';
+import remarkLink from './src/lib/remark-link';
 import { remarkReadingTime } from './src/lib/remark-reading-time';
 
 import type { Element } from 'hast';
@@ -64,7 +64,7 @@ export default defineConfig({
       footnoteLabel: 'footnote',
       footnoteBackLabel: '↩',
     },
-    remarkPlugins: [remarkLinkCard, remarkReadingTime],
+    remarkPlugins: [remarkLink, remarkReadingTime],
     rehypePlugins: [
       rehypeSlug,
       [

src/components/Header.astro

@@ -16,10 +16,10 @@ const url = Astro.url;
 <header>
   <nav id="global">
     <div class="flex w-full grow">
-      <div id="action toggle container" class="mr-auto">
+      <div class="mr-auto">
         <ModeToggle client:only="react" />
       </div>
-      <div id="global link container" class="flex justify-end">
+      <div class="flex justify-end">
         <ButtonLink
           aria-label="Go to Home page"
           variant="ghost"

src/components/Link.astro

@@ -2,10 +2,12 @@
 import { ExternalLinkIcon } from '@radix-ui/react-icons';
 
 import LinkCard from '@/components/LinkCard.astro';
+import YoutubeEmbed from '@/components/YoutubeEmbed.astro';
 
 type Props = {
   href: string;
   ['data-linkcard']?: string;
+  ['data-youtube']?: string;
 };
 
 const props = Astro.props;
@@ -14,7 +16,9 @@ const isAnchor = props.href.startsWith('#');
 ---
 
 {
-  Object.hasOwn(props, 'data-linkcard') ? (
+  Object.hasOwn(props, 'data-youtube') ? (
+    <YoutubeEmbed {...props} />
+  ) : Object.hasOwn(props, 'data-linkcard') ? (
     <LinkCard {...props}>
       <slot />
     </LinkCard>

src/components/YoutubeEmbed.astro

@@ -0,0 +1,33 @@
+---
+import fetchSiteMetadata from 'fetch-site-metadata';
+
+export type Props = {
+  href: string;
+};
+const props = Astro.props;
+
+const urlPattern =
+  /(?=(\s*))\1(?:<a [^>]*?>)??(?=(\s*))\2(?:https?:\/\/)??(?:w{3}\.)??(?:youtube\.com|youtu\.be)\/(?:watch\?v=|embed\/|shorts\/)??([A-Za-z0-9-_]{11})(?:[^\s<>]*)(?=(\s*))\4(?:<\/a>)??(?=(\s*))\5/;
+
+function extractVideoId(url: string): string | undefined {
+  const match = url.match(urlPattern);
+  return match?.[3];
+}
+const videoId = extractVideoId(props.href);
+const embedUrl = `https://www.youtube.com/embed/${videoId}`;
+const { title } = await fetchSiteMetadata(props.href, {
+  suppressAdditionalRequest: true,
+}).catch(() => ({
+  title: 'YouTube Video',
+}));
+---
+
+<div>
+  <iframe
+    title={title}
+    class="aspect-video w-full rounded"
+    src={embedUrl}
+    loading="lazy"
+    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+    allowfullscreen></iframe>
+</div>

src/components/markdown/blog-date.tsx

@@ -13,10 +13,7 @@ export const BlogDate = ({ post, lang }: Props) => {
   const { collection } = post;
   const { lastUpdated, published, category } = post.data;
   return (
-    <div
-      id="post-data-container"
-      className="my-2 flex justify-between text-xs md:text-sm"
-    >
+    <div className="my-2 flex justify-between text-xs md:text-sm">
       <a
         href={
           !showDefaultLang && lang === defaultLang

src/components/markdown/blog-meta.tsx

@@ -15,11 +15,8 @@ export const BlogMeta = ({ post, minRead, lang }: Props) => {
   const { collection } = post;
   const tags = post.data?.tags ?? [];
   return (
-    <div
-      id="post-meta-container"
-      className="my-2 flex flex-col items-end justify-end text-xs md:text-sm"
-    >
-      <span id="reading-time" className="flex items-center justify-end gap-2">
+    <div className="my-2 flex flex-col items-end justify-end text-xs md:text-sm">
+      <span className="flex items-center justify-end gap-2">
         <TimerIcon />
         {minRead}
       </span>

src/components/markdown/tags.tsx

@@ -9,9 +9,9 @@ type Props = {
 };
 export const TagsComponent = ({ tags, lang, collection }: Props) => {
   return (
-    <div className="space-x-2 text-xs md:text-sm">
+    <div key={tags.join('-')} className="space-x-2 text-xs md:text-sm">
       {tags.map((tag) => (
-        <span>
+        <span key={tag}>
           <a
             className="text-link no-underline visited:text-link-visited hover:italic hover:text-link-hover hover:underline active:text-link-active"
             href={

src/content/blog/ja/2024/review-insta360flow.mdx

@@ -4,7 +4,7 @@ description: スマートフォンジンバルInsta360 FlowとDJI OM4の徹底
 category: gadgets
 published: 2024-04-05
 isPublished: true
-tags: ['review', 'Insta360', 'gimbal', 'スマホジンバル']
+tags: ['review', 'Insta360', 'gimbal', 'スマホジンバル', 'DJI']
 heroImage: https://funailog.imgix.net/2024/insta360flow-1.jpeg?auto=format,compress,enhance
 ---
 
@@ -35,16 +35,14 @@ heroImage: https://funailog.imgix.net/2024/insta360flow-1.jpeg?auto=format,compr
 
 ![Instal360Flow 0](https://funailog.imgix.net/2024/insta360flow-0.jpeg?auto=format,compress,enhance)
 
-
 https://www.insta360.com/jp/product/insta360-flow?_gl=1*c6mz6a*_up*MQ..&gclid=Cj0KCQjwn7mwBhCiARIsAGoxjaIhBJAWY687YK6XXIcnY4jckZg5rOQEZkSLUKG0eRlFUo2rcsZv6BsaAtgqEALw_wcB
 
-
 ### デザインと構造
 
 コンパクトでスタイリッシュなデザインが特徴的です。本体の大きさは以下です。
 
-- 収納時: 79.6 * 162.1 * 36mm
-- 伸張時: 73.6 * 269.4 * 69.9mm
+- 収納時: `79.6 x 162.1 x 36mm`
+- 伸張時: `73.6 x 269.4 x 69.9mm`
 
 重量は約370gとなっています。磁気スマートフォンクランプが30gほどなので合計で400g程度になります。
 
@@ -73,8 +71,21 @@ https://yamakame.com/%E6%9C%80%E8%BF%91%E3%81%AEiphone%E3%82%84%E9%AB%98%E6%80%A
 
 また他社製のものと比較すると被写体を追跡し続けるため、撮影者にとってより直感的な動作を実現しています。
 
+https://www.youtube.com/watch?v=lhTNTsCYV_E
+
 子供や撮影物が動いている場合にも、よりよい動画撮影を簡単に行うことができるため、撮影の失敗を減らし思い出をより美しく残すことができます。
 
+#### 3. 撮影モード
+
+以下の撮影モードを搭載しており、以下のような撮影が可能です。
+
+| 撮影モード   | 撮影特性                                                                                                        |
+| ------------ | --------------------------------------------------------------------------------------------------------------- |
+| 自動         | 初心者向けのモード、ジンバル設定を状況に応じて自動調節します                                                    |
+| フォロー     | 動作に合わせてジンバルが追従、被写体を見上げる撮影などに適しています                                            |
+| パンフォロー | 水平方向に撮影したり、被写体の周囲から撮影する際に適しています                                                  |
+| FPV          | このモードは、よりアクション性のある映像を撮影するためのモードでFPVドローンのような映像を撮影することができます |
+
 ### 付属品
 
 ![Instal360Flow 1](https://funailog.imgix.net/2024/insta360flow-1.jpeg?auto=format,compress,enhance)
@@ -101,32 +112,147 @@ https://www.amazon.com/dp/B0C14XCTCP?psc=1&ref=ppx_yo2ov_dt_b_product_details
 
 ここからは以前使っていたDJI OM4について軽く書いていきます。1年半から2年ぐらい利用しました。
 
+![DJI OM4](https://funailog.imgix.net/2024/DJIOM4-0.jpeg?auto=format,compress,enhance)
+
+プロダクトとしてはもう3年ほど前のものなので、新しい製品と比較すると機能面で劣る部分もありますが、それでも十分に使える製品です。
+
 ### デザインと構造
 
+#### 比較
+
+|      -       |     Insta360 Flow     |         DJI OM4         |
+| :----------: | :-------------------: | :---------------------: |
+|     重量     |         370g          |   390g + 72g（三脚）    |
+| 収納時サイズ |  79.6 x 162.1 x 36mm  | 99.5 x 163.99 x 46.5 mm |
+| 伸張時サイズ | 73.6 x 269.4 x 69.9mm | 119.6 x 276 x 103.6 mm  |
+
+三脚は別体ですが、付属します。Flowは三脚が内蔵されてこのサイズになっています。
+
+持ちやすさという点では、DJI OM4に軍配があがります。
+
+三脚が内蔵されていることでInsta360 Flowの手持ち部分が少し短いです。OM4にはストラップがついているため落下防止という観点でも安心です。
+
 ### 主な機能と特徴
 
+ActiveTrackモードもついているため、被写体を追跡することができます。
+追跡モードの精度は世代が古いため、Insta360 Flowに比べると劣りますが、それでも十分に使えるレベルです。
+
+また、いくつかのモードもサポートしており、以下のような撮影が可能です。
+
+| 撮影モード     | 撮影特性                                                                                                        |
+| -------------- | --------------------------------------------------------------------------------------------------------------- |
+| フォロー       | 動作に合わせてジンバルが追従、被写体を見上げる撮影などに適しています                                            |
+| チルトロック   | ジンバルを固定して、被写体を中心に撮影することができます                                                        |
+| スピンショット | ジンバルを中心に回転させることで、360度の映像を撮影することができます                                           |
+| FPV            | このモードは、よりアクション性のある映像を撮影するためのモードでFPVドローンのような映像を撮影することができます |
+
+ほぼ同じなので、撮影モードにおける遜色はなさそうです。
+
 ### 付属品
 
+- ポーチ
+- 磁気スマートフォンクランプ
+- USB-Cケーブル
+- 取扱説明書
+- 三脚（別体）
+- ストラップ
+
 ## 操作性・使いやすさ
 
+各製品ともに大きな操作性に違いはありませんが、DJI OM4の方が物理的な操作が多いため、より直感的に操作できると感じました。
+
+Insta360 Flowに搭載されているスマートホイールが結構使いづらいと感じました。AppleのiPod Shffuleを感じさせる作りですが、スクロールしたかがわかりにくいです（慣れるまで）。
+
+携帯性に関しては完全にInsta360 Flowが勝っています。三脚が内蔵されていて収納時の形が四角いため、持ち運びがしやすいです。
+またflowは畳むだけで電源が切れるので、電源ボタンを押す必要がないのも便利です。
+
+![Compare DJIOM4 and Insta360 Flow](https://funailog.imgix.net/2024/compare-DJIOM4-Insta360Flow.jpeg?auto=format,compress,enhance)
+
 ### セットアップ方法
 
+初回操作時に、アプリをダウンロードして設定を行う必要がありますが、非常に簡単です。
+
+そのため特に難しいセットアップ方法はありません。
+
+基本はスマートフォンクランプにスマートフォンを取り付け、ジンバルに取り付けた上でアプリとの接続を行うだけです。
+
 ### アプリの使用感
 
+ここでは主に各種付帯のアプリケーションの使い勝手について述べます。
+
+#### Insta360
+
+全体的に優秀で欲しい場所に欲しい機能があると感じます。
+動画撮影時の出力されたファイルも名前に時間が入っているので、管理しやすいです。
+
+PCに取り込んだあとにファイル名が独特だと困ることがあるので、この点は非常に使いやすいです（というか必須レベル）。
+
+#### DJI Mimo
+
+DJI OM4のアプリですが、こちらも非常に使いやすいです。
+一方でInsta360で書いたように、ファイル名が独特なので、管理が少し面倒です。
+
+これが致命的で、毎度ファイルを整理する際に動画を再生して確認する必要があります。非常にコストが高いので設定で変更できるようにすべきだと思いました。
+解決策があれば良さそうですが2023年10月ぐらいに確認した際は見つけられませんでした。
+
 ### ジェスチャーコントロール
 
+あまり書くことはありませんが、両方の製品ともにジェスチャーコントロールが可能です。
+アプリで設定を行うことで、ジェスチャーコントロールを有効にすることができます。
+
+撮影時やトラッキングのオンオフをジェスチャーで行うことができるため、よりスムーズに操作することができます。
+
 ### バッテリー持続時間
 
-## 撮影性能
+|       -        | Insta360 Flow | DJI OM4 |
+| :------------: | :-----------: | :-----: |
+|  連続録画時間  |    12時間     | 15時間  |
+|    充電時間    |     2時間     | 2.5時間 |
+| バッテリー容量 |    2900mAh    | 2450mAh |
+
+特筆することはありませんが、12時間でも全く問題有りません。
+
+15時間と比較すると劣りますが、実際に使ってみると12時間でも十分に使えると感じました。
+もちろん、長く使える方が良いですが…。
 
 ### 手ぶれ補正
 
+自分の経験上、Insta360 Flowの手ぶれ補正の方が非常に優秀だと感じました。
+これは世代の違いもあるかもしれません。
+
+Insta360 Flowの手ぶれ補正は非常に滑らかです。DJI OM4も十分に使えるレベルですが、Insta360 Flowの方が優秀だと感じました。
+
 ### トラッキング機能
 
+言うまでもなく、Insta360 Flowのトラッキング機能の方が優秀です。追跡精度が高く、被写体を追い続けることができます。
+OM4の追跡機能も使えますが、被写体が他の物体に隠れたりすると追跡が外れること多いです。
+
+これに関しては、アプリの構成や実装の違いが影響していると思われます。
+
 ## 総合評価
 
-### 長所と短所
+今買うなら間違いなくInsta360 Flowを選びます。
+
+DJI OM4も十分に使える製品ですが、Insta360 Flowの方が機能面で優れていると感じました。
+コストパフォーマンスや価格を気にする場合は、OM4を中古で購入するのも良い選択肢だと思います。
 
 ### 価格とコストパフォーマンス
 
+新品価格でInsta360 Flowは2万円弱です。
+
+今DJI製品を購入するなら OM6が最新世代です。こちらも2万円弱です。
+
+- https://www.dji.com/jp/osmo-mobile-6
+
+価格差もハードウェア的な機能差もほぼないため、プロダクトデザインとアプリの使いやすさで決めることをおすすめします。
+
 ## まとめ
+
+約2週間ほどInsta360 Flowを使ってみましたが、非常に満足しています。
+スマートフォンだけでの撮影も十分に使えるレベルですが、ジンバルを使うことでよりプロフェッショナルな映像を撮影することができます。
+
+また、アクティブトラッキング機能も非常に優秀で、被写体を追跡し続けることができます。
+
+2万円弱という価格も手頃で、コストパフォーマンスも非常に高いと感じたし、遊ぶのが楽しいです。
+
+ぜひ興味がある方は、購入を検討してみてください。

src/lib/remark-link-card.ts → src/lib/remark-link.ts

@@ -23,11 +23,14 @@ const remarkLinkcard: Plugin<void[], Root> = () => {
         return;
       }
 
+      const isYoutubeLink = child.url.includes('youtube');
+
       child.data = {
         ...child.data,
         hProperties: {
           ...child.data?.hProperties,
           dataLinkcard: true,
+          dataYoutube: isYoutubeLink,
         },
       };
     });