WEBページの内容を一時的に書き換えるテクニック

この記事は、以前書いた「不要なところは削除してやりたい放題できる『編集』 – もぎゃろぐ」の再掲です。需要はあると思うのになぜか広まらないのでもう一回書いてみる!

WEBサイトをキャプチャするとき、微妙に都合の悪い要素を削りたい時ってあるじゃないですか。広告とか、ユーザーさんのお名前を伏せ字にするとか。普通そういう処理は画像編集ソフトでやるのですけど、めんどくさいじゃないですか。動画とかそう簡単じゃないし。
そういう時、ブラウザで見ているページの中身を一時的に書き換えることができます。

編集

このリンクを右クリックして「お気に入りに追加」します。
alert.JPG

こういう警告が出ます。警告の内容は書いてある通りなので、信用できる方だけ「はい」を押してください。

先ほどのように、編集したいページに行ったら、そこでお気に入りから「編集」を選ぶと、WEBページにカーソルが出てきます。
Cursor_and_仕事管理___Any_Times・エニタイムズ.png

任意の箇所を変更することが出来ます。
Cursor_and_仕事管理___Any_Times・エニタイムズ 2.png

余計なところを削除したりできるのが、撮影の時に嬉しいです。
仕事管理___Any_Times・エニタイムズ 2.png

撮影に邪魔なカーソルは、どこか画面に映らない場所に移動させておきます。
あと、書き換えた画面は、もう一度ページを読み込み直すと元に戻ります。

svgで画像ファイルを量産する

この記事は、Titanium mobile “early” Advent Calendar 2012の提供でお送りしております。

Titanium Mobileのおかげで、iPhoneとAndroid両にらみでアプリ開発することが現実的になったのはいいのですけど、どちらも機種が増える一方なので、画像ファイルの準備が洒落にならなくなりつつあります。
最低限必須となるアイコンとスプラッシュスクリーンだけで50種類!

Titaniumで用意する画像のサイズ – Sawalog

とはいえ、実際にはほとんど同じ画像がサイズの違うキャンバスに貼り付けてあるだけなので、自動化することにしました。

tiqiita.png

最大で1024pxの画像を57pxまで圧縮することになるので、ビットマップやpng画像をそのまま縮小すると目も当てられない画像になってしまいます。そこで、デザイナさんにはillustratorのベクター画像で納品をお願いすることにしました。
illustratorの「Webおよびデバイス用に保存」機能を使うと、作成していただいた画像をSVGフォーマットで出力することが出来ます。
illustrator.png

SVGは、ベクターグラフィックスなので縮小してもつぶれない、たいていのブラウザでも開くことが出来るなど、期待される要素がたくさんある割にはちっとも日の目を見ないフォーマットですが、それはさておき、プログラマ御用達の画像処理ツールImageMagickやそのRubyバインディングであるRMagickで扱うことが出来ます。

というわけでRubyで書いたコードがこちら。icon.svgとsplash_screen.svgを元に、必要なサイズに拡大縮小、背景は指定した色で塗りつぶした画像を一気に生成します。

こういうのを用意しておけば、「iPhone6が発売されたので新しい解像度の画像が必要」というときでも、プログラマレベルで片付けることが出来るので便利ですよね。

ただこの手法にはちょっと難点があって。ドロップシャドウとか非表示レイヤーなんかはImageMagickがついてこれないのでぐちゃぐちゃになってしまうことがあります。パスで描かれた単純な画像しか適用できないのが辛いので、最近はPhotoShopのアクション機能で出力するほうがいいのかなーとか考えています。そのへんも手法が確立したらそのうちブログで書こうと思います。