App紹介の自動HTML作成Bookmarkletを実装

今日はこの実装に時間がかかった。単純に実装するにはすばらしい参考サイトがあるので簡単なんだけど、ちょっとデザインを調整しようと思ったらなんだかうまくいかず、だらだらと時間がかかってしまったというわけ。
いまのところこんな感じに仕上がっている。

このブックマークレットは、起動して任意のアプリ名を入れるだけで、紹介リンクを生成してくれるという素敵プログラム。
これそのものの実装方法は以下のサイトを参考にさせてもらいました。
すごくよくまとまっていて分かりやすかったです。すばらしい！

で、なにを直したのかというと、組み込んだデフォルトは以下のような感じになる。

まず、タイトルが大きく色が青い。
そして、アプリのスクリーンショットの大きさが若干大きい。
よーするに全体的にコンパクトにしたいと思った。文字の色もちょっとウルサイ感じがするので。

基本、CSSで調整するのだけど、それだけではタイトルがどーにもならなかったので、時間がかかった。CSSは、@importで読み込むことにした。そのほうがシンプルなので。とりあえずは「appinfo.css」というふうにしておいた。

まずは文字色。
AppInfoというclass名がついているので、そこに色指定をいれるだけで、タイトル以外はざくっと色が変わってくれる、カンタン。
あと、アプリアイコンの右にあるアプリ名のタイトル。これはタイトルなので、コイツだけ太字にしたり色も変えたい。そんな時は、div.AppInfo strong{}で各種の指定を加えればいいだけ。

手間取ったのは、画像の大きさ指定。単純な指定だとすべての画像に影響するので、いろいろ試した結果最終的に使ったのは以下の二つ。

img.landscape{}
img.portrait{}

パラメーターなどの設定は以下で。

width: 40%;
height: auto;
margin-right: 30px;
vertical-align: top;

縦と横の画像が混ざっているので、上揃えにしときました。
たったこれだけなのに時間がかかったのは能力不足ゆえ。分かる人ならすぐできちゃうくらいカンタンなはず。

一番悩んだのは、タイトル表記。これは、ブックマークレットで書き出されてくるHTML自身に色指定があったので、CSSではなんともできず困った。
そこで、じゃあ、書き出すプロセス上で変えてしまえと思い立った。
上で紹介した記事に書いてあったことを参考にすると、なんでもYahoo!Pipesで、編集できるらしい。以下を参照。

選択した文字からApp紹介のHTMLを自動生成するBookmarklet

Yahoo!のIDが必要のようだけど、Flickrを使っているのでそのままIDを使い回せる。
それでソースを覗いてみると、冒頭の部分で以下のように記述されていた。

span style=”color: rgb(0, 0, 255);”

styleで青に色指定されてる。こいつのおかげでタイトルが青かった！
なのでここを以下のように変えました。

span id=”appinfotitle”

これでCSSでカンタンにデザインをコントロールできるようになったぞ！
もう煮るなり焼くなり好きなようにできる。
まあ、たいしたことはやってないのですが、素人なりにがんばりました。
で、当然divは設定してあるので、線をつけたり、マージンとったりで全体の印象を整えるっと。もう一度画像を載せるとこんなんです。