memo.xight.org

日々のメモ

ステータスバーの偽装

Reference

IE / Opera ステータスバー偽造ねた テストページ
http://www.st.ryukoku.ac.jp/~kjm/test/20051118.html

Firefox向でステータスバーのリンク先アドレス偽装しつつ、「I'm feeling lucky検索」を発動するサンプル
http://www.ne.jp/asahi/nut/security/

via

セキュリティホール memo - 2006-09-28
http://www.st.ryukoku.ac.jp/%7Ekjm/security/memo/2006/09.html#20060928_nutsec

虫眼鏡のアイコンは「検索」か「拡大」か

Summary

説明が必要なアイコンは用いない
処理を開始するスイッチをアイコンに頼らない
制限コントロールの選択肢に否定文を使わない
肯定ボタンのラベルにあいまいな文言を用いない
ナビゲーションをアクションのように見せない
紛らわしいアイコンやラベルは再考する

説明が必要なアイコンは用いない

ユーザによって違う意味に理解される可能性もある.
虫眼鏡のアイコンが「検索」を意味するか「拡大」を意味するか.

処理を開始するスイッチをアイコンに頼らない

Wordなどの「標準」ツールバー.
アイコンから処理の予測が必要.

プロパティを変更する場合の良い例は,Wordの「書式設定」ツールバー(太字,斜体,下線,囲み線など).
得られる結果をグラフィックで表現すればよいため,具体化しやすくアイコンの効果を得られやすい.

制限コントロールの選択肢に否定文を使わない

肯定文と否定文の混ざった選択肢を用いると理解が難しくなる.
否定文に二重否定を用いるとさらに理解が難しくなる.

悪い例はInternet Explorer のオプションダイアログ.
□ スクリプト エラーごとに通知を表示する
□ スクリプトのデバッグを使用しない
□ スケジュールに従ってオフライン項目の同期をとる
□ スムーズ スクロールを使用する

例外は,選択肢として「いずれも選択しない」行為を能動的に行なう場合.
○ 会社員
○ 自営業
○ 主婦
○ 学生
● 該当無し

肯定ボタンのラベルにあいまいな文言を用いない

悪い例は「OK」ボタン,「次へ」ボタン.
動作内容をユーザが推測する必要がある.

動作内容を記述することで回避可能.
「入力内容を送信する」,「配送先の入力へ進む」など.

ナビゲーションをアクションのように見せない

画面遷移のためのナビゲーションと,
動作確定のためのアクションのリンクを区別する.

ナビゲーションであれば「ダウンロード画面へ進む」.
アクションであれば「ダウンロードを開始する」.

紛らわしいアイコンやラベルは再考する

アイコンやラベルは限られた表示領域の中で視覚的に表現する.
制作者の意図が確実にユーザに伝わるかは確認が困難.
第三者による検証が必要となる.

Reference

@IT - 虫眼鏡のアイコンは『検索』か『拡大』か?
http://www.atmarkit.co.jp/fwcr/rensai/usabilitytips03/01.html

Stylish - userContent.css の編集が行なえる Firefox拡張

Summary

userContent.css の編集,管理が楽になる Firefox拡張.

userstyles.org に数多く登録されている,userContent.css を簡単にインストール可能.
Stylish をインストールすると,userstyles.org に Install ボタンが出現する.

Add Bookmark Dialog: Show Folder Tree

ブックマーク時のダイアログボックスを大きく,使いやすくしてくれる.

WellRounded

アドレスバーと検索バーの角を丸くする.

Icons identifiers of links

ハイパーリンクのテキストにアイコンを付加する.

Reference

Stylish :: Mozilla Add-ons :: Add Features to Mozilla Software
https://addons.mozilla.org/firefox/2108/

userstyles.org - Add Bookmark Dialog: Show Folder Tree
http://userstyles.org/style/show/995

userstyles.org - WellRounded
http://userstyles.org/style/show/665

userstyles.org - Link: Icons identifiers of links.
http://userstyles.org/style/show/504

via

hail2u.net - Weblog - FirefoxのuserContent.cssネタ #3
http://hail2u.net/blog/software/firefox-usercontent-css-tricks-3.html

MozRepl - Firefoxにtelnet接続が行なえるFirefox拡張

Reference

MozLab - Trac
http://dev.hyperstruct.net/trac/mozlab

最速インターフェース研究会 :: Firefoxの拡張MozLabの中に含まれるMozReplがヤバすぎる件について
http://la.ma.la/blog/diary_200609280045.htm

blog.nomadscafe.jp - Plagger::Plugin::Notify::Browser
http://blog.nomadscafe.jp/archives/000627.html

via

www.textfile.org - MozRepl: Firefoxにtelnet接続してブラウザを制御
http://d.hatena.ne.jp/textfile/20060928/mozrepl

サムネイルAPI - サムネイルを作成するWebサービス

Usage

http://thumbs.bookmacro.com/u/http://example.com/

オプション

u URI
f フィルタ
w 幅 (10 - 160)
h 高さ (10 - 120)

REST

http://thumbs.bookmacro.com/w/120/h/90/f/gray/u/http://www.amazon.co.jp/

GET

http://thumbs.bookmacro.com/?w=120&h=90&f=gray&u=http://www.amazon.co.jp/

Reference

bookmacro.com - サムネイルAPI
http://thumbs.bookmacro.com/sample/

bookmacro.com - サムネイル取得方法
http://help.bookmacro.com/2006/09/blog-post.html

VisualuRuby - RubyでGUIソフトウェア開発

Reference

VisualuRuby計画(仮称)
http://www.osk.3web.ne.jp/~nyasu/software/vrproject.html

SourceForge.jp - Project Info - FormDesigner for project VisualuRuby
http://sourceforge.jp/projects/fdvr/

FormDesigner for VisualuRuby
http://fdvr.sourceforge.jp/

via

MOONGIFT - FormDesigner for project VisualuRuby
http://oss.moongift.jp/intro/i-2410.html

MOONGIFT - FormDesigner for project VisualuRuby レビュー
http://oss.moongift.jp/review/i-2411.html

surblhost - 記述されているURIによってスパム判別

Summary

SURBL (Spam URI Realtime Blocklists) 方式のスパムフィルタ.
記述されているURIによってスパムかどうかを判別する.

Reference

surblhost - program to identify spam-related websites
http://surblhost.sourceforge.net/

via

MOONGIFT - Surblhost
http://oss.moongift.jp/intro/i-2414.html

MOONGIFT - Surblhost レビュー
http://oss.moongift.jp/review/i-2415.html

XHTML + CSSのテンプレート集

Summary

Jimmy Lin による XHTML + CSSのテンプレート集.
1段組, 2段組, 3段組の固定幅,流動幅(リキッドレイアウト)のテンプレート集.

対応ブラウザ

Internet Explorer 5.0+
Firefox 1.5
Opera 8.5
Safari 2

Reference

Jimmy Lin - Templates
http://www.jimmylin.info/templates.html

via

phpspot開発日誌 - 2006-09-19 - ValidなCSS/XHTMLテンプレート集
http://phpspot.org/blog/archives/2006/09/validcssxhtml.html

goodic pocket - goo辞書と連携したポケットサイズの辞書ソフト

Summary

goo辞書と連携したポケットサイズの辞書ソフト.
動作には Microsoft .Net Framework 2.0 が必要.
CSSでカスタマイズが可能.
Ver1.0.2ではプロキシ使用が不可能.

Reference

goodic pocket - goo辞書と連携したポケットサイズの辞書ソフト
http://cgi.cc3.org/goodic/

via

MOONGIFT - goodic pocket
http://fw.moongift.jp/intro/i-2412.html

MOONGIFT - goodic pocket レビュー
http://fw.moongift.jp/review/i-2413.html

eClip - クリップボード履歴 + migemo

Reference

B@r09u3 Style Op.2
http://hp.vector.co.jp/authors/VA026310/soft2.htm

via

MOONGIFT - eClip
http://fw.moongift.jp/intro/i-2398.html

MOONGIFT - eClip レビュー
http://fw.moongift.jp/review/i-2399.html

[2006-09-29] 追記

窓の杜 - 大量に保存したクリップボード履歴を絞り込み検索して素早く貼り付け「eClip」
http://www.forest.impress.co.jp/article/2006/09/29/eclip.html

maskat (マスカット) - AjaxアプリケーションのためのIDE

Summary

オープンソースのAjaxツールキットであるRialtoを利用.
業務ロジックはJ2EE,PHPなどに対応.
NTTデータによって開発.

Reference

SourceForge.jp - maskat
http://maskat.sourceforge.jp/

via

ITpro - 2006-09-15 - Ajaxアプリのビジュアル開発ツール,デファクトを狙いNTTデータがオープンソースとして公開へ
http://itpro.nikkeibp.co.jp/article/NEWS/20060915/248264/

NTTデータ - ニュースリリース - 2006年8月7日 - 統合コンタクトセンタソリューション「i-lligra(TM)(アイ-リグラ)」販売開始
http://www.nttdata.co.jp/release/2006/080700.html

LightBox風にスライドショーを行うブックマークレット

Sample

<script type="text/javascript" src="http://triptracker.net/jsmap/slide.js"></script>
<script type="text/javascript">
<!--
  var viewer = new PhotoViewer();
  viewer.add('/photos/my-photo-1.jpg');
  viewer.add('/photos/my-photo-2.jpg');
  viewer.add('/photos/my-photo-3.jpg');
//--></script>
<a href="javascript:void(viewer.show(0))">Slideshow</a>


Reference

TripTracker Blog - 2006-09-08 - Revamped Slideshow
http://blog.triptracker.net/2006/09/08/revamped-slideshow/

via

phpspot開発日誌 - 2006-09-15 - LightBox風にスライドショーを行うブックマークレット
http://phpspot.org/blog/archives/2006/09/lightbox_1.html

Term::TtyRec - Perlでttyrec

Summary

Perlからttyrecを扱うモジュール.

SYNOPSIS

use Term::TtyRec::Player;
use FileHandle;

# $handle is any IO::* object
my $handle = FileHandle->new('file.tty');
my $player = Term::TtyRec::Player->new($handle);

# options can be set as hashref
my $player = Term::TtyRec::Player->new($handle, {
    speed => 1, nowait => undef,
});


Reference

Term-TtyRec

GraphicWizardsLair - 2006-09-12 - コンソールをネット越しにライブで見せたいのであればscreen -xじゃなくてttyrecを使った方が簡単
http://www.otsune.com/diary/2006/09/12/1.html#200609121

ttyrec: ttyレコーダー
http://0xcc.net/ttyrec/

via

www.textfile.org - 2006-09-13
http://d.hatena.ne.jp/textfile/20060913/tty

初心者向けPlagger設定覚え書き

Reference

Muibrog - 2006-09-12 - いまさら聞けない? 初心者向けPlagger設定覚え書き その1
http://d.hatena.ne.jp/toshi123/20060912#p1

Muibrog - 2006-09-12 - いまさら聞けない? 初心者向けPlagger設定覚え書き その2
http://d.hatena.ne.jp/toshi123/20060913#p1

Muibrog - 2006-09-12 - いまさら聞けない? 初心者向けPlagger設定覚え書き その3
http://d.hatena.ne.jp/toshi123/20060914#p1

ローカルのPerlモジュールを使用する

Summary

use lib 'path/to/lib';
use Foo;


Sample

path/to/lib 以下にモジュールを配置.
Text::Iconvを利用する場合は,スクリプトから見て
path/to/lib/Text/Iconv.pm
に配置.

use lib 'path/to/lib';
use Text::Iconv;


Reference

hail2u.net - Weblog - 2004-05-06 - push @INCとuse lib
http://hail2u.net/blog/coding/push_at_inc_and_use_lib.html

Curl/Personal - 無償版Curl

Summary

[2006-09-11] より,Curl [2003-06-04-17]の無償版を提供開始.

Reference

無償版Curl - Curl/Personal
http://www.curlap.com/personal/

カール - 株式会社カールはリッチクライアント言語「Curl」の無償版を9月11日より提供します。
http://www.curlap.com/release/release.php?id=157

@IT - 2006-09-12 - リッチクライアント言語「Curl」に無償版、「マッシュアップに使って」
http://www.atmarkit.co.jp/news/200609/12/curl.html

@IT - WCR Watch - 2005-03-01 - MIT誕生のリッチクライアント技術が日本に、Curl
http://www.atmarkit.co.jp/fwcr/rensai/wcrwatch04/wcrwatch04.html

via

スラッシュドット ジャパン - 2006-09-12 - リッチクライアント言語「Curl」無償版 登場
http://slashdot.jp/developers/article.pl?sid=06/09/12/109249

UTF-8で書かれたWebページから namazu で検索

Summary

あるページからnamazu.cgiに検索文字列を送信する際,
遷移元のページがUTF-8の場合,検索が行なえない.

namazu.cgiがEUC-JPでHTMLエンコードされた検索文字列のみ対応しているのに対し,
遷移元ページがUTF-8で記述されている場合,検索文字列もUTF-8でHTMLエンコードされるため.

1. namazu.cgi を namazu2.cgi にリネーム.
2. 文字コード変換フィルタを namazu.cgi として設置
3. namazu.cgi 中で namazu2.cgi へリダイレクト.

Source

#!/usr/bin/perl

use CGI;
use Text::Iconv;
use CGI::Lite;

my $converter = Text::Iconv->new("UTF8", "EUC-JP");
my $cgi = new CGI;
my $new_query = q();

# パラメータが空の場合を考慮
if ($cgi->param('key')){
	$new_query = $converter->convert($cgi->param('key'));
}

$uencode = url_encode($new_query);
print "Location: http://example.com/path/to/namazu2.cgi?key="."$uencode\n\n";


補足

<form> タグの accept-charsetでも回避可能.
(Firefox1.5で動作を確認.Internet Explorer 6では動作せず.)
<form accept-charset="euc-jp">
</form>


Reference

namazuでUTF8ファイルの検索
http://www.ksknet.net/linux/namazuutf8.html

CGI
CGI::Lite
Text::Iconv

Development Environment Conference

Reference

Development Environment Conference
http://shibuyajs.org/articles/2006/08/28/development-environment-conference

naoyaのはてなダイアリー - 2006-09-09 - カンファレンスの資料
http://d.hatena.ne.jp/naoya/20060909/1157773043

いやなブログ- 2006-09-09 - Binary Hacks in Action
http://0xcc.net/blog/archives/000130.html

青木日記 - 2006-09-09
http://i.loveruby.net/d/20060909.html#p01

2nd life - 2006-09-09 - Developer Enviroments Conference の発表資料
http://d.hatena.ne.jp/secondlife/20060909/p1

最速インターフェース研究会 - 2006-09-09 - Developer Enviroments Conference で発表してきました
http://la.ma.la/blog/diary_200609091343.htm

blog.bulknews.net - 2006-09-09 - DECON 2006 で講演してきました
http://blog.bulknews.net/mt/archives/002068.html

via

オレンジニュース - 2006-09-08
http://secure.ddo.jp/~kaku/tdiary/20060908.html#p02

安倍晋三オフィシャルサイトの謎のUnixコマンド

スラッシュドット ジャパン - 安倍晋三オフィシャルサイトの謎のUnixコマンド より

cd 3rd_gen_koizumi_cabinet
第3次小泉内閣に移行
svn co https://jp.bluequartz.org/seisaku/proud [bluequartz.org] .
最新の愛国心を政策として取り込んでくる
./configure --with-passion=/home/abe/blood
阿部氏の血統である権力欲で政策を設定する
make proud_japan ; make check
日本を愛するようにし向ける;思想をチェックする
su
総理大臣になって権力を握る
Password:************
金融資本からの支援
make install
野望を実行する
ln -s /usr/local/bin/proud_japan /usr/bin/new_japan
新しい日本を愛国心の日本にする
cp ./proud_japan.cfg /etc/new_japan.cfg
愛国心を新しい日本の政策に据える
chkconfig proud_japan new_japan
愛国心にふさわしいか思想をチェック
/etc/init.d/rc.d/seisaku/new_japan_seisaku
新しい日本の政策を起動する
top
誰がこれらを実行している?
I
私(阿部)

Reference

あべ晋三のホームページへようこそ!!
http://tokyo.s-abe.or.jp/

Sun Ray Blog
http://blogs.sun.com/ThinGuy/entry/the_war_on_terror_as

スラッシュドット ジャパン - 安倍晋三オフィシャルサイトの謎のUnixコマンド
http://slashdot.jp/article.pl?sid=06/09/10/1240237

圧縮フォルダ機能を解除してエクスプローラの高速化

圧縮フォルダ機能を解除

regsvr32 /u zipfldr.dll
regsvr32 /u cabview.dll


圧縮フォルダ機能有効化

regsvr32 zipfldr.dll
regsvr32 cabview.dll


Reference

hail2u.net - Weblog - 圧縮フォルダを使わないようにするとエクスプローラがキビキビ動く
http://hail2u.net/blog/software/turn-off-zip-folder.html

エニグマシミュレータ

Reference

エニグマ
http://www.infonet.co.jp/ueyama/ip/history/enigma.html

エニグマシミュレータ
http://enigmaco.de/enigma/enigma.html

via

スラッシュドット ジャパン | エニグマ暗号文、64年ぶりに解読
http://slashdot.jp/security/article.pl?sid=06/03/03/1434206

GIGAZINE - 2006-09-11 - ドイツ軍が第二次世界大戦で使った暗号「エニグマ」シミュレーター
http://gigazine.net/index.php?/news/comments/20060911_enigma/

Windowsを遅くするソフトウェアランキング ワースト31

Summary

Software Mean Boot Time(s) System Delay(s) System Delay(%)
Norton Internet Security 2006 118.33 43.33 57.78
1000 Fonts 105.00 30.00 40.00
Kaspersky Internet Security 6.0.0.303 85.67 10.67 14.22
Yahoo Instant Messenger 8.0 85.67 10.67 14.22
AOL Instant Messenger 1.5 Preview 85.33 10.33 13.78
McAfee SecurityCentre 83.67 8.67 11.56
Kazaa 3 (+included crapware) 83.67 8.67 11.56
Trillian 3.1 Basic 83.33 8.33 11.11
VMWare Workstation5.5.1-19 83.33 8.33 11.11
Microsoft Visual Studio2005 Pro. 82.67 7.67 10.22
.NET Framework Runtime2.0 81.67 6.67 8.89
100 Fonts 80.33 5.33 7.11
Microsoft Office 2003(v11) Pro. 80.00 5.00 6.67
Windows Live Messenger(MSNM8) 80.00 5.00 6.67
Gaim 1.5.0 79.67 4.67 6.22
Adobe Photoshop CS 2 79.33 4.33 5.78
OpenOffice 2.0.3 79.00 4.00 5.33
Macromedia Studio MX 2004 79.00 4.00 5.33
QuickTime 7.1 78.67 3.67 4.89
DivX 6.3 78.67 3.67 4.89
DirectX 9.0c 78.67 3.67 4.89
Azureus 2.5.0.0 (+ Java Runtime) 78.33 3.33 4.44
BitDefender v10 78.00 3.00 4.00
WinRAR 3.60 78.00 3.00 4.00
Java Runtime 1.5.0.06 78.00 3.00 4.00
WinAce 2.65 77.67 2.67 3.56
K-Lite Codec Pack 2.76FULL 77.33 2.33 3.11
WinZip 77.33 2.33 3.11
7-Zip 4.42 77.00 2.00 2.67
BitComet 0.7 76.67 1.67 2.22
uTorrent 1.4 76.33 1.33 1.78

Reference

TPCSv8 - Articles - What Slows Windows Down?
http://www.thepcspy.com/articles/other/what_slows_windows_down/3

via

GIGAZINE - 2006-09-11 - 何のソフトを入れているとWindowsが重くなるのかリスト
http://gigazine.net/index.php?/news/comments/20060911_system_delay/

Warrick - 検索エンジンのキャッシュを利用して過去のWebページをリカバリ

Summary

Internet Archive, Google, Yahoo, MSNのキャッシュを利用し,
指定したURL以下の情報を引き出してくれる.

Reference

Warrick - Tool for Reconstructing a Website
http://www.cs.odu.edu/~fmccown/research/lazy/warrick.html

via

MOONGIFT - Warrick
http://oss.moongift.jp/intro/i-2376.html

MOONGIFT - Warrick レビュー
http://oss.moongift.jp/review/i-2377.html

TouchUpWeb - Internet Explorer用Webページを表示できるようにするFirefox拡張

Summary

Greasemonkeyを利用して,Internet Explorer独自拡張タグ,
CSS,JavaScriptの挙動をInternet Explorerと同様に合わせるサービス.

独立行政法人情報処理推進機構(IPA)の「2005年度下期オープンソースソフトウェア活用基盤整備事業」の一環として実施された
「Webコンテンツの相互運用性を改善するフィルタリングサーバの開発」プロジェクトにおいて,
Mozilla Japan,アルゴ21,三菱総合研究所の3社が共同で開発したソフトウェア.

ライセンスはMPL(Mozilla Public License).

Reference

TouchUpWeb プロジェクト - A Better Web for Everyone.
http://www.touchupweb.org/ja/

Bugzilla for TouchUpWeb プロジェクト メインページ
http://bugzilla.touchupweb.org/

Mozilla Add-ons - Greasemonkey
https://addons.mozilla.org/firefox/748/

SourceForge.net: TouchUpWeb
https://sourceforge.net/projects/touchupweb/

via

ITmedia エンタープライズ:もう崩れない、Webブラウザによる表示の違いを吸収するサービスが開始
http://www.itmedia.co.jp/enterprise/articles/0609/11/news051.html

Mayomi - ブラウザ上でマインドマップが作成できるサービス

Summary

無料で使えるマインドマップのオンラインサービス.
動作にはFlash Playerが必要.

Reference

Mayomi
http://www.mayomi.com/

via

ITmedia Biz.ID:マインドマップ作成サービス「Mayomi」を使ってみました
http://www.itmedia.co.jp/bizid/articles/0609/11/news074.html

Google News Archive Search - 過去200年分以上の新聞や雑誌記事を検索

Reference

Google News Archive Search
http://news.google.com/archivesearch

via

スラッシュドット ジャパン - 2006-09-08 - Google、200年の時を駆ける
http://slashdot.jp/article.pl?sid=06/09/08/1020246

INTERNET Watch - 2006-09-07 - Google、過去200年分の新聞雑誌記事検索サービスを開始
http://internet.watch.impress.co.jp/cda/news/2006/09/07/13217.html

日本語入力

skkime

http://www.tatari-sakamoto.jp/~tatari/skkime.jis.html

skkinput 2

http://skkinput2.sourceforge.jp/

AquaSKK - Mac OS X 用のかな漢字変換プログラム

http://aquaskk.sourceforge.jp/

SourceForge.jp - AquaSKK プロジェクト - 迷っている人へ
http://aquaskk.sourceforge.jp/aquaskk_pr.html

T-Code

http://openlab.jp/tcode/

PRIME

POBoxのような予測入力システム.
http://www.taiyaki.org/prime/

via

オレンジニュース - 2006-09-07
http://secure.ddo.jp/~kaku/tdiary/20060907.html#p12

Lightweight Language Ring の動画

Language Update

Haskell, Scheme, awk, OCaml, Lisp, Scripting for Java Platform,
PHP, Perl, JavaScript, Python, Ruby, ActionScript, FORTH, Squeak.
http://www.sbbit.jp/article/art.asp?newsid=2658

対戦「じゃんけん2.0」

10000回じゃんけんを行い,プログラミング言語の戦略を競う.
参加言語は Ruby, ActionScript, JavaScript, awk, Python.

http://www.sbbit.jp/article/art.asp?newsid=2695

キミならどう書く

フレームワークを使って家計簿を開発.
Django Python
Kahua Gauche
Ethna PHP
Ruby on Rails Ruby

http://www.sbbit.jp/article/art.asp?newsid=2729

via

オレンジニュース - 2006-09-06
http://secure.ddo.jp/~kaku/tdiary/20060906.html#p02

FreeNX - リモートデスクトップ

apt-line

/etc/apt/sources.list

deb http://kanotix.com/files/debian unstable main

Install

# apt-get install freenx


Setup

# nxsetup --install


Reference

FreeNX - the free NX
http://freenx.berlios.de/

NoMachine NX - Download the NX Terminal Server and Remote Access Software
http://www.nomachine.com/download.php

FreeNX - PukiWiki
http://tidus.ultimania.org/wiki/index.php?FreeNX

@IT - FreeNXでLinuxをリモート操作するには
http://www.atmarkit.co.jp/flinux/rensai/linuxtips/926usefreenx.html

Ubuntu Japanese Team - 2005-07-29 - NoMachine NX ClientとFreeNXを利用したシンクライアントシステム
http://www.ubuntulinux.jp/News/News20050729/

via

GIGAZINE - 2006-09-08 - VNCよりも高速で遠隔操作できる「FreeNX」
http://gigazine.net/index.php?/news/comments/20060908_freenx/

Browsershots - 様々なブラウザでのページの見え方をスクリーンショットとして保存

Summary

ブラウザとスクリーンショットのサイズ,JavaScriptの有効・無効などを選択し,"Submit Job" をクリック.
ジョブは一旦,キューに入る.

http://xight.org/ のスクリーンショット一覧は以下のページから閲覧可能.
http://browsershots.org/website/http://xight.org/

ブラウザ一覧

Linux
    Dillo 0.8
    Epiphany 2.14
    Firebird 0.7
    Firefox 1.0
    Firefox 1.5
    Firefox 2.0
    Firefox 3.0
    Flock 0.7
    Galeon 2.0
    Konqueror 3.3
    Konqueror 3.4
    Konqueror 3.5
    Mozilla 1.7
    Navigator 4.8
    Opera 8.5
    Opera 9.0
    Phoenix 0.5
    SeaMonkey 1.0
Mac
    Safari 2.0
Windows
    Firefox 1.0
    Firefox 1.5
    Firefox 2.0
    K-Meleon 1.0
    MSIE 6.0
    MSIE 7.0
    Mozilla 1.7
    Navigator 4.8
    Netscape 6.2
    Netscape 7.2
    Netscape 8.1
    SeaMonkey 1.0
Terminal
Mobile

Reference

Test your web design in different browsers - Browsershots
http://browsershots.org/

タグの階層化とサブカテゴリの表示

Source

<div id="categories">
    <h2>カテゴリー</h2>
    <MTSubCategories>
        <MTSubCatIsFirst><ul></MTSubCatIsFirst>
        <MTIfNonZero tag="MTCategoryCount">
            <li>
                <a href="<$MTCategoryArchiveLink$>" title="<$MTCategoryDescription$>">
                    <MTCategoryLabel>
                </a>
            <MTElse>
                <li><MTCategoryLabel>
            </MTElse>
        </MTIfNonZero>
        <MTSubCatsRecurse max_depth="3">
        </li>
        <MTSubCatIsLast></ul></MTSubCatIsLast>
    </MTSubCategories>
</div>


Reference

Techknow Weblog: サブカテゴリを表示するためのタグ
http://www.sixapart.jp/movabletype/developers/cheebow/archives/2004/11/post_12.html

PCK (Pipeline Construction Kit) - Windows上でLinuxコマンドを利用

Summary

Windows上でUnix/Linuxでおなじみコマンドを利用できる.
Perl, Python, Rubyは別途実行環境が必要.

コマンド一覧

auc
awk
bin2hex
board
cat
diff
dir
dumpbin
expand
find
fold
grep
head
ls
od
paste
perl
pipe
line
python
ran
ruby
sort
tail
touch
tv
unexpand
wc

Reference

Longtail: PCK
http://www.longtail.co.jp/pck/

PCK マニュアル
http://www.longtail.co.jp/pck/main/

via

MOONGIFT - PCK
http://fw.moongift.jp/intro/i-2353.html

MOONGIFT - PCK レビュー
http://fw.moongift.jp/review/i-2354.html

Heritrix - Internet Archive で使用されているJava製Webクローラ

Summary

archive.org で使用されているJava製Webクローラ
ライセンスはLGPL.

Reference

SourceForge.net - Heritrix
http://archive-crawler.sourceforge.net/

Internet Archive: Wayback Machine
http://www.archive.org/web/web.php

via

MOONGIFT - Heritrix
http://oss.moongift.jp/intro/i-2355.html

MOONGIFT - Heritrix レビュー
http://oss.moongift.jp/review/i-2356.html

Services_Delicious - del.icio.usのAPIを利用するためのPearパッケージ

Summary

del.icio.usのAPIを利用するためのPearパッケージ.
[2006-08-09] より del.icio.us のAPIがHTTPSのみを受け付けるようになった.

Reference

p4lifeのメモ - 2006-09-02 - PEAR::Services_Delicious 0.5.0 をリリースしました
http://d.hatena.ne.jp/p4life/20060902/1157210163

Services_Delicious

phpspot開発日誌 - 2006-08-21 - 新しくなったdel.icio.usのAPI仕様と投稿サンプルプログラム
http://phpspot.org/blog/archives/2006/08/deliciousapi.html

del.icio.us/help/api
http://del.icio.us/help/api/

del.icio.us - blog - 2006-08-06 security (everybody feels better with)
http://blog.del.icio.us/blog/2006/08/security_everyb.html

Yahoo! API News - 2006-08-15 - del.icio.us and Answers (by Jeremy Zawodny)
http://jeremy.zawodny.com/blog/archives/007202.html

via

phpspot開発日誌 - 2006-09-06 - del.icio.usのAPIを叩くPearパッケージ『Services_Delicious』がアップデート
http://phpspot.org/blog/archives/2006/09/deliciousapipea.html

Eメールマーケティングにおける間違い トップ3

1. 読者の集め方

ユーザにメールマガジンを登録したという記憶を持たせること.
登録した意識が無いメールマガジンが届くとユーザから反感を買う.

2. 登録データの取り方

メールアドレス以外の情報は「必要以上の情報」.
「必要以上の情報」を登録することで,得られるメリットを説明すること.

3. メールアドレスリスト分析

メールマガジンに登録しているメールアドレスに
無料メールのメールアドレス,ISPメールのメールアドレス,法人企業のメールアドレスの割合を分析する.

Reference

Japan.internet.com - Webマーケティング - Top 3 ミステイク
http://japan.internet.com/wmnews/20060907/6.html

失敗しないEメールマーケティング
http://goyat.biz/

last.fm のよく聞く曲,アーティスト,最近聞いた曲を画像として表示

top artists overall

top artists overall

<a href="http://www.last.fm/user/xight/">
  <img
    src="http://imagegen.last.fm/myspacecolors/oartists/xight.gif"
    alt="top artists overall"
  />
</a>


top tracks overall

top tracks overall

<a href="http://www.last.fm/user/xight/">
  <img
    src="http://imagegen.last.fm/myspacecolors/otracks/xight.gif"
    alt="top tracks overall"
  />
</a>


recently played song

my recently played songs

<a href="http://www.last.fm/user/xight/">
  <img
    src="http://imagegen.last.fm/myspacecolors/recenttracks/xight.gif"
    alt="my recently played songs"
  />
</a>


Reference

last.fm - xight
http://jp.last.fm/user/xight/

via

maratz.com - about
http://www.maratz.com/about/

リンク先の拡張子に応じて自動的に画像を付加

Summary

<a>タグの href属性の末尾が '.pdf' , '.doc' ,'.zip'の要素をピックアップ.
対象の<a>タグにclass名を付加する.

例では,pdfLink , docLink, zipLinkというclass名を使用.
各々のclassには,拡張子と対応する画像が指定してある.

Source

リンク先がPDF,Wordファイル,Zipファイルの<a>タグに,class名を付ける.

function fileLinks() {
    var fileLink;
    if (document.getElementsByTagName('a')) {
        for (var i = 0; (fileLink = document.getElementsByTagName('a')[i]); i++) {
            if (fileLink.href.indexOf('.pdf') != -1) {
                fileLink.setAttribute('target', '_blank');
                fileLink.className = 'pdfLink';
            }
            if (fileLink.href.indexOf('.doc') != -1) {
                fileLink.setAttribute('target', '_blank');
                fileLink.className = 'docLink';
            }
            if (fileLink.href.indexOf('.zip') != -1) {
                fileLink.setAttribute('target', '_blank');
                fileLink.className = 'zipLink';
            }
        }
    }
}
window.onload = function() {
    fileLinks();
}


a:hover {
    text-decoration: none;
}
.pdfLink {
    padding-right: 19px;
    background: url(pdf.gif) no-repeat 100% .5em;
}
.docLink {
    padding-right: 19px;
    background: url(doc.gif) no-repeat 100% .5em;
}
.zipLink {
    padding-right: 17px;
    background: url(zip.gif) no-repeat 100% .5em;
}


Reference

maratz.com - 2005-01-13 - PDF Links Labeling
http://www.maratz.com/blog/archives/2005/01/13/pdf-links-labeling/

maratz.com - PDF Link Labeling Example
http://webdesign.maratz.com/lab/pdf_links_labeling/

DOSプロンプトでアセンブリの学習

Summary

debug コマンドで debugモードに切り替わる.

debug


-A 0100
2D88:0100 mov ax,50
2D88:0103
-G=0100 0103

AX=0050  BX=0000  CX=0000  DX=0000  SP=FFEE  BP=0000  SI=0000  DI=0000
DS=2D88  ES=2D88  SS=2D88  CS=2D88  IP=0103   NV UP EI PL NZ NA PO NC
2D88:0103 0000          ADD     [BX+SI],AL                         DS:0000=CD
-q

Netwide Assemblerを利用すればコンパイル,実行も可能.

Reference

「アセンブリ言語の教科書」の原稿
http://ruffnex.oc.to/kenji/text/asmbook/

SourceForge.net: The Netwide Assembler
http://sourceforge.net/projects/nasm/

phpAdsNew - 広告管理・配信サーバソフトウェア

Summary

インプレッション保証,クリック数保証,期間保証の広告配信システム.
バナー広告,HTML広告,テキスト広告,DHTML広告などから設定可能.

ブラウザ名,言語などの環境変数,国,地域によって配信する広告を変更可能.
国,地域の判別はIPアドレスから行なう.

日本語化

日本語用ファイルをダウンロード
http://elf.no-ip.org/~elf/contribute/phpadsnew/2005-11-19/

% wget http://elf.no-ip.org/~elf/contribute/phpadsnew/2005-11-19/phpadsnew-cvs-20051119-ja.tar.gz
% tar xzvf phpadsnew-cvs-20051119-ja.tar.gz
% cp -rf phpAdsNew/language/japanese_euc-jp phpAdsNew/language/japanese_utf-8 path/to/phpAdsNew-2.0.8/language

インストール

1. phpAdsNew用DB作成

% mysqladmin -uroot -p create phpadsnew


2. config.inc.phpのパーミッション変更

% chmod 666 config.inc.php


メンテナンス

cronを用いて maintenance.php を定期的に実行する

curl版

0 * * * * curl -s -o /dev/null http://example.com/path/to/phpAdsNew/maintenance/maintenance.php

Reference

Welcome to phpAdsNew / Open-source ad server
http://phpadsnew.com/two/

phpAdsNew - Documentation
http://phpadsnew.com/two/support-documentation.html

via

GIGAZINE - 2006-09-07 - PHPとMySQLであらゆる広告を生成して管理する「phpAdsNew」
http://gigazine.net/index.php?/news/comments/20060907_phpadsnew/

Perl でデコメールの送信

Summary

デコメールの送信方法.

デコメールのパターン

1. HTMLのみ
2. HTML + 画像添付
3. HTML + インライン画像
4. デコメールテンプレート

1. HTMLのみのフォーマット

デコメール非対応の端末にはTEXTパートのみ送信される.
よって,TEXTパートを必ず付ける.

Content-Type:multipart/alternative
  Content-Type:text/plain
    メールの内容 (テキスト)
  Content-Type:text/html
    メールの内容 (HTML)


2. HTML + 画像添付

Content-Type: multipart/mixed
  Content-Type: multipart/alternative
    Content-Type:text/plain
      メールの内容 (テキスト)
    Content-Type:text/html
      メールの内容 (HTML)
  
  Content-Type:image/gif
  Content-Transfer-encoding:base64
    (base64で符号化されたgifファイル)


3. HTML + インライン画像

Content-Type:multipart/related
  Content-Type: multipart/alternative
    Content-Type:text/plain
      メールの内容 (テキスト)
    Content-Type:text/html
      メールの内容 (HTML)

  Content-Type:image/gif
  Content-Transfer-encoding:base64
  Content-ID:<sample>
    (base64で符号化されたgifファイル)


4. デコメールテンプレート

改行は CR + LF.
Content-Typeは application/x-decomail-template
Decomail-Template
MIME-Version:1.0
Content-Type:multipart/related
  Content-Type: text/html;charset=Shift_JIS
  Content-Transfer-Encoding:8bit
    (HTML本文)
    <img src="cid:sample">

  Content-Type:image/gif
  Content-Transfer-encoding:base64
  Content-ID:<sample>
    (base64で符号化されたgifファイル)


Reference

CodeZine - Perlで作るモバイルサイトのコツ : 第2回 (デコメール)
http://codezine.jp/a/article.aspx?aid=550

CodeZine - Perlで作るモバイルサイトのコツ : 第2回 (デコメール)
http://codezine.jp/a/article.aspx?aid=550&p=2

MIME::Lite
Jcode

set.js - JavaScriptでset

Summary

Pythonのset型を,Arrayを拡張してJavaScriptで実装.
setは要素が重複しないリスト.

格納できる型は,string型, number型, boolean型.
pushを使って要素を追加すると重複してしまう.

Reference

最速インターフェース研究会 - 2006-09-06 - JavaScriptでPythonのsetみたいなの
http://la.ma.la/blog/diary_200609062338.htm

Python ライブラリリファレンス - 2.3.7 set (集合) 型
http://www.python.jp/doc/release/lib/types-set.html

set data type for javascript
http://la.ma.la/misc/js/set/

http://la.ma.la/misc/js/set/compat.js
http://la.ma.la/misc/js/set/set.js

benchmark.js - JavaScriptのベンチマークツール

Summary

JavaScriptのベンチマークツール.
連想配列の関数を渡せば利用可能.
benchmark()しか汚染しない.
FireBugのコンソールに表示することも可能.

使用上の注意

1. 計測はグローバル領域で行なうこと.
2. 軽すぎる関数は正確な値が出ないことがある.

Usage

benchmark({
  'test1': function() {
    // do something
  },
  'test2': function() {
    // do something
  },
  'test3': function() {
    // do something
  }
});


Usage (FireBugを利用)

benchmark.at('firebug')({
  'test1': function() {
    // do something
  },
  'test2': function() {
    // do something
  },
  'test3': function() {
    // do something
  }
});

Sample (http://sample.ecmascript.jp/benchmark.html)

benchmark({
  'getElementById': function() {
    document.getElementById('target');
  },
  'getElementsByTagName': function() {
    document.getElementsByTagName('target');
  },
  'Prototype\'s $ function': function() {
    $('target');
  }
});


Reference

IT戦記 - ベンチマークツール公開
http://d.hatena.ne.jp/amachang/20060906/1157571938

Benchmark Demo
http://sample.ecmascript.jp/benchmark.html

ソース
http://sample.ecmascript.jp/benchmark.js

ErrorZilla - エラー画面を便利にするFirefox拡張

Summary

エラー画面に「再試行」ボタンの他,
「Google Cache」「Wayback」「Ping」「Trace」「Whois」ボタンを追加.

Reference

roachfiend.com - ErrorZilla - Useful error pages for Firefox
http://roachfiend.com/archives/2006/08/28/errorzilla-useful-error-pages-for-firefox/

via

sta la sta - Firefoxのエラー画面をより便利に - ErrorZilla
http://d.hatena.ne.jp/starocker/20060906/p1

Webページにソースコードを表示するには

方法

1. <textarea>
Ctrl+A で Copy & Paste が楽.

2. <pre> + CSS

3. <pre> + <code> + CSS

4. <textarea> + dp.SyntaxHighlighter[2006-06-12-7]

CSSの例

pre.code {
	font-family: monospace;
	white-space:pre;
	overflow:scroll;
}


vimの設定

.vimrc に記述
" html escape function
:function HtmlEscape()
silent s/&/\&/eg
silent s/ silent s/>/\>/eg
:endfunction


対象範囲を選択後,
:call HtmlEscape()


Reference

i d e a * i d e a - ブログにコードを貼り付ける方法で悩むの巻
http://www.ideaxidea.com/archives/2006/09/post_129.html

404 Blog Not Found:ソースを貼付ける50の方法
http://blog.livedoor.jp/dankogai/archives/50621177.html

hail2u.net - Weblog - pre要素へのスタイル指定
http://hail2u.net/blog/webdesign/styling-pre.html

2xup - 2006-09-07 - pre 要素のスタイル定義とマークアップ
http://2xup.org/log/2006/09/07-0056

hxxk.jp - 2006-09-06 - Re: i d e a * i d e a - ブログにコードを貼り付ける方法で悩むの巻
http://hxxk.jp/2006/09/06/2210

i d e a * i d e a - 2006-09-07 - ソースの貼り付け方法その後
http://www.ideaxidea.com/archives/2006/09/post_131.html

背景画像に透過GIFを利用して,背景の更新を楽にする

Summary

背景画像に透過GIFを利用することで,
背景色を変えるだけで様々なパターンのデザインが利用できるようになる.

CSS

body {
	background: #fa0 url(stripe_1px.gif);
}


Sample

斜線 (1px)
http://www.lucky-bag.com/appendix/background-pattern/background-pattern-sample01.html

斜線 (2px)
http://www.lucky-bag.com/appendix/background-pattern/background-pattern-sample02.html

市松模様 (1px)
http://www.lucky-bag.com/appendix/background-pattern/background-pattern-sample03.html

市松模様 (2px)
http://www.lucky-bag.com/appendix/background-pattern/background-pattern-sample04.html

ストライプ (1px)
http://www.lucky-bag.com/appendix/background-pattern/background-pattern-sample05.html

ストライプ (2px)
http://www.lucky-bag.com/appendix/background-pattern/background-pattern-sample06.html

Reference

Super Stripes
http://webdesign.maratz.com/lab/superstripes/

Lucky bag::blog: 背景画像に使える透過 GIF
http://www.lucky-bag.com/archives/2006/09/background-patterns.html

PEAR::Contact_AddressBook - アドレス帳のインポート,エクスポートを可能にするPEARパッケージ

対応するアドレス帳

Eudora
KMail (KDE Mailer) CSV
Mozilla/Thunderbird/Netscape CSV
Microsoft Outlook CSV
Microsoft Windows Address Book (WAB)/Outlook Express CSV
Palm Pilot CSV
Yahoo! Mail Address Book
Gmail Address Book

Reference

Contact_AddressBook

via

phpspot開発日誌 - 2006-09-04 - アドレスブックのインポート/エクスポートを可能にする『PEAR::Contact_AddressBook』
http://phpspot.org/blog/archives/2006/09/pearcontact_add.html

Apache + SSL で起動時にパスフレーズの入力をスキップする方法

Summary

サーバ鍵のファイルにパスフレーズを埋め込んでおくことで,
Apacheの起動時にパスフレーズの入力がスキップすることが可能.

# cd /usr/local/apache/conf/ssl.key
# cp -p server.key server.key.org
# openssl rsa -in server.key.org -out server.key

# cd /usr/local/apache/conf/ssl.key/
# openssl rsa < server.key > server.key.out 
read RSA key
Enter PEM pass phrase: (パスフレーズを入力)
writing RSA key
# mv server.key server.key.org
# mv server.key.out server.key

他の方法

パスフレーズを出力するスクリプトを作成して,
SSLPassPhraseDialog を利用する方法も可能とのこと.

Reference

Noah System Labs - LINUX のツボ - ツボその16 Apache + mod_ssl
http://www.ns-labs.com/linux/tsubo16.html

株式会社エスロジカル - 技術ドキュメント OpenSSL : mod_sslサーバー証明鍵にパスフレーズを埋め込む
http://www.slogical.co.jp/tech/openssl_modssl_serverkey_pass.html

[Apache-Users 3772] Re: SSL付でApacheを自動起動する方法
http://mm.apache.or.jp/pipermail/apache-users/2004-March/003962.html

Apache HTTP Server - mod_ssl
http://httpd.apache.org/docs/2.0/mod/mod_ssl.html#sslpassphrasedialog

ライブPDFプリンタ - 仮想プリンタとして動作するPDF作成ソフトウェア

Summary

仮想プリンタとして動作するPDF作成ソフトウェア.
しおり,注釈,リンク,添付ファイルを設定したPDFを作成可能.

Reference

ライブPDF
http://www.livepdf.jp/

via

MOONGIFT - ライブPDFプリンタ
http://fw.moongift.jp/intro/i-2333.html

MOONGIFT - ライブPDFプリンタ レビュー
http://fw.moongift.jp/review/i-2334.html

HELIOWorld - PHPで書かれた地図生成ソフトウェア

Summary

PHPで書かれた,オープンソース地図生成ソフトウェア.
ライセンスはLGPL.

Sample

include "i_helio_world.php";
$world = new helio_world (200, 200);
$world->set_center_xy (1750, 420);
$world->render();


Reference

HELIO World, a free open source map generator
http://www.helio.org/world/

via

MOONGIFT - HELIOWorld
http://oss.moongift.jp/intro/i-2329.html

MOONGIFT - HELIOWorld レビュー
http://oss.moongift.jp/review/i-2332.html

Google デスクトップのガジェット開発

Google デスクトップ - 機能 - Googleガジェットとサイドバー
http://desktop.google.co.jp/ja/features.html#gadgets

Google デスクトップ - SDK のダウンロード
http://desktop.google.co.jp/downloadsdksubmit?hl=ja

via

Google Japan Blog - 2006-08-30 - ガジェットを開発していただけませんか?
http://googlejapan.blogspot.com/2006/08/blog-post_30.html

読みにくいソースコード

C言語

http://www0.us.ioccc.org/1988/westley.c
http://www0.us.ioccc.org/2000/bmeyer.c
http://www0.us.ioccc.org/2000/dhyang.c

Malbolgeによるプログラム (99 Bottles of Beer | Language Malbolge)

http://www.99-bottles-of-beer.net/language-malbolge-995.html

Whitespace によるプログラム

http://compsoc.dur.ac.uk/whitespace/hworld.ws

追記 [2006-09-19]

swk's log - 2006-09-16 - 読みにくいソースコード
http://www.kagami.org/diary/2006-09-16-1.html

ioccc - 1987 - korn.c
http://www0.us.ioccc.org/1987/korn.c

Reference

The International Obfuscated C Code Contest
http://www0.us.ioccc.org/main.html

ロベールの小部屋 - 最凶言語 Malbolge
http://d.hatena.ne.jp/Robe/20060824

Wikipedia - Chef_programming_language
Wikipedia - Shakespeare_programming_language
Wikipedia - Malbolge

via

スラッシュドット ジャパン | おすすめのソースは?
http://slashdot.jp/askslashdot/article.pl?sid=06/09/03/0721254

Google Image Labeler - Googleのイメージ検索の精度向上のための仕組み

Summary

画像にラベルを付けていくことでGoogleイメージ検索の精度向上に貢献できる.
オンラインゲームの要素を含んでおり,同じ画像を見ている人と同じ単語をラベル付けできれば点数が入る.

Reference

Google Image Labeler
http://images.google.com/imagelabeler/

via

GIGAZINE - 2006-09-02 - Googleのイメージ検索精度を上げる「Google Image Labeler」開始
http://gigazine.net/index.php?/news/comments/20060902_imagelabeler/

GoogleへのアクセスをGIFアニメーションで視覚化

Summary

Googleへの[2003-08-14]のアクセス結果を明度で視覚化し,世界地図にマッピング.
明るい部分が右から左へ流れていく.

Googleが開発したプログラミング言語 Sawzall を利用しているようだ.

GIF画像

http://labs.google.com/papers/sawzall-20030814.gif

Reference

Google Research Publication: Sawzall - Interpreting the Data: Parallel Analysis with Sawzall
http://labs.google.com/papers/sawzall.html

via

GIGAZINE - 2006-09-03 - Googleへの世界中からのアクセスをGIFアニメーション化
http://gigazine.net/index.php?/news/comments/20060903_google_traffic/

画面解像度とページレイアウト - 1024 x 768に最適化し,リキッドレイアウトで

Summary

ウェブページは 1024 × 768 に最適化するべきだが,
幅広い解像度に対応できるリキッド・レイアウトを使おう.

Reference

Alertbox: 画面解像度とページレイアウト (2006年7月31日)
http://www.usability.gr.jp/alertbox/20060731_screen_resolution.html

via

オレンジニュース - 2006-08-31
http://secure.ddo.jp/~kaku/tdiary/20060901.html#p10

Google Book Search - Googleによる書籍検索

Reference

Google Book Search
http://books.google.com/

404 Blog Not Found:Google Book Search の技術力
http://blog.livedoor.jp/dankogai/archives/50615107.html

TechCrunch Japanese アーカイブ - Google、著作権切れ書籍のpdfダウンロード開始
http://jp.techcrunch.com/archives/google-allows-downloads-of-out-of-copyright-books/

via

オレンジニュース - 2006-08-31
http://secure.ddo.jp/~kaku/tdiary/20060831.html#p04

ライセンスフリーのフォント

Lacuna Regular

http://www.glashaus-design.com/

MiloTF-Text

http://www.fontshop.com/features/free.cfm

Lexia Readable

http://www.k-type.com/

Fontin-Regular

http://www.josbuivenga.demon.nl/

Devroye

http://apostrophiclab.pedroreina.net/

Reference

hail2u.net - Weblog - よく使うライセンス・フリーのフォント
http://hail2u.net/blog/webdesign/lovely-license-free-fonts.html