カテゴリー: ガジェット Page 55 of 85

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で表現するとこうなりました。

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

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

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

のは本当に助かります。

今後の展望

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

この記法を使って

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

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

移動の隙間、居室の隙間。

あらたな機器の運用を開始したことで、別の機器も日の目を浴びました。

「どこでもキーボード」としてのChromebook

Chromebook購入前に求めた要件として

  • サイズ
  • クラムシェル型

を挙げましたが、想定通りでした。11.6の絶妙なサイズ感は移動中膝に乗せやすく、キーボードも打ちやすくなっています。

そのおかげで旅行記のように

「書きたいと思っていながら着手できなかったテーマ」の構想を練られるようになっています。

メディアプレイヤーとしてのYoga Smart Tab

持て余していたAndroidタブレット。ここ最近は活躍し始めました。

分割キーボードの隙間にちょうど入るサイズ感が素晴らしく、また、シリンダー内に大型スピーカーが積まれていることもあって

  • ウェブ閲覧時のサブディスプレイ
  • 書き物してる時のメディアプレイヤー

に役立っています。特に、ケースに頼らないスタンドの使い勝手は目を見張るものがあり、狭いサイドテーブルでも苦になりません。

「MicroSDカードが入れられることを活かし、出先でもオフラインでも動画が見られるようにする」ために購入した本機。

御時世が悪く想定の機会がなかなか見えませんが、「Chromebookみたいに活用法を考えれば」居場所があると思いました。

Chromebook、サプライの改善と天板の刷新。

先週買い替えたChromebook。機能も速度も申し分なく、稼働時間も拡張性も十分。

ですが、小さくない欠点をこのタイミングで改善しました。

ACアダプター差し替え

この、ノートPCそのままという大仰なACアダプター。

日中の充電が必要ない程度にはバッテリー保ちがいいために持ち運ぶ必要はないのですが、これから発生するであろう泊りがけの際には困ります。

そのため、

サードパーティ製ANKERの小型アダプターに換装。

以前購入していたサプライケースに

  • ケーブル
  • ドッキングステーション
  • ACアダプター

を入れて、

かなりコンパクトかつ見栄え良くすることができました。

天板装飾

この機会に入手した『Back to the Future』のステッカー。

これらを貼り付けていきます。

「お気に入りの作品で彩られている」とモチベーションアップに繋がります。

“本”と“檸檬”。(丸善コラボLAMY入手)

比較的入手しやすい価格帯で、ポップな色使いと書きやすさが特徴のLAMY。

この限定モデルを入手できたことは思わぬ幸運でした。

パッケージ

紙袋にも描かれている意匠に、「LAMY」のロゴと、特別仕様になっていました。

開封

丸善と縁が深い『檸檬(梶井基次郎)』の世界観をそのままあしらったようなチャームと、檸檬をイメージしたレザーケースがお目見えです。

外観と試し書き

軸の色もしっかりとレモンの色になっており、

チャームは

「あ、そうだそうだ」その時私はたもとの中の檸檬れもんを憶い出した。本の色彩をゴチャゴチャに積みあげて、一度この檸檬で試してみたら。

https://www.aozora.gr.jp/cards/000074/files/424_19826.html

と、梶井基次郎『檸檬』を彷彿とさせます。

これにインクを入れて早速試し書きです。

極細で書きやすく、特にアルファベットの伸びがいいという印象。

二本目の限定モデル

元々持っていた『丸の内Oazo10周年記念モデル』と合わせて丸善限定モデルは2本目。

これもまた、思い入れのある一本となりそうです。

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点が実感です。

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

可読性と可能性。(Markdownエディタ『Typora』でのUML)

自分がやりたかったことが更に前進です。

UMLエディタとしてのTypora

様々なフローチャートやシーケンス図を表現するUML。業務のみならずゲームのフローチャートにも使えそうだと興味を持っていたのですが、「敷居が高い」思って放置していました。

そんなさなか、ここのところ使っているTyporaにまさしくこの機能が備わっていると発見があったので実践です。

練習-『ガイアプロジェクト』アクション

typora上で

```

と入力し右下の「言語を選択」で

「mermaid」を選択。後は、記法に沿ってボードゲーム『ガイアプロジェクト』の簡単な流れを書いてみました。

graph TB
A[ラウンド開始]-->B(収入フェイズ)-->C(ガイアフェイズ)
C-->D{メインフェイズ}
D-->E(入植)
E-.->D
D-->F(施設改良)
F-.->D
D-->G(研究)
G-.->D
D-->H(同盟構築)
H-.->D
D-->I(パワー/QICアクション)
I-.-D
D-->J(特別アクション)
D-.->f(フリーアクション)
f-.->D
J-.-D
D-->K((パス))
K-->L>終了フェイズ]

これが、

こうなりました。これを見つけたときは本当に感動しました。

今後の展望

これは自分にとって革命的な出来事です。

  • 業務のため、フローチャートやシーケンス図を書く必要があった
  • けど、パワポなどでマウスを動かすのは面倒

これが、

  • 比較的覚えやすい記法で書ける
  • 先のボードゲームのルールのように応用が利く

可能性の塊。

まだ、「どこにどの図を使うか」「他の書き方はないか」を探る段階ではありますが、

「テキストエディタで読みやすいドキュメントを作る」が一歩前進です。

記録と内省システム。(2021年9月21日のZENタイル/キャラホメ)

自分の本質はここにあるようです。

9/21の出来事

  • 降ってわいた仕事
  • 面倒な会議
  • 厳しい締め切り
  • 苛立つ出来事

などがかなり心に乱れが生じた日であることは間違いなく。

異様にヘトヘトでしたがですが、そんな状況だからこそ「しっかり行える記録ツール」に助けられました。

ZENタイル

「タイムラインに沿ってその時感じた気持ちを置いておく」単純さですのに、この配置をトリガーとして

  • 寝苦しさがあった
  • 午後に上司の助け船があった
  • 備品の不備を指摘された

などの記憶を思い起こすきっかけとなります。

キャラホメ

そうして、一日を洗い出して「特筆すべきところ」や「引っかかった部分」を補完するツールとして活躍しているのが『キャラホメ』です。

残業で苛立ってましたけど、「推しを通して労う」ことで、その感情が緩和されるだくでなく明日への活力となるのは心強いです。

まとめ

先週からデジタルの記録ツールを整備していきましたが、

  • 忙しい状況でも一日を振り返る
  • 際立ってた出来事を深掘りする

をアナログかつ確実に執れる手段のおかげで「デイリーログ」が捗ると思った次第です。

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レンダリングを統合する」

が叶ったようです。

電子筆記具、追加。(HP Chromebook x360 12b ファーストインプレッション)

根津神社に参詣のあと、購入したものがこちらです。

HP Chromebook。

  • 何故これを買うに至ったか
  • 開封
  • 開封してのインプレッション

を中心に書いていきます。

何故これを買うに至ったか

以前のエントリーでMarkdownで書くことの楽しさに目覚めたことは書きました。

その際に以前使っていたChromebook(ASUS:C101PA)が脚光を浴びたのですが、

  • 打ちやすいものの、手に小さい。
  • 購入から4年経過しているためにスペック不足は望めない。

ことから、何かいい後継品はないかと思っていました。

後継品の要件定義

このとき、自分が必要とした要件は以下の通りです。

  • クラムシェル型であること
    • Surfaceライクなデタッチャブル/キックスタンド式は膝の上での取り回しができません。
  • 膝の上で広げやすいサイズ
    • キーボードの大きさから考えると、画面サイズは最大でも12です。
  • microSDカードスロットがついていること
    • これは譲れない条件でした。「出先での動画視聴」も前提に入れているので、容量が拡張できないのは致命的です。
  • タッチスクリーン対応
    • Androidアプリをある程度動かすため、これも欲しい条件です。
  • Linux環境を立ち上げられるスペック。
    • じつはこれが買い換えの理由。C101PAは内蔵ストレージが16GBのみなので、ChromebookビルトインのLinux環境立ち上げに難があります。

と、あれでもないこうでもないと選び続け、上記の要件に適合する商品にたどり着きました。

開封とインプレッション

外観

真っ白な天板にhpとChromeのロゴ。コンポーネントがみっしり詰まっているためか、予想以上に重いです。

ACアダプターはノートPCを思わせる大仰さ。この取り回しが今後の課題になりそうです。

キーピッチは比較的広く、地味にライトつきです。

電源ボタンは側面に。そして要件としてあげたsdカードスロットもしっかりついています。

画面

キーボードを筐体一杯に使っていることもあって余計に大きく見えます。

ベゼルの狭さや大きさは一目瞭然。

軽く触っての印象

「とかく高速」

でした。元々、軽快な動きと起動速度に定評のあるChromebook。本機はCPUパワー分、底上げされています。

「これが4年の差」かと痛感しました。

ただ、今まで使っていたChromebookの0.99kgから1.35kgと重さの差は歴然。そこが違和感です。

とはいえ、

  • 『テラフォーミング・マーズ』のようなAndroidゲームも苦にせず動くパワー
  • サイズアップした分打ちやすくなったキーボード
  • それでいて異動中でも使える格好のサイズ感
  • Chromebook特有の「蓋を開けた瞬間にアプリが起動する軽快な動き」

は欲しかった要件をみたしています。

まずは、使うに当たっての準備である各種アプリの整備から進めていきます。

Page 55 of 85

Powered by WordPress & Theme by Anders Norén