がみぶろ

#がみぶろ

@jumpei_ikegami

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

勉強会

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

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

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

家電と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などが対応予定
  • Alexaファンドが、スマートオープンのJune Ovenに出資
    • 入れた食材を自動認識
    • 調理方法や時間を提案
    • ベーコンがカリカリになりすぎたケースも
    • 16万円....

水回り

利用イメージ

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

KOHLER Konnect

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

家

家ごとAlexa

まとめ

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

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

今回のゴール

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

WHITEの実績紹介

WHITEとは？

WHITEの体験のデザイン事例

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

VUI領域の活動

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

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

2つの分類

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

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

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

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

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

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

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

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

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

今できること

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

まだできないこと

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

市場状況

よくある質問

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

課題

市場状況

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

検証項目

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

検討のフレームワーク

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

FAQ

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

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

まとめ

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

質疑応答

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

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

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

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

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

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

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

  • プラットフォームから提供されるデータはある
    • 使っているユーザー数など
  • 発話の内容については、基本は取れない

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

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

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

自己紹介

自宅の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用のテストドライバがあるが...
    • 結合テストは、超難しい！
      • イントネーション、発話の長さ、発話が正しい

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

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

Alexaスキルを使わない理由

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

構成

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

今後の課題

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

宣伝

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

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

会社紹介

顧客アンケート「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自体への連携も可能

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

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

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

自己紹介

各社スマートスピーカー

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 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

まとめ

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

感想

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

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

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

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

勉強会

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

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

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

peatix.com

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

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

jumpei-ikegami.hatenablog.com

イントロダクション

登壇者

水田 千惠氏

自己紹介

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

LODGEの説明

  • みんなで「！」を生み出す場所
  • make部
    • LODGE内に、レーザーカッターやプリンターなどある
    • つくるラボとのコラボなど

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

登壇者

高須 正和氏

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

山形 浩生氏

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

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

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

自己紹介

ODAでチェックすること

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

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

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

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

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

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

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

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

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

シリコンバレー+深圳

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

仕事の未来

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

AIや機械に対する優位性

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

そのためには？

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

ノイズからの意味生成

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

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

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

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

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

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

大学生なら何をするか？

  • 中国はいつまでも続くか？
    • 20-30年くらいは保ちそう
    • 今の中国崩壊論はクズw
  • その後は？

最後は行動力！

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

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

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

言いたいこと

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

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

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

自己紹介

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

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

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

世界は変わった

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

変化

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

はじめ方

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

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

Makeblock

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

TEAMOSA

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

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

メイカーパスポート

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

日本の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の動画に出てきたようなオタクは、日本にはどこにいるか？

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

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

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

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

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

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

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

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

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

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

登壇者

藤岡 淳一氏

高口 康太氏

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

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

自己紹介

  • 中国で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技術入門」を読んだ

Book

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

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

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

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

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

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

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

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

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

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

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

3行で言うと？

新たに知れたこと

この本を読んで、新たに知ることができたことも、少ないながらありました. なお、サーブレットや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年近く前の本ということで、使われている技術は現在のモダンなそれとは乖離していました. しかし、ステートをどこに持たせるか？、関心をどう分離するか？など、基本的な課題意識については、あまり変わっていないという印象でした.

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

We Are JavaScripters!@16th まとめ

勉強会 お仕事/キャリア

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

さて、2/22(木)に【We Are JavaScripters!@16th】に参加したので、その内容についてまとめました！ 公開されていない資料については、見つけ次第追加していきます。

イベント自体の詳細は、こちら！

wajs.connpass.com

スポンサーLT(moffers)

moffers.jp

サービス紹介

  • 年収確約型スカウトサービス
  • 中途採用向け
  • moffersに登録してください！

LT1: Riot.jsの今とこれから @kuwahara_ngv5

資料

speakerdeck.com

自己紹介

  • ゆめみ
  • Node.js
  • Riot.jsのコミッター

コミュニティ

  • Ionicスタッフ
  • DISTスタッフ
  • MDN翻訳

Riotとは？

  • シンプルでエレガントなコンポーネントベースのUIライブラリ
  • Reactをベースに、シンプルにしたもの

特徴

  • カスタムタグで実装
    • タグの中に、HTML/JS/CSSを書いたものを、マウント
  • シンプルで軽量

現在

  • v2.9.0
  • GitHub star 12,782
    • Vue.jsは約80,000
  • size: 10.74kb
    • Vue.jsの1/3

事例

  • 日本のサイト
    • exvirte
    • cacoo
  • Made with riotのサイトに掲載あり

パフォーマンス問題

  • 10,000行のリスト要素描画
    • v2.4.1に比べて、v3.7.2は約1/9

エコシステム

  • 色んなものを組み合わせることが可能
  • ジャンル
    • Basics
    • SPA(routing)
    • Others
    • State management
    • Compile
    • Design and animations

v4

  • なくなるもの
    • this.tags
    • riot-observable
    • shourUpdate
  • ":root" -> ":scope"
  • parser/compilerを作り直してパフォーマンス改善
  • 今年の夏頃リリース予定？

質疑応答

Riotを好きになった理由は？

  • Riotは個人開発で簡単に使えるので、惚れた

v2からv3への破壊的な変更は？

  • コアのメソッドが使えなくなった
  • 繰り返し処理の使い方が変わった

LT2: 【ビ】emacs helm likeな WebExtensions を作った話 @kumabook

資料

  • 404

自己紹介

  • Hiroki Kumamoto
  • Spincoaster
    • 音楽系スタートアップ

WebExtensionとは？

  • ブラウザの機能を拡張するもの
  • HTML+JS+CSS
  • クロスブラウザ
    • 元はChromeのExtension
    • extensionAPIが標準仕様になった
    • ブラウザ間の差異はある

できること

自作したWebExtensions

  • Emacs helm on WebExtensions
  • クエリで候補を絞り込んで、アクションを実行
  • 検索履歴を消したりが、マウス無しでできる

元ネタ

  • Vimperator for Firefox
  • 似たようなものはあったが、シンプルに自分で作った

WebExtensionsのアーキテクチャ

  • background script
  • popup
  • content script
  • options ui

アーキテクチャ

  • react, redux, redux-sagaで作った
  • popupもoptions uiもreduxを使った
    • 2つのredux間では、storage apiでstate共有
  • redux-sagaのchannelを仕様

質問

ブラウザ毎に違う記述が必要なケースはある？

  • Chromeだとディスプレイサイズが取れないなど、無い機能はある

LT3: ES2015のProxyを使ってみた(仮) @tipo159

資料

  • 404

なぜProxyについて話すのか

  • WebComponentsを調べていた
  • 「Proxyオブジェクトを使うと、ObjectObservableみたいなことができるよ」

Proxy概要

  • プロパティの検索、代入、列挙、関数起動などについて、独自の動作を定義できる
  • 構文
    • var p = new Proxy(target, handler);
  • 引数
    • target: ターゲットのオブジェクト
    • handler
  • pとtargetは同じ名前でも良い

サポート状況

  • IEは...
  • モダンなブラウザであれば、使える

Vue3のProxy関連情報

  • Vue2では、配列のプロパティへの値の設定や動的なプロパティの追加は、Vue.setで行う必要がある
  • Vue3では、配列のプロパティへの値の設定や動的なプロパティの追加も、Proxyで他のプロパティと同様に扱える

メタプログラミングの例

  • 無限にチェイン可能なAPIを作成
  • meghod missingフックの実装
  • 列挙型からin演算子などを隠蔽
  • Object.observeの実装

LT4: 僕のフロントエンド奮闘記 @Nao-bt

自己紹介

  • 文系出身
  • プログラミング歴5年
  • AngularやReactを触ってきた
  • 今はレガシーな環境をVue.jsでリプレースする仕事

趣旨

コンポーネント志向

  • 画面をUIパーツ毎に分割して作り、組み合わせる
  • 再利用がしやすい
  • 分業やテストがしやすい

やりとり

  • 親→子: props down
    • 親は子を必ず知っている
  • 子→親: event up
    • 子は親を知らなくてもいい

どのくらいの細かさで切るか？

  • Atomic Designとの出会い

Atomic Design

  • Atoms: 原子
  • Moledules: 分子
  • Organisms: 有機体
  • Templates
  • Pages

Atomic Designを使った結果

  • 再利用するのか？という場合もある
  • 回数制限を設けるケースもあるらしい
  • 開発が進むにつれて楽になった
  • toCだと、同じようなコンポーネントがたくさんできそうで辛そう

Vuex

  • Reduxリスペクト
  • アプリの状態をコンポーネントから分離できる
  • バケツリレーしなくていいなんて素敵！

Vuexを使った結果

  • バケツリレーの代わりに、Vuex用の記載が増えていって辛い
  • どんなActionがあるか知らないと成立しないコンポーネントをたくさん作ってしまった
    • 親も子もVuexを知らないといけない
    • 再利用できない
  • PagesコンポーネントにVuexをまとめて、そこから下はバケツリレーすべきだった

まとめ

  • 流行りだからって何も考えずに取り入れるとやばい

LT5: 【ビ】アプリ開発未経験者がReactNativeでProgateアプリをリリースした話 @wyvernMurai

資料

speakerdeck.com

自己紹介

  • 村井謙太
  • Progate CTO

技術

  • Rails
  • Node.js
  • React
  • インフラ

Progateアプリ

  • 教育カテゴリで一瞬1位
  • キーボード部分だけが、オリジナル
  • ReactNativeファンになった！

ReactNative

コード

偉大な点

1. 開発プロセスがWebとほぼ同じ！

  • xcode使わなくていい
  • npmでpackage管理
  • スタイルはCSSで書ける(CSS in JS)
  • reduxなどでstate管理
    • 9割くらいは、reduxを書く時間となる
  • axiosやfetchでAPIリクエスト

2. ビルド速すぎて最高！

  • ライブリロード、ホットリロードが設定不要で使える
  • コードを書いて約3秒で動作確認できる

3. react-devtools最高！

辛い点

1. 日本語の情報が少なすぎる

  • 英語のドキュメントを読み込む必要がある
  • ソースコードを読む必要性が多々ある

2. たまにネイティブコードを書く必要性あり

  • 外部ライブラリのセッティングなど
  • コピペで動かないケースがある
  • Progateリポジトリでは、20行程度

リリースして得られた知見

1. redux使おう

  • 洗練されている
  • 迷ったら使うべき

2. 静的型付けしよう

  • アプリ開発は、状態が多くて複雑になりやすい
  • 関数の入出力が安定していないと、バグを起こしやすい
  • flowかtypescriptを使うべき

3. テストは早めから書こう

  • 複雑なロジックは、テストが無いと詰む
  • jestが入っているので、初期から書くべき

4. パフォーマンスチューニングは必須

  • 以下を使ってチェックすべき
    • ReactNativeの簡易プロファイラ
    • Chromeのperformanceツール
    • xcodeのInstruments
  • デバッグビルドとリリースビルドでは、アプリの動作速度がまるで違う

スポンサーLT(マイクロソフト): JavaScriptでパワポを作ろう@sakkuru

資料

www.slideshare.net

宣伝

自己紹介

JavaScript API for Office

  • Officeドキュメント内のコンテンツを操作できるJS API
  • Word, Excel, PowerPoint...
  • HTML, CSS, JSを使える

アーキテクチャ

アドインの作り方

開発中のアドインの使い方

  • PowerPointから、アドイン > 開発者向けアドイン
  • PowerPointの画面内に、Webアプリケーションを表示できる
    • クリック時のハンドラに、PowerPoint側の操作を記述できる

LT7: 学生に戻った気持ちで例文で理解しよう！JavaScriptに関する用語達！ @fukamiiiiinmin

資料

  • 404

自己紹介

  • taskey株式会社
  • 深見将一
  • peepリリース

背景

  • 新入社員がやって来る！
    • 「◯◯って何ですか？」
  • 文章として説明できる？

説明・例文

jQuery

  • JavaScriptをパワーアップしたもので、JSで書くと長いものが簡単に書ける
  • 全ブラウザで同じように動く

HTML, CSS, JS

  • 研究者が、文字や画像を共有したくてHTML
  • デザインを作りたいときは、CSS
  • ブラウザに動きが必要だとJSが必要
  • JSすごい！

ajax

  • 同期通信と非同期通信の2つがある
    • 画面が白くなるかどうか

React, Angular, Vue

  • 設計図を元に画面を作ってくれる

まとめ

  • 言葉にすると、自分の中で整理されてとてもよい
  • エンジニアとして、「ここを省いたらやばい！」ということもあるけど、理解できるかどうかが大事

LT8: 【ビ】Unit testing for React components @camcam_lemon

資料

  • 404

自己紹介

  • 日本事務器

使っているテストライブラリ

  • mocha
  • power-assert
  • jsdom
  • enzyme
  • testdouble

テストでつまりそうなポイント

refコールバック

  • rnzyme@3.0.0からref情報を読み込むようになった
  • disabledLifeCycleMethodsをtrueにすると、いきなりcomponentDidMoutが実行されないようになる

DOMオブジェクトへのアクセス

  • DOMの情報は、テスト環境では空オブジェクト
  • shallowでテストしたい

引数有りのイベントハンドラ

  • simulate()の第二引数以降にモックオブジェクトを渡すことができる
  • instance()から実行もできる

時間が絡む処理

  • testdouble-timersを使う

グローバルオブジェクトへのアクセス

  • jsdomのuserAgentやlocationは直接書き換えできない
    • setterが無いので、ヘルパーを書いた
  • windowを明示するかどうかで、テストの仕方と難易度が変わる

LT9: モジュールと名前空間について @chikoski

資料

  • 404

script type="module"

  • chromeだとデフォルトで使える
  • webpackのmodule export的なことを、ブラウザでやってくれる
  • script type="nomodule"で、フォールバックできる

変数とは

  • value = 1
    • 代入: 手続き的な概念
    • 束縛: 関数的な概念

束縛

  • データに対して名前を付ける

スコープ

  • 名前の有効範囲
  • JSでもやっとブロックスコープができた

環境(lexical environment)

  • 名前と値の対応表
  • スコープ毎に作られる
  • クロージャーも、環境自体を参照できる

例

  • Global environment
  • Module environment
  • Function environment

名前空間

  • 良い名前思いつかない問題
  • スコープなどとは違う単位で、名前を区切るもの

JSには名前空間がなかった

  • 無名関数の即時実行で頑張っていた

common.js

ES2016 module

  • 1ファイルが、1名前空間
  • exportを付けたものだけが、外部から使える
  • export 値
  • export default: 名前を指定せずに読み込んだ場合

import: 依存するモジュールの読み込み

  • import {add} from "module_a";
    • read only
  • importしたものをexportすることもできる

モジュールのいいところ

  • 「この名前使っていいかな？」を考えなくていい
  • グローバルを汚染しない
  • 外へ露出しない関数やクラスを作れる
  • 他人の作ったものを、自分の好きな名前で呼べる

依存関係のネットワーク(サイクルも解決可能！)

  • 循環依存も解決可能！

テストをどうするか？

  • 露出しない関数はどうテストする？

テストを埋め込む

  • テスト自体も、モジュールに埋め込めるメリット
  • doTest関数を露出

名前を隠すモジュールを別に作る

  • それ用のモジュールを作ってしまう手もある

Scriptsとの違い

  • 強制strictモード
  • 非同期
  • グローバル変数は、windowに明示的に追加する必要がある

創業から4年の「メイカー」が中国スマホ市場トップシェアになる、「メイカーズ」の驚異のスピード感の源泉とは？

Book

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

今度、中国の深圳に旅行に行くことになったので、『メイカーズのエコシステム 新しいモノづくりがとまらない。』という書籍を読みました.

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

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

私はWeb系エンジニアの端くれで、ハードウェア産業で世界的に今なにが起こっているのかは、今まであまり知りませんでした. この本を読んで、かつてソフトウェアで起こったようなイノベーションやオープン化が、ハードウェア分野でもものすごいスピードで発生しているということが、様々な事例とともに理解できました.

もっとも大事なことは、そのイノベーションというのは、学会や論文と仲がいいようなものばかりではなく、「同人的」なお遊びのエコシステムから生まれてきたということです.

『メイカーズのエコシステム』

この本は、「メイカー」と呼ばれる同人的なハードウェア製作者が、なぜ世界規模で増えていて、なぜその中でXiaomiやGoProなどの世界的メーカーが登場したのかを説明する本です.

著者は高須正和さんで、ニコニコ技術部深圳観察会を主催したり、日本と世界のメイカームーブメントをつなげる活動をされている方です.

学術的な本というより、メイカーズの熱狂の現場を見てきた著者やメイカーたちの言葉を集めた、実際的な本でした.

何が書いてあったか？

3行でいうと

  • 「メイカーコミュニティ」、「ハードウェアのオープンソース文化」、「小ロット製造に対応した工場」、「クラウドファンディング」、「アクセラレータ」などの登場によって、同人的なメイカーが世界的メーカーになるためのパスができた
  • 深圳のハードウェア製造エコシステムは驚異的に発展しており、複雑な部品も安価に小ロットから製造できる
  • オバマ政権、深圳政府、シンガポールなど、STEM教育の導入や金銭的補助によって、政府主導でメイカーのエコシステムを構築しようとしているケースが増えてきた

メイカームーブメントとは何か

ソフトウェア産業については、初期投資が少ないこともあって、近年スタートアップが大企業のビジネスを脅かす例が多くあります. 一方、ハードウェア分野では、まだ大企業の方が強い時代が続いていました.

しかしここ最近、アメリカや中国を中心に、創業してから短期間で、歴史あるメーカーと並ぶシェアを獲得するスタートアップが登場するようになりました.

この本では、以下のような企業が例に挙げられています.

  • GoPro
  • Xiaomi
  • DJI

実際、私もXiaomiが買収したHuamiというメーカーが作っている"Xiaomi Huami AMAZFIT Bip"というスマートウォッチを夢の中で使っています. 一度の充電で45日間使えるなど、これまでのスマートウォッチの常識を覆す性能をもっていて、品質もよく、動作も安定しています.

調べてみると、Xiaomiは創業から4年で、中国スマホ市場トップシェアを獲得したらしいです. これは、従来のハードウェア産業から考えると、明らかに異常な事態です.

こうしたハードウェアスタートアップの隆盛は、趣味的なハードウェア愛好家を支援するエコシステムが育ってきたことから、実現しています. この生態系の盛り上がりを指して、「メイカームーブメント」と呼ばれているようです.

個人的には、生産性の低い大企業は新興企業にどんどんと脅かされて人材流出した方が社会的に望ましいと思うので、もっと趣味的なMakeが流行るといいと思います.

なお、メイカームーブメントを象徴するお祭りとして、Maker Faireと呼ばれるイベントが世界中で開催されています.

www.youtube.com

東京でも、毎年メイカーフェア東京が開催されており、2018年は8/4(土)〜8/5(日)の予定です. 私も遊びに行きたいと思います.

メイカームーブメントと深圳

香港と隣接する中国の都市である深圳市は、メイカームーブメントの中心地の1つとして語られることが多いです.

深圳は中国最初の経済特区で、大都市・香港の下請け工場が成熟して、大抵のハードウェアならゼロから作れるくらいの技術を蓄積するようになったそうです.

現在は大量のハードウェア工場、テンセントやファーウェイなどの企業本社、世界最大の電気街「華強北」などを擁しています.

特質すべきは、Seeedという会社が、雑多で複雑な深圳の工場群を、仮想的なWebサービスのように扱えるようにしている点です.

シリコンバレーを含む世界中のメイカーが、Seeedを通じて試作品や小ロットの製品量産を低コストで発注し、スピード感を持ってハードウェアスタートアップとして羽ばたいていきます.

世界のメイカームーブメントを支えるエコシステムの重要な一翼を、深圳が担っているわけです.

メイカームーブメントと政府

メイカームーブメントで興味深いのは、地域的なコミュニティはもちろん、政府によって強く支援されている例が多いことです. この本では、深圳、アメリカ、シンガポールが例に挙げられています.

特にオバマ政権の例が面白く、彼は2014年からなんとホワイトハウスでメイカーフェアを開催しています.

https://makezine.com/2015/05/06/a-practical-roadmap-mayors-maker-challenge-part-2-of-3/

2014年のWhite House Maker Faireでの大統領の挨拶は、以下のサイトから全文日本語で読むことができます.

makezine.jp

とりわけ印象的なのは、以下の一文です.

本日、みなさんをお招きしたのは、今日がD.I.Y.だからです。D.I.Y.は明日のMade in Americaです。みなさんのプロジェクトは、アメリカの製造業に起こりつつある革命の実例です。新しい雇用を生み、今後数十年続く産業を生み出す革命です。

「ハードウェアを作ることが、明日のアメリカを作る」という明確なメッセージを発して、大統領自らメイカームーブメントを支援していることがわかります. その背景には、ハードウェア製造業がその他の産業に比べて多くの雇用を生み出すという事実があります.

また、シンガポールの例では、メイカーへの支援がさらに社会制度や公教育に現れています.

例えば、シンガポールではオートメーションへの投資が盛んで、レストランが新しい自動化レジを入れると、70%までは政府の補助が出るそうです. ルールのトライ&エラーも積極的に行なっており、日本ではまだ実現できなそうな先進的な試みがされています.

  • 全ての車にERPというシステムが搭載され、混雑時に公道を走っていると自動で課金される

www.youtube.com

  • レストランで給仕するドローンのテスト飛行が許可される

www.youtube.com

以前シンガポールに旅行に行ったとき、Uberを使って非常に便利だった記憶があります. ぜひ日本にも、大企業や既得権益の延命に注力するのではなく、未来の日本社会や世界にとっての一番いい選択が何かを議論して欲しいです.

やってみた

せっかくこの本を読んだので、メイカーズムーブメントの裾くらいは掴みたいと思いました.

クラウドファンディングの出資先を探してみた

日本のハードウェアメイカーを、クラウドファンディングで支援してみようと思いました.

ただ、Makuakeなどを見ると、海外のクラウドファンディングサイトで成功した製品を日本に輸入して販売するケースが多く、日本のハードウェアメイカーが直接出資を募っているプロジェクトはかなり少ない印象でした。

また、クラウドファンディングブームはすでに落ち着いているようで、例えば、1/8タチコマで有名なCerevoがやっているハードウェアクラウドファンディングサイト・Cerevo DASHは、2012年前後で時が止まっているようでした...

その中でも一番盛り上がっているのは、やはりCAMPFIREのテクノロジー・ガジェットカテゴリのようです. ちょうどいいプロジェクトがなかったので、インターステラテクノロジズのロケット事業に5,000円投資しました.

camp-fire.jp

そもそも日本は寄付文化がそこまで無いので、クラウドファンディング自体が文化的に合っていないのかもしれません.

ラズパイで電子工作してみた

実際に自分で電子工作をしてみることも試しました. よく言われる話ですが、ラズパイと秋月電子通商があれば、初歩的なことは簡単にできました.

参考にした本は、これです.

やさしくはじめるラズベリー・パイ ~電子工作で簡易ロボット&ガジェットを作ってみよう~

やさしくはじめるラズベリー・パイ ~電子工作で簡易ロボット&ガジェットを作ってみよう~

必要な電子部品が型番指定で書いてあり、それらを使って最低限やれることを実践で学べるので、すごく良い本でした.

そして、治安の悪いライトができました.

会社の宣伝をしたりしました.

今のところ、光の色で進捗がわかるタイマーを作るところまでできました.

WebIOPiというやつを使うとブラウザ経由でラズパイを操作できるらしいので、今後はそれを使ってWebエンジニアならではのプロダクトを自作したいと思っています.

まとめ

  • メイカー・ムーブメントが世界的に加速している
  • 日本のメイカーはどこにいるんだろう？
  • 電子工作楽しい！

「OK, Google. 12面サイコロ3個投げて」Google Homeに何ができるのか？何に使っているか？？

LifeHack

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

Google Home miniを買ったので、何に使っているかを書きます.

開封の儀をしているときに、珍しく地震警報が鳴ったのでそういう機能かと思ったというtweetをしたらしいです.

Google Home感想

Google Home miniを買ってみた感想を3行で言うとこんな感じです.

  • 部屋の隅で小さな声で話しても反応するので、その技術にめっちゃ驚いた
  • まだ音楽再生とアラームくらいしかまともに使ってない
  • 誰が使うかわからない機能がたまにあるし、たぶん日々増えてるのでワクワク感はある

買った理由

2018年は早起きしてランニングするぞ！という目標を立てたのですが、寒すぎてつらいのを何とかしたいという需要がありました.

起きる30分前くらいから自動でエアコンが暖房してくれればいいので、Google Homeを買えばできる気がして買いました.

RM miniとかを買えばできると思いますが、まだ買ってないので朝は寒いままです.

Broadlink Wifi 赤外線 学習 リモコン RM mini3 [並行輸入品]

Broadlink Wifi 赤外線 学習 リモコン RM mini3 [並行輸入品]

使っている機能

当初の目的は達成できていないですが、Google Home miniを使ってやっていることを述べます.

「7時間後に起こして」

『6:03にアラームをセットしました』

普通に目覚まし時計もスマホも持っているので、アラーム設定するだけならそっちでも全く問題ないです. ただ、私は「7時間寝たい」と決めているので、何時に寝始めるかによって、何時に起きたいかが変動します. そんな需要があるときに、声だけで「7時間後」などの相対時間で目覚ましをセットできるのは、地味に便利です.

「ポルカドットスティングレイかけて」

『プレイミュージックでポルカドットスティングレイを再生します』

ふと思いついて「○○かけて」とか言うと、ちゃんと流してくれます.

なお、自由に音楽を聞くには、Google Play Musicに980円のGoogle税を払う必要があります.

また、一部のアーティストは曲が無いので、見つからなかったりオルゴールアレンジがかかって、悲しい気持ちになったりします.

まだリピート再生ができないし、指定したアーティストの曲が無くなったら別の人の似たような曲が勝手にかかるので、「色んな曲を自由にかけるから、いい曲と出会ってね」という圧力を感じます.

でも、プレイリスト管理などをせずに、そのときの気分で気軽に再生できる体験は素晴らしいです. よく聞くのは、「ポルカドットスティングレイ」、「チャットモンチー」、「東京事変」、「フレデリック」、「Creepy Nuts」、「きゃりーぱみゅぱみゅ」、「相対性理論」、「宇多田ヒカル」です.

www.youtube.com

本当はミスチルとかも聞きたい.

「おやすみ」

『寒くなってきたので、暖かくして寝てください。良い夢が見られますように』

地味ですが、「おやすみ」とか「行ってきます」とか言うと、優しい言葉をかけてくれます.

布団の中でAIスピーカーに「おやすみ」と声をかける体験は、すごく未来感があってとてもいいです. すぐに飽きそうですが！

できるけど使っていない機能

「アフォーダンスって何？」

『Wikipediaによれば...』

わからない言葉を調べられます. 言葉の意味を知りたいタイミングは、だいたいPCの前か外出中なので、そんなに使わないです.

「今日の天気は？」

『今日は、予想最高気温11度...』

天気を気にしなくてもいいように生活を設計しているので、使っていないです. 具体的には、毎日折り畳み傘を持つとか、乾燥機能のあるドラム式洗濯機を使うとか.

「ニッポン放送かけて」

『radikoでニッポン放送をストリーミングします』

ストリーミング再生に対応しているラジオであれば、チャンネルを指定して聞けます.

radiko.jp

自分で配信するほどポッドキャストが好きなので、常に積みポッドキャストがたくさんあり、ラジオを聞いている場合ではないです.

「今日のニュースは？」

『NHKラジオニュースから、今日8時のニュースをお伝えします』

NHKラジオニュースなどを流してくれます. ニュースソースの優先度などは、アプリから選べます.

Twitterでニュースを仕入れているので、聞かないです()

「スマホ探して」

『(機種名)のボリュームを最大にして鳴らせます. 鳴らしましょうか？』

Androidだと、ボリューム最大で電話を鳴らしてくれます. スマホを無くすような軟弱な家には住んでいないので、使わないです.

「12面サイコロ3個投げて」

『9 8 4と出ました. 合計は21です』

任意の面数のサイコロを任意の個数だけ投げて、それぞれの出目と合計値を教えてくれます.

「1000万面サイコロ投げて」とかも、律儀に対応してくれます.

ボードゲームで使うかもと思いましたが、「サイコロの出目がみんなに見える状態で残ること」が重要だったりするので、音声サイコロは使いづらい気がします.

「ピカチュウと話したい」

「わかりました、ピカチュウです」

ピカチュウと話したいタイミングがない.

「ぬるぽ」

「ガッ、と言えばいいのでしょうか？」

わかっておる...

ちなみに、元々の意味である"NullPointerException"の意味を拾って、

「それは私にとって一番恐ろしいことです」

と言ってくることもあります.

「生命、宇宙、そして万物についての究極の疑問の答え」

「42です」

正解.

できそうだけどできない

「1億面サイコロ投げて」

『9が出ました』

9999万面サイコロまではいけますが、1億面サイコロにするとなぜか小さい数しか出なくなりました.

日本人全員に番号を振って抽選したりするときには使えないです.

「りんなにLINE送って」

「すみません、よくわかりません」

Cloverじゃないのでできません.

LINE NL-S100JP Clova Friends Brown [スマートスピーカー]

LINE NL-S100JP Clova Friends Brown [スマートスピーカー]

「Gmailを新規作成」

「すみません、まだ対応していません」

対応しても怖くて使えない.

「バンコクの正式名称は？」

『thaiembassy.jpのサイトにはこう書かれています. 外国人はタイの首都を「バンコク」と呼びますが、正式名称はバンコクではなく以下のように大変長い名称です.普段、タイ人は正式名称の初めの部分「クルンテープ」（“天使の都”の意）を首都名として呼んでいます』

ラーメンズが好きな人は誰でもバンコクの正式名称を覚えたくなるはずですが、そのトレーニングには使えないようです.

www.youtube.com

まとめ

上に挙げた機能に限れば、Google Homeにしかできないことは1つもありません.

それでもGoogle Homeを買って良かったと思いました. それは、「音声インタフェースを使うことが日常化される」という体験ができるからです.

全く手を動かさなくても、好きな情報にアクセスできるという体験は、まだ一般的ではありません. しかし、きっとすぐ先に待ち受けている未来のはずなので、それに予め慣れておくことができます.

それだけといえばそれだけですが、新しいUXに慣れることで生み出せるものもある気がします. なので、今日も「OK, Google」と話しかけていきます.

Web系に転職したいエンジニアが「N予備校」の「Webアプリ入門」をやるべき5つの理由

お仕事/キャリア

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

N予備校のプログラミングコースを始めて、 「Webアプリ入門」コースがすごく良かったので、紹介します.

N予備校ってなあに？

www.nnn.ed.nico

ドワンゴが提供するeラーニングサービスです.

主にN高等学校向けに作られているようですが、一般向けにも提供されています.

無料体験もできますが、基本的には月額1,000円を払うと全てのサービスが使えるようになります.

上記URLにアクセスすると、「ネットで志望校へ一直線！」とか出てくるので不安になりますが、高校生の親から主に収益を得ているサービスだと思うので、そこに最適化されているだけです.

N予備校のプログラミングコース

www.nnn.ed.nico

N予備校は主に高校生向けなので、英語とか社会とかの受験科目のコースも当然あります.

ただし、プログラミングコースの力の入れ方がすごいです.

2017年の9月にはてな匿名ダイアリーの記事がバズったので、知っている人も多いかもしれません.

anond.hatelabo.jp

ドワンゴがやっているので、Webアプリケーション開発の講義がメインです.

受講生の中から、普通に「未踏Jr.採択者」とかも輩出しているらしいので、実績も出てきています.

詳しくは、N高等学校 Advent Calendar 2017の1日目の記事で、担当責任者の@sifueさんが説明しています.

qiita.com

「プログラミングしたいけどそもそもつくりたいものが無い生徒に必要なのは、対話でした」など、プログラミング教育論としても非常に良い記事です.

Web系に転職したいエンジニアが「N予備校」の「Webアプリ入門」をやるべき5つの理由

前述のように、一般にはN予備校のコースは高校生向けに作られています.

ただし、実際に「プログラミング入門 Webアプリ」コースを受講してみて、これからWebエンジニアとしてのキャリアを始めようとしている人にとってもすごく良いと思いました.

その理由を5つ捻り出したので、以下に書いていきます.

なお、N予備校の授業は基本的に「動画」と「Web教材(テキスト)」のセットで提供されていますが、私はほぼ後者の「Web教材(テキスト)」しか使ってないので、その点はご了承ください.

1. 前提知識が要らない

世の中の初心者向け技術書の多くは、ある一定の前提知識を要求してきます.

これは、技術書出版業界のセオリーとして、「『入門』という言葉を付けると売上が上がる」という話があるのが1つの原因です.

一方で、N予備校の授業はPCを使ったことがないレベルまで想定して作られています.

例えば、Chromeのインストール方法や、( の入力方法から丁寧に説明されています.

2. Webの知識が網羅的に身につく

「Webエンジニアになるぞ！」となったときに、身につけるべき知識の範囲というのは、結構広いです.

ざっと考えても、以下のようなトピックについて薄っすらとでも知っておく必要があります.

  • Linuxと環境構築
  • シェルプログラミング
  • 通信とネットワーク
  • GitとGitHub
  • サーバーサイド言語1つ
  • HTML/CSS/JavaScript
  • DBとSQL
  • 認証
  • アプリケーション設計
  • Webフレームワーク
  • テスト
  • セキュリティ
  • Hostingサービス
  • CI

それぞれ別個の入門書が出ているようなトピックばかりです.

「Webアプリ入門」コースは、これらを全て網羅した内容になっています. 20冊近い本を積み上げて勉強するよりは、モチベーションが保ちやすいと思います.

3. 手を動かしながら実践的に学べる

N予備校のプログラミング授業では、ほとんど全ての章で実際に手を動かしながら学べるようになっています.

VagrantでUbuntuを立てて、エディタでコードを修正して結果を見ながら、問題なければgit commitしていきます.

「概念は知っている」よりも、「実際に手を動かして実装したことがある」の方が、仕事で触るときの心理的なハードルがグッと下がります.

例えば、OAuth2.0の存在は知っていましたが、実際にnpmライブラリを使って実装してみると、もっと身近に感じられました.

4. 比較的モダンな開発環境に慣れることができる

私がSIerのF社でSEをやっていたときは、開発環境がかなりレガシーでした.

そのため、転職後にWebエンジニアになったとき、使っている言語やツールがすべてガラッと変わって、慣れるまで辛かった覚えがあります.

N予備校のプログラミングコースは、以下のような比較的モダンな環境を使うので、実作業の中でそれらに慣れることができて良いと思います.

ちなみに私の前職は、COBOL + サクラエディタ + VSS + その他F社製品でした. エディタとかは宗教戦争ありそうですが、サクラエディタよりはVSCodeの方が圧倒的にWeb開発には向いているしWebエンジニアの間での普及率も高いでしょう.

なお、これらの「モダン」な開発環境も日々廃れていきますが、コース名に「2017年」と書いてあったので、毎年教材の改訂を行なっていくみたいです.

5. GitHubアカウントの見栄えをよくできる

Web系の企業で中途採用選考を受ける場合、GitHubアカウントを見られることが多いです.

もしWeb系への転職を考えていてGitHubアカウントも持っていないような状態であれば、GitHubの見栄えを良くすることは、テクニックの一つとしてはありかなと思います.

N予備校のプログラミング入門コースでは、すべての演習のソースコードがISCライセンスで公開されています.

github.com

教材に沿ってこれらのソースコードを写経して、自分のGitHubリポジトリのmasterにpushしていけば、GitHubに学習の成果が反映されます.

もちろん最初から自分のプロダクトを作れれば一番いいですが、何もしていない人とは差別化できるでしょう.

なお、GitHubのContributionsに草を生やしたい場合、以下の記事とかを参考にするといいかと思います.

qiita.com

教材の通りにやると、多分master-2017ブランチ等にpushすることになるので、草が生えない恐れがあります.

また、ISCライセンスに従って、『「無保証」であることの明記と著作権およびライセンス条文自身の表示』が必要になるので、たぶんREADME.mdとかに書いておけば大丈夫だと思います.

(ライセンス周りは詳しくないので、問題だ！という指摘があれば教えてください)

まとめ

  • これからWebエンジニアになる、なったけど自信がない、という人は、「N予備校」の「Webアプリ入門」をやると最低限の知識と経験が身に付く
  • 特に、SIerなどの文化が違うところからの転職だと、慣れるためにも、「これやりました！」と面接で言うにも、良さそう

プログラミングに限らず、こういったサービスがたくさん出てきて、学習コストがどんどん下がっていくといいですね.