Programmers Office

Nuxt.js開発を進めるためには、もう少し学習が必要ということで、入門サイトを見てみたりしていますが、なかなか思う方向には進んでくれません。その苦労の足跡を残します。（ごちゃごちゃになりすぎて記憶も飛び気味ですが） やりたいことのゴールはこちらタイタニックアプリを作ろう（Nuxt.js 開発環境の基本） 入門用サイト 本当はまずやりたいのはヌルサクです。Nuxt.js と Python でつくるぬるさく AI アプリ開発入門 ただ、結構端折られているところも多く、また、微妙に最新環境でないところがあって、初心者にはエラー対処が難しかったりするため、もう少し入門的なところから始めたいと思いました。そして、それはそれで色々参考になるサイトがあるのですが、これもなかなかそのままは動いてくれなかったりして、苦労しました。 Nuxt × TypeScript でTodoListとユーザ認証を実装してFirebase Hostingにデプロイ https://note.mu/tkugimot/n/nfe81dbbe8bad こちらのサイトは、入門者の立場から、gitの使い方的なところにも配慮しながら進めてくれるので、非常に勉強になります。 それでもたまにそのままでは動かないところがあったりして、例えば、 3.Todoの module と Component を準備する の時点でのpages/index.vueは <template <Todos / </template ではなくて <template <TodoList / </template ですよね、みたいなのがあったりします。 また、結構 implicitly has an ‘any’ type. で怒られることが多く、「: any」をつけて対処したりしてたのですが、それで良いのか、理解できていません。 さらに、 module namespace not found in mapGetters(): todos/ みたいなエラーが出て、これは解消できずにとりあえず進めたりしました。 その後も色々なエラーを解消できず、もう一度最初からやり直してみても最後には上記エラーに引っかかってしまう状態から抜けられず、途中で一旦中止しました。 （追記） この問題は解消しました。 store/modules/todos.ts という構造になっているので、 // export const name = ‘todos’; export const name = ‘modules/todos’; とすることにより、エラー解消しました。

Docker内に構築したNuxt.jsのサイトを公開する、条件として、公開サイトもDockerで構築し、かつ、ソースはボリューム機能でDocker外と共有とする。無料で。 なかなかハードルが高かったですが、できました！ Docker環境をどこに公開するか 無料公開と考えた場合に、1年の期間制限のAWSは対象から外します。そして、本サイト自体がGCEで立っているので、一旦それも除外。そこで検討したのが、Azureです。 Azure App Service Azureでは、素のApp Serviceは無料プランがあります。 App Service の価格 https://azure.microsoft.com/ja-jp/pricing/details/app-service/windows/ この素のサービスはPaaSなので、Dockerをインストールして環境構築するということはできません。これと連携してコンテナを読み込む、Web App for Containersというサービスがありますが、これは無料プランでは利用できません。さらに、通常であれば利用を検討すべきContainer InstancesとかAKS（Azure Kubernetes Service）というものもありますが、これらも有料プランのみです。 色々苦労した挙句、無料でDockerコンテナを立ち上げるのは無理ということで、あきらめました。 Heroku Herokuでもコンテナを読み込んでリリースする機能が提供されています。 https://devcenter.heroku.com/articles/container-registry-and-runtime これは無料で使えるプランもあるのですが、Volumeはサポートされていません。 なぜVolumeを使いたいかというと、ローカルの開発環境もDockerで構築したい、それと同一の環境をリリース環境に持っていきたい、ただ開発ツールはクライアントに持つことになるのでソースはローカルに持ちたい、そのソースをコミットすることでリリース環境にも反映したい、という理由です。 そういう意味で、最近話題の、VSCodeのRemote Development機能 https://crieit.net/posts/VSCode-Remote-Development 開発ツールをローカルに持ちつつソースはローカルに持つ必要がないという意味ですごいと思うのですが、複数人開発と考えた時にはどうなんだろうとも思ったりします。 さくらArukas https://arukas.io/ 今回試しませんでしたが、これもHerokuと同様、Volumeはサポートされません。ただ、無料プランが提供されているのは発見でした。 GCE（Google Compute Engine） 結局VMをそのまま使わせてもらえる環境でなければ今回の条件には合わない、と理解し、そうなると使えるのはGCEしかないのでは、という結論になりました。すでにDocker立てているわけですが、そこはDocker。複数立てることもできるわけです。ということで、もう一つDocker環境を立てることにしました。 公開用Docker構築 前回タイタニックアプリを作ろう（Nuxt.js 開発環境の基本） ここではなるべくシンプルなDockerファイルを目指して設定をしましたが、これはDockerをUpした後にサービスを起動しなければならないということです。 そうではなく、Upと共にNuxtサービスも立ち上げるということで試行錯誤しました。 まず、最初はDocker Build、あるいはUpでのエラー。 ERROR: Service ‘app’ failed to build: containerd-shim not installed on system DokerファイルをいじるとBuildだけはできたりして、大いに悩みましたが、最終的には、VMリスタートで解消。時間を返せ・・・ 再起動したらしたで、既存のDocker＝本サイトが立ち上がらないという問題発生！原因は、先にApaheが起動していてポート80を取られていたため。サービスを落として再度実行により問題解消。かなりの時間を費やして、やっと本題。 最終的には下記のサイトを大いに参考にさせていただきました。 dockerでnuxt.jsの環境を作ってみる https://qiita.com/reflet/items/e7c33f84ab43ab237ee4 Dockerfile FROM node:12.1.0-alpine WORKDIR /app RUN npm install –global @vue/cli @vue/cli-init WORKDIR /app/titanic-client RUN yarn install ENV HOST 0.

Kaggleのタイタニック問題は、機械学習の基礎として面白いので、それを活用し、かつ、技術書典の2冊で学んだことも生かして、アプリを作ってみましょう。 Kaggleのタイタニック問題で機械学習  Nuxt.js と Python でつくるぬるさく AI アプリ開発入門 コンテナ時代のWebサービスの作り方 環境のイメージ たどり着けるかわかりませんが、ゴールのイメージとしては、下記のようになります。 ローカルにDockerでNuxt.jsのWebアプリ環境 Jupyter Notebookで機械学習環境を作り、responder のAPIサービス環境はDockerで Dockerプライベートでレジストリとして、GitLab Container Registry プライベートレジストリからAzure App Service に公開 DockerによるNuxt環境構築 今回フォルダ構成はこのようにしています。 titanic -app –docker-compose.yml –client —Dockerfile –server —Dockerfile 参考にさせていただいたのはこちら。 Nuxt.jsの動作環境をdockerで作る https://qiita.com/FrozenVoice/items/2ae89ce820cade84924e 若干新しいバージョンに変更しました。 client/Dockerfile FROM node:12.1.0-alpine RUN mkdir /app WORKDIR /app RUN npm install -g vue-cli ENV HOST 0.0.0.0 EXPOSE 3000 docker-compose.yml version: ‘3’ services: app: build: ./client volumes: - ./client:/app ports: - "

ぬるさくで学んだ基礎を生かして、アプリを作ってみよう！ ぬるさくの学習はこちらNuxt.js と Python でつくるぬるさく AI アプリ開発入門 参考はこちら【Kaggle初心者入門編】タイタニック号で生き残るのは誰？ Kaggleの説明もこちら Kaggleとは？機械学習初心者が知っておくべき3つの使い方 そしてKaggleの入門用コンペ Titanic: Machine Learning from Disaster https://www.kaggle.com/c/titanic 最初にプロジェクト用のディレクトリ（例：titanic）を作成し、その中にdatasetフォルダを作成して、ダウンロードしたデータを配置。 さらにworkspaceディレクトリも作成。 Anaconda-Navigatorを起動 Notebookを起動 プロジェクト用のディレクトリのworkspaceに移動 New > Python 3 そうすると import pandas as pd import numpy as np train = pd.read_csv("../dataset/train.csv") test = pd.read_csv("../dataset/test.csv") で行ける。 「データセットの欠損の確認」のスクリプトは、そのまま貼り付けるとインデントが効いていないので注意。 「文字の数字への置き換え」のところでエラー発生。 train[“Sex”][train[“Sex”] == “male”] = 0 train[“Sex”][train[“Sex”] == “female”] = 1 train[“Embarked”][train[“Embarked”] == “S” ] = 0 train[“Embarked”][train[“Embarked”] == “C” ] = 1 train["

技術書典6で購入した本2冊目。 これも素晴らしい。#技術書典6 の #ぬるさくAI ですが 14時に完売しました！！ ご購入いただいた皆様、本当にありがとうございました！！！ BOOTHでのpdf販売を同時に開始しましたので ぜひ、#技術書典 にお越しいただけなかった方、ご購入ください！https://t.co/S7fajL0B8o — takayama.k (@pco2699) April 14, 2019 なんとか連休中に平成最初のリリースまで持って行きたかったのですが、色々つまり出してきたので、実際に何かを作ってリリースするところを目指したいと思い、Docker環境構築までで一旦まとめておきたいと思います。 Jupyter Notebook いきなり、あなたの知らない世界で、Jupyter Notebook のインストールから。 こちらなども参考に。 https://techacademy.jp/magazine/17430 まずはAnaconda をインストール。Anaconddaで2.3GBも使うんですね・・・ インストールしたら、 Enviroments > 「analytics」 Notebookをインストールしようとして間違えてJupyterLabをインストールしてしまいました。そうしたらNotebookも勝手に入りました。 3.3.1 データセットを読み込む 第１章、第２章も読み応えありますが、作り始めるのは第３章からになります。 初めてJupyter Notebook を使う身としては、色々不明点を抱えながら進めます。どうやって実行するんだ、というところから始まりますが、Runボタンで実行です。 実行すると、エラー。 ModuleNotFoundError Traceback (most recent call last) <ipython-input-2-aed2979e33dd in <module 1 # 分析に必要なライブラリをインポート —- 2 import pandas as pd 3 import numpy as np 4 5 # データセットを読み込む ModuleNotFoundError: No module named ‘pandas’ 先に

技術書典6で購入した本１冊目。 ガチで役に立つ本でした。 コンテナ時代のWebサービスの作り方 | 楽描商店 https://t.co/xFdOX3orNn 技術書典6で頒布した本をboothにて委託しております。ご活用ください。#booth_pm #技術書典 — とまと（nasum）技術書典え35楽描帳 (@tomato360) April 14, 2019 とりあえず、76/103ページまでやってみました。ここまで行くと、ソースをコミットしたら自動的にサイトに反映される仕組みが動きます。 が、多少悪戦苦闘したところもありますので、その辺をメモ。 リージョン 書籍では、東京リージョン（ap-northeast-1）を使うことになっていますが、元々オハイオを使っていたのでそちらのus-east-2を使うことにしてみました。 すると、 The image id ‘[ami-785c491f]’ does not exist となります。これはリージョンによって異なるので、ami-8b92b4eeに変更します。（参考）https://docs.docker.com/machine/drivers/aws/ Terraform Terraform初体験。インフラをコードで定義するとはこういうことなんだ。 しかし、これも簡単に進ませてはくれません。 Error inspecting states in the “s3” backend: BucketRegionError: incorrect region, the bucket is not in ‘us-east-2’ region status code: 301, request id: , host id: 今回一番ハマったかもしれないのはこのエラー。 例えば、 aws s3 ls なんかを叩くと帰ってくるので、この接続でs3の所定のバケットが見えていないわけでもない。結局、フォルダ全体を一回消して、再度やり直したらOKという最悪パターンでした。 また、実際の発生順序は前後しますが、さらに進んでまたこのエラーが出るようになりましたが、書籍だと、aws_route_table.tf、aws_route_table_association.tfが、間違っているのでgithub（書籍に記載あり）のソースを見て記載しました。 rubyバージョン 元々のローカル環境がruby2.3.7だったのが悪いと思うのですが、最初にそれで進めてしまい、いざbuildが動くと You must use Bundler 2 or greater with this lockfile が出るようになってしまいました。

Xamarinなかなか踏み込んでくれないなと感じたりしています。 Xamarin 最近どうよ？ – Qiita https://qiita.com/amay077/items/399002a02c1abf9d620b こちらの記事は面白く、中で紹介されている、Xamarin.Forms Visualの画像を見ると、「よいのでは！」と思いますが、さてどうなることやら・・・ これに対して、上記記事でも紹介されているGlideが、めちゃくちゃ踏み込んできていて面白い。 Glide https://www.glideapps.com/ ノンコーディング、ノンデザインセンスで、綺麗なアプリがすぐに作れる。本当にすぐに。ただし、データがあれば。私も、常々、コンテンツを持っている人は強いなと思っており、そういう人とコラボして面白いものを作りたいと思っているのですが、まあ普通の人はもしかしたら、簡単にアプリが作れると言っても、響かないのかもしれません。しかし、・・・ オープンデータがある！ オープンデータの定義は ① 営利目的、非営利目的を問わず二次利用可能なルールが適用されたもの ② 機械判読に適したもの ③ 無償で利用できるもの となります。 https://cio.go.jp/policy-opendata カタログサイトも提供されているので、色々な観点で見てみると、興味があるデータもあるのではないでしょうか。それを、アプリを通じて活用できたら面白いのではと思いました。 Glide実践 では、実際のデータを使用して、アプリを作ってみます。 データ登録 今回は、「港区観光施設」データを使用してみます。 http://www.city.minato.tokyo.jp/opendata/kanko/index1.html CSVで提供されているので、ダウンロードします。 ダウンロードしたら、すかさず、Googleドライブにアップします。 アップして、すかさず開き、すかさずGoggleスプレッドシートで開きます。 データ加工 これだけでアプリ作成に行けますが、あえて最初からデータ加工してみます。 「港区観光施設」データをみると、「エリア名称」と「種別」でカテゴリ分けされていることが分かります。アプリでも、この二つのカテゴリで絞り込みできるようにします。 まず、ファイル名は「港区観光施設」とし、元のシートは「施設一覧」に名前を変更します。次に、シートを追加し、シート名を「エリア名称」とし、A1の値も「エリア名称」とします。 次に、A2に「=Unique」と打ち込みますと、入力アシスタンスが起動しますので、クリックし、「施設一覧」シートのB列を選択します。Enterにより、「エリア名称」シートは値がグルーピングされた状態で表示されます。すごい。 （なお、94行目に余計なデータがあることが分かりますので、行削除してしまいます） で、これだと1行目の「エリア名称」も含まれてしまうので、「=UNIQUE(‘施設一覧’!B2:B)」とします。これできれいになります。
同じように、「種別」シートも作成します。 次に、両シートに細工します。「エリア名称」のB列の1行目を「施設=施設一覧:エリア名称:multiple」として、各行をA列を参照するようにします。「種別」シートも同様です。 これで準備完了です。 Glide基本作成 Glideにログインします。 「＋」でアプリ追加を行います。先ほど作成したファイルを指定して、「Select」クリックにより、アプリが生成されます。 基本的にはこれで動くアプリができています。ただし、さすがに、どの項目をどういう配置で表示するかは指定してあげないといけません。 今回のデータだと、施設一覧データの先頭2列が表示されてしまっているので、これを変更します。しかしそれも簡単です。Titleに「名称」、Detailsに「所在地」を指定すると、それっぽくなると思います。 データを1行選択すると、詳細ページに遷移します。 こちらでも、各項目の設定をします。１項目目のSummaryは、「名称」「種別」が良いかなと思うので変更し、「名称」「種別」「緯度」「経度」は不要かと思うので削除します。さらに、右上の「＋」で項目追加ができますので、ここでMapを指定します。Address欄に「所在地」を指定することで自動的に地図が表示されます。 「エリア名称」「種別」は基本項目が１項目しかないので、明細は自動表示で問題なしです。クリックした先の施設一覧情報は、Inline listの項目を調整します。 完成です！ 今回作ったアプリはこちら。 https://minatoku-kanko.glideapp.io/ Glide仕組みのポイント いきなり単純データを指定してアプリを作ってから、シートを直してもReload sheetにより反映されますので、最初はそのようにしてカスタマイズしていくのが面白いと思います。 一番のポイントは、Inline listの作り方ではないかと思います。上ではさらっと書きましたが、Inline listを作るために、シートに細工をします。最初に行った、multipleの指定です。 シートの中に、multipleの指定を行うと、その項目をInline listに指定することができます。 もう少し具体的に書くと、ある詳細画面に１データを表示している際に、その中に、子データを明細表示できるのが、Inline listです。今回の上記アプリでは、エリアの詳細情報（と言っても今回は１項目だけですが）の中に、エリアに紐づく施設を子データとして明細表示している形になっています。子データというからには、キーによる紐付けが必要で、その定義を1行目の項目記述で行なっています。 「施設=施設一覧:エリア名称:multiple」という記述では、子データの情報名が「施設」、その子データがどこに存在するかが「施設一覧」、紐付けキーが「エリア名称」、そして子データとして複数明細存在することを示す「multiple」という構造になっています。 他にも作ってみました。 面白いので量産しています。

Visual Studio 2019がリリースされ、Mac版にも対応されていますので、インストールしてみます。 最初にメッセージが出ますが、インストール中2、３回パスワード入力が必要ですので、完全放置はできませんでした。 インストールしたら、サンプルとして https://docs.microsoft.com/ja-jp/xamarin/cross-platform/samples/ Acquaint ⁨app-acquaint⁩/App⁩/Acquaint.XForms.sln を開きますが、UWPは対応していないというメッセーが出るので、ソリューションからは削除します。 で、左上に「Xcode 10.2でコマンドラインツールがありません」というメッセージが出ているので、これはインストールしてしまいます。 https://developer.apple.com/download/more/ 次に、「アクティブな構成内でプロジェクトがビルドされていません」というメッセージが出て、ビルドが完了しませんが、これは下記が参考になりました。 http://kuxumarin.hatenablog.com/entry/2016/12/01/Xamarin.iOS_%E3%81%AE%E3%83%97%E3%83%AD%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88%E3%81%A7_%22%E3%82%A2%E3%82%AF%E3%83%86%E3%82%A3%E3%83%96%E3%81%AA%E6%A7%8B%E6%88%90%E5%86%85%E3%81%A7%E3%83%97%E3%83%AD ビルドするとそれでも警告は残っていますが、実行すると、何も設定をしていないのでさすがにデータ保存はできませんが、とりあえず、最初の画面表示はできました。

アドビ、3月1日付けでマルケトとの統合を完了（2019年3月6日） https://www.adobe.com/jp/news-room/news/201903/20190306-adobe-marketo-integration.html 「この度の統合によりデジタルにおける顧客体験において、アドビがもつ分析、コンテンツ管理、パーソナライゼーション、広告、コマースといった様々なソリューションに加え、マルケトのリード管理およびアカウントベースドマーケティング技術を合わせて両社のお客様に提供することが可能になります。」 それに先行して アドビ、Magento Commerceを買収 https://www.adobe.com/jp/news-room/news/201805/20180522-magento-commerce.html Magento Commerce Cloudが組み込まれることにより、コマース機能がAdobe Experience Cloudにシームレスに一体化され、B2BとB2C両方の世界中のお客様に単一のプラットフォームを提供できるようになります。 両製品の位置づけ https://www.adobe.com/jp/what-is-adobe-experience-cloud.html Adobe Experience Cloudという製品群の中で 分析：Adobe Analytics オーディエンスのプロファイル：Adobe Audience Manager ・・・ コマース：Adobe Magento B2Bマーケティング：Marketo そもそも、Experience Cloudの位置づけ Creative Cloud：PhotoshopやIllustrator等の提供　一般的（昔からの）なAdobeのイメージ？ Experience Cloud：単一のクラウド基盤に統合された、「エクスペリエンスのための記録システム」 Document Cloud：Acrobat など　これも昔からのAdobeイメージ すなわち、昔ながらのビジネス領域でもクラウド化を進める中で、クラウド自体を基盤としたビジネスも展開し始めているということのよう。 所感 内容が分かりにくすぎる。 Adobe Analytics？Google Analytics的なことを意図しているのは分かりますが、具体的に何ができて、どういう仕掛けが必要なのか、一般情報から何もわからないのは、導入の検討のしようもないかと思います。 個人的には、ビジネス利用としては、Magento、Marketoがより充実したサポートが得られるようになることを期待しつつ、本当はその一つ手前に、CMSが主戦場としてあるべきで、Adobe Experience Manager Sitesがそこを担っているように思われますが、あまりにも情報不足なので、無料提供含めて利用者層を拡大するのが良いのでは。その際の強みは、デザインツールとの統合で、ビジュアル面に優れたサイト構築ができること、かと思います。 期待してます。

ネタは熱いうちに打たないと、テンションはすぐ下がりますね。 まずは、小ネタで、リッチメニューについて。 リッチメニューとは何かについては、 https://www.google.com/search?q=line+%E3%83%AA%E3%83%83%E3%83%81%E3%83%A1%E3%83%8B%E3%83%A5%E3%83%BC&amp;source=lnms&amp;tbm=isch&amp;sa=X&amp;ved=0ahUKEwjChdXvsazhAhVXyIsBHbDIDCAQ_AUIDigB&amp;biw=1628&amp;bih=1054 こんな感じで画像を見るとよくわかりますね。で、これがあってこそ、ボット作ったな感が出ると思うので、まずはここから始めるのはアリかと思います。実際上も、いきなり何を入力したら良いかわからない、という事態を避けるためには、メニューは有効かと思います。 しかし、絵心がない人が、これをどう作るか、というのは悩みどころです。 しかも、６分割メニューを作るなら、画像を６個用意するのかなと思ったら、大きい画像を用意して、その絵の中で６分割の表現をする、ということで、まずはそもそも、どうやってそんな綺麗に分割するのかというところから始まってしまいました。 しかし、これについては、良い方法を思いつきました。あまり大きい画像では持て余すかと思って、400×270で作りましたが、こちらを見ると、本当は1200×810で作った方が良かったようです。 で、良い方法というのは、Excelで列幅133、高さ135のセルを６個作り、それを塗りつぶし、罫線を白にします。その６マスをコピーして、Wordに画像として貼り付ける！これで、よい感じの雛形ができますので、あとは、そのマス内にイラスト等を貼り付けたり文字を書いたりして、周りを塗りつぶす！ 画像アプリを使いこなせない非デザイナにとってはなかなか良い方法ではないでしょうか。 そしてまた、この作業をするにあたっては、macはきつかったです。標準のプレビューアプリでは塗り潰しができず、PhotoScape Xという無料アプリでも、塗りつぶし機能は有償オプションになっていました。この点、Windowsのペイントなら完璧にタスクをこなしてくれます。 しかも、上記のExcelからWord貼り付け作戦は、Googleスプレッドシートではできず、Excelオンラインでもできませんでした。 まさか、画像作成で、macからWindowsに戻るとは・・・ もう一つ注意点としては、アップロードする画像サイズはぴったりサイズでないと受け付けてくれません。エラーメッセージが、jpgかpngでないとダメです、というようなものなのでわかりにくかったのですが、幅399を400にしたら受け付けてもらえました。 ということで、一応参考画像を下に貼っておきますが、次回作る時は、1200×810で作り直そうと思います。（最初からそれにしておいたらアップロードではまらなかった・・・）