🤴 🤷🏼 😲 Officeアドインの生産性 🚃 🙍🏻 🕺

Officeアドイン（Officeアドオン）について話すと、しばしば「生産性」が言及されます。開発者の主な目標はエンドユーザーの作業の生産性を向上させることであるため、これは論理的です。しかし、開発者自身にとって生産性は重要です。この記事は、開発の生産性に関するものです。 Office用の新しいJavaScript APIと、新しいソリューションを作成するために使用するツールについて説明します。

1日間のOfficeアドイン

2015年12月、 OfficeアドインコンサルタントとしてOffice 365の作業セッションに参加するよう招待されました。このイベントでは、Officeストアで製品を宣伝することに関心のあるチームが集まりました。目標は、2日間でOffice用のJavaScript APIの複雑さに浸り、将来のソリューションの概念を策定し、プロトタイプを実装することです。

二日目、参加者の質問に対する答えの間に、私は自由な時間を過ごしました。これにより、新しいアイデアに取り組むことができました。 ExcelのXLTools拡張機能のVSTOバージョンには、ユーザーに人気のある機能、つまり日付を入力するためのカレンダーがあります。長い間、Officeストアに実装したかったのですが、手が届きませんでした。そして以来カレンダーは日付の入力が必要なドキュメントの処理速度を大幅に向上させるため、作業セッションのトピックは生産性であり、アイデアは完全に適合していました。

想定される機能

例として、利用可能なオンラインの「To-doリスト」からExcel用の標準テンプレートを取り上げます。

このようなドキュメントを作成するには、 [ファイル ]> [ 新規 ]> [ネットワーク上のテンプレートの検索]フィールドにテンプレートの名前「To Doリスト」を入力します。

上の画面は、表に「日付」タイプの2つのフィールドがあることを示しています。「開始日」と「期日」です。 Excelで日付を操作しなければならなかった人は誰でも、日付の入力には多少の困難が伴うことを知っています。さて、カレンダーから日付を選択することができたら！

それでアイデアが生まれました。熟考して、次の要件のリストを導き出しました。

ワンクリックで選択したセルに日付を入力します。
値を持つセルを選択する際のカレンダーの日付の自動強調表示。
選択した日付に関する情報の視覚的な表示（曜日、週番号）;
さまざまな地域の日付形式のローカライズ。
追加のコンポーネントをインストールすることなく、カレンダーをドキュメントに直接「埋め込み」ます。

実装

Visual Studioを使用しています。 Napaや別のコードエディターなど、他のツールも適していますが、パフォーマンスと利便性の観点から、 Visual Studioが最適なオプションです。すぐに起動してデバッグできるように、Officeアドインプロジェクトを作成できます。 Napaおよび他のサードパーティのエディターでは、 Officeアドインのデバッグはまだできません。

プロジェクト作成

Visual Studio> File> New> Project> Templates> Office / SharePoint> Apps>アプリケーションの種類を選択します。「App for Office」。この記事の執筆時点で、Microsoftは「App」という名前を「Add-in」に置き換えていることに注意してください。きっとプロジェクトの名前は将来変わるでしょう。

次に、アプリケーションのタイプを設定します。なぜなら文書の本文に埋め込むアドインは、タイプ「コンテンツ」を選択します-タスクの解決に最適です。タスクペインとコンテンツタイプの違いは、次の図に明確に示されています。

最後のステップで、プロジェクトテンプレート（基本アプリ-基本、ドキュメントビジュアライゼーションアプリ-より複雑）およびサポートされている一連のオフィスプログラム（ アクセス、Excel、PowerPoint ）を選択するように求められます。 Basic AppおよびExcelサポートを選択します。 完了をクリックします。プロジェクトが作成され、実行（F5）およびデバッグの準備ができました。

UIの設計と実装

要件をもう一度調べて、それぞれを実装する方法について考えてみましょう。最後の「埋め込み」から始める価値があります。ここに、新しいOfficeアドインの際立った機能があります。従来のVSTOと比較して、追加のコンポーネントをインストールする必要はありません。つまり Excelドキュメントを作成し、Officeストアからアドインを追加し、ドキュメントを同僚に送信する場合、アドインが機能するために追加のものをインストールする必要はありません。これは、 VSTO XLToolsカレンダーバージョンのユーザーに欠けていたものです。

カレンダーは複雑なUIを提供しません。インターネット上には、カレンダー表示機能を実装する自由に配布されたJavaScriptライブラリの海があります。他の要件を100％満たすPikadayライブラリを選択しました。ライブラリでは次のことができます。

アプリケーションのWebページにカレンダーを直接表示します。
イベントのハンドラーを「ハング」 させる 「カレンダーから日付を選択する」（ onSelect ）;
カレンダーで選択した日付の値をコードから設定します（ setDate ）。
曜日と月の名前を目的の言語に翻訳します。

もちろん、独自の設計を必要とするより複雑な問題を解決することがよくあります。ここでは、最近リリースされたOffice UI Fabricフレームワークに注目する価値があります。OfficeUI Fabricフレームワークは、オフィスアプリケーション用に事前にスタイル設定されたCSSクラスとUIコンポーネントのセットを提供します。スタイルとコンポーネントは、Officeがサポートするすべてのプラットフォーム（モバイルアプリ、Web、デスクトップ）で動作するように適合されています。 Office UI Fabricを使用すると、UIの設計と開発が大幅に簡素化されます。これは特にOfficeアドイン開発者専用のBootstrapのようなものです。

UIは9行のコードを取りました。 Home.htmlファイルでCSSとJavaScriptを有効にする：

<link href="pikaday.css" rel="stylesheet" type="text/css" /> <script src="pikaday.js" type="text/javascript"></script>

Home.jsファイルのOffice.initializeメソッドでカレンダーを初期化する：

 var calOptions = { showWeekNumber: true, //      defaultDate: new Date() //        }; var placeholder = $("body"); //   « »  body var picker = new Pikaday(calOptions); //    placeholder.append(picker.el); //     body

カレンダーの日付ピッカーの処理

Pikadayでは、カレンダーの日付が変更された場合にハンドラーを「ハング」させることができます。日付を受け取ったら、Office APIのメソッドsetSelectedDataAsyncを使用して、現在の選択したセルに日付を入れます。

 calOptions.onSelect = function (date) { //      date = getLocaleShortDateString(date); //   Date   Office.context.document.setSelectedDataAsync(date, //      { coercionType: Office.CoercionType.Text //   – «» }, function (asyncResult) { //      if (asyncResult.status == "failed") { app.showNotification("Failed", asyncResult.error.message, 'error'); } } ); };

この例では、 getLocaleShortDateString関数を使用して日付を処理します。必要です Excelは日付を数値として扱い、セルの形式が適切な場合にのみ日付として表示します。問題は、セルに数値を書き込むことができるという事実にありますが、現在のJavaScript APIではセルの形式を変更できません。幸いなことに、回避策がありました。セル内の日付を正確に取得するには、ユーザーが選択した地域（ロケール）の形式を確認しながら、テキストの形式で日付を入力する必要があります。 getLocaleShortDateString関数は、Dateオブジェクトをローカライズされたテキスト形式に変換するためにのみ使用されます。コンテキストオブジェクトのプロパティ-Office.context.displayLanguageを使用して、ユーザーがどの地域標準を選択しているかを確認できます。

 function getLocaleShortDateString(d) { var f = getLocaleDateString(), y = d.getFullYear(), m = d.getMonth() + 1, d = d.getDate(); function z(s) { s = '' + s; return s.length > 1 ? s : '0' + s; } f = f.replace(/yyyy/, y); f = f.replace(/yy/, String(y).substr(2)); f = f.replace(/MM/, z(m)); f = f.replace(/M/, m); f = f.replace(/dd/, z(d)); f = f.replace(/d/, d); return f; } function getLocaleDateString() { var formats = { "en-US": "M/d/yyyy", "ru-RU": "dd.MM.yyyy", ... //   200  }; return formats[Office.context.displayLanguage] || 'dd/MM/yyyy'; }

カレンダーで選択した日付を強調表示します

Excel用JavaScript APIを使用すると、選択したセル領域の変更イベントを処理できます。これを使用して、選択したセルに対するユーザーの変更を追跡します。

 //    Office.context.document.addHandlerAsync(Office.EventType.DocumentSelectionChanged, function (eventArgs) { //     Office.context.document.getSelectedDataAsync(Office.CoercionType.Text, { // ,      () valueFormat: Office.ValueFormat.Unformatted }, function (ufResult) { if (ufResult.status != "failed") { var value = ufResult.value; //    -    if (isInt(value) && value > 0) { //     var date = getJsDateFromExcel(value); //     +-50     if (new String(date) != "InvalidDate" && date.getYear() > new Date().getYear() - 50 && date.getYear() < new Date().getYear() + 50) { //     picker.setDate(date, true); } } } }); });

ユーザーが新しいセルを選択した瞬間に「キャッチ」されたので、選択された値が日付かどうかを確認します。選択したセルから値を取得するには、 Office.context.document.getSelectedDataAsync関数を使用して、書式なしの値を返す必要があることを伝えます。日付の場合、値は整数になります（時間のある日付は考慮しません）。次は、日付の順守のチェックです。セルの値が日付であるかどうかを100％判別することはできません。そのため、ユーザーが日付の数値表現に対応する数値を持つセルを選択すると、アルゴリズムはこれが日付であると見なします。数字に対する誤検知の数を最小限に抑えるために、現在の年から+ -50年の日付をチェックするという制限を設定します。値がすべての基準に一致する場合、強調表示にPikadayカレンダーのsetDateメソッドを使用します。

ローカリゼーション

Office Storeは40の言語をサポートするようになりました。上記の例は、すでに日付値をローカライズする方法を示しています。日付に加えて、ローカライズにはUIも必要です。 Pikadayカレンダーの場合、すべてが簡単です。

 var myLanguage = Office.context.displayLanguage.split("-")[0]; if (myLanguage == "ru") { calOptions.firstDay = 1; calOptions.i18n = { previousMonth: ' ', nextMonth: ' ', months: ['', '', '', '', '', '', '', '', '', '', '', ''], weekdays: ['', '', '', '', '', '', ''], weekdaysShort: ['', '', '', '', '', '', ''] }; }

まず、ロシア語と英語の2つの言語をサポートしています。 Pikadayはデフォルトでは英語です。インターフェイス言語がロシア語の場合、ロシア語に翻訳するには、現在のユーザー領域を確認し、テキストラベルを新しい値に置き換えます。

XLTools.netカレンダーを使用する

結論

1日も経たないうちに、Officeアドインを作成し、 Officeストアで公開できるようにしました。この速度は、Web開発で長年にわたって得られた経験とターンキーソリューションのおかげで実現できます。プラスは、Office用JavaScript APIのシンプルさと、 UIを構築するための既製のOffice UI Fabricフレームワークの可用性です。

さまざまなプラットフォームでアドオンをデバッグするのは非常に困難な作業であることがわかります。確認のためにアプリケーションをOfficeストアに送信した後、次のようにデバッグに苦労しました。アドインの最初のバージョンは、iPadおよびWebでの作業のエラーによりテストに合格しませんでした。デバッグの問題を解決し、それについて別の記事を書きます。

最近、XLTools.netカレンダーアドインが正常にテストされ、Office Storeからダウンロードできるようになりました。 2週間で、1832回のダウンロードを記録し、Officeストアで1件のレビューと最大4件の評価を受けました。多くの肯定的なフィードバックと機能の改良のためのリクエストは電子メールによって来ました。近い将来、新しいオプションを備えた改善されたカレンダーをリリースする予定です。お楽しみに！

著者について

Petr Lyapin-Wave Point LLCのテクニカルディレクター

自動化プロジェクトの実装で10年以上の経験

ビジネスプロセス。 彼は多くのロシア人と働き、

外国企業。 XLTools.netプロジェクトの創設者。

Officeアドインの生産性