Merge pull request #49 from Rikublender3d/feat/optimization

feat:add a/b test and author API

Author: Rikublender3d

package-lock.json

@@ -14,6 +14,7 @@
     "prepare": "husky install"
   },
   "dependencies": {
+    "@google-analytics/data": "^5.2.1",
     "framer-motion": "^12.25.0",
     "hamburger-react": "^2.5.2",
     "isomorphic-dompurify": "^2.28.0",

package.json

@@ -344,7 +344,7 @@ export default function AboutPage() {
                   </div>
                   <div className="rounded-lg border border-gray-200 bg-white p-6">
                     <h3 className="mb-2 text-xl font-semibold text-[color:var(--foreground)]">
-                      医療法人社団芯聖会
+                      一般社団法人 未来医療連携機構
                     </h3>
                     <Link
                       href="https://shinsei-kai.jp/"

public/next.svg

@@ -11,6 +11,7 @@ import { SafeHTML } from '@/components/SafeHTML'
 import { ArticleCard } from '@/components/ArticleCard'
 import { TableOfContents } from '@/components/TableOfContents'
 import { ArticleSidebar } from '@/components/ArticleSidebar'
+import ShareButtons from '@/components/ShareButtons'
 import { notFound } from 'next/navigation'
 
 export const dynamic = 'force-dynamic'
@@ -160,62 +161,10 @@ export default async function DraftPage({ params, searchParams }: Props) {
                 </div>
               </div>
 
-              {/* ソーシャルシェア */}
-              <div className="mt-8 flex items-center gap-4">
-                <span className="text-sm font-medium text-gray-600">
-                  シェア:
-                </span>
-                <div className="flex gap-2">
-                  <a
-                    href={`https://x.com/intent/tweet?url=${encodeURIComponent(`https://www.ishatohaisha.com/draft/${article.id}?draftKey=${draftKey}`)}&text=${encodeURIComponent(article.title)}`}
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    className="flex h-8 w-8 items-center justify-center rounded-full bg-black text-white transition-colors hover:bg-gray-800"
-                    aria-label="X（旧Twitter）でシェア"
-                  >
-                    <svg
-                      className="h-4 w-4"
-                      fill="currentColor"
-                      viewBox="0 0 24 24"
-                      aria-hidden="true"
-                    >
-                      <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" />
-                    </svg>
-                  </a>
-                  <a
-                    href={`https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(`https://www.ishatohaisha.com/draft/${article.id}?draftKey=${draftKey}`)}`}
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    className="flex h-8 w-8 items-center justify-center rounded-full bg-blue-600 text-white transition-colors hover:bg-blue-700"
-                    aria-label="Facebookでシェア"
-                  >
-                    <svg
-                      className="h-4 w-4"
-                      fill="currentColor"
-                      viewBox="0 0 24 24"
-                      aria-hidden="true"
-                    >
-                      <path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z" />
-                    </svg>
-                  </a>
-                  <a
-                    href={`https://www.linkedin.com/shareArticle?mini=true&url=${encodeURIComponent(`https://www.ishatohaisha.com/draft/${article.id}?draftKey=${draftKey}`)}&title=${encodeURIComponent(article.title)}`}
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    className="flex h-8 w-8 items-center justify-center rounded-full bg-blue-600 text-white transition-colors hover:bg-blue-700"
-                    aria-label="LinkedInでシェア"
-                  >
-                    <svg
-                      className="h-4 w-4"
-                      fill="currentColor"
-                      viewBox="0 0 24 24"
-                      aria-hidden="true"
-                    >
-                      <path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z" />
-                    </svg>
-                  </a>
-                </div>
-              </div>
+              <ShareButtons
+                url={`https://www.ishatohaisha.com/draft/${article.id}?draftKey=${draftKey}`}
+                title={article.title}
+              />
               {/* 関連記事 */}
               {relatedArticlesWithEndpoint.length > 0 && (
                 <div className="mt-12">

public/note.svg

@@ -9,6 +9,8 @@ import { SafeHTML } from '@/components/SafeHTML'
 import { ArticleCard } from '@/components/ArticleCard'
 import { TableOfContents } from '@/components/TableOfContents'
 import { ArticleSidebar } from '@/components/ArticleSidebar'
+import AuthorInfo from '@/components/AuthorInfo'
+import ShareButtons from '@/components/ShareButtons'
 import { notFound } from 'next/navigation'
 import type { Metadata } from 'next'
 
@@ -143,80 +145,12 @@ export default async function ArticlePage({ params }: Props) {
               </div>
 
               {/* 著者情報セクション */}
-              <div className="mt-12 rounded-xl border border-gray-200 bg-gray-50 p-6">
-                <div className="flex items-start gap-4">
-                  <div className="h-16 w-16 overflow-hidden rounded-full bg-gray-300">
-                    <div className="flex h-full w-full items-center justify-center text-2xl text-gray-600">
-                      👨‍⚕️
-                    </div>
-                  </div>
-                  <div className="flex-1">
-                    <h3 className="mb-2 text-lg font-semibold text-[color:var(--foreground)]">
-                      編集部
-                    </h3>
-                    <p className="text-sm text-gray-600">
-                      医者と歯医者の交換日記編集部です。医科歯科連携に関する最新情報や実践的なノウハウをお届けしています。
-                    </p>
-                  </div>
-                </div>
-              </div>
+              <AuthorInfo author={article.author} />
 
-              {/* ソーシャルシェア */}
-              <div className="mt-8 flex items-center gap-4">
-                <span className="text-sm font-medium text-gray-600">
-                  シェア:
-                </span>
-                <div className="flex gap-2">
-                  <a
-                    href={`https://x.com/intent/tweet?url=${encodeURIComponent(`https://www.ishatohaisha.com/general/${article.id}`)}&text=${encodeURIComponent(article.title)}`}
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    className="flex h-8 w-8 items-center justify-center rounded-full bg-black text-white transition-colors hover:bg-gray-800"
-                    aria-label="X（旧Twitter）でシェア"
-                  >
-                    <svg
-                      className="h-4 w-4"
-                      fill="currentColor"
-                      viewBox="0 0 24 24"
-                      aria-hidden="true"
-                    >
-                      <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" />
-                    </svg>
-                  </a>
-                  <a
-                    href={`https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(`https://www.ishatohaisha.com/general/${article.id}`)}`}
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    className="flex h-8 w-8 items-center justify-center rounded-full bg-blue-600 text-white transition-colors hover:bg-blue-700"
-                    aria-label="Facebookでシェア"
-                  >
-                    <svg
-                      className="h-4 w-4"
-                      fill="currentColor"
-                      viewBox="0 0 24 24"
-                      aria-hidden="true"
-                    >
-                      <path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z" />
-                    </svg>
-                  </a>
-                  <a
-                    href={`https://www.linkedin.com/shareArticle?mini=true&url=${encodeURIComponent(`https://www.ishatohaisha.com/general/${article.id}`)}&title=${encodeURIComponent(article.title)}`}
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    className="flex h-8 w-8 items-center justify-center rounded-full bg-blue-600 text-white transition-colors hover:bg-blue-700"
-                    aria-label="LinkedInでシェア"
-                  >
-                    <svg
-                      className="h-4 w-4"
-                      fill="currentColor"
-                      viewBox="0 0 24 24"
-                      aria-hidden="true"
-                    >
-                      <path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z" />
-                    </svg>
-                  </a>
-                </div>
-              </div>
+              <ShareButtons
+                url={`https://www.ishatohaisha.com/general/${article.id}`}
+                title={article.title}
+              />
               {/* 関連記事 */}
               {relatedArticlesWithEndpoint.length > 0 && (
                 <div className="mt-12">

src/app/about/page.tsx

@@ -5,6 +5,7 @@ import './globals.css'
 import { Header } from '@/components/layout/Header'
 import { Footer } from '@/components/layout/Footer'
 import { Breadcrumb } from '@/components/layout/Breadcrumb'
+import { getTags } from '@/lib/microCMS/microcms'
 import { GoogleTagManager } from '@/components/analytics/GoogleTagManager'
 import { GoogleTagManagerNoScript } from '@/components/analytics/GoogleTagManager'
 import { AutoBtnId } from '@/components/analytics/AutoBtnId'
@@ -49,11 +50,14 @@ export const metadata: Metadata = {
   },
 }
 
-export default function RootLayout({
+export default async function RootLayout({
   children,
 }: Readonly<{
   children: React.ReactNode
 }>) {
+  const tagsRes = await getTags()
+  const tags = tagsRes.contents.map(({ id, name }) => ({ id, name }))
+
   return (
     <html lang="ja" suppressHydrationWarning>
       <head>
@@ -62,7 +66,7 @@ export default function RootLayout({
       <body className={`${zenKakuGothicNew.variable} antialiased`}>
         <GoogleTagManagerNoScript />
         <AutoBtnId />
-        <Header />
+        <Header tags={tags} />
         <Suspense fallback={null}>
           <Breadcrumb />
         </Suspense>