Office アドイン

[Office用アプリ]RSS表示アプリを作成する。

※ この情報はOffice 2013 カスタマー プレビュー版を元にしています。製品版では変更になる可能性がありますのでご注意ください。

今回はGoogle Feed APIを利用して、作業ウィンドウにRSSを表示するアプリを作成してみます。
アプリの設定や登録方法についてはここでは説明しませんので、JavaScriptでExcel 2013用作業ウィンドウのアプリを作成する。(2)JavaScriptでExcel 2013用作業ウィンドウのアプリを作成する。(3)をご参照ください。

・html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=Edge">
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
        <script src="https://www.google.com/jsapi"></script>
        <script src="https://az88874.vo.msecnd.net/api/1.0/office.js"></script>
        <script>
            Office.initialize = function (reason) {
                $(document).ready(function () {
                    $("#feeds").change(function() {
                        if ($(this).val()) {
                            rssInit($(this).val());
                        } else {
                            $("#feed").html(""); //リストクリア
                        }
                    });
                });
            }
            if (!google.feeds) {google.load("feeds", "1")}; //APIのロード
            function rssInit(url) {
                var feed = new google.feeds.Feed(url);
                feed.setNumEntries(10); //件数指定
                feed.load(function(result) {
                    if (!result.error) {
                        $("#feed").html(""); //リストクリア
                        var items = result.feed.entries;
                        $("#feed").append('<ul id="list" />');
                        if (items.length > 0) {
                            $(items).each(function() {
                                $("#list").append('<li><a href="' + this.link + '" title="' + this.title + '\n' + this.publishedDate + '">' + this.title + '</a></li>');
                            });
                        }
                    }
                });
            }
        </script>
        <style>
            body {
                font-family:Arial,sans-serif;
                font-size:0.9em;
            }
            select {width:200px;}
            li {
                list-style-type:circle;
                border-top:1px solid #ffffff;
                border-bottom:1px solid #999999;
            }
            li:first-child {border-top:0px;}
            li:last-child {border-bottom:0px;}
            li a {
                text-decoration:none;
                color:#333333;
                display:block;
                padding:5px 10px;
            }
            li a:hover {
                color:#ffffff;
                background:#ff73c8;
            }
        </style>
    </head>
    <body>
        <select id="feeds">
            <option value="">フィードを選択してください。</option>
            <option value="http://rss.dailynews.yahoo.co.jp/fc/rss.xml">トピックストップ</option>
            <option value="http://rss.dailynews.yahoo.co.jp/fc/world/rss.xml">海外</option>
            <option value="http://rss.dailynews.yahoo.co.jp/fc/entertainment/rss.xml">エンターテインメント</option>
            <option value="http://rss.dailynews.yahoo.co.jp/fc/computer/rss.xml">コンピュータ</option>
            <option value="http://rss.dailynews.yahoo.co.jp/fc/local/rss.xml">地域</option>
            <option value="http://rss.dailynews.yahoo.co.jp/fc/domestic/rss.xml">国内</option>
            <option value="http://rss.dailynews.yahoo.co.jp/fc/economy/rss.xml">経済</option>
            <option value="http://rss.dailynews.yahoo.co.jp/fc/sports/rss.xml">スポーツ</option>
            <option value="http://rss.dailynews.yahoo.co.jp/fc/science/rss.xml">サイエンス</option>
        </select>
        <div id="message"></div>
        <div id="feed"></div>
    </body>
</html>

上記コードを設定したアプリを挿入すると、作業ウィンドウにセレクトボックスから選択したRSSフィードを表示することができ、見出しをクリックするとブラウザーで該当記事が表示されます。

上記のようにWeb APIとJavascriptを組み合わせることで、非常に簡単に実用的なアプリを作成することができます。

関連記事

  1. Office関連

    [Excel Services ECMAScript]選択範囲が変更されたときのイベントを利用する。…

    埋め込んだExcelワークブックの、選択範囲が変更されたときのイベント…

  2. Office関連

    ユーザー設定フォームに基づいてメールを作成するOutlookマクロ

    Outlookには「ユーザー設定フォーム」(Custom Forms)…

  3. Office関連

    Computer Vision APIを使って画像から文字列を取得するVBAマクロ

    前々回の記事で、Fiddlerを使ってMicrosoft Cognit…

  4. Office アドイン

    Office アドインの概要

    先日書いた記事「Office 2016で進化したOffice アドイン…

  5. Office関連

    空白文字を一括置換するWordマクロ

    様々なWord文書を扱っていると、下図のように“同じ空白のように見えて…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

Time limit is exhausted. Please reload CAPTCHA.

最近の記事

アーカイブ

RapidSSL_SEAL-90x50
PAGE TOP