質問編集履歴

修正

2024/12/17 17:35

投稿

munekun

スコア108

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -19,9 +19,9 @@
 もしこの方法をご存じの方がいらっしゃったらご教示いただけますと幸いです。
 ##### 考えていること２
-上述したように IndexedDB への保存ができなそうだ、と悩んでいたのですが、そもそももしかして、zip ファイルを読んだ際にもキャッシュって効くのでしょうか？だとしたら IndexedDB への保存など不要？
+上述したように IndexedDB への保存という案では実装できなそうだ、と悩んでいたのですが、そもそももしかして、zip ファイルを読んだ際にもキャッシュって効くのでしょうか？だとしたら IndexedDB への保存など不要？
-実際に以下のコードを試したところ、１回目と２回目で半分くらいの時間になったので、どうやら zip ファイルにもキャッシュが効くのか？と思えたのですが、その確証が得れません。
+実際に以下のような計測コードを試したところ、１回目と２回目で半分くらいの時間になったので、どうやら zip ファイルにもキャッシュが効くのか？と思えたのですが、その確証が得れません。
 ```JavaScript
 (() => {
     const DICT_PATH = "./dict";
@@ -64,7 +64,7 @@
 ただこのライブラリが Kuromoji の辞書データである zip ファイルを解凍し、キャッシュし、よしなにしてくれるのか？までは調査、読解するスキルがありませんでした。
-以上です。なんだかいまいちまとまっていない文章になってしまいましたが、質問としては Kuromoji の辞書データを効率的に（サーバー負荷を少なく）扱う方法と、そもそもそんな方法を模索しなくてもキャッシュされているのか否か、という２点になります。
+以上です。なんだかいまいちまとまっていない文章になってしまいましたが、質問としては Kuromoji の辞書データを効率的に（サーバー負荷を少なく）扱う方法か、またはそもそもそんな方法を模索しなくてもキャッシュされているから何もしなくてもいいのか、という２点になります。
 よろしくお願い致します。

JavaScript

修正

2024/12/17 17:33

投稿

munekun

スコア108

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -1,10 +1,7 @@
 ### 前提
 形態素解析を実装したいので、Kuromoji というライブラリを導入しました。
-下記リンクのおかげもあり、基本的な動作は確認済みです。
-> Kuromojiでかんたん形態素解析
-> https://zenn.dev/sdkfz181tiger/articles/daef6f0f8156d8
+[Kuromojiでかんたん形態素解析](https://zenn.dev/sdkfz181tiger/articles/daef6f0f8156d8) という記事のおかげもあり、基本的な動作は確認済みです。
 ### 目的
 目的はこの辞書データの効率的な参照です。
@@ -76,7 +73,7 @@
 ・初回訪問した際は `initializeTokenizer()` を実行して IndexedDB に保存
 ・形態素解析の際は `analyzeText()` で解析
-ということが出来るかも？と思ったのですが、初回訪問の `initializeTokenizer()` の時点で blob:https:/example.com/[UUID]/base.dat.gz などの GET ができないとコンソールにエラーが出まくってしまい、断念しました。（この方針も、そもそもブラウザが１回読んだ zip ファイルを自動でキャッシュしてくれるのであれば不要ですが。）
+ということが出来るかも？と思ったのですが、初回訪問の `initializeTokenizer()` の時点で `blob:https:/example.com/[UUID]/base.dat.gz` など各種辞書データの GET ができないとコンソールにエラーが出まくってしまい、断念しました。（この方針も、そもそもブラウザが１回読んだ zip ファイルを自動でキャッシュしてくれるのであれば不要ですが。）
 ```JavaScript
 /*----------------------------------------------------------------------------------------------------

JavaScript

タイトル

2024/12/17 17:29

投稿

munekun

スコア108

test CHANGED Viewed

	@@ -1 +1 @@
1	- zipファイルをJavaScriptで読む際の効率的な方法（~~自分でどこか~~に保存し呼ぶ方法、またはそんなことをせずとも勝手にキャッシュされているのか）
1	+ zipファイルをJavaScriptで読む際の効率的な方法（１回目にローカルに保存し２回目以降はそれを読む方法、またはそんなことをせずとも勝手にキャッシュされ効率的になっているのか知りたい）

test CHANGED Viewed

File without changes

JavaScript

タイトル

2024/12/17 17:17

投稿

munekun

スコア108

test CHANGED Viewed

	@@ -1 +1 @@
1	- zipファイルをJavaScriptで読む際の効率的な方法
1	+ zipファイルをJavaScriptで読む際の効率的な方法（自分でどこかに保存し呼ぶ方法、またはそんなことをせずとも勝手にキャッシュされているのか）

test CHANGED Viewed

File without changes

JavaScript

補足

2024/12/17 17:15

投稿

munekun

スコア108

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -14,7 +14,7 @@
 ### 考えていること
 ##### 考えていること１
-1度読み込んだ zip ファイルを何度も読むことは避けたいと思い、IndexedDB への保存を試みました。
+１回読んだ zip ファイルを何度も読むことは避けたいと思い、IndexedDB への保存を試みました。
 しかし、Kuromoji は `kuromoji.builder()` なる関数によって辞書を参照するようで、その引数に指定できる値が辞書へのURLだけのようでした。
 つまり、IndexedDB へ保存しても、それを `kuromoji.builder()` のために参照する方法がなさそう、ということです。
@@ -57,17 +57,138 @@
 })();
 ```
-どうなのでしょうか？もしキャッシュが効くのなら、特に何もしなくてもできる限り効率的な実装がなされていると考えていいのでしょうか?
+どうなのでしょうか？もしキャッシュが効くのなら、特に何もしなくてもできる限り効率的な実装がなされていると考えていいのでしょうか？
 ### 確認したこと
-Kuromoji は CDN で下記リンクから読んでいます。
+Kuromoji は CDN で下記リンクから読んでおりまして、
 https://cdn.jsdelivr.net/npm/kuromoji@0.1.2/build/kuromoji.js
-これを見ると、辞書データの扱いに際しては [zlib.js というライブラリ](https://github.com/imaya/zlib.js/)を使っているようです。
+これを確認すると、辞書データの扱いに際しては [zlib.js というライブラリ](https://github.com/imaya/zlib.js/) を使っているようです。
-ただこのライブラリがうまいこと解凍ファイルをキャッシュしてよしなにしてくれるのか、までは調査、読解するスキルがありませんでした。
+ただこのライブラリが Kuromoji の辞書データである zip ファイルを解凍し、キャッシュし、よしなにしてくれるのか？までは調査、読解するスキルがありませんでした。
 以上です。なんだかいまいちまとまっていない文章になってしまいましたが、質問としては Kuromoji の辞書データを効率的に（サーバー負荷を少なく）扱う方法と、そもそもそんな方法を模索しなくてもキャッシュされているのか否か、という２点になります。
 よろしくお願い致します。
+### 補足
+下記 JavaScript のように
+・初回訪問した際は `initializeTokenizer()` を実行して IndexedDB に保存
+・形態素解析の際は `analyzeText()` で解析
+ということが出来るかも？と思ったのですが、初回訪問の `initializeTokenizer()` の時点で blob:https:/example.com/[UUID]/base.dat.gz などの GET ができないとコンソールにエラーが出まくってしまい、断念しました。（この方針も、そもそもブラウザが１回読んだ zip ファイルを自動でキャッシュしてくれるのであれば不要ですが。）
+```JavaScript
+/*----------------------------------------------------------------------------------------------------
+    File: kuromoji-manager.js
+    Path: /assets/js/module/lib/kuromoji-manager.js
+    Description: Kurromoji の管理モジュール
+----------------------------------------------------------------------------------------------------*/
+let tokenizer;
+const DB_NAME = "kuromojiCacheDB";
+const STORE_NAME = "dictionaryStore";
+const DICT_PATH = "./dict";
+/*--------------------------------------------------
+    解析
+--------------------------------------------------*/
+// 形態素解析を実行
+function analyzeText(string) {
+    if (!tokenizer) {
+        const contents = "Tokenizer is not ready yet. Please wait...";
+        console.log('analyzeText() contents', contents);
+        return;
+    }
+    const tokens = tokenizer.tokenize(string);
+    const contents = tokens.map(token =>
+        `表層形: ${token.surface_form}, 品詞: ${token.pos}, 基本形: ${token.base_form}`
+    ).join("\n");
+    console.log('analyzeText() contents', contents);
+}
+/*--------------------------------------------------
+    初期化
+--------------------------------------------------*/
+// IndexedDBに辞書データを保存
+async function saveDictionaryToDB(data) {
+    const db = await openIndexedDB();
+    const transaction = db.transaction(STORE_NAME, "readwrite");
+    const store = transaction.objectStore(STORE_NAME);
+    store.put(data, "kuromoji_dict");
+    console.log("辞書データをIndexedDBに保存しました。");
+}
+// IndexedDBから辞書データを取得
+async function getDictionaryFromDB() {
+    const db = await openIndexedDB();
+    const transaction = db.transaction(STORE_NAME, "readonly");
+    const store = transaction.objectStore(STORE_NAME);
+    return store.get("kuromoji_dict");
+}
+// IndexedDBを開く（または作成）
+function openIndexedDB() {
+    return new Promise((resolve, reject) => {
+        const request = indexedDB.open(DB_NAME, 1);
+        request.onupgradeneeded = event => {
+            const db = event.target.result;
+            if (!db.objectStoreNames.contains(STORE_NAME)) {
+                db.createObjectStore(STORE_NAME);
+            }
+        };
+        request.onsuccess = () => resolve(request.result);
+        request.onerror = () => reject(request.error);
+    });
+}
+// トークナイザーを初期化
+async function initializeTokenizer() {
+    console.log("辞書データをロード中...");
+    const cachedData = await getDictionaryFromDB();
+    if (cachedData) {
+        console.log("IndexedDBから辞書データを読み込み中...");
+        // 辞書データをBlob URLに変換
+        const dicBlobURL = URL.createObjectURL(new Blob([cachedData]));
+        console.log('initializeTokenizer() dicBlobURL: ', dicBlobURL);
+        tokenizer = await buildTokenizer(dicBlobURL); // build関数をPromise化して利用
+    } else {
+        console.log("CDNから辞書データを取得中...");
+        tokenizer = await buildTokenizer(DICT_PATH);
+        // 辞書データをIndexedDBに保存する処理（省略）
+    }
+}
+// Kuromojiのビルダー関数をPromiseでラップする
+function buildTokenizer(dicPath) {
+    return new Promise((resolve, reject) => {
+        kuromoji.builder({ dicPath: dicPath }).build((err, tokenizer) => {
+            if (err) {
+                reject(err);
+            } else {
+                resolve(tokenizer);
+            }
+        });
+    });
+}
+/*--------------------------------------------------
+    export
+--------------------------------------------------*/
+export default {
+    analyzeText,
+    initializeTokenizer,
+}
+```

JavaScript