確定申告が面倒くさかったのでマイナンバーカードを作った
マイナンバーカード

確定申告が面倒くさかったのでマイナンバーカードを作った

ということで、マイナンバーカードを作った。 元々は作るつもりはなかったんだけど、2020年度の確定申告でマイナンバーカードが無かったために会計ソフトからそのまま確定申告書を提出できず、確定申告書等作成コーナーで改めて作成(データはコピペ)したんだけど、そのあたり割と面倒だったので、2021年度からは会計ソフトから直接提出しようってことで、マイナンバーカードを作ることにした。 まずマイナンバーカードの交付申請書が必要になるんだけど、それが手元には届いていない。 マイナンバーカード交付申請書を手に入れる ということで、まずは交付申請書を手に入れる必要があった。 とりあえず役所に行ってマイナンバーカード作りたいんですけどーっと窓口の人に伝えたところ「申請書IDを作る必要がある」とのこと。 役所の人の話では、通知カードと一緒に申請書IDを登録するための書類も添付されてたらしいんだけど、作るつもりはなかったので破棄してた。 ということで、まずはその登録から、ここで身分証明書が必要だった。 色々書いて提出。 登録してから交付申請書の手続きが必要なんだと思ってたけど、実際は申請書
2 min read
M1 MaxのMacBook ProにしたらReact Nativeのビルドが4倍早くなった
MacBook Pro

M1 MaxのMacBook ProにしたらReact Nativeのビルドが4倍早くなった

今話題のM1 MaxのMacBook Proを買いました! 通知くんのビルドに凄い時間がかかっているのでそれを早くしたいのと、コロナ禍になってメインPCをWindowsにしたのをあわよくばMacBook Proに戻せたらと思って買ったわけですが、通知くんのビルドについてはめちゃくちゃ快適になりました。 MacBook Pro 2017と比べてみる 元々使っていたフルカスタムのMacBook Pro 2017と比較してみます。 一覧にするとそんな感じ。 コマンド MacBook Pro 2017 M1 Max MacBook Pro yarn install 68.12s 35.64s(191% UP) pod install 555.16s 376.09s(148% UP) react-native run-ios 519.18s 140.06s(370% UP) react-native run-android 72.89s
2 min read
二代目ErgoDashを作った
自作キーボード

二代目ErgoDashを作った

前回作ったFortitude60がマイコン故障でお亡くなりになってしまったので、改めてキーボードを作ることになりました。 今回の条件は以下のような感じでした。 * 60キーぐらい * 分割型 * ProMicro使用 * Elite-Cを使えばUSB-Cにできる * BLE Micro Proを使えば無線化もできる * すぐに買えるもの(重要) 前作Fortitude60にしたのはコネクタがUSB-Cであることも理由の一つだったんですが、USB-CにしたいだけならElite-Cを使えば良いことに気付き、無線にするのにもBLE Micro Proを使えば良さそうだということで、結果よく使われているProMicroをマイコンにして設計されているキーボードを選択しておけば良さそうだという結論に至りました。 ということですぐに入手できそうだったErgoDashをまた作ることにしました。 ビルドログ 基本的には遊舎工房さんが用意しているビルドガイド通りにやっていきました。 build-documents/ErgoDash/ErgoDash_BuildGuide
6 min read
自作キーボードを組む時はソケット化しておこう
自作キーボード

自作キーボードを組む時はソケット化しておこう

先日突然、以前作ったFortitude60で6, y, h, n, [の5文字が入力出来なくなってしまいました。 それまではいくつか問題があってにせよ、文字を打てないことはなかったので原因が全く分からず、Self-Made Keyboards in Japanの皆さんに助けを求めました。 結果としてマイコンが死んでるんじゃないかという結論に至ったんですが、その過程で作る時点で色々やれることがあったと分かったので、次作るときに向けて書いておきます。また、初めて作る方も参考になると思います。 大きくは2つです。 1. キースイッチをソケット化しておく 2. マイコンにはコンスルーを使う 要するにメンテナンス性を高めた状態で組もうということです。 キースイッチをソケット化しておく ソケットとは、PCBにキースイッチをはんだ付けするところを変わりにソケットを付けておくことで、キースイッチをかんたんに外せるようにするものです。 ソケット化するとキースイッチをあとから変更出来るので、あとから軸を変えられたり、PCBに何かあった時にキースイッチを取り外して検査することが出来るよ
3 min read
フルカラーLED対応のFortitude60を作った
自作キーボード

フルカラーLED対応のFortitude60を作った

以前作ったErgoDashの調子が悪く左右の接続が切れることが多々ありました。もう一回ErgoDashでも良かったんですが、せっかくなので別のものということでFortitude60を作ることにしました。 オプションでUnderglowのフルカラーLEDの追加、USB-C同士での接続にも対応したりしています。 ビルドログ 基本的には公式のビルドガイド通りにやっていきました。 fortitude60/Documents/buildguide_jp_v1.1.md at 497bc654e378b9f5650ad7262a246611cc706925 · Pekaso/fortitude60Contribute to Pekaso/fortitude60 development by creating an account on GitHub.GitHubPekaso 0. 内容物確認 1. ダイオードの取り付け 1-1. ダイオードの足を折る 1-2. ハンダ付け 2. TRRSジャック、タクトスイッチの取り付け この時、適当にやるとTRRSジャックが若干浮
5 min read
新型コロナワクチン接種2回目が終わったのでまとめとく
COVID-19

新型コロナワクチン接種2回目が終わったのでまとめとく

30代の中では比較的早いタイミングで2回目接種が終わった気がするので、今後打つ方の参考になればと思いかんたんにまとめておきます。 ※副反応については個人差があると思うので参考程度に見てもらえればと思います ちなみに集団接種でも職域接種でもなく個別の病院で接種しました。 1回目 1日目、打って数時間で接種部位に軽く痛み。以降徐々に痛みが増して腕上げるのが辛くなる。 痛みは肩パンやったあとみたいな感じ。 夜に発熱、頭痛(予め用意していたロキソニン飲んで寝る → 朝には復活) 2日目、基本腕の痛みだけ継続。頭痛等はなし。 3日目、痛みもほぼなくなって、大体回復。 1回目は1日目が重くてあとはそんなに調子悪い感じはなかったです。 2回目 打って数分後から接種部位に軽く痛み。1回目よりも早くてちょっと心配に。 またもや夜に軽く頭痛を感じたので念のためにロキソニンを服用。 脇の下の痛みが酷くて辛い感じでした。あとはずっとなんか調子悪いなって感じです。 それが4~5日間続きました。 1回目より長引いたので辛い感じはありましたが、症状としては比較的軽い方だったのかもしれない
2 min read
React NativeでAndroidのリリースビルドだけ起動後にスプラッシュ画面で止まる
React Native

React NativeでAndroidのリリースビルドだけ起動後にスプラッシュ画面で止まる

先日リリースした「通知くん」のAndroid版を開発しています。 そこで原因不明の問題が発生、なんとか解決出来たのでその方法など書いておきたいと思います。 あまり同じ症状の方も見なかったのでちゃんとドキュメントを読んでセットアップすれば発生しない問題なのかもしれません。 症状 buildTypesに「staging」を追加している状態で./gradlew assembleStagingを実行して出来たステージング用のapkをインストールして確認しようとすると 最初のスプラッシュ画面が表示されたあと、うんともすんとも言わず止まってしまう。 他にも、./gradlew assembleReleaseで出来た本番用のapkでも同様。 また、yarn android --variant releaseを実行して、シミュレーターで確認しても同様です。 buildTypesの設定 以下のような設定をしています。 buildTypes { debug { applicationIdSuffix '.debug' signingConfi
2 min read
個人で作ったイベントスケジュール管理アプリをリリースしました
個人開発

個人で作ったイベントスケジュール管理アプリをリリースしました

個人で作ったイベントスケジュール管理アプリ「通知くん」をリリースしました! リリースしたアプリ iOS版 ‎通知くん - イベントスケジュール管理‎◆主な機能 • 新商品の発売開始、スマホゲームのイベントなどのスケジュールを登録できます • 登録したイベント開始日時の前にプッシュ通知で開始をお知らせします • アカウント連携で機種変更してもデータを引き継げます 利用規約:https://shining-tank-11e.notion.site/7bcc38e153f34ba5bae8096f39ca4eb6 プライバシーポリシー:https://shining-tank-11e.notion.site/2efd5fbf95ed4b419b0f5b589fa8bae9App StoreTatsuya Deguchi Android版 通知くん - イベントスケジュール管理 - Apps on Google PlayRegister the event! Don’t forget with notificationsApps on Google PlayTatsuya Degu
4 min read
Expo Bare Workflowで複数環境に対応する
Expo

Expo Bare Workflowで複数環境に対応する

最近、ExpoのBare Workflowで複数環境に対応することがあったので備忘としてやったことを残しておきます。 ここでいう複数環境とは開発、ステージング、本番などのアレです。 今回は、開発用、ステージング用、本番用それぞれにデバッグとリリースのアプリをビルドできるようにしました。なので全てビルドすると全部で6つのアプリが作られることになります。 あとiOSについてのみです。Androidについてはいずれ。 やったことは以下の通りです。 1. Bare Workflowで初期化 2. Configurationを追加する 3. Schemaを作成する 4. 複数アプリをビルドできる環境作り 5. iOS Development TargetとPodfileのバージョンを揃える 6. Podfileを整える 最後の「Podfile」の調整がどこにも書かれてなくて苦労しました。 ちなみにExpo SDKのバージョンは41です。 Bare Workflowで初期化 $ expo init bare-workflow ? Choose a template:
3 min read
個人でBasenoteというノートアプリをつくってます
個人開発

個人でBasenoteというノートアプリをつくってます

Basenote(仮)は、リッチテキストなんだけどMarkdownショートカットが使えるノートアプリです。 かんたんに言ってしまうとDropbox Paperのデスクトップ版、EvernoteのMarkdownサポート強化バージョンとかを目指して個人で開発をしています。 以前はDropbox Paperを使って個人的なメモを残していたんですが、日本語入力がバグったり、オフラインで使えなかったりしたのが辛い感じでした。 その後、Inkdropも使ってみたんですが、こちらはこちらでMarkdownベースなのでテーブルが作りづらかったり、リンク先のOGPが展開されなかったり(これDropbox Paperだと出来て好きな機能なんです)というツラミを感じでモヤモヤしていました。 まあそんな感じで既存のノートアプリに色々ツラミを感じていたので自分で作ってみようかなという感じでBasenoteを作ることにしました。 一応最低限の部分は作れたので既に個人のメモはBasenoteを使って取っています。 いずれ公開したいなーと思いつつ鋭意開発中です。今後も続報などをこちらで発信し
1 min read
GatsbyJS + Material-UIのブログにCSS in JSのEmotionを導入する
Gatsby

GatsbyJS + Material-UIのブログにCSS in JSのEmotionを導入する

このブログの見た目はMaterial UIをベースにstyle属性を使って調整していましたが、RichLinkコンポーネントを作った際にどうしても画面の小さいスマホ用のスタイルと画面の大きいPC用のスタイルを分ける必要が出てきました。 style属性のままだとMediaQueryが使えないので今回はEmotionを導入することにしました。 手順 ①必要なNPMパッケージをインストールする yarn add @emotion/core emotion-theming gatsby-plugin-emotion # or npm install @emotion/core emotion-theming gatsby-plugin-emotion ②gatsby-plugin-emotionを読み込む module.exports = { <!-- 中略 --> plugins: [ 'gatsby-plugin-emotion', ], } ③emotion-themingを使えるようにする // 中略 import { MuiT
1 min read
外部イメージにgatsby-imageを適用する方法
Gatsby

外部イメージにgatsby-imageを適用する方法

以前行った外部リンクのリッチ化の続きです。 元の状態は取得した画像のURLを直リンしてしまっていました。 読み込みのラグもありますし、何より相手のサーバーに負荷をかけることになるので一回習得してしまってGraphQLでいい感じに使えるようにしようというのが今回の趣旨です。 解説 外部イメージを扱いたい時はcreateRemoteFileNodeを使います。 前回のコードに処理を追加します。 const { createFilePath, createRemoteFileNode, } = require('gatsby-source-filesystem') // 中略 exports.onCreateNode = async ({ node, actions, getNode, getCache, createNodeId, }) => { if (node.internal.type === 'LinksYaml') { // 中略 // image let image_url if ($(
1 min read
GatsbyJSの外部リンクをリッチにする
Gatsby

GatsbyJSの外部リンクをリッチにする

以前の記事の今後やっていきたいことにもあげていた外部リンクの見た目を良くするためにRichLinkコンポーネントを作成しました。 使い方 https://www.deg84.com/create-sitemap-with-gatsby/ 解説 レンダリング時に取得しようとするとCORS(Cross-Origin Resource Sharing)の対策が必要なのでgatsby-node.jsでビルド時に情報を取得しておきます。 基本的にはOGPの内容を取得します。設定がない場合はmetaなどの情報から取得するようにしてみました。 取得するURLの一覧はYAMLで別途管理しておきます。 exports.onCreateNode = async ({ node, actions, getNode }) => { const { createNodeField } = actions // 中略 if (node.internal.type === 'LinksYaml') { const data = { url: node
2 min read
GatsbyJSでsitemap.xmlを出力する

GatsbyJSでsitemap.xmlを出力する

現状は全てのページにリンクが張られている状態なので効果が薄いような気もしますがsitemap.xmlを出力します。 とりあえず出力するだけならgatsby-plugin-sitemapを使うのが楽です。 手順 ①gatsby-plugin-sitemapをインストール yarn add gatsby-plugin-sitemap # or npm install --save gatsby-plugin-sitemap ②gatsby-plugin-sitemapを設定する module.exports = { siteMetadata: { siteUrl: `https://www.deg84.com`, // siteUrlの設定が必要です }, plugins: [ // 中略 { resolve: 'gatsby-plugin-sitemap', options: { sitemapSize: 5000, // 5000件毎にXMLファイルを分割する設定 },
1 min read
prism-react-rendererでRubyのシンタックスハイライトを有効にする方法
Prism

prism-react-rendererでRubyのシンタックスハイライトを有効にする方法

このブログではシンタックスハイライトを実現するために以前の記事でも紹介したようにprism-react-rendererを使っていますが、どうやらRubyのシンタックスハイライトが効いていないみたいだったので対応しました。 解決方法はREADMEのFAQにありました。 手順 ①Prismの本体が必要になるのでインストール yarn add prismjs # or npm install prisimjs ②prism-react-rendererのPrismをwindow.Prismに代入してRubyのコンポーネントを読み込む import React from 'react' // highlight-start import Highlight, { defaultProps, Prism } from 'prism-react-renderer' // highlight-end import './code.sass' // TypeScriptを使っている場合は型が怒られるのでdeclareが必要 declare global { // e
1 min read
Ruby向けのQuadkeyライブラリを作りました
個人開発

Ruby向けのQuadkeyライブラリを作りました

quadkey gemを作りました。ベースは公式にあるC#のものです。 実は3年ぐらい前に公開しているものなので今更ですが。 Quadkeyとは 緯度経度を使って範囲を指定したいときに使われるGeohashと同じようなものです。 Geohashはその仕組み上、長方形で範囲を表現するので若干使いづらいところがあったんですが、Quadkeyは正方形で範囲を表現するのでGeohashより使いやすいかなと思います。 画像のようなイメージです。 地球全体を4分割、更に4分割という感じでドンドン分割していきます。 例えば、北半球のアメリカの辺りがQuadkeyの0になり、アジアからヨーロッパのあたりが1。みたいな感じです。 東日本のあたりを表すのは133となります。 という感じで桁数が1つ増えると範囲が1つ狭まります。 東京タワー周辺とかを表現する場合は1330021123031133になります。 使い方 READMEに書いてある通りですが、前述の東京タワーを例にしてみます。 緯度、経度、精度(桁数)からQuadkeyを計算する Quadkey.encode(35
2 min read
GatsbyJS + Netlify + MDXでブログ作ってみた
Gatsby

GatsbyJS + Netlify + MDXでブログ作ってみた

以前から技術的なことはQiita、それ以外ははてなブログに書くようにしていたんですが、Qiitaは色々問題が出てきて投稿するのをためらうようになり、はてなもちょっと使うのを躊躇するようになってしまってどこにもアウトプットが出来なくなってしまいました。 まあなんとなく察して下さい。 ってことで何か良いサービスないかなと探したんですが良いものが見つからず結局自分で作るかということになりました。 ちなみに要件はこんな感じでした。 * Markdownで書ける * エクスポートできる * OGPがいい感じになる * はてなブログとかQiitaとかのイメージ * 今どきの見た目 * 技術的な記事以外もOK * メンテナンスコストなし(できれば) * 独自ドメイン設定できること(マストではない) もし何か良いサービスあれば教えてください。 Qrunchは結構条件に当てはまったんですが、技術的な記事以外がNGだったので今回は見送りました。 技術スタック * Gatsby * Netlify * MDX(Markdownからコ
2 min read