現在、OnsenUIでTwitterクライアントの制作に挑戦しております。参考としてhttp://docs.monaca.mobi/cur/ja/sampleapp/samples/twitter/のサンプルを基に制作しておりました。サンプルにはindex.htmlのページにConnect to Twitterを設置していました。このConnect to Twitterのボタンをアプリの起動時に開かれるログイン画面ページとしておきたいです。認証後にタイムラインが表示されたタブバー付きのページへと遷移するという形を作りたいのですがどうにもうまくいきません。ご教授お願いします。
1 件の回答
4/11修正版
ログイン画面を表示する場合、ons-tabbar
のng-show
をfalse
にしてタブバーを非表示にします。
認証後、ng-show
をtrue
にしてタブバーを表示させます。
とりあえず、サンプルコードをベースにそれらしく動作するようにコードを修正しました。
GapDebugなどを利用すれば、どの行で何が行われているか把握できるはずです。
※AngularJS
を使用。
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta http-equiv="Content-Security-Policy" content="default-src * data:; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
<script src="components/loader.js"></script>
<script src="js/jsoauth.js"></script>
<link rel="stylesheet" href="components/loader.css">
<link rel="stylesheet" href="css/app.css">
<script>
var app = ons.bootstrap("myApp", ["onsen"]);
app.controller("indexController", ["$scope", function($scope) {
var callbackUrl = "http://example.com";
$scope.oauth = OAuth({
consumerKey: "eFszoQFkofI8BQegCOBdw", // REPLACE HERE TO YOUR CONSUMER KEY or API KEY
consumerSecret: "8g3zp7n2x3XVx7qUAXyFChgXoksKubn6J4XP57FWy4g", // REPLACE HERE TO YOUR CONSUMER SECRET OR API SECRET
callbackUrl: callbackUrl,
requestTokenUrl: "https://api.twitter.com/oauth/request_token",
authorizationUrl: "https://api.twitter.com/oauth/authorize",
accessTokenUrl: "https://api.twitter.com/oauth/access_token"
});
$scope.isConnect = false;
$scope.jsonData = [];
$scope.connect = function() {
$scope.oauth.fetchRequestToken(function(url) {
console.log("Opening Request Token URL: " + url);
showAuthWindow(url);
}, function(data) {
console.log(JSON.stringify(data));
});
};
function showAuthWindow(url) {
var browser = window.open(url, '_blank', 'location=yes');
browser.addEventListener('loadstart', function(event) {
if (event.url.indexOf(callbackUrl) >= 0) {
event.url.match(/oauth_verifier=([a-zA-Z0-9]+)/);
$scope.oauth.setVerifier(RegExp.$1);
$scope.oauth.fetchAccessToken(function(data) {
$scope.isConnect = true;
$scope.$apply();
getTwits();
browser.close();
}, function(data) {
console.log(JSON.stringify(data));
});
}
});
}
function getTwits() {
$scope.oauth.getJSON('https://api.twitter.com/1.1/statuses/user_timeline.json?screen_name=monaca_io&count=20',
function(data) {
$scope.jsonData = data;
$scope.$apply();
}, function(data){
console.log(JSON.stringify(data));
});
}
}]);
app.controller("timelineController", ["$scope", function($scope) {
$scope.timelineTable = [];
ons.ready(function() {
});
$scope.$watchCollection("jsonData", function(newVal, oldVal) {
if (newVal.length > 0) {
$scope.timelineTable = angular.copy(newVal);
}
})
}]);
</script>
</head>
<body ng-controller="indexController">
<ons-page>
<ons-toolbar>
<div class="center">Connect to Twitter</div>
</ons-toolbar>
<div style="text-align: center;">
<br>
<ons-button ng-click="connect()">Connect to Twitter</ons-button>
</div>
</ons-page>
<ons-tabbar var="tabbar" ng-show="isConnect">
<ons-tab
icon="home"
label="Home"
page="timeline.html"
active="true"></ons-tab>
<ons-tab
icon="comment"
label="Comments"
page="page2.html"></ons-tab>
<ons-tab
icon="gear"
label="Settings"
page="page3.html"></ons-tab>
</ons-tabbar>
<ons-template id="timeline.html">
<ons-page ng-controller="timelineController">
<ons-toolbar>
<div class="center">Twitter Timeline</div>
</ons-toolbar>
<ons-list>
<ons-list-item ng-repeat="item in timelineTable">
<div class="list-item-main">
<div class="list-item-left">
<img src="{{item.user.profile_image_url}}" class="list-item-face">
</div>
<div class="list-item-right">
<span class="list-item-name">
{{item.user.name}}<span class="lucent">@{{item.user.screen_name}}</span>
</span>
<br />
<span class="list-item-text">"{{item.text}}</span>
</div>
</div>
</ons-list-item>
</ons-list>
</ons-page>
</ons-template>
</body>
</html>