長野エンジニアライフ

東京から長野に移住したエンジニアのブログです。🦒🗻⛰

VuetifyとPWAで色々やったときの備忘録

とりあえず

Vueプロジェクトの作成

$ vue create the-simplist

Vuetify、PWAの準備

$ vue add vuetify
$ vue add pwa

manifest.jsonの追加

/publics配下にmanifest.jsonを追加

{
  "name": "the-simplist",
  "short_name": "the-simplist",
  "icons": [
    {
      "src": "./img/icons/android-chrome-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "./img/icons/android-chrome-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "start_url": "./index.html",
  "display": "standalone",
  "background_color": "#000000",
  "theme_color": "#4DBA87"
}

firebaseにデプロイ

$ firebase init

上記コマンドを実行後、以下の手順で進む。

  • Hostingを選択
  • Use an existing projectを選択
  • 対象プロジェクト名を選択
  • What do you want to use as your public directory? distと回答
  • Configure as a single-page app (rewrite all urls to /index.html)? Yesと回答 ✔ Firebase initialization complete! とでてきたら完了

ワークフォルダでビルド実行

$ npm run build

firebaseへデプロイ実行

$ firebase deploy

動作確認

スマホからアクセスしてみた。

  • ホーム画面追加のダイアログ
    f:id:kawakeee:20200516134058p:plain f:id:kawakeee:20200516134110p:plain

  • ホーム画面のアイコン
    f:id:kawakeee:20200516134442p:plain

  • PWAで起動している画面
    f:id:kawakeee:20200516134503p:plain

  • PWA化されたサイトの画面
    f:id:kawakeee:20200516134627p:plain

ネィティブっぽくていいかんじ。　

ERROR Error: spawn yarn ENOENTの対応

Error

vue createしたら発生

事象

ERROR  Error: spawn yarn ENOENT
Error: spawn yarn ENOENT
    at Process.ChildProcess._handle.onexit (internal/child_process.js:232:19)
    at onErrorNT (internal/child_process.js:407:16)
    at process._tickCallback (internal/process/next_tick.js:63:19)

対応方針

vuercファイルを確認する

> car ~/.vuerc

packageManagerの設定がyarnになっている場合はnpmに書き換える

再度、vue create したらエラーは起きなくなった。

> vue create the-simplist

参考記事

qiita.com

VueプロジェクトのPWA化作業

VueCLIの用意

VueCLIが用意できていなかったので

npm install -g @vue/cli

既存のVueプロジェクトをPWA化

vue add @vue/pwawを実行

-> % vue add @vue/pwa
📦  Installing @vue/cli-plugin-pwa...
+ @vue/cli-plugin-pwa@4.3.1
added 63 packages from 23 contributors, removed 902 packages, updated 1 package, moved 41 packages and audited 1992 packages in 24.967s
32 packages are looking for funding
  run `npm fund` for details

found 100 vulnerabilities (76 low, 9 moderate, 14 high, 1 critical)
  run `npm audit fix` to fix them, or `npm audit` for details
✔  Successfully installed plugin: @vue/cli-plugin-pwa

🚀  Invoking generator for @vue/cli-plugin-pwa...
📦  Installing additional dependencies...

added 1 package from 1 contributor and audited 1993 packages in 13.669s
32 packages are looking for funding
  run `npm fund` for details
found 100 vulnerabilities (76 low, 9 moderate, 14 high, 1 critical)
  run `npm audit fix` to fix them, or `npm audit` for details
✔  Successfully invoked generator for plugin: @vue/cli-plugin-pwa

色々追加してくれた。

manifest.jsonの作成

/publics配下にmanifest.jsonを作成

{
  "name": "the-simplist",
  "short_name": "the-simplist",
  "icons": [
    {
      "src": "./img/icons/android-chrome-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "./img/icons/android-chrome-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "start_url": "././index.html",
  "display": "standalone",
  "background_color": "#000000",
  "theme_color": "#4DBA87"
}

index.htmlのhead要素に、manifestの参照を追加

<link rel="manifest" href="/public/manifest.json" />

動作確認で以下エラーがでた。 そもそもwebpackでvueプロジェクトを作成していたのでpwaで作り直してみる

Manifest: Line: 1, column: 1, Syntax error.

参考記事

kawadev.net

qiita.com

michimani.net

Error: Cannot find module 'sass' の対応

vue

事象

internal/modules/cjs/loader.js:583
    throw err;
    ^

Error: Cannot find module 'sass'
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:581:15)
    at Function.Module._load (internal/modules/cjs/loader.js:507:25)
    at Module.require (internal/modules/cjs/loader.js:637:17)
    at require (internal/modules/cjs/helpers.js:20:18)

vueプロジェクトにてnpm run devすると、Error: Cannot find module 'sass'と怒られた

対応

 npm install --save sass

もう一度npm run devしたらfibersがないと怒られたので

Error: Cannot find module 'fibers'

 npm install --save fibers

起動できた。

Vue.jsプロジェクトにて、e2eテストが失敗する

事象

> node test/e2e/runner.js

Starting selenium server... started - PID:  40935

[Login] Test Suite
======================

Running:  ログイン
{ parser: "babylon" } is deprecated; we now treat it as { parser: "babel" }.

Error retrieving a new session from the selenium server

Connection refused! Is selenium server started?

原因

不明

対応

node v10.にしてnode_modules入れ直すと動いた。

MNISTデータセットからモデルを作成する

PythonとKerasの勉強 Python Keras

MNISTデータセットについて

  • MNIST(Mixed National Institute of Standards and Technology database)
    手書き数字(0~9)が格納されたデータセット
    MNISTは、エムニストと読む

必要なモジュールを準備

  • jupyter
  • keras
  • tensorflow
> pip3 intstall jupyter keras tensorflow

データセットの読み込み

from keras.datasets import mnist
(train_images, train_labels), (test_images, test_labels) = mnist.load_data()

# 訓練データの確認
print(train_images.shape)
print(len(train_labels))
print(train_labels)

(60000, 28, 28)
60000
[5 0 4 ... 5 6 8]

60,000個の訓練データが存在する。手書きの画像データの大きさは28×28

# テストデータの確認
print(test_images.shape)
print(len(test_labels))
print(test_labels)

(10000, 28, 28)
10000
[7 2 1 ... 4 5 6]

10,000個のテストデータが存在する。画像の大きさは同じく28×28

ニューラルネットワークモデルの構築

# ニューラルネットワークモデルの構築
from keras import models
from keras import layers

network = models.Sequential()
network.add(layers.Dense(512, activation='relu', input_shape=(28 * 28, )))
network.add(layers.Dense(10, activation='softmax'))

何をしているかは後で調べる。

コンパイルステップ

# コンパイルステップ
network.compile(optimizer='rmsprop', loss='categorical_crossentropy', metrics=['accuracy'])

何をしているかは後で調べる。

画像データの前処理

#　画像データの前処理
train_images = train_images.reshape((60000, 28 * 28))
train_images = train_images.astype('float32') / 255

test_images = test_images.reshape((10000, 28 * 28))
test_images = test_images.astype('float32') / 255

(60000,28,28)の3次元データを(60000,784)の2次元データに変換

ラベルの準備

# ラベルの準備
from keras.utils import to_categorical

train_labels = to_categorical(train_labels)
test_labels = to_categorical(test_labels)

0~9のラベルの値をone-hotエンコーディングする。

ニューラルネットワークモデルの学習

# ニューラルネットワークモデルの学習
network.fit(train_images, train_labels, epochs=5, batch_size=128)

Epoch 1/5
60000/60000 [==============================] - 1s 19us/step - loss: 0.2561 - accuracy: 0.9261
Epoch 2/5
60000/60000 [==============================] - 1s 18us/step - loss: 0.1060 - accuracy: 0.9680
Epoch 3/5
60000/60000 [==============================] - 1s 18us/step - loss: 0.0704 - accuracy: 0.9787
Epoch 4/5
60000/60000 [==============================] - 1s 18us/step - loss: 0.0511 - accuracy: 0.9844
Epoch 5/5
60000/60000 [==============================] - 1s 18us/step - loss: 0.0384 - accuracy: 0.9884

lossは損失値、accは正解率を表す。

テストデータによる精度確認

# テストデータによる精度確認
test_loss, test_acc = network.evaluate(test_images, test_labels)
print('test_acc:', test_acc)

10000/10000 [==============================] - 0s 19us/step
test_acc: 0.9790999889373779

以上、MNISTデータセットを判定するモデルを作成した。

github.com

nbviewer.jupyter.org

FOSSASIA Summit 2020 Singaporeで発表しました！

イベント エンジニア

FOSSASIA

先日、自転車盗難LINEBotについて、FOSSASIA Summit 2020 Singaporeで発表しました。振り返りのため記事にしました。 summit.fossasia.org

FOSS ASIAについて

FOSS：Free Open Source Softwareの略で、開発者とベンダーやユーザの繋がりを生むのを目的とするイベント。 スピーチ、ワークショップや、ポスティングなどの展示があり、OSSであることに重きを置いており、テーマ（Hard Ware/AI/Cloud/...etc）は多岐に渡る。

コロナ影響によるオンライン参加

CFPが受理されてスピーカーとして現地シンガポールで登壇する予定でした。

しかし、フライト数日前にコロナウィルスの影響により渡航者の隔離要請が発令され、シンガポールに到着できてもホテル待機になってしまうため、現地参加することはできませんでした。

ただ、運営の方達が参加できなくなったスピーカの、タイムスケジュールを確保してくれており、オンラインで発表することができました。当日の会場では、YouTube上で各スピーカのプレゼン動画がタイムスケジュールごとに同時再生されました。質疑応答についてはリアルチャットで実施されました。

実際のプレゼン内容

www.youtube.com

スライド内容

speakerdeck.com

振り返り

人生初の英語のCFP・プレゼンから、自分の英語力の無さを改めて痛感しました。（資料作成より、メールのやりとりが一番しんどかった。旅程作成してくれ→それを送付してくれなど）

ただ、英語で発信すれば自分の作品を世界中にアピールできる事を改めて感じたイベントでした。今後は、技術ネタを勉強しつつ、英語も勉強していこうと思います。

自転車盗難推測LINEBotについての解説記事はこちら

kawakeee.hatenablog.com

kawakeee.hatenablog.com

kawakeee.hatenablog.com