+（AppStore *）Timera：アプリケーションのアーキテクチャと開発機能

今度は、timeraアプリについて一般の人に伝えましょう。 今日からアプリストアでダウンロードできます。

iOS開発者のHeximal（Pavel）がtimeraアーキテクチャについて説明します 。彼は今しか読んでいないので、彼の投稿を公開しています。



->この投稿では、Timeraという言葉から非常にオリジナルのTimeramaという名前で、興味深く、有望なプロジェクトへのささやかな参加について書いていきます。 幸いなことに、私はスタートアップ管理者がiOS開発者の欠員の候補を探していたまさにその瞬間に、新しい開発の地平線を探す活発な段階にいました。 プロジェクトの本質は非常にシンプルです-視覚的なプレゼンテーションとアーキテクチャの説明は、カットの下の投稿のメインイラストで見ることができます。











ユーザーには、過去の写真とスマートフォンのカメラで撮影した写真を組み合わせて、一時的なトンネルを作成するツールが表示されます。 私はこのアイデアが本当に好きで、すぐに開発プロセスに統合し始めました。その間、多くの困難で興味深いタスクに直面して克服しなければなりませんでした。



まず、グローバルアーキテクチャについて少しお話ししたいと思います。 中央リンクは、バックエンド、フロントエンド、データストレージ、web-apiの機能を実行するサーバーです。 サーバースタッフィングとは関係がないので、詳細には説明しません。 実稼働バージョンはMicrosoftのクラウドホスティングで実行されているとしか言えず、サーバー側の実装には、現在の古典的なスタックであるIIS + MSSQL + ASP.NETを使用しました



フロントエンドシステム（ウェブサイトwww.timera.com ）は、ユーザーに他のユーザーの写真を表示する機能を提供し、ソーシャルネットワークの機能も備えています。他のソーシャルネットワークには、好きな機能、コメントを残す機能、共有機能があります。 また、ウェブサイトのユーザーは古い写真をアップロードする機会があります。 これは何を意味し、何のためですか？ さらにそれについて。



Webサイトに加えて、アーキテクチャの不可欠な部分はモバイルアプリケーションです。 今日では、最も人気のある2つのプラットフォーム-もちろん、AndroidとiOSに実装されています。 アプリケーションの機能は、Webサイトが持つことのできない唯一の機能を除き、Webサイトの機能をほぼ完全に再現します。 それは時間についてです。



「タイマー」という用語は、歴史的なコラージュのジャンルを指すために使用されます。 彼は新しいものではありません。 結局のところ、これらの作品は長い間インターネットをサーフィンしており、それらの多くは非常にバイラルになりました。 1906年のサンフランシスコでの地震についてのスライドショーで、Sergei Larenkovのプロジェクト "Time of Connections"またはSean Claverのプロジェクトを思い出すだけです。 実際、アプリケーションの名前は、プロジェクトの創設者であるDavid Webbによって造られたもので、単に「タイマー」という用語を短縮したものです。 ここで、タイマー撮影自体の仕組みと、このプロセスがTimeraモバイルアプリケーションでどのように実装されるかを少し説明します。

エッフェル塔の古い写真があるとします。 個人的には1889年の写真が好きで、その上に塔が最初のレベルまでしか建てられていません。 タイムラスナップショットを作成するには、古い写真が撮影された角度を見つけ、写真を撮り、コンピューターに「追い越し」、グラフィックエディターでさまざまなフィルターとグラデーションを使用して組み合わせる必要があります。 タスクは、たとえば、すべての人のためではありません。 しかし、Timeramaアプリケーションのすべてのユーザーにとって手頃な価格です。 全体のプロセスは可能な限り簡略化されており、非常に面白そうに見えることさえあります（少なくとも、私は個人的にそう考えています）。



ユーザーは、ある場所で利用可能な古い写真が青いピンで表示される地図の画面を開きます。 当然、このアプリケーションにより、ユーザーを自動的に特定し、オブジェクトを表示することができます。 ユーザーがタイマーグラフの対象を決定すると、カメラ付きの画面が起動します。 この画面には、カメラからのライブ画像と古い写真の半透明画像が同時に表示されます（透明度を変更できます）。 ユーザーは、画面上の古い写真を移動したり、タッチスクリーン技術の機能を使用してサイズを変更したりすることができます。 写真が撮影されると、より正確な登録画面が表示されます。







最も興味深いのは、タイムトンネル（タイムトンネル）が構成されている3番目の画面から始まります。 ここで、ユーザーは次のようなさまざまなツールを使用してツールバーにアクセスできます。

-タイムトンネルの境界の透明度とシャープネスのスライダー（透明度と柔らかさ）

-軸の周りのタイムトンネルの回転

-スワップと呼ばれる機能（古い写真と新しい写真を交換します。つまり、古い写真は背景に移動し、新しい写真は前面に移動します）

-タイムトンネルの形状の変更：楕円形または長方形

-収穫



すべてのモードで、画面ジェスチャーを使用してタイムトンネルのサイズと位置を変更できます。



まばらに見えるでしょうか？ おそらく、しかし、このツールのセットを使用しても、非常に優れた構成が作成されます。 それに加えて、この機能を拡張する予定です。これについては十分なアイデアがあります。

編集後、結果の画像が表示されます。サーバーにアップロードしたり、ソーシャルネットワークで共有したりできます。 サーバーにアップロードするときに、作業を公開したくない場合は、プライバシーフラグを設定できます。

ここで、主なユースケース（タイマーグラフティング）の作成中に生じた困難について、いくつかのニュアンスをお伝えしたいと思います。



まず、不快な驚きは、UIDeviceOrientation型の2つの値の存在でした。 以前は、iOSの加速度計とデバイスの向きの概念を使用していたため、可能なデバイスの向きの数は4つでした：UIDeviceOrientationPortrait、UIDeviceOrientationPortraitUpsideDown、UIDeviceOrientationLandscapeLeft、UIDeviceOrientationLandscapeRight。 古い写真が上下逆になったり、横になったりしないように、オーバーレイ画像を適切に方向づける必要があるため、撮影画面ではデバイスの方向が非常に重要です。 判明したように、デバイスにはUIDeviceOrientationFaceUpとUIDeviceOrientationFaceDownの2つの位置があります。 この事実を認識し、プログラムの不適切な動作の理由を認識するために、多くの人的時間が費やされました。



撮影画面に関連するもう1つの興味深い点は、デバイスの側面にある音量ボタンの問題です。標準のカメラアプリケーションでは、音量ボタンを押すとシャッターが作動し、非常に便利です。

さらに、技術の問題。 何らかの理由で、撮影画面でこれらのボタンは、どんなトリックを実行しても反応を引き起こさず、メディアシステムからの通知の強制的な「リスニング」も役に立たなかった。

これはほぼこのように行われます。 ViewControllerは、サブスクライブしてボリューム変更通知を受信します。



[[NSNotificationCenter defaultCenter]

addObserver:self

selector:@selector(volumeChanged:)

name:@"AVSystemController_SystemVolumeDidChangeNotification"

object:nil];







後で判明したように、これはユーザーが古い写真の透明度を変更し、通常それを見ることができるoverlayViewを使用しているためです。 他の一般的な写真アプリケーションでも、まったく同じ動作が見つかりました。 同時に、写真撮影に標準のコントロールを使用するアプリケーションは、音量ボタンを押しても反応がありません。

最大の開発時間は、タイムトンネル効果のある画面の実装に費やされました。 タイムトンネルアルゴリズムは、元の画像から勾配ステンシルを減算する方法に基づいています。マスク上の画像ピクセルが暗いほど、マスクされた画像の同じピクセルの透明度値が低くなります。 すべての魔法は、標準のCoreGraphicsフレームワークとCGImageCreateWithMask関数を使用して実装されます。この関数は、上記の2つの画像をCGImageRefオブジェクトとして入力に送信します。



タイマー撮影の形成は3段階で行われます。 背景の画像に「画像A」、前景の画像に「画像B」の指定を使用することに同意しましょう。



1.グラデーションエッジを持つ長方形のマスクが描画され、イメージBに適用されます。これは、一時的なトンネルがどこでも急激に切れないようにするために行われました。 たとえば、地平線が散らばっている場合、ユーザーは「画像B」を回転させることができます。 したがって、マスクは次のパラメーターに基づいて形成されます。「画像B」のサイズ、「画像B」の回転角度、境界線のぼかし量（スライダーで調整可能）。 結果のマスクは「画像B」から差し引かれ、結果はぼやけたエッジを持つ「画像B」になります。







私は、グラフィックコンテキストの座標行列の変換を通じて同じCoreGraphicsを使用して実行されたグラデーションの広がりを大幅に調整する必要がありました。



CGFloat angleInRadians = angle * (M_PI / 180);



CGContextRotateCTM(bmContext, angleInRadians);









同時に、予期せぬ効果が発生しました。デフォルトでは、ページは画像の左上を回転しているためです。







ヒント検索が失敗した後、stackoverflowについても質問しました。 しかし、回答が得られなかったため、解決策を経験的に見つけ、自分の質問に対する回答を残しました（http://stackoverflow.com/questions/19219855/uiimageview-get-transformed-uiimage）



もう1つの驚きは、マスクに長方形のグラデーションを描画する既製の方法がないことです（図のように）。 CoreGraphicsには楕円の解決策がありますが、それは私が発明しなければならなかった丸いエッジを持つ長方形のものでした（http://stackoverflow.com/questions/18918382/coregraphics-rectangle-gradient-別の答え自体）。



2.グラデーションマスクが描画され、第1段階の処理の結果として取得された「画像B」に適用されます。 最初の段階とは異なり、ユーザーはマスクのタイプを指定できます：長方形または楕円形に加えて、同じマスク寸法、回転角度、境界のぼかしの程度。 ユーザーは、画面上の指でマスクのサイズと位置を変更します。 したがって、時間トンネルの画像が形成されます。







3.最後の段階で、結果のタイムトンネルの画像は、「画像A」の目的の座標に描画されます。







CoreGraphicsは世界で最も生産的なものとはほど遠いことを言わなければなりません。これは、iPhone 4以下から始まる古いデバイスで特に顕著です。 この点で、タイマー撮影の機能を最適化するために多くの対策が講じられました。 しかし、これについては第2部で説明します。



私はあなたに興味があることを願っています。 アプリをダウンロードし 、評価してフィードバックを書いてください。

あなたがそれを好めば、私は招待を拒否しません。 コメントに返信し、アカウントから公開します。

質問やコメントを待っています。