diff --git a/microcms-rich-parser/LOCAL_TESTING.md b/microcms-rich-parser/LOCAL_TESTING.md new file mode 100644 index 0000000..26d0228 --- /dev/null +++ b/microcms-rich-parser/LOCAL_TESTING.md @@ -0,0 +1,222 @@ +# MicroCMS Rich Parser - ローカルテストガイド + +このドキュメントでは、`microcms-rich-parser` ライブラリをローカル環境で簡単にテストする方法を説明します。 + +## 🚀 クイックスタート + +### 前提条件 + +- Node.js がインストールされていること +- ライブラリがビルドされていること + +### 1. ライブラリのビルド + +```bash +cd /Users/hiromichiema/src/github.com/emahiro/llmlab/microcms-rich-parser +npm install +npm run build +``` + +### 2. テスト方法の選択 + +以下の3つの方法でライブラリをテストできます： + +## 📋 方法1: Node.js でのテスト + +最もシンプルな方法です。コマンドラインで結果を確認できます。 + +```bash +# examples ディレクトリに移動 +cd examples + +# Node.js テストスクリプトを実行 +node test-node.js +``` + +### 実行結果 + +``` +=== MicroCMS Rich Parser テスト === + +1. 基本的な使用方法（ライトモード）: +✅ パース成功 - 文字数: 12345 + +2. ダークモード: +✅ ダークモードパース成功 - 文字数: 12456 + +3. カスタムクラス名: +✅ カスタムクラス名パース成功 + +4. 生成されたHTMLの確認: +- ライトモード CSS クラス含有: true +- ダークモード CSS クラス含有: true +- スタイル要素含有: true + +5. HTMLファイル出力: +✅ test-output.html を生成しました + +=== テスト完了 === +ブラウザで examples/test-output.html を開いて結果を確認してください。 +``` + +## 🌐 方法2: ブラウザでのインタラクティブテスト + +実際のブラウザでスタイリングを確認できます。 + +### ローカルサーバーの起動 + +```bash +# examples ディレクトリに移動 +cd examples + +# Python を使ったローカルサーバー（推奨） +python3 -m http.server 8080 + +# または npm を使用 +npm run serve +``` + +### ブラウザでアクセス + +1. ブラウザで `http://localhost:8080` にアクセス +2. `test-browser.html` をクリック +3. インタラクティブなテストページが表示されます + +### 利用可能な機能 + +- 🌙 **ダークモード切り替え**: チェックボックスでライト/ダークモードを切り替え +- 🎨 **カスタムクラス名**: CSS クラス名をカスタマイズ +- 🔄 **リアルタイム更新**: 設定変更時に即座に結果を反映 +- 📄 **生HTML表示**: 生成されたHTMLコードを確認 + +## 📁 方法3: 静的ファイルとして直接開く + +サーバーを起動せずに、直接HTMLファイルを開くことも可能です。 + +```bash +# test-output.html を直接ブラウザで開く +open examples/test-output.html # macOS +start examples/test-output.html # Windows +xdg-open examples/test-output.html # Linux +``` + +## 📂 ファイル構成 + +``` +microcms-rich-parser/ +├── examples/ +│ ├── test-node.js # Node.js テストスクリプト +│ ├── test-browser.html # ブラウザテストページ +│ ├── test-output.html # 生成されるテスト結果 +│ └── package.json # examples用の設定 +├── dist/ +│ ├── index.js # ビルドされたライブラリ +│ └── index.d.ts # TypeScript定義ファイル +└── src/ + └── index.ts # ソースコード +``` + +## 🧪 テスト内容 + +### 含まれているテストケース + +1. **基本的なパース機能** + - MicroCMSのHTMLレスポンスを正しくパースできるか + - CSSスタイルが適用されているか + +2. **ダークモード** + - ダークモード用のCSSクラスが適用されるか + - 色彩設定が正しく反映されるか + +3. **カスタマイズ機能** + - カスタムクラス名が設定できるか + - オプションが正しく動作するか + +4. **HTMLエレメントの処理** + - 段落（`

`）のスタイリング + - ブロッククォート（`

`）の装飾 + - リンク（``）のスタイリング + - 水平線（`
`）の装飾 + +### サンプルデータ + +テストには実際のMicroCMSレスポンスを模したHTMLデータを使用しています： + +- 日本語テキスト +- ブロッククォート +- 外部リンク +- 水平線 +- 複数段落の構成 + +## 🔧 トラブルシューティング + +### よくある問題と解決方法 + +#### 1. "Cannot find module" エラー + +```bash +# ライブラリをビルドし直す +npm run build + +# Node.js のバージョンを確認 +node --version +``` + +#### 2. ブラウザでスタイルが適用されない + +- ローカルサーバーを使用してアクセスしているか確認 +- ブラウザの開発者ツールでコンソールエラーを確認 +- `dist/index.js` ファイルが存在するか確認 + +#### 3. 文字化けが発生する + +- HTMLファイルの文字エンコーディングが UTF-8 に設定されているか確認 +- ブラウザの文字エンコーディング設定を確認 + +#### 4. CSS スタイルが読み込まれない + +- ライブラリが CSS を内部に含んでいるため、外部CSSファイルは不要 +- `npm run build` でビルドが正常に完了しているか確認 + +## 📝 カスタマイズ + +### 独自のテストデータを使用する + +`test-node.js` または `test-browser.html` 内の `sampleHTML` 変数を編集してください： + +```javascript +const sampleHTML = `あなたのMicroCMSレスポンスHTMLをここに貼り付け`; +``` + +### スタイルのカスタマイズ + +生成されるCSSをカスタマイズしたい場合は、`src/index.ts` を編集してから再ビルドしてください： + +```bash +# ソースコードを編集後 +npm run build + +# テストを再実行 +cd examples +node test-node.js +``` + +## 🎯 次のステップ + +ローカルテストが成功したら： + +1. **本番環境での統合**: 実際のプロジェクトにライブラリを組み込み +2. **NPM公開**: README.md の公開手順に従ってNPMに公開 +3. **カスタマイズ**: 必要に応じてスタイルや機能を拡張 + +## 📞 サポート + +問題が発生した場合： + +1. ブラウザの開発者ツールでエラーを確認 +2. Node.js のバージョンが対応しているか確認 +3. ライブラリが最新の状態でビルドされているか確認 + +--- + +**Happy Coding! 🚀** \ No newline at end of file diff --git a/microcms-rich-parser/examples/package.json b/microcms-rich-parser/examples/package.json new file mode 100644 index 0000000..a02ee39 --- /dev/null +++ b/microcms-rich-parser/examples/package.json @@ -0,0 +1,10 @@ +{ + "name": "microcms-rich-parser-examples", + "version": "1.0.0", + "description": "Local testing examples for microcms-rich-parser", + "scripts": { + "test": "node test-node.js", + "serve": "python3 -m http.server 8080 || python -m SimpleHTTPServer 8080" + }, + "dependencies": {} +} \ No newline at end of file diff --git a/microcms-rich-parser/examples/test-browser.html b/microcms-rich-parser/examples/test-browser.html new file mode 100644 index 0000000..10ce710 --- /dev/null +++ b/microcms-rich-parser/examples/test-browser.html @@ -0,0 +1,174 @@ + + + + + + MicroCMS Rich Parser - ブラウザテスト + + + +
+

🎨 MicroCMS Rich Parser - ブラウザテスト

+ +
+
+ +
+
+ +
+ + +
+ +
+

📝 パース結果

+
+
+ + +
+ + + + + + \ No newline at end of file diff --git a/microcms-rich-parser/examples/test-node.js b/microcms-rich-parser/examples/test-node.js new file mode 100644 index 0000000..ada88e9 --- /dev/null +++ b/microcms-rich-parser/examples/test-node.js @@ -0,0 +1,56 @@ +const { parseMicroCMSHTML, MicroCMSRichParser } = require('../dist/index.js'); + +// MicroCMSから返されるサンプルHTML +const sampleHTML = `

Twitter にかくと炎上しそうなネタでもあるので、割と時流のホットなコンテンツは最近 Bluesky に自分の意見やスタンスを書いていることが多い。

タイトルの通り WFH か RTO かという話はコロナ禍から時間が経って、欧米圏では一定の解答が出つつあり、国内でもある程度企業ごとの方針は固まってきていると思っていたけど、そういった先行してスタンスを取る企業に遅れて最近になってスタンスを変更する企業の話もまたポツポツ聞くようになってきた。

身近でもそういった話を聞いたので Bluesky にこういった一連の投稿をしてみた。

RTO 云々はだいぶ落ち着いたと思ってたけどまだポツポツ話は聞くな。自分はもうRTOになって久しいし、出社も悪くないと思ってるし、なにより出社にこだわらない方がキャリアの選択肢広がってポジティブな側面もあるので、世間の RTOの風潮に対して思うところはないんだけど、まぁRTO かかった時に現場レベルであれこれ画策するのはまぁ無駄かなとは思う。

[emahiro (@emahiro.bsky.social)](https://bsky.app/profile/emahiro.bsky.social/post/3l4bungcwtr2e)

ちょうどタイムリーに Amazon が RTO を週5にするというニュースが界隈をだいぶ賑やかにさせた。

これについてはこんなコメントをした。

文化の維持という側面はあるにせよ、コロナ禍の雇い過ぎからのゆり戻しをまだ続けてる、というふうに見えないこともない。

話は少し逸れてしまったが、１個人として見ると WFH ほど良いものはないが、それは個人最適の話であって全体最適で見るとまた話は違ってくるのだろうと思う。

`; + +console.log('=== MicroCMS Rich Parser テスト ===\n'); + +// テスト1: 基本的な使用方法 +console.log('1. 基本的な使用方法（ライトモード）:'); +const lightModeResult = parseMicroCMSHTML(sampleHTML); +console.log('✅ パース成功 - 文字数:', lightModeResult.length); + +// テスト2: ダークモード +console.log('\n2. ダークモード:'); +const darkModeResult = parseMicroCMSHTML(sampleHTML, { darkMode: true }); +console.log('✅ ダークモードパース成功 - 文字数:', darkModeResult.length); + +// テスト3: カスタムクラス名 +console.log('\n3. カスタムクラス名:'); +const parser = new MicroCMSRichParser({ + darkMode: false, + className: 'my-custom-blog-content' +}); +const customResult = parser.parse(sampleHTML); +console.log('✅ カスタムクラス名パース成功 - 文字数:', customResult.length); + +// テスト4: 生成されたHTMLの確認 +console.log('\n4. 生成されたHTMLの確認:'); +console.log('- ライトモード CSS クラス含有:', lightModeResult.includes('microcms-rich-content')); +console.log('- ダークモード CSS クラス含有:', darkModeResult.includes('dark-mode')); +console.log('- スタイル要素含有:', lightModeResult.includes(' + +

ダークモード

+

Twitter にかくと炎上しそうなネタでもあるので、割と時流のホットなコンテンツは最近 Bluesky に自分の意見やスタンスを書いていることが多い。

タイトルの通り WFH か RTO かという話はコロナ禍から時間が経って、欧米圏では一定の解答が出つつあり、国内でもある程度企業ごとの方針は固まってきていると思っていたけど、そういった先行してスタンスを取る企業に遅れて最近になってスタンスを変更する企業の話もまたポツポツ聞くようになってきた。

身近でもそういった話を聞いたので Bluesky にこういった一連の投稿をしてみた。

RTO 云々はだいぶ落ち着いたと思ってたけどまだポツポツ話は聞くな。自分はもうRTOになって久しいし、出社も悪くないと思ってるし、なにより出社にこだわらない方がキャリアの選択肢広がってポジティブな側面もあるので、世間の RTOの風潮に対して思うところはないんだけど、まぁRTO かかった時に現場レベルであれこれ画策するのはまぁ無駄かなとは思う。

[emahiro (@emahiro.bsky.social)](https://bsky.app/profile/emahiro.bsky.social/post/3l4bungcwtr2e)

ちょうどタイムリーに Amazon が RTO を週5にするというニュースが界隈をだいぶ賑やかにさせた。

これについてはこんなコメントをした。

文化の維持という側面はあるにせよ、コロナ禍の雇い過ぎからのゆり戻しをまだ続けてる、というふうに見えないこともない。

話は少し逸れてしまったが、１個人として見ると WFH ほど良いものはないが、それは個人最適の話であって全体最適で見るとまた話は違ってくるのだろうと思う。

+ + \ No newline at end of file