2015年 10月 04日

CSS Animation Sine Wave

web

http://cho45.stfuawsc.com/misc/css3-sine-wave.html

CSS 自体では自由な曲線は描くことができないが、CSS animation では、animation-timing-function で cubic-bezier() を使い定義したベジェ曲線に従ってプロパティーの変化量を決めることができる。

なので、複数の animation する要素を組合せることで、全体としてサイン波を描くことができる。

ポイントは animation-timing-function はキーフレーム間 (1回のアニメーション全体ではない) に適用される点で、勘違いしているとひたすらハマる。


上記の例ではアニメーションさせたままだが、animation-delay に負の値を指定して animation-play-state: paused; を指定すれば止めた状態にもできる。

http://cho45.stfuawsc.com/misc/css3-sine-wave2.html

関連エントリー

2006年 09月 10日

blosxom section plugin

blosxom web prog

section

この日記みたいな URL で blosxom のエントリにアクセスできるようにするプラグインです。

例えば blosxom デフォルトだと /2006/09/09/ までしか時間単位で特定できないですが、このプラグインで /2006/09/09/1 とかという風に完全に時間ベースで一つのエントリを特定できるようになります。

特定の環境でしかテストしてないのでいろいろ不具合があるかも。extensionless とは共存できるみたいです。

関連エントリー

pukiwiki がまた空白ページ

web

前回と同じ症状

書き換える前のバージョンに戻したら直った。他の wiki 探さないとダメだなぁ。

関連エントリー

2006年 09月 09日

Development Environment Conference に行った

web prog

Development Environment Conference に行ってきた。

  • vim text-objects
  • *, #
  • CSS 超高速リロード
  • svk, CPAN-Mini でオフライン化
  • バイナリパッチングカッコヨス

関連エントリー

2006年 09月 04日

taglibro 秋田

web

この日記はローカルで XML 編集してアップロードして書いているのだけど、いい加減 XML 書くのが嫌になってきた。Markdown と Trac Wiki 記法とを混ぜたやつで書きたい。それとローカルでしか書けないのがだめすぎ。外出先から日記を書けない。

XML で書くのは、全て制御できるけれど、もうそれにいまいち魅力を感じなくなってしまった。別に Markdown だって HTML が書けないわけじゃないし、HTML を完全に思い通りに書いても、そんなに意味がない気がしてきた。well-formed なら十分なんじゃないか？ って思い始めた。abbr はかけるコストの割りに役に立たない。ような。

URL はそのままで、うまく再構築したいなぁ。トラックバックはいらないし、久しぶりに Ruby だろうか。Rails 使ってみたいけど、CGI 動作じゃ死にそうだから使う気にならない。うーん

関連エントリー

MT のテンプレートをインポートする。

web mt

ごちゃごちゃやる用事があって MT を使っているのだけど、テンプレートを一括して作ってある場合インポートするのがひどく面倒くさいのでスクリプト化してみた。

make-import-mt-templates-bookmarklet.rb

開くと TEMPLATES の定義があるので、例にならって適当に書く。書いたら ruby make-import-mt-templates-bookmarklet.rb 出力ファイル名.js とかやると、本体ができる。ついでにブックマークレットの雛形を出力する。

なんか説明すると意味わからないな。できた JS は Fx1.5 以上で動く。

配布する人さえこれを使えば、そのテンプレートを利用したい人はブックマークレットを利用するだけ、という形をとる。

  • 利用者が Fx を使っている必要がある。
  • mt のバージョンが 3.2-ja. 3.3 だとたぶん動かないので注意。誰か試してgtlt3.32-ja でもいけるっぽいです。

サンプルとして、Web Standards with MT ver.3.2 Strict : ダウンロードページ のテンプレをパックしてここで再配布してみる (自分のやつはちょっと問題があるので)。パックしたやつはもとのライセンスにしたがい CC-by-nc-sa に。

テンプレートをインポートする : このブックマークレットを一時的にブックマークして、MT のテンプレ一覧ページで使うだけです。

書き換えて使った上のスクリプト pack_mt_3_2_strict.rb

バグっててテンプレが壊れても知りません。テストしてみようとして既存のテンプレ上書きしても知りません (自分がやった)

関連エントリー

2006年 09月 02日

絶対 URI, 絶対パス

web

少し前某所にいたとき、絶対パスを「http:// からはじまる～」と説明していたのを傍で聞いていて、なんか違うような (で、でも、わたし、正確に調べたわけじゃないし##) みたいな感じだったのでちゃんと調べる。

といっても、普通に RFC を確認するだけ。おなじみ RFC3986 を適当に調べる。と、該当部分は

  • 3.3. Path
  • 4.2. Relative Reference
  • 4.3. Absolute URI

なんだけど、こっちの RFC だと少しまわりくどいので、上書き前の RFC2396 を見てみる。もちろん若干違うのだけど、上書きされたのが最近ということを考えれば、もともとの由来はこっちにあったと考えられる。

absoluteURI   = scheme ":" ( hier_part | opaque_part )
hier_part     = ( net_path | abs_path ) [ "?" query ]

relativeURI   = ( net_path | abs_path | rel_path ) [ "?" query ]

abs_path      = "/"  path_segments
rel_path      = rel_segment [ abs_path ]

絶対 URI (absoluteURI) はスキームから始まるやつ。相対URIはパスにクエリー付けられるやつ。絶対パスは / からはじまるやつ。

URI 的にはこういうものらしい。

絶対 URI
http://example.com/
http://example.com/hogehoge.html
相対 URI
/hogehoge.html
./hogehoge.html
foo/bar.html
/search?q=%42oofy
絶対パス
/hogehoge.html
相対パス
./hogehoge.html
foo/bar.html

あと上書き後では次のようなノートが書いてあったり、定義が微妙に変わっていたり (フラグメントがどうとか) する。とりあえず相対 URI は今は正確には URI 相対参照みたいだ。

NOTE: Previous specifications used the terms "partial URI" and "relative URI" to denote a relative reference to a URI. As some readers misunderstood those terms to mean that relative URIs are a subset of URIs rather than a method of referencing URIs, this specification simply refers to them as relative references.

関連エントリー

2006年 08月 23日

mixi に登録した日を表示する GM スクリプト

net web

mixi-show-regist-date.user.js

他人のページを見たとき、その人がいつぐらいに mixi に登録したかを表示します。インストールすると最終ログインの下におおよその登録した月が表示されるようになります。

データは今日までのを適当に集計したやつで、今日以降登録した人は一括して 2006-08 以降と表示されます。メンテナンスする気はありません（てきとう

verbose 設定を追加しました。デフォルトでオン。オンのときはそこらじゅうの写真にいつ登録されたかが表示されます。

,

関連エントリー

2006年 08月 21日

本当の意味の Web 2.0 とは何なのか

web life thinking

君と僕が、繋がるってことさ。

関連エントリー

2006年 08月 12日

GreaseMonkey で MochiKit 使ってみる。すなわち外部ライブラリの読み込み。あるいははてなのグラフが綺麗じゃない

web js gm

GreaseMonkey で外部ライブラリが使いたいな。みたいな。似たようなのでは CMS researcher - Greasemonkeyでprototype.jsやscript.aculo.usを使う方法 があるのですが、どうもうまくいかなかったので自力実装。

function dll(loadLibs, afterLoadedFunction) {
if (afterLoadedFunction._retry)
afterLoadedFunction._retry = 0;
else
afterLoadedFunction._retry++;
if (afterLoadedFunction._retry > 10) throw("Library is not loaded because of some reason.");
loadLibs.forEach(function (lib) {
GM_xmlhttpRequest({
method : "GET",
url : lib[0],
onload : function (req) {
try {
(function (r) { eval(r.responseText) }).call(window, req);
} catch (e) {
//  nigiri tubushi
}
},
onerror : function (req) {
alert(req.responseText);
}
});
});
var loaded = true;
loadLibs.forEach(function (lib) {
try {
loaded = loaded && typeof eval(lib[1]) != "undefined";
} catch(e) {
loaded = false;
}
});
if (loaded) {
try {
afterLoadedFunction();
} catch (e) {
unsafeWindow.console ? unsafeWindow.console.log(e)
: window.dump(e);
}
} else {
var f = arguments.callee;
setTimeout(function () { f.apply(this, [loadLibs, afterLoadedFunction])}, 500);
}
}

で、以下のように使う。

// 第一要素にロードする js への URL
// 第二要素にロード確認用のオブジェクトの名前
// を入れた配列の配列
dll([["http://example.com/mochi/Base.js", "MochiKit"]], function () {
// ロードされたら実行される
})

ポイントは eval を使うところ？　eval を使うので unsafeWindow を極力使わなくてすむ。あとは DOM 系の処理でおかしいこと (ここには append できないぜ系エラー) になりにくい気がする。

ロードするスクリプトの依存関係上、何度かリクエストが発射されることがある。めんどいのでブラウザのキャッシュ機能にまかせてこっちではキャッシュしていないけど、ホントはちゃんとキャッシュしたほうがいいはず。

でもって、はてなアンケートの円グラフを PlotKit で描画しなおす GreaseMonkey スクリプトを書いてみた。hatena-q-make-graphs-with-plotkit.user.js

結果をソートするようにした。あと Global じゃなくて window 使うようにした。

id:secondlife さんからの指摘により、エラーを握りつぶす処理を追加し、最大ロード試行数を加えました。

関連エントリー