Android Studio 4.1 にOpenCV 4.5.0 をインポートするメモ
Android Studioのバージョン更新のためか、Qiitaや個人ブログの方法がそのままでは使えなかったのでメモ。
大筋は下記参照でいいと思うのでポイントだけ。
（まだインポートまでしかやってないけど←）
環境
- Android Studio 4.1
- OpenCV 4.5.0（４系以降ではあまり関係ないけど念のため）
現象
Import Module from SourceダイアログにModule nameが無い- デフォルトではモジュール名が
sdkとなるが、opencv等任意の名前に書き換える場合はsettings.gradleも修正する必要あり
ぱっとモジュール名を変更すると、Project Structureからモジュールの依存関係を追加するときにモジュールが見つからなくなるという地味なトラップがあった。
対応
File -> New -> Import Module
で表示されるダイアログには、Source directoryはあるがModule nameは無くなっている。
⇒インポート後に、手動でモジュール名とsettings.gradleを修正する
OpenCVをインポートするとき、指定するフォルダがsdkとなっているため、
Android Studioにインポート後もsdkという名前になっている。
任意の名前に書き換えるときはsettings.gradleを修正する必要がある。
include ':app' - include ':sdk' + include ':opencv' // ← モジュール名がsdkでインポートされるため、任意の名前に書き換え rootProject.name = "OpenCVSample"
とりあえずここまで。あとテストしてハマったら随時追記する。
Pandoc+Dockerでドキュメント作成環境を整備する
vue serve コマンドとカスタムパーサ設定の話
vue serve <vue file>が便利そうだったので使いたいと思ったら、思いのほかトラップがあったのでメモ。
.eslintrc.jsにおいてカスタムパーサを指定するのがキモだった模様。
実際何が必須で何が不要なのかわかってないので後で調べる。
手順
まず最初にnpm install -g @vue/cli @vue/cli-service-globalをインストールしておく。
このままvue serve <vue file>をやっても、おそらくCannot find module 'babel-eslint'とエラーを吐いてしまう。
babel-eslintパッケージがインストールされてないのは分かる。 一方で、ESLintをローカルのままでserveしたい場合が出てこなかった。
ESLintをローカルのままでserveしたい場合、次のようにする。
①最初にnpm i --save-dev eslint babel-eslintでローカルにインストールする。
package.jsonのdevDependenciesに次のとおり記載されていればOK（だと思う）。
// package.json // `vue create`で最初から導入されているパッケージも含む "devDependencies": { "@typescript-eslint/eslint-plugin": "^2.33.0", "@typescript-eslint/parser": "^2.33.0", "@vue/cli-plugin-babel": "~4.4.0", "@vue/cli-plugin-eslint": "~4.4.0", "@vue/cli-plugin-typescript": "~4.4.0", "@vue/cli-service": "~4.4.0", "babel-eslint": "^10.1.0", "eslint": "^6.7.2", "eslint-plugin-vue": "^6.2.2", "typescript": "~3.9.3", }
②.eslintrc.jsに次のとおり追記する
// .eslintrc.js
module.exports = {
root: true,
env: {
node: true
},
'extends': [
'plugin:vue/essential',
'eslint:recommended',
'@vue/typescript/recommended'
],
parser: "vue-eslint-parser", // ←追記
parserOptions: {
parser: "@typescript-eslint/parser", // ←追記
ecmaVersion: 2020
},
...
③vue serve <vue file>でローカル鯖起動できればOK
あとで調べる
カスタムパーサ #とは
参考
Vueでプロジェクトを初期化したときのメモ
vue create <project-name>でVueプロジェクトを作成したとき、毎回同じところでハマっているのでいい加減手順をメモしておく。
構成は Vue+Firebase、UIにVuetifyを使用する（Vue 4系）。
あと、ついでにFirebase FunctionsではローカルのESLintを有効にする（グローバルインスコしない）。
手順
どうもVueで初期化したプロジェクトフォルダ内でfirebase initすると、Functionsのpackage.jsonとVueのpackage.jsonが競合（nodeモジュールが思ったところにインストールされない）してしまうため、frontendとbackendディレクトリに分けて構成した。
package.jsonがnode_moduleを走査するときの動作が影響しているような気がするけど、いまいち分からん。
…と思って検索したらこうすればよかった件。でもやっぱりめんどそうだな…( ˘ω˘)
手順少し修正。FunctionsとHostingを同一フォルダにインストールしようとしてたのがいけない…。
Firebase でプロジェクトを作成
Firebase コンソールでプロジェクトを作成する。
FunctionsやStorage等初期化しておく（reagionは
asia-northeast1（東京））
あとでindex.htmlに注入するHtmlスニペットはとりあえず脇に置いておく。
ローカルにプロジェクトを作成
前準備として、
frontendとbackend/firebaseディレクトリを作成するfrontendディレクトリにて、vue create <project-name>でVueプロジェクトを作成する。このとき、TypeScriptを選択しておく（あとから導入する場合）tsconfig.jsonにてcompilerOptions.module: "commonjs"とするとりあえず
npm run buildでビルドできることを確認する（distディレクトリが生成）vue add vuetifyでVuetifyを導入する。App.vue等書き換えるか聞かれるが、問題なければYesで。tsconfig.jsonにて、compilerOptions.types: ["vuetify"]を追加する。忘れると型定義を参照できないためコンパイル時にエラー吐く。backend/firebaseに移動し、firebase initでFirebase プロジェクトを初期化するFirebase コンソールにて作成したプロジェクトを選択する
とりあえずFirestore
とHostingとFunctionsを選択する。Hostingはfrontendディレクトリで初期化する。FuncitonsをインストールするときにTSLintを導入するか聞かれるが、現在はESLintに移行しているようなのでNoを選択する
ひととおりインストールが終わったら、
frontendディレクトリに移動し、firebase init hostingでホスティングをインストールするHostingの設定時にデプロイするディレクトリを聞かれるので、
distとする。このとき既存のファイルを上書きするか聞かれるが、Noとするfirebase serveでVuetifyの初期ページが表示されることを確認backend/firebase/package.jsonにてdevDependenciesにeslintの依存関係を追加し、npm i./node_modules/.bin/eslint --initでESLintを導入frontend/public/index.htmlの<body></body>内にFirebaseを利用するためのHtmlスニペットを記載する
以上で終わり。 ローカルの構築にトラップがありすぎる。これ全部覚えてるフロントエンドエンジニアつよすぎでは…。
