Programmers Office

Widgets I Exercise https://www.outsystems.com/learn/lesson/876/widgets-i-exercise/ 3.3と同様3.3　データのモデリングをしてみよう（OutSystems セルフトレーニング） テキストを進めます。 Part 1: Add a new module to the application まず「Responsive」ではなく「Web Responsive」になっている、ちょっと気になる。 また、ワークスペースの画面状態も、初期コンテントがない状態、ちょっと気になる。 Part 2: Reference Entities from core module 書いてある通り Part 3: Retrieve and display the movie list テキストでは、既存のHomescreenの名前を変えることになっているが、新しくscreenを作る。 テンプレートはとりあえず「Empty」。名前は最初から「Movies」。 スクリーンの準備としてアグリゲートの指定をする。そこにエンティティを指定することでデータの取得処理が作られる。 スクリーンのコンテントにテーブルレコードを指定して、そのデータソースとして準備で取得したデータを指定する。 という流れですね。これで画面も表示されました。 Part 4: Retrieve and display a movie’s details 詳細画面の表示のさせ方＝画面へのデータの連携のさせ方は同様ですが、フィルタをかけて１件を表示対象とするということ。 なので、Input Parameter を設定する。 Widthを「8 col」に指定する、というところの画面説明がないですが、Stylesの中。 フォームの名前が自動的に変わると言われても、どこで確認できるか分かりませんでしたが、Widget Tree で見ることができました。 モデルの項目をドロップすると画面を構成してくれるのは大変助かります。 その際、テキストではラベルと入力域が左右に並ぶ形になっていますが、今回は縦に並ぶ形になってしまいました。 Part 5: Add a Screen to the top Menu そのまま

Modeling Data Exercise https://www.outsystems.com/learn/lesson/875/modeling-data-exercise/ Lesson Materialsをダウンロードすると、その中にテキストPDFが入っているので、それを見て進めます。 テキストはバージョン10ベース、現在の最新環境は11のため、所々違うところが出てくると思われます。 Part 1: Create the application いきなり、Blank module templateを使うようにとなっていますが、それが見当たらない。（先を進めると、このことを言っているのではなく、最初のモジュールを作る時にBlankを選択するのだと分かりますが） 何かテーマを選んでみるか。 参考：http://annatokugawa.blog.fc2.com/blog-entry-45.html とも思いましたが、またハマると嫌。 出来上がりイメージはトップメニューの形のようなので、「TOP MENU」テンプレートを選択します。 それ以降は、テキストの通り。 Part 2: Create Entities Mandatoryとは「必須」の意味。 で進めていってたら、キーボード入力を受け付けなくなった。mac版で進めるのはやはりリスキーだな・・・ 一回終了したら正常化されました。なお、終了する際は、Uploadします。Saveではない、すなわち、これは実は全てサーバ管理になっているということですね。 Part 3: Create Static Entities データを追加していくのみ Part 4: Publish the application module クリックするのみ。 ただ、「Template_TopMenu」が見つかりませんというメッセージ。 むう・・・テンプレートを選ばないこともできたのだろうか。 さらにタイムアウトになったりしましたが、再度ボタンを押すと成功します。 ただ、NOTEとして書かれている通り、この時点ではUIがないので、「Wrong URL address – this module does not contain a default entry.」というエラーメッセージが表示されるのみです。

OutSystemsもおもしろうそうなので、早速、WebAPIのデータを表示させるアプリを作ってみようかと思います。 その際、mac版を使ったところ、読み込み時にエラーになってしまう。Windows版では成功したということは、やはりmac版は多少不安定な面がるかもしれません。 そして、呼び出しはできる（WebAPI読み込みコンポーネントのようなものは作れる）ものの、それを画面のListに表示させる方法がいまいちわからない。 もう少し勉強しようということで、こちらをしばらくやってみたいと思います。 OutSystems セルフトレーニング http://www.bluememe.jp/outsystems/outsystems_support/self_training.html （しばらくこのページを随時更新していく形になります） 1　コースイントロダクション 日本語字幕あり（しばらくあるようなので、特筆しない限りは以降、日本語字幕ありです） 各セッションの概要 どういうアプリを作っていくか 映画管理 ホテル予約 試験制度 どんな問題が出るか 2　OutSystemsの基礎知識 2.1　OutSystems概要 development quality production プラットフォームサーバ コンパイル デプロイ 管理 service studio integration studio service center 2.2　Service Studioとは ここで使われているのはバージョン10 基本的なIDE機能は概ね予想通り 最後にソースの競合、マージの説明 ソース管理ツールも統合されているイメージ 3　ウェブアプリ開発の基礎 3.1　画面のライフサイクル Webアプリケーションとは何か ブラウザは何をするのか 静的リソースと動的コンテンツ Preparationという概念を使用しており、その中でデータ取得等を行う 3.2　データのモデリング Entity→テーブルの行 Attribute→列 Service Studioのデータレイヤーで作成 名前からデータ型を推測してテーブルを作る！ 例：Amount→Currency 3.3　データのモデリングをしてみよう これから行うExerciseの説明。（ビデオなし） movie databaseのwebアプリケーションを作ります。 継続的に拡張、公開、テストを行います。 行う内容は 1.アプリケーション作成 2.最初のモジュールの作成 3.エンティティとbootstrapデータの作成 4.静的エンティティとレコードの作成 5.Outsystems webサーバでの公開

先ほど色々システム構成図の画像をアップした中に、OutSystemsのものがあります。 OutSystemsとは 日本公式サイトだと、「コードレス開発」を謳っていますが、「ローコード開発」とか、色々言い方はあるようで。ソース生成型のツールで、いざとなったらソースいじることもできるようなので、「ローコード開発」の方がよいのでは。 http://www.bluememe.jp/outsystems/product/product-devops-dev.html ASP.NETかJavaのソースを出力してくれるそうです。あまり何も考えずにチュートリアルをやってみたら、ASP.NET＋SQL Serverの環境を作ってくれたようです。 チュートリアルをやってみて 以前、Glide をやってみた時、Glideの味わい方〜オープンデータを活用しよう これは、本当に何もしないんだな、まさにコードレスだなと思いましたが、かなり近いところまで行っているようにも思います。 画面テンプレートを選択すると、サンプルデータで動く形までできていて、EXCELデータを指定すると、それをDBに登録して、そちらを参照するように変更してくれる、というのはスマートな作りだと思います。 このような画面を作るのですが、リスト用のデータと、グラフ用のデータをそれぞれ指定するだけでここまでできてしまいます。リストから詳細ページへの流れも、詳細画面は勝手にそれっぽく作ってくれるという点で、Glideと同様の発想かと思います。 .NETと言っているのでWindows版だけかと思ったら、technical previewとしてはmac版も提供されていました。 https://success.outsystems.com/Support/Enterprise_Customers/Maintenance_and_Operations/OutSystems_Service_Studio_for_Mac 個人用フリー版が用意されているのもうまいと思います。私も、もう少し使ってみたいと感じました。

先日行ってきた、AWS Summit Tokyo 2019 と、Interop Tokyo 2019 でゲットしきた資料のシステム構成図色々。 こういうの参考にしたくなること多いですよね。

前回からの続きぬるさく画面に再チャレンジ 固定値による画面表示はできたので、実際にapiからデータを取得しようとしました。しましたが、ハードル上げすぎて失敗したので、一旦ハードルを下げようと思いますが、まず失敗の記録をしておきます。 ページ、および、それに伴うストア等の分割 やろうとしていることは、 Pagesの中に、boookフォルダと、todoフォルダを作って、それぞれのアプリを作った状態で、さらに、wineフォルダを作って、その中でぬるさく本のアプリを作ろうということです。 pages |–Lauter | |–index.vue |–README.md |–book | |–books | | |–_id.vue | |–index.vue |–index.vue |–login.vue |–todo | |–index.vue |–wine | |–index.vue | |–result.vue store |–README.md |–book.ts |–counter.ts |–index.ts |–modules | |–todoTypes.ts | |–todos.ts | |–userTypes.ts | |–users.ts |–root.ts |–todo.ts |–wine.ts ただ、すでに作成しているtodoは一部きれいに分けきれずに、indexの中にtodo固有のものが残ってしまっています。 また、wineについても、本の説明は、indexとして作っているサンプルがベースなので、まあ色々ハマりました。 本の該当箇所は、「4.7 API に投げるために Vuex を実装しよう」のあたりです。やりたいのは、「v-for=”i in 11″」を「-for=”wineAttr in wineAttributes”」にする、ということです。 apiについては、「http://0.0.0.0:5432/api/wine_attributes」が動いているのが前提です。 最初はこの辺のエラー対応です。 commons.app.js:21599 [vuex] unknown getter: GET_WINE_ATTR const gettersはexport const gettersにしないといけないのではないでしょうか。actionsも。自信はないですが、これにより呼ばれるようにはなりました。 また、本では触れられていませんが、githubのソースでは、index.d.ts で@nuxtjs/axios の記述があります。しかしそれをやると、

以前Nuxt.js と Python でつくるぬるさく AI アプリ開発入門 途中で分からなくなってしまい中断していましたが、改めてやってみようと思います。 まずは、Vuetifyのスライダーでの入力画面と、amChartsのグラフ表示。 router-linkによるメニュー追加 現在、v-navigation-drawer > v-list > router-linkという階層で、メニューを作っており、、、が並んでいる状態で、ここに、を追加したいと思います。 そして、こんなものは、単にコピペーして、文字変えれば良いのではと思ったのですが、なかなか反応してくれません。 結構調べましたが、解消せず。最後の最後に、再起動（docker-compose down、 docker-compose up -d）を行ったら見事（？）反映されました。 Vuetify Slider コンポーネント 前回はスッキリ行きませんでしたが、今回はこれはあっさりできました。 components/FormCard.vue <template <v-card class=“ma-2 pa-1” <div class=“subheading” Heading </div <div class=“caption” 1/11 </div <v-slider class=“px-5 pt-5 pb-3” thumb-label=“always” height=“3” hide-details</v-slider </v-card </template <script lang=“ts” import Vue from ‘vue’ export default Vue.extend({ }) </script pages/wine/index.vue <template <v-layout column <form-card v-for=“i in 11” :key="'${i}'"</form-card <v-btn @click=“submit"診断結果を表示する</v-btn </v-layout </template <script lang=”

今回もこちらの続き。Vuetify の基本 今回も参考はこちら。 Nuxt × TypeScript でTodoListとユーザ認証を実装してFirebase Hostingにデプロイ [Tutorial – Part 5/5 – ユーザ認証の追加] https://note.mu/tkugimot/n/n80c2e4b33bbc で、ちょっと時間が空いてしまい、始める前に気づいたら、エラーが出ている。 This dependency was not found: nuxt_plugin_bootstrapvue_69bcb01f in ./.nuxt/index.js To install it, you can run: npm install –save nuxt_plugin_bootstrapvue_69bcb01f 書いてある通りnpm installしてもNot Foundと言われるだけ。 しかし、 docker-compose down docker-compose up -d で復旧。なんのこっちゃ。 Firebase Authentication機能の利用 手順としては、まず、package.jsonにfirebaseの記述を追加して、npm updateを実行するところから始まるのですが、ここで早速大量エラー。 概ねこんな感じ。 Can’t find Python executable “python”, you can set the PYTHON env variable. Failed at the grpc@1.20.0 install script. This is probably not a problem with npm.

こちらの続き。Vuetify の基本 デザインについて、今参考にしているのはVuetify公式サイトのレイアウトサンプル。 https://vuetifyjs.com/ja/framework/pre-made-layouts これとかすごいと思いますが、初心者はまだ手を出さないことにします。 Vue Material Admin https://vuejsprojects.com/vue-material-admin Firebase Hostingにデプロイ 引き続き、こちらを参考に。 Nuxt × TypeScript でTodoListとユーザ認証を実装してFirebase Hostingにデプロイ [Tutorial – Part 4/5 – Firebase Hostingにデプロイ] https://note.mu/tkugimot/n/n44c327a22c24 最終的にはGCPにリリースする予定ですが、Firebaseも勉強してみたいので、流れに沿ってやってみます。 npm install -g firebase-tools でfirebase-toolsのインストール、 firebase login でログインして、プロジェクト作成して、というところは書いているまま。 この次の firebase init をどこで実行すべきか？ 今現在nuxtアプリを作っている、すなわち、componentsとかlayoutsとかが存在するフォルダで実行します。 最初 ? What do you want to use as your public directory? に対して、初期値のpublicで進めてしまいましたが、distを指定すべき。 ? Configure as a single-page app (rewrite all urls to /index.html)? はNoでよいかと。 ところが、 npm run build で大量エラー。

Nuxt.jsでTodoList機能を作りながら、Vuetifyの基本を学習。 こちらを参考に、進めています。 https://note.mu/tkugimot/n/n47218fd1eec5 なんとか自力で問題解決できたので、既存のアプリに機能追加する形で動かすことができました。 上記サイトでは、次に、デザインを整えることになります。で、そこではbulmaを使っているのですが、できればあれこれ手を広げたくないので、Vuetifyで作ってみることにします。 全体デザインについて、上記サイトでは、「ヒーロー」というパターンを使っています。「ヒーロー」なんていうデザインのパターンがあるのですね。 簡単にVuetifyでもそんな指定ができたら良いかと思いましたが、そういう名前のものがあるわけではなさそう、かつ、メニュー構造は必要なので、Vuetify公式サイトのレイアウトサンプルから選択することにし、一番基本的な「Baseline」を使ってみることにします。 https://vuetifyjs.com/ja/framework/pre-made-layouts 最初は、部分的に移植しようと思いましたが、それだとレイアウト崩れが発生してしまうため、逆に、いったん、layouts/default.vueを書き換えてしまってから、必要な部分を戻す、という形にしました。 また、Todoの一覧表示のところに関しても、bulmaを使用していると思われるため、そのままではなく、各詳細情報は、v-cardを使用するようにしました。これも、サンプルメージを参考にしてなんとかなったような、なってないようなです。（幅指定がよくわからない・・・） また、テキスト入力欄も、v-text-fieldを使用して、プレースホルダよりラベル表示の方が面白いと思い、それで作りました。 なお、入力位に自動でイベントを発生させる際に、このやり方だと日本語変換確定のEnterでも反応してしまって本当は良くありません。 下記のサイトに記載の通りですが、今はここは対応保留としておきます。 [Vue.js] 日本語変換の確定でkeyup.enterが発火してしまうのを防ぐhttps://qiita.com/h-orito/items/6d99e2256074132d7867 カードの並べ方等、もう少し綺麗にできたら良いのでしょうが、一旦これで、次に進みます。