メイン | 2012年1月 »

2011年12月の8件の記事

2011年12月31日 (土)

CoLinux + Ubuntu 10.04を試す

先日までの設定でPortable Ubuntuが動作するようにはなった。

・・・だがやっぱり遅い。そこでportable_ubuntu.conf内のports_to_redirect

ports_to_redirect=tcp:4000:4000

とかって書くとcoLinuxのポート4000がWindows上から覗ける。つまりWindowsのブラウザでプレビュー出来ると 言うことが分かった。

Linux内のローカルポートはLinuxでしか使えないと思い込んでいたため、Linuxにブラウザ環境が必要→X環境が 必要→Portable Ubuntuを使おう。

と思ってたんですが、別にWindows上で確認できるのならPortable Ubuntuを使わずにcoLinux+Ubuntuでやったら もっと軽くなるんじゃね??(Linuxを裏で走らせておいてGUI操作はWindows上でやれば良いんだし) ということでcoLinux+Ubuntu10.04の組み合わせで再度環境構築してみたのでそれのメモ

CoLinuxとUbuntu 10.04のインストール

colinux に Ubuntu 10.04 をインストールするの通りにやれば おk(手抜き)

但しイーサネットの設定は

eth0=slirp,00:ff:75:39:D3:C1

とした。

あと注意点としてはネットワーク認識が成功して何かファイルダウンロードしてるような所で何か止まったみた いになります(カーネルをダウンロードしようとして失敗してる??)、正常です。我慢して待ってましょう
その後[カーネルがないけどそのままインストール続けても良いかい?」みたいなメッセージ(超意訳)が表示さ れますが気にせず続けて大丈夫です(カーネルは書かれてるとおりにやっていれば、その前段階で展開してるはずなので)

でインストールできたら起動用のubuntu.confはこんな感じ

kernel=vmlinux
cobd0="c:\Program Files\coLinux\Ubuntu-10.04.ext.fs"
cobd1="c:\Program Files\coLinux\swap_256Mb"
cofs0=e:\
root=/dev/cobd0
initrd=initrd.gz
mem=128
eth0=slirp,00:ff:75:39:D3:C1

イメージフォルダ名やパスは自身の環境に合わせて下さい。

Portable Ubuntuとかを起動した後、普通に

$ colinux-daemon.exe @ubuntu.conf

では起動できない。どうやらPortable Ubuntuがcolinux-daemonドライバを自動的に削除してるみたい。
ということで、同じような感じにした起動バッチファイルを作成

@echo off
echo Installing the Colinux driver (Need administrator privileges)...
colinux-daemon.exe --remove-driver
colinux-daemon.exe --install-driver
echo Executing colinux daemon...
colinux-daemon.exe @ubuntu.conf -t nt
echo Removing the Colinux driver (Need administrator privileges)...
colinux-daemon.exe --remove-driver

最初の--remove-driverは不要と言えば不要だけど、将来的に異なるバージョンのcoLinuxが複数存在してた場 合&そこで最後にremove-driverしてないときにおかしくなるかもしれないんで一応入れとく。

キーボードとタイムゾーンの設定

デフォルトの状態ではキーボードレイアウトが英語になってるので、’~’や’$’など記号とかの配置が違っている。

これを日本語キーボードにするには

$ loadkeys jp

をすればよい。だが、これでは毎回コマンド打たないと日本語キーボードにならなくて面倒くさい。

そこで設定画面を出して設定する

$ dpkg-reconfigure console-setup

適当で良いと思うが

Keyborad model : Generic 104-key PC
Origin of the keyboard : Japan
Keyboard layout : Japan - OADG 109A
AltGr key replacement : Right Alt
Compose key : No compose key
Encoding to use on the console: UTF-8
Character set to support : .Combined - Latin; Slavic Cyrillic; Hebrew; basic Arabic
Font for the console : VGA
Font size ; 16
Virtual console in use : /dev/tty[1-6]

こんな感じで設定してみた。設定し終わったら[Ctrl]+Cで抜けるみたい。んで

$ shutdown -r now

で再起動して、日本語レイアウトになってることを確認

タイムゾーンの設定は

dpkg-reconfigure tzdata

で、Asia→Tokyoを選択(最初Japanを探して見つからなくて焦ったのは内緒(^^ゞ)

Ubuntuのネットワーク設定

基本、今まで動いていたPortable Ubutu V4から設定ファイルの情報から /etc/network/interafaceの内容を以下のように変更。

# This file describes the network interfaces available on your system
# and how to activate them. For more information, see interfaces(5).

# The loopback network interface
auto lo
iface lo inet loopback

# The primary network interface
auto eth0
iface eth0 inet dhcp

なおPortable Ubuntuの設定ではetc/network/interfaceは最後の行はコメントになっていたが、 それだと動かないので、コメントを外してある。Portable Ubuntuがどういう仕組みで動いてるのかどうか知ら ないが、とりあえずコメント外したら動いたので良しとする。

で、ネットワークを再起動

$ /etc/init.d/networking restart

すると DHCPが動いてイーサネットが認識されたっぽい表示が出たが、念のため

$ ifconfig eth0

として確認すると

eth0      Link encap:Ethernet  HWaddr 00:ff:75:39:d3:c1
           inet addr:10.0.2.15  Bcast:10.0.2.255  Mask:255.255.255.0
           inet6 addr: fe80::2ff:75ff:fe39:d3c1/64 Scope:Link
           UP BROADCAST RUNNING MULTICAST  MTU:1500  Metric:1
           RX packets:10 errors:0 dropped:0 overruns:0 frame:0
           TX packets:16 errors:0 dropped:0 overruns:0 carrier:0
           collisions:0 txqueuelen:1000
           RX bytes:2006 (2.0 KB)  TX bytes:1732 (1.7 KB)
           Interrupt:10

のような表示が出たのでおk

$ apt-get update

として、インターネットに繋がるかどうか確認

apt-get

普通に

$ apt-get update
$ apt-get upgrade

としても「しかし何も起こらなかった」という状態なのでapt-getのsources.listをPortable Ubuntuから引っ 張ってくる

# 
# deb cdrom:[Ubuntu 9.04 _Jaunty Jackalope_ - Release i386 (20090420.1)]/ jaunty main restricted

# deb cdrom:[Ubuntu 9.04 _Jaunty Jackalope_ - Release i386 (20090420.1)]/ jaunty main restricted
# See http://help.ubuntu.com/community/UpgradeNotes for how to upgrade to
# newer versions of the distribution.

deb http://ftp.jaist.ac.jp/pub/Linux/ubuntu/ lucid main restricted
deb-src http://ftp.jaist.ac.jp/pub/Linux/ubuntu/ lucid main restricted

## Major bug fix updates produced after the final release of the
## distribution.
deb http://ftp.jaist.ac.jp/pub/Linux/ubuntu/ lucid-updates main restricted
deb-src http://ftp.jaist.ac.jp/pub/Linux/ubuntu/ lucid-updates main restricted

## N.B. software from this repository is ENTIRELY UNSUPPORTED by the Ubuntu
## team. Also, please note that software in universe WILL NOT receive any
## review or updates from the Ubuntu security team.
deb http://ftp.jaist.ac.jp/pub/Linux/ubuntu/ lucid universe
deb-src http://ftp.jaist.ac.jp/pub/Linux/ubuntu/ lucid universe
deb http://ftp.jaist.ac.jp/pub/Linux/ubuntu/ lucid-updates universe
deb-src http://ftp.jaist.ac.jp/pub/Linux/ubuntu/ lucid-updates universe

## N.B. software from this repository is ENTIRELY UNSUPPORTED by the Ubuntu 
## team, and may not be under a free licence. Please satisfy yourself as to 
## your rights to use the software. Also, please note that software in 
## multiverse WILL NOT receive any review or updates from the Ubuntu
## security team.
deb http://ftp.jaist.ac.jp/pub/Linux/ubuntu/ lucid multiverse
deb-src http://ftp.jaist.ac.jp/pub/Linux/ubuntu/ lucid multiverse
deb http://ftp.jaist.ac.jp/pub/Linux/ubuntu/ lucid-updates multiverse
deb-src http://ftp.jaist.ac.jp/pub/Linux/ubuntu/ lucid-updates multiverse

## Uncomment the following two lines to add software from the 'backports'
## repository.
## N.B. software from this repository may not have been tested as
## extensively as that contained in the main release, although it includes
## newer versions of some applications which may provide useful features.
## Also, please note that software in backports WILL NOT receive any review
## or updates from the Ubuntu security team.
# deb-src http://ar.archive.ubuntu.com/ubuntu/ jaunty-backports main restricted universe multiverse

## Uncomment the following two lines to add software from Canonical's
## 'partner' repository.
## This software is not part of Ubuntu, but is offered by Canonical and the
## respective vendors as a service to Ubuntu users.
# deb http://archive.canonical.com/ubuntu jaunty partner
# deb-src http://archive.canonical.com/ubuntu jaunty partner

deb http://ftp.jaist.ac.jp/pub/Linux/ubuntu/ lucid-security main restricted
deb-src http://ftp.jaist.ac.jp/pub/Linux/ubuntu/ lucid-security main restricted
deb http://ftp.jaist.ac.jp/pub/Linux/ubuntu/ lucid-security universe
deb-src http://ftp.jaist.ac.jp/pub/Linux/ubuntu/ lucid-security universe
deb http://ftp.jaist.ac.jp/pub/Linux/ubuntu/ lucid-security multiverse
deb-src http://ftp.jaist.ac.jp/pub/Linux/ubuntu/ lucid-security multiverse

で、

$ apt-get update
$ apt-get upgrade

をやると何かアップグレードされたっぽい(いいのかな?)

Windowsとのファイル共有

一旦ここでイメージファイルのバックアップを取っておいた方が良いです。

Windowsとのファイル共有は

  1. cofsを用いる(coLinuxとWindowsが同マシン上の場合)
  2. sambaを使う
  3. Dropboxを使って仮想的に共有する

が考えられます。

cofsを用いる場合

coLinux側からファイルを書き換えるとなんかおかしくなるときがあるらしい。

まずcoLinuxを終了して、ubuntu.confを編集します。

cofs0=e:\

の行を適当な場所に追加しときます。

mkdir /mnt/e
mount -t cofs cofs0 /mnt/e

とすればおk

Sambaを使う場合

まず共有したいフォルダをWindows上で共有フォルダにします。

次にSambaをインストールします。

apt-get install samba smbfs

マウントはこんな感じ

mkdir /mnt/win_data
smbmount //192.168.0.10/data /mnt/win_data -o user=$win_user_name,password=$win_password,iocharset=utf8

‘192.168.0.10’の所は繋げるWindowsマシンのIPアドレス。 dataは共有フォルダ名 $win_user_nameはWindowsユーザー名 $win_passwordは指定したWindowsユーザーのパスワード

を指定。

IPアドレスじゃなくてマシン名で接続したい場合は

apt-get install winbind

でインストールした後、/etc/nsswitch.confを編集して、hosts:の行にwinsを追加する

hosts: files dns wins

・・・なのだが、残念ながらslirpでは動かないみたい(ネームサーバがダミーのため??)

ネットワーク接続しているのが有線LANならばTAP(またはWinPCap)を利用できる。無線LANの場合は出来るかど うかはネットワークアダプタ次第(ウチは駄目だった)

一番簡単なのはネットワーク接続でTAPと通常ネットワーク接続している接続(ローカルエリア接続など)を選ん で、ブリッジに追加して、ubuntu.confを以下のように修正する

#eth0=slirp,00:ff:75:39:D3:C1
eth0=tuntap,"ローカル エリア接続 4",00:ff:75:39:D3:C1

“ローカルエリア接続 4”はデバイス名がTAP-Win32~となっている接続名。TAP-Win32~となっている接続が1つ しかない場合は省略可能

Dropboxを使う場合

面倒くさそうなのでやらない(ぉ

とか参考にすれば出来そう・・・。

日本語ファイル名の文字化けを直す

いずれの場合でもcoLinuxのコンソール(FLTK)、Windowsのコンソール両方とも日本語の文字が化けてしまいます。

まずコンソールをUTF-8(japan)にするには以下のコマンドを実行して再起動する

apt-get install language-pack-ja
update-locale LANG=ja_JP.UTF-8

これでコンソールはUTF-8(japan)になるんですが、残念ながらFLTK、Windowsのコンソール両方ともUTF-8には対 応していないため、正常に表示できません。

コンソールの文字化けを直す方法もないわけではなさそうですが、SSHを使ってSSHクライアントソフトから接続 するのが一般的みたい。

まずはSSHサーバをインストール

apt-get install ssh

つぎに一旦coLinuxを終了させ、ubuntu.confを編集する(coLinuxのネットワーク接続がTAP-Win32、WinPCapの場 合は不要だと思う)

eth0=slirp,00:ff:75:39:D3:C1,tcp:2222:22

slirpの場合、coLinuxから外部への出力は何もしなくても大丈夫なのだが、入力は遮断されているみたいなの で、上の設定によりWindowsのポート2222から出力するとcoLinux側のポート22(SSH)へ入力されるという意味。

適当なSSHクライアント(TeraTermやPuttyが有名)で文字コードをUTF-8にして接続する。slirpの場合はSSH接続 の際のポートを2222にする必要がある。

おしまい

これで最低限の環境設定は終了。あとは自分の好きなモノを入れていけば良いと思う。

2011年12月28日 (水)

Portable Ubuntuに設定&アプリインストール

Portable Ubuntu Version4(slimLZM 2011/09/13版)に色々設定したのでメモ。

日本語入力設定をする

UNO版を試してたときは言語を日本語にするだけで動いていたような気がするが、このバージョンは それだけでは動かなかったので、設定。結構嵌まった。

Ubuntu 10.04 Lucid Lynx English での IBus 設定を参考。

1.言語サポートの設定 or 確認

上部中央パネル→システム(System)→システム管理(Administration)→言語サポート(Language Support)
で日本語が選択されいることを確認。キーボード入力に使うIMシステムが”ibus”になっていることを確認

言語サポート画面

日本語になってないときは日本語にする。やり方が分からないというひとは前の記事を参照

2.iBusを自動起動

Portable Ubuntuは日本語版ではないので、初期状態ではiBus daemonが起動してないので、起動するように 設定。

上部中央パネル→システム→設定→自動起動するアプリ

名前: IBus daemon とか
コマンド : /usr/bin/ibus-daemon -d
説明 : 何か適当に

を追加。Portable Ubuntuを再起動してパネルにキーボードみたいなアイコンが出てればおk。

パネル画面

3. ~/.bashrcの編集

これで日本語入力できるようになればそれでおk。

ならない場合は端末を起動し

$ gedit ~/.bashrc

として、”.bashrc”に以下を追加

export GTK_IM_MODULE=ibus
export XMODIFIERS=@im=ibus
export QT_IM_MODULE=ibus 

で、もう一回Portable Ubuntu再起動。

firefoxとかで日本語入力できるかどうか確認。日本語入力モードに入るキーは[半角/全角 ]、[Ctrl]+[Space]など。他のキーを割り当てたい場合は

上部中央パネル→システム→設定→iBusの設定

の[切り替え]の所のキーを編集。

<番外> SCIMを使用する方法

IMシステムをSCIMとして使用する方法は以下の通り(iBusの使用が推奨されてるらしいので、やらない方がいい かも?)

最初SCIMを使わないといけないと思い込んで色々やってて出来なかったのが悔しかったから再度挑戦してみた。
とりあえずこれでfirefoxとかgeditで日本語入力が出来るようになった。というだけで何かしら問題はあるか も。

1.日本語IMエンジンをインストール

Japanese Teamのパッケージをインストールしてない場合はインストールする

●レポジトリの追加

$ wget -q https://www.ubuntulinux.jp/ubuntu-ja-archive-keyring.gpg -O- | sudo apt-key add -
$ wget -q https://www.ubuntulinux.jp/ubuntu-jp-ppa-keyring.gpg -O- | sudo apt-key add -
$ sudo wget https://www.ubuntulinux.jp/sources.list.d/lucid.list -O /etc/apt/sources.list.d/ubuntu-ja.list
$ sudo apt-get update 

●インストール

$ sudo apt-get install ubuntu-desktop-ja

で、上部中央パネル→システム→システム管理→日本語環境セットアップ・ヘルパ を実行して、scim-anthyを 選択してインストール

日本語環境セットアップ

2.ibusと設定した部分をscimに書換

  1. 言語サポートの設定のキーボード入力に使うIMシステムをscimに
  2. ~/.bashrcの”=ibus”を”=scim”に

3.iBusの自動起動のチェックを外す

ホストコンピュータ(Windows上)のホームディレクトリをリンク

portable_ubuntu.confの設定を変更。

#shared_folder0=c:\
shared_folder0=E:\

Cドライブは間違えて操作すると危険&必要なデータはそんなに入ってない(データはEドライブに入れてる)の で、Eドライブのみマウントする。

Portable Ubuntuを起動してWindowsホームディレクトリにシンボリックリンクを貼る

ln -s /media/cofs2/user ~/win_home

DropBoxのインストール

かなり嵌まった(^^ゞ

DropBox公式よりUbuntu版(32bit)をダウンロードして実行。

あとは画面の指示に従えばOK・・・の筈だけど、初回起動時のDropBoxデーモンをダウンロード途中でダウンロー ドが止まる(60%位)

‘python-gpgme’がないという警告みたいなのがDrop Boxから出てたので

sudo apt-get install python-gpgme

でインストールをやったがやっぱり止まる。仕方がないのでコマンドラインでダウンロードしたらあっさり成功。
(Dropboxのダウンロードページの記述からのコピペ)

cd ~ && wget -O - http://www.dropbox.com/download?plat=lnx.x86 | tar xzf -

Portable Ubuntuを再起動(必要ないかも)して、アプリケーション→インターネット→Drop Boxを選択(勝手に立 ち上がるのかも)すると、一番最初の設定画面が出てくる。

あとはほったらかしておけばそのうち同期が完了する。

Dropbox + Ubuntu 10.04 で特定のディレクトリのみを同期するに同期しないディレクトリを指定する方 法が乗っていたので、試す。

$ dropbox exclude ~/Dropbox/becky_mail_dat

メールデータはWindowsアプリ用なので、同期から外しておいた。

rubyのインストール

rvmで切り替えて使用する。

1. システムデフォルト?のruby(1.8系)をインストール

$ sudo apt-get install ruby
$ sudo apt-get install rubygems

2. rvmをインスコ

$ sudo apt-get install curl git-core libreadline-dev
$ bash < <(curl -s -B https://rvm.beginrescueend.com/install/rvm)

3. $HOME/.profile に以下の行を追加

[[ -s "$HOME/.rvm/scripts/rvm" ]] && . "$HOME/.rvm/scripts/rvm"

4. 設定を反映

$ source ~/.profile

5. rvmにパッケージをインストール。zlibは最低限入れないと駄目(gemで失敗する)
readlineとopensslはRails用だと思う

$ rvm pkg install zliB
$ rvm pkg install readline
$ rvm pkg install openssl

6. ruby 1.9.2をインスコして、1.9.2をデフォルト

$ rvm install 1.9.2 -C --with-zlib-dir=$HOME/.rvm/usr,--with-readline-dir=$HOME/.rvm/usr,--with-openssl-dir=$HOME/.rvm/usr
$ rvm 1.9.2 --default

ちなみに以前のrubyに戻すにはrvm system

7. 試しに適当なライブラリがインストールできるかどうか確認

$ gem install kramdown

インストールしたパッケージが要らないなら確認した後でgem uninstall kramdownとかする

githubのインストール

インストール。

$ sudo apt-get install git-core git-gui git-doc 

SSHキーのインストール。ホストコンピュータから引っ張ってくる

cp ~/win_home/.ssh/id_rsa* .

試しにレポジトリ作成してコミット→成功

octopressのインストール

実はLinux導入しようと思ったのはこれを動かしたかったから。

octopressのページに書いてあるようにする

cloneはWindows上でやってるので、必要ライブラリのインストールのみ

cd ~/Dropbox/octopress/octopress
gem install bundle
bundle install

rake preview

Portablu Ubuntuのfirefox動かして

http://localhost:4000/

を見てみると、ちゃんと動いてる。

Windows上で動かしてるときはなんか変な警告

/Rakefile:79: warning: failed to set environment variable. Ruby 1.9.3 will raise SystemCallError in this case.

が出ていたのが直った。あとファイルの中に日本語いれるとどうやっても文字化けしてたのがlinux上ではUTF-8にすると、 きちんと表示された。\(^O^)/

Windowsで何故正常に動かないのかはもう少しrubyレベルが上がったら考えよう。

また、最初octopressのフォルダに入ると

'RROR: Unknown ruby interpreter version: '1.9.2

みたいな表示が出てrubyバージョンがsystemに戻ってたんですが、octopress/.rvmrcをいじってたら直った。 んで、最初こう書いてあったよな。という状態に戻してもエラーが出なくなった。よく分からないが動いてるならいいや。

空き容量を増やす

これに加えて、日本語環境セットアップ・ヘルパから

  • Adobe Reader/Adobe Flash Player
  • 各種日本語フォント

なんかをインストールしてたら6GB(作業前の空き容量は2.4GB)あったイメージファイルの残容量が 設定中300MBを切ってしまった。

設定途中だったので、とりあえずイメージファイルの容量を1GB増やしたが、この機会に要らないモノなどを消しておく。

Ubuntuの空き容量を増やす5つの方法などを 参考。

1. Office系、マルチメディア系のソフトのアンインストール

Windowsで使えるアプリは敢えて使わないだろう。ということで
アプリケーション→Ubuntuソフトセンターから

  • Brasero
  • Evolution
  • F-Spot
  • gimp
  • Hardware Drivers(jockey-gtk) ←間違えて実行したらエライことになりそう
  • OpenOffice.org Word Processor
  • OpenOffice.org Formula
  • Rhythmbox
  • サウンドレコーダ
  • 動画プレイヤー

を削除。200Mほど空き容量が増えた。 Synapticパッケージマネージャから要らなそうなアプリを削除するのは危険なのでやめとく。

あとは端末で使用していないライブラリを削除

$ sudo apt-get autoremove

色々インストール、アンインストールを繰り返していたからか115MBほど空き容量が増えた

2. パッケージのキャッシュを消す

端末で

$ du -sh /var/cache/apt/archives

としてパッケージのキャッシュを確認すると597MBも喰ってるので、これをクリア

$ sudo apt-get clean
3.Dropboxのキャッシュを消す
$ du -hc --max-depth=2 ~/

とするとDropbox/.dropbox.cacheが487MBも喰ってるので、これをクリア
ディレクトリごと削除したら駄目とどこかのページに書いてあったので

$ rm ~/Dropbox/.dropbox.cache/*/*

としてファイルを全部削除

結果

合計で1.5GBほど空き容量が増えた。

あと~/.rvm/srcが171MBあるのが気になる。多分コンパイル時に出来る中間ファイルを消せば100MBほど空き容量 が増えるような気がするが、危険な臭いがするのでやめておく。

2011年12月27日 (火)

Portable Ubuntu V4 slimLZM(on Ubuntu 10.04LTS)導入

前置き

最近rubyやvim、あとgithubなんかも使ってたりするときに思ってたんだけど、これらのツールって基本的に linuxを基本に考えられてるんで、Windows上で運用しようとすると何か嵌まりやすい。

ということでlinuxを入れようかとも思ったんだけど、linuxとのデュアルブートは何回かやってるけど結局 Windowsしか使わないことになるし、第一面倒くさい。

coLinuxというWindows上でlinux走らせるソフトが良さそうと思って、やっぱlinuxディストリビューションとい えば今はUbuntuでしょ。ということでcoLinuxインストールして、colinux に Ubuntu 10.04 をインストールす るとか見ながらUbuntu10.04をインストールしてみたけど、結局 Portable Ubuntuというのに行き着きました。

Portable Ubuntuを使えばcoLinuxのインストールやディストリビューションのインストール、グラフィカルログ インを行うために必要なLinux側のサーバー設定、Windows用のX Window Systemソフトの導入&設定もろもろを やらなくてもこれらが全部行われた状態をパッケージ化してあるので、導入がとっても簡単でした。

ちなみに環境はOS:Windows XP(SP3) PC:Thinkpad T61p(Core2Duo T9500) 内蔵無線LAN使用 です。

Portable Ubuntuについて

Portable UbuntuのダウンロードはSourceforgeのペー ジから。

フォルダが幾つかありますが、どうやらUbuntuのバージョンが違うようです

フォルダ名 Ubuntuバージョン
Version4 10.04LTS
TRES 9.10?
DOS 9.04?
UNO 8.04LTS

TRESとDOSは実際には動かしてないので、ネット検索した情報です(ubuntuのバージョンの順序的に間違いはない と思う)。

インストールはダウンロードしたファイルを実行すると、展開先を入力するとそこに「Portable Ubuntu~」みた いなフォルダが作成される。UNO版を最初デスクトップに展開したら動かなかったので、パスに日本語が 入ってるとまずいみたい。(空白が入ってるのは大丈夫)

最初何も考えずに一番ダウンロード数が多いUNOが一番いいのかな?と思って、 ビギナーズ Portable Ubuntu for Windows というページ見ながら 設定してたんだけど、レポジトリの情報が古くて(サポートが終了してるから?)、最近のソフトインストールするのが 大変なので、最新のPortable UbuntuであるV4 slimLZM(2011/09/13版)を使用します(10.04LTSのサポートは2013/4まで)

まずは実行

Portable Ubuntu V4 slimLZMをダウンロードして実行すると、展開先聞かれるので適当な所に展開す る(私はC:\に展開しました)。

で、展開先フォルダ\Portable_Ubuntu_V4_slim2\pubuntu.exeを実行。

ロゴが表示されて以下のような画面が立ち上がります。

まずはインターネットに繋げないと辛いので、ネット接続を確認するためにfirefoxを起動します。

ページが表示できればおk。出来なかったら結構大変。

V4版での設定ファイル(config\portable_ubuntu.conf)の[Network]のコメント見ながら試行錯誤する。

もしくはcoLinuxをインストールして、ネットなどを見ながら最小構成でどのような設定ならば動作するのかを確認 して、それをV4版での設定ファイルに反映・・・しようと思っても、UNO版と違って(TRES/DOSは 使用してないので知らない)confファイルがcoLinuxのconfファイルそのものではないので、そのままでは動かな い。
confファイルの編集で何とかするのか(出来るのか)、src\pubuntu.au3の199~202行目辺りを無理矢理書き換え るのかはご自由に。

イメージディスクの増量

ネット接続を確認できたら日本語化したいところですが、提供されてるイメージディスクはかなりパンパンの状 態で、日本語の・・・をインストールしてる段階で「残容量が少ないよ―」と警告が出てしまいます。

なので、まずイメージディスクの増量を行う必要があります。
2GBほど増やせば当座は凌げます。

なおパスワードの初期値は”123456”です。

簡単な方法

ビギナーズ Portable Ubuntu for Windows イメージ・ディスクの 増量 1の方法です。

ただし、イメージディスクの場所が(大体想像は付くと思いますが)

展開先フォルダ\\Portable_Ubuntu_V4_slim2\images

です。最初に移動するフォルダだけ変えればあとは同様にやっていけば良いです。

少し難しい方法

ビギナーズ Portable Ubuntu for Windows イメージ・ディスクの 増量 2の方法です。

設定ファイル(portable_ubuntu.conf)の構成がUNO版と違うので、少し手順が異なります

cd "展開先フォルダ\Portable_Ubuntu_V4_slim2\images"
fsutil file createnew dummy.img 128
fsutil file createnew rootfs_.img 新しいサイズ

とした上で(「展開先フォルダ」の部分は自分の環境に、「新しいサイズ」の部分は適当な数字 4GBなら 4294967296などに置き換えること)

展開先フォルダ\Portable_Ubuntu_V4_slim2\config\portable\_ubuntu.confの37行目(サブバージョンによっ て違うかも)辺り

file_system0=展開先フォルダ\Portable_Ubuntu_V4_slim2\images\dummy.img
file_system1=展開先フォルダ\Portable_Ubuntu_V4_slim2\images\rootfs_.img
#file_system0=some_drive:\path\some\file_system.img

とすれば1、Ubuntu上で/dev/cobd2→dummy.img、/dev/cobd3→rootfs_.imgとなるので、イメージ・ディスクの 増量 2ページ内「Step 3 Portable Ubuntu で新しいイメージディスクへ内容をコピー 」からは同様にやってしまっておkです。

Ubuntuの日本語化

あとはビギナーズ Portable Ubuntu for Windows を参考にやればさほ ど嵌まることはない筈。但し日本語化の操作が少し違う(勘で何とかなると思うけど)ので、やり方を書いておきます。

  1. パネルの「System」→「Administration」→「Language Support」を選択

  2. Languageタブの[Install/Remove Languages…]から”japanese”を選択しApply

日本語化1

  1. Textタブに移って言語をEnglish(United States)→日本語に変更し[Appply System-Wide…]

日本語化2

  1. 管理用パスワードを入力しておkボタンを押す

  2. Portable Ubuntuを再起動

で、メニューとかが日本語になります\(^O^)/

あとウチだけかもしれませんが、日本語化するとパネルfirefoxのアイコンがおかしくなります(起動自体は出来 る)。

一旦パネルから削除し、アプリケーション→インターネットのfirefoxウェブブラウザからパネルに追加すればおk(ついでに端末も追 加しておくといいかも)

その他雑記

イメージディスクの定期バックアップ

展開先フォルダ\Portable_Ubuntu_V4_slim2\image\rootfs.img

は定期的にバックアップしておきましょう。特にシステム関連の設定をいじる前、アップデートマネージャで アップデートする前、ソフトのインストール前はバックアップがあれば安心して?いじくり倒せます。

バックアップしてないと起動しなくなったときまた一からになるんで辛いです。

バックアップ方法は

  1. 名前を適当に変える
  2. ネットワーク上のどこかにコピーする
  3. 圧縮する

などがあります。私は圧縮して、NASに移動してます。

圧縮はALZipというソフトでEGG形式で圧縮してます。圧 縮率はそんなに高くないですが、圧縮が結構速いです。
圧縮率にこだわるなら現状多分7-zipが最強でしょうが、かなり時間がかかります。

(参考)デフォルトのrootfs.img(3670016000byte)を圧縮した場合

形式 圧縮後のサイズ 圧縮率 圧縮時間
egg 1718792966byte 46.8% 3:50
7-zip 1425087100byte 38.8% 15:13

※ 圧縮オプションはデフォルト。

メモリ割り当て

デフォルトの状態だと、メモリ割当量が256Mなので、結構動作が重たいです。

展開先フォルダ\Portable_Ubuntu_V4_slim2\config\portable_ubuntu.confの10行目(サブバージョンによって 違うかも)

mem=256

を変更します。
PCの搭載メモリとの相談だけど。ウチは物理的には8GB積んでる(PAE ON)んで、768で運用してます。 起動とかも含めて、結構快適になった気がする。
・・・タスクマネージャで見てもメモリをそんなに確保してないんだけど。もしかしてAWE APIに対応してるの かしらん?

あとスワップファイル容量(厳密にはテンポラリディスクかな?)変更は

swap_size=512

を変更します。windowsのTEMP環境変数フォルダに作られるので、RAMディスクに環境変数TEMPを設定しておく と、サクサクなのかも(ウチは最初からRAMディスク内に作られてるので違いが分からない)

パスワード変更

パスワードは初期状態では「123456」です。

ただテンキーないキーボードだと結構打ちにくいし、セキュリティ的にも新たなパスワードを設定しておくべき です。

Ubuntuの端末で

$ sudo passwd pubuntu

で変更可能。(sudoなしの場合、現在のパスワードを求められる)

Ubuntuは初期状態でrootアカウントのパスワードが存在しない(ロックされてる?)。この状態で、スーパーユー ザー権限でコマンド実行する際に求められるのはログインユーザのパスワードであるため、これでok・・・らし い。

cofsの追加

デフォルトではWindows上のCドライブのみcofs2としてマウントされてます。

で、これを追加するためには
展開先フォルダ\Portable_Ubuntu_V4_slim2\config\portable_ubuntu.confの45行目(サブバージョンによって 違うかも)

shared_folder0=c:\
shared_folder1=e:\

みたいにshare_folderx=~に記述するだけ。share_folder0→cofs2、share_folder1→cofs3という風にマッ ピングされる。

shared_folderの後の数字は

shared_folder0=c:\
shared_folder0=e:\

と数字が重複しても大丈夫みたいですが、バージョンアップすると仕様が変わるかもしれないんで、違う数字を ナンバリングしておく方が無難。

で、Portable Ubuntuを起動した後、Ubuntuの上側中央パネルの”場所”にcofs2、cofs3とかがあれば成功。

Ubuntu 10.04LTSではgnome-mountで自動マウントされるので、/etc/fstabに記述する必要はありません。

例えば上記のような設定例の場合、コマンドラインでWindows上のCドライブにアクセスしたい場合は”/media/cofs2”としてアクセスできます。
わかりやすい名前を付けたいのなら

ln -s /media/cofs2 ~/win_c

とシンボリックリンクを貼るのが無難だと思う。(gnome-mountの設定で名称を変えられるのかもしれないけど)

  1. file_system1だけ指定すればいいじゃん。と思うかもしれないが、実は file_system~となっている行をcobd2から順に割り当ててるだけなので駄目。勿論rootfs_.imgだけ指定して、コマンドラインのcobd3の部分をcobd2と置き換えてるのはおk。

続きを読む »

2011年12月19日 (月)

プロファイル再構築&firefox3.6→8&その他色々でサクサク

私はインターネットブラウザはFireFoxを使ってるんですが、これの動作が最近かなりもっさりとしてきました。一番気になったのはマウスジェスチャ(FireGesture)の動作が緩慢になってきたというかマウスジェスチャを認識しないケースが増えてきたこと。「前に戻ろう」として「右クリックしながら←」としてるのにコンテキストメニューが表示されると「いらっ」とします。まあゆっくりカーソル動かしたら認識するんですが、体に染みついたジェスチャ速度を変えるのはやっぱりストレス大。

ということで我慢の限界を超えたので、FireFoxの環境を再構築したらサクサク動くようになりました。それが嬉しかったので書いてみます

プロファイルの再構築

FireFoxをいつから使い出したか記憶にないんですが、多分Ver 1.x位から使用してます。PCの導入とか再インストール時には再設定が面倒なので、現在使用してるプロファイルフォルダ(Windows XPの場合C:\Documents and Settings\ username\Application Data\Mozilla\Firefox)のprofile.iniとかProfiles\xxxxxx.defaultフォルダをコピーして使ってるから、恐らく多分汚い状態になってるはずで、これがもっさりの原因の筈。

ということで新たにプロファイルを作って環境を再構築しようと思ったんですが、さすがに一からやるのは面倒くさすぎるので、
FEBE (Firefox Environment Backup Extension) を使用します。

インストール&FireFoxを再起動して設定画面を出します。

FEBE設定画面
※ 設定画面はFireFox8のものです。実際に作業したのはFireFox3.6でしたが、なんか画面がその時と違うのでバージョンによって違うのか?

プロファイルのバックアップもありますが、これを使っておかしい状態が引き継がれると元の木阿弥なので、今回は”selective”で必要なものだけバックアップしました。

FEBEはアドオン本体はバックアップしてくれるんですが、アドオンの設定はバックアップしてくれないみたいです。なので、私は設定のエクスポートに対応してるものはエクスポート、してないモノはアドオン設定画面のスクリーンショットを取りました(そんなにたくさんアドオン入れてないし)が、再構築終わった後に知ったんですが、FPBEと同作者によるOPIE(Ordered Preference Import/Export)というアドオンを使用すれば、アドオンの設定もバックアップできるようです。

今開いてるタブをバックアップしたいならSession Managerを使用します。[ツール|セッションマネージャ|セッションマネージャ|現在のウィンドウを保存]として、適当な名前を付けて保存しておきます。

次に新しいプロファイルを作成します「スタート」→「ファイル名を指定して実行」で

"C:\Program Files\Mozilla Firefox\firefox.exe" /P

のように”/P”オプションを付けて起動します(インストールパスは違うかもしれないんで、[参照]ボタンで選択して下さい)。
すると、以下のような画面が出るので、[新しいプロファイルを作成]として、適当な名前を入力します。

プロファイル選択画面

なお前のプロファイルに戻したい場合も同様に”/P”オプションを付けて起動したら選択画面が出るので、以前のプロファイルを選択・・・
・・・出来れば良いんですが、残念ながら新しいプロファイル名しか出ません(ウチだけ?)

仕方ないので’C:\Documents and Settings\ username\Application Data\Mozilla\Firefox\default.ini’を編集します(usernameはアカウント名になります。またパスはWindows XPのモノです。Windows7の場合’C:\Users\ username\AppData\Roaming\Mozilla\FireFox\default.ini’かな?違うかもしれないんでググって下さい(^^ゞ)。

プロファイル編集画面

新しいプロファイルにするとアドオンも全てなくなってるので、まずはFEBEインストール(ネットから取ってきても良いし、FEBEでバックアップしたフォルダからxpiを新しいプロファイルフォルダにコピーしてもいい)して、バックアップしたデータを1つずつ復元していきます。

あとはアドオンの設定とセッションの保存をしたならセッション情報を元に戻せばOK。
なんとなく軽くなった・・・気がする。

FireFox8のインストール

自動更新機能をONにしてるので、FireFox8を入れろという通知がよく出てくる(最近出なくなったけど)。今まで使ってたのはFireFox 3.6ですが、いくら何でも最新バージョンから置いて行かれすぎ(ていうか最近IEのバージョンに追いつくためかどうかは知らないけどやたらメジャーバージョンが上がるよね)なので、そろそろバージョンアップしないといけないなと思ってたんですが、どうしてもバージョンアップに踏み切れなかったのは

  1. 使っているテーマ(AvantGarde Nightlife)が対応してない
  2. 対応してないアドオンがある(DropFox、XUL/Migemo、あとサブマシン(CPU:Atom)で必要なBarTab)

のが主な理由。

テーマはまあ対応してるテーマの中から好みに合うのを見つければいいので、そんなに重要ではない。(試すのが面倒だっただけ。なんかプロファイルの再構築して気分がスッキリしたので探そうという意欲が出てきた(^^ゞ)

アドオンはXUL/Migemoは入れたもののあまり活用してないんで、動かなくても良いんですが(ぉぃ。問題はBarTabとDropFoxです。
調べてみるとBarTabはFireFox4の標準機能で実現可能らしいので、あとはDropFox。

私は複数マシンのFireFoxの設定はDropBoxというオンラインストレージサービスを使ってプロファイルフォルダを同期しています。DropBoxの紹介ページはゴマンとあるのでそれを参照してもらえばいいんですが、要はDropBoxフォルダ(マイドキュメント\DropBoxとか)の内容を複数マシンで完全同期してくれつつ、セキュリティもしっかりしてるので、公開しない設定のフォルダは他人に見られることは(多分)ないという夢のようなツールです。メーラーのメールボックスとかをそこに置いておくと複数マシンでメールボックスを共有したりすることも可能だったりします。

で、そのDropBoxを使ってるんですが、セッション情報はそれぞれのマシンで保持したい(これはセッションマネージャで可能)&WindowsとLinux(あまり使わないけど)間でファイルシステムが違うことによる不具合(Cacheフォルダ、セッション情報保存フォルダなど)を吸収するためにDropFoxというアドオンを使用しています。

ですがこのDropBoxによるプロファイル共有は便利なんですが、共有してるマシン同士で同時にFireFoxを使用すると衝突が起きるファイルがあるという問題があります。あとFireFoxのプロファイルがおかしくなったのはこのDropBox共有が原因ではないかと睨んでるので、違う方法を模索したい。

ということで調査したところ

  1. FireFox4以降ではFireFox Syncというアドオンが存在し、これがブックマーク、パスワード、履歴などを同期してくれる
  2. アドオンの同期についてはFEBE+OPIEで実現できそう(そんなにガンガンとアドオン入れる人ではないので)

でなんかいけそうな気がしてきたので、FireFox8にアップデートしてみました。(前置きが長い)

アップデート自体はFireFoxの[ヘルプ|新しいアップデートを確認](だったかな?)で行えば良いので簡単。

FireFoxの公式ページとかに「FireFox8になると高速!」とかって謳ってあって「はいはい高速高速。どうせ眉唾でしょ」と高をくくってたんですが、

確かに起動が劇的にスムーズになった。

私は常に数十のタブを開いた状態で作業してて、そのタブ状態を起動時に復元させてる人なので起動したら使えるようになるまで結構時間がかかるのが常だったんですが、これがかなり軽減されてる。

まあ厳密に言うとページの読み込みが早くなったというより(読み込み自体も高速化されてる気がするけど)、読み込み処理が分散&低負荷化されてるので、あまりストレスを感じないという感じ。

旧バージョン使ってる人で私みたいにたくさんのタブを開いてる人はバージョンアップするといいかも。

Tab Mix Plusのアンインストール

ついでなので、前からアンインストールしたかった便利だけど重いと評判?の「Tab Mix Plus」をアンインストールしてみます。

私のタブ管理アドオンは「ツリー型タブ」を使用してます。タブの親子関係を取ることが出来て、たくさんタブを開いていてもタブを探すのが不便ということがなくなって、もはや手放せません。

で、一方で「Tab Mix Plus」もインストールしてます。タブ管理は「ツリー型タブ」、セッション管理は「Session Manager」で代替が効いてるんですが、

  1. 別のサイトのリンクを別タブで開く
  2. ブックマークフォルダを別タブで開く
  3. ロケーションバーで入力したページを別タブで開く
  4. 閉じたタブを元に戻すコンテキストメニュー

の機能に馴染みすぎてて、なかなか捨てきれません。 操作上の不都合(機能がバッティングして動作が怪しいとか)は特に感じないんで、今のままで良いといえば良いんで、今まで放置してたんですが、やっぱり同じ種類のアドオンを複数インストールしてるのは気持ち悪い。

どうやら「UserChromeJS」を使用すれば出来そうということで、有志が作られたスクリプトページが悉くリンク切れ(ToT)。

引き続き探しても良かったんですが、なんかアドオンないのかな―と探してみると

  1. リンクを新しいタブで開く (Open Link in New Tab)
  2. ブックマークを新しいタブで開く (Open Bookmarks in New Tab)
  3. ロケーションバーから新しいタブを開く (New Tab from Location Bar)

というまさに私のためにあるようなアドオンを発見!!

しかも全部「ツリー型タブ」の作者さん(Piro (piro_or)さん)作みたいです。

同じ事考えてた人多かったんだな―。とちょっと感慨にふけりつつ3つともインストール。

ちなみに閉じたタブを元に戻すコンテキストメニューは「Undo Closed Tabs Button」というのがありますが、インストールせずにマウスジェスチャアドオン(Fire Gestureにジェスチャ追加して対応しました←今まで動かないなーと思ってたら「閉じたウィンドウを元に戻す」所にジェスチャ設定してた(^^ゞ)

これでめでたくTab Mix Plusをアンインストールできるんですが、Tab Mix Plusのその他の機能を知らずに使ってるかもしれないんで、とりあえず無効化してしばらく様子を見ます。

無効化してブラウジングしてると、なんか動作がサクサクになった気がする。
いっぱい色んな事をやったので、最早何が今まで悪かったのかは分かりませんが、とりあえず快適な環境になったんで良しとします。

あとブックマークやロケーションバーでタブを開くとき今のタブの子としてではなく、末尾に追加して欲しいなと思ってたんですが(多分Tab Mix Plusでは出来ない)、上記アドオンを入れて設定したらそのように出来ました!!うーん。快適(^▽^)

なんか調子に乗って更に4つくらいアドオンをインストールしてしまった。
あまりインストールするとまた遅くなりそうなんで、これくらいにしておこう・・・。

2011年12月18日 (日)

eoblogをMarkdown記法で書く3(プレビュー)

の続きです。

Markdown(+kramdown拡張)記法で書くといってもやっぱりHTML表示もしたいですよね。
まあ昨日のHTMLでも一応表示は出来るのは出来る(IEやchromeでは文字化けするからエンコードをUTF-8にしないと駄目だけど)んですが、極力ブログ上の見た目と同じになるようにするのが目的です。

準備

まずローカルの適当なフォルダを基準フォルダに決めて、その下にSyntax Highlighterからダウンロードしたファイルを解凍したファイル群をコピーします(最低限stylesとscriptsフォルダは必要)。フォルダはどこでも良いですが、後であまりスクリプトソース修正したくない人はlocal/syntaxに入れといて下さい。

フォルダイメージ

次にスタイルシートファイルをサーバーよりゲットします。HTMLソース表示して、それっぽいスタイルシートファイル(.css)を保存します(eoblogの場合はstyles.css)。保存する場所はどこでもいいですが、後であまりスクリプトソース修正したくない人はlocal/css1にstyles.cssという名前で保存しといて下さい。

スタイルシートファイルを参照して、画像ファイルとか他にインポートしてるスタイルシートファイルがあるなら、それもローカルに保存します。

補足

eoblogのstyles.cssは

@import url(/.shared-asp26/themes/common/base-weblog.css);

のようなcssファイルをインポートしてます。(テーマを使用してる場合はテーマ用のcssファイルもある。)

これの場所は http://xxx.blog.eonet.jp/.shared-asp26/themes/common/base-weblog.css から保存します。まあ当然といえば当然なんですが・・・。
あと保存したstyles.cssの上インポートするスタイルシートの場所を書き換えるのをお忘れなく(styles.cssとbase-weblog.cssを同じフォルダに置く場合@import(base-weblog.css)でOK)

テーマ用も同様です。テーマ用の場合使用してる画像ファイル(.png)を保存しておくと見た目がだいぶ近づきます。

スクリプトソース

# -*- coding: utf-8 -*-
require 'rubygems'
require 'kramdown'
require 'optparse'
require 'date'

@option_hash = {
  :tabwidth => 4,
  :blogmode => true,
  :date_fmt => "%Y/%m/%d (%a)",
  :title => "ブログタイトル",
  :subtitle => "ブログ副題",
  }

#markdown記法をHTML(body)に変換する
#返り値:body文字列
def mkd2htmlbody(text)
  text.encode!("UTF-8")
  #text = text.lines.to_a[1..-1].join # Just ignore the first line
  body = Kramdown::Document.new(text).to_html
  if ( @option_hash[:blogmode] )
    if (false)
      # <pre class="brush~><code>~</code></pre>
      # の場合、<code>、</code>が邪魔なので取り除く
      # こちらを使う場合、SyntaxHighlighter.config.tagName = "code"を消すこと
      body = body.gsub(\
          %r!<pre[\s\t]+([^<>]*?)class[\s\t]*="brush(.*?)>[\s\t\r\n]*<code>(.+?)</code>[\s\t\r\n]*</pre>!mi,\
          '<pre \1class="brush\2>\3</pre>')
    else
      # <pre class="brush~><code>~</code></pre>を
      # <pre><code class="brush~>~</code></pre>に変更
      body = body.gsub(%r!<pre[\s\t]+([^<>]*?)class[\s\t]*="brush(.+?)>[\s\t\r\n]*<code>(.+?)</code>[\s\t\r\n]*</pre>!mi){|match|
        strg = "<pre><code #{$1}class=\"brush#{$2}>#{$3}</code></pre>"
        match = strg
      }
    end
  end
  #<pre>~</pre>内のTABを取り除く。タブ幅はtabwidthで与える
  body = body.split(/\n/).map {|line|
    if (/<pre/ === line) .. (/<\/pre>/ === line) 
      line.gsub(/\t/, "\s"*@option_hash[:tabwidth])
    else
      line
    end
  }.join "\n"
  str_h1 = nil
  # H1→消去 H2→H4 H3→H5 H4→H6に変更する
  if ( @option_hash[:blogmode] )
    #H1消去
    body = body.gsub(%r!<h1.*?>(.+?)</h1>!i, "")
    str_h1 = $1
    #
    for i in [4,3,2]
      body = body.gsub(/<h#{i}(.+?)<\/h#{i}>/,"<h#{i+2}\\1<\/h#{i+2}>")
    end
  end
  return body, str_h1
end

def mkd2htmlbodyfile(inputname, outputname)
  sbody = nil
  File.open(inputname, "r") { |file_in|
    sbody  = mkd2htmlbody(file_in.read)
  }
  #outputname = 1 if (outputname == nil)
  File.open(outputname, "w") { |file_ou|
    file_ou.puts sbody
  }
end

def mkd2bloghtmlfile(inputname, outputname)
  sbody, h1_str = nil
  
  File.open(inputname, "r") { |file_in|
    sbody, h1_str = mkd2htmlbody(file_in.read)
  }
  #outputname = 1 if (outputname == nil)
  File.open(outputname, "w") { |file_ou|
    #inputnameから日付を取得する
    date_match = nil
    date_match = $1 if (File.basename(inputname) =~ /(^[0-9]+)/)
    dt = nil
    dt_today = Date.today()
    if (date_match == nil)
      dt = dt_today
    elsif (date_match.length == 2)    #日付を表すとする
      dt = Date.new(dt_today.year, dt_today.month, date_match.to_i)
    elsif (date_match.length == 4)    #月日を表すとする
      dt = Date.new(dt_today.year, date_match[0,2].to_i, date_match[2,2].to_i)
    elsif (date_match.length == 6)    #年月日を表すとする
      year = dt_today.year/100*100
      year += date_match[0,2].to_i
      dt = Date.new(year, date_match[2,2].to_i, date_match[4,2].to_i)
    elsif (date_match.length == 8)    #年月日を表すとする
      dt = Date.new(date_match[0,4].to_i, date_match[4,2].to_i, date_match[6,2].to_i)
    end
    str_dt = @option_hash[:date_fmt].to_s.gsub(/\#\{(.+?)\}/){|match|
      match = eval($1)
    }
    str_dt = dt.strftime(str_dt)
    file_ou.puts <<-EOF.gsub(/^[\s\t]+\|/, '') 
    |<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  
    |     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    |<html>
    |<head>
    |<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    |<title>#{@option_hash[:title]}(preview)</title>
    |<!-- Style Sheet -->
    |<link rel="stylesheet" href="./local/css1/styles.css" type="text/css" media="screen" />
    |</head>
    |<body class="layout-two-column-right">
    |<div id="container">
    |  <div id="container-inner" class="pkg">
    |    <div id="banner">
    |     <div id="banner-inner" class="pkg">
    |       <h1 id="banner-header">#{@option_hash[:title]}</h1>
    |       <h2 id="banner-description">#{@option_hash[:subtitle]}</h2>
    |     </div>
    |  </div>
    |   <div id="pagebody">
    |    <div id="pagebody-inner" class="pkg">
    |      <div id="alpha">
    |        <div id="alpha-inner" class="pkg">    
    |         <h2 class="date-header">#{str_dt}</h2>
    |         <div class="entry" id="entry-43937939">
    |           <h3 class="entry-header">#{h1_str}</h3>
    |           <div class="entry-content">
    |             <div class="entry-body">
    EOF
    file_ou.puts sbody
    file_ou.puts <<-EOF.gsub(/^[\s\t]+\|/, '') 
    |             </div>
    |           </div>
    |         </div>
    |       </div>
    |     </div>
    |   </div>
    | </div>
    |</div>
    |</body>
    |<!-- head内だと動作しないみたい。公式だとこの位置に書いてあるのでここに記述 -->
    |<!-- Syntax Highlighter -->
    |<script type="text/javascript" src="./local/syntax/scripts/shCore.js"></script>
    |<script type="text/javascript" src="./local/syntax/scripts/shAutoloader.js"></script>
    |<link type="text/css" rel="stylesheet" href="./local/syntax/styles/shCore.css"/>
    |<link type="text/css" rel="stylesheet" href="./local/syntax/styles/shThemeFadeToGrey.css"/>
    |<script type="text/javascript">
    |<!-- configulation Autoloadの前でないと駄目? -->
    |SyntaxHighlighter.defaults['toolbar'] = false;     <!--お好みで-->
    |SyntaxHighlighter.defaults['auto-links'] = false;  <!--お好みで-->
    |SyntaxHighlighter.config.tagName = "code";
    |
    |function path()
    |{
    |  var args = arguments,
    |      result = []
    |      ;
    |       
    |  for(var i = 0; i < args.length; i++)
    |      result.push(args[i].replace('@', './local/syntax/scripts/'));
    |       
    |  return result
    |};
    |SyntaxHighlighter.autoloader.apply(null, path(
    |  'applescript            @shBrushAppleScript.js',
    |  'actionscript3 as3      @shBrushAS3.js',
    |  'bash shell             @shBrushBash.js',
    |  'coldfusion cf          @shBrushColdFusion.js',
    |  'cpp c                  @shBrushCpp.js',
    |  'c# c-sharp csharp      @shBrushCSharp.js',
    |  'css                    @shBrushCss.js',
    |  'delphi pascal          @shBrushDelphi.js',
    |  'diff patch pas         @shBrushDiff.js',
    |  'erl erlang             @shBrushErlang.js',
    |  'groovy                 @shBrushGroovy.js',
    |  'java                   @shBrushJava.js',
    |  'jfx javafx             @shBrushJavaFX.js',
    |  'js jscript javascript  @shBrushJScript.js',
    |  'perl pl                @shBrushPerl.js',
    |  'php                    @shBrushPhp.js',
    |  'text plain             @shBrushPlain.js',
    |  'py python              @shBrushPython.js',
    |  'ruby rails ror rb      @shBrushRuby.js',
    |  'sass scss              @shBrushSass.js',
    |  'scala                  @shBrushScala.js',
    |  'sql                    @shBrushSql.js',
    |  'vb vbnet               @shBrushVb.js',
    |  'xml xhtml xslt html    @shBrushXml.js'
    |));
    |SyntaxHighlighter.all();
    |</script>
    |</html>
    EOF
  }
end

def mkd2htmlfile(inputname, outputname)
  sbody = nil
  
  File.open(inputname, "r") { |file_in|
    sbody = mkd2htmlbody(file_in.read)
  }
  #output!
  #outputname = 1 if (outputname == nil)
  File.open(outputname, "w") { |file_ou|
    file_ou.puts <<-EOF.gsub(/^[\s\t]+\|/, '') 
    |<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  
    |     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    |<html>
    |<head>
    |<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    |<title>#{@option_hash[:title]}(preview)</title>
    |</head>
    |<body>
    EOF
    file_ou.puts sbody
    file_ou.puts <<-EOF.gsub(/^[\s\t]+\|/, '') 
    |</body>
    |</html>
    EOF
  }
end

##### main ######
OptionParser.new{|opt|
  opt.on('-f','--full', "make full html file") {|v| @option_hash[:full] = v}
  opt.on('-w VAL', '--tabwidth VAL', /[0-9]+/, "<pre>tag expand tabwidth(default:4)"){|v| @option_hash[:tabwidth] = v}
  opt.on('-d VAL', '--date_fmt VAL', "Date.strftime Format String"){|v| 
    @option_hash[:date_fmt] = v
    @option_hash[:date_fmt].encode!("UTF-8")
    }
  opt.on('--[no-]blog', "blog mode(default:true)"){|v| @option_hash[:blogmode] = v}
  opt.on('-t VAL', '--title VAL', "HTML&blog's title"){|v| 
    @option_hash[:title] = v
    @option_hash[:title].encode!("UTF-8")
    }
  opt.on('-s VAL', '--sub-title VAL', "blog's sub-title"){|v| 
    @option_hash[:subtitle] = v
    @option_hash[:subtitle].encode!("UTF-8")
    }
  opt.parse!(ARGV)
}
#p @option_hash

if (@option_hash[:full])
  if (@option_hash[:blogmode])
    mkd2bloghtmlfile(ARGV[0],ARGV[1])
  else
    mkd2htmlfile(ARGV[0],ARGV[1])
  end  
else
  mkd2htmlbodyfile(ARGV[0], ARGV[1])
end

通常、107~128行目辺りを自分の環境に合うように調整すればOKだと思う。
必要なら132~192行目辺りも修正して下さい(特にSyntax Highlighterの相対パスが違う場合)。

自己満足の世界なんでどこまでやるかはご自由に。ブログのウィジェットとかまでは埋め込んでません。

$ ruby mkd2html -f -t "nukinoの日記" -s "パソコン関係の備忘録" 111218.mkd 111218.html

みたいな感じで実行してやると以下のようなプレビュー画面になります

プレビュー画面1

テーマ:Morgan Noirの場合のスタイルシートファイルと必要な画像ファイルをローカルに入れておくと以下のような感じ

プレビュー画面2

スクリプトの説明

ファイル名から日付の取得(80~100行目)

渡されたMarkdownファイルのファイル名によって日付を取得します。

現在は見出しにしか使われてませんが、イメージのパス書くの面倒くさくなってきたので、スクリプト内で置換する機能をつくる際に使用予定です。

先頭から何文字が数字かによって意味が異なります。

現在の日付が2011/12/18だとすると、以下のようなルールになります

  1. 入力ファイル名の先頭2文字が数字(13_hoge.mkdなど)
    年=現在、月=現在、日=13と評価(2011/12/13)
  2. 入力ファイル名の先頭4文字が数字(1113_hoge.mkdなど)
    年=現在、月=11、日=13と評価(2011/11/13)
  3. 入力ファイル名の先頭6文字が数字(121113_hoge.mkdなど)
    年(下2桁)=12、月=11、日=13と評価(2012/11/13)
  4. 入力ファイル名の先頭8文字が数字(20121113_hoge.mkdなど)
    年=2012、月=11、日=13と評価(2012/11/13)
5.それ以外
年=現在、月=現在、日=現在と評価(2011/12/18)
Syntax Highlighter用のJavaScript定義について

<head>内に記述すると動かなかったので、</body>の後にまとめて書いてあります。(Syntax Highlightr公式のページソースがそうなってたので)

<script type="text/javascript" src="~">みたいにソースコード埋め込みの部分は<head>内に書くのが流儀なのかもしれませんが、その辺専門じゃないんでよく分からなかったりします(^^ゞ

あと昨日の導入例の際には言及しませんでしたが、configurationはAutoloadの前でないと動きませんでした(Syntax Highlighter 3.0.83)。仕様かバグかは分かりません。

スクリプトの使い方

基本的には昨日のと同じ

$ ruby mkd2html [option] input_mkd_file output_html_file

こんな感じで実行します。
入力ファイルは規定の外部エンコーディングEncoding.default_externalのファイルを指定します。Windows XPなら’Windows-31J’(cp932、Shift-JIS)で書いたファイルを渡します。出力のHTMLファイルはUTF-8エンコーディングで出力されます。

オプションの説明
-f、–full
<HTML><HEAD><BODY>タグなどを付加した本当のHTMLファイルを作ります。
-w VAL、–tabwidth VAL
<pre>タグ内のタブをスペースに変換する際のタブ幅を指定します。
例:-w 4
-d VAL、–date_fmt VAL
ファイル名から日付取得した日付を見出し文字列にする際のフォーマット文字列を指定します。rubyドキュメントのDate#strftime参照。
‘#{xxx}`と書くと式展開される(多分)。規定の外部エンコーディング文字列で指定する
例:-d “%Y年%m月%d日(#{%w(日 月 火 水 木 金 土)[dt.wday]})”
–[no-]blog
option  
–blog -fが指定されてるとき、ブログ表示に近づける完全なHTMLファイルを作成します
  -fが指定されてないとき、ブログアップ用表記(見出しシフトなど)で作成します
–no-blog kramdown変換だけ行います(<pre>タグ内のタブ→スペース変換は行う)
-t VAL、–title VAL
ブログタイトルを指定する。規定の外部エンコーディング文字列で指定する 例:-t “Archive of nukino”
-s VAL、–sub-title VAL
ブログサブタイトルを指定する。規定の外部エンコーディング文字列で指定する 例:-s “パソコン関係の備忘録”
使い方のヒント

私は今のところこんなバッチファイルを作って運用してます

ruby mkd2html.rb -t "Archive of  nukino" -s "パソコン、プログラム関係の備忘録"  %1 %2 %3
if %ERRORLEVEL%==0 goto SUCCESS
PAUSE
EXIT
:SUCCESS
if "%1"=="-f" GOTO FULL
notepad "%2"
EXIT
:FULL

1.作業中プレビューしたいとき

$ mkd2html.bat -f 111218.mkd 111218.html

とするとfirefoxでプレビュー出来ます。

2.ブログにアップするときは

$ mkd2html.bat 111218.mkd 111218.html

とすると、notepad が起動するのでコピペします。ちなみに一番最後に記事タイトル(除去されたH1見出し)がくっついてるので、これを記事タイトルの方へコピペします。

vim使いの場合、Markdownファイルがカレントバッファの状態で

:!start mkd2html.bat % %:t:r.html
:!start mkd2html.bat -f % %:t:r.html

とかするとファイル名打たなくて済むんで便利です。

quickrun.vimとか導入するともっと便利になるのかもしれません。

Internet Explorer使用時の注意

Internet ExplorerでHTMLファイルを閲覧しようとすると

フォルダイメージ

みたいな表示が出て鬱陶しい!という人は

  • Internet Explorer以外のブラウザを使う(ぉぃ

または

  • [ツール インターネットオプション]の詳細設定ページの
    • セキュリティ → マイコンピュータでのCDのアクティブ コンテンツの実行を許可する(不要かも)
    • セキュリティ → マイコンピュータのファイルでのアクティブコンテンツの実行を許可する

    の2つにチェックを入れる
    フォルダイメージ

のどれかで対策して下さい。


今日はここまで。あとはイメージ(画像)系をもう少しだけ便利にする予定。

2011年12月17日 (土)

eoblogをMarkdown記法で書く2(SyntaxHighlighter導入)

昨日の記事(eoblogをMarkdown記法で書く)の続き。

見た目的な問題からソースコードを構文強調表示してくれるスクリプトの導入を行います。またkramdownと組み合わせたときの問題点を修正してます。

構文強調表示JavaScript

ソースコードを載せるとき、普通に<pre>タグだけではこんな感じになってしまい、味気ないです(カスタムCSS使用して枠は出してるけど)。

OptionParser.new{|opt|
  opt.on('-f','--full') {|v| @option_hash[:full] = v}        # オプション引数 なし
  opt.parse!(ARGV)
}
p @option_hash

調べてみると、構文強調表示するJavaScriptがいくつかあるみたい。

  1. Markdown記法(kramdown)で作成するので、<pre>または<code>タグで装飾されてる
  2. Ruby、JavaScript、C/C++、できればHTMLの構文強調ができる
  3. 行番号が表示できる。開始の行番号が指定できるのが望ましい
  4. <ol><li>で行番号実現してるのは嫌(HTMLソースが汚い。コピペしにくい)
  5. ソースコードの折り畳み(出来れば任意位置)ができるのがいい

以上の条件で探してみた結果Syntax Highlighterが良さげなので、これを導入してみます(任意位置の折り畳みは出来ないけど)なお今回導入したのは 3.0.83 です。バージョンが違ってたりすると導入方法が微妙に異なります。また同じSyntax Highlighterという名前の別のJava Scriptなんかもあったりして、調べててかなり混乱しました(^^ゞ

Syntax Highlighter ダウンロードとサーバへのアップロード

Syntax Highlighterのダウンロードページからダウンロードして、解凍します。

解凍画面

解凍すると、上のようなフォルダやファイルができます。重要なのは

scripts
各言語の構文定義JavaScriptや本体JavaScriptが入ったフォルダ
styles
デザインを決めるCSSファイルの入ったフォルダ

の2つ。とりあえず何も考えずにこの2つのフォルダを適当な場所にアップロードします。

eoblogの場合、コントロールパネル→ファイルで操作します(下図参照)

ファイル操作

イメージを見れば分かりますが、私はホーム/default/syntaxを作成し、その下にscripts、stylesフォルダを作成してそれぞれのファイルをアップしました。

HTMLコードの記述

次にブログ上で使えるようにするためカスタムHTMLコードを記述します。
eoblogの場合、「ブログ」→「デザイン」→「レイアウトを変更」を選択し、「モジュールの追加」をクリックします。

モジュール追加

そして、HTMLコードを記述する(モジュールの名前は何でもいい)んですが、記述の方法は2通りあります。

1.直接使用する言語のJavaScriptを埋め込む(ver 2.x方式)

<script type="text/javascript" src="$YourUploadPath$/scripts/shCore.js"></script>
<!--使用する言語のjsファイルを記述 start-->
<script type="text/javascript" src="$YourUploadPath$/scripts/shBrushJScript.js"></script>
<script type="text/javascript" src="$YourUploadPath$/scripts/shBrushRuby.js"></script>
<script type="text/javascript" src="$YourUploadPath$/scripts/shBrushXml.js"></script>
<script type="text/javascript" src="$YourUploadPath$/scripts/shBrushCpp.js"></script>
<!--使用する言語のjsファイルを記述 end-->
<link type="text/css" rel="stylesheet" href="$YourUploadPath$/styles/shCore.css"/>
<!--使用するCSSファイル(stylesフォルダのshTheme~のどれか)を指定 -->
<link type="text/css" rel="stylesheet" href="$YourUploadPath$/styles/shThemeFadeToGrey.css"/>
<script type="text/javascript">
<!--SyntaxHighlighter.config.tagName = "code";     「スクリプトの作成」参照-->
SyntaxHighlighter.defaults['toolbar'] = false;     <!--お好みで-->
SyntaxHighlighter.defaults['auto-links'] = false;  <!--お好みで-->
SyntaxHighlighter.all();                           <!--必ず必要-->
</script>

言語とJavaScriptの関係についてはSyntax Highlighter(公式)のSyntaxesを参照して下さい。(ファイル名でだいたい分かりますが・・・。)

2.Autoloaderを使用する(ver 3.x方式)

<script type="text/javascript" src="$YourUploadPath$/syntax/scripts/shCore.js"></script>
<script type="text/javascript" src="$YourUploadPath$/syntax/scripts/shAutoloader.js"></script>
<link type="text/css" rel="stylesheet" href="$YourUploadPath$/syntax/styles/shCore.css"/>
<!--使用するCSSファイル(stylesフォルダのshTheme~のどれか)を指定 -->
<link type="text/css" rel="stylesheet" href="$YourUploadPath$/syntax/styles/shThemeFadeToGrey.css"/>
<script type="text/javascript">
<!--SyntaxHighlighter.config.tagName = "code";     「スクリプトの作成」参照-->
SyntaxHighlighter.defaults['toolbar'] = false;     <!--お好みで-->
SyntaxHighlighter.defaults['auto-links'] = false;  <!--お好みで-->

function path()
{
  var args = arguments,
      result = []
      ;
       
  for(var i = 0; i < args.length; i++)
      result.push(args[i].replace('@', '$YourUploadPath$/syntax/scripts/'));
       
  return result
};
SyntaxHighlighter.autoloader.apply(null, path(
  'applescript            @shBrushAppleScript.js',
  'actionscript3 as3      @shBrushAS3.js',
  'bash shell             @shBrushBash.js',
  'coldfusion cf          @shBrushColdFusion.js',
  'cpp c                  @shBrushCpp.js',
  'c# c-sharp csharp      @shBrushCSharp.js',
  'css                    @shBrushCss.js',
  'delphi pascal          @shBrushDelphi.js',
  'diff patch pas         @shBrushDiff.js',
  'erl erlang             @shBrushErlang.js',
  'groovy                 @shBrushGroovy.js',
  'java                   @shBrushJava.js',
  'jfx javafx             @shBrushJavaFX.js',
  'js jscript javascript  @shBrushJScript.js',
  'perl pl                @shBrushPerl.js',
  'php                    @shBrushPhp.js',
  'text plain             @shBrushPlain.js',
  'py python              @shBrushPython.js',
  'ruby rails ror rb      @shBrushRuby.js',
  'sass scss              @shBrushSass.js',
  'scala                  @shBrushScala.js',
  'sql                    @shBrushSql.js',
  'vb vbnet               @shBrushVb.js',
  'xml xhtml xslt html    @shBrushXml.js'
));
SyntaxHighlighter.all();                           <!--必ず必要-->
</script>

$YourUploadPath$はscriptsやstylesをアップしたURL(http://~)で置換して下さい
ブログサービスに依るかもしれませんが、相対パス表記は駄目です。

どちらを使用しても大丈夫ですが、「Autoloaderを使用する」方はページ内で使用してる言語定義JavaScriptを動的にロードするみたいなんでお奨めです(表示が速い・・・のかな?)。なお<head>部分しかいじれないブログサービスの場合はAutoloaderを使用しない従来方式の方がいいような気がします(後述しますが、プレビュー時にもSyntax Highlighter使用しようとして<head>の最後の部分に上記コードを入れてたら上手く動かなかったので)。

書き方

<pre class="brush: ruby">
OptionParser.new{|opt|
  opt.on('-f','--full') {|v| @option_hash[:full] = v}        # オプション引数 なし
  opt.parse!(ARGV)
}
p @option_hash
</pre>

のように書けば

OptionParser.new{|opt|
  opt.on('-f','--full') {|v| @option_hash[:full] = v}        # オプション引数 なし
  opt.parse!(ARGV)
}
p @option_hash

のように表示されます1

また、タイトルを付けることも可能です。

<pre class="brush: ruby" title="sample">
OptionParser.new{|opt|
  opt.on('-f','--full') {|v| @option_hash[:full] = v}        # オプション引数 なし
  opt.parse!(ARGV)
}
p @option_hash
</pre>

表示はこんな感じ。

OptionParser.new{|opt|
  opt.on('-f','--full') {|v| @option_hash[:full] = v}        # オプション引数 なし
  opt.parse!(ARGV)
}
p @option_hash

その他指定できるパラメータの詳細については Syntax Highlighter公式のconfiguration を参照して下さい。

日本語のページなら SyntaxHighlighter - ソースコードを見やすく表示させるJavaScript(3) などが詳しいです(ver 2.x系の説明ですが、この辺りは恐らく同じです)

Markdown記法の+kramdown拡張ではブロックレベル属性の場合、{: xxx=yyy}をブロックの前に記述すると属性を指定できるので

{: class="brush:ruby"}
~~~
OptionParser.new{|opt|
  opt.on('-f','--full') {|v| @option_hash[:full] = v}        # オプション引数 なし
  opt.parse!(ARGV)
}
p @option_hash
~~~

もしくは

{: class="brush:ruby"}
    OptionParser.new{|opt|
      opt.on('-f','--full') {|v| @option_hash[:full] = v}        # オプション引数 なし
      opt.parse!(ARGV)
    }
    p @option_hash

と書けばOKだと思ってたんですが、これだと<code></code>が表示されます。

<code>
OptionParser.new{|opt|
  opt.on('-f','--full') {|v| @option_hash[:full] = v}        # オプション引数 なし
  opt.parse!(ARGV)
}
p @option_hash
</code>

こんな感じ2。毎回置換するのも鬱陶しいので、スクリプトを作って対策します。

スクリプトの作成

で、対策案ですが

  1. <pre class="brush:~">という表記の時、 <code></code>を除去する

  2. <pre class="brush:~">という表記の時、属性を<code>タグの方へ移す。

のいずれかが考えられます。HTMLマークアップ的には「2.」の方が本道のような気がするので、こちらで行きます。
(Syntax Highlighterでは構文強調を動作させるタグを変更することが可能ですし)

まずSyntax Highlighterの設定を変更します。

「直接使用する言語のJavaScriptを埋め込む(ver 2.x方式)」場合は

SyntaxHighlighter.config.tagName = "code";         <!--追加-->

のように12行目のコメントを外す。「Autoloaderを使用する(ver 3.x方式)」場合は

SyntaxHighlighter.config.tagName = "code";         <!--追加-->

のように7行目のコメントを外して、サーバーに変更を保存(&反映)します。

んで、rubyスクリプトは以下のような感じ。
お手軽なんで、変換・置換に正規表現使いまくってるけどいいのかな?(遅そう)

# -*- coding: utf-8 -*-
#require 'rubygems'
require 'kramdown'
require 'optparse'

@option_hash = {
  :tabwidth => 4,
  :blogmode => true,
  }

#markdown記法をHTML(body)に変換する
#返り値:body文字列
def mkd2htmlbody(text)
  text.encode!("UTF-8")
  #text = text.lines.to_a[1..-1].join # Just ignore the first line
  body = Kramdown::Document.new(text).to_html
  if ( @option_hash[:blogmode] )
    if (false)
      # <pre class="brush~><code>~</code></pre>
      # の場合、<code>、</code>が邪魔なので取り除く
      body = body.gsub(\
          %r!<pre[\s\t]+([^<>]*?)class[\s\t]*="brush(.*?)>[\s\t\r\n]*<code>(.+?)</code>[\s\t\r\n]*</pre>!mi,\
          '<pre \1class="brush\2>\3</pre>')
    else
      # <pre class="brush~><code>~</code></pre>を
      # <pre><code class="brush~>~</code></pre>に変更
      body = body.gsub(\
          %r!<pre[\s\t]+([^<>]*?)class[\s\t]*="brush(.+?)>[\s\t\r\n]*<code>(.+?)</code>[\s\t\r\n]*</pre>!mi,\
          '<pre><code \1class="brush\2>\3</code></pre>')
    end
  end
  #<pre>~</pre>内のTABを取り除く。タブ幅はtabwidthで与える
  body = body.split(/\n/).map {|line|
    if (/<pre/ === line) .. (/<\/pre>/ === line) 
      line.gsub(/\t/, "\s"*@option_hash[:tabwidth])
    else
      line
    end
  }.join "\n"
  str_h1 = nil
  # H1→消去 H2→H4 H3→H5 H4→H6に変更する
  if ( @option_hash[:blogmode] )
    #H1消去
    body = body.gsub(%r!<h1.*?>(.+?)</h1>!i, "")
    str_h1 = $1
    #H4→H6、H3→H5、H2→H4
    for i in [4,3,2]
      body = body.gsub(/<h#{i}(.+?)<\/h#{i}>/,"<h#{i+2}\\1<\/h#{i+2}>")
    end
  end
  return body, str_h1
end

def mkd2htmlbodyfile(inputname, outputname)
  sbody = nil
  File.open(inputname, "r") { |file_in|
    sbody, = mkd2htmlbody(file_in.read)
  }
  File.open(outputname, "w") { |file_ou|
    file_ou.puts sbody
  }
end

##### main ######
OptionParser.new{|opt|
  opt.on('-w VAL', '--tabwidth VAL', /[0-9]+/, "<pre>tag expand tabwidth(default:4)"){|v| @option_hash[:tabwidth] = v}
  opt.on('--[no-]blog', "blog mode(default:true)"){|v| @option_hash[:blogmode] = v}
  opt.parse!(ARGV)
}

mkd2htmlbodyfile(ARGV[0], ARGV[1])

参考
Ruby 1.9.2 リファレンスマニュアル
逆引きRuby
ujihisa/mdv - github(kramdownを使ったrubyコード)
<code></code>を除去したい場合

Syntax HighlighterのtagNameを変更したくない場合(対策案1)はmkd2html.rbの18行目をfalse→trueとすれば動くと思います。

生成されたタグをいじるのはなんとなく後ろめたい&将来的になんか困るかもしれないので、変換する/しないを切り替えられるコマンドラインオプションをつけてあります。

<pre>タグ内のTABをスペースに

ソースコードにTABが入ってるとコピペしたときにタブ幅の設定によってはインデントがずれてしまうので、スクリプト内で変換するようにしてみました。

rubyの「条件式としての範囲式」て便利ですね。githubから取ってきたサンプルコード見てて、「何これ?」と思ってたんですが、理解できるとちょっと感動。C++とかだと

void tab2space_inpre( vector<string> &lines. int tab_width )
{
    bool is_pre_flg = false;
    for ( vector<string>::iterator p = lines.begin(); p != lines.end(); p++ )
    {
        string& line = *p;
        if ( /*lineの中に<pre がみつかった*/ )
        {
            /*lineの中のTABをSPACEに変換*/
            if ( /*lineの中に</pre>が見つからなかった*/ ) is_pre_flg = true;
        }
        else if ( is_pre_flg )
        {
            /*lineの中のTABをSPACEに変換*/
            if ( /*lineの中に</pre>が見つかった*/ ) is_pre_flg = false;
        }
    }
}

みたいにどうしても状態遷移フラグが必要なんだけど、これが必要ないし、コードもすっきりする。

あとmkd2html.rbの33行目を

if (/<pre/ =~ line) .. (/<\/pre>/ =~ line) 

としても動くのが、最初理解できなかった。’RegExp =~ String’はマッチしたらマッチしたインデックス。マッチしなかったらnilを返すんですが、「先頭で見つかったら(0が返ってきたら)動かないじゃん」と思ってたけどrubyではif(0)if(true)と評価されるんですね( ・_・;)
早めに気付いてよかった。いつかどこかで大嵌まりするところでした。

見出しレベルの変換

mkd2html.rbの42行目~50行目で見出しレベルのシフトを行ってます。

eoblogでは

H1
ブログタイトル
H2
ブログ副題と日付
H3
記事タイトル

となっていて、ブログ内で使用するのはH4~が自然な感じです。ということでローカルで編集するMarkdownファイル自体は

eoblogをMarkdown記法で書く2(SyntaxHighlighter導入)
====
本文1

スクリプトの作成
----
本文2

### 見出しレベルの変換
本文3

みたいにH1から書いて、アップする際には、H1を除去、H2→H4、H3→H5とかって変換するようにしてみました。
今回は除去したH1ですが、HTMLプレビューの際には使用します。

必ず見出しレベルの変換すると将来的に困るかもしれないんで、一応コマンドライン引数オプションで変更できるようにしてあります。(デフォルトは変換)

使い方
$ ruby mkd2html [option] input_mkd_file output_html_file

こんな感じで実行します。
入力ファイルは規定の外部エンコーディングEncoding.default_externalのファイルを指定します。Windows XPなら’Windows-31J’(cp932、Shift-JIS)で書いたファイルを渡します。出力のHTMLファイルはUTF-8エンコーディングで出力されます。

長くなってきたんで、今日はこれで終了。 続く・・・と思う。


  1. 当ページではpreタグではなく、codeタグで装飾してるので、実際のHTMLソースは説明と異なります。

  2. あくまで見た目ね。既に対策済みなので、実際のHTMLソースは説明と異なります

続きを読む »

2011年12月15日 (木)

eoblogをMarkdown記法で書く

ブログを書き始めたのはいいけど、デフォルトで提供される記事編集画面はどうにも使いづらい。
やっぱり使い慣れたエディタ(vim)で書きたい!
でもHTMLで書くのも嫌だ!

てなことを考えてたんですが、同じ事考える人はやっぱりいるみたいで、軽量マークアップ言語というジャンルがあるらしいということが分かりました。
何が一番有名なのかは知らないけど、一番最初に検索で引っかかったのがMarkdown記法で調べてみるとなかなか書きやすそうだったので、これで行くことにします。

Markdownの詳細は
Markdown文法の全訳
Markdown(wiki)
を参照して下さい。

なおOSはWindows XP(SP3)、Ruby 1.9.2-p290の環境で動作確認しました。

kramdownのインストール

Markdown記法で書いてもそのままではブログにアップできないので、HTMLに変換する必要があります。
自力で変換するのは本末転倒なんで、なにかないかなーと探してみると、各スクリプト言語毎に変換ライブラリが存在するみたいです。丁度RubyかPythonかを勉強してみたいな。と思ってたんで、その観点で調査すると、Ruby用のkramdownというのが結構よさげ。

ということで、kramdownをインストールしてみました。
コマンドラインで

$ gem install kramdown

とするだけ。あとはお任せしておけばインストールできます。

kramdownの実行

インストールすると、kramdown.batが$RubyInstallPath/binにインストールされます。

通常、ここはPATHが通ってるはずなので、コマンドラインで

$ kramdown hoge.mkd

とかすれば、標準出力にHTMLに変換されたテキストが出力されます。あとはこれをコピペ・・・でもいいんですが、

$ kramdown hoge.mkd > hoge.html

とリダイレクトしておく方が便利だと思う。

コマンドラインオプションは特に指定しなくても良いと思いますが、知りたいのなら

$ kramdown -h

として確認して下さい。

補足

コマンドラインでkramdownに渡すファイルの文字コードはシステムデフォルト(Windows XPならShift-JIS)でないと駄目みたい。
UTF-8とかで書かれたファイルを渡すとエラーになります。UTF-8で書かれたファイルを渡したい場合はスクリプトを書いて、UTF-8エンコーディングされた文字列を渡してやるときちんと動きます。

Shift-JISの文字列処理でよく問題になる2バイト目が0x5C(‘\‘)となる文字「貼能表暴予など」があっても適切に処理されます。

例えば

これが表*強調*です

の内容のファイルを渡しても

<p>これが表<em>強調</em>です</p>

と適切に処理されます。(“*“がエスケープされない)。
この辺はさすがに国産スクリプトエンジンですね\(^O^)/

eoblogの設定変更

HTMLを貼り付けられるように、また改行を無視するように設定を変更します。

1.ブログ記事作成画面で「この編集画面の設定変更」をクリックします。

記事作成画面

2.次に表示される画面で、編集モードを「プレーンテキスト」、編集画面を「上級」または「カスタム」にして改行設定には最低限チェックを付けておき、[保存]ボタンで設定を保存します。

設定作成画面

3.ブログの「設定」→「表示設定」のページに行って、「改行設定」を”なし”にして[変更を保存]ボタンを押します。

表示設定画面へのリンク

表示設定画面

以上で設定は完了です(改行設定は1カ所だけでいいのかな?「3.」は不要かもしれない)

あとは変換したHTMLを「記事の内容」または「追記」に貼り付ければOK。
この時改行設定が「なし」になってるのを確認して下さい(設定をいじくってるのがいけないのかたまに「改行を反映」になってるときがある)

イメージの挿入

Markdown記法でイメージを挿入する場合、以下のように書きます

![Alt text](/path/to/img.jpg)
            or
![Alt text](/path/to/img.jpg "Optional title")
            or
![Alt text][id]
[id] : url/to/image  "Optional title attribute"

eoblogでは 「ホーム/default/西暦年(4桁)/月/日」 のフォルダに画像を入れるみたいなので、

![記事作成画面2](http://onibibo.blog.eonet.jp/default/images/2011/12/15/WS000005.PNG)

みたいに記述すれば<IMG>タグは挿入されます。あとはそれをどうアップするか。ですが、記事編集画面のツールバー

記事作成画面2

をクリックするか、「コントロールパネル」→「ファイル」をつかってファイルを直接アップする必要があります。
どちらも面倒ですが、コントロールパネルのファイルアップロードの方が若干早い(いずれにせよ1個ずつファイルアップしないと駄目ですが)ような気がします。コントロールパネルのファイルアップロード使うなら、画像ファイルの場所はどこでも良いような気がしますが、先ほどの場所以外にアップすると、「フォトアルバム」で画像が確認できないと思います(だから何やねんといわれると困るか)
あと記事編集画面ツールバーから挿入すると、ファイル名が小文字になるみたいなんで、画像ファイル名は小文字にしといた方が嵌まらないかも(実例では大文字ですが(^_^;)

幅やサイズの指定は本来のMarkdown記法では出来ないんですが、kramdownではインライン要素は後、ブロックレベル要素は開始直前に{: xxx=yyy}と書けば属性を指定できます。

![記事作成画面2](http://onibibo.blog.eonet.jp/default/images/2011/12/15/WS000005.PNG){: width="300"}

と書くと

<p><img src="http://onibibo.blog.eonet.jp/default/images/2011/12/15/WS000005.PNG" alt="記事作成画面2" width="300" /></p>

と変換されます。

あと今のままではポップアップウィンドウを出すことは出来ません(頑張ってHTMLタグ書けば出来ますが・・・。)。その辺はプレビューできるようにスクリプト書こうと考えてるので、その時にやる予定。

2011年12月14日 (水)

Ruby1.9.2&NetBeans7インストール

Rubyをお勉強してみようと、Ruby1.9.2とNetBeans7.0をインストールしたので、それのメモ。
環境はWindowsXP(SP3)です。

Rubyのインストール

Ruby Installer Downloads
のRuby Installerから"Ruby 1.9.2-p290.exe"をダウンロードして実行(Installer形式のモノはgemが予め入っていて便利)。

インストールは途中

Ws000002_2

PATHを通すチェックボックスをつけておく位で特に注意することはない(.rb、.rbwの関連づけはご自由に)。

インストール終わったらPATH環境変数の変更を有効にするためにログオフ→ログイン。もしくは再起動します。

DevKitのインストール

次はNetBeansをインストール・・・してもいいんですが、
NetBeansでrubyデバッグ(Fast Debugger)を行うためにはruby-debug-ideが必要。
ruby-debug-ideをインストールするためにはruby-debug-baseが必要。
ruby-debug-baseをインストールするためにはlinecacheが必要。
linecacheをインストールするためにはDevKit(ていうかビルド環境)が必要。

・・・ということで、DevKitをインストールします。

DevKitもRuby Installer Downloadsからダウンロードして実行します。解凍先フォルダは適当でOK。(私はC:\Ruby192\Devkitにインストールしました)

ここからがややこしいんですが、
WindowsでRuby1.9.2+Rails3+NetBeans6.9.1+Debugger。
を参考に・・・。

  1. コマンドプロンプトを開いて、先ほどDevKitを展開したフォルダに移動
  2. ruby dk.rb init を実行
  3. ruby dk.rb reviewを実行し、rubyインストールフォルダ(C:\Ruby192)が表示されるかを確認(違ってる場合、DevKitを展開したフォルダのconfig.ymlを編集)
  4. ruby dk.rb installを実行(Installing 'C:/Ruby192/lib/ruby/site_ruby/devkit.rb'とかって表示が出れば成功)
  5. gem install rdiscount --platform=ruby を実行してインストール

これで終了らしいです。

FastDebuggerのインストール

先ほど参考にしたサイトではruby-debug19をインストールする例が載ってましたが、ruby-debug-base19をインストールしてみたら出来たので、これで行きます。

コマンドラインプロンプトを開いて

$ gem install linecache19
$ gem install ruby-debug-base19
$ gem install ruby-debug-ide19

の順で実行すればOK。今回のrubyは1.9.2で1.9系列なので、全て末尾に"19"が付いてます。ちなみに今回インストールしたバージョンは

  • linecache19-0.5.12
  • ruby-debug-base19-0.11.25
  • ruby-debug-ide19-0.4.12

です。

補足

なお、最初ruby1.9.3-p0をインストールしてたんですが、ruby-debug-base19のインストールでrb_iseq_compile_with_option()の宣言が以前と違う・・・みたいなメッセージが出てビルドが失敗します。何となくC:\Ruby192\lib\ruby\gems\1.9.1\gems\ruby-debug-base19-0.11.25\ext\ruby_debug\ruby_debug..cの#ifdef RB_ISEQ_COMPILE_6ARGSの所に入ってないんだろーな―。と予想しますが、修正して無理矢理インストールする方法が私には分からなかったんで、ruby1.9.2をインストールしてみました。

が、ruby1.9.2のDevKitが生成したヘッダファイルを検索しても該当する関数が見つからない。なにがどうなってるのかさっぱり分かりませんが、とりあえず動いてるっぽいからいいや。

NetBeans7.0のインストール

NetBeans IDE ダウンロード
から、ダウンロードします。7.0になってからruby専用パッケージがなくなってるみたいなので、私はC/C++を選択しました。

ダウンロードが終わったら、インストール。特に注意することはないと思う。

インストールが終わったらNetBeans7.0を起動。[ツール|プラグイン]を選択し、利用可能なプラグインからrubyにチェックを入れて、インストール。

Ws000001

あとはNetBeansを再起動すればOK。

せっかくだからデバッグできるかどうか確認。

[ファイル|新規プロジェクト]で"Rubyアプリケーション"を選択して、適当な名前でプロジェクトを作成。

Ws000003

適当にブレークポイント貼って、[デバッグ|プロジェクト(???)のデバッグ]を選択して、サンプルプロジェクトがブレークされたら成功です。

独り言

私がやりたいことに比べると、NetBeansってなんかこうオーバースペックなんだよね。ソースはエディタで編集する予定なので、要はGUIデバッガさえ付いてればいい(コマンドラインデバッグは嫌だ!)んだけど、そういうツールがない(1つ見つけたけど最近リリースされてないし、インストールも面倒くさそう)。debug.rbとかをGUIで蓋してくれてるだけのツールってないのかな?

最近のコメント