KDP(電子出版)のメモ　急急如律令

Amazon Kindleダイレクト・パブリッシングでの電子出版や電子書籍の作成販売について、文章やイラストの作成や編集方法について書いています。

astroでmdでブログをつくり、amazonアフィリエイトのjsonデータを利用して表示する

javascript

You:

それは文字コードが UTF-8 ではなく Shift_JIS(CP932) になっている可能性が高いです。

繝�せ繝� は典型的な文字化けです。

原因

MDXファイル：





post1.mdx







が：







Shift_JIS

CP932

EUC-JP







などで保存されている。



Astro は UTF-8 前提。






修正方法



VSCodeの場合



右下を見る：







Shift JIS







になっていたらクリック。






UTF-8で保存







UTF-8 に再度保存







を選ぶ。






VSCode手順



    

  1. 右下の文字コードクリック
    2. 

  2. 「エンコーディング付きで保存」
    3. 

  3. UTF-8
    4. 








正常なら



mdx








title: テスト



pubDate: 2026-05-08 



Hello







↓







テスト

Hello







になる。






Windowsで特に多い原因



メモ帳



古いWindowsメモ帳は：







ANSI = CP932







保存になりやすい。






Gatsby旧記事で多い



昔の：



    

  • 秀丸
    • 

  • サクラエディタ
    • 

  • メモ帳
    • 

  • 古いNode script
    • 





で生成したMDはShift_JIS混在がある。






一括変換おすすめ



大量移行なら：



VSCode拡張



    

  • Reopen with Encoding
    • 

  • Change File Encoding
    • 








nkf（超おすすめ）



Bash





npm install -g nkf







確認：



Bash





nkf --guess post1.mdx







変換：



Bash





nkf -w--overwrite post1.mdx










Gatsby→Astro移行で重要



大量MDX移行時は：







全md/mdxをUTF-8化







を最初にやるのがかなり重要。






PowerShellで一括確認も可能



PowerShell





Get-ChildItem-Recurse*.mdx







とかで一覧化できる。



ChatGPT:



を追加したら文字化けしなくなった



表示を増やす表示を減らす



You:



それなら原因はHTML側の文字コード宣言不足でした。



つまりMDX自体はUTF-8で、ブラウザが文字コードを自動判定して誤認識していた状態です。






修正できた理由



これを追加：



HTML





<metacharset="utf-8">







するとブラウザに：







このHTMLはUTF-8です







と明示できる。






Astroでは通常Layoutに入れる



astro







  

    

  



  

    

  












さらに推奨



astro












も追加。






Astroの推奨形



astro








const { title } = Astro.props; 



<!DOCTYPE html>





  

    



<meta  
  name="viewport"  
  content="width=device-width"  
/>  

<title>{title}</title>  




  



  

    

  












なぜ起きたのか



HTML5では：



HTML





<metacharset="utf-8">







が無いと、

ブラウザが推測で：



    

  • Shift_JIS
    • 

  • ISO-8859-1
    • 





など誤認識することがある。



特に日本語は化けやすい。






Gatsbyでは起きにくかった理由



Gatsby は内部でHead管理されていて：



HTML





<metacharset="utf-8">







が自動挿入されていた。



AstroはLayoutを自分で書くので、

忘れると起きる。



ChatGPT:



gatsbyのようにフォルダー名をslugにできないか



表示を増やす表示を減らす



You:



できます。

Astro でも Gatsby のように







blog/

  my-post/

    index.mdx







↓







/blog/my-post/







構成にできます。



しかもAstroではかなり自然に対応できます。






Gatsby風構成



おすすめ







src/content/blog/



  my-post/

    index.mdx



  another-post/

    index.mdx










この場合の id



Astroでは：







my-post/index







になる。






URLを整形する



[...slug].astro



通常の：







[slug].astro







ではなく、







[...slug].astro







を使う。






重要







src/pages/blog/[...slug].astro










コード



astro








import { getCollection, render } from 'astro:content';



export async function getStaticPaths() {

  const posts = await getCollection('blog');



  return posts.map(post => ({

    params: {

      slug: post.id.replace(/\/index$/, ''),

    },



props: {  
  post,  
},  




  }));

}



const { post } = Astro.props;



const { Content } = await render(post); 





  

    
{post.data.title}



<Content />  




  












URL結果



ファイル







src/content/blog/my-post/index.mdx







↓



URL







/blog/my-post/










nestedも可能







src/content/blog/2026/my-post/index.mdx







↓







/blog/2026/my-post/










Gatsby移行でかなりおすすめ



これは：



    

  • Gatsbyのpath構成に近い
    • 

  • slugが綺麗
    • 

  • index.mdx文化を維持可能
    • 





ので移行しやすい。






さらにGatsbyっぽくするなら



frontmatterに：



YAML





slug: kindle-sale-20260411







を持たせて、



astro





slug: post.data.slug ?? post.id.replace(/\/index$/, '')







にするとURL固定できる。






実務的にはかなりおすすめ



特にあなたみたいな：



    

  • セール記事大量
    • 

  • MDX大量
    • 

  • Gatsby移行
    • 





では、







フォルダ = URL







文化は管理しやすいです。






最終的におすすめ構成







src/content/blog/



  kindle-sale-20260411/

    index.mdx



  kindle-sale-20260412/

    index.mdx







これが一番Gatsby移行しやすい構成。