952 views(since 2013/10/08)

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

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

Filed Under: .NETFacebookJavaScriptOffice Add-insOffice365 App

About the Author

野呂清二(ご連絡はこちらまで (http://www.exceedone.co.jp/inquiry/)

Leave a Reply




If you want a picture to show with your comment, go get a Gravatar.