ITコーディネータ 針生徹 の blog
カテゴリ:Technique( 14 )
| ↑Top  
備忘録
Yahoo!メール のインタフェースが変わったようで、Firefox のアドオン keyconfig を使用したショートカットキーが無効になっていた。旧仕様では、html に ID が振ってあったと思うんだが、新仕様はページを動的に生成しているようで、ソースを見てもさっぱり分からん。

で、DOM Inspector というアドオンを使う。検索ボタンを押してから、表示したページの該当箇所をクリックすると ID が見つかるので、javascript の getElementById を使ったブックマークレットを登録しておき、その名前から keyconfig に getShortcutOrURI で取得した URI へ loadURI するショートカットキーを登録すればよい。
[PR]
by Harryblog | 2010-10-05 20:26 | Technique | ↑Top  
勝手に全文配信
音楽をネット配信や iPod で持ち歩いて楽しむようになったのと同様、ウェブのコンテンツも受け手側が自由に楽しみ方を選べるようにした方がいいと思う。エンタメとしてはネタバレにならないように more にしたり、フィードも部分配信にする必要があるのかもしれないが、ワシとしては RSS リーダーで内容をチェックして都合が良い時に読めるように全文配信されている方が嬉しい。

そうは言っても、それぞれ運営者のポリシーによって配信されているのだから、サマリしか来ないのならばこちらから取りにいこう、ってことで、

Yahoo! Pipes で強制全文配信化 - てっく煮ブログ

というのを見掛けたのでやってみた。pipes も知らぬ間に随分機能が増えたんだね。

使用前

上記引用先のサンプルを頂戴してきて、変えたのは Fetch モジュールで読み込む対象を <DIV CLASS=POST_BODY> ~ <DIV CLASS=TAGS> までにしたぐらい。

使用後

まぁ、あそこはエントリ本文よりもコメント欄がメインコンテンツだから、訪問してみないと受け取る情報量は格段に落ちるのだけどね。
[PR]
by HarryBlog | 2008-01-04 13:30 | Technique | ↑Top  
ワシ流
リニューアルしたエキサイトの RSS 一覧が見難くってしょうがない。RSS リーダーを使えばいいって話で、実際使ってはいるのだが、ネタ探し的なエキサイト外も登録しているし、帰宅後にゆっくり回るとき用にフォルダを開くと既読となって表示されないように設定してあるので、お気に入りだけを仕事中とかに更新チェックするにはエキサイトの一覧の方が都合が良かったんだがな。

字が小さいのは老眼の所為であるが、ID と更新日時を右側に配置したのはどう考えても改悪である。デザインした人は自分で使っていないらしい。ソースを見ると temp_lyout などという class 名になっているんで未だ試行錯誤中なのかもしれないが、エキサイトに期待しても裏切られるのは見えている。Firefox ならば CSS を好きなように変更できるし、起動中に切り換えられる Stylish というアドオンもあるので、これを使って老眼に優しいスタイルにしてしまおう。

友達の新着ブログ(RSS) には temp_lyout mt15 wh56 というスタイルが指定されており、http://md.exblog.jp/css/blog_main_renew.css を見ると、
.temp_lyout dl dd{font-size:84%;}
で文字サイズを縮小しているのでこれを 100% に戻す。

ID と日付には floatright f84 という指定なので、
.floatright{float:right;} と .f84{font-size:84%;}
を無効にする。

ついでに、未読が目立つように a:link{color:#0000FF;} にもしておこう。

Stylish を導入すると右下に表示されるアイコンを右クリックして「スタイルを書く」→「この URL 用」をクリック。
a0008364_1015280.gif
下記のスケルトンが表示されるので、{ と } の間に好きなスタイルを書く。
@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document url("http://www.exblog.jp/top/rss/my_valley.asp") {

}
これに上記のスタイルを挿入して、優先度を上げる !important を付加し、概要に名前を付けて保存する。
@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document url("http://www.exblog.jp/top/rss/my_valley.asp") {
.temp_lyout dl dd{font-size:100% !important;}
.floatright{float:none !important;}
.f84{font-size:100% !important;}
a:link{color:#0000FF; !important;}
}
おぉ、いい感じになったぞ。
a0008364_10473358.gif

[PR]
by HarryBlog | 2007-11-06 10:21 | Technique | ↑Top  
動画編集
日曜あたりから風邪をひいたようで、昨晩はちょっと熱も出て何度も目覚めてしまった。で、東部時間とチャットしてた訳だが…

さて、一応やった事をメモしておこう。まぁ次回やろうという時にはもっといいフリーソフトが出てるだろうから、結局その場で検索する方が早いとは思うけどな。

まずは、ドガログから素材をダウンロード。作者である諜報員はマカーなので当然 iTunes 用 MPEG-4 である w4v ファイルであった。QuickTime の有料版なら加工できるのかもしれないが、Win でフリーソフトが多いのは何と言っても avi なので、QTConverter で変換。音声だけなら wav に出してもいい。

次に、映像と音楽のマージであるが、AVI-Mux GUI ってので avi 上ではうまくできたと思ったのに、m4v へ戻すと何故か当初の駅名アナウンスの音声チャネルしか渡らない。

そこで、AviUtl というのを使ってみた。映像の avi を開いておいて、「音声読み込み」で wav を追加し、一つの avi へ出力する。

a0008364_0102540.gif音楽の方が 40 秒ほど長かったので、エンドロールみたいな文字でも入れようかと思ったけど面倒臭いのでロゴ画像に出演を依頼することにした。

IBM HomePageBuilder は買っていたので、付属の WebAnimator で gif アニメを作り、Giam でこれも avi にして、上で作った avi へ挿入。

最後は圧縮であるが、フォーマットもコーデックも色々あって何がいいのやらさっぱり分からん。まぁ元と同じのが無難だろうってことで最初に使った QTConverter で avi → w4v へ変換。

ふぅ、慣れないことすると疲れるね。
知らない世界は面白いんだけど。
…と、ここまで書いてて初めて気付いた。HomePageBuilder には WebVideoStudio というビデオ編集機能があったんじゃんかぁ。今度はこれで何か作ってみよう。
[PR]
by HarryBlog | 2007-02-21 00:28 | Technique | ↑Top  
複数環境
ワシは普段は Firefox を使っており、別 ID でログインするときとかに Opera を併用する。IE のエンジンでないと受け付けないサイトでは Sleipnir を使っていたが、IE 7 でタブ対応になったのでそれも入れてみた。

ところが、IE 7 だと客先の業務アプリで固まる物があったり、Norton と喧嘩して AntiVirus が効かなくなったりする不具合が残っている。

そこで、下記にある Multiple IE というのを導入した。

 複数のIEを共存させる方法 - Go my way

これで、IE 3.01 , 4.01 , 5.01 , 5.5 , 6.0 , 7.0 が共存可能となる。

ワシゃ CSS に凝ったりはしないんで、ブログで実験するときぐらいしか使わないが、クロスブラウザチェックするときにも有用だろう。さすがに今どき IE 5 以下は危険過ぎるけど、まだまだ IE 6 の人の方が多いようだからな。

でも、ネットでの見栄えをチェックするなら当然 Mac や Linux も必要になる。特にブロガーにはマカーが多いからね。そこで、これ↓

 Test your web design in different browsers - Browsershots

URL を指定すると、各プラットフォーム、ブラウザ、バージョンでどのように見えるか、スクリーンショットを作ってくれるのだ。ちなみに昨日のウチの画面はこうなる

シェア 1% ぐらいの物をどう考慮するかってぇこともあるんだが、やはりシンプルイズベストではあるだろうな。
[PR]
by HarryBlog | 2007-02-11 10:22 | Technique | ↑Top  
フォーム
昨日の記事でチェックマークを表示したが、それ以外のフォーム部品も、つまり input タグは全て書けるのである。 ま、書いたところで何の意味も無いのであるが。

ログイン
←エキブロのログインフォームを真似してみるとこんな感じ。

ログインボタンを押すと爆発するので注意!なんちて

テーブルで揃えているところは、div で無理矢理。
やり方は下記を参照。
 Adan Kadan Blog : divタグで 表組もどき、再現


ワシはスキンを更新できないので、記事中に style を記述しており、実はかなりみっともないことになっているんだがね。

ヒマなのか? >ワシ



ウギャ! IE と Opera で見てみたら、何じゃこりゃぁ~

Firefox ではちゃんと表示されるように作ったのにぃ… orz



とりあえず、IE6,7 ではそれっぽく見えるように修正
IE 5.5 では幅がズレる
[PR]
by HarryBlog | 2007-02-10 21:38 | Technique | ↑Top  
ルビ4
もう数年前から先輩方がいろいろ試してきたのだね。

昨日パクってきたルビの CSS の大元のアイデアは下記北村氏のようだった。

 Mozillaでルビ表示3 - 徒書
 徒書・2001年10月

で、それを弾さんが紹介して大きな反響を呼んだようだ。

 404 Blog Not Found:css - ルビもCSSで
 404 Blog Not Found:css - ルビの理想と現実

でも、それを IE で見ると、読めないぐらいに崩れてしまう。
ruby タグと CSS がぶつかってしまうのだな。

 ルビ表示はユーザスタイルシートで! - 徒書
 ルビ用CSSについての現実的な理由 - 徒書
 ルビ用CSSについての将来的な理由 - 徒書

ってことで、CSS3 Ruby Module というのが実装されたブラウザが登場するのを待つしか無いのだろうねぇ。Opera でも皆さん苦労されている様子。

 Shishimushi - Operaにおけるルビ表示
 Operaでルビをそれっぽく見せるユーザスタイルシート (kuruman.org)
 IE以外でルビ

まぁワシの場合は ruby タグを使って書こうとしていないので、IE で inline-table が正しく表示されないのが問題なんだよな。ってか、div や span で一時的にだけ表示を変えようってのがそもそも無理が多いのだろうけどな。

IE6以前 と 7 ではまた挙動が異なるってのも困る。スターhtmlハックっていう裏技も使えなくなったらしいし。(追記:IE7のCSS対応状況とハック:LifeHacks with AipoでOK?)

ま、もうちっと探検してみよう。
[PR]
by HarryBlog | 2007-01-10 13:05 | Technique | ↑Top  
ルビ3
ふりがな 付けますのソースを解析してみた。Firefox でも ruby タグが効いている。と思ったら、こんな CSS を使っていた。なるほどねぇ、頭いい奴は居るもんだ。

で、真似っ子してみた。

  ワシの名前は針生はりうとおるです。

これなら汎用的に使えるかな?

って訳で、懐かしのジジツールをどうぞ。



IE と Opera で見てみたら、全然ダメじゃん orz

a0008364_0285831.gifFirefox 2.0.0.1

a0008364_0124850.gifIE 7.0.5

a0008364_0134727.gifOpera 9.10
[PR]
by HarryBlog | 2007-01-10 00:06 | Technique | ↑Top  
ルビ2
冬休みは終わったってぇのに、宿題が残っていた。

このひ と女性に「お待ちしております」なんて言われたら、そりゃやるしか無ぇよなぁ。

別にワシのイ ロ情婦って訳じゃないが、正月早々に化けて出られでもしたら縁起が悪いからな。

だが、まだちょっと手探り中。フォントサイズを強制指定して、ルビを振る語句の字数によって位置を微調整しなきゃいけない、なんてのじゃちょっと使い難い。

一応、ソースはこんな感じ。
<div style="font-size:14px;">
<span style="position:relative; top:-18px; left:2px; font-size:8px;">しんかんせん</span><span style="position:relative; left:-42px;">新幹線</span>
</div>
もう少々お待ち下さい。
[PR]
by HarryBlog | 2007-01-09 23:15 | Technique | ↑Top  
ルビ
昨日、ブログを含むウェブページのひらがな化とふりがな化を紹介したが、「ページ全体ではなく、特定の語句のみにふりがなを付けたい、傍点も」というコメントを頂いた。

ふりがなは ruby タグで可能である。ただし、IE 限定かな?

一応 W3C 勧告になっているが、Firefox とか対応していないブラウザも多いようだ。

Ruby Annotation

<ruby>AA</ruby>
 AAへルビを振りたい内容を記述
<rb>BB</rb>
 BBへルビを振る対象を記述
<rt>CC</rt>
 CCへ振りたいルビを記述
<rp>DD</rp>
 DDへ未対応ブラウザで表示される文字を記述

例えば、
<ruby><rb>世祓</rb><rp>[</rp><rt>よはら</rt><rp>]</rp></ruby>い

のように書くと…
世祓[よはら]となる。

これを応用して、ルビに「・」を使うことで傍点っぽく見せることも可能。

傍点[・・] っぽく強調。

って…ダメじゃん。 Firefox で見てると何の意味も無いな。 IE なんか使いたくないし。

CSS でも可能だろうけど、今日は疲れたので宿題とさせて下さい。
[PR]
by HarryBlog | 2007-01-09 00:38 | Technique | ↑Top  
ページの先頭



針生 徹

Writer's choice
Harry corporation
Study room
Twitter
Facebook
Tumblr


エントリ内容に無関係と判断したコメント、トラックバックは削除します
記事ランキング
最新の記事
開会式
at 2015-01-31 17:53
針生一郎と戦後美術 - 宮城..
at 2015-01-18 17:22
回顧
at 2014-12-27 22:36
プライスレス
at 2014-01-03 07:31
謹賀新年
at 2014-01-02 09:20
蹴球興業
at 2013-09-21 22:27
スマートですかねぇ?
at 2013-08-07 21:42
遭難記録
at 2013-08-04 20:50
リバイバル
at 2013-08-04 11:06
出稼ぎ
at 2013-08-04 10:56
最新のトラックバック
RSS入門生(1):By..
from Rosslyn Papers
Flipboard
from Rosslyn Papers
忘年会
from nest nest
とりあえず
from nest nest
update
from nest nest
水筒
from nest nest
針生一郎さんが亡くなった。
from 今日、考えたこと
針生一郎さん
from 今日、考えたこと
針生一郎氏逝去
from にぶろぐ
針生一郎さん
from 今日、考えたこと
カテゴリ
以前の記事
その他のジャンル
S M T W T F S
1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30