もっさり日記

だらだらと。

【vue.js】やってて色々覚えたこと。

最近vue.jsを勉強し始めて案件にもこっそり採用しました。
色々とハマったりもしたけど快適になってきた。
サヨナラKnockout.js(`;ω;´)

1.地味にハマったビルド時のパス
単体.vueファイルとかビルドされると読み込まれるけど、リリース時に
出力先設定しとかんと /js/xxxxx.jsとかになって読み込めない場所だったりする。
vue.config.jsに下記設定でとりあえず回避

baseUrl: process.env.NODE_ENV === 'production' ? '././' : '/'

あとでかく。

【Firebase】Hosting & Realtime Database

ちょっと興味があったのでHostingとRealtimeDatabaseを利用してチャットを作成しました。
ドキュメントを読んで勉強してある程度動くまでで5時間程度
ついでにPWAの設定をいれてスマホのホーム画面にアイコン置けるようにもしました。
所々ハマったりもあったのでメモ程度に残しておきます。

・Firebaseの導入
参考サイトは沢山あるのでそちら参照してください。

Google認証の導入
最初はポップアップ型にしてたのですがポップアップブロックされて面倒なので
リダイレクト型にしました。
その際、何も考えずに作ったら無限ループしてしまって悲しみ。
下記のサンプルのまんまで正常に動くようになりました。
github.com

・PWAの導入
下記サイト参考にさくっといけました。
qiita.com

ちなみにアイコンは下記サイトで生成、なかなか( ・∀・)イイ!!
hatchful.shopify.com

こんなアイコンが秒速でつくれました(*´∀`*)
f:id:kaipu1224:20190111112437p:plain

・チャットデータの同期
昔チャット作った時は結構苦労したのですが、簡単にできすぎてヤバイですね。
チャットの削除とかはないので今回は追加時のみで大丈夫でした。

// コメントが投稿された時のコールバック
var chatDbRef = firebase.database().ref().child("chat");
chatDbRef.on("child_added", function(snapshot, key){
  // 1件単位で届くのでコメント一覧に適宜登録してく
}

・できあがった画面は以下の通り
ログイン画面
f:id:kaipu1224:20190111113641p:plain

チャット画面(テストに付き合ってもらった友人の情報は隠させてもらいます。)
f:id:kaipu1224:20190111113622p:plain

機能面はまだ全然足りてないですが、徐々に増やして遊びたいと思います。

【サンタ】出動準備

今年も全国のサンタさんたちが慌てる時間ですね。
下の子が今年はlolサプライズとかいうえげつないものをご所望です。
話しぶりからするとサンタの正体に気づきながらもサンタを信じる子を
演じているようで将来が怖いです。

公式サイト見る限りこれ、高いガチャガチャよね・・・。
www.takaratomy.co.jp

【Switch】もうすぐ・・・

Switch版Diablo3が発売になります。
海外だともう発売されてるけどね。
友人は海外版を購入して毎日楽しんでいるようで羨ましいw

初代が1997年発売なのでもう21年経つのか…
その頃に知り合った人で今も連絡取ってるのは数名になってしまった。
当時高校生だったけどお互いもう既婚者で子持ちのおっさんです(`・ω・´)ゞ

Dia3はPC版発売日に上記の友人たちと始めたけど、バランスの悪さと
Dia2との剥離ですぐ辞めてしまったんだよなぁ
でも今回は色々拡張されて良くなってるようなので期待(´∀`∩)↑age↑

あ、スマブラも子どもたちとプレイ予定
家庭内戦争が起きそうです。

【iOS】SwiftでQRコード読取り

急ぎでサンプル作ってくれと言われて昨日から開始
先週末に話しが出てきて今週末に見せろとかひどい話だよ…。
XCode自体触るの6年ぶりくらいだからよくわからんちん。
Swift?初めて触ったよ(*´∀`*)
kotlinっぽいので思ったよりは触りやすかった。

【動作端末】
iPad mini(初代)
OS:9.3.5

【開発端末】
iMac(21.5-inch,Mid 2011)
OS:10.13.5
メモリ:4GB
会社のPCは全てポンコツです。

【開発環境】
IDEXcode 9.4
BaseSDK:iOS11.4
Target:iOS9.3
Swift:4.1

要件としてはiOS6で動くQRリーダー+サーバアプリだったんだけど
OSだけは新しくしてくれということでiOS9になるようお願い
そもそも端末買い換えろって話だけど昔大量に買った端末を有効活用したいんだと
使ってなかったのを数年後に無理やり活用とかホント多くて嫌になる。

ってことで、ソース

import UIKit
import AVFoundation

class ViewController:UIViewController{
  var session:AVCaptureSession? = nil
  var qrcodeText: UILabel? = nil

  override func viewDidLoad(){
    super.viewDidLoad()
    // デバイスの取得、今回はフロントをメインに使いたい
    ver targetDevice:AVCaptureDevice? = nil
    let devices = AVCaptureDevice.devices()
    for device in devices {
      if device.position == AVCaptureDevice.Position.front {
        device = device
        break
      }else{
        device = device
      }
    }

    // セッションの初期化とか
    session = AVCaptureSession.init()
    // 入出力の初期化とか色々
    let input = try? AVCaptureDeviceInput.init(device:device!)
    let output = AVCaptureMetadataOutput.init()
    session?.addInput(input!)
    session?.addOutput(output)

    output.setMetadataObjectsDelegate(self, queue: DispatchQueue.main)
    output.metadataObjectTypes = [AVMetadataObject.ObjectType.qr]

    // プレビューの初期化とか
    let preview = AVCaptureVideoPreviewLayer.init(session:session!)
    preview.videoGravity = AVLayerVideoGravity.resizeAspectFill
    preview.frame = CGRect(x:0,y:0,width:self.view.frame.size.width, height:self.view.frame.size.height)
    self.view.layer.insertSublayer(preview, at:0)

    // QR読取り結果の表示領域設定
    qrcodeText = UILabel.init(frame:CGRect(x:20,y:20,width:450,height:26))
    qrcodeText?.text = "QR読込結果"
    qrcodeText?.backgroundColor = UIColor.white
    qrcodeText?.textColor = UIColor.black
    self.view.addSubview(qrcodeText!)

    // カメラセッション開始
    session?.startRunning()
  }
  override func didReceiveMemoryWarning(){ super.didReceiveMemoryWarning() }
}
// キャプチャ結果のデリゲート
extension ViewController:AVCaptureMetadataOutputObjectsDelegate {
  func metadataOutput(_ output:AVCaptureMetadataOutput, didOutput metadataObjects:[AVMetadataObject], from connection:AVCaptureConnection) {
    for data in metadataObjects {
      if data as? AVMetadataMachineReadableCodeObject {
        // 結果をラベルに書き出し
        qrcodeText?.text = data.stringValue
      }
    }
  }
}

色々なサイトを参考にしたけど記述が古いのかビルドが通らないこと多くて苦戦した。
下記みたいなのとか。

let videoDevice = AVCaptureDevice.defaultDevice(withMediaType: AVMediaTypeVideo)

ちかれた。

【世界樹X】プレイ日記2

ちまちま進めてます、はい。

先日、第7迷宮3Fに到着
平均レベルは43とちょっと上がりすぎかな?
マスタースキルが習得できるようになってやっとインペリアルが本領発揮し始めましたw
FOE駆除が大分楽になったのは良いことですね。

とりあえず思ったこと。
・ドライブ撃たないペリはペリじゃない
・航海皇女すごすぎる(胸元が)