We Are JavaScripters! @18thでYosuke FURUKAWAさんの話を聞いてきた

#しがないラジオのgamiです。

We Are JavaScripters!の18thに参加してきました！ wajs.connpass.com

今回初めて、WeJSのステッカーができて最高でした。

ステッカー！！！#wejs pic.twitter.com/IESqPuwUBw

— zuckey@しがないラジオ (@zuckey_17) 2018年4月24日

当日のLTの内容をざっくりまとめたので、ご覧ください！

着席しました！今日は東京駅のリクルートさんオフィス！https://t.co/nNpCveIwQH#WeJS

— gami@しがないラジオ (@jumpei_ikegami) 2018年4月24日

LT1: レガシーなバッチ生成ページをNuxt.jsでSSRするモダンなページにしたい

twitter.com

自己紹介

• Seiji Komatsu
• サーバーサイド開発
• 猫、珈琲、酒
• Vue.js/Nuxt.js周りのフロントエンド頑張りたい

内容

• レガシーシステムの開発運用辛い

課題

• 2009年から稼働しているシステム
• 日次バッチで13万枚のHTMLを生成
• コンテンツ変更が即時反映されない
• Mayaa(Javaの古いテンプレートエンジン)を使っている

要件

• コンテンツ変更の即時反映
• パフォーマンス
• SEO
• モダンな技術
• メンテナンス性
• CI/CD

ただし

• フロントエンドがいない
• デザイナー/コーダーがHTML書く

選定技術

• Vue.js + Nuxt.js

理由

• ReactはJSX辛そう
• Angularと違って、部分的に始められる
• 日本語翻訳ドキュメントの充実
• SSRしたい

経過

• APIがそもそも無いので、作る
• 現在のテンプレートをVue.jsのテンプレートに変換中

レガシーシステムの辛み

• CDNが挟まっていない
• CDNを挟んだときの影響を1つずつ調査する必要

LT2: ブラウザからカメラを呼び出し手書きのサインを読み取って認証するぞ

twitter.com

内容

• コードは出てこない！
• ロゴステッカー作ろうぜ！
• せっかく配るなら、遊びたい！

塚田○場

• 名刺を貰える
• 来るたびにランクが上がる

ステッカーが会員証になったら楽しい！

• 署名！

ストーリー

• ステッカーを配る
• マジックでサイン
• カメラで読み込むとユーザー名がわかる！
• フレンド登録できる！
• 前にあった人が、今日のイベントに参加しているかがわかる！

要素技術

• カメラ呼びだし
  • MediaDevices.getUserMedia
• 画像処理
  • OpenCV(wasm-build)

カメラ

• MediaDevices.getUserMedia
• streamが得られるので、mediaElementに渡す
• canvasにdrawImageすると、好きに加工できる
• ブラウザ対応状況
  • iOS11から対応

OpenCV(wasm-build)

• 画像処理するやつ
• 古くからある
• emscriptenでcompileする
• new Mat()したやつdeleteし忘れるとメモリリークする

レシピ

• 二階調化
  • 形だけにする
• 輪郭検出
  • ロゴ検出
  • 五角形かつ一定以上の面積があるものだけ抽出
• 透視変換
  • 斜めに撮っても大丈夫にする
  • 元のロゴについて最小矩形を作っておく
  • 入力画像についても最小矩形を作る
  • 矩形を合わせるように変形する
• 二階調化(再)
  • 閾値を調整して、サインだけを抽出する

課題

• どうやってマッチングするか？
  • サインを検索する方法を模索中

感想

• 最近はJSの知識でなんでもできるから楽しい！

LT3: １日一つ強くなる戦略としての UCDDD (Udemy Course Development Driven Development)

twitter.com

自己紹介

• UdemyでReact+Reduxのコースを4月に公開
• フリーのフロントエンドエンジニア
• Reactの仕事募集中

UCDDD

• Udemyコースを作ることで圧倒的に成長する
• 教える方が、学べる
• 何度も撮り直しをしていると、内容については完璧になる

やったこと

CodeSandboxに全コードを公開

• npmもinstallできる
• 各章のコードを全てCodeSandboxに追加していく

codesandbox.io

全レクチャーにテキストを用意

• 概念的な部分は、テキストがあった方がわかりやすい
• 講師側も、テキスト化すると勉強になる

まとめ

• 日本語のコースはほとんど無い！
• 申請すれば、誰でも通せる！

better-than-i-was-yesterday.com

LT4: スポンサーLT

forkwell.com

Forkwell 重本様

メッセージ

• 幸せに働くITエンジニアを増やしたい！

LT5: メロンのはなし〜melonJSで始めるゲーム開発入門〜

twitter.com

自己紹介

• 大武松生
• フリーランスエンジニア
• jQueryをReactに組み込むというくらい過去を持つ
• Qiitaで10いいねを超えるのが夢

テーマ

• モダンJSだけじゃなく、melon.jsを試すと気分転換になる！

melonJSとは？

• JavaScript製のゲームエンジン
  • jQueryもJavaもFlashもなし
• 2Dゲームの開発にぴったり！
  • TiledMapEditorと連携して作る
• HTML5でゲームが動く！

作ったものを公開！！

• ポケモンのタイルが公開されていた！

どうやって作ったか説明

• Boilerplateがある！
  • gruntが必要
• Tiled Map Editorでお絵かき
  • マップ
  • キャラ配置
  • 見えない壁
• melonJSのオブジェクトを使い倒す！
• コード書いて素材入れてgrunt serveしたらできる！

所感

• 環境構築が楽！
• デプロイが楽！
• 極めたら過ごそう！

LT6: 「LP完成しました！お問い合わせメールの繋ぎ込みだけお願いします！」なんて二度と言いたくないのでフロントの知識だけでお問い合わせを作った話‬

twitter.com

自己紹介

• Taskey.inc
• peepというアプリ作ってます！

背景

• LP作ってますか？
• デザイン見て
• コーディングして
• レスポンシブ
• SEO
• お問い合わせ
  • メールのためだけにサーバ立てる？
  • php書く？

Google Apps Script

• JavaScriptで書ける
• GmailApp.sendEmail(mail, title, text);

実際に作ってみよう(デモ)

• 新規スクリプト作成
  • doGetで入力値を取得
  • sendEmailに渡す
• アプリケーションを公開
  • エンドポイントができるので、formのactionに設定

課題

• Gmailにしか送れない！
  • 転送設定すればOK！

LT7: reduxはいらないかもしれないし、context APIもあんまり使わなくていいかもしれない

twitter.com

自己紹介

• 株式会社CureApp

目次

• reduxはいらないかもしれない
• context APIもいらないかもしれない
• おまけ1
• おまけ2

reduxはいらないかもしれない

• 作者がMediumで言ってた
• 「トレードオフがあるので、そこを理解して使おうね」
• single state & serializableの恩恵
  • ローカルストレージに永続化し状態を復元
  • エラー時に状態をサーバーに投げておく
• event sourcing風 & serializableの恩恵
  • actionを投げればコラボレーション環境を簡単に作れる
  • undo実装が簡単
  • 過去状態の復元が簡単
  • ツールの作りやすさ
• ステートマシンを用意することの恩恵
  • 再利用性とUI交換のしやすさ
• 普通に使っている

context APIもいらないかもしれない

• 作者が言ってた
• 「バケツリレーの代わりとしてそこかしこで使うものではない」
  • 未解決の問題を解消するためのもの
• 使いどころ
  • 多言語対応くらい？

おまけ1

• 「バケツリレーは、render propsが軽減できそう」と作者が言ってた

おまけ2

• Formik
  • redux-formだるい人向け

LT8: .mjs

twitter.com

自己紹介

• リクルートテクノロジーズ グループマネージャー
• Node.js日本ユーザーグループ代表

Node.js v10リリースされます！

• 明日リリース予定
• Notable Changes
  • for-await-of
  • ESModules
  • fs/promise
  • private/public field

DEMO

fs/promises

• fs.readFileでコールバックが不要に！？

ESModules

• そのまま動かそうとすると、importがサポートされていないので動かない
• node10 --experimental-modules fs.mjs fs.mjs

private/public field

• #を付けた変数はプライベートになり、継承先からは参照できない

class A {
  #B = 1;
}

mjsとは？

• Module !== Script
  • どっちのファイルを呼んでいるかを判定する必要がある
• 長い議論の末、.mjsが必要だとなった
  • 拡張子だけを見れば、判定できる！
  • Simple and Faster

Module

• デフォルトでstrictモード
• top level scope
  • スコープが閉じている
• reserved await

Script

• non strict
• global scope

.jsは使っちゃいけない？

• 否

loader optionを使えば回避できる

• loaderを書く必要がある

--modeというflagを使う？

• 議論中

結論

• ESMを使わないなら、.jsでいい
• v9-10でESMを使うなら、.mjsを使うべき
• v10のESMをヘビーに使ってしまっても、仕様が変わるかも？

ファイル拡張子よもやま話

• 「.jsではなく、.es3や.es4を使おう」という話が出たことがあった
• Web does not have version
  • un-detectable featureについては、困る！
  • Modern JavaScriptでは、機能を判定するのは難しくなってきた！
• Module JavaScript is JavaScript 2.0
• We are JavaScripters! Every JSers would be better to enjoy chaos!

以上！

Tweetが流れてしまうまで、当日の雰囲気は#WeJSのTLから感じられますー twitter.com

Podcastを1年続けた私が薦める『今日からはじめる技術Podcast完全入門』の読み方

今日からはじめる技術Podcast完全入門

#しがないラジオパーソナリティのgamiです.

2018/04/22(日)に、秋葉原UDXで開催された技術書典4に行って来ました！

techbookfest.org

今回は、戦利品の1つである『今日からはじめるPodcast完全入門』の感想を書きます. また、ポッドキャストを1年以上続けてきた僕の立場から、すごく共感した本書の主張について実例をもって補強していきます.

今日からはじめるPodcast完全入門

いつも聞いているPodcast yatteiki.fm のみなさんが発行したPodcastの入門書です. yatteiki.fm

技術書典では、開場即完売してしまったようです.

Podcastパーソナリティ2人でお待ちしております #技術書典 pic.twitter.com/OORFBFSYqs

— itopoid@明日技術書典く10に来て… (@itopoid) 2018年4月22日

僕は急遽用意されたというDLカードで直接購入しました. 本物のitopoidさんとkosugeさんにお会いしてお話できたので良かったです！

これから購入する人は、BOOTHからPDF版をダウンロードできるようです. yatteiki.booth.pm

「あなたもいますぐPodcastを始めて、楽しい毎日を過ごそうよ！」

この本は、終始Podcastを始めるハードルを究極まで下げようとしています.

繰り返し登場するitopoidさんのこの言葉が、それを象徴しています.

「あなたもいますぐPodcastを始めて、楽しい毎日を過ごそうよ！」

かくいう僕も、2017年3月に友人と2人でノリと勢いでPodcastを開始しました.

最初はiPhoneで録音した音源をSoundcloudに上げて、RSSをiTunesに登録しただけのポッドキャストでした.

ある程度続けられる見込みが立ってから、Yetiのマイクを買ったり、ゲストを呼んだり、ドメインを取ってWebサイトを構築したりなどし始めました.

Blue Micro Yeti USB 2.0マイク 15374 【並行輸入品】

最初から色々と整えようとしすぎると、途中で挫折してしまったと思います.

まずは、とにかく楽に始めることを意識することはすごく大事です.

本書では、yatteiki.fmの収録環境の紹介に加えて、Discordで収録自体をbotで自動化する方法など、なるべく収録するハードルを下げる仕組みが紹介されています. Podcastの公開についても、PodcastサイトをつくるためのテンプレートであるYattecastで一晩でPodcastのサイトとiTunesの公開までできるような説明があります.

github.com

僕と友人は、ポッドキャストを始めるに当たって色んなサイトで情報を集めまくって、なんとか形にした感じでした. この本は、1冊読めばどんなエンジニアでもPodcastを1日で始められるような内容になっていて、素敵だと思います.

Podcastは、「続ければ勝ち」

本書のもう一つのメッセージは、継続してエピソードが追加されていくPodcastは強いということです.

実際、「継続」に失敗するPodcastは非常に多いです.

僕が2018年4月現在購読している27個のPodcastのうち、意図せずに更新が止まっている(ように見える)ものを数えたら、11/27個もありました.

Podcastを始める人は、ブログを始める人の数よりも圧倒的に少ないです. そのうちのさらに半数近くが、意図せずPodcastを続けることを断念してしまいます.

この事実が、Podcastは「続ければ勝ち」という本書の主張を裏付けているかと思います.

この本の良いところは、ただの精神論で「とにかく続けよう！」と言い続けるだけでPodcastを継続できるほどには我々は強くないことを前提としている点です. 代わりに、「どうすれば継続できるテーマを設定できるか？」という説明によって、テーマ設定の大事さを強調しています.

僕が友人とパーソナリティをやっている「しがないラジオ」でも、半分無意識に決めたテーマが一部のリスナー層にぶっ刺さって、想像以上にリスナー数が伸びました.

テーマ設定を明確にしたことで、話す内容を決めやすくなり、初期の継続のハードルが下がり、テーマに共感するリスナーが反響をくれるようになり、そこからゲストを呼べるようになり、さらにゲストのフォロワーにリーチして、リスナー数が増えて、モチベーションが続く、というまさに「ポジティブスパイラル」に入ることができました.

適切なテーマを決めることが超大事である点は、僕も賛成です.

この本では、「あなたがやるべきPodcast診断シート」に回答するだけで、どんなテーマのPodcastをやるべきなのかがわかるような仕組みになっています. 客観的に自分のもっている知識や人脈を見つめ直すことで、現実的なテーマ設定ができるようになっています.

実際のPodcast番組から学ぶテーマ設定

最後に、本書の内容からは外れますが、僕が聞いているPodcastの中からいくつかピックアップし、そのテーマについて考察します. どのPodcastも、話題や呼ぶゲストの属性などによって、個性的なテーマをもっているように見えます.

yatteiki.fm

yatteiki.fm

個人開発や個人制作で何かを発信している「やっていき手」を集めたPodcastです. yatteiki.fmを聞いていると、「仕事してる場合じゃねえ！」みたいな気持ちにさせられて、個人として何をやっていくか？ということを考えさせられます.

しがないラジオ

shiganai.org

「SIerのSEからWeb系エンジニアに転職したんだが楽しくて仕方がないラジオ」の略です.

富士通からWeb系エンジニアに転職したパーソナリティの2人が、SIerの闇やWeb界隈のキャリアの話をしています. 最近ではゲストを呼ぶことが多く、その人のこれまでの半生や転職話を聞く中で、「どうすれば楽しく働けるか？」というテーマを追求しています.

「マジで出られるポッドキャスト」として、ゲストをTwitterで一般公募しているのも特徴です.

Rebuild

rebuild.fm

エンジニア界隈の強い人、有名な人、海外で働く人がわいわいTechの話や雑談をするポッドキャストです. すでに5年以上継続的に更新されている長寿番組で、Rebuildを聞いてポッドキャストを始める「Rebuildチルドレン」が後を絶ちません.

かくいう僕もRebuildにハマってPodcastを聞くのが習慣になり、Podcastを始めるに至りました.

soussune

soussune.com

ギークなパーソナリティ2人がキャラの濃いゲストを呼んで、ひたすら濃い話をしているポッドキャストです.

技術の話やゲームの話を本当に楽しそうにされているので、パーソナリティが楽しむことが継続の秘訣だなあという感じがします.

ajitofm

ajito.fm

VOYAGE GROUPのエンジニアが中心となって酒を飲みながら語らう番組です.

VOYAGE内の仕事やエンジニアの評価に関する話題が多く出るので、すごく現場感のある内容になっているのが特徴です.

omoiyari.fm

lean-agile.fm

アジャイル、スクラム周りのプラクティスについて話たり、界隈のゲストを呼んで話すポッドキャストです.

パーソナリティの2人が仕事の中でアジャイルの実践をしているので、実践に根ざした話題が尽きません. アジャイル界隈の有名な人がゲストに出たりします.

Turing Complete FM

Turing Complete FM

スタンフォードに通いつつGoogleで働くruiさんがゲストを呼んで低レイヤなプログラミングの話をするポッドキャストです.

ニッチすぎて話題のほとんどが理解できません(笑)が、低レイヤな知識に強い人たちが早口で議論を展開する「神々の戦い」を聞いているだけで、楽しい気持ちになります.

田舎.fm

komatatsu.github.io

鳥取県からリモートワークで働くこまたつ(k0matatsu)さんが、田舎で暮らすこと、場所に縛られないでエンジニアをすることについてゲストを呼んで話しています. 2018年4月現在、まだ始まったばかりの番組ですが、今までにないテーマ設定で、今後が楽しみです.

まとめ

Podcast界隈にはもっと盛り上がって欲しいと思っているので、みんなPodcastを始めましょう！

そのためにまず『今日からはじめる技術Podcast完全入門』を読んで1話公開してみるのは、お世辞抜きでオススメです. yatteiki.booth.pm

ここまで言っても、色々な事情からPodcastを始めない人がほとんどだと思うので、もしPodcast配信やってみたいな、と思っている人は今すぐ始めるだけで、他の人から一歩抜き出ることができるはずです！

『PWA Beginners 勉強会 #3』の5つのLTでPWA入門

PWAに興味津々なので、『PWA Beginners 勉強会 #3』というイベントに参加しました！

PWAについての勉強会は少ない印象なので、そういった意味では貴重かなと思いました！

https://pwa-for-beginners.connpass.com/event/83181/

当日の様子は以下からご確認ください！

twitter.com

LT1: 「WebでアプリなPWA、実際に本気でプロダクトを作ってみて見つけた悩み処」 ShoheiKoyama

使用技術

• PWA
• Vue.js
• Onsen UI
• Python

WebのUX？AppのUX？

• ユーザーにどうやってPWA化してもらうか？
  • How toを載せてしまう？
    • PWA的な説明をいきなりするのは辛い！
  • 説明しなくてもいい？
• PWA化したあと、どうやってアップデートを促す？
  • キャッシュの更新
• パターン
  • NativeApp -> PWA
  • Web -> PWA
  • いきなりPWA
  • NativeApp+Web -> +PWA

ユーザーに何を届けたいか？

• 普遍的な価値はなにか？
• ユーザーは、AppでもWebでも本質的にはどっちでもいい
  • 結局は、どんな価値が得られるか、どんな体験ができるか
  • Apple v.s. Googleの戦いでもある？

LT2: 「プログラミング愛してま〜す！『PWAを簡単に使える方法！！』」 daisu_yamazaki

自己紹介

• "遅咲きエンジニア 山崎"

今日話すこと

• WebAppManifest
• ServiceWorker

動作環境チェック！

• Can I Useで"Service Workers"を検索！

"Lean Canvas."

• 1週間でモックアップを作成したサービス
  • アイデアを整理するサービス

Chrome開発者ツールでPWAをデバッグする

• Applicationタブ
  • Manifest
  • Sercice Worker
  • Clerar storage

WebAppManifest

• HTML側でmanifestファイルを読み込む

<link rel="manifest" href="/manifest.json">

• できること
  • アイコン表示
  • 制御起動(OFFLINE)
  • 「ホーム画面に追加」
• よくあるトラブル
  • Applicationタブにmanifest.jsonが表示されない！
    • 読み込みエラー？
  • AddToHomescreenが出ない！
    • start_urlが設定されていない？
• その他のプロパティ
  • display
    • standalone
      • ステータスバーは表示
    • fullscreen
      • バーを全て消す
  • orientation
    • 縦か横か
  • theme_color
    • スプラッシュ画面の背景

serviceWorker

• serviceWorkerを登録

window.addEventListener('load', function() {
  if('serviceWorker' in navigator) {
    navigator.serviceWorker.register('/sw.js')
  }
});

• workerScriptとして別世界で実行される
  • DOM操作はできない
• sw.jsの内容
  • キャッシュしたいファイルの指定
    • 絶対にキャッシュしたいものと、できればしたいものを、分けるといいかも
  • キャッシュを使用する場合とそうじゃない場合の処理
    • fetchイベントにハンドラを登録する
• sw.jsの内容は、Google.comも他のサイトもほとんど変わらない
• 以下のリポジトリが、サンプルとしておすすめ

github.com

LT3: 「HNPWAの紹介」 tipo159さん

アジェンダ

• HNPWAとは？
• HNPWAの仕様
• ネットワーク設定
• 注意事項

HNPWAとは？

• PWAで作ったHacker Newsリーダーの実装例を集積するサイト

hnpwa.com

• todoMVCの精神的な後継者

HNPWAの仕様

• 主な仕様
  • 各ビューを実装
  • 各ビューは、シェア用のルーティングを使用している
  • ページあたり30アイテム
  • LighthouseでPWAスコアが90/100
  • API

注意事項

• フレームワークの性能比較には使えない
  • 仕様が緩い
  • サーバー性能に依存する
  • 実装時期が異なる

LT4: 「ServiceWorker on Rails」 ykyk1218さん

話すこと

• SWをRailsで動かす
• webpackとRailsとSW

自己紹介

• basic社でferretを運営
• PWAを実践に投入していくフェーズ

SW用のJSファイルをどこに置くか？

• assets/javascriptに置きたい
• service-worker-railsを使うと、パスを変換してくれる

(ここでChromeがフリーズしたので記録が途絶えている...すいません...)

• 以下のサイトに実際にSWを登録してみた

This is Template

LT5: 「PWAで嫁に怒られなくなった話」 Morixさん

自己紹介

• morix1500
• インフラ勉強会
  • オンライン勉強会
  • Discord上で実施
  • 毎日開催

アジェンダ

• PWAを使ってサービス作ってみた
• PWA

ゴミ出し通知くん

• 各曜日のゴミを選択すると、一覧が観れる
• 毎朝7時に出すゴミを教えてくれる
  • ゴミ出しを忘れて怒られていた

技術

• Vue.js
• SW
  • オフライン対応
  • Push通知
• Firebase CloudFunction
  • HTTPフックができるのが便利
  • cron-job.orgでFunctionを実行
• Firebase Hosting
• Firebase RealtimeDB

知見

• SWとフロントでデータを共有したい場合は、IndexedDBを使わないといけない
• LocalStorageとの違い
  • 非同期
  • オブジェクト指向DB
  • トランザクションが使える

感想

• ネイティブアプリみたいなUIになって感動
• 爆速になるのでストレスレス

リスクを取れる深圳人、リスクを取れない日本人 -電子決済が実現する無人○○-

しがないラジオパーソナリティのgamiです.

最近、「深圳」に興味をもって、本を読んだり旅行に行ったり講演を聞きにいったりしました.

みなさんは、深圳と聞いてどんなイメージをもつでしょうか？ そもそも知らない？大量の工場で安い賃金で粗悪品を大量生産している？中国のシリコンバレー？

深圳は、いま世界で一番注目されている都市の一つです.

今回は、2018年2月9日〜12日に実際に深圳に旅行をしてみて思ったことを中心に、本や講演で得た情報も含めて書いて行きます.

本を読んだ話はこちら. jumpei-ikegami.hatenablog.com

講演のメモはこちら. jumpei-ikegami.hatenablog.com

3行で言うと

• 東京に比べて深圳が著しく発展した要因は、リスクを取れたかどうか！
• 電子決済はすごい！電子決済があることで、あらゆる「無人化」が一気に現実感を増す
• これからの社会は、メイカーがつくる！

深圳は「下請け工場の街」ではない

深圳では、「ROYOLE」と「DJI」のショールームに行きました.

ROYOLEは、フレキシブルなディスプレイやセンサーで有名な企業です. www.royole.com

白を基調としたROYOLEのショールームには、最新の超薄型タッチセンサーを使った製品が並んでいます.

革製品の上にタッチセンサーを貼ったもの. これでゲーム画面をタッチ操作できます.

巻き取り式の、超薄型キーボードです. 普通に欲しい...

車載装置をイメージした、曲面タッチパネル式コンソール.

また、DJIは、ドローン業界における超有名メーカーです. www.dji.com

蜘蛛の巣のような変な建物の中にあります.

中には、小型のドローンから大型のものまで並びます.

ドローンの実演も行われていました. 写真は、記憶が確かなら、人の動きに反応して高さが変わるドローンです.

今回は訪れませんでしたが、WeChatで知られる巨大新興企業Tencentも、深圳にあります.

どの企業も、深圳に製造部門があるだけでなく、本社機能を構えています.

私は、深圳に行くまで「LEDなどの安い電子部品を大量に作っている街」くらいのイメージしかありませんでした. 実際に行ってみると、そのイメージは間違いであることを知りました.

深圳の街では高いビルやマンションが立ち並び、世界に通用する技術や製品をもった企業がビジネスをしています.

今なお、新しいビルがバコンバコン建設されています.

もちろん、深圳の中には別の企業からの受注生産をする小規模な工場もたくさんあります.

しかし、街としては、ただ小さな町工場が大量に密集しただけの場所ではなくなっています.

深圳の強みは、エコシステム

深圳に関して調べていくと、どうやら世界的にもかなり注目されたハードウェア・スタートアップの中心地であるようです.

深圳を中心とするメイカー・ムーブメントに詳しい高須正和さんの本には、こう書いてあります.

深圳は、机の上のプロトタイプと量産の距離が最も近い街だ。スタートアップが、自分たちとともに試行錯誤してくれるパートナー企業を探しやすい街でもある。日本や台湾にはまだスタートアップを相手してくれる製造業が残っているけど、シリコンバレーではそういうパートナーは探せないから、アメリカ人にとっての深圳の存在は、アジアから見るより重い。

(高須 正和『メイカーズのエコシステム　新しいモノづくりがとまらない。』OnDeck Books(NextPublishing) :Kindle の位置No.1639-1642)

もし、あなたが自分でハードウェアを作りたいと思ったとき、何が必要でしょうか？

深圳で一番有名な電気街である「華強北」の大通りには、完成品を売っている店と電子部品を売っている店が、モザイク画のように交ざり合っています.

完成品といっても、ガラクタみたいなものやコピー製品もたくさんあります. そんなインディー感あふれるハードウェアを眺めながら、自分が作りたいものを考えます.

作りたいものができたら、早速電子部品とラズベリー・パイを買って、プロトタイプを作ります. 回路が設計できたら、基盤に半田付けして、いくつか試作品を作ります.

売れる見込みがでて、量産したくなったら、どうするでしょう？

深圳には、製品の仕様を伝えると小ロットからでも安価に製造してくれる工場が山のようにあります. また、そんな山のような工場から部品の調達を手伝ってくれる「デザインハウス」もあります.

深圳の街中を地下鉄がつないでいるので、移動も簡単です.

経済発展した深圳の賃金水準は、すでに安くはないそうです. 深圳という街がものすごい勢いで発展しているのは、「安い賃金で大量生産する」という簡単な話ではありません.

「深圳という街に、ハードウェアの量産に必要なすべてが集まっている」という、エコシステムとしての力なのです.

電子決済で加速する「無人化」

深圳の街で遊んでいると、電子決済が使えるWeChatのアカウントがあれば、ほとんど現金を出すことがありません.

レストラン、自動販売機、タクシー、どこでも電子決済が使えます. 現金で払おうとすると、嫌そうな顔をされることもありました.

また、深圳では自由にレンタルできる自転車が歩道のあちこちにあります. これらも、現金決済は無く、WeChatPayやAlipayなどの電子決済でしか支払えないようになっています.

話題になった「無人コンビニ」にも行ってみましたが、電子決済とRFIDタグでセキュリティを担保したまま完全無人化を実現していました.

こちらがRFIDタグ. 薄い.

さて、僕が先日、五反田の立ち食いうどん屋さん『おにやんま』に並んでいると、ちょうど私の目の前で券売機が壊れてお釣りが出なくなりました. 忙しそうに働く店員さんを呼ぶと、券売機の中を開けて紙幣の詰まりを手で直し始めます. 開けられた大きな券売機の中身を見ると、そのほとんどが、現金を管理するための部品に見えました.

私たちの社会は、「現金を管理する」ということに対して、コストを支払い過ぎています.

例えば、深圳では最近、「無人カラオケボックス」が流行っているようです.

実際に使ってみましたが、電子決済で料金を支払うと、指定した時間だけカラオケ端末を操作できるようになります.

これも、もし現金決済を可能にしようと思うと、現金を扱うための機構を付けるためにもっとカラオケ端末は大きくて高価なものになるでしょう. また、個室でカーテンを閉めることもできるので、現金が盗まれるリスクも非常に高いです.

電子決済しかできないようにしてしまえば、もっと単純な機械で無人カラオケを実現できるし、セキュリティについて考えなくてもよくなります. これは大きなコスト削減になるでしょう.

まず電子決済を強引に進めてしまえば、あらゆるものを無人化できるようになり、無駄な仕事はなくなるのです.

リスクを取れる深圳人、リスクを取れない日本人

深圳に住んでいるのは、なにも優秀な若者ばかりではありません. それなのに、スマホアプリで電子決済をすることが日常化していて、「街としてのITリテラシーの高さ」を強く感じました.

なぜ深圳の街は、こんなに人々のITリテラシーが強いのでしょうか？

深圳の電気街を歩いていると、パクり製品がたくさん売られています. 品質が低い製品であっても、それを売ることに対しては誰も文句を言いません.

(訪問した時期は、ちょうど旧正月で休んでいるお店が多かった)

道に面したスペースには、Appleマークを掲げた、非公式スマホ修理店が辺り一面に並んでいます.

レンタサイクルはどこで乗ってどこで降りてもいいので、歩道が自転車に占拠されてまともに通れないこともたくさんありました. それでも、便利なレンタサイクルは深圳の街の人に愛されているようです.

これらと同じことを日本でやろうとすると、どこからともなく反対の声が上がって中止に追い込まれる気がします.

「観光客も来る電気街で、偽物ばかり売っているのは国の評判を下げるのではないか？」
「自転車がいっぱいの歩道で高齢者が歩けなくなったらどうするんだ？」

もちろん、これらの声を無視していいことにはなりません.

しかしながら、パクリ製品をたくさん作ったことで技術力を付けた深圳の工場の中から、ROYOLEやDJIのような有名ハードウェア・スタートアップは生まれているのも事実です.

好きに乗り回せる自転車が街のどこにでもある生活は、自分の自転車を管理しなくてもいいのですごく便利でしょう.

十分に便利になってしまったいまの生活では、代償を何も払わずにさらに生活が便利になるような、「魔法のようなテクノロジー」はそうありません.

プラスとマイナスを計算して、黒字になればいい. そんな器の大きな合理性の中で、街としてリスクを取れるかがとても大事だと思いました.

電子決済の大敵、電池切れを防ぐための、モバイルバッテリー自販機も、その合理性の1つの結果でしょう.

インターネットが変えた「Make」

ものすごい勢いで発展していく街、深圳. 東京に住む私は、指を咥えて見ていることしかできません.

街には定期的に新しい「無人○○」が登場し、電気街の店頭で売られる玉石混淆の商品が目まぐるしく変わっていく、そんな街が楽しそうで仕方がありません.

そんな深圳のメイカー文化に、「自分を接続」させる方法はないのでしょうか？

ありがたいことに、深圳は世界に開かれています.

もちろん、有名なことに中国国内はグレート・ファイアウォールと呼ばれるインターネット検閲システムの中にあります. とはいえ、「インターネット」無しに深圳や世界のメイカーは活動できません.

エリックはよくプレゼンで、深圳の製造業のスケールを、グーグルマップで「Manufacture」（ 製造業）と検索した結果のスライドで説明する。スライド上に数え切れないほど見える赤い点は全部製造業で、（中略）実際にはとうていカウントできない膨大な数の製造業があると言えるだろう。このような小さい工場の製造力と先進国のアイデアマンがインターネットを介して結びついたのは、メイカームーブメントのエコシステムが生まれた、大きな要因だと思う。

(高須 正和『メイカーズのエコシステム　新しいモノづくりがとまらない。』OnDeck Books(NextPublishing) :Kindle の位置No.1172-1178)

世界のメイカー文化につながるために、必ずしも現地に住む必要はありません. まず、何かを作って、それを発信すればいいのです.

インターネットの登場によって、自分で何か面白いものを作ってみた人は、それを簡単に発信できるようになりました. ピンとこない人は、ニコニコ動画で「ニコニコ技術部」のタグがついた動画を見てみるといいと思います.

www.nicovideo.jp

「スイッチをONにすると自動でOFFにするロボット」や「ねるねるねるねをよく練る機械」や「エクセルでスーパーマリオを作ってみた」など、全く役に立たない愛すべきメイカー達の作品が見つけられます.

「何かを作りたい」と願う人が、作る側であっても、考える側であっても、インターネットを介して出会うことができます.

これからの社会は「メイカー」がつくる

いまの社会は、「SFの世界」にどんどん近づいています.

例えば、少し前までは、機械に「電気消して」と声でお願いする光景も、SFの中にしかありませんでした. いまの私は、毎日Google Homeに話しかけて部屋の照明を消しています.

これからも、「SF的な試みをするメイカー」が社会を変えていくでしょう.

もちろん、すべての「メイカー」の試みがうまくいくわけではありません. 特にインターネットを介してヒトや情報がつながったいま、テクノロジーの発展や複雑さの加速度はかつてないほどに大きくなっています.

そんな複雑なテクノロジーの発展の中で、筋のいい「メイカー」や「プロダクト」を見極めて、投資をしていくことになります.

筋のいい「メイカー」を高い精度で見極められるとしたら、それは「メイカー」によってだけです.

世界有数のVCであるY Combinatorは、Lispハッカーであるポール・グレアムや、世界初の「ワーム」を作ったロバート・T・モリスらが創立しました.

シンガポール首相のリー・シェンロンはケンブリッジ大学で数学とコンピュータ工学を学び、最近でも「数独」を自動で解くプログラムをC++で書いて公開し話題になりました.

同じくシンガポールのヴィヴィアン「スマート国家」推進担当大臣は、元眼科医であり、趣味でロボットや時計の組み立て、無線デバイスやアプリのプログラミングをしているそうです.

何かを作る側だけではなく、それを見極め投資するビジネスや政治の側についても、「メイカー」がリーダーシップを取る時代が来ています.

まとめ

深圳では、東京の街から見ると羨ましいほど、SF的な製品やサービスが社会にインストールされていました. 遅かれ早かれ、いずれは日本を含む世界の多くの国が、似たような方向に進むのだと思います.

「爆発的な技術進歩」の兆候は、すでに深圳の街から見てとることができました. そのときのために、個人としても、社会としても「準備」をする必要がありそうです.

技術進歩に飲まれるのではなく、うまく乗りこなしたい. そのためには、深圳の街が電子決済や無人レンタサイクルを受け入れたように、リスクを取って受け入れて、痛みを伴いながら慣れていくしかありません.

プログラムでもハードウェアでも、面白いと思ったものは自分で作ってみることでより深く理解することができるでしょう. そしてそれをするための作り方や一緒に作る仲間は、この果てしなく広大なインターネットの世界を覗けば、いくらでも見つけることができるのです.

ラズパイでPython書いて6個のフルカラーLEDをランダムに光らせることに成功した！GPIOとのしんみつどが3あがった！ pic.twitter.com/hETl1yl4H4

— gami@しがないラジオ (@jumpei_ikegami) 2018年1月29日

参考

メイカーズのエコシステム　新しいモノづくりがとまらない。 (OnDeck Books（NextPublishing）)

jumpei-ikegami.hatenablog.com

スマートスピーカー勉強会#3まとめ

こんにちは、しがないラジオパーソナリティのgamiです！

本日は、Google Home Miniを買ったのにエンジニア的な活用をできていない現状を変えるために、スマートスピーカーの勉強会に来てみました！ kotodama.connpass.com

会場は、ドワンゴのセミナールームです。 お酒が支給される、ゆるっとした居心地の良い会でした！

着席しました！お酒を飲んでいる人が3割くらい！w
#スマスピ勉強会

— gami@しがないラジオ (@jumpei_ikegami) March 7, 2018

家電とVUI by 藤原祥雄(フジハラヨシオ) さん

自己紹介

• 株式会社コードベリー VUI部
  • コミスケという、漫画の発売日を教えるボイスアプリ
• スマートスピーカーを4つか5つ持っている

「家電とVUI」がテーマの理由

• 一般の人がVUIの便利さを実感しやすいトピック
• 例えば、子供を抱っこしているときにテレビの録画をしたい！

テレビ

利用イメージ

• 電源つけて！
• チャンネル7にして！
• 入力をゲームにして！

Amazon Fire TVで一部実現されている

• Alexa内臓
• Echoと連携
• Amazon Primeなどを再生可能

AndroidTV

• Google Assistantが使用可能なものもある
• NetflixやYouTubeのコンテンツを再生可能
• SonyのAndroidTVは、Alexa Skillも利用可能

LG

• 独自AI(LG ThinQ)で音声認識
• EPG(電子番組ガイド)を使って、実際の番組を操作できるようになるかも！
• ウェイクワード無しで利用できる？

衛星放送

• DISH社は、Alexaでチャンネル選択などができるように
• 独自の音声認識

電子レンジ

利用イメージ

• 3kgの鶏肉を解答して！
• 冷凍チャーハン600gをホカホカにして！

実際

• Alexaが2018年1月に電子レンジ対応スキルを作成可能に
• Whirlpool、Kenmore、Samsungなどが対応予定
  • Whirlpoolが選考
• Alexaファンドが、スマートオープンのJune Ovenに出資
  • 入れた食材を自動認識
  • 調理方法や時間を提案
  • ベーコンがカリカリになりすぎたケースも
  • 16万円....

水回り

利用イメージ

• 水だして
• お風呂沸かして
• トイレ流して

KOHLER Konnect

• KOHLER社が開始したサービス
• 鏡、シャワー、バスタブ、トイレ、蛇口、フットウォーマーなどを音声に対応する予定

家

家ごとAlexa

• Lennar社(住宅メーカー)がAmazonと組んで、Alexa搭載の家を提供？
• ドアベル、ロック、ライト、冷暖房など
• wifi-certificatedを取得
  • wifiが常に使える状態を保証
• Amazonもサポートサービスを提供

まとめ

• 家電の音声対応は続く
  • 冷蔵庫、掃除機、自動車...
• まずは、スマートスピーカーがハブになって、音声操作できるように！
• 直接家電に話しかける時代が来る？！
  • どうやって、家電は自分が話しかけられたことを把握するかは、疑問

音声AIアシスタントをビジネス活用するには？ by 伊東春菜 さん(株式会社 WHITE)

今回のゴール

• 自社サービスでどうやって活用したらいいのか？
• どうやってアプリケーションを作ればいいのか？

WHITEの実績紹介

WHITEとは？

• spiceboxの子会社
• 博報堂グループ
• イノベーションデザインカンパニー
• 2015年設立

WHITEの体験のデザイン事例

• TIFFANYの新しいブランドブックを作った例
  • 手のひらをパタパタすると、絵本が進む
• 損保ジャパン
  • 運転データの解析

VUI領域の活動

• Google Home日本版の発売に合わせてアプリをリリース
• VUIサービスの企画、シナリオ開発
• 音声サービスのグロースハック
• VUI起点のイノベーション早出

ビジネス活用するメリット

2つの分類

• 社内利用
  • 社内システムの機械化
  • 問い合わせの自動対応化
• 社外展開
  • 今回はこちらを対象にする

既存ユーザーに既存サービスを提供

• 簡略化
  • 例: タイマー、ドミノ・ピザ
• ストレス軽減
  • タッチ操作よりストレスが少ない
• +αの価値
  • 例: 英語学習クイズ
• 1:Nのコミュニケーション創出
  • 例: エクササイズ、カラオケ

既存ユーザーに新規サービスを提供

• 生活に入り込んだサービス
  • 例: ジャル子ちゃん
• 「毎日/毎週/毎○」にアプローチ

新規ユーザーに新規サービスを提供

• 家族へ広げる
  • 家族をサービスに巻き込む
  • 例: 英語クイズ

新規ユーザーに既存サービスを提供

• 認知獲得
  • 検索の40%が音声に移行する？
• 先進性のアピール
• ブランド名の浸透
  • アプリ名を声で唱える
• 行為形成
  • 例: ピカチュウトーク
• 理解促進
  • 会話による双方向コミュニケーションで、サービス内容理解の促進
  • 例: 健康飲料ナビ

今できること

• 自社サービスのアカウントと接続可能
• 自社ECとも接続可能
• メールやLINEが送れる
• プッシュ通知を送れる
• Alexa for Business
  • 店舗やオフィス向けに、複数台のEchoを管理

まだできないこと

• 広告配信
• 有料アプリの配信
  • 海外でテスト中

市場状況

よくある質問

• 人数は？
• 利益は？
• 継続利用してくれる？

課題

• スマートスピーカーの所有者は5.7%
• コンテンツの不足
  • AmazonとGoogle合わせて500程度
• まだユーザーにVUIに慣れていない

市場状況

• 今はまだすぐには儲からない
• 長期的な目で見た利益を追求すべき
• どんなアプリであれば効果をあげられるか、今のうちにPOCを実施すべき！

検証項目

• ニーズ
• コンセプト受容性
• 効果
• 技術的実現性

検討のフレームワーク

• 以下を組み合わせて、キラーコンテンツを探す
  • 生活のシーン
  • 企業のアセット
  • 新機能や外部データ

FAQ

どうやってアプリをDLしてもらうの？

• 「アプリ名」を知ってもらえれば、ダウンロードしないで声で呼び出せる！
• ユーザーとの接点の持ち方
  1. 既存メディアや広告で、「アプリ名」の認知を図る
  2. アプリストアのランキングからの流入を目指す
  3. 「暗黙的呼び出し」をAIにレコメンドしてもらう

まとめ

• 自社のアセットを見直して、最適なサービス/インタフェースを効果検証すべき！
• 来るべきときが来たら、最大の効果を上げられるようにする

質疑応答

VUIに向いていないアプリケーションは？

• 入力は得意、出力は不得意
  • 画像と違って、音声は情報を同時に複数出せない
  • 入力だけを音声にし、出力を別のメディアにすることも考えた方がいいかも

VUI活用を目指す顧客がもっとも関心を抱くところは？

• 既存サービスの新規ユーザー獲得について話が来ることも多い
  • 認知拡大、好意形成
• 実際には、まだユーザー数が少ないので、難しい部分もある

アプリの名称は、ドメイン名のように管理されているのか？

• 「呼び出し名」については、同じものは作れない
  • 早い者勝ち
  • あまりにも無茶なものは取れない

VUIアプリのデータはどのくらい取れる？

• プラットフォームから提供されるデータはある
  • 使っているユーザー数など
• 発話の内容については、基本は取れない
  • DashBotというスマートスピーカーアプリ分析サービスを使うと、テキストで発話内容を取得できる

音声広告については、導入されると思うか？

• 広告配信はありうると思う
• ユーザー属性を元にパーソナライズされた広告が配信されると予想している

Google Homeでつくるスマートホーム by 田中みそ さん

自己紹介

• Google HomeでITに目覚めた

自宅のGoogle Homeでできること

• 照明をつける
• 照明のパターンを変える
• PS4でトルネ起動
• PCの起動
• Excel起動
• PCのスリープ
• ハンドスピナーを回す
• 「おやすみ」というと、全ての電源が消える

仕組み

IFTTTまで

• 話しかけた情報は、クラウドに送られる
• その先
  • IFTTT
  • Google Assistantアプリを作る

IFTTTの先

• FirabaseのRealtimeDBに書き込む
• ラズパイ上のNode.jsで監視
• 各家電の操作は、ラズパイから行う

まとめ

• とりあえずIFTTT使うべき
• Firebaseオススメ
  • インターネットからローカルのトンネリングをできる

VUIアプリの苦悩、自動テストをGoogleHomeが解決してくれる？ by @HorseVictory さん

自己紹介

• 馬勝さん
• 上流SI
• Alexa Engineer
• Hololensアプリ作りたい

ARUMON

• 会社でイノベーティブな活動

WebアプリとVUIアプリのテストにおける違い

• Webアプリ
  • テストドライバ
  • Seleniumなどで簡単
• VUIアプリ
  • ローカルのLambda
  • Alexa用のテストドライバがあるが...
  • 結合テストは、超難しい！
    • イントネーション、発話の長さ、発話が正しい

難しいところと、正式なやり方

• スクリプトの発話
  • Amazon Polly
• 端末からの発話内容の取得
• 発話データの保存
• 想定発話との突合チェック
  • Amazon Transcribe

Alexaスキルを使わない理由

• 発話した内容そのものを取れる
• Cloud FunctionsやLambdaで受けられる

構成

• GoogleHomeをAlexaと話させる
• 最終的に、Alexaの反応をGoogle Spreadsheetに格納

今後の課題

• 文書中の「。」のタイミングで、Google HomeのBackendの処理が始まってしまう
• Fulfillmentの応答をAlexaが我慢できないときがある
• STTで取得したテキストの変換相違、空白など入り、テスト結果と期待の完全一致が難しい

宣伝

• 「ベジチャット」というアプリ作りました！
  • 野菜の旬などを教えてくれる

音声アシスタント導入に動く国内事業会社の反応 by 西部 一英 さん

会社紹介

• システム開発会社
• AR/VR、スマホアプリ、ITシステム

顧客アンケート「Amazon Echoをあなたの事業で使ってみたいですか？」

• 使ってみたい56%
  • 「自社製品・サービスの販売拡大」が、最大のニーズ
  • ECや予約との連携に期待されている
• 判断できない34%
  • どんな効果があるかわからない
  • 使い方がわからない

cocorita

• プログラミング不要で独自のAlexa Skillsを作成できるサービスを開発

cocorita.jp

出会いたい人

• スマートスピーカーを使った事業を希望される方
• スマートスピーカー関連の開発ができる方

スマート家電も赤外線家電もスマートスピーカーでまとめて操作 by @tak_jg さん

できること

• 「OK Google 起床7時」と言うだけで、6:30エアコンON、6:45に照明ON、...
• 丁寧なドキュメントを用意！
• スマートリモコンとラズパイでできる！
  • Fire TV stickでも可能

システム構成

• Google Homeに話しかける
• Google Assistantに伝わる
• IFTTTに連携
• Slackにメッセージを送り、ラズパイに連携
• ラズパイのHubotが、メッセージを解釈
  • UNIXコマンドの実行
• スマートリモコンへ連携
• Google Home自体への連携も可能
  • CASTV2プロトコル

hubotを拡張するスクリプトを作った

• 赤外線コードの学習と送信
  • learnとsend
• UNIXコマンドの登録と実行
  • 登録
    • command 名前 UNIXコマンド
  • 実行
    • send lignt:on()
• 開始時刻の指定
  • 指定時刻から-30分などすることも可能
• 実行間隔の指定

「Google Home で遊んでみた」 by 千代田まどか (ちょまど) さん

自己紹介

• Microsoftテクニカルエバンジェリスト
• 入社前は、Xamarin + Azureで開発するデベロッパー
• 2016年に入社
• エンジニア兼マンガ家
• はしれ！コード学園

各社スマートスピーカー

• コルタナさんが搭載されているスマートスピーカーINVOKE
  • 日本未発売
  • harman/kardon社が製造

Google Home買いました！

• 喋らせたい文字列をNode.jsで買いた
• 女性ボイスでしか話してくれない...
  • マッチョな男の人に話してもらいたい！

実装

• VoiceText Web APIでmp3化して、Azureにアップロード
• それをGoogleHomeに話させる

github.com

AIY kit をつかわないでGoogle Assistantを作る by @kouhei_green さん

自己紹介

• スマートスピーカーメディア ライター

kotodama.today

• 激ロックSTAFF/VJ
• 学生LT代表
• CatHub
  • 各NPO・保護団体と連携

スマートスピーカー全然スマートじゃない問題

一般的なスマートホームの構成

• スピーカー6,000円
• ハブ7,000円
• 電球8,000円
• 音声で照明をつけるだけで、2万円以上！

市場にあるAlexa enabled device

• デバイスの中にAlexaが入っているもの
• Amazon.comだと、790件のヒット

例

• Alexa deviceから直接、IFTTTと直接連携
• ヘッドフォンに直接話しかけて選曲
• ロボットに話しかけると、日々の記録を撮影して送ったり、家の監視をしたり
• 鏡が肌の状態をカメラで分析し、足りない化粧品をその場で購入

各社対応状況

Alexa Voice Service

• 日本でも3商品が発売
  • 招待制
• SDKはGitHub上で公開されている
• 審査に通れば、誰でも販売可能
• ラズパイで試せる

Google Assistant SDK

• 家電量販店で対応デバイスを購入可能
• ラズパイ、Linux向けにSDKが公開
• パートナーメーカーのみ販売可能
• リファレンスのみで、ガイドラインはない

Cortana Devices SDK

• 日本ではスピーカーが発売されていない
• 申請しないとSDKが使えない

LINE Clova

• これから出る
  • CIC(Clova Interface Connect)
  • CEK(Clova Extension Kit)
• サードパーティ向けにはまだ提供されていない

まとめ

• 現状、Alexa Voice Serviceが一番取り組みやすい

ラズパイで作ってみた

環境

• ラズパイ
• USBマイク
• スピーカー

Alexa Pi or Pi Home

• 開発者コンソールからデバイス登録
• gitリポジトリをクローン
• インストールスクリプト実行

まとめ

• 思ったより簡単に自作できる
• Alexa enabled deviceは今後熱い！
  • Skillだけじゃなく、ハードウェアを作ってもいいかも！
• スピーカーだけじゃない、いろんな形になりそう

感想

普段の勉強会とは違って、エンジニア以外の人も参加している印象でした！

VUI業界全体を盛り上げていこうという熱気を感じたし、実際に今後音声操作できるデバイスが増えてくると思います。

少しでもそこに乗っかって楽しめるように、自分でもスマートスピーカーをいじっていければと思います！

『深圳IoT界のフロントランナーに学ぶ 「メイカースペースの可能性と、世界最高の分業体制の秘訣」』ログ

しがないラジオパーソナリティのgamiです.

先日、深圳に旅行に行って来ました.

そして、その記憶が鮮明な中、Yahoo!のLODGEで深圳IoT界の人たちの話が聞けるイベントがちょうど開催されるということで、参加して来ました.

peatix.com

そのイベントのログを取ったので、以下にまとめます.

ちなみに、このイベントの主催者である高須さんは、私が深圳に行く前に読んだ『メイカーズのエコシステム 新しいモノづくりがとまらない。』という書籍の著者でもあります.

jumpei-ikegami.hatenablog.com

イントロダクション

登壇者

水田 千惠氏

• ヤフー株式会社 CTO室 技術マーケティング / Developer Relations
• 個人活動としてハッカソンや技術コミュニティに参加
• 自らもメイカーとしてMaker Faire Tokyoに出展するなどしている

自己紹介

• 国内のメイカーイベントで高須さんと交流
• 最近触っているもの
  • ESP8266
  • MESHjp
  • Micro:bit

LODGEの説明

• みんなで「！」を生み出す場所
  • メディアアートの展示
  • ハードウェアプロトタイプの展示
• make部
  • LODGE内に、レーザーカッターやプリンターなどある
  • つくるラボとのコラボなど

第一部：高須氏、山形氏によるセッション「メイカースペース、コミュニティの可能性　〜仕事じゃないものが仕事を生む〜」

登壇者

高須 正和氏

• 日本と世界のMakerムーブメントをつなげることに関心
• 日本のDIYカルチャーを海外に伝える『ニコ技輸出プロジェクト』や『ニコ技深圳観察会』の発起人
• MakerFaire 深圳(中国)、MakerFaire シンガポールなどの運営に携わる。

山形 浩生氏

• 某調査会社で開発コンサルタントとして勤務する傍ら評論活動を行う
• 先鋭的なSFや、前衛文学、経済書や環境問題に関する本の翻訳を多数手がける

何を仕事にするか？何が仕事になるか？(山形氏)

• 今日いるメンバーで、一番、深圳濃度が低い

自己紹介

• ODAのコンサルタント
• 本当にそのインフラ・プロジェクトに日本政府がお金を出していいのか？を判断
• 例
  • ガーナの配電計画
  • スリランカの電源計画
  • 中国ベトナム高速道路
  • ラオスへのバス供与
  • 国債制度の構築
  • 金融市場の活性化
  • 道を作っても、過積載のトラックに痛めつけられるw
  • マイクロファイナンスでお金を貸して、床屋さんなどの商店を作れるように

ODAでチェックすること

• ラオスにバスを50台あげたら？
  • 本当に人の役に立つのか？
  • 整備体制があるのか？
  • 日本にいいことがあるのか？
• 中国は、目立つものが好き
  • スタジアム建設などを支援する
    • 作ったけど使われないものも...

副業: 経済学系/IT科学系翻訳

• 『クルーグマン教授の経済入門』
• レッシグ『CODE』『Free Culture』
• ピケティ『21世紀の資本』

今役立つ技能でも、価値がなくなるかも

• ODA
  • 50年後には、貧乏な国がなくなる！？
• 翻訳
  • 20年後には、AI翻訳で足りる！？

新しい分野の発見開拓は？

• 違う関心の交点に、新しい分野ができる
• フリーソフト・イノベーション
  • プログラミング - 経済
• ODA
  • 都市開発 - バックパッカー
• 深圳
  • 都市 - 経済 - IT - イノベーション

深圳: 人工コバンザメ都市

• 1980sに香港のコバンザメ都市
  • 香港の真似して利用するための都市
• 中国の経済開放で、中国への玄関都市として反映
  • 深圳専用のビザがあった
• 1990s末には、アパレル
• 2000sには、携帯電話部品やLED

イノベーションについての考え方

• 「孤高の天才」モデルは通用しなくなってきた
• 所詮は組み合わせの妙
• 川上と川下とのリンク

シリコンバレー+深圳

• 変な組み合わせ
• くだらないアイデアや思いつきに、お金がつくようになってきた

仕事の未来

• AIが来ると、人間の仕事はなくなる？

AIや機械に対する優位性

• 「人間は高尚な作業だけ」というのは本当か？
• 人間の一番得意なのは、まさにドタ作業
  • 細かい掃除
  • データクレンジング

そのためには？

• 組み合わせを作るのは、機械でもできる
• どの組み合わせが面白いのかは、人間が判断

ノイズからの意味生成

• ジャック・アタリ「人間はそれまで意味のなかったところに意味があることにしてしまう」
  • ジャズ、ロック

カットアップによる自動的な「価値」創造

• ウィリアム・バロウズのカットアップ技法
• 中国のアート
  • 組み合わせが透けてみえるほとんど

人間の役割: おもしろがること？

• 機械によって、無限の組み合わせを自動で作れるようになった
• 無限の組み合わせから「これ！」と選ぶのが人間の「創造性」では？
• ベーシックインカムが実現した未来で、「消費」することが人間の仕事になる？
  • 何をおもしろがれるか？が重要

組み合わせを発見するには

• 組み合わせる材料を持って来る
• 言語習得、プログラミング

大学生なら何をするか？

• 中国はいつまでも続くか？
  • 20-30年くらいは保ちそう
  • 今の中国崩壊論はクズw
• その後は？
  • アフリカ？（エチオピアなど）
  • 中央アジア？
  • 中東？（イラン）

最後は行動力！

• 変な組み合わせを自分でやってみる！
• 英語、中国語、プログラミング言語を、まず全部やる！
• 意外なものが、意外なところでつながる！

ハッカースペースの魔法 つくる つづける つながる(高須氏)

• 自分のやりたいことをやっていると、なんで世界は変わるのか？

言いたいこと

• 20世紀は先に組織があり、組織のために目的を作っていた
• 21世紀は、やりたいことが先にあり、オープンにしていれば、多くの人がそこに集まってくる
  • 初音ミクとか
• ハッカー/メイカーとは、作りたいものを作る人たち
• 彼らが集まってくるためには、オープン性が必要

メイカーたちのお祭り「メイカーフェア」

• メイカーが集まるオープンなお祭り

自己紹介

• メイカーフェア深圳やシンガポールの運営メンバー
• グローバルビジネスデベロップメント
• マレーシアの高性能で安いモータードライバ
  • 新宿のロボットレストランで使われる
  • 日本に紹介する仕事をしている
• 深圳で開発されているフルカラーのPCBA基盤
  • 名刺のような基盤が作れる

なぜこんなことをしているか？

• 小学生の頃、メモ帳に15人の電話番号を書いていた
  • それがコミュニティの全て
• インターネットで変わった
  • よく連絡する人がすごく増えた
    • 日本語で1,200通のメルマガを送っている
  • 年齢、やっていることが違うことが増えた
  • 外国に友達ができて、そこまで安く行ける
• 今のほうが楽しい
  • 他人と自分が違うのは当たり前
  • 得意なことをやった方がみんなのためになる

世界は変わった

• 新しいものが出てくるたびに、世界は変わる
• 「つくる」方法は、今と昔で大きく変わった

変化

• インターネットができて、開発ツールや宣伝が楽になった
• まずお金を集める -> まず面白いものを作ってから、あとでお金を集める
  • 20年前は、Webアプリをつくるとき、とりあえず3,000万円かかっていた

はじめ方

• はじめるのは1人でできる
  • 大きくしていくのは、たくさんの人が必要
    • いろんな専門家がいると、できることが増える

お金を出してくれるのもメイカー

• Y Combinator
  • "Y Combinator"の由来
    • 関数の再帰的定義を実現するための不動点演算子というLISP言語の機能
  • ポール・グレアム
    • 優秀なエンジニアを雇うことがとにかく大事
    • いけてるプログラマーがいけてるものを作ってきたら、とりあえずお金を出す
  • ロバート・T・モリス
  • 「ハッカーは最高」という思想

Makeblock

• メイカーの会社
• 今でも毎月36時間のMakeblock社内ハッカソンをして製品を増やしている
  • コインの仕分けロボ
  • ダンボールを箱にする機械
  • シール貼り機

TEAMOSA

• 台湾でお茶農家を経営している3代目が、アメリカに留学し、シリコンバレーで起業
• 2016年創業、超音波+温度でもっとも美味しくお茶をいれられるシステム
• 茶葉の入ったカプセルと水を入れると、お茶ができる

これからの社会は、メイカーがつくる

• シンガポールでは、メイカーが大臣になっている
• シンガポールは、世界で一番政治家の給料が高い
• Arduinoを自作している
  • 楽しいから
  • 頭の体操
  • いいアイデアでも、やってみないとわからない

メイカーパスポート

• メイカーたちのシールを貼るパスポート
• 「僕らはコミュニティが必要だ」
• 「ハッカースペースは、世界の僕らが愛する全てのものをハックして、互いに成果を共有する」
• 確かに、人生はハックできる

日本のDIYマーケット

• スイッチサイエンスの委託販売実績が、4年間で5倍になってきた
• 日本の同人誌の売り上げ総計の0.1%も言っていない
• 日本の製造業はまずい
• 日本のハードウェアスタートアップはCESで存在感がない
• でも、日本の同人メイカーは、世界で大人気

「おもしろい！」と思えば人間は何歳からでもできる

• 高須さんのTOEIC
  • 2014年: 320点
  • 2015年: 595点

ニコ技深圳観察会 3年間の実績

• 深圳のメイカーフェアをやたら褒めた
• 3年前は、誰も中国なんて興味なかった
• 過去7回の観察会実施
  • なんと、7人が深圳に住んでいる

ミッチ・アウトマンの言葉

• 「あなたの人生で見つかったことの中で、好きなことだけをやろう」
• 「僕らの世界にはあなたが必要なんだ。君が必要なんだ。」

Q&A

深圳に移り住んだ7人の、移住理由は？(高須氏)

• 先に仕事があった人は1人もいない
• 行きたい人の中で、たまたま仕事が見つかった人が移住した
• 住んではいないけど、定期的に深圳に行く人は、15〜20人くらいいる

「深圳は綺麗な場所に変わってきた」という意見について

• 山形: セクシーサイボーグさんは「深圳のメイカーは補助金目当て」と言っている
• 高須: 「見るからに燃えそうなもの」を売るメイカーは減ってきた
• 山形: 毎年、深圳に行くたびに「イケている」ものが変わっている
  • 表通りの「綺麗なもの」の侵食は増えている
• 高須: Maker Faire Tokyoでも「初日に行ったら動いてなくて、2日目に行ったら壊れている」ということが多かった
  • 立ち上げのコストが低かった時代だから？

ダメなハッカースペースの例(高須氏)

• 東京のとあるメイカースペース(銀座)
  • 社員の人が平日9:00-17:00に運営している
• 「人を殺してもお金で済む環境」じゃないと、難しい
  • 普通の感覚だと難しい
  • お金で解決できない問題は、どうしようもない
  • シンガポールでは、やってはいけないことが明確になっている

深圳に住んだ7人は、中国語が上手くなった？(高須氏)

• 仕事無い状態で深圳に移住した人が多い
  • 中国語ができないと、生きていけない

Makeblockの動画に出てきたようなオタクは、日本にはどこにいるか？

• 日本にもいるが、オタクが表に出てこないようにする会社が多い
  • 深圳だと、オタクがモテそう
• 深圳では、「メイカー○○」と付けるとカッコいい！
  • メイカーカフェなど

日本のメイカースペースと世界のそれの違いは？

• ニコ技や深圳のメイカーフェアに出ている日本のメイカーの質は非常に高い
• 東京のメイカースペースは、純粋日本語コミュニティが多い印象
  • タイ、中国の奥の方なども似ている
  • 深圳は、「俺は英語で喋るぜ！」という人が多いのでありがたい

今だからここには行った方がいい！という深圳のスポット

• 高須: 自分が一番好きなものを見た方がいい
  • 深圳の若者が服を作っている場所があって、原宿が好きな人はすごい楽しい
  • 日本で行っている場所の、深圳版に行った方がいい
• 山形: 言葉については、勢いが大事なので、できなくても大丈夫
  • スマホの翻訳も優秀
• 高須: ハッカーは、他人の話を聞く能力がないので、ペッパーに話しかけるのと同じ

深圳のハッカースペースと、量産化(高須氏)

• 街が持っているスキルというのがある
  • 「この街はドワーフしかいない」というのはある
• 深圳の街にいる人は、工場に関する知識がすごい

別の国から来た人は？(高須氏)

• 深圳はプロダクトデザイナーが不足している
  • どんな北欧の人間でも、デザインさせると、北欧のデザインになる -マレーシアのクリエイティブ系の国際カンファレンスに行った
  • 国際カンファレンスなのに、華人ばかり...
  • 特にカナダ

第二部：藤岡氏、高口氏によるセッション「深圳のエコシステムでサバイバルするためには　-前金必須、性悪説の深圳でなぜ世界最高の分業体制ができているのか-」

登壇者

藤岡 淳一氏

• 株式会社ジェネシスホールデイング代表取締役社長
• 創世訊聯科技(深セン)有限公司董事總經理
• KDDI∞Labo社外アドバイザー

高口 康太氏

• ジャーナリスト、翻訳家
• 二度の中国留学を経て、中国専門のジャーナリストに

深圳でのハードウェアスタートアップ製造におけるサプライチェーンエコシステム活用術(藤岡氏)

自己紹介

• 中国でJENESISを起業
• 「中国の工場の会社」
• KDDIのベンチャープログラムのアドバイザー

JENESISについて

• 80人くらいの小さな工場
• 日本向けの仕事
• 毎日違うものを作っている
• 1,000〜1,500台/日の生産能力
• 日本拠点もある

主な製造実績

• 250品目以上
• 例
  • 日本のタクシーのモニタ
  • イオンのスマホ
  • VR
  • コミュニケーションロボット
• 日本のタブレット型端末シェア
  • 1.0%(10位)

ニコ技深圳観察会

• JENESISの工場の見学が含まれている
• 今では、観察会以外でも視察が来る

深圳の世界一を誇るハードウェアサプライチェーンのエコシステム

• 部品から輸送まで、全てが深圳の近くに集まっている
• 1990s: 労働集約型のOEM生産工場が主流
  • 日本、韓国、台湾系の資本が多い
  • 大ロット少品種生産
• 2000s: 大ロット多品種生産へ
  • 台湾系EMSが深圳を牛耳る
  • 中小の現地部品メーカーが大量発生
• 2010s: 人件費、物価の高騰
  • 言葉の問題がある日本、韓国系はタイ、ベトナムへ
  • 現地部品メーカーの激しい淘汰
  • 小ロット多品種に対応開始
  • 現地ODMがさらに活発化

国内スクラッチ開発vs深圳エコシステム活用

• Android OS WiFi BLE HDMIの例
• 国内: 7ヶ月で量産、製品単価10,000円
• 深圳: 3ヶ月で量産、製品単価5,000円
• 深圳を使うデメリット
  • 取引の信用度、製品の信頼性、納期の確度が低い

プロトタイプの量産化

• 最近のクラウドファンディングでは、質の高いプロトタイプが要求されるようになった
• 深圳のエコシステムを使うと、プロトタイプからの量産化が非常に容易になった

深圳におけるサプライチェーンの欠点

電子材料

• 中華部品以外を買おうとすると高い
• 中華部品はバラつきが大変酷い
• 数回の返品で逆ギレされる
  • それを見込んで、余分に買うしかない

金型・機構材料

• 金型の流出リスクについて、性悪説で臨む必要がある
  • クラウドファンディングで盛り上がったものが、深圳でパクられて売られたり
• 白系の塗装は埃が混じりやすい
  • 黒系の塗装が多い

中国企業と取引をする注意点

1. 全てを性悪説で考えないとならない
2. 現金の着金が全て
   • 契約書も発注書も成り立たない
   • 一度支払ったお金は、モノができなくても帰ってこない
3. 極度に要求を押し付けない
4. 決して偉そうにしない
   • 中国人は、メンツで飯が食える人種
   • いかに儲かる話でも、メンツを潰されたらやらない

深圳で生活や就職をすると？

• 平均年齢が20代後半〜30代前半
• ブルーカラーとホワイトカラーが明確
• ブルーカラーは、基本給が2,130元(約3.5万円)
• ホワイトカラーは、基本給が4,000〜40,000元(10倍の差がつくことも普通)
• 10,000元クラスの社員は、ほぼ英文の読み書きができる
• マンションは、100平米で2億円くらい
• 出稼ぎが多く、地元出身の人がほとんどいない
• 外国人の就労ビザは、なかなか取れない
• 給料の半分を親兄弟に仕送りしている人が多い
• 上司の指示は、できなくても取りあえず断らない
  • 生活のために働いているから
• 将来はマンションや車を購入するのが夢
  • 合理的ではないのに...

深圳のシステムでサバイバルするためには(高口氏)

• ニューズウィークで関連する特集を書いたので呼ばれた
• 藤岡氏との対談形式

深圳の分業体制とは？

• 丸川知雄「垂直統合の日本、垂直分裂の中国」
  • 同じ企業系列だけで、サプライチェーンを担おうとはしない
• 垂直分裂のメリット
  • 常に競争が働き、コストダウンが進む
  • 「蛇頭モデル」
    • 不法移民を連れて行く行程の中で、ルート別に細かく分業されている
• 統合と分裂の使い分け
  • シャオミは、ブラッグシップ機だけ自社開発、廉価版はIDHに設計を委託
  • ファミコンの偽物を作っていたOPPOが、世界4位のスマホメーカーになっている
• モジュール化という技術トレンドと、中国社会の分業システムがマッチしたという現状
  • 今後の技術トレンドによっては、分業体制も揺らぐかも？
  • 例えば、スマホの5Gにそのまま対応できるのか？

今後、深圳のエコシステムは5Gに対応できるのか？

• 3Gのときのファーウェイ、4Gのときのクアルコムみたいな存在が出てくるはず

ソニーは中国でうまくやっている？

• ソニーのシーモスセンサーは、チップ単体では買えないようにブラックボックス化している
• 深圳のモンスターのような人たちに、バレないように慎重なメーカーが多い

いま、深圳で作るのに適したものとは？

• 深圳で作るには、深圳で材料や部品が調達できないと意味がない
  • すでに、組み立て賃料が安い場所ではなくなっている
  • 人件費ではなく、サプライチェーンによって強みを出すしかない
• 深圳のサプライチェーンは、一番数が出るところに最適化されている
  • フィルムカメラの部品はない
  • 品質も、アフリカなどを基準にしている
• 深圳で作るべきじゃないもの
  • 口に入るもの
  • 軽量薄型のバッテリーで、容量がたくさんあるもの
    • 作れる業者が少ないので、品質をあげにくい
• 日系スタートアップが依頼しているものは、複雑ではない？
  • ハードウェアとしての仕事が少ないものであれば、問題ない

深圳で出てきているIoT製品で、日本に来ていないものは？

• 車載製品は、中国の方がバリエーションが多い
  • 取り付けの問題があり、日本では大手メーカーが売っているケースがほとんど

中国人との付き合い方

• 中国人相手に値切ると、その分、品質が落ちる
  • 「損して得とれ」ができない
• 中国人は、見知らぬ人を信用する
  • 毎回の取引で黒字を出せばいい

中国人の変化

• 素直でマナーのいい若者が増えてきた
  • 特に、個人で旅行に来ている人たち
• 仏(ほとけ)系ゲーム「旅ガエル」のブーム

どのように中国で生きてきたか？(藤岡氏)

• 「名前も変えて、日本語も話さず、日本人とも会わない」という時代もあった
• 最近は、日本人的な部分を捨てないメリットも感じてきた
  • 金払いが良くなったり

憧れの起業家は？(藤岡氏)

• テリー・ゴウしかいない
• Mっ気があるところが好き
  • 自分ができないことでも背伸びしてやると、できることが増える

会場からの質問

値切りのバランス

• 部品が共通化されている時点で、完成品は誰が作ってもだいたい同じ
• 会社に行くと、なぜ高いか、なぜ安いかがわかる
• 誰も真似しなくなったら、そのカテゴリは終わり
  • まだ競争の中で安くなる余地があれば、作っても儲かる
• ふっかける企業はやっていけない世界になってきた
• 逆に、初回で行くときは中国語を話せないフリをする
  • 中国語でしている内緒話が聞けて、内情がわかる

DJIが情報を出してくれないが、情報を求められるが、何故か？

• DJIは、情報を全て吸収しようとしている

前任者から後任者への引き継ぎがなされていない

• 深圳では、「わざと引き継ぎをしない」というケースが多い
• 同業者が近くに集まっていると、転職も多い
• 前任者がいなくなったら、ビジネスが終わるケースもある
  • 逆に、その人が移った先の会社と仕事をするのはスムーズ

深圳と日本企業

• 世界のハードウェア産業の中心地の1つは、間違いなく深圳
• 一方、深圳の駐在員や支社は減っている
  • 「深圳駐在の深圳知らず」
  • 日系企業の多くは、深圳を下に見ている
• 深圳で勉強会をしても、レベルの低い日本人が非常に多い(高須氏)

ノウハウは、どういう形で、どのように溜まっているか？

• 多産多死でも、深圳の製品の品質が上がっているということはない
• 小ロット多品種に最適化されているので、少品種よりはノウハウは溜まっていない
• IDHの設計会社の人は、「年に200品種作って、ノウハウは凄まじくたまった」と言っていた(高口氏)
• 言語化できたら、ノウハウではない(高須氏)
  • 大学の漫画サークルは、4年で人が入れ替わるが、毎年コミケに出している人達にはノウハウが溜まるはず
• 中国人のメンツのロジックが、いまは一番知りたい(藤岡氏)
  • 優秀なエンジニアを引き抜いたことを黙っていたら、バレたときに殴られた

まとめ

普段、Web系の勉強会とかでは絶対に聞けないような話が聞けたのはすごくよかったです.

特に、「組み合わせ」で新しい価値をつくることと、まずつくってみることが、やはり新しい「面白さ」を生み出すために必須であると感じました.

主催の高須さんは、日本と世界のメイカーコミュニティを「組み合わせる」ことの実践で、新しいつながりや価値を生み出している印象です.

深圳のものづくりも、とにかく今あるものをパクって再発明して、売ってみて、実際に売れた製品が残っていく世界です.

今後も、何かを組み合わせるアイデアを思いついたら、とにかく実現していきます. いまは、Webフロントエンド開発とハードウェア開発の組み合わせで何かできたら面白いかなあと漠然と考えています．

なお、当日の様子はこちらのハッシュタグで感じられると思います！

twitter.com

「プロになるためのWeb技術入門」を読んだ

しがないラジオパーソナリティのgamiです.

仕事の関係でCookieの仕様を調べている中で、オーソドックスなCookieの使い方についてそもそもちゃんと学んだことがないなぁと思い、Webアプリケーションの入門書を書って読みました.

「プロになるためのWeb技術入門」 ――なぜ、あなたはWebシステムを開発できないのか

誰がこの本を読むべきか？

結論を言うと、現代を生きるほとんどのWeb開発者はこの本を読まなくていいです.

10年近く前に書かれた本で、古いJavaのエコシステムを前提にしているからです.

歴史を学びたい人か、レガシーなJavaアプリケーションをメンテしている人には、もしかしたら価値があるかもしれません.

具体的には、以下に当てはまる人は、暇だったら読んでもいいかもです.

• CGI誕生からWebアプリケーションフレームワークが流行るまでの、Webアプリケーションの歴史をさらっと知りたい
• Javaのエコシステムの中で生きていて、JSP/サーブレットのWebアプリケーションを作ってみたい

SIerの新卒とかは、読むと業務で役に立つ可能性があります. ちなみに私は前職でCOBOLとJavaアプレットを使っていたので、この本の内容にすら追いついていませんでした. 悲しい.

3行で言うと？

• 動的なWebコンテンツの需要が高まり、CGI、Javaアプレットを経て、サーブレット+JSPを使ったWebアプリケーション開発が主流になった
• 宅配ピザ注文サイトの実装を通じて、「一般的な」Webアプリケーションの仕組みを知る
• MVCなどのアーキテクチャやそれを実装するフレームワークを使うことで、「関心の分離」ができる

新たに知れたこと

この本を読んで、新たに知ることができたことも、少ないながらありました. なお、サーブレットやJSPの知識は、前職の研修でやったので知っていました.

CGIとは何か？

Rebuild.fmなどを聞いていると、昔話の中でCGIという単語が出てきて、「古き良きインターネットのアクセスカウンターなどを作るのに使われていた技術」くらいの理解でした.

この本によると、CGI(Gommon Gateway Interface)とは、動的なWebサイトを実現する初期の試みで、「Webサーバとプログラムの間でリクエストとレスポンスをやりとりするための規約」であると書かれています.

「APIがHTMLを返します」とか言われると、現代的な感覚では「やばいな」という感じですが、CGIはHTMLを返すケースが圧倒的に多いらしく、「やばいな」という感じです. 現在のフロントエンドのMVVMの考え方などとは全く相容れないですが、JavaScriptの仕様が不安定だった時代だからこそ求められた技術なのでしょう.

Common Gateway Interface - Wikipedia

HTTP通信の詳しい中身

HTTPのリクエスト/レスポンスのヘッダについてざっくり解説があるので、例えば普段あまり意識しないステータス・コードやポート番号などに思いを馳せることができました.

「一般的な」Webアプリケーションは状態をどのように記憶するのか？

FTPと違って、HTTPがステートレスなプロトコルであり、「Webアプリケーション」の実現のためにはどこかに状態(特に、アクセス元ユーザーのID)をCookieなどに保持する必要がある、という説明は納得感がありました.

Cookieの歴史と限界

特に、ステートレスなHTTPを補うためのCookieについて、簡単な歴史と限界を知ることができたのはよかったです.

あるドメインのサーバーは、レスポンス先のブラウザのCookie領域の中に、自ドメイン専用の領域を確保することができます. そしてそのブラウザからのリクエスト全てに、その領域のCookieに保存した文字列が自動で付加されます.

これによって、バラバラでステートレスなHTTPリクエストの中で、同一ブラウザからのアクセスを特定することができるわけです.

さて、この本自体には書いていませんが、社内勉強会で発表するために、Cookieについて少し詳しく調べたので、その内容を書きます.

ブラウザに保存されたCookieは、ブラウザのデベロッパーツールから確認することができます. しかし、その実体はどこに保存されているのでしょうか？

Chrome for Mac (version: 62.0.3202.94)の場合、以下のファイルに格納されています.

/Library/Application Support/Google/Chrome/Default/Cookies

実はこのファイルは、sqlite3のDBになっていて、SQLをかけることができます.

$ cd ~/Library/Application\ Support/Google/Chrome/Default
$ sqlite3 Cookies
$ sqlite> .schema cookies
$ sqlite> select host_key, name from cookies;

実際に確認してみると、ドメイン(正確には、サーバーを特定するキー)毎にkey-valueが保存されていることがわかります.

ブラウザは、レスポンス先のサーバー毎に該当のcookieを検索し、その結果をHTTPリクエスト・ヘッダに入れて送るわけです.

まとめ

10年近く前の本ということで、使われている技術は現在のモダンなそれとは乖離していました. しかし、ステートをどこに持たせるか？、関心をどう分離するか？など、基本的な課題意識については、あまり変わっていないという印象でした.

昔の本を読むにあたっては、どの部分が普遍的で、どの部分が周縁的で変化するのか、意識しながら読むべきだと感じます.