oitake blog

いろいろリンク

おすすめリンク

最近のエントリー

カテゴリー

20101012:コメントとトラックバックを停止したことにより、このサイトはアーカイブとなりました。以降、ご連絡はみもねるのウェブサイトへお願いします。
20100703:新ナマコメ(ナマコメ 2)を公開しました。コメントビューア付きで送信面においてもパワーアップしています。
旧ナマコメは将来的に使用できなくする予定なので、可能な限り新ナマコメをお使いください。
20091127:oitake は みもねる になりました。当ブログは無期限更新停止となります。詳細は最新の記事をご覧ください。

スポンサーサイト

一定期間更新がないため広告を表示しています


2009.12.16 Wednesday | | - | - | -

商品情報メール from Amazon:外部JSで作り直し

※20070920:一部動作を変更しました。変更前より使いやすくなっていると思います。

前回ご紹介した商品情報メールですが、ブックマークレット特有の不具合が目立ったので作り直しました。IE7でもFirefox2でも正常に動作します。

商品情報メール from Amazon

※Amazon.co.jpの商品ページでお使いください。
※ブラウザやメーラによっては文字化けが発生する可能性があります。

前回と同じく、ブクマ内の文字列「XXX」を送信先のメールアドレスに置換しておくと後が楽になります。宛先が定まらない方は空白にしておいてもいいかな?

今回はブクマから外部JavaScriptを呼び出すようにしたんですが、こうするとブクマの縛りから解放される→好きなだけソースコードを書ける→キレイなコードだから不具合の発生率が大幅DOWNでウマー!(・∀・)、ですね。最初からこうしておけば良かった( ´∀`)σ)∀`)

Amazonの商品データをメールで送信するブクマ

※20070914:外部JS版を公開しました。そちらをお使いください。
Amazon.co.jpの商品データをメールで送信する(送信しやすくする)ブックマークレットです。
送信される内容はこんな感じ。

件名:
[A]初音ミク HATSUNE MIKU: ソフトウェア

本文:
¥15,750
メロディと歌詞を入力するだけでリアルな歌声を生成するソフト
[windows]
対応OS: Windows XP/Vista
CPU: Pentium 4 2GHz以上/Athlon XP 2000+以上
メモリ: 512MB以上
メディア: CD-ROM

件名に商品名、本文に価格と商品の詳細が入ります。

商品情報メール from Amazon

※WindowsのIE7とFirefox2で動作を確認しました。Operaでは動作しません。
※ブラウザやメーラによっては文字化けするかもしれません。

実際にはデータ付きでメーラを起動しているだけ。携帯に注目商品のリストを作りたいときなどにお使いください。使い方は次のとおり。
1.商品ページでブックマークレットを起動する。
2.メールの作成ダイアログが立ち上がる。
3.送信する。

ただし、このままでは送信時にいちいちメアドを入力する必要があるので面倒です。
ブクマ内の「XXX」を送信先のメールアドレスに置換しておきましょう。手順は次のとおり。
1.とりあえずブックマークレットを登録する。
2.お気に入りの中のブックマークレットを右クリックしてプルダウンメニューを表示する。
3.プロパティをクリックする。
4.URL内の「XXX」を適当なメールアドレスに置換する。
5.「適用」ボタンを押してから「OK」ボタンを押す。
IEを想定した手順ですが、他のブラウザでも同じような感じです。

そういえば、JavaScriptで文字列をURLエンコードする下りでつまづきました。
続きにエンコード関数を載せておきますね。

続きを読む >>

Scrawl:ウェブページに落書きできるFlash

※20070905:なぜかFirefox2で動作しなくなりました…。IE6では動作したりしなかったり。あまりにも安定しないので、開発はいったん中止します。
※20070904:少しだけ動作を改善しました。IE7とFirefox2で、ほぼ完全に、動作します。IE6は反応なし、Opera9はバグります。詳細は後日。



開発中ですが、月曜日も終わりそうなのでご紹介します。
ブラウザ上に落書きできるブックマークレット「Scrawl」です。

Scrawl

落書きしたいウェブページを開いてからブクマを起動してください。
ドラッグ&ドロップで赤い線を描画できます。

ただし、開発中なので色々制限があります。
・IEのみで動作します。IE7でしかチェックしていません。
・ページによっては不具合が発生します。発生率はかなり高いです。
・落書きできる領域は「ページの上の方」だけです。
・ページが半透明の白いレイヤーに覆われますが、仕様です。覆わないと機能しないんだもん。

正確には、Flashを動的に埋め込むJavaScriptをブクマで呼び出しています。Flashを紹介するのはoitake blog初ですね。
ちょっとしたプレゼンなどで役に立つと思うのですが、「Flashムービーをウェブページ上に配置する」ところと「マウスでアクセスできるようにする」ところでつまずいてしまいました。ひょっとしたら、開発中止になるかもしれません。

HTML2CSS:機能を(本家並みに)強化したデラックス版

先日ご紹介したHTML2CSSのデラックス版をリリースします。機能とデザインが強化されているので、前回のブクマを使っている方もこちらをお使いください。
なお、oitakeのHTML2CSSは、Jonathan Holstさんが作られたHTML2CSSにインスパイアされて作ったものです。oitakeのは機能的に不完全ですが、ブックマークレットから簡単に呼び出せるメリットがあります。

HTML2CSS デラックス版

上のリンクをお気に入りやブックマークレットに登録、任意のページで呼び出してください。ページ上部にHTMLから生成された空のCSSが表示されます。
IEをお使いの方は「Copy CSS」をクリックしてください。CSSをコピーすることができます。

シンプル版(旧版)ではネストされた要素を列挙できませんでしたが、デラックス版では全ての要素を列挙できます。例えばこんな感じです。

div {
}
div#all {
}
div#all img {
}
div#all div#main {
}

(中略)

div#all div#main div#menu img {
}
div#all div#footer {
}
div#all div#footer div {
}
div#all div#footer a {
}

ただし、class属性もid属性もない要素の子要素は(故意に)列挙しません。

<div><strong>このstrong要素は無視されます。</strong></div>

また、ふたつ以上のclass属性値には未対応です。

div#all div#main div.entry div.block!text {
}

セパレータの半角スペースを「!」に変換するだけなので注意してください。
最終的にはテキストエディタ上で何らかの置換作業を行うことになりそうです。次のような長いセレクタはid属性の親要素を削除することで簡略化できます。

div#all div#main div#menu div.list div.links#ad div.linktext img {
}

複雑な構造のウェブページでは使わない方が良いかもしれませんね。

※前回、縦書きのアップグレード版をリリースすると書きましたが、めっさ面倒くさいことに気が付いたので、また今度。

HTML2CSS:HTMLを解析して空のCSSを生成するブクマ

※20070831:デラックス版をリリースしました。こちらをお使いください。
※20070830:Firefoxでは改行文字がそのまま表示されてしまうため、別途Firefox用のブクマを用意しました。テキストエリアではなくページ上にそのまま表示してしまいますが、とりあえずFirefoxユーザーの方はこちらをお使いください。


Jonathan Holstさんの作られた「HTML2CSS」というプログラムがGoogle Codeで公開されています。国内でも少し話題になりました。
HTML2CSSは、HTMLからCSSのセレクタだけを生成してくれるので、コーダーの方には有用だと思います。CSSを一から書き起こす際に手間が省けますからね。
ただ、このプログラムはPythonで書かれているので、経験のある人でなければ起動することすら難しいでしょう。

というわけで、HTML2CSSと同じ動作をするプログラムをブックマークレット(JavaScript)で作ってみました。
同じ動作、といっても、HolstさんのHTML2CSSほど優秀ではありません。要素名とclass属性値、id属性値を適当につなげて出力するだけです。
もっとも、実際にCSSを記述する際は、それほど複雑なセレクタにまで手を加えたりはしないので、これはこれで良いかとも思います。

HTML2CSS

HTML2CSS(Firefox用)

※このリンクをクリックすると不具合が発生します。
 右クリックメニューからお気に入りに登録してお使いください。


仕様です。

・任意のウェブページ上で起動してください。
 ページ上部にCSSの記述されたテキストエリアが表示されます。
・CSSは要素名でソートされます。
・全ての要素名と属性値は小文字に変換されます。
・br・style・script・noscriptタグは無視します。

本当はもっと機能を詰め込んだり、品質を高めたりしたかったのですが、ブクマの文字数制限から断念しました。
外部.jsファイルを動的に読み込むスタイルで再挑戦するかもしれません。