狠狠撸

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

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
事前準備と事前知識 (ハンズオン前の準備)
? あらかじめ、下記の契約が必要です。
? 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
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
? [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
この操作により、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
? 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
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
? 既存の [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 に、下記内容を設定します。
? {アプリの ID} には、上記でコピーした kintone アプリの id を設定
? {リストの Title 列の値}、{リストの Customer 列の値} は、それぞれ
Flow の変数から選択して設定

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

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
? 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
ここではユーザーを手動で設定していますが、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
? 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] で下記をアップロード
? xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx は、皆さんの application id に変更します

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 との会話が可能です。

狠狠撸

kintone & Azure & Office 365 ハンズオン_松崎剛氏

More Related Content

kintone & Azure & Office 365 ハンズオン_松崎剛氏

狠狠撸

kintone & Azure & Office 365 ハンズオン_松崎 剛氏

More Related Content

kintone & Azure & Office 365 ハンズオン_松崎 剛氏

kintone & Azure & Office 365 ハンズオン_松崎剛氏

kintone & Azure & Office 365 ハンズオン_松崎剛氏