[javascript] DQWindowManager 0.2.1 を公開しました

2008.7.30(水) 12:55   タグ: JavaScript, DQWindowManager
「googlemapでドラゴンクエスト3 そして伝説へ…」 と DQWindowManager.

はじめに

町の人との会話したり足元を調べたりするときに出てくるアレです.実際の名前はわかっていませんが...

表示させたいテキストを与えたときに一度に表示するのではなく,一文字一文字...のようなそれっぽい感じにしてみました.半角英数字を全角に置換する,などの処理も行っています.

「矢印が出て Aボタン(この場合クリック?)で次のページ」 な部分の実装が次の課題ですかね.

岩家ぶろぐ » [javascript] DQWindowManager を久しぶりにさわって 0.2.0 にしてみた

先日公開した DQWindowManager 0.2.0 で 「次の課題」 としていた部分を実装してみました.

変更点

メッセージウィンドウの改良

メッセージに続きがあるときに現れる 「▼」 なマークの実装や,それに関連する処理を追加しました.これが現れたときにメッセージウィンドウをクリックすることで,メッセージの続きを表示します.

また,メッセージ終了時,メッセージウィンドウをクリックすることで閉じるようにもしました.

CSSの調整

そのときの気分で行っていたり...

おわりに

今後実装してみたいものをメモしておきます.

  • 「はい・いいえ」ウィンドウ
  • 「どうぐ」ウィンドウ
  • 「じゅもん」ウィンドウ
  • 「つよさ」ウィンドウ
  • 「そうび」ウィンドウ
  • 他,思いついたり思い出したりしたもの

ちなみに,冒頭のスクリーンショットは,googlemapでドラゴンクエスト3 そして伝説へ… にてブックマークレットを実行してみたものです.

[javascript] DQWindowManager を久しぶりにさわって 0.2.0 にしてみた

2008.7.28(月) 15:35   タグ: JavaScript, DQWindowManager

2008-07-29 22:10:00 頃追記

本エントリにて,最初にスクリプトを読み込むようにしていましたが,これをやめ,ブックマークレット方式に変更しました.

はじめに

ほぼ半年前に作った これ を久しぶりに触り...というか作り直し,ver. 0.2.0 という形で公開してみます.過去の JavaScript 勉強会で吸収してきたこと(?)なんかもつぎ込んだりつぎ込まなかったりです.

では以下,今回の変更点について少し書いていきます.

なお,まだまだ実験的ですので,一部のブラウザではまともに動作しません.IE とか IE とか...

ブックマークレット

次のリンクをクリックするとコマンドメニューが表示されます.

コマンド?

また,ブックマークやツールバーに登録することで,(たいていの)任意のページでコマンドメニューを表示させることもできます.

変更点とか

メッセージウィンドウの実装 (まだ途中)

町の人との会話したり足元を調べたりするときに出てくるアレです.実際の名前はわかっていませんが...

表示させたいテキストを与えたときに一度に表示するのではなく,一文字一文字...のようなそれっぽい感じにしてみました.半角英数字を全角に置換する,などの処理も行っています.

「矢印が出て Aボタン(この場合クリック?)で次のページ」 な部分の実装が次の課題ですかね.

jQuery依存を排除

ver. 0.1.0 では,

  1. jQuery がなかったらこれをロードする
  2. DQWindowManager をロードする

といった,場合によっては 2つのファイルをロードするようなステップを踏んでいました.

今回は jQuery への依存をやめ,どんなときも 1つの JavaScript ファイルで完結できるようにしてみました.

data: スキームの使用

少し前にその存在を知ったわけですが,HTTPリクエスト数を減らせたり構成するファイル数を削減できたり,となんだかいろいろよさげなので,これを機に使ってみることにしました.

IE(6?)には対応していないので,これらのブラウザの場合には,今までどおり画像ファイルを読み込む形をとっています.(ただ,他の動作部分を対応させていないので,あんまり意味がなかったり.)

CSS の追加・修正

ブックマークレット等で立ち上げる際,基となるサイトのCSSが反映されてしまう場合が多々あったので,CSS設定をくどめにしてみました.

また,立ち上がるウィンドウの position プロパティを fixed に設定することで,スクロールしてもその場に留まるようにもしてみました.

詳細は

こちらをドウゾ.

DQWindowManager - crafts - issm’s …

おわりに

まだまだ改良の余地ありまくりなので,時間を見つけて進化させていきたいところです.

参考

data: スキームについてはこの辺りを参考にしました.

DeLLa.JS 「JavaScript第5版」読書会#5 やります

2008.7.26(土) 12:44   タグ: JavaScript, イベント

はじめに

8月 2日(土)に,DeLLa.JS 「JavaScript第5版」読書会の第 5回目を行いますよ,ということを改めて告知します.

流れとしては前回とほぼ同様な感じですかね.

開催内容

以下,DeLLa.JS@Googleグループの該当ページよりコピペ.

日時

2008/8/2(土) 13:00〜19:00

場所

VISH株式会社様 セミナールーム (参考

集合

時間に余裕がある方は スギ薬局 に集合しましょう.ドリンクやお菓子を先に買っておけますし.

12:55 になったら会場のビルへ向かいましょう.

13:00 にVISHのスタッフさんがみえて案内していただけることになっています.

なお,12:55 にスギ薬局に間に合いそうにない方は,会場のビルへ直接向かって下さい.

※ (遅れてしまった場合にも対応していただけるとのことですが,できるだけ負担をかけないようにしましょうね.)

費用

300円ほど(お菓子代)

定員

15名

概要

オライリー・ジャパンのJavaScript第5版を読みます。

今回は、158ページ (9章 / 9.3 JavaScriptの「クラス」)から読みはじめます。

持ってくるもの

オライリー・ジャパンのJavaScript第5版

参加方法

このグループに参加していただき、このページ下部にある「読書会参加者」と「懇親会参加者」を直接編集してください。

懇親会

有志で行いましょう。費用は別途発生します。

DeLLa.JS JavaScript第5版読書会#5 - DeLLa.JS | Google グループ

おわりに

それでは,興味のある方はお気軽にご参加ください.

[memo][perl][cpan] PDF::API2::Lite をかじってみた

2008.7.24(木) 21:35   タグ: 覚え書き, Perl

はじめに

ちょっとやるべきことがあって,PDF を扱う CPANモジュール PDF::API2::Lite を少しかじってみました.

The CPAN Search Site - search.cpan.org

以下,かじってみたメソッドについてまとめてみます.「???」な部分はスルーしちゃって下さい.

基本的(?)なメソッド

$pdf = PDF::API2::Lite->new

PDF::API2::Lite インスタンスを生成します.以下,$pdf は同インスタンスを表すものとします.

$pdf->page( $w, $h )

$wpx,高さ $hpx のページを新たに生成します.

$pdf->saveas( $file )

$file という名前で PDF を保存します.

$font = $pdf->corefont( $fontname )

で指定したアドビコアフォント(?,adobe core font)の情報を持ったフォントオブジェクト(PDF::API2::Resource::Font::CoreFont インスタンス) を生成します.

以下,$font は???

$font = $pdf->ttfont( $ttfile )

$ttfile で指定した TrueType フォントの情報を持ったフォントオブジェクト (PDF::API2::Resource::CIDFont::TrueType インスタンス) を生成します.

以下,$font は???

画像関連のメソッド

$img = $pdf->image_jpeg( $file )

$file で指定した JPEG 画像の情報を持ったオブジェクト (PDF::API2::Resource::XObject::Image::JPEG インスタンス) を生成します.

以下,$img は???

$img = $pdf->image_png( $file )

$file で指定した PNG 画像の情報を持ったオブジェクト (PDF::API2::Resource::XObject::Image::PNG インスタンス) を生成します.

以下,$img は???

描画関連のメソッド: 基本

$pdf->fillcolor( $color )

描画における塗りつぶしの色,テキストの色を $color に設定します.

$color で指定できる色の名前やフォーマットについては以下のとおり.

色の名前

aliceblue, antiquewhite, aqua, aquamarine, azure, beige, bisque, black, blanchedalmond, blue, blueviolet, brown, burlywood, cadetblue, chartreuse, chocolate, coral, cornflowerblue, cornsilk, crimson, cyan, darkblue, darkcyan, darkgoldenrod, darkgray, darkgreen, darkgrey, darkkhaki, darkmagenta, darkolivegreen, darkorange, darkorchid, darkred, darksalmon, darkseagreen, darkslateblue, darkslategray, darkslategrey, darkturquoise, darkviolet, deeppink, deepskyblue, dimgray, dimgrey, dodgerblue, firebrick, floralwhite, forestgreen, fuchsia, gainsboro, ghostwhite, gold, goldenrod, gray, grey, green, greenyellow, honeydew, hotpink, indianred, indigo, ivory, khaki, lavender, lavenderblush, lawngreen, lemonchiffon, lightblue, lightcoral, lightcyan, lghtgoldenrodyellow, lightgray, lightgreen, lightgrey, lightpink, lightsalmon, lightseagreen, lightskyblue, lightslategray, lightslategrey, lightsteelblue, lightyellow, lime, limegreen, linen, magenta, maroon, mediumaquamarine, mediumblue, mediumorchid, mediumpurple, mediumseagreen, mediumslateblue, mediumspringgreen, mediumturquoise, mediumvioletred, midnightblue, mintcream, mistyrose, moccasin, navajowhite, navy, oldlace, olive, olivedrab, orange, orangered, orchid, palegoldenrod, palegreen, paleturquoise, palevioletred, papayawhip, peachpuff, peru, pink, plum, powderblue, purple, red, brown, royalblue, saddlebrown, salmon, sandybrown, seagreen, seashell, sienna, silver, skyblue, slateblue, slategray, slategrey, snow, springgreen, steelblue, tan, teal, thistle, tomato, turquoise, violet, wheat, white, whitesmoke, yellow, yellowgreen
PDF::API2::Lite - lite pdf creation - search.cpan.org

RGB 表記

#rgb, #rrggbb, #rrrgggbbb and #rrrrggggbbbb
PDF::API2::Lite - lite pdf creation - search.cpan.org

CMYK 表記

%cmyk, %ccmmyykk, %cccmmmyyykkk and %ccccmmmmyyyykkkk
PDF::API2::Lite - lite pdf creation - search.cpan.org

HSL 表記

&hsl, &hhssll, &hhhssslll and &hhhhssssllll
PDF::API2::Lite - lite pdf creation - search.cpan.org

HSV 表記

!hsv, !hhssvv, !hhhsssvvv and !hhhhssssvvvv
PDF::API2::Lite - lite pdf creation - search.cpan.org

$pdf->strokecolor( $color )

描画における線,輪郭(?)の色を $color に設定します.

$color で指定できるフォーマットは上と同様です.

$pdf->linewidth( $width )

描画における線,輪郭(?)の幅を $widthpx に設定します.

$pdf->transform( %opts )

描画の基準情報を %opts で与えます.設定した情報は,再度設定しない限り維持されるようです.

主なオプション (%opts の具体的な内容) については次のとおり.

-transrate => [ $x, $y ]

描画の基準となる座標を ($x, $y) に設定します.なお,$x$y には前回設定時からの相対的な値が入るようです.

-rotate => $rot

水平方向に対する回転角度を $rot° に設定します.

-scale => [ $sx, $sy ]

描画対象の倍率を水平方向 $sx倍,垂直方向 $sy倍に,それぞれ設定します.

描画関連のメソッド: グラフィクス

$pdf->move( $x, $y )

描画の基準となる座標を ($x, $y) に設定します.

$pdf->line( $x, $y )
line メソッド.

基準座標から座標 ($x, $y) への直線を描画するための情報を蓄えます.そして,座標 ($x, $y) が新たな基準座標となります.

なお,このメソッドは描画情報を蓄えるのみで,描画は行いません.

$pdf->curve( $x1, $y1, $x2, $y2, $x3, $y3 )
curve メソッド.

基準座標から座標 ($x1, $y1) を通過して座標 ($x3, $y3) へ達するような曲線を描画するための情報を蓄えます.座標 ($x2, $y2) は制御点とでもいえばいいのかな?

なお,このメソッドは描画情報を蓄えるのみで,描画は行いません.

$pdf->ellipse( $x, $y, $a, $b )
ellipse メソッド.

座標 ($x, $y) を中心とし,長軸の長さの半分を $a,短軸の長さの半分を $b とする楕円を描画するための情報を蓄えます.

なお,このメソッドは描画情報を蓄えるのみで,描画は行いません.

$pdf->arc( $x, $y, $a, $b, $alpha, $beta, $move )
arc メソッド.

座標 ($x, $y) を中心とし,長軸の長さの半分を $a,短軸の長さの半分を $b とする楕円(円)における,???$alpha???$beta???の楕円弧(円弧)描画するための情報を蓄えます.

パラメータ $move はよくわかってません.

なお,このメソッドは描画情報を蓄えるのみで,描画は行いません.

$pdf->circle( $x, $y, $r )
circle メソッド.

座標 ($x, $y) を中心,$r を半径とする円を描画するための情報を蓄えます.

なお,このメソッドは描画情報を蓄えるのみで,描画は行いません.

$pdf->rect( $x, $y, $w, $h )
rect メソッド.

左下の座標が ($x, $y) で,水平方向の長さが $w,垂直方向の長さが $h である長方形を描画するための情報を蓄えます.

なお,このメソッドは描画情報を蓄えるのみで,描画は行いません.

$pdf->rectxy( $x1, $y1, $x2, $y2 )
rectxy メソッド.

左下の座標が ($x1, $y1),右上の座標が ($x2, $y2) となるような長方形を描画するための情報を蓄えます.

なお,このメソッドは描画情報を蓄えるのみで,描画は行いません.

$pdf->poly( $x1, $y1, …, $x_n, $y_n )
poly メソッド.

座標 ($x1, $y1),座標 ($x2, $y2),...,座標 ($x_n, $y_n) が順に頂点となるような多角形を描画するための情報を蓄えます.

最初の座標と最後の座標が一致していない場合,後述する close メソッドで「パスを閉じて (Illustrator 的な意味で)」おくとよさげです.

なお,このメソッドは描画情報を蓄えるのみで,描画は行いません.

$pdf->close
close メソッド.

パスを閉じます.(Illustrator 的な意味で)

$pdf->stroke
stroke メソッド.

蓄えられた描画情報に基づいて,strokecolor メソッドで設定された色で線・輪郭を描画します.

$pdf->fill
fill メソッド.

蓄えられた描画情報に基づいて,fillcolor メソッドで設定された色で「塗りつぶし」を描画します.

$pdf->fillstroke
fillstroke メソッド.

蓄えられた描画情報に基づいて,strokecolorfillcolor それぞれのメソッドで設定された色で線・輪郭つき「塗りつぶし」を描画します.

描画関連のメソッド: 画像配置

$pdf->image( $img, $x, $y, $scale )
$pdf->image( $img, $x, $y )

画像オブジェクト $img を,座標 ($x, $y) が左下となるように,伸縮倍率 $scale(指定しない場合は 1) で配置します.

描画関連のメソッド: テキスト

$pdf->textstart

今からテキストを描画しますよ,の宣言,そんなニュアンスで解釈しています.

$pdf->textfont( $font, $size )

描画するフォントの情報としてフォントオブジェクト $font の情報を設定します.また,描画するフォントのサイズを $sizepx(?) に設定します.

$pdf->textlead( $leading )

わかってません.何が起こるのでしょうかね?

$pdf->text( $string )

文字列 $string を描画します.utf-8 にデコードされていた方がよさげのようです.

$pdf->nl

改行...ですかね?試してみたところ,行の先頭に戻っただけのような感じでした.

$pdf->textend

テキスト描画終わり,の宣言,そんなニュアンスで解釈しています.

$pdf->print( $font, $size, $x, $y, $rot, $just, $text )

Convenience wrapper for shortening the textstart..textend sequence.
PDF::API2::Lite - lite pdf creation - search.cpan.org

とあるように,上記の textstart...textend をスルーしてこれだけ覚えておいてもよさげです.

このメソッドは,文字列 $textを,フォントオブジェクト $font の情報が示すフォント,サイズ $sizepx(?),水平方向に対する回転角度 $rot° で描画します.このテキストを囲む長方形の左下の座標が ($x, $y) となります.

$text は utf-8 にデコードされていた方がよさげのようです.

パラメータ $just については使い方をよくわかってません.

なお,テキストの描画には,fillcolor メソッドで設定した色が使われます.

おわりに

細かい挙動などを把握していないため解釈を謝っている部分もあるかと思いますが,PDF::API2::Lite モジュールのメソッドのうちかじってみたものを挙げてみました.

これらのメソッドを組み合わせるだけでもいろいろ PDF でいろいろ遊べそうなことを,少しかじってみてわかった気がします.

Mediabox とか XObject とかよくわからない物体があったりしますが,理解していなくてもとりあえずは PDF として出力できてはいるようなので...まぁ追々勉強するとします.

Kanasan.JS 「JavaScript第5版」読書会#5 に参加してきました

2008.7.22(火) 5:15   タグ: JavaScript, イベント
不言実行

はじめに

Kanasan.JS 「JavaScript第5版」読書会#5 に参加するため,約 4ヶ月ぶりに大阪へ行ってきました.

では以下,個人的なメモなど.

朝食

Kanasan.JS 前に朝食

開場までちょっと時間があったので,途中のマクドナルドに寄って時間をつぶしてました.

朝って,朝用のメニューしかないんですね.チーズバーガー食べたかったのに...

読書会

ほぼ時間どおりに会場に到着.すでに到着している参加者全員で準備を行い,読書会開始です.

当日の Lingr はつぎのとおりです.

Kanasan.JS : JavaScript Workshop in Kansai (at Lingr) > Archives > July 20, 2008

DOM Level 0

“DOM Level 0″ は W3C が DOM の標準化を始める前にブラウザ間で共通だったオブジェクトモデルです。
Mozilla Web 開発者資料

なるほど.

<script>archive属性

<script archive="hogehoge.js"></script> のようにするのかな?全然知りませんでした.

takesakoさんと amachangさん

yukkyさんと一緒にお菓子を持っての登場,なんというサプライズ.

Shibuya.JS in Kyoto の流れで参加されることになったみたいですね.

<script type="text/html">

挙動を理解できていません...

defer属性

これは便利...と思ったら,現状で対応しているのがIEだけ.しかも正しく実装されていないって...

<script>タグを認識しないブラウザ

相当古いブラウザもだけど,携帯のブラウザや音声ブラウザとかもね.

HTMLを解釈後,スクリプト(特にDOM操作関連)まで実行した結果を読み上げるようなブラウザがあるのかどうかという話も出ました.

イベントハンドラ

onchangeイベントハンドラは,対象の要素のフォーカスが外れたときに呼び出されるんですね.

onloadイベントハンドラは,body要素にのみ対応しているみたいですが,load イベントを addEventListener すれば img要素など他の要素でもいけるようです.

document.all

Firefox は document.all が使えるものの,false を返すみたいです.

document.all ? 'ie' : 'firefox';  //  'firefox' on firefox
document.domain

これは知りませんでした.

Lightning Talks (よりもゆるく)

休憩のたびに 1つずつ発表,という流れでした.こういう進行もあるんですね.

Jarminal(仮?) - 37toさん

JavaScript + Terminal = Jarminal,Jash のように任意のページでブックマークレットとかで立ち上がる JavaScript コンソール.

Unix系端末のように cdls コマンドが使えたりしますが,cd はオブジェクトの階層を上下するコマンド,ls はカレントオブジェクト(?,カレントディレクトリ的な意味で)におけるメソッドの一覧を表示するコマンド,といった感じで操作を行えるのがおもしろいです.

内部では with を駆使している部分もあるみたいです.

是非とも使ってみたいツール,公開が楽しみです.

ゆの in ECMAScript - nanto_viさん

ゆのっちの解説や,在住の京都では ひだまりスケッチ×365 の開始時間が 夏目友人帳 の放映時間と一部かぶることなど...ではなく,ゆの in language を ECMAScript で実装しよう,というお話.

もう仕様の詳細まで把握していないと実装できませんよ,こんなの...ちなみに,以下のような文字列(?)が実行できてしまいます.

ゆの in languageが流行ってるって?
そんなことよりヱヴァンゲリヲン新劇場版:破はまだですか?
早くカヲル君が見たいです.
ヱヴァンゲリヲン新劇場版:序でカヲル君が出てきたときは (以下省略);
ゆの in ECMAScript: Days on the Moon

何気に in を演算子や三項条件演算子なんかが使われていたり...というのもさすがとしか言えません.

詳しくは,nanto_viさんの次のエントリを参照.

ゆの in ECMAScript: Days on the Moon

yharaさん

Extreme Presentation (XP?): 質疑応答の時間をとらないかわりに,発表の途中でもどんどん質問していいよ,といった方式.

現在開発中のブックマークレットのブックマークレットのお話.自分のよく使うブックマークレットをブラウザごとに毎回設定するのがメンドイので,それらが登録されているブックマークレットのリストを呼び出すようなブックマークレット 1つだけ登録しておけばいいんじゃね?という感じですかね.

自分も これ を少しは進めないとな,と考えさせられました.

Yuyaさん

LDR candle のお話.Livedoor Reader の未読数に着目し,その推移を株式チャート風に見せる Webサービスです.チャートをながめると,その人の生活風景が見えたり見えなかったり...?

takesakoさん (基調講演?)

同一出身ポリシー (Same Origin Policy) が話題に挙がったことから,これについて,以前に作成された資料を使ってのお話.

その他,JavaScript の非同期通信を CSS との間で行う(?)Ajacss など興味深い(けど全然理解が及ばない)話題もありました.

読書会と懇親会との狭間

Kanasan.JS JavaScript第5版読書会#5 参加のみなさん

読書会終了後,会場の 1F で集合写真を撮影しました.

昼食

昼食 @ Kanasan.JS

ちなみに,昼食は会場裏の らうめん吉宗 へ総勢17人で突入 (全員一度に入れました) するなどしました.

懇親会

Kanasan.JS 懇親会で抜き打ちテスト 抜き打ちテスト

読書会会場から15分ほど歩いたところにある 家座香屋(いざかや) 6年4組 というお店で行われました.中へ入ると...どうみても小学校です.

さすがに料理まで小学校っぽくはありませんでしたが,懐かしいとしかいえない雰囲気に囲まれ,なんとなくテンションが高めだったかもです.チャイムが鳴ったと思ったら抜き打ちテスト,なんてイベントも発生したり.

ライブラリを使うときのオブジェクト汚染の話題のときにあった,jQuery は「汚染」していないように見えるけど,on~ イベントハンドラを上書きしていたりする といった amachangさんの発言が印象的でした.trigger メソッドはイベントハンドラを直接呼んでいるんですね.あとは,同じく jQuery における function 呼び出しが多いことによるのコストの発生などなど...

終了後,お店を出て解散前に DeLla.JS の宣伝なんかを軽くさせていただきました.で,新大阪駅 ~ 名古屋駅 ~ 自宅,と戻ってきましたとさ.

おわりに

いつもながらハイレベルな読書会,いい刺激でした.

...とか言いながら,読書会中たびたび意識を飛ばしていたので,同じ範囲をざっと読み返しながらのエントリだったりしますが...

あと,進行方法などは DeLLa.JS の参考にもさせていただきたいですね.

ぶろぐ内検索

WCAN 2008 Autumn

wcan2008autumn

DeLLa.JS

細々公開ちゅう

  • ごよてい?
  • にこぐらふ
  • twitomonitor [ついともにた]
  • issm's ...
  • 今さら攻略 スーパーマリオブラザーズ 2

I'm doing...

Loading...

最近のエントリ

最近のトラックバック

最近のコメント

タグ

月別

数値いくつか

  • issmの泳いだ距離
  • issmの100m個メタイム(秒)
  • issmのBMIとissmの体脂肪率
  • issmの最高血圧とissmの最低血圧

スポンサード リンク

メタ情報