Developer's Blog

カメラのキタムラと共同で年賀状などのポストカードを Web 上で作れるサービスを HTML5 で開発しました


カメラのキタムラと共同で年賀状などのポストカードを Web 上で作れるサービスを HTML5 で共同で開発しました

こんにちは!デザイン担当の福島です。
11月もそろそろ終わり、今年もあと1ヶ月となりました。早いですね!
そろそろ年賀状の準備に取りかからないといけない時期にぴったりなサービスをカメラのキタムラ様と共同で開発しました。
年賀状まだ何もしてない!という方は方は早割もあるので、ぜひ!

『カメラのキタムラ』のサービスを HTML5 最適化

カメラのキタムラ』 Web サイト内の年賀状や結婚報告、誕生報告、転居報告などのポストカードを作成するサービス、『オリジナルポストカード』『デザイナーズポストカード』を HTML5 で再構築しました。
また HTML5 化にともないタブレット・スマートフォン等に向けて UI も最適化しました。これにより、従来ではパソコンでしか使用できなかったサービスがタブレットやスマートフォンでできるようになりました。

HTML5 の技術で写真を加工処理


『オリジナルポストカード』ではアップロードした写真がその場ではがきに合成されます。この際、はがきの写真合成領域は様々な形で写真をマスキングします。
アップロードした写真のマスク処理は、IE9 以降、Firefox、Safari、Chrome に対応するため HTML5 Canvas を使用、globalCompositeOperation 属性で PNG のマスク画像と合成しています。

デザインもスマートフォン向けに最適化

タブレットやスマートフォンで撮影した写真をそのままポストカードに

タブレット・スマートフォン版では iPhone/iPad だけでなく、動的な動作が難しいとされている Android 2.2 にも対応できるように、使い勝手を落とさないようパソコン版とは異なる独自のインターフェースを採用しました。お持ちのタブレット・スマートフォンから撮影した写真を使用して、簡単に Web 上からポストカードの作成、注文ができます。

スマートフォンでも仕上がりを確認

テンプレートに合わせてお持ちの写真を専門のデザイナーが最適なデザインでご提供する『デザイナーズポストカード』、マルチデバイスに対応することで、 出先の空いた時間にタブレットやスマートフォンで Web 上からポストカードのデザインの確認やデザイナーとのやり取りがスムーズに行えます。

カメラのキタムラ 年賀状 12月12日まで早割実施中!

現在、カメラのキタムラ 年賀状では 2013年12月12日 までに注文すると、おトクになる『早割』が実施されています!
まだ何もしてなかった!というかたはぜひご注文ください。
詳しくは カメラのキタムラ 年賀状 へ!

年賀状以外にもさまざまなポストカートが注文できます。
カメラのキタムラ オリジナルポストカード
カメラのキタムラ デザイナーズポストカード

フェンリルのオフィシャル Twitter アカウントでは、フェンリルプロダクトの最新情報などをつぶやいています。よろしければフォローしてください!

Copyright © 2019 Fenrir Inc. All rights reserved.