vim-mode-plusのキーバインドを変更する

Atomエディタプラグインのvim-mode-plusには通常のVimエディタにあるvimrcを読み込む機能がないため、Atomのキーマップ設定ファイルであるkeymap.csonに設定し、複数のコマンドを割り当てたい場合はAtomの設定ファイルであるinit.coffeeに複数コマンドを1つのコマンドとして登録する必要があります。

例として、以下のvimrcファイルをinit.coffeeとkeymap.csonに変換する例をご紹介します。

変換前

vimrc

noremap j gj
noremap k gk

noremap <S-j> 10j
noremap <S-k> 10k
noremap <S-h> 10h
noremap <S-l> 10l

変換後

init.coffee

atom.commands.add 'atom-text-editor.vim-mode-plus', 'custom:move-left-10', ->
  view = atom.views.getView atom.workspace.getActiveTextEditor()
  atom.commands.dispatch view, 'vim-mode-plus:set-count-1'
  atom.commands.dispatch view, 'vim-mode-plus:set-count-0'
  atom.commands.dispatch view, 'vim-mode-plus:move-left'

atom.commands.add 'atom-text-editor.vim-mode-plus', 'custom:move-down-screen-10', ->
  view = atom.views.getView atom.workspace.getActiveTextEditor()
  atom.commands.dispatch view, 'vim-mode-plus:set-count-1'
  atom.commands.dispatch view, 'vim-mode-plus:set-count-0'
  atom.commands.dispatch view, 'vim-mode-plus:move-down-screen'

atom.commands.add 'atom-text-editor.vim-mode-plus', 'custom:move-up-screen-10', ->
  view = atom.views.getView atom.workspace.getActiveTextEditor()
  atom.commands.dispatch view, 'vim-mode-plus:set-count-1'
  atom.commands.dispatch view, 'vim-mode-plus:set-count-0'
  atom.commands.dispatch view, 'vim-mode-plus:move-up-screen'

atom.commands.add 'atom-text-editor.vim-mode-plus', 'custom:move-right-10', ->
  view = atom.views.getView atom.workspace.getActiveTextEditor()
  atom.commands.dispatch view, 'vim-mode-plus:set-count-1'
  atom.commands.dispatch view, 'vim-mode-plus:set-count-0'
  atom.commands.dispatch view, 'vim-mode-plus:move-right'

keymap.cson

'atom-text-editor.vim-mode-plus:not(.insert-mode)':
  'shift-h': 'custom:move-left-10'
  'shift-j': 'custom:move-down-screen-10'
  'shift-k': 'custom:move-up-screen-10'
  'shift-l': 'custom:move-right-10'
  'h': 'vim-mode-plus:move-left'
  'j': 'vim-mode-plus:move-down-screen'
  'k': 'vim-mode-plus:move-up-screen'
  'l': 'vim-mode-plus:move-right'

AtomにVimキーバインドを設定する

学生の頃からVimを愛用して来ましたが、用途によってはプラグインが豊富なAtomの方が便利な場合があるので、AtomでVimキーバインドを設定する方法を調べてみました。

プラグインのインストール

• vim-mode-plus + ex-mode の組み合わせが推奨されています。
  • vim-mode、vim-mode-plus-ex-modeは非推奨。
    • https://atom.io/packages/vim-mode
    • https://atom.io/packages/vim-mode-plus-ex-mode

Escで挿入モードを抜けたときにIMEをオフにする

• プラグインにはこの機能は実装されていないため、キーバインドを変更して対応するしかありません。
  • MacOSではKarabiner、WindowsではAutoHotKeyなどを利用している方がいるようです。
  • （再度挿入モードにしたときにIMEをオンにすることはできません。）
• 設定時に参考になるWebサイト
  • Microsoft IMEで無変換キーにIMEオフを割り当てる
    • http://did2memo.net/2015/05/10/microsoft-ime-henkan-muhenkan-ime-on-off/
  • AutoHotKeyでEsc入力時に無変換キーを入力する
    • http://nosu.hatenadiary.jp/entry/2016/10/30/192005

キーマップを設定する

• vim-mode-plusにはvimrcを読み込む機能はないため、keymap.csonで定義します。
  • http://mebiusbox.github.io/note/2016/06/17/atom-keybindings.html
• 複数コマンドを実行したい場合はinit.coffeeにコマンドを定義する必要があります。
  • http://qiita.com/74th/items/160b011bbfcac77d4e3c

PlantUML Class Diagram

I made a class diagram with PlantUML followed by the previou sequence diagram.

' Write comments after single quotaion mark.

@startuml

' Color Setting
skinparam classBorderColor black
skinparam classArrowColor black
skinparam noteBorderColor black
skinparam classAttributeIconSize 0

' Class Definition
class ClassA {
  - privateMember : Integer
  + publicMember : Integer
  # protectedMember : Integer
  ~ packageMember : Integer
  + method() : void
  + {static} staticMethod() : void
  + {abstract} abstractMethod() : void
}
' Note (For Class)
note top of ClassA: Note
note right of ClassA
  Note
end note

' Interface
interface Interface
ClassA ..|> Interface
' Note（Linkに対して）
note on link: Note

' Abstract Class
abstract AbstractClass
ClassA --|> AbstractClass

' Association
ClassA -- ClassB

' Composition
ClassA --* ClassC

' Aggregation
class ClassD
ClassA --o ClassD

' Dependency
class ClassE
ClassA ..> ClassE

@enduml

Generated Diagram

PlantUML クラス図

前回のシーケンス図に続いてクラス図も作成してみました。

' コメントはシングルクオーテーションの後に記述する

@startuml

' 色設定
skinparam classBorderColor black
skinparam classArrowColor black
skinparam noteBorderColor black
skinparam classAttributeIconSize 0

' クラス定義
class ClassA {
  - privateMember : Integer
  + publicMember : Integer
  # protectedMember : Integer
  ~ packageMember : Integer
  + method() : void
  + {static} staticMethod() : void
  + {abstract} abstractMethod() : void
}
' Note（Classに対して）
note top of ClassA: Note
note right of ClassA
  Note
end note

' Interface
interface Interface
ClassA ..|> Interface
' Note（Linkに対して）
note on link: Note

' Abstract Class
abstract AbstractClass
ClassA --|> AbstractClass

' Association
ClassA -- ClassB

' Composition
ClassA --* ClassC

' Aggregation
class ClassD
ClassA --o ClassD

' Dependency
class ClassE
ClassA ..> ClassE

@enduml

生成される図

PlantUML Sequence Diagram

I made a sample sequence diagramAtom with PlantUML. Most frequently used rules are in this sample, so you should be able to make your own diagrams by modifying this sample if you forget the rules.

' Writes comments after singl quotaion mark.

@startuml

' Color Setting
skinparam actorBorderColor black
skinparam sequenceParticipantBorderColor black
skinparam sequenceLifeLineBorderColor black
skinparam sequenceArrowColor black
skinparam noteBorderColor black

' Declaire participants.
' You can define an alias usibg "as".
actor Actor as A
participant Participant as P

A -> P : Synchronous Message
activate P
A <<-- P : Return Message
deactivate P

A ->> P : Asynchronous Message
A -> A : Message to Self

' Note (For messages)
A -> P : Message
note right
 Note: note (left|right) ... end note
 (Or just "note (left|right) : ...")
end note
' Note (For participants)
note over A, P : note (left|rigght|over) of

' Text Decoration
A -> P : Multi Line\n(Line Break)
A -[#blue]> P : <font color="blue"><b>Change Style</b></font>

' Conditional Branch
alt guard condition
  A -> P : Message
else guard condition
  A -> P : Message
end

' "Message to Self" doesn't work with "Activate" well.
A ->> P : Asynchronous Message
activate P
P -> P : Message to Self
deactivate P

@enduml

Generated Diagram

PlantUML シーケンス図

AtomでPlantUMLを編集する環境が整ったので、今回はシーケンス図のサンプルを作成しました。よく使いそうな記法を網羅するようにしていますので、記法を忘れていてもこのサンプルを修正しながら図を記述していくことができると思います。

' コメントはシングルクオーテーションの後に記述する

@startuml

' 色設定
skinparam actorBorderColor black
skinparam sequenceParticipantBorderColor black
skinparam sequenceLifeLineBorderColor black
skinparam sequenceArrowColor black
skinparam noteBorderColor black

' Participantの宣言（省略可能）
' asで別名を定義できる
actor Actor as A
participant Participant as P

A -> P : Synchronous Message
activate P
A <<-- P : Return Message
deactivate P

A ->> P : Asynchronous Message
A -> A : Message to Self

' Note（Messageに対して）
A -> P : Message
note right
 Note: note (left|right) ... end note
 (Or just "note (left|right) : ...")
end note
' Note（Participantに対して）'
note over A, P : note (left|rigght|over) of

' 文字装飾
A -> P : Multi Line\n(Line Break)
A -[#blue]> P : <font color="blue"><b>Change Style</b></font>

' 条件分岐
alt guard condition
  A -> P : Message
else guard condition
  A -> P : Message
end

' Message to SelfはActivateと上手く動作しない
A ->> P : Asynchronous Message
activate P
P -> P : Message to Self
deactivate P

@enduml

生成される図

PlantUML How to Install

What is PlantUML?

• A Language (DSL) to write UML in a text format.
• Supported diagrams:
  • Sequence diagram
  • Sequence diagram
  • Use case diagram
  • Class diagram
  • Activity diagram
  • Component diagram
  • State diagram
  • Object diagram
  • Deployment diagram (Beta)
  • Timing diagram (Beta)

Try It On Website

• You can convert the UML text to PNG, SVG or ASCII art on PlantUML website.
• A URL will be issued to the converted UML and you can embed it on your website.
  • http://plantuml.com/plantuml/

Set up an environment to use PlantUML with Atom (Windows10)

1. Install Graphviz
   • Download the installer (.msi) from the followin URL.
   • http://www.graphviz.org/Download_windows.php
2. Run Atom and install the PlantUML plugin
   • Select from the menu: File -> Settings -> Install.
   • Search for "plantuml-viewer" and install it.
3. Change the Settings of PlantUML Plugin
   • Select from the menu: File -> Settings -> Packages -> plantuml-viewer -> Settings.
     • Charset: UTF-8
     • Graphviz Dot Executable: C:\Program Files (x86)\Graphviz2.38\bin\dot.exe (When you installed Graphviz with default settings.)