SHOEISHA iD

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

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

ComponentZine(ActiveReports)byメシウス(AD)

帳票アプリをAmazon S3にホスティングする──「ActiveReportsJS」の活用術

JavaScript帳票ライブラリ「ActiveReportsJS」の活用事例

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

帳票アプリの作成

 ここから、帳票アプリを作成していきます。作成するのは、トップページ(index.html)と、帳票表示を行うページ(sheet.html)です。トップページからOAuthクライアントに認可要求を発行し、リダイレクト先である帳票ページにて認可コードを受け取り、それをもとにアクセストークンを取得、APIの呼び出しと帳票表示、という流れになります。

帳票を作成する

 まず、前記事の解説に従って、ActiveReportJSデザイナで帳票レポート定義ファイル(customer_list.rdlx-json)を作成してください。設計時にはOAuth認証が使えないので、前記事同様にAPIトークンを使います。デザインが済んだら、「パラメータの使用 - ActiveReportsJS(アクティブレポートJS)ヘルプ | Developer Tools〈開発支援ツール〉 - メシウス株式会社」を参考にパラメータAccessTokenを作成して、データソースとデータセットのエンドポイントとHTTPヘッダを以下のように書き換えます。

データソースとデータセットの書き換え①
データソースとデータセットの書き換え①
データソースとデータセットの書き換え②
データソースとデータセットの書き換え②

トップページを作成する

 トップページは、以下のリストのようになります。認可要求を出すだけのリンクだけが重要なので、その他は適当で構いません。ファイル名は、index.htmlとします。リンク中のサブドメイン、クライアントID、リダイレクト先URLは、各自のものに置き換えてください。

[リスト]index.html
…略…
<h1>帳票アプリをAmazon S3にホスティングする、「ActiveReportsJS」の活用術</h1>
<p>デモを開始するには、この<a href="https://<サブドメイン>.cybozu.com/oauth2/authorization?client_id=<クライアントID>&redirect_uri=<リダイレクト先URL>&state=state1&response_type=code&scope=k:app_record:read">リンク</a>をクリックしてください。</p>
<p>Cybozuのログインページに遷移しますので、ユーザー名とパスワードを入力してください。</p>
…略…

 このファイルをS3バケットにアップロードして、ブラウザで表示できることを確認してください。なお、認可コードの取得のためのURLは以下の構成となります。<ステート>はCSRF対策のためのランダムな値を指定します。<スコープ>には、「kintoneのOAuthスコープ - cybozu developer network」で説明されている認可範囲を指定します。ここでは、前者について「state1」、後者について「k:app_record:read」(kintone、レコード、読み出し)としました。

https://<サブドメイン>.cybozu.com/oauth2/authorization?client_id=<クライアントID>&redirect_uri=<リダイレクト先URL>&state=<ステート>&response_type=code&scope=<スコープ>

帳票ページを作成する

 帳票ページは、OAuthクライアントからリダイレクトされるページです。このページにて、認可コードからアクセストークンの取得を行ったあと、アクセストークンを用いてAPIの呼び出しと帳票表示を行います。帳票ページのURLは、OAuthクライアントで指定したリダイレクトエンドポイントと一致する必要があります。認可コードはURLパラメータ(code=認可コード&state=ステート)として渡ってくるので、これを以下のリストのコードで取得します。

[リスト]sheet.html
const queryString = location.search;
const queryParams = new URLSearchParams(queryString);
const code = queryParams.get('code');		// 認可コード
const state = queryParams.get('state');		// ステート

 codeかstateが空である場合には、アクセストークンの取得は行わず、帳票の表示も行いません。問題なければ、以下のコードでアクセストークンの取得を行います。<トークン取得APIのURL>にはAPI Gatewayに作成したトークンエンドポイントのURLを、<リダイレクト先URL>にはCloudFrontのsheet.htmlのURLを、<クライアントID>にはクライアントIDを、<クライアントシークレット>にはクライアントシークレットを、それぞれ指定します。

[リスト]sheet.html
if(code && state) {
    const tokenEndpointUrl = "<トークン取得APIのURL>";
    const redirectUrl = "<リダイレクト先URL>";
    const clientId = "<クライアントID>";
    const clientSecret = "<クライアントシークレット>";
    const data = {
        "grant_type": 'authorization_code',
        "redirect_uri": redirectUrl,
        "code": code
    };
    const params = new URLSearchParams();
    Object.keys(data).forEach(key => params.append(key, data[key]));
    const opt = {
        method: "POST",
        headers: {
            "Content-Type": 'application/x-www-form-urlencoded',
            "Authorization": 'Basic ' + btoa(clientId + ":" + clientSecret),
        },
        body: params.toString()
    };
    const getToken = async () => {
        let result = await fetch(tokenEndpointUrl, opt);
        let text = await result.text();
        …ビューワ呼び出し処理…
    }
    getToken();
}

 最後に、ビューワを呼び出す処理です。openメソッドに、パラメータReportParamsを追加します。これは、接続文字列中に指定しパラメータAccessTokenに、実際のアクセストークンを設定する処理です。

[リスト]sheet.html
const json = JSON.parse(text);
const accessToken = json.access_token;
const viewer = new ActiveReports.Viewer("#viewer-host", {
    language: "ja",
});
viewer.open(
    "./reports/customer_list.rdlx-json", {
        ReportParams: [
        {
            Name: "AccessToken",
            Value: [accessToken],
        },
        ],
    }
);

S3へのデプロイと実行確認

 最後に、S3にファイルを配置して帳票を表示させてみます。

帳票アプリをデプロイする

 ActiveReportsJSの製品版、またはトライアル版のzipの解凍によってできたdistフォルダから、cssフォルダとscriptsフォルダをコピーし、HTMLファイルと同じ階層に配置します。そして同じ階層にreportsフォルダを作成し、帳票デザイナで作成した帳票ファイル(customer_list.rdlx-json)をその中に配置します。これら全てを、S3バケットにアップロードします。

デプロイ後のS3バケット
デプロイ後のS3バケット

Webブラウザに帳票を表示

 ファイルを配置したら、複数ユーザーによる帳票表示を確認します。

 まずは、①Kintoneからサインアウトし、②デプロイしたindex.htmlをブラウザで表示して、③リンクをクリックします。

異なるユーザーによる帳票の表示①
帳票アプリケーションのindexページ
 次に、④Kintoneにサインインし、⑤アプリへの許可をします。異なるユーザーによる帳票の表示②
kintoneへのログイン
異なるユーザーによる帳票の表示③
kintoneアプリへの許可
 そして、⑥帳票の表示を全ユーザーに対して行ってください。異なるユーザーによる帳票の表示④
全フィールド閲覧可能ユーザーによる帳票の表示
 ユーザー「山内直」は全フィールド閲覧可能ですが、その他のユーザーは部分的に閲覧できないフィールドがあるので、帳票の一部が欠けていることを確認してください。異なるユーザーによる帳票の表示⑤
一部フィールド閲覧制限ユーザーによる帳票の表示

まとめ

 本記事では、kintoneのデータを帳票形式で表示するActiveReportsJSによるアプリを、Amazon S3にホスティングする事例を紹介しました。また、OAuth認証を用いることでユーザーごとのアクセス権に応じた帳票表示も可能であることを示しました。

関連リンク

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

  • X ポスト
  • このエントリーをはてなブックマークに追加
ComponentZine(ActiveReports)byメシウス連載記事一覧

もっと読む

この記事の著者

WINGSプロジェクト 山内 直(WINGSプロジェクト ヤマウチ ナオ)

WINGSプロジェクトについて>有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂きたい。著書記事多数。 RSS X: @WingsPro_info(公式)、@WingsPro_info/wings(メンバーリスト) Facebook <個人紹介>WINGSプロジェクト所属のテクニカルライター。出版社を経てフリーランスとして独立。ライター、エディター、デベロッパー、講師業に従事。屋号は「たまデジ。」。

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

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

静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」代表。主な著書に「独習シリーズ(Java・C#・Python・PHP・Ruby・JSP&サーブレットなど)」「速習シリーズ(ASP.NET Core・Vue.js・React・TypeScript・ECMAScript、Laravelなど)」「改訂3版JavaScript本格入門」「これからはじめるReact実践入門」「はじめてのAndroidアプリ開発 Kotlin編 」他、著書多数

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

提供:メシウス株式会社

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

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

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/19970 2024/09/03 20:33

おすすめ

アクセスランキング

アクセスランキング

イベント

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

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

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

メールバックナンバー

アクセスランキング

アクセスランキング