three.jsをIonicに導入したときの型定義ファイルの設定 覚書
はじめに
個人の覚書です。
格闘記
typingsというツールを使ってインストールする。
インストール実行結果
MyMacBookAir:VNavi swchrm$ npm install -g typings npm WARN deprecated typings@2.1.1: Typings is deprecated in favor of NPM @types -- see README for more information /Users/swchrm/.nodebrew/node/v10.15.0/bin/typings -> /Users/swchrm/.nodebrew/node/v10.15.0/lib/node_modules/typings/dist/bin.js + typings@2.1.1 added 184 packages from 100 contributors in 14.965s
どんなファイルが有るか検索してみる。
MyMacBookAir:VNavi swchrm$ typings search three Viewing 20 of 20 NAME SOURCE HOMEPAGE DESCRIPTION VERSIONS UPDATED three dt http://mrdoob.github.com/three.js/ 2 2017-03-23T14:45:37.000Z three-canvasrenderer dt https://github.com/mrdoob/three.js/blob/master/examples/js/renderers/CanvasRenderer.js 2 2016-09-16T16:36:06.000Z three-copyshader dt https://github.com/mrdoob/three.js/blob/r68/examples/js/shaders/CopyShader.js 1 2016-04-05T22:50:30.000Z three-css3drenderer dt https://github.com/mrdoob/three.js/blob/master/examples/js/renderers/CSS3DRenderer.js 1 2016-04-05T22:50:30.000Z three-editorcontrols dt https://github.com/mrdoob/three.js/blob/master/examples/js/controls/EditorControls.js 1 2016-04-05T22:50:30.000Z three-effectcomposer dt https://github.com/mrdoob/three.js/blob/r68/examples/js/postprocessing/EffectComposer.js 1 2016-04-05T22:50:30.000Z three-firstpersoncontrols dt http://mrdoob.github.com/three.js/ 2 2016-07-04T01:07:34.000Z three-maskpass dt https://github.com/mrdoob/three.js/blob/r68/examples/js/postprocessing/MaskPass.js 1 2016-04-05T22:50:30.000Z three-orbitcontrols dt https://github.com/mrdoob/three.js/blob/master/examples/js/controls/OrbitControls.js 2 2016-07-04T01:07:34.000Z three-orthographictrackballcontrols dt https://github.com/mrdoob/three.js/blob/master/examples/js/controls/OrthographicTrackballControls.js 1 2016-04-05T22:50:30.000Z three-projector dt https://github.com/mrdoob/three.js/blob/master/examples/js/renderers/Projector.js 1 2016-04-05T22:50:30.000Z three-renderpass dt https://github.com/mrdoob/three.js/blob/r68/examples/js/postprocessing/RenderPass.js 1 2016-04-05T22:50:30.000Z three-shaderpass dt https://github.com/mrdoob/three.js/blob/r68/examples/js/postprocessing/ShaderPass.js 1 2016-04-05T22:50:30.000Z three-trackballcontrols dt https://github.com/mrdoob/three.js/blob/master/examples/js/controls/TrackballControls.js 2 2016-07-30T16:09:25.000Z three-transformcontrols dt https://github.com/mrdoob/three.js/blob/master/examples/js/controls/TransformControls.js 1 2016-04-05T22:50:30.000Z three-vrcontrols dt https://github.com/mrdoob/three.js/blob/master/examples/js/controls/VRControls.js 2 2016-10-28T13:55:57.000Z three-vreffect dt https://github.com/mrdoob/three.js/blob/master/examples/js/effects/VREffect.js 2 2016-10-28T13:55:57.000Z react-icons/go/three-bars dt 1 2017-02-02T22:44:13.000Z three/detector dt https://github.com/mrdoob/three.js/blob/master/examples/js/Detector.js 1 2016-04-05T22:50:30.000Z vorpal dt https://github.com/dthree/vorpal 1 2016-08-31T00:59:05.000Z
どれをインストールすればいいかわからないのでひとまず何も指定せずにインストールしてみる。
MyMacBookAir:VNavi swchrm$ typings install three --save typings ERR! message Unable to find "three" ("npm") in the registry. typings ERR! message However, we found "three" for 1 other source: "dt" typings ERR! message You can install these using the "source" option. typings ERR! message We could use your help adding these typings to the registry: https://github.com/typings/registry typings ERR! caused by https://api.typings.org/entries/npm/three/versions/latest responded with 404, expected it to equal 200 typings ERR! typings ERR! cwd /Users/swchrm/Documents/MyProject/VNavi typings ERR! system Darwin 18.2.0 typings ERR! command "/Users/swchrm/.nodebrew/node/v10.15.0/bin/node" "/Users/swchrm/.nodebrew/current/bin/typings" "install" "three" "--save" typings ERR! node -v v10.15.0 typings ERR! typings -v 2.1.1 typings ERR! typings ERR! If you need help, you may report this error at: typings ERR! <https://github.com/typings/typings/issues>
エラーが大量に出た。
--ambient
を付与してみた。
MyMacBookAir:VNavi swchrm$ typings install three --save --ambient typings ERR! deprecated The "ambient" flag is deprecated. Please use "global" instead
s/--ambient
/--global
MyMacBookAir:VNavi swchrm$ typings install three --save --global typings ERR! message Unable to find "three" ("npm") in the registry. typings ERR! message However, we found "three" for 1 other source: "dt" typings ERR! message You can install these using the "source" option. typings ERR! message We could use your help adding these typings to the registry: https://github.com/typings/registry typings ERR! caused by https://api.typings.org/entries/npm/three/versions/latest responded with 404, expected it to equal 200 typings ERR! typings ERR! cwd /Users/swchrm/Documents/MyProject/VNavi typings ERR! system Darwin 18.2.0 typings ERR! command "/Users/swchrm/.nodebrew/node/v10.15.0/bin/node" "/Users/swchrm/.nodebrew/current/bin/typings" "install" "three" "--save" "--global" typings ERR! node -v v10.15.0 typings ERR! typings -v 2.1.1 typings ERR! typings ERR! If you need help, you may report this error at: typings ERR! <https://github.com/typings/typings/issues>
typing init
をする必要があることに気づく。
実行。
特に応答はない。
ファイルの確認。
MyMacBookAir:VNavi swchrm$ cat typings.json { "name": "VNavi", "dependencies": {} }
typings install dt~three --save --global
でうまくいきました。dt~
がないとエラーになりました。
以下はログです。
MyMacBookAir:VNavi swchrm$ typings install dt~three --save --global typings INFO reference Stripped reference "https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/ccda793e883ecb20bd396121f1e89df8c1dd00ce/three/detec tor.d.ts" during installation from "three" (main) typings INFO reference Stripped reference "https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/ccda793e883ecb20bd396121f1e89df8c1dd00ce/three/three -canvasrenderer.d.ts" during installation from "three" (main) typings INFO reference Stripped reference "https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/ccda793e883ecb20bd396121f1e89df8c1dd00ce/three/three -copyshader.d.ts" during installation from "three" (main) typings INFO reference Stripped reference "https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/ccda793e883ecb20bd396121f1e89df8c1dd00ce/three/three -css3drenderer.d.ts" during installation from "three" (main) typings INFO reference Stripped reference "https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/ccda793e883ecb20bd396121f1e89df8c1dd00ce/three/three -editorcontrols.d.ts" during installation from "three" (main) typings INFO reference Stripped reference "https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/ccda793e883ecb20bd396121f1e89df8c1dd00ce/three/three -effectcomposer.d.ts" during installation from "three" (main) typings INFO reference Stripped reference "https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/ccda793e883ecb20bd396121f1e89df8c1dd00ce/three/three -FirstPersonControls.d.ts" during installation from "three" (main) typings INFO reference Stripped reference "https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/ccda793e883ecb20bd396121f1e89df8c1dd00ce/three/three -maskpass.d.ts" during installation from "three" (main) typings INFO reference Stripped reference "https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/ccda793e883ecb20bd396121f1e89df8c1dd00ce/three/three -orbitcontrols.d.ts" during installation from "three" (main) typings INFO reference Stripped reference "https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/ccda793e883ecb20bd396121f1e89df8c1dd00ce/three/three -orthographictrackballcontrols.d.ts" during installation from "three" (main) typings INFO reference Stripped reference "https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/ccda793e883ecb20bd396121f1e89df8c1dd00ce/three/three -projector.d.ts" during installation from "three" (main) typings INFO reference Stripped reference "https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/ccda793e883ecb20bd396121f1e89df8c1dd00ce/three/three -renderpass.d.ts" during installation from "three" (main) typings INFO reference Stripped reference "https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/ccda793e883ecb20bd396121f1e89df8c1dd00ce/three/three -shaderpass.d.ts" during installation from "three" (main) typings INFO reference Stripped reference "https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/ccda793e883ecb20bd396121f1e89df8c1dd00ce/three/three -trackballcontrols.d.ts" during installation from "three" (main) typings INFO reference Stripped reference "https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/ccda793e883ecb20bd396121f1e89df8c1dd00ce/three/three -transformcontrols.d.ts" during installation from "three" (main) typings INFO reference Stripped reference "https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/ccda793e883ecb20bd396121f1e89df8c1dd00ce/three/three -vrcontrols.d.ts" during installation from "three" (main) typings INFO reference Stripped reference "https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/ccda793e883ecb20bd396121f1e89df8c1dd00ce/three/three -vreffect.d.ts" during installation from "three" (main) typings INFO reference Stripped reference "https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/ccda793e883ecb20bd396121f1e89df8c1dd00ce/three/three -ctmloader.d.ts" during installation from "three" (main) typings INFO reference Stripped reference "https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/ccda793e883ecb20bd396121f1e89df8c1dd00ce/three/three -octree.d.ts" during installation from "three" (main) typings INFO reference Stripped reference "https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/ccda793e883ecb20bd396121f1e89df8c1dd00ce/three/three -colladaLoader.d.ts" during installation from "three" (main) three
typings.json
の確認
MyMacBookAir:VNavi swchrm$ more typings.json { "name": "VNavi", "dependencies": {}, "globalDependencies": { "three": "registry:dt/three#0.84.0+20170323144537" } }
まとめ
TypeScriptでJavaScriptのライブラリは使える。
ただし、型定義ファイルが最初は用意されてないので、用意する必要がある。
その用意するときに使うのが「typings」。
参考文献
Ionic + three.jsで立方体を表示させる
はじめに
個人の覚書です。
なにをしたのか
Ionicとthree.jsをあわせてサンプルを作成してみる。 正確にはこの記事の「やってみた」になる。
前提
やったこと
three.jsのインストール
npm install three --save
でインストールを実行。
下記は実行ログ。
^CMyMacBookAir:VNavi swchrm$ npm install three --save npm WARN @ionic/pro@2.0.4 requires a peer of cordova-plugin-ionic@^5.0.0 but none is installed. You must install peer dependencies yourself. + three@0.99.0 added 1 package from 1 contributor and audited 6152 packages in 21.541s found 0 vulnerabilities
WebBrowserでの動作確認
うまく動いた。 ただし描画にマシンスペックを想像以上に必要とするのか、動作させるとマシンがかなり重くなった。 動画をうまく掲載できない。。
iOS実機での動作検証
うまく動いた。 こちらも動画をうまく掲載できない。。
Android実機での動作確認
Androidの実機ではアプリを起動(ionic serve -c
)するとエラーになってしまい、アプリが落ちてしまった。
AndroidのOSのバージョンが古いことを原因と想定するが、現在ここは重要ではないので解決は特にしない。
下記にログだけ残しておくことにする。
[INFO] Browser window opened to http://localhost:8100! [app-scripts] [06:09:21] console.log: Angular is running in the development mode. Call enableProdMode() to enable the production [app-scripts] mode. [app-scripts] [06:09:21] console.log: THREE.WebGLRenderer 99 [app-scripts] [06:09:22] lint finished in 7.33 s [app-scripts] [06:09:22] console.log: Ionic Native: deviceready event fired after 1518 ms [app-scripts] [06:09:26] console.log: Angular is running in the development mode. Call enableProdMode() to enable the production [app-scripts] mode. [app-scripts] [06:09:26] console.log: THREE.WebGLRenderer 99 [app-scripts] [06:09:26] console.warn: Ionic Native: tried calling StatusBar.styleDefault, but Cordova is not available. Make sure to [app-scripts] a) run in a real device or simulator and b) include cordova.js in your index.html [app-scripts] [06:09:26] console.warn: Ionic Native: tried calling SplashScreen.hide, but Cordova is not available. Make sure to a) [app-scripts] run in a real device or simulator and b) include cordova.js in your index.html [app-scripts] [06:10:18] console.log: deviceready has not fired after 5 seconds. [app-scripts] [06:10:18] console.log: Channel not fired: onDOMContentLoaded [app-scripts] [06:10:19] console.log: Channel not fired: onCordovaInfoReady [app-scripts] [06:10:19] console.log: Channel not fired: onFileSystemPathsReady [app-scripts] [06:10:19] console.log: Channel not fired: onCordovaConnectionReady [app-scripts] [06:10:39] console.warn: Ionic Native: deviceready did not fire within 5000ms. This can happen when plugins are in an [app-scripts] inconsistent state. Try removing plugins from plugins/ and reinstalling them. [app-scripts] [06:10:39] console.log: Angular is running in the development mode. Call enableProdMode() to enable the production [app-scripts] mode. [app-scripts] [06:10:40] console.log: THREE.WebGLRenderer 99 [app-scripts] [06:10:40] console.error: THREE.WebGLRenderer: Error creating WebGL context. [app-scripts] [06:10:40] console.error: ERROR [object Object] [app-scripts] [06:10:41] console.log: Ionic Native: deviceready event fired after 17312 ms
まとめ
npmでthree.jsをインストールする。
その後、描画させたいtabのtsファイルとhtmlファイルを変更する。
所感
動くには動く。 ただしパフォーマンスに問題がありそう。
Ionic環境構築時の覚書
はじめに
個人メモです。
なにをしたか
インストールしてプロジェクトを作り、プロジェクトの起動をWeb、iOSの実機、Androidの実機で確認するまで。
環境
インストール
npm i -g ionic
実行。
Ionicをnpmでグローバルインストールした。
MyMacBookAir:MyProject swchrm$ npm i -g ionic /Users/swchrm/.nodebrew/node/v10.15.0/bin/ionic -> /Users/swchrm/.nodebrew/node/v10.15.0/lib/node_modules/ionic/bin/ionic + ionic@4.6.0 added 266 packages from 153 contributors in 20.866s
新規プロジェクト作成
ionic start VNavi tabs
実行。
プロジェクトに名前をつけて新規作成している。
このときIonic Appflow SDKと連携させるかの問にYesと答えたが、標準はNoになっているためNoでもよい。
このへんはまだよくわかっていないので要調査。
またgitのmasterブランチともなにか関わり合ってやってくれるみたい。
初回のgit pushには特に影響は及ぼさないように思えた。
これも要調査だが、いまは後回し。
MyMacBookAir:MyProject swchrm$ ionic start VNavi tabs [INFO] You are about to create an Ionic 3 app. Would you like to try the release candidate for Ionic 4? Ionic 4 uses the power of the modern Web and embraces the Angular CLI and Angular Router to bring you the best version of Ionic ever. See our blog announcement[1] and documentation[2] for more information. We'd love to hear your feedback on our latest version! [1]: https://blog.ionicframework.com/ionic-framework-4-0-rc-shipped-paving-way-for-final [2]: https://beta.ionicframework.com/docs/ ? Try Ionic 4? No ✔ Preparing directory ./VNavi - done! ✔ Downloading and extracting tabs starter - done! Installing dependencies may take several minutes. ✨ IONIC DEVAPP ✨ Speed up development with the Ionic DevApp, our fast, on-device testing mobile app - 🔑 Test on iOS and Android without Native SDKs - 🚀 LiveReload for instant style and JS updates --> Install DevApp: https://bit.ly/ionic-dev-app <-- ──────────────────────────────────────────────────────────── > npm i npm WARN deprecated browserslist@2.11.3: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools. > fsevents@1.2.4 install /Users/swchrm/Documents/MyProject/VNavi/node_modules/fsevents > node install [fsevents] Success: "/Users/swchrm/Documents/MyProject/VNavi/node_modules/fsevents/lib/binding/Release/node-v64-darwin-x64/fse.node" already installed Pass --update-binary to reinstall or --build-from-source to recompile > node-sass@4.11.0 install /Users/swchrm/Documents/MyProject/VNavi/node_modules/node-sass > node scripts/install.js Downloading binary from https://github.com/sass/node-sass/releases/download/v4.11.0/darwin-x64-64_binding.node Download complete ⸩ ⠋ : Binary saved to /Users/swchrm/Documents/MyProject/VNavi/node_modules/node-sass/vendor/darwin-x64-64/binding.node Caching binary to /Users/swchrm/.npm/node-sass/4.11.0/darwin-x64-64_binding.node > uglifyjs-webpack-plugin@0.4.6 postinstall /Users/swchrm/Documents/MyProject/VNavi/node_modules/uglifyjs-webpack-plugin > node lib/post_install.js > node-sass@4.11.0 postinstall /Users/swchrm/Documents/MyProject/VNavi/node_modules/node-sass > node scripts/build.js Binary found at /Users/swchrm/Documents/MyProject/VNavi/node_modules/node-sass/vendor/darwin-x64-64/binding.node Testing binary Binary is fine npm notice created a lockfile as package-lock.json. You should commit this file. added 754 packages from 639 contributors and audited 6150 packages in 69.556s found 0 vulnerabilities > git init Initialized empty Git repository in /Users/swchrm/Documents/MyProject/VNavi/.git/ 🔥 IONIC APPFLOW 🔥 Supercharge your Ionic development with the Ionic Appflow SDK - ⚠️ Track runtime errors in real-time, back to your original TypeScript - 📲 Push remote updates and skip the app store queue Learn more about Ionic Appflow: https://ionicframework.com/appflow ──────────────────────────────────────────────────────────── ? Install the free Ionic Appflow SDK and connect your app? Yes > npm i --save -E @ionic/pro npm WARN @ionic/pro@2.0.4 requires a peer of cordova-plugin-ionic@^5.0.0 but none is installed. You must install peer dependencies yourself. + @ionic/pro@2.0.4 added 1 package from 1 contributor and audited 6151 packages in 25.655s found 0 vulnerabilities > ionic link --name VNavi Log into your Ionic Appflow account If you don't have one yet, create yours by running: ionic signup ? Email: swchrm@gmail.com ? Password: *********** ? What would you like to do? Link an existing app on Ionic Appflow ✔ Looking up your apps - done! ? No apps found. Would you like to create a new app on Ionic Appflow? Yes [INFO] Ionic Appflow uses a git-based workflow to manage app updates. You will be prompted to set up the git host and repository for this new app. See the docs[1] for more information. [1]: https://ionicframework.com/docs/appflow/basics/git/ ? Which git host would you like to use? GitHub [INFO] GitHub OAuth setup required. To continue, we need you to authorize Ionic Appflow with your GitHub account. A browser will open and prompt you to complete the authorization request. When finished, please return to the CLI to continue linking your app. ? Open browser: Yes ? Authorized and ready to continue: Yes [INFO] In order to link to a GitHub repository the repository must already exist on GitHub. [INFO] If the repository does not exist please create one now before continuing. If you're not familiar with Git you can learn how to set it up with GitHub here: https://help.github.com/articles/set-up-git/ You can find documentation on how to create a repository on GitHub and push to it here: https://help.github.com/articles/create-a-repo/ ? Does the repository exist on GitHub? No [ERROR] Repo must exist on GitHub in order to link. Please create the repo and run ionic link again. MyMacBookAir:MyProject swchrm$ ls VNavi VRMViewer traveling_jirorian_problem_flutter MyMacBookAir:MyProject swchrm$ ionic link [ERROR] Sorry! ionic link can only be run in an Ionic project directory. If this is a project you'd like to integrate with Ionic, create an ionic.config.json file. MyMacBookAir:MyProject swchrm$ cd VNavi/ MyMacBookAir:VNavi swchrm$ ionic link ? What would you like to do? Link an existing app on Ionic Appflow ✔ Looking up your apps - done! ? Which app would you like to link VNavi (6113f65e) ✔ Looking up app 6113f65e - done! [INFO] Ionic Appflow uses a git-based workflow to manage app updates. You will be prompted to set up the git host and repository for this new app. See the docs[1] for more information. [1]: https://ionicframework.com/docs/appflow/basics/git/ ? Which git host would you like to use? GitHub [INFO] In order to link to a GitHub repository the repository must already exist on GitHub. [INFO] If the repository does not exist please create one now before continuing. If you're not familiar with Git you can learn how to set it up with GitHub here: https://help.github.com/articles/set-up-git/ You can find documentation on how to create a repository on GitHub and push to it here: https://help.github.com/articles/create-a-repo/ ? Does the repository exist on GitHub? Yes ✔ Looking up your GitHub repositories: 16 found - done! ? Which GitHub repository would you like to link? SWCHRM / VNavi [INFO] By default Ionic Appflow links only to the master branch. [INFO] If you'd like to link to another branch or multiple branches you'll need to select each branch to connect to. If you're not familiar with on working with branches in GitHub you can read about them here: https://guides.github.com/introduction/flow/ ? Which would you like to do? Link to master branch only [OK] App 6113f65e connected to https://github.com/SWCHRM/VNavi > ionic config set id "6113f65e" --json [OK] id set to "6113f65e"! [OK] Project linked with app 6113f65e! [INFO] Here are some additional links that can help you with you first push to GitHub: Adding GitHub as a remote: https://help.github.com/articles/adding-a-remote/ Pushing to a remote: https://help.github.com/articles/pushing-to-a-remote/ Working with branches: https://guides.github.com/introduction/flow/ More comfortable with a GUI? Try GitHub Desktop! https://desktop.github.com/ [INFO] You can now push to one of your branches on GitHub to trigger a build in Ionic Appflow! If you haven't added GitHub as your origin you can do so by running: git remote add origin https://github.com/SWCHRM/VNavi You can find additional links above to help if you're having issues. MyMacBookAir:VNavi swchrm$ git add . MyMacBookAir:VNavi swchrm$ git commit -m "first commit and ionic link done" [master (root-commit) 12b88be] first commit and ionic link done 30 files changed, 6892 insertions(+) create mode 100644 .editorconfig create mode 100644 .gitignore create mode 100644 ionic.config.json create mode 100644 ionic.starter.json create mode 100644 package-lock.json create mode 100644 package.json create mode 100644 src/app/app.component.ts create mode 100644 src/app/app.html create mode 100644 src/app/app.module.ts create mode 100644 src/app/app.scss create mode 100644 src/app/main.ts create mode 100644 src/assets/icon/favicon.ico create mode 100644 src/assets/imgs/logo.png create mode 100644 src/index.html create mode 100644 src/manifest.json create mode 100644 src/pages/about/about.html create mode 100644 src/pages/about/about.scss create mode 100644 src/pages/about/about.ts create mode 100644 src/pages/contact/contact.html create mode 100644 src/pages/contact/contact.scss create mode 100644 src/pages/contact/contact.ts create mode 100644 src/pages/home/home.html create mode 100644 src/pages/home/home.scss create mode 100644 src/pages/home/home.ts create mode 100644 src/pages/tabs/tabs.html create mode 100644 src/pages/tabs/tabs.ts create mode 100644 src/service-worker.js create mode 100644 src/theme/variables.scss create mode 100644 tsconfig.json create mode 100644 tslint.json MyMacBookAir:VNavi swchrm$ git push fatal: No configured push destination. Either specify the URL from the command-line or configure a remote repository using git remote add <name> <url> and then push using the remote name git push <name> MyMacBookAir:VNavi swchrm$ git remote add origin https://github.com/SWCHRM/VNavi MyMacBookAir:VNavi swchrm$ git push fatal: The current branch master has no upstream branch. To push the current branch and set the remote as upstream, use git push --set-upstream origin master MyMacBookAir:VNavi swchrm$ git push --set-upstream origin master Counting objects: 43, done. Delta compression using up to 4 threads. Compressing objects: 100% (36/36), done. Writing objects: 100% (43/43), 99.14 KiB | 2.48 MiB/s, done. Total 43 (delta 2), reused 0 (delta 0) remote: Resolving deltas: 100% (2/2), done. To https://github.com/SWCHRM/VNavi * [new branch] master -> master Branch 'master' set up to track remote branch 'master' from 'origin'.
アプリ実行
Webで表示
cd VNavi
のあと、ionic serve
を実行。
http://localhost:8100/
でアクセスできる。
iOS、Android
実機での確認はIonic DevAppを利用して行う。
アプリ落としてきて開いたあと開いて(、Ionicのアカウントが未登録なら登録し)、その後ionic serve -c
を実行。
実行ログは下記の通り
^CMyMacBookAir:VNavi swchrm$ ionic serve -c > ionic-app-scripts serve --address 0.0.0.0 --port 8100 --livereload-port 35729 --dev-logger-port 53703 --consolelogs --nobrowser [app-scripts] [04:54:04] ionic-app-scripts 3.2.1 [app-scripts] [04:54:04] watch started ... [app-scripts] [04:54:04] build dev started ... [app-scripts] [04:54:04] clean started ... [app-scripts] [04:54:04] clean finished in 99 ms [app-scripts] [04:54:04] copy started ... [app-scripts] [04:54:04] deeplinks started ... [app-scripts] [04:54:04] deeplinks finished in 61 ms [app-scripts] [04:54:04] transpile started ... [app-scripts] [04:54:13] transpile finished in 8.69 s [app-scripts] [04:54:13] preprocess started ... [app-scripts] [04:54:13] preprocess finished in 1 ms [app-scripts] [04:54:13] webpack started ... [app-scripts] [04:54:13] copy finished in 9.24 s [app-scripts] [04:54:23] webpack finished in 10.00 s [app-scripts] [04:54:23] sass started ... [app-scripts] [04:54:25] sass finished in 2.67 s [app-scripts] [04:54:25] postprocess started ... [app-scripts] [04:54:25] postprocess finished in 15 ms [app-scripts] [04:54:25] lint started ... [app-scripts] [04:54:26] build dev finished in 21.78 s [app-scripts] [04:54:26] watch ready in 21.93 s [INFO] Development server running! Local: http://localhost:8100 External: http://192.168.1.7:8100, http://192.168.2.1:8100, http://192.168.3.1:8100 DevApp: VNavi@8100 on MyMacBookAir.local Use Ctrl+C to quit this process [INFO] Browser window opened to http://localhost:8100! [app-scripts] [04:54:31] console.log: Angular is running in the development mode. Call enableProdMode() to enable the production [app-scripts] mode. [app-scripts] [04:54:32] console.warn: Ionic Native: tried calling StatusBar.styleDefault, but Cordova is not available. Make sure to [app-scripts] a) run in a real device or simulator and b) include cordova.js in your index.html [app-scripts] [04:54:32] console.warn: Ionic Native: tried calling SplashScreen.hide, but Cordova is not available. Make sure to a) [app-scripts] run in a real device or simulator and b) include cordova.js in your index.html [app-scripts] [04:54:34] lint finished in 8.77 s [app-scripts] [04:55:07] console.log: Angular is running in the development mode. Call enableProdMode() to enable the production [app-scripts] mode. [app-scripts] [04:55:08] console.log: Ionic Native: deviceready event fired after 1343 ms [app-scripts] [05:01:31] console.log: deviceready has not fired after 5 seconds. [app-scripts] [05:01:31] console.log: Channel not fired: onDOMContentLoaded [app-scripts] [05:01:31] console.warn: Ionic Native: deviceready did not fire within 5000ms. This can happen when plugins are in an [app-scripts] inconsistent state. Try removing plugins from plugins/ and reinstalling them. [app-scripts] [05:01:32] console.log: Angular is running in the development mode. Call enableProdMode() to enable the production [app-scripts] mode. [app-scripts] [05:01:33] console.log: Ionic Native: deviceready event fired after 13819 ms
スクショ
所感
モバイル端末での動作確認もアプリをインストールすれば簡単にできる。