使ってみよう! Windows Live SDK/API

第46回 Hotmailカレンダーと連携するアプリの開発

この記事を読むのに必要な時間:およそ 12 分

Internet Explorer アクセラレータの作成

さて,ここまでで作成したものは,ユーザーが予定を入力してカレンダーに追加しているだけですので,ユーザー視点からみるとHotmailカレンダーを利用するのと変わりありません。そこで,Live Connectの内容とは少し離れますが,Internet Explorerのアクセラレータから使えるように改良してみます。

ユーザーがIT勉強会などのイベントページを表示しているとき,日時などのテキスト部分を選択し,アクセラレータから予定を追加するというような使い方を想定しています。ユーザーが能動的に予定を追加するのには変わりありませんが,ユーザーに代わって,Webサイトのタイトルや選択されたテキストから予定の項目を記入します。

ASP.NET Webページ

先ほどのHTMLファイルを編集して,HTMLファイルからASP.NET Webページに変更します。ASP.NET Webページのコードの記述は,Visual Studioや無償のWebMatrixで行えます。今回は,ASP.NET Webページを利用していますが,URLのクエリーからパラメーターを受け取り日付などの情報を抽出できればよいだけですので,JavaScriptやPHPなど言語や方法はASP.NET Webページだけに限りません。

ここではASP.NET Webページの詳細についてはふれませんので,必要に応じて,Razor 構文と ASP.NET Web ページなどのドキュメントを参照してください。

HTMLファイルから.vbhtmlファイルに変更します。次のようなコードを記述します。次のようなコードをファイルの先頭(<DOCTYPE html>の前)に記述します。

@Code
    Dim title = If(Request("title"), "")
    Dim text = If(Request("text"), "")

    ' 日付を表す正規表現のパターンを作成
    Dim w1 = "(\(([月火水木金土日](曜日|曜)?|(sun|mon|tue|wed|thu|fri|sat)\.?)\))?[\p{Po}\p{Z}]*"
    Dim d1 = "((?<year{0}>20([0-9]{2}))\s*[年/])?\s*(?<month{0}>[0-1]?[0-9])\s*[月/]\s*(?<day{0}>[0-9]{1,2})\s*日?[\p{Po}\p{Z}]*" & w1
    Dim t1 = "(AM|PM|午前|午後)?\s*(?<hour{0}>[0-2]?[0-9])\s*:\s*(?<min{0}>[0-5]?[0-9])"
    Dim dash = "\s*(\-|to|~|\s)\s*"
    Dim patterns = New List(Of String)
    patterns.Add((d1 & t1).Replace("{0}", "0") & dash & (d1 & t1).Replace("{0}", "1"))
    patterns.Add((d1 & t1).Replace("{0}", "0") & dash & t1.Replace("{0}", "1"))
    patterns.Add((d1 & t1).Replace("{0}", "0"))
    patterns.Add(d1.Replace("{0}", "0"))

    Dim fromDate = ""
    Dim fromTime = ""
    Dim toDate = ""
    Dim toTime = ""
    Dim input = text.Replace("(", "(").Replace(")", ")")

    ' 正規表現と一致する箇所を抽出し,開始・終了時間の値を作成
    For Each p In patterns        
        Dim m = Regex.Match(input, p, RegexOptions.IgnoreCase Or RegexOptions.Singleline)

        Dim md As String
        If m.Success Then
            ' Start Time

            md = m.Groups("month0").Value.PadLeft(2, "0"c) & "/" & m.Groups("day0").Value.PadLeft(2, "0"c)
            If m.Groups("year0").Success Then
                fromDate = m.Groups("year0").Value & "/" & md
            Else
                fromDate = Now.ToString("yyyy") & "/" & md
            End If
            If m.Groups("hour0").Success Then
                fromTime = m.Groups("hour0").Value.PadLeft(2, "0"c) & ":" & m.Groups("min0").Value.PadLeft(2, "0"c)
            End If

            ' End Time
            If m.Groups("month1").Success Then
                md = m.Groups("month1").Value.PadLeft(2, "0"c) & "/" & m.Groups("day1").Value.PadLeft(2, "0"c)
                If m.Groups("year1").Success Then
                    toDate = m.Groups("year1").Value & "/" & md
                Else
                    toDate = Now.ToString("yyyy") & "/" & md
                End If
            ElseIf m.Groups("hour1").Success Then
                toDate = fromDate
            End If
            If m.Groups("hour1").Success Then
                toTime = m.Groups("hour1").Value.PadLeft(2, "0"c) & ":" & m.Groups("min1").Value.PadLeft(2, "0"c)
            End If
            Exit For
        End If
    Next
End Code

コードのほとんどの内容が,URLのクエリーで受け取ったテキストから日付の部分を探し,DatepickerとTimepickerで使用する形式を生成しているだけです。厳密にチェックしていませんので不正な値になる可能性もありますが,とりあえずはこれでよしとします。

続いてHTMLコード部分を編集します。作成した値をvalue属性に指定します。下記のコードを参考に,該当部分を編集してください。

<tr>
    <td class="cap txt">件名:</td>
    <td><input type="text" id="name" class="box txt" value="@title" /></td>
</tr>

<tr>
    <td class="cap txt">開始:</td>
    <td>
        <input type="text" id="from_date" class="date txt" value="@fromDate" />
        <input type="text" id="from_time" class="time txt" value="@fromTime" />
    </td>
</tr>
<tr>
    <td class="cap txt">終了:</td>
    <td>
        <input type="text" id="to_date" class="date txt" value="@toDate" />
        <input type="text" id="to_time" class="time txt" value="@toTime" />
    </td>
</tr>

Internet Explorerアクセラレータ

作成したASP.NET Webページへアクセラレータからアクセスできるようにします。アクセラレータの開発についても,詳細は紹介できませんが簡単ですのですぐに理解できるかと思います。技術的な内容は,IEデベロッパーセンターも参照するとよいでしょう。

OpenService アクセラレータフォーマットと呼ばれるXML形式で,アクセラレータの情報を記述します。次のようなXMLファイルを用意します。

<?xml version="1.0" encoding="UTF-8"?>
<openServiceDescription xmlns="http://www.microsoft.com/schemas/openservicedescription/1.0">
    <homepageUrl>http://example.jp</homepageUrl>
    <display>
        <name>Hotmail カレンダーへ予定を追加</name>
        <icon>http://example.jp/favicon.ico</icon>
    </display>
    <activity category="Add">
        <activityAction context="selection" >
            <execute action="http://example.jp/event.vbhtml">
                <parameter name="title" value="{documentTitle}" type="text" /> 
                <parameter name="text" value="{selection}" type="text" /> 
            </execute>
        </activityAction>
    </activity>
</openServiceDescription>

内容は,⁠追加」カテゴリのアクセラレータで,クリックしたときにWebサイトのタイトルと選択しているテキストの内容を送信するよう記述しています。<execute>要素のaction属性値は,ASP.NET WebページへのURLを指定します。

さらに別途,Webページを用意して,次のコードを使ってアクセラレータのインストールを行います。

<!DOCTYPE html>

<html lang="ja">
    <head>
        <meta charset="utf-8" />
        <title>アクセラレータの追加</title>
        <script>
            function addService() {
                // OpenServiceアクセラレータフォーマットの XML ファイルの URL を指定すること
                window.external.AddService("./event.xml");
            }
        </script>
    </head>
    <body>
        <input type="button" value="アクセラレータの追加" onclick="addService();" />
    </body>
</html>

ASP.NET WebページとOpenServiceアクセラレータフォーマットのファイルは,同じドメインのURLに配置するようにします。上記コードよりインストールを行うと確認ダイアログ図4が表示されます。

図4 アクセラレータの追加

図4 アクセラレータの追加

インストール後,適当なWebページのテキストを選択しアクセラレータを使ってみましょう。簡単に予定の追加ができるようになりました図5⁠。

図5 アクセラレータで予定の追加

図5 アクセラレータで予定の追加

実用するにはまだまだ機能的に不足しているところもありますが,開発の参考にして頂けると幸いです。

著者プロフィール

松江祐輔(まつえゆうすけ)

日本システムウエア株式会社 勤務。現在,ハードウェア設計・検証業務を担当。大学生・大学院生時代はベンチャー企業 有限会社ミレニアムシステムズにプログラマーとして従事。趣味はプログラミング。好きな言語はVisual Basic。Microsoft MVP for Windows Live Platform(Jul 2010 - Jun 2011),Windows Live(Jul 2011 - Jun 2013)。

URL:http://katamari.jp