Category: Facebookアプリ

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

概要 実際の製品としてアプリを作るには、いろんな細かいところを作らなければならないので、アプリを作成し検証してみました。 今回作成したサンプルは、後でGithub/CodeprexにUPする予定です。 詳細 ちなみに、今回はVisual Studio 2013 RC1 を使い開発しました。 なぜならば! 開発(プロジェクトテンプレート・デバック等)がかなり簡単だからだ!! 実際、わたしはこのコードを今日1日で書き上げることができた!!! だから、頑張れば誰でも出来るんです!!!(言い過ぎね!) わからなければ、わたしが、勉強会でやりますので来てくださいね、たぶん。 環境 Microsoft Office 2013 twitterBootstrap Visual Studio2013 RC1 with MVC5 Windows Azure, SQL Azure Login連携(Twitter, Facebook, Microsoft ID, Google) イメージ Office用アプリ(Apps for Office)の個別機能画面(見積、不動産管理、等の個別の機能) WebSiteの共通画面(認証、権限、顧客、等のマスター) ※Office用アプリと同じWebサーバだかASP.NET MVC5の機能により、Layout テンプレートを変更しているで、メニュー、レイアウトとか簡単に入れ替え可能 Visual Studio 2013 RC1 のプロジェクト及び、データベースの構成 ※Officeアプリ用のテンプレートを ASP.NET MVC5で作ります。 まずは機能要件を整理してみよう。 Tablet 等のモバイルにも対応するため、クッキーレス(cookieless)であることiPhone/iPad/Androidでも問題なく動作 様々なアカウントと連携したログイン機能を有すること(独自認証、Facebook, Google, Twitter, Microsoft ID) 整理されたメニューが必要 Office用アプリの個別機能画面(見積、不動産管理、等の個別の機能) WebSiteの共通画面(認証、権限、顧客、等のマスター) そして非機能要件も整理してみよう。 デザインがかっこいい!(twitterbootstrap) クラウドで動く(Windows Azure, Azure Web Site)とりあえず、簡単にWebサーバをスケールアウト(増設)できるように、にセッションなしで開発しておこう!! 細かいのは順次ブログにかきますが。ログインのイメージを掲載しておきます。 ログイン-Office用アプリの個別機能画面(見積、不動産管理、等の個別の機能) ログイン-WebSiteの共通画面(認証、権限、顧客、等のマスター)※Office用アプリと同じWebサーバだかASP.NET MVC5の機能により、Layout テンプレートを変更しているで、メニュー、レイアウトとか簡単に入れ替え可能 次回は細かいプログラム解説やるつもりです!!

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

前回 Bootstrap(CSS Framework) をFacebookアプリに適用する 前回に引き続き以下のサンプルをプログラムしています。 http://www.asp.net/mvc/tutorials/mvc-4/aspnet-mvc-facebook-birthday-app   サンプルのようにしてみたら、うまく誕生日一覧でできました!! 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のメニューをつける前 Bootstrapのメニューをつけた後 実際に書き方サンプルはここ 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 […]

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

途中であきてしまうかもしれないですが、 趣味と勉強がてら ASP.NETを使って、 よくありがちなサービスを作ってみよう。 「いらないものいっぱいあるので、無料あげます、 レンタルします。Facebookアプリ」 をつくってみます。 会社にいっぱいいらないものあるし、家にもいっぱいいらないものあるし。世の中エコなのだ。 たとえば、こんないらないサーバ ここからまずは写真(いらない物)の一覧のアップロードだな。 この辺のサンプルでもまず作ってみっか!! 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 起動 2. ファイル/新規作成/プロジェクト作成 ASP.NET MVC4 Web アプリケーション/OK 3. Facebookアプリケーション/OK 4. 結果、参照設定でいかのライブラリーが取り込まれます。 5.Facebook /新しいアプリを作成する 以下のサイトにいくと右上にボタンがあります。 https://developers.facebook.com/apps 6. アプリ名/続行 7. App ID,App Secret のキーをメモします。 8. Web.config に App ID,App Secret を入力します。 9. SSLを許可してプロジェクトURLをSSLにする。 10. FacebookのSecure Canvas URL(起動アプリ)も設定しておく 11. visaul Studio デバック起動(F5) すると以下のようにFacebookが起動します。 とりあえず、Facebookアプリの許可をします。 12. Facebookアプリが起動されます。またVisaul Stduioでデバックできます。