MacにJenkinsをインストール

CIについて触れてみようと思いMacにJenkinsをインストールしたので、その時のインストール手順をまとめておきます。

Jenkinsをインストール

今回はHomebrewを利用してインストールしました。

Homebrewのアップデート

最初にHomebrewのFomulaを最新の状態にアップデートします。

$ brew update 

インストール

アップデートが完了したら、jenkinsをインストールします。

$ brew install jenkins

バージョンの確認

インストールが完了したら、以下のコマンドでjenkinsが正しくインストールされているか確認します。

$ jenkins --version
2.7

Jenkinsの起動

ターミナル上で以下のコマンドを入力することでjenkinsが起動します。
起動時に色々と情報が表示されますが、最終的にJenkins is fully up and runningと表示されたら、起動に成功しています。

$ jenkins

他の記事ではターミナル上から起動するために、以下のように書いている記事もあります。
どのバージョンから大丈夫なのか分かりませんが、バージョン2.7ではjenkinsコマンドのみで起動が出来ました。

$ java -jar /usr/local/opt/jenkins/libexec/jenkins.war

Jenkinsの初期設定

起動後、http://localhost:8080/にアクセスすれば、以下の初期設定画面が表示されます。

ロックの解除

Jenkinsの初期設定を安全に進めるために、起動時に管理者の確認があります。
/Users/<ユーザ名>/.jenkins/secrets/initialAdminPassworに記載されているパスワードをAdministrator passwordに入力し、continueをクリックします。

$ cat /Users/<ユーザ名>/.jenkins/secrets/initialAdminPassword | pbcopy

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

続いてプラグインのインストール画面に移動します。
特にこだわりが無い場合は、Install suggested pluginsを選択すれば大丈夫です。

管理者権限を持つユーザの作成

最後に管理者権限のユーザを作成します。
各項目に必要な情報を入力してcreate userをクリックします。

インストールの完了

設定の完了後にログイン画面が表示されるので、初期設定で登録したユーザでログインをして Jenkinsのトップ画面が表示されればJenkinsのインストールが完了です。

ブログカードを自動生成するWebAPIを作ってみた

チャットワークのメッセージにブログカードを表示するChrome拡張を作りたかったので、URLからブログカードのHTMLタグを生成してくれるWebAPIを作りました。

https://github.com/t-yng/blogcard-generator

ブログカードのCSSについては【ブログカード風】シンプルに記事をシェアするブックマークレットを作りました のCSSを利用させて頂きました。

使い方

以下のAPIエンドポイントにリクエストを送信すれば、HTMLタグを返してくれます。

https://blogcard-generator.herokuapp.com/generator.php?url=<ブログカードを取得したいページのURL>

この記事のブログカードを取得した場合は以下のようなレスポンスが返ってきます。

https://blogcard-generator.herokuapp.com/generator.php?url=http://yng.hatenablog.jp/entry/2016/06/02/230154

{"html":"<div style='width:100%;max-width:500px;margin:0 0 20px 0;background:#fff;border:1px solid#ccc;border-radius:5px;box-sizing:border-box;padding:12px;'><div style='width:100px;height:100px;float:right;margin:0 0 10px 10px;padding:0;position:relative;overflow:hidden;'><a href='http:\/\/sakueji.com\/blogcard-bookmarklet\/'style='position:absolute;width:1000%;left:50%;margin:0 0 0 -500%;text-align:center;'><img src='https:\/\/blog.st-hatena.com\/images\/theme\/og-image-1500.png'style='width:auto;height:100px;margin:0;vertical-align:middle;display:inline;'><\/a><\/div><p style='margin:0;'><a href='http:\/\/yng.hatenablog.jp\/entry\/2016\/06\/02\/230154'style='color:#333;font-weight:bold;text-decoration:none;font-size:17px;margin:0 0 10px 0;line-height:1.5;'>\u30d6\u30ed\u30b0\u30ab\u30fc\u30c9\u3092\u81ea\u52d5\u751f\u6210\u3059\u308bWebAPI\u3092\u4f5c\u3063\u3066\u307f\u305f - \u306b\u308f\u3068\u308a\u30d7\u30ed\u30b0\u30e9\u30de\u30fc\u306e\u5099\u5fd8\u9332<\/a><\/p><p style='margin:0;color:#666;font-size:11px;line-height:1.5;'>\u30c1\u30e3\u30c3\u30c8\u30ef\u30fc\u30af\u306e\u30e1\u30c3\u30bb\u30fc\u30b8\u306b\u30d6\u30ed\u30b0\u30ab\u30fc\u30c9\u3092\u8868\u793a\u3059\u308bChrome\u62e1\u5f35\u3092\u4f5c\u308a\u305f\u304b\u3063\u305f\u306e\u3067\u3001URL\u304b\u3089\u30d6\u30ed\u30b0\u30ab\u30fc\u30c9\u306eHTML\u30bf\u30b0\u3092\u751f\u6210\u3057\u3066\u304f\u308c\u308bWebAPI\u3092\u4f5c\u308a\u307e\u3057\u305f\u3002 \u4ee5\u4e0b\u306eAPI\u30a8\u30f3\u30c9\u30dd\u30a4\u30f3\u30c8\u306b\u30ea\u30af\u30a8\u30b9\u30c8\u3092\u9001\u4fe1\u3059\u308c\u3070\u3001HTML\u30bf\u30b0\u3092\u8fd4\u3057\u3066\u304f\u308c\u307e\u3059\u3002 https:\/\/blogcard-generator.herokuapp.com\/generator.php?url=<\u30d6\u30ed\u30b0\u30ab\u30fc\u30c9\u3092\u53d6\u5f97\u3057\u305f\u3044\u30da\u30fc\u30b8\u306eURL><\/p><div style='border-top:1px solid#eee;clear:both;margin:10px 0 0 0;padding:0;'><p style='color:#999;margin:3px 0 0 0;font-size:11px;'><img src='http:\/\/favicon.hatena.ne.jp\/?url=http:\/\/yng.hatenablog.jp\/entry\/2016\/06\/02\/230154'style='margin:0 5px 0 0;padding:0;border:none;display:inline;vertical-align:middle;'>yng.hatenablog.jp<img src='http:\/\/b.hatena.ne.jp\/entry\/image\/http:\/\/yng.hatenablog.jp\/entry\/2016\/06\/02\/230154'style='margin:0 0 0 5px;padding:0;border:none;display:inline;vertical-align:middle;'><\/p><\/div><\/div>"}

取得したHTMLタグを埋め込んでブラウザ上で表示した場合は下のように表示されます。

動的型付けと型推論の違い

動的型付けと型推論の違いについてイマイチ理解していなかったので簡単に調べてみました。

動的型付けは動的型付け言語における言語機能であり、実行時に型が決定されます。
実行時に値に応じて動的に型が決定されるため、下記のように1つの変数に対して異なる型を代入することが可能となります。

/* JavaScriptの場合 */
var x = 100  // 動的型付けにより、変数xの型が数値型に決定する
x = "Hello World !"  // 型が動的に決定されるので、エラーがにならず変数xの型が文字列型になる

console.log(x)  // 「Hello World !」が表示される

それに対して、型推論とは静的型付け言語における言語機能であり、明示的に型を記述しなくてもコンパイラが自動的に型を決定してくれる機能です。
あくまでコンパイル時に型が決定されるため、型推論を利用しても動的型付け言語のように、1つの変数に異なる型の値を代入すことは出来ません。

/* Scalaの場合 */
var x = 100  // Int型を指定しなくても、代入される値からコンパイラが変数xの型を自動で決定する(型推論)
x = "Hello World !"   // 型推論によりxがInt型に決定されているため、Int型以外を代入するとコンパイルエラーが発生

println(x) // コンパイルエラーのため実行できない

VS Code の設定言語を変更する

Visual Studio Code の正式版が遂にリリースされました！
正式版にアップデートされて、自動的にシステムの設定言語がエディタの設定言語に
適用されるようになりました。
ただ、日本語設定だとコマンドパレットの入力まで日本語になってしまい、面倒なので
英語に戻したいと思います。
変更方法は、公式ドキュメント上にあるこちらのページを参考にしました。

設定可能な言語

現在サポートしている言語は10言語となっており、一覧は下記のようになっています。

Display Language	Locale
English (US)	en-US
Simplified Chinese	zh-CN
Traditional Chinese	zh-TW
French	fr
German	de
Italian	it
Japanese	ja
Korean	ko
Russian	ru
Spanish	es

設定言語の変更

コマンドパレット（F1）上で、"言語を構成する" （Configure Language）と入力します。
local.json（言語設定ファイル）がユーザのVS Code ディレクトリに生成されるので、下記のように ファイルを記述します。

{
    // VSCode の表示言語を定義します。
    // サポートされている言語の一覧については、http://go.microsoft.com/fwlink/?LinkId=761051 をご覧ください。
    // VSCode の再起動に必要な値を変更します。
    "locale":"en-US"
}

上記を記述後に、VS Code を再起動すれば設定した言語が反映されます。

一時的に設定言語を変更

ターミナル上から下記のコマンドを実行することで、一時的に設定言語を変更した状態でエディタを起動することもできます。

 code . --locale=en-US 

それでは、皆さん楽しいVS Code ライフを！

Macのターミナルでgitの補完を有効にする

Windowsでgitを利用する場合、Git bashを利用してCUIによるgit操作を行います。
Git bash ではgitのコマンドやbranch名がtabで補完されるため非常に便利です。
そこで、下記の記事を参考にmacのターミナル上でも補完機能を利用出来るようにしてみました。
http://qiita.com/koyopro/items/3fce94537df2be6247a3

ファイルの確認

補完機能を利用するためにはgit-prompt.shとgit-completion.bashの2つのファイルが必要になります。
下記のコマンドを実行して、上記のファイルが存在する場合は.bashrcの設定を行うだけで大丈夫です。
(Homeblewを利用してgitをインストールしている場合には、すでにファイルが存在するらしいです。)

$ ls /usr/local/etc/bash_completion.d/

git-prompt.shとgit-completion.bashをダウンロード

下記のページからgit-prompt.shとgit-completion.bashをダウンロードします。
https://github.com/git/git/tree/master/contrib/completion
ダウンロードしたファイルは/usr/local/etc/bash_completion.d/に配置します。

$ cd cd /usr/local/etc/bash_completion.d/
$ curl https://raw.githubusercontent.com/git/git/master/contrib/completion/git-completion.bash > git-completion.bash
$ curl https://raw.githubusercontent.com/git/git/master/contrib/completion/git-prompt.sh > git-prompt.sh

.bashrcを設定

gitの補完機能を有効化するために、.bashrcに下記の記述を追記します。

source /usr/local/etc/bash_completion.d/git-prompt.sh
source /usr/local/etc/bash_completion.d/git-completion.bash

ブランチ名を表示したい場合は、下記の記述も追記します。

GIT_PS1_SHOWDIRTYSTATE=true
export PS1='\h\[\033[00m\]:\W\[\033[31m\]$(__git_ps1 [%s])\[\033[00m\]\$ '

最後に.bashrcを反映させます。

$ source ~/.bashrc

Visual Studio Code でEmacsのリージョン選択できるExtensionを作ってみた

Visual Studio Code でEmacsのリージョン選択を行えるextensionを作ってみました。
https://github.com/t-yng/vscode-emacs-region
作り方については、 こちらのEXTENSIONSのページを参考にしました。
[開発環境]
OS : OS X El Capitan

プロジェクトの雛形を作成

雛形の生成にはYeomanとgenerator-code(Yoemanにおけるvscodeのextension生成ツール)を利用します。
Yeomanとはアプリケーション開発における、雛形の作成やビルドなどの作業をサポートしてくれる便利ツールです。
Yeoman入門(第一部、yoを使う) - from scratch

最初にYeomanとgenerator-codeをインストールします

$ npm install -g yo generator-code

続いてextensionの雛形を生成します。今回は、TypeScriptで生成します。

$ yo code

extensionの実行

生成した雛形を一度実行してみます。

• Visual Studio Code を起動して、「File」->「Open」から生成したextensionのディレクトリを選択します。
• F5を押すとextensionが実行され、新たにVS Code が起動します。
• F1を押してコマンドパレットを表示して、「 Hello World」と入力すれば上の方に"Hello World"と表示されます。

リージョン選択の処理を実装

処理はextension.tsに記述していきます。
activate()関数は後述する package.json で設定したタイミングでextensionが有効になった時に一度だけ呼ばれる関数です。
今回の実装では、独自のカーソル移動コマンドを登録しモードの状態に応じてVS Code の内部コマンドを実行しています。

'use strict';
// The module 'vscode' contains the VS Code extensibility API
// Import the module and reference it with the alias vscode in your code below
import * as vscode from 'vscode';

var inRegionMode: boolean = false;

// this method is called when your extension is activated
// your extension is activated the very first time the command is executed
export function activate(context: vscode.ExtensionContext) {

    // リージョン選択モードを開始
    context.subscriptions.push(vscode.commands.registerCommand('emacs.startRegionMode', ()=>{
        removeSelection();
        inRegionMode = true;
    }));

    // リージョン選択モードを終了
    context.subscriptions.push(vscode.commands.registerCommand('emacs.exitRegionMode', ()=>{
        if(!inRegionMode){
            return ;
        }
        removeSelection();
        inRegionMode = false;
    }));

    var cursorMoves : string[] = ["cursorUp", "cursorDown", "cursorLeft", "cursorRight"];

    // リージョン選択モードなら、選択コマンドを実行
    cursorMoves.forEach((cursormove) => {
        context.subscriptions.push(vscode.commands.registerCommand("emacs."+cursormove, ()=>{
            vscode.commands.executeCommand(inRegionMode? cursormove+"Select" : cursormove);
        }));
    });
}

function removeSelection(){
    var pos: vscode.Position = vscode.window.activeTextEditor.selection.active;
    vscode.window.activeTextEditor.selection = new vscode.Selection(pos, pos);
}

// this method is called when your extension is deactivated
export function deactivate() {
}

package.jsonを設定

package.json は extension の設定を記述したマニフェストファイルです。詳細はこちら 書いてあります。
"contributes"の"keybindings"にカーソル移動やリージョン選択モード開始のショートカットを設定しています。
因みに、ここで設定したキーバインドは「Prefereces」->「Keyboard Shortcus」で確認できるショートカット一覧にも表示されます。

{
    "name": "emacs-region",
    "displayName": "emacs_region",
    "description": "this extension provides region selection like emacs",
    "version": "1.0.0",
    "publisher": "t-yng",
    "engines": {
        "vscode": "^0.10.6"
    },
    "categories": [
        "Other"
    ],
    "activationEvents": [
        "*"
    ],
    "main": "./out/src/extension",
    "contributes": {
        "keybindings": [
            {
                "key": "ctrl+F",
                "command": "emacs.cursorRight",
                "when": "editorTextFocus"
            },
                        {
                "key": "ctrl+B",
                "command": "emacs.cursorLeft",
                "when": "editorTextFocus"
            },
            {
                "key": "ctrl+P",
                "command": "emacs.cursorUp",
                "when": "editorTextFocus"
            },
            {
                "key": "ctrl+N",
                "command": "emacs.cursorDown",
                "when": "editorTextFocus"
            },
            {
                "key": "ctrl+space",
                "command": "emacs.startRegionMode",
                "when": "editorTextFocus"
            },
            {
                "key": "ctrl+G",
                "command": "emacs.exitRegionMode",
                "when": "editorTextFocus"
            }
        ]
    },
    "scripts": {
        "vscode:prepublish": "node ./node_modules/vscode/bin/compile",
        "compile": "node ./node_modules/vscode/bin/compile -watch -p ./",
        "postinstall": "node ./node_modules/vscode/bin/install"
    },
    "devDependencies": {
        "typescript": "^1.7.5",
        "vscode": "^0.11.0"
    }
}

VS Code に作成したextension をインストール

~/.vscode/extensions 以下に作成したextensionのディレクトリを配置すれば
VS Code 上で利用できるようになります。

さいごに

Visual Studio Cdoe はDocumentがしっかりしていて、分りやすいです。
まだベータ版ということになっていますが、個人的に Sublime Text で感じていた不満点が解消されて、現時点で非常に使いやすいです。
このまま開発が続いて欲しいですね！

Mac に Visual Studio Code をインストール

Visual Studio Code が良いらしい！と聞いたので、Macにインストールした際の備忘録です。

インストール手順

1. こちらからzipファイルをダウンロード
2. ダウンロードしたzipファイルを解凍して、Visual Studio Code.app をアプリケーションディレクトリに移動

ターミナル上からVisual Studio Code を起動

公式ページにやり方が書いてあります。
(2016年4月19日 追記)
（version 1.0.0から方法が変わりました。)
コマンドパレットを起動 (F1) して、shell commandと入力します。
候補一覧で出てきた中のShell Command: Install 'code' command in PATHを
実行し、 再起動すれば$PATHにパスが自動で追加されます。

/.bash_profileに下記の記述を追記してsource ~/.bash_profileを実行

function code () { VSCODE_CWD="$PWD" open -n -b "com.microsoft.VSCode" --args "$@"; }

version 0.10.10では上記の設定をしていた場合、起動時にPATHを通すため.bash_profileの内容を削除するように通知されます。
ターミナル上でcodeと入力すれば、 Visual Studio Code が起動します。

次回からは実際に触っていきたいと思います。