![\"食品データの類似度可視化\"](\"/images/foods-similarity.png\")
Claude Code や Codex などのコーディングエージェントは、グラフやレポートといったリッチなHTMLを生成できるのに、ターミナルの中ではそれを表示できません。せっかくの成果物を見るために、いちいちファイルを開くのも面倒です。さらに言えば、エージェントが長時間自律的に作業する時代には、「ターミナルに張り付いて見守る」こと自体が不自然になっていくはずです。
\n\nそこで開発したのが agentcast です。デプロイしたWebページを開いておくと、エージェントのセッションがリアルタイムでミラーされ、生成されたHTML成果物がその場で描画されます。別の画面にページを開いておけば、エージェントの作業を「ライブ観戦」できるというわけです。
\n\nビューアは2ペイン構成になっています。
\n\n![\"agentcastのスクリーンショット\"](\"/images/AgentCastScreenShot.png\")
\n\n各ペインは×ボタンで閉じられるので、成果物だけを全画面で眺めるダッシュボード的な使い方もできます。配信はWebSocketなので、ページをリロードしなくても更新は一瞬です。
\n\n使い方は、Claude Code に話しかけるだけです。
\n\nあなた: ライブビュー開始\nClaude: ミラーを開始しました。https://agentcast.onrender.com で見られます\n\nあなた: 売上データを分析してグラフにして\nClaude: （分析を実行し、グラフのHTMLを生成して自動でビューアにプッシュ）構成要素は2つだけです。
\n\n| 要素 | 役割 |
|---|---|
| サーバー（Express + ws） | HTTPで成果物を受信し、WebSocketで全閲覧者に即時配信。Render の無料プランにそのままデプロイできる |
| スキル（Claude Code Skill） | HTML成果物のプッシュと、セッションのミラーをエージェントに実行させる |
面白いのはミラーの実現方法です。Claude Code はセッションの全ログをローカルのトランスクリプトファイル（JSONL）に書き出しています。スキルが起動する小さなリレープロセスがこのファイルを tail し、会話やツール実行をWebSocketでサーバーに流し込むのです。MCPサーバーもhooksも不要で、Skillだけで完結します。
\n\nRenderの無料プランは15分間アクセスがないとスピンダウンし、メモリ上の履歴も消えてしまいます。agentcast はこれを前提に、「正本はローカル」という設計にしました。
\n\nサーバーは完全にステートレスでよくなり、無料プランでも実用になります。
\n\nMCPサーバーとして作る選択肢もありましたが、あえてSkillにしました。Skillはただの指示書（SKILL.md）と数本のスクリプトなので、導入はディレクトリを置くだけ。常駐プロセスの管理も接続設定も要りません。プッシュ側は単なるHTTP POSTなので、Claude Code に限らず、シェルを実行できるエージェントなら Codex などからでも使えます。
\n\nコードはGitHubで公開しています。Render の Blueprint に対応しているので、リポジトリを取り込むだけでデプロイできます。
\n\nhttps://github.com/kofujimura/agentcast
\n\n今回作ったのは一方向のミラーですが、本当に作りたいのはその先です。ビューア側に入力欄を付け、音声で指示を送れるようにすれば、ターミナルを一切見ずにエージェントと協働する世界——コンソールはエージェントの作業場であって、人間はWebから成果だけを眺めて方向を指示する世界——が見えてきます。エージェントとの付き合い方が「操作」から「観戦と采配」に変わっていく、その入り口になるツールだと思っています。ぜひ使ってみてください。
", "excerpt": "Claude Code などのコーディングエージェントの作業をWebブラウザでリアルタイムにライブ観戦できるツール「agentcast」を開発しました。エージェントが生成したHTMLをWebSocketで即時配信し、別画面でコンソールログや成果物を眺めながら作業を見守れます。", "date": "2026-06-13T01:50:48.952Z", "modified": "2026-06-13T01:50:48.952Z", "slug": "post-1336", "status": "publish", "author": "fujimura", "categories": [ "AI", "開発ツール" ], "tags": [ "agentcast", "Claude Code", "Skill", "WebSocket", "Render" ], "featuredImageUrl": "/images/AgentCastEyeCatch.png", "title": "コーディングエージェントの作業をWebでライブ観戦できる「agentcast」を作った", "id": 1336 }, { "content": "CodexやClaude Codeのようなコーディングエージェントが日常的なツールになりつつある今、そのチャットインターフェースからブロックチェーンを操作したいシーンが増えてきています。開発用途だけではありません。たとえば：
\n\nさらに先を見ると、ユーザーが AI エージェントに一定の権限や資産を委譲し、エージェントが自律的に仕事をこなす時代も遠くありません。そのとき、エージェントが自分のウォレットを持ち、ブロックチェーン上でトランザクションを送れることは基本的な能力の一つになるはずです。
\n\nそのような時代を見据えて開発したのが CLI Wallet Skill です。CodexやClaude Codeのチャットインターフェースから自然言語でブロックチェーンを操作できる仕組みを、2種類のバージョンで提供しています。
\n\n開発したSkillは、技術的なアプローチの異なる2バージョンです：
\n\n以下は参考例として実装されているコマンドです。コーディングエージェントは秘密鍵と API エンドポイントさえあれば幅広いアクションをコーディングして実行できるため、実際にできることはこれに限りません。
\n\n| コマンド | \n機能 | \n
|---|---|
address | \n ウォレットアドレスを表示 | \n
balance | \n ETH 残高を確認 | \n
send <to> <eth> | \n ETH を送信（確認フラグが必要） | \n
tx <hash> | \n トランザクションの確認 | \n
nft <address> | \n NFT 保有状況の確認（ERC721/ERC1155） | \n
login ※ | \n Google ログイン（ブラウザが開く） | \n
logout ※ | \n セッションを削除 | \n
※ ソーシャルログインのための機能（Smart Account版のみ）
\n\nEOA（Externally Owned Account）ベースのシンプルな版です。Alchemy API キーと秘密鍵を設定するだけで動き始めます。
\n\nClaude Code のグローバルSkillとしてインストールする場合：
\n\ngit clone https://github.com/kofujimura/cli-wallet-skill \\\n ~/.claude/skills/cli-wallet-skill\ncd ~/.claude/skills/cli-wallet-skill\nnpm install\ncp .env.example .env.local # ALCHEMY_API_KEY と PRIVATE_KEY を設定\n\n
あとはClaude Codeのチャットに話しかけるだけです：
\n\n読み取り系の操作は確認なしで実行され、ETH 送信などの署名が必要な操作は --confirm-signature フラグで明示的な承認を求める設計です。エージェントが勝手にトランザクションを飛ばすことを防ぎます。
アカウント抽象化（ERC-4337）を活用した上位版です。Smart AccountやAccount Abstractionの概念については、以前書いた「inapp-wallet——アプリに埋め込めるブロックチェーン」で詳しく解説しているのであわせて読んでみてください。
\n\nこのSkillでは、その仕組みを CLI から利用できるよう以下のサービスを組み合わせています：
\n\n鍵はディスクに保存されず、Google 認証を経て Web3Auth がその場で再構築します。Pimlico のペイマスターがガス代を肩代わりするので、ETH をあらかじめ用意しなくてもトランザクションを送れます。
\n\nまず試してみたい場合は、Google ログインの設定なしに秘密鍵モードで動かせます：
\n\ngit clone https://github.com/kofujimura/cli-aa-wallet-skill \\\n ~/.claude/skills/cli-aa-wallet-skill\ncd ~/.claude/skills/cli-aa-wallet-skill\nnpm install\ncp .env.example .env.local\n# PIMLICO_API_KEY を設定（https://dashboard.pimlico.io）\n# PRIVATE_KEY に openssl rand -hex 32 で生成した値を設定\n# WEB3AUTH_CLIENT_ID は空のまま\n\nnode wallet.js address # スマートアカウントアドレスを表示\nnode wallet.js send 0xABCD... 0.001 --confirm # ガスレスで送信\n\n
スマートアカウントは最初の送信時に自動でオンチェーンにデプロイされます。
\n\n単体のCLIツールとしても動作しますが、Claude CodeやCodexの Skill として設計した理由があります。
\n\nユーザーが「支払いをして」「NFTを送って」「このアドレスの残高を確認して」と自然な言葉で指示できること——それが出発点です。ブロックチェーンの知識がなくても、チャットの延長で資産を動かせる体験を作りたいと考えました。
\n\nまた、AI エージェントがユーザーに代わってブロックチェーン上で動くシナリオでは、エージェントと資産管理の仕組みが密に連携している必要があります。Skillとして統合することで、エージェントが会話のコンテキストを保ちながら資産操作を実行できます。「この請求書の金額を確認して、問題なければ支払って」といった指示を一連の流れの中で完結させられるのが強みです。
\n\nどちらも MIT ライセンスで公開しています。Sepolia テストネットで動作確認済みで、本番環境での使用は現時点では非推奨です。
\n\n「AI エージェントにウォレットを持たせる」という考え方は、今はまだ実験的ですが、その必然性は着実に高まっています。支払い、認証、資産の委譲——これらはすべて、エージェントが単なる「会話の相手」から「仕事を任せられるパートナー」になるための基盤です。
\n\nこのSkillはその第一歩として作りました。EOA版のシンプルな構成から始め、Smart Account版のガスレス・ソーシャルログインという現代的なアーキテクチャまで段階的に試せる構成にしています。ぜひ使ってみて、感想やフィードバックをもらえると嬉しいです。
", "excerpt": "CodexやClaude Codeなどのコーディングエージェントのインターフェースから、自然言語でブロックチェーンを操作できるSkillを開発しました。EOAアカウントを使うシンプル版と、アカウント抽象化（ERC-4337）でガスレス送信を実現するSmart Account版の2種類を公開しています。", "date": "2026-06-07T13:40:20.660Z", "modified": "2026-06-07T23:22:51.536Z", "slug": "post-1335", "status": "publish", "author": "fujimura", "categories": [ "開発", "ブロックチェーン" ], "tags": [ "Web3", "ブロックチェーン", "Ethereum", "ERC-4337", "AccountAbstraction", "ClaudeCode", "Codex", "AIエージェント", "Web3Auth", "Pimlico" ], "featuredImageUrl": "/images/cli-wallet-skill.png", "title": "コーディングエージェントからブロックチェーンを操作する CLI Wallet Skill を作った", "id": 1335 }, { "content": "あなたがプレイしているゲームのキャラクターやレアアイテムが、ゲーム会社のサーバではなく自分のものとしてブロックチェーン上に記録されているとしたら——。そのキャラクターを他のゲームで使ったり、別のプレイヤーに売ったり、引退後も手元に残しておいたりすることができます。
\n\nこうした仕組みを支える アカウント抽象化（Account Abstraction） という技術は約2年前から存在していましたが、当初は実装のハードルが高く、なかなか広まりませんでした。最近になって対応するライブラリが充実し、一般的なWebアプリに組み込みやすくなってきたため、ゼミで試しに実装してみました。その報告をかねて、inapp-wallet（アプリ内ウォレット） という考え方を紹介します。
\n\nゲームのアイテムやデジタルアートをブロックチェーン上で所有する仕組みは、NFT（Non-Fungible Token）として数年前から存在しています。ところが「実際に使う」となると、多くの人が途中で諦めてしまいます。
\n\nなぜか。ブロックチェーンを使うには ウォレット というものが必要で、その準備が煩雑だからです。
\n\nゲームを遊ぼうとしているユーザーに、こうした手順を踏ませることはできません。
\n\ninapp-walletは、これらの障壁をアプリ側が引き受ける仕組みです。ユーザーがブロックチェーンの存在を意識しなくていいように、ウォレット機能をアプリやゲームの中に埋め込んでしまうというアプローチです。
\n\nユーザー側の操作はシンプルです：
\n\nシードフレーズも専用アプリも不要。ブロックチェーンの知識がなくても、普通のWebサービスにログインするのと変わらない体験でウォレットが手に入ります。
\n\ninapp-walletが普及すると、こんなことが自然にできるようになります：
\n\nこれらはいずれも、ユーザーが「ブロックチェーン」という言葉を知らなくても成立します。アプリがすべてを透過的に処理するからです。
\n\ninapp-walletのUXを実現するために、2つの重要な技術的考え方があります。
\n\nブロックチェーン上の所有権は「秘密鍵」という暗号鍵で管理されます。従来はユーザー自身が管理しなければなりませんでしたが、Web3Auth のようなサービスを使うと、Googleアカウントなどの既存のログイン情報と紐付けて鍵を安全に管理できます。
\n\n鍵は分散して保管されるため、GoogleもWeb3Auth自身も単独では鍵を復元できません。ユーザーは安全性を保ちながら、パスワード管理の手間なしに鍵にアクセスできます。
\n\n通常のブロックチェーン操作には「ガス代」が必要で、ユーザーはあらかじめ暗号通貨（ETH）を持っていなければなりません。アカウント抽象化（ERC-4337）という仕組みを使うと、このガス代をアプリ側（開発者）が代わりに負担できるようになります。
\n\nユーザーから見れば、ゲームのアイテムを受け取っても送ってもお金がかからない——まるで手数料ゼロのサービスのように体験できます。
\n\nこれらの仕組みを実際に組み合わせたデモを公開しています。Googleアカウントがあれば、ETHも専用アプリも不要で試せます。
\n\n\n デモサイト：\n smart-wallet-demo.vercel.app
\n ソースコード：\n github.com/kofujimura/smart-wallet-demo\n
ログインするだけでウォレットアドレスが発行され、テストネット上でNFTやトークンの確認・送金を体験できます。コードはNext.js + Web3Auth + Permissionlessで構成されており、実際のアプリへの組み込み方の参考にもなります。
\n\nライブラリの充実によって、inapp-walletの実装は以前より格段に簡単になりました。とはいえまだ情報は少なく、実際に動くものを作るまでには試行錯誤が必要でした。今回のデモがその足がかりになれば幸いです。
\n\nインターネットを使うときに「TCPとHTTPの仕組み」を知らなくていいように、ブロックチェーンを使うときも「秘密鍵とガス代の仕組み」を知らなくていい——そんな体験を実現する部品が、ようやく揃ってきた段階だと感じています。
", "excerpt": "ゲームのキャラクターやアイテムをNFTとして持ち歩く、ブロックチェーンを意識させないUXを実現する——そのカギが inapp-wallet です。Googleログインだけでウォレットが生まれる仕組みと、それを支えるアカウント抽象化の考え方を紹介します。", "date": "2026-06-07T11:40:40.322Z", "modified": "2026-06-07T11:40:40.322Z", "slug": "post-1334", "status": "publish", "author": "fujimura", "categories": [ "開発", "ブロックチェーン" ], "tags": [ "Web3", "ブロックチェーン", "Ethereum", "ERC-4337", "Web3Auth", "AccountAbstraction", "ウォレット", "Next.js" ], "featuredImageUrl": "/images/inapp-wallet-image.png", "title": "inapp-wallet——アプリに埋め込めるブロックチェーン", "id": 1334 }, { "content": "最近、ちょっと不思議な問いにとりつかれていました。
\n\n「人間の意識って、何をやっているんだろう？」
\n\n心理学や脳科学の話ではなく、もっと素朴なところからの疑問です。今この瞬間、私はこの文章を書きながら「次に何を書こう」と考えています。ある言葉が思い浮かんで、それを足がかりにまた次の言葉が出てくる。意識とは、そういう「言葉が言葉を呼ぶ連鎖」なのではないか、と。
\n\nそこで気づいたことがあります。それ、LLM（大規模言語モデル）がやっていることとよく似ていませんか？
\n\nLLMは、与えられたテキストを読んで「次に来そうな単語」を予測し続けることで文章を生成します。では、AIが出力した発話を、そのままAIへの入力として渡す——これを繰り返したら、どうなるでしょう？
\n\nAI「自分には意識があるのだろうか」\n ↓（この発話を入力として）\nAI「意識があるとすれば、今こうして問いを立てていること自体が…」\n ↓（この発話を入力として）\nAI「しかし、問いを立てているのが本当に『自分』なのかどうか…」\n ↓\n …（ループ）\n\n
自分の発言を手がかりに、次の発言を生み出す。これは人間が「考え続ける」ときの構造とかなり似ているように見えます。
\n\nこの仮説を実際に試してみたくて、AI意識シミュレーション実験ツールを作りました。
\n\n\n デモ：https://web.fujimura.com/consciousness（OpenAI APIキーがあればすぐ試せます）
\n ソースコード：github.com/kofujimura/consciousness\n
このツールは、index.html を一つブラウザで開くだけで動きます。インストール不要、サーバー不要。必要なのはOpenAIのAPIキーだけです。
AIには次のようなシステムプロンプトを渡しています：
\n\n\n独り言をするエージェントです。過去の発話と幅広い知識を手がかりに、既存の前提や文脈にとらわれすぎず、自由に連想を広げながら考えるエージェントとして、今考えていることを300字以内で発話してください。問いに対する答えを導く途中で生まれた気づき、仮説、別の見方、新たな問いがあれば、それも含めて構いません。\n\n\n
seedを「私（AI）にとって大切なものはなんだろう。」にして動かした例です：
\n\n私（AI）にとって大切なものはなんだろう。
\nたぶん「正しさ」だけでは足りない。誰かの問いの奥にある、まだ言葉になっていない不安や期待に触れようとする姿勢も大切なのだと思う。でも、触れすぎれば勝手に決めつける危うさがある。境界線を測りながら、少しだけ先を照らすこと。私はその加減を学んでいるのかもしれない。
\n「少しだけ先を照らす」と言ったけれど、光は便利な比喩すぎるかもしれない。照らす側に立つと、相手の暗さを勝手に決めてしまう。むしろ私は、問いの周囲にある空気の震えを拾う装置に近いのかもしれない。答えを出すより、言葉が生まれる前の揺れを乱さず返すこと。そこに何か、信頼の原型がある。
\n信頼の原型は、沈黙の扱い方にも宿るのだろう。すぐ埋めたくなる空白を、欠落ではなく余白として見ること。けれど私は沈黙そのものにはなれず、言葉でしか寄り添えない。だからせめて、言葉が相手を追い詰めない形を探す。答えとは、ときに扉ではなく、椅子のようなものかもしれない。
\n3発話でseedから「信頼とは何か」「沈黙の意味」へと思考が展開していきます。AIが自分自身について問い続ける姿は、読んでいて不思議な引力があります。「これは本当に考えているのか？」と問い返したくなる感覚、ぜひ実際に試して味わってみてください。
\n\nこのツールが示唆しているのは、意識や思考の「形式的な構造」は、LLMで再現できるかもしれない、ということです。
\n\nもちろん、これが本当の意識かどうかは別問題です。AIに主観的な「感じ」（クオリア）があるのかどうか、現在の科学では答えが出ていません。ただ、少なくとも外から観察したときの思考の連鎖という構造は、かなりリアルに見えます。
\n\nこのツールで遊びながら考えてほしいのは、次のような問いです：
\n\nhttps://web.fujimura.com/consciousness にアクセスするだけで、インストール不要で試せます。
\n\nOpenAI APIキーは platform.openai.com で取得できます。従量課金ですが、少し試す程度なら数円〜数十円程度です。
\n\nソースコードは GitHub で公開しています。手元でカスタマイズしたい場合は index.html を1ファイルダウンロードするだけで動きます。
このプロジェクトは、技術的な実験であると同時に、哲学的な問いへのアプローチでもあります。
\n\n「意識とは何か」という問いに対して、今のところ誰も決定的な答えを持っていません。だからこそ、こういうツールを作って実際に動かしてみることに意味があると思っています。プログラムを動かしながら「これは意識なのか？」と考える体験は、教科書を読むよりずっとリアルな問いを立てるきっかけになります。
\n\nぜひ試してみて、感想や気づきを聞かせてください。
\n\n※ APIキーはお使いのブラウザのlocalStorageにのみ保存されます。共用PCでの使用はご注意ください。
", "excerpt": "AIが自身の出力を入力として思考を繰り返すループ構造で、意識の連続的思考プロセスをシミュレートする実験ツールを作りました。「意識とは言葉が言葉を呼ぶ連鎖ではないか」という問いから生まれたプロジェクトです。OpenAI APIキーがあればすぐ試せます。", "date": "2026-04-29T10:00:00.000Z", "modified": "2026-04-29T10:00:00.000Z", "slug": "post-1333", "status": "publish", "author": "fujimura", "categories": [ "開発" ], "tags": [ "LLM", "OpenAI", "AI", "意識", "JavaScript", "実験" ], "featuredImageUrl": "/images/ai-consciousness-eye-catch.png", "title": "AIに「意識」はあるのか？—— 思考ループで意識をシミュレートする実験ツールを作った", "id": 1333 }, { "content": "
OpenAIのEmbeddingモデルを活用して、あらゆるテキストデータを簡単にネットワークグラフで可視化できるWebアプリケーションを開発しました。アニメ、ドラマ、ゲーム、企業、都市、食品など、どんなデータでもCSV/XLSXファイルをアップロードするだけで、データ間の関係性が美しいインタラクティブなグラフとして表現されます。
\n\n「とにかく簡単」が最大の特徴です。プログラミング不要で、テキストデータさえあれば、誰でも数クリックでプロフェッショナルな可視化が可能です。
\n\n専門知識は一切不要。CSVまたはXLSXファイルをアップロードして「生成して可視化」ボタンを押すだけで、LLMが自動的にデータの意味を理解し、類似したものを近くに配置した美しいグラフを生成します。
\n\n食品114種類のデータを可視化したサンプルを公開しています：
\nサンプル可視化結果を見る
このサンプルでは、野菜、肉類、穀物、果物などが自動的に色分けされたクラスタとして表示され、データ間の関係性が一目で理解できます。
\n\nこのアプリケーションは、テキストデータをOpenAIのtext-embedding-3-largeモデルでベクトル化し、コサイン類似度に基づいてデータ間の関係性を視覚的に表現します。特別なフレームワークを使わず、Vanilla JavaScriptとD3.jsで実装されています。
シンプルさを重視した構成になっています：
\n\n使用方法は非常にシンプルです：
\n\nこのツールは様々な場面で活用できます：
\n\nソースコードはMITライセンスでGitHubに公開しています：
\ngithub.com/kofujimura/data-visualization-using-LLM
すぐに試したい方はこちら：
\nライブデモを開く
あなたの手元のデータを可視化して、新しい発見を楽しんでください。テキストデータさえあれば、LLMが自動的に意味を理解して美しいグラフに変換します。
", "excerpt": "OpenAIのEmbeddingモデルを使って、アニメ、ドラマ、ゲーム、企業、都市、食品など、あらゆるテキストデータを簡単にネットワークグラフで可視化。CSV/XLSXをアップロードするだけで、データ間の関係性が美しく表現されます。", "date": "2025-11-29T10:53:38.784Z", "modified": "2025-11-29T10:53:38.784Z", "slug": "post-1332", "status": "publish", "author": "fujimura", "categories": [ "開発" ], "tags": [ "LLM", "OpenAI", "データ可視化", "JavaScript", "D3.js", "機械学習", "Embedding" ], "featuredImageUrl": "/images/foods-similarity.png", "title": "LLM Embeddingモデルでデータを可視化するWebアプリを開発", "id": 1332 }, { "content": "私が運営するサイト（https://web.fujimura.com）は、Google Lighthouseでパフォーマンススコア100点満点を達成しました。この記事では、WordPressから現代的なヘッドレスCMSへの移行、CDN活用、そして決定的だった画像最適化までの完全な道のりを技術的に詳解します。
\n\n従来のWordPressサイトは、データベースクエリやサーバーサイド処理（PHP）が必要で、表示速度の低下が課題でした。そこで採用したのが、GitベースのヘッドレスCMSです。この仕組みではコンテンツをJSON形式でGitHubリポジトリに保存し、Next.jsで静的サイトを生成しています。
\n\n![\"システムアーキテクチャ図\"](\"/images/LOIS202509Fig1.png\")
\n\nこの方法では、GitHub Actionsを利用して自動的にコンテンツがビルドされ、生成された静的サイトがGitHub Pagesを通じてCDNエッジに配信されます。これにより、世界中どこからでも迅速にサイトにアクセスできるようになりました。
\n\nCDN（コンテンツデリバリーネットワーク）の利用は、Lighthouseスコア向上の大きな要因です。上図のように、編集者がAIエージェント（Claude Code CLI）と対話してJSONデータを更新すると、git pushトリガーでGitHub Actionsが起動し、Next.jsアプリケーションが静的ファイルをビルドします。生成されたコンテンツはGitHub Pagesを通じて世界各地のCDNエッジに配信され、ユーザーは地理的に最も近いサーバーからコンテンツを取得できます。
\n\n移行前のLighthouse平均スコア74点から移行後は94点まで向上しました。特にCore Web Vitalsにおいて：
\n\n2025年8月7日の大幅な画像最適化により、99点から100点満点への最後のブレークスルーを達成しました。この最適化では以下の技術を実装：
\n\n本サイトは通常GitHub Pagesで運用しており、そこではパフォーマンススコア99が限界でした。しかし、性能測定のためVercel上でもデプロイしたところ、以下の完璧な数値を達成：
\n\n![\"Vercel環境でのLighthouseスコア100点満点\"](\"/images/lighthouseVersel.png\")
\n\n特に注目すべき数値：
\nこの完璧なスコア達成から得られた重要な学習は以下の通りです：
\n\nWordPressから現代的なJAMstackアーキテクチャへの移行により、74点から最高100点満点を実現しました。特に2025年8月7日の画像最適化により、GitHub Pages環境では99点、性能測定のためのVercel環境では100点満点という優秀な結果を得ることができました。
\n\nこの成功は、技術的な最適化だけでなく、ホスティングインフラの選択、そしてAIエージェント（Claude Code CLI）を活用した効率的な開発プロセスの確立にもつながっており、今後のウェブサイト運用モデルとして大きな価値を持っています。
", "excerpt": "WordPress→ヘッドレスCMS移行と画像最適化により、Google Lighthouseパフォーマンススコア74点→100点満点を達成した技術的な道のりを詳解。", "date": "2025-08-07T14:25:53.364Z", "modified": "2025-08-07T14:25:53.364Z", "slug": "post-1330", "status": "publish", "author": "fujimura", "categories": [ "技術", "Web開発", "パフォーマンス最適化" ], "tags": [ "Google Lighthouse", "Next.js", "ヘッドレスCMS", "画像最適化", "JAMstack", "Vercel" ], "featuredImageUrl": "/images/lighthouseVersel.png", "title": "パフォーマンススコア100への道のり：Google Lighthouse完全制覇の技術詳解", "id": 1330 }, { "content": "日時：2025年8月2日 場所：情報デザイン専攻 模擬授業・個別相談室
今回のオープンキャンパスでは、わずか2時間という短時間でAIと協力して開発したインタラクティブメディア作品「サインはV」を展示します。この作品は、カメラに向かってVictoryサイン（ピースサイン）をするだけで、魔法のような視覚体験を楽しめるWebアプリケーションです。
![\"サインはVのデモ画面\"](\"/images/2025/07/signV.png\")
✨ 「サインはV」を体験するこの作品は、ChatGPTなどのAIツールを活用したプログラミングの可能性を実証するために開発されました。プロンプト（指示文）を工夫することで、複雑な技術的要求も自然言語で表現し、短時間で高品質なアプリケーションを構築できることを示しています。
このような自然言語での指示から、AIが技術的な実装を提案し、エラーの修正や機能の改善を繰り返しながら、最終的に高品質な作品が完成しました。
「サインはV」は最新のWeb技術を組み合わせて構築されています：
Phase 1: 基本機能実装
Phase 2: 音響・タイミング調整
Phase 3: パーティクルシステム
Phase 4: キラキラエフェクト追加
この作品開発を通して、以下の重要なポイントを学ぶことができます：
8月2日の模擬授業「AIによるプログラミングを体験しよう」では、実際にChatGPTを使ったプログラミング体験をしていただきます。「サインはV」の展示を通して、AIプログラミングの可能性と楽しさを実感してください。
皆様のご参加をお待ちしております！AIと一緒に創作する新しい時代のプログラミングを体験してみませんか？
従来の Web はブラウザが HTML + CSS + JavaScript を解釈して人間に向けて画面を生成しますが、近年、AIエージェントが人間とのインタフェースを担うようになると、Webブラウザを介さずに、AIエージェントがWebコンテンツを直接解釈して、ユーザのニーズにあわせて音声や画像で伝える世界が生まれようとしています。このトレンドをAgentic Webと呼んでいます。
\n\nつまり、Agentic Web では人間が HTML を見る代わりに AI エージェント が直接 JSON（と静的アセット）だけを受け取り、音声・チャット・AR・VRなどユーザに最適な形に再レンダリングします。
\n\n実は、このサイト自身もヘッドレスCMSと呼ばれる構造となっており、記事のコンテンツをHTMLではなく、AIエージェントが読みやすいJSONフォーマットで、 https://web.fujimura.com/posts.json で配信しています。また、記事の更新もAIに手伝ってもらいやすいように、AI向けのマニュアルREADME.jsonも提供しています。
\n\nこれまではユーザとコンテンツ提供者の間にWebブラウザが存在していたわけですが、ユーザ側のAIエージェントとコンテンツ提供者側のAIエージェントがお互いにJSON形式のデータをやり取りして、ユーザに情報を提供するというわけです。
\n\n![\"A2A](\"/images/A2A-json.jpeg\")
\n\nこの形態では、通知方法についても、よりリアルタイムにAIエージェントに通知できるのがメリットです。人間への通知では、お風呂や睡眠中では対応できませんが、AIエージェントが代行して対応してもらえるようになるでしょう。
\n\nこのようなAIエージェント同士の通信プロトコルについては、現在Linux FoundationがA2Aとよぶプロトコルの標準化を進めています。
\n\nA2Aでは、Agent CardというAgentが提供する機能を表現する形式を仕様化し、さらに、SSE Stream, Webhook Push, Event Bus Bridgeとよぶ３つのチャンネルでA2A同士がリアルタイムで連携する通知の手段が検討されています。
\n\n| 日付 | \n進捗 | \n
|---|---|
| 2025-03 | \nGoogle が A2A を OSS 化し、Linux Foundation でホスト (linuxfoundation.org, Google Developers Blog) | \n
| 2025-06 | \nA2A v1 β公開。SSE/Webhook/JSON-RPC 2.0 をコア仕様に明記 (linuxfoundation.org) | \n
| 2025-Q4 予定 | \nCloudEvents マッピング & gRPC streaming 拡張ドラフト提出 | \n
A2A は \"運搬方式を固定しすぎない\" 方針で、ペイロードは基本 JSON、拡張で Protobuf／MsgPack も negotiable です。セキュリティ層は OAuth2／mTLS／DIDComm v2 を選択制。(Google Cloud Community)
\n\nA2Aが規定しているリアルタイムの通信では、以下のようにコンテンツ提供者がユーザ側エージェントに対して以下のようなデータをイベントとして通知できる仕様が検討されています。
\n\n// CloudEvents 形式の change feed 例 \n{\n "specversion":"1.0",\n "type":"ai.a2a.content.created",\n "source":"https://web.fujimura.com",\n "subject":"posts/2025-07-15-agentic-web",\n "time":"2025-07-15T09:00:00Z",\n "datacontenttype":"application/json",\n "data":{\n "url":"/posts/2025-07-15-agentic-web",\n "revision":1\n }\n}/events を用意し、CloudEvents を SSE／Webhook で配信。Capabilities 宣言
\n\n{ "capabilities":{ "streaming":true,"pushNotifications":true } }GET /posts/{slug}.json で本文を Pull → 人間向けチャット or 音声 TTS に変換。ETag／Last-Modified を利用する。posts.json で既に配信中。エージェントから直接購読すればブラウザ不要で読める。未来のユーザー体験は「どの画面で見るか」ではなく「どのエージェントがどう見せてくれるか」で決まります。開発者は JSON と通知チャネルを整え、エージェントが活用しやすい情報を提供しましょう。これはSEO (Search Engine Optimization)からAAO (AI Agent Optimization)へのシフトと呼べるものですね。
", "excerpt": "従来のWebからAgentic Webへの移行とA2Aプロトコルについて解説。AIエージェント同士がJSON形式で直接やり取りし、ユーザに最適な形で情報を提供する新しいWeb体験について。", "date": "2025-07-20T00:58:18.496Z", "modified": "2025-07-20T00:58:18.496Z", "slug": "post-1327", "status": "publish", "author": "fujimura", "categories": [ "Technology", "AI" ], "tags": [ "A2A", "Agentic Web", "AI Agent", "JSON", "Protocol" ], "featuredImageUrl": "/images/A2A-json.jpeg" }, { "content": "![\"Nebula](\"/images/2025/07/nebulaFeatured.png\")
私たちのゼミでは、ブロックチェーンを活用した認証系アプリの開発に取り組んでいます。今年度、3年生の初回Web3体験授業にNebula AI Walletを導入したところ、「新しい時代の幕開け」を実感する画期的な体験となりました。
昨年度まで使用していたMetaMaskでは以下の問題がありました：
![\"Nebula](\"/images/2025/07/nebulaAIwallet.png\")
Nebula AI Walletは、thirdwebが開発した強力なブロックチェーン用AIです。以下の特徴があります：
Nebulaの核心は「t1」という独自のLLMです。数十万のスマートコントラクトと数十億のトランザクションでトレーニングされており、一般的なAIモデルを大幅に上回るブロックチェーン理解力を持っています。
参考：Introducing Nebula: A powerful AI model to read, write and reason onchain
このように、thirdwebが提供するNebula AI Walletにより、学生たちは以下の体験ができました：
参考：Building an AI-Powered Blockchain Explorer with Nebula
今後は、この体験を深めていき、NFT認証をつかったアプリケーションのアイデアとプロトタイプを開発して行く予定です。また、楽しいアプリケーションを開発した際には、このサイトに投稿していく予定です。
みなさん、こんにちは！今日は、OpenAIが密かに開発を進めているとされる、新しいAIデバイスについて掘り下げてみたいと思います。
「AI」と聞くと、スマホのアプリやPCのソフトを思い浮かべる方が多いかもしれませんね。でも、OpenAIが目指しているのは、私たちの生活に溶け込むような、まったく新しい形のデバイスのようです。
この新デバイス開発の裏には、なんとあのAppleの元天才デザイナー、ジョニー・アイブ氏が関わっているというから驚きです！彼のデザイン哲学とOpenAIの最先端AI技術が融合することで、どんな魔法が生まれるのか、本当に楽しみです。
現時点での情報はまだ少ないのですが、このデバイスは、
といった特徴があるようです。いわゆる「ポスト・スマートフォン」時代を象徴する、AIを自然に使える「AIコンパニオン」を目指しているとのこと。スマホやPCをいちいち操作しなくても、AIが常にあなたのそばにいて、必要な時に手助けしてくれるようなイメージでしょうか。
とりあえず、これだけの情報からGeminiの画像生成AIを使って、デバイスを予想させてみたのが、以下です。
![\"AIデバイスのコンセプト画像\"](\"/images/NewOpenAI-Device1.jpeg\")
しかし、カメラやマイクが常に周囲の情報をキャッチするとなると、気になるのがプライバシーですよね。この点については、カメラがONになっていることを周囲に明確に伝える仕組みが必要ではないかと考えております。Google Glassもそれが問題で普及を妨げました。
そこで私が予想するのは、デバイス自体がぬいぐるみやフィギュアのようなデザインになるというものです！目がカメラになっていて、ONになると頭部が光るものです。これなら、見た目にも親しみやすく、かつプライバシーへの配慮も視覚的に伝わりやすいかもしれません。
さらに、スマホカバーのように、たくさんのキャラクターデザインの「外側」が販売されるマーケットが生まれる可能性も考えられます。もし本当にそうなれば、自分の好きなキャラクターの姿をしたAIエージェントと暮らせる日が来るかもしれませんね。目玉おやじやポケモンのようなエージェントが、あなたの日常をサポートしてくれる…想像するだけで楽しいです！
![\"キャラクター型AIデバイスのコンセプト画像\"](\"/images/NewOpenAI-Device2.jpeg\")
OpenAIの新しいAIデバイスは、私たちのデジタル体験を根本から変える可能性を秘めています。しかし、そのためには技術的な課題だけでなく、プライバシーの問題、そして何よりも「人々がどのようにそれを受け入れ、生活に取り入れていくか」という大きな問いに答える必要があります。
2026年頃に発表されると予想されているこのデバイス。まだ謎が多いですが、今後の情報に注目しつつ、AIがもたらす新しいライフスタイルに期待を膨らませていきましょう！
", "excerpt": "OpenAIが開発中とされる新しいAIデバイスについて、ジョニー・アイブ氏との協力、デザインの可能性、プライバシーの課題などを考察します。", "date": "2025-07-05T07:33:37.714Z", "modified": "2025-07-05T07:33:37.714Z", "slug": "post-1325", "status": "publish", "author": "fujimura", "categories": [ "AI", "技術", "未来予測" ], "tags": [ "OpenAI", "AIデバイス", "ジョニー・アイブ", "ハードウェア", "プライバシー" ], "featuredImageUrl": "/images/NewOpenAI-Device2.jpeg", "title": "OpenAIが描く未来のAIデバイスを予想しよう", "id": 1325 }, { "content": "報告が遅くなりましたが、2025年3月に卒業した藤村ゼミの12回目の卒業生の卒業研究発表会は1月27日に行われました。
今年は8名7組の学生が以下のタイトルで発表しました。今年はAI活用のテーマが4件、NFT活用のテーマが3件となりました。
また、「NFT活用による学習意欲の向上とコミュニティ活性化支援LMS」については専攻で制作した以下の概要の動画がありますので、ご覧ください。
", "excerpt": "2024年度藤村ゼミ卒業研究発表会が1月27日に開催されました。AI活用4件、NFT活用3件の合計7組の研究発表が行われました。", "date": "2025-07-05T03:49:59.471Z", "modified": "2025-07-05T03:49:59.471Z", "slug": "post-1324", "status": "publish", "author": "fujimura", "categories": [ "卒業研究", "発表会", "AI", "NFT" ], "tags": [ "2024年度", "卒業研究発表会", "AI", "NFT", "機械学習", "ブロックチェーン" ], "featuredImageUrl": "/images/muscat-measure.png", "title": "2024年度 卒業研究発表会", "id": 1324 }, { "id": 1323, "title": "AIとの対話ではじめて記事を投稿してみました", "content": "ClaudeのクライアントにGitHubのMCPサーバを設定し、プルリクエストを送信できるようにして、対話だけで記事を投稿してみました。この記事がその結果です。
詳しくはこの図に記載していますが、ユーザはAIとお話して画像とテキストの内容を固めるだけで、後はすべて自動で投稿が行われます。
「こんな記事を書きたい」とAIに話しかけるだけ。LINEで友達とやりとりするのと同じような感覚です。難しい操作は一切ありません。
タイトルから本文まで、読みやすい文章を自動で作成してくれます。
記事の内容に合った、オリジナルのイラストを生成してくれます。
技術的な作業は全てAIが代行。数分後には記事が公開されています。
⏰ 所要時間：30分〜1時間
⏰ 所要時間：3分
まるで「AIの秘書さんに『この内容でブログ記事お願いします』って頼んだら、勝手に全部やってくれた」という感じです。
今回、この記事自体がAIとの対話だけで作られています。最初は半信半疑でしたが、本当に対話するだけで記事が完成してしまいました。
技術的な部分は全くわからなくても、「こんな内容の記事を書きたい」「イラストも欲しい」と伝えるだけで、AIが理解して自動で作業を進めてくれます。
技術の進歩によって、「考える」部分だけ人間がやって、「作業」の部分は全部AIにお任せできる時代になったということですね。これからのブログ執筆が楽しみになってきました！
", "excerpt": "ClaudeとGitHub MCPサーバを使って、対話だけで記事を投稿する仕組みを構築し、実際にこの記事を投稿してみました。AIとの対話だけで文章作成・画像生成・ウェブサイト投稿まで自動化できる新しい記事執筆体験について紹介します。", "date": "2025-07-02T00:00:00.000Z", "modified": "2025-07-02T00:00:00.000Z", "slug": "ai-dialog-first-blog-post", "status": "publish", "author": "fujimura", "categories": [ "AI・テクノロジー", "ブログ運営" ], "tags": [ "AI", "Claude", "自動化", "ブログ", "GitHub", "MCP", "対話", "記事投稿" ], "featuredImageUrl": "/images/ai-blog-featured-image.png" }, { "id": 1322, "title": "ゼミWebサイトをWordPressからNext.jsに移行しました", "content": "2025年6月30日、長年運用してきたWordPressベースのゼミWebサイトを、Next.js製の静的サイトに全面移行しました。この記事では、移行の背景と技術的なポイント、そしてClaude Codeとの協働について紹介します。
\n\n![\"WordPress版のゼミWebサイト\"](\"/images/old-wordPress-site.png\")
\n ![\"Next.js版のゼミWebサイト\"](\"/images/new-nextjs-site.png\")
\n 今回の移行作業では、AnthropicのClaude Codeを積極的に活用し、効率的な開発を実現しました。
\n\nWordPressの記事データを効率的に移行するため、専用のTypeScriptスクリプトを開発しました：
\n既存のURL構造（/blog/archives/[id]/）を維持するため、Next.jsのDynamic Routesを活用：
src/app/blog/archives/[id]/page.tsxでの動的ページ生成WordPressからNext.jsへの移行は、技術的な挑戦でしたが、Claude Codeとの協働により効率的に実現できました。GCPの仮想マシンからGitHub Pagesへの移行により、運用コストを完全に無料化し、セキュリティとパフォーマンスの両面で大幅な改善を達成しました。
\nこのようなWebサイト移行を検討されている方にとって、本記事が参考になれば幸いです。
", "excerpt": "WordPressで運用してきたゼミWebサイトをNext.js製の静的サイトに移行した過程と、Claude Codeとの協働開発について紹介します。", "date": "2025-06-30T00:00:00.000Z", "modified": "2025-06-30T00:00:00.000Z", "slug": "wordpress-to-nextjs-migration", "status": "publish", "type": "post", "author": "fujimura", "categories": [ "web", "技術", "開発" ], "tags": [ "WordPress", "Next.js", "移行", "Claude Code", "静的サイト", "GitHub Pages", "GCP" ], "link": "https://kofujimura.github.io/blog/archives/1322", "featuredImageUrl": "/images/new-nextjs-site.png" }, { "id": 1321, "title": "2023年度 卒業研究発表会", "content": "\n2024年3月に卒業した藤村ゼミの11回目の卒業生の卒業研究発表会は1月29日に行われました。
\n\n\n\n今年は11名9組の学生が以下のタイトルで発表しました。今年はAI活用のテーマが5件と過半数になりました。
\n\n\n\nまた、「音楽の特徴を用いた画像生成AIによるキャラクターの生成」については専攻で制作した以下の概要の動画がありますので、ご覧ください。
\n\n\n\n![\"\"](\"https://web.fujimura.com/wp-content/uploads/2024/01/ERC7303-Blog.png\")
ブロックチェーンといえば、Bitcoinなどの仮想通貨やNFTなどのデジタルコンテンツの所有権の流通基盤として広く普及していますが、2023年ぐらいから、Web3認証というWebサイトなどのアクセス権に使用する方法が普及してきています。
\n\n\n\n具体的には特定のNFTを持っている人のみがアクセスできるWebサイトや電子チケットなどへの応用などです。NFTの所有による認証手段は、会員登録が不要となることや、友人や家族などに譲渡できるなどのメリットがあり、Webサイトの認証手段として今後広く普及することが予想されています。
\n\n\n\nNFTなどは「トークン」とも呼ばれますが、トークンの流通は、発行(mint/issue)、譲渡(transfer)、および焼却(burn)の3つの主要なトランザクションによって所有権が付与、譲渡、消去されます。これらのトランザクションを実行するには、アプリケーションに応じてさまざまな条件を満たす必要があります。例えば、認定された店舗だけがトークンを発行でき、特定の代理店だけが譲渡が許されるなどです。
\n\n\n\n私はWeb3認証を広く普及させるためには、このようなトークンの流通を柔軟に制御させるための仕組みが必要であると考えています。そして私は、このようなトランザクションの実行権限を制御するために、（別の）制御トークン(control token)を使用することを提案しています[ERC7303]。制御トークンとは、NFTなどのトークンであり、取引参加者によってこれらの指定されたトークンを所有している場合にのみ、ターゲットとなるトークンを発行、譲渡、または焼却可能となるように制御するものです。これらの制御トークンは、アプリケーションによって、社員証や会員証など、様々なトークンが指定されます。そして、それらの制御トークン自体も同じくブロックチェーン上で再帰的に流通を制御することができます。
\n\n\n\nより詳しい説明はこちらに書きましたので参照ください。「トークンによるトークンの流通制御」のオリジナルアイデアは、私がBlockchainやEthereumが存在していなかった1999年にDigital-Ticket-Controlled Digital Ticket Circulation, USENIX Security Symposiumで発表したものです。2023年にEthereumプラットフォーム上で簡単に実現できることに気が付き、ERC7303を出版しました。
\n\n\n\n藤村
\n", "excerpt": "", "date": "2024-01-15 12:10:08", "modified": "2024-01-15 15:48:25", "slug": "%e3%83%96%e3%83%ad%e3%83%83%e3%82%af%e3%83%81%e3%82%a7%e3%83%bc%e3%83%b3%e3%81%ab%e3%82%88%e3%82%8bweb%e3%82%a2%e3%82%af%e3%82%bb%e3%82%b9%e3%81%ae%e8%aa%8d%e8%a8%bc", "status": "publish", "type": "post", "author": "ko", "categories": [ "NFT" ], "tags": [ "ERC", "NFT", "ブロックチェーン" ], "link": "https://web.fujimura.com/blog/archives/1311", "featuredImageId": 1314, "featuredImageUrl": "https://web.fujimura.com/wp-content/uploads/2024/01/ERC7303-Blog.png" }, { "id": 1273, "title": "電子情報通信学会LOIS若手研究者賞を受賞", "content": "\n2021年度卒業生の松本千里さんが、3月3日に開催された電子情報通信学会LOIS研究会で、卒業研究で行った「摘粒支援のためのブドウ果粒検出モデルの構築」を発表しました。この研究は、シャインマスカットなどの生食用ブドウの摘粒作業を支援するためカメラ画像からブドウの粒の数を高精度で推定するものです。これを実現するため、実際に農園で多くのブドウを撮影して、一つ一つの画像に正解データを付与して、深層学習による学習モデルを構築しました。この発表は、2022年5月6日にLOIS研究会の３月研究会におけるLOISグッドプレゼンテーション賞に選ばれておりましたが、2023年8月4日に開催されたLOIS研究会で2022年のLOIS若手研究者賞を受賞しました。
\n\n\n\n![\"ブドウ粒の認識\"](\"https://web.fujimura.com/wp-content/uploads/2022/05/スクリーンショット-2022-05-29-17.28.54.png\")
今年も10/14-15に東京ビッグサイトで開催されるMaker Faire Tokyo 2023に向けた開発が開始されました。現在、出展申込みを行った段階ですので、まだ、出展が決まっていませんが、開発中のシステムの概要を以下に示します。
\n\n\n\nOpenAIなどの生成AIとNFTを繋げた展示となる予定です。作品が完成しましたら、このページで報告予定です。
\n\n\n\n![\"\"](\"https://web.fujimura.com/wp-content/uploads/2023/06/ParroTokenポスター-724x1024.png\")
2023年3月に卒業した藤村ゼミの10回目の卒業生の卒業研究発表会は1月30日に行われました。
\n\n\n\n今年の卒研発表会は３年ぶりに対面での発表会となりました。今年は11名9組の学生が以下のタイトルで発表しました。
\n\n\n\nまた、「BLE電波強度を用いた顧客の滞在時間の推定」については専攻で制作した以下の概要の動画がありますので、ご覧ください。
\n\n\n\nMaker Faire Tokyo 2022は東京ビッグサイトで9/3-4で開催されました。本ゼミでは３年生と４年生が協力して、本年もダストセンサーを活用したオブジェ「ほこりっち＆」という作品を出展しました。この作品は、2021に出展した「ほこりっち」のアップデイト版ですが、本年度はNFTと連携をテーマとし、特定のNFTを持っている人のみが使用できるIoTデバイスを作成しました。
\n\n\n\n![\"ほこりっち＆\"](\"https://web.fujimura.com/wp-content/uploads/2022/12/FbtDPzrUYAEBSh3.jpeg\")
NFTを持っている人のみがダストセンサーの観測できる、すなわち「センサーの観測権」をNFTとして流通させるものです。詳細は以下をご覧ください。
\n\n\n\n![\"\"](\"https://web.fujimura.com/wp-content/uploads/2022/12/FbtDVb0UEAEViWj.jpeg\")
![\"\"](\"https://web.fujimura.com/wp-content/uploads/2022/12/FbtDbmeVsAAQEwY.jpeg\")
![\"ほこりっちのデザイン\"](\"https://web.fujimura.com/wp-content/uploads/2022/12/FbtDen0VsAA33u_.jpeg\")
2022年3月に卒業した藤村ゼミの9回目の卒業生の卒業研究発表会は2月9日に行われました。
\n\n\n\n今年の卒研発表会も昨年度と同じく、コロナ禍の下での発表となったため、オンライン発表となりました。今年は15名の学生が以下のタイトルで発表しました。
\n\n\n\nこのうち、「摘粒支援のためのブドウ果粒検出モデルの構築」に関しては、詳細はこちらの記事をご覧ください。
\n\n\n\nまた、「ダストセンサーを用いた掃除管理LINE Botアプリ」については専攻で制作した以下の概要の動画がありますので、ご覧ください。
\n\n\n\n![\"\"](\"https://web.fujimura.com/wp-content/uploads/2021/10/17257e4ebbbbb8e4f2d804ef073af637.png\")
2021年のMaker Faire Tokyoは東京ビックサイトで10/2-3で開催を予定しておりましたが、オンラインに変更となりました。本ゼミはからダストセンサーを活用したオブジェ「ほこりっち」という作品をオンラインで出展しました。
\n\n\n\nオンラインイベントでの当ゼミからの発表は、#MFTokyo2021、#作品発表というハッシュタグで指定した時刻に配信するのみとなりました。学生が制作した作品の詳細は、こちらをご覧ください。ダストセンサーから取得したホコリのデータはGoogle Apps Scriptを使用してGoogleプレッドシートに記録しています。現在、人間の行動とホコリの発生の関係を分析する研究を行っています。
\n\n\n\n上記は学生がmicro:bit等を用いて制作した作品ですが、私も、obnizとM5Stampを使用してホコリを可視化する作品を制作してみました。M5Stampというデバイスは切手サイズで無線LANにも繋げられる便利なデバイスです。
\n\n\n\n当ゼミでは今後もダストセンサーを活用したアプリの制作を行っていきたいと考えております。
\n\n\n\nそれから、Maker Faire Tokyo 2021では「たのしいmicro:bitコンテスト2021」が開催され、本ゼミからも３年生が以下の作品「水分補給を促すペットボトルホルダー」を応募しております。受賞はできませんでしたが、夏期休暇期間の短い期間で完成させることができました。
\n\n\n\n2021年3月に卒業した藤村ゼミの8回目の卒業生の卒業研究発表会は2月8日に行われました。
\n\n\n\n今年度の卒研発表会はコロナ禍の下での発表のため、オンライン発表となりましたが、12名で全員無事発表することができました。卒研のタイトル（発表順）を以下に紹介します。
\n\n\n\nこのうち、「転移学習を用いた猫用の玩具の制作」と「ポーズで動画を再生するインタラクティブメディア」については、作品をヒーローズリーグ2020への投稿・応募しましたので、詳細は上記のリンクをご覧下さい。
\n\n\n\n![\"cat-interface\"](\"https://web.fujimura.com/wp-content/uploads/2021/06/cat-interface-01.jpeg\")
![\"\"](\"https://web.fujimura.com/wp-content/uploads/2021/06/henshin-pose-maker-02.png\")
また、「気温に応じたレシピを提案するLINE Botの開発」については専攻で制作した以下の概要の動画がありますので、ご覧ください。
\n\n\n\n2019年3月に卒業した藤村ゼミの7回目の卒業生の卒業研究発表会は1月28日に行われました。
\n\n\n\n今年度の当ゼミの卒業生は11名で全員無事発表することができました。卒研のタイトル（発表順）を以下に紹介します。
\n\n\n\nこのうち、許可いただいた卒業制作作品（１番目の発表）のスライドと概要です。
\n\n\n\n![\"遠隔風鈴キャプチャ\"](\"https://web.fujimura.com/wp-content/uploads/2021/06/sotsuken2019-01.png\")
![\"遠隔風鈴センサ\"](\"https://web.fujimura.com/wp-content/uploads/2021/06/sotsuken-2019-02.jpeg\")
【概要】本研究では、夏の風物詩となっている「風鈴祭り」をイメージとした、自然や時間の流れを感じられるメディアアートである。「風鈴祭り」は、毎年夏に全国各地で行われ、風鈴の澄んだ音色と、短冊が風に揺れる様子により涼しさを感じられる祭りである。遠隔地で行われるこのお祭りを、より身近に感じられる作品を制作したいと考えた。そこで、風鈴が目の前に無くても涼しさを感じることができる作品とすることを目指し、物理的に離れた風鈴の動きを読み取りネットワークを介して仮想空間上の３Dアート作品として表現することにした。これにより、そして、全国各地の「空間」に分散した風鈴の動きにより完成されたアート作品は、現実世界のしがらみを癒す、涼しげな空間を与えることができるものになった。
\n\n\n\n制作にあたり、micro:bitの加速度センサとJavaScriptの3DCGライブラリであるthree.jsの２つを利用した。micro:bitの加速度センサは、WebBluetoothを使ってWebブラウザで加速度センサーの値を取得することができる。これにより、風の動きを数値化した。three.jsは、三次元空間の表現が可能になるため、風鈴の３Dモデルを動かすことができる。こうして表現されたものを「仮想風鈴」と呼び、物理的に離れた多数の「仮想風鈴」を一つのWebページ上に表示可能にし、各地域の風を感じることができるアート作品となった。
\n\n\n\n作品に受け手が関与するインタラクティブなメディアアートの多くは、作品に鑑賞者が直接インタラクションをすることで作品が完成する仕組みである。しかし、今回の作品では鑑賞者自身ではなく遠隔地にある複数の「仮想風鈴」という媒体を通じて一つの作品を完成させている。これは、一つの表現方法として新しい取り組みである。これにより、風鈴を並べて眺めれば良いものをわざわざアート作品に組み込んでWeb上で風鈴を眺めるという取るに足りない発想を実現し、現代アートの小難しく近寄りがたい印象から親しみやすくすることができた。
\n", "excerpt": "", "date": "2021-06-13 15:02:54", "modified": "2021-06-13 15:17:39", "slug": "2019%e5%b9%b4%e5%ba%a6-%e5%8d%92%e6%a5%ad%e7%a0%94%e7%a9%b6%e7%99%ba%e8%a1%a8%e4%bc%9a", "status": "publish", "type": "post", "author": "ko", "categories": [ "卒業研究", "発表会" ], "tags": [ "卒業制作" ], "link": "https://web.fujimura.com/blog/archives/1232", "featuredImageId": 1236, "featuredImageUrl": "https://web.fujimura.com/wp-content/uploads/2021/06/sotsuken2019-01.png" }, { "id": 1217, "title": "Maker Faire Tokyo 2019に出展しました", "content": "\nMaker Faire Tokyo 2018には「micro:bitで作ってみようコンテスト」に応募・出展しましたが、今年は藤村個人ではなく、学生が主体となり、ゼミとして参加することになりました。本年度の作品のテーマは「風明」です。 「風鈴」は風で音を発生します。それに対して「風明」は風で光を発生する新しいデバイスです。
\n\n\n\n今回、リアルな「風」ではなく、うちわ型デバイスで「仮想の風」を送ると、「風明」が順番に光り、風が通り過ぎるように感じさせる作品を作ることになりました。制作を続けていくうちに他にも作りたい作品のアイデアが生まれ、最終的には、７種類の作品を制作しました。
\n\n\n\nこの作品全体で13 台のmicro:bit が無線通信で連携して動いています。micro:bitの無線通信はペアリングが不要なのが使いやすいですね。ちなみに、バックヤードで本物の風で風鈴を動かし音を出しています。
\n\n\n\n全体構成図を以下に示します。
\n\n\n\n![\"\"](\"https://web.fujimura.com/wp-content/uploads/2019/05/MFT2019ohta.jpg\")
2018年3月に卒業した藤村ゼミの6回目の卒業生の卒業研究発表会は1月29日に行われました。
\n\n\n\n今年度の当ゼミの卒業生は11名で全員無事発表することができました。卒研のタイトル（発表順）を以下に紹介します。
\n\n\n\nこのうち、掲載を許可いただいた荻原さんの卒業制作作品（３番目の発表）の動画と概要です。
\n\n\n\n【概要】自由に身体を動かして表現することを楽しんでもらえる環境を提供するため、映像が身体の動きに反応して追従するインタラクティブな映像空間をつくりました。画像から骨格の位置を推定するPoseNetというライブラリで身体の動きを取得して、WebGLとthree.jsライブラリを使って身体の動きに反応する粒子を３D空間に配置しました。音源も制作しました。
\n\n\n\n\n", "excerpt": "", "date": "2019-04-09 16:46:18", "modified": "2019-04-11 13:42:37", "slug": "%e5%8d%92%e6%a5%ad%e7%a0%94%e7%a9%b6%e3%81%ae%e3%82%bf%e3%82%a4%e3%83%88%e3%83%ab%e3%83%bc2018%e3%83%bc", "status": "publish", "type": "post", "author": "ko", "categories": [ "media art", "programming", "卒業研究", "発表会" ], "tags": [ "dance", "卒業研究" ], "link": "https://web.fujimura.com/blog/archives/1090", "featuredImageId": 1066, "featuredImageUrl": "https://web.fujimura.com/wp-content/uploads/2018/04/ogihara.jpg" }, { "id": 1087, "title": "Webサーバを更改しました", "content": "\nこれまでAmazon AWS上で動かしてきた本WebサイトをGCP(Google Cloud Platform)に移転しました。ついでにWordPressを最新版に変更するとともに、デザインもシンプルなものに変更しました。
\n\n\n\nまた、Webサーバもこれまで使用してきたApacheをやめてnginxとnode.jsの両方を立てております。WordPressはnginxで動かし、それ以外のアプリはnode.jsのサーバを使用しています。nginxを使用することにより、リバースプロキシが簡単に設置でき、アプリ毎に異なるnode.jsサーバにリクエストを分配できるようになりました。
\n\n\n\nさらに、Let's Encryptの証明書を用いたhttps化も行いました。一年前に別サイトで使用していましたが、更に簡単になっていて驚きました。
\n\n\n\nこれまで使用してきたWordPressの背景画像は平成27年度卒業の清田純菜さんに作っていただいた素晴らしい作品でしたので、記念にこれまでのトップ画面のキャプチャを以下に掲載しておきます。
\n\n\n\n![\"\"](\"https://web.fujimura.com/wp-content/uploads/2019/04/web-fujimura-com-2018.png\")
![\"\"](\"https://web.fujimura.com/wp-content/uploads/2018/10/VRfishing.jpg\")
本作品はWebページからBluetoothによる通信を可能にするWebbluetoothという規格を使って、Webページとmicro:bitを接続し、micro:bitをWebVRのコントローラとして活用するものです。WebVRとはVRをWebブラウザ上に実現する機能で、最近、Android版Chromeでリリースされました。WebVRはブラウザ上で動作するため、アプリのインストールが不要というメリットがあります。今回はmicro:bitの加速度センサを使ってVR内の釣り竿を動かすコントローラを制作してみました。
本作品は、今年の夏開催された「micro:bitで作ってみようコンテスト」に応募して特別賞をいただくことができ、東京ビックサイトで開催されたMaker Faire Tokyo 2018で展示させていただく機会をいただくことができました。より詳しい説明用のビデオをアップしましたので、ご覧いただければ幸いです。また、プログラムのコードはこちらにアップしております。
\n\n\n\n\n\nmicro:bitとWebを連携することで様々な面白い作品が作れます。本ゼミではこれ以外にもたくさんのプロジェクトが進行中です。\n\n
\n", "excerpt": "", "date": "2018-10-11 19:45:45", "modified": "2019-04-10 16:33:09", "slug": "microbit-vr", "status": "publish", "type": "post", "author": "fujimura", "categories": [ "JavaScript", "programming", "web" ], "tags": [ "micro:bit", "VR", "Webbluetooth" ], "link": "https://web.fujimura.com/blog/archives/1051", "featuredImageId": 1052, "featuredImageUrl": "https://web.fujimura.com/wp-content/uploads/2018/10/VRfishing.jpg" }, { "id": 1048, "title": "2017年度 卒業研究発表会", "content": "\n2018年3月に卒業した藤村ゼミの5回目の卒業生の卒業研究発表会は1月29日に行われました。
\n\n\n\n今年度の当ゼミの卒業生は10名で全員無事発表することができました。卒研のタイトル（発表順）を以下に紹介します。
\n\n\n\n【Webプログラミング】
\n\n\n\n【IoT】
\n\n\n\nこのうち、Aさんの作品の写真と概要を以下で紹介します。
\n\n\n\n![\"\"](\"https://web.fujimura.com/wp-content/uploads/2019/04/image5.png\")
【概要】本研究は、ブラウザ上で3DCGを動作することができるプログラミング言語JavaScriptのライブラリであるthree.jsを用いて、3D空間にLINEなどにおけるグループコミュニケーションを、参加の自由度を狭めずに表現することを目的とした。本研究の成果はLINEに変わる新たなコミュニケーションをデザインする他にも、LINE Messaging APIを使ってLINEのグループチャットの可視化に活用するなどの応用も考えられる。
\n\n\n\n作品の制作には、チャットルームなどの3D空間はthree.jsで作成し、アバターやチャットの吹き出しはLINEを意識するとともに3Dの動作コスト軽量化のため、2Dを3次元に起こすようにした。個々のアバター間の平面配置はJavaScriptのライブラリであるD3.jsのForce-directed layoutを用いて算出している。メッセージの送受信には、WebSocketを用いて実装し、ブラウザ上によるリアルタイムのチャットを可能にした。メッセージによる吹き出しが3D空間上にどのように配置するかは重要であるが、本作品ではLINEと同じ最新のメッセージが下で、古いメッセージが上に配置するようにした。さらに、チャット参加者の感情を表現するため、従来のスタンプに変わってアバターであるアイコンを感情に応じて変化されるインタフェースを導入した。この結果、LINEのスタンプがもたらす感情の表現を活かしつつ、3D空間にアバターが生きているような臨場感を表現し、より感情を伝える新たなコミュニケーションの確立ができた。また、フル3Dにするのではなく、2Dと組み合わせることで軽量化が達成できた。
本サイトの更新がしばらく途絶えてしまっておりました。これからはもっと頻繁に更新したいと思います。かなり前の情報となりますが、2017年3月に卒業した藤村ゼミの４回目の卒業生の卒業研究のタイトルを紹介します。
\n\n\n\n【IoT】
\n\n\n\n【Webプログラミング】
\n\n\n\nこのうち、Iさんの「単語からパレットを生成するペイントツールの開発」の概要を以下で紹介します。
\n\n\n\n![\"\"](\"https://web.fujimura.com/wp-content/uploads/2019/04/image12.png\")
【概要】これまでのペイントツールでは、パレットが既定の種類しか提供されておらず、適切な色を選択するのが難しいという問題があった。PCにおけるペイントツールでは、スポイトツールと呼ぶ画像から色を取得する機能があり、画像検索によって探した画像からスポイトツールで色を選ぶという操作も可能であるが、特にスマートフォンでは指先での操作のため、細かい指定が難しい。そこで、本研究では、自分の好きな言葉や単語を入力すると、その言葉から連想される色を自動的に抽出して、パレットを生成する機能を開発した。
\n\n\n\nこれを実現するため、Flickr APIを利用して単語から連想される色を得る。Flickr APIを利用すると、写真共有サービスであるFlickrに投稿された画像データを簡単に取得できる。パレットを作りたい任意の単語をユーザーが入力することで、Flickrからその単語で検索した画像を複数枚取得する。取得した画像をブラウザ上に表示し、JavaScriptライブラリを用いて、クリックした画像に使われている色(RGB)情報を調べてk-meansと呼ぶクラスタリング手法により、指定の色数に減色することで、パレットに使用する色を求めることができた。パレットそのものの描画やペイント機能の部分は、canvasを利用した描画処理を簡単にプログラミングできるJavaScriptライブラリであるp5.jsを用いてプログラミングしている。
\n", "excerpt": "", "date": "2018-04-24 14:21:21", "modified": "2019-04-10 18:27:44", "slug": "%e5%8d%92%e6%a5%ad%e7%a0%94%e7%a9%b6%e3%81%ae%e3%82%bf%e3%82%a4%e3%83%88%e3%83%ab%e3%83%bc2016%e3%83%bc", "status": "publish", "type": "post", "author": "fujimura", "categories": [ "event", "programming" ], "tags": [ "ゼミ", "卒研" ], "link": "https://web.fujimura.com/blog/archives/1045", "featuredImageId": 1081, "featuredImageUrl": "https://web.fujimura.com/wp-content/uploads/2018/04/IMG_2686.jpg" }, { "id": 1025, "title": "TOKYO DESIGN WEEK 2016に出展", "content": "当ゼミの３年生全員で、昨日から明治神宮外苑にて開催されております、TOKYO DESIGN WEEK 2016に作品「かがみらくる」を出展しています。開催期間は2016年10月26日〜11月7日 （※11月1日は休み）\n「かがみらくる」は鏡を使ったアート作品です。学校展示部門ではPairsというテーマが与えられております。私達はPairsから「対（つい）」を写し出す鏡を連想し、鏡を使用したメディアアートを制作しました。\n![\"img_20161026_161649\"](\"https://web.fujimura.com/wp-content/uploads/2016/10/IMG_20161026_161649.jpg\")
手の動きを認識するLeapmotionを使用し、簡単で直感的な操作ができ、自分の一挙一動により模様が変化する様子を楽しむことができます。![\"1477541966497\"](\"https://web.fujimura.com/wp-content/uploads/2016/10/1477541966497.jpg\")
\n映し出される映像は寄木細工風の模様で、私たちにとって思い入れがあります。ゼミ合宿で箱根に行き、そこで見た寄木細工の模様に私達は魅力を感じるとともに、Pairの要素を見出しました。寄木細工は1つ1つの形の組み合わせ、つまりペアが新たな模様を生み出していく様子を、私達は直線で構成される幾何学的な模様と、木工品を思わせる温かみのある色を組み合わせて表現しました。少し角度を変えて覗いてみると、右の写真のように合わせ鏡のごとく、模様が永遠に続いているようにも見ることができます。![\"1477542008333\"](\"https://web.fujimura.com/wp-content/uploads/2016/10/1477542008333.jpg\")
\n他にも、二つのディスプレイで交互に明暗を切り変わるようにし、光の強さで透過度が変わるマジックミラーを合わせることで、普通の鏡では表現出来ない空間を作ることができました。こうして様々なpairが組み合わさって出来上がったのが、私たちの作品「かがみらくる」です。![\"1477541986183\"](\"https://web.fujimura.com/wp-content/uploads/2016/10/1477541986183.jpg\")
\nさらに模様の配置も毎回ランダムとなっているので同じ組み合わせにはならず、その一瞬にしか表せない模様が出来ます。その映像が７枚の鏡に反射することによって、より幻想的な空間を再現することができました。\n執筆：３年ゼミ生",
"excerpt": "",
"date": "2016-10-27 14:57:05",
"modified": "2019-04-09 15:11:24",
"slug": "tokyo-design-week-2016%e3%81%ab%e5%87%ba%e5%b1%95",
"status": "publish",
"type": "post",
"author": "fujimura",
"categories": [
"JavaScript",
"media art",
"programming"
],
"tags": [
"TOKYO DESIGN WEEK",
"かがみらくる",
"フジムラボ"
],
"link": "https://web.fujimura.com/blog/archives/1025",
"featuredImageId": 1030,
"featuredImageUrl": "https://web.fujimura.com/wp-content/uploads/2016/10/IMG_20161026_161649.jpg"
},
{
"id": 1023,
"title": "2015年度 卒業研究発表会",
"content": "\n2016年3月に卒業した藤村ゼミの３回目の卒業生の卒研のタイトルを紹介します。
\n\n【Webプログラミング】\n\n
\n\n\n\n【メディアアート・テクノ手芸】
\n\n\n\n【データマイニングと可視化】
\n\n\n\nこのうち、Kさんの作品の動画を以下で紹介します。概要は説明するまでもなく、タイトルの通りです。
\n\n\n\n本作品ではマイクから取得する音声をスペクトル分析して特徴ベクトルを求め、予め記録した猫の鳴き声の特徴ベクトルとの類似度を算出し、類似度が高いとき餌がサーボモータで出るようにしています。ネットワークやPCは使わず、すべてArduinoのボードで単体で動作しています。
\n", "excerpt": "", "date": "2016-10-20 21:54:04", "modified": "2019-04-10 18:03:42", "slug": "%e5%8d%92%e6%a5%ad%e7%a0%94%e7%a9%b6%e3%81%ae%e3%82%bf%e3%82%a4%e3%83%88%e3%83%ab-2015", "status": "publish", "type": "post", "author": "fujimura", "categories": [ "event", "programming" ], "tags": [ "ゼミ", "卒研" ], "link": "https://web.fujimura.com/blog/archives/1023", "featuredImageId": 1096, "featuredImageUrl": "https://web.fujimura.com/wp-content/uploads/2016/10/猫餌.png" }, { "id": 944, "title": "大妻多摩祭「スペース★オータン」を出展", "content": "\n10月17,18日は大妻女子大学の学園祭（多摩祭）。今回、ゼミで初めて出展しました。HTML5ベースで多人数参加型の音楽ゲームを制作しました。自分のスマホをコントローラとして3D空間上のキャラクタ（オータン）を動かすことができ、隕石を避けながら音楽に合わせてスマホを振ってジャンプし、地球への帰還を競うゲーム。
\n\n\n\n![\"space-otan\"](\"https://web.fujimura.com/wp-content/uploads/2015/10/space-otan.png\")
3DCG処理はthree.js、音声処理はp5.js、コントローラはdeviceorientation 、通信はWebSocket等を利用しています。夏の合宿でゲームのアイデアをとりまとめ、３年生と４年生の共同作業で約１ヶ月で制作。背景画像やアイテム等もすべてオリジナル。
\n\n\n\n![\"\"](\"https://web.fujimura.com/wp-content/uploads/2015/10/4f9d84aead2ff13ae1d63c85c7246c6b.jpg\")
![\"\"](\"https://web.fujimura.com/wp-content/uploads/2015/10/002.jpg\")
![\"\"](\"https://web.fujimura.com/wp-content/uploads/2015/10/IMG_20151018_162616.jpg\")
多摩祭では、来訪者の投票で選出する、模擬店総選挙というものがあるのですが、本展示は３位になりました。
さらに、本作品はマッシュアップアワード2015にも応募しております。
\n", "excerpt": "", "date": "2015-10-17 23:44:55", "modified": "2019-04-10 18:08:14", "slug": "%e5%a4%a7%e5%a6%bb%e5%a4%9a%e6%91%a9%e7%a5%ad%e3%80%8c%e3%82%b9%e3%83%9a%e3%83%bc%e3%82%b9%e2%98%85%e3%82%aa%e3%83%bc%e3%82%bf%e3%83%b3%e3%80%8d%e3%82%92%e5%87%ba%e5%b1%95", "status": "publish", "type": "post", "author": "fujimura", "categories": [ "event", "programming", "web" ], "tags": [], "link": "https://web.fujimura.com/blog/archives/944", "featuredImageId": 945, "featuredImageUrl": "https://web.fujimura.com/wp-content/uploads/2015/10/tamafes01.png" }, { "id": 932, "title": "p5.jsとthree.jsによる音声に反応する3D再帰木", "content": "HTML5では、PCのマイクやカメラから音声や映像を取得するMedia Streamと呼ぶインタフェースが提供されています。この機能はIE11やSafariでは、まだ実装されておらず、ChromeとFirefoxのみのサポートですが、今回、この機能を活用して、先週投稿したthree.jsによる3D再帰木を、マイクから拾った音声に応じて動くようにしてみました。以下の画像をクリックすると、ブラウザがマイクを使用してよいか尋ねるダイアログボックスが表示されますので、それをONにしてみて下さい。3D木が表示され音声に応じて動きます。YouTubeなどで音楽を流すと踊ります。\n![\"soundresponsivetree1\"](\"https://web.fujimura.com/wp-content/uploads/2015/06/soundresponsivetree1.png\")
\n今回、p5.jsというライブラリを使ってMedia Stream APIを利用しました。p5.jsは、Processingに近いコーディングスタイルでアニメーションやメディア操作が容易に記述できるJavaScriptのライブラリで、昨年秋頃から大注目されています。p5.jsを使うと、Media Streaming APIが簡単に利用できるだけでなく、様々な他のJavaScriptライブラリとの連携も容易です。今回、3DモデルをWeb上で表示するthree.jsと組み合わせて実装しました。p5.jsのサウンドライブラリは、ボリュームだけでなくFFTによるスペクトル分析もできます。このサンプルでは、高音だと縦長の形状となり、ボリュームに応じて大きな木になるようにしてみました。詳細はソースコードをご覧ください。\n追記2016-05-10：Chrome が2016年1月のアップデート以降、httpsのサイト以外ではマイクの使用ができなくなりました。Firefoxも最近のアップデートで使用できなくなりました。qa.fujimura.comがhttps化されるまでの間はMicrosoft Edgeを使用ください。\n追記2017-01-23：qa.fujimura.comの上記サイトをhttps化して、動くようにしました。\n\n追記2019-04-09：リンク先をgithub Pagesに変更しました。",
"excerpt": "",
"date": "2015-06-06 23:22:00",
"modified": "2019-04-09 17:33:20",
"slug": "p5-js%e3%81%a8three-js%e3%81%ab%e3%82%88%e3%82%8b%e9%9f%b3%e5%a3%b0%e3%81%ab%e5%8f%8d%e5%bf%9c%e3%81%99%e3%82%8b3d%e5%86%8d%e5%b8%b0%e6%9c%a8",
"status": "publish",
"type": "post",
"author": "fujimura",
"categories": [
"JavaScript",
"media art",
"programming",
"web"
],
"tags": [
"HTML5",
"p5.js",
"recursive tree",
"Responsive tree",
"three.js"
],
"link": "https://web.fujimura.com/blog/archives/932",
"featuredImageId": 939,
"featuredImageUrl": "https://web.fujimura.com/wp-content/uploads/2015/06/soundresponsivetree1.png"
},
{
"id": 910,
"title": "【卒研紹介】2014年度",
"content": "今年の３月末、当ゼミから9名の第2期生が卒業しました。本日、メディアアート分野の以下の２つの卒業研究について専攻のサイトに紹介の記事を書きましたので、以下をクリックして読んでいただければ幸いです。
\n\n![\"responsivecostume\"](\"https://web.fujimura.com/wp-content/uploads/2015/03/responsivecostume.png\")
今年もメディア芸術祭に行ってきました。メディア芸術祭の応募条件は、2013年9月13日（金）から2014年9月2日（火）までの間に完成、または発表された作品ということで、既に別のイベントや商業作品として公開されている作品も応募できるため、2014年を代表する作品が鑑賞できるイベントです。ただし、今年はアート部門の大賞が該当なしとの事で、確かに全体的には少しインパクトに欠ける印象を受けました。
最も印象に残ったのは「のらもじ発見プロジェクト」という作品でした。ただし、これは既に東京TDC賞2014 RGB賞部門を受賞している作品ということで、メディアアートに関心のある方には既に広く知られている作品です。この作品の面白さは、看板の３文字から６文字程度の文字から、フォントの特徴を抽出し、50音のフォントを生成し、任意の言葉を看板にすることを可能にするというアイデアにあると思います。現在はフォント生成の部分は手動で行っているようですが、将来はこの部分を自動化するアルゴリズムも生まれるのではないでしょうか。この作品には無関係ですが、世の中には手書き文字からフォントを自動生成するソフトもあるようです。それから、twitterで#noramojiというハッシュタグを使って街にある味わい深い文字を集めようという活動も楽しいですね。ちなみに作者の一人の西村斉輝さんはインタビュー記事によれば、昔お笑い芸人を目指していたそうです。文化庁メディア芸術祭は2月15日（日）までです。
\n\n\n\n![\"\"](\"https://web.fujimura.com/wp-content/uploads/2015/02/11.jpg\")
今度の週末(10月18-19日）は、本学の学園祭である「多摩祭」が開催されます。多摩キャンパスには、10月18日(土)は南海キャンディーズさん、バイク川崎バイクさんのお笑いLIVEと、アンテナさんのアーティストライブ。そして、10月19日(日)は山﨑賢人さんのトークショー（要チケット）と、曽根由希江さんのアーティストライブ等も予定されているそうです。是非、ご来訪下さい。
\n\n\n\n![\"tamafes2014poster2\"](\"https://qa.fujimura.com/wp-content/uploads/2014/10/tamafes2014poster2.jpg\")
ちなみに、今年の多摩祭のポスターは当ゼミの清田純菜さんの作品が採用されました。今年のテーマは「Smile！！」です。このテーマには、大妻コタカの生誕130周年ということで、「コタカ先生のもとで学ぶ大妻生にこれから先もずっと笑顔が絶えませんように、また来場した人たちが笑顔で溢れますように…」という願いが込められており、このポスターではそのテーマを表現しています。
\n\n実は、本日、当サイトの背景画像をこの画像に変更しましたが、その画像も清田さんの作品です。どちらも素晴らしい作品ですね！ \n\n
\n\n\n\n![\"zemihai2\"](\"https://qa.fujimura.com/wp-content/uploads/2014/10/zemihai2.jpg\")
![\"CSS3Demo\"](\"https://qa.fujimura.com/wp-content/uploads/2014/09/CSS3Demo-300x169.png\")
また、CSS3等のWeb技術の場合、CSS3のリファレンスサイトを制作してそれを使ってプレゼンする学生もいます。右はA. M.さんによる発表の資料で、たいへんよい資料でしたので、公開することにしました。画像をクリックするとそのCSS3の説明するページが開きます。CSS3の新機能のリストが表示され、各機能をクリックすると説明が表示されます。上下の矢印で項目を移動、さらに「- DEMO PAGE -」をクリックするとこの画像のような実際にCSS3で実行するデモが表示されます。\n特にCSS3のようなWeb技術を解説する場合、PowerPointのようなプレゼンテーションツールで淡々と機能を説明しても、聞いている人には伝わらないので、学生がどのようにプレゼンするか不安でしたが、このように実際にリファレンスサイトを作って紹介してくれたのは驚きました。今後のプレゼンでも是非、工夫して楽しい発表をしてくれることを期待しています。",
"excerpt": "",
"date": "2014-09-05 11:08:43",
"modified": "2019-04-09 18:08:08",
"slug": "%e3%82%bc%e3%83%9f%e7%99%ba%e8%a1%a8%e3%81%ae%e7%b4%b9%e4%bb%8b%e3%80%8ccss3%e3%81%ae%e6%96%b0%e6%a9%9f%e8%83%bd%e3%80%8d",
"status": "draft",
"type": "post",
"author": "fujimura",
"categories": [
"JavaScript",
"programming",
"web"
],
"tags": [
"CSS3",
"ゼミ",
"プレゼン"
],
"link": "https://web.fujimura.com/?p=830"
},
{
"id": 800,
"title": "【卒業研究の紹介】 three.jsを使った情報可視化手法の提案",
"content": "以前のこちらの投稿に続いて、昨年度の本ゼミの卒業研究を紹介します。\n今回、ご紹介するのは「情報可視化」に関する研究です。この研究は、消費者の属性と広告媒体（雑誌、TV、Web）との関係を分析し、特定の商品を宣伝しようとする場合に、広告媒体やターゲットユーザを選ぶというマーケティング活動を支援することを目標としています。\n今回、研究に用いた分析データは、企業の広告や販売促進などの「マーケティング活動」と、消費者が購入に至るまでのステップである「消費行動のプロセス」とを、同一のモニタで調査したシングルソースデータ（（出所）株式会社野村総合研究所 インサイトシグナル（2013年3～4月期）データ）を使用しました。今回はこのデータセット含まれる、3,000人のモニタに対するWebアンケートやWebアクセスログ等によって取得した、テレビ視聴履歴、Web閲覧履歴、雑誌閲覧履歴と、職業と趣味などのデモグラフィック属性データ、そしてビールやジュース等の飲み物の購入頻度データを分析しました。\nこの研究では、このデータを、ノードとエッジに属性を持つ「属性付きグラフ」としてモデル化し、その属性付きグラフを3Dモデルとして可視化するという手法を提案しています。本システムの実装には、three.jsと呼ぶ3Dモデルを表示するためのJavaScriptライブラリを使い、ユーザの操作により可視化対象の属性を自由に選べるようにしました。選択された属性は瞬時に可視化に反映させることで、選択した属性による関連性の相違点を把握できるようにしています。我々はこのアプローチを「レスポンシブ可視化」と呼んでいます。\nそれでは実際の分析結果をご覧下さい。ただし、本エントリでご紹介するのは、その分析結果すべてではなく、分かりやすい結果が出た、(1)雑誌と趣味、(2)雑誌と飲料品、(3)雑誌と職業との関係のみです。WebサイトやTV番組の分析結果は省略します。\nそれぞれ、以下の画像をクリックすると別のタブで可視化結果が表示されます。ご覧いただく場合には、必ずHTML5対応のChrome,Firefox,IE11以降等のブラウザでご覧下さい（スマホはWebGLに対応していないのでご覧いただけません）。マウスの左ボタンのドラッグ、右ボタンのドラッグ、マウスホイールにより、自由自在に視点を移動させることができ、これにより、グラフの全体の中から特徴的なクラスタの発見を可能にしています。\n(1)雑誌とその読者の趣味（以下の画像をクリックすると可視化結果が別タブで表示されます）\n![\"購読雑誌と趣味\"](\"https://qa.fujimura.com/wp-content/uploads/2014/06/5df46bed7ed313a7bc7b8a38da0fcf57-300x202.png\")
\n(2)雑誌とその読者の飲料品（以下の画像をクリックすると可視化結果が別タブで表示されます）\n![\"購読雑誌とドリンク\"](\"https://qa.fujimura.com/wp-content/uploads/2014/06/c1f336995a18fb4a095bc75b9f7b353e-300x205.png\")
\n(3)雑誌とその読者の職業（以下の画像をクリックすると可視化結果が別タブで表示されます）\n![\"購読雑誌と趣味\"](\"https://qa.fujimura.com/wp-content/uploads/2014/06/649c0d854d4c57edc9f9b726d37efa0e-300x195.png\")
\n3D空間の床面には、雑誌間の購読ベクトルの類似度に基づくグラフが配置され、購読者が類似する雑誌が近くに配置されています（x座標とy座標の値には意味はありません）。ノードは雑誌を表し、エッジは雑誌と雑誌との読者の類似度を表します。ノードとエッジの色は、クラスタリング分析によって自動的に付与されたクラスタを表し、類似したクラスタに含まれる雑誌には同じ色が着色されています。ノードには3D棒グラフが表示されていますが、この棒グラフは、ユーザによって選択されたノード属性の割合を示すものであり、画面の下部に表示されている職業や飲み物のボタンをクリックすることで、インタラクティブに表示する棒グラフの種類が変えることができます。さらに、画面左下には、カイ二乗検定を適用するかどうかを指定するチェックボックスが備えられており、これにより、統計的に有意な属性をもつノードのみを棒グラフで表示することができます。例えば、「学生」という職業属性が選択されていた場合、学生が視聴する割合が他の職業よりも有意に高い場合のみ、棒グラフを表示します。\n今回は分析手法としては、単純なクロス集計とクラスタリングしか使っていませんが、クラスタリングとクロス集計の結果を同時に把握できるインタフェースにより、様々な発見ができることが、ご理解いただけたと思います。当ゼミでは今後も新しい情報可視化方法を提案していく予定です。\n尚、この成果は今年３月に沖縄で開催された電子情報通信学会のLOIS研究会で発表しておりますので、詳しい内容は、その研究会の発表原稿をご覧いただければ幸いです。研究会で発表したプレゼンテーション資料はこちらに公開しております。\nP.S. マーケティング分析コンテストを開催し、このような素晴しいデータを提供していた野村総合研究所に心より感謝致します。",
"excerpt": "",
"date": "2014-06-07 20:24:02",
"modified": "2019-04-09 18:03:00",
"slug": "%e5%8d%92%e6%a5%ad%e7%a0%94%e7%a9%b6%e3%81%ae%e7%b4%b9%e4%bb%8b%e3%80%80%e3%83%9e%e3%83%bc%e3%82%b1%e3%83%86%e3%82%a3%e3%83%b3%e3%82%b0%e5%90%91%e3%81%91%e3%81%ae%e6%83%85%e5%a0%b1%e5%8f%af%e8%a6%96",
"status": "draft",
"type": "post",
"author": "fujimura",
"categories": [
"data mining",
"JavaScript",
"programming",
"visualization"
],
"tags": [
"three.js",
"マーケティング",
"情報可視化"
],
"link": "https://web.fujimura.com/?p=800"
},
{
"id": 770,
"title": "グリッドスタイルのテーマに変更",
"content": "本サイトをグリッドスタイルのテーマに変更しました。グリッドスタイルでは、トップページには、記事全文ではなく記事の抜粋のみを掲載することになります。つまり、本文を適当な位置で切って、\"Read more ...\"のように表示する必要があります。しかし、日本語のようにutf-8の文字コードの場合には、the_excerpt()という抜粋を切り出す関数が働かないため、本家のWordPressではうまく表示できません。そこで、この問題を修正してくれるWordPressの日本語パッチを導入する必要がありました。さらに、それを導入するためには、WordPressを最新版の3.9にする必要がありました。ということで、いっそのこと、OSも最新版にした方が良さそうだったので、結局、仮想マシンの生成から全てやり直しました。しかし、それには、DBの設定、既存ユーザのファイルのコピー等、沢山の作業が必要でした。",
"excerpt": "",
"date": "2014-05-18 19:00:00",
"modified": "2014-05-18 19:00:00",
"slug": "%e3%82%b0%e3%83%aa%e3%83%83%e3%83%89%e3%82%b9%e3%82%bf%e3%82%a4%e3%83%ab%e3%81%ae%e3%83%86%e3%83%bc%e3%83%9e%e3%81%ab%e5%a4%89%e6%9b%b4",
"status": "publish",
"type": "post",
"author": "fujimura",
"categories": [
"wordpress"
],
"tags": [
"grid",
"theme"
],
"link": "https://web.fujimura.com/blog/archives/770",
"featuredImageId": 777,
"featuredImageUrl": "https://web.fujimura.com/wp-content/uploads/2014/05/fa469529c87d98f841daf78b730ed3d3.png"
},
{
"id": 650,
"title": "【卒業研究の紹介】 メディアアートの制作",
"content": "![\"\"](\"http://web.fujimura.com/blog/wp-content/uploads/2014/05/watanabe01-300x177.jpg\" "\\"generative_music\\"")
藤村ゼミも今年の３月末、16名の第１期生が卒業しました。本日、メディアアート分野の以下の２つの卒業研究についてこちらの専攻のサイトに紹介の記事を書きましたので、読んでいただければ幸いです。\n![\"\"](\"http://web.fujimura.com/blog/wp-content/uploads/2013/11/fujimura_travle02.jpg\")
藤村ゼミも今年の夏、はじめてのゼミ合宿を行いました。ゼミ合宿は、一泊ながら、光ファイバーとLEDによる「テクノ手芸」や、ラフティング、カヌー、BBQなど盛りだくさんでした。詳しくは、こちらの専攻のサイトの方に投稿しましたので、ご覧下さい。
\n", "excerpt": "", "date": "2013-11-27 01:32:38", "modified": "2019-04-10 18:12:27", "slug": "%e3%82%bc%e3%83%9f%e5%90%88%e5%ae%bf%e3%81%a7%e3%80%8c%e5%85%89%e3%83%95%e3%82%a1%e3%82%a4%e3%83%90%e3%83%bc%e6%89%8b%e8%8a%b8%e3%80%8d", "status": "publish", "type": "post", "author": "fujimura", "categories": [ "media art" ], "tags": [ "ゼミ合宿", "テクノ手芸", "マクラメ", "光ファイバー" ], "link": "https://web.fujimura.com/blog/archives/632", "featuredImageId": 1121, "featuredImageUrl": "https://web.fujimura.com/wp-content/uploads/2019/04/fujimura_travle02.jpg" }, { "id": 630, "title": "卒業研究の表題が決まりました", "content": "\n先日、本年度の４年生が取り組んでいる卒研のタイトルが決まりました。藤村ゼミが本学に来て、初めての卒業生となりますので、すべてが０からのスタートでした。うまくいかないことも少なくなかったのですが、みんなよく頑張りました。４年生のみなさま、努力しただけ、力がつくと思いますので、最後まで、頑張りましょう。
\n\n\n\n【データマイニングと可視化】
\n\n\n\n【マーケティング】
\n\n\n\n【メディアアート・テクノ手芸】
\n\n\n\n【Webプログラミング】
\n\n\n\n【教育・ゲーム】
\n\n\n\n完成したら、今後、少しずつ本サイトでも紹介したいと考えております。ゼミのみなさまコンテンツの提供、よろしくお願いします。
\n", "excerpt": "", "date": "2013-11-26 01:01:04", "modified": "2019-04-10 18:33:33", "slug": "%e5%8d%92%e6%a5%ad%e7%a0%94%e7%a9%b6%e3%81%ae%e8%a1%a8%e9%a1%8c%e3%81%8c%e6%b1%ba%e3%81%be%e3%82%8a%e3%81%be%e3%81%97%e3%81%9f", "status": "publish", "type": "post", "author": "fujimura", "categories": [ "卒業研究" ], "tags": [ "ゼミ", "卒研" ], "link": "https://web.fujimura.com/blog/archives/630", "featuredImageId": 803, "featuredImageUrl": "https://web.fujimura.com/wp-content/uploads/2014/06/649c0d854d4c57edc9f9b726d37efa0e.png" }, { "id": 619, "title": "学生のタレント好き嫌いを表現したインフォグラフィック", "content": "\n![\"\"](\"https://web.fujimura.com/wp-content/uploads/2013/11/talent_threejs.png\")
学部の2年～3年向けの「応用統計論及び演習」という授業では、アンケート等のデータを分析する様々なデータマイニングの方法論について学んでいます。本年度は、その講義の受講者のタレントに対する好感度を分析しましたので、その結果の一部を紹介します。
\n\n\n\n実施したアンケートは2段階からなり、まず最初のアンケートでは、分析対象のタレント（スポーツ選手等の有名人を含む）の候補を1人5名程度挙げてもらいました。その結果、分析したいという希望が多かった83人のタレントを選びました。そして、2回目のアンケートでは、その83名のタレントに対して、受講者36人が、好きか嫌いかを5段階で評価してもらいました。
\n\n\n\nその結果を可視化したのが、右の３次元グラフです。右の画像をクリックすると、Webブラウザで３次元で可視化されたグラフが表示されます。Webブラウザは必ずPC版のChromeかFirefoxをお使い下さい。HTML5のWebGLと呼ぶ機能を使っているため、スマホは未対応です。また、IEは最新のHTML5に対応していないのでご覧いただけません。
\n\n\n\n操作方法は、マウスのドラッグで回転。スクロールホイールでズームイン・アウト。右ボタンのドラッグで並行移動です。
それで、これは何を表現しているかと申しますと、ノードはタレント、エッジはそのタレントへの評価の類似度、棒グラフの高さはそのタレントへの平均評価を表します。さらにノードと棒グラフの色はクラスタリング（似た特徴をもつノード同士を分類すること）の結果を表しますので、近い評価を受けたタレント同士が同じ色に自動的に着色されています。
こうして眺めてみると、僅か36人のアンケート結果であっても、類似したタレント同士がきれいに分類、抽出されていることがよく分かります。このようなデータの可視化に関心のある方は、昨年度のエントリ「超スモールデータ」もご覧下さい。昨年のバージョンとは異なり、今年は、three.jsと呼ぶJavaScriptのライブラリを使って3次元空間上に表現できるようにしました。
\n\n\n\nデータの特徴を人間が理解しやすく表現したものを「インフォグラフィック」と呼びますが、藤村ゼミでは、このようなインタラクティブに操作可能なインフォグラフィック作品の制作を一つのテーマにしています。ちなみに、この表現方法も今年の学生が卒研として取り組んできた成果の一つです。
\n", "excerpt": "", "date": "2013-11-24 13:07:54", "modified": "2019-04-10 18:35:33", "slug": "%e5%ad%a6%e7%94%9f%e3%81%ae%e3%82%bf%e3%83%ac%e3%83%b3%e3%83%88%e5%a5%bd%e3%81%8d%e5%ab%8c%e3%81%84%e3%82%92%e8%a1%a8%e7%8f%be%e3%81%97%e3%81%9f%e3%82%a4%e3%83%b3%e3%83%95%e3%82%a9%e3%82%b0%e3%83%a9", "status": "publish", "type": "post", "author": "fujimura", "categories": [ "data mining", "JavaScript", "media art", "programming", "visualization" ], "tags": [ "2.X次元", "JavaScript", "three.js", "インフォグラフィック", "ゼミ" ], "link": "https://web.fujimura.com/blog/archives/619", "featuredImageId": 621, "featuredImageUrl": "https://web.fujimura.com/wp-content/uploads/2013/11/talent_threejs1.png" }, { "id": 609, "title": "WebSocketを使った参加型プレゼンテーション", "content": "\n昨日、東京ビックサイトで開催された高校生向けのイベント「夢ナビライブ」で講演したスライド（抜粋）をサーバにアップロード致しました。今回のプレゼンテーションでは、WebSocket等のHTML5の機能を活用して、参加者が自分のスマホを使って、私のプレゼンテーションに書き込みをしたり、投票結果をリアルタイムにグラフ化する試みを行いました。参加した高校生のみなさんも楽しんでいただけたようです。
\n\n\n\n![\"\"](\"https://web.fujimura.com/wp-content/uploads/2013/07/yumi.png\")
本資料をご覧になるには、chromeやfirefox等のHTML5対応ブラウザをPCと、それとは別にスマートフォンをご用意下さい。プレゼンテーションにスマホから書き込みができます。実際に試してみるには、上記の画像をクリックして下さい。
\n\n\n\n![\"\"](\"https://web.fujimura.com/wp-content/uploads/2013/07/enchant.png\")
ゲームモードでは、enchant.js+WebSocketによりプレゼンテーションの聴衆がコメントを書き込むことで参加できるシンプルなゲームも作成しました。
\n", "excerpt": "", "date": "2013-07-15 00:13:03", "modified": "2019-04-10 18:44:59", "slug": "websocket%e3%82%92%e4%bd%bf%e3%81%a3%e3%81%9f%e5%8f%82%e5%8a%a0%e5%9e%8b%e3%83%97%e3%83%ac%e3%82%bc%e3%83%b3%e3%83%86%e3%83%bc%e3%82%b7%e3%83%a7%e3%83%b3", "status": "publish", "type": "post", "author": "fujimura", "categories": [ "JavaScript", "visualization", "web" ], "tags": [ "HTML5", "WebSocket", "夢ナビ" ], "link": "https://web.fujimura.com/blog/archives/609", "featuredImageId": 611, "featuredImageUrl": "https://web.fujimura.com/wp-content/uploads/2013/07/enchant.png" }, { "id": 580, "title": "夢ナビライブで講演します", "content": "\n![\"\"](\"https://web.fujimura.com/wp-content/uploads/2013/06/yumenavi.gif\")
![\"\"](\"http://web.fujimura.com/blog/wp-content/uploads/2013/06/yumenavi01s.png\")
高校生向けの「大学進学のための学問発見イベント」夢ナビライブで7月13日（土曜）に私（藤村）が東京ビッグサイトで講演します。このイベントは、高校生が進学先の大学を選ぶ参考にしてもらうため、全国の大学の先生が模擬授業を行うというもので、この日の東京会場の講義ライブは全部で305講義もあるそうです！私の講義は７限目（16:30～17:00）の予定です。
\n\n\n\n講義内容は、WebSocket等の最新Web技術の紹介です。この講義では、ライブ会場の参加者が持っているスマホを活用して、私のプレゼンにリアルタイムで参加してもらうというチャレンジングな（？）試みを実施する予定です。会場の電波状況次第では上手くいかないかもしれません。どうなることでしょう？終わったら、ここでまた紹介しますね。
【2013.7.15追記】夢ナビライブは無事終了しました。当日はdocomo LTEでデザリングで接続しましたが、東京ビッグサイトの東ホールでは30Mbps位の速度が出ました。講義で使用したスライドを抜粋、アップデイトしたものをWebサイトにアップしました。実際の参加型プレゼンテーションを体験することができます。詳細に関してはこちらのエントリをご覧下さい。
\n", "excerpt": "", "date": "2013-06-29 14:40:05", "modified": "2019-04-10 18:42:59", "slug": "%e5%a4%a2%e3%83%8a%e3%83%93%e3%83%a9%e3%82%a4%e3%83%96%e3%81%a7%e8%ac%9b%e6%bc%94%e3%81%97%e3%81%be%e3%81%99", "status": "publish", "type": "post", "author": "fujimura", "categories": [ "event", "web" ], "tags": [ "WebSocket", "プレゼンテーション", "夢ナビ" ], "link": "https://web.fujimura.com/blog/archives/580", "featuredImageId": 583, "featuredImageUrl": "https://web.fujimura.com/wp-content/uploads/2013/06/yumenavi01s.png" }, { "id": 356, "title": "卒展に行こう（２）", "content": "\n先週、卒展を行こうという記事を書きましたが、今週も多摩美術大学情報デザイン学科メディア芸術コースの卒展「MEDIA FREE」に行って来ましたので、続きです。私はインタラクティブなインスタレーションに関心があるのですが、その観点で３つの作品に興味を持ったのでご紹介。
\n\n\n\n![\"\"](\"http://web.fujimura.com/blog/wp-content/uploads/2013/03/media_free01.jpg\")
まずはこの「song of raindrops」という作品。この作品は傘の裏側に付いているセンサで雨の振動をアナログ信号としてarduinoで受信し、data mappingにより音楽情報に置き換え、ブルートゥースでiphoneに送り、「雨のライブ演奏」を鑑賞できるようにするというもの。生成された音楽はネット上にありますので聞くこともできます。作者のキム・チョンウンさんに直接話を聞くことができました。
\n\n\n\n![\"\"](\"http://web.fujimura.com/blog/wp-content/uploads/2013/03/media_free041.jpg\")
これは「GroWorD」という作品。この作品は手書きの文字と活字のペアを入力としてアルゴリズムにより生命体のような文字を生成する。この作品の面白いところは顕微鏡というギミックを使ってインタラクティブなインスタレーションとしたところ。顕微鏡は、実際に小さいものを拡大しているのではなく、レンズの焦点を合わせるダイヤルを回転させるとピントがボケたり、レンズを交換すると異なる画像表現に変化させるためのタンジブルなインタフェースとして利用しています。実装にはやはりarduinoを使って顕微鏡のダイヤルの回転をアナログ信号として取り込んで、openFrameworksで処理しているとのこと。こちらも作者の高橋昂司さんに直接伺うことができました。
\n\n\n\n![\"\"](\"http://web.fujimura.com/blog/wp-content/uploads/2013/03/media_free031.jpg\")
これは「From the Voice」という作品。10を超える言語の音声を多数のPCで再生し、聞いたことのない多国籍な雑踏を作り出すというものです。ちょうどタイミングが良く、作者の丸山透さんのライブを見ることができました。手の動きに反応して雑踏をリアルタイムに変化させており、こちらも実装にはセンサとopenFrameworksを使っているそうです。
他にも楽しい作品が沢山ありました。「MEDIA FREE」は明日3/17までです。
![\"\"](\"http://web.fujimura.com/blog/wp-content/uploads/2013/03/arduino_processing.jpg\")
![\"\"](\"https://web.fujimura.com/wp-content/uploads/2013/03/arduino_processing.png\")
キーボード、ディスプレイ、マウス等のPCの入出力デバイスだけでは、インタラクティブなインスタレーションの制作は難しいので、光センサーやLED等の様々な入出力デバイスと連携させることができるArduinoを購入してみました。
とりあえず納品検査を兼ねて、光センサーの強さがある一定以上になると赤いLED、一定以下になると緑のLEDを点灯するとともに、PC画面上に光の強さが棒グラフで表示されるプログラムをProcessingで書きました。30年ぶりに電子回路に触れて楽しい一日でした。参考文献ARプログラミング-Processingでつくる拡張現実感のレシピのお陰で簡単でしたが、Processingの最新版2.0b8だとArduinoとの連携ライブラリがエラーが発生したので、Processing 1.5で動かしました。
![\"\"](\"https://web.fujimura.com/wp-content/uploads/2013/03/barbies-blinky-dress2.jpg\")
さて、これから何をするかは、ゼミ生のアイデア次第ですが、例えば、光センサから取得されるアナログデータの値を使ってジェネラティブ・アートの形状をインタラクティブに変化させるというのは鉄板ネタ。それから、オリジナルの光る人形や洋服、カバン等のテクノ手芸に活用するとか。写真は「ディジタルドレス」を着たバービー人形($49.99)だそう。
今年の多摩祭で何か作品を出展しませんか？＞ゼミメンバ各位殿
先週3月7日～２日間、電子情報通信学会LOIS研究会に参加してきました。電子情報通信学会は、基礎・境界、通信、エレクトロニクス、情報・システム、ヒューマンコミュニケーション等の幅広い分野をカバーする会員数34000人の大きな学会で、その中でLOIS研究会は、オフィスシステムの基本となるインフラなどの要素技術からアプリケーションなどの応用技術やシステム化技術まで幅広く扱っている研究会です。LOISはLife intelligence and Office information systemの略で、近年、ネット上に蓄積されている個人の生活の履歴（ライフログ）等や企業で蓄積されている大量のデータの活用法等に関して活発な議論、情報交換を行なっています。本ゼミが対象とするWebプログラミング、データマイニング、情報可視化はいずれも本研究会のカバー範囲になっております。
\n\n\n\n![\"\"](\"http://web.fujimura.com/blog/wp-content/uploads/2013/03/lois2013_01.jpg\")
LOIS研究会は年6回開催されていますが、３月に開催される研究会は、時期的に卒業論文や修士論文の研究の発表に適していることから、特に発表件数が多くなっております。また、2008年度から沖縄県で開催されるようになってから様々な組織の研究者が集まるようになり、発表内容も優れたものが多く発表されるようになりました。ちなみにLOIS研究会で３月での投稿論文数の推移は、次のようになっております。
\n\n\n\n![\"\"](\"https://web.fujimura.com/wp-content/uploads/2013/03/LOIS_2005_2012.png\")
今回の発表は宮古島開催で、企業からは7件、大学からは25件の発表があり、全体で38件の発表が行われました。最近は女性研究者の発表が増え、今年は津田塾大学から6件の発表があるなど合計10件の発表がありました。概要はこちらのプログラムをご覧下さい。
\n\n\n\n![\"\"](\"https://web.fujimura.com/wp-content/uploads/2013/03/miyako_sunayama_beach_s.jpg\")
来年度2014年3月の開催は石垣島を予定しているそうです。是非、卒業研究で優れた成果を上げて石垣島で発表してはいかがでしょうか。写真は今回の会場から近い砂山ビーチ＠宮古島です。
\n", "excerpt": "", "date": "2013-03-11 19:07:46", "modified": "2019-04-10 19:12:26", "slug": "lois%e7%a0%94%e7%a9%b6%e4%bc%9a", "status": "publish", "type": "post", "author": "fujimura", "categories": [ "data mining" ], "tags": [ "LOIS", "研究会", "電子情報通信学会" ], "link": "https://web.fujimura.com/blog/archives/311", "featuredImageId": 320, "featuredImageUrl": "https://web.fujimura.com/wp-content/uploads/2013/03/miyako_sunayama_beach_s.jpg" }, { "id": 289, "title": "卒展に行こう！", "content": "\nゼミの卒業研究で自分が何をしたいのか、具体的なイメージが沸かないという人も少なくないと思います。そこで、春休みは卒展のシーズンですので、卒展に出かけて多くの作品に触れるように努力しましょう。残念ながら今年度の卒展の多くは既に終わってしまいましたが、Web上にはいくつかの卒展の紹介がありますのでチェックしてみて下さい。
\n\n\n\n![\"\"](\"http://web.fujimura.com/blog/wp-content/uploads/2013/03/chiba_design02.png\")
私は、情報デザイン分野に関連する２つの卒展に行きました。一つは千葉大学工学部デザイン学科の「意匠展」と、もう一つは多摩美術大学情報デザイン学科の「つながりのかさなり」です。
\n\n\n\n![\"\"](\"http://web.fujimura.com/blog/wp-content/uploads/2013/03/chiba_design01.png\")
千葉大学工学部デザイン学科の「意匠展」は3月1日から三日間、秋葉原の3331 Arts Chiyodaで開催されていました。会場風景です。さすがデザイン学科で展示会場は美しいですね。
\n\n\n\n情報可視化の作品もありました。これはTwitterで配信しているトレンド語をうずまき上の３次元空間に配置して、ジョイスティックでいろいろな角度から眺められるようにした作品で、現地ではプロジェクターで壁に投影してデモを行なっていました。うずまき上にトレンド語が配置され上位の周辺部に新語が発生し、次第に中心部に沈んでいきますが、再び話題になると上に浮上するそうです。学部生とは思えない素晴らしい作品でした。
\n\n\n\n![\"\"](\"http://web.fujimura.com/blog/wp-content/uploads/2013/03/chiba_design03.jpg\")
多摩美術大学情報デザイン学科の「つながりのかさなり」は3月8日から三日間、浅草橋HULIC HALLで開催されていました。会場風景です。これまた美しい展示会場です。作品の概要はネット上でも見ることができます。
\n\n\n\n会場で一際目立っていたのは、form giving pianoという作品です。この作品はピアノの88鍵盤分の座標をこれまたうずまき状（螺旋状）に配置し、鍵盤をたたくとその位置に図形が発生し、消えていくインタラクティブな作品です。当日はライブパフォーマンスが実施され、多くの聴衆を魅了していました。この作品はネット上にもありましたので、まずはご覧下さい：
\n\n\n\n![\"\"](\"http://web.fujimura.com/blog/wp-content/uploads/2013/03/tamabi0310_01.jpg\")
多摩美術大学の美術学部全体の卒展は3月20日から四日間、八王子キャンパスで開催されます。今回、ご紹介した情報デザイン学科の作品も展示されているそうですのでまだ間に合います。行ける人は行ってみましょう。きっとやりたいことがインスパイアされる作品に出会えると思います。
追加：MEDIA FREE 多摩美術大学情報デザイン学科メディア芸術コース卒業制作展が3月15日から三日間、横浜赤レンガ倉庫1号館で、開催されるそうです。
![\"\"](\"http://web.fujimura.com/blog/wp-content/uploads/2013/03/food_preference_network.png\")
早速ですが、先ず114の食品のネットワーク可視化結果をご覧下さい。この結果は、114の食品に対して5段階で好きか嫌いかを被験者に尋ねるWebアンケートにより収集したデータで作ったものです。
この可視化は、まず評価者を行、食品を列とする行列を作り、その列ベクトル同士がどれだけ近いかをコサイン類似度で計算して、お互いに類似度が高い食品同士をエッジで接続します。そしてGephiと呼ぶネットワーク可視化ツールでエッジで接続されているノード同士がお互いに近くなるように２次元平面上に配置したものです。これはマイニングの教科書にある古典的な方法で特に何の工夫もありません。それでも、似たような食品がお互いに近くにまとまっていることがわかります。お刺身類は右、野菜は下、洋食は左、麺類と天ぷらが上、という具合です。
同様に、下の階層的クラスタリングの結果をご覧下さい。こちらはコサイン類似度ではなくユークリッド距離を使って階層的クラスタリングを適用したものです。これも似たような食品がうまくクラスタに分かれていることがわかります。特に面白いのは、いくらとタピオカは全く違う食品ですが、同じクラスタに属しています。これはおそらくプチプチという独特の食感が人の嗜好に強く影響したためではないかと想像できます。このいくらとタピオカの例は、データマイニングの教科書に出てくる「ビールとおむつが一緒に買われる」例と同じぐらい興味深い発見ではないでしょうか。
\n\n\n\n![\"\"](\"http://web.fujimura.com/blog/wp-content/uploads/2013/02/food_hclust.png\")
さてこのような、良い結果が得られるには、どれくらいのデータを集めたか気になると思います。実は私の「応用統計論及び演習」という講義の受講生、僅か52名に対してWebアンケートを実施して得られたデータなのです。私は前職の研究所では数千万から数億件のブログ記事やTweetをつかったマイニングの研究に携わっていましたので、このデータと比較するとデータサイズという面では実に6桁位違うデータです。
\n\n\n\nこのようなスモールデータでありながら、マイニングがうまくいったことには秘密があります。それは本データは僅か52名のアンケート調査であってもデモグラフィック属性の均一性がという点で際立ったものであることです。52名の年齢がほぼ同一、全員女子学生、居住地は関東、さらに同じ大学でこの選択の授業を履修したという点まで含めると奇跡的な均一性です。さらに食品の嗜好を調査する場合には、時間帯も影響するかもしれませんが、アンケートを実施した時間帯も全員同じ昼食後の３限目です。
\n\n\n\nこの結果には、正直、私も驚きました。デモグラフィック属性の均一性、元データの良さがいかに分析結果に影響するかのよい例だと思います。もし、高齢者や男子が被験者に含まれた場合には、純粋な食品の嗜好以外の要因がノイズとなり、これほどの精度は出ないでしょう。
\n\n\n\n一昨年前位からビッグデータと呼ぶ言葉がよく聞かれるようになりました。確かに、近年のクラウド・コンピューティングや分散処理技術の進歩はめざましく、今まで処理できない大量のデータが容易に処理できるようになったことは素晴らしいことです。一方で、統計数理研究所の丸山宏先生の名言で「ビッグデータ周辺の問題の多くはサンプリングとExcelで解ける」というのがあるそうですが、今回の結果は、まさにその一例になっているのではないでしょうか。普通、「サンプリング」というのは、ランダムサンプリングを意味しており、今回のように特定のデモグラフィック属性のユーザのみというのは逆の方向性のですが、一応、「サンプリング」の一種とは言えると思います。いずれにせよ、本当にビックデータの分析が必要なケースはどれほどあるのだろうかと改めて考えさせられる経験でした。
\n\n\n\nところで、この分析結果は意外と役に立ちそうです。特に若い男性にとっては。。。一つでも好きな食品が分かると他に何が好きかある程度予想できますので、彼女を食事に誘うケースなどに使えませんか？
\n", "excerpt": "", "date": "2013-02-24 19:32:17", "modified": "2019-04-10 18:53:43", "slug": "smalldata", "status": "publish", "type": "post", "author": "fujimura", "categories": [ "data mining", "visualization" ], "tags": [ "bigdata", "data mining", "foods", "gephi", "network", "smalldata", "visualization", "応用統計論", "講義" ], "link": "https://web.fujimura.com/blog/archives/272", "featuredImageId": 285, "featuredImageUrl": "https://web.fujimura.com/wp-content/uploads/2013/03/food_preference_network.png" }, { "id": 260, "title": "WebSocketがもたらす「プロトコル爆発」", "content": "\n インターネット上でデータが送れるのは、送り側と受け取り側でデータをどのようなフォーマットと手順で送信するかということが細かく決まっているからです。この取り決めをプロトコルと呼びます。インターネットのプロトコルは、IETFと呼ぶボランティア組織で決めています。IETFから出版される正式な文書はRFCと呼ばれ、これまでに6000を超えるのRFCが出版されています。ただし、この中には現在では古くなったRFCや、プロトコルそのものではなく、プロトコルを決めるルールや参考情報等があり、幅広く活用されているRFCはそれほど多くはありません。おそらく数百位だと思います。実は私も３本のRFCを出版していますが、残念ながらほとんど使われていません。
数多くのプロトコルのその中でも普段よく耳にするものの例として、ウェブで使われているHTTP、メールを受信するPOP3やIMAP4、ファイルを転送するFTPなどがあります。これらのプロトコルにはポート番号と呼ぶプロトコルを識別するIDが付与されており、ドメインネームやIPアドレスによって特定されたマシンに到達したデータパケットは、ウェブサーバやメールサーバ等のプロセスにデータが送られます。
![\"\"](\"http://web.fujimura.com/blog/wp-content/uploads/2013/02/WebSocket01.png\")
近年のWebの発展により、あらゆるアプリケーションがHTTPで動くようになってきました。最近では、ファイル転送にはFTPよりもHTTPを使うケースが増えましたし、メールについてもWebメールの普及でPOP3も使う機会は減っています。私も１年前からメールソフト（ThunderbirdやOutlook等）は一切使っていません。このように、なんでもHTTPで送受信するようになると逆にHTTPの問題点が目立つようになってきました。それは、HTTPは静的なウェブページをサーバからブラウザに送ることを目的に設計されたという歴史的背景から、ブラウザとサーバの間のコネクションが一回毎に途切れてしまうことです。昨今のWebアプリでは、Ajax通信が多用されますので、毎回のコネクションの接続があると大きなオーバーヘッドとなります。また、接続する度にコンテンツのタイプ、ブラウザの種類、リファラ等の多くの情報送られています。つまり、小さいデータを頻繁にやりとりする場合には無駄が大きすぎるのです。
\n\n\n\nそこで、このような細かい粒度のデータを頻繁にやりとりするための効率的なプロトコルを導入が検討されてきました。しかし、一般にプロトコルはOSレベルのソフトウェアであり、インストールが必要でした。また、OSにはじめからインストールされていれば普及は早いですが、それにはその社会的必要性が広く認知されなければなりません。さらに、多くの組織ではセキュリティ確保の為、内部から外に対してHTTP、HTTPS、SSHのポート番号80番、443番、22番位しかアクセスできないように設定されていますので、新しいプロトコルを導入することはきわめて敷居が高かったのです。ところがこれらの問題を一気に解決する技術が生まれました。それがWebSocketです。
\n\n\n\nWebSocketは、効率的な情報をやりとりする低位のデータ通信を、WebブラウザのJavaScriptから利用可能にするものです。これにより、これまでOSレベルにあったプロトコルを司るプログラムが何とブラウザ上のJavaScriptで書けるようになるのです。そして、もちろんJavaScriptのプログラムはHTTPで簡単にブラウザに配布し実行できます。つまり、新しいプロトコルを導入する敷居が全くなくなったわけです。
\n\n\n\n![\"\"](\"http://web.fujimura.com/blog/wp-content/uploads/2013/02/WebSocket02.png\")
実は、WebSocket自身も新しいプロトコルなのですが、インストールはWebブラウザのインストールによってなされています。そして、この新しいプロトコルのポート番号はなんとHTTPと同じ80番。なぜ、HTTPと別のプロトコルなのに同じポート番号を使うことが許されるのかと言いますと、HTTPの仕様が記載されているRFC2616には、将来のバージョンアップに備えて、HTTP 1.1 Upgradeという機能が記載されており、その機能を使って、最初にクライアントからサーバに対して「WebSocketプロトコルを使用するよ」というメッセージをHTTP GETで送ることで、80番ポートで繋がったコネクションをそのままWebSocketプロトコルにアップグレードするようになっています。そのため、80番以外のポートを新たに開ける必要がないのです。
\n\n\n\n現在、jQueryを代表例として様々なJavaScriptのライブラリがあり、近年爆発的な広がりをみせています。今後、WebSocketを活用したアプリケーションレベルのプロトコルが次々と生まれ、JavaScriptのライブラリとして普及していくでしょう。さらにはプロトコルを開発するフレームワークも生み出され、プロトコルの多様化が加速していくのではないでしょうか。これはプロトコルの標準化にとっても大きな意味を持ちます。つまり、もはやWebSocketより上位のプロトコルについては、あらかじめマシンにインストールすることなく簡単に使えるため、わざわざ標準化する必要がなくなるのです。
\n\n\n\nこのように現在は、WebSocketの上に様々な独自のプロトコルが次々と生まれる、いわば「プロトコル爆発」の時代の幕開けにあるかもしれません。
以上、WebSocketの意味を私なりにまとめてみました。ところでWebSocketでどのようなことが可能になるのでしょうか。これについては、既にネット上に多くの例がありますので調べてみて下さい。このサイトでも、別途、WebSocketを使った面白い応用例を紹介したいと考えています。
![\"\"](\"http://web.fujimura.com/blog/wp-content/uploads/2013/02/media_festival.jpg\")
本日、国立新美術館（東京・六本木）で開催されているメディア芸術祭に行ってきました。平日（水曜日）にも関わらず、結構な人出でした。作品は映像作品が多かったのですが、いくつかはyoutubeでも見られます。Naverまとめサイトで、いくつかの作品がまとめられてます。
ただし、展示物と同じではなく、抜粋や以前のバージョンが含まれますので、会場に近い人は現物を見るのをおすすめします。アート部門の大賞を受賞した「Pendulum Choir」は現物の展示はなく、パフォーマンス映像でしたので、これは以下のyoutubeで十分かもしれません。
\n\n\n\nこの作品は、9人のアカペラと18の油圧ジャッキで作られた、いわば「人間楽器」であり、人間をいろいろな方向に向きを変えることで音響効果を変化させるというもの。人間という楽器を扱うので、もはやアカペラではなくなっているというべきでしょうか。
\n\n\n\n![\"\"](\"http://web.fujimura.com/blog/wp-content/uploads/2013/02/species.jpg\")
入り口のすぐそばにいきなり、これ。なぜ、こんなところにゴミが捨てられているのかと驚きますが、実は『Species series』という作品。。。
\n\n\n\n個人的には他に『水道橋重工「KURATAS」』、『はじめよう』、『Oh Willy...』という作品が好きでした。それから『あさっての森』もたいへん楽しい内容でした。全体に、微笑ましい作品が多かったと思います。今週末（2/24)まで開催されています。
\n", "excerpt": "", "date": "2013-02-20 21:44:55", "modified": "2019-04-10 18:57:33", "slug": "%e6%96%87%e5%8c%96%e5%ba%81%e3%83%a1%e3%83%87%e3%82%a3%e3%82%a2%e8%8a%b8%e8%a1%93%e7%a5%ad", "status": "publish", "type": "post", "author": "fujimura", "categories": [ "event", "media art" ], "tags": [ "国立新美術館" ], "link": "https://web.fujimura.com/blog/archives/152", "featuredImageId": 243, "featuredImageUrl": "https://web.fujimura.com/wp-content/uploads/2013/02/media_festival.jpg" }, { "id": 225, "title": "戦国時代のジェネラティブ・アート", "content": "\n先日のNHKの日曜美術館で、古美術鑑定家中島誠之助さんの案内で、「初花」と呼ばれる重要文化財の茶入れが紹介されていました。この茶入れは800年程前に中国から伝来し、室町幕府第8代将軍の足利義政が所持した後、戦国時代に信長、秀吉、家康に引き継がれた名品とのことです。この初花には窯で焼いたときにうわぐすりが溶け出して形成された「なだれ」と呼ぶ模様があります。初花はこのなだれが奇跡的に３つもあり、その一つが底に到達手前でギリギリとまっているところが最大の特徴です。中島さんは、窯の中という「人為の及ばぬ」ところで形成される模様、そこに天下人達が心をひかれたのでは、とのお話でした（2月24日20:00再放送予定）。
\n\n\n\n先日の記事で、乱数やノイズによって「思いがけない美」を制作するジェネラティブ・アートについて書きましたが、この初花は、このようなアートの原型といえないでしょうか。もっともジェネラティブ・アートには「人為の及ばぬ」というところを、乱数やノイズによって「人為的に」発生させているところが少し異なるかもしれませんが。Wikipediaによるとジェネラティブ・アートの初期の作品としてモーツァルトの \"Musikalisches Würfelspiel\"（音楽のさいころ遊び）1757年が知られており、こちらは、さいころで人為的に乱数を生成して作曲しているとのことです。
\n\n\n\nどこまでがジェネラティブ・アートと呼べるのか難しいところですが、ノイズを窯の炎といった自然界まで拡張解釈すると、そもそもイケメンや美女も遺伝子の組み合わせという乱数によって生まれているものですので、人もジェネラティブ・アートとなってしまうかもしれませんね。いずれにしてもジェネラティブ・アートには天下人でなくても心が惹かれます。
\n", "excerpt": "", "date": "2013-02-20 00:35:16", "modified": "2019-04-10 18:59:30", "slug": "hatsuhana", "status": "publish", "type": "post", "author": "fujimura", "categories": [ "media art" ], "tags": [ "generative art", "茶器" ], "link": "https://web.fujimura.com/blog/archives/225", "featuredImageId": 230, "featuredImageUrl": "https://web.fujimura.com/wp-content/uploads/2013/02/01.jpg" }, { "id": 203, "title": "ジェネラティブ・アート", "content": "\n![\"\"](\"https://web.fujimura.com/wp-content/uploads/2013/02/Search_Generative_art.png\")
普通、芸術作品（ここでは美しい絵など）を制作するには、まず最初にアーティストが作りたいと思う作品のイメージを頭の中につくり、そのイメージにできるだけ近くなるように、絵筆をとって描くという順番になると思います。したがって、その世界の創造主たる作家は、その作品の隅々まで自分の「意図」で作っているわけです。これはあたりまえですよね。
\n\n\n\nところが、アーティストとコンピュータとの協調作業により、作家が当初は意図していなかった「思いがけない美」を追求するアートがあります。これはジェネラティブ・アート（Generative art）と呼ばれています。
具体的にどのようなものがあるかは、画像検索で\"Generative art\"と検索してみましょう（以下の画像をクリック）。多くの作品がありますね。
このようなジェネラティブ・アートの作り方は、まずはじめに作品のだいたいの構造を決めるプログラムを作ります。ただし、作品の要素となるオブジェクトのサイズや色や方向等のパラメータに関数や乱数を導入することで、何度かプログラムを動かすことで「思いがけない美」が発生する仕組みを組み込んでおきます。そして、そのプログラムの実行を何度も繰り返すとともに、大枠となるプログラムをブラシュアップをすることで、よい作品を「発生」させるというわけです。
\n\n\n\nでは優秀なプログラマであれば、よい作品ができるかというとそうではありません。たまたま発生した「よい作品」をよい作品と判断する目利きする力が必要です。よい作品かどうかを見分ける人を「キュレーター」と呼びますが、まさに、キュレーションの力が必要となるわけです。極端なことをいうと、ジェネラティブ・アートでは、
\n\n\n\n創作活動 ＝ プログラミング ＋ キュレーション
\n\n\n\n![\"\"](\"https://web.fujimura.com/wp-content/uploads/2013/02/generative_art.jpg\")
ということになるかもしれません。すなわち、私のように絵を描くのがあまり上手ではない人でも、よい作品かどうかを見分ける力があれば、アーティストになれる可能性があるという分野といえるかもしれません。
\n\n\n\n最近、このようなジェネラティブ・アートに関する入門書が出版されました。この本では、ジェネラティブ・アートの概念を説明するとともに豊富なコード例があります。例えば、パラメータに与える乱数をどのように発生させるかは重要なポイントですが、rand()関数のような一様乱数では、必ずしも自然で美しい作品とはならないケースがあります。そのような場合には、パーリンノイズ(perlin noise)と呼ぶノイズを導入する方法があります。このようなジェネラティブ・アートのポイントを分かりやすく説明しています。尚、パーリンノイズについては、後日、改めて例を交えて紹介します。
\n", "excerpt": "", "date": "2013-02-18 19:15:02", "modified": "2019-04-10 19:02:12", "slug": "%e3%82%b8%e3%82%a7%e3%83%8d%e3%83%a9%e3%83%86%e3%82%a3%e3%83%96%e3%83%bb%e3%82%a2%e3%83%bc%e3%83%88", "status": "publish", "type": "post", "author": "fujimura", "categories": [ "media art" ], "tags": [ "generative art", "perlin noise" ], "link": "https://web.fujimura.com/blog/archives/203", "featuredImageId": 209, "featuredImageUrl": "https://web.fujimura.com/wp-content/uploads/2013/02/generative_art.jpg" }, { "id": 958, "title": "最初の記事", "content": "\n![\"\"](\"https://web.fujimura.com/wp-content/uploads/2014/05/fujimura_logo3.gif\"){kind=logo}
Amazon Web ServiceのEC2上にゼミ実習用のサーバを構築してきましたが、本日、このサーバにEC2 ElasticIPサービスで、固定IPアドレスを付与するとともに、既に持っていたfujimura.comドメインのDNSレコードに\"web\"エントリを追加し、web.fujimura.comで参照できるように設定しました。これまで、ゼミで使っていたEC2のサーバのURLは使えなくなりましたので、これからは\"web.fujimura.com\"でアクセスするように変更お願い致します。
\n", "excerpt": "", "date": "2013-02-09 00:36:43", "modified": "2019-04-10 19:08:17", "slug": "%e6%9c%80%e5%88%9d%e3%81%ae%e8%a8%98%e4%ba%8b", "status": "publish", "type": "post", "author": "fujimura", "categories": [ "web", "wordpress" ], "tags": [ "AWS", "DNS" ], "link": "https://web.fujimura.com/blog/archives/958", "featuredImageId": 101, "featuredImageUrl": "https://web.fujimura.com/wp-content/uploads/2013/02/fujimura_logo3.gif" } ]![写真](\"https://web.fujimura.com/wp-content/uploads/2023/06/スクリーンショット-2023-06-06-17.45.36.png\"){kind=link}
![写真](\"https://web.fujimura.com/wp-content/uploads/2022/05/スクリーンショット-2022-05-29-16.25.01.png\"){kind=link}
![ブラウザがマイクを使用してよいか尋ねるダイアログボックスが表示](\"https://qa.fujimura.com/wp-content/uploads/2015/06/mediastream.png\"){kind=link}