Zen2Han

Zen2Han | Codogue

入力された文字列の全角アルファベット・数字を半角英数字に変換するだけのアプリです。 設定項目がいくつか用意されています。

• 大文字/小文字を変換する : アルファベット大文字/小文字の変換を行います
• 数字を変換する : 数字の変換を行います
• スペースを変換する : 全角スペースを半角スペースに変換します
• 記号を変換する : 記号 (-^\@;:!”#$%&'()=|`{+*}<>?_) の変換を行います

こんなときに

• 原稿が送られてきたけど全角半角混じり過ぎで置換が面倒
• ソースコードに全角スペースを忍ばせる嫌がらせを受けている
• 全角英数字を一文字残らず駆逐したい

煩わしい置換作業が、テキストをコピーして入力エリアに貼り付けて変換ボタンを押すだけの簡単なお仕事へ。 とはいえ、CLIやgruntタスクにした方が使い勝手はよさそうですが、 似たようなものがすでにありそうな気はします。 なければまた考えます。

おまけ

今回はエディタ部分にCodeMirrorを使ってみたのですが、 ついでに AsciiTree のエディタも差し替えてみました。

それから広告は邪魔なので下の方に移動させました。

1. Gruntってなに
2. Gruntを導入する
3. 使ってみよう
4. どんなタスクがあるの？
5. その他Gruntの魅力
6. まとめ

Grunt ってなに

• GRUNT: The JavaScript Task Runner

Gruntはnode.jsベースで作られたタスクベースのコマンドラインビルドツールです。

ビルドツールってなに

ビルドは、ソースファイル群を元にして、実行出来る成果物を生成するプロセスの事を指します。

cf) ビルド (ソフトウェア) – Wikipedia

鍋に鶏と野菜とコンソメを入れて煮込んだらポトフが出来るとして、 鍋の役割を担ってくれるのがビルドツールです。（そんな認識であっているかな？） レシピを設定しておくことが出来るので、いつでもすぐに美味しいポトフがお楽しみ頂けます。

具体的には、Web制作では主にJavaScriptファイルを結合・圧縮したり、 Less/Sass/Stylus等のCSSプリコンパイラの結果を生成したり、 画像の最適化などを行い、最終的に動作するWebページにしていきます。

Gruntを導入する

インストール

まずはGruntを導入してみます。node.jsベースなのでまず node.jsをインストールし、

$ npm install -g grunt-cli

等とします。環境によってはsudo等が必要です。

grunt-cli はローカルにインストールされたgruntを呼び出すだけの係の人なので、 別途gruntも入れておく必要があります。プロジェクトルートか、あるいはその親ディレクトリにインストールしておきましょう。

$ npm install grunt

使ってみよう

Gruntfile.js

プロジェクトディレクトリに Gruntfile.js ファイルを用意して設定を記述し、 そのディレクトリで grunt コマンドを実行するとビルドが始まります。

Gruntfile.js の中身は、例えば次のようになります。

module.exports = function(grunt){

    // `loadnpmTasks`で使用したいタスクを読み込んでおく
    grunt.loadNpmTasks("grunt-contrib-uglify");

    // `initConfig` で基本設定
    grunt.initConfig({
        uglify : {
            dist : {
                src : ["assets/js/script.js"],
                dest : "assets/js/script.min.js"
            }
        }
    });

    // `registerTask` でタスクに名前をつける
    // "default" でデフォルトのタスクを設定
    grunt.registerTask("default", ["uglify"]);

};

タスクについて

Gruntに命令する処理を「タスク」と呼びます。

上の例では”uglify”というタスクに、”dist”という作業を任せています。 “uglify”はuglify.js を使用してJavaScriptの圧縮を行なってくれるタスクで、 “src” にあるファイルリストをひとまとめにして圧縮した結果を “dest” のファイルに保存します。

タスクははじめから入ってるわけではないので、 使いたい物を都度インストールしましょう。

$ npm install grunt-contrib-uglify

ビルドの実行

上の例ではデフォルトのタスクにuglifyが設定されているので、引数なしで

$ grunt

とすればタスクが実行され、assets/js/script.js を圧縮した結果が assets/js/script.min.js として保存されます。

タスクを指定して実行したい場合は、引数にタスクの名前を渡します。

$ grunt uglify # <= uglifyタスクを実行
$ grunt uglify:dist # <= minタスクのdistという名前の作業を実行

どんなタスクがあるの？

以下が代表的だと思しきプラグインです。 （”contrib” とついている物は公式のものです。） 使いたい物を npm install でインストールし、 loadNpmTasks で読み込んで使用しましょう。

• grunt-contrib-concat – ファイルを結合します
• grunt-contrib-uglify – JavaScriptファイルを圧縮します
• grunt-contrib-cssmin – CSSファイルを圧縮します
• grunt-contrib-watch – ファイルの更新を監視して任意のタスクを実行します
• grunt-contrib-copy – ファイルやディレクトリをコピーします
• grunt-contrib-clean – ファイルやディレクトリを削除します

具体的な設定例等は、各リポジトリのREADMEをご覧ください。 また、その他にも多くのタスクがあるので使えそうな物があったらピックアップしてみるといいでしょう。

• Plugins – Grunt: The JavaScript Task Runner

その他Gruntの魅力

なんといっても、JavaScriptベースである為にプラグイン開発が非常に身近にある点だと思います。

cf) Creating tasks – Grunt: The JavaScript Task Runner

JavaScriptに心得のある人ならば、自分が使いやすいようなタスク・プラグインを自前で開発して、 自分好みの開発環境を構築していく事が出来ます。 また、その為に便利なインターフェイスも十分整備されています。 有用なプラグインが書けたら、npmにパブリッシュしておけばいつでも使えますね。

まさにnode様様といったところです。

まとめ

Grunt の概要をざっくり紹介しました。

これだけではそこまで有用と思われないかもしれませんが、 多くのコーダーさんにとって威力を発揮するのは、やはりCSSプリコンパイラのビルドだと思います。 後編ではそのあたりを紹介してみます。

これはなに？

• CoDogue – ちょこざいなツール格納庫

「CoDogue」は「コドーグ」と読みます。
タイトルどおり、ちょこざいなツールを格納していくサイトです。

ちょこざいなツールは各地にあると思いますが、
1サイトにまとまっていたら便利なのではないかと思い作ってみました。
まだ2つしかツールはございませんが、じわじわと増やしていくつもり。

初期メンバーを軽く紹介など。

MkPasswd

そんまんまです。パスワードを生成します。
使う文字種と文字列の長さ、生成する数を指定できます。
オマケ機能として、テキスト形式でダウンロードできます。

TsvTo

TSV形式のテキストデータを様々な形式にコンバートするツール。
以下の形式に対応。

• JSON
• XML
• PHP array
• HTML Table

例えば、ExcelやGoogleドキュメントのスプレッドシート上のデータをコピーして、
それをペーストしてコンバートしたりして使います。
数値とブール値ぐらいはそれっぽくしてくれます。

ご要望、不具合等ございましたら是非に。

autocmplpop.vimを導入

AutoComplPop – Automatically opens popup menu for completions : vim online

デフォルトのままのVimでは、やの後に、
, とする事で入力候補をポップアップで表示させる事が出来ます
…が、ちょっとまどろっこしい。

これを自動的にポップアップしてくれるようにしてくれるのが
このAutoComplPopというプラグインです。
導入方法はディレクトリにコピーするだけなので割愛。

尚、当方のUbuntu環境ではl9.vimも必要とされました。
うまく動かなかったら一緒に導入してやりましょう。

L9 – Vim-script library : vim online

導入後の設定

以下が、導入後の設定を極めて分かりやすく紹介してくれている記事。

autocomplpop.vimでリアルタイムにキーワード補完 – ナレッジエース

以下、リンク先の記事より拝借・抜粋させて頂きます。

ポップアップ中でもEnterキーで候補決定しない様に設定

候補を無視して改行を入力したい場合もあるので、
ポップアップ中のEnterキーで決定しないようにします。
修正箇所は、autoload/acp.vimの192行目付近。

if pumvisible()
    " a command to restore to original text and select the first match
    return "\<C-p>"
endif

これだとEnterでポップアップが消えるだけで、その時はまだ改行は挿入されません。
私はこっちのほうが使いやすいのですが、改行を挿入したい場合はvimrcに下記を追記。

inoremap <expr> <CR> pumvisible() ? "\<C-y>\<CR>" : "\<CR>"

他にもTabで候補を巡回する為の設定等も掲載されていましたが、
私は無い方が使いやすかったので、割愛致します。詳しくはリンク先で！

『オプション ‘omnifunc’ は設定されていません』

…なんていうエラーが吐かれた場合の対処について。

当方の環境では挿入モードで「<」を入力中に上記のエラーが吐かれました。
omnifuncというのはオムニ補完、つまり入力補完のポップアップの事らしく、
これを設定してあげれば黙るかな？というわけで設定してみました。

setlocal omnifunc=syntaxcomplete#Complete

無事静かになってくれました。
参考：Ubuntu日本語フォーラム / vim autocomplpop エラーについて

ついでなのでPHPの辞書を突っ込んでおこう

異常に関数の多いPHPこそ入力補完が役に立ちますね。
辞書ファイルはただ改行で候補を連ねるだけなので、簡単に作成出来ます。

参考：Vim で PHP 関数の辞書を作成する方法についてのメモ

上記リンクより抜粋。多謝！
こちらのコードを走らせる事で辞書ファイルを生成出来ます。

<?php
$keywords = array(
    'if', 'else', 'elseif', 'endif', 'while', 'endwhile', 'do', 'as', 'for', 'endfor', 'foreach', 'endforeach',
    'break', 'continue', 'switch', 'endswitch', 'case', 'default', 'declare', 'enddeclare',
    'try', 'catch', 'return', 'exit', 'const', 'class', 'function',
    'require', 'include', 'require_once', 'include_once',
    'abstract', 'final', 'interface', 'private', 'protected', 'public', 'static',
    '__LINE__', '__FILE__', '__DIR__', '__FUNCTION__', '__CLASS__', '__METHOD__', '__NAMESPACE__'
);
$functions  = function_exists( 'get_defined_functions'   ) ? get_defined_functions()   : array();
$constants  = function_exists( 'get_defined_constants'   ) ? get_defined_constants()   : array();
$interfaces = function_exists( 'get_declared_interfaces' ) ? get_declared_interfaces() : array();
$classes    = function_exists( 'get_declared_classes'   ) ? get_declared_classes()  : array();

$arrays = array_merge(
    $keywords,
    $functions['internal'],
//  array_keys( $constants ),   // 定数を補完したい場合はこの行を有効にする
    $interfaces,
    $classes
);
sort( $arrays );
$arrays = array_unique( $arrays );
echo implode( "\n", $arrays );

生成した辞書ファイルをvimrcで登録しておけば完了です。

autocmd FileType php :set dictionary=~/.vim/dict/php.dict

Windowsの場合は下記のような感じ。
“$VIM”はgVim.exeがインストールされているパスです。

autocmd FileType php :set dictionary=$VIM/vimfiles/dict/php.dict

辞書は必要に応じて追加していきましょう。
ActionScriptなんかも欲しいなぁ…

ひとまずこんな感じで、Win/Linux共にまともに動いてくれています。
オムニ補完はバッファの中身のみならず、
辞書を設定しておけば辞書内からも候補を表示してくれる優れもの。
Linxではパスの入力もこれでかなり楽になりますね。

ノートでのコーディングがとても快適になりました！すごいやVim！

yuicompress.bat

gist: 74d81567a90504c95ad4 – Windows Batch File to use YUI Compressor easily- GitHub

@echo off
if "%1" == "" goto error
setlocal
set jarfile="C:\Program Files\yuicompressor-2.4.2\build\yuicompressor-2.4.2.jar"
set infile=%1
set ext=%~x1
if %ext% == .css set outfile=%infile:.css=.min.css%
if %ext% == .js set outfile=%infile:.js=.min.js%
java -jar %jarfile% -v --charset UTF-8 -o %outfile% %infile%
endlocal
goto end
:error
echo No Argument
:end

バッチファイルは書き慣れない為、あまりスマートに書けませんが…
4行目のjarファイルのパスは環境にあわせて書き換えてください。
文字コードはUTF-8に固定してしまっているのでご注意を！

使い方

例えば、パスの通ったディレクトリに「yuicompress.bat」という名前で保存をしておけば、
引数ひとつで簡単に圧縮出来ます。

yuicompress hogehoge.js
yuicompress fugafuga.css

JSもCSSも、拡張子の前に「.min」を追加したファイル名で出力されます。
上の例ならば「hogehoge.min.js」と「fugafuga.min.css」ですね。

エディタから使う

エディタから使いたい場合も、パスが通っていれば簡単ですね。
例えばNotepad++のNppExecに登録する場合は、次のように。

yuicompress.bat $(FULL_CURRENT_PATH)

GVimから使う場合は、次のように。

:!yuicompress %

参考

YUI Compressor本体のドキュメント/ダウンロードは公式へ！

• YUI Compressor
• YUI Library :: Downloads

Dokan

Ubuntu等では標準で搭載されている機能なのですが、
WindowsでSSHの接続先のファイルを編集する場合は
WinSCP等のクライアントを経由して行っていました。
それが、DokanSSHFSを利用する事で簡単に出来るみたいです。

こちらがマウント設定画面。勿論鍵を使用しての接続も可能。
WinSCPではPutty形式の鍵をジェネレートする必要がありましたが、
DokanSSHFSではOpenSSHの鍵をそのまま使用出来ます。

接続に成功すると、ドライブとしてマウントされます。
ドライブレター(ここではM）は設定画面で選択可能です。
これは便利だ！

※尚、DokanSSHFSの動作にはDokanライブラリが必要なのですが、
Dokanライブラリの0.5.0以降には対応していないそうなので…

Dokan » Download

DokanSSHFS は Dokan 0.5.0 以降に対応していません。 Dokan SSHFS を Dokan 0.5.0 以降で使用したい場合は、DokanSSHFS.exe と DokanNET.dllをこのファイルで上書きしてください。

だそうです。

HTML+CSSをWeb上でテストできるオンラインツール。
以前紹介したJSBinのCSS版といった感じですね。
cf) オンラインJSデバッギングツール「JS Bin」

CSSDesk – Dynamic CSS Sandbox

使い方が一目瞭然でわかるシンプルさ。良いですね。

JSBinのように他者と共有する機能はいまのところない様子。
その代わり、右上のDOWNLOADボタンで
テストしたソースをダウンロードする事ができます。
ちょっとしたテストに使えそうですね。

チェアがあるのかないのか。とにかくこれは無駄がない。
ただのベルトがポータブルなチェアに早変わり！

Chairless by vitra.

アメリカ先住民が似たような物を使用して座っているのを見てインスパイアされたのだとか。
この無駄の無いチェアはVitraの新作だそうですが、
現在在庫が無くなってしまっているようですね。
2010年6月まで待って！といわれました。

特設サイトでは生活のいろんな場面で座っている写真が閲覧できます。
スキー行った時の小休止なんかでちょっと使ってみたいです。

こんな便利なものが…知らなかった！
JavaScriptのテストが出来るオンラインツールです。

JS Bin – Collaborative JavaScript Debugging

左ペインがJavaScript、右ペインがHTMLという構成。
無駄なものが一切ないシンプルなデザインです。使い易い。

「Preview」をクリックすると、プレビューへ。
記述したJavaScriptは直前に挿入されます。

「Create Public Link」をクリックすると共有する為のURLを生成してくれます。
仲間と一緒にデバッグする時に使えますね。
「Collaborative」と称されている所以です。

HTMLペインのプルダウンメニューでは、
読み込みたいフレームワークを選べます。
バージョンが分かれているのも助かります。

これは中々活用しがいがあるのではないでしょうか！
特にデモコードを公開するようなブロガーさん等に重宝されそうです。

Twitter関連の新しいサービスが公開されたようなので、
ちょっと試してみました。

すけつい

TwitterとGoogleカレンダーを連携させて皆でスケジュールを共有！
という趣向のWebサービスだそうです。

使い方はシンプルで、サービス登録後に
ハッシュタグ「#yotei」をつけてつぶやくだけ。

「”日付” “時間” “イベント名” “#yotei”」

こんな文法でツイートすれば、
日時を解釈してGoogleカレンダーに登録してくれるみたい。

予定が公開されると、自分のTwitter宛に報告してくれます。
ちょっとタイムラグがあるみたいですが…（自分の時は20分ほどでした)
サーバの中の人が疲れていたんでしょうか。

登録する対象のGoogleカレンダーは以下の中から選ぶ事が出来ます。

• “すけつい”Googleカレンダーのメインカレンダー
• “すけつい”Googleカレンダーのあなた用カレンダーに公開
• あなたのアカウントのGoogleカレンダーに公開

Twitterの友達同士でオフ会の予定を練ったりするのに使えそうなツールです。
ついでなので場所も解釈してMapへ誘導出来るともっと便利ですね。
まだまだ調整中のβ版なので、不具合も出てきているようですが、今後に期待。

個人的にはGoogleカレンダーの入力用に～とか妄想していたのですが、
それなら直接カレンダーいじったほうが良さそうですね。
TwitterのUIは予定の入力に適しているとは言い難いです。