プロフィール

概要

君塚史高はフリーランスのウェブフロントエンジニアです。

• ウェブアプリケーション（Next.js）
• 展示用のアプリケーション（Electron）
• スマホアプリ（Expo）
• Alexaスキル（Alexa Skills Kit SDK）

などをつくってます。

個人事業として受託開発も行なっており、そちらの実績は45395.netにまとめています。

経歴

小学校時代

• 友達の家で遊んだボードゲーム（将棋・リバーシ・人生ゲームなど）を家に帰ってからつくる

中学校時代

• 自作のレベルが上がり、シューティングゲームやUFOキャッチャーをダンボールでつくる

高専時代

• 耳の聞こえない人に対し、音楽を振動で伝達できないかを研究する

大学時代

• 打ち込みを習得し、携帯電話の着信音用の曲をつくる

第一次社会人時代（法人営業）

• 自らがインターフェイスとなることで高専時代の研究の突破口を思いつく

大学院時代

• 営業時代の経験から発信側の考えよりも受信側の状態に着目する
• 電車内などの移動空間内専用のARコンテンツについて研究する

第ニ次社会人時代（デジタルコンテンツ制作）

• ウェブサイトをつくる
• 体験型展示をつくる

自営業時代（デジタルコンテンツ制作）

• 思いついたものをつくる
• 頼まれたものをつくる

影絵 + AR

概要

影絵R（カゲエーアール）は、WebARとプロジェクションマッピングを組み合わせた展示作品です。「影絵」と「AR」を組み合わせて命名しました。

ARオブジェクトの影のみが肉眼で確認できます。そして、スマホを使ってARオブジェクトを観た時にオブジェクトと影が連動していることがわかります。

試したこと

ARオブジェクトの一部を現実世界に配置することを試みました。

今回は本体をAR上に、影を現実世界に配置しています。

当初は足音も現実世界に配置しようと思ったのですが、想像よりもいい感じに仕上がらなかったので、今回は見送りました。

考えたこと

• 体験したくなるARマーカー

ARマーカーは、読み込むまで何が起こるかがわかりません。

しかし、表示されるARオブジェクトの足音、声、影などが現実世界に漏れ出ていたら、表示されるものが想像しやすくなるのではないか。そして、体験したくなるARマーカーになるのではないかと考え、生まれたのが「影絵R」です。

裏技

実は、WebARを表示した状態で、画面を横にスワイプするとARオブジェクトを回転させることができます。

ARオブジェクトを回転させると、壁も同様に回転します。

作ったもの

• 踊るWebAR
• WebARに連動する影プロジェクション

scroll + crawl

概要

「scrawl」はページスクロールに連動するクロールのアニメーションです。スクロール（scroll）とクロール（crawl）を合わせて命名しました。

試したこと

• Next.jsでのページスクロール管理

ページスクロールに連動するNext.jsプロジェクトの習作として制作しました。

もともとは検証のためだけのページで公開の予定はなかったのですが、思いの外、クロールのイラストがいい感じに描けたので公開に至りました。

無限に泳ぎ続けられるように、ページの最下部までスクロールした際に最上部までワープさせ、無限スクロールを実現しています。

考えたこと

• iOSにおける無限スクロール

window.scrollTopを監視しながら、うまいことwidow.scrollToでスクロール位置をワープさせることで、割と簡単に無限スクロールを実装できると思ったのですが、実際に実装してiOSで確認してみると、ひと工夫しないとうまくいかないことがわかりました。

様々な工夫を試し、考え、作ってみた結果「scrawl」は生まれました。

しかし、どんなサイトにでも導入できる工夫ではない為、「kimizuka.fm」には導入できず、全く違う無限スクロールの仕組みを作りました。

無限スクロール実装の試行錯誤はまだまだつづきます。

作ったもの

• ページスクロールに連動するウェブサイト

音楽 + 家

概要

「音楽家」は家の中で発生する生活音を、自分好みの音に差し替えることを目指したプロトタイプ群です。M5StackやMESHを使って実現しました。

試したこと

• 環境音の拡張

元来、動作に紐づいた動作音は、動作から発生する振動に依存しています。

例えば、古き良き目覚まし時計は、物理的にベルを叩いていたため、その振動が動作音となっていました。

しかし、現在の目覚まし時計はスピーカーを搭載しているため、好きな音を流すことができます。

「音楽家」ではこれをヒントに、日常生活で発生する振動をセンサでキャッチして、それに応じた動作音をスマートスピーカーから再生する仕組みを作ってみました。

現実世界をセンシングし、その状況に応じたデジタルコンテンツを合成するという点では、デジタル音を使ったARと捉えることもできる気がしています。

換気の歌

換気扇を回すと歓喜の歌が流れます。

運命の扉

ドアが開くと運命が流れます。

ベントーヴェン

リュックが開くとピアノ協奏曲5番が流れます。

電子印鑑

印鑑を押すとデジタル音が流れます。

ジェットバズーカ

殺虫剤を振るとエネルギーが溜まる音が、発射すると発射音が流れます。

考えたこと

• 動作と切り離された動作音

目覚まし時計の例がまさにそうなのですが、スピーカーの登場で、動作と動作音を切り離して考えることができるようになったことは非常に興味深いです。

例えば、楽器にもその影響が顕著に表れていて、古き良きピアノは叩いた弦の長さに応じた振動を発する楽器だったのですが、現代のキーボードは、ボタンに応じた音をスピーカーから発する楽器となっています。つまり、鍵盤を叩くという動作は互換性のために残っていますが、もはやその必然性はないとも捉えられるわけです。

動作と動作音を切り離すことができれば、インターフェイスの自由度は飛躍的に上がるので、そう考えると家自体を楽器にしてしまうことも難しくはないと考えています。

裏話

換気の歌の動画をGIFアニメにする際に横幅が足りなかったため、右半分をAIで生成してみました。

配管パイプに違和感がありますが、AI感があって趣があるかなと思い、そのまま採用しています。

作ったもの

• 回した時に音楽が流れる換気扇
• 開けた時に運命が流れるドア
• 開けた時にピアノ協奏曲5番が流れるリュック
• 押した時にデジタル音が流れる印鑑
• 強そうな発射音が流れる殺虫剤

笑顔で筋トレできるアプリケーション

概要

💪😄は笑顔で腹筋を鍛えるトレーニングアプリです。

• 顔認識を使って腹筋の回数をカウント
• トレーニング時の表情を計測し、笑顔であるほどボーナスポイント付与

という2つの機能を兼ね備えています。

普通の顔で腹筋すると+1pt。

笑顔で腹筋すると最大で+100pt。

試したこと

• 楽しいトレーニング

子供の頃、ドラゴンボールを読んで、鍛え上げられた悟空の腹筋に目を輝かせていました。

しかし、いくら腹筋をしても悟空のような腹筋にはなりません。

そして、気づいたのです。

あれは漫画なんだ。と。フィクションなんだ。と。

そして、すべてを悟り、空っぽになった私は腹筋を鍛えることをやめてしまいました。ある意味では悟空になれたと言っても過言では無いでしょう。

時は流れ、大人になったある日、ボディビルダーを観て愕然としました。

子供の頃夢見た、悟空の腹筋がそこにはあったのです。

そして気づきました。

あれはフィクションではなかったのだと。

子供の頃の私は、腹筋を鍛えることをやめてしまいましたが、続けていれば、いまごろ悟空のような腹筋を手に入れることができていたのだろう。と。

私は悔やみました。

なぜ、なぜあの時、腹筋を鍛えることを辞めてしまったのだろう。と。

辞めなければ、悟空のような腹筋を手に入れることができたのに。と。

しかし、当時の記憶を思い返すと、トレーニング中は苦しさ満載で、そこがそもそも問題のような気もしてきました。

楽しく鍛えられるのであれば、きっと続いていたはずなんです。

だって、子供の頃からボディビルダーの存在は知ってましたし。

「あれは漫画なのだ、フィクションなんだ」という気付きは、辛いトレーニングを辞める言い訳でしかなかったわけです。

しかし、同時にこうも思いました。

フロントエンドエンジニアとして腕を磨き続けている今の自分であれば、
今の技術力があれば、楽しく腹筋を鍛えることのできるマシンをつくることができるはずだ。と。

結果として、子供の頃に夢見た悟空のような腹筋を手に入れることができるはずだ。と。

「よーし。楽しく腹筋できるマシンをつくってやるぜ。」

私がそう決意することは、もはや必然だったといえるでしょう。

考えたこと

• 面白い = 面白そうではない
• DEMOのみのプレゼンテーション

開発中に、ふと気付きました。

笑顔で腹筋すると楽しくなることはわかったけれども、それは笑顔で腹筋をしてみないとわからないことだな。と。

人類皆悟空の腹筋化計画の実行のためには、誰もが笑顔で腹筋したくなるような工夫が必要だな。と。

つまり、やってもらえれば面白いと思ってもらえる体験では、不十分で、面白そうだからやりたくなる体験までブラッシュアップする必要があると気づいたわけです。

そこで、見ているだけで楽しくなる演出を加えることにしました。

具体的にはソーシャルゲームの演出を観察し試しに実装してみて、腹筋し、尻を痛め、コンシューマゲームの演出を観察し、試しに実装してみて、腹筋し、尻を痛めと、尻を痛める日々でした。

そして、途中何度も思いました。

あれ？俺、なんで笑顔で腹筋しながら尻を痛めてるんだろう？

と。

そう。色々思うことはありましたが、すべてを不屈の精神で乗り越えたのです。

元来、私はそんなに強い人間ではありません。しかし、そんな私を一体なにが駆り立てたのか。

それは、子供の頃にドラゴンボールで観た悟空の腹筋への憧れ以外のなにものでもありません。

そして紆余曲折あって、「💪😄」は完成したのです。

また、完成作品をプレゼンテーションする機会があったのですが、プレゼン方法も迷いに迷いました。

しかし、ここで閃きました。

プレゼンテーションはしなくて良いだろう。と。

鍛え上げられた己の腹筋のビフォアー、アフターを魅せれば、それが一番伝わるであろう。と。

なんといっても、筋肉は嘘をつきませんから。

私はプレゼンに備えて、よりトレーニングに励みました。笑顔でトレーニングしていたので、辛さは全くありません。あったのは尻の痛みだけです。

しかし、プレゼン前日になっても腹筋に変化はほとんどありませんでした。変化があったのは擦り切れた尻の傷ぐらいです。

困りました。悟空のような鍛え上げられた腹筋を披露するためには精神と時の部屋が必要です。

ここで私はある決断をします。

プレゼンテーションは諦めよう。と。

与えられた時間、ずーっとデモをやり続ければ良いであろう。と。

幸いなことに腹筋は充分に鍛えてありますし。尻は不安ですが。まあ、結果としてプラマイゼロでしょう。

しかし、さすがにそれだけだと意味がわからないので、腹筋するごとにテロップが表示される仕組みだけ実装しました。

なので、プレゼン当日はひたすら腹筋をしていただけなんですが、そんな僕でも優勝できたのです。ありがたいことです。

裏話

💪😄は、2019年にNuxt.jsの2.10.2で開発したのですが、4年ぶりに改修しようとしたら、とんでもない数のエラーが発生して心が折れました。

放置しすぎたことが原因です。いつの日か、Nuxt.jsの3か、Next.jsで作り直そうと思う今日この頃です。（2023年10月の決意）

定期的に手入れしていかないと維持できないものですね。筋肉も、Nuxt.jsのプロジェクトも。

作ったもの

• 顔認識で腹筋の数をカウントするアプリ（笑顔ボーナス付き）

ものすごく丁寧に現在時刻を教えてくれるアプリ

概要

「丁寧すぎる時計」は、懇切丁寧に現在時刻を教えてくれるAlexaスキルです。

試したこと

• 黎明期向けのコンテンツ

「丁寧すぎる時計」は黎明期向けのコンテンツの習作として制作しました。

まず、iPhoneの黎明期に大ヒットした「iBeer」を分析し、

• 黎明期にそのデバイスを持っているユーザーはアーリーアダプターである
• アーリーアダプターはそのデバイスを持っていない人に自慢したい気持ちがある
• 自慢される側は未知のものを見ることになるので、シンプルで分かりやすいコンテンツでないと自慢が成立しない

と、「自慢しやすさ」を黎明期向けコンテンツに必要な要素と考えることからスタートしました。

そして、スマートスピーカーの最大の特徴を、

• 音声で命令できる
• 音声で返答がある

と、捉え、

• わかりやすさ（わかりやすくないと伝わらない）
• めずらしさ（めずらしくないと自慢できない）

の2軸で「命令と返答のセット」を考えました。

結果として、

• 時刻を聞いたら教えてくれる（わかりやすい）
• 時刻を教えてくれるまでが異常に長い（めずらしい）

の2軸を試作したものが「丁寧すぎる時計」です。

考えたこと

• 日本の文化

バイリンガルな同僚とビジネスメールをやりとりしているときに気づいたのですが、内容が同じでも日本語と英語では、メールの長さが全然違います。

日本語には漢字があるので、1文字で表現できる情報はアルファベットよりも多いはずなのに何故だ。と思ったのですが、文化的に要件に対し「いつもお世話になっております」とか「以上、何卒よろしくお願いいたします」とか、畏まった文章を追加する必要があるため、英語より長文になっていることに気がつきました。

これは素晴らしい文化であると同時に、要件だけを最速で知りたいときにはノイズになり得るなと感じました。

本来、

「明日の集合時間を教えてください」

「13時です」

で済むところが、

「〇〇社 △△様 いつもお世話に合っております、××社の◻︎◻︎でございます。明日の集合時刻について確認させて頂きたくご連絡差し上げました。明日は何時集合だったでしょうか。予定通り進行できるように、確認させていただきたく存じます。何か質問や特別な配慮が必要な場合がございましたら、併せてお知らせください。引き続き、よろしくお願いいたします。」

「××社 ◻︎◻︎様 いつもお世話に合っております、〇〇社 △△でございます。ご連絡ありがとうございます。明日の集合時間の件ですが、13時を予定しております。お時間に遅れないようご注意ください。何か質問や追加情報が必要な場合は、どうぞご連絡ください。明日お会いできることを楽しみにしております。引き続き、よろしくお願いいたします。」

というように、すごく長くなるな。と。

特に音声で伝える場合、本題の前にあれこれ不要な情報を追加するのはクリティカルな欠陥になりえます。確認できるようになるまでの時間が伸びてしまうので。

クリティカルな欠陥ゆえにユニークな体験になる可能性があるな。と。そんなことを考えながら、返答がすこぶる長いAlexaスキルを作ってみました。

裏技

実は「現在時刻を急いで教えて」など、Alexaを急かすと、いつもとちょっと違う返答が返ってくるという隠し機能が実装されています。

作ったもの

• 現在時刻を教えてくれるAlexaスキル

2週間使い捨てコンタクトレンズ管理アプリ

概要

「コンタクトカウント」は、2週間コンタクトレンズを何日使っているかを記録する為のAlexaスキルです。

試したこと

• DynamoDBをつかったデータ永続化
• リジェクトされたiOSアプリのリベンジ

もともとはAlexaスキルのデータ永続化の習作として企画しました。以前から興味のあったDynamoDBを使うことを前提に、何を保存するアプリにしようか考えたところ、2週間コンタクトレンズの使用日数に目をつけました。（コンタクトだけに）

かつて、2週間コンタクトレンズの使用日数をiOSアプリのアプリケーションバッジに表示するアプリを制作したことがあったのですが、Appleの審査を通過できず公開に至らなかった後悔があり、Alexaスキルとして公開できたことを嬉しく思っています。アイコンのデザインはiOSアプリ向けに制作したものをそのまま流用しました。

考えたこと

• Googleで調べられないこと

折角ならばGoogleで調べられないことを調べることのできるスキルを作ろうと考え、コンタクトレンズの日数に目をつけました。（コンタクトだけに）

作ったもの

• データを永続化するAlexaスキル

スマートスピーカーに時間を教えてあげるアプリケーション

概要

「タイマーの逆襲」は、逆にスマートスピーカーに時間を教えてあげるアプリケーションです。

スピーカーから「ねえ人間、5秒経ったら教えて」といった感じのリクエストがくるので、指定された時間になったら「時間です」と教えてあげましょう。

また、AIの太々しさを加速させるために、3Dプリンタで専用のスピーカースタンドを出力しています。スタンドのモデリングは松田壮に依頼しました。

試したこと

• Alexaスキル制作
• Alexaスキル画面付きデバイス対応
• Googleアシスタント対応アプリ制作
• CLOVAスキル制作

もともとはAlexaスキルの習作として制作しました。

のちに、Googleアシスタント対応アプリの習作として、Google Homeに対応させたり、CLOVAスキルの習作として、LINE Clovaに対応させたりもしたのですが、残念ながら、Googleは会話型アクションを廃止し、LINEはCLOVA Assistantサービスを終了したため、現在はAlexaスキルのみが生き残っています。

また、Echo Show（画面付きのスマートスピーカー）が販売されたタイミングで、画面付きデバイス対応の習作としてアップデートしました。

考えたこと

• 技術的特異点

いつか、人工知能が人の知能を超える瞬間くるときて、その瞬間は技術的特異点と呼ばれていたりします。

「タイマーの逆襲」を作ったのは2018年ですが、2045年のAlexaスキルはこんな感じになっているかもしれないな。という想いを込めて制作しました。

裏技

例えば「5秒経ったら教えて」というリクエストに対し、「6秒経ったよ」など誤った時間をセリフに含めて返答すると、Alexaがいつもとはちょっとちがったリアクションをします。

作ったもの

• 腹立たしいAlexaスキル
• Googleアシスタント対応アプリ（公開終了）
• CLOVAスキル（公開終了）
• スピーカースタンド

世界で一番光ってはいけないものを光らせた台無しプロダクト

概要

「光るまきびし」は光り輝くまきびしです。暗所でも目立ちます。

試したこと

• 台無しプロダクト

まず、よかれと思って機能を足した結果、元の機能を台無しにしてしまうことを目指したプロダクト、「台無しプロダクト」をいくつか考案しました。

空気のように軽い鉄アレイ

持ち運びに便利なように、ものすごく軽くつくった鉄アレイ。結果、トレーニング効果ゼロの台無しさ。

しゃべるカンペ

わかりやすさ向上のために読み上げ機能を追加。結果、声を出せないところでつかえなくなる台無しさ。

メッシュマスク

息苦しくないようにメッシュ素材でつくったマスク。風通し抜群の台無しさ。

順路付き迷路

お客様を迷わせないよう順路を表示した迷路。魅力がゼロになる台無しさ。

ロゴ入り忍者衣

箔をつけるために、ブランドロゴを入れた隠れ蓑。景色に溶け込まない台無しさ。

ロゴ入り隠れ蓑

スポンサー料を頂いて、ロゴを入れた忍者衣。人目に着くことはない台無しさ。

光るまきびし

差別化のために、光り輝く機能を追加したまきびし。誰も踏まない台無しさ。

などです。

そんな「台無しプロダクトの中」で、一番ぐぐっときたものを具現化したのが「光るまきびし」です。一時期、販売もしてました。

考えたこと

• 本質に背いた機能追加

まきびしの本質は、ステルスな武器であることなので、「光らせる」という改修は本質に背いたものであることは明白です。

しかし、まきびしに限らず、普段の制作活動でに、いつの間にか当初の本質に背いた機能追加を行なってしまいそうになることがあります。

そんなとき、「こうなってはいけないぞ」と思いとどまれるよう、僕の机には、常に光るまきびしが飾ってあります。

作ったもの

• 光るまきびし

操作する手に合わせたポートフォリオサイト

概要

kimizuka.fmは、君塚史高の作品をまとめたポートフォリオサイトです。

操作する手に応じてスクロール方向が変化します。

試したこと

• React.js
• Nuxt.js
• Jamstack
• Next.js

もともとは、フレームワークを使わず制作したポートフォリオサイトだったのですが、使ってみたいフレームワークを見つけるたびに、その習作としてリメイクを繰り返しています。

• React.js + Express + NginxのSSR
• Nuxt.jsのSPA
• Nuxt.jsのJamstack
• Next.jsのJamstack

という変遷を辿り、現在はNext.js（13.4）のApp Routerを使った、Jamstackとなりました。

考えたこと

• ユーザー最適化
• アフォーダンス

まず、どんどん大きくなるスマートフォンの画面に最適化することを考えて、ウェブサイトを斜めにスクロールさせてみることにしました。

同時に、操作する手によってスクロールしやすい方向が異なるため、操作する手に合わせてスクロール方向を変化させる機能も実装してみました。

左右に合わせて変化する様は、野球のスイッチーヒッターのようで気に入っています。

しかし、実際は利き手に合わせて変更されるのはレイアウトだけで、スクロール方向は何も変わっていません。

極端な話、右手で操作する用のレイアウトを真上や左上方向にスクロールしても、動作的にはなんら問題ありません。

ただ、斜めに配置されているアフォーダンスは強力で、ほとんどのユーザーがレイアウトに従って斜めにスクロールしています。

裏技

こっそりと右利き用でも左利き用でもないフラットな見栄えも用意されているのですが、ディベロッパーツールを使わない限り、この姿を見ることはできないはずです。

作ったもの

• React.js製のSSRサイト（公開終了）
• Nuxt.js製のSPAサイト（公開終了）
• Nuxt.js製のJamstack（公開終了）
• Next.js製のJamstack

踏み心地を操作できるハプティクスマット

概要

マットマックスは踏み心地を操作できるハプティクスマットです。

動作の様子を撮影して動画広告風に仕上げてみたのですが、何も伝わらない動画になってしまい、のちに後悔しました。

試したこと

• 振動による踏み心地の提示

マットの下に強力な振動子を仕込み、踏んだ時の振動を操作できる仕組みをつくってみました。

• 水たまり
• 深雪
• 落ち葉

などなど、踏んだ時に独特の感触があるマテリアルを振動で再現しています。

考えたこと

• 振動のデザイン

高専に通っていた時、振動工学の研究室に所属していたのですが、教授から「どうせ振動するなら心地よい振動が良い。例えば、着メロとかもそうだ」という言葉を聞き、いまでもものすごく心に残っています。

昔から実況パワフルプロ野球が好きだったのですが、その言葉を聞いた時にNintendo64のパワプロで、外野守備のときにコントローラーが振動したときの感動を思い出しました。デザインされた振動は感動を産むんだなぁと。

この考え方は、のちにつくる音楽家（ミュージックハウス）にも活かされています。

作ったもの

• 踏み心地を操作できるハプティクスマット

🍚✨

概要

黄金炒飯は炒飯を音と光で盛り上げる電子工作です。
クロッシュ（フタ）に、iPhone、Arduino、傾斜スイッチ、LEDテープを内蔵し、傾きを検知した際にLEDを輝かせつつ、BGMを再生します。

料理の登場が盛り上がること間違いなしの逸品です。

試したこと

• 子供の頃の思い出の再現

子供の頃、料理で対決するアニメを観て、フタ（のちにクロッシュという名称だということを知る）を開けた時に光り輝くチャーハンに目を輝かせてました。

そして、気づいたのです。

ウェブフロントエンジニアとして腕を磨き続けている、いまの自分であれば、子供の頃に夢見た黄金チャーハンを再現することができるのではないだろうかと。

究極かつ至高の黄金チャーハンをつくる。私がそう決意することはもはや必然だったといえるでしょう。

しかし、予想に反し、開発は困難を極めました。

クロッシュの値段が想像の10倍だったこと。

近所のコンビニにはチャーハンが売っていなかったこと。

クロッシュの中に仕込んだ小型プロジェクタ（50ルーメン）では、チャーハンが輝かなかったこと。
（暗い部屋で映画を見るには充分な明るさでした）

配線を間違えてArduinoを1個破壊してしまったこと。

秋葉原まで出かけてフルカラーLEDテープを買ったのちに、Amazonでもっと安く買えることに気づいてしまったこと。

と、まあ色々あったのですが、それらを乗り越えまくり、最終的に完成したものが、黄金炒飯です。

考えたこと

• チャーハンを光らせる意味

前述のとおり、開発は困難を極めました。色々ありました。途中何度も考えました。

あれ？なんでチャーハンを光らせてるんだろう？と。

そう。色々ありましたが、すべてを不屈の精神で乗り越えたのです。

もともと、僕はそんなに強い人間ではありません。

しかし、そんな僕を一体なにが駆り立てたのか。

それは、子供の頃にアニメで観たフタを開けた時に光り輝くチャーハンへのあこがれ以外のなにものでもありません。

そして、まあ色々あったのですが、それらを乗り越えまくり、最終的に完成したものが、黄金炒飯なのです。

作ったもの

• 料理を盛り上げるクロッシュ（フタ）

メッセージアプリ風ウェブサイト

概要

のっとりシミュレーターはメッセージアプリの乗っ取りを疑似体験できるウェブサイトです。

試したこと

• Player Card

もともとはTwitterのPlayer Cardの習作です。

Twitterのタイムライン上で体験できるコンテンツとして、当時流行していたメッセージアプリの乗っ取りを疑似体験できるウェブサイトをつくってみました。

考えたこと

• CSSでのデザイン再現によるRetina対応

のっとりシミュレーターは画像リソースを一切使わずにCSSでデザインを再現することに挑戦してみました。この時につくったCSSでのスマートフォンは、のちに様々なサイトで活躍しています。

Retinaディスプレイが一般的となった昨今、CSSでのデザイン再現は、Retinaディスプレイ対応としても良い手段なのかもしれないなと思いました。

作ったもの

• メッセージアプリの乗っ取りを疑似体験できるウェブサイト

NOT FOUNDが流れる404ページ

概要

404 | NOT FOUNDは、Mr.Childrenのミュージックビデオが再生されるNOT FOUNDページです。

試したこと

• YouTube Player APIの実装
• NOT FOUNDページのカスタマイズ

もともとはYouTube Player API組み込みの習作です。Mr.Children Official ChannelにNOT FOUNDのミュージックビデオがアップされているのを発見し、NOT FOUNDページに組み込んでみました。（のちにライブバージョンに差し替えました）

さまざまなウェブサイトのNOT FOUNDページに組み込んでいたのですが、現状残っているのは、kimizuka.fmのNOT FOUNDページです。Next.jsのNOT FOUNDページの習作として制作しました。

考えたこと

• OGP（Open Graph Protocol）

実は、kimizuka.fmでステータスコード404を返すページにはOpen Graph Protocolが設定されています。世界広しといえども、NOT FOUNDページにOGPが設定されているのはめずらしい事例なんじゃなかろうかと考えています。

作ったもの

• YouTube Playerが埋め込まれたNOT FOUNDページ

子供の頃の想像をデジタルリメイクした懐かしインスタレーション

概要

そうぞうの遊び展は、子供の頃に頭のなかで思い描いていた遊びをデジタルリメイクした、4つのインスタレーション作品の展示会です。

• 蛍光灯のひもと思う存分戦うことのできる「電気のひも」
• リモコンのボタンとボタンのあいだの隙間を迷路に見立てた「テレビのチャンネル」
• ゴミ箱をバスケットゴールに見立てた「遠くのゴミ箱」
• 車窓をアクションゲームに見立てた「車の窓のそと」

の4つの作品を制作し展示しました。本多大和との共作です。

電気のひも

子供の頃、蛍光灯の紐を殴りながら、ボクシングを想像して遊んでました。
「電気のひも」はそんな体験のデジタルリメイクです。

• 紐を引くとゴングが鳴り試合が始まる
• 試合中に紐を叩くと音が出る
• 試合中に紐を叩くと電球が点滅する
• 試合中に紐を引くとゴングが鳴り試合が終わる

という機能を照明器具に実装しています。

本当は蛍光灯を改造したかったのですが、制御が難しかったので電球を使いました。

テレビのチャンネル

子供の頃、リモコンのボタンとボタンの間の溝をなぞりながら、迷路を想像して遊んでました。
「テレビのチャンネル」はそんな体験のデジタルリメイクです。

リモコンにコントローラを接続し、リモコンの上を移動する光を操作できます。

コントローラは既製品を使うことも考えたのですが、既製品のリモコンに既製品のコントローラを接続すると、どこまでが想像なのかわかりにくくなると考え、コントローラは自作しました。

遠くのゴミ箱

子供の頃、遠くにあるゴミ箱にゴミを放り投げながら、バスケットボールを想像して遊んでました。
「遠くのゴミ箱」はそんな体験のデジタルリメイクです。

ゴミ箱にバスケットゴールに見立てつつ、ゴミが入った際に歓声が上がる仕組みを実装しました。

車の窓の外

子供の頃、車窓から流れる景色を見ながら、アクションゲームを想像して遊んでました。
「車の窓の外」はそんな体験のデジタルリメイクです。

仕組みとしては、サプライズ・ウィンドウを流用しています。当時はガラケー用に制作していましたが、 スマートフォン用にリメイクしました。

作ったもの

• 叩くと音が出る照明
• リモコンに対するプロジェクションマッピング
• センサを搭載したゴミ箱
• ペッパーズ・ゴーストディスプレイ
• 告知用ウェブサイト

マリーンズのスコアがわかる2つのアプリ

概要

chibadge（チバッジ）は、マリーンズの得点が通知されるアプリ（chibadge shiro）と、マリーンズの失点が通知されるアプリ（chibadge kuro）の2つのiPhoneアプリです。

ホーム画面に並べることによって、アプリを開かずとも、マリーンズの試合のスコアがまるわかりになります。井谷裕紀との共作です。バックエンドの開発を担当してもらいました。

試したこと

• Push通知の実装

もともとはPush通知の習作です。Push通知でバッジを表示するアプリを作ってみたかったのですが、何を表示すべきか考えた結果、マリーンズの得点を表示してみることにしました。なぜなら、マリーンズの得点が表示されるとテンションが上がるからです。

そして、折角なので、マリーンズの失点を表示するアプリも作成し、ホーム画面に並べて配置することにしました。

開発当時はまだ、iOSにウィジェット機能がなかったのですが、アプリを開くことなくマリーンズの試合のスコアを確認できる方法を手に入れることができ、大満足だったことを覚えています。

考えたこと

• 単機能なシンプルなアプリ

iPhoneがデビューした際、電話機能さえひとつのアプリになったことに衝撃を受けました。

ガラケーは、あくまで電話がメインの機能で、サブ機能としてメールやブラウザ、ワンセグなどの機能が載っていた印象でしたが、iPhoneは電話もメールもブラウザも並列に、いちアプリとして評価しているんだなと感じたからです。

そして、これからは機能を切り出し、必要に応じて、専門性をもった単機能なシンプルなアプリをインストールしていく時代になったんだと感じました。

しかし、実際にはそういう方向には振り切られることはなく、さまざまな機能をもったスーパーアプリも増えました。

チバッジは、そんな時代に逆行し、

• 得点を表示するのみのアプリ
• 失点を表示するのみのアプリ

と、削ぎ落とせるところまで、機能を削ぎ落とした究極の単機能アプリとして作り上げることができたと思っています。

機能を削ぎ落としすぎた結果、アップデートの審査が通らなくなり、ストアで公開できなくなってしまったわけですが、一片の悔いもありません。

作ったもの

• マリーンズの得点を表示するiOSアプリ（現在非公開）
• マリーンズの失点を表示するiOSアプリ（現在非公開）
• ウェブサイト

ローディング中にジャンピン・ジャック・フラッシュが流れるウェブサイト

概要

The Loading Stonesは、ローディング中にThe Rolling StonesのJumpin' Jack Flashが流れるウェブサイトです。

試したこと

• YouTube Player APIの実装
• ローディングのカスタマイズ

もともとはYouTube Player API組み込みの習作です。Mr.Children Official Channelを発見し、ローディングにJumpin' Jack Flashを組み込んでみました。

ここでの知見は、のちに404 | NOT FOUNDに活かされています。

考えたこと

• ロード中のコンテンツ

昨今のデジタルコンテンツは容量の増加により、読み込み時間がすこぶる長くなってきている気がします。

ロード中のストレスを緩和する施策はあれど、ロード自体をコンテンツにできないものかなと思いながらつくってみました。

作ったもの

• ローディング中にローリングストーンズの曲が流れるウェブサイト

ブラウザに風邪を引かせるブックマークレット

概要

kaze.jsはブラウザに風邪を引かせるブックマークレットです。実行すると、画面上に表示されている「か」と「ぜ」を引きます。

試したこと

• ブックマークレットの制作

ブックマークレットの習作として制作しました。人生で初めてつくったブックマークレットです。

考えたこと

• コンピュータウィルスの表現

コンピュータウィルスの表現方法を考えました。

表現方法として病気に罹っているパソコンのイラストがわかりやすいのですが、インタラクティブコンテンツならではの方法を模索し、くしゃみをイメージしたアニメーションで「か」と「ぜ」を引くことにしました。

作ったもの

• 指定した文字を吹っ飛ばすブックマークレット

影の方向でなんとなく現在時刻がわかるウェブサイト

概要

影時計はスクリーンを触ると、指の影の方向でなんとなく現在時刻がわかるウェブサイトです。

試したこと

• 影のようなデジタルコンテンツ

ARやプロジェクションマッピングなど、現実の風景にデジタルコンテンツを合成する場合、もっとも違和感が少なくなるコンテンツはなんだろうと考えていた時に、影じゃなかろうかと考えました。

そして、この後、いくつか影のようなデジタルコンテンツを制作することになるのですが、その走りとなった作品です。

レイテンシやクオリティに難があり、本物の影と見間違えることはないのですが、コンセプトとしては気に入っています。

考えたこと

• 機能としての時計

制作時に己の部屋を見渡した際、部屋に時計がないことに気がつきました。

というか、家中見渡しても時計はありませんでした。

携帯電話や給湯器など、時計機能がついたものに囲まれて過ごしていたので、時刻は把握できるのですが、世の中から装置としての時計がどんどん減ってきてることに気づきました。

一方で、ありとあらゆるものに時計機能が付随しています。電子レンジとか、炊飯器やら、エアコンのリモコンやら。

結果として装置としての時計は追いやられてしまったんだなと感じました。本体は消滅し、機能だけが残っている。そんな存在は時計以外にもあるんだと思います。例えば通貨とか。決済機能を持ったものが増えるにつれ、通貨の流通量は減っています。そして、時計はそのような存在の代表格なんじゃないかと考えました。

そうなってくると、いっそ身の回りのもの全てに時計機能を付与したら面白いんじゃないかと考え、手始めに、マウスカーソルに時計機能を付けてみようと。そう思いながら実装したのが本作品です。

なぜマウスカーソルなのかは自分でもわかりません。

マウスカーソルにロングシャドウを落とすことで現在時刻を表しています。 影を2本落とすと違和感があったので、短針しかないのですが、例えば10時30分であれば、10.5時と表現しています。 また、スマホで見たときはディスプレイに置いた指に影を落としているので、是非とも画面を触ってみてください。

作ったもの

• ダミーの影が落ちるウェブサイト

干渉縞を思う存分鑑賞できるウェブサイト

概要

moiréは、干渉縞を思う存分鑑賞できるウェブサイトです。

試したこと

• ディスプレイ上でのモアレ

展示の準備でアルミパンチングを買いに出かけた時のことです。

アルミパンチングを棚から1枚取り出す際に、かっこいいモアレが発生し、衝撃を受けました。

早速、HTML上でアルミパンチングを模した画像を重ね、回転させると同じようなモアレを発生させることができたため、Canvasで画像を動的生成するように改良し、干渉縞（モアレ）を干渉できるウェブサイトの誕生に至りました。

考えたこと

• 錯視を使ったコンテンツ

モアレを使わずに同じようなジェネラティブアートを作ろうとすると結構大変な気がするのですが、モアレという現象を使うとものすごく簡単に実装できるのがとても興味深いと考えました。

モアレを錯視に分類するかは意見の分かれるところかもしれないですが、錯視を活用することで実装工数と驚きのコストパフォーマンスを大幅に向上できる可能性を感じています。

作ったもの

• 干渉縞を鑑賞できるウェブサイト

iPhoneをイエローカードに見立てたウェブサイト

概要

イエローカードは、iPhoneをイエローカードに見立てたPWAです。

試したこと

• iPhoneアプリの制作＆申請
• オフラインで動作するPWA制作

もともとは、2011年のゴールデンウィーク、iPhoneアプリの習作として開発を始めました。
制作にはTitanium Mobileを使っています。

当時の僕はiPhoneアプリの制作経験がなかったため、難しいアプリをつくろうとすると、ゴールデンウィーク中に完成しないだろうと思い、頑張れば1日で完成する規模の企画を考えた結果、iPhoneをイエローカードに見立てるというアイデアを思いた次第です。

• Apple Developer Programに加入する
• Xcodeをインストールする
• iPhoneを開発機登録する
• ストア公開に向けてアプリを申請する

などなど、コーディング以外にかなり時間を取られましたが、結果として、アプリは1日で完成。そのまま申請まで完了し、非常に充実したゴールデンウィークになったことを覚えています。

が。ゴールデンウィーク明けに、しっかりリジェクトされ、人生で初めて制作したiPhoneアプリをストアに公開することはできませんでした。

その後、PWAの習作としてリメイクし、現在に至ります。

一度ホーム画面に登録すれば、オフラインでも動作するようにつくっているので、iPhoneアプリのように振る舞うところがポイントです。

考えたこと

• 自分が見るためではなく、相手に見せるためのアプリ
• PWAで公開するという戦略

自分が見るためではなく、相手に見せるためのアプリであることに若干の新規性を感じていました。このコンセプトはいつか他の作品に活かしたいと思っています。

また、この後、いくつものアプリが審査に落ちることになるのですが、「審査に通らないのであればPWAで公開する」という精神は、いまのいままでしっかり引き継がれています。

作ったもの

• iPhoneアプリ（審査に通らず非公開）
• 黄色いPWA

iPhoneをレッドカードに見立てたウェブサイト

概要

レッドカードは、iPhoneをレッドカードに見立てたPWAです。

試したこと

• アプリの横展開

もともとは、2011年のゴールデンウィーク、iPhoneアプリの習作として開発を始めたアプリなのですが、イエローカードの説明と重複するので省略します。

イエローカードと同じく、結局申請は通りませんでした。

考えたこと

• 横展開しやすい開発環境

ニコイチのアプリを開発する際の開発環境を考えるきっかけになりました。そこを怠ると、修正漏れが発生するからです。

片方を修正した際、その修正が共通部分である場合は、もう片方に自動で反映されるような開発環境をつくっておくことの重要性を噛み締めました。

そういった場合の開発を行う場合、最近はMonorepoを愛用しています。

作ったもの

• iPhoneアプリ（審査に通らず非公開）
• 真っ赤なPWA

車窓をアクションゲームに見立てたARコンテンツ

概要

サプライズ・ウィンドウは、車窓を流れる景色をアクションゲームのステージのように見立てたARコンテンツです。

試したこと

• 子供の頃に思い描いていた想像の再現
• Flash liteを使ったコンテンツ制作
• ガラケーを使ったペッパーズ・ゴースト

人生で初めて制作したデジタルコンテンツです。

子供の頃に車窓を流れる景色に合わせて指を動かして遊んでいた思い出を元に制作しました。

制作当時のプログラミング経験は、授業でほんのりとVisual Basicを使ったことがあるぐらいだったので、制作のためにAdobe Flashの使い方とActionScriptの書き方を学びました。

本当は透明ディスプレイを車窓に貼り付けたかったのですが、透明ディスプレイが高価で手が出なかったたため、ガラケーと塩ビ板をうまいこと組み合わせて、車窓を流れる景色とガラケーの画面を同時に鑑賞できるようにしています。

子供の頃にハマったゲーム、「技脳体」の仕組みを参考にしていますが、後に、ペッパーズ・ゴーストという手法であることを知りました。

考えたこと

• ボタンによるインタラクション
• 電波強度によるインタラクション
• ゲームのルールは鑑賞者に委ねるという方針

折角デジタルコンテンツにするのであれば、是非ともインタラクティブにしたいと思い、キャラクターをボタンで操作できるようにしています。

• ボタン1度押し → ジャンプ
• ボタン2度押し → 消える

また、移動中に特化した体験にしたいという思いから、携帯の電波強度が強いほどキャラクターが元気になるように設定しました。

もしも、当時の僕がプログラミングをバリバリ書くことができたら、ガラケーのカメラで車窓の流れる景色を画像解析し、ステージとしての当たり判定を入れたりしたかったのですが、残念ながらそれは無理でした。

なので、提供するのはゲームではなく、「ボタン操作と電波強度によって動きを変えるキャラクター」のみという方針で制作しています。

つまり、ゲームにしたければ、鑑賞者側がステージ（車窓）と、ルールを自分で用意する必要があるわけです。

そして、個人的には結果的にこの方針を気に入っています。なぜならば高専時代の研究で「情報は発信者側よりも受信者側の状態に依存する」と考えるようになっていたからです。

作ったもの

• ウェブサイト（Flash Playerサポート終了につき現在非公開）
• ペッパーズ・ゴーストディルプレイ（アクリル + 塩ビ板）