MSのOR マッパーのEntitiy Frameworkやってみた

非常に簡単だが便利さがまだ理解できない。おれも年かな?

class(tableスキーマ)を作成し、

DbContextクラスの派生クラスで DbSetを定義すれば、データの追加、削除、更新ができる。

EntitiyFramework-firsttime

この辺がわかりやすい。

  1. Entity Frameworkコードファーストで開発してみよう
  2. http://densan-labs.net/tech/codefirst/

コードファーストとは?

プレーンなSQLに慣れすぎて、いまいちコードファーストの便利さがわからない。

SQLだと意識して table indexにヒットするSQL文を書くけど、ORM(OR Mapper)で書くと、

詳細が見えないから、あんまり考えないプログラマーだと、すごい遅いSQL組むんじゃない?

コードファーストについてはここが詳しい

http://www.atmarkit.co.jp/fdotnet/ef4basic/ef4codefirst01/ef4codefirst01_01.html

SQLログいるんじゃない?

実際のSQLを解析しないとTable Indexとか外して遅くなりそうなので、SQLログ出力したいよね?

その場合はこうやってやるみたい。

Entity Framework の SQL ログ出力を行う

WordPressにFacebook公式プラグインの導入

Facebook 公式のWordpressプラグインを導入した。

わたしのテーマが改造がかなりされているようで、トップページにはでてこんだ。

また、自分のFBのWallに自動でポストされるようだがこの記事で実験してみよう。

が書くページにLike ボタンはでてくるようになった。

イメージ

wordpress-plugin010

手順

  1. Facebookの公式プラグインをインストールして、有効かする。
    wordpress-plugin020
  2. Facebookアプリを作るためFacebookのアプリページに行く
    wordpress-plugin030
  3. Facebook developers の画面から 新しいアプリを作成する。
    wordpress-plugin040
  4. Facebook アプリの名称を入力する。
    wordpress-plugin050
  5. セキュリティチェック画面がでてくるので、セキュリティコードを入れて続行する。
    wordpress-plugin060
  6. App ID, App Secret をメモしておく、後でWordpressに入力する。
    App Domain 、サイトURL、モバイルWebアプリのURLを入力する。
    変更保存する。
    wordpress-plugin070
  7. WordPress のFacebookプラグインに App ID, App Secret番号を入力する。
    wordpress-plugin080
  8. Like Buttonを表示する場所にチェックをいれる。
    wordpress-plugin090

サンプルの通り、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

業務向けOffice用アプリ(Apps for Office)「Appli-a(アプリア) -見積・請求書-」無料版公開

appli-a_0001

ようやく、Microsoftさんの審査が通って

エクシード・ワンが提供する、業務向けOffice用アプリ(Apps for Office)、「Appli-a(アプリア) -見積・請求書-」が2013年9月6日より Office ストアにアップされました。

長かった━━━━━━━━━━!!!

マジで長かったです。。。1ヶ月近く、申請→却下、申請→却下、申請→却下を繰り返したのではなかろうか?

 

弊社の環境では問題なく動くのですが、申請先の環境では動かなかったりなど、いろいろ苦労しました。

何が原因か分からなかったので、テスト動画まで頂いて分析することに・・・。

結局、Excelへの ”バインディングの設定タイミング” に問題があったことが分かったので、

修正して再申請(かれこれ7~8回目・・・、Microsoftさん、すみません)

で、あっけなく申請通ったw

Appli-a シリーズは、Webサーバ、DBサーバに「Windows Azure」を使っています。

メールアドレスさえお持ちでしたら使えますので、是非一度お試しください。

96x96

<Office ストア>

http://office.microsoft.com/ja-jp/store/

<Appli-a Webサイト>

http://www.appli-a.com/

 

これからも、業務向けOffice用アプリ「Appli-a シリーズ」を、もっと充実させていきます。

第二弾 「Appli-a -経費精算-」 ・・・今秋リリース予定

第三弾 「Appli-a -営業日報-」(仮) ・・・今冬リリース予定