![見出し画像](https://assets.st-note.com/production/uploads/images/122706787/rectangle_large_type_2_478c50eb3989ec593ceddeaaa95c13e6.png?width=1200)
シン・TWSNMP開発日誌:Reveal.jsを使って画期的ヘルプ機能を作っています
浦和レッズ 残念!
気持ちを切り替えるために昨日は早く寝たので今朝は3時に目が覚めました。新人助手の猫さんは寝ていましたが、私がコーヒーを淹れに1階に行こうとすると起きてきて先導していました。まだ早いのにと、迷惑そうでしたが、ご飯が欲しいというのであげると食べていました。猫さんはウチに来て2週間になりました。かなり家の中を掌握しているようです。居場所を見つける名人です。
さて、昨日実験していた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>
のように書くと、
![](https://assets.st-note.com/img/1700949033314-OfMwGPVjfj.png?width=1200)
のように表示できて、動作は、
![](https://assets.st-note.com/production/uploads/images/122707137/picture_pc_17a7e209a9d4183b8a68fca618868a80.gif?width=1200)
のような感じになります。
ヘルプのページを表示するソースコードは
<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でプレビューを見ながら編集できます。
![](https://assets.st-note.com/img/1700949306852-EhkdTMV7BR.png?width=1200)
あとは、ヘルプとマニュアルの中身をひたすら書くだけです。
明日に続く
開発のための諸経費(機材、Appleの開発者、サーバー運用)に利用します。 ソフトウェアのマニュアルをnoteの記事で提供しています。 サポートによりnoteの運営にも貢献できるのでよろしくお願います。