Publishing changes from background threads is not allowed; make sure to publish values from the main thread (via operators like receive(on:)) on model updates.
Swift UIのViewModelで @Published な変数をセットしている時にエラーが表示された 書いてあるとおり@Publishedな変数に値をセットするときにはメインスレッドで行う必要があるそうだ
代入するときにDispatchQueue.main.asyncで囲んでやればとりあえずヨサソウ
DispatchQueue.main.async {
self.publishedValue = 'hoge'
}
getDisplayMediaで画面共有中にブラウザの共有を停止をクリックしたときのイベントをハンドリングする
const localVideoStream = await navigator.mediaDevices
.getDisplayMedia({
video: {
height: 1080,
width: 1920
}
})
localVideoStream.getTracks()[0].addEventListener('ended', () => {
// ここで処理を記述
})
画面共有のstreamのtrackに対して endedのイベントリスナーを設定するとハンドリングできる
paper_trail gemを利用して更新履歴を保存する
Gemfileにgemを追加して bundle install
gem 'paper_trail'
generaterでpaper_trail用のDBを作るマイグレーションファイルを作成して db:migrateを実行
bundle exec rails generate paper_trail:install bundle exec rake db:migrate
作られるマイグレーションファイルはこんな感じ
# This migration creates the `versions` table, the only schema PT requires. # All other migrations PT provides are optional. class CreateVersions < ActiveRecord::Migration[6.0] # The largest text column available in all supported RDBMS is # 1024^3 - 1 bytes, roughly one gibibyte. We specify a size # so that MySQL will use `longtext` instead of `text`. Otherwise, # when serializing very large objects, `text` might not be big enough. TEXT_BYTES = 1_073_741_823 def change create_table :versions do |t| t.string :item_type, {:null=>false} t.bigint :item_id, null: false t.string :event, null: false t.string :whodunnit t.text :object, limit: TEXT_BYTES # Known issue in MySQL: fractional second precision # ------------------------------------------------- # # MySQL timestamp columns do not support fractional seconds unless # defined with "fractional seconds precision". MySQL users should manually # add fractional seconds precision to this migration, specifically, to # the `created_at` column. # (https://dev.mysql.com/doc/refman/5.6/en/fractional-seconds.html) # # MySQL users should also upgrade to at least rails 4.2, which is the first # version of ActiveRecord with support for fractional seconds in MySQL. # (https://github.com/rails/rails/pull/14359) # t.datetime :created_at end add_index :versions, %i(item_type item_id) end end
履歴管理したいモデルに has_paper_trail を追加
class Widget < ActiveRecord::Base has_paper_trail end
更新者をセットするようにapplication_controllerに追記 deviseなど使っていてcurrent_userが存在すれば以下だけでよい
class ApplicationController before_action :set_paper_trail_whodunnit end
コレでpaper_trailのセットアップは完了 次に紐づく関連テーブルの履歴管理もしたいのでpaper_trail-association_trackingを導入する
Gemfileにgemを追加して bundle install
gem 'paper_trail-association_tracking'
generaterでpaper_trail用のDBを作るマイグレーションファイルを作成して db:migrateを実行
rails generate paper_trail_association_tracking:install bundle exec rake db:migrate
作られるマイグレーションファイルはこんな感じ
# This migration and AddTransactionIdColumnToVersions provide the necessary # schema for tracking associations. class CreateVersionAssociations < ActiveRecord::Migration[6.0] def self.up create_table :version_associations do |t| t.integer :version_id t.string :foreign_key_name, null: false t.integer :foreign_key_id t.string :foreign_type end add_index :version_associations, [:version_id] add_index :version_associations, %i(foreign_key_name foreign_key_id foreign_type), name: "index_version_associations_on_foreign_key" end def self.down remove_index :version_associations, [:version_id] remove_index :version_associations, name: "index_version_associations_on_foreign_key" drop_table :version_associations end end # This migration and CreateVersionAssociations provide the necessary # schema for tracking associations. class AddTransactionIdColumnToVersions < ActiveRecord::Migration[6.0] def self.up add_column :versions, :transaction_id, :integer add_index :versions, [:transaction_id] end def self.down remove_index :versions, [:transaction_id] remove_column :versions, :transaction_id end end
生成されたinitializerを更新 config/initializers/paper_trail.rb
PaperTrail.config.track_associations = true
Nuxtプロジェクトに vue-qrcodeを使って現在のページのURLをQRコードで表示する
vue-qrcodeを使って現在のページのURLをQRコードで表示してみます
インストール
npm install @chenfengyuan/vue-qrcode vue
typescriptで使うため型定義もインストール
npm install @types/chenfengyuan__vue-qrcode
plugins/vueQrcod.tsを作成しコンポーネントを登録
import Vue from 'vue' import VueQrcode from '@chenfengyuan/vue-qrcode' Vue.component(VueQrcode.name, VueQrcode)
nuxt.config.tsに作成したpluginを追加
export default { //省略 ** Plugins to load before mounting the App */ plugins: [ '@/plugins/vueQrcod' // 追加 ], // 省略 }
これで利用する準備は完了 あとはQRコードを表示したいところに以下のように記述
<qrcode :value="url" :options="{ width: 200 }"></qrcode>
vue-movableを使って要素をdragで動かせるように
readme通りですんなり使える
デフォルトでstyleがあたってるのでそこだけ調整してdraggableだけ利用した
もともとv-dragを使っていたがこちらは移動する要素の子要素がクリックできんなくなったりして不便だったので載せ替えた
