ソフトウェア紹介

わんくまブログカスタマイズチュートリアル

Hirotow◆EXPRSXEAm6 — Fri, 20 Jun 2008 16:00:00 GMT

わんくまブログはMovableTypeやWordPressと違って、スキン（テンプレート）の数が限られており（さらに.Textが配布されていない現状で新しく作ることは実質的に不可能）、グラフィカルに選択したりすることもできないのでカスタマイズが面倒です。
しかし、各種テクニックを駆使することでそれなりのカスタマイズはできるようになっています。

カスタマイズの肝はニュース欄とカスタムCSS

全てのカスタマイズはAdmin→オプション→設定の画面から行います。

特に、「スキン」と「カスタムCSS」と「ニュース/アナウンス」の欄が重要です。

カスタマイズしやすいスキンを選択する

カスタマイズを行う場合、スキンの見た目は一切無視してカスタマイズしやすさのみに重点を置きます。

主に以下の条件を満たしたスキンがカスタマイズしやすいスキンです。

CSSのclassを多用していない
画像を多用していない
サイドバーをfloatでなくposition:absoluteで実装している。

こうして絞り込んでいくと、初期設定で使用されているmarvin系のスキンがいちばん弄りやすいので、この記事ではmarvin2をベースとして解説します。

ただしサーバー側でカレンダーを生成したい場合はLuxInterior系をベースにすることになります。

ニュース欄はh3、ul、liを使って記述する

marvin系スキンでのニュース欄の構造は、

<h3>ニュース</h3>
ニュース欄の内容
<h3>書庫</h3>
<ul>
<li>0000年01月</li>
<li>0000年02月</li>
</ul>
<h3>カテゴリ</h3>
<ul>
<li>カテゴリ1</li>
<li>カテゴリ2</li>
</ul>

のようになっているので、ニュース欄の内容も同じ形式で書く必要があります。

ただし、アクセス解析のようなスクリプトやニュース欄以外の場所に配置する広告はulの外に配置した方がよいでしょう。

CSSは外部ファイルに分離する

カスタムCSSの入力欄はお世辞にも使いやすくはなく、幸いなことにCSSには@import規則という外部のCSSを読み込む手段があるのでこれを使用します。

@import規則はIE6のような古いブラウザにも対応しているので安心して使用できます。

書式は、

@import url(読み込むCSSのURL);

で、これをセレクタやコメントより前に置きます。
セレクタやコメントより後に置くと読み込まれません。

外部のCSSは使い込んだエディタやVisual Web Devlopper、DreamWeaver、ホームページビルダーなどで編集するとよいでしょう。

Firefox使いはWebDevelopperを入れろ

Firefoxを使っているのであれば、WebDevelopperという拡張機能でリロードなしでCSSの編集、確認ができます。

わんくまのサーバにも優しいのでぜひ導入しましょう。

で、結局どんなセレクタを書けばいいの？

marvin2のHTMLは以下のようになっています（若干簡略化してあります）。

○body
　○div#top
　└○h1
　　└○a
　└○p#tagline
　○div#leftmenu
　└○h3
　└○ul
　　└○li
　○div#main
　└○p.date
　　└○a
　└○div.post
　　└○h2
　　　└○a
　　└○本文
　　└○p.postfoot
　○p#footer

特に設定すべきものは、

body、div#top、div#mainのcolor、background
div#top、div#mainのborder
a:link、a:visited、a:hover、a:activeのcolor、text-decoration
div#leftmenu ul、div#leftmenu ul liのborder、padding

です。

まとめ

これだけ知っておけば最低限のカスタマイズはできます。
CSSに関しては以下のリンク集を参考にしてください。

また他にも参考になるサイトは山ほどあります。

あと質問はコメント欄で受け付けておりますのでご自由にどうぞ。

Firefox3で現在使用中の拡張機能

Hirotow◆EXPRSXEAm6 — Thu, 19 Jun 2008 06:31:00 GMT

現在使用中の拡張機能をExtension List Dumperを使って晒してみます。

ちなみにJavaScriptの実行速度が高速化されたようですが、それによってJavaScriptで動作する拡張機能も高速化しています。
よって、Firefox2の2～3倍の拡張を入れても結構快適に動きます。
（最も動きの遅い拡張を避けているのもありますが）

アプリケーション: Firefox 3.0 (2008052906)
OS: WINNT (x86-msvc)

bbs2chreader 0.5pre2
http://bbs2ch.sourceforge.jp/
Firefox 3.0b3 - 3.0.*
2ch.net(Japanese Web Forums) Browser
CacheViewer 0.4.7
http://tinybenki.sblo.jp/
Firefox 2.0 - 3.0
キャッシュを一覧表示して、検索やソートができます。
Context Search 0.4.3
http://www.cusser.net
Firefox 2.0 - 3.0.*
Expands the context menu's 'Search for' item into a list of search engines.
Extension List Dumper 1.14.1
http://sogame.awardspace.com/
Firefox 1.5 - 3.0.*
インストールした拡張（アドオン）の一覧を生成します。
Fast Dial 1.90
http://telega.phpnet.us/fastdial/
Firefox 2.0 - 3.0.*
サムネイルからお気に入りのページへ素早くアクセスします
File Title 1.3
http://www.jasnapaka.com/mozilla/filetitle/
Firefox 1.5 - 3.0.*
"Save as" title as default like in IE
Firebug 1.2.0b3
http://www.getfirebug.com/
Firefox 3.0 - 3.0.*
Web Development Evolved.
FireGestures 1.1.2
http://www.xuldev.org/firegestures/
Firefox 2.0 - 3.0.*
マウスジェスチャによって様々なコマンドを実行します。
IE Tab 1.5.20080310
https://addons.mozilla.org/firefox/addon/1419/
Firefox 3.0b3 - 3.0.*
Mozilla/Firefox に IE のレンダリングエンジンを組み込みます。
Java Console 6.0.06
Firefox 1.0 - 5.0+
JSActions 3.0.0a4
http://openhideaway.net/Firefox/
Firefox 2.0.0 - 3.0.*
JS Actions - Modified by HideAway
Link Widgets 1.6
http://clav.mozdev.org/
Firefox 1.5.0.4 - 3.0.*
A site-navigation tool
Make Link 8.06
http://www.soylentred.net/projects/make-link
Firefox 1.0 - 3.0
コンテキストメニューからHTMLやWiki記法のリンクを作成
Nightly Tester Tools 2.0.2
http://www.oxymoronical.com/web/firefox/nightly
Firefox 3.0b5 - 3.1a1pre
Useful tools for the nightly tester.
Resurrect Pages 2.0.2
http://trac.arantius.com/wiki/Extensions/Resurrect
Firefox 3.0 - 3.0.*
死んだページを亡霊から生き返らせる。
User Agent Switcher 0.6.11
http://chrispederick.com/work/user-agent-switcher/
Firefox 1.0 - 3.0.*
Adds a menu and a toolbar button to switch the user agent of the browser.
テキストリンク 2.0.2008052801
http://piro.sakura.ne.jp/xul/_textlink.html
Firefox 1.0 - 3.0.*
ページ中に書かれたURI文字列をダブルクリックしただけで読み込めるようにします。
緑のgoo 1.1.1
http://green.goo.ne.jp/
Firefox 2.0 - 3.0.*
「緑のgoo」検索エンジンによる環境保護活動への貢献度のシンボル「gooの木」を表示し、あなたのFirefoxを緑で彩ります。

ちなみにFirefox3でも「他のタブを全て閉じる」機能は使用できます。

Firefox3をダウンロードしよう

Hirotow◆EXPRSXEAm6 — Thu, 12 Jun 2008 18:44:00 GMT

2008-06-18 Wed 早朝に軽くて高性能で有名なFirefox3の正式版が公開されるそうです。

24時間最多ダウンロード数としてギネス記録に挑戦するようなので、是非ダウンロードしてください。

VisualStudioで使えそうな綺麗フォントいろいろ（修正版）

Hirotow◆EXPRSXEAm6 — Wed, 04 Jun 2008 20:02:00 GMT

さっきTwitterでフォントの話が出ていたので、VSで使えそうな綺麗フォントをまとめてみます。

M+1VM+IPAG circle (10pt ClearType)

M+とIPAフォントの2種類をいいとこ取りしただけあって小さなサイズでも綺麗なフォント。
英字と和字のサイズバランスもよくおすすめです。

→M+ と IPAフォントの合成フォント

BDF UM+ (9pt)

ぽぴ王子愛用の東風フォントを彷彿とさせる書体。
ClearType非対応なのが玉に瑕。

→KaoriYa.net

Osaka－等幅 (11pt ClearType)

Macの標準フォントでありカスタマイズの世界では超定番なフォント。
現在入手できるTTFは英字が一回り小さいので10pt以下では見辛い。
標準アンチエイチアスの方が若干綺麗な希ガス。

→Macの見やすいOsakaフォントをWinで使おうプロジェクト

SH G30-M (10pt ClearType)

ザウルスのフォント。
アンチエイリアスの方式が違うので実記ほど綺麗には表示されませんが、等幅フォントの中では優秀なほうです。

→Macの見やすいOsakaフォントをWinで使おうプロジェクト

キャパニトＬ-等幅 (10pt ClearType)

タイプラボの製品で、手書き風の中では最もできのよいフォントの一つ。
これは無償のお試し版なので小学校の教科書に載っていない漢字は化けています。

→タイプラボ

Windows Live Writer CTP入れてみました。

Hirotow◆EXPRSXEAm6 — Wed, 04 Jun 2008 11:14:00 GMT

当然ながら画面は英語になってますね。

というわけで、一番気になるのが画像のトリミング機能。
スクショをアップロードするには半ば必須の機能です（今まではWordを併用していました）。

まず、これが普通に画像を貼り付けたところ。

これにを選択し、右ペインのAdvanced→cropを選択するとトリミングされます。

トリミングの方法は画像に被さった枠を移動、リサイズする方式で、Wordなどとは操作性が違います。

はてなブックマーク、はてなスターのボタン設置方法。

Hirotow◆EXPRSXEAm6 — Thu, 22 May 2008 12:00:00 GMT

方法を知りたそうな人がいるようなので自己満足で説明します。

【はてなスター】
ほとんどスクリプトをコピペするだけなので簡単。
１、記事名見出し部分のタグを確認しておく。（h2かh3）
２、はてなスターのページにいき、マイページ→Blog'sと辿る。
３、一番下の「外部のブログサイトを登録する」にブログのURLを入力して送信。
４、HTMLが出てくるのでこれに以下の記述を書き足してニュース欄に貼る。（h2のところは１で調べたタグに置き換える）
Hatena.Star.EntryLoader.headerTagAndClassName = ['h2', null];
５、ブログのインデックスにアクセスして適当なエントリにスターを追加する。

【はてなブックマーク】
若干面倒なので、設置関数を作っておきました。
１．記事名見出し部分のタグを確認しておく。（h2かh3）
２、[B] からアイコンをダウンロードして設置しておく。
３、prototype.jsをダウンロードして設置しておく。
４、設置関数をダウンロードして設置しておく。
５、ニュース欄に以下の記述を追加する。
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" src="layHatenaBookmark.js"></script>
<script type="text/javascript">
Event.observe(window, 'load', function() { layHatenaBookmark('h2', null, 'b_entry.gif'); }, false);
</script>
（同じように置き換えてください）

ｳﾏｰ。

追記：はてブ→はてスタの順で置かないとうまく動かないみたいです。

7-Zipを.NETアプリケーションから呼び出すと便利

Hirotow◆EXPRSXEAm6 — Sun, 20 Apr 2008 19:24:00 GMT

.NETなアプリケーションで圧縮ファイルを圧縮、解凍する方法といえば、

SharpZipLibを使う
J#のZipFileクラスを使う
統合アーカイバDLLをP/Invokeして使う

などの方法がありますが、どれも面倒だったり妙なバグがあって使いにくいです。

そこでお勧めしたいのが、7Zipの実行ファイルを呼び出す方法です。
7Zipはオープンソース（LGPL）で配布されているアーカイバで、独自の7Z形式のみならず、
Zip形式、GZip形式、BZip2形式の圧縮解凍やRar形式などの解凍にも対応しており、
アプリケーションに組み込んで使う分には十分な性能を持っています。
またライセンスもLGPLなので、EXEやDLLそのままでの再頒布にはソースコード公開などのペナルティがありません。

※間違っていたら訂正をお願いします。
※ただし7Zipそのものを改造した部分についてはGPLと同等の制限があります。

使い方（設置）

7-Zipの公式サイトから、ダウンロードのメニューを選択し、「7-Zip Command Line Version」と書かれているファイルをダウンロードし、解凍します。
プロジェクトに適当な名前のフォルダ（Exe、7Zipなど）を追加して解凍されたファイルをそこにコピーします。
コピーされたファイルを選択して、プロパティの「出力フォルダにコピー」の項目を「新しければコピー」にします。

使い方（呼び出し）

string sevenZipPath = Path.Combine(Application.StartupPath, @"Exe\7za.exe");
//Extract
Process.Start(sevenZipPath, string.Format(@"x -o""{0}"" ""{1}""", outDirPath, archiveFilePath).WaitForExit();
//Compress(Add to archive)
Process.Start(sevenZipPath, string.Format(@"a -tzip ""{0}"" ""{1}""", archiveFilePath, directoryPath).WaitForExit();

パラメータをいじくると一致する（しない）ファイルやフォルダのみ圧縮（解凍）などある程度融通を利かせられます。
詳しくはヘルプファイルを見てください。

【ソフトウェア】エクスプローラにタブ機能+αを付加する「QTTabBar」

Hirotow◆EXPRSXEAm6 — Sun, 02 Mar 2008 10:07:00 GMT

Windowsのエクスプローラは、フォルダごとにウィンドウが開くため、大量のフォルダを同時に開くとウィンドウだらけになり扱いが面倒です。
だからといって、専用ファイラを導入するのは見た目や安定性で躊躇われるものです。

そこで、シェル拡張としてエクスプローラにタブ機能を付加するソフトウェアが、「QTTabBar」です。
名前にQTとありますが、AppleともTrolltechとも関係ありません。
また、タブ機能のほかにも、多機能ツールチップ、アプリケーションランチャ、履歴、フルパスやハッシュのコピー、インクリメント検索、ツールバーの背景変更などの機能があり、またプラグインを追加することでさらに機能追加できます。

インストール方法

.NET Framework 2.0以上が必要なので、入れていない奇特な人はまずインストールしてください。
次に、公式サイトの「ダウンロード」→「version 1.2.2.1」のリンクからアーカイブをダウンロードし解凍します。
解凍したら、フォルダ内にある「QTTabbar.exe」を起動し、指示に従ってインストールします。
また、「Install_NativeImages.bat」も実行しておくと比較的高速に起動できます。
インストールが完了したらコンピュータを再起動するか再ログオンします。
再起動したら、適当なフォルダを開き、「標準のボタン」を隠し、「QTTabBar」と「QTTabBar標準のボタン」を表示します。表示後は、適当な順に並べてください。

設定方法

「QTTabBar標準のボタン」ツールバーのボタンの上を右クリックすると「カスタマイズ」、何もないところを右クリックすると「オプション」の画面を表示できます。
「カスタマイズ」画面でツールバーのボタンを取捨選択後、「オプション」画面を表示してください。
おすすめの設定は、「ウィンドウ」→「新規ウィンドウをタブとして取り込む」、「その他」→「詳細表示でグリッドラインを表示」、「詳細表示で交互に色を変える」、「ファイルのリネーム時拡張子を除外して選択」を解除、です。
また、「グループ」、「アプリケーション」タブでランチャの設定ができます。
引数の変数には引用符が含まれているような感じなので、素で書いてください。
たとえばカレントフォルダか選択されているフォルダでコマンドプロンプトを開きたいときには、

C:\Windows\System32\cmd.exe /k cd %cd%

とし、カレントディレクトリにも%cd%を設定します。

スクリーンショット

使い慣れたエディタでHTML編集できる「It's All Text」

Hirotow◆EXPRSXEAm6 — Fri, 08 Feb 2008 16:36:00 GMT

ブログ更新を楽にするシリーズ第4回目。

1回目：Firefoxからの投稿が格段に楽になる「Xinha Here」
2回目：画像アップロードツールを製作してみた
3回目：画像アップローダを改造してみた。

今回は、ExpressionWebとかDreamWeaverとかでブログの記事を投稿したい人向けのFirefoxプラグインを紹介します。

It's All Text - いつものエディタでテキストエリアを編集できるFirefoxプラグイン。

これを使うと使い慣れているエディタでブログの記事を編集できます。
あらかじめ設定(テキストエリアを選択し右下の青いのを右クリック→「Preference」を選択)からエディタの実行ファイルを指定しておき、
同じようにして「Edit as '.html'」を選択するといつものエディタで編集できます。

但し、整形式でしか扱えないエディタとは相性が悪いので注意が必要です。

Firefoxからの投稿が格段に楽になる「Xinha Here」

Hirotow◆EXPRSXEAm6 — Sun, 03 Feb 2008 10:35:00 GMT

わんくまの火狐率は低そうな気がしてるのですが、ブログ更新を楽にできないかとあれこれ探していたところ、良さげなのが見つかったので紹介しておきます。

ページの下部に本格的なHTMLエディタを表示してくれるFirefoxプラグイン「Xinha Here!」
まさにIEでしかHTMLエディタ機能が使えない.Textのためにあるかのようなプラグインです。

インストール後、Post Bodyの欄を右クリックして「Xinha Here! を開く」を選択するとHTMLエディタが表示され、右下の「OK」または「適用」を押すと保存されます。
画像の自動うぷとか凝った機能はありませんが、PとかBRとか打たないでいいので結構快適です。