Programmers Office

いつも悩んで終わっている記事になってしまうのですが、今回は作りきった話。 ただ、作りきってから解説を書こうと思うと熱が冷めてしまっているというジレンマ・・・ IBMのWatson Studio から利用できる機械学習環境 AutoAI で予測モデルを構築し、それを外部PHPアプリから参照するアプリを作りました。タイタニック　チャレンジ 以前から作ろうとしていた、タイタニックアプリがやっとできた！ということです。タイタニックアプリを作ろう（Nuxt.js 開発環境の基本） システム構成 基本的には、機械学習を行なったモデルをAPIとして公開し、そのAPIを呼び出すアプリを作る、というぬるさくで学習していた構成です。 https://norwegian-geek.booth.pm/items/1296418 いままでかなり色々な方法を試してきたわけですが、AutoAIを知った事で、ローカルで構築した機械学習環境を公開環境に持っていく、という事を考えなくて良くなったのが大きいです。 まずは、AutoAIがデプロイ機能まで持っていて、これでAPIを公開できます。 これを呼び出すアプリは、WordPressサイトを立てて、その中でPHPアプリを書きました。 AutoAI によるAPI公開 こちらについては、AutoAIで検索するだけでも色々情報が出てきますし、「AutoAI タイタニック」と検索すれば、まさに今回行なったことをみなさんやられているので、割愛します。 これが無料で公開されているというのがすごいなと思います。 WordPress 環境内にアプリ構築 UI側をどう作るかがこの記事のメインとなります。 最初は、せっかく勉強したということでOutSystemsでやってみようと思いました。 OutSystems まず、ちょっと悩んだのが、あまりにもデータとフォームが結合していて、単なる検索条件を入力するための画面を作りたいのに、フォームのためにはデータが必要という構造。フォームを使わない方法も当然あると思いますが、仮のデータを作成する方法でもできなくはなかったです。 REST API呼び出しについては、ちゃんと仕組みが用意されていて、これは便利。テスト呼び出しもしやすい画面が用意されている。 それで、呼び出しまではできたのですが、取得したデータの処理がうまくできませんでした。これについては、そもそもAutoAIのJSONの構造が複雑すぎませんか？という気もしています。 WordPress 昔から思っているのですが、CMSで管理するコンテンツというのは、単にブログ等の文章だけではないはず、CMSはサイト全体のデザインの統一性を実現するために使用するもので、そこには文章だけではなくアプリケーションも含まれるのではないでしょうか。その一例として、問い合わせフォームくらいはCMSの機能に含まれたりもすると思うのですが、もっとがっつりしたアプリもCMS管理配下に乗せてしかるべきではないか、という気がしています。 なぜこれを私がこれを強く思うかというと、私がデザインが苦手だからです。なるべくセンスの良いデザインを使わせていただくために、その枠組みの中でアプリも作りたいと思うのです。 実際それはやったことはあるので、自分のできる範囲に戻ったという感じではあります。 フォームプラグイン そう考えた上で、今回最初に、Wordpressのプラグインを使って、フォームを作れないかと思いました。 色々なプラグインを見ていく中で、使えなくないなと思ったのは、Form Maker by 10Web。The Most Powerful Drag&Drop WordPress Form Builder デザインテーマも用意されていて（Wordpress本体のテーマとは完全独立なのは良い悪いあると思いますが）、きれいなデザインのフォームが作れます。 また、無料で使えるコントロールが充実しています（他の類似プラグインは有料オプションが多い印象）。 ただし、基本的には、あくまでも入力した内容をデータに保存して、せいぜいメールを飛ばす機能。今回やりたかったのは入力値を外部のAPIに渡すこと。フォーム処理の後外部URL等に転送することはできますが、入力値がPOSTされるわけではないのです。 これについては、もう少し頑張ってみました。 JavaScriptを追加することができますので、 function send_form(){ var f = document.forms[“form6”]; f.method = “POST”; f.action = “/apps/titanic-result/” f.submit(); } みたいなものを追加し、画面側では標準のSubmitボタンを使わずに、ボタンを追加して、OnClickイベントにsend_form()を記載する、ということをすると、指定したところに入力値をPostすることができるわけです。

一連の投稿の続きになります。 OutSystemsはローコード開発か。ノーコーディングにはならないのか、ということで、OutSystems とGlide App（glideapps）の比較用に、Glide で使用したものと同じデータを使用して、OutSystems でアプリ自動生成を行ってみます。 使用するデータは、下記で調整を行なった、港区観光施設データです。Glideの味わい方〜オープンデータを活用しよう OutSystems 環境整備 OutSystems セルフトレーニングで、最後に肝心のデザイン変更のところを飛ばしてしまいましたが、そこでは、SILK UI フレームワークのDublin テンプレートを使用することになっていたので、まずは、そちらをインストールします。 Forge page で「Dublin Template」を検索して、インストールします。 そして、アプリケーションの作成。 Dublinテンプレートによるアプリ作成（失敗） 順に進めていくと、初期画面が出来上がります。
一度ここで起動してみるとこんな感じ。
この辺が、どうも何をしているのか、何をすべきなのかよくわからない。 そして、結局起動できず。 もしかして、Mac版はダメだけど、Windows版なら、と思ったのですが、ダメでした。一応、画面生成まではできましたが、起動しません。一応、こんな画面ができるという感じです。 Dublinの場合は、左上に、デバイス切り替え機能がつきます。 基本テンプレによる画面作成 では基本テンプレートならどうかということ、こちらはできました。 テンプレートとしてTop Menu を選択する以外は、上記Dublinの場合と同じです。 デザイン画面を開いて、おもむろにExcelをインポートしますが、Google スプレッドシートからダウンロードしたものはExcelファイルではないと言われて、失敗しました。一度Office 365 で開いて保存し直したら大丈夫でした。 ただ、シート名、1行目の名称でテーブルを作ってくれると思ったら、それは失敗しました。 まずWindows版だと、ちゃんとシート名を認識はしてくれています。 これが、Mac版だとこの時点でダメ。 で、Windows版でも、Mac版でも、インポート結果はこの通り。 単なる連番になってしまいました。これは、シート名、項目名が日本語のためかと思われます。 それでも進めることはできます。 基本テンプレの場合は、初期状態でMainFlowには何もありません。 ここにEntity1 を２回ドロップすることで、リスト画面と詳細画面が生成されます。勝手に結合されている状態です。 実行する前には、各画面のAnonymous プロパティをチェックOnにします（ログイン画面を表示させないため）。 そして起動するとこのような画面が生成されます。明細部分のページングもされていますし、これをスタートとするのは大いにアリでしょう。
Glide と違って、参照画面だけでなく、更新画面も生成されます。これは割と大きな違いかもしれません。 ただ、これを完成品としては公開できないかなという感じがあり、その辺が繰り返しになりますが、Glide App と、OutSystems の違いになるような気がします。

Qiita に初投稿してみました。 Glide App（glideapps） のMap List 機能 https://qiita.com/JQinglong/items/8c8cd2e2d5c29225972a ノーコーディングツールとしてのGlide App（glideapps）（検索で引っかかりにくいので、こういう書き方をしてみてます）のパワーは凄まじい。 今回取り上げたMap List 機能で、地図上に複数展表示ができる。そして、これは単にスプレッドシートの場所情報を表示しているだけであり、スプレッドシートの更新は自由にできる。 そして、ちょっと前に、Per-user data 機能も追加されており、ログインユーザごとのデータのフィルタリングができるようになっている。 これらを組み合わせると、あんなことやこんなことや・・・ そして、Glideの中では、一切コーディングさせない。コーディング的なこともさせない。 一方、OutSystems。 これもアプリの色々な要素の自動生成機能は凄まじい。ある意味、Glideと同じことは、ほぼ同様にできる（あとでやってみる）。 そしてそこにとどまらない。基本的に、どんどん自動生成されたものに対してさらにカスタマイズできる。自動制裁されたアプリを見て、オブジェクト、変数、RDB構造のようなものを想定できるならば、どんどん「式」を書ける。 これは考え方の違いでしょう。 OutSystems は、ノーコーディングというよりはローコーディングであり、結局は従来と違う方法でコーディングしている。そして、たまにコーディングの影が見える。この影が見えると、拒絶反応を起こす人はそれなりにいて、それは自分の仕事ではないと感じるのだと思われる。 OutSystems を見て、Accessだなと感じたのは、基本的には自動生成してくれるのだけれども、それで完了でもなくて、そこから手を入れるんだなというところ。だから利用者もエンドユーザではなく、開発者。 Glide は徹底的にノーコーディングで完成品まで持っていくことに徹している。 これにより利用者としてエンドユーザも入ってくると思われる。そのためには、痒いところに手が届かないのも、今はやむを得ないという考え方。イノベーションのジレンマが発生している状態ではあるが、一気にこの20数年の開発スタイルをひっくり返しかねないやり方だ、というのは言い過ぎ？？

テキストによるエクササイズの続きです。8.2　ウェブサービスのエクササイズ（OutSystems セルフトレーニング） Part 1: Add Cinemas at Warp Speed 前に画面を誰かが勝手に作ってくれたと思ったのは、スキャフォールドだったんですね。 勝手に作るんじゃなくて、ドラッグ&ドロップで作ってくれるというのも良いなと思います。 さらに画面へのドラッグ&ドロップで明細画面を追加してくれて、ポップアップエディタまで作ってくれるのはすごい。 で、ポップアップエディタは作ってくれましたが、Popup_InfoBalloonはダメでした。今度は検索したら選択肢には出てきますが、ドロップするとエラー。 もしかしてlondonじゃないから？ 変えるのも大変そうだけど・・・ https://www.outsystems.com/forums/discussion/15489/changing-the-theme-of-my-application/#Post84632 Part 2: RichWidgets とりあえず進めてみる。 LayoutsOther¥Layout_Popup を選択するところは、LayoutOther が存在しないため、Layouts¥LayoutPopup を選択してみたが、削除することになっているHader もFooter もないので、やはり違うみたい。 MovieTable のStart Index プロパティに、List_Navigation_GetStartIndex(MovieTable.Id) を指定するとのことだが、エラーになってしまう。 それは諦めて、Dynamic Sortingの追加をしたら、またエラー。 一旦追加したList_SortColumn を削除したのですが、復活せず。 最後に破壊してしまいました。 とりあえず、この先は別のアプリを作ってみるエクササイズなので、OutSystems セルフトレーニングシリーズは、ここで一旦終了とします。

テキストによるエクササイズの続きです。7.4　セッションハンドリングのエクササイズ（OutSystems セルフトレーニング） Part 1: Add a Reference to a REST endpoint こんなサイトがあり、APIを提供している。 https://www.themoviedb.org/ Part 2: Define Site Properties for the API サイトプロパティの追加のみ Part 3: Call a Web Reference method 画像を選択するところで、RichWidgetsが表示されないので、Header_Logoというものが選択できない。 まあ、普通のLogoでもよいか。 そして、ここではStyle Editorが登場する。 ServiceCenterでログも見られます、は良いが、詳細のリクエスト内容までは見えないですね。 Part 4: Implement a Web Service Callback OnAfterResponse というコールバックイベントが用意されています

テキストによるエクササイズの続きです。6.4　ウェブブロックとUIを再利用してみよう（OutSystems セルフトレーニング） Part 1: Create and use Session Variables Find Usages みたいな技を教えてくれるのは良いですね Part 2: Create and use Site Properties サイトプロパティを変えてもブラウザ再表示でMovie詳細画面のまま反映された。

テキストによるエクササイズの続きです。6.2　画面のライフサイクル: Ajaxのエクササイズ（OutSystems セルフトレーニング） Part 1: Create a Web Block for star ratings Placeholder のwidth はempty にはできず、Fullにしておく Part 2: Make the stars in the Block clickable Search Box で「Notify」を検索することとなっているが、検索されない。 https://www.outsystems.com/forums/discussion/41219/notify-deprecated-in-service-studio-11-what-can-i-use-to-replace-it/ Manage Dependencies (ctrl + q) で探してくれは良いけど、Deprecated（廃止予定）ってどういうこと？そちらを教えて欲しい・・・ ・・・一応その回答はこちら。 https://success.outsystems.com/Documentation/11/Developing_an_Application/Design_UI/Reuse_UI/Use_Events_to_Propagate_Changes_From_a_Block_to_the_Parent これまでは、ウェブブロックの中でScreenAction（テキストではStarClicked）を定義して、それをNotifyするという仕組みだったのが、11では、ScreenActionとは別のEventというものが定義できるようになった。 Notifyのメッセージとして、値等（StarIterator.List.CurrentRowNumber + 1）を定義し、さらに親画面におけるウェブブロックインスタンスのDestinationとしてアクション（OnRatingNotify）を作成して指定する、と言う流れだったのが、バージョン11では、親画面でイベントに対応するハンドラを書く、と言う感じ？ そして、Destinationのアクション（OnRatingNotify）の記述として、Figure 26のような割と複雑なロジックを作っていくわけですが、これはどう書くのだろう・・・ ちょっとテキストがバージョン11に追いついていないので、ここは飛ばしていきます。 Eventsという形にしたのは悪くないと思うのですが。

テキストによるエクササイズの続きです。5.7　Input Validationのエクササイズ（OutSystems セルフトレーニング） Part 1: Add a comments sidebar to movie Container の幅指定の方法は変わっている。 Styles Editor を指定。 bold 、italic 設定もStyles Editor で。 CreateUserMovieComment はCoreUserMovieComment の中

Assign してReflesh すると言う流れを理解する

テキストによるエクササイズの続きです。5.5　Actionとコードを再利用してみよう（OutSystems セルフトレーニング） Part 1: Test the built-in validations Validation設定のServer とServer & Client を試す Part 2: Add validations to editing a movie Feedbackメッセージを日本語で入力しようとしたら文字化けした！ ここまで長くなってくると全体が見通せなくなる。 一つ一つのプロパティを見ないと何をやっているのか分からない。 また、この辺でソース管理についての説明があると良いのでは Part 3: Test the validations for editing a movie 動作確認 Part 4: Add validations for editing a person 自分でやってみよう、ということなので、一つだけやって、取り急ぎ進めます。 Part 5: Test the validations for editing people 動作確認

テキストによるエクササイズの続きです。5.3　データのクエリとウィジェットのエクササイズ（OutSystems セルフトレーニング） Part 1: Create a reusable Action 淡々と進めます Part 2: Convert Action to a Function こうして作ったユーザアクションは、基本的には、ステートメントとしてのみ呼び出すことができる、方法はアクションフローへのドラッグ&ドロップ。 FunctionにすることでExpressionの中で呼ぶこともできるようになる。 やることはプロパティを変えるだけ Part 3: Test calling an Action and a Function できるけど、分かったような分からないような（分かっていない）