Hatena::ブログ(Diary)

130単位

2008-08-31

こまつライブを観てきた

大道芸こまつを観に、大垣まで行ってきました。

komatsu_poster


1公演目

前半はゲーム系やコラボミュージックなど、あらゆるジャンルのネタをまんべんなく。個人的にはドラクエIIIに鳥肌が立ちました。バグってぼうけんのしょが消えるところまでやっていて、あの、少しだけメニューBGMが流れてから呪いの効果音が流れるあたり、完璧でした。

後半はキーボード×トランペットの同時演奏でしっとり系の2曲を披露。ただ、家族連れの多い客層とはマッチしていなかったような気も。それにしても、両手で2つの楽器を演奏する器用さ。しかも感情を込めて目をつぶりながら。すごすぎです。


2公演目

1公演目から多少方向修正して、より一般受けする感じのネタになってたように思います。ドラクエIIIの代わりに「上を向いて歩くダースベイダー」を披露。途中に曲当てクイズなんかも行われて、大いに盛り上がったりしました*1

ラストはラピュタのテーマを同時演奏で。小さい子にも分かりそうな、良い選曲。2公演目は非常に充実した内容でした。また、ほぼ真横から見ていたのですが、指さばきがすさまじかったです*2


komatsu_stage

komatsu_keyboard


MCメモ

  • キーボードヤフオクで5000円
  • 性格はもともと根暗で、ゲームばっかやってた
  • コラボのコツはメロディーが同じ曲を探すこと
  • 17歳から路上でパフォーマンス、癒し系の曲が中心
  • コラボなどをやり出したのはここ1年くらい
  • 9/24に初のDVDが出ます*3

しらないひとのために、YouTubeを貼っておいてみます。

YouTube - こまつ ドラクエのバグと上を向いて歩くダースベイダー

D

【追記】embedタグだとうまく見られないみたいなので、ニコ動も貼っておいてみます。

D


本人によるブログ。最近アメブロに移ったみたいです。

こまつオフィシャルブログこまつの今宵もヒャッホゥ」by Ameba
http://ameblo.jp/komatu-3/

*1:正解者計3名にサイン色紙

*2:さらに足でペダルも操作してた

*3『こまつの自己紹介』

2008-08-29

Web標準デザインを学ぶ

Web標準XHTML+CSSデザイン  クリエイターが身につけておくべき新・100の法則。

Web標準XHTML+CSSデザイン クリエイターが身につけておくべき新・100の法則。


趣味でブログのデザインいじり程度はしていたものの、htmlスタイルシートについて断片的な知識しか持ち得ていなかった自分にとっては、非常に勉強になる本でした。Web系のプログラマであるならば、読んでおいて損はないと思います。

早速、仕事で担当しているサイトに対していくつか反映させてみたりしました。それらを少し紹介。


階層を持つリストの正しい記述法

ul要素、ol要素はli要素しか子要素にもてない。また、li要素はli要素を子要素にもてない。以下、自分が間違って理解していた例と、正しい例。

間違い
<ul>
  <li>2008</li>
    <ul>
      <li>love the world</li>
      <li>Baby cruising Love</li>
    </ul>
  <li>2007</li>
    <ul>
      <li>ポリリズム</li>
      <li>チョコレイト・ディスコ</li>
    </ul>
</ul>
これが正しい
<ul>
  <li>2008
    <ul>
      <li>love the world</li>
      <li>Baby cruising Love</li>
    </ul>
  </li>
  <li>2007
    <ul>
      <li>ポリリズム</li>
      <li>チョコレイト・ディスコ</li>
    </ul>
  </li>
</ul>

clearを指定した要素の上余白はpaddingを利用

clearは、「先攻するフロートボックスに隣接するかどうか」を指定するプロパティ。自動的に上余白が与えられ、margin-topの値は効かない。

上余白の実現方法 (2種類・どちらでも可)
  • 先のフロートボックスにpadding-bottomを指定
  • フロートボックス後のclear指定要素にpadding-topを指定

Firefoxでスクロールバー領域を常に確保

Firefoxでは、ページの高さが表示領域内に収まる場合、縦のスクロールバーが表示されない。そのため、スクロールバーが表示されるページと比較したとき、センタリング位置にずれが生じてしまう。以下の指定を加えることで解決。

センタリング位置ずれ回避方法
html {
  overflow-y: scroll;
}

2008-08-26

面接をして感じたこと

このところ、立て続けに採用面接に同席させていただいています。

どちらかといえば"ホーム"という感覚なので、気持ち的には楽です。ついつい雑談になってしまったりもします。そして、まだ慣れていないためか、面接が終わってからああ言えばよかった、あれを聞けばよかった、というのがどうしても出てきてしまいます。

  • 相手にとって有益な情報を提供できたかどうか
  • 一緒に働くイメージを具体的に想像できたかどうか、

このあたりに注意しながら振り返ってみるのが必要かなぁと感じます。

2008-08-25

Subversion 競合発生時の正しい対処

機能追加のためソースコードを修正。細かく動作確認し、いざコミット。したときに、競合が発生すると非常に萎えます。

よろしくない手順

  1. 「mine」で検索して競合発生箇所を確認
  2. 該当ファイルと競合時にできる3つのファイルをすべて削除
  3. "更新(svn update)"を実行して復元
  4. 必要な部分を編集して"コミット(svn commit)"

これまでは上記手順で半ば無理やり解決させていました。修正箇所が一部の場合が多かったため、特に問題はありませんでした。が、本日大きなミスをやらかしてしまいました。

上記手順の問題点。競合発生箇所以外でマージが行われていた場合、それを見落としてしまう、ということ。要するに、削除して復元したときには、マージ部分も編集し直す必要があるというわけです。

しかも今回の場合はコントローラ、サービス、ビューのすべてでやらかしてしまい、再修正と確認作業に多くの無駄な時間を費やしてしまいました。このような状況を防ぐために、競合の解消は下記手順でするべきだといえます。

正しい手順

  1. 該当ファイルを「mine」で検索*1
  2. コードの差異を確認して編集
  3. 「mine」が見つからなくなるまで1〜2の繰り返し
  4. "問題の解消(svn resolved)"の実行後、"コミット"

さらに"問題の解消"を行う前にファイルの差分を確認しておけば、万全といえると思います。

参考リンク

subversionをコマンドで使う練習その4 - いろいろメモをしとこうと思う
http://d.hatena.ne.jp/tadasy/20061126/1164553323

競合の解消 (TortoiseSVN日本語マニュアル)
http://tortoisesvn.net/docs/nightly/TortoiseSVN_ja/tsvn-dug-conflicts.html

*1:もしくは「<<<」

2008-08-24

JT将棋日本シリーズ二回戦第二局 封じ手を振り返る

JT将棋日本シリーズ
http://www.jti.co.jp/JTI/shogi/

観戦しに行ってきました。谷川-羽生という、屈指の好カード。


10手目に後手の飛車が1二にいるという、なんとも珍しい将棋に。その後駒組みが続き、封じ手*1。先手は銀冠+角投下、後手は全体のバランス重視の陣形+角手持ち、という状況です。ここで先手の羽生名人が封じました。

f:id:deeeki:20080824014708j:image:w320

個人的には第一感は▲4八飛。2筋は銀がいて攻めづらいので、攻め駒の多い4筋へ狙いを変更するという手です。

しかし、予想のヒントとしての解説*2で真っ先に出たのは▲4七金。自然な前進で駒の連携を図り、場合によっては6筋への飛車の転回を含みにした手といえるでしょう。二番手の候補が▲6六歩。突いたばかりの歩を逆用して、歩交換を狙う手です。他には、穴熊へ移行する▲9八香や、▲4八金なんかが挙げられていました。

…あれ、▲4八飛は?と不安になってきました。少し考えてみると、次の後手の手番での△6六角や△2六角が気になりだしました*3。結局解説では最後まで▲4八飛は挙がらず。動揺に負けて、▲6六歩に変更して用紙を提出したのでした。一旦書いたものをわざわざ取り消すほどのチキンっぷり。

f:id:deeeki:20080824014709j:image:w320

で、対局再開。指されたのはなんと▲4八飛!会場からは歓声とどよめきが上がりました。自分はもう苦笑いするしかありませんでした。なお正解者は約150人と発表されましたが、来場者数からして1割以下だったと思われます。

f:id:deeeki:20080824014710j:image:w320

難解な中盤を経て、最後に勝負を制したのは羽生名人。上の写真は感想戦の様子*4。ちなみに封じ手に関しては、「▲4五歩と突いたからには飛車は(4八に)回る予定でいた」のだそうです。


会場から出る際、羽生名人と握手しました*5。感動しました。


※対局の棋譜こちらのページにアップされると思います

*1:対局者の休憩も兼ねて、封じ手予想クイズがあるのです

*2:杉本七段・矢内女流名人

*3:2七角もあるかもしれません

*4:駒がぶつかりまくっています

*5:「お見送り」ということで来場者ほぼ全員と。ものすごい"おもてなし"

2008-08-23

社内ルールの提案1つ

Ozawa-Ken - オザワケン

先日社内でタイピングの話題が出た際、紹介してみたソフト。予想以上に好評いただけているみたいです。ということで、懲りずに社内ルールの提案。

みなさん実際どれくらい速いのか、そしてその中で自分がどのくらいの位置にいるのか、というところにちょっと興味があります。

2008-08-22

PHP開発用エディタを再検討中

最近開発の効率が悪いです。技術不足が大きな原因ではあるのですが、それとは別の手っ取り早い改善策として、開発環境(エディタ)を見直してみることにしました。

  • 秀丸エディタの不満
    • タグジャンプ(関数など定義元へのジャンプ)ができない
    • ファイル一覧(フォルダツリー)がない
    • ウィンドウ幅で折り返すと行番号がおかしい
    • 色分けが一部おかしい*1
    • 文法チェックできない

これらの不満は「マクロでなんとかなる」というレベルのものなのかもしれませんが、そのマクロを探したりするのがしんどいのです。

で、半年前に使おうとして挫折したPleiades(日本語化Eclipse)に再挑戦してみたのですが、重すぎて使う気になりませんでした*2。ちなみにインストールしたのはこちらPHP(JREあり)版。

前に使っていたPeggyってソフトが、デフォルトでタグジャンプ&フォルダ一覧があってなかなか使いやすかったのですが、同じようなソフトはフリーで無いものですかねぇ。PHPエディタにタグジャンプがあればほぼ理想なのですけど。


【追記】

行番号がおかしいのは以下で解決できました。

メニューバーから「その他 > ファイルタイプ別の設定 > 体裁 > 詳細 > 行番号の計算方法」で、「エディタ的」に変更

*1文字列を改行を含んでクォーテーションで囲んだとき

*2:起動に5分くらいかかりました

2008-08-21

さいきんのメモ

*1:正しくは「ドリームウィーバー」 Wikipedia

2008-08-20

社内ルールの提案3つ

昨日の記事とも関連して、社内ルールを考えてみました。

  • トラックバックDay
    • トラックバックを打って記事を書く日
    • とりあえず社員のブログに対してやってみる
    • 全員分読んでいけば何かしらネタはあるんじゃないかと
    • ブログ読んでないって状況を減らせる
    • もちろん、Web上のどんなブログにでも可
      • それはそれで、積極性や感性を磨くことになるだろうから
    • 月1回(ゆっくりできる金曜がいいかも)
  • テーマエントリDay
    • あるテーマに沿って記事を書く日
    • 人数分それぞれの意見がでる
      • 特徴・志向を把握することができる
    • テーマは社長が出題
    • 公式ブログでテーマ出題のエントリを書き、それにトラックバックしてもいいかも
    • 月1回、期限は1週間程度で
  • ニュース配信(番外)
    • 某ウィジェットへの配信
    • 一人じゃきついので手伝ってください><
      • まぁ、いろんなニュースがあったほうがいいと思うんです

上2つはブログの更新頻度維持(向上)にも有用かと思うのですが、どうでしょうか。

2008-08-19

面白い社則づくりの参考

先週読み終えたばかりの本ですが、たまたま会議で話題に上がったので。

この「社則」、効果あり。 (祥伝社新書 117)

『この「社則」、効果あり。 (祥伝社新書 117)』


元となったWebサイト(の1コンテンツ)が以下。ちなみにページ下部に記事一覧があります。

はっけん!面白制度 - 総務の森
http://www.soumunomori.com/discovery/

自分は本を読んでからWebサイトを知ったのですが、感じたのは、本よりもWebで読んだほうがいいかもしれない、ということ。なぜなら、人の写真が多く載っているから。ルールそのものだけではなく、作られた経緯やその効果、そして実際に使う会社や人、これらを総合的に捉えることが必要だと思うのです。

で、Webのほうを読んでいて、あらためて印象に残った一部分を紹介。

「物事を長く続けるコツは「とにかくやってみること」

最初からダメだろうなと思わずに、つらくてもいいからやってみる。やってみて疲れることだったら辞めようと思ってはじめてみてください。続けられる自分に合うものというのは人それぞれですが、自分をよくしようと思ってひとつのことを続けることは重要ですね。

総務の森 - 総務 労務 経理 法務 今すぐ解決!

本のあとがきでも述べられていた、「変わることをおそれない」。大事なことだと思います。

2008-08-18

処分品セールで散財した

f:id:deeeki:20080818080433j:image:w320

Webカメラ。980円。以前から欲しいと思ってたのでちょうど良かった。3つもあるのは購入を頼まれたから。

f:id:deeeki:20080818080434j:image:w320

マウス600円。イヤホン200〜600円。予備として何個か購入。DVD-Rは30枚で1250円。

f:id:deeeki:20080818080435j:image:w320

ケースファン。100円だったのでつい。ドライバーも100円。

f:id:deeeki:20080818080436j:image:w320

PEARの本。なにやら倒産で返品ができないとかで、半額の1500円。


安く買えたというだけで満足してしまっていたりしますが、使えるものはなるべく使っていこうと思います。

2008-08-17

OSC2008 Nagoyaで撮った写真

osc08nagoya01

地下鉄桜山駅から西へ徒歩10分。会場の大学です。


osc08nagoya03

新緑モードで撮ってみました。天気は良好でした。


osc08nagoya04

準備中に教室の壇上から。右側にスクリーンがあります。


osc08nagoya07

大きいほうの教室で行われたCMS大決戦。沢山の来場者でにぎわっていました。


osc08nagoya09

いろいろもらいました。Firefoxの袋がなかなか気に入りました。


他の写真何枚かはflickrにて。

2008-08-16

OSC2008 Nagoya 聞いたセミナーのメモ その3

その1その2に続き、ラスト。プレゼン形式のセミナーについて。

名古屋勉強会大集合!

参考リンク
名古屋地区の技術系コミュニティ勉強会 - DenkiYagi
http://d.hatena.ne.jp/terurou/20070916/1189879592
感想

参加団体が予想以上に多く、後半になるほどメモが雑になってしまいました。ので、なんとなくピンときたところだけ。スライドの中に実際の勉強会の写真が載せられていると、雰囲気が掴みやすくて良いと感じました。また、独自のユーモアプレゼン中に笑いが取れる人はすごいと思いました。上記メモ以外の勉強会については、参考リンクの記事*1に詳しくまとめられています。


CMS大決戦

下記参考リンクの記事が詳しいので、メモは省略。

参考リンク
OSC2008 Nagoyaの「CMS大決戦」で島根県CMSが1位に:ITpro
http://itpro.nikkeibp.co.jp/article/NEWS/20080811/312625/

東海の大決闘を島根が制す! OSC20008 Nagoyaで「CMS大決戦」:CodeZine
http://codezine.jp/a/article/aid/2918.aspx
感想

片づけなどしてたので、聞けたのは半分くらいです。プレゼンだけで見ると、1位の島根県CMSが抜きんでていたように思います。CMSを普段使っていない人でも、興味が沸いてきて聞き入ってしまう、そんなプレゼンでした。次回OSCの開催が島根なので、良い流れを作ることができたといえるのではないでしょうか。

*1:JavaEdgeでプレゼンしていたid:terurou氏によるもの

2008-08-12

OSC2008 Nagoya 聞いたセミナーのメモ その2

前回の記事に引き続き。ついでに、本家サイトでセミナーの資料がぼちぼちと公開されはじめているようです。

オープンソースカンファレンス2008 Nagoya - ハックの日(8/9)は、名古屋へ 行こみゃぁ!
http://www.ospn.jp/osc2008-nagoya/

Webを変えるFirefoxMozillaテクノロジー

参考リンク
Mozilla Japan - 次世代ブラウザ Firefox とメールソフト Thunderbird の公式サイト
http://mozilla.jp/
感想

昼食の直後で眠気が襲ってきたためにまともにメモがとれませんでした。画像描画のところではCoolで面白いサイトを紹介されていたのですが、思い出せず残念。

Linux技術者認定試験(LPIC) レベル1スタートアップセミナー

参考リンク
Linux技術者認定機関 LPI-Japan - エルピーアイジャパン
http://lpi.or.jp/

びぎねっと - はじめる人のびぎねっと。
http://begi.net/
感想

「試験」という文字に尻込みしていたのですが、いざ受けてみたら、まさに今現在の自分にとって最適なセミナーでした。仕事でLinuxを触るようになり、早めの習得の必要性を感じていたところだったので。配付資料は非常に中身が濃く、今後も何度かお世話になりそうな気がします。ありがとうございます。

*1Windowsのメモリ管理システムは解放がしにくい仕組みらしい

*2:usr/local/binとかもある

2008-08-10

OSC2008 Nagoya 聞いたセミナーのメモ その1

オープンソースカンファレンス2008 Nagoyaに行ってきました。いろいろなセミナーを聞き、多くの刺激や学びを得ることができました。スライドをそのまま写しただけだったりしますが…いちおうそのメモを記事にしてみます(間違っている箇所があったらすいません)。

OCamlでらくらく関数型プログラミング

参考リンク
ocaml-nagoya
http://www.itpl.co.jp/ocaml-nagoya/

OSC2008Nagoya - ocaml-nagoya
(スライド資料アップ予定、とのことです)
感想

弊社プロジェクトと教室が同じだった縁があって聴講。関数型言語には全く馴染みがなかったのですが、その概要だけでも知ることができたのは良かったです。ocaml-nagoyaの人たちは皆さんさわやかでした。


CodeIgniter 〜2008年大躍進のPHPフレームワーク

参考リンク
日本CodeIgniterユーザ会 - オープンソースPHPフレームワーク
http://codeigniter.jp/

PHPカンファレンス2008  日本CodeIgniterユーザ会
(PHPカンファレンス用のスライド資料あり)
感想

ロゴの炎がなかなかかっこいいです。フレームワーク的にはCakePHPに似ていると感じました。異なる点は、モデルが必須でないところでしょうか。その辺りの使い勝手を知るためにも、ぜひ一度さわってみたいと思います。

*1:「オーキャムル」かも?

2008-08-08

OSC2008 Nagoyaの景品が気になる

オープンソースカンファレンス2008 Nagoya - ハックの日(8/9)は、名古屋へ 行こみゃぁ!
http://www.ospn.jp/osc2008-nagoya/

くじ引きで景品*1が用意されているようです。とある情報によると、空くじは無い(見込み)らしいです。中部地区にお住まいの方はぜひ行ってみてはいかがでしょうか。

個人的にはTシャツほしいなぁと思います。

ついでに宣伝しておきますと、弊社のEOS Projectは10:15開始の最初のセッション(204教室)で講演させていただきます。とある情報によると、まだ原稿はできていないらしいです。なんとなく興味持たれた方は一度のぞいてみてはいかがでしょうか。

クリアファイルがもらえる、かも?


OSC2008-Nagoyaタイムテーブル

*1:上記ページ下部参照

2008-08-07

メールフォームを利用したページの構成を考える

メールの文字化けは一段落したので、引き続きお問い合わせページを作っていました。

簡易バージョン

  1. contact.html
  2. contact.php
    • 入力内容取得
    • メール本文作成とメール送信
    • 送信後、header関数で完了画面へリダイレクト
  3. contact_complete.html
    • 送信完了のおしらせ表示

このような構成だったのですが、やはり確認画面はあったほうがいいだろうということで、以下の構成に。ちなみにお問い合わせ以外は静的なページです。

確認ありバージョン

  1. contact.php
    • 特定のページより遷移した場合はお問い合わせ区分の初期値をセット
    • 確認画面より戻った場合は入力内容取得
    • 以前の入力値を各valueに入れつつ入力画面表示
    • 確認の際はcontact_confirm.phpにsubmit
    • JavaScriptで入力エラーチェック→エラー時はsubmitせずエラーメッセージ表示
  2. contact_confirm.php
    • 入力内容取得
    • すこし加工して確認画面表示*1
    • 入力内容はhiddenで保持
    • 送信の際はcontact_sendmail.phpにsubmit
    • 再編集の際はJavaScriptでactionをcontact.phpに変えてsubmit
  3. contact_sendmail.php
    • 入力内容取得
    • メール本文作成とメール送信
    • 送信後、header関数で完了画面へリダイレクト
  4. contact_complete.html
    • 送信完了のおしらせ表示

雑感

確認画面があると、やることが大きく増えるんですよねぇ。ロジックは理解しているつもりなのですが、コードを書くのにけっこうな時間が取られてしまいます。

さて、今現在の自分の趣向では上記構成になったわけなのですが、他にもいろいろなやり方が存在するかと思います。

  • エラーチェックはJavaScriptPHPどちらでやったほうがいいのか*2
  • 編集状態はパラメータのmodeなどを使って場合分けしたほうがいいのか*3

といったところが個人的に気になっている点です。

*1:電話番号にハイフン入れたりとか

*2JS無効にしてる場合がありそうだからPHPがいいのかも

*3:入力内容取得はまとめられるけど、その後の分岐がめんどくさい

2008-08-06

Thunderbirdで件名の一部が文字化け

メールフォームからのメール送信で苦戦しました。本文は問題なく表示されるのに、件名だけなぜか途中から文字化けしてしまうのです。php.iniの文字コードとファイルの文字コードを同一(SJIS)にして、送信内容をISO-2022-JPに変換しているのにも関わらず、です。

どうにもならないので先輩に見てもらったのですが、それでもなかなか解決には至らず。でもって、Thunderbirdが悪いのでは?という結論に*1。実際にOutlook Express秀丸メールで確認したとろ、文字化けはしていませんでした。メーラーによって結果が異なるというのは、全くの盲点でした。

いちおうの解決方法は、ないこともないです。件名だけ変換せずにそのままmb_send_mailを使って送信、という方法で文字化けは直りました。メールヘッダのSubjectを見てみると「ISO-2022-JP」の文字があったので、どうやらmb_send_mailのなかでエンコードしてくれているようです。しかし、今回はWebサイト文字コードSJISだったので、たまたま上手くいっただけかもしれません。

日本語のメールには、主に ISO-2022-JP という文字コードが使われますが、件名・宛先等を含むヘッダ部分に Shift_JIS など別の文字コードが混ざりますと、文字化けする可能性が高くなります。この問題は Thunderbird に限らず、他のメールソフトでも見られます。ただし、Outlook および Outlook Express では、文字コードが強制的に変換され、文字化けしない場合があります。

Mozilla Japan - Thunderbird サポート - ナレッジベース - メッセージの件名が文字化けしたり「?」になってしまう

上記によると、むしろThunderbirdが厳密であるからこそ文字化けする、とも考えられそうです。ひとつ引っかかるのは、件名の"途中"から文字化けしているということ。RFCの仕様によれば76バイトごとに改行しなければいけないようなので、その辺が関連しているのではないかという気もします。時間に余裕があれば、もう少し調べてみたいと思います*2

以下、参考になりそうな記事。

mail()でメール送信で、特定のメーラーの受信のみ件名が文字化け -OKWave

Zend_Mailで日本語のFrom情報を扱う - LIFE

Zend_Mailで日本語メールヘッダを扱う - LIFE

*1:先輩曰く以前にも苦労したことがあるようです

*2:どうでもいいですが、こういうときの決まり文句となりつつあるような…

2008-08-05

新しい仕事をはじめて思ったこと

もしも自分が依頼する側なら、直接作り手と話してみたいと思う、と思うのだけど。

今のやりかたで本当にいいんだろうかと思う。仕事を依頼する側と、実際に作業する側の接点が存在していないから。ある程度のものはできたとしても、真の満足感はお互いに得られないのではないかという気がする。

もちろん、いろいろな事情があるというのはなんとなく感じる。そして、突き詰めれば、誰かの成長のためには誰かが犠牲にならなければいけなかったりして、つまりは原因は力の無い自分自身にある、ということもなんとなく感じる。

とりあえず、目の前の仕事をやるしかない。まずはそこから。

2008-08-04

Webサイトのレイアウトを視覚化 + 画像保存

Webサイトの開発で特にデザインを修正する際、レイアウトを正確に把握するのは、作業効率を高める上で重要なことかと思います。そこで、Firefoxのアドオン2つを利用したTipsを紹介してみます。

レイアウトの視覚化

Firefoxのアドオン「Web Developer」を使います。インストール後、目的のWebサイトへ行き、ツールバーもしくは右クリックメニューから表示させたい情報を選択します*1。すると以下のように視覚化されて表示されます。

【パターン1】「枠」+「要素名」+「id/class属性」

080804_01

手順はこちら

  1. 情報 → id属性とclass属性を表示する
  2. 枠表示 → ブロックレベル要素を枠で囲う
  3. 枠表示 → 枠表示には要素名も表示する

080804_02

080804_03


【パターン2】「枠」+「要素のサイズ」+「入れ子構造」

080804_04

手順はこちら

  1. 情報 → ブロック要素のサイズを表示する
  2. 情報 → 入れ子構造を視覚的に表示する
  3. 枠表示 → ブロックレベル要素を枠で囲う

080804_05

080804_06


画像の保存

キャプチャ機能を持つアドオン「Fireshot」を使うと良いです。Web Developerにより出力された情報も一緒に保存されます。上記2つのレイアウト画像は、「Capture visible area and ...」「Save...」によって表示部分を保存したものです。Fireshotには他にも、クリップボードへのコピーや、スクロールバーを気にせずページ全体を保存する機能も備わっています。レイアウトに関するドキュメントの作成にも有用といえるでしょう。

最後に

注意点っぽいことがひとつあります。自分の環境では、Firefox3だと「ブロックレベル要素を枠で囲う」の表示がうまくいきませんでした*2。Firefox3でうまくいかなかった場合は、Firefox2で試してみるといいかもしれません。

Web Developer :: Firefox Add-ons
https://addons.mozilla.org/ja/firefox/addon/60

Webdeveloperのダウンロード:ミナトラボ (日本語版)
http://lab.tubonotubo.jp/tools/webdeveloper/

FireShot :: Firefox Add-ons
https://addons.mozilla.org/ja/firefox/addon/5648

Mozilla Firefox 2
http://mozilla.jp/firefox/all-older

*1:組合せも可能

*2:「任意の要素を色で囲う」はOK

2008-08-03

Yahoo!ウィジェットと格闘

ここ2週間ほど、空いた時間にYahoo!ウィジェットの機能拡張をしていました。

その中で相当苦しんだのが、ある情報のカテゴリ選択機能の実装。「Webサービスによるカテゴリの動的取得」をし、さらに「複数カテゴリの選択を可能」にしないといけませんでした。で、これを慣れないJavascriptで作らないといけないというのが自分にとっては大きな試練でした。

まず、動的に取得するので、カテゴリの数が不定だということ。つまり、カテゴリ数によってカテゴリ設定ウインドウのサイズも可変にしないといけないわけです。

また、ウィジェットエンジン自体にチェックボックスの機能がないこと。これが非常に大変でした。ウィジェットクラスライブラリーなんていうものも見つけたのですが、4日ほど試行錯誤したものの、どうもうまく使えずに断念。結局1からチェックボックス用のクラスを作ることにしたのでした。

で、いちおう動くかたちにはできたのですが、クラス設計にかなりの難があると感じています。時間があれば再設計をしたいところです。

2008-08-02

SQL 期間の重複をチェック 補足

SQL 期間の重複をチェック

上記記事では、無駄の多いSQLを晒しつつ、試行錯誤の末なんとかスマートなものを導き出したというところで終わっています。その納得のいくSQLにたどり着いた手順を振り返ってみようというのがこの記事。やりたいのは、「期間の重複する登録を防ぐ」ということです。

考え直す際に改めて注目したのが、登録可能を表す以下の条件。

  • 既に登録済みの開始日時以前に期間が終了する
  • または、既に登録済みの終了日時以降に期間が開始される

で、言葉を少し変えると以下のようになります。

  • 既に登録済みの開始日時以前に、新規登録する終了日時がある
  • または、既に登録済みの終了日時以降に、新規登録する開始日時がある

これをSQLで表すと以下のようになります。

-- 結果が1以上のとき、登録OK
SELECT COUNT(campaign_id) FROM dtb_campaign
WHERE (start_date > $end_date OR end_date < $start_date)
AND del_flg = 0

得られた結果が「1」以上のとき、登録OKということになります。

ただし個人的な感覚として、得られた結果が「1」以上のときに登録NG、という構造でプログラムをつくってました。そこで、期間の部分の条件を逆にします。ド・モルガンの法則ってやつです*1

-- 結果が0のとき、登録OK
SELECT COUNT(campaign_id) FROM dtb_campaign
WHERE (start_date <= $end_date AND end_date >= $start_date)
AND del_flg = 0

比較する日時の対象がそれぞれ逆になっているので一見分かりづらいですが、真偽表をつくったりしてみると、きちんと場合分けできているのが確認できるかと思います。

【追記】

間違ってたのでこっそり修正(08/09/17)。

*1:¬(P ∨ Q) = ¬P ∧ ¬Q