【PlantUML】PlantUMLをAtomエディタでliveプレビューさせてみるメモ for Mac

はじめに

PlantUMLはテキストベースでUMLがかけるので便利ですが、書くのと確認を繰り返すときにやや面倒です。
今時フロント開発でもliveプレビュー環境は当たり前になってきているので
PlantUMLもliveプレビューしたいものです。

探したらすごく良記事があったので参考にさせて頂いて入れてみます。
http://pierre3.hatenablog.com/entry/2015/08/23/220217

ながれ

1. macローカルな環境でPlantUMLを使えるようにする
2. Atomエディタを入れる
3. Atomでplantuml-viewerを入れる
4. Atomにlanguage-plantumlも入れる
5. AtomでPlantUMLを書きながらLiveプレビューってみる
6. Atomの`plantuml-viewer`のliveタイミングを調整する

1. macローカルな環境でPlantUMLを使えるようにする

PlantUMLをMacに入れるのは以前別記事で書いたので割愛します。恐らくそのままやればいけるはず
http://tweeeety.hateblo.jp/entry/2014/10/24/173359

2. Atomエディタを入れる

以下のAtom公式ページからdownload＆インストールします
https://atom.io/

3. Atomにplantuml-viewerを入れる

Atomを起動してplantuml-viewerというpluginを入れます。AtomではPackagesという呼び方のようですね。

• Packages -> Settings View -> Install Packages/Themesの順番にmenuを開きます

• Packageの検索にplantuml-viewerと入力して検索すると表示されるのでおもむろにInstallします

• 設定を少し変えるために Settings を開きます

• 今回は文字コードだけ変えるので Charsetにutf-8と入力します

なお、設定はこの画面の左ペインメニューにある Packages という項目から該当のパッケージのSettingを選択すればいつでも開けます

4. Atomにlanguage-plantumlも入れる

language-plantumlというplantUML用のシンタックスハイライトpackageもあるようなので入れておきます。
書いてるときの文字色も見やすいほうが良いですよね。

3. Atomにplantuml-viewerを入れると同様に、
Packages -> Settings View -> Install Packages/Themes からlanguage-plantumlを探してinstallする感じです。

シンタックスハイライトがつくとやや見やすくなります

5. AtomでPlantUMLを書きながらliveプレビューってみる

ここまできたら早速使ってみます。
以前の記事で書いたplantUMLの内容まんまですが、こんな感じにクラス図を書いて sample.pumlという名前で保存します。

@startuml
scale 800 width
Class01 <|-- Class02
Class03 *-- Class04
Class05 o-- Class06
Class07 .. Class08
Class09 -- Class10
Class11 <|.. Class12
Class13 --> Class14
Class15 ..> Class16
Class17 ..|> Class18
Class19 <--* Class20
@enduml

肝心のliveプレビュー機能ですが説明にはこんな感じでショートカットが載ってます。

macでのliveプレビューのショートカットは、control + option + pです。
control + option + pしてみるとこんな感じで表示されます。

• control + option + pやる前
  
• control + option + pやった後
  

6. Atomのplantuml-viewerのliveタイミングを調整する

liveプレビューがliveすぎて重いそうなので、これも参考記事のまんまですがやってみます。
やることの概要としては、plantuml-viewerの処理がjsで書かれているのでsettimeoutを使ってlive間隔を直接編集します。

• plantuml-viewerのsetting画面を開いてView Codeを押します

• 新規に画面が開くのでlib/plantuml-viewer-view.jsを開きます

• liveプレビューする際に呼ばれるupdateImage()という関数の変わりとなる関数を作成します。
  PlantumlViewerViewというfunction定義があるのでその中の一番下に追加ですね。

function PlantumlViewerView (editor) {

  // 省略

  var updateImageTimerId = 0
  function queueUpdate () {
    if (updateImageTimerId) return
    updateImageTimerId = setTimeout(function () {
       updateImage()
       updateImageTimerId = 0
    }, 100)
  }
}

• lib/plantuml-viewer-view.js内に4カ所ほどupdateImage()がいる(201608現在)のでqueueUpdate()に置き換えます

// 省略
function PlantumlViewerView (editor) {
  ScrollView.call(this)

  // 省略

  function attached () {
    disposables = new CompositeDisposable()
    //updateImage()を置き換え
    queueUpdate()
    if (atom.config.get('plantuml-viewer.liveUpdate')) {
      disposables.add(editor.getBuffer().onDidChange(function () {
        if (loading) {
          waitingToLoad = true
          return
        }
        //updateImage()を置き換え
        queueUpdate()
      }))

  // 省略
  // あと2つくらいあるのでそっちも

これでめでたくliveプレビュー環境が整いました！！！

参考

• PlantUMLを自動変換してLiveプレビューしてくれるAtom拡張 PlantUML-Viewer がイイ！
• Atomプラグイン plantuml-viewer で大きなUMLを扱った場合の問題と対処法

おわり

参考記事をまんま参考にさせて頂きましたがやりたかったことができました！
pierre3のブログ さんに感謝感謝です＼(＾o＾)／

【git】submoduleを変更するときのメモ - git submodule sync

はじめに

gitでsubmoduleを変えたいときの殴り書きメモです。
各状況で使えるわけではないと思いますが、自分用なのであしからず。

こんな時

とあるリポジトリにsubmoduleを含んでいて
そのsubmodule側の挙動を確認とかデバッグとかしたいときなんかのケースです。

一時的にそのsubmoduleを自分のリポジトリにforkしてデバッグ仕込んで、とかやりたいですよね。

知ってたらたいしたことないんですが、
git submodule update というコマンドがあるために
名前からしてそれで更新できそうなので他の設定が違うんだと思い込んでハマりました。

やる

概要

リポジトリのurl（向き先）を変更したいときにやることは主に2つ

• .gitmodules を開いてurlを変更する
• git submodule syncを打つ

やってみる

上記のこんな時 のケースで、submoduleのリポジトリがそれぞれこんなだった場合です

• 元々設定されてる : git@github.com:hoge/hogehoge.git
• forkしたやつ : git@github.com:fuga/fugafuga.git

$ pwd
/path/to/メインリポジトリ

$ vi .gitmodules
---- vi編集 ----
[submodule "hogehoge"]
        path = hogehoge
        url = git@github.com:hoge/hogehoge.git
        ↓
        url = git@github.com:fuga/fugafuga.git
---------------

$ git submodule sync

終わり

変にgit submodule update でできそうな感じがあるので、
できると信じてハマって時間使うともったいですよね、というメモでした

【VirtualBox】VirtualBoxのlinuxで時間を合わせる - RequestTimeTooSkewedエラーでたのでntpdate ntp.nict.jpする

はじめに

どの環境でもって訳でもないので自分用のただの備忘録的なメモ

現象

とあるbatchやworkerを起動したら急にこんな感じのエラーでコケだしていた

RequestTimeTooSkewed: The difference between the request time and the current time is too large

携帯で今の時間を確認すると23:40:11。virtualboxのlinuxを確認するとこんな感じに

$ date
Tue Jun 28 23:15:31 JST 2016

結構遅れてる。。。。。 ということで時間を合わせることに。

やる

これはもう打つだけです

$ sudo ntpdate ntp.nict.jp
29 Jun 00:01:45 ntpdate[30732]: step time server xxx.xxx.xxx.xxx offset 951.221456 sec

$ date 
Wed Jun 29 00:01:49 JST 2016

# 携帯で時間をみると `00:01` 。合格

この辺りを参考に

• ntpdのmonlist機能を使ったDDoS攻撃の脆弱性を確認

補足

補足するまでもないんですがntpが使えなかったのでインストールもしました。
さらにyum installもできなかったので使えるようにするところから。。。
これはvirtualboxや環境によるのであしからず

リポジトリの設定を変えます。変えるファイルは /etc/yum.repos.d/CentOS-Base.repo
[base]と[updates]の2カ所、mirrorlistを使ってたところをbaseurlに変更

$ sudo vi /etc/yum.repos.d/CentOS-Base.repo
----vi編集----
①
#mirrorlist=http://mirrorlist.centos.org/?release=$releasever&arch=$basearch&repo=os
baseurl=http://mirror.centos.org/centos/$releasever/os/$basearch/
↓
mirrorlist=http://mirrorlist.centos.org/?release=$releasever&arch=$basearch&repo=os
#baseurl=http://mirror.centos.org/centos/$releasever/os/$basearch/

②
mirrorlist=http://mirrorlist.centos.org/?release=$releasever&arch=$basearch&repo=updates
#baseurl=http://mirror.centos.org/centos/$releasever/updates/$basearch/
↓
#mirrorlist=http://mirrorlist.centos.org/?release=$releasever&arch=$basearch&repo=updates
baseurl=http://mirror.centos.org/centos/$releasever/updates/$basearch/

-------------

この辺りを参考に

• yum install(search)できない対応メモ - イントラ内や内部リポジトリに向いてるyumを--enablerepoオプションを使って一時的に任意のリポジトリを参照してインストールする
• VirtualBox に CentOS7.0 をインストールして ssh ログイン + yum コマンドを使えるようにするまで

おわり

めでたしめでたし

【git】gitでリモートのブランチをcheckoutする

はじめに

タイトルのままですがちょくちょく忘れるのでメモ

忘れないようにコマンドまんま

# fetchする
git fetch

# 該当のブランチがあるかたしかめる
git branch -r

# （あれば）originのブランチを元にローカルにブランチを切る
git branch hoge_branch origin/hoge_branch

# チェックアウトする
git checkout hoge_branch 

# もしくはbranch + checkoutはオプションで
git checkout -b hoge_branch origin/hoge_branch

もっというと

しかし、上のようにちゃんとやらずとも（！？）、もっとはしょることもできます

# リモート情報の取得
$ git fetch

# checkoutする
$ git checkout hoge_branch

おわり

こんな簡単なことなのにいつも忘れてしまうので自分戒め晒しメモ

【Jenkins】さくらVPSでJenkinsでgitと連携してみるメモ① - インストールと初期の認証設定

はじめに

今更ながらちょっと試したいことがあったのでjenkinsを入れてみます。
さくらVPSに入れる前提で話しますが他でもだいたい同じ流れです。

アジェンダ

1. javaとJenkinsインストール
2. Jenkinsのサービス確認と認証設定
3. プラグインのアップデート

前提

$ cat /etc/redhat-release
CentOS release 6.5 (Final)

$ sudo /usr/sbin/apachectl -v
Server version: Apache/2.2.15 (Unix)
Server built:   Aug 13 2013 17:29:28

$ java -version
zsh: command not found: java

1. javaとJenkinsインストール

インストール

今回はyumで入れてしまうのでお手軽です。

# Javaのインストールの確認
# 念のためyumでインストール可能なやつを確認する
$ yum search java | grep openjdk                                                                                                                                                                                    [~ 21:32]
~
java-1.7.0-openjdk.x86_64 : OpenJDK Runtime Environment
java-1.7.0-openjdk-demo.x86_64 : OpenJDK Demos
java-1.7.0-openjdk-devel.x86_64 : OpenJDK Development Environment
java-1.7.0-openjdk-javadoc.noarch : OpenJDK API Documentation
java-1.7.0-openjdk-src.x86_64 : OpenJDK Source Bundle
java-1.8.0-openjdk.x86_64 : OpenJDK Runtime Environment
~

# javaインストール
$ sudo yum install java-1.7.0-openjdk

# jenkinsをインストール
$ sudo yum install jenkins

補足

jenkinsのインストールがコケる場合はyumリポジトリの追加が必要かもしれません

• 【Jenkins】Jenkinsをyumでインストールするときにリポジトリに追加する

確認

$ sudo /etc/init.d/jenkins status
jenkins は停止しています

$ sudo /etc/init.d/jenkins start
Starting Jenkins                                           [  OK  ]

2. jenkinsのサービス確認と認証設定

サービス確認

すでに起動しているのでサービスとして確認します。
http://[さくらvpsのip]:8080/ にアクセスしてこんな感じで表示されればokです。

補足

もしiptablesを設定している場合は8080ポートを解放してください

• さくらvpsの設定自分メモ - iptables②(パケットフィルタリング)
• http://tweeeety.hateblo.jp/entry/2014/11/07/000020)

認証設定

当たり前ですが、ipとポートを指定したらアクセスできた、
ということはこの状態では誰からでもアクセスも何でもできてしまいます。なので認証周りを設定します。

大きく下記の3点を行います

• ユーザの作成とログイン
• ユーザの作成を不可にする
• グローバルセキュリティの設定③ - 匿名ユーザと作成ユーザの権限設定

ユーザの作成とログイン

• 左メニューからJenkinsの管理を選択

• 表示されるメニューのグローバルセキュリティの設定を選択

• セキュリティ有効化にチェックします

• 項目が表示されるので下記のようにチェック

  • ユーザ情報 > jenkinsのユーザデータベースにチェック＆ユーザにサインアップを許可にチェック
  • 権限管理 > ログイン済みユーザに許可にチェック

• 保存をするとログインを求められるので アカウントを登録からアカウントを作成するとログイン状態になっています

ユーザの作成を不可にする

しかし、このままでは誰でもアカウントを作成できてしまうので
これ以上アカウントが作成できないように設定します。
設定する項目は先ほどと同じ場所です。

• 左メニューからJenkinsの管理を選択
• 表示されるメニューのグローバルセキュリティの設定を選択
• 今度は「ユーザ情報 > ユーザにサインアップを許可」のチェックを外します
  • こうすることで新規ユーザの作成ができなくなります

グローバルセキュリティの設定③ - 匿名ユーザと作成ユーザの権限設定

ここで試しにログアウトしてみるとこんな感じです。　　

つまり、開発者、ビルド履歴などは見えてしまうためこれらの項目にも認証をかけます。
設定場所も先ほどと同じらへんです。

• 左メニューからJenkinsの管理を選択
• 表示されるメニューのグローバルセキュリティの設定を選択

• 今度は「権限管理 > 行列による権限管理」にチェックします

  • また匿名ユーザの行にあるチェックをすべて外します

• 次に追加するユーザ/グループに先ほど作成したユーザを追加します

  • 表の匿名ユーザの下にユーザが追加されるので必ずすべての権限にチェックします！！！！！！！！！！！！！！
  • チェックしないとせっかく作成したユーザで何もできなくなりますw

ログアウト確認

ログアウトしてこんな感じになっていればokです

3. プラグインのアップデート

• これはあれば、程度ですが認証情報を選択してプラグインの管理の下に
  （アップデートあり）の表示がある場合、一応アップデートしておきます。
  

• 手順としては簡単で、すべてにチェックしてダウンロードして再起動後にインストールを押すだけです。

• 次の画面でインストール完了後、ジョブがなければJenkinsを再起動するにチェックすれば
  Jenkinsはダウンロード後に勝手に再起動するので待ちましょう

参考

改めて導入するにあたり、下記の記事を参考にさせて頂きました！thx！

• JenkinsでGitHubのプッシュ時に自動デプロイする
• JenkinsをCentOS6にインストールしてユーザー認証設定

まとめ

記事が無駄に長くなりそうなので適当なところで切りました。
画像が多いので長く見えますがここまでは一瞬でできる内容です＼(＾o＾)／

【Jenkins】Jenkinsをyumでインストールするときにリポジトリに追加する

はじめに

まんまですが yum install jenkins な事をしたいのですが
そのまんまではyumリポジトリにjenkinsが見えないので追加してから行います。

というだけの話し。

まんま打ってみる

こんな感じで怒られます

$ sudo yum install jenkins                                                                                                                                                                                          [~ 21:36]
Loaded plugins: fastestmirror, security
Loading mirror speeds from cached hostfile
 * epel: ftp.kddilabs.jp
 * rpmforge: ftp.riken.jp
Setting up Install Process
No package jenkins available.
Error: Nothing to do

yumリポジトリに追加します

# yumリポジトリ情報を確認
$ ls -l /etc/yum.repos.d/
-rw-r--r--. 1 root root 1971  3月 28 13:00 2012 CentOS-Base.repo
-rw-r--r--. 1 root root 1926 12月  9 12:05 2011 CentOS-Base.repo.orig
-rw-r--r--  1 root root  638 12月  1 09:07 2013 CentOS-Debuginfo.repo
-rw-r--r--  1 root root  630 12月  1 09:07 2013 CentOS-Media.repo
-rw-r--r--  1 root root 4528 12月  1 09:07 2013 CentOS-Vault.repo
-rw-r--r--  1 root root 1056 11月  5 12:52 2012 epel-testing.repo
-rw-r--r--  1 root root  957 11月  5 12:52 2012 epel.repo
-rw-r--r--  1 root root  739 11月 13 12:55 2010 mirrors-rpmforge
-rw-r--r--  1 root root  717 11月 13 12:55 2010 mirrors-rpmforge-extras
-rw-r--r--  1 root root  728 11月 13 12:55 2010 mirrors-rpmforge-testing
-rw-r--r--  1 root root 1113 11月 13 12:55 2010 rpmforge.repo
                                                    

$ sudo wget -O /etc/yum.repos.d/jenkins.repo http://pkg.jenkins-ci.org/redhat/jenkins.repo
$ sudo rpm --import http://pkg.jenkins-ci.org/redhat/jenkins-ci.org.key

# 確認
$ ls -l /etc/yum.repos.d/j*
-rw-r--r-- 1 root root 75  3月 28 12:30 2016 /etc/yum.repos.d/jenkins.repo

# インストールしてみる
$ sudo yum install jenkins

終わり

めでたしめでたし

【mac】TinyPNGで使われているpngquant入れてpng圧縮してみるメモ - for mac

はじめに

pngquantをlinuxなサーバで使っていたのですがmacローカルな環境でも使いたくなったので入れたメモ
基本的な使い方などはlinuxのほうと同じです

• TinyPNGで使われているpngquant入れてpng圧縮してみるメモ - for centos

入れる

homebrewから入れます。homebrewからって場合は以下を参考に。

• Mac OS XにHomebrewインストール。command line developer tools入れたり使い方メモったり(install、update、upgradeなど)

# インストール
$ brew install pngquant

# 確認
$ pngquant --version
2.4.1 (April 2015)

簡単ですね！

補足

gitリポジトリからも入れられるようなのでその場合は下記で

$ git clone git://github.com/pornel/pngquant.git

使ってみる

# 圧縮前に確認
$ ls -al ~/path/to/pngがあるディレクトリ
-rw-r--r--@ 1 hoge  hoge  613641  3 17 16:56 圧縮したい.png

# 圧縮する
$ pngquant ~/path/to/pngがあるディレクトリ/圧縮したい.png

# 圧縮されたファイルは`-fs8`と入ったファイルが生成される
$ ls -al ~/path/to/pngがあるディレクトリ
total 1528
drwxr-xr-x  4 hoge  hoge     136  3 17 17:07 .
drwxr-xr-x  5 hoge  hoge     170  3 17 16:57 ..
-rw-r--r--  1 hoge  hoge  164856  3 17 17:07 圧縮したい-fs8.png
-rw-r--r--@ 1 hoge  hoge  613641  3 17 16:56 圧縮したい.png

613641から164856になったので1/4くらいにはなりましたね。

終わり

ローカルであればwebのTinyPNGでも良いんですが、いちいち開くのもめんどうだなーという事で入れてみました！
さくっとできて快適です＼(＾o＾)／