河本の実験室

河本が作ったものを紹介するブログです。こっち（https://kawalabo.blogspot.com/）から移転してきました。ポートフォリオ： http://俺.jp

病室で作った16個のもの全部

2021年の前半は重めの病気を患い、4ヶ月の闘病生活を送っていました。治療に苦しみながらも、少しでも楽になるためのものや単純に興味本位のものを沢山開発しました。今週から（多分）一旦仕事に戻れることになったので、作ったものを全部記録します。

f:id:kenkawakenkenke:20210510114637p:plain

1. 点滴したまま着脱できる上着

健康だった頃は考えたことも無かったのですが、点滴をつけたままだと上着を着脱できないんですよね。抗癌剤治療は朝9時から深夜2時まで点滴が刺しっぱなしだったので、気軽に温度調整ができなくて困りました。そこで、袖を面ファスナーで開閉できるようにすることで、点滴をしたままでも着脱できる上着を作ってみました。

入院中はずっと助かっていました。ユニクロとか作ってくれないかなー。 

2. 虚構じゃないbot 

twitter.com

最近虚構新聞かと思うような現実のニュースが増えてきたような気がします。そこでTwitterや、はてなブックマークで「虚構新聞かと思った」のようなコメントが沢山ついたニュース記事を自動的にピックアップして紹介するbotを作ってみました。

運用して3ヶ月、話題になった虚構っぽいニュースを的確に拾ってくれて、割と人気アカウントになっています：

ただどうしてもコロナ関係の少し暗いニュースが多くなるので、もっと幅広く拾えるようになるといいですね。

3. 寝ると止まるpodcast

病室で本を読むのも辛い時は大体podcastを聞いてたんですが、寝落ちすると次回巻き戻すのが面倒臭い問題に悩まされていました。そこで、Fitbitが睡眠を検知したら自動的にスマホの再生を止めるアプリを作ってみました。

使ってみると：

  • 睡眠が誤検知されて起きてるのに止まってしまわないか不安になり、余計に動いてしまう（ので寝られない）
  • いつ止まるかドキドキしているせいで寝られない
  • 寝る直前に聞いてたことをあまり覚えてないので、結局10分ほど巻き戻すことになる
  • でも朝起きてちゃんと止まってると嬉しい

という感じで、まだ実運用に耐えるには改善が必要そうです。そのうちリリースしたいと思います。

4. COCOA再起動アプリ

play.google.com

COCOAを毎日再起動させるだけのアプリです。朝のニュースでAndroid版COCOAは一日一回再起動が必要という（ひどい）ニュースを聞き、数時間で作りました。（最近のCOCOAは再起動しなくても良くなったそうです。）

厚生労働省のマークと再起動のアイコンをミックスさせた少し怪しいアプリアイコンにも関わらず、Playストアがちゃんと審査通してくれました。少し驚きです。

f:id:kenkawakenkenke:20210510150554p:plain

5. brbrBeat（ぶるぶるビート）

brbrbeatdemo.web.app

このブログを書くまですっかり忘れてた、一日で作ったSNSです。画面タップでリズムを作成・共有し、人のリズムをスマホの振動で感じて楽しむ新感覚振動投稿SNSです。「勉強が捗るリズム」とかを投稿しあったりして、スマホをブーブー言わせて感覚を楽しむ体験がしたくて作りました。朝3時のテンションで作ったら全然面白くなくて、友達と遊んだあと存在を忘れてました。たぶんリズム作成能力のある人が遊んでくれたら面白くなるんじゃないかと思います。誰かチャレンジしてみてください。

6. OpenKen

open-ken.web.app

一時退院中に家族に見守ってもらえるように作った、フルオープンの生活見守りサイトです。装着したFitbitやスマホから位置情報や活動状態を収集し、リアルタイムでダッシュボードで表示します。我が家では、これを表示させたタブレットをリビングに飾っていました。

せっかくなので全世界に生活をフルに"open"にしたらなにが起きるか実験しようと思い、誰でも閲覧できるようにしてみました：

  • 数週間後でも眺めてくれてる人がちらほらいました。運動してると閲覧数が上がるので、なんか面白いらしいです。
  • 20人ぐらいに位置情報を見守られながら散歩すると「見られてる感」が結構強いです。必要以上に歩くの頑張ってしまいます。
  • 特に危ないことは無かった。

 

7. 寝てる人の割合分析 

github.com

祖父江慎さんの疑問「人間の一番多い%が寝ていた瞬間っていつだろう」が面白かったので、少し観点を変えて「一日のなかで一番多い%が寝ている時間」を計算してみました：

日本時間6時には世界の79%が寝ている、逆に21時には世界の98%が起きているという結果に。（もとのツイートからは計算間違いや前提条件を変えているため少し値が違います。）仮定は少し乱暴（人は22時から6時まで寝る想定）ですが、そんなに大きく実情と違わないはず。ある程度偏りはあれど、人間は世界中に遍く分散しているイメージがあったので、ここまで極端な結果は意外でした。世界中の人が参加するイベントは夜9時に開催しろってことですね。

こういう、昔から存在するデータ（人口分布データ）を違った観点でみることで新しい知識を生むのはすごく楽しいですね。

8. Stick Figure Recorder / 棒人間メイカー

stickfigure-recorder.web.app

棒人間のgifを簡単に大量生成するために開発した、棒人間動画「録画」サイトです。

ウェブカメラから取得した画像を骨格情報に変換し、棒人間として表示してgif化しています。GoogleのPoseNetを使うことで、完全にブラウザ内で完結させています。

作ったgifをアップできるGalleryの作品を参考に、是非自分の棒人間gifを作ってみてください。

f:id:kenkawakenkenke:20210510144939g:plain

 

9. 段階的に難易度を変えられる時計

kenlab.web.app

時計に苦戦している子供のために作った、段階的に難易度を変えられる時計です。

既存の練習用時計は視覚補助の種類が少なく、子供の習熟度に合わせて難しくしていけないのが不満だったため、こういうのを作りました。また、視覚補助をon/offの2値ではなく連続的に表示させることで、まるで麻の苗木を毎日飛び越えるように負担少なく次のレベルに移行できると思っています。

多分アプリにしたら売れると思ったんですが、面倒なのでソース含めオープンです。

10. みんなの忘れたニュース（再）

twitter.com

昔作った「みんなの忘れたニュースbot」を完全に作り直しました。色んな事情で半年ほど寝かせていたのですが、まだフォロワーが5万人以上いて再開の声が多くあったので、刷新することにしました。前バージョンの一番の不満が「何のニュースか分からない」ということだったので、一つ一つのニュースに関連ツイート含め紹介するページを自動生成し、Tweetからリンクするようにしました：

11. 富士山が見える建物マップ

wherecaniseefuji.web.app

こちらで既に解説していますが、オープンの地図データを使って、都内で富士山・東京タワー・隅田川花火が見える場所を探せる地図を作りました：

12. 絶対右折したくない検索

no-right-turns.skip.work

自分は完全にペーパーなのですが、どうしても運転しないといけなくなった時のために「極力右折を避ける経路を検索してくれる地図」を作ってみました：

半分冗談で作ったページですが、実際に米国UPSは配達車の左折（日本でいう右折）を避けることで事故数や移動時間を減らしているそうです。また警察庁統計でも左折車による歩行者死亡事故の6倍の事故が右折車によって発生していることがわかっています（右折・左折件数毎のデータが無いので結論つけにくいですが。）元々僕は運転なんて殆どの人間がやるには高度・危険すぎると思っているので、自動運転が来るまでこういうハックで少しでも安全を確保するのはアリなんじゃないかと思います。

本業（Googleマップ）にだいぶ近いので危うい感じもしましたが、多分弊社が絶対に製品化しないだろうと信じて作ってみました。

13. ARタイムラプス

植物の定点観測を、固定カメラでやるのではなく、スマホカメラをARで位置合わせしてやるという実験です。

まあ当然ながら固定カメラのほうが安定してますね。ちょっと実用には耐えなそう。

14. 東京断面テープ

日本語で「スカイライン」ってあまり聞き慣れないと思うのですが、観光地図とかでよく見る街のシルエットのあれです：

f:id:kenkawakenkenke:20210510112103p:plain

昔からこれが好きで、色んな角度から自動生成できたら面白いんじゃないかと思ってました。というわけで、国土交通省のオープンデータPLATEAUを使って作ってみました：

せっかくどんな角度でも作れるようになったので、山手線円周のスカイランをマスキングテープにしてみようかと思います。

15. 空を絵画に持ってくる

今の入院ってコロナの関係であまり病室も出られないし、来客も禁止されてるしで、代わり映えしない窓の外を眺め続けるしかありません。僕は2ヶ月間一つの部屋に居続けて、気が狂いそうになりました。そこでこうやって絵画の空を切り出して窓に貼り、実際の空を透過して見えるようにしたら空の変化に気づけて少し気が紛れるのではないかと思って作ってみました：

f:id:kenkawakenkenke:20210510112705p:plain

2ヶ月間眺め続けて少し発狂した風景

16. 自分がいつ呼ばれるか予測するページ

kenlab.web.app

病院は待ち時間が多いですよね。殆どの時間は受付番号とのにらめっこで終わります。番号が呼ばれる早さから自分が呼ばれる時間を予測することは誰でもやると思うのですが、暇すぎてこれを半自動化してくれるページを作りました（病院で自分の番を待ちながら）：

おしまい

治療中（特に抗がん剤投与中）は「本業は休み」「入院中のため子育てができない」「色々新たな不都合に直面して開発のネタが出てくる」という、趣味の開発に非常に適した条件でした（治療が辛いことを除けば）。そのためこの4ヶ月間を振り返ると、治療よりも「楽しく色々作れた」という記憶のほうが強いぐらいです。この4ヶ月間楽しく開発できたのは、治療を耐えられるようにしてくれたお医者さん・看護師さんたち、家を守って色々サポートしてくれた家族、僕が作ったもので遊んで褒めてモチベーションを維持してくれた友人たちのおかげです。とりあえずは一旦生きられることになりました。ありがとうございます。

Plateauを使って「富士山🗻が見える場所マップ」を作ろう

急に街歩いてて「富士山見てぇ！」となることありませんか？僕はしょっちゅうあります。そんな時のために、富士山が見える場所を速やかに探せる地図を作ってみました：

wherecaniseefuji.web.app

f:id:kenkawakenkenke:20210331200619p:plain

本稿は「Plateauのデータで遊んでみたい！」「GISデータを使ってグリグリ動かせる3D地図を作ってみたい！」という方のために、この地図の作り方をざっくり解説します。ものすごく長いので、自分が興味のある部分だけ読んだらいいと思います。

全体の流れ

「富士山が見える建物を探す地図」作りはこんな流れで行います。みんなが富士山地図を作りたいわけじゃないと思うので、自分が実際につくりたい用途に合わせて適当に読み替えてください。

  • データの読み込み：ダウンロードしたPlateauデータを自分のプログラムで好きに扱えるようにしょう。今回はJavaで扱う場合を解説します。
  • データの解析：建物データを分析し、富士山が見える建物を拾い出しましょう。
  • データの出力：可視化ページで表示できるように、データの出力を行いましょう。今回はGeoJSON形式（3D地図のため）と2Dタイル形式（2D地図のため）を出力する方法を解説します。
  • 可視化ページの作成：みんなが遊べるように、ブラウザで動く可視化ページを作りましょう。今回はReact + leaflet + OSMBuildingsを使いました。

扱うデータ

最近話題になっているPlateauを使ってみました。国土交通省がリリースした、日本各都市の正確・精細な建物データです。Twitterで検索すると色々な方が美麗な可視化をしているのを見つけられると思いますが、本稿ではあまり美しい3DCGは出てきませんのでそこは期待しないでください。

まずはデータをダウンロードしましょう。Plateauの意識高い感じのトップページから見つけるのは困難なのですが、 ググるとダウンロードページが出てきます。何種類かデータフォーマットがありますが、プログラムからデータ解析したい場合は（世の中にあるライブラリ的に）CityGMLが良いと思います。

f:id:kenkawakenkenke:20210331182703p:plain

東京が14ファイルに分かれてzipされているので、全部ダウンロードしましょう。

CityGMLフォルダの中身

色んなzipがありますが、今回使うのは「bldg.zip」（建物データ）と「dem.zip」（地面の標高データ）との２つです。

データを読み込む

自分のプログラムで建物データを扱える環境を整えましょう。使いたい言語、環境によって色々方法が異なると思うので、「[言語] + CityGML」でググりましょう。筆者はJavaが好きなので、citygml4jというライブラリを使いました。作者が用意してくれているサンプルプログラムSimpleReader.javaを使えば難なく建物が読み込めると思います。

建物データ

まずは建物データを読み込んでみましょう。今回の「富士山が見える建物」のためにはざっくりとした形状が分かればいいので、「lod0roofedge」（一番荒い3Dデータ）しか使いません。これは、「高さ」と「外周の二次元形状」だけで建物を表す、最も荒い形式です。

<?xml version="1.0" encoding="UTF-8"?>
<core:CityModel...>
  ...
  <core:cityObjectMember>
    <bldg:Building gml:id="BLD_ec49bb85-efc6-4bd4-acb2-c3f230b28e9c">
      <!-- 地面からの高さなので注意 -->
      <bldg:measuredHeight uom="m">4.1</bldg:measuredHeight>
        <bldg:lod0RoofEdge>
          <gml:MultiSurface>
            <gml:surfaceMember>
              <gml:Polygon>
                <gml:exterior>
                  <gml:LinearRing>
                    <!-- 屋根の外周の座標値 -->
                    <gml:posList>
                      35.56646362724824 139.7668571400079 5.8260000000000005 35.56647781006162 139.76683164441192 5.8260000000000005 ...

f:id:kenkawakenkenke:20210331202107p:plain
外周と高さ情報しか扱わないので、東京タワーもこんな形になってしまいます。が、今回の分析のためにはこれで充分としました。
 

地形データ

同じく、demファイルも読み込んでみましょう。こちらは標高を表す三角形の羅列です：

<?xml version="1.0" encoding="UTF-8"?>
<core:CityModel...>
  <core:cityObjectMember>
    <dem:ReliefFeature gml:id="RLF_4a7e5bc5-ad22-4522-91d2-b6bc0677b088">
      <dem:lod>1</dem:lod>
      <dem:reliefComponent>
      <dem:TINRelief gml:id="DEM_4a7e5bc5-ad22-4522-91d2-b6bc0677b088">
        <dem:tin>
          <gml:TriangulatedSurface srsName="http://www.opengis.net/def/crs/EPSG/0/6697" srsDimension="3">
            <gml:trianglePatches>
              <gml:Triangle>
                <gml:exterior>
                  <gml:LinearRing>
                    <gml:posList>
                      35.53127756660067 139.7561542106938 2.9695 35.53127785139326 139.7566335063924 2.9885 35.53149395745237 139.75624222099665 2.9645 35.53127756660067 139.7561542106938 2.9695

f:id:kenkawakenkenke:20210331202442p:plain
例えば川を見るとこんな感じ

なぜ地形データも必要かというと、前述の通り建物データには「地面から屋根までの高さ」しか入っていないからです。建物の相対位置を正確に知るためには、更に地面の標高を足し合わせる必要があるので、地形データも取得しました。

富士山が見える建物を全部探す

さて、建物と地形のデータをプログラムで扱えるようになったらシコシコと三角関数等とかを使いながら建物間の遮蔽関係を計算していきます。 この辺は作りたいものに依りすぎるので、参考程度にざっくりとだけ説明します：

まず建物毎に「絶対」高さを計算します。これは各建物が立っている場所の標高（地形データより）と、建物の高さを足し合わせたものを各建物について計算したものです：

f:id:kenkawakenkenke:20210331210446p:plain
標高と・・・
f:id:kenkawakenkenke:20210331210544p:plain
建物の地面からの高さを足し合わせると・・・
f:id:kenkawakenkenke:20210331210557p:plain
建物の屋根の標高が計算できます。

次に、各建物について「富士山が見えるかどうか」を計算していきます。といってもなにか難しいことするわけではなく、愚直に「建物Aの屋上から富士山の五合目を見た時に建物Bが遮蔽するか否か」を総当り的に計算するだけです。こちらのアニメーションでは、ある建物（黒）から富士山を見た時に邪魔になる建物を赤く描画しています： f:id:kenkawakenkenke:20210331205901g:plain

実際に総当りすると計算に数週間かかってしまうので、色々と枝刈りをして一時間半ぐらいに落とします。頑張りましょう。 多分これ、レイトレのアルゴリズムとか使えば一瞬で計算できたりすると思います。が、一回計算するだけなので、一時間半待ちました。

その結果、「富士山が屋上から見える建物群」が計算できました： f:id:kenkawakenkenke:20210331211125p:plain

結果を使いやすい形に出力する

後述するように、今回はLeafletとOSMBuildingsを使ってデータの可視化を行います。 Leafletのためには2D画像のXYZタイル、OSMBuildingsもXYZタイル化されたGeoJSON形式で出力します。

XYZタイルってなに？

国土地理院の解説がわかりやすいのでそっちを読みましょう。 要は：

  • [zoomLevel]-[x]-[y].pngのように同じ大きさ（256x256ピクセル）に分割された（メルカトル図法の）画像を事前に用意しておく
  • zoomLevel=0の時には全世界を一つの画像（つまり 0_0_0.png）で地球を表す。
  • zoomLevelが一つあがるたびに倍の詳細度になる。（つまりzoomLevel=1では 1-0-0.png, 1-0-1.png, 1-1-0.png, 1-1-1.pngの４枚の画像で地球を表す）。つまり一般的には 0 <= x,y < (1<<zoomLevel)

Leaflet用の2D画像を用意する

後述するLeafletは2D地図をブラウザで簡単に表示させてくれるライブラリです。前述したXYZタイル形式で画像を用意しておけば、至極簡単に描画してくれます。まずは画像だけ出力しておきましょう（雰囲気だけ）：

// [0~1]のピクセル座標値を緯度[-90~90]に変換する
// [https://wiki.openstreetmap.org/wiki/Slippy_map_tilenames]
public static double normalizedXToLongitude(double x) {
  return (x - 0.5)*360;
}
// [0~1)のピクセル座標値を経度[-180~180)に変換する
// [https://wiki.openstreetmap.org/wiki/Slippy_map_tilenames]
public static double normalizedYToLatitude(double y){
  return 2*Math.toDegrees(Math.atan(Math.exp(2*Math.PI*(0.5-y)))-Math.PI/4)
}

for(int zoomLevel = 0; zoomLevel <= 18; zoomLevel++) {
  // さっき説明したやつ。ズームレベルが１つあがるたびに詳細度が倍になる。
  int tileSize = 1 << zoomLevel;
  for(int tileY = 0; tileY < tileSize; tileY++) {
    double tileWest = normalizedYToLatitude( tileY / (double) tileSize);
    double tileEast = normalizedYToLatitude( (tileY+1) / (double) tileSize);
    for(int tileX = 0; tileX < tileSize; tileX++) {
      double tileNorth = normalizedXToLongitude( tileX / (double) tileSize);
      double tileSouth = normalizedXToLongitude( (tileX+1) / (double) tileSize);

      // （どうにかして）タイル内に引っかかる建物をとってくる
      List<Building> buildingsInTile = fetch(tileNorth, tileWest, tileSouth, tileEast);
      // （どうにかして）描く
      BufferedImage img = draw(buildingsInTile);
      // 書き出す
      ImageIO.write(new File(String.format("tiles2d/%d_%d_%d.png", zoomLevel, tileX, tileY), "png", img);
    }
  }
}

一つ一つのタイルはこのように、地球のどこかを切り取った小さな画像になります： f:id:kenkawakenkenke:20210331225805p:plain

作った画像たちをCloud Storageにでもあげておきましょう：

gsutil -m cp -R tiles2d gs://[your bucket]

こうすれば、こんなURLでタイルをとってこれるようにまります： https://storage.googleapis.com/[your bucket]/tiles2d/{z}{x}{y}.png

OSMBuildings用のGeoJSONを書き出す

後述するOSMBuildingsは3D地図を簡単に表示させてくれるライブラリです。Leafletと同じように、XYZタイル形式で用意した3Dモデルのタイルを描画してくれます。こちらも同じように出力しておきましょう：

public Object renderBuilding(Building building) {
  List coordinates = building.lod0RoofEdge.stream()
    // 何故かlongitude, latitudeの順番なので注意
    .map(p -> ImmutableList.of(p.coord.longitude, p.coord.latitude))
    .collect(toImmutableList());
  String color = building.canSeeFuji ? "#ff0000" : "#555555";
  return ImmutableMap.builder()
    .put("id", building.buildingID)
    .put("type", "Feature")
    .put("properties", ImmutableMap.of(
      "color", color,
      "roofColor", color,
      "height",building.measuredHeight))
    .put("geometry",
      ImmutableMap.of(
        "type", "Polygon",
        "coordinates", ImmutableList.of(coordinates)))
    .build();
}

public Object renderBuildings(List<Building> buildings) {
  return ImmutableMap.of(
    "type", "FeatureCollection",
    "features", buildings.stream().map(::renderBuilding).collect(toImmutableList())
  );
}

// ... for文の定義まで上に同じ
// （どうにかして）タイル内に引っかかる建物をとってくる
List<Building> buildingsInTile
  = fetch(tileNorth, tileWest, tileSouth, tileEast);
// （どうにかして）描く
Map renderedBuildings
  = renderBuildings(buildingsInTile);
// 書き出す
String json
  = new Gson().toJson(renderedBuildings);
File outFile = new File(String.format("tiles2d/%d_%d_%d.json", zoomLevel, tileX, tileY);
exportFile(outFile, json);

これも上と同じように、Cloud Storageにでもあげておきましょう。

可視化ページの作成

富士山が見える建物マップではLeafletとOSMBuildingsを使って地図を描画しています。

Leafletで2D地図を描画する

描画自体はreact-leafletを使えばとても簡単です。

まず説明書の通り、index.htmlに以下の文を足しておきます：

<link
  rel="stylesheet"
  href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
  integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
  crossorigin=""
/>

そしてページの好きなところにMapContainerのcomponentを足しましょう：

import { MapContainer, TileLayer } from 'react-leaflet'

<MapContainer
  center={initialCenter}
  zoom={initialZoom}
  scrollWheelZoom={true}
  style={{ height: "100%", width: "100%" }}
>
  <-- 下にOSMの地図も描画しとく -->
  <TileLayer
    attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
    url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
    opacity={0.3}
  />
  <-- さっき作ったやつ！ -->
  <TileLayer
    url="https://storage.googleapis.com/[your bucket]/tiles2d/{z}_{x}_{y}.png"
  />
</MapContainer >

これが上手く動くと、このようにOSMの上に自分で描画した建物が表示されるはずです： f:id:kenkawakenkenke:20210331222328p:plain

はまる点としては、僕はNext.jsを使おうとして失敗しました。Leafletを使うにはcomponentをdynamic importする必要があるのですが、しかしdynamic importを使おうとすると、componentが一々再描画されてフリッカーしたりstateがリセットされる現象が解決できず、結局Reactを使いました。

OSMBuildingsで3D地図を描画する

こちらはreact用の優しいcomponentは用意されていません。なのでrefを使って自前で用意したdivにbindしましょう。 まずindex.htmlのどこかでOSMBuildingsのスクリプトを読み込んでおきます。

<script src="https://cdn.osmbuildings.org/4.0.0/OSMBuildings.js"></script>

そしてdivを作ってOSMBuildingsをbindしましょう：

import { useEffect, useRef, useState } from 'react';
const mapRef = useRef();
  useEffect(() => {
    if (!mapRef.current) return;
    const osmb = new OSMBuildings({
      container: mapRef.current.id,
      position: { latitude: 35.6620, longitude: 139.7038 },
      zoom: 15,
      tilt: 45,
      minZoom: 15,
      maxZoom: 17
    });
    // こちらも下にOSMを描画しておく
    osmb.addMapTiles('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
      { attribution: '© Data <a href="http://osm.org/copyright">OpenStreetMap</a>' });
    // さっき作ったGeoJSONタイル！
    osmb.addGeoJSONTiles(`https://storage.googleapis.com/[your bucket]/tiles3D/fuji/{z}_{x}_{y}.json`);
  }, [mapRef.current]);
return <div id="map3D" ref={mapRef} />

これがうまくいくと、めでたく3D地図が描画されます： f:id:kenkawakenkenke:20210331223034p:plain

データを見てみよう

最後に、可視化したデータから何か面白いことが見えるか探索してみましょう。 まずは標高データ。こうすると東京の0m地帯がはっきりよく見えますね： f:id:kenkawakenkenke:20210331224009p:plain 渋谷（画面中央）が谷なのがよくわかります： f:id:kenkawakenkenke:20210331224059p:plain

建物の高さを見ると、新宿の西と東が全然様相が違うことがわかりますね： f:id:kenkawakenkenke:20210331224315p:plain そしてこの高い建物群のせいで、東側広範囲にわたって富士山が見えない領域が広がっています。建築基準として日照権などは定義されていますが、「富士山見える権」みたいなのが定義されたら面白いですね。僕は欲しい。 f:id:kenkawakenkenke:20210331224414p:plain

ついでなので、「富士山🗻と東京タワー🗼が両方見える建物」も探索してみました。多分物件情報とかと組み合わせたら面白いんじゃないかと思います。「富士山・東京タワー・スカイツリーが見えるマンション検索」とか作ったり、「景勝地が複数一枚の写真に収められる写真スポット探索サイト」とか作ったり。 f:id:kenkawakenkenke:20210331230358p:plain

他にもなにか富士山の見える建物の分布で発見がないか、是非さがしてみてください：

wherecaniseefuji.web.app

まとめ

本稿ではPlateauデータの取得、分析、そして人にブラウザで遊んでもらえる可視化ページの作成までを駆け足で解説しました。 Plateauのように使いやすいデータの登場により、データや可視化好きの人はお祭り状態のように喜んで色々作っています。

個人的な思いとして、遊んだ成果物を画像や動画としてアップするだけではなく、「みんながグリグリ動かして遊べる」環境を整えることがコミュニティから次のアイディアが生まれることに繋がると考えています。そのため、是非こういったデータを使った面白いアイディアを思いついたら、本稿を参考に（してもしなくても）、ぜひ「遊べる」プレゼンテーションをしてみて頂けると書いた甲斐があります。

ではまた！

2020年に作ったもの13選

今年も仕事の外で沢山作りました。気に入ってるものや話題になったものを少しまとめます。大体が「話題になったけどその後放ったらかしにしちゃいました」で終わってます。ごめんなさい頑張ります。

f:id:kenkawakenkenke:20201230191754j:plain

2019年のまとめ 

2015年のまとめ

2014年のまとめ

2013年のまとめ

Unity少し覚えた

ずっと覚えるつもりだったUnityをようやく少し覚えました。おかげで今まで面倒だったARのアイディアを沢山実現できました：

1. 置き場所から家具を選べるAR

3月に作った「既存のアプリみたいに家具を選んでから置けるか確かめるのではなくて、置き場所を決めてから入る家具を見つけるほうがいいよね」という提案です。沢山共感の声をいただき、色々記事にもしてもらいました。

実際にこれを使ってうちは庭の机とキッチンのゴミ箱を買いました。購入フローの完成度高めたり、家具販売サイト等にお話に行くのが面倒で放ったらかしにしちゃいました。

これで既製品の家具を買うだけではなく、部屋にピッタリな家具を自動生成してEMARFとかで発注できたらいいなーとか思ってます。

2. 屋内日時計

部屋の中にいても「外っぽさ」を楽しめる日時計。デバイスと太陽の位置関係から「正しい」影を計算しています。こういうちょっとしたアイディアをすぐ実現できるのもUnity素晴らしいですね。

「外出りゃいいじゃん」とか誰も言わないの優しいなと思いました。作ったときの気持ちは「tempescope」の時と少し似ていて、コロナとかを理由に引きこもらないといけないときは、部屋の空間を異世界化させるデバイスを作りたくなるんですね。

スマホそのままだと少し「表示させてる感」があるので、石の筐体にディスプレイを埋め込んで本物感を出そう、とか思ってるうちに放ったらかしにしてしまいました。

3. 縮尺の正しい太陽系AR

子供が宇宙好きなんですが、太陽や地球の距離感がいまいちピンと来てない感じだったので作ってみました。

沢山話題にしていただいたので直ぐにリリースしようと思ってたんですが、歩いてる途中で位置をロストするバグを直すのが面倒で放ったらかしにしてしまいました。（数キロ歩いたあとこれが発生すると発狂するよ。）来年こそリリースします。

ずっと家にいた

今年は（会社の遠くに引っ越したこともあり）ほぼ一年間在宅勤務してました。そのせいか、働き方を楽しくするものを色々作りました：

4. 乗り過ごし検索

「このまま会社で降りずに電車に乗り続けたらどうなるんだろう」を検索できるサービス「乗り過ごし検索」。正月に作りました。絶対本業で作らなそうな機能なので、作ってて楽しかった。まさかこの数カ月後に通勤の概念自体が消えることになるとは思いもよりませんでした。

5. ずっと祝日カレンダー

自分が平日だと思っている日に（海外にいる）同僚が祝日を満喫していることが妙に面白く感じ始めて作りました。一緒に働いている人たちが祝日だと、自分は休みじゃないのに少し自分も休み気分になるんですよね。そこで全世界の祝日を集めて毎日休みな気持ちになれるカレンダーを作ってみよう、と思ったのがこちらです。

試作して意気揚々とツイートしたら、過去に川村真司さんがほぼ同じコンセプトのカレンダーを（2010年に！）作成されていることを知りました。謝りに伺ったら「全然いいよ、一緒につくろうよ」（意訳）ということを言っていただき、川村さんと宗佳広さんと一緒に販売開始しました。おかげで自分一人では不可能なハイクオリティのデザインにしていただき、去年分は完売、2021年分はこちらで大好評販売しています：

kenkawakenkenke.stores.jp

6. ハンドソープを出すと（WHO推奨）30秒音楽が鳴るソープスタンド

コロナ時代に合わせて、手洗いを啓蒙しつつ（この頃は休校で家に居る）子どもたちにハンダ付けを体験してもらおうと考えて、こういうキットを作りました：

7. ずっとカメラ目線になる顔フィルタ

一年間仕事仲間に合わずにWeb会議だけで仕事をしていると、段々「自分」＝「相手のディスプレイに映る何か」という感覚になってくるんですね。そこで、自分の見え方をいじることで、自分自身を変えるよりも簡単に自己実現ができてしまうのではないか、と思って色々作りました。例えば、プレゼンのときにカメラを見る練習するよりも、画像変換でカメラを見ているようにしたほうが手っ取り早いんですよね。キモいので一日で使うのやめたけど。

この考えを突き詰めると、例えば毎日1%ずつ自分の顔にキアヌ・リーブスを混ぜていったら、一年後はチームにキアヌ・リーブス似のTLとして認識してもらえるんじゃないか、とか考えてます。来年チャレンジします。

音で遊んだ

なんか急に、音の可視化にはまった夏でした。

8. 音の速さが見えるデバイス

ありそうで（知ってる限り）無かった、音の速さを可視化するデバイスです。大科学実験で人間がやっていたことをデバイス化した感じですね。単純にマイクとLEDがくっついた基盤で、遠くまで並べると自分の出した音が広がっている様子が見えます。

子供もパチパチ手を叩いて楽しそうでした。学校の先生とかから「授業で使いたい」という声を沢山いただいたので、販売できないか相談中です。使ってみたいというかたは是非ご連絡ください。 

余談ですが、これ夜の公園に置いていると、近くで虫がリンリン鳴るとそこだけ光ってキレイなんです。そういう展示もみてみたいですね。

9. 姿の見えないセミを見つけられるアプリ

こういう音の可視化もしてました。敢えて複数スピーカーで音源推定するのではなく、指向性マイクを使ってスキャンしながら音源推定するという人力音源推定アプリです。

レーザーカッター買った

出社できている頃は会社のレーザーカッターを使っていたのですが、100%在宅になったため家庭用レーザーカッター を買いました。おかげで気軽に家で色々切れるようになり、ちょっとした試作が捗ります。

10. ネタバレおにぎり

例えばこんな「海苔でおにぎりのネタをバラしたい」みたいなちょっとしたアイディアをすぐに試作できるんですね。いつかプリンターのように一家に一台レーザーカッターと3Dプリンターがある時代が来るといいですね。ちなみに何故か海外でも話題になりました。おにぎり好きなんですかね。

11. 壁掛け夜景

現物みないと良さが全く伝わらない、「壁掛けできる夜景」です。レーザーカッターで黒い紙に目に見えないぐらいの小さい穴を開けて、透過した光で浮遊感のある夜の地球が表現できます。沢山人に見せたいのに、コロナのせいで家族しか見せられてない・・

12. 勝手にレゴが分類される箱

これマジでLEGO様に商品化してほしい、「小さいパーツが勝手に分類される箱」です。ダイソー様、期待してます。

その他

昔指導員に『「その他」の項目を作るぐらいなら分類しようとするな』と怒られた記憶を思い出しながら、その他の作ったものです。

13. レシピの「コスパ」をデータから定量化する

ちょうど夏ごろコロッケやポテサラの手間が話題になってましたね。レシピサイトからレシピをクローリングして、料理ごとの「手間」を定量化してみました。

この分析をしてから、僕が豚の生姜焼きを作る回数が少し増えた気がします。 

まとめ

例年通り、色んなアイディアつまみ食いしながら試作ができると満足してリリースまで行ききらない年でした。なんなら去年話題にしてもらったみんなの忘れたニュースBotはサーバーを死なせたまま放置してしまったり。。

普段はここで「来年こそは全部ちゃんとリリースする」とか宣言する場所なんですが、それもちょっと違うような気もしてきました。まとまらないので終わります。

売り物に一度も手を触れずに作品販売するためのgraphic+STORES倉庫連携ガイド

思いつきで作った作品がバズったので数千冊販売したいが、家を在庫だらけにしたり梱包作業したりしたくない人（＝私）のための備忘録です。

f:id:kenkawakenkenke:20201225170832j:plain

なぜ自宅で配送作業をしたくないかというと、単純に自分の品質管理能力に自信がないからです。

  • 絶対家に在庫置いてたらカレーの匂いついたり子供が落書きするよね。
  • 絶対梱包するときに髪の毛とか入るしOPP袋を指紋だらけにしちゃうよね。
  • 絶対配達ラベル貼り間違えるよね。
  • 絶対注文の状態がよく分からなくなって送り忘れたりするよね。

色々調べて印刷会社（e.g graphic）と倉庫サービスつきネットショップサービス（e.g STORES）を連携させれば印刷からお客様の手元まで一度も自分の家を経由せずに届けられることがわかりました。特に「一度も自宅を経由しない」部分についての情報がネットに無かったので、実際にやってみて分かったこと（とつまづきポイント）を似た悩みを抱えた方のために共有します。

ちなみに：

  • STORES： 自分でネットショップを作れるサービスです。BOOTH/pixiv Factory等と同じで、どこも大体同じような倉庫サービスがあり、作品を預かって注文・決済・検品・OPP袋への封入・ピッキング・梱包・発送まで全部やってくれます。
  • graphic：ネット印刷サービスです。他に沢山あるネット印刷サービスでも配送の際に「品名」さえちゃんと自由に記載できるなら同じように使えると思います。

作ったもの

ついでに今回販売したものを紹介します。発端は1月に作ったこちらです：

 思いがけなく反響をいただいたので買いたい人を募集したら1万人以上の方が手を上げてくれました。過去の経験上、実際にお金を出してくれる人は事前登録者の5~10%ぐらいなので、1000部ぐらいのカレンダーを販売する方法を調べました。

宣伝ですが、2020年版は無事売り切り、2021年版のカレンダーはこちらで絶賛販売中：

kenkawakenkenke.stores.jp

 

graphic+STORESを連携させる手順

以下の手順を行えば、端から端まで一度も自宅を介さずに（クリックとメール1本だけで）STORESで受けたオーダーに対して倉庫から発送できるようになります。

1. STORESで入庫申請する

STORESで「倉庫>アイテムを預ける」から入庫申請をします。このときに付与される入庫IDと商品IDを大事に取っておきます： EGXYZ-WABCD 商品ID:E

2. graphicで発注する

印刷をgraphic（などの印刷サービス）で発注します。その際：

  • 送り先は「1. 入庫申請」の際に表示されたSTORESの倉庫の住所を指定
  • 品名に先程の入庫ID+商品IDを明記する（めちゃくちゃ大事、一番のつまづきポイントです。これを怠ると、倉庫に着荷した荷物は「宛先不明荷物」となり、入庫されずに放置された上に数万円取られます。一回やらかしました。）graphicを使わない場合は、品名を指定できることを問い合わせで確認したほうがいいです。
  • ¥1500で分納できます。20部ぐらい自宅に送っておくと、何かと便利です。（取材のためSTORESより早く届けないといけなくなった時とか。）

STORESの入庫の案内では標準の入庫ラベルを利用するように書いていますが、入庫IDと商品IDさえ配達のダンボールに記載されていれば入庫できます。

graphicより送られる「受付日確定のお知らせ」に出荷予定日が記載されているので、これを控えましょう。

3. STORESに大量入庫を知らせる

200個以上の入庫をする際はSTORESのカスタマーサポートに連絡する必要があります。といってもメール一本で入庫数や予定日を伝えるだけです。詳しくはFAQを参照してください。

4. （graphicから発送されたら）発送をSTORESに知らせる

印刷が完了し、発送されるのを待ちましょう。カレンダー500部で6日間ぐらいです。発送されるとgraphicから発送のお知らせメールがとどきます。

STORESの入庫管理ページに「発送済み」ボタンがあります。実際に必要なのか分からないんですが、押しときましょう。僕はついでに宅配便の追跡番号をカスタマーサポートに伝えてますが、多分必要ないです。

5. 「入庫が完了しました」メールを待つ

数によりますが、graphicから発送された荷物が倉庫に着荷してから2~5日ぐらいでこういうメールが来ます：

f:id:kenkawakenkenke:20201227121240p:plain

 これで入庫作業は完了です。これ以降はオーダーが来たら「倉庫から発送する」ボタンをクリックするだけでお客様に作品を送れるようになります：

f:id:kenkawakenkenke:20201227121525p:plain

余談ですが、graphicは（おそらく不良品の発生を見越して）発注より1%ほど多く印刷して送ってくれるみたいです。なので（今の所私の経験上）500部印刷したら505部送られてきます。ありがたく頂戴しましょう。

ひっかかりポイント

  • いつまでたっても入庫完了にならない - 経験上、500部で着荷からだいたい2営業日ぐらいで入庫完了になりました。もしそれより大幅に遅れているようだと、不明品として扱われているかもしれません。STORESカスタマーサポートに問い合わせてみると状況を確認してくれます。（一度それで入庫IDの記載漏れのために不明入庫になっていることが判明し、管理手数料を取られました。）
  • 着荷してるはずなのに「着荷待ち」と表示され続ける - 仕様みたいです。入庫完了（=商品を発送可能な状態になるまで）ずっと着荷待ちと表示され続けます。少し不親切ですね。
  • 入庫不良品が出た - 入庫した商品に汚れがついていると、管理画面で「保留アイテム」として表示されます。（不良の詳細の写真などもつけてくれます。親切ですね。）カスタマーサポートにメールで「そのまま入庫してOKです」とか「自宅に返送してください」などの指示を送る必要があります。残念ながら「破棄してください」は受け入れてくれないので、無駄に送料がかかってしまいます。

で、いくらかかるの？

倉庫サービスに実際にかかったコストは以下です（2020年12月現在）：

  • 入庫料 ¥18
  • 保管料 カレンダーだと¥0.2/日なので、平均2週間ぐらい保管されると想定して¥2.8
  • 配送料 ¥370

なので、カレンダー一枚につき¥390ぐらいです。ここに決済手数料も乗ります。クリックポスト（¥198）と比べてたったのプラス¥192で検品・OPP封入・梱包・配送手配までやってくれると考えると、私にとってはかなり格安です。人によってここの感覚は違うかも。

他の方法

本記事で後述するgraphics+STORES以外にも色んな方法を検討しました。簡単に紹介していきます。

自力で全部頑張る

印刷会社（graphic）でカレンダーを1000部印刷し、自宅に配送して、注文をすべて自力で梱包・配送する方法です。梱包材（数円）を除けば配送料（定形外郵便なら¥140ぐらい、クリックポストなら¥198）と自分の時間だけなので、金銭的には一番安くできます。

ただ前述のように1000オーダーを間違えずに（鼻毛とか入れずに）完了させる自信がないし、毎日そのストレスに耐え続ける気がしないので諦めました。また個人的には少し多めにお金を払ってでも、次の作品作りの時間を作りたかったこともあります。

BOOTH倉庫

後述するSTORES倉庫とほぼ同じぐらいの値段感ですが、管理・配送・決済コストを計算したらSTORESのほうが少し安くなったので、今回はSTORESを使いました。YMMV。

あと少し気になったこととして、BOOTHは「倉庫に着荷してから発送できる状態になるまで最低7日間かかる」と利用ガイドに明記していたことです。（STORESでは1週間ぐらいと表記しており、実際は2日程度で終わりました）。急にバズった作品は需要予測が行いにくいため、少なめのロットで作って在庫を継ぎ足ししていくほうが安全です。そのため、印刷から入庫までの時間がなるべく短い方法を選ぶことが大事だと考えました。実際はBOOTHも最低7日といいつつ、もっと早いのかもしれません。経験された方は、共有していただけると助かります。

Amazon Fullfilment

利用料が高かったので、あまり調べませんでした。

まとめ

清潔に大量の作品を梱包・発送する自信がない私のような人間でも、一度も手を触れずに沢山発送することが出来ることが分かりました。私のように「作ってバズったはいいけどリリースが面倒」という作品を大量に抱えている人間としては、この方法を見つけられたことでモノづくり人生が少し変わりました。カレンダー売るとか言う前にこれ知っておきたかった、という情報を書いたつもりなので、同じような状況の方の一助になれば幸いです。ちなみにSTORESのステマっぽくなっちゃいましたが頼まれてもないですし一銭も貰ってません。

河本の実験室の2019年まとめ

今年もたくさん作ったので、特に話題になったものをまとめます。

f:id:kenkawakenkenke:20191229164724p:plain

河本の実験室・2015年のまとめ

河本の実験室・2014年のまとめ

河本の実験室・2013年のまとめ

1月・AR Sensor

スマホで測ったWifi電波強度などのセンサーデータを3次元空間上に可視化することで「ここWifi飛んでんな」が出来るアプリです。去年末にプロトタイプを作り、

今年アプリとしてリリースしました：

play.google.com

いろんな人が家やオフィスで遊んだ動画を撮ってくれたのが地味に嬉しかったです。

Gigazineが紹介してくれたり、Interface誌で記事書いたりしました。

1月・ARで見る

ネットショップなどでよく見る[幅x長さx高さ]の表記を（多分）最短タップ数でAR可視化するアプリです。

ARのアプリにありがちな 「まずは専用アプリを開いて数字を入力しましょう」みたいなUXが嫌いすぎて、最も自然にユーザをARまで連れて行く方法を考えたらこうなりました。めちゃくちゃ便利です。来年はもっとARがスマホの体験の色々なところに融合していくように、頑張りたいです。

ねとらぼやGigazineが紹介してくれました。

3月・寝転がってるだけで子供がマッサージしたくなるTシャツ

昔作ったTシャツを綺麗に作り直してClubTで販売してみました。

ふと思いついたアイディアを、在庫リスク０で販売できるのは本当に素晴らしい時代になったと思います。ネットメディアだけでなく、大体の国内キー局の朝のニュースや海外メディアが紹介してくれました。

5月・みんなの忘れたニュースBot

次から次へと炎上を楽しんでは忘れるネット文化が嫌で、こういうbot(@wasureta_news)を作ってみました： 

半年で4万9000人にフォローされ、また炎上ニュースに「これも一ヶ月後に忘れたニュースbotにツイートされるんだろうな」的なコメントがついているのをたまに見ることがあり、少しだけ人の意識を変えるのに役立ったのかなと思います。

ねとらぼやBuzzFeedが紹介してくれました。

11月・振り返りカメラ

なんで今までなかったんだろう的な家庭版ドラレコを作ってみました。

これが家に来てから毎日のように永久保存版ホームビデオが撮れて夫婦共々ご満悦です。

その他

あまり話題にならなかったけど他にも沢山楽しく作りました。気になったらTwitter見てみてください。

ちなみに本業では・・・

Google Maps上で口コミを要約するやつを作りました。飲食店等を決めるときにとても参考になるタグが表示されることが多いので、色々探してみてください。

まとめ

実はこの年になって初めて、作った物を売るという体験をしました（Tシャツで）。研究を売るとかサービスを売るとか仕事時間を売るとかではなく「物」。個人に直接お金を頂いて物を提供するのは、物凄い（「期待はずれだった」と怒られる）恐怖と充足感を同時に感じられて、ハマりそうです。

来年特にやりたいことは：

  • プログラミング教育- 今年は色々子供と一緒に物作りをしていて、良い教育方法に色々思い悩みました。ブロック式プログラミングがいいのかとか、媒体はロボットがいいのかとか。ちょっと色々実験してみようかと思います。
  • 割愛
  • 売れる形にする- プロトタイプばかり作ってバズって喜ぶだけじゃなく、ちゃんと売れる形にまとめるのは大事だし楽しいな、と今年思えました。来年もっとやります。

「いま撮ってればよかった！」を無くす、さかのぼり屋内カメラを作った

子供と遊んでいると、予測不可能なタイミングで面白い事を言ったり、可愛い顔したり、初めて歩いたりします。そんなとき「カメラ回してればよかった！」と嘆いたことのある親は私だけではないはず。

f:id:kenkawakenkenke:20191106020510p:plain
そこで、事後にGoogle Homeに向かって「OK Google、いまの残しといて」と言うだけで過去に遡って動画を残しておけるカメラを作りました。

 

構成

f:id:kenkawakenkenke:20191106000323p:plain

要素数が多く見えますが、一つ一つの要素は沢山の先人たちに踏み固められた技術です。今回の特徴はその繋ぎ方だけなので、要素の詳細説明は省きます。

動画の常時録画

まずUSBウェブカメラをラズパイにつなげて、常時録画し続けます。

  • ウェブカメラ： 僕はこういう制作には大体Logicool C920を使ってます。安くて画質いいので。
  • ラズパイ：僕が使ったのはRaspberry Pi 3Bですが、もっと新しいのあると思います。

常時録画といっても実は過去30秒だけを1秒ごとに区切って動画（TS）ファイルとして書き出し、古いファイルはどんどん捨てていってます。古いファイルを消していったほうがラズパイの容量が節約できるし、「ずっと撮られてる感」が減らせるので。

実際の録画には、ffmpegを使ってHLSで保存しています。ffmpegの設定は黒魔術感があって、正直あまり理解していません。沢山ググって色々な例を合成していった結果できたのが以下の呪文です：

ffmpeg \                   
-f alsa -thread_queue_size 1024 -i hw:1,0 \            
-f v4l2 -thread_queue_size 256 -s 640x480 -framerate 24 -i /dev/video0 \
-b:v 8000k -c:v h264_omx -bufsize 500k -r 30 -vsync cfr -g 24 \                                               
-c:a aac -b:a 256k -ar 44100 -bufsize 256k \
-flags +cgop+loop+global_header   -bsf:v h264_mp4toannexb \
-f hls -hls_list_size 120 -hls_time 1 -hls_flags delete_segments stream.m3u8

これをラズパイで走らせると、実行ディレクトリ内に「stream.m3u8」というインデックスファイルと「stream*.ts」という動画ファイル群が作られ続けます。

f:id:kenkawakenkenke:20191106003931p:plain

このtsファイル一つ一つが、撮られた1秒毎の動画ファイルです。

Google Homeから呼び出す

Google Homeから発声を受け取って、ラズパイで任意のコードを実行させる方法は、沢山ネットに載っています。「ラズパイ google home」とかでググりましょう。

僕は「OK Google、リビングの動画を残して」というと、ラズパイで実行しているPythonプログラムが通知を受け取れるようにしました。

動画を結合する

Google Homeから通知を受け取ったら、ffmpegを使って出力用の動画ファイルを作ります。

RUN_ID=`date +%Y%m%d_%H%M%S`
OUTPUT=/tmp/output_$RUN_ID.mov
MYLIST=/tmp/$RUN_ID.txt

echo "" > $MYLIST 
for file in `ls -v /var/www/html/livecam/stream*.ts|tail -n $((DURATION+1))|head -n $DURATION`;do                                        
 echo "file $file" >> $MYLIST                  
done                       

ffmpeg -safe 0 -f concat -i /tmp/mylist.txt -acodec copy -vcodec copy -y -f mov $OUTPUT

まず、録画したtsファイルを新しい順に並べ、最新の30個（＝30秒ぶん）のファイル名を書き出したテキストファイルを作ります。

f:id:kenkawakenkenke:20191106011128p:plain

これをffmpegに投げて、結合しつつひとまとめのmovファイルに書き出します。これで、過去30秒を映した動画ファイルができました。

ちなみにmp4に書き出したら何故かGoogle Photosへのアップがうまくいかなかったので、movを使っています。

Google Photosにアップする

Google Photosへのアップにはrcloneを使います。rcloneとは色々なクラウドサービスのファイル操作を担ってくれる便利なツールです。

公式ページがとても親切に書かれているので、設定に迷うことはないと思います。

rclone copy $OUTPUT gphoto:upload -P

先程作った動画ファイルをアップしましょう。（gphotoのところに自分が設定したGoogle Photoのターゲット名を入れる）

やってみた

こんなふうにクロマグロのぬいぐるみで遊んでいるときに、ふと今までの出来事を撮っておきたいと思ったとしましょう。「OK Google、リビングの動画残して」とつぶやきます。

www.youtube.com

一分後ほど待つと、遊んでいるときの動画がGoogle Photosにアップされます。

f:id:kenkawakenkenke:20191106014030p:plain

こんな動画が撮られます：

www.youtube.com

さいごに・・・

  • カメラを持ち歩かずに言葉だけで「撮れる」のは本当に便利です。特に、「撮りたい瞬間にカメラを構えていなくても大丈夫」という安心感のおかげで、子供との遊びに集中できるのが嬉しいです。
  • ただし、たまに音声入力がミスって「申し訳ございません、お役に立てそうにありません」とか言われてしまいます。過去30秒しか撮れないので、これは焦ります。「OK Google、いまのを『長めに』残しといて』と言えば５分ぐらい録画を残すようにすればいいと思います。
  • 僕はカメラの未来は「ずっと録画してAIが良いシーンを選別」だと信じてますが、それができるまでの間はこういうハックでQOLをあげていきましょう。
  • 関係ないですが、上の子が初めて立つ瞬間はたまたまカメラを回していたおかげで撮れました。月イチぐらいでリピート再生する宝物です。こういうツールを使って、もっと宝物が増えたら嬉しいですね。

つまらない安全講習ビデオをディープフェイクで「自分ごと化」する

安全講習のビデオってつまらないですよね。

免許の更新、社内のeラーニング、飛行機の離陸時など、様々な場面で僕らは講習ビデオを見させられます。

いくら役者さんが迫真の演技で危険な場面を演じても、僕みたいに共感力が薄い人間にはどうしても「他人事」に見えてしまって適当に見流してしまいます。本当は大事なのに。

そこで、安全講習ビデオを無理やり「自分ごと化」する方法を考えて試してみました。

事故ってるのが自分と家族だったら流石に見るんじゃない？

役者が演じる事故映像は「もしこれが自分や家族だったら」という変換を一旦行わないと吸収できません。しかし、自分や家族が危険な目にあっている場面を見れば直接脳の「ヤバい」エリアに働きかけられるのではないかと想像します。

そこでディープフェイクを使って、事故る対象者を自分や大事な人に変えてしまえば、急に「自分ごと」として捉えられるんじゃないかと考えました。：

f:id:kenkawakenkenke:20191011004106p:plain

ディープフェイクとは、機械学習を使って映像内の人を別の人に置き換えてしまう技術です。世間ではフェイクニュースやリベンジポルノで悪名高いやつですね。上の画像では、運転者の顔を僕の顔に置き換えています。

映像で見ると、かなり綺麗に（メガネも含めて）置き換えできていることがわかると思います。（ちなみに同乗者全員僕に置き換わってます。）：

 

 

元映像: （警視庁公式チャンネル） 交通事故防止　「命を守るシートベルト」　後部座席着用

元の映像では「知らん人が危ない目にあってる」ぐらいにしか見えなかったシチュエーションが、自分が置き換わることで少しだけドキドキ感が増した実感があります。（僕を知らない人からすると、知らん人が知らん人に置き換わっただけなので全く分からないかも知れませんが。） 

このような、自分や大事な人を出演させた「自分ごと化」映像を新米ドライバーや交通違反者にプレゼントしたら、少し危険の実感が増して、安全運転が望めるのではないでしょうか？

とはいいつつ、あまりに髪型が違うことや、同乗者が知らない人たちであることで、まだ少し違和感が残ります。同乗者をそれぞれ自分の家族に植え替えていけば、かなり現実感が増すんじゃないかと想像しています。あまり子供の年代が合っている映像が見つからなかったので試せませんでした。

 

他にも自転車事故を起こす河本の映像を作ってみたり：

元映像:（JA共済DVD）「危険を予測してみよう！ ～被害事故～」

骨格が違いすぎて、あまり当てはまってない気がします。

 

下水機能が停止したトイレを流して怒られる河本：

 元映像:（国土交通省公式チャンネル）災害時のトイレ、どうする？

 

調子に乗って極秘情報をネットで漏らす河本：

 元映像:（警視庁公式チャンネル）みんなで学ぼう！サイバーセキュリティ　①情報流出防止対策

これはちょっと似てますね。やはりもとの毛髪量が似てるほうが良さそうです。

やりかた

"faceswap"という、顔の抽出、学習、合成、映像の書き出しまで全部やってくれるツールを使いました。ほぼ、工夫の要素はなく、使うだけです：

GitHub - deepfakes/faceswap: Deepfakes Software For All

おわりに

映像を知っている人にすることで「他人事」を「自分ごと」にするという考え方は、色々応用がききそうです。例えば少し違う角度では、歴史写真に適用すると興味深い効果があるのではないかと思います。

教科書やドキュメンタリーなどで見すぎて実感が湧きにくくなった歴史的な写真や映像に自分や家族を出演させることで、「そこにいたのも自分と同じような人間なんだ」という実感を増す効果があるんじゃないかと想像します。モノクロ歴史写真をカラー化すると急に親近感と現実感が増すのと同じだと思います。なんとなく色々面倒くさそうなので、アップするのは自重しますが。

ディープフェイクは悪名が轟いていますが、視点を変えるとこのように（少しだけ）人のため世のためとなるような使い方がまだまだ転がっている気がします。faceswapは驚くほど簡単に使えたので、是非新しい使い方を考えて試してみてください。