Windows環境でGoqoo on kintoneがうごくようになった

2019年3月2日 14:38

の話。

前回、Windows環境ではgenerateが反応しないという感じだったが、作者様が降臨してくださりissueに登録してくださった。修正して、再度試してみてくださいとコメントまでいただいた。ありがたい。

前回の記事は、https://note.mu/951/n/na3f113546b22

環境

環境はWindows10 homeです。

C:\bin\goq>npm -v
6.4.1

C:\bin\goq>node -v
v10.14.1

再インストール

C:\bin\goq>npm install -g goqoo
npm WARN deprecated cross-spawn-async@2.2.5: cross-spawn no longer requires a build toolchain, use it instead
C:\Users\xxx\AppData\Roaming\npm\goqoo -> C:\Users\xxx\AppData\Roaming\npm\node_modules\goqoo\index.js
+ goqoo@0.2.4
removed 2 packages and updated 11 packages in 35.128s

プロジェクト作成

C:\bin\goq>goqoo new apple
? ==========================================================================
We're constantly looking for ways to make yo better!
May we anonymously report usage statistics to improve the tool over time?
More info: https://github.com/yeoman/insight & http://yeoman.io
========================================================================== No

     _-----_     ╭──────────────────────────╮
    |       |    │      Welcome to the      │
    |--(o)--|    │        outstanding       │
   `---------´   │      generator-goqoo     │
    ( _´U`_ )    │        generator!        │
    /___A___\   /│  Now creating 'apple'... │
     |  ~  |     ╰──────────────────────────╯
   __'.___.'__
 ´   `  |° ´ Y `

      run git init
Initialized empty Git repository in C:/bin/goq/apple/.git/
   create package.json
   create .env
   create .env.example
   create .eslintrc.yml
   create .prettierrc.yml
   create .goqoo\.gitkeep
   create .goqoo\dropbox.js
   create .goqoo\webpack.config.base.js
   create apps\.gitkeep
   create config\.env
   create config\.env.example
   create config\goqoo.config.yml
   create config\webpack.config.goqoo.js
   create .goqoo\img\SmallLogo.jpg
   create .gitignore
'yarn' は、内部コマンドまたは外部コマンド、
操作可能なプログラムまたはバッチ ファイルとして認識されていません。
Could not finish installation.
Please install yarn with npm install -g yarn and try again.
If yarn is already installed, try running the following command manually: yarn install

yarnがないということですね。ということは前回プロジェクト作成時にはフォルダしかできていなかったのも本当の動作ではなかったようす。

C:\bin\goq>npm install -g yarn
C:\Users\xxx\AppData\Roaming\npm\yarn -> C:\Users\xxxx\AppData\Roaming\npm\node_modules\yarn\bin\yarn.js
C:\Users\xxx\AppData\Roaming\npm\yarnpkg -> C:\Users\xxx\AppData\Roaming\npm\node_modules\yarn\bin\yarn.js
+ yarn@1.13.0
added 1 package in 1.819s

yarnを追加して

再度、プロジェクトの追加を実行する

C:\bin\goq>goqoo new apple

     _-----_     ╭──────────────────────────╮
    |       |    │      Welcome to the      │
    |--(o)--|    │        outstanding       │
   `---------´   │      generator-goqoo     │
    ( _´U`_ )    │        generator!        │
    /___A___\   /│  Now creating 'apple'... │
     |  ~  |     ╰──────────────────────────╯
   __'.___.'__
 ´   `  |° ´ Y `

      run git init
Reinitialized existing Git repository in C:/bin/goq/apple/.git/
identical package.json
identical .env
identical .env.example
identical .eslintrc.yml
identical .prettierrc.yml
identical .goqoo\.gitkeep
identical .goqoo\dropbox.js
identical .goqoo\webpack.config.base.js
identical apps\.gitkeep
identical config\.env
identical config\.env.example
identical config\goqoo.config.yml
identical config\webpack.config.goqoo.js
identical .goqoo\img\SmallLogo.jpg
identical .gitignore
yarn install v1.13.0
info No lockfile found.
[1/4] Resolving packages...
warning goqoo > yo > fullname > passwd-user > execa > cross-spawn-async@2.2.5: cross-spawn no longer requires a build toolchain, use it instead
warning goqoo > yo > yeoman-doctor > bin-version-check > bin-version > execa > cross-spawn-async@2.2.5: cross-spawn no longer requires a build toolchain, use it instead
[2/4] Fetching packages...
info fsevents@1.2.7: The platform "win32" is incompatible with this module.
info "fsevents@1.2.7" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] Linking dependencies...
warning " > foundation-sites@6.5.3" has unmet peer dependency "jquery@>=2.2.0".
warning " > foundation-sites@6.5.3" has unmet peer dependency "what-input@>=4.1.0".
[4/4] Building fresh packages...
success Saved lockfile.
Done in 79.38s.

scaffold

とりあえず、scaffoldを利用して行く方向で

C:\bin\goq>goqoo generate scaffold lemon
App id is required!

kintoneのアプリIDを伝える

App idが必要ということなので、kintoneで適当な新規アプリを作る。アプリのURLに含まれる数字部分がApp idを取得する。

C:\bin\goq>goqoo generate scaffold lemon 8
App id is required!

App idを伝える方法が

の画面キャプチャをみると「name:id」という形式であることがわかった。

C:\bin\goq>goqoo generate scaffold lemon:68
? Enter your kintone domain 
? Enter your kintone username 
? Enter your kintone password [hidden]
events.js:167
      throw er; // Unhandled 'error' event
      ^

Error: C:\bin\goq\config\goqoo.config.yml doesn't exist

config.ymlがない？

ディレクトリを移動していなかった。

C:\bin\goq>cd apple

C:\bin\goq\apple>goqoo generate scaffold lemon:68
? Enter your kintone domain 
? Enter your kintone username 
? Enter your kintone password [hidden]
    force config/goqoo.config.yml
   create apps\lemon\index.js
   create apps\lemon\on-index-show.js
   create apps\lemon\on-detail-show.js
   create apps\lemon\on-edits-show.js
   create apps\lemon\on-edits-submit.js
   create apps\lemon\customize.js
   create apps\lemon\customize.html
   create apps\lemon\customize.scss
C:\bin\goq\apple\node_modules\generator-goqoo\generators\g-scaffold\index.js:67
      views.カスタマイズビュー = {
                      ^

TypeError: Cannot set property 'カスタマイズビュー' of undefined

カスタマイズビューが未定義？もしかしてカスタマイズビューを作成してからscaffoldを実行するの？とおもったが、logmiのページをみるとサンプルアプリをつかっている。

顧客管理アプリを追加してアプリIDを合わせて実行すると

C:\bin\goq\apple>goqoo generate scaffold kokyaku:70
? Enter your kintone domain 
? Enter your kintone username 
? Enter your kintone password [hidden]
    force config/goqoo.config.yml
   create apps\kokyaku\index.js
   create apps\kokyaku\on-index-show.js
   create apps\kokyaku\on-detail-show.js
   create apps\kokyaku\on-edits-show.js
   create apps\kokyaku\on-edits-submit.js
   create apps\kokyaku\customize.js
   create apps\kokyaku\customize.html
   create apps\kokyaku\customize.scss
√ Put views to kintone
   create apps\kokyaku\fieldMap.json
√ Put JavaScript URL to kintone
√ Deploy to kintone

できたっぽい。フォームの項目が一切ない場合はダメっぽい。普段は空のアプリなんて存在しないから問題にならないと思う。私は空のアプリでないといけないと思っていたので新規アプリをつくってapp idを発番されればいいとおもっていた。

kintoneのサイトにいってみると設定画面のJavascriptの部分にjsへのリンクが追加されている。

npm run build

を実行する。

npm run watch

も実行する。buildはパッケージ処理、watchはソースの変更を監視して自動ビルドしてくれるということではないかと想像している。

Devサーバー

Helloみたいな画面がでるはずなんだけどな。webpackの世界はよくわからない。logmiのサイトをみるとdevサーバーを起動させる必要があるという。インターネットを検索して

npm start

とするとローカルにWebサーバーが立つらしい。

kintoneからは、https://localhost:59000/kokyaku.js　を参照するように自動設定されている。サーバーがうごいているかどうか確かめるためにlocalhost:59000にアクセスしてみる。httpsの証明書問題があると表示される。問題があることを理解して表示すると選択するとアクセスできるようになった。

動作を確認

再度kintoneに行くと、

出たー。

便利ボタン

よくみると全レコード保存というボタンがある。

一覧表示で全部がinputになっているのは、この機能のためだったのか。

早速、押してみる。また、Helloの画面が出た？

そして、保存されずに下にボタンが出た？なんか一瞬ダイアログがでているがHelloの画面で上書きされている？

on-index-show.jsをみてみるとHelloを表示している部分があるので削除してみる。ここで自動buildがかかって驚いた。

ダミー。一瞬でていたのはこれか。