Gemini CLI 使ってみた！ Gemini の CLI が公開されたので試してみました
プログラミング関連のメモ帳的ブログです。 調べたものは後でまとめようとメモしているのですが、メモ止まりで全然やらないので調べたときに書こうと思います。
【FullCalendar x React】ユーザーアクションをできるようにする
FullCalendar の続きです 今日は React の FullCalendar で、カレンダーに予定を登録できるようにしていきます
とりあえず FullCalendar をセットアップしてみる
カレンダーの画像は上手く生成できないんですかね？ zako-lab929.hatenablog.com 昨日調べたカレンダーモジュールのうち FullCalender をセットアップしてみます。
Google カレンダーほど高機能は求めていないがとりあえずカレンダー機能を実装したいのでモジュールを探した
イメージとしては、カレンダーの枠をクリックすると予定を入れられる程度のものを考えています まずは、モジュールがないか探していきます。 フレームワークは React を採用しています。
Material UI の Theme のカラーパレットと Snackbar の variant の色を一致させたい
zako-lab929.hatenablog.com 先日、Snackbar の色変更の設定をしました。しかし、これは Theme で設定しているカラーパレットとは異なる色です。 variant プロパティ notistack.com notistack では5種類のバリアントが用意されています。 variant 設定した Snackbar デフォルトのカラーを使用しているため、一見、カラーパレット同様の色が表示されているように見えます。 わかりやすいようにカラーパレットを設定します const theme = createTheme({ colorSchemes: { light: { pa…
Google Drive の Snackbar みたいにファイル削除後に元に戻すの動きを実現してみる
ユーザーアクションのついた Snackbar を実装します。 ふと、Google Drive の Snackbar みたいなものを表現してみようと思いました。 ちなみにこれは Notistack の Snackbar の機能ではなく、Material UI の Snackbar でもできるみたいです。
「トランジションを表現する画像」とのこと 今日も Snackbar です。デフォルトはスライドインでしたが、なんかうるさく感じてしまい変更したくなりました。
AI が考える今日のスナックバー デフォルトだと黒色で左下に出てきますが、変更方法を調べました zako-lab929.hatenablog.com 導入方法は、前回の記事をご参照ください。 ちなみに、アイキャッチ画像は、前回のプロンプトの続きで、デザインを変えてくださいとお願いしました！
React で積み重なる Snackbar を簡単に実装する (Material UI 使用)
「スナックバー」の画像の生成を依頼したら、まぁこうなりますよね アイキャッチ画像はこのまま採用するとして、右下とかにポコっと出てくるアレです。 実際に実装しようとしてコンポーネントを探していたわけなのですが、Material UI のドキュメントを読んでいて Thirdparty Module の紹介があったため使用させていただきました。
Free React Template (Dashboard) の Theme を追ってみる (2)
zako-lab929.hatenablog.com 続きです。
Free React Template (Dashboard) の Theme を追ってみる
Custom Theme は何度か見たことがある程度で深くは追ったことがないです
Material UI の Free React Template (Dashboard) を使う際にハマったこと
Material UI に優秀そうな Free Template を見つけたので使おうとしたらすぐに使えなかったので記事になりました
私はよく Next.js を使っているので、自動的にルーティングをしてくれます。 React を使用する場合は、自分でルーティングモジュールを入れなくてはいけません。 偶然 React Router を試す機会があったのでメモ記事です。
zako-lab929.hatenablog.com さて、LINE Notify は置いといて、上記記事において Assume Role を実施するために必要なものの準備編です。
notify-bot.line.me 悲しみです。 手軽に LINE に通知を送ることができる LINE Notify が 2025/03/31 に終了してしまうそうです。
Docker コンテナ起動時に AssumeRole を実行してからメインコマンドを動かしたい
zako-lab929.hatenablog.com 昨日、Docker コンテナ起動時に前処理を実行しました。 本当にやりたかったのはウェイトではなく AssumeRole です。 AssumeRole が何か についてはこの記事では書いていません。
例えば、DB や Redis など特定のリソースが起動するまで待ってからメインのアプリケーションを起動したいときなどです。
ENTRYPOINT と CMD について、 どちらも同じようなコマンドが指定されていたり指定されていなかったり意味がわかりません。 この、Docker コンテナ起動時に自動的に実行されるコマンドについて、いまいちよくわからないので調べてみました。
docker networkというコマンドがあり色々見れるみたいです $ docker network --help Usage: docker network COMMAND Manage networks Commands: connect Connect a container to a network create Create a network disconnect Disconnect a container from a network inspect Display detailed information on one or more networks ls List ne…
異なる docker-compose 間で MySQL にアクセスするには？
昨日は docker-compose.yml 1つ に コンテナを2つ という構成でしたが、本日は docker-compose.yml が2つです。 イメージ図
Docker コンテナ間で MySQL にアクセスするには？
1つのコンテナ内に アプリケーション と MySQL Server を同居させるのではなく、 アプリケーションコンテナから、別のコンテナ内の MySQL Server にアクセスする感じです。 イメージ図 こんなのをイメージしています。
コードブロックの表現に Highlight.js を使用する
このブログではシンタックスハイライトを表現するのに CSS を上書きしまくってなんとなく表示できるようになっています。 Highlight.js を使用しているつもりなのですが、上手く反映していたりしていなかったりしているのです。 YAML のコードブロックのキャプチャ いつも思ってはいたんですが、黒が濃いのと白が強いんですよね・・・ 今回は、シンタックスハイライトの見直しをするついでに記事にします。
「ブログリーダー」を活用して、ちびジャコさんをフォローしませんか？
Gemini CLI 使ってみた！ Gemini の CLI が公開されたので試してみました
WSL を導入した 今までは VirtualBox を使っていましたが、 最近、メインの PC が変わったので WSL を導入しました。 今のところ VirtualBox より軽い感があって良きです。 とりあえず、今わかっている使い勝手をメモしておきます
VS Code から MCP サーバーを利用してみる VSCode に MCP サーバー対応が入ったので使ってみました
前回の関連記事 昨日、マルチプレイ設定が知らぬ間に反映し、できるようになっていました。 全然できなかったのに急にです。 時間が解決してくれた可能性がありますが、 昨日、寝る前に 再びマルチプレイはブロック状態 にしておきました。 そして今日...
マルチプレイが無効になっています こんばんは！ 再び1ヶ月ぶりです！ お仕事の方は相変わらず忙しいです！ それは置いといて、私は、CoderDojo という 子どものための非営利プログラミング道場 でメンターをしているのですが、 Dojo に来ているマイクラ勢の子たちに触発されて、我が家の子どももマイクラやりたい！！になりました。 自分用のアカウントは1個ありますが、もう1個買う必要があるな・・・と。 そして、買ったはいいものの、マルチプレイで問題が・・・
こんばんは！ 1ヶ月ぶりです！ お仕事の方が非常に忙しくなり、記事を書いている時間がなくなりました！ なるべく書きたいとは思っているので、週1でも月1でも頑張りたいと思います！ そんな中、たくさんインプットはしているので、インプットした情報をメモしておくために Obsidian っていうメモアプリを導入してみました。 Evernote とか Joplin とか色々なメモアプリを試していますが、ナレッジグラフに惹かれて Obsidian にしてみようと思いました！
WSL を導入した 今までは VirtualBox を使っていましたが、 最近、メインの PC が変わったので WSL を導入しました。 今のところ VirtualBox より軽い感があって良きです。 とりあえず、今わかっている使い勝手をメモしておきます
前回の関連記事 Web コンソール便利すぎでしょ
前回の関連記事 ハッカソンではメンターもやってたので、AppSync について聞かれました。使ったことないサービスだったので調べました。
AWS のリソースを構築する際にいつも手でポチポチやっていますが、 ふと Cognito くらいならユーザープール作るくらいだし。って思って、terraform をちょっと調べて使ってみました。 せっかくなので、調べたことをまとめました。
こんばんは 昨日、一昨日と社内のハッカソンに参加していました。 無事にプレゼンもいっぱい笑っていただき一安心です。 さて、一時期ドローンの記事を書いていましたが、 つい1週間前まで使うか使わないかも決まってない状態でしたが、 無事にハッカソンで活用することができました。 また、今回は使わなかったですが VMC Protocol に近いところで、姿勢推定を使いました。 もともとモーションキャプチャーや姿勢推定などその辺を使いたいなーって思っていたので、 コンセプトは変わらず、希望通りの技術を使うことができました。 過去記事まとめです
前回の関連記事 カスタムノードを実装してみます！
前回の関連記事 前回、上記で API を作って Frontend から叩いたところエラーになり、https 化して解決しました。今回は http(s) の話は置いといて、API サンプルの作り方をメモしておく記事です。
前回の関連記事 UART を利用するデバイスの事前準備として、「汎用シリアルポート設定をしてください」 となっていました。 このあたり、全然詳しくないのですが・・・ UART とは何なのか？UART と汎用シリアルポートの関係は？
Raspberry Pi Zero 2 で Node-RED を使って立てた API を Frontend から叩いてみたらエラーが出ました。 Mixed Content: The page at 'https://**********/' was loaded over HTTPS, but requested an insecure resource 'http://192.168.1.13:1880/hello'. This request has been blocked; the content must be served over HTTPS. さてさて原因は？
前回の関連記事 3.3V ピンは、常に 3.3V の電圧が掛かっているようですが、 GPIO ピンはプログラムから電圧を掛けるか掛けないかを制御できるようです。 本日は GPIO を使って、Python から LED を制御します
Lチカ回路 (ボタン付き) 前回の関連記事 本日はボタンをポチポチできるようにしてみましたよ ボタンによって LED を付けたり消したりする ブレッドボード: x1 LED: x1 抵抗 (1kΩ): x1 ジャンパーワイヤー(オス - メス): x2 ボタン: x1 Lチカ回路 (ボタン付き) ボタンを押していない状態だと、電流は LED の方には流れていませんが、 ボタンを押すことで、ボタンの左側の足に電流が流れるようになります。 その先は、昨日の Lチカ回路と同じです。 何も考えずに電源を入れる まずは何も起きません！ ボタンをポチッとすると LED が光ります！ まとめ 初めてボタンを…
前回の関連記事 本日は、とりあえずLチカしてみましたよ
zako-lab929.hatenablog.com 前回、OS を書き込んで起動するところまで確認しましたが、起動した後に何も操作できずに詰んでました。 本日は、USB micro B の USB ハブが届きましたので、作業を少し進めておきます Raspberry Pi OS の初期設定について Raspberry Pi OS の初期設定 ホスト名の設定 だったり ユーザーの設定 , Wi-Fi の設定などができるようです。サービスからは SSH の設定ができます。 Wi-Fi の設定は GUI から行おうと思ったので OFF にしておきました。 設定値 設定値 チェックボックス メモ ホス…
2025年1月8日にリリースされた Stability AI の image-to-3D model です。 記事によると Stability AI Community License に基づき商用および非商用の両方で無料で使用できます。とのことです。
github.com geolib っていうモジュールもスターが多くて良さそうだぞ？ ということで、本日は Turf.js とは異なる緯度経度計算モジュールを使ってみようと思います。 モジュール選定大事 geolib というモジュールでやってみる モジュールのインストール $ yarn add geolib 使い方 import * as geolib from "geolib"; const from = { lat: "35.65862055760233", lng: "139.74543043734087" }; const to = { lat: "35.71013065861893"…
zako-lab929.hatenablog.com 昨日、 Google Map 上で距離が測れることを知りましたが、 本日は React 上で 緯度経度 を指示して距離を計算してみたいと思います。
札幌～那覇空港まで 2,248.57 km これは、知らなかった機能でした。 思わず、おぉ！となった Tips です
firebase.google.com 本日は Firestore でリアルタイム性を発揮してみます。 使ったことない Firestore でしたが、 新しい知見が増えるということはやっぱり楽しいですね！ Realtime Database と Firestore どっちを採用するかは悩ましいところですが、 データ量や課金対象のアクションを理解した上で検討するのが良さそうだと思いました。
zako-lab929.hatenablog.com さて、Firestore は使ったことないのですが、 メモがてら使ってみようという魂胆で進めていきます。 今回も前提として各種準備が終わっている状態からのスタートになります。
zako-lab929.hatenablog.com さて、 Realtime Database はざっくりまとめたし、次回から導入スピードは上がると思います。 Firestore は使ったことないのですが、いまいち Realtime Database との違いがわからないんですよね。両方ともオフラインサポートしているし、リアルタイムな処理もできるって言いますしね。。。 わからないなら使ってみようと思います。 このブログを機に触ってみようと思います。
zako-lab929.hatenablog.com Firebase コンソール から Realtime Database の初期セットアップが作成が終わったら、Firebase SDK 経由で Vue プロジェクトから使えるようになっています。 この記事では、チャットのように文字列を送信及び受信するサンプルをまとめておきます。
zako-lab929.hatenablog.com 昨日、Firebase プロジェクトを作成しました。 本日は、Realtime Database の初期セットアップのやり方をまとめておきます。
zako-lab929.hatenablog.com 前回の記事でも使っている Firebase ですが、 Firebase コンソール 上でプロジェクトを作って API-Key などを発行する必要があります。 本日は、初回セットアップのやり方をまとめておきます。
みんなでスタンプ機能 ここ最近、Vue の記事を書いていましたが、作りたかったのはコレです！ ドラゴンクエストウォークみたいな揮発性のスタンプ機能を作りたかったです
レポート JDLA Generative AI Test 2024 #1 に合格してました！ ひっそりと受験してました！
onChildAdded ニャンコ (SD3 産) 前回の記事 前回、 Firebase の Realtime Database の記事を残しましたが、 記事内で child_added が「起動時に全部飛んできてしまう」ということを嘆きました。 今回は、その対策を行ったのでブログに残します。
Stable Diffusion 3 ニャンコ (SD3 産) 前回の記事で、ふと作ってみました。アイキャッチ画像。 前回の記事 こういう使い方良くない？？？ まとめ 商用アプリに組み込むわけじゃないから、こういう使い方ってしてもいいのかな？ Stable Diffusion 3 Medium の使い方はこちら ランキング参加中【公式】2024年開設ブログ ランキング参加中プログラミング
Firebase ニャンコ (SD3 産) 昨日作成した Vue2 のライブラリプロジェクト で、 Firebase Realtime Database を使おうとしています。 よく使う onValue と onChildAdded の挙動について、よく忘れるので記事にしてみます。 Firestore は使ったことないのよね～
ちょっと間に Stable Diffusion 3 を挟みましたが、 Vite + Vue2 の続きをメモします。 今日は、このプロジェクトでライブラリビルドを行い npm package 化しようと思います。 目標は Vue2 の任意のプロジェクトで使えることです！
前回の記事 前回、公開されたばかりの Stable Diffusion 3 を使いました。 その中で、端折ってしまいましたが、Hugging Face のアカウントが必要だったりアクセストークンを発行したりしなくてはなりません。 この記事では、アクセストークンの発行の仕方をメモしています。
SD3 で生成されたニャンコ 最も洗練された画像生成モデル、Stable Diffusion 3 Medium のオープンリリースを発表 — Stability AI Japan Stable Diffusiion 3 Medium が公開されましたので早速使ってみました。
Vite + Vanilla 前回の記事では Vite と Vue3 を使って npmパッケージ を使えるところまで作成しましたが、どうやら Vue2 プロジェクトでは使用できないようです。今回は、Vite を使って Vue2 でライブラリビルドをできるように Vite + Vue2 の準備をしようと思います。
前回の記事で Vite を使って Vue3 の npm package を作成しました。 しかし、 TypeScript からだと型定義エラーになってしまうことが判明しました。 この記事では TypeScript のプロジェクトからもエラーなく利用できるように型定義ファイルを出力する方法を調べていこうと思います。
なんで前回、急に Vue を触ったかというと、 npm install 可能な Vue の コンポーネント を作りたかったんですよね。 調べてみると Vite のオプションで ライブラリモード なるものがあるようなので、 こちらを使ってみようと思います。
