ある中卒がWeb系エンジニアになるまでと、それからのこと

うつ病で高校を中退したり、たこ焼き屋のオヤジにホームページとたこ焼きを作らされたり、そのホームページが訴えられそうになったり、弁護士を目指したりした後にエンジニアになった人が書くブログ

vueプロジェクトにskywayを導入してビデオ通話する

2020/06/30の日報

Hanasot開発の日報、第4日目です。
今日は

  • vueプロジェクト内に新規ページを追加して、リンクを貼る
  • skywayをvueプロジェクトに導入する

を行いました。
時間としては、

  • Hanasot開発 3h30min
  • 日報ブログ 1h10min

です。
運動は

  • アンイーブン・スクワット 左右16repsずつ * 2（軽く吐き気がします...）

です。

vueプロジェクト内に新規ページを追加して、リンクを貼る

今回は対話ページとして、Home.vueやAbout.vueが入っているディレクトリに Dialog.vue を用意しました。
中身は About.vue のコピーです。

vue-routerにパスを追加

まずはvue-routerを編集してパスを追加していきます。実際に触るのは src/router/index.jsです。

f:id:chusotsuengineer:20200630214051p:plain
このファイルを編集します
添付画像のように

import hogehoge from ../views/Hogehoge.vue

と記述してvueファイルを読み込んだ後、

{
  path: '/hogehoge',
  name: 'hogehoge',
  component: Hogehoge,
},

と書いてパスを追加します。
これは anatano-domain/hogehoge というパスにアクセスしたとき、Hogehoge.vue を表示します。このページの名前はhogehogeとします。
という意味ですね。

トップページから対話ページへのリンクを貼る

それができたら添付画像のようにトップページにリンクを追加します。

f:id:chusotsuengineer:20200630214939p:plain
router-linkはaタグに変換されます

<router-link to="/dialogue" class="btn btn-corp btn-l">
  無料で参加する
</router-link>

と記述することで、dialogueページに遷移するaタグが出力されます。
リンクは何通りか方法がありますが、今回はシンプルにしておきます。

skywayをvueプロジェクトに導入する

ここまでで準備はできたので、本題のskyway導入です。 会員登録ページにアクセスして登録を済ませておきます。公式ドキュメントが非常に詳しく作成してあるのでとても導入しやすいです。

skywayの管理画面からアプリを登録する

ここはドキュメント通りに進めていくだけなので割愛します。ibmやらの管理画面と違ってわかりやすいので特に迷うことはありませんでした。利用可能ドメインには「localhost」と「firebaseでホスティングしているドメイン」を登録して、api鍵を保存したらOKです。

skywayのapiを使ってビデオ通話してみる

ここが今日1番時間のかかった部分です。ドキュメントでは1対1の通話を想定して解説してあるので、skyway-multipartyをインストールしてみたり、こちらの記事を再現したりしたのですが、最終的にはドキュメントのコードをvueファイルに落とし込んで実装しました。
ソースコードは下記です。

<template>
  <div>
    <video id="my-video" width="400px" autoplay muted playsinline></video>
    <p id="my-id"></p>
    <textarea id="their-id" v-model="theirID"></textarea>
    <button id="make-call" @click="makeCall">発信</button>
    <video id="their-video" width="400px" autoplay muted playsinline></video>
  </div>
</template>
<script>
  import Peer from 'skyway-js';
  export default {
    name: 'Dialogue',
    data() {
      return {
        localStream: null,
        theirID: '',
        peer: {},
      }
    },
    created() {
      // カメラ映像取得
      navigator.mediaDevices.getUserMedia({video: true, audio: true})
        .then( stream => {
        // 成功時にvideo要素にカメラ映像をセットし、再生
        const videoElm = document.getElementById('my-video')
        videoElm.srcObject = stream;
        videoElm.play();
        // 着信時に相手にカメラ映像を返せるように、グローバル変数に保存しておく
        this.localStream = stream;
      }).catch( error => {
        // 失敗時にはエラーログを出力
        console.error('mediaDevice.getUserMedia() error:', error);
        return;
      });

      // skyway接続
      this.peer = new Peer({
        key: ご自身のapiキーを入れてください',
        debug: 3,
      });
      this.peer.on('open', () => {
        document.getElementById('my-id').textContent = this.peer.id;
      });

      //着信処理
      this.peer.on('call', mediaConnection => {
        mediaConnection.answer(this.localStream);
        this.setEventListener(mediaConnection);
      });
    },
    methods: {
      makeCall() {
        const mediaConnection = this.peer.joinRoom(this.theirID, {
          mode: 'sfu',
          stream: this.localStream,
        });
        this.setEventListener(mediaConnection);
      },
      setEventListener: (mediaConnection) => {
        mediaConnection.on('stream', stream => {
          // video要素にカメラ映像をセットして再生
          const videoElm = document.getElementById('their-video')
          videoElm.srcObject = stream;
          videoElm.play();
        });
      }
    },
  }
</script>
<style scoped>
</style>

基本的にはcreatedフックとdataプロパティとmethodsに振り分けただけです。
ドキュメントと違う部分は下記ですね。

const mediaConnection = this.peer.joinRoom(this.theirID, {
  mode: 'sfu',
  stream: this.localStream,
});

callメソッドをjoinRoomに変えて、modeを選択することでグループ通話になります。現段階では2人分しか表示できないので実質2人通話ですが。
最初は昨日と同じようにcreatedフックなどは無しで、scriptタグ内に処理を書いていたのですがDOM周りのエラーが起きまして。やっぱりvueファイルなのでちゃんとcreatedフックに書かないとだめですね。
もうちょっとリファクタリングできると思うのですが、ちゃんとグループ通話を実装してUIを整えてからリファクタします。
ここまで出来たらこんな感じになるはずです。

f:id:chusotsuengineer:20200630221933p:plain
以前クレーンゲームで取った猫

npm run build と firebase deploy をして公開できたら一旦終わりです。
明日はグループ通話できるようにしていきます。

所感

skyway-multipartyについて

これ2017年で開発が止まっちゃってるのが惜しいですね。wherebyも認知されてるしライブラリがちゃんと使えるようになればもっと広まりそうな気がするんですが。まあskywayの通常のapiを使って結構かんたんにグループ通話までできそうだからいいかな。
他にもビデオ通話のapiで良さげなのがあったら知りたいです。もしご存じの方がいらっしゃったらtwitterかなにかで教えて下さい〜

明日は参加人数に合わせてvideoタグを増やしたり消したりといった、ザ・vueみたいなことをしていく予定です。がんばります。

vueプロジェクトにskywayを導入してビデオ通話する

2020/06/30の日報

Hanasot開発の日報、第4日目です。
今日は

  • vueプロジェクト内に新規ページを追加して、リンクを貼る
  • skywayをvueプロジェクトに導入する

を行いました。
時間としては、

  • Hanasot開発 3h30min
  • 日報ブログ 70min

です。
運動は

  • アンイーブン・スクワット 16reps * 2（軽く吐き気がします...）

です。

vueプロジェクト内に新規ページを追加して、リンクを貼る

今回は対話ページとして、Home.vueやAbout.vueが入っているディレクトリに Dialog.vue を用意しました。
中身は About.vue のコピーです。

vue-routerにパスを追加

まずはvue-routerを編集してパスを追加していきます。実際に触るのは src/router/index.jsです。

f:id:chusotsuengineer:20200630214051p:plain
このファイルを編集します
添付画像のように

import hogehoge from ../views/Hogehoge.vue

と記述してvueファイルを読み込んだ後、

{
  path: '/hogehoge',
  name: 'hogehoge',
  component: Hogehoge,
},

と書いてパスを追加します。
これは anatano-domain/hogehoge というパスにアクセスしたとき、Hogehoge.vue を表示します。このページの名前はhogehogeとします。
という意味ですね。

トップページから対話ページへのリンクを貼る

それができたら添付画像のようにトップページにリンクを追加します。

f:id:chusotsuengineer:20200630214939p:plain
router-linkはaタグに変換されます

<router-link to="/dialogue" class="btn btn-corp btn-l">
  無料で参加する
</router-link>

と記述することで、dialogueページに遷移するaタグが出力されます。
リンクは何通りか方法がありますが、今回はシンプルにしておきます。

skywayをvueプロジェクトに導入する

ここまでで準備はできたので、本題のskyway導入です。 会員登録ページにアクセスして登録を済ませておきます。公式ドキュメントが非常に詳しく作成してあるのでとても導入しやすいです。

skywayの管理画面からアプリを登録する

ここはドキュメント通りに進めていくだけなので割愛します。ibmやらの管理画面と違ってわかりやすいので特に迷うことはありませんでした。利用可能ドメインには「localhost」と「firebaseでホスティングしているドメイン」を登録して、api鍵を保存したらOKです。

skywayのapiを使ってビデオ通話してみる

ここが今日1番時間のかかった部分です。ドキュメントでは1対1の通話を想定して解説してあるので、skyway-multipartyをインストールしてみたり、こちらの記事を再現したりしたのですが、最終的にはドキュメントのコードをvueファイルに落とし込んで実装しました。
ソースコードは下記です。

<template>
  <div>
    <video id="my-video" width="400px" autoplay muted playsinline></video>
    <p id="my-id"></p>
    <textarea id="their-id" v-model="theirID"></textarea>
    <button id="make-call" @click="makeCall">発信</button>
    <video id="their-video" width="400px" autoplay muted playsinline></video>
  </div>
</template>
<script>
  import Peer from 'skyway-js';
  export default {
    name: 'Dialogue',
    data() {
      return {
        localStream: null,
        theirID: '',
        peer: {},
      }
    },
    created() {
      // カメラ映像取得
      navigator.mediaDevices.getUserMedia({video: true, audio: true})
        .then( stream => {
        // 成功時にvideo要素にカメラ映像をセットし、再生
        const videoElm = document.getElementById('my-video')
        videoElm.srcObject = stream;
        videoElm.play();
        // 着信時に相手にカメラ映像を返せるように、グローバル変数に保存しておく
        this.localStream = stream;
      }).catch( error => {
        // 失敗時にはエラーログを出力
        console.error('mediaDevice.getUserMedia() error:', error);
        return;
      });

      // skyway接続
      this.peer = new Peer({
        key: ご自身のapiキーを入れてください',
        debug: 3,
      });
      this.peer.on('open', () => {
        document.getElementById('my-id').textContent = this.peer.id;
      });

      //着信処理
      this.peer.on('call', mediaConnection => {
        mediaConnection.answer(this.localStream);
        this.setEventListener(mediaConnection);
      });
    },
    methods: {
      makeCall() {
        const mediaConnection = this.peer.joinRoom(this.theirID, {
          mode: 'sfu',
          stream: this.localStream,
        });
        this.setEventListener(mediaConnection);
      },
      setEventListener: (mediaConnection) => {
        mediaConnection.on('stream', stream => {
          // video要素にカメラ映像をセットして再生
          const videoElm = document.getElementById('their-video')
          videoElm.srcObject = stream;
          videoElm.play();
        });
      }
    },
  }
</script>
<style scoped>
</style>

基本的にはcreatedフックとdataプロパティとmethodsに振り分けただけです。
ドキュメントと違う部分は下記ですね。

const mediaConnection = this.peer.joinRoom(this.theirID, {
  mode: 'sfu',
  stream: this.localStream,
});

callメソッドをjoinRoomに変えて、modeを選択することでグループ通話になります。現段階では2人分しか表示できないので実質2人通話ですが。
最初は昨日と同じようにcreatedフックなどは無しで、scriptタグ内に処理を書いていたのですがDOM周りのエラーが起きまして。やっぱりvueファイルなのでちゃんとcreatedフックに書かないとだめですね。
もうちょっとリファクタリングできると思うのですが、ちゃんとグループ通話を実装してUIを整えてからリファクタします。
ここまで出来たらこんな感じになるはずです。

f:id:chusotsuengineer:20200630221933p:plain
以前クレーンゲームで取った猫

npm run build と firebase deploy をして公開できたら一旦終わりです。
明日はグループ通話できるようにしていきます。

所感

skyway-multipartyについて

これ2017年で開発が止まっちゃってるのが惜しいですね。wherebyも認知されてるしライブラリがちゃんと使えるようになればもっと広まりそうな気がするんですが。まあskywayの通常のapiを使って結構かんたんにグループ通話までできそうだからいいかな。
他にもビデオ通話のapiで良さげなのがあったら知りたいです。もしご存じの方がいらっしゃったらtwitterかなにかで教えて下さい〜

明日は参加人数に合わせてvideoタグを増やしたり消したりといった、ザ・vueみたいなことをしていく予定です。がんばります。

vueファイル内でscssとjQueryを使う

2020/06/29の日報

Hanasot開発の日報、第3日目です。
今日は

  • html, scss, jsに分かれている既存のページをvueファイルに直す
  • リセットcssを導入
  • jQueryを導入

を行いました。
時間としては、

  • Hanasot開発 60min
  • 日報ブログ 65min

です。
運動は

  • レバー・プッシュアップ 左右16repsずつ→11repsずつ→10repsずつ

です。

html, scss, jsに分かれている既存のページをvueファイルに直す

以前トンテキさんにデザインとコーディングをしていただいたトップページをvueファイルに直していきます。ご依頼段階ではLaravelで構築することになっていたので、HTML, SCSS, js（jQuery）で構成されていました。
GitLab上で「トップページを作成」というマージリクエストを作成して、ブランチを切って始めます。

f:id:chusotsuengineer:20200630000106p:plain
完成品はこちら

vueファイルは

  • template（HTMLを書くと思ってください）
  • script
  • style

という3つのタグで構成されることが多いです。
今回は「HTMLファイル」、「SCSSファイル」、「jQueryで記述されたjsファイル」の3つでトップページが構築されているので、それらを上記の3つのタグに振り分けていきます。

templateタグ内にHTMLを記述する

まずはtemplateタグ内にHTMLを書くことからですね。通常spaのvueプロジェクトだとheadタグなどはindex.htmlに記述して、bodyのコンテンツに当たる部分をvueファイルにすることになると思います。インデントや閉じタグ漏れに気をつけて書いていきましょう。 1点気をつけないといけないのが、templateタグ直下にタグは1つしか存在できないということです。
つまり

<template>
  <header>
  </header>
  <main>
  </main>
  </footer>
  </footer>
</template>

という構造はアウトです。

<template>
 <div>
    <header>
    </header>
    <main>
    </main>
    </footer>
    </footer>
 </div>
</template>

このようにdivタグで囲うなどして対処しましょう。画像はsrc/assetsフォルダに格納して、相対パスで指定してください。

styleタグ内にscssを記述する

次にstyleタグ内にscssを記述していきます。 vueファイルでは

f:id:chusotsuengineer:20200629233530p:plain
scoped属性とlang属性をつけておく
このように、scoped属性をつけることでこのvueファイル内でのみスタイルを有効化し、lang属性にscssを指定することでscssで記述することができるようになります。
ただ、scssを適用するためにはプロジェクトに

  • node-sass
  • sass-loader

をインストールしなければいけません。

npm install node-sass sass-loader -D

を叩いてnpmでインストールしましょう。
中身は普通にscssを書いちゃってOKです。

scriptタグ内に処理を記述する

普通はvueの処理を書くのですが、今回はjQueryで既に実装済みなのでjQueryのコードを書いていきます。詳しくは下で。

リセットcssを導入

その前にリセットCSSを導入しておきましょう。今回は normalize.css を使います。

npm install normalize.css

を実行して、App.vue（起点となるvueファイル）に

<script>
import 'normalize.css';
export default {
  name: 'App',
}
</script>

と書けばOKです。

jQueryを導入

そしてjQueryですね。あんまり無いパターンかとは思いますが、使うときは使うので手順を残しておきます。
まずは

npm install jquery

ですね。これでnpm経由でjQueryがインストールされます。
その後jQueryを使いたいvueファイルで、

<script>
import $ from 'jquery'; //$でjQueryを呼び出す
export default {
  name: 'hogehoge',
}
//この下に処理を書く
</script>

としましょう。
spaなのでcreatedフックで処理を書いて、destroyで削除しないと他のページで何らかの影響が出るかもしれませんが、出たらその時対処しましょう。一旦はこれでOKです。

すべて終わったら

npm run build

からの

firebase deploy

しましょう。 ブランチをマージして今日は終わりです。

所感

ブログを書くのに時間がかかる

今日の開発は小一時間で終わるものだったんですが、日報をブログにまとめる作業がどうしても1時間程度かかっちゃいますね。
筋トレの休憩中にちびちび書き進めてはいるもののもう少し短縮したいところです。
まあ書いていくうちに早くなるでしょうから、気にしなくてもいいかなあ。

vue-cliでSPAプロジェクトを作成してfirebaseでホスティングする

2020/06/28の日報

Hanasot開発の日報、第2日目です。
今日は

  • vue-cliでSPAプロジェクトを作成
  • firebaseでホスティング
  • 同僚の方をGitLabとfirebaseに招待して、デプロイまで行えるように環境構築

を行いました。
時間としては、

  • Hanasot開発 2h30min
  • 日報ブログ 60min

です。
運動は

  • アンイーブン・プルアップ（スタローン流ではなく左右の高さを変えて、片方の手に負荷をかける方法） 左右6repsずつ × 2
  • フル・プルアップ（1セット目を順手、2セット目を逆手）7reps * 2

です。

vue-cliでSPAプロジェクトを作成

昨日の記事でfirebase cliを用いてプロジェクトを作成していましたが、どうやらそのやり方だと上手くvue-cliを導入できないようで下記の記事を参考に環境構築をやり直しました。
【Vue.js】FirebaseプロジェクトでVue CLI v4.0.4を作成する（Firebase・Vue CLI v4.0.4） - Qiita
実際の手順は下記です。

  1. 昨日作ったプロジェクトのファイルとディレクトリを全て削除して、ルートディレクトリで
    vue create .
    を実行します。
  2. なんやかんやと選択肢が出てくるので、適宜回答します。
    f:id:chusotsuengineer:20200629024219p:plain
    必要なパッケージ？を選択
  3. そしたらいい感じにプロジェクトを作成してくれるので、
    npm run serve
    して、ローカルで起動確認。
    spaにするか？という項目でyesと答えていれば about.vue がspaで動くようになっているので、なにかテキストを追加したりしてちゃんと反映されるかを確認しておきます。

firebaseでホスティング

  1. 確認できたら
    npm install firebase
    した後に
    firebase init
    を行います。
    firebase login などは昨日行っているので不要ですね。
    グローバルに firebase tools をインストールしているので、プロジェクトに firebase を入れる必要はないかもしれませんが一応インストールしておきます。 また、firebase init では昨日と同じく基本的にデフォルトの選択肢でOKですが、公開するディレクトリをpublicではなくdistにする必要があります。
    vue-cliもpublicディレクトリを作成するので、私は勘違いしてここを公開ディレクトリにしてしまってハマりました。
    publicディレクトリにある index.html はあくまでspaの起点として使用されるものなので、distディレクトリを指定しなければいけないようです。
  2. それができたら
    firebase deploy
    をしてみましょう。
    ずらっと処理が並んだあとに、ホスティング先のURLを教えてくれるはずです。
    そのURLにアクセスすると先程ローカルで確認したサイトが表示されます。 キャッシュが残りやすいようなのでシークレットモードで確認したほうがよいでしょう。
    1手順ごとにコミットするのも忘れないでください。

同僚の方をGitLabとfirebaseに招待して、デプロイまで行えるように環境構築

今日、実は打ち上げのバーベキューだったんです。
そこで同僚の方にhanasotのことをお話したら、手伝ってくださるとのことだったので複数人での開発環境を整えました。
まあ2人以上になることはないと思いますが。
0時から開始して快く1時半まで付き合ってくださったMさんに感謝です。
さて、GitLabアカウントとgoogleアカウントは既にお持ちでMacにGitの諸々の導入も済んでいる場合の環境構築なのでそんなに大したことはしていないのですが、一応手順を書いていきます。

  1. GitLabとfirebaseのプロジェクトに管理者権限で招待
  2. メールから招待のリクエストを承認
  3. git clone でプロジェクトをローカルに設置
  4. 環境構築用のブランチがマージ前だったので、 git chekout して移動
  5. 何はなくともnpm install を行う
  6. npm run serve してみる
  7. ローカルで確認できたら昨日と同じく firebase login して、既存のプロジェクトで hanasot を選択
  8. vueファイルに適当な変更を加えて、 firebase deploy する
  9. ちゃんと反映されていればOK

こんな感じです。バッチリですね。
環境構築のブランチを master にマージして今日はおしまいです。

所感

vue-cliとfirebaseは楽で早い

これにつきます。めっちゃ楽だしホスティングまでサクサクできちゃう。
もうspaの土台はできているので、ユーザー認証機能とかを追加していけば秒でwebアプリ完成しちゃいますよ。
うーん。楽だなあ。
firebaseはセキュリティ面で問題があるという話は前任の方などからお聞きしていて、詳しく調べられていないのですが中々悩ましい部分もあります。
ただ僕は今ひたすら作り続けるのが大事な時期だろうと思っているので、当面はこの便利さを享受していこうかなと。
ということで明日は skyway の導入か、トップページ設置のどっちかをやります。
忙しくなるけどがんばろう。
努力なくして得られるものに大した価値はないですから。

firebase環境構築をして、Laravelとfirebaseを比較する

2020/06/27の日報

Hanasot開発の日報、第1日目です。 今日は

  • GitLabでHanasotのプロジェクトを作成
  • firebaseコンソールでHanasotoのプロジェクトを作成
  • firebase cliのインストール・プロジェクトの反映

を行いました。
時間としては、

  • Hanasot開発 28min
  • 日報ブログ 46min

です。
運動は

  • エアロバイク 15min

です。

GitLabでHanasotのプロジェクトを作成

GitLabのプロジェクト自体は作成していたのですが、こっちはLaravelである程度使っているので新たに作り直しです。
ブランチの切り方とかも矯正したので今度は多少きれいに作っていけるんじゃないかな。

firebaseコンソールでHanasotoのプロジェクトを作成

それからfirebaseの方でも新規プロジェクトを作成しました。
仕事では既に環境はできている状態からスタートだったので、自分でやるのは初めてですね。
下記のサイトを参考に行いました。

Vue.js＋Firebaseで認証付きチャット | 基礎から学ぶ Vue.js
Firebaseのプロジェクトを作り直すことになったたった一つの設定項目 - Qiita

デフォルトではロケーションがusになっているので、asia-northeast1（東京）にするのは注意ですね。
今回は

  • メールアドレス
  • Googleアカウント

での登録を受け付けることにしました。
Authentication の項目から簡単に設定できます。（動作未確認）
Databaseの項目もアクセスするだけでルールを作ってくれます。

f:id:chusotsuengineer:20200627233452p:plain
「だれでもどのコレクションでも読み取りも書き込みも好きにしちゃいな！」のルール

あとDBは本番環境かテスト環境か選択できて、本番だとルール通りで動作するようです。
テスト環境だと、どのユーザーでもデータへのアクセスが許可される？とか。
今回は最初から本番設定で行います。
そんなところかな。

firebase cliのインストール・プロジェクトの反映

そしたらローカルのソースコードが格納されるディレクトリとfirebaseプロジェクトを繋げていきます。
下記のサイトを参考にしました。
vue.js firebase 環境構築 (os x) - Qiita
firebaseでhostingするまでの備忘録 - Qiita
Firebaseの初期設定〜デプロイまで – ajike developer's blog – UXデザイン会社アジケの開発者ブログ
グローバルにfirebase-toolsをインストールして、あとは firebase login からの firebase init で選択肢に答えていくだけですね。
1点気になってるのが、

? Which Firebase CLI features do you want to setup for this folder? Press Space to select features, then Enter to confirm your choices.
◯ Database: Deploy Firebase Realtime Database Rules
◯ Firestore: Deploy rules and create indexes for Firestore
◯ Functions: Configure and deploy Cloud Functions
◯ Hosting: Configure and deploy Firebase Hosting sites
◯ Storage: Deploy Cloud Storage security rules

って聞かれて選択する箇所があるんですけど、これ全部選択しちゃったんですよね。
いらなければ使わないだけでいいんじゃないかという浅はかな考えなんですけど、どうなんでしょう。
まあ、個人開発なので困ったらやり直せばいいか。
それ以外は基本デフォルトでOKかと思います。ルール記述用のファイルとかなければ作ってくれるので。
そんな感じですね。
とりあえず今日はここまでです。

所感

Laravelとfirebaseの比較

Laravelとfirebaseのどっちを使おうか迷ってるんですけど、両者はなんとなく似てるんですよね。NoSqlだし。
SPAのバックエンドにするなら必然的にapiで関数を呼び出していくわけですけど、そうなるとLaravelだろうがfirebaseだろうが手間はあんまり変わらない気がするんです。ここらへん経験が浅いのでなんともですが。
firebaseだとcloud functionsというのがあって、そこにapiをなんやかんやと書いていきます。
Laravelならルーティングでapi用のやつ作りますよね。
今の僕レベルだとjsなのかphpなのかくらいしか違いがない気がする。
Laravelで色々つくった時は、あれやろうとかこれやろうってふと思いついたことに対して既にメソッドが用意されてる便利さが凄くよかったのを覚えてます。
でもfirebaseも楽なんですよ。クエリ投げて返ってきた値への操作も色々用意してくれてるし。
ホスティングの簡便さとか考えると、とりあえず今回はfirebaseでやってみようかなーと思ってます。
ただ料金が怖いな。
ちょっとこの辺はまたおいおい詳しく調べていけたらと。
とりあえず乱文でざっくり今日の所感でした。

これまでのことと、これからのこと

近況報告

個人開発サービスが完成するまでTwitterを止めると宣言してから2ヶ月強が過ぎました。
その間なにか進んだのかというと全く進んでいません。
言い訳をするならば所属している会社の案件で手一杯だったということなのですが、自由に使える時間が少なくとも1日数時間はあったので全くもって正当化する理由にはならないでしょう。

それで今日からこのブログを日報代わりに使っていこうと思い立ったので、その旨をお伝えするのが今回の記事の目的です。

これまでのTwitterやブログとの付き合い方

私が運用しているSNSとブログは、当ブログと下記のTwitterです。
https://twitter.com/Chusotuengineer
ブログは数記事書いた時点で書くことがないと思いほぼ更新していませんでした。
Twitterは主に勉強の記録として使っていてこちらは上手く付き合えていました。
お話できるような仲の良い方ができたことは本当に良かったと思っています。
ただTwitterが苦しくなってきたのはエンジニアになって以降です。
勉強の記録にしている頃は書くことが毎日あったしタイムラインも多少の焦燥感に駆られながらも心地よい気持ちで眺めていられました。
それが無事に就職し、エンジニアとしての自分の課題や今後の身の振り方について真実味を持って考えねばならなくなってから一気につらいものになったと記憶しています。
自分の力のなさと、錯綜する情報にただただ気を揉むばかりでメンタル面には少なからず悪い影響が出ていました。 ツイートすることが苦痛になったり自分の投稿に対する反応がやたらと気になるようになったり、ひどい時は業務中すらツイートのアクティビティを確認したりして、健全とはいいがたい付き合い方だったなと思います。

今後のTwitterやブログとの付き合い方

ちょっと話は変わるのですが、ここ1ヶ月ほど毎日かかさず続けられていることがあります。
筋トレです。
今年の1月にプリズナー・トレーニングのkindle本を買い、2,3日に1回くらいぼちぼちやっていました。
https://www.amazon.co.jp/dp/B0746H85JW/ref=dp-kindle-redirect?_encoding=UTF8&btkr=1
ただ回数の記録がないといまいち成長を実感できないので記録をつけようと思い立ったのが先月で、それから毎日続いています。

f:id:chusotsuengineer:20200627191749j:plain
筋トレメモというアプリです。
筋トレ1種目 or エアロバイク15分を最低量として記録するようにすると、面白いように継続できました。
今はBIG6のどの種目も概ねstep8以降なのでかなりきついし、スクワットの日なんかは気が重いんですが、それでも今のところは途切れず毎日行っています。

まあつまり、どうやら今の自分には

  • 最低量をかなり小さくする
  • 記録する

という習慣化のための大原則がはまるんだなと思ったんです。
それで本題の今後のブログとSNSとの付き合い方についても、この方針でいこうと思います。

  • 開発は毎日行う
  • ただし最低15分で良い
  • 日報代わりにこちらのブログを使用
  • Twitterはブログのリンクを貼るのみ

忙しかった案件も一応クライアントにお渡ししてテスト段階に入り、またがんばらなければと少しやる気が出てきた今日から始めていきます。
そんな感じです。
またよろしくお願いします。

追伸

忙しかった案件というのが vue + firebase + cordova だったので、そのあたりの知見がかなり得られました。
cordovaは結構手間がかかるので一時おいておきますが、Laravel ではなく firebase を用いてサーバーレスで開発しようかなとも思っています。
今日の日報の記事はそのへんの検討もしていこうかな。