AI・テクノロジー on kenji.blog

AI開発の壁

Sun, 20 Jul 2025 21:52:42 +0900

AI開発の壁

〜8合目まで来たけど、そこからが地獄だった話〜

こんにちは、kenjiです。

最近、「AIにお願いしたらアプリが作れちゃった！」という声をめちゃくちゃ聞くようになりました。ノーコードやローコードの時代を通り越して、「バイブコーディング（雰囲気でコードを書く）」みたいなフェーズに突入してます。

たとえば、「画像を加工してSNSに投稿できるアプリ作って」って言えば、AIがコードやUIまで吐き出してくれる。 すごい、もう人間いらなくない？って思うじゃないですか。

でもね、それは 富士山の8合目にサンダルで降り立つようなもの なんですよ。

8合目までは“楽勝”に見える

AIでの開発って、最初は本当に楽なんです。ファイルIO？とりあえず動く。ネットワーク？まあ繋がる。データベース？JSONでいいっしょ。 UI？ChatGPTがReactコード吐いてくれたし。課金？StripeのAPIぐらいコピペでいける。

ここで「俺、もうエンジニアなんじゃね？」って錯覚する。でも、本当の地獄はここから始まります。

なぜ詰むのか？

理由は簡単で、「AIはそれっぽく作るけど、最終調整は人間に丸投げ」だからです。

ファイルIOでデータが消える
DBの正規化が甘くて検索が遅い
UIが直感的じゃない
負荷テストしてないのでアクセス集中でクラッシュ
Apple/Googleの審査でリジェクトされる
法的要件に引っかかって炎上（しかける）

つまり、AIは“見た目は完成してる風のプロトタイプ”を作るのは得意 なんだけど、 “実際に世に出して通用するプロダクト”に仕上げるのは、今もなお人間の仕事 なんです。

でも、パラドックスがある

ここで一つの パラドックス に気づきます。

将来的にAIが本当に全部できるようになったら？つまり、「セキュリティも、課金も、設計も全部AIが完璧に処理してくれる」ようになったら？

そのとき、人類がアプリを作る必要そのものがなくなる かもしれません。

なぜなら、ユーザーがAIに直接「こういうことしたい」って言えば、アプリなしで即座にタスクが実行されるようになるからです。

🌀たとえば

昔は「計算するために計算機アプリを起動」してたのに、今は「Hey Siri、12×32は？」って言えば終わる。

同じように、「AIに写真を加工してシェアして」って言えば、アプリのUIもAPIも通らずに、処理が終わってるかもしれない。

つまり、 「AIでアプリを作る」という目標が実現したとき、アプリそのものが不要になる世界が来る かもしれないんです。

結局、今の僕らにできること

じゃあ、どうすればいいのか。

今はまだ“8合目から上”が人間の領域なので、そこを磨く
本質的なユーザー理解やサービス設計に集中する
「作れること」より「価値があること」を考える
むしろ、“アプリという形式にとらわれない”価値提供の在り方を模索する

AIはツールであり、リフトであり、時には競争相手です。でも、「何を作るか」や「なぜ作るのか」は、まだ僕たち人間の問いのまま です。

まとめ：

AI開発の壁とは、技術ではなく構造のパラドックスである

富士山の8合目まで誰でも行ける時代。でもそこから先が本番。

そして、山頂に登りきった頃には、「山、登る必要あったっけ？」と問い直す未来が待っているのかもしれません。

Gmailをcurlから送る

Thu, 27 Feb 2025 02:13:31 +0900

Gmailをcurlから送る

1. アプリパスワードを取得する

https://myaccount.google.com/apppasswords 上記のリンクをクリックして、アプリ名を入力します。生成したパスワードを保存します。

2. curlコマンドでメールを送信する

以下のコマンドを実行します。

下記の例では、mail.txtにメールの内容を記述しています。

1
2
3
4
5
6


From: from@gmail.com
To: to@gmail.com
Subject: テストメール
Content-Type: text/plain; charset="UTF-8"

テストメールです。

上記のファイルを作成して、以下のコマンドを実行します。

1

curl --url "smtps://smtp.gmail.com:465" --ssl-reqd --mail-from "from@gmail.com" --mail-rcpt "to@gmail.com" --user "from@gmail.com:xxxxxxxxxxxxxxxx" --upload-file mail.txt

※ xxxxxxxxxxxxxxxxはアプリパスワードに置き換えてください。

mermaid.jsを試してみる

Sat, 25 May 2024 02:18:09 +0900

mermaid.jsとは

mermaid.jsは、JavaScriptのライブラリで、テキストベースの独自の構文(Mermaid記法)を記述し、フローチャートやダイヤグラム、ガントチャートなど、複雑な図表をグラフィカルに表示できます。 GitHubやQiita、Notionなど、いろいろなサービスでも採用されています。今回は、hugoでmermaid.jsを使えるようにしてみます。

hugoでmermaid.jsを使えるようにする

手順は以下の通りです。

layouts/partials/extend_footer.htmlに以下を追加。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13


{{ if or .Params.mermaid .Site.Params.mermaid }}
<script src="https://cdn.jsdelivr.net/npm/mermaid@10.3.0/dist/mermaid.min.js"></script>
{{- $loadmermaid := resources.Get "js/load-mermaid.js" }}
<script src="{{ $loadmermaid.RelPermalink }}"></script>
<script>
 window.initMermaid();
 if (isDarkTheme()) {
 setPrefTheme('dark');
 } else {
 setPrefTheme('light');
 }
</script>
{{ end }}

※if文でmermaid: trueとした場合のみmermaid.min.jsを読み込むようにしています。このライブラリは3MBほどあり意外と大きい。

assets/js/load-mermaid.jsを作成。この処理は初期化および動的にテーマが切り替えられた際、再描画するために使われます。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62


(function(window){
'use strict'

 const elementCode = '.mermaid'
 const loadMermaid = function(theme) {
 window.mermaid.initialize({theme})
 window.mermaid.init({theme}, document.querySelectorAll(elementCode))
 }
 const saveOriginalData = function(){
 return new Promise((resolve, reject) => {
 try {
 var els = document.querySelectorAll(elementCode),
 count = els.length;
 els.forEach(element => {
 element.setAttribute('data-original-code', element.innerHTML)
 count--
 if(count == 0){
 resolve()
 }
 });
 } catch (error) {
 reject(error)
 }
 })
 }
 const resetProcessed = function(){
 return new Promise((resolve, reject) => {
 try {
 var els = document.querySelectorAll(elementCode),
 count = els.length;
 els.forEach(element => {
 if(element.getAttribute('data-original-code') != null){
 element.removeAttribute('data-processed')
 element.innerHTML = element.getAttribute('data-original-code')
 }
 count--
 if(count == 0){
 resolve()
 }
 });
 } catch (error) {
 reject(error)
 }
 })
 }

 const init = ()=>{
 saveOriginalData()
 .catch( console.error )
 document.body.addEventListener('dark-theme-set', ()=>{
 resetProcessed()
 .then(loadMermaid('dark'))
 .catch(console.error)
 })
 document.body.addEventListener('light-theme-set', ()=>{
 resetProcessed()
 .then(loadMermaid('default'))
 .catch(console.error)
 })
 }
 window.initMermaid = init
})(window);

こちら元となるコードは下記を参考にしました。

Reinitialize with new theme #1945

header.htmlのテーマ切り替え時の処理を修正

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24


function switchTheme(theme) {
 switch (theme) {
 case 'light':
{{ if or .Params.mermaid .Site.Params.mermaid }}
 document.body.dispatchEvent(new CustomEvent('light-theme-set'));
{{ end }}
 document.body.classList.remove('dark');
 break;
 case 'dark':
{{ if or .Params.mermaid .Site.Params.mermaid }}
 document.body.dispatchEvent(new CustomEvent('dark-theme-set'));
{{ end }}
 document.body.classList.add('dark');
 break;
 // auto
 default:
 if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
{{ if or .Params.mermaid .Site.Params.mermaid }}
 document.body.dispatchEvent(new CustomEvent('dark-theme-set'));
{{ end }}
 document.body.classList.add('dark');
 }
 }
}

layouts/shortcodes/mermaid.htmlを作成

1
2
3


<div class="mermaid" align="{{ if .Get "align" }}{{ .Get "align" }}{{ else }}center{{ end }}">
 {{ safeHTML .Inner }}
</div>

以上でmermaid.jsを使える準備が整いました。

mermaid.jsを使ってみる

記事の定義に下記を追加

1

marmaid: true

記事の本文に下記を追加

フローチャート

1
2
3
4
5
6


{{<mermaid align="center">}}
graph TD
 A[開始] -->|条件1| B(条件2)
 B --> C{条件3}
 C -->|条件4| D[終了]
{{</mermaid>}}

出力結果

graph TD A[開始] -->|条件1| B(条件2) B --> C{条件3} C -->|条件4| D[終了]

ガントチャート

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12


{{<mermaid align="center">}}
gantt
 section Project
 要件定義 :done, a, 2024-05-25, 5d
 基本設計 :done, b, after a, 5d
 詳細設計 :done, c, after b, 5d
 製造 :active, d, after c, 10d
 単体試験 :crit, e, after d, 5d
 結合試験 : f, after e, 5d
 総合試験 : g, after f, 5d
 リリース :milestone, h, after g, 1d
{{</mermaid>}}

出力結果

gantt section Project 要件定義 :done, a, 2024-05-25, 5d 基本設計 :done, b, after a, 5d 詳細設計 :done, c, after b, 5d 製造 :active, d, after c, 10d 単体試験 :crit, e, after d, 5d 結合試験 : f, after e, 5d 総合試験 : g, after f, 5d リリース :milestone, h, after g, 1d

シーケンス図

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16


{{<mermaid align="center">}}
sequenceDiagram
 participant user
 participant view
 participant controller
 participant model
 participant database
 user->>view: ID/PW入力
 view->>controller: 認証リクエスト
 controller->>model: 認証リクエスト
 model->>database: 認証リクエスト
 database-->>model: 認証結果返却
 model-->>controller: 認証結果返却
 controller-->>view: 認証結果返却
 view-->>user: 認証結果表示
{{</mermaid>}}

出力結果

sequenceDiagram participant user participant view participant controller participant model participant database user->>view: ID/PW入力 view->>controller: ajax問い合わせ controller->>model: 認証リクエスト model->>database: SQL発行 database-->>model: SQL結果返却 model-->>controller: 認証リクエスト結果返却 controller-->>view: ajax問い合わせ結果返却 view-->>user: 認証結果表示

以上です。

参考

生成AIについて

Tue, 16 Apr 2024 02:13:56 +0900

生成AIについての講義動画

「生成AI 」(1) 中尾政之・東京大学教授　2023.9.8

「生成AI」(2) 酒井邦嘉・東京大学大学院教授　2023.10.11

「生成AI」(3) 松尾豊・東京大学大学院教授　2024.3.15

paint.netで画像の特定個所にモザイクをかける方法

Tue, 11 Apr 2023 16:33:10 +0900

paint.netで画像の特定個所にモザイクをかける方法を紹介します。

ネット上に画像をアップロードする際に、画像の特定個所にモザイクをかけたい場合があると思いますが、 paint.netを使うとすぐに画像を加工することができます。

手順

1. モザイク処理を行いたい画像をpaint.netで開く

2. 選択ツールを使って、モザイクしたい部分を選択する（複数選択可能）

3. メニュー＞エフェクト＞歪み＞モザイクを選択

セルサイズでモザイク処理の粗さを設定します。数値が大きいほど隠匿性が高くなります。
[縮小]マルチサンプルバイリニア法を選択
[拡大]ニアレストネイバー法を選択

OKでダイアログを閉じます。

4. 画像がモザイク加工されるので、画像を保存します。

以上。

paint.netを使って画像に枠線をつける方法

Tue, 11 Apr 2023 14:31:59 +0900

paint.netを使って画像に枠線をつける方法を紹介します。

手順

1. 枠線を付けたい画像をpaint.netで開く

2. セカンダリカラーを設定する（これが枠線の色になります）

カラーパレットが表示されていない場合は、キーボードのF8キーを押してください。

黒に設定する場合はをクリックしてください。

3. メニュー＞画像＞キャンバスサイスを変更を選択

幅および高さをそれぞれ2ピクセルずつ増やします。2ピクセル増やすと枠線が1ピクセルになります。枠線を5ピクセルにしたい場合は幅および高さをそれぞれ10ピクセルずつ増やします。

アンカーは「中央」を選択して、OKをクリック。

4. 画像に枠線がつくので、画像を保存します。

以上。

paint.netの魅力

Wed, 14 Sep 2022 19:33:31 +0900

わたしが開発の作業を行う中でよく使っている画像編集ソフトpaint.netの紹介します。

Windows標準のペイントではできない重宝している点

透明・透過率を扱うことができる
複雑な範囲形の自動選択ができる
レイヤーを扱うことができる
レベル補正、明度、コントラスト等の調整ができる
様々なエフェクト（ぼかし、ゆがみ、ノイズ等）ができる

その他特徴

無償で使える
動作が比較的軽い
直感的に使えて癖があまりない
日本語（多言語対応）

高機能だけど使いやすいソフトです。私自身全部の機能はまだ使いこなせていません。

インストールはこちら

https://www.getpaint.net/download.html

無償版を選択する場合はリンク先の下記の赤枠の部分をクリックしてください。

Microsoft Store経由でインストールすると有償となる代わりに自動アップデートができるようになるようです。無償版でも、最新が更新情報を教えてくるので割とスムーズにアップデートできます。