プリザンターのAPI連携を試してみた!(実践編)

こんにちは。IISの田口です。
今回もプリザンターについての投稿です。
大変遅くなりましたが、4/13の勉強会で発表したAPI連携の実例「プルダウンの連携」について公開します。

実践内容

2つのプルダウン(親プルダウン、子プルダウン)を連携し、親プルダウンの選択結果に応じて子プルダウンの選択肢を動的に変更させます。
具体的な例では下図のような費用の勘定科目の大項目の選択内容に応じて小項目の選択肢を変化させます。
fig1_実践内容

準備

以下の2テーブルを準備します。

  1. 親テーブル
    タイトルに親プルダウン(大項目)の選択肢を登録する記録テーブル
    fig2_親テーブル
    fig3_親テーブルエディタ

  2. 子テーブル タイトルに子プルダウン(小項目)の選択肢を登録し、分類Aは親テーブルとのリンク項目を設定した記録テーブル
    fig4_子テーブル
    fig5_子テーブルエディタ
    fig6_子テーブルエディタ

  3. テスト用テーブル 分類Aは親テーブルとのリンク項目、分類Bは子テーブルとのリンク項目とした記録テーブル
    fig7_テスト用テーブル
    fig8_テスト用テーブルエディタ
    fig9_テスト用テーブルエディタ

事前のポイント

今回のプルダウン連動についてポイントが2点あります。

  1. DB上は、リンク設定した子テーブルの分類項目に親テーブル側の「ID値(IssueId/ResultId)」が登録される。
    今回の場合では子テーブルの分類A(テーブルカラム名:ClassA)に親テーブルのResultIdが登録されます。
    fig10_データ内容

  2. リンク項目を画面表示した場合、プルダウン選択肢のタグ(optionタグ)は「ID値(IssueId/ResultId)」と「Title」で生成される。
    今回の場合では分類Aのhtmlは以下のようになります。

<select id="Results_ClassA" name="Results_ClassA" class="control-dropdown">
  <option value=“ID値”>Title</option>
  ・・・
</select>

出来ました!

事前のポイントを踏まえ、分類Aの変更後イベントとして以下のスクリプトを作成しました。

$(document).on("change", "#Results_ClassA", function(){
  var childSiteId = "4";
  var selectVal = $("#Results_ClassA").val();
  var uri = $("#BaseUrl").val().replace("items", "api_items") + childSiteId + "/get";
  var json = {
    "ApiKey": "",
    "Offset": 0,
    "View": {
      "ColumnFilterHash": {
        "ClassA": "[\"" + selectVal + "\"]"
      },
      "ColumnSorterHash": {
        "Title": "asc"
      }
    }
  };
  
  $.post(uri, JSON.stringify(json),"json")
  .done(function(data){
    $("#Results_ClassB").children().remove();
    for(var item of data.Response.Data){
      $("#Results_ClassB").append($("<option>").val(item.ResultId).text(item.Title));
    }
  })
  .fail(function(){
    //alert("失敗");
  })
  .always(function(){
    //alert("完了");
  });
});

少し解説

1.イベントは要素に直接指定せずに、$(document).on()で指定する

$("#Results_ClassA").on("change", function(){・・・のように要素に直接指定すると、更新画面の右上に表示する「前」「次」「再読込」ボタンをクリックするとイベントが消えてしまいます。
プリザンターのソースコードを読んでもイベント指定は$(document).on()で登録していますので、こちらがおすすめです。

2.システム内部でAPI連携する場合、POSTするjsonファイルにはAPIキーを設定しない

マニュアルには「ユーザ毎にAPIキーを発行する必要がある」とありますが、ログインしているシステムのWebサイトと利用するAPIのWebサイトが同一の場合、APIキーを設定しなくても(空文字を設定することで)APIは動作します。
また、設定する場合は必ずログインユーザのAPIキーを設定してください。他人のAPIキーでAPI操作した場合、操作後に別の画面に遷移するとログインユーザが変わってしまいます。

3.jsonファイルの検索条件

事前のポイントにあるとおり、子テーブルに対する検索条件は「分類A=親プルダウンの選択結果(ID値)」となりますので、ViewのColumnFilterHashに設定します。

あとはソースを読んでいただければわかるかと思いますが、APIを使って子テーブルからデータを取得し、取得したデータを使って分類Bのプルダウン選択肢を再構成することで、動的変化を実現しています。選択肢の再構成は事前のポイントにあるとおり、ID値とタイトルを使ってoptionタブを再構成します。
なお、前回の私の記事では$.ajax()type:"post"を指定することで、APIjsonファイルをPOSTしましたが、今回のサンプルは$.post()で実装しました。

最後に

前回の記事ではAPIの動作確認レベルでしたが、今回はより実践的な内容でAPIを利用してみました。動的変化は個人的には一番最初に実現したかった内容でしたし、イベントの追加とAPIでのデータ連係という目線では他にも色々活用できると思います。
皆さんの参考になれば幸いです。

神保町 Unity & Unreal Engine 勉強会

IIS石崎です。
IIS会議室を会場として「神保町 Unity & Unreal Engine 勉強会」を開催しました。

受付の様子
f:id:imageinformationsystem:20180514202241j:plain

参加者の皆さん進捗を出していただけたようです。

IISでは今のところはまだUnityやUnreal Engineを業務では扱っていませんが、今後必要にな技術だと考えています。
今後も定期的に開催して行きますのでUnityやUnreal Engineをこれから頑張りたい方、一緒に学んで行きましょう。

これからの技術に関心のある方

我々はこれからの技術に関心を持って学習に力を入れています。 これからの技術に関心のある方、ぜひ一度弊社に遊びにいらしてください。

今後の予定

Unity & Unreal Engine 勉強会は毎月第2火曜日に開催しています。
イベントは開催が決定したら connpass サイトで告知・募集していますので是非チェックしてください。

インプリムさんと作戦会議

IISの片柳です。
「プリザンター」を開発する株式会社インプリム(https://implem.co.jp/)さんと 一緒に、5月と6月の展示会に出展することになりました。
(インプリムさん、ありがとうございます!がんばりましょう!!)
これから1ヶ月かけて「プリザンター」の効果的なアピール方法を模索していきます。
まずは最初の激論スタート。
その後はいつもの通り、夜の中野ワールドへ。

f:id:imageinformationsystem:20180412135907j:plain

プリザンターのAPI連携を試してみた!

こんにちは。IISの田口です。

プリザンターAPIJavascriptで様々な外部システムと連携できる拡張性の高さも特徴の一つです。
そこで、私もAPI連携について試してみました。
APIの記事としては先に公開されている方々もいらっしゃいますので、私がつまずいた箇所にポイントを絞って紹介します。

ポイントはContentTypeの設定です

まずはC#で試してみました。
結果としてContentTypeを以下のように

"application/application/x-www-form-urlencoded"

と設定することでレコードが取得出来ました。
JSONファイルだから"application/json"でOKかと思ったらダメでした。

private async Task<string> ApiTest()
{
    string uri = "http://localhost/pleasanter/api_items/99/get";
    Dictionary<string, string> param = new Dictionary<string, string>()
    {
        ["ApiKey"] = "取得したAPIキー"
    };

    using (HttpClient httpClient = new HttpClient())
    {
        var json = new JavaScriptSerializer().Serialize(param);
        var content = new StringContent(json, Encoding.UTF8, "application/x-www-form-urlencoded");  // ←これで取得出来る。
        // var content = new StringContent(json, Encoding.UTF8);                                       ←これだと取得出来ない
        // var content = new StringContent(json, Encoding.UTF8, "application/json");                   ←これでも取得出来ない

        var response = await httpClient.PostAsync(uri, content);
        var result = await response.Content.ReadAsStringAsync();
        return result;
    }
}

次にJavascriptでも試してみました。 JavascriptではContentTypeを設定しないことでレコードが取得出来ました。
※むしろ何か設定すると取得出来ませんでした。

$(function(){
  var uri = "http://localhost/pleasanter/api_items/99/get";
  var json = {
    "ApiKey": "取得したAPIキー"
  };

  // contentTypeは設定しない
  $.ajax({
    type: "post", 
    url: uri, 
    data: JSON.stringify(json),
    dataType: "json"
  })
  .done(function(data){
    alert("成功");
    alert(JSON.stringify(data));
  })
  .fail(function(){
    alert("失敗");
  })
  .always(function(){
    alert("完了");
  });
});

Javascriptでのその他の注意点として、開発サーバなど自己署名証明書(いわゆるオレオレ証明書)によるhttps通信だと$.ajaxがエラーになります。

感想

Javascriptの処理はプリザンターで2つのプルダウンの連携(プルダウンAの選択内容に応じてプルダウンBの中身を動的に変更する)などに活用できます。

最後に

ポイントであるContentTypeの設定内容については@hatayan1126さんの記事がヒントになりました。ありがとうございました。

プリザンターの隠しパラメータ?

こんにちは。IISの田口です。

提案でプリザンターの画面を見せたときにあるお客さんから「トップ画面の『新規作成』や『管理-グループの管理』って非表示に出来ないの?」と質問がありました。
そこでこの要望に対応するために調査した結果を紹介します。

やりたいこと

  1. 右上の「管理」-「グループの管理」を非表示にしたい。
  2. トップ画面で右上の「新規作成」を非表示にしたい。

通常の設定では対応できない

1.ユーザ登録時に「テナント管理者」をチェックOFFで登録すると、「管理」メニューで「組織の管理」「ユーザの管理」が非表示となります。が、「グループの管理」についてはユーザ登録画面では設定が出来ませんでした。
f:id:imageinformationsystem:20180403180914p:plain f:id:imageinformationsystem:20180403181104p:plain

2.「サイトのアクセス制御」で対象ユーザに対して読取専用の設定にするとそのサイト(フォルダ)では新規作成が非表示になりますが、トップ画面では表示したままです。またトップ画面には「サイトのアクセス制御」がありません。
f:id:imageinformationsystem:20180403181203p:plain f:id:imageinformationsystem:20180403181215p:plain

ソースを読んでみる

トップ画面の「新規登録」と「グループの管理」について制御していないかとソースを確認したところ、それっぽいのを見つけました。 /Implem.Pleasanter/Libraries/Settings/UserSettings.cs
です。
UserSettingsクラスにDisableTopSiteCreation、DisableGroupAdminという2つのプロパティがありました。

ん?UserSettingsってどこかで見たような気が・・・・・

思い出しました!Usersテーブルです! f:id:imageinformationsystem:20180403181336p:plain よく見ると{}が登録済みです。
※NULLのユーザはAdministratorとAnonymousユーザです。

出来ました!

中括弧ってことは、JSON形式でいいんじゃね?と思い、以下の内容を登録してみました。
※実際は改行せずに登録しました。

{
    "DisableTopSiteCreation": true,
    "DisableGroupAdmin": true
}

f:id:imageinformationsystem:20180403181410p:plain

ログインした結果、「新規作成」、「管理(グループの管理)」両方とも非表示になり、実現出来ました。
※このユーザはテナント管理者ではなかったため、グループの管理を非表示にすることで「管理」自体が非表示となりました。 f:id:imageinformationsystem:20180403181438p:plain

最後に

この記事内容はあくまでも個人で調査した結果であり、正式な手順・方法でないことをご了承願います。
タイトルに「隠しパラメータ」と書きましたが、隠しでなく、単に登録方法を見落としているかもしれませんし、公式ヘルプに記載済みの情報かもしれません。
また、本記事公開時には既にバージョンアップして画面から設定可能となっているかもしれません。

2018年3月定例会「クロスプラットフォーム開発最前線2018」

こんにちは、IIS石崎です。
日本Androidの会様主催のイベント 2018年3月定例会「クロスプラットフォーム開発最前線2018」にて、弊社石崎(私です)が登壇をさせていただきました。
イベントではクロスプラットフォーム開発をテーマにMonaca / Cordova、Unity、Xamarin、PWAが話題として扱われました。
弊社石崎(私です)はその中でXamarinの話題を担当し、Xamarinの概要と簡単なアプリを作って実践で試すための情報を共有いたしました。
ネイティブの経験があれば簡単なアプリなら直ぐに作れますので、ぜひ一度クロスプラットフォームの選択肢として検討して見てください。

Xamarinに関心のある方

IISでXamarinによるモバイルアプリ開発に力を入れています。 Xamarinに関心のある方、ぜひ一度弊社に遊びにいらしてください。

神保町 プリザンター 勉強会

IIS寺戸です。
2018年3月8日(木)、IIS会議室にて 株式会社インプリム社(https://implem.co.jp/)主催の プリザンター勉強会が開催されました。
会場の様子

スケジュール

19:00~19:30 プリザンター概要説明
19:30~19:45 案件管理への活用例をご紹介
19:45~20:45 案件管理アプリを作ってみよう
20:45~21:00 質問コーナー

セッション「案件管理への活用例をご紹介」では弊社田口が案件管理の活用例の紹介させて いただきました。
発表の際に特に関心を頂いた位置情報の取得についてブログ記事にまとめています。是非こちらもご覧ください。
多くの方がご参加いただき、ありがとうございました。

登壇する弊社田口