App紹介ブックマークレット

ブログツール

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

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

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

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

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

基本、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で、編集できるらしい。以下を参照。

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

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

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

span id=”appinfotitle”

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

タイトルの行間をもっと取りたいところかな、とか微調整は必要そう。
細かいところは全体が整ってきてから一気にやるつもりなので、今はこれで。

HTML & CSSをすでに習得済みな人はさくっとできちゃうことばかりだったな。。。
いつもより疲れた。

関連記事

  1. envatomarketのAPIキー作成方法

    ブログツール

    envatomarketのAPIキー作成方法

    WordPressの有料テーマを多く取り扱っている大手の「envato…

  2. ブログツール

    『zenback』がリニュールしたというので、さっそく試してみた

    ブログでお世話になりっぱなしの『zenback』がリニューアルしたそ…

  3. 「Google Search Console」に登録してみた

    ブログツール

    「Google Search Console」に登録してみた

    ウェブマスターツールに登録しようと思ったら「Google Search…

  4. ブログツール

    ブログ記事バックナンバーを有効活用したい人のためのサービス『zenback』を導入してみた

    すでに導入してからずいぶんたちますが、導入方法をメモしておきます。い…

  5. ブログツール

    Google+の「+1」ボタン導入メモ

    ツイートボタンを設置したら、ついでにGoogle+ボタンも設置したい…

  6. ブログツール

    さくらレンタルサーバーに他で取得したドメインをマルチドメイン運用する方法

    ひとつのレンタルサーバーで複数のブログを運用するときにやったドメイ…

最近の記事

  1. ホワイトハウスコックスの財布
  2. 進撃の巨人展FINAL チラシ
  3. 【無印良品】ゴールデンウィーク中のご飯にレトルト買い込み!
  4. 世代ど真ん中だった!!『週刊少年ジャンプ展 vol2』
  5. デジタル通貨を買ってみた記録!とりあえず元は取っている!
  6. 【コレクション】カードダス:SDガンダム外伝シリーズ
  7. 懐かしい!!カードダスSD戦国伝!!

アーカイブ

  1. 日常

    またですか
  2. プロダクト

    スマホに「はやぶさ」がタッチダウン!?  宇宙クラスタ用ガチャ発見!
  3. MTG

    【MTG】ラヴニカへの回帰 イベントデッキ「潜行と征服」を購入♪
  4. 日常

    攻めどころがムズイ
  5. 日常

    達成感
PAGE TOP