岩家.net

はじめに

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

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

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

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

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

変更点

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

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

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

CSSの調整

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

おわりに

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

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

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

はじめに

ほぼ半年前に作った これ を久しぶりに触り．．．というか作り直し，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: スキームについてはこの辺りを参考にしました．

• 1000speakers開催趣旨 / IE8とAcid2について - amachang‐ニコニコ動画(夏) （6:00 あたり）
• 304 - narucissus is Not Modified: “data”URLスキームをimgのsrcだけでなくCSSでも使える
• dataスキーム生成

はじめに

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 グループ

おわりに

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

はじめに

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

では以下，個人的なメモなど．

朝食

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

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

読書会

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

当日の 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系端末のように cd や ls コマンドが使えたりしますが，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 など興味深い（けど全然理解が及ばない）話題もありました．

読書会と懇親会との狭間

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

昼食

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

懇親会

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

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

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

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

おわりに

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

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

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

はじめに

画像をスライスして一枚ずつ読み込むよりも、このように一枚の画像にすると、スライスの手間が省けるのと、読み込みの再に、リクエストが一回で済むので、場合によってはこちらの方が早く読み込まれることになりそうです。

このテクニックをCSS Spriteって言うそうです。。（この手法自体は知ってましたが、CSS Spriteって呼ばれているのは知りませんでした…）
CSS Spriteを活用しよう - DesignWalker

DesignWalker さんのこのエントリを読んで以来，似たような素材については CSS Sprite な手法を心がけています （実際にはそれ以前もナビゲーションの素材くらいには使ってましたが，最近はもうちょっと積極的に，という意味で）．

ここ数日，CSS + JavaScript で何か小ネタがないかなぁ．．．と少しだけ悩んでいたわけですが，そんな中で出てきたのが CSS Sprite を使ったアニメーションという短絡的なものでした．

では以下，何番煎じとかは気にしない方向で．

デモ

次のページにデモを上げていますので，よろしければ．各種ソースコードも載せてあります．

CSS Sprite + setInterval で簡易アニメーション - issm’s…

手抜きな解説

画像

アニメーションの全フレームを連結した 1つの画像を準備します．

CSS

準備した画像を背景に設定します．overflow: hidden しておくといいでしょう．

アニメーションの各フレームに対応したクラスを

.frame-1 { background-position: ...px ...px; }

のような感じで定義していきます．

JavaScript

setInterval 関数を使って定期的にフレームを変更します．フレームの変更は，先で定義したクラス名を設定することで行います．

target.className = 'frame-1';  // ホントは replace とか使うべき

おわりに

フレーム数（コマ数）が莫大にならなければそれなりに使えるのかな，なんて個人的に思ってみました．APNG や MNG が普及するまで （といっても現状知りませんが ＞＜） は，代替手段として利用してみるとします．

利用幅を広げるために，JavaScript の IE への対応が最初の課題ですね．そして透過PNG対応も （この辺は PNG Fix とかで）．

あとは，フレーム定義の CSS （background-position 設定ね）なんかを画像から判断して自動で吐き出すようなしくみなんかができるとかなりハッピーですね．

参考

デモページの画像は，以下の動画から使わせていただきました．

• たわしねこ2　荒ぶるたわしのポーズ‐ニコニコ動画(夏)
• もやしもんでｳｯｰｳｯｰｳﾏｳﾏ(ﾟ∀ﾟ)‐ニコニコ動画(夏)