Greensleeves 2.0

Ys - the Oath in Felghana よりバレスタイン城

Thu, 15 Oct 2009 03:59:52 +0900

Layer-0 さんとこの Falcom Arrange Collection に Ys - the Oath in Felghana「バレスタイン城」のギターアレンジで一寸お邪魔しました。

後半結構好き勝手やってますが、久しぶりにガッツリ弾いたような気がするのです。愉しかったです。ほかのアレンジ曲もバッチリ格好いいです。

関連リンク

Falcom Arrange Collection - Layer-0

RunPeriodicTasks

Tue, 03 Mar 2009 13:05:00 +0900

MT のプラグイン RunPeriodicTasks のテスト。

cron 等が使えない環境で、指定日投稿を実行することができるプラグイン。うちのホストしているさくらスタンダードは cron あるんだけれども、ちょっとどんなプラグインか知りたかったもので。

これが見えていたら成功です。

範囲内の数値をランダムに返す

Thu, 13 Nov 2008 04:53:51 +0900

勉強中に見つけたのでメモ。

function getRandomNum(min, max){
  return (max - min) * Math.random() + min;
}

var num = getRandomNum(10, 20); //10～20の間で数値を返す

ちなみに、今まで僕はこう書いていた。

var num = 10 * Math.random() + 10;

やってることは一緒だと思うんだけど、可読性という点では上のコードのほうが下限値、上限値を明記しているのではるかに分かりやすい。僕が今まで書いていたのは何か、中途半端に計算して式にしてて気持ち悪いなーと。

Iterator パターンをやってみる #1

Mon, 27 Oct 2008 17:43:19 +0900

今回は、前々から興味があったデザインパターンを触ってみることにします。まずは手始めに一番理解できそうだった Iterator パターンから。基本的な機能だけ実装していきます。#1とつけましたが、＃2があるかは分かりませんっ。

Iterator パターンを理解する上で下記サイトが大変参考になりました。

おぼろげながら概要を把握したので、手を動かしていきます。

Twitter 始めました & Twitter IRC Gateway のエラーメッセージをどうにかする

Sun, 26 Oct 2008 08:30:25 +0900

つい最近ですがTwitter に参入しました。

Twitter / LinearNS

始めるまではやりたい事は理解できるけど何が面白いのかイマイチだったのですが、やってみると意外とハマる。少しずついろんな人のフォローができればもっと楽しいだろうなー。

それで、Twitter の更新を IRC からできる TwitterIrcGateway を教えてもらったので早速導入してみました。あと Firefox の拡張で TwitterFox っていうのがあったのでそれも導入。IRC だけだと Twitter に IRC の発言内容を誤爆しそうだったので、投稿は TwitterFox から、読みは IRC から。と使い分けています。

何故かエラーが出る件

Twitter にメッセージを取りに行くとき、きちんと動作していても何故かエラー: There is an error in XML document (2, 2). と出ます。そのままでも問題ないようなのですが、気になったので消してみました。

TwitterIrcGateway.exe.config.sample を TwitterIrcGateway.exe.config にリネーム。
開いて中を見ると XML ファイルだった。setting の IgnoreWatchError の項目を True に。
そして再起動。

以上の手順でエラーメッセージが表示されなくなりました。よかったよかった。

PC 新調とモニター購入

Sun, 19 Oct 2008 07:30:59 +0900

少し前（といってももう半年・・・）になるんですが、新しく PC のパーツ一式とモニターを 1 台購入しました。今回は秋葉原の PC ショップでパーツを買い、自宅でシコシコくみ上げ。主だったパーツのスペックなどは以下に。

パーツ	スペック
モニタ	IO-DATAの24Inch WUXGA モニター（1920*1200）
CPU	Intel Core2Quad Q9450 2.66GHz
M/B	ASUS P5K-E
Memory	Corsiar の DDR2 PC2-6400 1GB×2
HDD	Seagate の 250 GBの奴×2（型番失念）
VGA	GeForce 8600GT
電源	GAIA 570W

最初 VGA は Radeon にしてたんだけど相性が悪いのかそれとも初期不良品だったのか、モニターに何も映らなかったので GeForce にしてみた。

これに加えてケース等々もあわせると全部で 15 万弱なり、お古で使っていた Acer の 19 Inch WXGA+(1400*900）のモニターをサブモニターにしてデュアルモニター環境にしたらあまりの軽さと作業領域に涙が出た。前の PC はお下がりで頂いたもので CPU が 5～6 年近く前のものだったので体感処理速度が尋常じゃないほど速く感じる。ネトゲ、DTM、Photoshop などなど、さくさく動くなぁ。

プロジェクタファイル形式で外部ファイルの読み込みを行っている際の注意点

Tue, 04 Mar 2008 18:10:01 +0900

Flash から .exe 形式で書き出すとき、MovieClipLoader とかで何か画像なり swf ファイルなりを読み込んでいる場合、.exe を書き出すときちょこっと気をつけないと、実行したときにロードされてなくてあれー？となる。というかなった。

例えば

var MCLoader:MovieClipLoader = new MovieClipLoader();
var loadListener = {
  onLoadInit: function(){
     // 初期化コード
  }
}

MCLoader.addListener(loadListener);
MCLoader.loadClip(hoge.jpg, hoge);

と、このようにムービークリップ hoge に hoge.jpg をロードさせようとしても exe では見られなかった。

xyzzy 絶賛改造中につき拡張 Lisp メモ

Sun, 03 Feb 2008 07:03:19 +0900

なんか、だいぶ間が空いてしまいましたが・・・。あけましておめでとうございます。今年の抱負としてなるべく更新しよう。そうしよう。

最近、HTMLやCSSを書く際にずっと Dreamweaver だったのですが、MT更新用に使っていた xyzzy を本格的に拡張し始めたら結構愛着がわいてきたのでこっち使おうかなぁとかと思ってきつつあります。職場のエディタも xyzzy 使えたらなぁと思っていろいろやってるんですが、結構な数の拡張 lisp を入れたので何を入れたのか覚えておくためにメモ。

拡張一覧

Net Installer
nise-about
html+-mode
html-support
outline-tree2
color
buf2html
TreeView
win-window
browserex
paren
clipselect
clipview
javascript-mode

あと lisp フォルダの winkey.l を少し改造した winkey+.l を作って一部キーバインドを普通のテキストエディタでよく使うショートカットにしたり。

(provide "winkey+")

(in-package "editor")

;;; winkey.lからコピー
(defvar *default-selection-keymap*
(let ((keymap (make-sparse-keymap)))
(define-key keymap #\C-c 'copy-selection-to-clipboard)
(define-key keymap #\C-x 'kill-selection-to-clipboard)
keymap))

(setq-default selection-keymap *default-selection-keymap*)
(global-set-key #\C-z 'undo)
(global-set-key #\C-y 'redo)
(global-set-key #\C-v 'paste-from-clipboard)
(define-key esc-map #\C-x #'ctl-x-prefix)
(define-key esc-map #\C-c #'specific-command-prefix)

(global-set-key #\C-A 'selection-whole-buffer)
(global-set-key #\C-F 'search-dialog)
(global-set-key #\C-S 'save-buffer-dialog)

あらかた拡張終わったら今度はキーバインド覚えないと・・・。

参考

キーカスタマイズ - Tips of "xyzzy"

Double margin float bug の解決方法と float、position、disply の関係

Tue, 02 Oct 2007 13:49:30 +0900

いままで Double margin float bug を回避するとき

div {
  float: left;
  margin-left: 20px !important; /* IE6 以下はバグで 40px のマージンが取られる*/
  margin-left: 10px;/* for IE6 */
}

とかやってたんですが、これだと強制的に specificity が最高になってあまり賢くないかなぁとか思ったので、調べてみたら display: inline; を使う方法があった。

div {
  float: left;
  margin-left: 20px;
  display: inline;
}

float した要素に、display: inline; を指定すると、このバグが消え去るらしい。

でもそれって、他の所謂モダンブラウザに影響ないのか調べてみると、CSS2 Specification にこう記載されていた。

If 'display' has the value 'none', user agents must ignore 'position' and 'float'. In this case, the element generates no box.

Otherwise, 'position' has the value 'absolute' or 'fixed', 'display' is set to 'block' and 'float' is set to 'none'. The position of the box will be determined by the 'top', 'right', 'bottom' and 'left' properties and the box's containing block.

Otherwise, if 'float' has a value other than 'none', 'display' is set to 'block' and the box is floated.

Otherwise, the remaining 'display' properties apply as specified.

なるほど、float が none 以外だと display は block にセットされるのか。とりあえず大丈夫そうだね。

誤解しやすい background-position の % 指定

Thu, 07 Jun 2007 15:02:19 +0900

background-position プロパティって、% 指定と px 指定のときで画像配置の挙動が微妙に違うんですね。

今の一言で、自称 CSS 使いのくせに仕様書をきっちり読んでないのがバレた気がしますが、気にしない。忘れないように一応メモっておきます。

With a value pair of '0% 0%', the upper left corner of the image is aligned with the upper left corner of the box's padding edge. A value pair of '100% 100%' places the lower right corner of the image in the lower right corner of padding area. With a value pair of '14% 84%', the point 14% across and 84% down the image is to be placed at the point 14% across and 84% down the padding area.

CSS2 Specification の項目には上記のように記載されています。簡単に言うと、たとえば background-position: 14% 84%; と宣言した場合、宣言した要素の '14% 84%' のポイントに 指定した画像の '14% 84%' のポイントが来るように配置するということになります。簡単に図で表してみると下図のような感じになります。

位置を '50% 50%' とかにしてみると確かに配置位置はど真ん中になるので、それでピンと来そうな気もしますが今まで全く気がつきませんでした。

リファレンスサイトを見て回ってみても説明が間違っていたり、（誤解しそうな内容なのに）注意書きが無かったり、とかだったんで間違って覚えている人が案外多いかもしれません。え？僕だけ？

緑色が大好きな人にはきっとたまらない CSS ギャラリー CSSgreen.com

Fri, 25 May 2007 02:43:51 +0900

何となく del.icio.us の subscription を眺めていたら、面白い CSS ギャラリーを見つけたのでご紹介。

CSSgreen.com - CSS Gallery of fresh web design ideas ...

緑色系のデザインに特化しているので、緑好きな僕は即、ブックマークへ。ギャラリーの中で個人的に気に入ったのが CSS3.info とか Fine Store とかですかね。大仰に画像を使わないでいて、かつシンプルな構成が好みなんです。

ギャラリー自体はまだ数がそんなに多くないので、今後に期待です。

CSS の記述ルールを決めてみた

Mon, 14 May 2007 15:37:17 +0900

ウェブサイトのスタイルを編集しようと思った際、作ったばっかりの頃はいいけど、何ヶ月か後に編集しようとすると「あれ？これどうなってるんだっけ？」とか自分で作ったはずのスタイルなのに意図を見失う場合が稀にあります。それを防ぐために、今のうちにスタイル記述に関するルールを作っておこうと思いました。もちろん CSS を一から書き直すときや、複数人で CSS を編集するような場合でも使えるような配慮も忘れずに。

その際、他の人はどうしてるのか気になったので、色々調べていたら hxxk.jp - CSS の記述ルール記事のまとめのエントリーにドンピシャなまとめがあったので、いろいろ参考にして作ってみました。

guideline.css の作成

前述のまとめで取り上げられていた Code-404 の.css ファイルの先頭にルールを明確に記述しておく記述定義の方法が一番しっくりきたので、それをベースに guideline.css を作成。.css ということになってますが中身はコメントアウトした大まかな CSS 編集ガイドラインだけしか書いてありません。

guideline.css の中身

CSS プロパティの記述順序について。CSS2 Specification の出現順序を参考に記述順序を作成。CSS2.1 の改訂でサポートされなくなるプロパティとページ/オーラルメディアについてのプロパティは割愛しています。
CSS ハックの記述法について
プロパティの Shorthand 記述について
CSS の分割について

簡単にまとめると上のような感じになりました。詳細は guideline.css をご覧ください。

あとは分割された reset.css、element.css、layout.css についても頭に細かい記述ルールを書いて、import.css でまとめて、お終い。だけど、今はまだルールは決めたけど時間が足りないので記述はそれに従って書いていない。それは後ほどに。

よりリアルな写真風画像の作り方

Mon, 07 May 2007 03:34:04 +0900

Polaroid-o-nizer™ のようなジェネレーターもあるからか分からないんですけど、写真風画像といえばあちこちで見受けられますが、それらとは一味違う、よりリアルな写真風画像の作り方が Rapid Fire #1: Photo-Realistic at SixThings で紹介されていたので真似て作ってみました。

Fireworks のリファレンスですが、多分 Photoshop でも問題なく作れるはずです。

そして出来上がったのが、上の画像。あまり上手じゃないですね。つーか下手糞ですね。写真が曲がったような感じが上手く出せてません。でもこれ、結構簡単に作れる割りには重宝しそうな感じもします。もうちょっと練習してみよう。

green-sleeves.net のドメイン取得とリダイレクト

Sat, 05 May 2007 01:23:10 +0900

最初は要らないと思っても、ある程度ウェブサイトを更新していくとやっぱり欲しくなるのが独自ドメイン。ご多分に漏れず、僕もドメインを取りました。green-sleeves.net を 2 年契約で。

サイト名の元ネタが超有名なイングランドの民謡なので、greensleeves.* は .com .net .org .jp と当然使用中でダメ。結局、真ん中にハイフンを入れて妥協しました。

301 Moved Permanently で新ドメインへリダイレクト

さて、新しくドメインを取ったら、旧ドメインにアクセスがあった場合リダイレクトしないといけませんね。.htaccess に以下のように記述したらうまくいきました。

RewriteEngine on
 RewriteCond %{HTTP_HOST} ^gs\.silk\.to$ [OR]
 RewriteCond %{HTTP_HOST} ^fpriest\.sakura\.ne\.jp$
 RewriteRule ^(.*) http://www.green-sleeves.net/$1 [R=301,L]

簡単に説明しますと、gs.silk.to 若しくは fpriest.sakura.ne.jp 下にアクセスがあった場合、www.green-sleeves.net に 301 Moved Permanently でリダイレクトする。という感じです。

例えば、http://gs.silk.to/hogehoge/foo/bar.html とかいうファイルにアクセスすると http://www.green-sleeves.net/hogehoge/foo/bar.html に 301 でリダイレクト。となるわけですね。

あとは、Google 先生にリダイレクトを認識してもらえば OK。稀に SEO スパムとして認識される場合もあるらしいですが、大丈夫だと思いたい。

MT の mt-config.cgi をちょっと修正

MT の設定も少し弄ります。mt-config.cgi を開いて、CGIPath の項目を新しいドメインに対応するように修正。

xyzzy 使いなので mapae.ph も少し修正

mapae for xyzzy を使って xyzzy 上で編集・投稿しているので mapae.ph の $RPCSERVER の項目を新ドメインに対応するように修正

行った作業を忘れないようにメモすると以上のようになりました。そのうちサーバーも移転するかもしれないので、ブックマークされている方は新しいドメインのほうで再度ブックマークの方を宜しくお願いします。RSS に関しては FeedBurner で焼いているのでそのままでも大丈夫です。

CSS3 Media Queries と Adaptive Layout

Tue, 01 May 2007 02:34:12 +0900

表示デバイスや表示空間の条件などによって、最適な形にレイアウトを変更または出力する手法のことを "Adaptive Layout" といいます。これを初見したのが A List Apart: Articles: Switchy McLayout: An Adaptive Layout Technique の記事で、目から鱗落ちまくりだったんですが、CSS3 の Media Queries を使えば少し劣る感じはするけど CSS Only で似たようなものが出来そうだったのでちょっと試してみました。まだ、勧告候補（Candidate Recommendation）下じゃん。とか、対応ブラウザ少ないじゃん。とかいう突っ込みは禁止。

たとえば、body 要素の背景色をブラウザの表示空間幅が 640px 以下の場合に赤、641px から 800px まで緑、801px からは青としたい場合、CSS に以下のように記述すれば上手くいきます。

CSS

@media screen and (max-width: 640px) {
   body { background: #f00; }
 }
 @media screen and (max-width: 800px) and (min-width: 641px) {
   body { background: #0f0;}
 }
 @media screen and (min-width: 801px) {
   body {background: #00f;}
 }

サンプル: CSS3 Media Queries と Adaptive Layout

表示域幅 640px 以下
表示域幅 641px 以上、800以下
表示域幅 801px 以上

Opera 9.2 と WebKit は Media Queries の一部をサポートしているみたいで、ちょっと Opera で試しに見てみたんですが上記の場合、表示域幅がその条件になったときに上記スタイルが自動的に適応されるんじゃなくて CSS が読み込まれたときに条件と合致するスタイルだったら適応される。という感じの挙動でした。

Poll results: 50.4% of respondents maximise windows | 456 Berea Street にもあるようにディスプレイの横解像度が 1024px から 1600px 超までかなりばらけていて、かつブラウザ窓を最大化してる人、してない人。と閲覧状況も複雑になっているので、Media Queries が本格的にサポートされるようになってくると、幅ごとの最適レイアウトも意識されて、Adaptive Layout な考えもメジャーになってくるかもしれませんね。