『選択文字拡大』BML

唐突ですが、ブラウザ上のページの一部テキストだけを拡大したい事って無いですか？

曰く、フォントが小さくて読みづらい、漢字の細かい形が判らない、『パ（PA）』 と 『バ（BA）』 の区別がつかない……でも、ページ全体を拡大するほどじゃない。

そんな時、選択したテキストだけを拡大する為のブックマークレットがコレです。

・選択文字拡大BML

機能としては、選択テキストをフォントサイズ 100px へと拡大します。ページ内の何ヶ所でも累積して拡大が可能。拡大されたテキストをクリックすると元の大きさに戻ります（複数拡大していた場合はその全てが）。

ページによっては、使用によりレイアウトが大幅に崩れる事があるかもしれません。また拡大解除の際、ページの別の場所に影響が及ぶ可能性も無きにしもあらずですが…その辺は仕様という事で(^^;

ソースの中に font-size:100px と書かれた場所がありますので、この 100px の部分を書き換えればお好きな大きさに拡大出来ます。もちろん単位は px に限らず % 等でも可です。

例によって動作確認はIE6オンリー。まァ大して役に立つ物でもないですが、いざという時に一寸でも痒い所に手が届けば幸いです(^^

『画像に縁取り付加』BML

例えばバナーやサムネイルなど、画像にリンクが張られている事は良くありますね。通常IMGタグをAタグで囲むと画像に縁取りが付き、その色で未訪問かどうかが判るわけですが…IMGのBORDER属性に0が指定されている場合この縁取りが付きません。そんな時、強制的に縁取りを付加する為のブックマークレットです（動作確認ＩＥ６）。

・画像に縁取り付加

機能としては、ページ内のBORDER=0になっているIMGを選び出してBORDER=2に変更します（太さはお好みにより変えて下さい）。リンクが張られてない画像にも作用しますが、そこはご愛嬌。前回の記事（『リンク色標準化』BML）と合わせると更に万全でしょう。

『リンク色標準化』BML

たまに未訪問リンクと訪問済リンクの色を同じに設定しているページがありますが、それが巡回先だったりすると、前回どこまで見たかとかが判り難くて不便。そんな時、リンク色をＩＥ標準（未訪問＝青、訪問済＝紫）に変更する為のブックマークレットです（動作確認ＩＥ６）。

・リンク色標準化

…多分探せば色んな所で配布されてるような気はするんですが、とりあえず自作。『標準化』 と銘打ってますけど、個人の好みに応じて見易い色に設定するのが良いでしょう。その場合、ソース内の 『Blue』 『Purple』 の部分を変えればＯＫです（参考：とほほの色入門・色見本）。

Amazon Bookmarklet 対３種

・Amazon Bookmarklet
・続Amazon Bookmarklet
・続々Amazon Bookmarklet

…とまあ過去に何度か対Amazon用のアソシエイトリンク作成ブックマークレットを扱って来たわけですが、自分でもろくに使っていない内に（使えよ）またAmazon側の仕様が変遷していたようです。

【参考リンク】
・point of view point: Amazon個別商品ページのURLが変更に
・point of view point: Amazonの個別商品ページのURL、再び変更。と、ISBNの桁拡張
・うえぽんSW局 | Amazon.co.jp、サイト内のURLが変更される
・コトバノツドイ - Amazonの商品ページURLが変わってる？
・worris' アマゾンのURL記法が変更
・[観] ここ最近、amazon.co.jp の検索結果の URL がコロコロ変わってます
・void GraphicWizardsLair( void ); // Amazonの商品個別urlを極限まで削ると「http://www.amazon.co.jp/dp/{ASIN番号}」が最短なのかな？
・hxxk.jp - Amazon の http://www.amazon.co.jp/dp/ASIN No. 形式ではアソシエイト ID が使えない !?

…以前であればAmazonのURL記法は
　（１）http://www.amazon.co.jp/exec/obidos/ASIN/ASIN番号
の形式を押さえておけば一応問題無かったわけですが、現在ではこれの他に
　（２）http://www.amazon.co.jp/dp/ASIN番号
　（３）http://www.amazon.co.jp/gp/product/ASIN番号
の２パターンが存在するようです。更に（２）の場合はURL内にエンコードされた商品名やキーワードが長々と付く場合がある…。そりゃないぜAmazon〜！

とまぁそんなこんなで無い智恵をしぼり、３種のURLを自動判別して従来通り（１）形式でアソシエイトリンクを作るよう改造してみたですよ。商品画像は無し。…あ、あとなんか『ref=nosim』は無くてもちゃんと商品ページに行くようになってたので、付けないようにしました。

・AmazonAssociateリンク作成(対3種)

多分これで大丈夫なはず…。例によって動作確認はＩＥ６。右クリックメニューから『お気に入りに追加』してね。あと、ソース内の初めの方にある『xxx-22』の部分を、自分のアソシエイトＩＤに書き換えて下さい（これ重要！）。

TEXTAREA改造ブックマークレット

唐突ですが掲示板への本文書き込み時の環境、即ちTEXTAREAフォームの表示に不満はありませんか？

やれ横幅が狭い、やれ字が小さい、やれ投稿後とフォントが違う…等々。その為にわざわざテキストエディタで推敲する人もいるでしょう。そんなお悩みの一助とすべく、こんなブックマークレットを作ってみましたよ。

・TEXTAREA改造

中身はこう↓です。

javascript:j=0;void(document.all.tags('textarea')(j).style.fontSize='16px');void(document.all.tags('textarea')(j).style.fontWeight='bold');void(document.all.tags('textarea')(j).style.fontFamily='ＭＳ Ｐゴシック');void(document.all.tags('textarea')(j).style.color='white');void(document.all.tags('textarea')(j).style.backgroundColor='black');void(document.all.tags('textarea')(j).style.width='600px');void(document.all.tags('textarea')(j).style.height='200px')

項目毎にバラしますと…

j=0;
頁内の何番目(ゼロ始まり)のTEXTAREAを改造するかを指定します。通常TEXTAREAは本文入力フォームにしか使われていないので0でＯＫですが、板によってはタイトル入力フォームにも使われている場合もあります。

void(document.all.tags('textarea')(j).style.fontSize='16px');
文字の大きさを指定します。ここでは 「16px（通常使われる中程度の大きさ）」 としていますが、「150％」 等の割合でも指定できます。

void(document.all.tags('textarea')(j).style.fontWeight='bold');
文字を太字にしています。

void(document.all.tags('textarea')(j).style.fontFamily='ＭＳ Ｐゴシック');
フォントの種類を指定します。例の 「ＭＳ Ｐゴシック」 は投稿後の表示に良く使われていて、アスキーアートの大半もこれに合わせて作られてます。

void(document.all.tags('textarea')(j).style.color='white');
文字色を指定します。色名や 「#FFFFFF」 等の形で指定できます。

void(document.all.tags('textarea')(j).style.backgroundColor='black');
背景色を指定します。同上。

void(document.all.tags('textarea')(j).style.width='600px');
フォームの横幅を指定します。ピクセル数の他、「150％」 等の割合でも指定できます。

void(document.all.tags('textarea')(j).style.height='200px')
フォームの縦幅を指定します。同上。

こんな感じです。ホントはもっとスッキリしたスクリプトに出来るんじゃないかという気もしますがドンマイ。必要に合わせて赤字の部分を変えたり、項目単位で削除したりして使ってみて下さい（＾＾

でっかい点の冠し方 〜ぶっとい下線と波下線もあるよ〜

さて、前回の記事で「ぶっとい抹消線の引き方」なるものを説明したわけですが…その時、最後にこんな事を書きました。

ちなみにスタイルシートで行間をあけているような場合は、罫線の縦位置がズレる場合があるようです。その場合、上記で言えばクラスs3の部分でtop:-0.2em;等のように縦位置の「ズレ」を指定して調整してやると良いでしょう。

…何かピンと来ませんか？
上下にずらせるという事は、ひょっとしてアレも…

─そう、━━━━━━━━例えばこんな風に！　　 （横罫線/top:0.6em;）

でもって~~~~~~~~~~~~~~~~例えばこんな風に！　　 （チルダ/top:1.0em;）

そして…・・・・・・・・例えばこんな風にッ！　（中黒/top:-0.65em;）

※指定すべきズレの量は、行間指定やフォントサイズ等によって変動します。その都度調節して下さい。その他諸注意は抹消線の時と同じで…。あと、例によって動作確認はＩＥ６のみです。

──上記の傍点の場合、例えばこんな風に(・・・・・・・・)RUBYタグによってふる事も出来ますが…少々点が小さい上、少し古いブラウザ（ＩＥだと５．５未満）では対応していなかったりするので、場合によって使い分けるのが良いかもしれません。以上！

ぶっとい線のかぶせ方 〜ｎ歩進んでｎ歩下がる〜

例えばこんな風に、文に抹消線を引く事がたまにあります。
でもこれ、ちょっと見辛くないですか？
…抹消線がもっと太ければ良いのに。
あまつさえ、色まで付けられたなら…
──そう、━━━━━━━━例えばこんな風に！続きを読む

ワードラップなんていらない

ＨＴＭＬ上で英文（半角英数文字）を表示すると、（少なくともＩＥの場合は）自動的にワードラップしてくれます。つまり単語の途中で改行されないように、改行位置を単語の切れ目までずらすわけです。

この際切れ目として扱われるのは空白、マイナス、ハイフン、クエスチョンなど。カンマやピリオド、スラッシュ、イコールは切れ目になりません。

そしてもし切れ目の無い半角英数文字列が延々と続いていた場合、ブラウザの端まで行ってもなお改行せず、また横幅を指定したテーブルの中であっても指定を無視して押し広げます。

あああああああああああああ

↑横幅100ピクセルに指定したテーブル。中身が全角文字なら幅100のままだが…

aaaaaaaaaaaaaaaaa

↑半角英数字が続くとこうなる。

でも支障が出るほど長い単語なんて無いだろ？そもそも英文なんて書かないし…などと悠長な事は言ってられません。そう…ＵＲＬです！当ブログも他サイト紹介時に時々ＵＲＬが長過ぎて、記事テーブルが広がり右サイドバーの中身が押し出されて、大層カッコ悪い事になってました（＾＾；

こんな時便利なのがやっぱりスタイルシート。タグの中に style="word-break:break-all;" を仕込む事で、ワードラップを停止させる事ができます。

<span style="word-break:break-all;">URL文字列</span>

↑上記のようにすれば指定文字列だけに適用できますし、テーブルタグに仕込めばそのテーブル内にだけ適用できます。

が…一番簡単なのはやはり <body> タグ内で指定してしまう事でしょう。これならページの全領域で適用されますし、普通の人なら全く支障は無いのでは？オススメ。や、知ってる人は普通に知ってる事ですけども。

続々AmazonBookmarklet

過去に２回ほどアマゾンアソシエイト用のブックマークレットを紹介しましたが （Amazon Bookmarklet と 続AmazonBookmarklet） 、なんかいつの間にか商品名を上手く取得できなくなってました。アマゾンがタイトル表記の仕方を変えたみたいです。

この不具合を修正するには、URLソースの前半にある (t.indexOf(':')+2,t.length) の部分を (t.indexOf('：')+1,t.indexOf(':')) か、もしくは (13,t.indexOf(':')) と書き換えれば良さそうです。って言われても面倒でしょうから、以下に出来合いを。

・AmazonBookmarklet改+

・AmazonBookmarklet改・画添+

・AmazonBookmarklet改・画添++ （レイアウト変更バージョン）

例によってアソシエイトＩＤは私の物になってるんで書き換えて下さい （結局書き換えは必要…）。動作確認はＩＥ６のみ。詳細は過去記事を見てね。

続AmazonBookmarklet

以前の記事で紹介した改造版Amazonブックマークレットですが、この時はAmazonの画像ファイルに直リンしてはいけないのだと思い込んでました…が、どうも皆やってるみたいだぞ？なんだ、やっても良いのか！という事で、今度は画像付きに改造してみました〜。（動作確認はＩＥ６のみ）

AmazonBookmarklet改・画添

右クリックメニュー＞お気に入りに追加　から登録して下さい。
スクリプトの中身はこんなん↓です。

javascript:var assoc='hecomicom-22';var t=document.title;var linkString=t.substring(t.indexOf(':')+2,t.length);var u=document.location.href;var ai=u.indexOf('ASIN');var asin=u.substring(ai+5,ai+15);var amazonUrl='http://www.amazon.co.jp/exec/obidos/ASIN/'+asin+'/'+assoc+'/ref=nosim';var imageUrl='http://images-jp.amazon.com/images/P/'+asin+'.09.MZZZZZZZ.jpg';var link='<a href="'+amazonUrl+'"><img src="'+imageUrl+'" align="left" border=0>'+linkString+'</a><br clear="all">';var x=prompt('',link);

hecomicom-22の所は、例によってご自分のAmazonアソシエイトIDに書き換えて下さい。

09の所は、なぜか01の場合と09の場合があるようなのですが、まあ大抵の場合09にしておけば画像は存在するようです。

MZZZZZZZは画像の大きさを表わしていて、
　　・LZZZZZZZ
　　・MZZZZZZZ
　　・TZZZZZZZ
　　・THUMBZZZ
の４種類があるみたいです。大抵下に行くほど小さくなりますが、商品によってはほとんど変わらない場合も…。てゆーかそもそも各種類の絶対サイズ自体、商品によってまるっきり違います。とりあえず商品ページＴＯＰに貼られているのはMZZZZZZZのようなので、コレを使っておくのが無難でしょう。

ちなみに画像のＵＲＬは単なる予測でして、ホントにその通りに存在するかは保証できません。そもそも商品によっては画像が無い場合もありますし。その辺はご了承下さい。

で、実際に使ってみた時のサンプル↓。


PSP 「プレイステーション・ポータブル」


…いや〜、シンプルですね〜(^^；
ホントは値段やメーカー名も付けたい所だけど、流石にそこまではやり方が分かりませんでした。皆さんも各自で使い易いようにいじくって下され。まあもっと便利なツールが既に沢山ありますけど…。


【6/27追記】
画像の種類ですが、1TZZZZZZとすると影付きでちょい斜めの画像になるらしいです。使われてる所見た事ないですが。



【追記（2006/3/4）】
商品名が上手く取得できなくなってたので修正しました。
・続々AmazonBookmarklet
http://heco.seesaa.net/article/14120507.html

ビックリハテナ調整術

文章を書く際、いわゆる『!!』や『!?』を使う機会は多いと思います。しかしこの『!?』の形がなかなか思うように決まらない、という人も少なくないのではないでしょうか。今回はそんな話です（どんなだ）。

あ、例によってＩＥ６・文字の大きさ『中』が前提の内容ですよ。続きを読む

Donutでもブックマークレットを使おう

最近何ヶ所かで 『Donut系ブラウザではブックマークレットが使えない』 みたいな記述をみかけました。前にもちょっと触れた通り当方もDonutRAPTを愛用してるんですが、それはてっきりタブブラウザ全般の現象なのかと思ってました。まあ早い話が、お気に入りに登録したブックマークレットをクリックしても、別窓として開いてしまって用を為さないんですね。

しかし、Donutブラウザでも（少なくともRAPT上では）ブックマークレットをつかう方法があります。これまた前に少し触れた事があるんですが、この際なのでもう一度…

その方法は
（１）『Donutのオプション』で「お気に入りを新しいウィンドウで開く」のチェックを外す。
（２）お気に入りからブラウジングエリア（又はタブ）に向かってリンクアイコンをドロップ。
の２通りです。

まあ（１）だと折角のタブブラウザの意味を半減させてしまう気がするので、実際は（２）で行くのが妥当でしょう。あ、それと言うまでもないけど、対象タブは当然JavaScriptがオンになってる必要があります。

そんなこんなで、DonutRAPTはいいブラウザですよー。皆も使おう！カスタマイズ性はあまりありませんが、便利な機能が多くて、お気に入りがＩＥと共有＆並び順も同じに出来るのが個人的にツボです（独自ブックマークがいい人には向きませんが…）。初心者には同じ作者のDonutQがイイかもです。使った事ないのでよくわかりませんけど(^^；

■Donut RAPT 配布所
http://www.atmark.gr.jp/~s2000/r/



追記：
実はRAPTの場合、お気に入りをクリックする時にShiftを押しながらすると、新しいタブで開かない事に気付きました。正確には、新しいタブで開くかどうかの設定を一時的に反転出来るわけです。この機能自体も設定でオン/オフ出来ます。

つまり、ブックマークレットを使う時はShiftキーを押しながらクリックすれば良いわけですな。まあ、上記のドロップの方が楽な気もしますが。



追記２：
別記事でも書きましたが、最近のバージョンでは拡張プロパティから各お気に入り毎の設定を変えられるようになりました。RAPT最強。もう一生憑いて行きます！（憑て）

（作者様直々からご指摘を戴きました。ありがとうございますm(_ _)m）

波の綺麗な揺らし方

前述音の綺麗な伸ばし方でもって提示した解決策ですが、実はもう１パターンある事に気付きました。しかもこの方法なら波線にも応用が効くのです！続きを読む

音の綺麗な伸ばし方

テキスト中で音を長〜く伸ばす時、通常の伸音『ー』を使うと『ーーー』と途切れ途切れになってしまうので、『─』を用いる人も多いと思います。ところがこの『─』、ブラウザ上ではなぜかフォント表示サイズによってうまく繋がらない場合があります。

そこで今回、具体的にはどのような時にそうなるのかを実験してみました。ちなみに比較環境はInternet Explorer 6、文字のサイズ『中』です。続きを読む

Amazon Bookmarklet

今朝方初アソシエイトをかましたついでに、それ用のタグを自動で作れるBookmarkletを試してみました。
・Amazon bookmarklet: blog.bulknews.net
ブックマークレットというのはお気に入りから起動できるJavaScriptプログラムで、ここで配布されているのはAmazonアソシエイトの単純なテキストリンクを作るための物です。

お目当ての商品ページでクリックすると、出来あがったタグをコピーする為のプロンプトが出て来ます。ちょっとしたひと手間を省くだけの物ですが、多用する人にとっては嬉しい機能なのでは。流石に商品画像までは扱えませんが。

Amazonアソシエイト作成についてはこの辺りも参考になります。
・ARTIFACT ―人工事実― | Amazonアソシエイトをサポート
・ARTIFACT ―人工事実― | AmazonのURIまめちしき

で、早速そこの知識を活かして上記のスクリプトをいじってみました。
AmazonBookmarklet改
アドレスの末尾に/ref=nosimを付けて、関連商品の紹介が無い商品単独のページへ飛ぶようにしました。お気に入りやリンクバーに登録して使って下さい。あ、それとスクリプトのアソシエイトID(hecomicom-22の部分)を自分の物に書き替えるのをお忘れなく。でないと私に紹介料が入ります(^^

■補足
ところで私はタブブラウザ(Donut RAPT)を使ってるんですが、これだと普通にブックマークレットをクリックしても別窓で出てしまって用を為しませんね。一瞬困ったけど、お気に入りからタブへドラッグ＆ドロップしてしまえば大丈夫でした。良かった良かった。



【追記（2006/3/4）】
商品名が上手く取得できなくなってたので修正しました。
・続々AmazonBookmarklet
http://heco.seesaa.net/article/14120507.html