わんくま同盟

今日は福岡勉強会#2です。

Hirotow◆EXPRSXEAm6 — Sat, 16 Aug 2008 06:37:00 GMT

というわけで、現在鹿児島中央駅で無線LANしつつ充電しつつ新幹線を待ってるところです。

生憎、福岡というか九州西部は天気が悪いようです。
傘持ってきてないorz

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

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

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

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

実はとりこびとさんとかJZ5さんとかに対抗意識があったりします

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

デザイン更新記事を書いてもみんなが見に来てくれるわけではないので、スクリーンショットも貼ってみました。

ブログデザインを更新しました。

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

いったい何度目なんだろうと思うくらいサイトデザインを頻繁に更新するHirotowですが、またデザイン更新を行いました

今回は、HTMLやCSSの文法を解説しているあるサイト（右上に羅針盤のようなマークがある灰に黒の配色のサイト）をイメージして作りました。
本文の幅を狭めてヘッディングだけ左につきだしたデザインがクールだと思います。
また、意図的にごちゃついたデザインにしていますが、意図したよりすっきりしてしまいました。

限りなく黒に近い灰地（#333）に白(#FFF)の配色にしたため、本文が見辛くなっている箇所があると思いますが、見つけたら※欄で指摘してください。
よろしくお願いします。

ちなみにベースのスキンはmarvin2で、サイドバーが絶対配置で扱いやすいこととHTMLが比較的綺麗なことからこれを選択しました。
サイドバーを右に移すのはdiv#mainの左右marginとleftmenuのleft、rightを弄くるだけなので結構簡単です（；^ω^）
また、配置換えスクリプトは右上の広告とフィードリーダのみにして若干軽量化を図りました。
何故要素の移動はあんなに負荷が高いのか不思議ですが、実際問題としてFx3ですら2秒越えするほど重かったので乱用を控えました。

わんくまメール受信我流チュートリアル

Hirotow◆EXPRSXEAm6 — Mon, 02 Jun 2008 12:15:00 GMT

新メンバーにわんくまメールの受信ができてない方がいらっしゃるようなので、こうすれば確実に受信できるよ☆彡というチュートリアルを書こうかと（←なぜか一発変換できなかった）思います。

では、Ready Steady GO!!!

STEP1　Gmailのアカウントを作成しよう

このチュートリアルでは、Gmailを経由することで環境に関わりなくメールを受信可能にします。
というわけで、まずはhttp://gmail.com/から、Gmailのアカウントを作成してください。

STEP2　外部受信の設定画面を開こう

アカウントが開設できたら、Gmailにログインしてください。
受信トレイに移動したら、右上の「設定」リンク→「アカウント」タブとたどります。
真ん中より少し下のあたりに「別のアカウントからメールを受信」というメニューがあるので、その右の「別のメールアカウントを追加」リンクををクリックします。

STEP3　設定画面その1

画面が開いたら、「メールアドレス」の欄に、自分のわんくまメールのアドレスを入力して「次のステップ」ボタンをクリックします。

STEP4　設定画面その2

次の画面では、基本的な設定は入力済みなので、「パスワード」の入力と、オプションで「受信したメッセージにラベルを付ける」にチェックを入れ、「アカウントの追加」ボタンをクリックします。

STEP5　新着メールを確認

アカウントが追加できたら、「メールを今すぐ確認する」のリンクをクリックしてメールの受信を開始し、受信トレイで確認してください。

STEP6　メーラーで読めるようにする

右上の「設定」リンク→「メール転送と POP/IMAP 設定」タブとたどります。
「POP ダウンロード」または「IMAP アクセス」のどちらか好きな方を設定し、Gmailのチュートリアルに従ってメーラーを設定します。
職場でも確認したい人はIMAPにしておくといいです。

ちなみに

新規メンバーだとアクセス解析メールが届かないことが過去有りましたので設定済みの筈なのにあれって人はそちらも疑ってみてください。
受信テストの方法としては自分のブログのコメント欄に何か書いてみるのが良いです。

ホスト名末尾にドットを付けるとわんくまトップページに飛ばされる件について

Hirotow◆EXPRSXEAm6 — Sun, 25 May 2008 06:31:00 GMT

元記事：静的サイトの更新を行いました。

こちらの記事で指摘されたのですが、http://hcm.wankuma.com./のようにホスト名末尾にドットがついた形式だとhttp://www.wankuma.com/のページに飛ばされるみたいですね。

私は管理人ではないので詳しい理由はわかりませんが、ドットがついていると振り分けに認識されないのが原因のようですね。

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

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 — Thu, 15 May 2008 13:32:00 GMT

今度のは円弧じゃないタイプです。
ちょっと前に2chで依頼されて作ったものです。

http://hcm.wankuma.com/data/CountDown.zip
プロジェクト

http://hcm.wankuma.com/data/CountDown_1_0_0_0_20080516183931.zip
実行ファイルのみ

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

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

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

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

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

誤謬祭りに乗っかってみる

Hirotow◆EXPRSXEAm6 — Wed, 16 Apr 2008 16:13:00 GMT

タイトルどおり久々に祭りに乗っかってみる。

最初に言っておくと私は法規至上主義の人間なので、「違法でなければ脱法でも何でも白」という思考回路をしている。
私自身ファイル共有ソフトも使うし（もちろんアップロードフォルダはオープンソースや自作物のみ）、割れ物も使う（これは若干まずいけど）権利者サイドからすれば面白くない人間だ。
著作権云々に関しては、一定額の文化税を徴収して、著作権法での権利はその枠内で保護し、それ以外のお金は著作者と使用者が直接やり取りするようにするべきだと考えている。
つまりはデータそのものは税金を払っていれば使い放題で、DVDとかの物質的なものは著作者から直接購入することで（電◎とかテレビ局の）中間マージンを切り捨てるようにするわけだ。

閑話休題、誤謬の話に戻そう。
先のエントリでハッカーの誤謬の話が出ていたが、「ハッカー」＝「プログラミングのうまい人」というのも実は誤謬だ。
この手の意味を持つ単語は「ハッカー」のほかに「ウィザード」や「ギーク」など数種類あるが、
ハッカーとは特に一匹狼で手間を惜しむタイプを指す単語だ。

でもってP2Pについて。
考え方については上記のとおりだが、
ファイル共有ソフトの利用者の大半は「P2P」＝「ファイル共有ソフト」という誤謬はしていないはずだ。
理由としては、
・この誤謬をしていた初期の解説サイトがほとんど閉鎖されたため。
・Googleなどでの検索精度を上げるため。
などがあげられる。
よってこの誤謬をしているのはマスコミとそれ以外の情報源を持たない一般人のみのはずであり、
そもそも技術者の声の届かないところにいる。
よって、技術者がいくら声を上げてもこの誤謬は治らないと思う。

#日本語でおｋな文になってしまい申し訳ありません。