ソフトウェア開発」カテゴリーアーカイブ

microCMSを触ってみよう

Qiitaのアドベントカレンダーを眺めていて、microCMSというものの存在を知った。
日本製のヘッドレスCMSということで、これまであまりヘッドレスCMSに触ってみてこなかったのでちょっといじってみることに

microCMS|APIベースの日本製ヘッドレスCMS

無料で利用ができるのはいいところ。登録にクレジットカードも一旦不要だ。

始めの選択肢としては、テンプレートからの作成か、1からか。

”1から”を選択すると、サービス名とサービスIDの入力が始まる
あとから変更可能ということなので、適当に入力する

まさかのサービスができてしまった

ここからはサービス内のAPIを作っていく形のようだ。

ここで料金プランをチェックしてみる。

料金プラン|microCMS|APIベースの日本製ヘッドレスCMS

無料プラン名としては”Hobby”で、ここではAPIの呼び出しはなんと無料でOK。ただし、APIの数は5個という制限が生じてしまう。

このあたりは何を作るのか次第なのだけれど、APIをあまり細かい単位で作ってしまうとすぐに制限に引っかかってしまうので注意が必要そう。

それ以外にもプランによる制限はいくつかあって、コンテンツ数あたりがネックになりそうな気はする。
ただ、ちょっとしたAPIを作る分には1万件あれば足りるのではないかと思う。
作りたいもの次第ですね。ここは。

APIの作成

APIを試しに作ってみる

ランニングのデータを想定して、一旦アクティビティを管理するAPIを作ってみることに。

JSON配列にするかオブジェクトにするか。
アクティビティにラップのような子要素を追加するのであればオブジェクト形式一択。
ただ、先の1万件制限がどういう単位でカウントされるのかが正直わからない。

一旦、Garminのデータを取り込むことを考えてオブジェクト形式としてみる

続いてAPIスキーマの定義。
このあたりは、OpenAPIのフォーマットを取り込めたりしないのだろうか?
ファイルインポートで指定しようとしたけれどうまく行かなかった。
後でフォーマットを確認する必要がありそう

手入力で進めると、データ入力画面になった。
サンプルデータを入力しておく

無事に取得することができた。

ひとまず、なんとなくサービスの土台を作ることができそうな雰囲気は感じることができた。
どうしてもこれまでCMSというとブログ作成ツールのイメージがあったけれど、その名の通りコンテンツを管理するシステムなわけで、ヘッドレスの場合はなおさらその意味合いが強く出てくる形なんだろう。

軽く触った程度だけど、もう少し手作業による構築をなくしたいところ。
API構築をファイルインポートによって行う手順はこのあと確認することにしよう。

面白いおもちゃを作ることができないだろうか

管理職が技術を学習する意義はあるか

予感というか、確定事項というか。。。仕事が忙しくなりそうな気配がしてきています。

どこまで自分が関わるかはわからないですが、Flutterを使うことになりそうなので慌ててdartを少し触り始めています。
メインの開発者になることはないので、触ったからと行って何が変わるというものではないのですが、こういうときに最初に触ろうとしてしまうんですよね。

何かしらやったことがない技術に関連した案件に携わるときに、自分の立場でいうとどうしても管理面で少し関わるようなレベル。
実際のプロジェクトにどっぷりと。しかもコーディングをする立場で関わるということから離れて随分と経ってしまいました。

ここ数年でも、ありがたいことにそういう機会にいくつか巡り合ったのですが、最初に少しチュートリアル的に触っただけであとは設計書周りと格闘したり、プロジェクト進行や管理周りで関わる程度が続いてしまっており、技術に対しての習得というレベルにいずれも達していません。

そもそも、そういう立場なので習得すること自体が本当に意味のある行為なのかどうか。
管理であるなら管理方面の手法などに時間を割いたほうがより生産的なのではないだろうか?は常につきまとう問題です。

このあたりが管理職になりきれてない面なのかもしれないと思いつつ、やっぱり抗いたい部分でもあるのですよね。
ただ、悲しいことに。残念なことに私はそちら方面の才は持っておらず、抗ったところでという結末を迎えやすいのが実情。
中途半端ではあります。

とはいえ、やはり抗いたい。
抗いたいのです。

これまでがだめだったからと言って、諦めるほどだめにはなっていないはずと信じながら。
抗うのです。

keychronの調子が悪い

自宅ではメルカリで仕入れたKeychronのK8をキーボードとしては使っているのですが、最近バッテリー充電していると、赤と緑ランプが交互に点滅します。

その後使っていると、すぐに赤ランプが点滅してバッテリー残量が少ないことを伝えてくるのでおそらくバッテリーがだめになっている可能性がありそうです。
ちなみに、工場出荷時に戻すという方法を取ってみたけれど効果はありませんでした。

さて、このバッテリー。
どうしたものかと調べてみたら、一応自分でもできそうでした

Keychronキーボードのバッテリー交換ガイド|NORILOG(ノリログ)

というわけで、早速精密ドライバーとバッテリーをぽちっと。

届くのは少し先になりそうですが楽しみです

Snowflake World Tour Tokyo に行ってきた

9/11, 12の日程で行われたSnowflake World Tour Tokyoに行ってきた。
本当は2日とも参加するつもりではあったけれど、業務の都合で初日だけ。。。

Snowflakeはだいぶ知名度が上がってきたけれど、最初に私が知ったのは3年ほど前。
案件で使う話があって、話を聞いたり調べたりもした。

ただ、最終的に紆余曲折の末、案件自体を離れることになったので実際に使うところまでいかなかったんですよね。
今回、また機会あってSnowflakeを使った案件に首突っ込むことになって、カンファレンスがあるということでせっかくなので参加してみた形です。

データウェアハウスやデータレイクの領域は、アプリケーションに携わっていることがメインの今の立ち位置だとなかなか馴染みが薄く、話を聞く中で知らない単語や新しい知識が多く色々と刺激をいただきました。

純粋に楽しかった。

ただ、これこの先どうだろうな~と思うと、正直どうなんだろう?と思ってしまうのも事実なんですよね。

streamlitを用いることで手軽に社内に対して情報を展開することができるというのはわかるのだけれど、自社でそういうことをやるのはわかれど、案件でとなるとDWHの導入プロジェクトとかそういうものになりそうな気がしてならない。

それか、やはりこれらデータを用いたAIか。

いずれにしても、せっかく参加したこの機会を利用して、色々と聞いてきた話をまとめて振り返っていかないとな、と思った次第です。

甦れ!アンパンマン

上の子が小さい頃に買ったアンパンマンのおもちゃがずっとしまってあったのですが、次女が最近アンパンマンを好きになっているので取り出してみました。

セガフェイブ(SEGA FAVE) アンパンマン かまどでぷく~ ジャムおじさんのやきたてパン工場
https://amzn.to/4gfe6cK

今はすでに販売中止になっていて、後継のおもちゃが出ているようですね。

喋らない

電源をONにしてみても、なんの反応もありません。
電池を見てみると。。。

やはり緑錆にやられてしまっていました。。。

うーん、遊んでなかったおもちゃあるあるですね。。。
これどうしたものなんだろう?と調べてみると、緑錆にはKURE5-56ではなくKURE2-26なるものがあると!

KURE(呉工業) 2-26 180ml 電気装置用防錆・接点復活剤 1020

買いました

緑錆に効くというよりは、電源などの接点を復活させることができるとのことで、綿棒使ってお掃除してみました。

続・喋らない

それでも音は鳴りませんでした。

うーん、接点がだめだったのか、それとも接点以外の問題があるのか・・・
とりあえず、中を開けてみることにします

ちょっと画像からは分かりづらいですが、下部の電源から伸びている金属が緑錆でやられていて。。。あれ、右下何もつながっていない??

そして、一本、配線がプラプラしている。。。

つまり、緑錆などで傷んでしまって配線が切れてしまったということなんですかね?
これを接合してあげれば復活しそうな気がしてきます。

接合といえばはんだごてですよ

はんだごて

買いました。

Lesimoll はんだごて ハンダゴテ 14-in-1はんだごてセット 溶接工具 精密半田ごて 電気ハンダゴテ 60W/110V 温度調節可能(200~480℃) 5つ無酸素銅こて先 50g高純度はんだ ON/OFFスイッチ付き 半田吸取器 日本語取扱説明書付き...

比較的お値段が手頃なものを。。。
なんか色々と付いてきていますが、例のごとく使いこなせる気はしません。
シンプルに接合できればよいと。

復活!!

「焼き立て!かまどでパン屋さん!」とアンパンマンが喋ってくれました!

喜びのあまり妻に経緯を説明したら、「買ったほうが安く上がったのでは・・・?」など冷たい言葉を浴びせかけられましたが、それでは面白くないじゃないですか。

一体、ハンダゴテなんていつ以来だろう。。。もはや思い出すことができませんね。
大学時代に溶接ならガスもアークもやりましたが。。。

いやー、楽しかったです

v0を触ってみた

Vercel社が提供しているv0というサービスを触ってみました

v0はClaudeCodeとはちょっと立ち位置が違う。
プロンプトを用いてアプリケーションを作ってくれるといえばそうなのだが、ClaudeCodeが開発者向きで、生成したコードを見ることが想定されている用に感じる。

それに対してv0は非エンジニアやちょっとしたプロトタイプを作成したい際に、アプリケーションを作ってデプロイまでしてしまう。
ClaudeのArtifactのようにも思えるが、Supabaseなどと連携してVercelの環境で動かすことができてしまう。

今回、こんなプロンプトでクイズアプリケーションを作ってもらった

早押しクイズを提供するサイトを作ってください。
問題出題者はクイズとしてクイズの名前、問題数、カテゴリを登録。
さらに問題とその答えの選択肢、答えと回答時間を設定することが可能です。
クイズをオープンすると、回答者を待つ状態になり、クイズの回答者が参加することが可能になります。
出題者がスタートさせると、回答者の受付は終了し、各回答者のブラウザにクイズの問題と選択肢が提供され、回答を選択することができます。
全員の回答が出揃ったらその問題の答えが出て、正解・不正解と回答の時間によって得点が割り当てられます。
一定時間経つと次の問題が始まります。
最後の問題が終わった段階で、各回答者の得点が表示され、順位が決定します。

結果からすると、思った以上に考えられたものが出来上がったと思う。もちろん、作ってもらうものの参考とするアプリケーション・サービスがそれなりにあるはずで、そういったニーズのものであれば「こういう機能がついている」というセオリーも学びやすいのだろう。

Supabaseと組み合わせることで、ユーザ認証・DBを含めたアプリケーションが出来上がってしまった。
詳しくテストまではできていないのだけど、簡単なものであればそのまま使えるんじゃないかな?と思えてしまった。

技術スタック

v0が生成してくれるコードの技術スタックはVercel提供だけあってNext.jsになる。
Tailwind.cssなどNext.jsを用いる場合に、モダンとされている組み合わせを提供してくれるので、それに関してはこだわりがなければ良さそう。

ちなみに今回作成したUIはpackage.jsonを見るとradix-uiが主に使われているよう。
フロントエンドは不勉強すぎて、radix-uiというものを初めてしった。

Radix UI

Radix-UIは機能のみを提供してスタイルは提供せず自由にカスタマイズ可能というコンセプトのようで、プロジェクトとしては、Radix-UI+TailwindCSSなんですね。

作るものの技術スタックを自分で選びたい。もしくは、すでに決まってしまっている場合には全く使えないものになってしまいそう。
このあたりはプロンプトの指示でどうにでもなるのかもしれない

料金プラン

料金プランはFreeの上はPremiumになっていて、最近多くなってきた月$20というところ。
Freeプランだと$5分が毎月割り当てられる

今回、試しに作ってみたクイズアプリケーション。
中身的にはいい感じだが、これを作るのに・・・

だいたい$3くらいですね。
Claudeへ課金していることを考えると、安く感じてしまうけれど、Supabaseの料金もこれにかかってくるんですよね。

とはいえ、コードはダウンロードして取得したりGithubにそのままコードをPushできるので、Supabaseへの接続部分を変えてしまえば自前で環境は構築できるんじゃないかな・・・。
そのあたりが実は面倒だと、使うのはちょっとためらってしまいそうですね。

感想

どの程度のものが出来上がるかな?と軽い気持ちで試してみたけれど、それなりのものが出来上がってしまってびっくりしている。

恐ろしい子。。。

プロジェクトとしては今回のようにプロンプト初めてもいいし、Githubのリポジトリから持ってくることもできる

ここで見てみると、TemplateにFrameworkの指定をすることができる。
現時点での選択肢としてはこのようだ

機能やコードに対しての品質的なところまではまだ見切れていないので、CloneしてきてClaudeCodeに評価させるなりしたり、実際にPublishしたりして動かしてみたいですね。

また、Supabaseなど今まで自分が知らなかったサービスやFrameworkを知る機会としてもこういうものが利用できると改めて思いました。

ちょっと楽しくなってきたぞ!

Shokzの調子が悪い。。

2年半ほど愛用しているShokzのOpenRunですがついに動きがおかしく・・・

購入したのが2023年なので保証はすでに切れてしまっている。。

ただ、全然動かないというわけではなく、おそらく電源ボタンの接触周りなのではないかという予想。

shokzの場合、電源ボタンと音量の+が同じボタンなのですが、その両方がうまく聞かないんですよね。
そしてペアリングモードは電源の長押しなのでその周りでは。。と。

ただ、アクションボタンも反応してくれないのですよね。
昨日までは、大丈夫だったと思うのですが。。。

このボタン周りをゴムっぽい生地で囲んでいて、それが耐久力的に持ってなくて破れています。
このゴムが耐水性を兼ねているのだとしたら、ここから汗などが入り込んでおかしくなってしまったのでしょうか。。。

ランニング中はもちろんのこと仕事でも使っているのでこれがなくなるのは非常に困る。
最悪仕事は有線イヤホンでもなんとかなるけれどランニングは有線には戻りたくない!!

とりあえず、商品の保証期限は切れているものの修理ができるか。そして修理のお値段を知りたいので問い合わせをしてみることに

https://jp.help.shokz.com/s

買い替えになってしまうのかなぁ。
カバーの耐久力はもう少しなんとかしてほしいところですね

家庭菜園を管理できるようになりたい

ちょこちょこと報告をしていますが、家庭菜園をしています。

ただ、日々の忙しさや雑草の多さに油断をするとすぐに放置してしまうんですよね。
しかも、作ったものが家で喜んで食べてもらえるかというと、必ずしもそうではありません。
自家栽培の野菜たちは、売っているプロが作ったものよりも美味しいという成功ばかりではありません。

傷がついたり虫食いだったり、スジが多くて硬かったり。。。
収穫のタイミングの難しいものもあったりもします。

大変な割に、そういう意味では報われず、育て始めた当初から徐々にモチベーションは下降していったりします。

せめて、育て方や内容を効率的に管理し、なおかつ必要な時期に必要なタイミングで肥料などをやるなど、美味しく育てる仕組みがほしいです。

開発者らしく、そういうものを作ったらいいじゃん!って思うことはや◯年。
なかなか重い腰は上がらないものです。

ただ、AIなど環境が揃ってきて効率的にものを作る事ができる状態になっている今、動かないのはただの怠慢だろうなと思い、要件の詰めをClaude君と会話し始めました。

日の目を見ることはだいぶ先になるんじゃないかとは思うのですが、まずは動き出してみようと。

Cursorをインストールしてみた

AI開発エディタとしては有名どころの一つであるCursor。
これまで名前は知っているものの、Claude codeで遊んでいたので使ったことはありませんでした。

とはいえ、触ってみないのもな?と思いインストールしてみました

https://www.cursor.com/ja

インストーラ自体は公式サイトから落としてきて実行するだけ。
特に選択肢も対してあるわけでもないので割愛します。

初回起動時にはログイン方法を選択。
後々、Githubとは接続するだろうということで、Githubアカウント連携でのログインを選択、関連付けました

唐突に何かをVSCodeからImportさせようとするCursor。
せめてなにか書けよ・・・。
おそらくは、外観の設定周りなのではないかと推察してとりあえずImportするか。。

Importを選択してから、何をImportしようとしているかの選択が出てくる。
このUXは本当に大丈夫なのだろうかと心配になってくる

テーマ設定画面となった。
Pick your vibeってのがvibe codingとかけているのか、ちょこっとくすっと来た

分かりづらいが、key bind を VSCode, Vim, Emacs, Sublime Textから選択できる。
Sublime Textとか懐かしい。

Emacsを選択しても面白いのかもしれないけれど、Emacs使っていたの本当に数年なので正直覚えておらず、やはりVSCodeを選択させてもらう

コードベースからの学習を許可するか聞いてくる。
ここは迷いどころではあるけれど、少なくとも個人PCにいれている内容であれば別に構わないんだけどなぁと言うのが正直なところ。
色々迷うところではあるけれど、初期段階ではチェックボックスをOnにしないと先に進めない。

Autoでもいいかな?と思ったけれど、Japaneseを選択させてもらおう・・・

ようやく設定が終わり、Cursorが使えるようになったかな?

設定周りでいうと、このRulesがおそらく肝になってくるなじゃないかな?と思うので、ここからはもう少し調べながらやってみようかな。

CloudとのVPNに関してのメモ

Microsoft Azureの一番初歩的な資格であるAZ-900を以前勉強していたのですが、結局試験を受けていません。
そもそも受けようと思ったのも、たまたま無料のバウチャーをいただいたからという、どうしょうもない動機だったのですが、最近Azure上にアプリを作るという案件に関わっているので、この際取ってしまおうと思っています
(自分がAzureを触ることはあまりなさそうですが。。。)

Udemyで練習問題を解いているのですが、VPN周りで用語がAWSとこんがらがってミスってしまったので、名称含めて一度整理しようと思います。

Azure

AzureとオンプレミスなどとをVPNで接続する方法としては下記となる

P2S(Point-to-Site) VPN

Azureのネットワークとクライアント端末とをVPN接続する目的で利用される。
使われるサービスとしては、Azure側にVPNGatewayを構成する必要がある。

気をつけるのが、このVPNGatewayと書かれている箇所と仮想ネットワークゲートウェイと書かれている場所と二通りあって、同じものを指している点。
資格試験の問題文としてどちらが出るかわからない。。。
こういうのまじでやめてほしい。

S2S(Site-to-Site) VPN

Azureのネットワークとオンプレミス側のネットワークをVPN接続する。
使われるサービスとしては、Azure側にVPNGatewayは必要で、追加でLocalNetworkGatewayが必要になる。

このLocalNetworkGatewayがオンプレ側のVPNデバイス(ルーター)と接続されるとのこと。

詳しくはこのあたりが図も書かれていてわかりやすかった

Azure と接続する 3 つの方法
https://www.rworks.jp/cloud/azure/azure-column/azure-entry/22077/

AWS

AWSの場合も基本的には似たようなVPNの仕組みがあるけれど、サービス名が違っている。

AWS側ではVirtualPrivateGatewayもしくはTransitGatewayがVPNの受けてとして登場する。

そして、AWSでVPNの紹介のときによく上記のような絵が出てくるけれど、CustomerGatewayはAWS上に構築するんですよね。
AWS上に構築するけれど、”オンプレミス側のカスタマーゲートウェイデバイスを表す”みたいな表現方法をされるので上記のような図になってしまうんだろうけれど、結局のところAzureでいうところのLocalNetworkGatewayがこれに当たるのだと理解した。

GCP

https://cloud.google.com/network-connectivity/docs/vpn/concepts/overview?hl=ja

こちらを見ると、HA VPNとClassic VPNの2種類があるようですが、Classicは非推奨になっていくようなので実質的にはHA VPNのみ。

使うサービスとしてはHA VPN gatewayのようだけれど、図にはCloud Routerも出てきていてしっかりと理解は出来ていない。

とりあえず、GCPに関しては現時点では予定はないからいいか。。。

最後に

この辺の資格試験で問題となるのは、用語の統一性がないんですよね。
AWSやAzureで似たような機能を異なるサービス名で提供されていたり、同一のクラウドの中でも呼び名が時期によって異なっていたりして安定していません。

そして、設問の選択肢としてそれらが入り混じって出題されると一気にパンクします。

このあたりは、普段から実際にクラウド上をいじっているのかが問われるという話ではあるのかもしれないけれど、正直ちょっとつらい。

サービス名となると統一するのも難しいとは思うけれど、なんとかしてほしいところですね