to be continued ~とあるプログラマーの実験的開発日誌~ -19ページ目
Amebaホームピグアメブロ
芸能人ブログ人気ブログ
新規登録
ログイン

to be continued ~とあるプログラマーの実験的開発日誌~

WEBデザイナー兼プログラマーである管理人が日々のトラブル解決に向けて奮闘する開発日誌。

<< 前ページ次ページ >>

おすすめフリーソフト紹介 その2「Fake UO Screenshot Utility」

ブログなどを書いていると、当然スクリーンショットを撮る機会が多々あると思う。そんな時、よく利用されるのはWindows標準のプリントスクリーン機能ではないだろうか。確かにプリントスクリーンキーひとつでキャプチャーできる点は評価できるが、bmp形式でしか保存できない(画像ソフトなどで変換すれば別)、クリップボードに保存されるのでペインターなどの画像ソフトを立ち上げていちいち貼り付けなればならないなど、お世辞にも使い勝手が良いとは言えない。


そこで紹介するのが、「Fake UO Screenshot Utility」というソフト。もともとはウルティマオンラインのスクリーンショット撮影用に開発されたUO Screenshot Utilityというのを開発及びサポートが終了したことから別の人が機能を真似て制作したものらしい。すでに10年近く前のソフトなので、このソフト自体も開発及びサポートは終了して「Multi Screenshot Utility」という後継ソフトに代わっているらしいが、個人的にはこれで充分満足している。


使い方はほとんどプリントスクリーン機能と同様で、プリントスクリーンキーでディスクトップ全体が、ALTキー+プリントスクリーンキーでアクティブウィンドウがキャプチャーできる点も同じだ。ただし、出力形式をBMP・JPEG・PNGから選べたり、保存先を指定できたりと使い勝手は格段に上がっている。これでサイズを自由に指定できれば言うことはないのだが。なお、このブログで使用しているスクリーンショットは、当然ながらこのソフトで撮影したものだ。


to be continued ~とあるプログラマーの実験的開発日誌~


ダウンロード先:http://tiyuki.tank.jp/uotool/22fuosu/download.html


後継ソフトの公式サイト:ちゆきのアプリ開発室（仮）






CGI-Perl開発におけるデバッグのTips

今回は私が実際に行っているPerl開発におけるデバッグのテクニックについて紹介したい。といっても難しいことは何もしていないし、わかる人には当然の知識なので、Perlのデバッグ作業にお困りの方だけ読んでいただければ良いと思う。


もともとPerl5からは標準でデバッガがついているが、コマンドラインでのデバッグはほとんど利用したことがない。私はローカルのテスト環境にAN HTTPD + ActivePerlを利用しているので、そのままブラウザに出力できるのが一番手っ取り早く、実際の運用に近い形でチェックできる。そこで行っているのが以下の方法だ。


まず、cgiスクリプトの最後にでも以下のサブルーチンを記述しておく。


sub debug
{
my $testlog = $_[0];
print "Content-type: text/html\n";
print "\n";
print $testlog;
exit;
}


要するに受け取った値をブラウザに出力するだけのコードだ。


あとはスクリプトの任意の場所に


$temp = "確認したい変数や文字";
&debug("$temp");


と書くだけである。


$tempに適当な文字などを入れて正常にブラウザで表示されればブレイクポイントとして機能するし、変数を当て嵌めれば格納されている値をチェックすることも可能だ。一時的に解除するなら"#"を先頭につけてコメント行にするだけで良い。非常に簡単だが、実に便利なテクニックでデバッグ後もサブルーチンを残しておけばいつでも利用することができる。


jQueryでアコーディオンメニューを作る

jQueryを使ったアコーディオンメニューには様々なアイデアがあるが、どれも一長一短な感じがしていたので、ネット上で公開されているスクリプトを参考にしてカスタマイズしてみた。


まずはサンプルページを見てもらおう。なお、コードをできるだけわかりやすくするため、スタイルシートの記述は必要最低限に留めた。実際に使用する際は各自で装飾して欲しい。


アコーディオンメニューのサンプルページ


navigation menuと書かれた部分が親カテゴリーとなっているので、クリックすると以下のサブカテゴリーが表示させるようになっている。



サンプル1の記述


<<< JavaScript >>>


<script type="text/javascript">
$(function(){
$(".accordion1 span").click(function(){
$(".accordion1 ul").slideToggle("slow");
});
});
</script>


<<< HTML >>>


<div class="accordion1">
<span>navigation menu | ▼</span>
<ul>
<li><a href="#">menu #1</a></li>
<li><a href="#">menu #2</a></li>
<li><a href="#">menu #3</a></li>
<li><a href="#">menu #4</a></li>
<li><a href="#">menu #5</a></li>
<li><a href="#">menu #6</a></li>
<li><a href="#">menu #7</a></li>
</ul>
</div>


<<< CSS >>>


.accordion1 {
width:160px;
border:1px solid #000;
}
.accordion1 span {
display:block; /*ブロック要素として表示*/
margin:0;
padding:0;
width:160px;
height:30px;
text-align: center;
}
.accordion1 ul {
margin:5px 0 0 0;
margin:0;
padding:0;
display:none; /*閉じた状態で読み込む*/
height: 210px; /*開いたときの全体の高さ*/
}
.accordion1 li {
list-style:none;
margin:0;
padding:0;
height: 20px; /*項目の高さ*/
display:block;
}
.accordion1 li a {
margin:0;
padding:5px 10px;
display:block;
height: 20px; /*項目の高さ*/
}


ポイントは<span>をdisplay:blockでブロック要素としている点と、CSSの.accordion1 ulに記述したdisplay:noneでページ読み込み時にサブカテゴリーを隠していることだ。


シンプルで使いやすいが、ひとつ欠点があって複数の項目を使うためにはIDを変えたJSが親カテゴリー分だけ必要となる。カテゴリーが多いページには向かないだろう。



サンプル2はひとつのJSで複数の親カテゴリーを表示させるタイプで、上記のサンプル1の欠点をカバーしている。ただし、こちらにも使い勝手の悪い部分があって、クリックしてもらえばわかるが一旦開くと別の親カテゴリーを開かない限り、閉じることができないのだ。つまり、初期のすべて閉じた状態に戻すにはページを再読み込みするしかない。


サンプル2の記述


<<< JavaScript >>>


<script type="text/javascript">
$(function() {
$('.accordion2 dd').hide();
$('.accordion2 dt a').click(function(){
$('.accordion2 dd').slideUp();
$(this).parent().next().slideDown();
return false;
});
});
</script>


<<< HTML >>>


<dl class="accordion2">
<dt><a href="#">navigation menu1 | ▼</a></dt>
<dd>
<a href="#">menu #1</a><br>
<a href="#">menu #2</a><br>
<a href="#">menu #3</a><br>
<a href="#">menu #4</a><br>
<a href="#">menu #5</a><br>
<a href="#">menu #6</a><br>
<a href="#">menu #7</a><br>
</dd>
<dt><a href="#">navigation menu2 | ▼</a></dt>
<dd>
<a href="#">menu #1</a><br>
<a href="#">menu #2</a><br>
<a href="#">menu #3</a><br>
<a href="#">menu #4</a><br>
<a href="#">menu #5</a><br>
<a href="#">menu #6</a><br>
<a href="#">menu #7</a><br>
</dd>
<dt><a href="#">navigation menu3 | ▼</a></dt>
<dd>
<a href="#">menu #1</a><br>
<a href="#">menu #2</a><br>
<a href="#">menu #3</a><br>
<a href="#">menu #4</a><br>
<a href="#">menu #5</a><br>
<a href="#">menu #6</a><br>
<a href="#">menu #7</a><br>
</dd>
</dl>


<<< CSS >>>


.accordion2 {
width:160px;
}
.accordion2 dt {
background: #ddd;
padding: 10px;
border-top: 1px #ccc solid;
}
.accordion2 dt a {
color: #000;
text-decoration:none;
display:block;
}
.accordion2 dd {
padding: 10px;
}



これらの欠点を補うために作ったのがサンプル3のスクリプト。ひとつのJSで複数の親カテゴリーを個別に操作でき、クリックするたびにそれぞれ開閉が可能となっている。


サンプル3の記述


<<< JavaScript >>>


<script type="text/javascript">
$(function(){
$(".accordion3 ul").hide();
$(".accordion3 span").click(function(){
$(this).next("ul").slideToggle()
.siblings("ul:visible").slideUp();
$(this).toggleClass("active");
$(this).siblings("span").removeClass("active");
});
});
</script>


<<< HTML >>>


<div class="accordion3">
<span class="accordion3_title">navigation menu1 | ▼</span>
<ul class="accordion3_ul">
<li><a href="#">menu #1</a></li>
<li><a href="#">menu #2</a></li>
<li><a href="#">menu #3</a></li>
<li><a href="#">menu #4</a></li>
<li><a href="#">menu #5</a></li>
<li><a href="#">menu #6</a></li>
<li><a href="#">menu #7</a></li>
</ul>
</div>
<div class="accordion3">
<span class="accordion3_title">navigation menu2 | ▼</span>
<ul class="accordion3_ul">
<li><a href="#">menu #1</a></li>
<li><a href="#">menu #2</a></li>
<li><a href="#">menu #3</a></li>
<li><a href="#">menu #4</a></li>
<li><a href="#">menu #5</a></li>
<li><a href="#">menu #6</a></li>
<li><a href="#">menu #7</a></li>
</ul>
</div>
<div class="accordion3">
<span class="accordion3_title">navigation menu2 | ▼</span>
<ul class="accordion3_ul">
<li><a href="#">menu #1</a></li>
<li><a href="#">menu #2</a></li>
<li><a href="#">menu #3</a></li>
<li><a href="#">menu #4</a></li>
<li><a href="#">menu #5</a></li>
<li><a href="#">menu #6</a></li>
<li><a href="#">menu #7</a></li>
</ul>
</div>


なお、スタイルシートの適用はしていない。つまり、JSですべてを制御しているのでサンプル1のようにCSS側にdisplay:noneなどの記述をする必要はない。ようやく納得できるアコーディオンメニューとなった。




おすすめフリーソフト紹介 その1「フォントマスター2」

WEB開発やプログラミングに役立つソフトウェアは、何も高価なものばかりとは限らない。フリーウェアでも市販ソフトに引けを取らないどころか、それ以上に優れたものは数多く存在する。ここではそんなクリエイター必須と思えるフリーソフトを紹介していこう。


to be continued ~とあるプログラマーの実験的開発日誌~


最初に紹介するのは、フォントマスター2。このソフトは、フォントのインストール・アンインストール・フォントビュアーなどフォント管理に関する様々な機能を合わせ持つ総合アプリケーションだ。なかでも便利なのが、インストール不要で様々なフォントが利用できてしまうこと。私の場合、サイトロゴなどを作成するベースとして色々なフォントを利用するのだが、大量にフォントをインストールすると、ある種のアプリーケーションなどではひどくコンピューターが重くなったりする。特定の目的にしか使わないのに、これでは不便なことこの上ない。


その点、フォントマスター2を利用すれば未インストールの状態でも例えばPhotoshop上でインストール済フォントと同様に利用できてしまう。Zipなどの圧縮ファイルでもそのまま利用できるので、わざわざ解凍する手間も必要ない。作業終了後はフォントマスター2を閉じれば元通りだ。


当然、ビュアーとしても非常に重宝するし、PhotoshopやIllustratorを使用する際にはほとんどセットのような扱いになっている。


残念ながら現在、公式サイトは閉鎖されているようだが、ミラーサイト等で簡単に手に入る。リンクを貼るのは微妙なので避けたが、検索すればすぐに見つかると思うのでフォントを多用する人はぜひ利用してみて欲しい。


XML::FeedPPでcontent:encoded等を取得するTips

これまで幾つかの自前のホームページではRSSを利用した更新情報を表示するのに外部のサイトを利用してきた。しかし、それでは急に閉鎖になったり自由なカスタマイズができないなど何かと不都合である。


そこで、PurePerl実装モジュールであるXML::FeedPPを利用してWEB型のRSSリーダーを自作することにした。


XML::FeedPPはRSS・RDF・Atomの各フォーマットの処理に対応しているため、非常に手軽に扱える。


例えばrss内のdateやtitle、descriptionといったメソッドを取得するには、


$date = $item->pubDate;
$title = $item->title;
$description = $item->description;


といった具合に記述すれば良い。


だが、RSS内のdc:dateやdc:subject、content:encodedといったメソッドは、
$content = $item->content:encoded;
としても取得できない。


content:encodedなどを取得するには、
$content = $item->get("content:encoded");
と記述する必要があるので注意が必要だ。



<< 前ページ次ページ >>