ethertank

  • Twitter
  • Github
prototype を拡張したいお年頃

個人的に今、SVGがアツい(だいぶ遅い)

Works

jQuery blrblrTumblrImage v0.1.7

tumblr の "Photo" ポストをブログパーツ的に表示。画像幅は250px。 ## basic ``` $(function() { $("対象要素のセレクタ").blrblrTumblrImage({ username: "staff", interval: 6666, num: 15 }); }); ``` ## config * username : 対象とする Tumblr の アカウント名文字列 (※domain か username の片方は必須) * domain : 対象とする Tumblr のドメイン文字列 (※domain か username の片方は必須) * start : 最新ポストからの取得開始位置(数値。初期値 : 0) * num : 取得件数(数値、初期値 : 10) * interval : スライドショーの実行間隔(数値。 初期値 : 6000) * speed : slideDown / slideUp の速度(任意の数値か "slow"、"fast"、"normal"。 初期値 : "slow") * minHeight : 表示領域に最低限確保する高さを指定(初期値: "200px") * tagged : 対象タグ文字列。例えば "guitar" と指定すると "guitar" でタグ付けされた投稿だけ表示される

  • 11151
  • 2

jQuery huwahuwaTumhuwrImage v0.1.0

tumblr の "Photo" ポストをブログパーツ的に表示。画像幅は250px。 ## Basic ``` $(function() { $("対象要素のセレクタ").huwahuwaTumhuwrImage({ username: "staff", interval: 6666, num: 15 }); }); ``` ## Config * username : 対象とする Tumblr の アカウント名文字列 (※domain か username の片方は必須) * domain : 対象とする Tumblr のドメイン文字列 (※domain か username の片方は必須) * start : 最新ポストからの取得開始位置(数値。初期値 : 0) * num : 取得件数(数値、初期値 : 10) * interval : スライドショーの実行間隔(数値。 初期値 : 6000) * speed : slideDown / slideUp の速度(任意の数値か "slow"、"fast"、"normal"。 初期値 : "slow") * tagged : 対象タグ文字列。例えば "抹茶" と指定すると "抹茶" でタグ付けされた投稿だけ表示される ## Download (uncompress / minified) * https://gist.github.com/ethertank/dfdd111237faee4844dc ---- タンブラの画像スライドショー。
今度はフェードイン・アウトで。 読み込む画像の中で一番縦サイズが大きいものの height を
ラッパーの高さに設定…っていうのをやりたくて、
出来たは出来たんだけど、極端に長い子がいると
縦の短い画像の時に間延びしちゃう。
まーこれはどうしようもないか。 ---- マウスオーバーでスライドを止められなくなくなる事があるんだけど、 発動条件とか原因とか分からない。

  • 2122
  • 0

SVGフォントを作る

SVG フォント手打ち作成。なかなか難しい。 原点(0,0) は左下。 v100 なら上に 100 移動。 h100 なら右に 100 移動。 v は相対、V は絶対。 canvas とかと上下逆。SVG の他の要素と比べても上下逆。 左右は一緒なのがまたこれ難儀な。 ---- 必要なグリフが揃ったらプレビュー用の text 要素とかを削除。 ---- 正直おとなしく Inkscape とかで作った方が良い気もする。 ---- 中抜きは逆に回せばいいみたい。 ---- 斜めが細い。計算しないとだ。 ---- ユニットサイズ 9*9 から 7*7 に変更。arial と上っ面が揃った。 それにともなって全部右に寄ったので修正。 M と 4 はまだテキトー。斜めがな…。 ---- B の右下、右中央、右上を欠こうとしたらこのサイズだと駄目かも。 また考える。 ---- http://onlinefontconverter.com という Great なツールを発見。 SVG 内にプレビュー用の text 要素などがあれば削除し、 XML 宣言及び svg 要素を以下の様に書き換え、 このツールで TTF に変換。 et-7.ttf [PublicDomain]: http://jsrun.it/assets/u/1/C/o/u1CoR ファイル名を et-7.ttf に変更で使用可能。 時計用に AMPM:0123456789/[] と半角スペースのみを内包したフォント。 使ってくれてもいいのよ ゚*。(・∀・)゚*。 ---- ※ほんとは OTF にしたいんだけどまだ上手くいってない。

  • 2185
  • 0

UNIQLO某K

もうちょい。 これであとイージングでもついたらばっちりじゃね?(・∀・)じゃね? ---- 勘で0.25 秒でアニメ終わって残り0.75秒待機する感じにしてみた。 やっぱイージング要らないかな。 ---- でも矩形はanimateMotion要素、時計は js なので、 タイミングがあってない。 未知の要素で遊んで面白かったけど、IE 対応するなら 現時点では最終的には HTML/CSS/JS でやるしかない。 時計2個とその親 div を用意して、 親を overflow: hidden に。 座標やら寸法を動かす感じでいける。 ---- あ、あと TOKYO とか LONDON とか表示してダンサー捕獲せねば。

  • 811
  • 1

D'nD File Viewer

画像・音声・動画・テキスト・フォント等のローカルファイル、 ページ上の draggable な要素、ブラウザのブックマーク、 インターネットショートカット等をドラッグ&ドロップにより閲覧できるビューワ。 Firefox、Chrome のみ。Windows でしか見てない。 .ttf / .otf / .woff / .jpg / .gif / .png / .webp / .svg / .txt / .exe / .mp3 / .webm / .url 等(※一部実装依存) - ページ上の要素 : 自身と自身のコードを表示 - フォント : サンプルテキストを表示 - 画像 : img 要素で表示 - 音声 : audio 要素で表示 - 動画 : video 要素で表示 - HTML ファイル : ソースを表示 - テキストファイル: 同上 - ブックマーク : iframe で縮小表示(※不可も有り) - インターネットショートカット : 同上 [2013/04/13] .url (インターネットショートカット)を追加。 但し対象ページの X-Frame-Options レスポンスヘッダの設定によっては表示されない。

  • 2316
  • 3

抵抗器チェッカー

抵抗器のライン色を選択する事により値を確認できるマシ~ン。 省スペース版 http://jsdo.it/ethertank/t3JV

  • 1558
  • 1

Memo Pad

ローカルストレージを利用したメモ帳。ベタだ。 "Storage" を、よく "Strage" ってタイプミスしちゃう。 頭の中では「ストラゲ」とか言ってるんだけど、 他の英単語の場合「ト」に "o" が付いてない事が多いからかな。 "strange" とか。 ストランゲ。

  • 806
  • 0

TABLE Generator

table要素のコーディングを支援します。

  • 4625
  • 4

HTML Entities Converter

"&" > "&" HTML Entities Converter. 不具合あるかも。

  • 4923
  • 2

CSS Minifier β

※α (http://jsdo.it/ethertank/iSmh) より移行。jQuery使用。 ※劣化してます。使わないで下さい。

  • 1257
  • 1

CanvasRenderingContext2D.prototype

##CanvasRenderingContext2D のメソッド ### ctx.rotateContext( 回転角度, 回転の中心軸のx座標, y座標 ); ネイティブメソッドの rotate は左上を中心座標として回転する為、扱いづらい。 この関数を使えば中心座標を指定して回転する事が出来る。 ### ctx.clipWithFunction( 関数 ); 指定関数内で描画した図形で既存コンテキストを切り抜く。要らん気もする。 ### var points = ctx.getPolygonPoints( 中心のx座標, 〃y座標, 半径, 何角形?, 回転角度 ); 多角形の座標配列 [x, y] を子とする二次元配列を返す。「回転角度」は省略可。省略時は 0 となり、0 の場合、必ず頂点が上になる。 ### ctx.polygon( x, y, radius, edgesNum, deg ); 引数は getPolygonPoints と同じ。多角形パスを作成。 ### ctx.fillPolygon( x, y, radius, edgesNum, deg ); 引数は getPolygonPoints と同じ。塗りつぶしまで行う。 ### ctx.strokePolygon( x, y, radius, edgesNum, deg ); 同上。但し塗りつぶしではなく線を描画。 ### ctx.drawPolygon( x, y, radius, edgesNum, deg ); 同上。コンテキストの設定に従い塗りと線を描画。 ### ctx.ellipse( 左上座標x、左上座標y、右下座標x、右下座標y ); 座標を指定し、楕円のパスを作成。自作では無い。 (※ http://spphire9.wordpress.com/2010/03/08/ベジェ曲線で楕円を描く3/ ) ### ctx.strokeEllipse( 左上座標x、左上座標y、右下座標x、右下座標y ); 座標を指定し、楕円の線画を描画。 ### ctx.fillEllipse( 左上座標x、左上座標y、右下座標x、右下座標y ); 座標を指定し、楕円の塗りつぶしを描画。 ### ctx.drawEllipse( 左上座標x、左上座標y、右下座標x、右下座標y ); 座標を指定し、楕円を描画。コンテキストの設定に従い、塗り、線ともに描画する ---- ### メモ test: http://jsdo.it/ethertank/2w02 #### 多角形 とりあえずどのメソッドも上からに固定。 引数に指定する座標は中心座標。開始地点か、図形を包む画面に平行な長方形の左上でもいいかも。 途中で止めて変な多角形が作れるってのもできてもいいかも。いや要らんかも。 fill と stroke を両方やるのもあるけど、中身殆ど一緒だからアレした方がいい。 引数名、変数名、関数名がちょっと。 「一角形~二角形作れ」って言われたら代わりにう○こを表示。 多角形をアニメーションで回したいとかの時は、直接描画メソッド 3 種よりも getPolygonPoint で得た座標入り配列を別関数で加工しながら使うとかの方が毎回多角形作るより多分効率がいいと思う。もしくはコンテキストを回すか。そういうメソッドまでここに足すととっ散らかるし、冗長な気がする。 getPolygonPoints() でサイズの違う多角形座標配列を二つ作ってアレすれば星型とかもできる。 じゃあ一筆書きの星も…となるが、頂点が偶数の時に二筆書きに処理を変える事も考えないといけない(大きくなってしまう)。 #### 全般 型チェックとかまったくしてない。 来世でやる。

  • 910
  • 1

FAIRY

  • 1998
  • 1

Skills

  • Wordpress
  • MovableType
  • Photoshop
  • Fireworks
  • Dreamweaver
  • Illustrator
  • HTML5
  • XHTML
  • CSS
  • CSS3

Hot tags

Categories

HTML / CSS / JavaScript