SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

クラウド時代にマッチする、ドキュメント生成・更新APIライブラリ「DioDocs(ディオドック)」(AD)

Webページ用PDFビューワで活用の幅が広がるPDFライブラリ「DioDocs for PDF」

.NETの実装でドキュメントを作成できるライブラリ「DioDocs」の活用

  • このエントリーをはてなブックマークに追加

サーバー側のDioDocs for PDFとPDFビューワを連携させて注釈とフォームを編集

 図3で無効化されていた注釈とフォームのパネルを利用するには、WebサーバーでDioDocs for PDFを動作させて、PDFビューワと連携させる必要があります。

 PDFビューワとDioDocs for PDFを連携して実行させると「注釈」「フォーム」パネルが有効になります。注釈パネルをクリックすると、画面上部のメニューバーに注釈エディタが表示され、PDFに注釈を追加できます。画面左側では注釈のプロパティが設定可能です。

図5 PDFに注釈を配置する操作(P002UseSupportApi)
図5 PDFに注釈を配置する操作(P002UseSupportApi)

 フォームについても同様に、画面上部のフォームエディタからフォーム部品を選択してPDFに配置できます。

図6 PDFにフォームを配置する操作(P002UseSupportApi)
図6 PDFにフォームを配置する操作(P002UseSupportApi)

 PDFビューワ上で注釈やフォームを編集することで、図7のような注釈やフォームを含んだPDFを作成できます。

図7 PDFビューワで作成した、注釈とフォームを含むPDFファイル(P002UseSupportApi/sample002_edited.pdf)
図7 PDFビューワで作成した、注釈とフォームを含むPDFファイル(P002UseSupportApi/sample002_edited.pdf)

 なお、注釈エディタやフォームエディタで利用できる全機能については、公式ドキュメントの注釈エディタフォームエディタに関する記述を参照してください。

 次に、PDFビューワとDioDocs for PDFを連携して実行する方法を説明していきます。まずVisual Studioで「ASP.Net Core Web アプリ」のプロジェクト(ソリューション)を生成します。WebAPIの実装(SupportApiプロジェクト)は、DioDocs for PDFのデモで公開されているサンプルコードに含まれています。サンプルコードをダウンロードして、その中に含まれるSupportApiフォルダをソリューションのフォルダにコピーします。

図8 SupportApiフォルダをコピー(P002UseSupportApi)
図8 SupportApiフォルダをコピー(P002UseSupportApi)

 Visual Studioのソリューション エクスプローラで「追加」-「既存のプロジェクト」メニューを実行して、SupportApiフォルダに含まれるSupportApi.csprojを指定し、ソリューションにSupportApiプロジェクトを追加します。

図9 ソリューションにSupportApiプロジェクトを追加(P002UseSupportApi)
図9 ソリューションにSupportApiプロジェクトを追加(P002UseSupportApi)

 ASP.NET Coreのプロジェクトから、追加したSupportApiプロジェクトを参照するよう設定します。

図10 SupportApiプロジェクトを参照するよう設定(P002UseSupportApi)
図10 SupportApiプロジェクトを参照するよう設定(P002UseSupportApi)

 ASP.NET CoreでWebAPIを実装するため、Startup.csに以下の実装を追加します。

[リスト4]WebAPIを公開するASP.NET Coreの実装(P002UseSupportApi/P002UseSupportApi/Startup.cs)
public void ConfigureServices(IServiceCollection services)
{
    // APIコントローラーを有効にする ...(1)
    services.AddControllers();
}
public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
    // wwwroot/index.htmlをデフォルトページにする
    app.UseDefaultFiles();
    // wwwroot以下の静的ファイルを有効にする
    app.UseStaticFiles();
    // ルーティングを有効にする ...(2)
    app.UseRouting();
    // APIコントローラーのエンドポイントを設定する ...(3)
    app.UseEndpoints(endpoints =>
    {
        endpoints.MapControllers();
    });
}

 ConfigureServicesメソッドでは、(1)のAddControllersメソッドで、WebAPIを実装するコントローラーを有効にします。Configureメソッドでは、リスト3同様のUseDefaultFiles、UseStaticFilesメソッドのほか、(2)と(3)の指定でWebAPIが公開されるようにします。

 リスト4の実装後、Visual Studioの「追加」-「新しい項目」メニューで「API コントローラー - 空」を選択して、WebAPIを実装するControllers/SupportApiController.csファイルを生成します。

図11 WebAPIのコントローラーを生成(P002UseSupportApi)
図11 WebAPIのコントローラーを生成(P002UseSupportApi)

 生成されたSupportApiController.csに、リスト5の通り実装します。SupportApiプロジェクト内で実装されているGcPdfViewerControllerクラスにWebAPIの実装が含まれているため、それをそのまま継承します。また、コンストラクタではDioDocsのライセンスキーを設定します。リスト5の実装により「api/SupportApi」というパスでSupportApiが提供されるようになります。

[リスト5]SupportApiのWebAPI実装(P002UseSupportApi/P002UseSupportApi/Controllers/SupportApiController.cs)
[Route("api/[controller]")]
[ApiController]
public class SupportApiController : GcPdfViewerController
{
    // コンストラクタ
    public SupportApiController()
    {
        // DioDocsのライセンスキーを設定
        GcPdfDocument.SetLicenseKey("<ライセンスキー>");
    }
}

 JavaScript側では、PDFビューワを生成するときに、リスト6(1)の通り、コンストラクタの第2引数にSupportApiのパス「api/SupportApi」を設定して、サーバー側のDioDocsと連携できるようにします。

[リスト6]SupportApiを利用するPDFビューワの表示処理(P002UseSupportApi/P002UseSupportApi/wwwroot/js/site.js)
// ビューワを生成
let viewer = new GcPdfViewer('#root', {
  // SupportApiを設定して、PDFビューワとサーバー側のDioDocsを連携 ...(1)
  supportApi: 'api/SupportApi'
});
(以下略)

 以上の実装により、PDFビューワとDioDocsが連携して動作するようになり、注釈やフォームが編集できます。

次のページ
PDFビューワで利用できるカスタムフォーム入力タイプ

関連リンク

この記事は参考になりましたか?

  • このエントリーをはてなブックマークに追加
クラウド時代にマッチする、ドキュメント生成・更新APIライブラリ「DioDocs(ディオドック)」連載記事一覧

もっと読む

この記事の著者

WINGSプロジェクト  吉川 英一(ヨシカワ エイイチ)

WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂きたい。著書記事多数。 RSS Twitter: @yyamada(公式)、@yyamada/wings(メンバーリスト) Facebook

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

山田 祥寛(ヤマダ ヨシヒロ)

静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for ASP/ASP.NET。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「入門シリーズ(サーバサイドAjax/XMLDB/PEAR/Smarty)」「独習シリーズ(ASP.NET/PHP)」「10日でおぼえる入門教室シリーズ(ASP.NET/PHP/Jakarta/JSP&サーブレット/XML)」「Pocket詳解辞典シリーズ(ASP.NET/PHP/Perl&CGI)」「今日からつかえるシリーズ(PHP/JSP&サーブレット/XML/ASP)」「書き込み式 SQLのドリル」他、著書多数

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

【AD】本記事の内容は記事掲載開始時点のものです 企画・制作 株式会社翔泳社

この記事は参考になりましたか?

この記事をシェア

  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/14159 2021/06/01 12:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング