メインコンテンツまでスキップ

GitLab Issues のスタイルシートをカスタマイズ

· 約4分
mebiusbox
engineer

はじめに

GitLab の Issues は一覧画面、詳細画面ともにタイトルが少し見づらいイメージがあります。 一覧画面にはタイトルとそれ以外の情報が2行で表示されていますが、1行目をもう少し目立たせたい。 詳細画面ではタイトルと詳細の間に空白を入れたい。 そこで、GitLab のスタイルシートをカスタマイズして調整してみます。 なお、試したバージョンは GitLab-CE 8.9.6 で、OS は CentOS7 です。

変更前と変更後のスタイル

一覧ページでは、1行目の文字色、文字の多きさ、2行目の文字色を、詳細ページではタイトルの文字色とアンダーラインの付加、詳細との間に空白を入れます。また、フォントはメイリオにします。以下は変更前と変更後の画面です。

変更前

  • 一覧画面

fig

  • 詳細画面

fig

変更後

  • 一覧画面

fig

  • 詳細画面

fig

「えー、イマイチじゃない?」

そんなこと言わないで。

Issues 画面のスタイルシート

一覧ページと詳細ページのスタイルシートは /opt/gitlab/embedded/service/gitlab-rails/public/assets に入っています。 ここにある css は SCSS からコンパイルされたもので、ソースファイルは以下の場所にあります。

一覧用スタイルシート

/opt/gitlab/embedded/service/gitlab-rails/app/assets/stylesheets/pages/issues.scss

詳細用スタイルシート

/opt/gitlab/embedded/service/gitlab-rails/app/assets/stylesheets/pages/detail_page.scss

これらのファイルを編集して反映させます。

issues.scss

以下の内容をファイル末尾に追加します。

.issue-title-text {
font-family: "メイリオ";
font-size: 12pt;
a {
color: #b92a2c !important;
&:hover {
color: #b92a2c !important;
}
}
}

.issue-info {
color: #aaa;
a {
color: #aaa !important;
&:hover {
color: #aaa !important;
}
}
}

detail_page.scss

.detail-page-description のところを以下のように書き換えます。

.detail-page-description {
.title {
margin: 0;
font-size: 16px;
// color: $gl-gray-dark;
color: #b92a2c;
padding-bottom: 8px;
margin-bottom: 16px;
font-family: "メイリオ";
border-bottom: 1px dotted #999;
}
・・・
}

変更の反映

css を作りなおすには gitlab-rake でコンパイルし直します。 以下のコマンドを実行します。

gitlab-rake assets:clean assets:precompile

そうすると、以下のようなエラーが出ます。

rake aborted!
Errno::EACCES: Permission denied @ rb_sysopen - /opt/gitlab/embedded/service/gitlab-rails/public/assets/application-c648926c9d8a8939cebb4416841c41fe5cfaed87c8cc16110b52113026c41fd5.css.66282720.7223.147474
...

パーミッションが許可されていないようです。 そこで、コンパイルするときだけパーミッションを変更し、コンパイルしたら元に戻します。 そして、再作成したスタイルシートを反映させるため、GitLab をリスタートします。

※この解決策は以下を参考にしました。 GitLab Omnibusロゴ差し替えスクリプト

chown -R git:git /opt/gitlab/embedded/service/gitlab-rails/public/assets
gitlab-rake assets:clean assets:precompile
chown -R root:root /opt/gitlab/embedded/service/gitlab-rails/public/assets
gitlab-ctl restart

再アクセスしてみると、変更していることが確認出来ます。

最後に

あとは好きなようにスタイルをいじりましょう。 参考になれば幸いです。

CentOS7 + GitBook + GitLab + Hubot で 文書作成環境の構築

· 約16分
mebiusbox
engineer

はじめに

GitBook は Markdown 形式のドキュメントから電子文書を作成するツールです。 次のような文書作成環境を構築します。

  • GitBook に使うドキュメントを GitLab でバージョン管理します
  • GitLab の push イベントを Hubot でフックします
  • GitBook を使って電子文書を作成します
  • 作成した電子文書を Apache を使って公開しブラウザで閲覧、ダウンロードできるようにします
  • これらをVirtualBox(Windows) で作成した CentOS7 上に実装します

私はWindows10 64bit環境で動作確認しました。

CentOS7 の仮想マシンを作成

VirtualBox の仮想マシンを作成し、CentOS7 を Minimal 構成でインストールします。 使ったのは CentOS7-x86_64-Minimal-1511.iso です。 インストール後、yum upgrade を行います。 Guest Additions は入れてません。 SELinux は無効にし、firewalld をインストールします。

GitLab のインストール

以下のコマンドを実行します。

curl https://packages.gitlab.com/install/repositories/gitlab/gitlab-ce/script.rpm.sh | sudo bash
yum -y install gitlab-ce

ホストPCからアクセスしたいので、ホストオンリーアダプタのIP(192.168.56.101) を external_url に設定して gitlab-ctl reconfigure を実行します。

ホストPCからブラウザで http://192.168.56.101 にアクセスしてみると... 接続されませんね。ファイアウォールの設定で 80 ポートを開けます。

firewall-cmd --add-service=http --permanent
firewall-cmd --reload

再度アクセスして GitLab の画面が表示されることを確認します。 パスワードを再設定して root でログインできることを確認しましょう。

GitBook のインストール

GitBook は Node.js のアプリケーションです。 まずは Node.js をインストールします。

yum install epel-release -y
yum install nodejs npm -y

次に gitbook-cli をインストールします。これは Gitbook のコマンドラインツールです。gitbook 自体は含まれていません。

npm install gitbook-cli -g

これで gitbook のコマンドが使えるようになります。 gitbook 自体は gitbook のコマンドを実行しようとすると、自動でインストールされます。

(gitbook をグローバルでインストールすると上手く動作しないのでローカルにインストールすることをオススメします)

gitbook help

上記を実行して本体をインストールします。 適当にフォルダを作って動作確認してみます。

mkdir book
cd book
gitbook init

> warn: no summary file in this book
> info: create README.md
> info: create SUMMARY.md
> info: initialization is finished

gitbook build

> info: 7 plugins are installed
> info: 6 explicitly listed
> info: loading plugin "highlight"... OK
> info: loading plugin "search"... OK
> info: loading plugin "lunr"... OK
> info: loading plugin "sharing"... OK
> info: loading plugin "fontsettings"... OK
> info: loading plugin "theme-default"... OK
> info: found 1 pages
> info: found 0 asset files
> info: >> generation finished with success in 0.4s !

PDF, epub, mobi 形式を作成する場合はそれぞれ gitbook pdf, gitbook epub, gitbook mobi になります。 試しに PDF で作成してみます。

gitbook pdf

> info: 7 plugins are installed
> info: 6 explicitly listed
> info: loading plugin "highlight"... OK
> info: loading plugin "search"... OK
> info: loading plugin "lunr"... OK
> info: loading plugin "sharing"... OK
> info: loading plugin "fontsettings"... OK
> info: loading plugin "theme-default"... OK
> info: found 1 pages
> info: found 0 asset files
>
> InstallRequiredError: "ebook-convert" is not installed.
> Install it from Calibre: https://calibre-ebook.com

"ebook-convert" がインストールされていないので、Calibre をインストールする必要があります。

公式サイトのダウンロードから Unix 用のインストール方法が記載されていますので、それを実行します。

yum install wget -y
sudo -v && wget -nv -O- https://raw.githubusercontent.com/kovidgoyal/calibre/master/setup/linux-installer.py | sudo python -c "import sys; main=lambda:sys.stderr.write('Download failed\n'); exec(sys.stdin.read()); main()"

インストールすると警告が2つ出ます。2つとも ImportError で実行に必要なもの libGL.so と QImage が見つからなかったようです。 試しにここで gitbook pdf を実行すると「共有オブジェクトファイルを開けません」のようなエラーが表示されます。 これらは qt-creator パッケージをインストールすることで解決します。

yum install qt-creator -y

再度 gitbook pdf を実行して問題が出てないことを確認します。

Hubot のインストール

以下のコマンドを実行します

npm install hubot coffee-script generator-hubot yo -g

root で Hubot の作成が出来ないので、Hubot 用のユーザーを作成します。このユーザーは gitbook の変換も兼ねているので gitbook としました。

useradd gitbook
passwd gitbook

gitbook ユーザーに切り替えて hubot を作成します。

su gitbook
cd ~
mkdir hubot
cd hubot
yo hubot

Hubot 作成の手続きが始まりますので、すべてデフォルトのままで作成します。 作成したら、まず不要なファイルを削除します。

rm scripts/example.coffee

hubot の実行スクリプト run_hubot.sh を作成し、以下の内容を記述します。

export PORT=5000
bin/hubot

作成したら実行権限を与えておきます。

chmod +x run_hubot.sh

次に Hubot スクリプト scripts/gitlab_gitbook.coffee を作成します。 内容は次のようになります。

# http://<host>:5000/gitlab_hook/?output_pdf=<pdf_name>

url = require 'url'
querystring = require 'querystring'

module.exports = (robot) ->

push_request = (output_pdf, hook) ->
git_group = hook.project.namespace
git_project = hook.project.name
git_url = hook.project.ssh_url
console.log("hubot: group=#{git_group} name=#{git_project} output=#{output_pdf}")
@exec = require('child_process').exec
command = "sh /home/gitbook/gitbook.sh #{git_url} #{git_project} #{output_pdf}"
@exec command, (error, stdout, stderr) ->
robot.logger.error error if error?
robot.logger.info stdout if stdout?
robot.logger.info stderr if stderr?

robot.router.post '/gitlab_hook', (req, res) ->
hook = req.body
q = querystring.parse(url.parse(req.url).query)
kind = hook['object_kind'] || 'push'
switch kind
when 'push'
push_request q.output_pdf, hook
res.send 200

正常に実行できるか確認します。

./run_hubot.sh

次に hubot から gitbook を実行するスクリプトを作成します。 このスクリプトは gitbook ユーザのホームフォルダのトップに作成します。 ログが欲しいのでスクリプトを2つに分けて、リダイレクトでファイルに書き込むようにしました。 (ここはもっとスマートにやる方法があると思います。このあたりは初心者レベルなのでご容赦を)

vi ~/gitbook.sh
#!/bin/sh
LOGFILE=/tmp/gitbook-script-log
cd ~
./gitbook-exec.sh $1 $2 $3 >>$LOGFILE

実際に実行するスクリプトファイル gitbook-exec.sh は次のようになります。

#!/bin/sh
cd ~

if [ -e $2 ]; then
cd $2
git pull $1
cd ../
else
git clone $1
fi

gitbook install ./$2
gitbook pdf ./$2 ./$2/$3.pdf
gitbook build ./$2

cp -rf ./$2/_book -T /var/www/html/$2

忘れずに実行権限を与えておきます。

chmod +x gitbook.sh
chmod +x gitbook-exec.sh

sshキー の登録

この gitbook ユーザは GitLab にアクセスしますので、ssh キーを登録しておきます。

ssh-keygen -t rsa

生成した id_rsa.pub の内容を GitLab でログインし、Profile Settings の SSH Keys に登録しておきます。

実際に clone 出来るか確認しておきます。 GitLab で適当なプロジェクトを作成します。 ここでは 「root」 ユーザーで 「Test」 というプロジェクトを作成しました。 URL は「 git@192.168.56.101:root/Test.git 」になります。

git clone git@192.168.56.101:root/Test.git

> bash: git: コマンドが見つかりません

おっと、git が入っていませんでした。インストールします。

sudo yum install git -y

再度 clone を試します。

git clone git@192.168.56.101:root/Test.git

> Cloning into 'Test'...
> The authenticity of host '192.168.56.101 (192.168.56.101)' can't > be established.
> ECDSA key fingerprint is c9:7d:09:34:cc:3a:74:fd:0d:d7:98:bf:31:62:21:2f.
> Are you sure you want to continue connecting (yes/no)?

初回だと上記のような確認が出ますが、そのまま yes で問題ありません。 「Test」フォルダに移動して、gitbook init コマンドを実行し、gitbook のインストールと初期ファイルを作成します。 生成された SUMMARY.mdREADME.md をプッシュしておきます。

まずは git の設定をします。

git config --global user.name "<username>"
git config --global user.email "hoge@example.com"

上記の名前とメールアドレスは適当なので、適切な名前を設定してください。 以下を実行してプッシュします。

git add README.md SUMMARY.md
git commit -m "add README SUMMARY"
git push -u origin master

Apache のインストール

gitbook で作成した電子文書を閲覧するために Web サーバー (apache) を導入します。

yum install httpd -y

ポートは 8000 を指定します。80 は GitLab(nginx) が使用しています。また 5000 ポートは hubot で使います。

gitbook ユーザで作成した文書を /var/www/html フォルダ内にコピーしています。 そのため var/www/html の所有者を gitbook に変更しておきます。

chown gitbook:gitbook /var/www/html

設定が終わったらWebサーバを起動します。

systemctl start httpd
systemctl enable httpd

例えば先ほどの「Test」プロジェクトは /var/www/html/Test となりますので、URL は「 http://192.168.56.101:8000/Test/ 」になります。また、PDF 文書は「 http://192.168.56.101:8000/Test/{output_pdf}.pdf 」でアクセスします。

GitLab で WebHook を設定

これで一通りの自動生成環境は整いました。 GitLab のテストプロジェクトで動作確認します。 GitLab のプロジェクト設定で「Webhooks」を選択します。

Webhooks の URL に http://192.168.56.101:5000/gitlab_hook/?output_pdf=Test と入力します。 Secret Token は空で、Trigger は Push events にチェックをつけます。 SSL Verification の「Enable SSL verification」のチェックははずします。 以上の設定が終わったら「Add Webhook」を設定しておきます。

下の方に追加された Webhook があります。 自動生成が動作するか確認します。

まず、CentOS側では gitbook ユーザーにし、clone した Test フォルダを削除しておきます。そして、hubot を起動させます。

cd ~
rm -rf Test
cd hubot
./run_hubot.sh

次に GitLab の画面から追加した Webhook の右側にある「Test」ボタンを押します。 GitLab 側で Hook executed successfully: HTTP 200 と表示されれば GitLab からのフックは上手く動作しています。

hubot 側もエラーが発生していないか /tmp/gitbook-script-log を確認します

問題なければホストPCからブラウザで見てみます。 URL は http://192.168.56.101:8000/Test/ です。

あれ、接続がタイムアウトされたと表示されました。 CentOS 側のファイアウォールで 8000 番を開けます。

firewall-cmd --add-port=8000/tcp --permanent
firewall-cmd --reload

画面に「Introduction」と表示されれば成功です。 PDF も作成されているか確認します。 URL は http://192.168.56.101:8000/Test/Test.pdf です.

問題なければこれで基本的な機能は実装できました。

hubot の永続化

これから細かい調整をしていきます. まず、hubot の永続化を行います。 それには forever を使いますので、インストールします。

npm install forever -g

次に bin/hubot を書き換えます。

# exec node_modules/.bin/hubot --name "hubot" "$@"
forever start -c coffee node_modules/.bin/hubot

起動方法はこれまで変わらないので ./run_hubot.sh を実行します。 動作しているか確認する場合は forever list です。

日本語の対応

ここまでの設定で日本語を含めた文書を入れると HTML の方は問題ありませんが、 PDF では日本語の部分が表示されません。

HTML

PDF

フォントをインストール

これは日本語のフォントが入っていないのが原因ですので、インストールします。

yum groupinstall fonts -y

インストールしたら再度、生成させてみます。

どうやら問題なさそうです。

※ここでは VL ゴシックのフォントで生成されていますが、場合によっては別のフォントになっているかもしれません。私も別の環境で試したところ別のフォントになってしまい、見た目があまりよろしくなかったことがありました。その場合はフォントを指定します。

book.json ファイルをトップフォルダに作成し、内容を以下のようにします。

{
"pdf":{
"fontFamily":"VL Gothic"
}
}

これで PDF に使われるフォントを変更することが出来ます。

数式

gitbook には数式を埋め込むために mathjax のプラグインがあります。 使用するには book.json を作成し、内容を以下のようにします。

{
"plugins":["mathjax"]
}

PDF でも使うためには svgexport が必要ですので、これもインストールする必要があります。 svgexport のインストールには bzip2 も必要なので先にこちらをインストールします。

yum install bzip2 -y
npm install svgexport -g

fig-4

正常に生成されました。

最後に

Git, GitHub, GitLab, GitBook は最近触り始めたばかりですが色々出来て面白いです。今回は Jekyll の影響が大きく Git でプッシュするとコンテンツが出来上がるというのは大変楽ですし、プログラマに優しい感じがします。とはいっても、ここまで来るのに苦労したのでなんとも言えませんが。 Gitbook にはまだ設定できるところもあるようですし、スタイルにはこだわる方なので、もう少し手を付け加えたいところですね。PDF はもっと体裁を整えて社外にも出せるぐらいの完成度を目指したいです。HTML の方は css いじりたいですね。 今回の内容については所々ツッコミたいところもあるかもしれませんが、参考になれば幸いです。

Windows で Gitbook + mathjax を使った文書作成

· 約8分
mebiusbox
engineer

Gitbook は Markdown 形式で書かれた文書から HTML や PDF, EPUB, MOBI 形式の作成が行えるツールです。 ここでは Windows で環境を構築する方法を解説します。

Node.js のインストール

まず、Node.js が必要です。以下のサイトから LTS 版をダウンロードします。

Node.js

ダウンロードしたファイルを実行してインストールします。 インストール先はデフォルトのままで構いません。

gitbook-cli のインストール

gitbook をコマンドで実行するために gitbook-cli をインストールします。 コマンドプロンプトを開いて以下のコマンドを実行します。

npm install -g gitbook-cli

gitbook-cli 自体は gitbook を含んでいません。 gitbook の機能を使うときに自動でインストールされます。そこで適当なサブコマンドを実行してインストールします。

gitbook help

テストしてみる

サンプルとして以下の文書をビルドしてみます。

Learn Javascript

適当なフォルダを作成します。 git が使えるなら clone します。

git clone https://github.com/GitbookIO/javascript

git が使えない場合はリンク先から Clone or download > Download Zip でダウンロードします。

パスを javascript に設定して以下のコマンドを実行します。

gitbook serve

ビルドが開始され Serving book on http://localhost:4000 と出たら成功です。 ブラウザで http://localhost:4000 を開いて確認してみます。

Mathjax を使う

gitbook のプラグインとして mathjax が使用できます。 新規にフォルダを作成して新しい文書を作成しましょう。 適当なフォルダを作成してパスを通し、以下のコマンドを実行します。

gitbook init

実行するといくつかのファイルが生成されます。そのまま gitbook serve を実行して動作確認しておきます。

プラグインの追加

book.json にプラグインを記述することができます。 gitbook init では作成されませんので、新規に作成します。 プラグインの指定は plugins で行います。 mathjax を使う場合は以下のようになります。

{
"plugins":["mathjax"]
}

VisualStudio 2015 のインストール

mathjax を使うためにはビルド環境が必要です。 VisualStudio の最新版である 2015 を入れます。

VisualStudio 2015

上記のサイトから Community 版をダウンロードしてインストールします。 デフォルトのままでは必要なファイルがインストールされませんので、カスタムインストールします。

インストールの種類を選択するときに カスタム を選択します。 プログラミング言語 > Visual C++ > Visual C++ 2015 用の共通ツール にチェックを入れます。 それ以外はチェックをはずしても問題ありません。 インストール先はデフォルトのままで構いません。 インストールには時間がかかりますので、待ちましょう。

python 2.7.x のインストール

次に python が必要になります。python には 2.x 系と 3.x 系がありますが 2.x 系をインストールします。 以下のサイトから 2.7.x 系の最新版をダウンロードしてインストールします。

python

インストール先はデフォルトのままで構いません。 コマンドから python を実行するために環境変数にパスを登録する必要があります。 インストーラを使ってインストールする場合は Add python.exe to Path を有効にしておきます。

mathjax をインストールする

これで準備が整ったので mathjax をインストールします。 book.json に書かれたプラグインをインストールする場合は以下のコマンドを実行します。

gitbook install

info: >> plugin "mathjax" installed with success と表示されればインストール成功です。 もし次のようなエラーが出た場合:

C:\Program Files (x86)\MSBuild\Microsoft\VisualStudio\v12.0\CodeAnalysis\Microsoft.CodeAnalysis.targets(214,5): error MSB4175: タスク ファクトリ "CodeTaskFactory" を アセンブリ ":\Program Files (x86)\MSBuild\v12.0\bin\Microsoft.Build.Tasks.v12.0.dll" から読み込めませんでした。 プロセスを開始するのに使用される環境ブロックの長さは、65,535 バイトを超えて指定することはできません。 ユーザーの環境ブロックの長さは 1860986 バイトです。環境変数のいくつかを削除して、もう一度実行してください。 "c:\book\node_modules\contextity\build\contextify.vcxproj" ... Error: contextify@0.1.15 install: node-gyp rebuild Exit status 1

問題となっている contextify を直接インストールします。 以下のコマンドを実行します。

npm install contextify

問題なくインストールされたら再度プラグインのインストールを試みます。

gitbook install

info: >> plugin "mathjax" installed with success と表示されればインストール成功です。 あとは文書をビルドして確認してみます。

gitbook serve

PDF, epub, mobi 形式の作成

svgexport

PDF などで数式を文書に含めるには SVGexport が必要です。 以下のコマンドを実行してインストールします。

npm install -g svgexport

ebook-convert

PDF などの文書を作成するには ebook-convert が必要です。 以下のサイトから calibre をダウンロードしてインストールします。

calibre

pdf, epub, mobi 形式の作成

それぞれ次のコマンドで作成することができます。

gitbook pdf gitbook epub gitbook mobi

プラグインのオプション指定

gitbook のプラグインのオプションは book.json で指定できます。 例えば mathjax のオプションを指定する場合は次のようになります。

"plugins":["mathjax"],
"pluginsConfig":{
"mathjax":{
"forceSVG":true
}
}

最後に...

残念ながら Windows で mathjax を使った pdf を作成すると数式の解像度がひどいことになっており、使えません。 HTML 形式では問題ないので、html でデプロイする場合には問題ないと思います。 CentOS7 で pdf 出力した場合はぎりぎり許容できそうなレベルではありますが、それでもイマイチな出来です。 そのあたり改善されるか、または調整できるのであれば大変便利ですね。 また、gitbook でビルドすると綺麗ですので、こちらを使うのもありです。 専用のエディタもあるので、なかなか便利です。 Windowsでは数式を使わなければ問題ないので、文書作成環境として問題ないと思います。

Blender:パーティクルを使ったビルの配置

· 約3分
mebiusbox
engineer

Blender で複数のビルをパーティクルを使って格子状に配置する方法です。

まず、ビルを用意します。今回はキューブを3つ作りました。 スケールとZ軸の位置はフリーズしておきます。

001

各ビルのパラメータは次のようになっています。

building2 building1 building3

作成したビルはグループ化し、名前は Buildings にします。

002

次にパーティクルを生成して配置していきます。 別レイヤーにすると作業しやすいので、別のレイヤーにして Plane を作成します。スケールは 8 にしました。

003

Edit Mode にして Subdivide を何回か実行します。

004

Object Mode に戻してパーティクルを作成します。

005

Type を Hair にして、Advanced のチェックをつけます。

006

007

Render の Group を選択します。

008

008-2

Render の Dupli GroupBuildings を選択します。

009

回転が正しくないので、調整します。 Rotation の項目にチェックをつけて、Initial OrientationObject Y にします。

010

011

この状態だと面の法線上にランダムで作成しているので他のビルと重なってしまいます。 そこで生成する場所を頂点に変更します。

Emission の Emit FromVerts に変更します。

012

013

Top から正投影(ワイヤーフレーム)で見てみると次のようになっています。

014

Emission の Numbers を編集してみると生成されるビルの数を調整することができます。 Emit FromRandom のチェックをつけていると同じ場所にビルが重なって生成されてしまうのでチェックをはずします。 頂点の数が 1089 なら、Numbers が 1090 だとすべての頂点の位置に生成されます。

015

Plane の頂点上に配置しているので、頂点を削除すればその上に配置されなくなります。 適当な頂点を消してみます。

016

Edit Mode では反映されないので、Object Mode にして確認すると、削除した部分にビルが配置されなくなっています。

017

018

これを使って通路を確保してみます。

019

020

この方法なら大量の配置も、新しいビルの追加も簡単です。

rar形式からzip形式に一括変換するバッチファイル

· 約2分
mebiusbox
engineer

rar形式のファイルをzip形式に一括変換するバッチファイルです。 実行するには WinRAR が必要です。

WinRAR

64bit版をデフォルトの場所にインストールされていることを想定しています。

@if (1==1) /*
@echo off
cscript //nologo //E:JScript "%~f0" "%~f0" %*
pause
GOTO :EOF
rem */
@end

// javascript code here.

WScript.quit(main(WScript.arguments.length, WScript.arguments));

// argc : argv の長さ
// argv : 個数は argv.Count、参照は argv(index)
function main(argc, argv) {

WScript.echo(argc);
for (i=0; i<argc; ++i) {
WScript.echo(argv(i));
}

var sh = WScript.CreateObject("WScript.Shell");
var fso = new ActiveXObject("Scripting.FileSystemObject");
var dirname = fso.GetParentFolderName(argv(0));
var files = fso.GetFolder(dirname).Files;
var e = new Enumerator(files);
for (; !e.atEnd(); e.moveNext()) {
var file = e.item();
if (fso.GetExtensionName(file.Name) == "rar") {

if (fso.FolderExists(dirname + "\\" + fso.GetBaseName(file.Name)) == false) {
fso.CreateFolder(dirname + "\\" + fso.GetBaseName(file.Name));
}

var cmd = "\"C:\\Program Files\\WinRAR\\rar\"";
cmd += " x -inul";
cmd += " \"" + file.Name + "\"";
cmd += " \"" + dirname + "\\" + fso.GetBaseName(file.Name) + "\"";
WScript.echo(cmd);
sh.Run(cmd, 0, 1);

cmd = "\"C:\\Program Files\\WinRAR\\winrar\"";
cmd += " a -afzip -r -ep1 -m0";
cmd += " \"" + fso.GetBaseName(file.Name) + ".zip\"";
cmd += " \"" + fso.GetBaseName(file.Name) + "\\*\"";
WScript.echo(cmd);
sh.Run(cmd, 0, 1);

fso.DeleteFolder(dirname + "\\" + fso.GetBaseName(file.Name));
// fso.DeleteFile(file.Name);

// WScript.echo(file.Name);
}
}

}

使い方は変換したいファイルがあるフォルダにこのバッチファイルを入れて実行します。 時々変換に失敗することがあるので、元ファイルは消さないようになっています。 手動で消すか、fso.DeleteFile(file.Name); を有効にすれば変換したときに消します。