読者です 読者をやめる 読者になる 読者になる

にわとりプログラマーの備忘録

覚えたことをすぐ忘れてしまう、自分のための備忘録ブログです。

ブログカードを自動生成する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タグを埋め込んでブラウザ上で表示した場合は下のように表示されます。 f:id:t-yng:20160602231740p:plain

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

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

動的型付けは動的型付け言語における言語機能であり、実行時に型が決定されます。
実行時に値に応じて動的に型が決定されるため、下記のように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 の正式版が遂にリリースされました!
正式版にアップデートされて、自動的にシステムの設定言語がエディタの設定言語に
適用されるようになりました。
ただ、日本語設定だとコマンドパレットの入力まで日本語になってしまい、面倒なので
英語に戻したいと思います。
f:id:t-yng:20160417095548p:plain 変更方法は、公式ドキュメント上にあるこちらのページを参考にしました。

設定可能な言語

現在サポートしている言語は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 を再起動すれば設定した言語が反映されます。

f:id:t-yng:20160417095604p:plain

一時的に設定言語を変更

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

 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.shgit-completion.bashの2つのファイルが必要になります。
下記のコマンドを実行して、上記のファイルが存在する場合は.bashrcの設定を行うだけで大丈夫です。
(Homeblewを利用してgitをインストールしている場合には、すでにファイルが存在するらしいです。)

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

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

下記のページからgit-prompt.shgit-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"と表示されます。

f:id:t-yng:20160306104340p:plain

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

処理は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 が起動します。

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

OS X El Capitan で Xcode がインストール出来ない問題を解決

Xcodeをインストールしようとした際に、「インストール中」の表示が出たまま止まってしまい インストールが出来ませんでした。

調べてみたところ、こちらに書かれた方法を試した ら無事インストール出来ました。

解決方法は、アクティビティモニタ」で「iTunesHelper」のプロセスを終了する  だけです。

アクティビティモニタを開く

アクティビティモニタ」は、 "アプリケーション" > "ユーティリティ" のディレクトリの中にあります。
Finderで開いていけば、分かると思います。

f:id:t-yng:20160522005604p:plain

iTunesHelperのプロセスを終了する

アクティビティモニタ」を開いたら、右上の検索窓で"iTunes"と入力すれば、稼働中の"iTunesHelper"が表示されます。

f:id:t-yng:20160522010650p:plain

表示された"iTunesHelper"を選択して、左上のバツボタンをクリックすれば、プロセスを終了させることが出来ます。

f:id:t-yng:20160522010700p:plain

しかし、なぜ上記のプロセスが動いているだけでインストール出来ないのだろうか?