2021年9月24日金曜日

Typoraの紹介④ ~シーケンス図を作成する~

 

おはようございます。ひっくです。

今回も第1~3回に引き続き、MarkdownエディタのTyporaを取り扱います。

 

Typora関連記事

→第1回 はこちら Typora(Markdownエディタ)の紹介①

→第2回 はこちら Typora(Markdownエディタ)の紹介② ~画像の保存先を変更する~

→第3回 はこちら Typora(Markdownエディタ)の紹介③ ~数式を編集する~

→第5回 はこちら Typora(Markdownエディタ)の紹介⑤ ~フロー図を作成する~

→第6回 はこちら TyporaVer1.x リリースに伴い有料化(でもベータ版はまだまだ無料利用可能)

→第7回 はこちら Typora(Markdownエディタ)の紹介⑥ ~クラス図を作成する~

 

今回は図式(シーケンス図)の記載方法を紹介します。

Typora バージョン


今回確認するTyporaバージョンは、「0.11.8(beta)」となります。

Typora(Markdown)で作図する理由


作図時間の短縮、が一番の目的になるかと思います。

 

普段お目にかかる設計書はExcelやWordで作成されていることが多いですが、

図を挿入して作成すると結構時間がかかりますよね。

Markdown形式で図式を作成するとなると、作成するための構文を覚える必要がありますが

慣れてしまえば図を挿入して作成するより、はるかに早く図を作成することができるようになるかと思います。

 

ただ、扱う拡張機能によっては、作図できる表現が狭いこともあるので、そこには注意が必要です。

 

(なお、HTML、PDF、epub、docx 形式でのエクスポートがサポートされているようですので、

Wordは単純にエクスポートで「docx」を指定、ExcelはPDF出力した結果を画像化して挿入する

流れになるかと思います。)

 

Typoraで扱える図式


Typoraでは拡張機能を有効にすることで、以下の図式を記載することができます。

設計書(基本、詳細設計書等)で使用されることが多いフローチャート、シーケンス図等を

作成できる「 js-sequence 」「 flowchart.js 」「 mermaid.js 」をサポートしているからです。

 

  • js-sequence

    • シーケンス図
  • flowchart.js

    • フローチャート
  • mermaid.js

    • シーケンス図
    • フローチャート
    • ガントチャート
    • クラス図
    • 状態図
    • 円グラフ

 

拡張機能の有効化


Markdownで図を作成できる設定となっているか確認します。

設定は、「ファイル」→「設定」→「Markdown」→「文法サポート」から変更できます。

 

以下赤枠の設定がチェックONになっていればOKです。

 

シーケンス図の記法 (js-sequence)


「Typoraで扱える図式」で紹介したように、Typoraでは「js-sequence」または「mermaid.js」を

使用してシーケンス図を作成することができます。

まずは「js-sequence」を使用してシーケンス図を作成する方法を紹介します。

 

  1. バッククォート「`」× 3 を記載した後、続けて「sequence」と記載します。

    そうすると、「js-sequence」を使用してシーケンス図を作成するモードになります。

     

    【選択後】のカーソル表示部分に、「js-sequence」の構文を使用して作図していきます。

    作図内容は、「Empty Diagram」と表示されている箇所に表示されます。

    • 【入力時】
    • 【選択後】

 

  1. 以下は作図した際の記載例です。

    入力欄には、以下のような記載をしています。

    Title: シーケンス図(例)
    note right of ユーザー: 同期メッセージ
    ユーザー->ログイン画面: ID、Password入力
    note left of サーバー: 非同期メッセージ
    ログイン画面->>サーバー: 登録情報チェック
    note left of サーバー: 応答メッセージ
    サーバー-->>ログイン画面: チェック結果返却
    note over ログイン画面: チェックNG時:メッセージ表示(再入力を促す)
    participant 入力画面 as IM
    ログイン画面->ログイン画面:
    note over ログイン画面: チェックOK時:入力画面へ遷移
    ログイン画面->IM:
    
    Created with Raphaël 2.2.0シーケンス図(例)ユーザーユーザーログイン画面ログイン画面サーバーサーバー入力画面入力画面同期メッセージID、Password入力非同期メッセージ登録情報チェック応答メッセージチェック結果返却チェックNG時:メッセージ表示(再入力を促す)チェックOK時:入力画面へ遷移

    構文は「js-sequence」の公式ページで確認可能ですが、以下のみが用意されています。

    比較的簡素なので覚えやすい反面、表現の幅は狭いかもしれません。

    とはいえ、「ライフライン、ノート、メッセージ(種類別)」は表現できるので、

    手早く簡易的なシーケンス図を作成したい場合に向いているのではないでしょうか。

    js-sequence 公式 「Syntax」より

     

    シーケンス図の記法 (mermaid.js)


    次に「mermaid.js」を使用してシーケンス図を作成する方法を紹介します。

     

    1. バッククォート「`」× 3 を記載した後、続けて「mermaid」と記載します。

       

      【選択後】のカーソル表示部分に、「mermaid」の構文を使用して作図していきます。

      シーケンス図を作成する場合、「sequenceDiagram」とまず記載し、

      続けてシーケンス図の要素を記載していきます。

      作図内容は、「空のダイアグラム」と表示されている箇所に表示されます。

      • 【入力時】

      • 【選択後】

       

    2. 以下は作図した際の記載例です。

      入力欄には、以下のような記載をしています。

      sequenceDiagram
      %% シーケンス図(例)
      autonumber
      	participant U as ユーザー
      	participant L as ログイン画面
      	note right of U: 同期メッセージ
      	U->>L: ID、Password入力
      	participant S as サーバー
      	activate L
          note left of S: 非同期メッセージ
          L->>S: 登録情報チェック
      	activate S
          note left of S: 応答メッセージ
          S-->>L: チェック結果返却
      	deactivate S
          
      	alt チェックNG時
      		activate L
              L->>L: メッセージ表示(再入力を促す)
      		deactivate L
          else チェックOK時
      		participant I as 入力画面
              L->>I: 入力画面へ遷移
          end
      	deactivate L
      

      ユーザーログイン画面サーバー入力画面同期メッセージID、Password入力1非同期メッセージ登録情報チェック2応答メッセージチェック結果返却3メッセージ表示(再入力を促す)4入力画面へ遷移5alt[チェックNG時][チェックOK時]ユーザーログイン画面サーバー入力画面

       

      構文は「js-sequence」に比べると表現できることが増えています。(公式ページで確認可)

      現在サポートされている矢印には次の6種類があります。

      タイプ 説明 表示内容
      -> 矢印のない実線
      --> 矢印のない点線
      ->> 矢印の付いた実線
      -->> 矢印の付いた点線
      -x 末尾に十字が付いた実線
      --x 末尾に十字が付いた点線

      非同期メッセージについては、公式ページ「 mermaid.js公式 シーケンス図 」に

      用意されていると記載のある構文「-)」を使用してみたのですが、

      現在これはサポートされていないようです。(以下の様なエラーメッセージが表示される)

       

      「-x」「--x」を非同期メッセージとして使用するという情報もありましたが、

      UMLでの記法とは異なるので、使用する際はどこかに定義付けしておく必要がありそうです。

       

      複合フラグメントは「alt」「loop」「opt」「par」についてはサポートがあるので、

      条件分岐、ループ等を伴う少し複雑なシーケンス図を記載する場合には

      こちらを使用する方が良いでしょう。

      ただし「ref」等を使用したい場合は、Typoraで使用可能な「js-sequence」「mermaid」の

      両方でサポートされていないため、Visual Studio Code にPlantUMLを入れて作成する等

      別のエディタを使用するしかないと思われます。

    まとめ


    Typoraで図式(シーケンス図)を作図する方法について、今回は紹介しました。

    かなり複雑なシーケンス図を作成したい、UMLでのシーケンス図表記方法を全て使いたい、

    という場合でなければそれなりのシーケンス図を楽に作成できるかと思います。

     

    興味を持った方は是非一度作成してみてください。

     

    今回はこのへんで。ではまた!

2021年9月17日金曜日

vscode #06 : Markdown PDF でフォント指定してPDF化

どうも、もりもりです。

今回はたまに出てくるvscodeネタです。 今となっては欠かせない人は多いのではないでしょうか。 社内ではレポートや議事録など、Excelで作成するドキュメントが多いのですが まぁ内容が確認できればOKなのでPDFでもOKにしてもらいました。 なのでMarkdownで書いて拡張機能の「Markdown PDF」を入れてPDF化してます。 がしかし!中国語フォントに。。。

と言うことで、「Markdown PDF」使用時のフォントの指定方法を紹介したいと思います。

拡張機能「Markdown PDF」

拡張機能は下記です。

CSSファイルを作成

cssファイルを作成します。ファイル名を付けて保存。 どこに保存してもいいですがPDF化するmdファイルと同階層に格納しておけば後で設定がラクです。 今回はメイリオを指定してみます。

md.css

body {
    font-family: "Meiryo";
}

code {
    font-family: "Meiryo";
}

設定にCSSファイルの相対パスを追加

vscodeの設定を開き(Windows : Ctrl + , / Mac : command + ,) 「markdown styles」で検索。下記設定に、PDF化したいファイルからの相対パスを入力し、OKをクリックするだけ。

今回の例ですと、.\md.cssとするだけ。

拡張機能自身が持っているスタイルを上書きするような記事もあったりしますが 更新時や何かの拍子に元に戻ってしまうこともあると思うので設定に追加する方がいいでしょう。

また、時と場合によってはフォントを変更したいこともあると思います。 なのでこちらの設定に追加する方法をオススメします。

ちなみに拡張機能が保持しているスタイルは下記にあります。(※Windowsの場合)

C:\Users\xxxx\.vscode\extensions\yzane.markdown-pdf-1.4.4\styles

あとはmdファイル内右クリックでPDF出力メニューを選択してサクッとPDF化するだけです。 それでは皆さま、良い vscode life を。

過去のvscode関連記事はこちらを↓↓↓
以上、もりもりでした。

2021年9月11日土曜日

自宅のWiFi環境改善 ~ メッシュWi-Fi導入

こんにちは、やっまむーです。

我が家では以前より無線LANの環境で悩みがありました。
リビングに置いているNintendoSwitchでダウンロードをしようとすると非常に時間がかかるのです。
他にもテレビでYouTube等の動画コンテンツを見ていると、低画質に切り替わったり、ローディングのために再生が停まることもあります。

原因は親機からの距離と間の障害物です。
以下はIO-DATAの『Wi-Fiミレル』というアプリで自宅の無線LANの強度を調べたものです。

リビング側の数値が良くないです。

親機は玄関横の下足箱の中にあるので、その付近はまだよいですが、テレビを置いているリビングは数値が小さくなっています。
普段使いではそれほど気になりませんが、通信に時間がかかるのは許せないので、WiFi環境を改善することにしました。

機器の選定

リビングでも十分な通信速度を確保するため、あと新しい機器を試してみたい欲求から、今回はメッシュWi-Fiを構築することにしました。

要件としては以下になります。

  • メッシュWi-Fi対応 : 必須
  • 有線ポートを複数(最低2つ) : パソコンとNASを繋ぐため
  • 価格 : 出費が嵩んでいるので

そして該当するものから選んだのはASUSの『ZenWiFi AC (CT8)』を選びました。

My new gear!

大きさは160mm × 75mm × 161.5mm と少し大きく見えますが、シンプルな外見でリビングに置いてもそれほど違和感はありません。

大きさ比較

大きい分、ポートの数は充実しています。

WAN×1 + LAN×3、USBも付いています

設置 & セッティング

下足箱のルーターを交換してセットアップを進めていきます。

セッティングはブラウザ、または専用のアプリから行います。
画面の指示に従ってSSIDや管理者の設定、インターネット接続の設定を済ませていきます。

ざっと設定を終えて回線速度を測ってみましたが、スマートフォンではそれほど速度が変わった感じはありませんでした。
しかし、NintendoSwitchに関してはハッキリと違いでており、これまでと比べて格段に改善しました。

さて、セッティングが完了したので、後は家中のデバイスの設定更新をしていきます。
スマートスピーカー等は繋がらなくなるので設定を全てリセットしていきます。
このあたりは導入時の設定が簡単になった影響すかね・・・。

最後にパソコンから回線速度を測ってみます。

有線LANで繋いでいた時は300Mbps以上は簡単に出ていたのに・・・。
やはり有線LANも引く必要がありそうですね。
次はそのあたりの整備をしてみようと思います。

ではではー。

2021年9月3日金曜日

ローカルにあるmdファイル(マークダウン)を見る時は、Chrome拡張機能の「Markdown Viewer」が便利


 こんにちは。よっしーです。


仕事で設計書などをマークダウンで記載することが多くなってきており、

Typoraを使う機会が増えました。


TyporaはEditerとしては凄く優秀なのですが、

ViewerとしてはEditer機能を備えているがゆえにイマイチなところが多く、

(リンクをワンクリックで開けなかったり、リンクから別ページへ遷移する際に別ウィンドウでしか開けなかったり)

マークダウンの記載内容をレビューする際、

Typoraの画面を見せながらというのはあまり適さないと感じます。


では、何を使うか。


Chrome拡張機能の「Markdown Viewer」がおすすめです。


この拡張機能を適応することで、Chrome上でローカルにある

mdファイル(マークダウン)を表示することが出来ます。


※※※ローカルのmdファイルを表示するために以下の設定が必要となります※※※


Chromeに適応後、Markdown Viewer のメニューを開き、

「ADVANCED OPTIONS」を開きます。


「ALLOW ACCESS TO FILE://URLS」 を選択します。

「ファイルのURLへのアクセスを許可する」を有効にします。


以上で、設定は終わりです。


あとは、ChromeへmdファイルをD&Dすると、

こんな感じでキチンとマークダウン記述を解釈して表示してくれます。


もちろんリンクもワンクリックで飛んでくれるし、

別ウィンドウで開くこともありません。

表示もかなり軽いと思います。


私は、

マークダウンの作成は「Typora」で行い、

マークダウンを見せる際は「Markdown Viewer」を使う。

というスタイルに落ち着きました。


興味があれば「Markdown Viewer」を使ってみて下さい。


ではまた~。