unhurried

コンピュータ関連ネタがほとんど、ときどき趣味も…

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の方が便利な場合があるので、AtomVimキーバインドを設定する方法を調べてみました。

プラグインのインストー

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

キーマップを設定する

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

生成される図

http://www.plantuml.com/plantuml/png/XLBBIiD05DtdAowuy4N5jGj1MnU2kl4B9fCn3ardmcHKV5H80gBetiVEZLR5AheGeTIF6OhT-GlUIL9R9M0Mayavvzuvzqp6mIIl9hqsAQx79duooPlT9yycVJ09VjwRj6FI8xjQwjQoSRlNFJFnGxzrqVzuDl6bIKuTVCQXV_BIRptssbTELESY98eqW0OaYXQbyfYgoa0gS0D2wty52qh9dN9UICt-hzTQSNTBisKgnJhVOp1h3TaPqZkJlAEdp-wTascXcbN0lWDGWL3nRQBPAckuJC4SB0lDVAQGcuPmomquBQ76i0njKSsy4lOGGhH8_FAc3QOtfJSnYV2sv5w6xKUQQ4wRaBzNooJ4ZRGYL3TXiFihQ-B4QsZhgtESZOXtr7lgclZSn3TVdHF79WbQXY0tYWpcCdrEAEvlwY65XsOS4rvs1JPEEuRQ89GvVB0RmOfOPsOEvaVG7qihNDHB7Ka10NA55onOAERBdJY3SN_m72wEgrJmkD-CRH55adBCKegXCE-tQFcgR8Gouh_vgLnGpHhulc9-tc3ahwaDrNA0eBh6Gio92RexAbuQHZ9V8Dy0

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

生成される図

http://www.plantuml.com/plantuml/png/ZLDTJnD157tVNt5J7qeJAUzDRRBmwaSZZ-h3T3kbQzSPd9t5aF3Wx2gsLW8nGTJW0o58XT0IJDH4g3zcM5YV-0lEJB4k7udTPAUxzvwUUy-vTxCWmwyosf2HEfjIz6JuNJ-7-pBQbQ5wtP7HeOmMzQbJspehkd7_ZHIxIUTzycjVYWyoR5lgoaBIEaWwUt7te-KtN3AB67e2oE6KJL9MnMoAUfH1nKDE8mNmyTC04mUN4UEkuyuYmaU1ttPhwYPu5ApD67rsFOHGVWs5qf9gHolkRYQTvsU7pTDrSRgw5I_takZexB2bWCYNOZjkRiKhIp9ygyIVzh-eY1HBsXSZ7snp8XziQ_OVRxg6JfOjouRn4fIX0DFpnAapIcZWmnti-sW6Qovt3d6iW3OKY-FZ1daVyu2H8QYAKp33Do2q_MiOJJbRPSy3m2bCOw-c3RYhd562ppDgtd6lByMQ59-rxc6ZVwcqaS3ScJgtp5yBnbeOyt2DBvXu3lBvF61IDHaBnkunU1pu739NaGMDpUIi8NhOpuMvNEWfE-Y1pc5b-4tJt4LYnRoWipcWHk79krVntbgo-VBtPZybAF2u2tgr7f8n_GEJ3AD6JYCUtAXu0Nuq01PhLCtDqMjpAwFZcLAnKfgg8wACdERp7YvEL4h52GqhcNgVDev_VekRY_71YeKy3ZC1ObN5GAekTocn0AxOYZqVZuGZLLtYqXpL9ssVRuCKdUCVhqzQRIcMu_RgyT6wCMv7YXV_svBKGfKlrHqkJ7hj_W00

PlantUML インストール方法

これまでUMLを記述するのには、仕事でも個人でもastah* communityを利用していました。astah* communityはバージョン7.0から商用利用不可となりましたが、私のUMLの用途はシステムの概要を説明するために簡単なクラス図とシーケンス図を使っていただけでしたので、有料版を購入するほどのものでもありません。そこでその代替となるツールを探してみることにしました。

Qiitaで人気そうなのはテキストでUMLを記述できるPlantUMLというツールでした。少し使ってみたところ、記法はシンプルで覚えやすく、テキストのために差分比較もでき、Atomプラグインを利用することでリアルタイムプレビューもできるため、中々使いやすいと感じました。大規模の図では探したい場所をテキスト中から探すのにが大変になるかもしれませんが、私の用途では全く困らなそうです。

以下では、PlantUMLのインストール方法を簡単にご紹介しています。

PlantUML

  • UMLをテキストで記述するための言語(DSL
  • 対応しているUMLのダイアグラム
    • シーケンス図
    • ユースケース
    • クラス図
    • アクティビティ図
    • コンポーネント
    • ステートマシン図
    • オブジェクト図
    • 配置図(ベータ版)
    • タイミング図(ベータ版)

Webサイトで簡単に試す

Atomでの編集環境を構築する(Windows10)

  1. Graphvizをインストールする

  2. Atomを起動してPlantUMLプラグインをインストールする

    • メニューから File -> Settings -> Install を選択します。
    • 「plantuml-viewer」を検索してインストールします。
  3. PlantUMLプラグインの設定を更新する

    • メニューから File -> Settings -> Packages -> plantuml-viewer -> Settings を選択します。
      • Charset: UTF-8
      • Graphviz Dot Executable: C:\Program Files (x86)\Graphviz2.38\bin\dot.exe (Graphvizをデフォルト設定のままインストールした場合)

AWS ELB(ALB)にZone Apexドメインを設定する

Zone Apexとは?

Apexは頂点、先端という意味で、wwwなどのサブドメインのつかないドメインを意味します。 example.comというドメイン保有している場合、www.example.comはZone Apexではなく、example.comはZone Apexとなります。

Zone ApexにはCNAMEを設定できない

ドメインDNSサーバーを、AWSDNSサービスであるRoute53を使わずに外部に用意していた場合、DNSレコードにはELB(ALB)のドメイン名をCNAMEレコードとして設定する必要があります。 ところが、RFC1912に記載される仕様上、この設定が正しく動作する保証がありません。

Route 53のエイリアスレコードを利用する

結局のところ、この場合には外部のDNSサーバーは利用できず、Route53で提供されるエイリアスレコードという機能を使うしかありません。
エイリアスレコードはCNAMEのように定義でき、実際の動作上はAレコードのように振る舞う仕組みです。(DNS応答の際にCNAMEレコードのドメインIPアドレスを解決して、そのIPアドレスをAレコードとして応答します。)

参考

Heroku Free DynoのSleepを防止する

Herokuでは月に1000時間の稼働稼働枠がもらえますが、無料プランでは30分アプリにアクセスがないとアプリがSleep状態になってしまいます。New Relicアドオンを使って定期的にリクエストを送信することでアプリがSleep状態になることを防げますので、設定手順をご紹介します。

New Relicアドオンのセットアップ

# Herokuにログインする
$ heroku login
# New Relicアドオンを追加する(wayneは無料プランの名称)
$ heroku addons:add newrelic:wayne -a {app name}
# New Relic設定画面をブラウザで開く
$ heroku addons:open newrelic -a {app name}

New Relicの設定

最初に表示されるプロダクト選択画面で「SYNTHETICS」を選択する。

モニターの作成画面で以下を入力する。

(1) Choose your monitor type:Ping

(2) Enter the details

  • First, name your monitor:(適当な名前を付ける)
  • Enter a URL:(HerokuアプリのURLを入力する。アプリにリクエストが送信されればエラーが返却されても問題ないので https://{app name}.herokuapp.com/ などでよい。)

(3) Select monitoring locations

  • どのロケーションを選択しても大差はないと思うので適当に選択すればよい。

(4) Set the schedule:15min

  • 30分より短く設定する必要があるため。