Asciidoc と PlantUML で文書をつくる

投稿日時: 投稿者:
返信

技術書系のドキュメントを書く場合に使いたくなる表現をテキストで書きたいなと考え、以前からつくっていた「Asciidoctor と Gradle でつくる文書執筆環境」というドキュメントを刷新してみました。

AsciidoctorとGradleでつくる文書執筆環境(HTML version)

AsciidoctorとGradleでつくる文書執筆環境(PDF version)

同人系の PDF 本技術書執筆環境としても使えそうなので、試行的に BOOTH 頒布もしてみています。表紙は @Fujix さん に描いていただきました！

[BOOTH] AsciidoctorとGradleでつくる文書執筆環境 応援版

技術書や文書を執筆する際に使える簡単お手軽 Asciidoc 執筆環境構築ガイドです。環境構築手順や執筆時のノウハウを 1冊の本にまとめました。

今回の刷新では、自分が書きそうなものに寄っていますが、特に PlantUML と dataa 記法による、ダイアグラムに関する部分を追加執筆しています。

アイディア次第でいろいろ応用できそうです。プレゼンテーションのスライドに入れる図をつくるにも便利かもしれません。

シーケンス図:

フォルダツリー:

ブロック図:

メモリーマップ:

タイミングチャート:

マインドマップ:

テキストダイアログ記法は「考えながら描ける」のがとても良いです。図表の最終点を定まってない場合に試行錯誤するのが手軽です。また、一度、図表は画像書き出ししてしまうと修正が億劫になるものですが、テキスト記法だとメンテナンス性も高いように思います。良い。

WordPress Playgorund と wp-now と VS Code Extention

投稿日時: 投稿者:
返信

札幌の SaCSS Season 2 Vol.2 勉強会にて「WebAssembly でつくる簡単 WordPress 製作環境」というお題目で LT をさせていただきました。

SaCSS 参加は 3年半振り…！ご無沙汰してしまいました…！

WordPress Playground を使った、WordPress のローカル環境への導入方法を、

  • なんもいれたくない派閥
  • VS Code は入っている派
  • コマンドライン派

ごとにお話しています。

WebAssembly を活用し、PHP や DB などのミドルの個別導入が不要なことから（.wasm にビルドされ内包されています）、いずれも思いついてから 10分以内で動作すると思います。

PDF スライドを以下に配置しました。手順やドキュメント URL など掲載がありますので、よければご覧ください。

SaCSS-wp-now-20230704-1ダウンロード

style.css

/*
Theme Name: WordPress Theme
Author: h1romas4
Description: WordPress Theme
Version: 1.0
*/

index.php

<p>Hello, World</p>

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
    <a href="<?php the_permalink() ?>"><?php the_title(); ?></a>
    <?php the_content(); ?>
<?php endwhile; endif; ?>

管理画面 URL http://localhost:8881/wp-admin/

最新の WordPress が本当にお手軽に試せますので良ければ遊んでみてください…！

（まだリリースされて時期が浅くインターネット検索が混乱していますので）ドキュメント等へのリンクを以下に掲載しておきます。

関連

Zellij ターミナルワークスペースと WebAssembly プラグイン
WebAssembly で動作する FM 音源ライブラリー libymfm.wasm

WSL2 上の VS Code で Paste Image 拡張を使う

投稿日時: 投稿者:
返信

WSL2 と VS Code WSL Remote 拡張で Linux 上の Markdown や Asciidoc を編集している場合に、Paste Image 拡張や Asciidoc 拡張のクリップボード経由での画像挿入を有効にする方法です。

ワークアラウンドではありますが、WSL2 側 Paste Image 拡張のファイルを次のように置き換えます。（Asciidoc 拡張も同ファイル res/linux.sh があります）

~/.vscode-server/extensions/mushan.vscode-paste-image-1.0.4/res/linux.sh

#!/bin/sh
# change current directory
cd `dirname $0`
# set dist path
DISTPATH=//wsl.localhost/Ubuntu-22.04 # <1>
# call Windows PowerShell
powershell.exe -ExecutionPolicy Bypass -File pc.ps1 ${DISTPATH}$1

<1> 行はお使いの WSL2 Linux ディストリビューションのパスを設定してください。

$ pwd
/home/hiromasa
$ powershell.exe -Command "pwd"
Path
----
Microsoft.PowerShell.Core\FileSystem::\\wsl.localhost\Ubuntu-22.04\home\hiromasa

WSL2 から powershell.exe を呼び出せることを利用して、linux.sh から Windows 版の Paste Image の pc.ps1 を呼び出し Windows 側のクリップボードから画像を取得し、画像出力先を WSL2 側のパスになるような処理をしています。（VS Code のセキュリティーポリシー外の世界で動作しますので、動作をご理解の上設定してください）

なお、拡張のアップデート時にはファイルが上書きされると思いますので再パッチしてください。

関連

AsciidoctorとGradleでつくる文書執筆環境
WSL2/WSLg にインストールすると便利な Ubuntu アプリケーション