シン・TWSNMP開発日誌：Reveal.jsを使って画期的ヘルプ機能を作っています

浦和レッズ　残念！
気持ちを切り替えるために昨日は早く寝たので今朝は３時に目が覚めました。新人助手の猫さんは寝ていましたが、私がコーヒーを淹れに１階に行こうとすると起きてきて先導していました。まだ早いのにと、迷惑そうでしたが、ご飯が欲しいというのであげると食べていました。猫さんはウチに来て２週間になりました。かなり家の中を掌握しているようです。居場所を見つける名人です。

さて、昨日実験していたReveal.jsによるヘルプ機能ができました。

The HTML presentation framework | reveal.js

シン・TWSNMPの機能毎のヘルプをマークダウンで

## TWSNMP FKへようこそ

ネットワーク管理マップを作成してみましょう。

まず、<button class="bg-green-600">＜はじめる＞</button>ボタンをクリックします。


---
#### データフォルダを選択
<span class="text-xl">
マップの設定やログを記録するデータベースファイルや拡張MIBなどを保存するためのフォルダです。
</span>


<img src="../../help/ja/2023-11-24_16-29-59.png" />

---
#### マップを表示
<span class="text-xl">
フォルダーを選択すると空白のマップが表示されます。
</span>

<img src="../../help/ja/2023-11-24_16-34-25.png"/>

---
#### 説明
<div class="text-xl">

|項目|内容|
|---|---|
|ノード名|ノードの名前です。|

</div>

のように書くと、

のように表示できて、動作は、

のような感じになります。

ヘルプのページを表示するソースコードは

<script lang="ts">
  import { Modal, GradientButton } from "flowbite-svelte";
  import { onMount, createEventDispatcher, tick } from "svelte";
  import Icon from "mdi-svelte";
  import * as icons from "@mdi/js";
  import { _ } from "svelte-i18n";
  import { BrowserOpenURL } from "../../wailsjs/runtime/runtime";
  import { lang } from "../i18n/i18n";
  import Reveal from "reveal.js";
  import Highlight from "reveal.js/plugin/highlight/highlight";
  import Markdown from "reveal.js/plugin/markdown/markdown";
  import "reveal.js/dist/reveal.css";
  import "reveal.js/dist/theme/black.css";
  import "reveal.js/plugin/highlight/monokai.css";

  export let page = "";
  let show: boolean = false;
  let reveal: Reveal.Api | undefined = undefined;
  let helpUrl = "";

  const dispatch = createEventDispatcher();

  onMount(async () => {
    helpUrl = `help/${lang}/${page}.md`;
    show = true;
    await tick();
    reveal = new Reveal({
      plugins: [Markdown, Highlight],
    });
    reveal.initialize();
  });

  const close = () => {
    if (reveal) {
      reveal.destroy();
      reveal = undefined;
    }
    show = false;
    dispatch("close", {});
  };
</script>

<Modal
  bind:open={show}
  size="xl"
  permanent
  class="w-full min-h-[90vh] bg-gray-800"
>
  <div class="reveal max-h-[90%]">
    <div class="slides">
      <section data-markdown={helpUrl} />
    </div>
  </div>
  <div class="flex justify-end space-x-2 mr-2">
    <GradientButton
      shadow
      type="button"
      size="xs"
      color="lime"
      class="ml-2"
      on:click={() => {
        BrowserOpenURL(
          `https://lhx98.linkclub.jp/twise.co.jp/download/twsnmpfk_${lang}.pdf`
        );
      }}
    >
      <Icon path={icons.mdiHelp} size={1} />
      {$_('Help.Manual')}
    </GradientButton>
    <GradientButton
      shadow
      type="button"
      color="teal"
      on:click={close}
      size="xs"
    >
      <Icon path={icons.mdiCancel} size={1} />
      {$_('Help.Close')}
    </GradientButton>
  </div>
</Modal>

これだけです。英語版にも対応しています。

ヘルプのページ自体は、マークダウンなので、VSCodeでプレビューを見ながら編集できます。

あとは、ヘルプとマニュアルの中身をひたすら書くだけです。

明日に続く