Programmers Office

ドメイン名サービスの更新を怠って、本サイトをしばらく止めてしまっていました。 Freenomの更新 以前にも繋がらなくなったことがあって、Cloudflareが止まってたということがありましたので、それも疑いましたが全然情報が出ていないので、そうではなさそう。 サイト自体が死んだかと思いましたが、再起動しても状況は変わらず、そもそもサイトが死んだ場合はCloudflareがエラー画面を返すのでそうでもなさそう。 本サイトは、 https://www.karelie.net/free-fast-wordpress-site-freenom/ を参考に、freenomで無料ドメインサービスを使用しています（した）。 今月頭に、「Your domain name PROGRAMMERS-OFFICE.ML needs renewal」というメールが来ていたのですが、完全に見落としていました。 そして、これにしたがって更新していれば無料でできたようなのですが、一度終了してしまうと、再度取り直す際には有料になっています。ということで10ドルちょっと支払いました・・・（ただ、この更新料は他の有料サービスから比べても格安だとは思います） ついでにWordPressの更新 そして、ドメインの更新とは全く関係ありませんが、この際にWordPressも更新しておくことにします。 更新の際には、いつも（？）、下記のエラーになります。 いくつかのファイルをコピーできないため、最新版のインストールができません。これはたいていの場合、ファイルのパーミッションが適切でないことが原因です。: wp-login.php, wp-cron.php, xmlrpc.php, wp-load.php, wp-activate.php, wp-config-sample.php, wp-settings.php, wp-mail.php, wp-signup.php, wp-links-opml.php https://www.karelie.net/free-fast-wordpress-site-setting/#wordpress-2 を参考にしてパーミッションを変更します。 そちらに書いてある sudo chmod 707 wp-settings.php sudo chmod 707 wp-cron.php sudo chmod 707 wp-activate.php sudo chmod 707 wp-load.php sudo chmod 707 wp-login.php sudo chmod 707 wp-signup.php sudo chmod 707 wp-trackback.php sudo chmod 707 wp-config-sample.php sudo chmod 707 license.txt sudo chmod 707 readme.

AWS Certified Solutions Architect – Associate試験に合格しました！ 合格者特権で、試験対策について書いてみたいと思います。 （まあ、こういうのは読み流すものです） 自分のスペック 私は、仕事で多少クラウド環境でアプリを動かすこともありますが、ほとんどがオンプレミス環境での構築です。 このブログはGCPで動かしており、趣味としてクラウド環境を触っているのは記事として書いている通りです。AWSも一時期Magentoをガッツリやろうとして、それを動かす環境として触っていましたが、諸事情によりMagentoの話が先送りになったため、AWSも触らなくなってしまい、１年間の無料期間も過ぎてしまいました。 ですので、遊びレベルでEC2、S3、ECR、ECS あたりは雰囲気は分かっている、という状況でした。 対策講座 会社的な諸事情があり、１日の入門講座を受講しました。とりあえずVPCを作って、EC2を立ち上げて、オートスケールを試してみる、というくらいの一番の初心者向け講座でしたので、これはおそらく合格には関係なかったかなと思います。それでも、趣味で遊んでいるだけだと、VPCとは、みたいなことを意識せずにやっていたので、そういうものがあるという認識のためには「無」ではなかったかというところでしょうか。 今回の主要な（９割９分）準備は、Udemyの対策講座でしたので、そちらを紹介。 Udemy対策講座 これだけでOK！ AWS 認定ソリューションアーキテクト – アソシエイト試験突破講座（初心者向け21時間完全コース）試験に出る範囲の概要を押さえる、という役割だと思いますが、確かに、結果的にはこれだけでOKでした。 始める前は、動画講座は見るのがしんどい（まだるっこい）かなと思っていたのですが、２倍速で見ているとまだるっこさはなく、自発的にページをめくらなくてもどんどん進んでいくためだらだらしない、というメリットがありました。 ただ、しばしば寝落ちしてもう一度見直す、みたいなこともありましたので、ちゃんと体勢を整えてやりましょう。 終わった今思うのは、各セクションの終わりに小テストが用意されていますが、これを先にやってからビデオを見る方が良かったかも、ということです。小テストで、こんなことやってたっけ？？みたいなことがしょっちゅうあったので、そこで見返すよりも、ちゃんとポイントを押さえてから見た方が効率的ではないかということです。 この講座はあちこちの合格体験記で紹介されていますが、ハンズオンについて、ちゃんとやる派が多いように思われます。私は、試験を申し込んでからこれを受講し、時間がないなと思ったのでハンズオンは全て見るだけにしました。 僅かながらも触ったことはあったから、というのも大きいですが、やっていることがイメージできるなら、必ずしも試験対策としては手を動かす必要はなかったかなと思います。ただ、手を動かすことで、もう少し、説明されている箇所以外のオプション等にも目が行ったかな、試験ではそういうのも結構出てたぞ、という感じもあります。 模擬試験 なんだかんだで、Udemy講座を見終えたのが、試験（17時から）当日の朝でした。そこで、まずはUdemy講座についているの模擬試験の一つ目をやってみました。70%の合格ラインに対して、40%。 え、そんなこと説明されたました？？みたいな問題ばかり。青ざめます。 続いて、模擬試験二つ目。55%。ダメダメですが、ただ、そんな問題が出るんだ、という感覚は分かりました。そこでふと疑問が。これはUdemyの模擬試験の感覚であり、本番もそうなのか？？ ここで、慌てて、公式模擬試験があることを思い出し、すかさず申し込んで実施。結構近い問題が出てる！80％。行ける！ Udemyの模擬試験３つ目は模擬試験とはちょっと違う小テストの形式の65問ですが、正解45問＝約70%。後は間違っているところの見直しをやれば良いか、という感じでざっとおさらいして、もう一度模擬試験一つ目。なんとこのタイミングで模擬試験内容が更新されました、との通知。まあ、頻繁に内容が更新されているというのは良いなという好印象。で、84%。行ける！と感じながら試験会場へ向かいました。 本番試験 身分証明証は二つ（一つは写真付き）持っていきましょう。 さて、試験を始めて最初に思うのは、公式模擬試験、結構モダンな画面だったじゃん！本番、昔ながらの古臭い画面じゃん！ それはさておき、問題、全然模擬試験と違います。よりシビアです。どこまで公開して良いか分からないのでイメージで言うと、模擬試験はAとBを識別できれば回答できるが、本番はA1とA2の識別が必要、みたいな。 今回、直前の復習で、こちらのサイトの表を参考にさせていただき、大いに役立ちました。 表で対策するAWS 認定ソリューションアーキテクト – アソシエイト(SAA) この中で言うならば、例えば、VPCエンドポイント（ゲートウェイ型）とVPCエンドポイント（インターフェース型）を識別しましょう、と言うことです。 あとは、この試験に限りませんが、問題文の細かい条件がヒントになっている。また、「英語」ボタンがあるので、日本語が怪しいと思ったら英語も見てみる。一つ、canの訳し方が微妙じゃない？というのがありました。 対策本 ここが一番気にされるところだと思いますが、今回書籍類は使用しませんでした。ただ、より本番試験に近い内容が書かれているなら、模擬試験までやった後に弱いところの補強にやると良いのかもしれません。そういう意味では、新しい本でないと意味がないかなと思います。 また、最初に、**AWS Well-Architected フレームワーク ホワイトペーパー(PDF)**も読みましたが、読むというよりは眺める感じになってしまい、あまり意味がありませんでした。Udemy講座の中で何度も説明してくれるので、ホワイトペーパーを読むこと自体は必須ではないかなという感じです。 余談 今回の、Udemy講座は非常に良かったなと思いますが、Udemyの全ての講座が良いかというのは不明です。名前からして怪しげなものも色々あるな…審査してるのかな… しかも、ベネッセが提携してやっている。大学入試の件で、私のベネッセに対する印象がかなり悪くなってます。ベネッセ、そうじゃなかったと思うんだけど。

いつも悩んで終わっている記事になってしまうのですが、今回は作りきった話。 ただ、作りきってから解説を書こうと思うと熱が冷めてしまっているというジレンマ・・・ 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することができるわけです。

続きます。Docker イメージを Google Container Registry に登録 kubectl で設定を行うためのyamlファイル作成 上記でGoogle Container Registryに登録したDockerイメージをGKE（GCP の Kubernetes Engine）で公開します。 今回は、APIだけを公開するということで、API用のファイルだけ作成します。 内容は、基本的には、githubの方を参照しています。 https://github.com/pco2699/NullSuck-AI/tree/master/k8s また、イングレス用ファイルは下記のような感じで作りました。 k8s/api/api-ingress.yml apiVersion: extensions/v1beta1 kind: Ingress metadata: name: api-ingress spec: rules: - http: paths: - path: /* backend: serviceName: api-svc servicePort: 5432 GKE周りの設定 これを適用するにあたり、まずは準備ということで、 gcloud container clusters create nullsuck –num-nodes 2 –zone asia-northeast1-a を実行するとなっていますが、エラー。 ERROR: (gcloud.container.clusters.create) ResponseError: code=403, message=Kubernetes Engine API is not enabled for this project. Please ensure it is enabled in Google Cloud Console and try again: visit https://console.

時は遡り、画面が何とか動くようになったので、API連携しようとしたものの、失敗して終了していたこちら。ぬるさくapi連携（失敗） 画面も、色々試せそうになってきたので、とりあえず、APIを公開しようということで、ぬるさく本の「6.3 Docker イメージを Google Container Registry に登録してみよう 」を試すことにします。 GCPプロジェクトの作成 既存のアカウントにプロジェクトを追加します。 プロジェクト名は真似して「nullsuck」、プロジェクトID「nullsuck-xxxxxx」は自動で振られます。 Docker イメージを push ここで数日を要した・・・ まず、今回はAPI側を公開することにするので、appとなっている部分は全てapiと読み替えて作業します。 そこを間違えなければ（一旦間違えましたが・・・）、docker build はおそらく問題なし。docker tag は、結論としてはそこの問題ではなかったのですが、本でも、GCPドキュメントでも、プロジェクトIDを含めるように書かれているのですが、本の記述が「nullsuck」と書かれていて、若干混乱。「nullsuck-xxxxxx」の方を記述するようにしました。 そして、gcloud docker — push をするのですが、まず、この記述は古いようで、現状では、docker pushでやる形になっています。 が、やってみると、 denied: Token exchange failed for project ‘nullsuck-247713’. Caller does not have permission ‘storage.buckets.create’. To configure permissions, follow instructions at: https://cloud.google.com/container-registry/docs/access-control で、権限の問題か、ということで、記載されているドキュメントを見て、バケットを作ってみたりとか、色々試してみていたのですが、最終的な問題点は、現在接続しているプロジェクトが、既存のプロジェクトであり、今回作成したnullsuckプロジェクトではない、ということでした。 gcloud config list でプロジェクトが確認できます。これはdefault構成だったので、新しい構成を作成。 gcloud config configurations create nullsuck そして、gcloud initは、対話式で聞いてくれるので、nullsuckプロジェクトを指定することにより、環境が切り替わります。 そこで改めて、docker pushをすると、今度は成功しました。 公開設定が「非公開」になっているのが、本とは異なるので、若干気になる・・・

一連の投稿の続きになります。 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詳細画面のまま反映された。