Office用アプリ(Apps for Office)にクールなデザイン(Twitterbootstrap)を適用し, Facebook, Google等とログイン連携してみた。

概要

実際の製品としてアプリを作るには、いろんな細かいところを作らなければならないので、アプリを作成し検証してみました。

今回作成したサンプルは、後でGithub/CodeprexにUPする予定です。

詳細

ちなみに、今回はVisual Studio 2013 RC1 を使い開発しました。

なぜならば! 開発(プロジェクトテンプレート・デバック等)がかなり簡単だからだ!!

実際、わたしはこのコードを今日1日で書き上げることができた!!!

だから、頑張れば誰でも出来るんです!!!(言い過ぎね!)

わからなければ、わたしが、勉強会でやりますので来てくださいね、たぶん。

環境

  1. Microsoft Office 2013
  2. twitterBootstrap
  3. Visual Studio2013 RC1 with MVC5
  4. Windows Azure, SQL Azure
  5. Login連携(Twitter, Facebook, Microsoft ID, Google)

イメージ

Office用アプリ(Apps for Office)の個別機能画面(見積、不動産管理、等の個別の機能)

MVC5_OFFICEAPPS_0010

WebSiteの共通画面(認証、権限、顧客、等のマスター)

※Office用アプリと同じWebサーバだかASP.NET MVC5の機能により、Layout テンプレートを変更しているで、メニュー、レイアウトとか簡単に入れ替え可能

MVC5_OFFICEAPPS_0020

Visual Studio 2013 RC1 のプロジェクト及び、データベースの構成

※Officeアプリ用のテンプレートを ASP.NET MVC5で作ります。

MVC5_OFFICEAPPS_0030

まずは機能要件を整理してみよう。

  1. Tablet 等のモバイルにも対応するため、クッキーレス(cookieless)であること
    iPhone/iPad/Androidでも問題なく動作
  2. 様々なアカウントと連携したログイン機能を有すること(独自認証、Facebook, Google, Twitter, Microsoft ID)
  3. 整理されたメニューが必要
  4. Office用アプリの個別機能画面(見積、不動産管理、等の個別の機能)
  5. WebSiteの共通画面(認証、権限、顧客、等のマスター)

そして非機能要件も整理してみよう。

  1. デザインがかっこいい!(twitterbootstrap)
  2. クラウドで動く(Windows Azure, Azure Web Site)
    とりあえず、簡単にWebサーバをスケールアウト(増設)できるように、にセッションなしで開発しておこう!!

細かいのは順次ブログにかきますが。ログインのイメージを掲載しておきます。

ログイン-Office用アプリの個別機能画面(見積、不動産管理、等の個別の機能)

MVC5_OFFICEAPPS_0040

ログイン-WebSiteの共通画面(認証、権限、顧客、等のマスター)
※Office用アプリと同じWebサーバだかASP.NET MVC5の機能により、Layout テンプレートを変更しているで、メニュー、レイアウトとか簡単に入れ替え可能

MVC5_OFFICEAPPS_0050

次回は細かいプログラム解説やるつもりです!!

サンプルの通り、Bootstrap と MVC4で一覧ができた!

前回

Bootstrap(CSS Framework) をFacebookアプリに適用する

前回に引き続き以下のサンプルをプログラムしています。

http://www.asp.net/mvc/tutorials/mvc-4/aspnet-mvc-facebook-birthday-app

 

サンプルのようにしてみたら、うまく誕生日一覧でできました!!

FB_Bootstrap020

MVCのポイントは ASP.NET MVC4 は DisplayTemplatesフォルダーいうところにテンプレートを置くのだーMVCはいろんなルールが、あるなーって思った!

http://www.atmarkit.co.jp/fdotnet/aspnetmvc3/aspnetmvc3_07/aspnetmvc3_07_02.html

あとは、作成後、これを読んどけば、ASP.NET MVCについてよくわかります。

連載:ASP.NET MVC入門【バージョン3対応】

 

次回は、本格的にFacebookアプリの機能を作りこんでみよう。

Bootstrap(CSS Framework) をFacebookアプリに適用する

Facebook アプリのイメージをかっこよくするために、Bootstrap(CSS Framework)を適用します。

Bootstrapのメニューをつける前

FB_VS2013_130

Bootstrapのメニューをつけた後

FB_Bootstrap010

実際に書き方サンプルはここ

http://www.asp.net/mvc/tutorials/mvc-4/aspnet-mvc-facebook-birthday-app

Bootstrapについては瀬尾さんが詳しく説明しています。

http://www.asp.net/mvc/tutorials/mvc-4/aspnet-mvc-facebook-birthday-app

最新のBootstrapを入れると、3.0.0が現在入るので、書き方がサンプルと違うので。

以下のようにパッケージマネジャーコンソールから 2.2.2のバージョン指定でインストールすること。

PM> Install-Package Twitter.Bootstrap -Version 2.2.2
‘Twitter.Bootstrap 2.2.2’ をインストールしています。
‘Twitter.Bootstrap 2.2.2’ が正常にインストールされました。
‘Twitter.Bootstrap 2.2.2’ を FB001 に追加しています。
‘Twitter.Bootstrap 2.2.2’ が FB001 に正常に追加されました。

App_Start/BundleConfig.cs

using System.Web;
using System.Web.Optimization;

namespace FB001
{
    public class BundleConfig
    {
        // Bundling の詳細については、http://go.microsoft.com/fwlink/?LinkId=254725 を参照してください
        public static void RegisterBundles(BundleCollection bundles)
        {
            bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                        "~/Scripts/jquery-{version}.js"));

            bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include(
                        "~/Scripts/jquery-ui-{version}.js"));

            bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                        "~/Scripts/jquery.unobtrusive*",
                        "~/Scripts/jquery.validate*"));

            // 開発と学習には、Modernizr の開発バージョンを使用します。次に、実稼働の準備が
            // できたら、http://modernizr.com にあるビルド ツールを使用して、必要なテストのみを選択します。
            bundles.Add(new ScriptBundle("~/bundles/modernizr").Include("~/Scripts/modernizr-*"));
//変更開始
            bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/site.css", "~/Content/bootstrap.css", "~/Content/bootstrap-responsive.css"));
//変更終了

//削除開始

            //bundles.Add(new StyleBundle("~/Content/themes/base/css").Include(
            //            "~/Content/themes/base/jquery.ui.core.css",
            //            "~/Content/themes/base/jquery.ui.resizable.css",
            //            "~/Content/themes/base/jquery.ui.selectable.css",
            //            "~/Content/themes/base/jquery.ui.accordion.css",
            //            "~/Content/themes/base/jquery.ui.autocomplete.css",
            //            "~/Content/themes/base/jquery.ui.button.css",
            //            "~/Content/themes/base/jquery.ui.dialog.css",
            //            "~/Content/themes/base/jquery.ui.slider.css",
            //            "~/Content/themes/base/jquery.ui.tabs.css",
            //            "~/Content/themes/base/jquery.ui.datepicker.css",
            //            "~/Content/themes/base/jquery.ui.progressbar.css",
            //            "~/Content/themes/base/jquery.ui.theme.css"));
//削除終了

//追加開始
            bundles.Add(new ScriptBundle("~/bundles/app").Include("~/Scripts/bootstrap.js"));
//追加終了

        }
    }
}

Content/Site.css

body {
    font-family: "Segoe UI", Arial;
    margin: 0;
    padding: 0;
}

header {
    overflow: hidden;
    height: 229px;
    padding: 20px;
    margin: 0;
    width: 700px;
}

    header h1 {
        font-size: 80px;
        color: #004C66;
        /*削除*/
        /*margin: 0;*/
        padding-top: 20px;
        font-weight: normal;
    }

    header h2 {
        font-size: 25px;
        color: #004C66;
        margin: 0;
        font-weight: normal;
    }

Views/Shared/_Layout.cshtml

@*追加開始*@
@using Microsoft.AspNet.Mvc.Facebook
@*追加終了*@
<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta charset="utf-8" />
    <title>@ViewBag.Title - マイ ASP.NET MVC アプリケーション</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
@*追加開始*@
    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/app")
@*追加終了*@
</head>
<body>
    <script>
        window.fbAsyncInit = function () {
            FB.init({
                appId: '@Microsoft.AspNet.Mvc.Facebook.GlobalFacebookConfiguration.Configuration.AppId', // App ID
                status: true, // ログイン状態の確認
                cookie: true, // Cookie を有効にして、サーバーがセッションにアクセスすることを許可する
                xfbml: true  // XFBML の解析
            });
        };

        // SDK を非同期に読み込む
        (function (d) {
            var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
            if (d.getElementById(id)) { return; }
            js = d.createElement('script'); js.id = id; js.async = true;
            js.src = "//connect.facebook.net/en_US/all.js";
            ref.parentNode.insertBefore(js, ref);
        }(document));
    </script>

    <div id="wrapper">
@*追加開始*@
        <div class="navbar">
            <div class="navbar-inner">
                <div class="container">
                    <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </a>
                    <a class="brand" target="_top" href="@GlobalFacebookConfiguration.Configuration.AppUrl@Url.Action("Index", "Home")">Birthday App</a>
                    <div class="nav-collapse collapse">
                        <ul class="nav">
                            <li><a target="_top" href="@GlobalFacebookConfiguration.Configuration.AppUrl@Url.Action("Index", "Home")">Home</a></li>
                            <li><a href="@Url.Action("About", "Home")">About</a></li>
                        </ul>
                        <form class="navbar-form pull-right" action="@Url.Action("Search", "Home")" method="get">
                            <input class="span2" type="text" name="friendName" placeholder="Friend's name" />
                            <button type="submit" class="btn">Search</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
@*追加終了*@


        <header id="topHeader">
@*追加開始*@
            <h1>Birthday App</h1>
            <h2>Time to buy your friend a birthday present.</h2>
@*追加終了*@
        </header>
        @RenderBody()
        <footer>
            <p>© @DateTime.Now.Year - マイ ASP.NET MVC アプリケーション</p>
        </footer>
    </div>
    @Scripts.Render("~/bundles/jquery")
    @RenderSection("scripts", required: false)
</body>
</html>

「いらないものいっぱいあるので、無料あげます、 レンタルします。Facebookアプリ」 at ASP.NET MVC

途中であきてしまうかもしれないですが、

趣味と勉強がてら ASP.NETを使って、

よくありがちなサービスを作ってみよう。

「いらないものいっぱいあるので、無料あげます、 レンタルします。Facebookアプリ」

をつくってみます。

会社にいっぱいいらないものあるし、家にもいっぱいいらないものあるし。世の中エコなのだ。

たとえば、こんないらないサーバ

DSC_0182

ここからまずは写真(いらない物)の一覧のアップロードだな。

FB_VS2013_130

この辺のサンプルでもまず作ってみっか!!

http://www.asp.net/mvc/tutorials/mvc-4/aspnet-mvc-facebook-birthday-app

Visaul Studio 2013 Preview でFacebook アプリを作ってデバックしてみました。

ポイント

以下のURLの内容そのままやってみました。

Visual Studio 2012 と ASP.NET で Facebook アプリを作る

いくつかバージョンアップ等で修正しないとできないので明記しておきます。

  • Facebookはhttpではなくhttpsになっているので、デバック時にhttpsで行わないといけない。
  • FacebookのAppid, SecurityIDを書くところがWeb.configに移動している。

ではいってみよう(手順)

1.  Visual Studio 2013 Preview 起動

FB_VS2013_010

2. ファイル/新規作成/プロジェクト作成

ASP.NET MVC4 Web アプリケーション/OK

FB_VS2013_020

3. Facebookアプリケーション/OK

FB_VS2013_030

4. 結果、参照設定でいかのライブラリーが取り込まれます。

FB_VS2013_040

5.Facebook /新しいアプリを作成する

以下のサイトにいくと右上にボタンがあります。

https://developers.facebook.com/apps

FB_VS2013_050

6. アプリ名/続行

FB_VS2013_060

7. App ID,App Secret のキーをメモします。

FB_VS2013_070

8. Web.config に App ID,App Secret を入力します。

FB_VS2013_090

9. SSLを許可してプロジェクトURLをSSLにする。

FB_VS2013_100

10. FacebookのSecure Canvas URL(起動アプリ)も設定しておく

FB_VS2013_110

11. visaul Studio デバック起動(F5) すると以下のようにFacebookが起動します。

とりあえず、Facebookアプリの許可をします。

FB_VS2013_120

12. Facebookアプリが起動されます。またVisaul Stduioでデバックできます。

FB_VS2013_130