「iOS, Android 開発者のための .NET 開発、Windows ストア アプリ開発」(10/23)、ご来場ありがとうございました！
皆様、こんにちは！
昨日はお忙しいところ、エバンジェリスト セミナー『.NET Week ～ .NET テクノロジを語る 1 週間～』 (10/23) ― iOS, Android 開発者のための .NET 開発、Windows ストア アプリ開発 にご来場いただきありがとうございました。
ちょっと時間が短くてすべてをご紹介しきれませんでしたが、楽しんでいただけたようでよかったです。
少しフォローアップをさせてください。
今回、皆さんにご紹介した内容は、まもなくビデオで公開になりますので、ぜひご覧ください。そのURLは別途ご紹介します。
1． 今回のデモの前提（すなわちアプリ作成の前提）となるURL
ブックマークしておいて戴きたいのは下記の5つです。
Windows Azure Mobile Services Tutorial
https://www.windowsazure.com/ja-jp/develop/mobile/tutorials/get-started/
Windows ストアアプリ
https://msdn.microsoft.com/ja-JP/windows/apps
Live Connect Portal
https://account.live.com/developers/applications/index
Google Apps
Apple Developer Portal
https://developer.apple.com/jp/programs/ios/
2．HTML5クライアントのソースコードについて
チュートリアルを見ると、
注
モバイル サービスにアクセスして app.js ファイルにあるデータを照会および挿入するコードを確認できます。
とありますが、これは古い記述で現在は、page.js になっています。ご注意ください。
昨日の私のデモではMacの方でPythonでターミナルからサーバーを起動し、Safari の https://localhost:8000/ からアクセスしています。
テキストエディット等のツールでエディットして、下記のLogin メソッドの”Twitter”の文字列を、”Facebook”に変えるだけで、認証プロバイダーは変わります。
チュートリアルは改行ががいい加減なので、こちらで試してみてください。
1: $(function() {
2: var client = new WindowsAzure.MobileServiceClient('https://(任意の名前).azure-mobile.net/', '（自動生成されたキー）'),
3: todoItemTable = client.getTable('todoitem');
4:
5: // Read current data and rebuild UI.
6: // If you plan to generate complex UIs like this, consider using a JavaScript templating library.
7: function refreshTodoItems() {
8: var query = todoItemTable.where({ complete: false });
9:
10: query.read().then(function(todoItems) {
11: var listItems = $.map(todoItems, function(item) {
12: return $('<li>')
13: .attr('data-todoitem-id', item.id)
14: .append($('<button class="item-delete">Delete</button>'))
15: .append($('<input type="checkbox" class="item-complete">').prop('checked', item.complete))
16: .append($('<div>').append($('<input class="item-text">').val(item.text)));
17: });
18:
19: $('#todo-items').empty().append(listItems).toggle(listItems.length > 0);
20: $('#summary').html('<strong>' + todoItems.length + '</strong> item(s)');
21: }, handleError);
22: }
23:
24: function handleError(error) {
25: var text = error + (error.request ? ' - ' + error.request.status : '');
26: $('#errorlog').append($('<li>').text(text));
27: }
28:
29: function getTodoItemId(formElement) {
30: return Number($(formElement).closest('li').attr('data-todoitem-id'));
31: }
32:
33: // Handle insert
34: $('#add-item').submit(function(evt) {
35: var textbox = $('#new-item-text'),
36: itemText = textbox.val();
37: if (itemText !== '') {
38: todoItemTable.insert({ text: itemText, complete: false }).then(refreshTodoItems, handleError);
39: }
40: textbox.val('').focus();
41: evt.preventDefault();
42: });
43:
44: // Handle update
45: $(document.body).on('change', '.item-text', function() {
46: var newText = $(this).val();
47: todoItemTable.update({ id: getTodoItemId(this), text: newText }).then(null, handleError);
48: });
49:
50: $(document.body).on('change', '.item-complete', function() {
51: var isComplete = $(this).prop('checked');
52: todoItemTable.update({ id: getTodoItemId(this), complete: isComplete }).then(refreshTodoItems, handleError);
53: });
54:
55: // Handle delete
56: $(document.body).on('click', '.item-delete', function () {
57: todoItemTable.del({ id: getTodoItemId(this) }).then(refreshTodoItems, handleError);
58: });
59:
60: // On initial load, start by fetching the current data
61: //refreshTodoItems();
62:
63: function refreshAuthDisplay()
64: {
65: var isLoggedIn = client.currentUser !== null;
66: $("#logged-in").toggle(isLoggedIn);
67: $("#logged-out").toggle(!isLoggedIn);
68: if (isLoggedIn) {
69: $("#login-name").text
70: (client.currentUser.userId);
71: refreshTodoItems();
72: }
73: }
74:
75: function logIn()
76: {
77: client.login("twitter").then
78: (refreshAuthDisplay, function(error){
79: alert(error); });
80: }
81:
82: function logOut()
83: {
84: client.logout();
85: refreshAuthDisplay();
86:
87: $('#summary').html('<strong>You must login to access data.</strong>'); }
88: // On page init, fetch the data and set up event handlers
89: $(function () {
90: refreshAuthDisplay();
91: $('#summary').html('<strong>You must login to access data.</strong>');
92: $("#logged-out button").click(logIn);
93: $("#logged-in button").click(logOut); });
94: });
3．Androidのエミュレーターの設定
私はNexus One 相当のエミュレーターをAVDで作ってメモリを768MB割り当てましたが、やはり重いです。
4.3以降がサポートなので、Nexus 7 等の実機でやった方が良いですね。
なお、動作不安定ですが、このTargetのところで、Googe APIを選べば、エミュレーターでもプッシュ通知が”なんとか”可能です。
（Android 編チュートリアル参照）
4．iOSのプッシュ通知の画面
ちょっと別の通知とかぶってしまっていますが、こちらがチュートリアルのソースコードをもとに作ったプッシュ通知到着の画面です。
曲目リストに、Eternal Frameを入れたところです。
詳細な解説は、別途、弊社の MVA（Microsoft Virtual Academy）というインフラでビデオでご紹介予定ですので、取り急ぎ今回はこんなところで。
それではまた！
鈴木章太郎