142 posts categorized "開発"

CSSだけで見出しを水平線で挟む方法

水平線のサンプル

 CSS だけで見出しを水平線で囲む方法が、かちびと.netさんで紹介されていたので、メモメモφ(..)。

CSS サンプルソース
h1 {
  border-top: 1px solid black;
  margin:23px 0 0;
  text-align:center;
  padding:0;
  height:20px;
}
 
h1 span {
  position: relative;
  top: -20px;
  padding: 0 20px;
  background-color:white;
}
 
HTML サンプルソース
 
<h1><span>Horizontal Line</span></h1>
 

これは使える!

参照リンク
 ・画像を使わずに見出しを水平線で挟むCSS小技 - かちびと. net
 ・Centered Heading Overlaying a Horizontal Line with CSS | Impressive Webs

追記:2011/11/07
 応用編のエントリーも上がっていました。
  ・昨日書いた「画像を使わずに見出しを水平線で挟むCSS」をもうちょい工夫してみる - かちびと. net

OracleでLimit句を使ったかのようなSQLを実行しよう

 Oracle でも MySQL や PostgreSQL みたく、SQL で LIMIT句が使えないかな? とちょっと調べてみました。

 結論としては、Oracle では LIMIT句そのものは使えないのですが、ちょいとSQL文を工夫することで、同様の結果が得る事ができました。

というわけで、メモメモφ(..)。

EMPNOENAME
7369SMITH
7499ALLEN
7521WARD
7566JONES
7654MARTIN
7698BLAKE
7782CLARK
7788SCOTT
7839KING
7844TURNER
7876ADAMS
7900JAMES
7902FORD
7934MILLER

 例えば、左のような EMP テーブルがあったとします。このデータから、EMPNO の大きい方から2行を取得したいわけですよ。

これが MySQL や PostgreSQL なら、

  select * from EMP order by EMPNO desc limit 2

で一発というシュチュエーションです。

 さて、じゃぁ Oracle ではどうやるんだ? て話しなんですが、ROWNUM というカラム(?)を使います。上記の SQL を Oracle 用に書き直すと、

select ROWNUM, EMPNO, ENAME 
from (
      select EMPNO, ENAME 
      from EMP 
      order by EMPNO desc
     ) 
where ROWNUM<=2 
 

となり、帰ってくる結果は

ROWNUMEMPNOENAME
17934MILLER
27902FORD

のようになります。

 ここで、元のテーブルに無い ROWNUM ってカラムは何なんだ? どこから出てきた? という疑問が湧きますが、「Oracle がクエリーの結果に自動で追加してくれる行番号」 みたいな理解でいいと思います。

 お次はもうちょっと難しく、EMPNO の大きい方から3行目と4行目を取得しましょう。SQL は以下のように変わります。

select ROWNUM, RN, EMPNO, ENAME 
from (
      select ROWNUM as RN, EMPNO, ENAME 
      from EMP order by EMPNO desc
     ) 
where RN>2 and  RN<5
 

そして結果の方は、

ROWNUMRNEMPNOENAME
137900JAMES
247876ADAMS

となります。内側の select文で帰ってくる結果セットの ROWNUM に、別名を付けて情報を保持させているのがミソですね。

ちなみに、 MySQL や PostgreSQL だと、

  select * from EMP order by EMPNO desc limit 3,2

という SQL文になります。

 ただ Oracle はその仕様において、order by を使用していないクエリーの結果の行の並び順は保証していないので、厳密に並び順が重要となる場合は、

select ROWNUM, RN, EMPNO, ENAME 
from (
      select ROWNUM as RN, EMPNO, ENAME 
      from EMP order by EMPNO desc
     ) 
where RN>2 and  RN<5
order by RN
 

のようにしておいた方がいいのかも。

なお動作確認は、Wondows Server 2008 上の Oracle 10g(10.2.0.1)にて行いました。

参照リンク
 ・OracleではLimit句が使えない | yukotan hour
 ・Oracleでlimit offsetもどき - よねのはてな

Amazon Product Advertising API の仕様変更(2011/10/26適用分)に対応しました

 本日(2011/10/26)から Amazon Product Advertising API の仕様が変更されるという事で、M.B.I. -Mukai Book Information- で使用しているプログラムの変更を行いました。

 ちなみに今回の仕様変更は以下の通りでした。

  • 全てのAPIへのリクエストにおいて、AssociateTagが必須パラメータとなり、リクエスト処理時の確認対象となります。
  • SellerLookup, SellerListingLookup および SellerListingSearch オペレーションはAPIでのサポートを終了いたします。
  • ItemSearch リクエストの結果として返されるItemPage パラメータは、最大10ページまでに制限されます。
  • MerchantId パラメータは、オファー、バリエーションおよび検索結果の絞り込み要素としてのサポートを終了いたします。
  • Offers および ItemAttributes レスポンスグループにおいて返されるデータは、最も頻繁に使用される属性に制限されます。
Amazon アソシエイト・プログラム(アフィリエイト) 公式ブログ: [重要]Amazon Product Advertising APIの仕様変更について より引用

 個人的に今回の1番の目玉(?)は、3つめの 「ItemSearch リクエストの結果として返されるItemPage パラメータは、最大10ページまでに制限されます」 だったりします。

 記憶では、これまでは 400ページくらいまでは行けてたはずなので、1つの検索条件で取得できる情報量が 1/40 になってしまいます。

 そんなわけで、これまで月単位で取得していた新刊情報の条件を日単位に変更し、あわせて取得期間の条件も表示に影響の無い範囲で調整しました。

 何をどうすればいいのか? どのくらいの作業時間が必要なのか? の、おおよその見当はついていたとはいえ、アナウンスが1ヶ月以上前から出ていたのに対応がギリギリになってしまったのは、反省せんといかんなぁ

訂正とお詫び:
 発売日をキーにして書籍の商品情報の取得はできていませんでした。
 て言うか、できませんでした・・・orz

JavaScriptからCSSのプロパティ値を読み出そう

 JavaScript から HTMLエレメントに指定されている CSSプロパティの値(属性値)を取得する場合、

とするのが一般的みたいなんですが、このやり方ではインラインで設定された属性の値しか読み込めないんですよね。

 ところが、getComputedStyle という関数(?)を使うと、インラインで設定した以外の属性の値も引っ張って来れると知りまして、ついでなので使いやすいように関数にしてみました。

使い方のサンプルは以下の通りです。

 動作確認は、Windows XP SP3 上の IE8、Firefox 7.0.1、Opera 11.51、safari 5.0.5、Chrome 14.0.835 で行いました。

Enjoy!

参照リンク
 ・JavascriptでCSSのプロパティ値を取得する方法 ≪ 来栖川電算
 ・getComputedStyle について調べてたら深みにハマったのでメモ - IT戦記

CSSで行間を指定しよう

 正しくは “行間” ではなく “行の高さ” を指定するわけなんですが、見た目としては行間が変わってくるので、これでOK。

 指定は line-height という属性(プロパティ)で行います。単位は px、pt、em、% が使用できるようです。

 ちなみに % で指定した場合は、フォントのサイズに対して何%であるかを計算した値が適用されます。て事は、1.5em と 150% は同じって事ですね。

サンプルのソースはこんな感じになります。

p {
  font-size: 14px;
  line-height:1.2em;
}

表示のサンプルは以下の通り。

font-size:14px; line-height:1.1em;
行間が詰まっていると読みにくくなってしまいますので、適切な行間を確保して、読みやすくレイアウトしたいものです。
font-size:14px; line-height:1.3em;
行間が詰まっていると読みにくくなってしまいますので、適切な行間を確保して、読みやすくレイアウトしたいものです。
font-size:14px; line-height:1.5em;
行間が詰まっていると読みにくくなってしまいますので、適切な行間を確保して、読みやすくレイアウトしたいものです。

レイアウト的には文字は行の上に合わせて表示されていて、余白(?)が文字の下に現れているみたいです。

なお、line-height にフォントのサイズより小さな値を指定した場合は、行が重なって表示されます。

font-size:14px; line-height:0.7em;
行間が詰まっていると読みにくくなってしまいますので、適切な行間を確保して、読みやすくレイアウトしたいものです。

追記:
 line-height には単位を指定しない方が良いらしい?
  ・行間(行の高さ)を調節するなら単位はナシで [ホームページ作成] All About

 

CSSのfloatを使った回り込みで下には回り込ませない方法

 ウェブル さんで 「CSS で画像の下に文字を回り込ませない方法」 が紹介されていたので、メモメモ φ(..)。

 例えば CSS の float を使って画像に文章を回り込ませるレイアウトをした場合、文章の量によっては下の例のように、画像の下にも文章が流れ込んでしまします。

回り込みのサンプル1

 しかしこれでは文章が読みにくいので、次の例のように画像の下には文章が流れ込まないようにしたいわけです。

回り込みのサンプル2

 そのためには、回り込む文章をブロック要素(DIVタグとか Pタグ)で囲んで、その要素のスタイルシートに “overflow: hidden;” を指定すればOKです。

ソースのサンプルは以下の通りです。

<html>
<head>
<style type="text/css">
.hoge IMG {
    float: left;
}

.hoge P {
    overflow: hidden;
}
</style>
</head>
<body>

<div class="hoge">
    <img src="sampleImg.jpg">
    <p>ここのテキストが長くても下まで回り込まない</p>
</div>

</body>
</html>

参照リンク
 ・CSS で画像の下に文字を回り込ませない方法 | ウェブル
 ・float の問題を overflow で解決 - lucky bag

ISBNコードを扱うためのPerlモジュール 「JIsbnUtil」

書籍に付いてるISBNコードについて、チェックデジットの再計算とか、10桁・13桁変換とか、ハイフンの挿入とかをするための Perl モジュールを書いたので公開します。

ダウンロードページ
 ・JIsbnUtil.pm

ただし処理できる ISBNコードは日本国内用のコードのみで、輸入書籍に付いている ISBNコードには対応しておりません。ご了承下さい。

Enjoy!

WEBブラウザがイベントを処理する順番について調べてみた

 ふと、HTMLのみで記述できるイベント(アンカータグがクリックされるとか、フォームが submit されるとか)と、いわゆるイベントハンドラによって起動される JavaScript の処理が重なっていると、どういう順番で処理されるんだろう? と思いまして、下記のソースで検証してみました。

<html>
<head></head>
<body>

<a href="page1.html" onClick="alert('Click!')">onClick</a><br>
<br>

<a href="page1.html" onMouseUp="alert('MouseUp!')">onMouseUp</a><br>
<br>

<a href="page1.html" onMouseDown="alert('MouseDown!')">onMouseDown</a><br>
<br>

</body>
</html>
 

 結論としては、JavaScript の方が先に処理されました。よく考えてみれば分かりそうなものでしたが、そうでないと色々と都合が悪かったりしますもんね。

 また、今回の検証中に onMouseUp と onMouseDown を使った場合において、ブラウザによってアンカータグをクリックした後の JavaScript の処理終了後の挙動に違いが見られました。

 もっとも、クリックするようなところに onMouseUp とか onMouseDown を使うなよ! って話ではあるんですけど(苦笑)。

 それから、JavaScript の処理終了後の処理(アンカータグによるページの移動とか、フォームの送信とか)をキャンセルしたい場合は、JavaScript の最後で false を返してやる(return false;)と、処理をキャンセルできます。

なお、テストは Windows XP SP3 上の、Firefox 6.0.2 及び IE 8 で行いました。

プロクシの向こう側のIPアドレスを取得したい

●注意
紹介しているコードをそのまま使用すると、偽装されたIPアドレスを掴まされる恐れがあります。

 phpspot開発日誌さんでプロキシの向こう側のIPを取得する方法が紹介されていました。

 今までそういう需要に出会ったことはないのですが、もしかして必要となる時が来るかも? というわけで、メモメモです。

 ちなみに紹介されていたサンプルソースは PHP だったので、Perl で書きなおしてみました。

#!/usr/bin/perl

use strict;
use warnings;

my $ip = "";
if(defined($ENV{"HTTP_CLIENT_IP"})){
  $ip = $ENV{"HTTP_CLIENT_IP"};
  
}elsif(defined($ENV{"HTTP_X_FORWARDED_FOR"})){
  $ip = $ENV{"HTTP_X_FORWARDED_FOR"};
  
}else{
  $ip = $ENV{"REMOTE_ADDR"};
}

print $ip;

 どうやらこの HTTP_CLIENT_IP とか HTTP_X_FORWARDED_FOR ってのがプロクシサーバーが出しているアクセス元の IPアドレス のようですが、そういうパラメーターがあったとは知りませんでした。

 ちなみに、杉浦ホームページ さんの「環境変数&プロキシ講座~プロキシの傾向と対策」 というページによると、どうやら判定の順番もこの順でないとマズイみたいです。

 ところで、複数のプロクシを通されちゃうと、やっぱりどうしようもないんでしょうかねぇ?

参照リンク
 ・プロキシ経由でもリアルIPを取得するPHPコードスニペット:phpspot開発日誌
 ・Get Real IP address of the Visitor using PHP | Expert PHP Developer
 ・環境変数&プロキシ講座~プロキシの傾向と対策

追記:
 と、ここまで記事を書いたところで、「そうやって判定してても、HTTP_CLIENT_IP や HTTP_X_FORWARDED_FOR は偽装できちゃうよん」 という記事がががが。

いろいろ難しいっすなぁ。

参照リンク
 ・IP アドレスが偽装可能か確認してみよう - A Day in Serenity @ Kenji
 ・PHP フレームワークでのクライアント IP アドレス取得メソッドの実装について - A Day in Serenity @ Kenji

Perlで外部のソースを動的に読み込んで実行させよう

 プログラムのプラグイン機能ってどうやるんだろう? と言うことで、外部のソースを動的(ソースコードに明記せず)に読み込んで実行するプログラムにチャレンジしてみました。

 まず、読み込むモジュール名と実行する関数(サブルーチン)名を、テキストファイル(ModuleList.txt)にカンマ区切りで保存します。

MyModule,Run

次に読み込むべきモジュール(MyModule.pm)を準備します。

#!/usr/bin/perl

use strict;
use warnings;

package MyModule;

sub Run{
  print "In MyModule\n";
}

1;

最後に、MyModule.pm を読み込んで実行するソースはこんな感じで。

#!/usr/bin/perl

use strict;
use warnings;

open(FH, "<", "ModuleList.txt");
my @lines = <FH>;
close(FH);

for my $line (@lines){
  chomp($line);
  my ($module, $function) = split(',', $line);
  
  # モジュールの読み込み
  eval("require $module;");
  print $@,"\n" if ($@);
  
  # モジュール内の関数を実行
  my $callfnc = $module.'::'.$function.'();';
  eval($callfnc);
  print $@,"\n" if ($@);
}

 $callfnc の組み立て方次第で、関数に引数を渡したり、戻り値を取ったりといろいろできます。

Enjoy!

Perlの正規表現でメタキャラクタを普通の文字として扱おう

例えば、以下のソースを実行するとですねぇ・・・

#!/usr/bin/perl

use strict;
use warnings;

my $str1 = '(test)';
my $str2 = '(';

if($str1 =~ /$str2/){
  print "OK\n";
}else{
  print "NG\n";
}

次のようなエラーになってしまうんですよ。

Unmatched ( in regex; marked by <-- HERE in m/( <-- HERE / at C:\test\test.pl line 9.

これは '(' が正規表現におけるメタキャラクタであるために起こるエラーで、普通に

$str1 =~ /(/;

というコードを想像すれば、そりゃまぁ、エラーになるわなぁ、と。

 対策としては、予めメタキャラクタを除外したり、変換したり、\でエスケープしたりって手が考えられるわけですが、\Q と \E で該当部分を囲んでやれば、簡単に対応できます。例えば、上記ソースの該当部分(9行目)だと

$str1 =~ /\Q$str2\E/

としてやればOK。理屈としては、\Q から \E までに存在するメタキャラクタは Perl の方で普通の文字として扱ってくれます。

自分でもたま~に使うんですが、いつも忘れてしまっているので、次に忘れた時のためにメモメモです。

CGI/Perl から 404 HTTPステータスコードを出力しよう

404 Not Found

単純に上のようなメッセージを表示させたいだけなら、

#!/usr/bin/perl

print "Status: 404 Not Found\n";
 

だけでOK。ただし、print する文字列の最後の改行は1個です。2個にしちゃうと真っ白なページが表示されてしまうので、要注意です。

 個別のメッセージを表示したい場合は、

#!/usr/bin/perl

print "Status: 404 Not Found\n";
print "Content-type: text/html\n\n";

print <<EOT;
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>404 Not Found</title>
</head>

<body>
<h1>Not Found</h1>
<p>リクエストされたページが存在しません。</p>
</body>
</html>
EOT
 

みたいやれば出来ます。

Enjoy!

 ちなみに動作確認は、Windows XP SP3 上で Apache HTTP Server 2.2 と ActivePerl 5.8.8、Firefox 5.0 を使って行いました。

Perlで無名(変数|配列|ハッシュ|関数)を扱う際の覚え書き

 Perlで無名( 変数(スカラー) | 配列(リスト) | 連想配列(ハッシュ) | 関数(サブルーチン) )を扱う際の覚え書きです。無名○○とは、名前からではアクセスできない “何か” という理解でいいかと思います。

 とはいえ、何らかの手段でアクセスできないと使えないわけで、無名○○へのアクセスにはリファレンスを経由することになります。

 そんなわけで、正しくは 「名前ではアクセス出来ないけれど、リファレンス経由ではアクセスできる “何か”」 となります。

 例えば、変数(スカラー)のリファレンスを作る場合、

my $scalar = "A";
my $scalar_ref = \$scalar;

というように作るわけですが、中の値には $$scalar_ref というリファレンス経由でも、$scalar という名前経由でもアクセス出来るわけです。つまりこの場合の $scalar を失なれば “無名” というわけです。

●無名配列(リスト)へのリファレンス

# 作成方法
my $array_ref = [1, 2, 3, 4, 5];

# 参照方法
print $array_ref->[0], "\n";
print $$array_ref[0], "\n";

●無名連想配列(ハッシュ)へのリファレンス

# 作成方法
my $hash_ref = {"key1" => "A", "key2" => "B", };

# 参照方法
print $hash_ref->{'key1'}, "\n";
print $$hash_ref{'key1'}, "\n";

●無名関数(サブルーチン)へのリファレンス

# 作成方法
my $sub_ref = sub { my $str = shift;
                    return 'retuen '.$str; };

# 参照方法
my $ret_val = $sub_ref->('OK!');
print $ret_val, "\n";

無名関数を作る場合は、サブルーチンの閉じ } の後ろのセミコロン(;)をよく忘れるので、注意。

●無名変数(スカラー)へのリファレンス

# 作成方法
sub MakeScalarRef{
  my $tmp;
  return \$tmp;
}

my $scalar_ref = MakeScalarRef();

# 参照方法
print $$scalar_ref, "\n";

サブルーチンを使って、無理やり無名変数へのリファレンスを作るわけですね。

実は、単純に以下の要領でも作れるんじゃないかと思ったんですが・・・

my $ref1 = \2;
my $ref2 = \"A";

これだと定数へのリファレンスとなってしまい、参照は出来るんですが値の代入はできないんですよ。まぁ、スタティックなリファレンスという意味では使えるかも。

応用例

無名○○の最大のメリットは、簡単に複雑なデータ構造を作れる事じゃないかと思います。例えば

my $ref = [0, [1,2,3], {'key1' => 'A', 'key2' => 'B'}];

# 配列の最初の要素にアクセス
print  $ref->[0], "\n";

# 配列の2番目の要素の3番目の値にアクセス
print  $ref->[1]->[2], "\n";
print  $ref->[1][2], "\n";
print  $$ref[1][2], "\n";

# 配列の3番目の要素のキーが 'key2' の値にアクセス
print  $ref->[2]->{'key2'}, "\n";
print  $ref->[2]{'key2'}, "\n";
print  $$ref[2]{'key2'}, "\n";

みたいな感じです。参照方法もいろいろとありますので、お好みに合わせてどうぞ。

 無名関数はそんなに使うことは無いんですが、「ある機能を1つのサブルーチンに収めたいんだけど、複数回同じ処理が現れるのはエレガントじゃないよね」 というときに、関数の中だけで有効な関数を作る時に使ったかな。

JavaScriptで縦書きにレイアウトするライブラリ 「tategumi.js」

 MOONGIFT さんで紹介されていた、Webページを縦書きにしてくれるテキストレイアウトエンジン tategumi.js を使ってみました。

 1行の文字数と1ページの行数の指定が可能なので、実際の本にあるような読みやすいレイアウトが簡単に再現できるのはありがたいですね。もちろん文字サイズ、字間、行間も指定可能になっています。

 また、文章の種類(?)として、タイトル、本文、キャプションの指定が別々にできるので、タイトルだけ大きくしたい場合とかに便利そうです。

 ただし HTMLらしい装飾には対応していない(というか、装飾すると縦書きにならない)ようなので、ベタなテキストを縦書きするため。と割り切って使っうのが良さそうです。

 段落の先頭を一字下げにしたい場合も、段落の先頭に全角スペースを置く事でうまくいきましたし。

 マークアップについても非常にシンプルなので、HTMLに詳しくない人でもソースをコピーして、チョチョッといじれば何とかなるんじゃないかなぁ?

テストに使ったソースは、以下のとおり。

結果はこんな感じになりました。

 なお禁則処理もできるということなので、ライブラリのソースをざっくり読んでみたんですが、現時点では “追い出し” のみが可能なようでした。

参照リンク
 ・Kumihan Project - Alliance Port, LLC
 ・allianceport/tategumi.js - GitHub
 ・日本の文章はやはり縦書きが読みやすい「tategumi.js」 - MOONGIFT|オープンソース・ソフトウェア紹介を軸としたITエンジニア、Webデザイナー向けブログ

CSSの font-size に指定できる rem という単位

 CSS の font-size に指定できる rem という単位が、コリスさんで紹介されていましたので、ちょっと試してみました。

 font-size で指定する単位というと、僕は px と em しか知らなかったんですが、この rem というのは、なかなか面白そうです。ちなみにそれぞれの違いはというと、

  • px ・・・ ピクセル単位の絶対指定
  • em ・・・ 親要素のフォントサイズに対する割合(相対指定)
  • rem ・・・ ルート(またはhtml要素)のフォントサイズに対する割合(相対指定)

というところかな? 動作確認のために用意したソースはこちら

<html style="font-size:40px;">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>フォントサイズテスト</title>
</head>
<body style="font-size:20px;">
20px<br>
  <div style="font-size:30px;">
  30px<br>
  <div style="font-size:0.5em;">
  0.5em (15px)<br>
    <div style="font-size:0.5em;">
    0.5em (7 or 8px)<br>
    </div>
    <div style="font-size:0.5rem;">
    0.5rem (20px)<br>
    </div>
  </div>
</div>
</body>
</html>

 全体的なフォントのバランスを調整するには、px よりも em の方が使いやすいんですが、em の計算はネストしちゃうんですよね。でも、rem なら html要素のフォントサイズに対して一定の比率なので、更に便利そうです。

というわけで、上記のソースを各ブラウザで表示させた結果は以下の通りです。

Firefox 4
IE 8
Chrome 11
Safari 5
Opera 11

 あれ? IE と Opera は対応してないんですかねぇ? と思ったら、rem をサポートしているブラウザは、Firefox3.6+, Chrome, Safari5, IE9+ なんだそうです。残念。

 コリスさんの記事では、rem をサポートしていないブラウザへの対処法もちゃんと紹介してあったんですが、ちょっと冗長な気がするんですよね。

実際に公開するWebページで使うかどうかは・・・、微妙だなぁ。

参照リンク
 ・[CSS]フォントのサイズ指定はpx? em? 既存の再検討とこれからのテクニック | コリス

アクセスランキング


  • ブログパーツ

最近の記事

RSS FEED

  • RSS 1.0
    RSS 2.0
    Atom

Licenses

  • Creative Commons License

プロフィール

ブログ内検索

powered by TypePad

Sponsored Links



OTHER


  • フィードメーター - 知らないことがあってもへっちゃらさ
    このブログのはてなブックマーク数
    track feed

    あわせて


    ジオターゲティング