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

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

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

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

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/

ポケモンホームのバトルデータ(ランクバトル)のJSONを解析する。

概要

ポケモンホームのバトルデータ、UIがクソすぎるとても癖があるので、自分で加工したいと思いました。
バトルデータの中身は普通のWebページで、中でWeb API的なものが使われているので、自分でこのAPIを叩けばクソみてえな癖のあるUIを使わなくて済む上に検索もできます。いいことしかない。

ちょっとJSONの量が多いので記事を折りたたみます。続きを読むからどうぞ。

2020/08/17追記

せいかくが取得できるようになったので、書き直しました

Continue Reading

ARRISのケーブルモデムの脆弱性(2015年発見)を2020年に知った話。

今NURO光がアツイですね。
NURO光はセキュリティ的にやばいって話 (安全に使うための方法) - Qiita
NURO光、今の家に引っ越してきたときに契約を検討してたのですが、工事の前段階になって業者と一切連絡取れなくなって、結局そのまま契約できませんでした。
光回線が開通するまで仮でCATVのインターネットサービスを契約したのですが、支障なく使用できるレベルだったので、未だにCATVを使い続けています。

ARRISという会社のケーブルモデムがレンタルされまして、その下に自分たちで用意したルータ接続して使っています。そういえばケーブルモデムのセキュリティってどうなってんのかなぁと思って調べてみたら、なかなかすごいのがみつかりました。
ARRIS Cable Modem Has a Backdoor in the Backdoor | Hacker News
w00tsec: ARRIS Cable Modem has a Backdoor in the Backdoor

ARRIS password of the day is a remote backdoor known since 2009. It uses a DES encoded seed (set by the ISP using the arrisCmDoc30AccessClientSeed MIB) to generate a daily backdoor password. The default seed is MPSJKMDHAI and guess what – many ISPs won’t bother changing it at all.

いうてもうシード変更してくれてるでしょと思ったら変更されてなかったし、普通にコンソールに入れてめちゃくちゃ笑いました。やべえ。ファームウェアのバージョンも最新じゃないし(多分デフォルト)対応してほしいのでCATVに問い合わせました。NURO光馬鹿にできなかった。
一応グローバルIPからコンパネに入れないことは確認したけど不安ですね…。ちなみにCATV契約したのは2015年をとっくに越えたあとだったので、なんでこんなことになってるかは知らないです。

2020/06/02 追記

CATVの会社に問い合わせた結果が返ってきました。
問題は把握済みで、外部からのルートは塞いであるのと、ファームウェアはあえてバージョンを上げていないとのことでした。
外からいじられて困る項目は全部無効化しといたのでとりあえずは大丈夫かな~と思っています。

ポケモンホームのバトルデータをPCのブラウザで表示する。

ポケモンホームという最高にUIと機能が終わってるアプリがあるのですが、ついにランクバトルとインターネット大会の統計情報が見られるようになりました。
バトルデータの内容はWebViewで表示されています。
ただUIが終わっていて癖があって死ぬほど操作しづらいのと、バグっててページ送りができないため、素のブラウザで情報を見ることにします。

どちらもログインなしで参照できます。

  • ランクバトル
    • https://resource.pokemon-home.com/battledata/rankmatch_detail.html
  • これまでに開催された大会
    • https://resource.pokemon-home.com/battledata/internetcompetition_list.html

タイトルがRankumatchなんですが大丈夫なんでしょうか。ほんと心配になる。

認証系も突破できそうなのですが、詳細書くのも良くないのでここでは言及しません。

URLの調査にFiddlerを使いました。やっぱり便利ですね。
早くブラウザ版を公開してほしいのと、このレベルでお金とるのマジでやめてほしいな~って思いました。
名探偵ピカチュウの地上波放送に剣盾のCM挟むのほんとずるいですね。