Office アドイン

[Office用アプリ]カレンダーから日付を入力するコンテンツアプリ。

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

※ 下記コードを元にしたアプリが「カレンダーから日付入力」になります。

前回の記事Excel MVPの角田さん作の「日本の祝日判定ロジック」をjQuery UI Datepickerに組み込む方法を紹介しましたが、あれは実は前フリで、今回の記事の方が本題「カレンダーから日付を入力するコンテンツアプリの紹介」になります。


・マニフェストファイル(xml)

<?xml version="1.0" encoding="UTF-8"?>
<OfficeApp xmlns="http://schemas.microsoft.com/office/appforoffice/1.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:type="ContentApp">
  <Id>a335220b-b163-440f-9967-a0c7f085752d</Id>
  <Version>1.0</Version>
  <ProviderName>きぬあさ</ProviderName>
  <DefaultLocale>jp-JP</DefaultLocale>
  <DisplayName DefaultValue="カレンダー入力" />
  <Description DefaultValue="カレンダーから簡単に日付を入力します。"/>
  <IconUrl DefaultValue="http://officeimg.vo.msecnd.net/_layouts/images/general/office_logo.jpg" />
  <Capabilities>
    <Capability Name="Workbook" />
  </Capabilities>
  <DefaultSettings>
    <SourceLocation DefaultValue="\\XXXX\Apps\Test.html" />
    <RequestedWidth>323</RequestedWidth> 
    <RequestedHeight>256</RequestedHeight>
  </DefaultSettings>
  <Permissions>ReadWriteDocument</Permissions>
</OfficeApp>

・htmlファイル(Test.html)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=Edge">
        <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/dot-luv/jquery-ui.css">
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
        <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.21/jquery-ui.min.js"></script>
        <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/i18n/jquery.ui.datepicker-ja.min.js"></script>
        <script src="https://az88874.vo.msecnd.net/api/1.0/office.js"></script>
        <script src="HolidayChk.js"></script>
        <script>
            Office.initialize = function(reason){}
            $(function(){
                $("#datepicker").datepicker({
                    beforeShowDay: function(date) {
                        var result;
                        var dd = date.getFullYear() + "/" + (date.getMonth() + 1) + "/" + date.getDate();
                        var hName = ktHolidayName(dd);
                        if(hName != "") {
                            result = [true, "date-holiday", hName];
                        } else {
                            switch (date.getDay()) {
                                case 0: //日曜日
                                    result = [true, "date-holiday"];
                                    break;
                                case 6: //土曜日
                                    result = [true, "date-saturday"];
                                    break;
                                default:
                                    result = [true];
                                    break;
                            }
                        }
                        return result;
                    },
                    onSelect: function(dateText, inst) {
                        Office.context.document.setSelectedDataAsync(dateText);
                    }
                });
            });
        </script>
        <style>
            .date-holiday .ui-state-default {
                background-image:none;
                background-color:#FF9999;
            }
            .date-saturday .ui-state-default {
                background-image:none;
                background-color:#66CCFF;
            }
            body {
                margin:0;
                padding:0;
                font-family:Arial,sans-serif;
                font-size:0.8em;
            }
        </style>
    </head>
    <body>
        <div id="datepicker"></div>
    </body>
</html>

上記コードを設定したアプリを挿入すると、コンテンツアプリとしてカレンダーが表示され、日付をクリックすることで選択セルに日付が挿入されます。
上記コードを見てもらえれば分かりますが、コード自体は前回の記事とほぼ同じで、セルへの入力部分であるsetSelectedDataAsyncメソッドの部分が若干異なる程度です。

下記Officeストアで同様のアプリがすでに公開されていますが、日本で使用するには上記コードの方が便利だと思います。

・Mini Calendar and Date Picker – STORE – Office.com
http://office.microsoft.com/en-us/store/mini-calendar-and-date-picker-WA102957665.aspx

関連記事

  1. Windows 10

    Microsoft Edgeを操作するVBAマクロ(WebDriver編)

    Microsoft Edge Dev Blogに「Bringing a…

  2. Office関連

    PowerPointのマクロを共有化して使う方法

    記事のタイトルだけ見るとちょっと分かりづらいですが、要するにWordの…

  3. Office関連

    [Office 2016]コマンド検索即実行、便利な「Tell Me」機能

    ※ 下記情報はOffice 2016 Preview版を元にしています…

  4. アイコン一覧

    Office 365アイコン(imageMso)一覧(P)

    Office 365のデスクトップ版Officeアプリケーション(Wo…

  5. Office関連

    ルビ(ふりがな)を一括設定するWordマクロ

    2016/10/28 追記:改良版のマクロを書きました。…

コメント

    • ムックじいじ
    • 2014年 5月 27日

    従前から、このようなアプリを渇望していました。
    早速、Excel のシートに挿入して試してみました。
    SelectionChange イベントによって、日付を入力するセルが選択された時だけ、このアプリの可視プロパティをTrue にして活用させていただきます。

  1. > ムックじいじさん

    当ブログ管理者のきぬあさです。
    アプリをご利用いただきありがとうございます。

    > SelectionChange イベントによって、日付を入力するセルが選択された時だけ、このアプリの可視プロパティをTrue にして活用させていただきます。

    このような使い方は思いつきませんでした。
    私も試してみたいと思います。
    ありがとうございます!

Time limit is exhausted. Please reload CAPTCHA.

最近の記事

アーカイブ

RapidSSL_SEAL-90x50
PAGE TOP