エンジニアの卵の成長日記

ふわっちで配信してますhttps://whowatch.tv/profile/w:kurowasi2525

IT研修でVuePress+Express+Nuxt on Dockerでシステムを作成した話

前回の投稿から1ヵ月...

入社して1ヵ月が経ち,現在はIT研修を受けている日々.

今回は,そのIT研修で作成したブログシステムについて話していく.

最終成果物はこちら

ソースコードGitHubこちら

youtu.be

この記事で話す内容

  • このシステムはどんな構成で,どういう形で動いているのか
  • これを作成するに当たり,ぶつかった大きな4つの壁
    • リアルタイム性のあるDocker環境を作成できない
    • Docker環境で立ち上げたNuxtがホスト側からアクセスできない
    • VuePressのサイドバーは自分で設定しないといけない
    • Windows特有のDockerエラー
  • このシステムを作ってみて,わかったことなど所感

課題

IT研修の課題で,2週間でブログシステムを作成するというものがあった.

条件は以下の2つ

  • 記事を閲覧する画面(ユーザ用)、記事を登録・編集・削除画面(ログイン有の管理者用)
  • HTML/CSS/JavaScriptjQuery・Node.js・MS SQLを利用する

技術構成

f:id:kurowasi2525:20180429172257p:plain

VuePress Express Nuxt
Docker press press nuxt
ポート 8080 3000 8888
機能 記事画面 API 管理画面

VuePressで記事を表示

Nuxtで管理画面を表示し,記事を登録した際に,ExpressにPostして,

ExpressがVuePressのdocsにフォルダと記事の内容が書いてあるREADME.mdを作成.

編集画面を開くと,NuxtからExpressにGetし,ExpressがVuePressのdocsフォルダから情報を取得.

という流れ.

フォルダ構成

root/
├ docs/ ←VuePress
│     ├ .vuepress/
│     │      ├ public/
│     │      └ config.js
│     ├ about/←記事
│     ├ back/  ←記事
│     └ README.md
│ 
├ nuxt/ ←Nuxt
│     ├ Nuxtのフォルダなど(省略)
│     └ Dockerfile
│ 
├ docker-compose.yml
├ Dockerfile
└ index.js ←Express

リアルタイム性のあるDocker環境を作成できない

最初は,DockerfileでホストのrootをDocker環境にCOPYコマンドでコピーを行っていた.

しかし,これだと複数の問題点がある.

  • ホスト側を修正してもDocker側には影響がないため,コンテナを立て直す必要がある

   ※これだと毎回コンテナが立ち上がる時間を待つ必要があり,結果をすぐ見ることができない.

  • Docker環境側のファイルを修正する

   ※これだとコンテナを落とすと編集したものが消えてしまう.

    解決策としてDocker環境のファイルをホスト側にコピーする.

    これはとてもナンセンス

解決策

マウント機能を使う.

docker-compose.yml内で
volums:
 - ホスト側:Docker側

Dockerコマンドの引数で指定できるみたいだが,面倒だったのでDocker Composeを導入した.

Dockerfile

FROM node:9.1.0

RUN useradd --user-group --create-home --shell /bin/false app

ENV HOME=/home/app

COPY package.json $HOME/press/
RUN chown -R app:app $HOME/*

USER app
WORKDIR $HOME/press
RUN yarn

CMD ["yarn", "start"]

docker-compose.yml

version: "3"
services:
  press:
    build: .
    ports:
      - '8080:8080'
      - '3000:3000'
    volumes:
      - .:/home/app/press
      - /home/app/press/node_modules
    container_name: 'press'

Node.jsでの開発の主流?はこういう流れっぽい(適当)

  1. ホスト側のpackage.jsonをDocker環境へコピー
  2. Docker環境内でpackage.jsonに記述されているモジュールをインストール (npm install)
  3. Docker環境下にホストの環境をマウント
  4. node_modulesがホスト側に作成されないように,volumesでDocker環境内に閉じ込める

Docker環境で立ち上げたNuxtがホスト側からアクセスできない

Docker環境でNuxtを立ち上げると,ちゃんと127.0.0.1:3000で立ち上がったと出てくる.

しかし,ホストで立ち上げたようにブラウザにlocalhost:3000にアクセスしても表示されない...

解決策

127.0.0.1は自分のIPを指してる(詳しくは調べてね)ので,Dockerfileに0.0.0.0を設定してあげる.

実際のNuxt用のDockerfile

FROM node:9.1.0

RUN useradd --user-group --create-home --shell /bin/false app

ENV HOME=/home/app

COPY package.json $HOME/nuxt/
RUN chown -R app:app $HOME/*

USER app
WORKDIR $HOME/nuxt
RUN yarn

ENV HOST 0.0.0.0

CMD ["yarn", "dev"]

※追記 2018年5月3日

Nuxt on Docker for Windowsの場合,ホットリロードがうまくいかない.

なので,nuxt.config.jsに記述してあげる必要がある.

  watchers: {
    webpack: {
      poll: true
    }
  }

VuePressのサイドバーは自分で設定しないといけない

VuePressは,サイドバーに表示する内容を,root/docs/.vuepress/config.jsに書き込まないといけない.

でも,今回は管理者画面からフォルダとREADME.mdを作成するというものになっているため,

サイドバーに表示する内容は自動で行う必要がある.

解決策

サイドバーの情報をArray型の変数にする.

その変数に,ディレクトリ情報を取得して,名前を入れていく形

config.js

const fs = require('fs');
const path = require('path');

var dirpath = "./docs"
var dirs = fs.readdirSync(dirpath).filter((f) => {
  return fs.existsSync(dirpath + "/" + f) && fs.statSync(dirpath + "/" + f).isDirectory()
})

let sidebarItems = ((dirs) => {
  let items = ['/']
  dirs.forEach((d, index) => {
    if (d !== '.vuepress' && d !== 'admin') {
      items.push('/' + d + '/')
    }
  })
  return items
})(dirs)

module.exports = {
  title: 'Death March',
  description: '社内ドキュメントを管理',
  themeConfig: {
    sidebar: sidebarItems,
    nav: [
      {
        text: 'about',
        link: '/about/',
      },
      {
        text: 'admin',
        link: 'http://localhost:8888'
      }
    ],
  }
}

Windows特有のDockerエラー

エラー

ERROR: Service 'press' failed to build: Get https://registry-1.docker.io/v2/: net/http: request canceled while waiting for connection (Client.Timeout exceeded while awaiting headers)

解決策

  1. タスクバー?のDockerアイコンを右クリック
  2. Settings...をクリック
  3. Networkタブに移動
  4. DNS ServerをFixedにチェック
  5. 8.8.8.8に設定

他にも,何のエラーが出るのか忘れたが,DaemonタブのExperimental featuresにチェックが入っていると,

これもWindows特有の悪さをするみたいなので,チェックを外しておこう.

所感

Dockerについて

2週間という期間があったが,1週間はDockerの勉強,残りの5日はDocker環境の構築での躓きに費やす形だった.

そのおかげで,Dockerに関する知識は相当付いたと思う.

これからDockerを勉強する人におすすめすることは,とにかく触ること.

Dockerの入門書やサイトを見ても,あまり得られるものはない.

とにかく自分が作りたい環境に近いものを作っているサイトを見つけ,Dockerfileをコピペし,

動く環境を作り,Dockerfileをコメントアウトなどして,動きを確かめる方がいいと,今回の作成を通した感じた.

一度Dockerfileを作成してしまえば,どんな環境でもすぐにコマンド一つで立ち上げることができ,

ホスト環境でやっていた開発環境と全く同じように開発できるので,本当に便利だと感じた.

VuePressについて

vuepressをインストールして,docsディレクトリにREADME.mdファイルを作成するだけで,

それっぽいドキュメントサイトが作れる.

本当に手軽で感動するので,一度は触って欲しい(2時間もあれば,誰でも完全に理解した状態)

英語なのは残念だが,とりあえずVuePressの公式サイトのガイド部分をコピペしまくれば,ある程度動きがわかる.

それでもわからない部分はVuePressの公式サイト自体のソースコードGitHubに上がっているので読む.

これである程度のことはできるようになる.

後,細かいことをしたければConfig ReferenceとDefault Theme Configを頑張って読もう.

Vue.js, Nuxt

ソースコードを見てもらうとわかるが,(root/index.html)

最初は,Vue.jsをトランスパイルせずに使っていた(初めてのこと)

そこから,Nuxtへ移行をしたのだが,とてもすんなり行き感動した.

Vue.jsのProgressive Frameworkの一部分を感じた気がした.

これはとても面白い体験で,未だにjQueryが使われているプロジェクトがあり,

それを今風に変えていきたいなら,Vue.jsをお勧めする.

jQuery→Vue.js→単一ファイルコンポーネント

の順にリファクタリングしていくのが,いいのではないだろうか.

まとめ

今回の課題は,2週間でブログシステムを作成するというものだったが,新しい知識を利用したり,

なぜか,新卒なのに開発フローの改善を提案するために,Slackの運用ルール作成したり,新開発フローを作成したり,

課題とは違うことにも,たくさんの時間を使うことになってしまったが,無事完成させることができた.

新しい知識に時間を使いすぎて,会社の人に怒られてしまったが,今回の課題はDockerfileを使う側から作る側にもなれるようになったし,

VuePressという、まだ情報が少ないものを使うこともできたし,とてもエンジニアらしい感じのことができて満足でした.

どんどん新しい知識を入れていきたいと思います.

このシステムはさくらのDockerホスティングのArukasか,さくらのVPS(いつものやつ)に近いうちにあげたいと思ってます.

質問・ご意見などありましたら,Twitterにご連絡ください.

今回のソースコードはこちらにあります.(jQueryなどを使用しているのは,僕の意志ではありません...)

(僕が自由に最新技術を追うことを許してくれる会社さんはいないのだろうか...)

もしよろしければ、Twitterのフォロー、Kyashお願いします!

twitter.com

f:id:kurowasi2525:20180616200734j:plain

github.com

Nuxt.js+Firebase Cloud Messaging(FCM)を使ったPWA化が簡単で衝撃的だった

※この記事は,3時間書けて作成していたが,ミスで保存できていなかったので,一から作り直したため,
やる気がなくなり雑になっています.


概要

Nuxt.jsで作ったシステムをPWA化させた.

PWA化を実装してみて,PWAの素晴らしさ・Nuxt.jsの素晴らしさが更にわかったので伝えたい!

そして,Nuxt.js+Firebase Clouds Messaging(以下,FCM)に関する記事が少なかったため,実装方法を書いていく.


背景

上記で説明したVIROというシステムは,友達に既に使って貰っている.

そこで出てきた文句として,

  • 毎回ログインすることが面倒
  • ブラウザの上下が邪魔(URLを入力する部分,戻るボタンや他のタブを表示するボタン)
  • プッシュ通知が欲しい

などなど...

スマホアプリのような機能が欲しいというのが基本的だった.

どう対応するか悩んでいたところ,小学校の同級生がPWAについて推していたことを思い出した.

調べてみると簡単に実装できそうだったので,PWA化した.


PWAとは?

Progressive Web Appsの略称で,WebサイトでスマホアプリのようなUXを実現させるというもの.

Web Applicationのその先という感じですかね.

PWAの代表的な例としては,

  • オフライン対応
  • ホーム画面に追加
  • プッシュ通知

などがある.


PWAの利点は?

自分が実装してみての利点は,WebAppを作成するだけで,ある程度アプリ層までも作れるということ.

Web技術でネイティブアプリのようなものを作る技術は前からあったと思う.(Monacaなど)

でも,学習コスト・実装コストは高く,SwiftやKotlinを勉強した方がよくねって思ってしまう.

しかし,PWA化は学習コスト・実装コストが低いためおすすめである.

そして,使ってもらう側の一番の利点は,ダウンロード不要ということが一番だと思う.


※PWAの利点や詳しい内容は以下のサイト見てください.
qiita.com


Nuxt.jsとは?

Vue.jsの環境をいい感じにやってくれて,SSRが簡単にできる.

この記事を見ている方は,Nuxt.jsに詳しい方ばかりだと思うので省略.


オフライン対応・ホーム画面に追加

Nuxt.jsの場合,

PWAモジュールの追加

画像の追加

設定ファイルの修正

を行うだけで,PWA化ができる(あら簡単)

Introduction · Nuxt PWA Module

詳しい実装方法は,素晴らしい記事がたくさんあるので,以下のサイトを見てください.

speakerdeck.com

techblog.scouter.co.jp

www.sho-yamane.me


DBに関しては,Firebase Realtime Databaseを利用していたため,既にオフライン対応している.


プッシュ通知対応

プッシュ通知に関しては,Nuxt.jsがOneSignal用のモジュールがあるため,上記の記事を見てもらうとわかる通り,

OneSignalを使うのが一般的みたい.

Onesignal Module · Nuxt PWA Module

今回は,Firebase Realtime Databaseを利用していることやOneSignalは色々と面倒だったので,Firebase Cloud Messagingを利用することにした.


youtu.be


FCMは,

設定ファイルを書き,

10行ほど書けば,プッシュ通知を受け取る状態にできる.

後は,サーバ側からでもフロント側からでも内容を送信すれば通知が表示されるようになる.

Firebaseの公式から,実装方法の動画があるため,お兄さんの言う通りに書いていけば実装できる.

youtu.be


Firebaseへのプロジェクトの追加は,この記事では省く.

メッセージを受信するようにブラウザを設定する

manifest.jsonにハードコード値を指定するのだが,Nuxt.jsではnuxt.config.jsに記述する.

manifest: {
    "gcm_sender_id": "103953800507"
}

この値は固定なので,どんな人でもこの値になる.

上記の記事で,既にPWAを実装している場合,nameやtitle,lang,theme_colorなどのプロパティが記述されているはず.


Service Workerの設定

Nuxt.jsの場合,staticディレクトリにfirebase-messaging-sw.jsを作成する.

FCMでは,Service Workerのファイル名が決まっているみたい.(Service Workerをちゃんと理解できてない)

まず始めに,コンソールから送信者IDを取得する.

コンソール→プロジェクトの設定→クラウドメッセージングタブ

f:id:kurowasi2525:20180313023029p:plain

f:id:kurowasi2525:20180313023032j:plain

firebase-messaging-sw.js

importScripts('https://www.gstatic.com/firebasejs/4.0.0/firebase-app.js')
importScripts('https://www.gstatic.com/firebasejs/4.0.0/firebase-messaging.js')

const config = {
    apiKey: "",
    messagingSenderId: "コンソールから取得した送信者ID"
}

if (!firebase.apps.length) {
    const firebaseApp = firebase.initializeApp(config)
}

const messaging = firebase.messaging()


プッシュ通知の受信を実装

今回は,トップ画面で利用しているコンポーネントやpagesで実装した.

僕はcreated()内に実装.

const messaging = firebase.messaging()
messaging.requestPermission()
    .then(() => {
        console.log('Have permission')
        return messaging.getToken() //ユーザにプッシュ通知を表示する権限の許可を表示
    ]).then((currentToken) => {
        if (currentToken) {
            // プッシュ通知を受信し,表示できる状態
        }
    }).catch((err) => {
        console.log('Error Occurred.')
    })


これで実装完了.

後は通知を送るのみ.


プッシュ通知の送信

今回は,Firebaseのみで完結させたかったため,フロント側でデータベースのお知らせ情報が追加された場合,

自分に向けてプッシュ通知を送るという実装にした.

import firebase from 'firebase'

export default {
    created () {
        firebase.database().ref('notifications/' + uid).on('value', (snapshot) => { //この部分はFirebase Realtime Database部分
                const messaging = firebase.messaging()
                messaging.requestPermission()
                    .then(() => {
                        console.log('Have permission')
                        return messaging.getToken() //ユーザにプッシュ通知を表示する権限の許可を表示
                    }).then((currentToken) => {
                        if (currentToken) {
                            // この部分までは上記で実装しました.
                            // この部分はデータベースのお知らせ情報が追加などの修正がおきると呼ばれる
                            // 今回はこの部分に送信部分を記述していく
                        }
                    }).catch((err) => {
                        console.log('Error Occurred.')
                    })
        }
    }
}

プッシュ通知を送る場合,

プッシュ通知を送るためのURLに

受信者のトークンID

通知内容

送信者のサーバーキー(送信者IDの場所と同じ.コンソール→プロジェクトの設定→クラウドメッセージングタブ)

をPOST送信することで送信される.

if (currentToken) {
    let argObj = { // 受信者のトークンIDと通知内容
        to: currentToken,
        notification: {
            body: 'メッセージ内容'
            title: 'タイトル',
            click_action: 'クリックした際に開くURL',
            icon: 'アイコン'
        }
    }
    let optionObj = { //送信者のサーバーキー
        headers: {
            'Content-Type': 'application/json',
            'Authorization': 'サーバーキー'
        }
    }
    axis.post('https://fcm.googleapis.com/fcm/send', argObj, optionObj)
}


これで送信部分も実装できたと思う.


所感

今回の実装を通して,

Nuxt.jsやべー!

Firebaseすげー!

PWA最高!!!

ってなりました笑

オフライン対応やホーム画面に追加などは,Nuxt.jsの場合数分で実装できます.

本当にやらなきゃ損ってレベル.

Android端末を持っていないため,実装した時はさほど感動がなかったのですが,

友達のAndroid端末で利用した際に驚きを隠せませんでした.

ホーム画面に追加をすると,ホーム画面に追加されるわけではなく,

Androidアプリをダウンロードすると表示される,アプリ一覧の部分に追加されます.

アプリを消す際もアンインストールと表示され,起動時にはスプラッシュ画面が表示されます.

しかも全画面で表示されるので,見た感じは普通のアプリと変わらず,僕はWebAppだけじゃなく,アプリも作ったんだという錯覚と謎の感動・達成感がありました笑

Firebaseも数行で色々できて本当にすごいです.

通知が来た時の感動はやばかった...


結論

PWAに未来を感じた


※小言
あー

iOS11.3まだかなー

Android端末欲しいなー


もしよろしければ、Twitterのフォロー、Kyashお願いします!

twitter.com

f:id:kurowasi2525:20180616200734j:plain

npm startで複数のNode.jsのアプリケーションを立ち上げたい【Firebaseのバックアップ編】

結論

  • concurrentlyを利用する
  • -prefixを使う

例)package.json

"scripts": {
    "start": "concurrently \"npm -prefix ./1つ目のアプリのディレクトリ/ start\" \"npm -prefix ./2つ目のアプリのディレクトリ/ start\""
}

わからないことがあれば,Twitterに連絡ください.
twitter.com


経緯

Firebase Realtime Databaseを利用したシステムを最近作りました.
kurowasi2525.hatenablog.com

そこで,データベースの内容をバックアップ取りたいなーと思ったのですが,Blazeプラン(有料)じゃないと使えないみたい...
自動バックアップ  |  Firebase

無料で簡単な方法でやりたいと思い,調べてみました.

方法1

まず,初めにこちらの記事を発見.

www.sss3.co.jp

ちょっとやってみたのですが,自分の環境ではうまくいかなかったため,断念

方法2

次に,こちらを発見.

サーバーに Firebase Admin SDK を追加する  |  Firebase

この方法が一番簡単そうなので,これで行くことに決定.

let fs = require('fs')

let admin = require('firebase-admin')
let serviceAccount = require('秘密鍵')

admin.initializeApp({
  credential: admin.credential.cert(serviceAccount),
  databaseURL: "https://プロジェクトID.firebaseio.com"
})

setInterval(viroBackup, 5000)

function viroBackup () {
  let db = admin.database()
  db.ref('/').once('value', (snapshot) => {
    let now = new Date()
    let dirName = now.getFullYear() + '-' + (Number(now.getMonth()) + 1) + '-' + now.getDate()
    let fileName = now.getHours() + '_' + now.getMinutes() + '_' + now.getSeconds() + '_bk.json';
    if (!fs.existsSync(dirName)) {
      fs.mkdirSync(dirName)
    }
    fs.writeFileSync('./' + dirName + '/' + fileName, JSON.stringify(snapshot.val(), null, 4))
  })
}

こんな感じで完成.

でも,問題点が...

これをどうやって動かすか.

解決策1

Node.jsで動かせるやつないかなーって調べたら,nowというサービスを発見.

https://codeiq.jp/magazine/2017/10/54570/

使ってみたのだが,ディレクトリを作る権限が無くて失敗.

設定で出来るのかもしれないが,調べるのが面倒なので却下.

解決策2

AWSを利用する.

EC2は,金銭面で怖いので却下(知らないものは怖い).

AWS Lambdaを利用したのだが,バックアップを上手く取得できない.

qiita.com

Lambdaは,ファイル関係は向かないみたい...


解決策3

1月に作成したシステムが動いているさくらVPSで動かす.

でも,どうやって複数のサービスを動かせばよいのだろうか...

調べてみると,こちらの記事を発見.

qiita.com

これでよさそう!

でもどうやって,ディレクトリの違うNode.jsのプロジェクトを実行させれば良いのだろうか...

こちらの記事で解決できました.

npm で package.json がカレントディレクトリにない場合 - Please Sleep

JSのフレームワークを知らない人間がVue.jsを2ヵ月触ってみたって話

(この記事では,フレームワークとライブラリは同じとして扱います)

前書き

最後の更新が2017年9月26日...

10月~1月は卒業研究を主にやっており,バイトにもあまり行かず,自主勉強なども行っていなかったため,更新できませんでした.

しかし,1, 2月は時間が出来たので,Vue.jsを触ってました.


筆者はどんな人間?

僕は,大学1年生からプログラミングを始め,JavaScriptに触れJavaScriptを大好きになりました.

しかし,JavaScriptフレームワークは1つも使ったことがありません.

大学の先生からの
『流行りのフレームワークを使えることは良いこと.でも,フレームワークを作れる人間になりなさい.』
フレームワークを使ってる人は,台風の中にいる人.フレームワークの仕様変更,フレームワークの流行りに振る舞わされる.』
フレームワークを作る人間になり,台風の目にいなさい.そうすれば振り回されない』
という言葉が好きで,素のJavaScriptばかり使っていました.
(無駄な機能が入っているのが好きじゃなかった)

バイト先でjQueryプラグイン関係を使うことがあり,ある程度は読めますが,使いこなしているレベルではありませんでした.

そんな僕がVue.jsを触ったので,思ったことや,勉強の過程?,作ったものなどを書いていこうと思う.


なぜVue.jsを選んだ?

2017年の2月頃,ニコニコで配信している時に,リスナーさんにお勧めされたことがVue.jsを知るきっかけでした.

そこから約半年後の10月頃に,小学校時代の友達に10年ぶりに会うことになりました.

彼は,高校から独学でプログラミングを勉強し,現在はWeb系のフリーランスをやっています.

彼がすごいという噂は何度も聞いており,彼の職場と僕のバイト先が同じ渋谷であったため,仕事終わりに飲もうとなりました.

彼からReactの素晴らしさやVue.jsがこれから来るという話を聞かしていただき,

どうしても,JSのフレームワークを勉強したくなり,卒業研究ツールを現在流行っているフレームワークに対応する必要があるという言い訳を考え,

AngularとReactとVue.jsがどんなものかを軽く勉強しました.

理由は2017年でGithubでスターを多く貰っていたからというだけ笑

3つ触ってみて驚いたのは,トランスパイル,コンポーネント指向,仮想DOMです.

JSもわかるし,型で困ったことないからTypeScriptとかやる必要なくね笑.なんでわざわざコンパイルするんだよ笑と思ってた自分を殴りたくなりました.

HTML, CSS, JSを1つのファイルに書けたり,サイトをパーツごとに分けられるのも衝撃的でした.

その中でもVue.jsの最小構成から始められて,プロジェクトの規模ごとに必要な機能を追加していく.という考えに感動し,

Vue.jsを選びました.


1作品目

一番最初に作成したのは,DoCheckというサイトです.


フロント側はVue.js+Vuetify

バックエンドはNode.js(express)+MySQL

サーバはさくらVPS

です.




Vue.jsのリファレンスとVue.jsの例を数個やり,次にデザインテンプレートのライブラリを探し始めました.

とりあえず,なんでもよかったので一番最初に環境構築できたものを使おうと決め,その希望にかなったのがVuetifyでした.

この選択は間違っていなかったと思いますし,初心者は特に使った方が良いと思います.

Vuetifyのコンポーネントを組み合わせることで,それっぽいサイトができます.

加えて,Vuetifyにはコンポーネントごとにサンプルコードがたくさんあるので,コピペもでき,

サンプルコードごとの比較で,何が変わればどんな動きをするのかってのが,すぐわかります.

Vuetifyで得たデータバインディングの知識はVue.jsに使えます.(というかVue.jsの機能)

これにより,VuetifyをいじってるだけでVue.jsの知識がついてるって感じでした!



次に,ログイン機能を実装する時に,ルーティング機能が必要になり,vue-routerの勉強を始めました.

これもvue-routerの公式リファレンスなどを読み,動きを把握しました.

次に,コンポーネント間のデータの受け渡しを
chibinowa.net
こちら様のサイトを利用して,行っていました.

しかし,ログイン情報や様々なフラグ管理が面倒になり,Vuexの勉強を始めました.

色々なサイトを読みましたが,やはり公式リファレンスが一番良いと思います.


2作品目

二番目に作成したのは,VIROというサイトです.

こちらは,Nuxt.js + Firebaseで作成しました.

Nuxt.jsを利用することで,vue-routerの部分はフォルダの作成ルールに従えば良いだけなのですごい楽です.

Vuexに関しても今まで通りで使えます.


衝撃を受けたのはfirebaseです.

Hostingに関しては,json形式の設定ファイルを作成し,firebaseコマンドを打てば,勝手に送ってくれて公開できます.

独自ドメインも簡単に設定でき,httpsにも対応してくれます.

一番衝撃を受けたのは,firebase Authenicationです.

10行程度のコードを書くだけで,メール&パスワードでのログインが可能になり,

10行程度書けば,Twitterでログインできるようになります.

後は2行ほど追加すれば,GoogleFacebookにも対応できます.

Realtime Databaseに関しても簡単です.

保存するプロパティ名を指定して,後はオブジェクトを代入する形やpushする形でできます.



所感

2ヵ月Vue.jsを触ってみた感想としては,本当に学習コストが低いです.

ランディングページくらいならVue.jsだけで作成し,
複数のページが必要になったらvue-routerを利用し,
ログイン状態や複数のページで同じ情報を利用することになるのであればVuexを利用

など,本当に作成するものの規模間に応じて付け足して対応することができます.

HTML, CSS, JavaScriptが1つのファイルにできるので,ページごとや部品ごとに管理できるのは,本当に良いです.

適当に作っていても,後で読みやすくリファクタリングもしやすいです.

加えて,Firebaseは本当に神でした.

個人で何か軽いものを作るならFirebaseは本当にお勧めです.

Nuxt.js + Firebaseは爆速&無料で作れるので本当にお勧めです.


宣伝

DoCheck
仮想通貨の資産管理サイト

VIRO
実世界では誰かが払い,仮想の世界で割り勘をするサイト
複数回会うことの信頼を使って借金する感じです

ふわっちやニコニコでサイト作成の過程を放送してます
whowatch.tv
com.nicovideo.jp

Laravel+PostgreSQLでの異なる型のINNER JOINの方法

Laravelはデータベースクレリビルダってのがある

データベースクエリビルダはスラスラと書ける(fluent)便利なインターフェイスで、クエリを作成し実行するために使用します。アプリケーションで行われるほとんどのデーターベース操作が可能で、サポートしている全データベースシステムに対し使用できます。

こいつのおかげでSQL文を書かなくて済む

SELECT文とかもこんな感じで書ける

$users = DB::table('users')->select('name', 'email as user_email')->get();

今回問題のINNER JOIN文もこんな感じでかける

$users = DB::table('users')
->join('contacts', 'users.id', '=', 'contacts.user_id')
->join('orders', 'users.id', '=', 'orders.user_id')
->select('users.*', 'contacts.phone', 'orders.price')
->get();

今回ぶち当たった壁は違う型でのINNER JOINする方法

上記の例の場合、usersテーブルのidがint8・contactsテーブルのuser_idがvarcharの場合、

型が違うためjoinできない

CASTすればよいと思い、試してみた

$users = DB::table('users')
            ->join('contacts', 'users.id', '=', 'contacts.user_id::int')
            ->get();

contacts.user_id::intなんて存在しないよって怒られる

原因は多分これみたい

LaravelクエリビルダはアプリケーションをSQLインジェクション攻撃から守るために、PDOパラメーターによるバインディングを使用します。バインドする文字列をクリーンにしてから渡す必要はありません。

解決方法はDB::raw()メソッド

たまにクエリの中でSQLを直接使用したいことがあります。このようなSQLでは文字をそのまま埋め込むだけですので、SQLインジェクションをされないように気をつけてください! エスケープなしのSQLを使用する場合はDB::rawメソッドを使用します。

こんな感じにすれば完了

$users = DB::table('users')
            ->join('contacts', 'users.id', '=', DB::raw('contacts.user_id::int'))
            ->get();


参考サイト
データベース:クエリビルダ 5.3 Laravel

NVMWで最新verがインストールできない(404 Not Found)

概要
NVMWで最新verがインストールできないので,無理やり最新verを使えるようにした.


目次
1. 背景
1.1. nvmwとは2. 目的
3. エラー内容
4. 解決策
5. 感想


1. 背景
卒業研究で使っているプログラムは,Macで開発していた.(Macは開発環境を整えやすいから)

だが,あのペラペラのキーボードと小さい画面では,開発の効率が悪いのでWindowsで開発することにした.

そこで問題が起きた.nodeのバージョンが古くてletをエラー扱いする.

Windowsではnvmwを使っているのだが,昔からv0.10.21以外のバージョンをインストールできない問題があった.


1.1. nvmwとは
nvmのWindows版.nodeのバージョンを管理できる.

続きを読む

Eclipseを使ってSelenium-WebDriverを使ってみた

概要

Selenium3 WebDriverを使ってChromeを自動操作する,環境構築とサンプルコードを作成する.


目次

1. 背景
1.1. Selenium WebDriverとは2. 目的
2.1. JavaでのWebDriverの使用方法2.2. Eclipseとは2.3. Jarファイルとは2.4. Mavenとは2.5. Gradleとは3. 環境構築
3.1. WebDriverを取得3.2. EclipseにJarを読み込ませる3.2.1. プロジェクト作成3.2.2. Jarファイルを参照する3.2.3. Chromeの場合3.3. サンプル作成4. 感想
5. 参考文献


1. 背景

卒業研究でSelenium WebDriverを使うので,WebDriverの知識が必要.


1.1. Selenium WebDriverとは

Selenium WebDriverは,プログラミング言語のコードからブラウザ操作が可能なライブラリ.

JavaRubyJavaScriptなど,各言語のライブラリとして提供されている.

続きを読む