Mevy のプロモーションサイトを作成したときの記録

2013年12月に Mevy のプロモーションサイト を作成したときの記録。
アプリのプロモーションサイトを作るときの参考になれば。

環境

Windows Azure Web サイト
ASP.NET MVC 4 (ASP.NET Web アプリケーション > MVC 認証無し)

疑似 Mevy 部分(左側)

基本的には Ajax で Twitter API から json を取得してリストにつっこむだけ。
Twitter API には OAuth 認証が必要なのでそこだけ AsyncOAuth を使ってサーバーでやってあげる。

サーバー (HomeController)

public async Task<string> Timeline()// コントローラーのメソッドにも async を付けることができる
{
    OAuthUtility.ComputeHash = (key, buffer) => { using (var hmac = new HMACSHA1(key)) { return hmac.ComputeHash(buffer); } };
    var client = new HttpClient(new OAuthMessageHandler("ConsumerKey", "ConsumerSecret", new AccessToken("AccessToken", "AccessTokenSecret")));
    return await client.GetStringAsync("https://api.twitter.com/1.1/search/tweets.json?q=%23mevy");
}

クライアント

<ul class="timeline"></ul>
$(function () {
    $.getJSON("/home/timeline", function (data) {
        var ul = $(".timeline");
        $.each(data.statuses, function (key, tweet) {
            var li = $("<li>").addClass("tweet");
            // 中身を作る
            li.appendTo(ul);
        });
    })
    .fail(function () {
        $(".timeline").append($("<li>").html("ツイートを取得できませんでした。"));
    });
});
</script>

レイアウト

縦100%表示にするには html, body など親要素にも全て height:100% をする。
margin, padding も親要素から全て 0 に。

配置は CSS の flexbox を使って調整。ブラウザによって違うので3つ書く必要がある。

display: flexbox;
display: flex;
display: -webkit-flex;

コンテンツ(右側)

画像を用意すると栄える。
文字は多くなるとごちゃっとするので最低限に。

画像の合成

Photoshop を使って、写真やイラストの中の「面」に画像を貼り付ける方法 を使って
Surface 画像にスクリーンショットを埋め込むとそれっぽい。

各機能アイコン

その機能を表すアイコンがあると文字だけで箇条書きされるより分かりやすいし区切りが付くので見やすい。
自分で描くのは大変なので Segoe UI Symbol などを使って描画したものをスクリーンショット。
AppBarButton だとプロパティウィンドウからプルダウンで選択できるので楽?

見出しの下線

padding をある程度開けて下線を引くと見栄えが良かった。
h1 より h2 が目立たなくなるように形状や色を変える。

インストールページへの誘導

表示されている範囲に1つは置く。


カテゴリー: ASP.NET パーマリンク