diff --git "a/_Publish/1_\343\202\244\343\203\263\343\202\271\343\203\210\343\203\274\343\203\253/Images/IconPreview.png" "b/_Publish/1_\343\202\244\343\203\263\343\202\271\343\203\210\343\203\274\343\203\253/Images/IconPreview.png" new file mode 100644 index 0000000000000000000000000000000000000000..8a2b1580e3386815617b0ed4d52944ea2cbc98df Binary files /dev/null and "b/_Publish/1_\343\202\244\343\203\263\343\202\271\343\203\210\343\203\274\343\203\253/Images/IconPreview.png" differ diff --git "a/_Publish/1_\343\202\244\343\203\263\343\202\271\343\203\210\343\203\274\343\203\253/Images/UserOrSystem.png" "b/_Publish/1_\343\202\244\343\203\263\343\202\271\343\203\210\343\203\274\343\203\253/Images/UserOrSystem.png" new file mode 100644 index 0000000000000000000000000000000000000000..5d67e363ef2a24cde10d2083698d4da1e99f34ff Binary files /dev/null and "b/_Publish/1_\343\202\244\343\203\263\343\202\271\343\203\210\343\203\274\343\203\253/Images/UserOrSystem.png" differ diff --git "a/_Publish/1_\343\202\244\343\203\263\343\202\271\343\203\210\343\203\274\343\203\253/Images/ex1.JPG" "b/_Publish/1_\343\202\244\343\203\263\343\202\271\343\203\210\343\203\274\343\203\253/Images/ex1.JPG" new file mode 100644 index 0000000000000000000000000000000000000000..e98503b377a67b78fc68ef5c37fa501d4c9b3d2c Binary files /dev/null and "b/_Publish/1_\343\202\244\343\203\263\343\202\271\343\203\210\343\203\274\343\203\253/Images/ex1.JPG" differ diff --git "a/_Publish/1_\343\202\244\343\203\263\343\202\271\343\203\210\343\203\274\343\203\253/Images/ex2.JPG" "b/_Publish/1_\343\202\244\343\203\263\343\202\271\343\203\210\343\203\274\343\203\253/Images/ex2.JPG" new file mode 100644 index 0000000000000000000000000000000000000000..7c632a3d6e6905b02e6c155dade1e387cf0a3023 Binary files /dev/null and "b/_Publish/1_\343\202\244\343\203\263\343\202\271\343\203\210\343\203\274\343\203\253/Images/ex2.JPG" differ diff --git "a/_Publish/1_\343\202\244\343\203\263\343\202\271\343\203\210\343\203\274\343\203\253/Images/instAsciiDocExtend.JPG" "b/_Publish/1_\343\202\244\343\203\263\343\202\271\343\203\210\343\203\274\343\203\253/Images/instAsciiDocExtend.JPG" new file mode 100644 index 0000000000000000000000000000000000000000..cc332b6f28dbad92b2b2940702dbf581682ba1d9 Binary files /dev/null and "b/_Publish/1_\343\202\244\343\203\263\343\202\271\343\203\210\343\203\274\343\203\253/Images/instAsciiDocExtend.JPG" differ diff --git "a/_Publish/1_\343\202\244\343\203\263\343\202\271\343\203\210\343\203\274\343\203\253/Images/instChromeAsciiDoc.JPG" "b/_Publish/1_\343\202\244\343\203\263\343\202\271\343\203\210\343\203\274\343\203\253/Images/instChromeAsciiDoc.JPG" new file mode 100644 index 0000000000000000000000000000000000000000..a15aa80782a5c08973be9397496980099acf055c Binary files /dev/null and "b/_Publish/1_\343\202\244\343\203\263\343\202\271\343\203\210\343\203\274\343\203\253/Images/instChromeAsciiDoc.JPG" differ diff --git "a/_Publish/1_\343\202\244\343\203\263\343\202\271\343\203\210\343\203\274\343\203\253/SampleOfADocAndUML/SampleOfADocAndUML.adoc" "b/_Publish/1_\343\202\244\343\203\263\343\202\271\343\203\210\343\203\274\343\203\253/SampleOfADocAndUML/SampleOfADocAndUML.adoc" new file mode 100644 index 0000000000000000000000000000000000000000..a952b51709ed6221b2c597af30a78cc74f26fad7 --- /dev/null +++ "b/_Publish/1_\343\202\244\343\203\263\343\202\271\343\203\210\343\203\274\343\203\253/SampleOfADocAndUML/SampleOfADocAndUML.adoc" @@ -0,0 +1,347 @@ + +: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: : <> +:アクター2: ..|> :アクター3: : <> +:アクター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 +!include +!include +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 + 複雑なノート + 改行するとそのまま改行される + === + ' ===で二重線を引くことができる + - 太文字 + - **「*」も使える** + - アンダーライン + - __「_」も使える__ + - ~~「~」で波線も使える~~ + - 斜字体 + - //「/」も使える// + - 打ち 消し 線 + - --「-」も使える-- + - 文字色変更 + - フォントサイズ変更 + - 画像の挿入 + --- + ' ---で境界線を引くことができる + +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 +.... diff --git "a/_Publish/1_\343\202\244\343\203\263\343\202\271\343\203\210\343\203\274\343\203\253/SampleOfADocAndUML/SampleOfADocAndUML.html" "b/_Publish/1_\343\202\244\343\203\263\343\202\271\343\203\210\343\203\274\343\203\253/SampleOfADocAndUML/SampleOfADocAndUML.html" new file mode 100644 index 0000000000000000000000000000000000000000..f6dfd48a63e450302ed32a7e9c97be38923dd555 --- /dev/null +++ "b/_Publish/1_\343\202\244\343\203\263\343\202\271\343\203\210\343\203\274\343\203\253/SampleOfADocAndUML/SampleOfADocAndUML.html" @@ -0,0 +1,612 @@ + + + + + + + +PlantUML関連のサンプル(雑に) + + + + + +
+
+
+
+
+
以下からサンプル
+
+

https://dtm3110.hatenablog.com/entry/2019/11/05/113000

+
+
+
★これは定型的に記述する
+
+
+
+
+
.ラベルタイトル
+説明
+[plantuml,"{temp}/{counter:uml}",svg]
+....
+@startuml
+	....
+@enduml
+....
+
+
+
+
+
+
+
+
+
+

1. コンポーネント図

+
+
+

説明

+
+
+
+1 +
+
+
+
+
+
+

2. ユースケース

+
+
+

説明

+
+
+
+2 +
+
+
+
+
+

3. フローチャート

+
+
+

説明

+
+
+
+3 +
+
+
+
+
+
+

4. 境界線・遅延・間隔

+
+
+

説明

+
+
+
+4 +
+
+
+
+
+
+

5. ライブラリーインポート(AWS)

+
+
+

説明

+
+
+
+5 +
+
+
+
+
+
+

6. コメント・注釈

+
+
+

説明

+
+
+
+6 +
+
+
+
+
+
+

7. ワイヤーフレーム

+
+
+

UIみたいなプロトタイプ

+
+
+
+7 +
+
+
+
+
+

8. ソルト (ツリー構造)

+
+
+
+8 +
+
+
+
+
+

9. マインドマップ

+
+
+
+9 +
+
Figure 1. title
+
+
+
+
+ + + \ No newline at end of file diff --git "a/_Publish/1_\343\202\244\343\203\263\343\202\271\343\203\210\343\203\274\343\203\253/TipsInstallEasy.adoc" "b/_Publish/1_\343\202\244\343\203\263\343\202\271\343\203\210\343\203\274\343\203\253/TipsInstallEasy.adoc" new file mode 100644 index 0000000000000000000000000000000000000000..1fc113d6a366d5de22d3c81763bbd09a35e01ba4 --- /dev/null +++ "b/_Publish/1_\343\202\244\343\203\263\343\202\271\343\203\210\343\203\274\343\203\253/TipsInstallEasy.adoc" @@ -0,0 +1,168 @@ +// :experimental: +// :lang: ja +// :icons: font +// :sectnums: +// :sectnumlevels: 5 +// :experimental: +// :figure-caption: 図 + + +:lang: ja +include::config.adoc[] +:toc: left + +// マクロ +// :image-root-dir: ./ +// :image-root-dir: ..\ +:imagesdir: Images + += AsciiDocのインストールまとめ rev3 [small]#[2020/12/25]# + +.[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 のインストールも必要。 + +以上 diff --git "a/_Publish/1_\343\202\244\343\203\263\343\202\271\343\203\210\343\203\274\343\203\253/TipsInstallEasy.html" "b/_Publish/1_\343\202\244\343\203\263\343\202\271\343\203\210\343\203\274\343\203\253/TipsInstallEasy.html" new file mode 100644 index 0000000000000000000000000000000000000000..22c2ae20cb83c943e956b97eafef787799d305e3 --- /dev/null +++ "b/_Publish/1_\343\202\244\343\203\263\343\202\271\343\203\210\343\203\274\343\203\253/TipsInstallEasy.html" @@ -0,0 +1,798 @@ + + + + + + + +AsciiDocのインストールまとめ rev3 [2020/12/25] + + + + + + +
+
+
+
+
概要
+

AsciiDocの編集及びプレビュー表示を可能にする環境の構築方法について記述する。
+情報は、2020/5/18現在のものとする。

+
+
+
+
+

1. Visual Studio Code上での編集/プレビュー環境構築

+
+
+

1.1. VSCode自身のインストール

+
+

ココ (VSCodeのサイト) からダウンロード、インストールする。

+
+ + ++++ + + + + + + +
+
+VSCode Installer +
+
+

ダウンロードページには、User InstallerとSystem Installerとが用意されているが、それぞれ以下の通り。

+
+
+
    +
  • +

    User Installer：そのユーザーのみにインストール

    +
    • +
  • +

    System Installer：全ユーザーにインストール(管理者権限が必要)

    +
    • +
+
+
+

どちらを選んでもアプリケーションそのものの違いはない。

+
+
+
+

1.2. 拡張機能のインストール

+
+

1.2.1. AsciiDoc

+
+

VSCodeにAsciiDoc拡張機能をインストールする。

+
+
+
    +
  1. +

    Control+Shift+X を押下 (または下図左下のアイコンをクリック)

    +
    2. +
  2. +

    拡張機能の検索窓に AsciiDoc と入力

    +
    3. +
  3. +

    下図のアイコンのAsciiDocを選択して Install をクリック

    +
    4. +
+
+
+
+instExtADoc +
+
図 1. AsciiDoc拡張
+
+
+
+

1.2.2. VSCodeの日本語化 (※任意)

+
+

VSCodeのメニューを日本語にする。AsciiDocに直接の関係はないので任意。

+
+
+
    +
  1. +

    Control+Shift+X を押下

    +
    2. +
  2. +

    拡張機能の検索窓に Japanese と入力

    +
    3. +
  3. +

    "Japanese Language Pack for Visual Studio Code"(発行者:Microsoft) を選択して Install をクリック

    +
    4. +
+
+
+
+
+

1.3. 初期設定の変更箇所

+
+

AsciiDocの初期パラメータを調整する。
+※日本語化していたら、適宜読み替えのこと。

+
+
+
    +
  • +

    Control+, を押下 (または、メニューからFile  Preference  Settingを選択)

    +
    • +
  • +

    Search Strings に AsciiDoc と入力。AsciiDoc関連のパラメータが表示されるので以下のパラメータを変更

    +
    +
      +
    1. +

      asciidoc  preview: Use Editor Style: チェックOFF (プレビューの背景を白)

      +
      2. +
    2. +

      asciidoc  Use_kroki: チェックON（UML図が描画できる、ただし外部サーバーに接続される)

      +
      3. +
    3. +

      asciidoc  Use_asciidoctor_js: チェックON

      +
      4. +
    4. +

      asciidoc  Use_asciidoctorpdf: チェックOFF

      +
      5. +
    +
    +
    • +
  • +

    本設定を行ったタブを閉じた後、VSCodeを再起動

    +
    • +
+
+
+
+

1.4. 確認方法

+
+

添付の SampleADocAndUML.adoc のプレビュー表示結果が SampleADocAndUML.html の表示出力結果と(ほぼ)同じかどうか確認する。
+プレビューは、VSCodeでSampleADocAndUML.adocを開いた後、『Cntl+K、 Cntlを離してV』または『ウインドウ右上のアイコンIconPreviewを押下』すると、右側に表示される。

+
+
+
+
+
+

2. Chrome上でのプレビュー環境構築

+
+
+

2.1. 拡張機能のインストール

+
+

ChromeにAsciiDoc拡張機能(Asciidoctor.js Live Preview)をインストールする。

+
+
+
    +
  1. +

    Asciidoctor.js Live Preview を開く

    +
    2. +
  2. +

    chromeに追加 ボタンを選択

    +
    3. +
  3. +

    Chromeのウィンドウ  その他のツール(右上の縦3点リーダ)  拡張機能を選択

    +
    4. +
  4. +

    Asciidoctor.js Live Previewの 詳細を選択。OFFならONに変更

    +
    5. +
  5. +

    ファイルURLへのアクセスを許可するを有効に

    +
    +
    +a +
    +
    +
    6. +
  6. +

    拡張機能のオプションを選択して以下を設定

    +
    +
      +
    1. +

      toc=left (目次を右につける)

      +
      2. +
    2. +

      Enable the diagrams extension (UMLを使う)

      +
      +
      +a +
      +
      +
      +
      +a +
      +
      +
      3. +
    +
    +
    7. +
+
+
+
+

2.2. 確認方法

+
+

添付の SampleADocAndUML.adoc をChrome上にドラッグ&ドロップして表示されるプレビュー結果が SampleADocAndUML.html の表示出力結果と(ほぼ)同じかどうか確認する。

+
+
+
+
+
+

3. 別形式でのファイル出力

+
+
+

3.1. HTML出力

+
+

開いている.adocファイルと同じフォルダに、同名の.htmlファイルとして保存する。上書き保存されるので注意。

+
+
+
    +
  1. +

    .adocファイルを開く

    +
    2. +
  2. +

    Control+Shift+pを押下

    +
    3. +
  3. +

    > の横に "AsciiDoc: Save HTML document" と入力、Enterを押下

    +
    4. +
+
+
+
+
+
+

4. その他

+
+
+

詳細は割愛した事項を以下に記す。

+
+
+

4.1. PDF出力

+
+

AsciiDoctorが必要。また、AsciiDoctorをインストールするには、Rubyが必要 (gemパッケージとして配布されているため)。

+
+
+
    +
  • +

    AsciiDoctorをインストールするには、Rubyをインストールした後、以下のコマンドでOK。

    +
    +
    +
    gem install asciidoctor
+gem install asciidoctor-pdf
    +
    +
    +
    • +
  • +

    出力するには、VSCodeの設定で asciidoc  Use_asciidoctorpdf: false とした後、Control+Shift+p → "AsciiDoc: Export document as PDF" とすれば保存できる。

    +
    • +
+
+
+

ただし、日本語が化けるので、default-themes.yml にフォントの情報を追記しなければならない。

+
+
+
+

4.2. PlantUML

+
+

VSCodeの拡張機能における設定で、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と同じ場所に画像ファイルが沢山できてしまうので、

+
+
+
+
"asciidoctor -r asciidoctor-diagram -a outdir=.asciidoctor -a imagesdir=.asciidoctor -a imagesoutdir=.asciidoctor"
+
+
+
+

のようにしておくとよい。

+
+
+

また、諸々のUML図を描画するなら、おそらく Graphviz のインストールも必要。

+
+
+

以上

+
+
+
+
+
+ + + \ No newline at end of file diff --git "a/_Publish/1_\343\202\244\343\203\263\343\202\271\343\203\210\343\203\274\343\203\253/config.adoc" "b/_Publish/1_\343\202\244\343\203\263\343\202\271\343\203\210\343\203\274\343\203\253/config.adoc" new file mode 100644 index 0000000000000000000000000000000000000000..c24276c50a39ffb2abad7cc36ae975b1fd41af72 --- /dev/null +++ "b/_Publish/1_\343\202\244\343\203\263\343\202\271\343\203\210\343\203\274\343\203\253/config.adoc" @@ -0,0 +1,116 @@ +//// +[コメント開始] +各種事前定義 ここでは最低限必要なものだけ定義、一覧説明をコメントブロックで記載しておく +定義が不要なら、//でコメントアウト、adoc毎に!(びっくりマーク)を追加すればよい +例. :sectnums!: + +[コメント終了] +//// + +//----------------------------------------------------------------------------------------------------- + +// 事前定義 +:doctype: article +:toclevels: 3 +:sectnums: +:sectnumlevels: 4 +:sectlinks: +:icons: font +//[イメージのパスを指定] +:imagesdir: Images + + +// :lang: ja +ifeval::[{lang} == ja] +:toc-title: 目次 +:example-caption: 例 +:table-caption: 表 +:figure-caption: 図 +:preface-title: はじめに/まえがき +:appendix-caption: 付録 +:caution-caption: 注意 +:important-caption: 重要 +:last-update-label: 最終更新 +:listing-caption: リスト +:manname-title: 名前 +:note-caption: 注記 +:warning-caption: 警告 +:tip-caption: ヒント +:untitled-label: 無題 +:version-label: バージョン +endif::[] + +// HTML出力で画像を埋め込む +:data-uri: +// 各種Macro拡張 +:experimental: + +//// +#### COMENT START ################# +------------------------------------------------------------------ +[ドキュメント毎に設定すべきもの] +: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 + +[見出し設定] +:sectnums: + セクションに番号On, Offのときはコメントアウトもしくは"!"" + +[キャプチャーのラベル、不要なときは、空指定] +:chapter-label: + +[目次作成] +:toc: left + 目次 left,right,macro macroの場合は挿入箇所でtoc::[]を記述する + +[目次のタイトル] +:toc-title: + +[目次 階層レベル] +:toclevels: 3 + +[各ラベルの日本語設定] +: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: バージョン + +#### COMENT END ################# +//// \ No newline at end of file diff --git "a/_Publish/1_\343\202\244\343\203\263\343\202\271\343\203\210\343\203\274\343\203\253/t.adoc" "b/_Publish/1_\343\202\244\343\203\263\343\202\271\343\203\210\343\203\274\343\203\253/t.adoc" new file mode 100644 index 0000000000000000000000000000000000000000..07dd393737f7f3d217d333b930bf2651445390e8 --- /dev/null +++ "b/_Publish/1_\343\202\244\343\203\263\343\202\271\343\203\210\343\203\274\343\203\253/t.adoc" @@ -0,0 +1,23 @@ + +:lang: ja +include::config.adoc[] +// custom css. +//:stylesdir: ./ +//:stylesheet: edit.css +//:toc: left +//:imagesdir: Images + +:hardbreaks: + += t = + +== 第１章 +最初の文書です。 + +* [x] チェックボックス [*] or [ ] + +== 第２章 +ほげ + +以上 + diff --git "a/_Publish/2_\350\250\230\350\277\260\346\226\271\346\263\225/Adoc\344\275\277\347\224\250\350\252\254\346\230\216\347\260\241\346\230\223.adoc" "b/_Publish/2_\350\250\230\350\277\260\346\226\271\346\263\225/Adoc\344\275\277\347\224\250\350\252\254\346\230\216\347\260\241\346\230\223.adoc" new file mode 100644 index 0000000000000000000000000000000000000000..06cdcf521c6a73fbf939c46a879eeb6156452000 --- /dev/null +++ "b/_Publish/2_\350\250\230\350\277\260\346\226\271\346\263\225/Adoc\344\275\277\347\224\250\350\252\254\346\230\216\347\260\241\346\230\223.adoc" @@ -0,0 +1,1244 @@ +// ++++ +// +// ++++ + +include::config.adoc[] + +:toc: left + +// adoc-pdf -aで@指定をすればImagesdirはここが優先される +//　書き換えたら遅くなるなる？　rubyが動いてしまう。 +// adoc-pdfなどを未使用にすると、遅くなくなった！ + +:imagesdir: ./ + +// :lang: ja +// :doctype: bookDir +// :toc-title: 目次 +// :toclevels: 3 +// :sectnums: +// :sectnumlevels: 4 +// :sectlinks: +// :icons: font + +// :example-caption: 例 +// :table-caption: 表 + +// example-caption={example-caption} + +// 以下でマクロが有効になる +:experimental: + + += Adoc使用説明書簡易　(Asciidocの表現を試す) + +[%hardbreaks] + +:dollar: $ +:ddollar: $$ + +// + +// [underlinex]## xxxxx アンダー xxxxx ## + +// stylesdir = {stylesdir} +// stylesheet = {stylesheet} + +//:stylesdir: stylesheets/ +//:stylesheet: asciidoctor-default.css + +// ++++ +//

はじめてのCSSインラインブロックで閉じた場合

+// ++++ + +// // +// ++++ +//

+// ++++ +// はじめてのCSS インラインブロックの2つで記述した場合 + +// // +// ++++ +//

+// ++++ + +== はじめに + +AsciiDocの記述方法でよくつかうものを記載します。さらに多くの記述を使いたい場合は以下を参照してください。 + +* https://takumon.github.io/asciidoc-syntax-quick-reference-japanese-translation/[Asciidoctor 文法クイックリファレンス(日本語訳)] +* https://asciidoctor.org/docs/user-manual/[ユーザーマニュアル(英語)] + +* https://qiita.com/hbsnow/items/88e1414ac97501af17ff[ Qiita 細かい設定がよくわかる！] + +* https://asciidoctor.org/docs/user-manual/#builtin-attributes[ビルドインアトリビュートの一覧] + + +== コメント類 +コメント部分は、最終出力から除外されます +---- + // :行頭でその行はコメントになる + ////から//// :ブロック内がすべてコメント +---- + +== 文字飾り + +.基本 +$$`*_`$$でサンドイッチすることで表現。空白含む場合は $$**単語A 単語B**$$ の様に２個ずつつけるとよい +// =============================== +[cols="1a,2l", options="header"] +|=== +^| 結果 ^| 記述 +| +[%hardbreaks] +*太字の語句* +_イタリック_ +*_太字のイタリック_* +`モノスペース` +| +*太字の語句* +_イタリック_ +*_太字のイタリック_* +`モノスペース` +|=== + +.少し拡張(アンダーラインなど) +// =============================== +[cols="2a,3l", options="header"] +|=== +^| 結果 ^| 記述 +| +[%hardbreaks] +[.underline]#アンダーライン# +通常文字 vs [.small]#小さい文字# vs [.big]#大きい文字# + +[.line-through]#取り消し線# +| +[.underline]#アンダーライン# +通常文字 vs [.small]#小さい文字# vs [.big]#大きい文字# + +[.line-through]#取り消し線# +|=== + +== 見た目(ボタンとアイコン) +// チェックボックス 文書定義 +:cboxOn: pass:normal[``{startsb}✔{endsb}``] +:cboxOff: pass:normal[``{startsb}{nbsp}{endsb}``] +// チェックボックス GUI定義 +:cboxgOn: kbd:[✔] +:cboxgOff: kbd:[{nbsp}] + + + +// [cols="1l,2a", options="header"] +[cols="l,a", options="header"] +[%autowidth] +|=== +| 記述 | 説明 +|kbd:[Ctrl+C] | kbd:[Ctrl+C], kbd:[Ctrl+Shift+V] +|btn:[ボタン] | btn:[ボタン],btn:[ OK ],btn:[ CANCEL ]など +|{cboxOn}/{cboxOff} | {cboxOn}/{cboxOff} 以下の事前マクロ定義必要 + + ``$$ :cboxOn: pass:normal[``{startsb}✔{endsb}``] $$ `` + + ``$$ :cboxOff: pass:normal[``{startsb}{nbsp}{endsb}``] $$ `` +|{cboxgOn}/{cboxgOff} | {cboxgOn}/{cboxgOff} 以下の事前マクロ定義必要 + + ``$$ :cboxgOn: kbd:[✔] $$`` + + ``$$ :cboxgOff: kbd:[{nbsp}] $$`` + +|menu:ファイル[保存] | + +[%hardbreaks] +menu:ファイル[保存] + +階層化$$:$$``>``でサブメニュー化:: + $$menu:ファイル[保存 > Sub > A]$$ + + -> + menu:ファイル[保存 > Sub > A] + +a| +$${OK}$$ +| +:OK: pass:[😀 ] +[%hardbreaks] +事前に定義 +``$$:OK: pass:[😀 ]$$`` +{ok} +https://www.asahi-net.or.jp/~ax2s-kmtn/ref/unicode/u1f600.html[アイコンはユニコードで色々定義,Unicodeの絵文字] +😍(``$$😍$$``)、🙅(``$$🙅$$``)、🌈(``$$🌈$$``) などなど +|=== + +== セクション（章節） == +``=␣<セクション>``で始める行がセクションになる。セクションの区切りには空白行が必要。$$=$$の数でセクションレベルが決まる + +---- += ドキュメントのタイトル +== 章最初のタイトル +=== 節のタイトル +==== 文節のタイトル +===== さらにその下タイトル +====== さらにさらにタイトル +== 章次のタイトル +---- + +//// +以下は箇条書きのほう +["arabic"] +. 階層番号番号 +["decimal"] + .. サブ +["arabic"] + ... サブサブ + ... サブサブ +. 階層番号番号 +. 階層番号番号 +//// + +== 箇条書き == +* ``*␣<項目>``、``-␣<項目>``で始める。異なる記号を使えば、階層的に表現できる +* 形状変更は``[square]``,``[circle]``,``[disc]``を指定 + +.箇条書き(項目) +// =============================== +[cols="a,l", options="header"] +|=== +^| 結果 ^| 記述 +| - 項目1 + * サブ項目1 + * サブ項目2 ++ +-- +サブ項目の中に複数行に渡る大きな大きなブロックを記述できる +-- +- 項目2 + +.形状変更 +[square] +* square + +[circle] +* circle + +[disc] +* disc + +| +- 項目1 + * サブ項目1 + * サブ項目2 ++ +-- +サブ項目の中に複数行に渡る大きな大きな大きな +ブロックを記述できる +-- +- 項目2 + +.形状変更 +[square] +* square + +[circle] +* circle + +[disc] +* disc + +|=== + +// =============================== + +== 箇条書き（数字） == +[%hardbreaks] +``.␣<項目>``（ピリオド）で始める。階層構造は``...␣``と連ねる。 +番号は[arabic]/[decimal]/[loweralpha]/[upperroman]などで階層ごとに指定 + +.箇条書き(数字) +[%hardbreaks] + +// =============================== +[cols="a,a", options="header"] +|=== +^| 結果 ^| 記述 +| +. 項目1 ++ +[caption=""] +.項目1のタイトル +-- +サブ項目の中にブロックを記述できる +-- + .. サブ項目1 + .. サブ項目2 +[decimal] + ... サブサブ1 + ... サブサブ2 ++ +//"例"を削除 +// [caption=""] +// .テストタイトル +-- +サブ項目の中にブロックを記述できる +-- + +. 項目2 + +| +.... +. 項目1 ++ +-- +サブ項目の中にブロックを記述できる +-- + .. サブ項目1 + .. サブ項目2 +[decimal] + ... サブサブ1 + ... サブサブ2 + ++ +-- +サブ項目の中にブロックを記述できる +-- +.... + +|=== +// =============================== + +== ラベル == +* <ラベル名>$$::$$(後ろのコロン２つ）でラベルをつける。コロンを増やせば階層化できる。 +* $$[horizontal]$$指定で一行目から、行が開始される + +.ラベル +// =============================== +[cols="a,a", options="header"] +|=== +^| 結果 ^| 記述 +| +第一項:: + 第一項の定義 + さらにそのサブ::: + サブの内容 +| +.... +第一項:: + 第一項の定義 + さらにそのサブ::: + サブの内容 +.... + +|=== +// ============================== + + + +== ブロックラベル == +``.ブロックラベル``(ドット）でラベルをつける。スペースは不要。箇条書き（数字）になってしまう。 + + +:source-highlighter: coderay + +== ブロック == +* 以下の記号４文字のキーワード行で囲む。それぞれ動作、意味が異なる +* {ddollar}～ {ddollar}で囲むとパスされる →　<<_エスケープ方法>> + +//[%autowidth.stretch] +[cols="1,1,4,20"] +|===================================================================================== +|1|`--` |(ハイフンx2) |オープンブロック。 [red]##**汎用ブロック**##。オープンブロックはpassとtableを除き、他のブロックとして機能できます。 +|2|`----` |(ハイフンx4) |コードブロック。コードもしくはファイルの表示(リスティング) +|3|`$$....$$` |(ドット) |リテラルブロック。書いたままに表示させたいとき。 +|4|`====` |(イコール) |サンプルブロック。 通常で枠ができるフォーマット。#[caption="キャプション名"]で制御。``=`` のみで、ナンバリングもキャプションも除去される様子# +|5|`$$++++$$` |(プラス) |インラインブロック。変換せずにHTML出力,パススルー/インライン,バックエンドのマークアップの書式を記述する +|6|`$$****$$` |(アスタ) |サイドバーブロック +|7|`$$____$$` |(アンダーバー) |ブロッククウォート（引用かな?） +|===================================================================================== + +コードブロックに指定できる言語:: ++ +==== +``C,C++,HTML,Python,Ruby,JavaScript,JSON,Java,XML,YAML +,Clojure,CSS,Delphi,diff,ERB,Go,Groovy,HAML,Lua +,PHP,Sass,SQL,Taskpaper`` +==== + +// =============================== +[cols="a,a", options="header"] +|=== +^| 結果 ^| 記述 +| +[source,JavaScript] +.JavaScript例（タイトル） +---- +var a = "test"; +echo(a,b); +---- +| +.... + [source,JavaScript] + .JavaScript例（タイトル） + ---- + var a = "test"; + echo(a,b); + ---- +.... + +|=== + +== 警告、重要、情報などのアイコン +適用するには属性 ``:icons: font``が必要 +// =============================== +[cols="a,a", options="header"] +[%autowidth] +|=== +^| 結果 ^| 記述 +| +NOTE: ノート(NOTE) + +WARNING: 警告(WARNING) + +IMPORTANT: 重要(IMPORTANT) + +TIP: チップス(TIP) + +CAUTION: 注意(CAUTION) +| +.... +NOTE,WARNING,IMPORTANT,TIP,CAUTION + +単行の場合: + +NOTE: <内容> + +ブロックの場合: (サンプルブロックを使う) + +[NOTE] +==== +<内容> +==== +.... + +|=== + +.■カスタムアイコンの利用方法 +[%hardbreaks] +PNGもしくはSVGデータとしてこれらのアイコンを変更することができます。iconsフォルダにファイル名"NOTE,WARNING,IMPORTANT,TIP,CAUTION"で、拡張子を``.svg``もしくは``.png``のファイルを配置すればよい。 + +.アイコンの属性を変更 +[cols="l,a"] +[%autowidth] +|=== +|:icons: image| アイコンのタイプをイメージに変更 +|:iconsdir: ./icons | アイコンの配置場所をiconsに変更（未設定だと\{imagesdir}/icons) +|:icontype: svg | 画像の種類を指定 svg or png +|=== +IMPORTANT: 属性変更はファイルの先頭がよい。途中で切り換えるとうまくいかない場合があった。 + +// [horizontal] +※その他方法:: 以下でも一時的に変更することも可能。拡張子は``:icontype: xxx``と同じなら [underline]##拡張子を省略可能##です ++ +==== +[%hardbreaks] +$$[NOTE, $$ [red]##icon=NoteCustom.svg## ] +$$====$$ +$$カスタムNOTEアイコン$$ +$$====$$ +==== + +// =============================== + +== 区切り線 == +``---``（ハイフン）3個のみ。 + +.区切り線 +// =============================== +[cols="a,a", options="header"] +|=== +^| 結果 ^| 記述 +| +--- +| +``---`` +|=== +// =============================== +== 改行 == +[%hardbreaks] +* ``␣+``で繋ぐ。 +* もしくは``[%hardbreaks]``で段落全体で改行を有効にする（段落毎にリセットされる）。ドキュメント全体で設定するなら``:hardbreaks:``属性をつけるとよい。個別の解除は`` \{set:hardbreaks!} ``。 + +.改行 +// =============================== +[cols="1a,2l", options="header"] +|=== +^| 結果 ^| 記述 +| +１行目 + +２行目 +| +１行目 + +２行目 +|=== +// =============================== + +== 段落 揃え == +[%hardbreaks] +* ``[.text-left]``,``[.text-right]``,``[.text-center]``で調整する +* ``[.text-justify]``はよくわからない +* ``[align=xxxx]``、 xxxx=left,center,right,...でもよい + + +// =============================== +[cols="1a,2l", options="header"] +|=== +^| 結果 ^| 記述 +| +[.text-right] +右寄せ +[.text-center] +センター +[.text-left] +左 + +行内で部分的右 [.right]##[右]## +| +[.text-right] +右寄せ +[.text-center] +センター +[.text-left] +左 +行内で部分的右 [.right]##[右]## +|=== +// =============================== + +[.text-right] +This paragraph is aligned right + +[.text-center] +This paragraph is aligned center + +[.text-left] +This paragraph is aligned left. This paragraph is aligned left. This paragraph is aligned left. This paragraph is aligned left. This paragraph is aligned left. This paragraph is aligned left. This paragraph is aligned left. + +[.text-justified] +This paragraph is justified, which is the default.This paragraph is justified, which is the default.This paragraph is justified, which is the default.This paragraph is justified, which is the default. + +== コメント == +.... +// コメント行 + +//// + コメントブロック +//// +.... + +== エスケープ方法 == + +[cols="^1a,3a",options="header"] +|========= +|記述 |表現 +|{ddollar} ～ {ddollar}で囲む |通常文字になる +|$$+++～+++$$で囲む |HTML制御になる(インライン要素) +|$$pass:[～]$$で囲む |HTML制御になる(インライン要素、同上） +|{backslash}(backslash) |次の文字の制御のみキャンセル。{backslash}$$*bold*$$や{backslash}$${lt}$$など +2+<| ※ その他は<<_特殊記号>>で記載すること。 +|========= + +== 特殊記号 == + +特殊記号は``{}``を使う。もしくは``$$&#<10進数>;$$`` or ``$$&#x<10進数>;$$``など。 + +.特殊記号の一覧 +[cols="^1a,3a",options="header",caption=] +|========= +|記号{nbsp}{nbsp}{nbsp} pass:[* ({}で囲む)] |表現 +|dollar | $(ドル):{sp}{sp}$$$ or $$$ + +※これは存在しないので、自身で``$$:dollar: $$$``を定義すること +|sp | ``$$ $$ `` スペース１文字 +|nbsp | ノンブランクスペース文字 +|zwsp | 幅無スペース +|quot | ``$$"$$`` (ダブルクウォート) +|apos | ``' ``(アポストロフィー} +|backtick| ``{backtick}`` (バッククウォート) +|lsquo | ``‘``(開始シングルクウォート) +|rsquo | ``’``(終了シングルクウォート) +|ldquo | ``“``(開始ダブルクウォート) +|rdquo | ``”``(終了ダブルクウォート) +|deg | ``°``(角度) +|plus | ``+``(プラス) +|brvbar | ``¦`` +|vbar | ``{vbar}``(論理和) +|amp | ``&`` (アンパサンド) +|lt | ``<`` (smaller than) +|gt | ``>`` (gretar than) +|startsb | ``[`` (開始カギカッコ） +|endsb | ``]`` (終了カギカッコ) +|caret | ``^`` (キャレット) +|asterisk | ``*`` (アスタリスク) +|tilde | ``~`` (チルダ) +|backslash | ``\`` (バックスラッシュ) +|two-colons | ``::`` (2つのコロン) +|two-semicolons | ``;;`` (2つのセミコロン) +|cpp | ``C++`` (C++?) +|wj | +|blank | +|empty | +|========= + +== 色 == + +``$$[色 色-background]#コンテンツ#$$``で指定する + +==== +[red yellow-background]#赤いコンテンツ、黄色の背景# <- ``$$[red yellow-background]## 赤いコンテンツ、黄色の背景 ##$$`` +==== + +* 色名の一覧はwikiのWebColor一覧から取れる ++ +-- +[%hardbreaks] +https://en.wikipedia.org/wiki/Web_colors#HTML_color_names[HTML color names] +この内の基本の16種の色のみ定義されている +-- +**asciidoctor-pdf**は以下の定義みたい(rubyの中):: + link:c:\Ruby24\lib\ruby\gems\2.4.0\gems\asciidoctor-2.0.10\data\stylesheets[] + + asciidoctor-default.css + +**vs-codeプラグイン**は以下:: + %USERPROFILE%\.vscode\extensions\asciidoctor.asciidoctor-vscode-2.8.3\media\ + + asciidoctor-default.css + +一覧:: ++ +[cols="a,a,a" align="center"] +|=== +[%hardbreaks] +[aqua]##■■■■■■■## aqua + ``([small]##$$[aqua]##■...■## aqua $$##)`` +|[black]##■■■■■■■## black +|[white gray-background]##■■■■■■■## white +|[fuchsia]##■■■■■■■## fuchsia +|[green]##■■■■■■■## green +|[lime]## ■■■■■■■## lime +|[maroon]## ■■■■■■■## maroon +|[navy]## ■■■■■■■## navy +|[olive]## ■■■■■■■## olive +|[purple]##■■■■■■■## purple +|[red]##■■■■■■■## red +|[silver]## ■■■■■■■## silver +|[teal]## ■■■■■■■## teal +|[yellow]## ■■■■■■■## yellow +|[yellow]## ■■■■■■■## yellow +// [cols="a" options="autowidth" frame="none",grid="all"] +|=== + +※色を拡張したければインラインで定義するか、CSSを拡張するかです。 + +.インラインで拡張 +==== +-- +---- +:SpanRed: pass:[] +// Spanの終了は共通{SpanEnd} +:SpanEnd: pass:[] +---- + +:SpanRed: pass:[] +:SpanEnd: pass:[] +このように定義しておいて + +$${SpanRed} 適当な文字列 {SpanEnd}$$ -> {SpanRed} 適当な文字列 {SpanEnd} +-- +==== + +.CSSで拡張 +==== +未記載 +==== + +:app-name: MyApp^2^ + +[subs="specialchars,attributes,quotes,replacements,macros,post_replacements"] +The application is called {app-name}. + +[%hardbreaks] + +example-caption={example-caption} +figure-caption={figure-caption} + +Red [red]+++`sum_(i=1)\^n i=(n(n+1))/2`$+++ <-AsciiMathML formula + +pass_attribute=pass:attributes,quotes[the '{example-caption}'] +※ passすると[%hardbreaks]などリセットされちゃう +[%hardbreaks] +lang={lang} +menu=menu:File[Save] +keyboad=kbd:[F11] +docdate={docdate} +user-home={user-home} + +== 独自のマクロみたいなの == +[%hardbreaks] +. HTML文法における `id` / `class` 指定の対応 +.... +
+.... +[%hardbreaks] +idは要素そのもののユニークなID、classはCSSの指定でスタイルを指定可能。 +これは以下の２通りで表現可能 +`[#..]` <= ##これでよいと思う## +もしくは +`[[]]` +`[role=" ]` + +.... + [#baz.foo.bar] + ---- + block + ---- +もしくは + [[baz]] + [role="foo bar"] + ---- + block + ---- +.... + +:_ZZ: pass:q[kbd:[abc]] ++++ xabc +++ + + + + +{ZZ} +{_ZZ} + +https://codeday.me/jp/qa/20190609/971327.html[独自のasciidocマクロを定義する方法] +.... +{set:cellbgcolor:gray} +[grid=none, frame=none] +|=== +| X >| Y +|=== +{set:cellbgcolor!} +.... +{set:cellbgcolor:gray} +[grid=none, frame=none] +|=== +| X >| Y +|=== +{set:cellbgcolor!} + +{ +|============= +| +{set:cellbgcolor:#FF0000} +a {cellbgcolor} + +| +{set:cellbgcolor:!} + Cell data +|============= + + + +// =============================== + +== リンク == +WebページなののURLへのリンク。$$[リンク表示]$$ + +Windowsファイルパスの場合は、$$link:[リンク表示]$$ + +link:\\santana\Teams\Team-Formstudio\CMM[santanaのCMM] + +.タイトル例 +// =============================== +[cols="1a,2a", options="header"] +|=== + +^| 結果 ^| 記述 +| +https://asciidoctor.org/docs/user-manual/[チートシート英語] +| +---- +https://asciidoctor.org/docs/user-manual/[チートシート英語] +---- +|=== + +== イメージリンク == + +* 通常 ++ +---- +image::im.JPG[代替テキスト,x,y,.... align="right/left/center"] +---- + +* インライン（行内) ++ +---- + image:im.JPG[代替テキスト] +---- + +image::im.JPG[代替テキスト,100,300,align="center"] + +行で　image:im.JPG[代替テキスト,100,300,align="center"]　をいれる + +== テーブル == +テーブルの表現 +.タイトル例 +// =============================== +[cols="a,a", options="header"] +|=== + +^| 結果 ^| 記述 +| +==== +[cols="1a,2a", options="header"] +!========= +!c1!c2 +!data1!data2 +!========= +==== + +| +[source,ascii] +.... +[cols="1a,2a",options="header"] +\|=== +\|c1 \|c2 +\|data1 \|data2 +\|=== +.... +|その他の細かい記述方法| + + +[red]#$$*まだ*$$# + +-- +cols=:: + - 番号で列の幅比率 + - a:adoc書式、l(エル):リテラル書式 +-- +|=== + +NOTE: テーブル内でテーブルを使う場合(Nested Table)は、pass:[|]の代わりにpass:[!](ビックリマーク)を使う。それでも完全で無い。 + +寄せの設定:: ++ +---- +[cols="<,>,^"] +---- ++ +-- +|==== +|1列目: 左寄せ|2列目: 右寄せ|3列目: 中央寄せ +|==== +-- + +寄せの設定2:: ++ +---- +[cols="{左右}.{上下}, {左右}.{上下}, {左右}.{上下}, ..."] +[cols="{左右}.{上下}, {左右}.{上下}, {左右}.{上下}, ..."] + +---- ++ +-- +[cols="<.<3,1"] +|==== +|[cols="<.<,"]は 1列目: 左寄せ + 上寄せ +| +2列目1 + +2列目2 +|==== + +[cols=">.>3,1"] +|==== +|[cols=">.>,"]は 1列目: 右寄せ + 下寄せ +| +2列目1 + +2列目2 +|==== +[cols="^.^3,1"] +|==== +|[cols="\^.^,"]は 1列目: 中央(左右) + 中央寄せ(上下） +| +2列目1 + +2列目2 +|==== +-- + +寄せの設定3:: +---- +行定義|の左側に<,>,^を記述する方法もある。1列ごとに改行して定義する。 +※ヘッダ行とデータ行の間に改行が必要 +|item +<|item +>|item +<.^|item +---- + +##列幅の設定##:: ++ +---- +以下の自動幅autowidth:OK,様々指定方法がある。どれか一つ。 +[options="header,autowidth"] +[options="autowidth"] +[%autowidth] +[%header%autowidth] +["%autowidth",cols="a,a",options="header"] +※ a,100aはadoc2pdf変換で失敗 1:40で失敗,最大39でいけた +---- + + +== テーブルを段組に使う技 == +CAUTION: 「イメージを左、その説明を右」ぐらいの用途。テーブルにテーブルをいれるのが難しいなど、全表現をいれるのに苦労するのでやめたほうがいい。 +[title="テーブルを段組みに使う（2分割）",caption="",cols="a,a",frame="none",grid="all"] +// [frame="none",grid="none"] +|================================ +| +[caption="",title="画像タイトル名",grid="all"] +image::im.JPG[代替テキスト,100,align="center"] + +[caption=""] +.テーブルにテーブルを入れている +[cols="1a,2a", options="header"] +// [frame="none",grid="none"] +!========= +!head a ! head b +!a ! BBBBBB +!========= +| +-- +.これが二つ目のブロックになる +. ラベル +. ラベル +-- +|================================ + +.表現は以下のとおり +.... + [title="ｘｘｘ",caption="",cols="a,a",frame="none",grid="all"] + |================================ + | + // 左段落 + [caption="",title="画像タイトル名",grid="all"] + image::im.JPG[代替テキスト,100,align="center"] + + [caption=""] + .テーブルにテーブルを入れている + [cols="1a,2a", options="header"] + // [frame="none",grid="none"] + !========= + !head a ! head b + !a ! BBBBBB + !========= + + | + // 右段落 + -- + .これが二つ目のブロックになる + . ラベル + . ラベル + -- + |================================ +.... + +== テキストの折り畳み +$$[%collapsible]$$で記述する +[%hardbreaks] +$$.タイトル$$ +$$[%collapsible]$$ +$====$ +～ +$====$ + + +.折り畳みテキスト +[%collapsible] +==== +折り畳み内容 +==== + + +== アンカー(内部参照) == + +* 内部参照へのリンクを表現する。 pass:[[[]アンカー名 pass:[]]]で設定し、pass:[<<]アンカー名 pass:[>>]で参照する。設定された直後の章名がアンカー表示名になる。 +* アンカー参照時の表示名を別名にしたいときは、設定箇所でpass:[[[]アンカー名,表示名pass:[]]]とする。 + +* デフォルトで、章は、アンカーが設定されており,pass:[<<_]章名pass:[>>](先頭にアンダーバー)で参照できる。vscodeプレビューは日本語でリンクに飛べなかった？ + +例. +==== +<<_イメージリンク>> +==== + +== 属性設定のサンプル + + += その他 + +. (済)アンカー(内部参照) +. 色名 +. 本 + +== オリジナル先のリンクをしっかりしておこう + +https://asciidoctor.org/docs/[トップページ_Asciidoctor Documentation] + +https://asciidoctor.org/docs/asciidoc-syntax-quick-reference/[Syntax-quick-ref] + +https://asciidoctor.org/docs/asciidoc-writers-guide/[writers-guide] + +https://asciidoctor.org/docs/asciidoctor-diagram/[diagram] + +https://asciidoctor.org/docs/asciidoc-recommended-practices/[style-guide(draft)] + + +https://www.methods.co.nz/asciidoc/chunked/ch21.html[macro defineがあるんですけどね] + + +//======================================================================================= + += Nested Tables + +https://mrhaki.blogspot.com/2017/04/awesome-asciidoctor-nested-tables.html[Nested tables] + +== Nested tables + +To nest a table in a table we must +use `!` as table separator instead of `|`. +Also the type of the column or cell +must be set to `a` so Asciidoc markup +is processed. + +[cols="1,2a"] +|=== +| Col 1 | Col 2 + +| Cell 1.1 +| Cell 1.2 + +| Cell 2.1 +| Cell 2.2 + +[cols="2,1"] +!=== +! Col1 ! Col2 + +! C11 +! C12 + +!=== + +|=== + +// =============================== 雑 ======================================================================== +MyAp^2^ + +:app-name: pass:q[MyApp^2^] + +{app-name} + +[horizontal] +CPUここが長くなってしまうとどうする:: The brain of the computer. +- a +- b +Hard drive:: Permanent storage for operating system and/or user files. +RAM:: Temporarily stores information the CPU uses during operation. + +[source,text] +==== ++++ +.Q and A +[qanda] +アスキードックとは？:: +ルビーで実装されたドキュメントフォーマットである。 +What is the answer to the Ultimate Question?:: 42 ++++ +==== + +:icons: font + +:tip-caption: 💡 + +[TIP] +It's possible to use Unicode glyphs as admonition icons. +WARNING: It's possible to use Unicode glyphs as admonition icons. + + +:caution-caption: 💡 + +[CAUTION] +It's possible to use Unicode glyphs as admonition icons. +WARNING: It's possible to use Unicode glyphs as admonition icons. + +icon:tags[] ruby, asciidocto + + +[asciimath] +++++ +sqrt(4) = 2 +++++ + + +[stem] +++++ +sqrt(4) +++++ +latexmath:[C = \alpha + \beta Y^{\gamma} + \epsilon + + +---- +An open block can be an anonymous container, or it can masquerade as any other block. pass:[dfsa] +---- + +An open block can be an anonymous container, or it can masquerade as any other block. pass:[dfsa] + +{stylesdir} + += まとめ = + + +== タイトル == +``。。。``（。。。） + +.タイトル例 +//=============================== +[cols="a,a", options="header"] +|=== +^| 結果 ^| 記述 +| +<左列のレンダリング結果> +| +---- +<右側列のAsciiDocの記述> +---- +|=== +//=============================== + += 属性関係の設定 = + +脱Word、脱Markdown、asciidocでドキュメント作成する際のアレコレ + +https://qiita.com/tamikura@github/items/5d3f62dae55617ee42bb#htmlのスタイルcssを設定する[HTMLのスタイル(CSS)を設定する] + +.... +// :stylesdir: // どこでも有効になる様子 +//:stylesdir:でCSSのフォルダを:stylesheet:でCSSファイルを指定可能 + +// html-style.adoc +// :stylesdir: stylesheets/ +// :stylesheet: asciidoctor-default.css + +// pdf-style.adoc +// :pdf-style: themes/default-theme.yml + +.... + +. stylesdir={stylesdir} +. stylesheet={stylesheet} +. pdf-style={pdf-style} + +[IMPORTANT] +==== + +以下のパスを書き換えた：1.2emに。 1.0が今の表示の様子。 +C:\Users\AA004035\.vscode\extensions\joaompinto.asciidoctor-vscode-2.7.6\media\asciidoctor-editor.css +.... + .literalblock pre, + .listingblock>.content>pre:not(.highlight), + .listingblock>.content>pre[class="highlight"], + .listingblock>.content>pre[class^="highlight "] { + font-size: 1.2em; /*　松尾2em;200%でも変更できる*/ + /* background: #f7f7f8 これ消したら消えた*/ + } +.... +==== + +== テストコード + +.... +[IMPORTANT] +==== +本文の記載 +==== + +単行記述は以下： + +IMPORTANT: 本文の記載 +.... + +===== +結局これが一番わかり易いかも +.AsciiDocのチートシート +http://www.venus.dti.ne.jp/~iisaka/DocSys/cheatsheet-ja/asciidoc-869/asciidoc-869.html[AsciiDocのチートシート] +===== + +== テストコードの終わり + += 付録 + +== 属性パラメータ + + * :Keywords:␣ で内部パラメータ定義。キャンセルは``:Keywords!:`` or ``:!Keywords:``。 + * https://asciidoctor.org/docs/user-manual/#builtin-attributes[その他 ビルドインアトリビュートの一覧] + +[cols="1l,1l", options="header"] +|=== +| 記述 | 説明 +|:toc: left | left,right,macro(別途 toc::[]で場所指示） +|:imagesdir: ./ | イメージDIR +|:lang: ja | 言語指定 +|:doctype: book | article/book/manpage/inline(不明) +|:toc-title: 目次 | 目次のタイトル +|:toclevels: 3 | 目次の番号レベル +|:sectnums: | セクションに番号をつけるか? +|:sectnumlevels: 4 | セクションの番号レベル +|:sectlinks: | +|:icons: font | +|:example-caption: 例 | 例ブロック($$====$$)のキャプション +|:table-caption: 表 | テーブルブロック($$====$$)のキャプション +|:experimental: | *マクロを有効するにる +|=== + +.完全な例 +[cols="1l"] +|=== + // 属性定義 +: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: 警告 + +|=== + +// 定数リファレンスの組み込み diff --git "a/_Publish/2_\350\250\230\350\277\260\346\226\271\346\263\225/config.adoc" "b/_Publish/2_\350\250\230\350\277\260\346\226\271\346\263\225/config.adoc" new file mode 100644 index 0000000000000000000000000000000000000000..c24276c50a39ffb2abad7cc36ae975b1fd41af72 --- /dev/null +++ "b/_Publish/2_\350\250\230\350\277\260\346\226\271\346\263\225/config.adoc" @@ -0,0 +1,116 @@ +//// +[コメント開始] +各種事前定義 ここでは最低限必要なものだけ定義、一覧説明をコメントブロックで記載しておく +定義が不要なら、//でコメントアウト、adoc毎に!(びっくりマーク)を追加すればよい +例. :sectnums!: + +[コメント終了] +//// + +//----------------------------------------------------------------------------------------------------- + +// 事前定義 +:doctype: article +:toclevels: 3 +:sectnums: +:sectnumlevels: 4 +:sectlinks: +:icons: font +//[イメージのパスを指定] +:imagesdir: Images + + +// :lang: ja +ifeval::[{lang} == ja] +:toc-title: 目次 +:example-caption: 例 +:table-caption: 表 +:figure-caption: 図 +:preface-title: はじめに/まえがき +:appendix-caption: 付録 +:caution-caption: 注意 +:important-caption: 重要 +:last-update-label: 最終更新 +:listing-caption: リスト +:manname-title: 名前 +:note-caption: 注記 +:warning-caption: 警告 +:tip-caption: ヒント +:untitled-label: 無題 +:version-label: バージョン +endif::[] + +// HTML出力で画像を埋め込む +:data-uri: +// 各種Macro拡張 +:experimental: + +//// +#### COMENT START ################# +------------------------------------------------------------------ +[ドキュメント毎に設定すべきもの] +: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 + +[見出し設定] +:sectnums: + セクションに番号On, Offのときはコメントアウトもしくは"!"" + +[キャプチャーのラベル、不要なときは、空指定] +:chapter-label: + +[目次作成] +:toc: left + 目次 left,right,macro macroの場合は挿入箇所でtoc::[]を記述する + +[目次のタイトル] +:toc-title: + +[目次 階層レベル] +:toclevels: 3 + +[各ラベルの日本語設定] +: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: バージョン + +#### COMENT END ################# +//// \ No newline at end of file diff --git "a/_Publish/x_\343\201\235\343\201\256\344\273\226/\343\201\247\343\201\215\343\201\235\343\201\206\343\201\252\343\201\223\343\201\250\343\201\252\343\201\251.adoc" "b/_Publish/x_\343\201\235\343\201\256\344\273\226/\343\201\247\343\201\215\343\201\235\343\201\206\343\201\252\343\201\223\343\201\250\343\201\252\343\201\251.adoc" new file mode 100644 index 0000000000000000000000000000000000000000..ea0a749e451f8776a101c310bdfad929226757d6 --- /dev/null +++ "b/_Publish/x_\343\201\235\343\201\256\344\273\226/\343\201\247\343\201\215\343\201\235\343\201\206\343\201\252\343\201\223\343\201\250\343\201\252\343\201\251.adoc" @@ -0,0 +1,74 @@ +: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 + +|=== + + +以上 +