Follow @papepo100
    

Google+のタイムラインを表示する方法-プログラム作成

ブログパーツ
0 0 2017/02/04
g_api0.png コチラのサイトからJavaScript quick-start appをダウンロードします。
ダウンロードしたgplus-quickstart-javascript-master.zipを解凍してできたindex.htmlを修正して利用します。
圧縮された状態なので一度そのまま開き、ページのソースを表示してダウンロードします。
このソースのYOUR_CLIENT_IDを上記で取得したクライアントIDに置き換えれば使用できますが、 このままではプロフィールを表示するだけなので、タイムラインとして表示するため以下の様に修正します。
<!DOCTYPE html>
<html>
<head>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js" ></script>
    <meta name="google-signin-client_id" content="YOUR_CLIENT_ID"></meta>
    <script src="https://apis.google.com/js/platform.js" async defer>
     {"parsetags": "explicit"}
    </script>

<script>
$(function() {
    $.fn.appendFrame = function(width,height,rate,i){
        $(this).append($("<div style=\"width:" + width + "px;height:" + height + "px;overflow-x:hidden;border:0 solid #999\"><div style=\"width:" + width + "px;height:" + height + "px;overflow:hidden;\"><div id=\"activity" + i +"\" style=\"transform:scale(" + rate + ");-o-transform:scale(" + rate + ");-webkit-transform:scale(" + rate + ");-moz-ransform:scale(" + rate + ");-ms-transform:scale(" + rate + ");transform-origin:0 0;-o-transform-origin:0 0;-webkit-transform-origin:0 0;-moz-transform-origin:0 0;-ms-transform-origin:0 0;\"></div></div></div>"));
    }

    width = window.innerWidth;
    height = Number(width) + 100;
    rate = (window.innerWidth)/495;

    for (i=0;i<20;i++) {
        $("#embedded").appendFrame(width, height, rate, i);
    }
});
</script>

</head>
<body style="overflow: scroll">
<div style="padding:10px;display:inline-block;">
<a href="https://plus.google.com/collection/0VHjkB" target="_blank" style="text-decoration: none;"><div id="image"></div>
<h3>おすすめマンガ</h3></a></div>
    <div id="embedded"></div>
    <div id="gConnect">
    <div id="signin-button"></div>
    </div>
    <div id="authOps" style="display:none">
    <button id="disconnect" >Disconnect your Google account from this app</button>
    </div>
    <div id="loaderror">
    This section will be hidden by jQuery. If you can see this message, you
    may be viewing the file rather than running a web server.<br />
    The sample must be run from http or https. See instructions at
    <a href="https://developers.google.com/+/quickstart/javascript">
    https://developers.google.com/+/quickstart/javascript</a>.
    </div>
<script type="text/javascript">
var auth2 = {};
var helper = (function() {
    return {
    onSignInCallback: function(authResult) {
     $('#authResult').html('Auth Result:<br/>');
     for (var field in authResult) {
        $('#authResult').append(' ' + field + ': ' +
            authResult[field] + '<br/>');
     }
     if (authResult.isSignedIn.get()) {
        $('#authOps').show('slow');
        $('#gConnect').hide();
        helper.activities();
     } else {
         if (authResult['error'] || authResult.currentUser.get().getAuthResponse() == null) {
            console.log('There was an error: ' + authResult['error']);
         }
         $('#authResult').append('Logged out');
         $('#authOps').hide('slow');
         $('#gConnect').show();
     }

     console.log('authResult', authResult);
    },

    disconnect: function() {
     auth2.disconnect();
    },

    activities: function() {
     gapi.client.plus.activities.list({
        'userId': 'me',
        'collection': 'public'
     }).then(function(res) {
        var activities = res.result;
        $('#activities').empty();
        var temp = {};
        for (var activityIndex in activities.items) {
         activity = activities.items[activityIndex];
         if ( activityIndex == 0 ) {
            $('#image').empty();
            $('#image').append('<img src="' + activity.actor.image.url + '" align="left" hspace="10">');
         }
         temp['href'] = activity.url;
         gapi.post.render("activity" + activityIndex, temp);
        }
     });
    }
    };
})();

$(document).ready(function() {
    $('#disconnect').click(helper.disconnect);
    $('#loaderror').hide();
    if ($('meta')[0].content == 'YOUR_CLIENT_ID') {
    }
});

var updateSignIn = function() {
    console.log('update sign in state');
    if (auth2.isSignedIn.get()) {
    console.log('signed in');
    helper.onSignInCallback(gapi.auth2.getAuthInstance());
     }else{
    console.log('signed out');
    helper.onSignInCallback(gapi.auth2.getAuthInstance());
    }
}

function startApp() {
    gapi.load('auth2', function() {
    gapi.client.load('plus','v1').then(function() {
     gapi.signin2.render('signin-button', {
         scope: 'https://www.googleapis.com/auth/plus.login',
         fetch_basic_profile: false });
     gapi.auth2.init({fetch_basic_profile: false,
         scope:'https://www.googleapis.com/auth/plus.login'}).then(
            function (){
             console.log('init');
             auth2 = gapi.auth2.getAuthInstance();
             auth2.isSignedIn.listen(updateSignIn);
             auth2.then(updateSignIn);
            });
    });
    });
}
</script>
<script src="https://apis.google.com/js/client:platform.js?onload=startApp"></script>
</body>
</html>
このスクリプトをiframeや子ダイアログから呼び出すとこんな感じで表示されます。
スポンサーサイト
このエントリーをはてなブックマークに追加

コメント

非公開コメント