ベイエリア情報局

javascriptだけで棋譜形式の変換(jsShogiKifuで棋譜データの出力に対応)

masato

(2011年7月17日 23:28) | 個別ページ | トラックバック(0)

jsShogiKifuで棋譜データが出力できるように機能追加しました。
これによりオンラインでjavascriptだけで棋譜形式の変換ができるようになります。

サンプルページ

新たな棋譜形式の対応はモジュール追加のみ

jsShogiKifuでは棋譜解析部分を独立したモジュールにしているので、各棋譜形式専用のモジュールを追加するだけで、他の棋譜形式に自由に相互変換可能になります。現在のところkif形式とcsa形式だけにしか対応してませんが。

jsShogiKifuをアップデートした

masato

(2011年7月10日 23:53) | 個別ページ | トラックバック(1)

以前公開したJavascriptで実装した将棋棋譜ビューワであるjsShogiKifuですが、いつのまにか改造してくれてる人が現れた！！
嬉しい限りです。
せっかくなので変更内容を取り込ませていただきました。

READMEから抜粋した変更内容は次の通り

kkosさんによる変更
1. 各局面の最終着手を強調表示可能
2. 駒画像の表示サイズを指定可能
3. 枡のサイズを指定可能
4. 先手、後手それぞれに対して、王と玉を指定可能
(駒画像が用意されている場合)
5. 初期表示局面を指定可能
6. 6種類のサイズの駒画像を追加
(文字表示だけで、駒の形ではない単純なもの)
7. サイズの異なる盤面を一つのページに表示可能
(test/sample_multi.html)
8. 手順一覧選択リストで、コメント付きの指し手には'*'マークを表示
9. KIF形式の記述が'龍'ではなく'竜'の場合にも対応
10. KIF形式の詰将棋に対応
(test/sample_mate.html)
11. KIF形式の駒落ちに対応
12. KIF形式の初期局面指定に対応

knuさんによる変更
* 画像を使わないレンダリングをサポート。
* レンダリングエンジンを選択またはユーザ定義可能。
* UIを改善。
盤上左右1/3領域をクリックすることで前後の指し手に移動可能。
* jQuery Mobile上での動作をサポート。
- 左右のスワイプによりそれぞれ最初、最後の局面へ移動。
- 指し手を示すselectボックスの状態更新通知を追加。

いろいろ調整

お二人の変更を取り込ませていただいた後、僕の方でもいろいろ調整しました。
機能的な追加は特になく単に整理したぐらいです。
ちょっとがばっと変更しちゃいましたが、たぶん以前よりかはコードがいじりやすいのかなと思います。

* Kif形式の解析モジュールを改良
kkosさんにいろいろ機能を追加してもらったのをシンプルになるよう変更しました
* サンプルファイルを全部sampleディレクトリに突っ込んだ
* test/ ディレクトリの中身を整理
* ソースコードを複数ファイルに分割
それに伴いMakefileを追加。配布用のkifu.jsはdistディレクトリに動的生成するようにしました
* インデント(ハードタブなくす)や、メソッド名をちょこっと変更(統一感持たせるため)

さくらVPSを借りた後の初期設定まとめ

masato

(2011年4月21日 11:49) | 個別ページ | トラックバック(0)

さくらVPSを借りた後の初期設定メモ一般ユーザを追加する

# useradd masato
# passwd masato

sudoを使えるように。 wheelグループにsudoを許可して、一般ユーザをwheelグループに追加する。

# visudo
%wheel  ALL=(ALL)       ALL
# vigr

rootでの作業終了。一般ユーザで再ログイン。

# exit
local:$ ssh masato@*.*.*.*

SSHの鍵をコピー

local:$ scp -r ~/.ssh masato@*.*.*.*:

dotfilesを同期

$ cvs -d '****' checkout .env

とりあえずyum update。 yum-fastestmirrorはデフォルトでインストールされてた。

$ sudo yum update

コマンドラインを快適にするため、とりあえずzsh, screenを入れる。 keychainはなかった。

$ sudo yum install zsh screen

zshにシェルを変更して再ログイン。 ssh-agent起動。 keychainは後で入れる。 screenも起動。

$ chsh
$ exit
local:$ ssh masato@*.*.*.*
$ eval $(ssh-agent)
$ ssh-add *****
$ screen

とりあえずiptablesでsshだけ許可する。

# 関連のある入力を許可
$ sudo iptables -A INPUT -m state --state RELATED,ESTABLISHED -j ACCEPT
# icmpを許可
$ sudo iptables -A INPUT -p icmp -j ACCEPT
# ローカルの接続は全部許可
$ sudo iptables -A INPUT -i lo -j ACCEPT
# sshを許可
$ sudo iptables -A INPUT -p tcp -m tcp --dport 22  --tcp-flags FIN,SYN,RST,ACK SYN -j ACCEPT
# INPUT, FORWARDを原則落とす
$ sudo iptables -P INPUT DROP
$ sudo iptables -P FORWARD DROP

sshでrootログイン禁止、パスワード認証禁止。

$ sudo vi /etc/ssh/sshd_config
PermitRootLogin no
PubkeyAuthentication yes
PasswordAuthentication no
PermitEmptyPasswords no

これで一通りのセキュリティ周りの設定終了。一安心

さくらインターネットの田中社長との思い出

masato

(2011年4月20日 23:14) | 個別ページ | トラックバック(0)

そろそろ個人サーバを乗り換えようと思ってVPSサービスをいろいろ検討したんだけど、結局さくらのVPSにした。さくらは使い慣れてるし、今までの実績からくる安心感がある。さっき一年一括で支払い申し込みして、準備ができるまでの間に、ふと思い出したさくらインターネットの田中社長との思い出を書いてみる。思い出っつっても僕の一方的な思い出で、もちろん田中社長は僕の事なんぞはみじんも知らないがw

インターネットとの出会い(高専4年)

僕が新居浜高専というど田舎の高専4年生の頃に、初めて学校がインターネットに接続された。新居浜高専のネット回線は愛媛大学を通して世界に繋がっていた。電話回線もない寮で生活していた僕は、インターネットと聞いて「パソコン通信ができる！」とわくわくしていた。ネット=パソコン通信と思い込んでいたのだ。それくらいバカだった。

インターネットは当初期待してたものとは違ったが、それ自体はとても面白くどんどんのめり込んでいった。そしてインターネットの仕組みが知りたくなって、いろいろ先生に聞いてインターネットのサーバはUNIXで動いているのを教えてもらった。MS-DOSしか知らなかったバカにはUNIXは衝撃的だった。そして無謀にも自分でWebサーバを構築したいと考えるようになった。

apacheのMLに入会

先生にWebサーバはapacheが使われているというのを教えてもらった。何も考えていない僕は早速コンパイルをしようと思ったがうまくできない。それでapacheのMLに入会して質問をした。

「コンパイルできません！」

今の僕なら"マニュアルを読め!"と突っ返すような質問に親切にも答えてくれる人がいた。

「./configureを実行しました？」

コンパイルできない問題は見事に解決した。ちなみにこの質問に答えてくれた人は田中さんではなく吉藤さんという方で、数年後にLinuxのIPv6の実装であるUSAGIプロジェクトの中心人物となった方だ。もちろん吉藤さんは僕の事なんか覚えてないだろうがw

apache MLを運営していた舞鶴高専の田中さん

このapache MLを運営していたのが舞鶴高専の田中さんという方だった。僕と同じ高専4年生。田中さんはapacheのMLを運営するだけでなく、apacheのモジュールを書いてたりと、./configureを知らない誰かさんとは雲泥の差だった。同じ学年なのにここまで実力が違うのかと衝撃を受けた。

そして田中さんは当時から草の根レンタルサーバである「さくらネット」を運営していた。そう、今のさくらインターネットの前身である。後になってさくらインターネットの名前を聞いて、すぐにさくらネットの事だと分かった。高専の時から僕と田中さんの差は全く縮まってなかったのだ。

僕も頑張って前に進んでいるのだが、田中さんはそれ以上のスピードで前に進んでいる。いつか追いつけるように努力し続けていたい。

javascriptで動作する将棋棋譜ビューワを作った

masato

(2011年4月19日 00:29) | 個別ページ | トラックバック(0)

最近というかここ2年くらいから将棋にはまってて、いろんな将棋を観るのが趣味になってます。特にプロのタイトル戦は解説付きの棋譜が公開されてて、観るだけでも楽しい。やはり素人にはプロの解説がないと指し手の意味がよく分からない。

公開されている棋譜のビューワにはKifu for Flashがよく使われています。他にも棋譜ビューワはいろいろありますが、ほとんどがFlash製です。Javascriptの実装もいくつかあるようですが、他のサイトに組み込んで利用するようなケースはあまり想定されていないような感じでした。Flashの最大の欠点がiPhoneで表示できないこと。Kifu for iPhoneでいいじゃないかと言われそうですが、特定のアプリじゃWebサービスに組み込みできんだろということでJavascriptで動く棋譜ビューワを作ってみました。githubで公開してます。今のところ柿の木形式とCSA形式に対応。

jsShogiKifu サンプルページ

使い方

ソース一式をダウンロードします。 jsShogiKifuダウンロードページ

"src"ディレクトリにあるファイル一式を適当なディレクトリに突っ込む。

jQueryもダウンロード jQuery

jQuery, kifu.js, jquery_shogi_board.jsを読み込む。

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="kifu.js"></script>
<script type="text/javascript" src="jquery_shogi_board.js"></script>

棋譜ビューワを表示する場所にspanなりdivタグをid付きで追加。

<div id="board"></div>

適当なdivなりspanなりのid付き不可視(style="display:none")タグに棋譜データを突っ込む。 "Kifu"に"棋譜データのid", "フォーマット(kif or csa)"を渡してkifuオブジェクトを作成。 jQueryで棋譜ビューワを表示するタグに"shogiBoard"メソッドにkifuオブジェクトを渡して表示する。

<span id="kifu_text" style="display:none">
棋譜データ...
</span>

<script>
var kifu = Kifu('kifu_text', 'kif');
$('#board').shogiBoard(kifu);
</script>

別ファイルの棋譜データを読み込むにはKifu.ajaxLoad()を使います。 Kifu.ajaxLoad()に"棋譜ファイルのURL", "フォーマット", "関数オブジェクト"を渡します。関数オブジェクトにkifuオブジェクトが渡りますので、上記と同様にshogiBoardにkifuオブジェクトを渡します。

<script>
Kifu('./kifu_text.kif', 'kif', function() {
  $('#board').shogiBoard(kifu);
});
</script>

以下、プログラマ向け説明

棋譜解析とビューワを完全に分離

棋譜解析部とビューワを完全に分離してます。棋譜解析の結果は全てkifuオブジェクトに格納されて、盤面の操作や情報の取得はkifuオブジェクトのメソッドを通して行います。ビューワはkifuオブジェクトから取得した情報を元に表示処理だけ行います。

jsShogiKifuにはjQueryのプラグインとして実装したjQueryShogiBoardが付属していますが、ビューワが完全に独立しているため全く違う実装に置き換える事が可能です。jQueryShogiBoardはいろいろとアレなので、自分で好きなプログラムに変更するといいでしょう。

jQueryShogiBoardはデザインがダサダサなんですが、html部分は別ファイルになっているので、これを置き換えるだけでもいいかと思います。

kifu.jsはjQuery非依存

Kifuクラスの処理は一部を除いてどのライブラリにも依存してません。ajaxで棋譜データを読み込む(Kifu.ajax(), Kifu.ajaxLoad())ときのみjQueryを使用しています。それ以外はどのライブラリにも依存してませんので、ajaxを使用しなければ外部ライブラリは一切必要ありません。

jQueryShogiBoardがjQueryのプラグインなので、jQueryが必要かと勘違いしてしまいがちですが、そんな事はありませんので好きなように組み込めます。

名前空間を汚さない

kifu.jsを読み込んだ時に使用するグローバルな名前は"Kifu"のみです。他にはグローバルな名前空間を使用しませんので、他のJavascriptライブラリと名前空間で衝突する心配はありません。

"Kifu"も衝突する場合はkifu.jsを読み込んだ後に"Kifu.noConflict()"で実行することで、"Kifu"を元に戻し別名に変更できます。

var jsKifu = Kifu.noConflict();  // Kifuを元に戻し、代わりにjsKifuに変更する

ファイル形式ごとにモジュール化

ファイル形式ごとに解析プログラムをモジュール化してます。kif形式だろうと、csa形式でも最終的な解析結果はkifuオブジェクトに格納されます。このような実装になっているため、他の形式の棋譜ファイルを読み込む場合に、その棋譜形式用のモジュールを作るだけですむようになります。

WEB+DB vol.62にLinuxの基礎知識特集の執筆をしました

masato

(2011年4月18日 17:37) | 個別ページ | トラックバック(0)

4月発売のWEB+DB vol.62にLinuxの基礎知識特集の記事の執筆をしました。
4月発売ということもあって、新人向けの特集記事になります。
よかったらご覧ください！！

11/22(日)愛媛でサイボウズとP&Aラボ共催の就活生向けのIT業界セミナーで喋ってきます

masato

(2009年11月16日 16:39) | 個別ページ | トラックバック(0)

P&Aラボ × Cybozu ITエンジニアによるITエンジニアのためのIT業界セミナー　11月22日＠松山

サイボウズさんが東京、大阪、松山で就活生向けのIT業界セミナーを開催するのですが、僕は松山の方でスピーカーとして参加させていただくことになりました！

何やらカコイイポスターもできております。

愛媛のIT系の方は、ぜひご参加を！

映画「ハゲタカ」を観てきたがあまり面白くなかった

masato

(2009年7月 7日 19:32) | 個別ページ | トラックバック(0)

ハゲタカ＠映画生活

NHKのテレビドラマで数々の賞を受賞したら名作ドラマ「ハゲタカ」
僕もテレビドラマのハゲタカがかなり好きで、何回も観ました。

満を持して映画化されたので早速観に行きましたが、ちょっと期待はずれでした。
テレビドラマの方があんなに面白かったのに残念＞＜

経済描写が少なく人物描写が多い

ドラマ「ハゲタカ」の面白さは、なんといっても今までにない経済に焦点をあてたシナリオ。
そこが従来のドラマと一線を画して面白かったのだと思うのだが、映画「ハゲタカ」では赤いハゲタカの人物描写に長い時間が割かれていた。
主人公でもなんでもないのに！！
そんなのどうでもいいから赤間自動車がどうなったをやってくれよ。

恐らく東映か事務所側が玉山鉄二をもっと露出させろとかごねたんじゃないでしょうか。
主人公はそんなに有名じゃない大森南朋ですから。

赤いハゲタカの人物描写は恐らく、後から追加されたんだと思います。
あそこをそっくり抜いてもシナリオ的には何にも矛盾しないんですよね。

テレビドラマの方が良かっただけに、残念です。