フロントエンド をVue.jsのフレームワークのNuxt.jsを使用し、バックエンドをRuby on Railsの環境構築の手順を説明します。 今回の記事ではNuxtとRailsの環境構築とaxios通信をして「Hello Rails」を出力するところまでを実装します。 ディレクトリの作成 環境構築(Rails) database.ymlを編集します。 PG_USERNAMEとPG_PASSWOR […]
sqfliteを使用するために必要なパッケージ 追加できたら「Pub get」でインストールする データベースの作成 DatabaseConnection().setDatabase()でデータベースを作成できます。 データベースの削除 もしデータベースのSQLを間違えて記述してしまった場合は deleteDatabase(データベースへのパス)でデータベースを削除できます。 上記のようにコードを […]
少し前にボタンが一新されサイズの指定方法が異なったので備忘録として残します。 以前までのボタン ボタンのサイズを変更するにはButtonThemaウィジェットで囲えばよかったです。 新しいOutlinedButtonウィジェットも同じようにButtonThemaで囲ってみます。 しかし横幅は変わりません。 結論 Styleプロパティで指定 styleプロパティでminimumSizeを指定してあげ […]
個人開発中にドラッグアンドドロップを使用してドラッグのした要素をある対象の上にドロップすると要素が消えるというものを実装しようとしたのですがかなり苦戦したので備忘録として残しておきます。 下記のようなイメージです。 ドラッグアンドドロップ まずDraggableの公式ドキュメントをみます。 Draggable: https://api.flutter.dev/flutter/widgets/Dra […]
前回NuxtプロジェクトにESlintを導入したので今回はRailsプロジェクト側も同じような静的解析のツールであるrubocopを導入します。 github: https://github.com/rubocop/rubocop 前回の記事: 既存のNuxtプロジェクトにESLintを導入する方法 rubocopインストール gemfileにrubocopを記述します。開発環境のみチェックすれば […]
新規にNuxtのプロジェクトを導入する際にESLintを使用するように設定する方法の記事はいくつかあったのですが、既存のNuxtプロジェクトにESLintを導入する手順についての記事が少なかったのでその方法についてまとめます。 ESLintとはjavascriptのための静的解析ツールです。Railsでいうところのrubocopにあたります。 このツールを使用することで開発プロジェクトのコードを一 […]
前回の記事でNuxt とFirebaseを使用したユーザー認証ができたので、今回の記事ではRailsの方でもユーザーの認証を行っていきます。 前回の記事はこちら: Nuxt + Rails + Firebase ユーザー登録 (Nuxt編) 今回使用するgemはfirebase-auth-railsです。 https://github.com/penguinwokrs/firebase-auth- […]
FlutterにFirebaseを導入する際に公式のドキュメントを進めながら実装していくと Undefined name ‘Firebase’. というエラーが出ます。 公式ドキュメントはこちら: Flutter アプリに Firebase を追加する 原因はpubspec.yamlに追加する firebase_core と cloud_firestore のバージョンが古 […]
flutterを使用してfirebaseのデータを取得しようとしましたが、androidのビルド時にエラーが発生しハマったので備忘録として解決方法を記述します。 エラーは下記 まずこのエラーが ‘com.tns.youtube_app’ というpackage name が 一致していません。という内容 ここに早く気づくべきでした。 いろいろ調べていると下記記事にヒット。 h […]
今回はユーザーの認証をfirebaseを使用して行います。 もしまだCRUDの機能を実装していない方は環境構築だけ先にしてこの記事に戻ってくることをオススメします。 Nuxt Rails環境構築 Firebaseとは Firebase は Google が提供しているモバイルおよび Web アプリケーションのバックエンドサービスです。 https://www.topgate.co.jp/fireb […]
この記事ではvueの基本的な記述についてまとめています。 完全vue初心者の方は公式のドキュメントを一度さらっとみてからこの記事に戻ってくることをオススメします。 Vue.jsドキュメント: https://jp.vuejs.org/v2/guide/index.html 公式でもいきなりvue-cliで始めるのではなくcdnで学習することを推奨しています。 注意点として、初心者が vu […]
