日々是好日

プログラミングについてのあれこれ、ムダ知識など

Vueでプロジェクトを初期化したときのメモ

Vue Vuetify

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を走査するときの動作が影響しているような気がするけど、いまいち分からん。

…と思って検索したらこうすればよかった件。でもやっぱりめんどそうだな…( ˘ω˘)

www.it-swarm.dev

手順少し修正。FunctionsとHostingを同一フォルダにインストールしようとしてたのがいけない…。

Firebase でプロジェクトを作成

  1. Firebase コンソールでプロジェクトを作成する。

  2. FunctionsやStorage等初期化しておく（reagionはasia-northeast1（東京））

あとでindex.htmlに注入するHtmlスニペットはとりあえず脇に置いておく。

ローカルにプロジェクトを作成

  1. 前準備として、frontendとbackend/firebaseディレクトリを作成する

  2. frontendディレクトリにて、vue create <project-name>でVueプロジェクトを作成する。このとき、TypeScriptを選択しておく（あとから導入する場合）

  3. tsconfig.jsonにてcompilerOptions.module: "commonjs"とする

  4. とりあえずnpm run buildでビルドできることを確認する（distディレクトリが生成）

  5. vue add vuetifyでVuetifyを導入する。App.vue等書き換えるか聞かれるが、問題なければYesで。

  6. tsconfig.jsonにて、compilerOptions.types: ["vuetify"]を追加する。忘れると型定義を参照できないためコンパイル時にエラー吐く。

  7. backend/firebaseに移動し、firebase initでFirebase プロジェクトを初期化する

  8. Firebase コンソールにて作成したプロジェクトを選択する

  9. とりあえずFirestoreとHostingとFunctionsを選択する。Hostingはfrontendディレクトリで初期化する。

  10. FuncitonsをインストールするときにTSLintを導入するか聞かれるが、現在はESLintに移行しているようなのでNoを選択する

  11. ひととおりインストールが終わったら、frontendディレクトリに移動し、firebase init hostingでホスティングをインストールする

  12. Hostingの設定時にデプロイするディレクトリを聞かれるので、distとする。このとき既存のファイルを上書きするか聞かれるが、Noとする

  13. firebase serveでVuetifyの初期ページが表示されることを確認

  14. backend/firebase/package.jsonにてdevDependenciesにeslintの依存関係を追加し、npm i

  15. ./node_modules/.bin/eslint --initでESLintを導入

  16. frontend/public/index.htmlの<body></body>内にFirebaseを利用するためのHtmlスニペットを記載する

以上で終わり。 ローカルの構築にトラップがありすぎる。これ全部覚えてるフロントエンドエンジニアつよすぎでは…。

参考

qiita.com

qiita.com

PowerShellスクリプトでbuild.gradleをオレオレ記述化

PowerShell Gradle Android

Android Studioでプロジェクトを初期化したときに生成されるbuild.gradleをオレオレ記述化したのでメモ。

書き換える動機はこちらの記事が基です。

android.benigumo.com

今まで手動で直していましたが、あまりにもめんどうだったのでテンプレート化してみました。 なお筋肉で解決しているので、ps1ファイルに処理べた書きです。必要に応じ function に切り出し等行ってください。

続きを読む

Firebaseの初期化でハマった

Firebase Vue TypeScript

Firebaseの初期化でめちゃくちゃハマったのでメモ。

ネット上をさまよったが、どうもFirebaseの新旧のバージョンで書き方が変わったため、かなり情報がごちゃごちゃになってるっぽい。

  • 環境
  • 何ができなかったのか
  • 何が原因だったか
  • どうやって解決したか
    • コード上でFirebaseを初期化する
  • 所感
続きを読む

CLIP STUDIO PAINTファイルからプレビュー画像を生成する

Node.js TypeScript CLIP STUDIO PAINT SQLite VSCode

CLIP STUDIO PAINT ファイル（.clip）のプレビュー画像を node.js で出力したのでメモ。

なお、fs.readFileSync/writeFileSyncを使用しているが、 テスト用に記述してるだけなので、実装する場合はfs.readFile/writeFile推奨。

  • コード
  • 解説
    • clipファイルの読み込み
    • SQLiteのデータの位置を探索
    • SQLiteの展開とpngの書き出し
  • 感想
  • 参考
続きを読む

VSCode実践ガイドでWebアプリ開発環境を作ってみた

VSCode TypeScript Vue Webアプリ

森下様の著書「Visual Studio Code 実践ガイド」をフラゲ（）したので、 本書に従い初めてVue.js＋TypeScriptで開発環境を作ってみました。

gihyo.jp

  • Vueでの開発環境構築なんてコマンドライン一発でしょ？
  • 環境構築
    • フォルダ構成
    • tscの導入
    • その他のパッケージのインストール
    • tsconfig.jsonの生成
    • tslint.jsonの生成
  • 感想
続きを読む

MVVM+DataBinding+RecyclerViewでカレンダーを作る - 1

MVVM Data Binding RecyclerView カレンダー Android

2021年7月12日　追記

RecyclerView.AdapterのアイテムにDataBindingを用いるため、コンストラクタで LifecycleOwner (FragmentのviewLifecycleOwner) を渡すのは誤った実装でした。

stackoverflow.com

発見に至った経緯

まったく別のアプリ開発でLifecycleRegistry.java内のObserverWithState.dispatchEventを確認していたところ、newState = event.getTargetStateにて、本来生きているはずの親FragmentのON_DESTROYが渡ってきていました。

static class ObserverWithState {
    State mState;
    LifecycleEventObserver mLifecycleObserver;

    ObserverWithState(LifecycleObserver observer, State initialState) {
        mLifecycleObserver = Lifecycling.lifecycleEventObserver(observer);
        mState = initialState;
    }

    void dispatchEvent(LifecycleOwner owner, Event event) {
        State newState = event.getTargetState();
        mState = min(mState, newState);
        mLifecycleObserver.onStateChanged(owner, event);
        mState = newState;
    }
}

ハッと、binding.lifecycleOwner = parentLifecycleOwner (実体はviewLifecycleOwner)を渡していたことを思い出しググってみたところ、上記の記事を発見したところです。

RecyclerView+DataBindingはどうすればいいんでしょうかね……。

以下、ご参考まで。

RecyclerViewでカレンダー風の表示を作ったので、備忘録的なまとめその１。 MVVM+DataBinding でViewに表示させるまでです。

  • 発見に至った経緯
  • できるもの
  • 使用した技術的なモノ
  • 項目を sealed class で用意する
    • sealed class Content の定義
  • データバインディングレイアウトファイルの作成
  • CalendarActivity の定義
  • CalendarActivityViewModel の定義
  • CalendarAdapter の定義
  • RecyclerView の拡張関数の定義
  • CalendarFragment の定義
    • レイアウトファイルとバインド
    • Fragment の定義
  • GitHub
続きを読む