Web（クライアント）

非ブラウザ型ニコニコ動画ダウンローダ「ニコニコ動画ダウンロードウィザード」完成。

Hirotow（特急きりしま16号） — Mon, 11 Aug 2008 10:25:00 GMT

本ソフトウェアのページをCraftive Wikiに移動しました。
以降は、ニコニコ動画ダウンロードブックマークレット (Craftive Wiki)からダウンロードして頂きますようお願い致します。

前々回のエントリ「Tridentを使わないニコニコ動画専用ブラウザを試作」のニコニコ動画ダウンローダが一応完成しました。

基本的に（APIが情けないので）Webスクレイピングを使って最低限のファイルだけ取得するようにしています。
また、25本くらい連続でダウンロードすると規制を食らうので、ダウンロードごとに1秒と20本ごとに30秒のウェイトを掛けるようにして、安定してダウンロードできるようにしてあります。
これにより、大量のファイルでもほぼ規制されずに落とせます。

前回のスクリーンショットはSDIでしたが、おそらくウィザードにするのがいちばん使いやすそうだと思ったのでそうしました。
ウィザードの作り方はhttp://msdn.microsoft.com/ja-jp/library/aa972123.aspxを参考にしました。嵌ったのは、PageFunctionのKeepAliveをtrueにしていなかったためにNavigationService.GoBack()で既定のパブリックコンストラクタがないと起こられる現象に悩まされたことと、WebResponseのレスポンスを取得しない場合のCloseを知らなかったあたりです。

というわけで、かなり便利なソフトウェアだと思うので、ぜひ使ってみてください。

なお、動作にはWindowsXP以降と.NET Framework 3.5が必要です。

2009-01-12追記
多忙や体力的な問題で秋・冬・ββに対応できていなかったのを修正しました。
また、タグ検索で1ページ目のダウンロードをしていないという重大なバグが見つかったのでこれも修正。
機能追加はあと半年ぐらい待つか私にソースをもらって自分でやってください。

ダウンロード：NicoWizardSetup_20090112A.msi

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

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に関しては以下のリンク集を参考にしてください。

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

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

カラムレイアウトの方法

Hirotow◆EXPRSXEAm6 — Wed, 18 Jun 2008 13:29:00 GMT

HTMLでカラムレイアウト（段組）を実現する方法には、大まかに分けて

table
float
position:absolute

の3種類の方法があります。

標準として採用されている環境としては、

ホームページビルダー、Wordなど
DreamWeaver、Wikipediaなど
わんくまブログ、など

があり、もちろんそれぞれの方法に利点と欠点があります、

利点

ブラウザの差違に関わらずほぼ正しく表示できる
微調整が簡単
全カラムの高さが同じ
標準仕様との合致率が高い
ソースが綺麗
直感的に配置できる
HTMLでの位置がレイアウトに影響されない
IEのmargin2倍バグに影響されない

欠点

全体を読み込むまでレンダリングされない
ソースが凶悪に汚い
大胆な調整が難しい
ブラウザのバグで落ちることがある
本文内でclearをした場合に落下する
marginが足りなくても落下する
HTMLでの位置に制約がある
難しい。
ボックスの干渉が起こりやすい
CSSが若干汚い
フッターを全体の下に配置できない

結論

tableレイアウトは論外
見た目は美しいがソースが汚いため時代後れなイメージを受ける
floatかabsoluteかですが、floatを使いこなせる人はそっちを使うべきでしょう。
しかしながら、floatレイアウトは一朝一夕でマスターできるほど簡単な物ではありませんし、ブラウザの相違を吸収するのにも手間がかかります。
よって、CSSに不慣れな人や時間の無いときはabsoluteを使用する方が賢明です。

IEのバグが倒せ<s>ない</s>た

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

前にも書いたネタですが、静的サイトで使用しているSpryMenuBarのサブメニューの上に本文のテキストが被さるという仕様致命的な問題がありました。

で、CSSを色々弄って、弄って、0.5人月くらい弄ってやっと答えがわかりました。

本文領域(この場合div.content)のpositionをrelativeにしているとその内部要素のz-indexが正しく設定されない。

要するに、div.contentセレクタからposition:relative;を消したら直りました。
ﾔﾀ━━━━━━ヽ(ﾟ∀ﾟ)ﾉ ━━━━━━!!!!

IEのバグというのは非常にやっかいなわりに対策できてもあまりうれしくありません。
まあ環境系のバグ全般にいえることですが。

SpryのMenuBarは気持ち悪い

Hirotow◆EXPRSXEAm6 — Sat, 24 May 2008 13:15:00 GMT

AdobeのSpryというJavaScriptライブラリがあるのだが、このなかのMenuBarのCSSが非常に不気味だ。
不気味とはいってもソースコードから得体の知れないものが浮き上がるとかそんな手の込んだものではなく、レイアウト的に気持ちが悪い。
MenuBarの実体は単なる順不同リストで、li要素をdisplay:boxとしてfloat:leftさせることで幅固定の横並びを実現している。
しかしながら、この方法だと以下の問題が生じる。
・ulの直接の子要素がすべてfloat:leftかposition:absouteで配置されているため、ulの高さが計算できず0pxとして扱われる。
・float:leftがclearされていないため、下に置いた要素がinlineならば改行されず、clearしたboxならばulの本来の領域まで含まれるため内部の配置がずれる。
以下に再現を示す。
背景色yellowのdivのなかに背景色redのul、背景色greenのp、背景色blueのdivがある（嘘は言っていない）。
firebugやIEDTでulの高さが0であることを確認して欲しい。

Clearされないp要素

Clearされるdiv要素

どこに配置されるかわからないコンポーネントでこのような問題が起きるのはかなり痛い。
せめてclearされるbr要素をスクリプトで挿入するくらいの配慮は欲しいものだ。

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

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>
（同じように置き換えてください）

ｳﾏｰ。

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

カウントダウン祭りに乗っかってみる

Hirotow◆EXPRSXEAm6 — Wed, 14 May 2008 20:27:00 GMT

元ネタ：スピーカ各位殿(は不要、と φ(.. ﾒﾓﾒﾓ

なんとなくJavaScriptで組んでみました。
バグあったら教えてください。

http://hcm.wankuma.com/matsuri/timer/countdown.html
かうんとだうん

サイドバーでのHタグ使用の是非

Hirotow◆EXPRSXEAm6 — Sun, 17 Feb 2008 15:20:00 GMT

私はメインのブラウザにFirefoxを使っていて、さらに数種類のエクステンションを入れている。このエクステンションのひとつにDocument Mapという、DOMツリーのうちHタグのみを抜粋して表示するサイドバーがある。このサイドバーはわんくまブログのトップページやソフトウェアのマニュアルページといったページについては結構便利なのだが、各ブログや段組み構造のページではほぼ役に立たない。役に立たない原因は、サイドバー自体に対応するヘッダタグがほとんど設置されていないことと、本文にヘッダタグが使用されていないことにある。これによって、本文のヘッダタグがサイドバーのそれに埋もれてしまい、見えなくなるのである。また、こうしたHTMLは音声ブラウザや携帯端末からの閲覧にも支障が出ることがある間違ったものである。少し極端なまとめになるが

サイドバーはH2程度のヘッダタグで括る。
本文でもヘッダタグを積極的にしようする。

ことで、より論理的で閲覧しやすいHTMLになるのでこれを実践すべきだとおもう。

ページ内リンクって

Hirotow◆EXPRSXEAm6 — Thu, 14 Feb 2008 20:51:00 GMT

ページ内リンク、あの<a href="#top">上へ</a>とかするやつです。
あれって<a name="top"></a>とか<a id="top"></a>じゃなくて、<div id="top"></div>でもリンクできるんですね。
今まで全く気がつきませんでした。
これつかうとサブタイトル欄（実はHTMLが書けます）やニュース欄に携帯端末用のスキップリンクを置けます。
スキンによって違いますが、<a href="#main">本文へ移動</a>のようにしておけばリンクとして機能するようです。

投稿カレンダーの宣伝

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

同盟員が増えたみたいなんで投稿カレンダースクリプトの宣伝しときます。
Lux以外のスキンを使っているならぜひ貼っつけてください。

投稿カレンダースクリプトはJavaScriptで動いていますので、ニュース欄に貼りつけるだけで動きます。
その代わりJavsScript非対応な環境（携帯変換とか）からは見えません。
カレンダーは以下のようにして貼り付けます。

ニュース欄(スキンによって若干改造方法が異なります)

<h3>投稿カレンダー</h3>
<script language="javascript" src="http://hcm.wankuma.com/js/jsr_class.js"></script>
<script language="javascript" src="http://hcm.wankuma.com/js/wbajaxcalender2.js"></script>
<div id="calender">
    <script language="JavaScript">
    
    </script>
</div>

CSS(必要に応じて変更してください)

div#calender
{
    font-family: 'MS Gothic';
}
div#calender table
{
    width: 100%;
}
/*投稿のない日*/
div#calender td, div#calender th
{
    width: 7px;
    text-align: center;
    border: outset 1px;
    background: #FFFFFF;
}
/*ヘッダと投稿のある日*/
div#calender td a, div#calender th span
{
    color: black;
    display: block;
    width: 100%;
    height: 100%;
    background: #EEE383;
}
div#calender td a:hover
{
    background: #DED373;
    text-decoration: none;
}
div#calender td a.calender_href
{
    color: #0000FF;
}