IROIRO

Re:Tepa は、元々 TepaEditor という名前で公開していたテキストエディターのリメイク版という位置づけのアプリ。

TepaEditor は Delphi製の Windowsネイティブアプリだったが、Re:Tepa は Webアプリを Electron によってネイティブアプリ化している。

Re:Tepa の最初のバージョンである 0.1.0 では Webアプリのフレームワークとして Vue2 を採用していたが、今回 2年半ぶりにリリースした 0.1.1 では React に変更した。

それに伴い関連するライブラリーや開発ツールなども全面的に置き換えとなった。

主な変更内容がこちら。

• Webフレームワーク：Vue (vue-cli) → React (Create React App)
• ルーティング：vue-router → React Router
• ステート管理：Vuex → Recoil (+Recoil Nexus)
• i18n：vue-i18n → react-i18next
• CSSトランジション、アニメーション：Vue → React Transition Group
• CSS：Vue(sass) → styled-components
• 画面分割：vue-resize-split-pane → Allotment
• Electron ビルド：electron-builder (vue-cli-plugin-electron-builder) → Electron Forge
• e2eテスト：Spectron → Playwright

以下は元のままで最新版に更新。

• ネイティブアプリ化：Electron
• エディターエンジン：Monaco Editor
• ユニットテスト：Jest
• リンター：eslint
• コード整形：Prettier

基本的には Vue で使っていたライブラリーを React で実現するためのライブラリーに置き換えている。CSS、アニメーション周りは Vue 自体の機能 (+WebPack) として提供されていたが、React については相当するものがないので外部のライブラリーを新たに追加した。

ステート管理には Facebook が開発している Recoil を採用。まだベータ段階だが、扱いが Redux や元の Vuex と比べても非常に楽なので使ってみたいと思い、先行して採用することにした。

ちなみに Recoil は基本 hooks のインターフェイスしか持っていないため、React コンポーネント外からの値の更新ができない。そこで Recoil Nexus というライブラリーを使って、React の外側からでも更新ができるようにした。Recoil Nexus は中身的には Recoil の useRecoilCallback で提供される get, set メソッドを無理やり外に出して (一旦空コンポーネントから hook を呼び出して内部で保持している) 参照できるようにしているもので、ちょっと裏技感があるなと思いつつ、今のところは問題なく動作しているので様子を見つつ使っている。

e2e テストやビルドツールの変更については別の機会に。

そしてこちらが Re:Tepa の構成図。(ちょっと小さくて見づらいが...)

基本的には React の部分が Vue から置き換わったのだが、それ以外の部分もごちゃごちゃして役割分担が曖昧になっていたので、Reactへの書き換えに合わせて整理して React → Commands → Searvices(Operators) → Recoil → React という流れの完全な単方向データフローになるように修正した。(むしろそっちの方が時間がかかった。) ただ、Monaco Editor がちょっと他の Reactコンポーネントからは独立した位置づけにあるので、若干矢印がややこしくなっている。

Service の中に Operator というのがあるのが若干冗長に見えるかかもしれないが、ちゃんと理由がある...のだが、この点についてもまた別の機会に。

Action というのは、元々は Delphi のライブライリー（VCL）にあった TAction というクラスを模したもの。1つのアクションを複数のコンポーネントに紐づけることで、共通のステートやメソッドを扱えるという便利なもので、Vue の時はプラグインの形で実現していた。React の場合は hooks とステートで同じような事ができてしまうので、カスタムフックと Recoil を組み合わせて Action に近いことを実現している。

書き換えの理由

Vue から React に乗り換えた最大の理由はモチベーション。

元々は Vue 最高！ React イヤだ！ JSX キモチワルイ！くらいの Vue派だったのですが、業務で本格的に React を触るようになって React 意外と悪くない！hooks 便利！JSX はやっぱちょっと...くらいに思うようになっていった。

加えてなかなかリリースされない Vue 3 (ようやくされたけど) 、そしてそこで採用予定の Composition API の直感的ではない点に嫌気が差し、Vue と React の立場が完全に逆転。

そしてしばらく放置状態になってしまった Re:Tepa を Vue で書かれたままにしておいたら、いよいよもってこのまま触らなくなってしまうと危機感を感じだし、最初のリリースから 1年経った 2021年末ごろから書き直しに着手することにした。

その後も仕事とゲームのの合間を縫ってちょこちょこ書き直していき、ようやく元の状態にまで持ってくることができた。

まあ React もあとどのくらい持つのか、という話もあるが、少なくとも突然消えて他に移り変わることはない...かもしれない...(し、そうなったら何で書いてても一緒)ので、とりあえずはこれを機にペースアップしてければと思う次第である。

また、開発の中でいろいろと得られた知見も多いので、それらも徐々にまとめで出せていければと考えている。

以上、よろしくお願いいたします。

2022年早々、メインで使用しているパソコンがご臨終となり、再生するまでの顛末。

これまでの経緯

2019年12月 新しいパソコンを自作

前のパソコンから移行してメインマシンに → 組んだ時のスペック

2021年11月 放置していたらログイン画面に戻っていることに気づく

つまり勝手に再起動していたということ。

実はこれまでにも再起動直後にマウスが認識せず、刺しなおしかデバイスの無効化・有効化切り替えをしないといけないという症状がチョイチョイ起きてて、若干怪しい気配はしていました。

2021年12月 再起動する頻度が増える

数日に 1度から 1日 1回くらいの頻度に。sfc や dism コマンドなど一通りの修復を試しても改善せず。

2022年 1月 クリーンインストール実行

するとクリーンインストールの最中にブルースクリーンが出てしまう始末。この時点で原因がハードウェアにあると断定。

とりあえず、手元にあった予備パーツで交換できたメモリーと SSD を替えて試してみても改善しないため、残る原因は

• 電源
• マザーボード
• CPU
• グラフィックボード

に絞られました。

ただ、BIOS（UFEI）画面や USBメモリーから起動した Windows インストーラーでは特に落ちたり不安定な症状がなかったことから、電源やグラフィックボードではなさそうな感覚。（グラフィックボードであれば映像周りにも支障が出るはず）

またブルースクリーンの際のエラー原因も一定ではなかったことから、おそらくこれはマザーボードの異常であろうと断定し、急遽マザーボードを交換することに決定。

明日ママを買いに行きます。 pic.twitter.com/R8Y6mdzMFR

— また毒魚人 (@hajime) January 9, 2022

死

現行のマシンが Ryzen 5 3600 だったので対応するマザーボードを...と思って調べていると、どうやら 2021年11月に出た第 12世代の Intel Core シリーズがだいぶよさそうという情報を目にして、いろいろ調べた結果、CPU ごと取り替えることにしました。

準備

今回は早い段階からクリーンインストールをする方向で考えていたので、事前の計画も比較的余裕をもって行えました。

• WSL のエクスポート
• ダウンロードフォルダーの整理、バックアップ
• hosts のバックアップ
• Adobe CC のライセンス解除

バックアップは OneDrive と NAS へ。

あとはユーザーディレクトリーの中も確認して、ローカルにある設定ファイルも必要に応じてバックアップ。それももう、あらかたクラウド保存されるので、そこまで気にしなくてよくなりました。

WSL のエクスポート

最近はほとんどの開発環境を WSL 上の Ubuntu に押し込んであるので、それを丸々エクスポートしてバックアップ。

あとはクリーンインストール後にインポートするだけで元の開発環境が復旧できるのでとてもお手軽。

参考：https://forest.watch.impress.co.jp/docs/serial/yajiuma/1220926.html

ダウンロードフォルダーの整理、バックアップ

ブラウザーからダウンロードしたファイル以外にもとりあえずの保存先がダウンロードフォルダーになっていたので、明らかにいらなそうなものやインストーラーなどは削除して、画像やドキュメント系を念のためにバックアップ。

hosts のバックアップ

開発環境にローカル用のドメインを振って参照するために割といじるので、これもバックアップ。

Adobe CC のライセンス解除

もう最近は Web からも解除できそうですが念のため。

パーツの購入と組み立て

パーツは秋葉原のお店を何軒か回ってドスパラで購入。本当はネットで買った方がポイント還元されたり、購入履歴が残ったりでいいのですが、仕事に支障が出てしまうのでパーツが届くのを待っていられません。

CPU は Core i3 12100F が軒並み売り切れていたので、Core i5 12400F。マザーボードはメモリーを前のマシンから流用するので DDR4 で、メーカーも前のマシンと同じ Gigabyte のものを選択しました。

• CPU: Intel Core i5 12400F
• マザーボード: Gigabyte Z690 UD DDR4

まずは CPU とクーラーを装着して、メモリー、グラフィックボード、ケーブル類をつないで...というところで前のマシンの電源だと給電ケーブルが足りてないことに気づき、あわてて新宿まで行ってヨドバシカメラで電源を購入。（前の PC も足りていなかったようなので、これが不調の原因かもしれない...）

• 電源: 玄人志向 KRPW-GK750W/90+

改めて電源をつないで、マウスとキーボード、ディスプレイは 1台だけ接続して電源オン。無事起動して動作は特に問題なさそうなのでケースを閉じて OS をインストールしていきます。

Windows 11 インストールと環境の復元

とりあえず Windows 10 をインストールしたのですが、せっかくきれいな環境になったので今のうちに Windows 11 を入れてしまうことにしました。(最初から Windows 11 を入れてもよかったですが、気づいたのが遅かった。)

一通りの Windows Update と Chrome を入れてから、(Windows 11 のダウンロードページ)[https://www.microsoft.com/ja-jp/software-download/windows11] から「Windows 11 インストール アシスタント」をダウンロードして実行。（Windows Update 経由だとしばらくたたないとアップグレードできない）

画面の指示に従って、こちらも問題なくインストールが完了。（とりあえず、アニメーションがいまいち不自然なので「設定」アプリ→「アクセシビリティ」→「視覚効果」から「アニメーション」をオフにしておきました）

Windows 11 に上げた途端、キモイ背景になった。 pic.twitter.com/qcashm2ciM

— また毒魚人 (@hajime) January 10, 2022

洗礼

周辺機器の接続とドライバーのインストール

取り急ぎ、グラフィックボードのドライバーをインストールしてから残りのディスプレイを接続。

ペンタブレット、Bluetoothのレシーバーを接続して、ペンタブレットのドライバーだけインストール。これでハード系は一通り接続完了。

WSL の復元

エクスポートしておいた WSL 環境を復元するために、まずは WSL を導入。

PowerShell かコマンドプロンプトを管理者権限で起動して、 > wsl install を実行するだけで WSL 環境が導入できてしまうのでとても楽ちん。

ただデフォルトの Ubuntu が同時に入ってしまうので、これはいったん削除してから バックアップしておいた tarファイル を wsl --import で読み込みます。（読み込みの時は読込先のディレクトリーを指定しないといけない。）

Docker Desktop の導入

本当は WSL 上に Docker を入れて直接動かそうとしたのですが、前の環境が Docker Desktop を入れていたこともあってかうまく動かず、とりあえず時間をかけたくなかったので Docker Desktop を導入。

WSL 環境を作り直せばいけそうですが、時間がかかりそうなのでとりあえず今回は見送り。

アプリのインストール

すぐ使う VSCode、VoiceMeter Banana、原神、OSB Studio をインストール。VSCode はストアアプリから、それ以外は公式サイトからインストーラーをダウンロードしてインストール。ついでに PowerToys もストアアプリからインストール。

その後の経過

今のところ特に問題なく使えていますが、あとから入れた PhotoShop を触り始めるとフォーカスがどこか別の場所に当たって戻ってを繰り返して再起動するまでまともに操作できなくなる症状が発生。ただこれは Windows 11 と PhotoShop の問題な感じがするのでしばらく様子見。

まとめ

不調になったマシンが初の AMD Ryzen だったのですが、結局 1年ほどで Intel Core に戻ってしまいました。

思えば AMD の CPU は K6-2 あたりに一度組んだことがあり、その時もあまり安定せずに結局 Pentium に戻ってしまったので、あまり相性が良くないかもしれません。

とりあえず安定動作を取り戻したのでこれで心置きなく 原神がプレイできる 仕事に励むことができそうです。

以上、よろしくお願いいたします。

部屋の片づけをしていたら、大分前に壊れて電源が入らなくなったニンテンドー3DS LL 本体が出てきました。

今回はそれを自力で修理して電源が入るようになった後にまたぶっ壊して、再度動くようにしてみました。

破損状況

壊れた原因は水没です。といっても完全に水の中に落としたというわけではなく、ゲリラ豪雨で 3DS を入れていたカバンがびしょびしょに濡れてしまい、乾かしても電源が入らなくない状態になってしまいました。

割と本体カラーが気に入っていたので残念

完全に水に浸かってしまっていたら流石に諦めますが、雨で濡れた程度だったら少し水滴が入った程度だし大したことでもないだろうということで、とりあえず任天堂の修理窓口に修理依頼を出してみました。

数日後に送られてきた修理の見積もを見ると、新しく買うのとそこまで変わらないくらいの金額。だったら新しいのを買ってしまおうということで修理はキャンセルして別色の本体を購入。

壊れた方は返送されたまま保管して、5～6年くらい経ったものが今回出てきたとうことになります。

SDカードはちゃんと注意を添えて返してくれました

まずは中を見てみる

改めて電源ケーブルをつないでみた所、充電ランプは点灯するものの、やはり電源は入りません。

どうせ動かないのだし、ちょっと分解して中の状況を確認してみることにしました。

「3DS LL 分解」などと検索すると手順が紹介されたサイトがいくつかみつかるので、それを頼りに本体を分解していくと、それほど苦戦することなく基板が見られる状態までたどり着くことができました。

修理サービスから送られてきた見積もり書には、破損部分の写真の説明も送られてきたのですが、何年も経っているのでどこかにいってしまいました。

そこには基板のどこかに水没による破損が見られると書かれていたと記憶しているのですが、基板上を眺めてみてもおかしな部分は見当たりません。

ただ、音量調整スイッチをよく見ると少しサビてるような個所が見つかり、おそらくこの部分から水が入ってきたのだろうと推測し、その周辺を確認。

赤丸で囲った部分が少しサビています。

サビていたり、若干くもっていたりしている個所をティッシュで拭いてから、一旦閉じて電源を入れてみることにしました。

起動成功、しかし...

すると見事に電源がオンになり、ホーム画面が表示されました。

やったー！と喜んだのもつかの間、新たな問題が発覚。

ホーム画面でカーソルが勝手に右方向に移動してしまい、戻してもまたすぐに右に移動、つまり右カーソルが押されっぱなしのような状態になっていました。

改めて本体カバーを開けて基盤を確認。サビや基板の異常がないかを確認して戻してまた起動、というのを何度か繰り返していた所

「あっ...」

LRボタンのフレキシブルケーブルを両方とも切断してしまいました。

これは詰んだかな...と思ったのですが、今の時代、3DSのパーツくらいバラで手に入るだろうと調べてみると、あっさり Amazon の商品ページがヒット。

送料無料で 400円ちょっと、レビューも何件かついていたので安心です。ついでにカーソルキーの異常はスライドパッドのユニットがおかしくなっている可能性があるので、それも同時に注文。

両方合わせても 1,000円ちょっとで、修理に出すよりもまだまだ大分安く済んでいます。

パーツ交換、そして...

後日、注文していたパーツが届いたので、早速交換してみます。

LRボタン(左)とスライドパッド(右)

まずは折れた LR ボタン。固定用のパーツを外し、今度は壊さないように慎重にパーツを交換します。

続いてスライドパッド。これはフラットケーブルの差し込みが若干苦戦しますが、無事に交換完了。

ちなみに左端のテープは音量スイッチの固定パーツを壊してしまったものです...

軽く固定した状態で組みなおして電源を入れてみた所、LRボタンは問題なく動作したものの、やっぱりカーソルが右に移動しっぱなしの症状は改善しません。

スライドパッドが原因ではないとすると、残るは十字キーとなるわけですが、こちらは基板に固定された状態なので手の出しようがありません。

基板の裏側にある十字キー部分。端子が完全に基盤と一体化しています

基板の異常だとさすがに無理かなと思いつつ、十字キーの基盤部分を改めてよく観察してみると、押されっぱなし状態になる右キーに対応した基板周辺に若干サビたような個所を発見。

矢印の部分が若干サビてるように見える

十字キーは最初にサビてた音量調整スイッチに近いので、これが原因ではないかと睨みました。

しかしこの部分、何やらシールのようなもので覆われていて、サビを拭きとるようなことは難しそう...と思いきや、何やら隅っこの方にシールがめくり上がったような個所を発見。

同じ画像 3回目ですが、矢印の部分が少し剥がれています。

これは剥がしちゃうと元に戻せなくなりそうですが、もはや元に戻らなくなっているようなものなので、思い切ってこのめくれた部分から剥がしてみることにしました。

もうどうにでもなーれー

すると、想像以上にスムーズにシールが剥がれていき、最終的にほぼ無傷の状態でシールを外すことができました。

構造としてシールに貼り付けられたドーム状の金属パーツが十字キーとその下のゴムパーツを介して押されることでドームがへこみ、基板側の回路と通電して押された状態になるという仕組みのようです。

剥がした部分を見てみると基板側の回路が黒ずんだ状態になっていて、特に右カーソルに対応した部分がひどくサビているように見えました。

ひとまず、この黒ずんだ個所をティッシュとピンセットを使って擦って錆を落としてみることにしました。

ティッシュで擦ったあと。最初よりはキレイになったように見えます。

ある程度黒ずみが落ちたように見えたので、シールを元に戻し、基板とカバーを元通りにして電源を入れてみました。

すると前よりひどくなり、右に加えて上方向も押されっぱなしのような動作になってしまいました。

完全終了。

...と思ったらスライドパッドが外れたままでした。付け直して再度電源投入。

なんと直ってしまいました。

ゲームも起動してみましたが問題なく動作。カーソルキーが勝手に押されるようなこともなく、普通にプレイできるようになりました。

というわけで、原因としては音量スイッチ周辺から入り込んだ水滴で周辺がさびてしまったことで、それを除去することで回復できた...ということのようです。

結局発注交換したパーツ自体は直接の原因ではなかったので、無駄に壊して直しただけになってしまいましたが、それでも 1000円ちょっとの出費で済んだので安いものです。

また何か壊れた時には分解修理にチャレンジしてみたいと思います。

以上、よろしくお願いいたします。