SQlite等からデータをhtmlに表示して、社内の人が気軽に見られるようにしたい

Question

前提・実現したいこと

表題の通りで、実装方法を色々調べたのですがpythonやnode.jsなどサーバーを使う方法しか出てきませんでした。
社内のフォルダにDBの内容が見られるhtmlを置いておけば、アクセスした人がサーバーを毎度つながずにみられる方法はないのでしょうか。
サーバーに対して知識が浅いため勘違いをしていたら申し訳ありません。

試したこと

Accessのものが一番理想に近かったのですが、IEのブラウザでしか表示できないので違う方法を探しています。

Accessで試してみたもののURL↓
http://java-script.seesaa.net/category/3196246-1.html

どうぞよろしくお願いいたします。

Comments

[surface_0]

なんでそうしたいのかがちょっと分からないのですが、
社内向けならばGoogleスプレッドシート等では駄目でしょうか？
駄目な場合は理由を詳しく教えてください。

[tenmusu]

質問ありがとうございます。
最初はExcelにデータを入れていたのですが、情報量がだいぶ多くなってきて開く度に若干の時間待たなければいけないようになってしまい、DBにいれることで見たい時にすぐ見れるようにしたいと思い調べています。

Answer 1

ローカルのSQLiteファイルを読み込むsql.jsというライブラリがありましたので、試しにサンプルを以下実装してみました。

https://sql.js.org/documentation/

.
├─ index.html
└─ data.sqlite

CREATE TABLE "users"
    (
        "id" integer NOT NULL,
        "name" varchar NOT NULL,
        PRIMARY KEY (id)
    )
;

INSERT INTO  "users"
    ("id", "name")
VALUES
    ('1', 'Tanaka Tarou'),
    ('2', 'Kimura Hanako')
;

<div>
  <input id="file-field" type="file" accept=".sqlite">
</div>

<div>
  <input id="query-field" placeholder="SELECT * FROM users;" disabled>

  <button id="execute-button" disabled>EXECUTE QUERY</button>
</div>

<div>
  <pre id="result-text"></pre>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/sql.js/1.6.1/sql-wasm.min.js"></script>
<script>
initSqlJs({
  locateFile: (file) => `https://cdnjs.cloudflare.com/ajax/libs/sql.js/1.6.1/sql-wasm.wasm`,
}).then((SQL) => {
  let db = null;

  const fileField = document.querySelector("#file-field");
  const queryField = document.querySelector("#query-field");
  const executeButton = document.querySelector("#execute-button");
  const resultText = document.querySelector("#result-text");

  fileField.addEventListener("change", (event) => {
    const file = fileField.files.item(0);

    if (!file) {
      return;
    }

    const fileReader = new FileReader();

    fileReader.addEventListener("load", (event) => {
      db = new SQL.Database(new Uint8Array(fileReader.result));

      fileField.disabled = true;

      queryField.disabled = false;

      executeButton.disabled = false;
    });

    fileReader.readAsArrayBuffer(file);
  });

  executeButton.addEventListener("click", (event) => {
    const rows = db.exec(queryField.value);

    resultText.innerHTML = JSON.stringify(rows, null, "  ");
  });
});
</script>

また、HTMLで表示をカスタマイズしたいとかでなければ、TablePlusなどDBMSを調べてみてもいいかもしれません。

https://www.youtube.com/watch?v=xtaIeSHb4LY

Comments

[tenmusu]

回答ありがとうございます。
sql.jsやTablePlusというものがあるんですね。どちらも初耳でした！
いずれHTMLで表なども見られるようにと思っていて前者の方が近いかな？と思っているので、明日それぞれ試してみようと思います。

[tenmusu]

sql.jsで実装してみたところ動作が確認できました！
教えてくださったサンプルをもとに変更していこうとしたのですが、2つわからないことがあったのでご質問させていただきます。
1)DBの使用するテーブルが決まっている場合で実装してみようかと、fileFieldの中にDBのファイルパスをそのままいれてもうまくいきませんでした。

2)DBからとりだした結果を表にする場合の処理がわからず困っています。
rowsの中身を一つずつ取り出そうとしたのですがうまくいかないので、その方法があれば教えていただきたいです。

[KAOsaka]

現状どのような実装をされているかわからないので、新しい質問をたててソースコードを掲載してもらえますか？

[tenmusu]

ご返答ありがとうございます！
一度こちらの質問を締め切って、新しく質問させていただきますね。