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を組み合わせることで、非常に簡単に実用的なアプリを作成することができます。

[Office用アプリ]選択範囲変更時のイベントを利用する。前のページ

[Office用アプリ]作業ウィンドウアプリからシームレスに「スペースアルク」を利用する。次のページ

関連記事

  1. Office関連

    アクティブなスライドを取得するPowerPointマクロ

    PowerPointのマクロを触っていて、「ActiveSlide」の…

  2. Office関連

    Excelのアイデア機能でグラフやピボットグラフを一発作成

    Insider版のExcelに「アイデア」機能が追加されました。…

  3. Office関連

    OneNote + Google Apps Scriptで定期的にWebサイトのキャプチャーを撮る方…

    「“OneNote”がアップデート、URLをメールで送るだけでスクリー…

  4. Office アドイン

    Office アドインの概要と開発方法を学ぶための自習書

    2018年10月27日(土)、品川の日本マイクロソフト本社で「2018…

  5. Office関連

    VALUE DOMAINで管理しているドメインをOffice 365で使用する。

    Office 365をセットアップすると設定される初期ドメイン「onm…

コメント

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

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

Time limit is exhausted. Please reload CAPTCHA.

Translate

Chinese (Simplified)Chinese (Traditional)EnglishFrenchGermanJapaneseKoreanRussianSpanish

最近の記事

アーカイブ

PAGE TOP