http://blog.iwa-ya.net 家主 issm の日誌的記録． Tue, 19 Aug 2008 05:48:46 +0900 http://backend.userland.com/rss092 ja はじめに 昨日の週次レビュー時，ボールペン Reporter4 の黒インクが切れました． そんなわけで Pentel の 0.5mm なゲルキンキの リフィル LSN5H を取り付けてみました． これまではずっと Zebra の SK-0.7芯 を使っていましたが，インクがモリっと出てイラっとすることもときどきあったので，ちょっと気分転換でも，という感じですかね． おわりに ゲルインキを使うのは初めてっぽいので，しばらく様子見することにします． http://blog.iwa-ya.net/2008/08/19/144846 はじめに 知らなかったのでメモ． メモの内容 Basic認証や Digest認証を介してアクセスした際には，環境変数 REMOTE_USER にユーザ名が格納されますよ，と． 次のような感じで使えるわけですね． #!/usr/bin/perl use strict; use warnings; print << "..."; Content-type: text/plain; charset=utf-8 Hi, $ENV{REMOTE_USER}. ... おわりに ちょっとしたアプリでユーザを振り分けたいときなんかに便利かもです． http://blog.iwa-ya.net/2008/08/04/103534 はじめに 町の人との会話したり足元を調べたりするときに出てくるアレです．実際の名前はわかっていませんが．．． 表示させたいテキストを与えたときに一度に表示するのではなく，一文字一文字．．．のようなそれっぽい感じにしてみました．半角英数字を全角に置換する，などの処理も行っています． 「矢印が出て Aボタン（この場合クリック？）で次のページ」 な部分の実装が次の課題ですかね． 岩家ぶろぐ » [javascript] DQWindowManager を久しぶりにさわって 0.2.0 にしてみた 先日公開した DQWindowManager 0.2.0 で 「次の課題」 としていた部分を実装してみました． 変更点 メッセージウィンドウの改良 メッセージに続きがあるときに現れる 「▼」 なマークの実装や，それに関連する処理を追加しました．これが現れたときにメッセージウィンドウをクリックすることで，メッセージの続きを表示します． また，メッセージ終了時，メッセージウィンドウをクリックすることで閉じるようにもしました． CSSの調整 そのときの気分で行っていたり．．． おわりに 今後実装してみたいものをメモしておきます． 「はい・いいえ」ウィンドウ 「どうぐ」ウィンドウ 「じゅもん」ウィンドウ 「つよさ」ウィンドウ 「そうび」ウィンドウ 他，思いついたり思い出したりしたもの ちなみに，冒頭のスクリーンショットは，googlemapでドラゴンクエスト３ そして伝説へ… にてブックマークレットを実行してみたものです． http://blog.iwa-ya.net/2008/07/30/125522 2008-07-29 22:10:00 頃追記 本エントリにて，最初にスクリプトを読み込むようにしていましたが，これをやめ，ブックマークレット方式に変更しました． はじめに ほぼ半年前に作った これ を久しぶりに触り．．．というか作り直し，ver. 0.2.0 という形で公開してみます．過去の JavaScript 勉強会で吸収してきたこと（？）なんかもつぎ込んだりつぎ込まなかったりです． では以下，今回の変更点について少し書いていきます． なお，まだまだ実験的ですので，一部のブラウザではまともに動作しません．IE とか IE とか．．． ブックマークレット 次のリンクをクリックするとコマンドメニューが表示されます． コマンド？ また，ブックマークやツールバーに登録することで，（たいていの）任意のページでコマンドメニューを表示させることもできます． 変更点とか メッセージウィンドウの実装 （まだ途中） 町の人との会話したり足元を調べたりするときに出てくるアレです．実際の名前はわかっていませんが．．． 表示させたいテキストを与えたときに一度に表示するのではなく，一文字一文字．．．のようなそれっぽい感じにしてみました．半角英数字を全角に置換する，などの処理も行っています． 「矢印が出て Aボタン（この場合クリック？）で次のページ」 な部分の実装が次の課題ですかね． jQuery依存を排除 ver. 0.1.0 では， jQuery がなかったらこれをロードする 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スキーム生成 http://blog.iwa-ya.net/2008/07/28/153517 はじめに 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 グループ おわりに それでは，興味のある方はお気軽にご参加ください． http://blog.iwa-ya.net/2008/07/26/124436 はじめに ちょっとやるべきことがあって，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 ) http://blog.iwa-ya.net/2008/07/24/213519 はじめに 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'; ... http://blog.iwa-ya.net/2008/07/22/051540 はじめに 7月14日（月），リクルート　オリックス名古屋錦ビル （伏見ね）にて Mashup Caravan in NAGOYA が行われる，ということを，WCAN 2008 Summer で初めて知った私．せっかくの機会なので，参加させていただいてきました． 気がつけば，顔なじみの方も何人かみえてましたね． 本編 箇条書きモードで． 渡辺さん 遅刻のため前半聴けなかった orz 過去の Mashup Award 受賞者たちのその後 Maddy Project 坂本さん 名古屋でフリーのエンジニア 作品紹介 Surf This ( @ 2nd ) おおざっぱに言えばメタ検索 Firefly navigator ( @ 3rd ) 参加動機 名古屋地方は組み込みの開発が多い 組み込みの現場にいるのでWeb系開発の実績が作れない 1 Week 開発手順 「作りたいモノ」より「使いたいモノ」を作る 個人的に非常に同意 アウトプットを明確に 使えそうなAPIを幅広くセレクト どんどんさがしてメモる 各APIをひもづける ひもづけたAPIsに協賛企業のものが含まれていなければとりあえず却下，次の組み合わせへ 作る 公開準備 エントリ ？？？ 質問 応募作品の開発期間は？ 2週間くらい 3日な人もいるけど，まぁ人それぞれ 時間の取り方 11時くらい～2，3時 → 土日に寝てしまう 土日に時間を大きくとった方がいいかも ハードウェアのマッシュアップもあり得る．作って提案してみては？ 準備がいろいろ大変 受賞してよかったこと，開発で苦労したことなど感想を 2ndの授賞式の直前で息子さんが誕生 受賞履歴を公表できる．人に知らしめることができるのはいいことだ イケテルMashupの作り方 Ruby Business Commons Ruby Business Commons (RBC) ... http://blog.iwa-ya.net/2008/07/19/053354 はじめに 去る 7月12日（土），WCAN 2008 Summer に参加してきました．あと，ちょっとだけ前に立たせていただきもしました． それでは以下，箇条書きモードメインで． 開場前 ちょっと早く着きすぎたみたいです． SESSION-1 デザイン，Web制作，そして写真も手がけられる おかだよういちさん のセッション． photograph: photo 「光」+ graph 「描くもの」→ 「光が描くもの」 絞り aperture 小さくなるほど全体にピントが合う 「ボケ」をコントロール シャッタースピード 「ブレ」をコントロール 「写真は真実を撮らない」 暗闇の中の桜を30-40秒くらいで → 真実ではない 一生懸命な感じを表現できる スピード感を表現できる 瞬間を止められる 時間や風・水の流れを表現できる 肉眼では見られない非日常を撮れる 焦点距離分の1以上のシャッタースピードがあれば三脚がなくても手ぶれを防げる yasuhisaさんはぶれやすい → よく動くので EV（露出値） = Av（絞り値） + Tv（シャッタースピード値） 感度 sensitivity 値が倍になると，半分の光の量で同じものが撮れる，という意味 Nikon D700 とかだと，ISO 25600 まであったり PENTAX には 「Sv（感度優先）」なモードがある ホワイトバランス（WB，white balance） グレーカードとかを基準に調整 一眼レフ Canon A-1 センサの大きさ フルサイズ: 36mmx24mm 実際のフィルムと同じ大きさ APS-C 1/2.5 インチ ... http://blog.iwa-ya.net/2008/07/16/094123 はじめに 画像をスライスして一枚ずつ読み込むよりも、このように一枚の画像にすると、スライスの手間が省けるのと、読み込みの再に、リクエストが一回で済むので、場合によってはこちらの方が早く読み込まれることになりそうです。 このテクニックを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 ... http://blog.iwa-ya.net/2008/07/11/064937