マーケティングの観点から、ソーシャルネットワークのさまざまな「グッズ」に常に興味がありました。 つまり、この次のナンセンスがどれだけ早く大量に使用され、この効果を達成するためにどれだけの労力が費やされるかということです。 以下に、前回のvkomg.comの例で学んだことの結果を示します。
数年間、私はウェブ開発に焦点を当てたアメリカの会社でフリーランサーとして働いてきました。 この作業は、平均的なフリーランスデスクにとって非常に標準的なものです。プロジェクトの以前の開発者から継承された曲がったコード、CMSのバン、プラグイン、時には大規模なスタートアップを完成させます。 もちろん、これはすべて良いことです。 しかし、小さな一見したところ、不要なものがより多くの利益をもたらすことは長い間知られています。 そのため、ある晴れた日、Facebookで新しいプロファイルを見たときに、
数日前、VKontakteのメイン写真の近くで写真とまったく同じブロックが表示されるのを見たとき、VKontakteの既存のFacebookプロジェクトを最初の日にリメイクするというアイデアを得ました。
米国で非常に興味深い結果を達成し、それを促進するために私のお金を出さずに、自分のプロフィールの1つのリンクから始めて、ロシアがどのような結果を示すか非常に興味深いものになりました。
投稿の継続における特定の数、履歴、結果、およびコードの断片。
UPD：Habraffectのアクション。 約束された現実の最大負荷の不一致に対する技術的サポートを誓います。
UPD2：ホスティング事業者が修正しました。 サーバーの状態は良好です。
どこから始めますか？
Facebookの最初のオプションを開発するための言語としてPHPが選択されました。 すでに既製のコードの荷物があり、初期の他のアナログの発売が主要な要件の1つでした。 それがこの言語を選択する主な理由になったものです。
主な機能と要件は次のとおりです。
- 進行状況インジケータ付きのAjax写真ファイルのアップロード。
- ユーザーの利便性を高めるためにインターフェイス要素をプリロードします。
- 写真にマスクを簡単に配置できます。
- プレビュー
- 既製の写真を1つのアーカイブにダウンロードする機能。
- ページをリロードせずに写真を水平方向に反映する機能。
- 広告への重要な投資がない。
マスクとファイル形式
もちろん、心臓は切り抜き写真スクリプトからはほど遠いですが、ユーザーが将来のユーザー画像として使用される写真の正確な部分を視覚的に選択できるようにするJSマスクです。
もちろん、他の怠け者の開発者と同様に、必要な機能に合わせて最終処理できる既製のスクリプトを急いで探しました。 さまざまな検索エンジンが発行した数十のページを表示した後、独自のマスクをゼロから作成する必要があることが明らかになりました。 既製のソリューションはすべて非常に曲がっていたか、独自のスクリプトをゼロから作成するよりも、それらを完成させるのに時間がかかりませんでした。 すべてが狂ったように急いで行われたため、jQueryの通常の適切なプラグインとしてのマスクの設計については疑問がありませんでした。 主な機能が完成したら、jQueryの通常のプラグインとしてスクリプトを最初から書き直して、後続の製品で簡単に使用できるようにする予定です。
次に興味深い、しかしかなり単純な解決すべき課題は、写真の水平反射でした。 ページをリロードせずに、サーバー上の写真の追加の前処理を行わずに、すべてのブラウザーをサポートすることなく、これを行う必要がありました。 解決策はすぐに実現しました。 このcssクラスを写真コンテナに追加するだけで、反映が行われます。
.flip-x {
-moz-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
-o-transform: scaleX(-1); /* Opera */
transform: scaleX(-1);
filter: fliph; /* IE */
}
実際には、この方法はOperaやIEを含むすべてのブラウザーでうまく機能すると確信していました。 ただし、この方法には大きな欠点が1つあります。 このクラスをimgタグに適用した場合、ブラウザで画像を保存しようとすると、未反映のオリジナルが保存されます。
サーバー画像の変換はすべてImageMagickを使用して実行されます。 たとえば、水平反射は次のように実行されます。
system("convert -flop /path/to/file/original.jpg /path/to/file/tmp.jpg");
また、ImageMagickのおかげで、膨大な数のフォーマットのサポートを簡単に実現できます。 標準のjpg、gif、pngだけではありません。 ユーザーは結果としてjpgを受け取るので、写真のアップロード段階でもコンバーターを使用するのは理にかなっています。
system("convert /path/to/file/original.ext /path/to/file/out.jpg",$result);
if ($result===0) {
// .
}
ブートローダー
写真をアップロードするプロセスも重要なポイントであり、十分な注意を払う必要があります。 すべてがひどく急いで作成されたため、ブートローダーの最初のバージョンは、ファイル選択フィールドと送信ボタンの2つの要素を含む基本的なenctype = "multipart / form-data"フォームでした。 すでに1日目に、ファイルをダウンロードできないことを訴えるメッセージがユーザーから届き始めました。 メッセージを分析した結果、メッセージは次の2つのカテゴリに分類できることがわかりました。
- 「クリックしてファイルをダウンロードします。最初にファイルを選択する必要があると書かれていますが、何もダウンロードできない場合はどのように選択しますか？」 （はい...まったく無意味ですが、ユーザーの愚かさを過小評価しないでください、これらの人々はクリックしました最初のフィールドでファイルを選択せずに送信ボタンをクリックします。最初に「写真をアップロード」ボタンをクリックする必要があると考えていたため、理解できないという不可避なエラーが発生しました。
- 「ファイルを選択し、「写真をアップロード」をクリックすると、すべてがフリーズします。 なんで？ （ユーザーがサイズが大きすぎるファイルをダウンロードしようとしている、または接続速度がかなり遅い）
この問題の解決策は明らかです。 通常のブートローダーの欠如は使いやすさを損なうという事実も最初から明らかでしたが、ラッシュはいつものようにすべてを台無しにします。 重要なのは、一見、瞬間は将来多くの問題を引き起こすでしょう。
状況を改善するために、 UploadifyというjQueryプラグインが使用されました 。
このプラグインを使用すると、ダウンロードプロセスのインジケーターを使用してファイルのダウンロードを簡単に実装できます。 この方法はかなり標準的です。非同期データ転送にフラッシュ上の要素を使用します。 このプラグインの主な利点は、カスタマイズの容易さ（膨大な数のパラメーターとコールバック）と、CSSを使用して外観をカスタマイズできることです。
嫌いのフラッシュオプションも検討する必要があります。 （Flashを使用しないユーザーには同じ標準フォームを使用します）。 検索エンジンへの最初のクエリは、興味深い結果を生み出します。考えられないあらゆる種類の方法でFlashのバージョンを決定するためのライブラリです 。
HTMLには、通常のマルチパートとflash要素を持つフォームの2つのフォームが同時に含まれます。 デフォルトでは、Flashフォームはユーザーの目から隠されています。
if(FlashDetect.installed) {
$('#plainform').hide();
$('#ajaxform').show();
}
したがって、エンドユーザーがFlashを使用している場合、通常のフォームはUploadifyフォームに簡単に置き換えられます。
プレビュー
プレビューも、平均的なユーザーの生活を楽にするものです。 アイデアは簡単です。画像を生成し、CSSを使用して画像をユニバーサル背景ブランクに配置します。 詳細は説明しません。 ここで言及する価値があるのは、ポップアップスクリプトだけです。 ごく最近、私はTopUpという製品に出くわしました 。これは非常に説得力があり、長い使用履歴にわたって単一の問題を引き起こすことはありませんでした。
プリロード
フォームを含むページでのユーザーエクスペリエンスを向上させるために、ページで使用されるすべての画像にマスクを事前に読み込むことが決定されました（たとえば、ユーザーの前に読み込まずにポップアップウィンドウが即座に表示されるように、すべてのTopUpメディアリソース）。 さらに、これらの要素のロードは、ローダーでページをレンダリングする速度に影響を与えません。 最初に思いついたのは、JSを使用して写真をアップロードすることでした。
function preload(sources)
{
var images = [];
for (i = 0, length = sources.length; i < length; ++i) {
images[i] = new Image();
images[i].src = sources[i];
}
}
$(window).load(function() {
$("#preload").attr('src','preload-step2.php');
preload([
"res/images/preview.png",
"res/images/top_up/dashboard/sprite.png",
"res/images/top_up/dashboard/close_link.png",
"res/images/top_up/dashboard/bottom_left.png",
"res/images/top_up/dashboard/top_right.png",
"res/images/top_up/dashboard/bottom_right.png",
..........................
..........................
"res/images/btn-flip.gif"]
)
});
透かし
次に、半透明の透かしを作成するという疑問が生じました。 GDを使用して透かしを実装するのに必要な操作の回数を思い出して、この目的で同じImageMagickを使用することにしました。
system("composite -gravity south -alpha on /path/to/file/watermark.png /path/to/file/profile.jpg /path/to/file/profile.jpg');
古いファイルを削除する
ユーザーはすぐに結果のアーカイブを取得しないため、しばらくしてから、古い一時ファイルを削除するためのスクリプトを提供する必要があります。 ユーザーごとに、このセッションのすべてのファイルを含む一時ディレクトリが作成されます。 タスク：24時間以上前に作成されたすべてのディレクトリを毎日削除します。
#!/bin/bash
for i in `find /path/to/dirs/ -maxdepth 1 -type d -mtime +1 -print`; do rm -rf $i; done
フィギュア
そして今、最も興味深いのは結果です。
Facebookのオリジナルの宣伝に労力やお金は費やされていません。 私たちがしたことは、自分のユーザー写真を変更し、友人がレビューできるようにニュースフィードにURLを公開することだけでした。 しかし、昨日のFacebookのオリジナルは1日あたり4,000人のユニークビジターに達しました（1か月未満のプロジェクトでは非常に控えめな結果です）。
VKOMGも同様の方法で開始しました。 独自のアバターの変更とURLによるステータスの公開+ 25ルーブルの予算でターゲットを絞った広告1つ。公式VKページ（外部URLではなくVKページ）への紹介は50件のみでした。
それにもかかわらず、ここに4日間の作業に対する控えめな結果を示します。
- 1日目-24人のユニークビジター、56人のアバターが作成されました。
- 2日目-246人のユーザー、542人のアバターが作成されました。
- 3日目-440人のユニークユーザー、1408人のアバターが作成されました
- 4日目-890ユーザー-2486人のアバターが作成されました。