messykitchenなブログ

ただひたすらに散らかった台所や人生やその他を晒す。

脱W〇rd, 脱E×cel, 脱@st@h = Markdown, PlantUML, etc. : #8

今回は PlantUML の使い方、というより、こんな使い方もできそう、という記事です。

かんばん してみる by PlantUML

プロジェクトや業務の管理手法に、「かんばん」という方法があります。
詳細は検索してください。
自分も詳しいわけではないので。

PlantUML を使う利点として、テキストで書けるということが挙げられます。
進捗変化をバージョン管理システムなどで保存していくと、日々の差分が抽出できるようになりそう。

試しに描いてみた絵。

このときの記述は次のとおり。

/' 完了項目を表示する場合、有効化 '/
!define SHOW_DONE_ITEM

/' ================ 未着手 ================ '/
frame   "Backlog"   as Backlog  #ffe0e0 {
    rectangle   sampletask1 #ffeeee [
            まだやっていない
        ]
}
/' ================ 作業中 ================ '/
frame   "Work In Progress"  as WorkInProgress   #lightyellow    {
    rectangle   sampletask2 [
            いまやっている
        ]
}
/' ================ 完了 ================ '/
frame   "Done"  as Done #LightGray  {
!ifdef  SHOW_DONE_ITEM
    rectangle   sampletask3 #eeeeee [
            もうおわった
        ]
!endif
}

/' レイアウト調整 '/
Backlog -[hidden] WorkInProgress
WorkInProgress -[hidden] Done

しばらく日々の作業を、これで進捗管理してみようと考えています。

楽天モバイルでのデータ通信量

今年2018年1月2日に楽天モバイルの使用を始めました。

データ通信の使用状況はどうだったか

契約プランは「スーパーホーダイ プランS」。
音声通話 10分間無料 & 高速データ通信量 2GB。

高速通信は常時OFF。
月末にON。なんともびんぼっちい経済的な使い方。

直近のデータ通信の使用状況は次の通り。

使用量
6月 15.3GB
7月 14.8GB
8月 12.9GB

1月、2月の結果もどこかにあったはずだけど、見つけたら追記します。

結構、データ通信していたようです。
契約1年目なので、2000円くらいで上記のデータ通信をしていたということになるので、 かなりお得に使えているのでは?

使い勝手

高速通信はOFFなので、がんばっても 1Mbps 程度の通信速度しか出ません。
そんな環境ですが、自分の使い方には大きな問題はなさそうです。
上記のとおり、10GB以上のデータ通信ができているのも、これを裏付けている結果です。

12時台の 1時間、19時台の 1時間はさらに遅く 300kbps 程度になってしまいますが、 自分はこの時間帯は仕事中なので問題なし。
(昼休みが遅い&残業が多い)

動画もそんなに見ないし、480p くらいの画質ならば YouTube も問題なし。

ちょっと困るのはアプリの更新・インストール時のダウンロードに時間がかかることです。

また、特にゲームアプリで多いですが、本体更新に加えて、更新データがありますとか言って、 追加のダウンロードが終わらないとゲームが開始できない、という場合に通信速度が遅いと困ります。

進まないインジケーターバー
頻繁に出現する通信エラーのポップアップ。
そして繰り返されるマイナーアップデート。

これはもう、悟った人間でなければ、苦行。

わるい事ばかりじゃないよ。

みなさん、離婚してますかー!

これからの人も、もう済ませた人も、元気になりましょう!!

自分の振り返りも兼ねて、離婚後(一部、離婚前)に新しく始めたこと・できたことを列挙します。
離婚することは、わるい事ばかりじゃないよ。

  • ブログを始めた(実際には、離婚騒ぎが始まる約2月前から)
    • どうにも自分の中から何かを出さなければ、心身が壊れそうだったので書き始めたのがきっかけ。このブログね。
  • 普通自動二輪免許を取得した
    • 社会人になって取ろうと思っていただけだったものが、できていなかったので。約20年越し。
  • バイクを買った
    • これまでも何度か紹介。えっつん。
  • 車を買った
    • バイクだけでは生活圏が限られると実感。中古軽自動車。
  • YouTube へ動画投稿を始めた
    • ブログ(文字)だけではなく動画でも、自分が生きた証を残したくなったのかもしれない。
  • アクションカメラを買った
    • ブログや YouTube 用に。コンパクトデジタルカメラも買った。いろいろ発見する感度が高まった気がします。
  • 家を買った(?)
    • 買ったと言えるのかどうかわからないが、自分だけの持ち物になった。
  • 交友関係が広まった。
    • なんでだろ?
  • 猫を飼った
    • いつかは三毛猫の願いが叶った。ちなみに保護猫です。
  • 自炊を始めた。
    • 一汁一菜でよい。
  • クレジットカードのメンバー特典で物をもらった
    • 初めて。今までは相手が勝手に決めて物をもらっていた。高いカードの年会費は誰の稼ぎだったのか?
  • Google Home を設置した
    • さすがににゃんこ様とは会話ができない。でも、Googleアシスタントとも会話は成立しない・・・
  • Google Home mini を設置した
    • 寝室用。ほぼ目覚まし。
  • 実家のリフォームをした
    • 正しくは親がリフォームを実施。離婚後は実家へ顔を見に行く機会も増えた。
  • 断捨離した(継続中)
    • 使われていない無駄なものが、なんと多い事か。まだまだ絶賛片付け中。
  • フリマに出品
    • 捨てるのは簡単。でも、少しでも生きていく糧にできるはず。
  • 筋肉トレーニング
    • 離婚問題のごたごたが始まる前に出会いたかった。もしかしたら問題が解消できたかもしれない。でも、過ぎてしまったことはしかたがないよね。

自分、この2年弱の間、生きていることを実感しています。
まだまだ人生はこれからです。

脱W〇rd, 脱E×cel, 脱@st@h = Markdown, PlantUML, etc. : #7

スプライトを表示する

スプライトってどんなもの?

ドキュメントより引用:

Spriteは、図で使用できる小さなグラフィック要素です。

たとえば、こんな画像を配置したいとします。

※ PlantUML の HP より画像を拝借 & リサイズ

表示するにはどうするの?

白黒ですが、記述は次のようになります。

@startuml ./output/

component   "<$demo>" as demo #white

right header
%date[yyyy.MM.dd 'at' HH:mm]%
endheader

sprite $demo [40x36/16z] {
dT27aciX20PWgdX0Szx_RI_YzXRd_hj9BD_029oa8Hp5-8XHFsEkm2VCsFe9Q_wy77hJO3XmU50keyPkHyCJEvkB61yDkPqmy-xNSzZ2p7euFd59klNkzBIj
Xn-ympn3W7ZWBZnp_X-kzVqYLCMzk0o_kHPpZWv0sbIifUgF-vwvw1yS-HmZOZgtnXbjIztvSR1uTNJD4VcdEaOn1EhpVimxC-ErtkgOKRcOnhWK8Vz8_A4w
FUvxlCnbx4GJQUlN28c5kOqkEbRxKVNSuvNkJmXBXjchytfFzItuJZtPggTAdYZZ35NFFyXG04ebAWXjkP2Q9euekLcD5aMKrqBs2BUJ7gybEq5brLh1QRKe
1o0H1QrgfQtP2-u52swNqMekkI9zgScl2z5t1tmbrBMg_VT5kLro2FoHSfNUaNuDupy
}

@enduml

$demo を下記のように設定すると、色が付きます。

私が知らないだけだったかもなのですが、カラーなスプライトも表示できるようになってました。

sprite $demo [40x36/color] {
zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzztrzRzz
zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzztJuvzz
zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzyvt&zizz
zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz>s~u:zzue
zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz>sWtauetJtJ
zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz>sWtatrs~uvzz
zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzRsWtau:o~yvzzzz
zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzRsWzRtrs~ufzzzz
zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzu:tJyvs~tJzzzz
zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzztJuNtat&zzzz
zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzyetJuezzzz
zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzrRRraNuvzzzzzz
zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzyW:JJRrJJNrn>zzzz
zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzWO~JW:W:W:RrJJJJvi
zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzK<#e~bRrW:RrRrNarR
zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzK<#f#v*MJKW:ivvivi
zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzK<#e#v#w*drRzzvivi
zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzK<#f#v#v;uvRzzvivi
zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzK<#f#v#v*urRzzvivi
zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzK<#f#v#v*urRzzvivi
zzzzzzzzzzzzvie;ZbrRzzzzzzzzzzviicibrRzzzzzzzzzzrRRbW:vizzvjzzK<#f#v#v*urRzzvivi
zzzzzzzzviaNQoU$U%QHZrzzzzrSeci%uWuXe$eMzzzzrRRs:H!%!$:XaNzzzzK<#f#v#v*urRzzvivi
zzzzzzr>V*Q$YHYHYIYIU$UpmviJqGynynynz*qYiJRr&H!$&%&%:&&%&%JKviOP#e#v#v*urRzzvivi
zzn>ZaQHY%YIYHYYYHmOm<Y%UGq%z&ynypypzgzxz-dn>H&&:&>Z&%&%&%!$>Y;L#w#v#v*urRzzvivi
N&QGU$YHYHYHYHm;qfd+qwv>YHUHd%uXzfzyzPzizgzMuXRH:IefeP:YJ-J-!%&%#-#v#w*uvRzzvivi
*-MZYHYHYHYHYHYHlsqfqOlsYHYHY%YHhXz:zfzMypynynz%mHInVtiweO_p&%&%&%&I#M*urRzzvivi
#v#v;-QHYHYHYHYHY%YHYIY%YHYHYHYIU%YmqYynynynynynz&ynRG>I&%&%&%&%&&&%!$:pvizzvivi
#e#v#w#e_pYHYHYHYHYHYHYHYHYIYHU%Ypmfr;ynyoynyoynuXmZvQNL!%:&&%&&&%&%JLn>zzzzvivi
#v#v#v#v#v;MMIYHYHYHYHYHYHY%YYiNvizzvPyXyoynyXqZmuvizza;&%:&&%&%_pivzzzzzzzzvivi
#-#e#v#v#v#w#e>qUHYHYHY%UHdsvizzzzzzvhyoynqYqtvizzzzzziv&%&%>YaOzyzzzzzzzzzzvivi
ivK;#N#f#w#v#v#v*MIIUHdLr?zzzzzzzzzzzzqZqrrRzzzzzzzzzzrR>YVsvizzzzzzzzzzzzzzvivi
zzzzef;L#N#w#v#v#w#eW;zzzzzzrRivrRzzzzvRzzzzzzrRivrRzzzzrRzzzzzzn>ivvizzzzzzvivi
zzzzzzviae#-#e#w#v#favzzzzzzrReerRzzzzzzzzzzzzn>eerRzzzzzzzzzzzziveevizzzzzzvivi
zzzzzzzzzzn>Js#M#v#vafzzzzzzzzvivizzzzzzzzzzzzzzvizzzzzzzzzzzzzzvivizzzzzzzzvivi
zzzzzzzzzzzzzzaN;+#:evzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzvivi
zzzzzzzzzzzzvzzzzyRrRrrRn>n>n>n>n>n>n>n>n>n>n>n>n>n>n>n>n>n>n>n>n>n>n>n>n>rRivvi

しかしながら、上記のようなデータを手動で作成するのは無理

どうやってスプライトのデータを作るの?

詳細は説明書に書いてありますので、そちらを参照してください。

作成方法1: コマンドライン

java -jar plantuml.jar -encodesprite 16z foo.png

しかし、次の方法のほうが楽にできるかも。

作成方法2: GUI

以降、Windows上での動作です。(java だから、どのOS上でも同じかな?)

  1. GUI を起動(plantuml.jar をダブルクリックなど)する。

  2. メニューバーの File / Open Sprite Window をクリックする。

  3. 画像をクリップボードへコピーする。

  4. エンコードされたスプライトデータが吐き出されるので、必要なものをコピーして使用できます。

スプライトデータは別ファイルにしておいて、!include するのがいいかもしれません。

脱W〇rd, 脱E×cel, 脱@st@h = Markdown, PlantUML, etc. : #6

ifdef/endif で表示を制御してみる

次のような、記述が長いコンポーネントが存在したとします。

'!define SHOW_LONGTEXT
'!define SHOW_STORY

rectangle myaccident [
  私の身の周りのできごと
!ifdef SHOW_LONGTEXT
  話せば長くなりますが、
  この数年間のできごとを
  伝えなければなりません。
!endif
]

rectangle story [
  始まりは、あの年のことでした。
!ifdef SHOW_LONGTEXT && SHOW_STORY
  奴らの携帯電話のメールがおかしい。
  奴らのパソコンのメールがおかしい。
  奴らの休日の行動がどうもおかしい。
  はい、やつらの(自主規制)、確定。
!endif
]

myaccident --> story

そのままの描画だと、大きな rectangle になってしまいそうですが、 実際には次のようなコンパクトな図になります。

これは先頭2行の !define と、文中の !ifdef !endif により、有効な範囲が制御されているためです。

コメント ' をひとつ、外してみます。

!define SHOW_LONGTEXT
'!define SHOW_STORY
...

するとこんな感じ。

もうひとつ、コメント ' を外します。

!define SHOW_LONGTEXT
!define SHOW_STORY
...

全ての文章が現れました。

!ifdef には、複数の条件を組み合わせることができます。&& ||

また、!ifndef というキーワードもあるようです。

上手に組み合わせて、描画範囲を適切に制御したいな、と。

脱W〇rd, 脱E×cel, 脱@st@h = Markdown, PlantUML, etc. : #5

コンポーネントに色を付ける

コンポーネントには色を付けることができます。
多用するとごちゃごちゃしてくるので、注目すべき部分に絞って適用したいところです。

これまでの説明でも何度も出てきていますが、色名称色コード を指定することで、 コンポーネントへの色付けを実現します。

component    "<color:#white>compoA"    as obj1 #red
component   "<color:#white>コンポB"    as obj2 #blue
component   "<color:#white>こんぽC"    as obj3 #green
component   "<color:#white>konpoD"    as obj4 #10A0F0

(この例では、文字の見やすさのため、文字色を白色に設定するタグも書いています)

単色だけでなく、2色を指定し、グラデーションをかけることもできるようです。

component    "<color:#white>compoA"    as obj1 #red-blue
component   "<color:#white>コンポB"    as obj2 #red|blue
component   "<color:#white>こんぽC"    as obj3 #red/blue
component   "<color:#white>konpoD"    as obj4 #red\blue

(この例は、なんだかキタナイ色使いだな・・・)

細かな設定はできませんが、技術資料を作るにあたっては、それは不要でしょう。

脱W〇rd, 脱E×cel, 脱@st@h = Markdown, PlantUML, etc. : #4

コンポーネント図でオブジェクトの配置を調整する (together 編)

グループ化するような方法でも、オブジェクトの配置をできます。
together キーワードを使います。

まずは、単純にコンポーネントを作ってみた場合です。

component    compoA  as obj1 #lightpink
component   コンポB  as obj2 #lightblue
component   こんぽC  as obj3 #lightgreen
component   konpoD  as obj4 #lightgray

ここで、B と C を近くに配置したい場合、それぞれを together キーワードで括ります。

component    compoA  as obj1 #lightpink
component   konpoD  as obj4 #lightgray

together {
component   コンポB  as obj2 #lightblue
component   こんぽC  as obj3 #lightgreen
}

前回使った、[hidden] も組み合わせて使用できます。

component    compoA  as obj1 #lightpink
component   konpoD  as obj4 #lightgray

together {
component   コンポB  as obj2 #lightblue
component   こんぽC  as obj3 #lightgreen
obj2 -[hidden]-> obj3
}

コンポーネント間の位置がちょっと気になる場合は、次のような操作を試し、工夫してみてください。

  • 記述順序を変えてみる
  • -[hidden]-> -[hidden]> をうまく使う