Microsoft OfficeのDeepL APIアドインを1日で作る
DeepLでは月に一度、「ハックフライデー」と称して、日々の業務以外のプロジェクトに取り組む日を設けています。ハックフライデーは、弊社のAPIを自由に試す絶好の機会であり、時にはその成果がユーザーの皆様に届くこともあります。実は、当社が最近リリースしたGoogleスプレッドシート用DeepLスクリプトは、ハックフライデープロジェクトの成果でした！ 2022年9月のハックフライデーにおいて、DeepLのソフトウェア開発者であるマーヴィン・ベッカー氏と開発者エバンジェリストのティム・カデンバッハ氏が、Microsoft Word版DeepLのDeepL APIアドインプロトタイプを構築しました。これにより、ユーザーはWord文書内で直接DeepLによる翻訳が可能となりました。
こちらで実際の動作をご覧ください。
開発の経緯
ビジネスコミュニケーションはDeepLの代表的な活用事例です。DeepL翻訳により、グローバルで多言語を話す従業員が効率的に協業することが可能となります。 機密性の高い企業データを安全に保護しながら。お客様から、DeepL API を使用して独自の Office アドインを構築したいというご要望を頻繁にお伺いしております。また、そのための入門リソースをお探しの方も多くいらっしゃいます。皆さんから質問を受けた際により適切な回答ができるように、アドインで機能を追加するための要件は何か知りたいと考えたのがそもそものきっかけでした。
今回のブログでは、私たちの学びを共有したいと思います。プロジェクトを迅速に立ち上げられるよう、オープンソースコードもご提供いたします。 ご準備はよろしいでしょうか？では、始めましょう！
キーポイント0：下調べ（任意）
Office APIを初めてご利用になる場合は、以下の記事をお読みになることをお勧めいたします。 Microsoftのドキュメントにある「Office JavaScript APIの理解」 をお読みになることをお勧めいたします。要するに、すべてのOfficeプロダクトは共通のAPIを提供しております。 共通のAPI を提供しております。 プロダクト固有のAPI の上に構築されています。 また、以下のチュートリアルをざっと目を通すことも役立つかもしれません。 このチュートリアル をざっと目を通しておくことも役立つかもしれません。
ポイント１：Script Labを使ってプロトタイプを構築（DeepLのScript Labも使用可能）
Script Lab は、マイクロソフト社が管理するオープンソースプロジェクトです。Script LabがあればExcel、Outlook、Word、PowerPointを使いながらOffice JavaScript APIを試せます。スクリプトラボ GitHubリポジトリ には、ご利用を開始するためのチュートリアルが含まれております。
DeepLではアドインのプロトタイプを作成するにあたり、まずScript Labを使いました。JavaScript、HTML、CSSファイルからのみ構成されるScript Labを使うと、コードを早く書けるだけでなく、動作もすぐに確認できます。
この最初のステップではチームで共有できるアドインはまだ作成できませんが、DeepL APIを使って何ができるか、またアドインで実現できるユーザー体験は何かをイメージできます。
キーポイントの説明に入る前に、オープンソースのコードもご紹介すると書きました。Script Labでは別の人が書いたコードの「スニペット」をインポートできることから、DeepL Wordのスニペットもオープンソースにして、誰にでも試していただけるようにしました。コードはこちらのGitHubに記載しています。
なお、作業を続けるにはDeepL APIの認証キーが必要です。こちらから こちらからアカウントを登録することができます。
手順に記載されている通り、Gist YAMLをコピーして貼り付けてください。32行目のプレースホルダーにDeepL APIキーを挿入すれば、わずか数クリックするだけで当スニペットを実行できるようになります。
最大のメリットScript Labではアドインのテンプレートを準備できるため、スニペットを後で別の用途に簡単に転用できます。
キーポイント2：Yeoman GeneratorでOfficeアドインのプロジェクトを作成
Script Labのプロトタイプを作成し、Officeスクリプトの基本を理解できたところで、Yeomenを使って実際のアドインを作ってみましょう。Yeomanは、新規プロジェクトを比較的簡単に作成できるオープンソースのスキャフォールディングツールです。Officeアドイン向けには、通称”Yo Office”というMicrosoftの既存のテンプレートがあります。
こちらで手順をご確認ください。Office アドイン イーマン 生成する.
セットアップが終わったら、Script Labのコードをコピーして新しく作成したリポジトリにコピーします。細かな設定は他にもありますが、'npm run start’を実行するとすぐに作業を開始できます。これによりWordが起動し、アドインが自動的にサイドロードされます。 開発には任意のIDEをご利用いただけますが、生成するテンプレートはMicrosoftのコードエディターであるVS CodeまたはVisual Studioとの相性が最も良好です。快適にコード作成とデバッグを行うには、Visual Studioを使うのががおすすめです。
キーポイント3：DeepL APIを実装
DeepLの実装は簡単です。JavaScript fetch scriptでテキスト翻訳のエンドポイントを呼び出せます。私たちが作成した簡単なプロトタイプでは、これで十分でした。ご使用になりたい場合は 用語集 アドインを有効にするには、もう少し作業が必要となります。
DeepLの公式 Node.jsクライアントライブラリ を使用しませんでした。このライブラリはご利用の皆様のサイドのJavaScriptコードを想定していないためです。その理由はセキュリティ上の懸念です。クライアントサイドのコードを呼び出す際にAPIキーが公開されてしまう可能性があります。 詳細な実装方法については、上記で共有したGISTファイル（102行目から）をご参照ください。
キーポイント4：Macユーザーのためのデバッグ
近年、MicrosoftはMacユーザーをサポートできるように莫大な投資を行っています。Macでは.NET Coreの開発ができますが、Microsoft OfficeのアプリケーションなどWindowsの開発を十分に行うのはまだ難しいのが現状です。残念ながら、MicrosoftアプリケーションのMac版のデバッグは簡単ではありません。TimはMicrosoftの愛用者（Microsoft MVPにも認定されています！）なので問題はありませんでしたが、MacユーザーのMarvinは適切にデバッグを行うためにParallelsをダウンロードしなければなりませんでした。 Microsoft Office および Visual Studio Code を Parallels で実行することで、アプリのデバッグやアドインの作業を適切に行うことができます。100％満足できる解決策ではありませんが、ひとまずこれでOKです。
キーポイント5：ユーザーとアドインを共有
OfficeアドインはOfficeアプリを実行するウェブビューに読み込まれ、iFrame（インラインフレーム）に表示されるので、アクセスできるウェブサーバーでご自身のアドインをホストしなければなりません。Officeアドインのデプロイおよび公開方法について、 Office アドインをデプロイするおよび公開する方法については、 Microsoftの技術資料でご確認いただけます。
アドインが正常に動作する状態になったら、Office管理者は組織内のユーザーやグループに対して、Microsoft 365管理センターを通じてアドインをデプロイすることが可能です。 Microsoft 365 管理センターを通じて。管理センターで展開したアドインは、すぐに使用できます。
おまけ：他のMicrosoftアプリにアドインを拡張
アドインは他のアプリにも簡単に拡張できます。Officeアドインの構成要素の多くは、Outlook、Word、Excel、PowerPoint、Visio、OneNoteなどすべてのOfficeアプリケーションで共通です。そのため、ひとつのアプリケーション用のアドインを使い回せます。
ただし、アプリケーションごとにイベントは異なります。Wordの例ではOnTextSelectedを使用してきましたが、ExcelではおそらくOnColumnSelectedやRow. といったイベントを使用することになるでしょう。アドインを他のアプリでも動作させるには、アドインが反応すべき対応するイベントやアクションを追加するだけです。非常に一般です。ほとんどのコードは異なるアプリケーションで再利用できます。
必要なアプリケーションの仕様を再利用したり呼び出したりできるように、固有のコードを関数化しておくと良いでしょう。こちらの記事をお読みになることをお勧めいたします。 こちらに掲載されている記事をお読みになることをお勧めいたします。
また、便利な MS Learnモジュール が役立ちます。
まとめ
ここまでの内容がお役に立てば幸いです。ご質問がございましたら、Script Labのスニペットを添えてGitHubリポジトリにイシューを作成し、お知らせください。
開発のご成功を祈ります！