Saturday, December 29, 2007

6 + 7 > 13 という考え方

see also : MORI LOG ACADEMY: 納得がいかない足し算

桁が増えることを何故難しく感じるのだろうか。11や12も、8や9と同じく、1つの数字なのに。ただ、表記が2文字になっているだけのことである。数字を表記する方法の問題なのに、何故計算がややこしくなる(と感じる)のだろうか。…(中略)
 さて、5+5=10は、気持ち良く覚えられる。また、5+6=11もその恩恵によりまずまずだ。6+6=12も手が届く範囲というか、まだまだ人に優しい。ところが、6+7=13がいけない。一気に難しくなる。これが、桁を越える足し算における最初の難関といえるだろう。
MORI LOG ACADEMY より転載


 これを読んだとき,ふと懐かしさを覚えた. 小学一年生のときを思い出した. 記憶が掘り起こされたといってもいいかも.
 これと同じ疑問に陥ったことがある. (まあ,一方的な共感でしかないのですけど)

 小学生のときの数字の認識としては(今でもそうかもだけど),1~10 を3分類していた.
つまり,


 1 ~ 3 ≒ 1  (小さい)
 4 ~ 6 ≒ 5  (中くらい)
 7 ~ 10 ≒ 10 (大きい)


と,頭の中で変換して数字の大小を理解していた.

とすると,命題の式<6 + 7 = 13>は,脳内ではこう変換される.


 約 5 + 約 10 = 約 10


と.
 すると,ここで疑問が生まれる. 約 5 と約 10 を合わせてなんで,約 10 なるんだ?

 『6』も『7』も中くらいには大きい値である. 瞬間的に直感として,2数を足すとより大きな値になりそうだと錯覚してしまう.
 しかし,導き出される『13』という答えでは数の印象が優先して,6 + 7 よりも小さい数字だと一瞬認識してしまう(『1』も『3』も小さい数であるため). 一度感覚で認識した情報を計算で訂正(or 否定)する作業を施すこととなり,違和感が発生するのだろう.

# うーん,微妙に解には届いてないような気がしますが,勝手に自問自答しました.

 多分,9 や 8 では,-2, -1 をした方が速いということに気付く.
 つまり,7 だけが宙ぶらりんなのだ.

Saturday, December 01, 2007

テーブルのセルをハイライトするCSS +α

更新 at 2007 12 03
 サンプル2,3において IE6 でテーブルが崩れていたものを修正.
CSS コードの修正はありません.



マウスオーバしたテーブルの行・セルをハイライト表示

 CSS のみで,マウスオーバしたセルのスタイルを変更する方法を紹介したいと思います.

※ただし,IE6には対応していません.
※Firefox 1.5, 2.0 で動作確認しております. IE7, Opera, Safari3.0(Win版) で動作確認しました.

HTML コード:
<table>
<thead> <tr><th> aaa </th><th> bbb </th><th> ccc </th><th> ddd </th></tr> </thead>
<tbody>
<tr><td> a1 </td><td> b1 </td><td> c1 </td><td> d1 </td></tr>
<tr><td> a2 </td><td> b2 </td><td> c2 </td><td> d2 </td></tr>
<tr><td> a3 </td><td> b3 </td><td> c3 </td><td> d3 </td></tr>
<tr><td> a4 </td><td> b4 </td><td> c4 </td><td> d4 </td></tr>
</tbody>
</table>

元となるHTMLソースコードは上記のような一般的なもの. もとソースに手を加える必要はございません.


CSS コード:
/*  テーブルのスタイル  */

table, table * {
border-collapse: collapse;
border: 1px solid #ddd; /* テーブルのボーダの色 */
}
th, td {
width: 3em;
}
thead th {
background: #69d; /* 第一行目(項目名)のセルの色 */
}
th:first-child {
background: #88d; /* 左上のセルの色 */
}

td:first-child {
background: #ccc; /* 一列目のセルの色 */
text-align: center;
}

tfoot td {
background: #6d9;
}
tfoot td:first-child {
background: #8d8;
text-align: center;
}

/* マウスオーバしたセルのスタイル */

tbody tr:hover td {
background: #dff; /* 列のハイライト色 */
}
tbody tr:hover td:first-child {
background: #cdf; /* 第一行目のハイライト色 */
}

tbody tr:hover td:hover {
background: #acf; /* セルのハイライト色 */
}
 上部はテーブル全体のスタイル指定,下部がハイライト部分のセル・行のスタイル指定になります.
色味等は好みで変えましょう(青字部分).


以下が実際にスタイルを適用したテーブルのサンプルになります.

Table サンプル 1 マウスオーバ・ハイライト
aaabbbcccddd
a1 b1 c1 d1
a2 b2 c2 d2
a3 b3 c3 d3
a4 b4 c4 d4


縦の列(カラム)へのハイライトには対応していません.
なんとかしたい・・・.


テーブルの内容部分のみをスクロールする

 +αの部分.
 テーブルが巨大になってしまった場合,第一列(ヘッド:項目名部分)を固定して,ボディ部分のみをスクロールさせる方法がある.
それを,HTML には全く手を加えず,CSS のみで表現する手法を提案.

使用する HTML コードは上記と同一.
特別なカスタマイズはいりません.
※ こちらは Firefox ブラウザにしか対応していません.

CSS コード:
tbody {
height: 200px;
overflow: auto;
}

tbody タグに高さを指定(例では200px)して,はみ出る部分はスクロールするようにする.

Table サンプル 2 スクロール/バグあり
aaabbbcccddd
aabbccdd
a1 b1 c1 d1
a2 b2 c2 d2
a3 b3 c3 d3
a4 b4 c4 d4
a1 b1 c1 d1
a2 b2 c2 d2
a3 b3 c3 d3
a4 b4 c4 d4
  ※Firefox で見てみよう!

フッタも付けるとこのような感じ.


テーブルの内容部分のみをスクロールする 改良

 上記のコードの場合,table の高さの解釈により,無駄な枠線(ボーダ)が表示され,見苦しいものとなる.
この現象を回避する為に,CSS を一部書き換える.

CSS コード:
table {
background: #ddd;
border-spacing: 1px;
}
th, td {
width: 3em;
background: #fff;
}

border-collapse や border の指定は消します. 枠をボーダではなくて,セル間の空白で表現.
以下のようになります.

Table サンプル 3 スクロール/バグ修正
aaabbbcccddd
aabbccdd
a1 b1 c1 d1
a2 b2 c2 d2
a3 b3 c3 d3
a4 b4 c4 d4
a1 b1 c1 d1
a2 b2 c2 d2
a3 b3 c3 d3
a4 b4 c4 d4
  ※Firefox で見てみよう!

横スクロールバーが出てきてしまうのは・・・見逃してください.

    ref.
  • 参考:web creators 2008年1月号 目次»



--
12月になりました. やりたい事が増えてきた.

Friday, October 26, 2007

Firefox カスタマイズ3種(自分用) with Add-ons

 職場では基本 IE6 なのですが,やはり Firefox ブラウザを使いたいと思いまして,勝手に入れてます.
インストールするのは不味いので FirefoxPortable の方をフォルダに解凍してこっそりと.
しかし,Firefox では会社のネットワークが繋がらないらしい.
 User Agent Switcher を使って偽造しても駄目でした. どんなフィルタかけてるのよ.

 仕方ないので,IE Tab を入れて,気分だけでも Firefox. IE 表示するフィルタには"http://*","https://*"を追加. タブブラウジングになるだけでもありがたい.

 しかしながら,デフォルトでの設定でいろいろ使い辛いところがあったので,設定変更してみました.
その備忘録としてここに書きます. 酷く限定的な情報ということは重々承知しています.

Firefox search-bar 検索時にタブで開くカスタマイズ


※注意 For Fx 2.0.*
  1. Address-bar に"about:config"<Enter>と入力.
  2. browser.search.openintab の項目を探す.
  3. default で値が false になっていると思うので,ダブルクリックして true へ変更.
  4. おわり

IE Tab をカスタマイズ


IE Tab アドオンにおいて,リンクスポットを『新しいウィンドウで開く』としたとき,タブをバックグラウンドで開くようにカスタマイズ.
  1. Address-bar に"about:config"<Enter>と入力.
  2. ietab.focustab の項目を探す.
  3. default で値が true になっていると思うので,ダブルクリックして false へ変更.
  4. おわり


ナビゲーションツールバーをスマートに


ディスプレイは17型でそれ程小さい訳ではないのですけど,ツールバーが丈取りすぎで圧迫感があるので下記のスタイルを適用させてボタン周りを省スペース化.
/* ナビバーをスマートにする */
toolbox toolbar#nav-bar {
}
toolbox toolbar .toolbarbutton-1,
toolbox toolbar .toolbarbutton-menubutton-button,
toolbox toolbar .toolbarbutton-menubutton-dropmarker {
padding: 0 1px !important;
}
以上をユーザスタイルシート Firefox's Application Data Folder/profile/chrome/userChrome.css へ追記する.

これと併せて,ブックマークツールバーのラベルも消して更にスマートに.

スタイル変更前 ※ スクリーンショットは後日挿入します.
スタイル変更後 ※ スクリーンショットは後日挿入します.

■ about:config で設定書き換えってのは今まで余りやってこなかったのですが,改めて試してみると通常の設定画面ではできない設定も簡単にできるので便利だな~と関心してしまいました.
 変数名(?)でも十分意味は理解できるしね.
■ 検索バーで検索したあと(Enterキーを押したあと)に,バーの中を空にする(キーワードを消す)方法を知っているヒトいませんか?
 いつまでも検索ワードが残っているのは格好悪い.

参照リンク - Firefox Add-on 関係

Thursday, October 25, 2007

Firefox の LiveBookmark(フィード)を取得する方法

Firefox の LiveBookmarkを取得する XUL スクリプト.
Feed Sidebar という拡張機能からの紛うこと無き転載です.


ヘッダ内で,
<script type="application/x-javascript" src="chrome://browser/content/bookmarks/bookmarks.js"></script>
をインクルードして,以下のコードを書いて下さい.
// Live Bookmark Class
function CLiveBookmark () {
return this;
}
CLiveBookmark.prototype = {
folders : [],
livemarks : [],
is_init : false,
init : function () {
if (!RDF) { initServices (); }
if (!BMSVC) { initBMService (); }
this.livemarks = [];
this.is_init = true;
},
collect : function () {
if (!this.is_init) { this.init (); }

var root = RDF.GetResource ("NC:BookmarksRoot");
var feedURLArc = RDF.GetResource ("http://home.netscape.com/NC-rdf#FeedURL");
var urlArc = RDF.GetResource ("http://home.netscape.com/NC-rdf#URL");
var nameArc = RDF.GetResource ("http://home.netscape.com/NC-rdf#Name");

var folders = [ root ];

while (folders.length > 0) {
RDFC.Init(BMDS, folders.shift ());

var elements = RDFC.GetElements ();

while(elements.hasMoreElements ()) {
var element = elements.getNext ();
element.QueryInterface (Components.interfaces.nsIRDFResource);

var type = BookmarksUtils.resolveType (element);

if ((type == "Folder") || (type == "PersonalToolbarFolder")){
folders.push (element);
} else if (type == 'Livemark') {
var res = RDF.GetResource (element.Value);
var target = BMDS.GetTarget (res, feedURLArc, true);

if (target) {
var feedURL = target.QueryInterface (kRDFLITIID).Value;

var target = BMDS.GetTarget (res, urlArc, true);

if (target) {
var siteURL = target.QueryInterface (kRDFLITIID).Value;
} else {
var siteURL = 'about:blank';
}
var target = BMDS.GetTarget (res, nameArc, true);
if (target) {
var feedName = target.QueryInterface (kRDFLITIID).Value;
} else {
var feedName = feedURL;
}
this.livemarks.push ({ "label" : feedName, "url" : feedURL, "link" : siteURL });
}
}
}
}
},
getAll : function () {
// 初期化して再取得
this.init ();
this.collect ();
return this.livemarks;
}
};

好きなところで new して get する.
var live = new CLiveBookmark ();
var list = live.getAll ();
for (var i in list) {
alert (list[i].label + " + " + list[i].url + " + " + list[i].link);
}

http://uswpig.bay.livefilestore.com/y1pt79743Fzf-GT0UHH47HCDbOAJHW0rGD_FXf5L5Uz5wNgrrRFjRHNpPvAlGKpk2bkhyh0sDktjyVrEtBi2wsWqg/20071024livealert.png
ほぼ転載ですので,間違った情報や冗長な部分がある場合は指摘してください.
# というか教えて下さい!

一年前はこの手の情報は検索かければ直ぐ出てきたのですが,今は『ブックマーク』という単語が入ると,『ソーシャルブックマーク』や『はてブ』だらけ.
近年の SEO 対策の弊害を感じました. 通常の検索において誰かのブックマークページなんて,はっきり言ってインデックスされなくていいと思わない?



どうも,お久しぶりです.
更新再開していこうと思います.

自分の場合,ブログを更新するのにはパワーも時間も使うので,なるべく時間を掛けず記事をPost できるように訓練せねば. 従って,ある程度はこうした散発的な Post が続くと思います.
いや,ちゃんと気合入れて更新しますよ.

Friday, June 22, 2007

最近の色々残念な事; about Google APIs & ニコニコブックマーク

最近(ちょっと前),Google Spreadsheets を Web アプリのデータベースとして利用できないかと考えてまして,API について調べているのですけど.

残念な事 for Google SpreadSheets API


 Spreadsheets (に限らず Google API で)はフィードの形式が JSON でも配信しているので,セルやリストの値の取得は本当に2,3行で書けるのですけど,セルへの値の書き込みが PUT リクエストで直接フィードの実体を渡さないとできないもよう.
 つまり,PHP, Java などサーバサイドプログラムを駆使しないと Spreadsheets の編集は自由にできない,ということ.
 XMLHttpRequest のクロスドメインの問題から Javascript だけでシートを制御するのは結構無理そう.
 まあ,セキュリティのことを考えれば当然?
 ちょっと残念.

残念な事 for ニコニコブックマーク


 多くのことは開発者ブログのコメントや設置された掲示板で匿名多数の方々が言ってますので,別の切り口から.

 ニコニコブックマーク(略称ニコブ)とは,指定した URL の Web ページの好きなところに皆(現時点ではニコ動アカウント保持者)でコメントを残せるというニワンゴの新たに始めたサービス.
 コメントの閲覧のみ全開放.

 技術的には,Web ページのキャプチャ画像を撮ってきて,画像(ページ)上の絶対座標へコメントを貼り付けるというもの,ということですが・・・
 キャプチャ画像という逃げに出たことが非常にがっかりでした.

 Web ページというものはクライアントのディスプレイ領域がそれぞれ異なるため,ある程度フレキシブルにできている. フレキシブルに作られているページが多数存在する.
 そのため,あらゆる Web ページ上のいたるところにコメントを・・・と思うと,当たり前のことですが,コンテンツの折り返しなどで絶対座標にオブジェクトを置いておくことができない(クライアントの環境によっては見えなく隠れてしまったり,意図しない位置へ表示されたりしてしまう).
 その問題に対して,今まで多くのツールでは明快な回答というものが示されてこなかった.

 ニワンゴでさえもそれに対して,キャプチャ画像という逃げに出たことが,非常にがっかりでした.


 またコンテンツに対するコメントとコンテンツ自身が切り離されてしまっていることが同系統のアプリに当てはまる問題にあるように思う.
# まあ,ソーシャルブックマークとはそういうものとも言えなくもないが.
# でもニコブってブックマークか?



蛇足
  • Firefox Developor's Conf. 2007 Summer

へ参加しました. 興味があったので.

日本では Firefox にいまいちメジャー感がないのがどうしてか分かったような気がした. 以上.

Wednesday, May 30, 2007

|days| Google セミナ第2回へ参加してきました


参加してきましたー.
今の研修先が銀座に比較的近いので,仕事終わりに寄りました.
Ginza Apple Store

まあ,若干1時間のセミナですからはじめから期待していなかったので,内容に関しては正直ふーんという風に聞いていました.
それでもまあ雨の中,大勢のヒトが集まりましたね. 入場開始の更に10分前でも行列が出来てました. 内容的にも技術的な話は余りなかったので女性の参加者も多数でした. やっぱり,皆自分のブログを持っているような方々が集まったようです.

Q&Aで2番目に質問をされた方が結構コアなことを聞いてくれたので,それでやっと場が締まった感じでした. GJ! と心の中で親指立ててました.

一般ユーザ向けというには少しコアなヒト達が集まってしまったのではないかな,と思いました.

--
次回第3回の開催は,2007年6月21日だそうです. 木曜日です. 興味のあるヒトは参加してみては? 無料です.

Friday, May 25, 2007

|mobile| days| 内容のない話ばかり

不定期更新が続き色々棚上げして放りっぱなしですが,駄日記的に書きます.


今日は PM9:52 に寮食を食べて PM11:44 にこの Post を書き始める.
最近は余り頭がアウトプットするモードにない感じです. コーディングなんかも進めてない.

やっていた事といえば,何故 m○xi が Web2.0 的でないのか駄目なのかを考えたり,アイコンのデザインを考えたり,ニ○ニコでスク○イド,プラネ○ス,リ○ァイアスを,You○ube で PV を見漁る日々でした.


さて,ここ数日のニューズでアツイのはモバイル関係でしょうね. DoCoMo 2.0(← なんだコレ)に続き各社もこぞって夏モデルを情報開示してきました. ドコモ以外はオーソドックスなモデルで攻める感じでしょうか.
 そんな中で一番注目なのは矢張り X02HT(ソフトバンク・モバイル). やっと日本でも一般向けにストレート型スマートフォンが出てきてくれました(ソフトバンクですけど).



 使っている姿がカッコいいかどうかは別として,あの愚直なまでに無骨なデザインがナイスですね~
やっぱり,スライド式なんて臭い物に蓋的な考えなんて邪道っスよ.



 それにしても,テレビのある生活は不健康的・・・というか情報過多で非効率的だと思うようになってきた. 今,何も考えずに点けっぱで垂れ流しにしているのだけれど,雑多で不必要な情報が溢れ過ぎているような気がする.
 ユーザの好みや要求を学習して有益な情報のみを自動でピックアップする機能とかもうそろそろできてもいいのではないかな? それとも Web が TV を全て代替えするようになるのかな~?

Friday, May 11, 2007

|PC| idea| JSWS| JavaScript仮想ウィンドウシステムver.0.1.20070503

本日の動向


ネットに繋がりました.

今,もう一年以上前ノートPCを使っているのですが,USB キーボードも入手!
これで膝の上が熱重たくなることもなくなりました.
持つべきものは良き隣人ですな~

前回からの進捗


仮想ウィンドウシステムをちょろちょろ進めました.

Screen Shot: Fx v2.0 ウィンドウシステム

内部動作を変えました. ウィンドウをリサイズ可能に. センタリング配置などの設定をウィンドウ作成時に可能に.








アイデアなどなど


なんとなく,これを作ったきっかけなどについて語ってみたいと思います.
 これを作ったきっかけは映画『交渉人・真下正義』で真下さんが使ってたパソコンの検索システム(OS?)がかなり良く見えたので.

(実際はあんなUIのソフトウェア,OS なんてないよな~)

と思いつつ.

(今の OS のウィンドウシステム,ウィンドウの挙動なんて十年・二十年以上前から代わってないよな~)

と技術の停滞感を感じていました.
 Vista や Web 2.0 と呼ばれる Web アプリなどトレンドとなる UI のデザインなどは日々洗練されてきていますが,ユーザの操作方法・いわゆるユーザ体験には劇的な変化は少ないのではないか,と思い始めるようになりました.

ユーザはアイも変わらずマウスでカーソル操作をしているし,ウィンドウはユーザの操作に対する反応しかしないし.

そこで,何か新しい操作感のするウィンドウシステムを・・・ということで,簡単な試作として JavaScript で基本的な挙動を再現してみました.

ただ,もう JavaScript + HTML の限界を感じているので(主に描画面) Flash, ActionScript, Flex へ移行してみようと思っています. 先ずは勉強ですが.


蛇足・最近のデザイン彼是


Web2.0のデザインの特徴として透過色やグラデーション,曲線(円・カーブ),影がメインとしてありますが,最近では何処もかしこもグラデーションなので,全体としてみた感じがぼやけて目が疲れてしまう. パステル調なども同じく.
自分としては,ツートンカラー,同系色の濃淡二色のコントラストが好きだな,というだけのハナシ.
グラデーションなんかは背景などの目立たないところで一箇所使う程度が良しだと実感した.

Sunday, April 15, 2007

|JS | Web| JavaScript版 仮想ウィンドウシステム

思い立ってウィンドウシステム作ってみました.
JavaScript で.

開発環境は Firefox 1.5.* ~ 2.0.* / WinXP
スタイルは Fx で最低限にしか対応させていないので,IE系では表示が崩れます.

Screen Shot: Fx v2.0 ウィンドウシステム試作



これが,この一週間の成果です・・・.
簡単な複数ウィンドウ操作までしか実装していません.

これからこれでどうする?とか明確な目的はありませんが,まだまだやり切れていないので,これからも実装を続けます.

Windows の一通りの動作は実現できるようにしたい. 簡単なアプリケーションとか.

Sunday, April 08, 2007

|days| 日常

 既に新生活が始まって1週間が経ちました.
 一週間をこんなに長く感じたのは久々(初めて?)かもしれません. 物忘れ激しいので曖昧です.

 今は新人研修中ですね. 研修中は定時(18時前)に帰れるのですが,寮から研修先まで移動が1時間なので,寮に着くころには普通に8時です. 風呂が0時までであり,夕食などもろもろ引くと自由な時間は2時間程度. 夜更かしして4時間と言ったところでしょうか.
 ネット環境も今のところ申し込んでないので,ありません. クリエイティブな活動は今のところ停止中ですね.
 残業のない新人研修中なのに・・・.
 まず,パソコンに触っている時間が格段に減った. このままパソコンなしの生活に慣れてしまったらいかんと危惧している次第であります.

 取り合えず,寮のネットに申し込もうと思います. 一日2時間,ネット活動・コーディングに従事したい.

Thursday, March 29, 2007

|days|祖父の言葉

 4日ほど前から実家に来ています.
 新しい住処(寮)への入寮日が4月1日ですので,しばらく地元に戻り療養しています.

 今日は方々に挨拶回り. お墓参りも行きました.


「若いうちの苦労は苦労じゃない」(亡くなった祖父の口癖だったらしい)

「いつ死ぬかわからない」

「目標を持つ」

もし,人生において二つの選択肢があるなら苦労するほう苦労する方を選びなさい. 家持つのも,結婚するのも,独立するのも,若くて力のあるうちにやれば乗り越えられないものはない.


 人生において,いつ今の生活が分断されるかわからない. そういうことを考えたとき,自分は酷く投げやりになってしまう. 日々目標を持ち,悔いのない一日を過ごすことを考える,そういうことが必要なのかもしれない.

 取り敢えず身近な目標として,週一くらいのペースでブログを書く.
 日々成長できるように,情報配信・世界へのアウトプットを行いたいと思います. 自分を腐らせないために

Wednesday, February 28, 2007

|blog|Utils| 被リンク元を表示する方法,と自己リンクを除外する手法の提案

Blogger の機能のバックリンク(Backlinks)はトラックバック機能のないブログにおいて投稿した記事へのリンク元を参照できる結構機構的にも面白い方法です. スパムにも強い!
しかしながら,新着バックリンクの通知機能というものがありません.

そこで,新着リンクだけでもチェックできるようにする Tips を紹介したいと思います.
必要なのは3つのサービス.

 上記のサービスは全て無料です.(一部ユーザ登録必要)

 基本的な考え方は,
  1. Blog Search で"link:"検索演算子を用いて自分のブログへリンクしているブログ記事を検索する
  2. 検索結果のフィードを取得する
  3. フィードを利用する >>
    • RSS リーダなどに登録する
    • ブログに貼り付ける(Blogger のフィードウィジェットを利用する or Feed2JSを利用する)
  4. リンク元をチェックしてほくそ笑む
です.


具体的な設置方法


ブログの被リンク元を参照するフィードは,以下のように Blog Search 経由で取得します.

http://search.blogger.com/blogsearch_feeds?q=link:your.blog.domain/&hl=ja&scoring=d&ui=blg&ie=utf-8&num=20&output=atom

赤字の部分を自分のブログURL に変えてください.
取り敢えず,RSS リーダ用のために表示件数を20件にしておきます.
緑字はアウトプットするフィードのタイプです. Feed2JS のサービスを利用してブログなどに貼り付ける場合は rss と書き換えてもらうことで文字化けを回避できます.

 Blogger ユーザならば,上記のフィードURL を自分のブログのフィードウィジェットとして貼り付けることができます.
 旧 Blogger ユーザやユーザ以外の方でも,上記の URL を自分が利用している RSS リーダに登録するとか,Feed2JSというサービスを利用する方法でチェック or 貼り付けることができます.


注意: これは,Weblogs.com へ更新Ping を送信しているブログだけが,その更新情報をキャッチされて参照可能になります. 従って,Weblogs.com へ更新 Ping を送信していないブログはチェックされません.
注意2: このリンクリストは JavaScript による動的表示なので,ブログのアクセスアップなどには繋がりません.


発展 ~ 自己リンクを除外


 自己リンクを多用しているブログなどでは,自分が自分のブログの記事を参照する結果ばかり出てきて,他人からのリンクのチェックができない.

 そこで,この被リンクリストから自己リンクを除外する方法を紹介.

 最も簡単な方法として,Feed Rinse を利用してフィードをフィルタリングしたいと思います.

※ Feed Rinse とは..
 登録したフィードに特定のキーワードでフィルタリングを掛ける Web サービス.
このサイトではRSSを特定のタグやキーワード、サイト名でフィルタリングしてくれて、その結果のRSSを返してくれる。
via. メールからRSSへ (Feed Rinse.com) | 100SHIKI.COM

残念ながら,Feed Rinse には記事urlやドメインでのフィルタリングは(現在)できないため,著者名(Author)で分類することとします.


1) まず,アカウントを作ります.
ユーザ登録(E-mailアドレス)が必要ですが,無料で直ぐ作成できるので,スッパリ作ってしまいましょう.

2) アカウントを作って,次の画面に移行できたら,フィードを登録しましょう.
フィードは上記のコードです.

3) 登録したフィードにフィルタ(filter)を作ります.
[Modify filter] ボタン(若しくは [Set up rules])を押して,Author で自分のユーザ名を除くようにフィルタを掛けます.
もし,似たユーザ名のヒトがいる場合は,フィルタを追加してもっと絞り込みましょう.
※ 日本語には対応していないようです. フィード内容が日本語でも構わないけれど,フィルタの条件に日本語は使えないようです.

Channel とかありますが,今は関係ないです.

4) フィルタを作ったら,フィードアイコン(Rinse feed Icon)をクリック. リンク先のアドレスを,RSS リーダや上記にある方法でブログに貼り付け,更新チェックをしましょう.


最後に


 長くなりましたが,以上は『自分でコードを書かない』『お金を掛けない』方法で,Backlinks をチェックする方法がないかなを思いまして,試しながら実現させました.
少し工数が多いですので,フツーにやりたいヒトは,クリボウさんの力を借りましょう

Friday, February 16, 2007

|days| 修論発表

日付変わって今日は修論発表の日です.

どうしてこんなにも緊張感がないのだろう.

いや,緊張感じゃないな. 実感がないんだ. これで大学組織ともお別れなんだ,という実感が.

朝一の発表なので,発表自体よりも寝過ごすことの方が心配です.

前日,ほぼ貫徹ですからね.

残り睡眠時間は6時間といったところか.

じゃあ さようなら.

Saturday, February 03, 2007

|Web| 日本語版Gmail アップデート

今,Gmail にアクセスしてよく見てみたら,インタフェースがプチ進化していた.


 このとき英語版のみのアップデートで11月でした.
 日本語版でも5つの新機能全てが対応しているかは調べてませんが,気付いたのが2月始めで,英語版とは大体2,3ヶ月のズレといったところでしょうか.

 インタフェースは非常にすっきりした感じを受けました. 多分配色とかの問題なんでしょうけど・・・

 携帯の CHTML 版にもアクセスしてみましたが,こちらはログイン画面だけでした(DoCoMo端末).
 クッキーを有効にして下さいってさ.

Monday, January 29, 2007

|Blogger|template| ページタイプによる Widget 操作の注意点

フィードウィジェットは他ブログサービスなどでは見掛けない,特徴的な機能の一つと思います.
【”最新のコメント”を追加する方法】 などを見ても面白い使い方ができそう.

 しかしながら,テンプレ編集(Expand 表示)で Blogger 独自のタグ群を見つめているとき,ウィジェットタグ<b:widget>...</b:widget>内で特異な ID 指定がされていることに気づきます.
 つまり,ブログの動的HTML生成時にウィジェット部分の (x)HTML を吐き出したあと, JavaScript でその ID のコンテンツの書き換えを行っているということでしょうか?


だから何なの・・・?


ウィジェットを記事単独ページで非表示にするために,
<b:includable id='main'>
<b:if cond='data:blog.pageType != "item"'>

 <!-- コンテンツ -->

</b:if>
</b:includable>

とする手法がありますが,これだと<ul/>タグに指定されている ID をページ構成時に消してしまいます.

これは不味い


この ID が削除されたことは,Blogger の方は知りません.従って,単独ページの構成時に Blogger の JavaScript が存在しない ID を参照してしまい JavaScript エラーが発生します.

 他の大部分のウィジェットでは,あまりウィジェットタグ内で ID 指定などされていないようですが,フィードウィジェットに関しては非表示にした場合,ID 参照エラーが起こり,その時点で Script がストップしてしまいます.
従って,記事単独ページにおいて Script がストップしてしまい,同様の JavaScript で実現されるバックリンクが表示されない,というの現象があります.


じゃあ,どうすればいいの


  • 特定のページで非表示にしない
  • 非表示にしたい場合は以下のようにする

    <b:includable id='main'>
    <b:if cond='data:blog.pageType != "item"'>
    <h2><data:title/></h2>
    </b:if>
    <div class='widget-content'>
    <ul expr:id='data:widget.instanceId + "_feedItemListDisplay"'>

    <b:if cond='data:blog.pageType != "item"'>
    <!-- ループ -->
    </b:if>
    </ul>
    <b:include name='quickedit'/>
    </div>
    </b:includable>
    青字: ID 指定の部分. コンテンツのラッパ部分は残す.
    タイトルとアイテムのみ除去



なんか面倒ねー・・・


これは,Blogger のバグだと考えられます. そもそも Blogger ブログは CSS エラーも多い!
Blogger ヘルプのレイアウト用ウィジェット要素タグ欄を見ると,<b:widget/>タグにはページタイプによる表示/非表示を指定する属性が定義されている模様(typePage).
但し,現在実装されていません.(at 2007/01/29.)

恐らく,将来的にはページエレメントの編集画面などで,正式にページの種類による表示非表示の指定ができるようになると思います.
・・・そうなることを待ちましょう.

Friday, January 19, 2007

|Blogger|template| Blogger の Label を TagCloud 化

ようやく旧 Blogger を抜け出すことができました.
そこで,テンプレートも新しくし,心機一転. はじめさせていただきます.

templete by Envy inc.


# 素晴らしいテンプレートをありがとうです.


-- ここからは Blogger バナシ

 果てさて,新 Blogger になって提供されるようになった Label 機能(カテゴリ,タグ)ですが,Blogger には貼り付けたラベルの一覧を表示する方法がリスティングしかありません.

今回はこれを TagCloud 表示化するようにテンプレートカスタマイズしてみました.

Label 一覧を TagCloud 化


これはテンプレートを直接書き換えるので,テンプレートのバックアップを行ってから自己責任でお願いします.

それでは.
  1. Blogger のダッシュボードからテンプレートのHTML編集画面へ移る
  2. ウィジットのテンプレートを Expand 表示にする
  3. widget タグの type='Label' とあるものを探す.
    例: <b:widget id='Label1' locked='false' title='Labels' type='Label'>
    ※ もしなければ,ラベル一覧のエレメントをページに追加していないので,先ずページ要素を追加する
  4. <b:widget ...> ~ </b:widget> まで,タグで囲まれた所を以下のコードに置き換える(コピー&ペースト)

    <b:widget id='Label1' locked='false' title='Labels' type='Label'>
    <b:includable id='main'>
    <b:if cond='data:title'>
    <h2><data:title/></h2>
    </b:if>
    <div class='widget-content'>

    <ul style='font-size:100%; padding:0; text-align:justify;'>
    <b:loop values='data:labels' var='label'>

    <li style='list-style:none; display:inline; margin:0 4px 0 0;'>

    <b:if cond='data:label.count >= 200'>
    &lt;span class='posts-200' style="font-size: 250%;"&gt;

    <b:else/><b:if cond='data:label.count >= 150'>
    &lt;span class='posts-100' style="font-size: 230%;"&gt;

    <b:else/><b:if cond='data:label.count >= 100'>
    &lt;span class='posts-100' style="font-size: 200%;"&gt;

    <b:else/><b:if cond='data:label.count >= 70'>
    &lt;span class='posts-50' style="font-size: 170%;"&gt;

    <b:else/><b:if cond='data:label.count >= 50'>
    &lt;span class='posts-50' style="font-size: 150%;"&gt;

    <b:else/><b:if cond='data:label.count >= 30'>
    &lt;span class='posts-30' style="font-size: 140%;"&gt;

    <b:else/><b:if cond='data:label.count >= 20'>
    &lt;span class='posts-20' style="font-size: 130%;"&gt;

    <b:else/><b:if cond='data:label.count >= 15'>
    &lt;span class='posts-10' 1style="font-size: 120%;"&gt;

    <b:else/><b:if cond='data:label.count >= 10'>
    &lt;span class='posts-10' style="font-size: 110%;"&gt;

    <b:else/><b:if cond='data:label.count >= 8'>
    &lt;span class='posts-1' style="font-size: 100%;"&gt;

    <b:else/><b:if cond='data:label.count >= 5'>
    &lt;span class='posts-1' style="font-size: 85%;"&gt;

    <b:else/><b:if cond='data:label.count >= 3'>
    &lt;span class='posts-1' style="font-size: 75%;"&gt;

    <b:else/><b:if cond='data:label.count > 0'>
    &lt;span class='posts-1' style="font-size: 65%;"&gt;

    <b:else/>
    &lt;span class='posts-0' style="font-size: 50%;"&gt;

    </b:if></b:if>
    </b:if></b:if>
    </b:if></b:if>
    </b:if></b:if>
    </b:if></b:if>
    </b:if></b:if>
    </b:if>


    <b:if cond='data:blog.url == data:label.url'>
    <data:label.name/>

    <b:else/>
    <a expr:href='data:label.url' expr:title='data:label.count + " posts: " + data:label.name'><data:label.name/></a>

    </b:if>

    &lt;/span&gt;

    </li>
    </b:loop>
    </ul>

    <b:include name='quickedit'/>
    </div>
    </b:includable>
    </b:widget>
    少し長くて冗長かもしれませんが,内容自体は非常に単純なので読んで理解するのも難しくはありません.
    if-then ルールが長いですが,自分の好みに合わせて更にカスタマイズしてください.
  5. 保存

で終了となります. 再構築の必要がないので,ブログを更新して表示して見てください.
スクリーンショット: Label を TagCloud 化

今回のミソは &lt;span &gt;


 因みに &lt;span となっているのはタイプミスではありません.

 新 Blogger の if-else タグ文は,その中でもコンテンツがきちんと閉じてなければなりません.
つまり,<タグ> と </閉じタグ> の組が必ず同じ if 文内になくてはなりません.

今回のように,条件文が多かったり細かく表示を変えたかったりしたい場合などでは,とても冗長になり記述量が増えてしまいます.
しかしながら,(現在の Blogger では)上記のように記述することで if 文コンテンツ内の HTML タグを閉じずにまた正式なタグとして適応させることが出来ます.

注意点


 今回の実装方法は,もしかしたら Blogger のバグを利用したものかもしれません. 将来は仕様が変更されるかもしれませんし,実現できなくなるかもしれません.
 また,&lt; でエスケープしたとしても,構築したブログではタグとして認識されるので,閉じタグなどをきちんと自分で文法チェックしてください.
以上のことを留意してテンプレートに組み込んでください.


スタイルを少し変えたい・・・?


 投稿数自体が少なくてタグ全体の文字が小さくて見えない・・・,というときは以下のようにスタイルを指定して文字の大きさを変えてください.
&kt;head> の中の <style> タグで,
<style>
...

.Label .widget-content ul {
font-size: 130%! important;
}
...
<style>
スクリーンショット: 少し文字を大きく表示

他にも,投稿数毎にクラスを割り当てているので,それを利用してより見やすいように調整できます.
例えば,50件以上のものをより強調したい

.Label .posts-50,
.Label .posts-100,
.Label .posts-200 {
font-size: 150%! important;
font-weight: bold;
}

投稿数の少ないものをより小さくしたい

.Label .posts-1 {
font-size: 80%! important;
}

など指定できます. 投稿数が増えると共にかえていきましょう.

その他


その他にも,Label の表示形式を工夫する方法としては以下のエントリもあります. こちらも参考に.


追記 at 2007年02月28日


ul タグのスタイルに text-align: justify; を指定して表示を均等割り付けにしました.

Thursday, January 18, 2007

[Firefox / Extension / Dwin]_ Web世界の片隅で哀を叫ぶ

うゎあーーーん



XUL Apps > Split Browser - outsider reflex

一年以上前からちまちま作っていた Firefox 拡張機能と同じものを作られたー.
しかも,自分のより全然,出来がいい. しかもしかも,こんな大手さんに.

作り出す前に一応ちょこっと調べたのに,そのときは欲しい機能の拡張機能が見当たらなくて,いっちょ作ろうと思ったのになー.
調べてみたら,前ヴァージョンのはもう2003年に公開しているじゃないの. やんなるわ,マッタク


いっそ,開発をストップして要望だけ丸投げしようかな~(ウソ)

使ってみての感想


■ 機能
この拡張機能は Firefox ブラウザの HTML 表示領域を無限に分割していくというものです.
複数の Web ページを見比べたり,別ページをブラウジングしながら別ページで調べものをしたり,・・・ということに使える.

■ 特徴
現在表示しているページ,タブ,リンク先を分割表示可. 分割した先でも普通にブラウジングが行える. 但し,タブ機能はなし.
分割数の制限なし. (メモリの許す限り)思う存分分割できる. もちろん,ディスプレイサイズも広くなくてはあまり意味はないけれども.

■ 不満点
無限に分割できるのが特徴ですけど,どうも・やっぱり無駄げ.
二つか三つ表示までで十分です.
分割した先でもタブブラウジングができて,分割ウィンドウの表示非表示を切り替えられればよし,なのにな.


・・・と,いうかそんなの機能のものを自分が作ってましたです. まだまだ不十分だけど,もうちょっといい感じになったら公開しようかな.
いろいろソースなど見て参考にさせていただきます.


--

※ 2007年初の書き込みが愚痴になってしまってすいません. 今年もこれからもより精進したいと思います.
本年もどうぞよろしくお願いします.

Template Design. 2008 Jyun.