Programmers Office

今度はTypescript https://github.com/gothinkster/realworld-starter-kit Part 1 : Introduction and Vue CLI Setup $ vue create realworld-vue-ts vue-class-component create component の代わりに@Component vue-property-decorator @Propなど vuex-module-decorators @module $ yarn serve 今回はyarn派なんですね $ yarn add vue-property-decorator $ yarn add vuex-module-decorators Part 2 : Templates and Styling router.ts がなくなっていて、router/index.ts VSCode command + D で複数選択 Part 3 : Vuex and API Access https://github.com/gothinkster/realworld/tree/master/api json to ts https://jvilk.com/MakeTypes/ $ yarn add axios axios npm JWT JSON Web Token

こちらのコースをやってみました。以下、単なるメモです。 Vue JS Crash Course https://github.com/bradtraversy/vue_crash_todolist node10の頃 Vue CLI インストール https://cli.vuejs.org/guide/installation.html $ npm install -g @vue/cli $ vue --version @vue/cli 4.3.1 4なんだ・・・ $ vue create test いっぱいエラー出てるけど・・・ $ cd test $ npm run serve 開きました cd .. vue ui Vue プロジェクトマネージャ 画面が自動で立ち上がる http://localhost:8000/project/select 現在のフォルダのまま（testが表示されているフォルダ） vue_crash_todolist 他はデフォルト ↓ デフォルトプリセット ↓ インストール完了すると、「プロジェクト ダッシュボード」ページが表示される ダッシュボード画面 プロジェクトタスク画面 main.js がエントリポイント アロー関数（=>）の復習などしながら（けど、render: h => h(App)　はやはり難しいと思ったら下記でなんとなく分かった！）、App.vue の仕組みの説明。 Vue.jsのrender: h => h(App)について調べた style記述は、上記のgithubからもらってくる。 Component「Todos.vue」を作って、App.vueで読み込む。 v-bind https://jp.vuejs.org/v2/guide/class-and-style.html

もう一度、Nuxt の勉強をしようということで、上記チュートリアルを一式やって見ました。単なるメモです。 1 Nuxt JS beginner tutorial – In Depth Intro to Nuxt.js | SPA, SSR, Static Site, Vue.js Family What is Nuxtjs? Why Nuxt.js is so good? What Nuxt.js can do? What Nuxt.js Includes How single page application works? How static site generation in nuxt works? How universal application is created in nuxtjs? 2 Nuxt JS beginner tutorial – Getting Started with NuxtJs | How to setup Nuxt Project 始める前に、Docker環境を作る

改めて勉強しようと考えたときに、TruffleBoxs が良いのではと思い立ちました。 まずは、純粋に TruffleBox (React&Truffle)を用いたDockerでのdapps（ブロックチェーンアプリ）の開発環境の構築 https://qiita.com/dl10yr/items/26b106d27a2de87da131 こちらをなぞらせていただきます。 いきなり、DockerFile の配置場所の絵と、docker-compose.yml の記述が食い違い？？ docker-compose.yml の記述に合わせて、truffle フォルダに配置します。 Dockerfile のfは小文字で $ docker-compose build $ docker-compose run truffle truffle unbox react Docker 側からアクセスできるように、Ipアドレスを追加するところ。 まずは、事前確認。 ifconfig lo0: flags=8049 mtu 16384 options=1203 inet 127.0.0.1 netmask 0xff000000 inet6 ::1 prefixlen 128 inet6 fe80::1%lo0 prefixlen 64 scopeid 0x1 nd6 options=201 ・・・ 変更 sudo ifconfig lo0 alias 10.200.10.1/24 事後確認 ifconfig lo0: flags=8049 mtu 16384 options=1203 inet 127.0.0.1 netmask 0xff000000 inet6 ::1 prefixlen 128 inet6 fe80::1%lo0 prefixlen 64 scopeid 0x1 inet 10.

良い本なのは間違いないです。 ただ、途中で行き詰まってしまったので、最後までガッツリとは作りきれませんでした。 試して学ぶ スマートコントラクト開発 新品価格 ￥3,839から (2020/3/22 14:57時点) きっかけ 最近、ふとブロックチェーンの勉強をしてみようと思い立ち、CryptoZombieshttps://cryptozombies.io/jp/をやってみて、分かったような分からないような気分だったので、もう少しちゃんと勉強しようと調べてみました。で、当然色々なサイトがありますが、何も基礎がない状態だと、もう少ししっかり書かれているものがないかなと言う気持ちになり、この本に出会いました。 この本はQUESTというアプリを作った経験を踏まえて書かれているようです。 で、残念ながらQUESTは現在動いていないよう（単に証明書入れていないだけ？）なのですが、こちらでその概要が分かります。 https://speakerdeck.com/norinity1103/quest-tutorial すなわち、セミナーとか講座とかで、質問してくれた人に仮想通貨で報酬を与えることで、場を活性化させるみたいなことを狙っているようです。 この内容が自分の関心があるところでもあり、これの簡易版でも作れたら良いなと思いながら始めました。 本の序盤 そもそも仮想通貨の購入等もしたことがない状態からのスタートですので、この本でも最初の基礎情報と、METAMASKウォーレット作成から始まる構成は大変助かりました。 なお、テストネットでEther取得を行いますが、最初Ropstenの取得に失敗しました。今改めてやってみたらできたので、何かやらかしたかもしれません。 本の中でも、CryptoZombies をやってみる章があります。 これは、本当は、CryptoZombies のWeb環境ではなく、自分の環境でやってみたいと思うのですが。もう少し理解が進んだらできるようになるのでしょうか。 そんなこんなで、Solidityという言語と、スマートコントラクトと言うものを学びます。が、正直、現段階でも、要はこう言うこと、という腹落ちした状態にはなっていません・・・ また、Remix という、イーサリアム開発用のWeb IDE が紹介されます。 これも良いなと思ったのですが、その後の開発は必ずしもそれを使用するわけではないので、まあ、参考情報という感じです。ちょっと見た目も変わっていて、Compileタブどこ？となります。 その次は、プロダクトデザインの考え方（UX）の章になります。 ジャーニーマップとか、ユーザテストとかの考え方が、丁寧に書かれています。 開発環境 Chapter 4 あたりからが本題。 開発環境として書かれているのが、 ・Docker ・Geth ・Ganache ・Node.js ・Truffle ・Git ・VSCode 実践型の環境と感じられます。 そして、開発用ブロックチェーンをプライベートネットとして構築します。 これをやっているときに一つエラーが発生。 geth --datadir ~/private-net --nodiscover --maxpeers 0 init ~/private-net/genesis.json とやると INFO ・・・ Fatal: Failed to write genesis block: unsupported fork ordering: eip150Block not enabled, but eip155Block enabled at 0 https://ethereum.

旅行の記録も残しておきたいのですが、行って満足して終わってしまうのですよね。 この3連休で台湾に行く予定にしていましたが、コロナウイルスの影響が怖く、キャンセルしてしまいました。 台湾以外にも色々行っていますが、いったん直近の台北の記録をまとめておきます。 インフォメーション 飛行機 往路 ピーチ･アビエーション · MM627 2020年1月3日 22:20 NRT 成田国際空港 T3 2020年1月4日 01:45 TPE 台湾桃園国際空港 T1 復路 ピーチ･アビエーション · MM620 2020年1月6日 02:30 TPE 台湾桃園国際空港 2020年1月6日 06:35 NRT 成田国際空港 夜の桃 以前、金曜夜に会社から直行し月曜朝に直接出勤とか、日帰りとかやりましたが、今回も1泊4日のなかなかの強行日程。 帰りの便が整備・燃料の問題で大幅に遅れて会社遅刻になってしまいましたが、宿泊料を抑えて最大限満喫しようとしたらこれがmaxではないでしょうか。 最近は航空券はTrip.comに依存しています。 （Trip.comもアフィリエイトやってますね。海外のアフィリエイトサイトを経由するようなので、気が向いたらやってみよう） ホテル 一方ホテルはトラブル発生。 最初は、桃園近くのMRT環北駅付近で探して、友人から勧められたホテルは満室だったため、値段重視で、Expediaでグッド ナイト ホテル (晚安旅店)というホテルを予約しました。 ところが、予約後に表示されるページからリンクされる地図は全く違う場所。MRT環北まで来て、だいぶ歩いて、さらに電車で2駅。あるいは環北から車で30分近く。確かにキャンセル不可の予約でしたが、これはそもそもの前提が違うという事で、メールしたり電話したり。なかなか理解してもらえず出発まで結局決着は付きませんでしたが、旅行中にキャンセル通知が入ったので、とりあえずよかった・・・と思って、公開するのもやめておこうかと思ったのですが、今見てみても予約前のページの情報は書き換えられていない。少しでも被害者を減らすために公開してしまいます。 結局ホテルもTrip.comで、たまたまですが、以前（杨丞琳演唱会https://www.programmers-office.ml/%e6%9d%a8%e4%b8%9e%e7%90%b3%e6%bc%94%e5%94%b1%e4%bc%9a/）も泊まったサントス国際観光ホテル（台北三德大飯店）。激安ではないですが、そこそこの値段できれいです。 移動 夜中に空港について、台北へ移動。事前情報では夜中でもバスがあるという事だったのですが、バスの窓口は松山行きの窓口しか開いてなく、台北行き6時の文字が目に入って、あれ？と思い、400元のタクシーに乗りそうになりましたが、よく見てるとちゃんと2:30、2:50のバスもある。140元で台北に移動しました。 今回の主目的は、桃園国際棒球場でのコンサート。MRTで行くと空港よりも先ですが、検索して見ると、高鉄（新幹線）で行ってもそんなに料金は変わらず、だいぶ早いので、そちらにしました（台北から行って、空港、棒球場、高鉄桃園、という順番です）。帰りは混むと思ってMRTにしましたが、やはり遠いですね・・・ 両替 以前のお金が残っていたので、空港では両替せず、街に向かい、誠品書店内のATMでキャッシングしました。 クレジットカードキャッシング 5000 18105

ローコード開発とかノーコード開発とかコードレス開発とか、盛り上がりそうな、盛り上がらなそうな微妙な感じがつづているように思いますが、いかがでしょうか。 そんな中で、GoogleがAppSheetを買収しました。 AppSheet の買収によりコーディングなしでのアプリケーションの作成と拡張が可能に 早速試してみた内容はQiitaに書きました。 AppSheet ちょっと面白いかも マネタイズの仕組みはまだですかね。2019年2月時点でのQA。 https://community.appsheet.com/t/hi-appsheet-is-great-i-never-made-apps-be/5531 上記Googleの投稿によれば、「この買収によりお客様は、すでに馴染みのある Google スプレッドシートや Google フォームだけでなく、Android や Google マップ、Google アナリティクスなどの高度な Google テクノロジーも活用して、高度なアプリケーションを大規模に開発できるようになります。」と書かれていますが、現時点ではGoogle アナリティクスと連携するような機能が提供されているわけではなさそう。 もう少し様子見ながら注視しておこうと思います。

ドメイン名サービスの更新を怠って、本サイトをしばらく止めてしまっていました。 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することができるわけです。