iPhoneのスクリーンショットをD&D一撃で綺麗にするWEBサービスつくりました

iPhoneのスクリーンショットにフレームを追加したり、いらないステータスバーをカットするWEBサービスを公開しました。実は同じ機能のiPhoneアプリが既にあるんですが、PCとiPhone両方から使えるWEBサービスも意義ありげだなと。なので、iOS6のSafariでもバッチリ動いてくれます。

コダワリのポイントはやはり出力画像のクオリティ。フルサイズで舐めるように見ても大丈夫。アルファチャンネル付きのPNGファイルで出力されるので、影も綺麗に透過され使い勝手が良いかと。

あと使いやすいように、沢山の画像を一度にアップして処理できるようになってます。では実際に使ってみます。

スポンサーリンク

スタート

サイトはコチラ → iPhone Screenshot Maker

まず合成するフレームを選びます。

最初は「auto detect」が選ばれてます。これは画像の縦横の比率によって自動でフレームを決めてくれます。たとえば640×960の比率の場合はiPhone4Sの縦。1136×640はiPhone5の横置きといった具合。

もしステータスバーのカットをしたい場合は、←このアイコン。

問答無用で上端40pxをカットします。

入力する画像はスクリーンショットに限らずどんな画像でもOKなので、 iPhoneで見たらどんな感じかな?って確認もできます。

オプションを設定

「入力画像をディスプレイにフィット」は、選択したフレームの画面いっぱいに画像を縮小・拡大します。チェックを外すと端末の解像度に沿った大きさで貼り付けられます。

「ディスプレイに反射エフェクト」は、画面右上の光の反射の事です。スクリーンショットが見にくい場合はオフにしてください。

「出力画像の縮小」では、横か縦の長い方のサイズを選びます。リサイズ処理は再サンプリングが行われるので高クオリティです。例えば64pxのアイコンサイズに縮小すると、こんな感じで可愛くなります。

画像のアップロード

最近のブラウザ(IE10やSafariやFFやChrome)ならば、一度に10個までのファイルをPCからドラッグ&ドロップできます。

ドラッグ&ドロップに対応していないブラウザはブラウザを変更してください、通常のファイル選択でアップロードしてください。選択後、自動的にアップロード&合成処理が始まります。

苦労秘話

実はこのサービス、最初はゲームボーイだけのジョークサイトの構想でした。iPhoneもできたら便利だなと思い立ち、その後、みるみるうちにGBの立場が追いやられ、蓋を開ければiPhoneのフレーム合成がメインのサービスに形を変えたのでした。

画像合成はPHPのGDというライブラリを使ってます。とても便利なライブラリで、合成処理はあっという間に作れました。

WEBサービスは完成まで幾つかのプロセスがありますが、この合成部分はコア部分。実は大変だったのは外側で、アップロードのドラッグ&ドロップと進捗プログレスバーでした。これは下のポストで詳しく読めます。

File APIを使った複数ファイルのドラッグ&ドロップアップロードwith進捗プログレスバー表示でハマり道中記 | ぷらすぶろぐ

PHP、アップロードのJavaScriptが終われば、次はデザインです。このサービスは多言語で需要が見込めそうなので英語版のサイトも同時に作成しました。なのでサービス名はド直球で何の捻りもありません。

しかし今考えれば、日本向けにはもっとインパクトのある名前をつければ良かったと思います。今度からそうします。

ちなみに英語版はこんなPHPで切り替えています。

function checkLanguage(){
    $l = explode(',', $_SERVER['HTTP_ACCEPT_LANGUAGE']);

    $o = 'en';
    foreach ($l as $val) {
        if (preg_match('/^ja/i', $val)){
            $o = 'ja';
        }
    }
    return $o;
}

本当はもう一つ中国語にも対応できればいいんですが全く分からないので、基本は英語で、HTTP_ACCEPT_LANGUAGE に ja があれば日本語表示というスタンスにしました。

レスポンシブル・デザインと popover は bootstrap で実現しています。ペラサイトなのでレスポンシブルの対応は楽でした。最後に favicon.ico と iPhoneでアイコン登録される場合に備え apple-touch-icon-precomposed.png を作って完成です。

しかしWEBサービスの本当の戦いはココから。これから宣伝活動の始まりです。海外サイトなどへリリースのお知らせをメールする予定です。

そんなわけで長くなりましたが、iPhone Screenshot Maker をぜひ使ってみてね。

 

 

スポンサーリンク