現在、OnsenUIでTwitterクライアントの制作に挑戦しております。参考としてhttp://docs.monaca.mobi/cur/ja/sampleapp/samples/twitter/のサンプルを基に制作しておりました。サンプルにはindex.htmlのページにConnect
to Twitterを設置していました。このConnect to
Twitterのボタンをアプリの起動時に開かれるログイン画面ページとしておきたいです。認証後にタイムラインが表示されたタブバー付きのページへと遷移するという形を作りたいのですがどうにもうまくいきません。ご教授お願いします。
CC BY-SA 3.0
2016-03-26T17:50:17.497
23495
2016-11-02T07:33:05.790
13526
question
monaca onsen-ui
ログイン画面とタブバー付きのホーム画面を分けたい
**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>
    
```
CC BY-SA 3.0
2016-04-08T09:09:19.073
23845
2016-04-10T23:51:51.367
2016-04-10T23:51:51.367
9566
9566
23495
answer