1年前に作ったGitHubで名前にエイリアスを設定するやつを公開しました。

GitHubでアカウント名を別の名前で表示できるChrome拡張を作った。 – return $lock;で作って1年放置していたChrome拡張をストアに登録しました。審査早かったです。

GitHubで名前にエイリアスを設定するやつ – Chrome ウェブストア

昨日何となくMOONGIFTさんのGoogle Chrome拡張機能の紹介を眺めていたら、自分の作った拡張が紹介されていたのを見つけてハチャメチャにテンションが上がったので、リファクタリングをあきらめてそのままリリースしました。MOONGIFTさんに紹介されるのは目標にしていたのでとてもうれしいです。
GitHub name Alias Chrome Extension – GitHubのユーザ名にエイリアスを追加してサジェストを使いやすく MOONGIFT

Google Calendar API v3でMeetのURLを発行する。

Right-Click-to-Calendar v3.9.2をリリースしました。
Right-Click to Calendar – Chrome ウェブストア
カレンダーに登録したときにMeetsのURLも発行してほしいと要望がきたので対応しました。カレンダーのAPIでMeetのURLが発行できるのを今回初めて知りました。Meet無料でも使えるのはありがたいですね。
Events: insert  |  Calendar API  |  Google Developers

const body = {
  "start": {
    "dateTime": "2020-09-12T02:05:00.000+09:00"
  },
  "end": {
    "dateTime": "2020-09-12T02:05:00.000+09:00"
  },
  "conferenceData": {
    "createRequest": {
      "requestId": Math.random().toString(32).substring(2), // ランダムな文字列
      "conferenceSolutionKey": {
        "type": "hangoutsMeet"
      }
    }
  }
};

const xhr = new XMLHttpRequest();
xhr.onloadend = () => {
  if (xhr.status === 200) {
    const data = JSON.parse(xhr.responseText);
    if (data.conferenceData.createRequest.status.statusCode === "success") { // 発行されたMeetのURL取得
      console.log(data.conferenceData.entryPoints[0].uri)
    }
  }
};
xhr.open('POST',
  "https://www.googleapis.com/calendar/v3/calendars/" + カレンダーのID + "/events?conferenceDataVersion=1", // conferenceDataを送信するためのフラグを有効にする
  true);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.setRequestHeader('Authorization', 'Bearer ' + accessToken);
xhr.send(JSON.stringify(body));

カレンダー共有すれば人を招待する必要はないし、URLを発行する機能だけつけました。

Chromeの拡張、リリース時の審査に1ヶ月くらいかかるときいていたのですが、今回は1営業日で完了しました。よかったです。
次のリリースあるときはNuxt.jsで実装しなおす予定です。

あと、今WordPress捨てようと思っていて、Gatsbyに移行するために記事をmdに落とし込むところまではやったのですが、今使っているテンプレートをGatsbyに変換するところで詰まったので、時間をかけて頑張ろうと思います。Reactもやっていこう。

この記事コナンのエピソードワン見ながら書いてたのですが、やっぱり新一のどこがいいのかわかんねえなと思いました。主要人物の紹介違和感なく全部ぶち込んでて構成上手でしたね。すごい。

Vue全然知らないけどNuxt.js v2.14.4 + JavaScriptでTodoアプリを作る。

はじめに

フロントエンドは素のJavaScript(ES6)とjQueryしか使ったことがないのと、雨後の筍みたいにフレームワークが乱立していて、どれから手を付けていいのかわからず困っていたのですが、Nuxt.jsが結論のようなのでNuxt.jsを使うことにしました。
チュートリアルといえばTodoアプリということで、「Nuxt.js Todo」で検索するとたくさんサンプルが出てくるのですが、どれもまともに動かないか、Deprecatedになっている方法を使っていたり、動作確認環境すら書いていないものが多いので、やはり信じられるのは公式ドキュメントだけという結論に達しました。今回は公式ドキュメントのサンプルを参考にした上で、多少機能を追加したものを作成しました。
似たような記事は山ほどあるのですが、どの記事を読んでもだめだった人向けのメモとして残しておきます。
なお、使用する言語はJavaScriptです。

今回作成するアプリのイメージ

file

ほぼ公式ドキュメントのサンプルを写経していますが、日付と検索機能を追加しています。
file

動作確認環境

  • Ubuntu 20.04.1 LTS (GNU/Linux 4.19.104-microsoft-standard x86_64)
    • Windows 10 Pro ver 2004のWSL2上で動いてるUbuntu
    • Windows向けのNode.jsもありますが、Linux環境があるならそれを使うのが一番わかりやすいと思います。
  • Node.js v12.18.3
  • Nuxt.js v2.14.4
  • yarn 1.22.5

WSL2を使用する場合の注意事項

WSL2を使用する場合、動作させるアプリケーションを/mnt/*以下に作成すると、ビルドが終わらない・ホットリロードが効かなくなる問題が発生します。私はこれで半日つぶしました。Windowsくんさぁ…。
WSL2の実行環境の中 /home/* にアプリを作れば問題を回避できます。私はVSCodeを使いたいので、Remote Development機能を使いました。
以下参考記事です。

アプリ作成

以下のコマンドを実行してアプリを作成します。Todoアプリは全部初期設定でも動作に影響ないので、全部初期設定にしました。

$ npx create-nuxt-app sample-app

参考:Nuxt.jsを使うときに、SPA・SSR・静的化のどれがいいか迷ったら – Qiita

ディレクトリ構造の参考サイト

アプリ動作確認

$ cd sample-app
$ yarn dev

http://localhost:3000 にアクセスして、デフォルト画面が出てくればOKです。
file

また、今後の開発速度に1億倍くらい影響が出てくるため、ホットリロードが効くかどうかをこの段階で検証しておいたほうがいいです。http://localhost:3000 を開いた状態で、pages/index.vue内の適当なテキストを修正して、ブラウザの更新無しで修正した内容が反映されているかを確認してください。
反映されていなければエラー内容で検索してください。

ストアの追加

Todoの状態を管理するためのストアをモジュールモードで使用します。クラシックモードはDeprecatedなのですが、大体の解説記事がクラシックモードでコードを書いていて、Nuxt.js v2で使うと警告 Classic mode for store/ is deprecated and will be removed in Nuxt 3 が出てきます。
Vuex ストア – NuxtJS
公式ドキュメントのサンプルほぼそのままですが、サンプルが間違っているので、一部修正します。また、idは採用せずに、todoの作成日時のDateを保持するよう変更しました。

// store/todos.js
export const state = () => ({
    list: []
})

export const mutations = {
    add(state, text) {
        state.list.push({
            text,
            done: false,
            created: new Date(),
        })
    },
    remove(state, todo) { // 公式ドキュメントではtodoをオブジェクトで受け取っているが、呼び出し元がオブジェクトで渡していないので正しく動作しない。
        state.list.splice(state.list.indexOf(todo), 1)
    },
    toggle(state, todo) {
        todo.done = !todo.done
    },
}

templateの修正

作成時の日付を文字列に変換する関数と、絞り込み用の関数を追加しました。検索用のテキスト入力欄に文字が入力されると、その文字列を含むリストを返却しています。

<template>
  <section class="container">
    <ul>
      <li v-for="(todo, index) in todos" :key="index">
        <input :checked="todo.done" @change="toggle(todo)" type="checkbox" />
        <span :class="{ done: todo.done }">{{ todo.text }} {{ getStringFromDate(todo.created) }}</span>
        <button @click="removeTodo(todo)">remove</button>
      </li>
    </ul>
    <p>
      <input
        :value="todoText"
        @input="todoText = $event.target.value"
        placeholder="✨What needs to be done?"
      />
      <button @click="addTodo">add</button>
    </p>
    <p>
      <input
        :value="searchText"
        @input="searchText = $event.target.value"
        placeholder="🔍Search your todo."
      />
    </p>
  </section>
</template>

<script>
import { mapMutations } from "vuex";

export default {
  data() {
    return {
      todoText: "",
      searchText: "",
    };
  },
  computed: {
    todos() {
      if (this.searchText.length > 0) {
        return this.$store.state.todos.list.filter((item) =>
          item.text.toLowerCase().includes(this.searchText.toLowerCase())
        );
      }
      return this.$store.state.todos.list;
    },
  },
  methods: {
    addTodo() {
      this.$store.commit("todos/add", this.todoText);
      this.todoText = "";
    },
    ...mapMutations({
      toggle: "todos/toggle",
    }),
    removeTodo(todo) {
      this.$store.commit("todos/remove", todo);
    },
    getStringFromDate(date) {
      return (
        date.getFullYear() +
        "-" +
        ("00" + (date.getMonth() + 1)).slice(-2) +
        "-" +
        ("00" + date.getDate()).slice(-2) +
        " " +
        ("00" + date.getHours()).slice(-2) +
        ":" +
        ("00" + date.getMinutes()).slice(-2) +
        ":" +
        ("00" + date.getSeconds()).slice(-2)
      );
    },
  },
};
</script>

<style>
</style>

所感

最初はわけがわからずかなり戸惑ったのですが、一回書き始めてみるとかなり直感的にDOMの内容を操作できますし、素のJavaScriptで同じことをやろうとすると絶対こんなにきれいに書けないので、これは流行るのもわかるフレームワークだと思いました。久々に書いていて楽しかったです。
ソースコードはGitHubにも上げておきました。
https://github.com/retrorocket/nuxtjs-2-sample-todo-app/

Windows 10 Home (ver 2004, build 19041)でKubernetesとNginx Ingress Controllerを使う。

五飛、教えてくれ……俺たちはあと何回Windowsをクリーンインストールすればいい?

May 2020 Updateの上書きアップデートに失敗して、ログイン直後にハングアップするようになったのでクリーンインストールしました。セーフモードだと起動するのでサービスかドライバのせいだと思うのですが、調査するよりクリーンインストールしたほうが早いです。サインイン画面からShiftキー押しっぱなし -> 電源 -> 再起動 でセーフモードが使えることを今回初めて知りました。
Windows 10 のセーフ モードおよびその他のスタートアップ設定

Windows 10 HomeでもDocker Desktopが動作するようになったのでKubernetesでNginx Ingress Controllerの動作確認をしました。

使用したバージョン

  • Docker Desktop community: 2.3.0.4(46911) stable
  • Docker Engine: 19.03.12
  • Kubernetes: v1.16.5

WSL2を有効にする

  1. コントロールパネルの「Windowsの機能の有効化または無効化」から「仮想マシンプラットフォーム」を有効化
  2. WSL 2 Linux カーネルの更新 | Microsoft Docs の手順に従いカーネルを更新する
  3. 管理者のPowerShellで wsl --set-default-version 2 を実行

Docker Desktopのインストール

Docker Desktop for Mac and Windows | Docker
インストーラーからインストールします。インストール時に「WSL2を使用するか?」みたいなチェックボックスがあるのでオンにします。
インストール後にチュートリアルとしてテスト用のコンテナ作成が実行できます。コンテナが立ち上がるか確認して、問題なければ停止します。

Kubernetesの有効化

  1. Settings->Kubernetes->Enable Kubernetesを選択
  2. kubectl get nodes でnodeの状態が取得できるか確認。シングルノードなのでmasterしかない。
    PS C:\Users\mail\Documents\pods> kubectl get nodes
    NAME             STATUS   ROLES    AGE    VERSION
    docker-desktop   Ready    master   154m   v1.16.6-beta.0

Nginx Ingress Controllerのインストール

Installation Guide – NGINX Ingress Controllerの手順を実行

kubectl apply -f https://raw.githubusercontent.com/kubernetes/ingress-nginx/controller-v0.35.0/deploy/static/provider/cloud/deploy.yaml

ingress controllerの起動確認

PS C:\Users\mail\Documents\pods> kubectl -n ingress-nginx get services,deployments,pods
NAME                                         TYPE           CLUSTER-IP     EXTERNAL-IP   PORT(S)                      AGE
service/ingress-nginx-controller             LoadBalancer   10.102.109.2   localhost     80:31301/TCP,443:31691/TCP   111m
service/ingress-nginx-controller-admission   ClusterIP      10.99.131.11   <none>        443/TCP                      111m

NAME                                       READY   UP-TO-DATE   AVAILABLE   AGE
deployment.apps/ingress-nginx-controller   1/1     1            1           111m

NAME                                            READY   STATUS      RESTARTS   AGE
pod/ingress-nginx-admission-create-4rz86        0/1     Completed   0          111m
pod/ingress-nginx-admission-patch-zwgdm         0/1     Completed   0          111m
pod/ingress-nginx-controller-5947756d78-jp7q4   1/1     Running     0          111m

動作確認用のDeploymentとServiceとIngressのapply

動作確認用のDeploymentとServiceとIngressをapplyします。今回は「Docker/Kubernetes 実践コンテナ開発入門」という本でチュートリアル用に公開されているgihyodocker/echo:latestのイメージを使用しました。8080ポートにアクセスすると「Hello Docker!!」というテキストが返ってくるアプリケーションです。Podの数は3つにしておきました。

apiVersion: apps/v1
kind: Deployment
metadata:
  name: echo-deployment
  labels:
    app: echo
spec:
  replicas: 3
  selector:
    matchLabels:
      app: echo
  template:
    metadata:
      labels:
        app: echo
    spec:
      containers:
      - name: echo
        image: gihyodocker/echo:latest
        ports:
        - containerPort: 8080

動作確認用にClusterIPでServiceを作って80番ポートで待ち受け。

kind: Service
apiVersion: v1
metadata:
  name: echo-service
spec:
  type: ClusterIP
  ports:
  - name: http
    port: 80
    targetPort: 8080
    protocol: TCP
  selector:
    app: echo

/echo へのアクセスを振り分けるように設定。

apiVersion: networking.k8s.io/v1beta1
kind: Ingress
metadata:
  name: test-ingress
  annotations:
    nginx.ingress.kubernetes.io/rewrite-target: /
spec:
  rules:
  - http:
      paths:
      - path: /echo
        backend:
          serviceName: echo-service
          servicePort: 80

動作確認

http://localhost/echo にアクセスすると「Hello Docker!!」が返ってきました。成功です。

所感

Windows Homeでも手軽にDockerやK8sが試せるようになって本当に素晴らしいなと思いました。
ちなみにWindows 7以降のProライセンスを所有しているとWindows 10もProにできるそうで、8年前に購入した8のProライセンスで試してみたら普通にアップグレードできました。この記事何のために書いたんでしょうね。

QiitaのTシャツが届きました。

Qiita夏祭り2020オンライン プレゼント企画 結果発表! – Qiita Blog
Qiita賞で優秀賞をいただきました。ありがとうございます。

昔こういう記事を書いたのですが
だから私はQiitaに投稿しない。 – return $lock;
Qiitaに対するスタンスは変わってないです。というか、ガイドラインが曖昧すぎてプログラミングに関係ある記事とない記事の線引がわからないので投稿できないです。思いつきでメモを書くこともありますが、メインは個人ブログでやっていこうと思います。