kintone devCamp 2017 A-3セッション資料。 「kintone & Azure & Office 365 ハンズオン」

1. 1
Microsoft ハンズオン ラボ
ハンズオン @ kintone devCamp 2017
kintone & Azure & Office 365
Version: 1.0
Last updated: 2017/06/20

2. 2
目次
事前準備と事前知識 (ハンズオン前の準備)...........................................................................3
With Microsoft Azure (Basics)...............................................................................................4
kintone のアプリ作成 .......................................................................................................4
Service Principal 追加 .......................................................................................................4
Data Lake store の作成と権限付与.....................................................................................5
Function App の作成 ........................................................................................................6
kintone の Webhook 設定 ................................................................................................7
動作確認 ...........................................................................................................................7
With Microsoft Office 365 (For Power Users) ........................................................................8
kintone の設定 .................................................................................................................8
Flow の作成 .....................................................................................................................8
動作確認 .........................................................................................................................10
Advanced (User Credential 連携)........................................................................................11
シングルサインオンの構成 ..............................................................................................11
User Credential による API 連携 ...................................................................................13

3. 3
事前準備と事前知識 (ハンズオン前の準備)
 あらかじめ、下記の契約が必要です。
 kintone スタンダード版以上 (試用版可)
https://kintone.cybozu.com/jp/trial/
 Azure サブスクリプション (試用版可)
https://azure.microsoft.com/ja-jp/offers/ms-azr-0044p/
 Office 365 Enterprise サブスクリプション (試用版可)
https://products.office.com/ja-jp/business/office-365-enterprise-e3-business-software
 管理者権限が必要なため、会社などで使用している一般アカウントは不可です
 Skype for Business が使用可能なエディションを使用してください。
 使用する URL は以下です。
 kintone : https://xxxxx.cybozu.com/k/
 xxxxx は、皆さんが取得されている個別のドメイン・プレフィックスです
 管理 (Administration) の際は、https://xxxxx.cybozu.com/ にログインします
 Azure Portal : https://portal.azure.com/
 Office 365 Portal: https://portal.office.com/
 ログイン後、左上のアイコンから、Outlook, SharePoint 等の個別サービスにア
クセスできます

4. 4
With Microsoft Azure (Basics)
このハンズオンでは、kintone の操作ログを Azure Data Lake 上にセキュアな方法で収集しま
す。(収集された情報はビックデータや機械学習のプラットフォームで使用できます。)
kintone の ア プ リ作 成
 kintone にログイン
 [Create App] を選択し、[Create App from scratch] でアプリを新規作成
 作成されたアプリの [Change app settings] をクリック
 [Form] タブを選択
 [Text (Single line)] を 2 つ挿入し、[Setting] で以下の Name、Field Code を設定
Name Field Code
Opportunity Opp
Customer Name Cust
Service Principal 追 加
 Azure Portal にログイン
 左のナビゲーションから [Azure Active Directory] を選択
 [Domain names] メニューを選択して、皆さんが使用しているドメインの名前
(xxxxx.onmicrosoft.com) をおぼえておいてください（コピーしてください）
 [App registrations] メニューを選択

5. 5
 [New application registration] をクリックしてアプリケーションを登録。
この際、[Application type] は [Web app / API] を選択してください。(今回、Sign-on
URL の値は任意で構いません。)
 作成されたアプリケーションの [Keys] メニューを選択
 新しく Key を追加して [Save] ボタンを押します。
この際、Key の値が表示されるので、コピーしておいてください。
 作成したアプリケーションの名前、Application id と Redirect Uri もおぼえておきます
(コピーしておきます)
Data Lake store の 作 成と 権 限 付 与
 Azure Portal で右上の [+] をクリックして、[Data Lake Store] を選択して追加。
(検索ボックスで「Data Lake Store」と入力すると表示されます)
 Azure Portal 上で作成された Data Lake Store を表示。
Data Lake Store が見つからない場合は、Azure Portal のメニューの一番下にある [More
Services] を選択して、検索ボックスに「Data Lake Store」と入力します。
 [Data Explorer] ボタンをクリック
 まず、log フォルダーと、その下に空の tmp.txt ファイルを作成 (アップロード) します
 Data Explorer のツリー (左) でトップの Data Lake Store 自身を選択して、[Access] ボ
タンをクリック。
 [Add] ボタンを押して、上記で作成したアプリケーション (service principal) に Read /
Write / Execute 権限を付与。
(この際、[This folder and all children] にチェックを付けてください。)

6. 6
この操作により、log フォルダーや、その下の tmp.txt にも同じ Permission が付与されま
す。もし、tmp.txt を作り直した場合などには、tmp.txt に個別に上記の Permission を設定し
なおす必要があります。
Function App の 作 成
 Azure Portal で [+] ボタンを押して、Function App を新規作成
 Azure Portal 上で、左のナビゲーションメニューから [App Services] を選択して、作成
した Function App を表示
 [Functions] の横の [+] をクリックして、以下の内容で Function を新規に追加
 [Webhook + API] を選択
 下段の [create your own custom function] をクリック
 [Language] を [Php] に変更して、[HttpGET(CRUD) - Php] を選択
 作成された Function の [Integrate] をクリックして以下を実施
 [Inputs] にある「Azure Table Storage」は、今回不要なので削除
 [Triggers] の「HTTP (req)」をクリックして、[POST] にもチェックを入れる
 Function の run.php に、下記のコードをコピーして貼り付けます
https://aka.ms/kintonehol01
 https://login.microsoftonline.com/yourtenant.onmicrosoft.com/oauth2/token の
「yourtenant」には、皆さんが使用している Azure Active Directory のドメイン名を
貼り付けます
 xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx には、上記でコピーした application id を貼り
付けます
 yyyyyyyyyyyyyyyyyyyy には、上記でコピーした Key の値を貼り付けます

7. 7
 https://zzzzz.azuredatalakestore.net の zzzzz には、皆さんが作成した Data Lake
Store の DNS プレフィックスを設定します
 [Get function URL] リンクをクリックして、Function の URL をコピー
(このあと使用します)
kintone の Webhook 設 定
 kintone 上で作成したアプリの [Change App Settings] を選択
 [Webhooks] を選択
 [+] をクリックして Function の Url を登録
 [Update app] をクリック (<- 以降も、この処理を忘れないようにしてください)
動 作 確 認
 作成した kintone のアプリにレコードを登録
 Data Lake Store の /log/tmp.txt にログが登録されていることを確認してください

8. 8
With Microsoft Office 365 (For Power Users)
このハンズオンでは、Microsoft Flow を使うことで、ノンコーディングで kintone – Office
365 間の連携を実装します。
kintone の 設 定
 kintone にログインして、前述で登録したアプリの id を取得
 アプリの [Change App Settings] を選択して、[API Token] を新規作成 (generate) して
コピー。
この際、[add records] 権限を付与してください。
 [Update App] をクリック
Flow の 作 成
 Office 365 にログインして、SharePoint (SharePoint Online) を表示
 リストを新規作成
([Site Contents] を選択して、[New] – [List] を選択)
 [+] をクリックして、[Single line of text] の「Customer」という名前のカラムを追加
 [Flow] – [Create a flow] を選択して、Flow の新規作成を開始
 テンプレートの中から、[Send approval e-mail when a new item is added] を選択
 [Send approval email] の [To] に、組織内のユーザー (任意) を設定
 [Send emailScope] の条件分岐の YES の欄は、既定ではメールを返信するようになって
います。
この箇所を削除して、以下の通り設定します。

9. 9
 既存の [Send email] アクティビティを削除
 [Add an action] をクリックして [HTTP – HTTP] のアクティビティを追加
 [Method] は [POST]
 [URI] は「https://xxxxx.cybozu.com/k/v1/record.json」
 [Headers]
key value
Content-Type application/json
X-Cybozu-API-Token {上記で取得した API トークン}
 Body に、下記内容を設定します。
https://aka.ms/kintonehol02
 {アプリの ID} には、上記でコピーした kintone アプリの id を設定
 {リストの Title 列の値}、{リストの Customer 列の値} は、それぞれ
Flow の変数から選択して設定

10. 10
 設定完了後は、下記の通りになっているはずです。
 [Create flow] をクリックして完了
動 作 確 認
 上記で作成した SharePoint のリストにアイテムを追加
 承認メールが上記で設定した組織内のユーザーに送信されるので、このメールで
[Approve] (承諾) をクリックして承認実施
 承認後、登録したアイテムが kintone 上のアプリに登録されます

11. 11
Advanced (User Credential 連携)
このハンズオンでは、kintone と Azure Active Directory (Office 365, Dynamics 等) のシング
ルサインオンを構成することで、ユーザーのトークンを使った kintone – Office 365 の連携を
実装します。(連携の動作は、アプリケーションではなく、ユーザーが実施した行為として処理
されます。)
シ ン グ ル サ イ ン オ ン の 構 成
Azure AD の構成
 Office 365 の管理者アカウントで Azure Portal にログイン
 [Azure Active Directory] をクリック
 [Enterprise applications] をクリック
 [New application] をクリック
 [kintone] を選択して [Add] ボタンを押す
 登録されたアプリ (kintone) の [Quick start] をクリックして、[Configure single sign-
on] を選択
 ドロップダウンから [SAML-based Sign-on] を選択
 [Sign-on URL]、[Identifier] に「https://xxxxx.cybozu.com」を入力
(xxxxx には、皆さんの kintone のドメインを設定してください)
 [SAML Signing Certificate] にある証明書の STATUS が Active になっているか確認し
ます。もし Active でないなら、[Make new certificate active] をチェックして保存をおこ
なってください。(証明書は [Create new certificate] で作り直すことも可能です。)
 [Configure Kintone] をクリックして、

12. 12
 Single Sign-On Service URL、Sign-Out URL の値をコピーします
 証明書をダウンロードします
 [Save] ボタンを押して構成を完了
kintone の構成
 https://xxxxx.cybozu.com/ にログイン
(注意 : https://xxxxx.cybozu.com/k/ ではありません)
 [cybozu.com Administration] を選択
 [System Administration] – [Security] – [Login] を選択
 [Enable SAML authentication] にチェックを付ける
 [Login Url]、[Logout Url] に上記でコピーした URL を入力し、[Certificate] として上
記でダウンロードした証明書をアップロード
 [Save] ボタンを押して設定を保存
Federation (SAML SSO) を構成したあとで kintone のテナント管理者でログインするには、
https://xxxxx.cybozu.com/login?saml=off にアクセスします。
ユーザーの設定
 Azure AD にユーザーを 1 名追加してください。
特に Azure AD の管理に Microsoft Account を使用している方は、お使いの Microsoft
Account で以下の確認はできませんので、必ず テナントのユーザーを新規追加します。
 kintone にも同じユーザーを追加します。
Login Name として同じプリンシパル名 (xxx@xxxxx.onmicrosoft.com) を設定します。

13. 13
ここではユーザーを手動で設定していますが、API を使用して設定可能です。(同期用の API
を使って、バックグランドで定期的に同期させることもできます。
動作確認
ここで、いったん、シングルサインオンの動作を確認します。
 下記にアクセスすると、Azure AD のログイン画面が表示されます。
https://xxxxx.cybozu.com/k/
 上記で登録したユーザーの ID, パスワードを入力すると kintone にログインできます。
User Credential に よ る API 連 携
アプリの登録 (Azure AD)
 Office 365 の管理者アカウントで Azure Portal にログイン
 [Azure Active Directory] を選択
 [App registrations] を選択
 [New application registration] をクリックして、下記設定でアプリを追加
 Application type : Native
 Redirect Uri : https://xxxxx.cybozu.com
 登録後、[Settings] - [Redirect URIs] を選択して「https://xxxxx.cybozu.com/k/*」を追加
 [Settings] – [Required permissions] を選択
 [Add] を選択して、以下の Permission を追加
 API : Skype for Business Online

14. 14
 Permissions : (すべて選択)
 [Manifest] をクリックしてマニフェストエディタを表示
 「oauth2AllowImplicitFlow」を「true」に変更して保存
 最後に、Application id をコピー
フォームの設定 (kintone)
 上記で作成したアプリ（案件管理）の [Change App Settings] を選択
 [Form] タブをクリック
 [Text (Single line)] を挿入し、Name を「Account Manager」、Field Code を
「AccManager」として保存
 空いている箇所に [Blank Space] をドラッグアンドドロップ。
この際、できるだけ広めに領域を確保してください。
 [Setting] メニューを選択して、[Element ID] に「renderarea」と入力して保存
 いったん [Update App] で保存
Java スクリプトの設定（kintone）
 アプリ（案件管理）の [Change App Settings] を選択
 [JavaScript and CSS Customization] を選択
 [Upload JavaScript for PC] の [Add File] で下記をアップロード
https://aka.ms/kintonehol03
 xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx は、皆さんの application id に変更します

15. 15
 [Save] して、[Update App] で反映
アプリ利用許可のための Consent
このあと動作確認をおこないますが、その前に一点だけ注意があります。
利用者が今回登録した Azure AD のアプリを使用する場合、このアプリを使用しても良いか利
用者に確認をおこなう Consent と呼ばれる処理をユーザーごとにあらかじめ 1 度だけ実施して
おく必要があります。
現実の開発では、このための利用開始画面などを提供してそこで Consent をさせますが、今
回は、Web ブラウザーを使って直接下記の Url を入力し、表示される確認画面で承諾をおこ
なってください。(xxxxx の箇所は、皆さんの kintone ドメインにあわせて変更してくださ
い。)
https://login.microsoftonline.com/common/oauth2/authorize?response_type=token&client_id=
{上記で取得した application id}&redirect_uri= https%3A%2F%2Fxxxxx.cybozu.com
&resource=https%3A%2F%2Fwebdirjp1.online.lync.com%2F
動作確認
 kintone に Azure AD とのシングルサインオンによりログイン
(上記の Consent したユーザーでログインします)
 アプリ（案件管理）で、レコードの Account Manager に、同じ組織のユーザーのプリン
シパル名 (xxx@xxxxx.onmicrosoft.com) を入力します。
 上記のレコードの Record Detail を表示
( のアイコンをクリックします)
 フォーム上の [問い合わせ] ボタンを押すと、kintone 上で Skype for Business の API に
よる Account Manager との会話が可能です。