タグ: Markdown

Markdown形式で文字色を入れる。

使う機会が発生したのでメモです。

やりかた

- <span style="color: red; ">赤い文字</span>
- <span style="color: orange; ">黄(オレンジ)文字</span>
- <span style="color: blue; ">青の文字</span>

と、`<span style="color: red; ">`のように囲んでいきます。

結果

と表示されます。

WYSIWYGエディタではなく、マークダウンでも文字色は変えられたという自分にとっての気づきでした。

redmine上のチェックリスト。(redmine_markdown_task_list導入)

Markdwon書式でのチェックリスト

TyporaなどのMarkdownエディタで

- [ ] やることA
- [x] やることB

と入力するとチェックリストとして表示されます。

これをredmine上で表現するためのプラグインを導入しました。

redmine_markdown_task_list インストール

参考:
https://qiita.com/EichiSanden/items/87ac4aaeb754341775a9

手順

cd /var/lib/redmine/plugins
# プラグインが格納されているディレクトリ
sudo -u www-data git clone https://github.com/eichisanden/redmine_markdown_task_list.git
systemctl restart apache2

DBのマイグレーション要らず、配置後に再起動するだけでした。

結果

画像

と入力したものが

画像

となりました。

redmine_checklistプラグインと異なり、チケットのコメント上でもknowledgebase上でも追加できるのが便利です。

思考の整理、考察の広がり。(mermaid記法によるゲームの考察)

ゲームの楽しみがまた広がりました。(ネタバレは極力避けています)

きっかけとなった2要素

1. 『ライザのアトリエ』フィギュア入手

この2種により、また「このゲームを最初から攻略したい」という気運が高まりました。

2. Markdownとmermaid記法

先月、ドハマリしてしまったMarkdown記法とmermaid.jsによるシーケンス図。

せっかく覚えた技術なので、この記法で『ライザのアトリエ2』のゲーム考察をしてみようと思ったわけです。

考察に当たって-「遺跡」

ゲーム『ライザのアトリエ2』では、ストーリーの要として「遺跡の探索」があります。

  • 各所にある遺跡の欠片を集める。
  • 欠片を正しい位置に配置。
  • これにより遺跡の鍵となるアイテムやスキルが解放されていく。

この遺跡の欠片は、「過去、どんな人がどのような行動を取ったか」の残留思念。

様々な思念が散らばっている上に時系列が一致していません。更に、「登場人物の始まりと最期」が同じ遺跡に存在することもざらにあります。

これらをひとまとめにできないものかと、書き方を考えてみました。

記録フォーマットの策定

この画像のように、

  • 左ペイン:ファイルエクスプローラーを利用して遺跡や考察ごとにファイルを作ります。
  • 右ペイン:
# 遺跡名

### ☆遺跡の欠片 (エリア名:エリアx)

#### ○欠片の各セクション

- 記憶の粒子名
  - 文字全文(**太字**は手がかり)
- *自動的に埋まる考察*
  - *考察全文*

***

のフォーマットを作り、各所をメモしていくことにしました。

テーブルによる時系列整理

こうして攻略を進めていき、メモが完了したら本番。Markdownに備わるテーブル機能が威力を発揮。

ネタバレ回避のためマスクしています

様々な遺跡に点在する「思い出」を、その順番に沿って配置。こうすることで、残留思念がどのような足跡をたどっていったかが一目で分かるように。

シーケンス図による関係性整理

その後、mermaid記法のsequenceDiagramを用いて

  • その遺跡で誰が登場したのか
  • または誰がどこに行ったのか

を並べてみます。(以下、最初の定義例)

mermaid
sequenceDiagram

sequenceDiagram
participant a as 骨董屋
participant c as 蒐集家
participant h as 狩人
participant ch as 薬師
participant m as 魔石掘り
note over m: 天体現象を肴に宴会
ch->>m: 災いを警告
m-->>ch: 警告を無視
note over a,m: ケルドラ領で奇妙な石が採掘されるようになった
note over a,m: 後略
sequenceDiagram title : ケルドラ城 participant a as 骨董屋 participant c as 蒐集家 participant h as 狩人 participant ch as 薬師 participant m as 魔石掘り note over m: 天体現象を肴に宴会 ch->>m: 災いを警告 m-->>ch: 警告を無視 note over a,m: ケルドラ領で奇妙な石が採掘されるようになった note over a,m: 後略

あとは、テーブルを見比べながら関係性を配置。

整理によって見えてきたもの

「登場人物の足取りを追体験」が大きいです。

  • 誰が(誰と)
  • いつ
  • どこで
  • 何を行い
  • なぜそれを行ったか
  • どのように行ったか

の5W1Hが時系列に沿って流すことで理解度や没入感が飛躍的にアップ。

「だからここにこのアイテムが置いてあるのか」もおぼろげながら見えていきました。

「要素を組み合わせて形にしていき、一つの大きな物語にする」は、「素材を組み合わせて一つのアイテムにする」本作のアイテムクリエーションにつながるものがあります。

「物事を整理することで広がりが見える」の入り口に立てた気がします。

WordPressにプラグイン:[WP Mermaid]追加と、ボードゲーム『アリスガーデン』簡易フローチャート。

これで、一手間が省けます。

プラグイン[WP Mermaid]

テキスト主体でフローチャートやシーケンス図、はたまたZENタイル(的な感情の動き)まで表示できるため重宝するようになったmermaid記法。

これを自ブログでもっと効率的に表示できないか?

と検索したところ、そのものズバリを発見しました。

WP Mermaid
https://ja.wordpress.org/plugins/wp-mermaid/

Mermaid導入

導入方法は通常のプラグインと同じく

  1. ダッシュボード>プラグイン
  2. 「新規追加」から「mermaid」を検索
  3. 出てきたものをインストール。

で完了です。

埋め込み

ブロックエディタから

「WP Mermaid」を選択。ここにスクリプトを以下のように埋め込みます。

```mermaid
  journey
    title 2021/09/28 ZENタイル
    section 出勤前
      5-6:1:  嫌
      7-8: 4: 味
      8-9: 5: 驚
    section 勤務中
      10-11:0: 怒
      11-12:4:恩
      15-16: 1: 惑
     section 帰宅
      17-18:5:癒,独
       19-20:5:新,美
```

すると、表示結果はこうなります。

journey title 2021/09/28 ZENタイル section 出勤前 5-6:1: 嫌 7-8: 4: 味 8-9: 5: 驚 section 勤務中 10-11:0: 怒 11-12:4:恩 15-16: 1: 惑 section 帰宅 17-18:5:癒,独 19-20:5:新,美

これにより、LiveEditorで画像変換する必要はなくなりました。

そこで、これを描いてみます。

ボードゲーム『アリスガーデン』簡易フローチャート

シンプルなルールながらも遊び応え十分なタイルプレースメント『アリスガーデン』。

これを以下のように書いてみました。

コード

graph TB
A((ラウンド開始))-->B(ボーナスタイル以外の袋を全て左側に置く)-->C(1.左側の任意の袋から2枚をピックする)
C-->D[2.タイル1枚をボードに配置する] 
D-->E[3.配置しなかったタイルを脇によける<br />ボーナスチップは手元に置く]
E-->F[4.1の袋を右側に置く]
F-->G{5.左側に袋がある}
G--Yes-->C
G--NO-->H{6.ボードにボーナス<br />タイル以外を配置できる}
H--YES-->I[全ての袋を左側に戻す]
I--次のラウンドへ-->A
H--NO-->J[ボーナスチップを<br />任意のスペースに配置<br />配置できないチップは手元に置く]
J-->K((得点計算))
K-->L>ゲーム終了]

表示結果

埋め込んだ結果が下記。

graph TB A((ラウンド開始))-->B(ボーナスタイル以外の袋を全て左側に置く)-->C(1.左側の任意の袋から2枚をピックする) C-->D[2.タイル1枚をボードに配置する] D-->E[3.配置しなかったタイルを脇によける<br />ボーナスチップは手元に置く] E-->F[4.1の袋を右側に置く] F-->G{5.左側に袋がある} G--Yes-->C G--NO-->H{6.ボードにボーナス<br />タイル以外を配置できる} H--YES-->I[全ての袋を左側に戻す] I--次のラウンドへ-->A H--NO-->J[ボーナスチップを<br />任意のスペースに配置<br />配置できないチップは手元に置く] J-->K((得点計算)) K-->L>ゲーム終了]

まだ詰めるところはありますが、形になっているとは思います。

まとめと今後の課題

元々はMarkdownエディタ「Typora」の使い勝手がいいということで連鎖的に見つけたフローチャートやシーケンス図。

これがエディタで書けるのは革命的な出来事ですし、更にブログに表示できるようになったのは更なる驚きと喜び。

  • 横長だと文字が潰れる
  • まだサンプルのコピペに過ぎない

など、改善点は山積み。ではありますが、これは一つのマイルストーン達成です。

コードでメモするZENタイル。(Typora & mermaid記法)

このエディタを使うようになって、「表現力の豊かさ」に驚かされる日々。

まさか、これをメモすることができるとは思いませんでした。

mermaid - journey記法

きっかけはこれを知ったこと。

https://github.com/mermaid-js/mermaid

  • 区切りをつけられる流れ
  • 感情の上下をつけられる
  • 登場人物を複数決められる

そこで、思ったことがこちらです。

ZENタイルとの親和性

この、記法、ZENタイルに使えるのではないか?

そうと決まれば、サンプルコードから置き換えてみます。

コード案

  journey
    title 2021/09/28 ZENタイル  # タイトルを決定
    section 出勤前 # 時間帯の主だったイベント区切り
      5-6:1:  嫌 # 時間帯:感情の上下(大きいほど上機嫌) : 気持ちタイル
      7-8: 4: 味
      8-9: 5: 驚
    section 勤務中
      10-11:0: 怒
      11-12:4:恩
      15-16: 1: 惑
     section 帰宅
      17-18:5:癒,独
      19-20:5:新,美

これがTyporaで表現するとこうなりました。

  • タイルではなく気持ちタイルを置けない
  • 同じ時間帯では並列

という条件はありますが、

  • 移動中にメモができる
  • その後、再現ができる

のは本当に助かります。

今後の展望

自分が思うよりも様々なフローが文字入力だけでできることに感動を禁じ得ません。

この記法を使って

  • 旅行記
  • ボードゲームの各種ルール整理
  • 内容の整理

など、表現を増やしていきます。

MarkdownエディタTyporaによるボードゲーム『ガイアプロジェクト』のルール整理(1)。

MarkdownエディタでUMLが作成できると発見し、「流れが必要なものの記録に使える」と実感。

さっそく、練習がてらにやってみました。

ガイアプロジェクト:ガイアフェイズの整理

かなり難解なボードゲーム『ガイアプロジェクト』。その、1フェイズであるガイアフェイズを言ったん見直してみました。

一般的な流れ

まず、こんな感じでTyporaで書いてみました。

```mermaid
graph TB
A((収入フェイズ))
A-->B((ガイアフェイズ<br>開始))
B-->C{ガイアフォームが<br>次元横断星に}
C--ない-->D
C--ある-->c1{ガイアフォームの下に<br>ガイア惑星タイルが}
c1--ある-->D
c1--ない-->c2[ガイア惑星タイル下に<br>ガイア惑星タイルを置く]
c2-->D{ガイアエリアに<br>トークンがある}
D--ない-->E>ガイアフェイズ終了]
D--ある-->d1[全てのトークンを<br>エリア1に置く]
d1-->E
```

これがレンダリングされると、こうなります。
(参考: https://mermaid-js.github.io/docs/mermaid-live-editor-beta)

地球人の処理

```mermaid
graph TB
A((収入フェイズ))
A-->B((ガイアフェイズ<br>開始))
B-->C{ガイアフォームが<br>次元横断星に}
C--ない-->D
C--ある-->c1{ガイアフォームの下に<br>ガイア惑星タイルが}
c1--ある-->D
c1--ない-->c2[ガイア惑星タイル下に<br>ガイア惑星タイルを置く]
c2-->D{ガイアエリアに<br>トークンがある}
D--ある-->F{惑星首府を}
F--建てていない-->f1[全てのトークンを<br>エリア2に置く]
F--建てている-->f2[フリーアクションと<br>同じレートで<br>資源変換]
f2-->f1
f1-->E
D--ない-->E>ガイアフェイズ終了]
```

イタル人の処理

graph TB
A((収入フェイズ))
A-->B((ガイアフェイズ<br>開始))
B-->C{ガイアフォームが<br>次元横断星に}
C--ない-->D
C--ある-->c1{ガイアフォームの下に<br>ガイア惑星タイルが}
c1--ある-->D
c1--ない-->c2[ガイア惑星タイル下に<br>ガイア惑星タイルを置く]
c2-->D{ガイアエリアに<br>トークンがある}
D--ある-->F{惑星首府を}
F--建てていない-->f1[全てのトークンを<br>エリア1に置く]
F--建てている-->f2[4トークンを破棄して<br>技術タイル取得]
f2-->f1
f1-->E
D--ない-->E>ガイアフェイズ終了]

バル・タック人の処理

graph TB
A((収入フェイズ))
A-->B((ガイアフェイズ<br>開始))
B-->C{ガイアフォームが<br>次元横断星に}
C--ない-->D
C--ある-->c1{ガイアフォームの下に<br>ガイア惑星タイルが}
c1--ある-->D
c1--ない-->c2[ガイア惑星タイル下に<br>ガイア惑星タイルを置く]
c2-->D{ガイアエリアに<br>トークンがある}
D--ない-->E{ガイアフォームが<br>ガイアエリアに}
D--ある-->d1[全てのトークンを<br>エリア1に置く]
d1-->E
E--ある-->e1[ガイアフォームを<br>勢力ボードに置く]
e1-->F
E--ない-->F>ガイアフェイズ終了]
```

書いてみて思ったこと:

  • 単に「トークンを移動して入植準備をする」だけなのに、相当なフローがあったという気づき
  • Officeソフトよりも格段に楽にソートされた状態でチャートが書けるのは素晴らしい
  • 可読性(特に各セクションの定義)に難あり

の3点が実感です。

これを元に、書き方を改善しながらチャート/シーケンス図が翔となると楽しみが止まりません。

HP Chromebook x360 12bにMarkdownエディタ『Typora』を導入。

はじめに

新調したChromebookを更に使いやすくするため、Markdownエディタ「Typora」をインストールしました。

このソフト、

  • 軽快な動き
  • Markdownをリアルタイムレンダリングしてくれるため、さながらワープロのように使える
  • 章立てをアウトラインで表示してくれるため文章構成がやりやすい
  • Win/Mac/Linux対応
  • 入力位置を中央に固定する「タイプライターモード」が地味に使いやすい

と、文章を書く時に役立てています。(実際、このエントリーもTyporaで下書きをしています)

用いたChromebook

HP Chromebook x360 12b。思った以上にキーボードが打ちやすく、視野角も良好。これならテキストを書くのにも十分です。

Linux化

こちらの記事を参照し、それに従っただけです。

https://www.linux-setting.tokyo/2020/09/chrome-os-linux-chrome-os.html

この後、Chromebookのアプリ一覧からターミナルを起動。

ホスト名変更

ChromebookのLinux環境はデフォルトで「penguin」と名付けられていますが、

$ sudo hostnaectl set-hostname [ホスト名]

として、名前を変えました。

Typoraインストール -失敗した手順-

公式記事にあるように

$ wget -qO - https://typora.io/linux/public-key.asc | sudo apt-key add -

$ sudo add-apt-repository 'deb https://typora.io/linux ./'
$ sudo apt-get update

$ sudo apt-get install typora

を行ったものの、

[add-apt-repository]

がインストールできず。また、これを解決しても何故か起動しなかったのです。(再起動でも変わらず)

原因

自分の環境では以下のコマンドらやライブラリが足りなかったので、こちらを足しました。

$ apt-get install software-properties-common
$ sudo apt install libnss3

Typoraインストール -成功した手順-

$ apt-get install software-properties-common
$ sudo apt install libnss3

$ wget -qO - https://typora.io/linux/public-key.asc | sudo apt-key add -

$ sudo add-apt-repository 'deb https://typora.io/linux ./'
$ sudo apt-get update

$ sudo apt-get install typora

これで起動することができました。(また、当然ながら、Linux環境下で動くため、ターミナルは起動しっぱなしとなります)

ChromebookのLinux環境とDropboxを紐付け

ここまで来たらあと一歩です。

普段、Markdownファイルはどの端末からでもアクセスできるよう、Dropboxに保存しています。Chromebookのような変則環境でもこれができるかを調べたところ、完璧に一致する記事がありました。

[chromebook] Linux環境(Crostini)にDropboxをマウントする

これを施し、

Dropboxディレクトリが参照できるようになりました。

まとめ

もともとは「どうにかして、移動中でも出先でもMarkdownで記入していきたい」から始まったプロジェクト。

  • 起動の速さ
  • バッテリーの持ち

からChromebookを選択。

  • Linuxを動かすことで、使い慣れているTyporaを使えると判明
  • 今まで持っていたChromebookはスペック的に厳しい

ことからChromebookを新調し、

「Chromebookの軽快な動きとTyporaのリアルタイムMarkdownレンダリングを統合する」

が叶ったようです。

“記法”と“筆記具”。

はじめに

思わぬ形で埋もれていた“発掘”されました。​

Markdown記法

ここ最近、公私でMarkdown記法にはまっています。

  • 成形しながらドキュメントを書け
  • 簡単な文法で悩む必要もなく
  • 抜群に軽い。

これのためにWindowsのエディタをTyporaに変えてしまったほど。

「移動中でもこの記法で物事を書くためにはどうするか」を試してみました。

“筆記具”選定。

まず候補として挙がったもの

MacBook Air

膝の上でも扱え、ATOKがネイティブ。ですが

電源投入→起動

までのタイムラグが大きかったので断念。また、通勤電車での取り回しもし辛いサイズです。

Chuwi Ubook

軽く、キーボードが打ちやすく。メイン機で動かしているTyporaが使えると申し分ないのですが

「キックスタンドのために移動中に使えない」

致命的な弱点があり候補から外れました。

となると、先の弱点がなく手持ちにあるもの

Chromebook C101PA

が日の目を浴びました。

  • 本体軽く
  • 取り回しもしやすい大きさ
  • 開けた瞬間に起動
  • 起動中も熱が出ることも少なく
  • キーボードも打ちやすい

と、条件をほぼ満たしています。

Markdown に即したアプリも落とせました。現時点での解決策です。

残る課題

ひょんなことから脚光を浴びたChromebook。

ですが、購入したのが2017年ですからバッテリー駆動時間は相当短くなっているであろうが最大の懸念。

また、

  • ストレージの少なさ
  • 外部データをどう扱うか(出先は写真撮影が多いのでなおさらです)

に明確な答えは出ていません。まずはこれを再び使っていきながら別の“筆記具”を探していく形になります。

Powered by WordPress & Theme by Anders Norén