Commit 0c865d3f authored by AP matsuo koji's avatar AP matsuo koji 😲

Git 移行

parents
include::configJ.adoc[]
:toc: left
:lang: ja
// :doctype: bookDir
:toc-title: 目次
:toclevels: 5
:sectnums:
:sectnumlevels: 6
:example-caption: ■
:imagesdir:
= PDFormstudio V200ボタンデザインの変更
== 概要
PDFormstudioのメジャーバージョンアップにおいて、ワークフロー設計画面の変更を行う。
処理の流れをダイアグラムでレイアウトするが、以下の課題があった
課題::
* タスクを配置しても、接続操作時にしかその接続可否がわからない
* 接続の組み合わせは多種に及んでおり、その入出力の接続種別がわからない
V200で改善::
* タスクの配置前に、どの組み合わせが配置できるか確認できるようにした
* タスクの入出力をアイコンで明示
== 変更前のレイアウト画面
.V171の旧画面
image::V171.JPG[V171,600,400,align="left"]
.操作イメージ(アニメGIF)
image::Anime/V171D.gif[V200anime,600,400]
== 変更後のレイアウト画面(V200暫定)
.V200の新画面
image::V200.JPG[V200,600,400,align="left"]
.操作イメージ(アニメGIF)
image::Anime/V200D.gif[V200anime,600,400]
//image::screentogif-test.gif[複雑なGIFアニメ]
== デザインの課題
* 見た目が貧弱なので工夫したい。
* 種別アイコンを色で表現しているが、色以外の表現方法も試してみたい。
== 現在のタスクデザイン
タスクは、以下 ** 接続円形BitMap+タスク本体のBitMap+タスク文字列** を合成して動的にレイアウトします。
差し替えデザインはこれらのサイズを踏襲する必要があります。
.円形接続BitMapデータ
[cols="1,2", options="header"]
|===
|イメージ(bmp)| 仕様
|
image:開発中BMP/TaskPort_1.bmp[赤]
image:開発中BMP/TaskPort_2.bmp[緑]
image:開発中BMP/TaskPort_4.bmp[黄色]
image:開発中BMP/TaskPort_8.bmp[青]
image:開発中BMP/TaskPort_6.bmp[緑+黄]
image:開発中BMP/TaskPort_13.bmp[赤+黄+青]
image:開発中BMP/TaskPort_14.bmp[緑+青+黄]
| 23 x 25 pix, 24bpp BGR
|
image:開発中BMP/Task-Red.bmp[赤] image:開発中BMP/Task-Yellow.bmp[緑]| 95 x 25 pix, 24bpp BGR
|===
== その他の案
.連結色の意味
|===
|image:2_連結色_意味.JPG[連結色の意味]
|===
.タスクフロー組み合わせ 例
|===
|image:接続フロー.JPG[連結フロー]
|===
.塩基の意味をそのまま踏襲したもの
[cols="1,1"]
|===
|
元の意味をそのまま接続子に→ ボタンが大きくなりすぎて不可、視認性も悪い。
image:別案1.JPG[別案]
|
接続できない時にグレーアウト
image:別案1b.JPG[別案b]
|===
\ No newline at end of file
////
[コメント開始]
各種事前定義 ここでは最低限必要なものだけ定義、一覧説明をコメントブロックで記載しておく
定義が不要なら、//でコメントアウト、adoc毎に!(びっくりマーク)を追加すればよい
例. :sectnums!:
[コメント終了]
////
//-----------------------------------------------------------------------------------------------------
// 事前定義
:lang: ja
:doctype: book
:toclevels: 3
:sectnums:
:sectnumlevels: 4
:sectlinks:
:icons: font
:toc-title: 目次
:example-caption: 例
:table-caption: 表
:figure-caption: 図
//-----------------------------------------------------------------------------------------------------
////
// ドキュメント毎に設定すべきもの
:toc: left
:source-highlighter: coderay
:docname: = asciidoc
:author: my name
:revnumber: 0.9
:revdate: 2019/12/1
////
////
//-----------------------------------------------------------------------------------------------------
意味が不明なものは以下を参照
https://takumon.github.io/asciidoc-syntax-quick-reference-japanese-translation/
// 属性定義
:experimental: *各種マクロ拡張時に定義しておく
::module: *モジュール名
:Author: *著者名
:Email: *メールアドレス
:Date: *日付(2020/01/20)
:Revision: Rev.1 * リビジョン指定
:lang: ja * 言語指定
:doctype: book * 言語の種類(ja,...)
:description: * 説明???
:docname: ドキュメント名 * ドキュメント説明
//:imagesdir: ./_images
// イメージのパスを指定
// ハイライト、画像パス
//:source-highlighter: coderay
// coderay, ....
// --------------------------------------------
// 見出し設定
:sectnums:
// セクションに番号On, Offのときはコメントアウト
:chapter-label:
// キャプチャーのラベル、不要なときは、空指定
// --------------------------------------------
// 目次作成
:toc: left
// 目次 left,right,macro macroの場合は挿入箇所でtoc::[]を記述する
:toclevels: 3
// 目次 階層レベル
:toc-title: 目次
// 目次のタイトル
// --------------------------------------------
// 各ラベルの日本語設定
:preface-title: はじめに/まえがき
:appendix-caption: 付録
:caution-caption: 注意
:example-caption: 例
:figure-caption: 図
:important-caption: 重要
:last-update-label: 最終更新
:listing-caption: リスト
:manname-title: 名前
:note-caption: 注記
:toc-title: 目次
:table-caption: 表
:warning-caption: 警告
:tip-caption: ヒント
:untitled-label: 無題
:version-label: バージョン
////
\\evaserver\CloseServer\Release\EQUIOS PTR\Application\7.02
===============================================================================
Tバージョン別リリースノートの作り方
===============================================================================
1.
EQ-Version管理\共有情報\_テンプレート\リリースノート\EQxxxリリースノート(雛形Jpn)
から、自チームのフォルダ(ex. 10_UI制御・面付け)をTnフォルダ以下にコピーする
ex.
EQ-Version管理\CenterV3.0\3.00\EQ0xx\09.総合評価\リリースノート\T1\10_UI制御・面付け
2.
コピーしたフォルダ内の必要なファイルに記載し、チーム別のPDFを作成する。
PDFは、当フォルダ直下に作成する事
ex.
EQ-Version管理\CenterV3.0\3.00\EQ0xx\09.総合評価\リリースノート
J-ReleaseNoteV3.00EQ0xxT1[UI制御_面付け].pdf
★★インストーラ更新情報もお忘れなく★★
Tバージョンごとではなく、パッチ単位で1ファイルにしてください。
以上
松久さんより
リリースノートのテンプレートは、ぜひと活用いただければと思います。
手順書としては以下のようなものしかなく、「まとめ方」はドキュメント化できていないと思います。
(どこかで簡単に書いたかもしれませんが、すぐに出てこないので、下記の簡単に記載します)
Wordの「グループ文章」という機能を使っています。
\\santana\trueflow\EQ-Version管理\共有情報\_テンプレート\リリースノート
Tバージョン別リリースノートの作り方.txt
例として先日作成した以下のフォルダーで説明すると
\\santana\trueflow\EQ-Version管理\CenterV8.0\8.00\EQ011\09.総合評価\リリースノート\T1\20_入力・演算
まとめるためのファイル
J-ReleaseNote8.00EQ011T1[入力演算].docx
を開き、「表示」→「アウトライン」表示すると「サブ文章の展開」というボタンが現れます。
これをクリックするとリンク先の文章が取り込まれます。
アウトライン表示を閉じると成形された文章が表示されます。
ポイントとしては
・準備されたスタイルのみを使って、各々の取り込まれる部品の書類を作る
 (このルールを守らないと、まとめが面倒になります)
・まとめファイルでの内容の編集はせず、取り込まれる書類の方を修正する
ことを基本としてPDF書き出し前に最小限の整形を行う。
などです。細かな手順についてはご質問いただければ、対応します。
よろしくお願いいたします。
include::configJ.adoc[]
:toc: left
:imagesdir: ./
:experimental:
= 業務改善活動[AsciiDoc] 2020/06/17 メモ
[%hardbreaks]
参加者(敬称略)
SW1:北大路、石田
AP:木村、大島、松尾
日時場所:2020/06/17 14:00-14:40 ブラビア裏
== はじめに
. SW1側:リリースノート改善
. AP側:AsciiDoc
== 確認事項
- Visual studio CodeはOK,MarkdownもOK(SW1)
- Git/Redmineなど状況共有場所 OK(SW1)
- Gitは使える? OK,サーバーはGitBucket.(SW1)
== アクション
- SW1のアクセス可能な共有場所(SW)
- SW側のサンプルのリリースノート(SW)
- 本日のデータ送付(AP)
- 次回予定
* 1か月後を目途に各々計画して、もう一度打ち合わせして目標を決める
* 7月中ごろで
== EQUIOSのリリースノート(参考)
[%hardbreaks]
リリースノート群
\\evaserver\CloseServer\Release\EQUIOS PTR\Application\7.02
基本はワードで、部位毎に、差し込み印刷と思う。
手順書もあったかも?
== AsciiDocの状況(参考)
[%hardbreaks]
昨年までに、取り組んだこと
* Markdownより高機能。表や色、UMLなどが使える
* 最終表現はHTMLであり、それを簡易記述できる
* 他にも以下のマークアップ言語があるが、最終的にAsciiDocにたどり着いた
- LaTex:組版よいけど、難しい
- Sphinx:SW2:CMS関連はつかっているけど、やっぱりちょっと難しい様子
* インストールや、よく使う内容をまとめた
* 一部の内部文書で利用し始める ## ※今ここ ##
* ## 課題 ## 記述方法をおぼえないといけない。グラフと入れたい。 フォントが変更難しいなどなど。UML記述は外部サーバーを参照するので、セキュリティ注意
以上
////
[コメント開始]
各種事前定義 ここでは最低限必要なものだけ定義、一覧説明をコメントブロックで記載しておく
定義が不要なら、//でコメントアウト、adoc毎に!(びっくりマーク)を追加すればよい
例. :sectnums!:
[コメント終了]
////
//-----------------------------------------------------------------------------------------------------
// 事前定義
:lang: ja
:doctype: book
:toclevels: 3
:sectnums:
:sectnumlevels: 4
:sectlinks:
:icons: font
:toc-title: 目次
:example-caption: 例
:table-caption: 表
:figure-caption: 図
//-----------------------------------------------------------------------------------------------------
////
// ドキュメント毎に設定すべきもの
:toc: left
:source-highlighter: coderay
:docname: = asciidoc
:author: my name
:revnumber: 0.9
:revdate: 2019/12/1
////
////
//-----------------------------------------------------------------------------------------------------
意味が不明なものは以下を参照
https://takumon.github.io/asciidoc-syntax-quick-reference-japanese-translation/
// 属性定義
:experimental: *各種マクロ拡張時に定義しておく
::module: *モジュール名
:Author: *著者名
:Email: *メールアドレス
:Date: *日付(2020/01/20)
:Revision: Rev.1 * リビジョン指定
:lang: ja * 言語指定
:doctype: book * 言語の種類(ja,...)
:description: * 説明???
:docname: ドキュメント名 * ドキュメント説明
//:imagesdir: ./_images
// イメージのパスを指定
// ハイライト、画像パス
//:source-highlighter: coderay
// coderay, ....
// --------------------------------------------
// 見出し設定
:sectnums:
// セクションに番号On, Offのときはコメントアウト
:chapter-label:
// キャプチャーのラベル、不要なときは、空指定
// --------------------------------------------
// 目次作成
:toc: left
// 目次 left,right,macro macroの場合は挿入箇所でtoc::[]を記述する
:toclevels: 3
// 目次 階層レベル
:toc-title: 目次
// 目次のタイトル
// --------------------------------------------
// 各ラベルの日本語設定
:preface-title: はじめに/まえがき
:appendix-caption: 付録
:caution-caption: 注意
:example-caption: 例
:figure-caption: 図
:important-caption: 重要
:last-update-label: 最終更新
:listing-caption: リスト
:manname-title: 名前
:note-caption: 注記
:toc-title: 目次
:table-caption: 表
:warning-caption: 警告
:tip-caption: ヒント
:untitled-label: 無題
:version-label: バージョン
////
:toc: left
:temp: ./temp
:sectnums:
:sectnumlevels: 5
:experimental:
:toclevels: 3
:toc-title: 目次
:experimental:
= PlantUML関連のサンプル(雑に)
以下からサンプル::
https://dtm3110.hatenablog.com/entry/2019/11/05/113000
★これは定型的に記述する
----
.ラベルタイトル
説明
[plantuml,"{temp}/{counter:uml}",svg]
....
@startuml
....
@enduml
....
----
---
== コンポーネント図
説明
[plantuml,"{temp}/{counter:uml}",svg]
....
@startuml
' ヘッダー・フッターを読み込み & スタイル定義ファイル読み込み
skinparam componentStyle uml2
title コンポーネント図
package "認証認可パッケージ" {
[認証]
[ユーザー操作]
}
cloud "CloudファンクションAPI" {
[認証API]
[ユーザーAPI]
}
database "BigQuery" {
[ユーザーデータ]
[閲覧情報]
}
[認証] <--> [認証API]
[ユーザー操作] --> [認証API]
[ユーザー操作] <--> [ユーザーAPI]
[認証API] <--> [ユーザーデータ]
[ユーザーAPI] <--> [ユーザーデータ]
[ユーザーAPI] <--> [閲覧情報]
@enduml
....
---
== ユースケース
説明
[plantuml,"{temp}/{counter:uml}",svg]
....
@startuml
' ヘッダー・フッターを読み込み & スタイル定義ファイル読み込み
title 矢印
left to right direction
:アクター1: -> (ユースケース1)
:アクター1: -------> (ユースケース2)
:アクター1: ..|> :アクター2: : <<extend>>
:アクター2: ..|> :アクター3: : <<include>>
:アクター3: -left-> ()
:アクター3: -right-> ()
:アクター3: -up-> ()
:アクター3: -down-> ()
@enduml
....
== フローチャート
説明
[plantuml,"{temp}/{counter:uml}",svg]
....
@startuml
' ヘッダー・フッターを読み込み & スタイル定義ファイル読み込み
title 条件文
start
if (A or B) then (A)
:Aを選んだらこっち;
elseif (A or B) then (B)
:Bを選んだらこっち;
stop
else
:どれも選ばなかったらこっち;
stop
endif
stop
@enduml
....
---
== 境界線・遅延・間隔
説明
[plantuml,"{temp}/{counter:uml}",svg]
....
@startuml
' ヘッダー・フッターを読み込み & スタイル定義ファイル読み込み
title 境界線・遅延・間隔
' 境界線
== 境界線 ==
FUGA --> HOGE: Authentication Request
HOGE --> FUGA: Authentication Response
' 遅延
...
FUGA --> HOGE: Another authentication Request
HOGE --> FUGA: another authentication Response
' 間隔50px
||50||
FUGA --> HOGE: Another authentication Request
HOGE --> FUGA: another authentication Response
@enduml
....
---
== ライブラリーインポート(AWS)
説明
[plantuml,"{temp}/{counter:uml}",svg]
....
@startuml
!include <aws/common>
!include <aws/Storage/AmazonS3/AmazonS3>
!include <aws/Storage/AmazonS3/bucket/bucket>
skinparam Shadowing false
title ライブラリーインポート(AWS)
AMAZONS3(s3_internal)
AMAZONS3(s3_partner,"Vendor's S3")
s3_internal <- s3_partner
@enduml
....
---
== コメント・注釈
説明
[plantuml,"{temp}/{counter:uml}",svg]
....
@startuml
' ヘッダー・フッターを読み込み & スタイル定義
skinparam Shadowing false
' タイトル
title ノート(メモの使い方)
/'単純なノート
他の要素に直接繋げない場合、名前を付ける必要があるので注意
'/
note "単純なノート" as sinmpeNote
' 複雑なノート
note as complexNote
複雑なノート
改行するとそのまま改行される
===
' ===で二重線を引くことができる
- <b>太文字</b>
- **「*」も使える**
- <u>アンダーライン</u>
- __「_」も使える__
- ~~「~」で波線も使える~~
- <i>斜字体</i>
- //「/」も使える//
- <s>打ち</s> <del>消し</del> <strike>線</strike>
- --「-」も使える--
- <font color="indigo">文字色変更</font>
- <size:11>フォントサイズ変更</size>
- 画像の挿入
---
' ---で境界線を引くことができる
<img https://pbs.twimg.com/profile_images/3228282688/4a3c9e25b9831f3d74c357cae6c90636_reasonably_small.png>
end note
/'エレメントとノートを関連付ける
1. 関連付けるエレメントの直後にnoteを入れる
2. ノートに名前をつけ、線でつなぐ
'/
(上note)
note top: 上にノートをくっつける
(右note)
note right: 右にノートをくっつける
(下note)
note bottom
下にノートをくっつける
複数行もできる
end note
(左note)
note left
左にノートをくっつける
複数行もできる
end note
complexNote ... (右note)
complexNote --- (上note)
(上note) -right-> (右note)
(右note) -down-> (下note)
(下note) -left-> (左note)
(左note) -up-> (上note)
@enduml
....
---
== ワイヤーフレーム
UIみたいなプロトタイプ
[plantuml,"{temp}/{counter:uml}",svg]
....
@startsalt
{+
{* ファイル | 編集 | 表示 | ウィンドウ | ヘルプ}
{/ ブログ記事編集 | 僕的URMのススメ | PlanUML言語 }
{
{ 保存種別: | ^日時を指定して予約投稿^ }
[X] サムネイル画像を変更する
[X] Twitterと連携し、投稿されたらツイートする
[ ] 投稿時にメールを送信する
}
{[Close] | [Cancel] | [保存]}
}
@endsalt
....
== ソルト (ツリー構造)
[plantuml,"{temp}/{counter:uml}",svg]
....
@startsalt
{
{T
+ World
++ America
+++ Canada
+++ USA
++++ New York
++++ Boston
+++ Mexico
++ Europe
+++ Italy
+++ Germany
++++ Berlin
++ Africa
}
}
@endsalt
....
== マインドマップ
[plantuml,"{temp}/{counter:uml}",svg,title="title"]
....
@startmindmap
' ヘッダー・フッターを読み込み & スタイル定義ファイル読み込み
title マインドマップ
* <&star>星のカービィ
** サウンド
*** ボイス
****_ 大本 眞基子(カービィ他)
****_ 桜井 政博(デデデ 64, スマブラ)
****_ 緒方 賢一(デデデ アニメ)
****_ 熊崎 信也(デデデ USD, Wii, トリデラ)
****_ 私市 淳(メタナイト)
****_ 齋藤 彩夏(ワドルディ)
*** 効果音
****_ 安藤浩和
****_ 石川淳
****_ 小笠原雄太
*** 音楽
****_ 安藤浩和
****_ 石川淳
****_ 小笠原雄太
** テキスト
*** システムメッセージ
****_ 子供向け
****_ 伏線を張りまくる
****_ ネタを作る
*** ナレーション
****_ 毛糸のカービィのみナレーションあり
****_ 津賀 有子
*** セリフ
****_ 備えあれば嬉しいな!
****_ 才能は無くても根気だけはある物好きは腐るほどいるでゲス
****_ 環境破壊は気持ちいいぞい
** グラフィック
*** 背景
****_ 美しい系のきれい
****_ 違和感がない程度に異常
*** オブジェクト
****_ 限りなく少ない
****_ ワドルディが時々コントしてる
*** カメラワーク
****_ 固定
*****_ 基本2D移動
left side
** 世界観
*** コンテキスト
****_ カービィの周りは平和
****_ なにげにシリーズを通して深い
*** キャラクター
****_ 基本的に可愛らしいビジュアル
*** イベント
****_ ギミック多め
****_ HAL部屋
****_ 裏切り
****_ 敵の敵は味方
*** ストーリー
****_ 可愛らしさ優先
****_ 割とエグい設定
****_ 世界の危機(いつもの)
** システム
*** 自由度
****_ 増え続けるコピー能力
****_ 基本ストーリーをなぞる
****_ 移動に関する自由はほぼ無い
*** 操作性
****_ コピー能力によりコマンド有り
****_ ノーマルの場合は単純明快
*** ゲームバランス
****_ 基本初心者向け
****_ 上級者向けのモードあり
@endmindmap
....
This source diff could not be displayed because it is too large. You can view the blob instead.
:icons: font
= AsciiDocのインストールまとめ [small]#2020/2/4#
:sectnums:
:sectnumlevels: 5
:experimental:
// // :module: モジュール名
// :Author: 著者名
// :Email: メールアドレス
// :Date: 日付(2020/01/20)
// :Revision: Rev.1
// :lang: ja
// :doctype: book
// :description:
// :docname: ドキュメント名
// // 見出し設定
// :sectnums:
// :chapter-label:
// // 目次作成
:toc: left
// :toclevels: 3
// // ラベルの日本語設定
// :toc-title: 目次
// :preface-title: はじめに/まえがき
// :appendix-caption: 付録
// :caution-caption: 注意
// :example-caption: 例
:figure-caption: 図
// :important-caption: 重要
// :last-update-label: 最終更新
// :listing-caption: リスト
// :manname-title: 名前
// :note-caption: 注記
// :table-caption: 表
// :tip-caption: ヒント
// :toc-title: 目次
// :untitled-label: 無題
// :version-label: バージョン
// :warning-caption: 警告
.[big]#概要#
[%hardbreaks]
もっとも簡単な方法を説明する。
Asciidocの記述およびPlantUML記述可能になります。
おそらくVisualStudioCodeのインストール含めて5分程度で完了するでしょう。
[IMPORTANT]
--
[%hardbreaks]
[yellow-background]## 外部に漏れてはいけないUML図を使用しないでください ##
PlantUMLの記述を行った場合に外部のサーバー https://kroki.io へアクセスしてレンダリングされてしまいます。
(kiroki.io: 各種ダイアグラムをレンダリングするOSSサービスサイトです)
--
== VisualStudioCodeへのインストール
=== VSCode自身のインストール
https://code.visualstudio.com[省略します]
=== AsciiDoc拡張機能のインストール
VSCodeにAsciiDoc拡張機能をインストールする
. 拡張機能を開いて、[AsciiDoc]で検索
. 下図のアイコンのAsciiDocを選択して kbd:[Install]をクリックする (これだけ)
image::instAsciiDocExtend.JPG[instExtADoc,700,700,title=ADoc拡張]
=== 初期設定の変更箇所
[%hardbreaks]
AsciiDocの初期パラメータを調整
* メニューからmenu:File[Preference,Setting]を選択
* `Search Strings` に `AsciiDoc` と入力。AsciiDoc関連のパラメータが表示されるので以下のパラメータを変更する
1. menu:asciidoc[preview.useEditorStyle]:false (プレビューの背景を白)
2. menu:asciidoc[use_kroki]: true (UML図が描画できる、ただし外部サーバー)
3. menu:asciidoc[use_asciidoctor_js]: true (ここは固定である)
4. menu:asciidoc[use_asciidoctorpdf]: false(ここは固定である)
★念のためvscodeを再起動
=== 確認方法
* 添付の `SampleADocAndUML.adoc` の表示結果が `SampleADocAndUML.html` の表示出力結果と同じかどうか確認してください
(チェット違うけどね...)
* vscodeで``SampleADocAndUML.adoc``を開き、kbd:[Cntl+K]、 kbd:[Cntl]を離してkbd:[V] でプレビュー表示される
== Chromeブラウザへのインストール(ブラウズ専用)
ChromeにAsciiDoc拡張機能(Asciidoctor.js Live Preview)をインストールする
1. https://chrome.google.com/webstore/detail/asciidoctorjs-live-previe/iaalpfgpbocpdfblpnhhgllgbdbchmia[Asciidoctor.js Live Preview] を開く
2. btn:[chromeに追加] ボタンを選択
3. menu:Chrome[その他ツール,拡張機能]を選択
4. btn:[Asciidoctor.js Live Preview]内の kbd:[詳細]を選択。OFFならONにする
5. ファイルURLへのアクセスを許可するをkbd:[有効]にします
+
image::instChromeAsciiDoc.jpg[a,600,100,align=center]
6. kbd:[拡張機能のオプション]を選択して以下を設定する(こんなけ)
[number]
.. toc=left (目次を右につける)
.. Enable the diagrams extension (UMLを使う)
+
image::ex1.jpg[a,400,100,align=center]
image::ex2.jpg[a,400,100,align=center]
=== 確認方法
* vscodeと同じデータで確認を。
== 以下古いもの (もうやらなくてよい。うまく動かない)
AsciiDocをPlantUML,Mermaid.jsを含めてインストールするものを説明する
. javaのインストール ( for PlantUML)
. node.jsのインストール (v10.16.0 ok)
. rubyのインストール
+
....
https://rubyinstaller.org/downloads/
Ruby 2.6.3-1 (x64)
1 - 'MSYS2 base installation'でインスト に何度も失敗
※10回ぐらいで成功(msys2-x86_64-20180531.exe)
....
. asciidoctor/diagram/pahtomjs/mermaid/mermaid.cliのインストール
+
....
コマンドラインで以下を実行する
gem install asciidoctor
gem install asciidoctor-diagram
gem install --pre asciidoctor-pdf
---
npm install -g phantomjs
npm install -g mermaid
npm install -g mermaid.cli
....
. vs code 拡張機能: `joaompinto.asciidoctor-vscode`
.. インストール
+
拡張機能タブから、"AsciiDoc"を検索してインストールする。
以下でもよい:
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter:
ext install joaompinto.asciidoctor-vscode
+
.. ショートカット
+
Toggle Preview - ctrl+shift+v (Mac: cmd+shift+v)
Open Preview to the Side - ctrl+k v (Mac: cmd+k v)
View symbols - go to symbol action - ctrl+shift+o, select a heading.
. vscodeの追加設定
+
PlantUML,mermaid.jsをプレビューするには以下の設定を行う
[source,json]
....
"asciidoc.asciidoctor_command":"asciidoctor -a outdir=tmp -a imagesdir=tmp -a imagesoutdir=tmp -r asciidoctor-diagram -o-"
"asciidoc.use_asciidoctor_js": false
....
CAUTION: ★ mermaidプレビュー不正の確認と修正
marmaidの表示でpantomjs(chronimun)を利用するが、描画できないときがある。以下のようなメッセージ:
----
Failed to generate image: C:\Users\<UserID>\AppData\Roaming\npm/mmdc.CMD failed: (node:6884) UnhandledPromiseRejectionWarning: Error: Failed to launch chrome!
TROUBLESHOOTING: https://github.com/GoogleChrome/puppeteer/blob/master/docs/troubleshooting.md
----
chromeとの非互換がある様子。
TROUBLESHOOTINGより、以下:
----
const browser = await puppeteer.launch({
ignoreDefaultArgs: ['--disable-extensions'],
});
----
mermaidの起動を変更するには、mmdcコマンドに上記のオプションを追加して起動が必要。configファイルを作成して呼び出す(2step) +
C:\Users\<UserID>\AppData\Roaming\npm\node_modules\mermaid.cli\node_modules\puppeteer\readme.md を参考にmmdcの起動オプションを追加する
場所は、C:\Users\<UserID>\AppData\Roaming\npm 直下
. puppeteerのconfigファイルを作成 +
p-config.json:
+
[source,json]
----
{
"ignoreDefaultArgs": ["--disable-extensions"]
}
----
. mmdc.cmdファイルに追記
+
mmdc.cmd:
[source]
----
@SET CONF_OPT=-p "%~dp0\p-config.json"
@IF EXIST "%~dp0\node.exe" (
"%~dp0\node.exe" "%~dp0\node_modules\mermaid.cli\index.bundle.js" %CONF_OPT% %*
) ELSE (
@SETLOCAL
@SET PATHEXT=%PATHEXT:;.JS;=;%
node "%~dp0\node_modules\mermaid.cli\index.bundle.js" %CONF_OPT% %*
)
----
. テスト
+
以下でpngファイルが作成できればOK +
mmdc -i <mmdファイル> -o test.png
== AsciiDocの使い方 ==
...
== もう一度インストール確認 [small]#2019/12/17#
https://qiita.com/shiro01/items/fb93e91a8424e1c4a556
https://qiita.com/shiro01/items/a300b6d5b572a314ce5e
https://qiita.com/hyt126/items/fdeff36f09bb221dfac0
asciidoctor-pdfで日本語が化ける件は以下です
https://qiita.com/hidao/items/f8a94a9ced332606c67f
C:\Ruby26-x64\lib\ruby\gems\2.6.0\gems\asciidoctor-pdf-1.5.0.beta.8\data\themes
default-with-fallback-font-theme.yml
の内容を
default-theme.yml
に転記すればよい。
■MacBookAirのバージョンを再インストールしたら動いた
★javaのネットワークアクセスが関係している様子。
>gem list ascii*
*** LOCAL GEMS ***
Ascii85 (1.0.3)
asciidoctor (2.0.10)
asciidoctor-diagram (1.5.18)
asciidoctor-pdf (1.5.0.alpha.18)
asciidoctor-pdf-cjk (0.1.3)
.gem unistall 管理者権限で
gem unistall asciidoctor -v '2.0.10'
のようにバージョンを指定してアンインストールする
.gem install 管理者権限でバージョンを指定する
gem install asciidoctor -v '2.0.10'
gem install asciidoctor-diagram -v '1.5.18'
gem install asciidoctor-pdf -v '1.5.0.alpha.18'
gem install asciidoctor-pdf-cjk -v '0.1.3'
.もう一度最新版をインストールする → 結局だめ、UMLがあるとなぜか止まる
最新版は以下:
asciidoctor (2.0.10)
asciidoctor-diagram (2.0.0)
asciidoctor-pdf (1.5.0.beta.8)
asciidoctor-pdf-cjk (0.1.3)
  おそらく「asciidoctor-pdf (1.5.0.beta.8)」がおかしい
 
→ MacbookAirと同じバージョンをインストールしておわり。
asciidoctor-pdf -r asciidoctor-pdf-cjk -r asciidoctor-diagram sample.adoc
.Graphvizのインストールは必要です。パスの設定も
もうしんどいから、見ない。。。(END)
This source diff could not be displayed because it is too large. You can view the blob instead.
:experimental:
:lang: ja
:icons: font
:sectnums:
:sectnumlevels: 5
:experimental:
:toc: left
:figure-caption: 図
// マクロ
// :image-root-dir: ./
// :image-root-dir: ..\
= AsciiDocのインストールまとめ rev2 [small]#[2020/5/18]#
.[big]#概要#
[%hardbreaks]
AsciiDocの編集及びプレビュー表示を可能にする環境の構築方法について記述する。
情報は、2020/5/18現在のものとする。
== Visual Studio Code上での編集/プレビュー環境構築
=== VSCode自身のインストール
https://code.visualstudio.com/download/[ココ] (VSCodeのサイト) からダウンロード、インストールする。
[title="",caption="",cols="a,2a",frame="none",grid="all"]
|====
|
// 左
image::UserOrSystem.png[VSCode Installer, 58%]
|
// 右
ダウンロードページには、User InstallerとSystem Installerとが用意されているが、それぞれ以下の通り。
- User Installer:そのユーザーのみにインストール
- System Installer:全ユーザーにインストール(管理者権限が必要)
どちらを選んでもアプリケーションそのものの違いはない。
|====
=== 拡張機能のインストール
==== AsciiDoc
VSCodeにAsciiDoc拡張機能をインストールする。
. kbd:[Control+Shift+X] を押下 (または下図左下のアイコンをクリック)
. 拡張機能の検索窓に *AsciiDoc* と入力
. 下図のアイコンのAsciiDocを選択して *Install* をクリック
image::instAsciiDocExtend.JPG[instExtADoc,title=AsciiDoc拡張, 50%]
==== VSCodeの日本語化 (※任意)
VSCodeのメニューを日本語にする。AsciiDocに直接の関係はないので任意。
. kbd:[Control+Shift+X] を押下
. 拡張機能の検索窓に *Japanese* と入力
. "Japanese Language Pack for Visual Studio Code"(発行者:Microsoft) を選択して *Install* をクリック
=== 初期設定の変更箇所
[%hardbreaks]
AsciiDocの初期パラメータを調整する。
※日本語化していたら、適宜読み替えのこと。
* kbd:[Control + ,] を押下 (または、メニューからmenu:File[Preference,Setting]を選択)
* `Search Strings` に `AsciiDoc` と入力。AsciiDoc関連のパラメータが表示されるので以下のパラメータを変更
. menu:asciidoc[preview: Use Editor Style]: チェックOFF (プレビューの背景を白)
. menu:asciidoc[Use_kroki]: チェックON(UML図が描画できる、ただし外部サーバーに接続される)
. menu:asciidoc[Use_asciidoctor_js]: チェックON
. menu:asciidoc[Use_asciidoctorpdf]: チェックOFF
* 本設定を行ったタブを閉じた後、VSCodeを再起動
[[check_vs]]
=== 確認方法
添付の `SampleADocAndUML.adoc` のプレビュー表示結果が `SampleADocAndUML.html` の表示出力結果と(ほぼ)同じかどうか確認する。 +
プレビューは、VSCodeで``SampleADocAndUML.adoc``を開いた後、『kbd:[Cntl+K]、 kbd:[Cntl]を離してkbd:[V]』または『ウインドウ右上のアイコンimage:IconPreview.png[IconPreview]を押下』すると、右側に表示される。
== Chrome上でのプレビュー環境構築
=== 拡張機能のインストール
ChromeにAsciiDoc拡張機能(Asciidoctor.js Live Preview)をインストールする。
. https://chrome.google.com/webstore/detail/asciidoctorjs-live-previe/iaalpfgpbocpdfblpnhhgllgbdbchmia[Asciidoctor.js Live Preview] を開く
. btn:[chromeに追加] ボタンを選択
. menu:Chromeのウィンドウ[その他のツール(右上の縦3点リーダ),拡張機能]を選択
. btn:[Asciidoctor.js Live Preview]の kbd:[詳細]を選択。OFFならONに変更
. ファイルURLへのアクセスを許可するをkbd:[有効]に
+
image::instChromeAsciiDoc.JPG[a,align=center, 50%]
. kbd:[拡張機能のオプション]を選択して以下を設定
[number]
.. toc=left (目次を右につける)
.. Enable the diagrams extension (UMLを使う)
+
image::ex1.JPG[a, align=center, 50%]
image::ex2.JPG[a, align=center, 50%]
=== 確認方法
添付の `SampleADocAndUML.adoc` をChrome上にドラッグ&ドロップして表示されるプレビュー結果が `SampleADocAndUML.html` の表示出力結果と(ほぼ)同じかどうか確認する。
== 別形式でのファイル出力
=== HTML出力
開いている$$.$$adocファイルと同じフォルダに、同名の$$.$$htmlファイルとして保存する。上書き保存されるので注意。
. $$.$$adocファイルを開く
. kbd:[Control+Shift+p]を押下
. $$>$$ の横に "AsciiDoc: Save HTML document" と入力、kbd:[Enter]を押下
== その他
詳細は割愛した事項を以下に記す。
=== PDF出力
AsciiDoctorが必要。また、AsciiDoctorをインストールするには、Rubyが必要 (gemパッケージとして配布されているため)。
- AsciiDoctorをインストールするには、Rubyをインストールした後、以下のコマンドでOK。 +
gem install asciidoctor
gem install asciidoctor-pdf
- 出力するには、VSCodeの設定で menu:asciidoc[Use_asciidoctorpdf]: false とした後、kbd:[Control+Shift+p] → "AsciiDoc: Export document as PDF" とすれば保存できる。
ただし、日本語が化けるので、default-themes.yml にフォントの情報を追記しなければならない。
=== PlantUML
VSCodeの拡張機能における設定で、menu:asciidoc[use_kroki]: true とした場合、
PlantUMLの記述を行うと、レンダリングのため https://kroki.io にアクセスしてしまう。そのため、外部に漏れてはいけないUML図を記述できない。
ローカルでレンダリングする(外部に接続しないようにする)には、次のようにすればよい。
- asciidoctor-diagramをインストール。
gem install asciidoctor-diagram
- VSCodeの設定を次のように変更。
"asciidoc.asciidoctor_command":"asciidoctor -r asciidoctor-diagram"
"asciidoc.use_asciidoctor_js": false
ただし、これだと$$.adoc$$と同じ場所に画像ファイルが沢山できてしまうので、
[source,json]
....
"asciidoctor -r asciidoctor-diagram -a outdir=.asciidoctor -a imagesdir=.asciidoctor -a imagesoutdir=.asciidoctor"
....
のようにしておくとよい。
また、諸々のUML図を描画するなら、おそらく Graphviz のインストールも必要。
以上
////
[コメント開始]
各種事前定義 ここでは最低限必要なものだけ定義、一覧説明をコメントブロックで記載しておく
定義が不要なら、//でコメントアウト、adoc毎に!(びっくりマーク)を追加すればよい
例. :sectnums!:
[コメント終了]
////
//-----------------------------------------------------------------------------------------------------
// 事前定義
:lang: ja
:doctype: book
:toclevels: 3
:sectnums:
:sectnumlevels: 4
:sectlinks:
:icons: font
:toc-title: 目次
:example-caption: 例
:table-caption: 表
:figure-caption: 図
//-----------------------------------------------------------------------------------------------------
////
// ドキュメント毎に設定すべきもの
:toc: left
:source-highlighter: coderay
:docname: = asciidoc
:author: my name
:revnumber: 0.9
:revdate: 2019/12/1
////
////
//-----------------------------------------------------------------------------------------------------
意味が不明なものは以下を参照
https://takumon.github.io/asciidoc-syntax-quick-reference-japanese-translation/
// 属性定義
:experimental: *各種マクロ拡張時に定義しておく
::module: *モジュール名
:Author: *著者名
:Email: *メールアドレス
:Date: *日付(2020/01/20)
:Revision: Rev.1 * リビジョン指定
:lang: ja * 言語指定
:doctype: book * 言語の種類(ja,...)
:description: * 説明???
:docname: ドキュメント名 * ドキュメント説明
//:imagesdir: ./_images
// イメージのパスを指定
// ハイライト、画像パス
//:source-highlighter: coderay
// coderay, ....
// --------------------------------------------
// 見出し設定
:sectnums:
// セクションに番号On, Offのときはコメントアウト
:chapter-label:
// キャプチャーのラベル、不要なときは、空指定
// --------------------------------------------
// 目次作成
:toc: left
// 目次 left,right,macro macroの場合は挿入箇所でtoc::[]を記述する
:toclevels: 3
// 目次 階層レベル
:toc-title: 目次
// 目次のタイトル
// --------------------------------------------
// 各ラベルの日本語設定
:preface-title: はじめに/まえがき
:appendix-caption: 付録
:caution-caption: 注意
:example-caption: 例
:figure-caption: 図
:important-caption: 重要
:last-update-label: 最終更新
:listing-caption: リスト
:manname-title: 名前
:note-caption: 注記
:toc-title: 目次
:table-caption: 表
:warning-caption: 警告
:tip-caption: ヒント
:untitled-label: 無題
:version-label: バージョン
////
:experimental:
:lang: ja
:icons: font
:sectnums:
:sectnumlevels: 5
:experimental:
:toc: left
:figure-caption: 図
:toc-title: 目次
= AsciiDoc関連で出来そうなこと [.small]#(2020/05/26)#
以下、できそうなことをリストアップします。内容の粒度はまちまちですがご容赦ください。
== adocファイルをpushしたときにpdf/htmlファイルを自動生成
以下のサイトを参考にして $$.gitlab-ci.yml$$ を記述(CI/CDを設定)すればできるかもしれない。
https://blog.koyama.me/archives/1579[asciidocで書いた履歴書をGitLabのCIで自動ビルド]::
これが一番近そう。おそらく、Dockerのimageに https://github.com/htakeuchi/docker-asciidoctor-jp[htakeuchi/docker-asciidoctor-jp] を指定しているのがポイント。
https://tech-blog.cloud-config.jp/2020-03-26-github-actions-asciidoc1/[GitHub Actionsを使って気軽にAsciiDocを出力しよう(1)]::
GitHubなので少し違うかも。
https://github.com/manumilou/gitlab-ci-example-asciidoc/blob/master/.gitlab-ci.yml[manumilou/gitlab-ci-example-asciidoc]::
imageが指定されていない。動くのだろうか。
== ローカルでUML図を描画
PlantUML Serverをローカルに構築すれば、外部サーバーに接続することなくUMLのプレビューが表示できる…と思ったが、AsciiDocの拡張機能には、PlantUMLのサーバーを指定する設定がない模様。 +
なお、以下を参考にすれば、PlantUML Serverの構築まではスムーズにできる(Windows10Proで確認済)。あとはサーバーを指定するだけなのだが...
参考:
https://dev.classmethod.jp/articles/plantuml-server-on-docker/[UMLの爆速プレビュー環境をVisual Studio Code + PlantUML Server on Dockerで簡単に構築する]
== 表のセル中の揃え (上/中/下, 右/中/下)
これはできる。col属性で指定する。(水平方向)$$.$$(垂直方向)。 +
水平方向::
< が 左、^ が 中、> が 右
垂直方向::
< が 上、^ が 中、> が 下
以下の表は、$$[cols="<.^, >.<, ^.>"]$$ すなわち「左/中揃え」「右/上揃え」「中/下揃え」として指定した例。効いているかどうかわかりにくい部分もあるが。
[cols="<.^ ,>.<, ^.>"]
|===
| 1111111111
111111111
11111111111
| 2222222222
2222222222222
22222222222
22222222222
| 3333333
3333
3333333
333333333
33
3
3
| Cell 1
| Cell 2
| Cell 3
|===
以上
include::configJ.adoc[]
:toc: left
:imagesdir: ./
:experimental:
= 業務改善活動[AsciiDoc] 2020/07/28 メモ
[%hardbreaks]
参加者(敬称略)
SW1:北大路、石田
AP:木村、大島、松尾
日時場所:2020/07/28 10:30-11:10 ブラビア前
== アジェンダ
link:\\133.224.54.154\520MK2_Software\リリースノート標準化\AsciiDoc\20200728_2回目打合[]
. SW1側:リリースノート改善
3機種でリリースノート調査
. AP側:AsciiDoc
. 業務改善年間計画
.課題
* フォント ヒラギノを使えない。
== 確認事項
どうします?::
→ AsciiDocをつかう方向とします(SW)
使い方の質問はどんどんしてください(AP)
== アクション
.次回
※8/末 SW1課の加藤さんも入るかも
== AsciiDoc
[%hardbreaks]
.作ってみました
``TP-J520NX_NXEN_Firmware_Ver2.55_RN_JP_for_user.docx`` を少しだけAsciiDocで記述
link:\\133.224.54.154\520MK2_Software\リリースノート標準化[リリースノート標準化に配置]
以上
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment