がみぶろ

#がみぶろ

@jumpei_ikegami

メルペイ社で開催されたNuxtMeetup#2でNuxt.js入門してきた

こんにちは、しがないラジオのgamiです。

今日は、NuxtMeetup#2にブログ枠で参加してきたので、その模様をお伝えします！

当日は、主催の@kotamatsさんの挨拶で乾杯し、お酒を飲みながらLTを聞きました。

スポンサーLT Welcome to Nuxt Meetup @andoshin11

自己紹介

  • Andy(@andoshin11)
  • 3月からメルペイのフロントエンドエンジニア
  • Vue.jsがメイン
  • React NativeやRailsも

merpeyの紹介

  • 信用を創造してなめらかな社会を創る
  • 株式会社ソウゾウの次の子会社
  • 「人々の新しいお財布」を目指している
  • お金の入り口と出口をつくる
  • Nuxt.jsをmerpeyでも使っている

Nuxt+TypeScript事始め @sue__71

自己紹介

  • merpay webフロントエンドiOS
  • ソリューションチーム
    • 技術課題を解決するチーム

今日はなすこと

  • VueのTypeScriptの対応状況
  • Nuxt+TypeScriptの対応状況

TSの特徴

  • 静的型付け言語的にJavaScirptがかける
  • 後付けで型定義がかける

TSのメリット

Vueの状況

  • Vue: 2.5から改善
  • vue-template: 解析されない
  • Vuex: 型定義があるが、微妙
  • Nuxt: 型定義がない

IDE

Lint

  • eslint-plugin-vueを使いたい
  • typescript-eslint-parserで対応
  • いくつかのルールをOFFにする必要がある
    • no-unuesd-vars
    • no-undef

Vue Component

  • 2.5から対応
  • tsconfigでnoImplicitThisをtrueにする

Vue Stateless Component

  • templateのみのファイルを読み込むためのtweak

Vue-Plugin

  • Vueにインジェクトされるものの型を定義する
  • VueCompontentOptionsに提供されるメソッドの型を定義する

Vuex

  • 一番TapeSafeに書きたい
    • anyで定義されるものが多いので、満たせない

型定義の改善

  • TS2.1のMapped Typeを利用することで、Vuexの型定義の改善が可能

Actions

  • dispatchやcommitの定義もtypesafeにできる

TypeSafeではあるが...

  • 実装と一致しないInterfaceを定義する気持ち悪さ
  • namespacedではない場合、さらに型パラメーターを渡さなければならない

Nuxt+TS

  • Nuxtから提供されるコンテキストAPIについて型定義する必要 -nuxtServerInitなど

Pages

  • /pages配下のコンポーネントに対して与えられる拡張
  • 別で定義した方が良さそう

まとめ

  • VueプロジェクトでTS採用するなら、型定義を書く気持ちが必要
  • 完全にTypeSafeで書きたいなら、AngularやReactがいい
  • Nuxtみたいに、機能の多いAPIを覚えるのが大変
    • 定義があると、どこで何ができるかすぐわかる！
  • とりあえず、TypeScriptは正義！

Web初心者がNuxtでサイトを一つ作るまでの技術選定 @corosuke_k

speakerdeck.com

今日はなすこと

  • 技術選定の話

サイト

  • 地域のお店を紹介するサイトをリニューアルしたい
  • HTML4系だった...
  • 管理画面も必要
  • Bootstrap感漂うサイト

実際に必要なもの

リソース

  • 1人
  • JS書いたことない

ルール

  • できるだけコードを書かない
  • 無料枠で済ませる

最初の構成

  • Vue+Firebase+Algolia+Cloudinary+bulma

なぜVue.jsか？

  • 学習が容易である必要がある
  • Web知識が流用しやすい
  • モジュール性がある
  • JSでどうにかしているものを採用したくない

課題

  • src/component以下が混雑
  • Babelやwebpackが難しい

Nuxtメリット

  • 設定がいらない
  • ディレクトリ構成がいい感じ
  • router設定もいらない
  • PWAにするのに、公式module入れればいい

Nuxtデメリット

  • 学習コストは上がった
  • components以下が混雑している問題は、解決しなかった
  • generateのビルドが長い

ビルド長い問題

  • nuxt-generate-clusterを使うと軽減された
  • 10.58s -> 3.48s

情報更新時に再ビルドが必要問題

  • Netlifyの存在知らない
  • nuxt devの状態と本番を同じ状態にしたい

SSRの問題点

Hostingを探した

  • now.sh

zeit.co

  • Realtime Global Deployments
  • zeitという会社が作ってる
    • Next.jsを作ったところ
  • CLIだけでdeploy可能
  • Nuxt.jsでつくったものは、そのままnow.shにdeployできる！
  • staticに戻すときも、そのままある

now.shのデメリット

  • now.sh自体の更新が頻繁
  • firebase hostingより費用がかかる
  • now.sh以外で購入したドメインの設定がハマりポイントあり
  • Asia Regionがない

全体の反省点

  • 自分は楽だが、引き継ぎが大変
  • Firebase依存の結果node_modulesが増えた

初の勉強会にて初LTをする初心者エンジニアのお話 @hirokinishizawa

自己紹介

  • 22才
  • 独身
  • 初心者
    • 3ヶ月前に初めてコードを触った
  • それまでは、屋上防水をしていた

仕事

  • 2週間、プロゲートで勉強
  • Nuxtを使って、メディアやLPの作成
  • 人材紹介マガジン
    • SCOUTER

テーマ

  • 初心者がどのようにメディアの作成を進めていったのか

step1 コンポーネント毎にプレビューを確認

  • デザインとにらめっこして、パーツに分ける
  • Componetsに各パーツ毎のVueファイルを作った
  • StoryBookで、Components一覧を確認

step2 一つのまとまりにするために

step3 共通部分はまとめましょう

  • 各ページで、共通部分がある
    • ヘッダー
    • フッター
    • コンテンツ

その他

  • Wordpressを使って記事を書いてるので、getしている

Nuxt.jsでサービス開発して困ったこと @takanorip

自己紹介

  • Takanori Oki
  • 株式会社スマートドライブ
  • フロントエンドエンジニア
    • Nuxt.js
    • React
    • Polymer
    • ウェブ制作
  • Polymer Japan翻訳チーム

SmartDrive Cars

  • Nuxt.jsで作っている
  • SSRはまだしてない

困ったこと

  • 結論: あんまり困らなかった
  • 公式ドキュメントとissueとPRを読めば、だいたい解決する
  • ドキュメント読む癖大事

nuxt-community便利！

  • 神

maxChunkSize

  • buildオプション
  • JSファイルの上限を設定
  • 設定した数値よりファイルサイズが小さい
  • 使うとなんかエラーになる

外部JS動作しない問題

  • window.onloadの時しかJSが走らない

IEでVuexが動かない

  • babel-polyfillを食わせると動く

ライブラリをNuxtに組み込みたい

  • lodashとかをimportするのめんどくさい
  • pluginでvueとNuxt.jsに組み込むと便利
  • 余力があればモジュールとして公開

ローディング最適化

  • APIへのアクセスはasyncDataやfetchの中で行う
  • vendorへの登録忘れない
    • pluginのキャッシュができる
  • pwa-moduleは入れといた方がいい
    • 神
    • SWがいい感じに動いてくれて、いい感じにキャッシュしてくれる
    • たまに、キャッシュが効きすぎて辛いことも

NUXTJS My Friend @Ryosuke_Suzuki

自己紹介

今日の話

  • Showcases
  • Nuxtで環境構築している話

KARTEインフォグラフィック

  • 3週間で開発
  • 開発2人、デザイナー1人

Hello! KARTE

  • static gen

なぜNUXTか？

  • static genできる
  • Webpack書かなくていい
  • SWまで生成してくれる
  • 神

つまづき

  • CSS Preprocessorのコンパイル時エラーが起きる
    • PostCSSの設定が怪しい
  • 数百枚の画像の読み込み辛い
    • CSS spriteで画像を圧縮
  • Cloudfrontへのアップロード
    • キャッシュのクリアをちゃんとやる必要
    • Invalidation周り

NUXTで環境構築

  • 世の中のグローバル企業は、どれもUniversal web applicationだ
  • せっかくならSSRしたい

なぜSSRか？

  • Better User Experience？
  • SEO？

SSR不要説

  • OGPしっかりしてれば、SSR不要
  • コンピュータリソース使う
  • 初期表示速いが、今のデバイスではそんなに問題じゃない
  • 環境構築面倒

なぜSSRか？(再)

  • グローバル水準
  • エンジニアの知的好奇心を満たす
  • どやりたい
  • 常に先端にいたい
  • 「SSRは必要か不要かではない。やるかやらないかだ」

構成

  • TS+Nuxt+Express
  • ProxyでSSRサーバとAPIサーバを分ける

Dir Structure

  • Monorepoっぽく分けた

なぜTSか？

  • JSの自由度を残しつつ、硬くかける
  • 中/大規模アプリケーション開発に向いている
  • VSCodeを使えば補完が強い
  • decoratorが強い

つまづき

  • d.tsしっかりかく
  • tsconfigが複数必要な場合、VSCodeがうまく読み取ってくれない
  • jest, vue-jest, ts-jestを入れるとjestでtest書ける

最後に

  • TSの環境構築はめんどくさい
  • Nuxtは公式docsを読めば詰まることは少ない

Static site generatorにおけるデータ調達の話 @miyaoka

Nuxt

  • いいですよね
  • 話すまでもない

なので

  • Gatsbyの話をします
  • Qiitaでも、Nuxtより全然人気じゃない

staticgen.com

www.staticgen.com

  • Static Site Generators for JAMstack Sites
  • 静的に書き出した方が楽だよねー
  • ランキング上位は、JSがほとんど

ReactやVueの静的サイトジェネレーター

  • React
  • Vue
    • nuxt.js
    • vuepress

データソース

  • VuePress
    • config
      • .js -> $site
    • data
      • .md -> $page
  • Nuxt+Nuxtent
    • data
      • .md -> .json
      • webpackのassetとしてemit
  • Gatsyby
    • data
      • fileでもapiでもcmsでもいい！すごい！
    • source plugin
      • nodes
    • content server
      • GraphQL
    • templete
      • components

パフォーマンス

  • リンク先リソースの先読み
    • 画面に表示されている領域を先読みできる

すごいところ

  • データソースの一元化
  • GraphQLで統一化されたクエリ
  • 超速(ちょっぱや)にかける意気込み

Guess.js

  • マシンラーニングで先読みを予測
  • "Plese support Vue.js"というissueはある

未来へ

  • Nuxtももっと超速(ちょっぱや)になる！

誰だったのか？

soussune.com

いまからはじめるnuxt-edge @potato4d

speakerdeck.com

自己紹介

  • VueやったりNuxtやったり

nuxt-edgeとは？

  • Nuxt2 is coming! oh year!という記事で紹介
  • 要はNuxt v2のEarly Access edition

medium.com

機能

  • webpack@4になって高速化
  • Support ESModules with .mjs extension

破壊的変更

  • Remove isClient / isServer flag
    • use process.browser / process.server
  • options.devがoptions.isDev
  • vendorsが消えた
    • Nuxt側でやってくれるようになった

モジュール側の追従

  • axios
    • 5.2.0では、nuxt-edgeに移っている
  • pwa
    • Coming soon
  • Other modules
    • independence

移行のための5step

  • yarn remove nuxt @nuxt/axios
  • yarn add nuxt-edge @nuxtjs/axios
  • s/isClient/process.browser/g
  • s/isClient/process.server/g
  • yarn dev

Yarn

  • Nuxtは依存管理をYarnでやっている
  • Yarnを使った方がいい

まとめ

  • Nuxt2は5月リリース！
  • 本番ですでにnuxt-edgeで使っているけど、ちゃんと安定稼働している！

宣伝

  • Nuxt tech bookという技術書同人誌を出版しました！

まとめ

以上です！当日の様子は、Tweetが流れるまでは#nuxtmeetupから追えると思います！

twitter.com

「イヌでもわかるウェブフォント」を読んで、こだわりのフォントをWebサイトで使おう！

f:id:jumpei_ikegami:20180501051539p:plain

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

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

techbookfest.org

今回は、戦利品の1つである『イヌでもわかるウェブフォント』の感想を書きます。

booth.pm

「エンドユーザーの環境によってフォントが変わるなんて許せない！」という人は、ウェブフォントを使うことで悩みが解消されるかもしれません。

ちなみに、著者であるtakanoripさんは、前にしがないラジオのゲストとしてご出演いただいたことがあります！

「イヌでもわかるウェブフォント」

本書は、特にウェブフォントの最適化の部分でかなり実践的な内容に踏み込んでいます。

ウェブフォントの導入に対する最も大きな反対意見は、「ウェブフォントを使うとサイトのレンダリングが遅くなる！」でしょう。適切な最適化をすることによって、エンドユーザーの体験を損なわずにウェブフォントを使うためのテクニックが紹介されています。

  • フォント自体の軽量化
  • preload
  • キャッシュ
  • フォントの読み込みが遅延/失敗した場合のフォールバック

フォント戦士の味方、「武蔵システム」

本書で紹介されているウェブフォントの最適化をいくつか試してみました。

まず、フォントの軽量化です。 フォントファイル自体を軽くするためには、主にフォントのサブセット化と、WOFF2対応をします。

それらを実現するソフトウェアとして、以下の2つが紹介されています。

どちらも、武蔵システムという硬派な名前のシステム会社が提供しているフリーソフトです。Windows版だけでなく、Mac版もあります。

どうでもいいですが、武蔵システムの会社情報のページに掲載されたメールアドレスは、font@opentype.jpでした。強いフォント愛を感じます。

フォントの軽量化と聞くと難しそうですが、これらのソフトウェアのおかげで非常に簡単にできました。

S3にフォントをアップロード！

独自のウェブフォントを使うためには、サーバーにフォントファイルをアップロードする必要があります。 著者のtakanoripさんオススメのフリーフォントの1つである「チェックポイントリベンジ」をS3にアップロードして使ってみました。

fontfree.me

Macでフォントをいじったことがある人にはお馴染みの宮沢賢治作『ポラーノの広場』を、HTMLにコピーして表示してみます。

CSSは、こんな感じです。フォントファイルもCSSファイルもS3にある想定です。

@font-face {
  font-family: "CP_Revenge";
  src: url("/foobar/CP_Revenge.woff2") format("woff2"),
       url("/foobar/CP_Revenge.woff") format("woff");
}

body {
  font-family: "CP_Revenge", sans-serif;
}

preloadでフォント表示を早くする

簡単に試せるウェブフォントの表示高速化として、フォントのpreloadがあります。

HTMLに以下のようにlinkタグを追加するだけで簡単に設定できます。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="/foobar/style.css">
    <link rel="preload" as="font" type="font/woff2" href="https://s3-ap-northeast-1.amazonaws.com/foobar/CP_Revenge.woff2" crossorigin="anonymous">
    <title>ポラーノの広場</title>
</head>
<body>
...
</body>
</html>

preload無し

まずは、preload無しでChromeデベロッパーツールのNetworkタブを見てみます。 f:id:jumpei_ikegami:20180501053402p:plain

HTMLやCSSの後にフォントが読み込まれていることがわかります。

preload有り

続いて、preloadを設定して、キャッシュを消して再読み込みしてみます。 f:id:jumpei_ikegami:20180501053448p:plain

見事に、CSSファイルなどと並行して読み込まれています。これで、初回ロード時もテキストの表示がかなり速くなるのではないでしょうか？

まとめ

日本語話者として育ったからには、日本語フォントと向き合わなければいけません。漢字がたっぷり詰まった日本語フォントは、10MB以上になることもあります。

そんな重いウェブフォントでも、「イヌでもわかるウェブフォント」を読んで、サブセット化をはじめとする最適化を少しするだけで、かなり軽く速くなりました。

この記事で触れた内容以外にも、フォントが描画されるまでのブラウザの処理の流れなど、かなり踏み込んだ内容も本書には掲載されています。

ウェブフォント触りたいけどどうすればいいかわからん！という人は、ぜひBOOTHから電子版を購入してみてください！ booth.pm

また、しがないラジオで著者のtakanoripさんにフォント愛を語っていただいた回があります。ぜひお聞きください！（宣伝）

『マンガでわかるDocker』を読んでDocker初心者がDockerがもっと好きになった話

f:id:jumpei_ikegami:20180424083652p:plain #しがないラジオパーソナリティのgamiです。

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

techbookfest.org

今回は、戦利品の1つである『マンガでわかるDocker』の感想を書きます。

llminatoll.booth.pm

なんと技術書典の1日間で冊子とダウンロードカード合わせて600部を売り上げる大盛況で、待機列が伸びすぎてサークルスペースが非常口近くに移動になったという伝説が爆誕したそうです。 note.mu

ちなみに、著者である湊川あいさんは、前にしがないラジオのゲストとしてご出演いただいたことがあります。

この本のレベル感

冒頭に、この本のレベル感が以下であることが明記されています。

購入前に読めるページの中に書かれているので、「思っていた内容と違った！」というミスマッチが起こらないような配慮を感じます。 なお、僕はDockerを少し触ったことがあるレベルでしたが、マンガとしても面白く、また知らない情報もあったので、楽しく読むことができました。

Dockerは怖くない！

Dockerを初めて使い始めるわかばちゃんは、こんな感想を持ちます。

  • そもそもDockerがなんなのか全然わからん！
  • せっかく立ち上げたDockerコンテナがすぐに止まっちゃうのなぜ？？？

これは僕がDockerを使い始めたときに感じたことと全く同じでした。おそらく、著者である湊川さんがDockerを初めて触ったときの気持ちをメモしていて、それを漫画にしたんじゃないかなーと思います。

初心者がある技術に触れるとき、最初に抱いた疑問を解消できないままにしておくと、その技術に対する漠然とした怖さや苦手意識が芽生えてしまいます。この『マンガでわかるDocker』を読むと、最初に抱いた疑問がスッキリ解消されるので、「Dockerは怖くない！」という実感をもってその先の学習に進めるようになっています。

デーモンは悪魔じゃない！

プログラミングをしていると、よく「デーモン」と呼ばれるプログラムが登場します。Dockerにも「Dockerデーモン」と呼ばれるプログラムがあります。 僕はずっと「悪魔」だと思ってたのですが、「悪魔じゃないよ！」ということが書かれていて、衝撃を受けました！

Wikipediaによると、「daemonは目には見えないが常に側にいて、その意志を働かせている何ものか」だそうです。 daemonはdemonの古い綴りらしいので元は同じ単語のようですが、守護神だと思った方が怖くないのでお得ですね。

複雑なものをキャラ化することの価値

湊川さんのマンガでは、プログラミング言語やプログラムがキャラ化されることが多くあります。

わかばちゃんシリーズのHTMLちゃんなどがその例です。

わかばちゃんと学ぶ Webサイト制作の基本

わかばちゃんと学ぶ Webサイト制作の基本

今回も、Dockerデーモンというクジラのゆるキャラ的なキャラクターが登場します。

Dockerデーモンについても、$ docker run hello-worldというコマンドを実行すると返ってくる味気ない標準出力の裏で、Dockerデーモンさんが裏でせっせと働いている光景を想像できるようになります。

複雑なものや怖そうなものを、キャラ化して親近感を抱きやすくする効果は、マンガならではの価値だなーと思いました。

「怖くない！便利！」から始まる学習

この『マンガでわかるDocker』を通じて、ある技術を初めて触る人には、以下を伝えることが大事だなーということに気付きました。

  • ○○は怖くない！
  • ○○を使えると、こんなに便利！

単に仕様が羅列してあるようなドキュメントを初心者が見てしまうと、「なんか怖そう...」とか「何に使えるのかわからないから別に勉強しなくてもいいか...」となって挫折しがちです。 苦手意識をもったままその技術に触れ続けていても、楽しく勉強できないので、学習コストはあまり下がりません。

逆に、「怖くない！便利！」という感覚を最初からもてると、楽しみながらどんどん学べるようになる気がします。

湊川さんの「学習コストを極限まで下げたい！」という思いについては、弊ポッドキャスト「しがないラジオ」にご出演いただいたときにも熱弁していただきました.

「Docker怖いけど学びたい！」という人は、ぜひ読んでみてください！

llminatoll.booth.pm

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

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

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

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

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

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
  • 画像処理

カメラ

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

OpenCV(wasm-build)

レシピ

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

課題

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

感想

  • 最近は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とは？

作ったものを公開！！

どうやって作ったか説明

  • 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完全入門』の読み方

f:id:jumpei_ikegami:20180423063306p:plain
今日からはじめる技術Podcast完全入門

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

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

techbookfest.org

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

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

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

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

僕は急遽用意されたという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 【並行輸入品】

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

使用技術

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

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

話すこと

自己紹介

  • 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

知見

感想

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

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

Opinion

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

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

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

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

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

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

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

3行で言うと

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

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

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

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

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

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

f:id:jumpei_ikegami:20180412132252j:plain 巻き取り式の、超薄型キーボードです. 普通に欲しい...

f:id:jumpei_ikegami:20180412132237j:plain 車載装置をイメージした、曲面タッチパネル式コンソール.

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

f:id:jumpei_ikegami:20180412132728j:plain 蜘蛛の巣のような変な建物の中にあります.

f:id:jumpei_ikegami:20180412132734j:plain 中には、小型のドローンから大型のものまで並びます.

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

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

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

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

f:id:jumpei_ikegami:20180412135547j:plain

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

f:id:jumpei_ikegami:20180412133314j:plain

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

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

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

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

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

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

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

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

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

f:id:jumpei_ikegami:20180412133518j:plain

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

f:id:jumpei_ikegami:20180412133535j:plain

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

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

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

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

f:id:jumpei_ikegami:20180412133346j:plain 深圳の街中を地下鉄がつないでいるので、移動も簡単です.

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

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

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

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

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

f:id:jumpei_ikegami:20180412134200j:plain

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

f:id:jumpei_ikegami:20180412134225j:plain

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

f:id:jumpei_ikegami:20180412134238j:plain こちらがRFIDタグ. 薄い.

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

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

f:id:jumpei_ikegami:20180412134319j:plain

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

f:id:jumpei_ikegami:20180412134334j:plain

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

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

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

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

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

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

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

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

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

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

f:id:jumpei_ikegami:20180412140432j:plain

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

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

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

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

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

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

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

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

f:id:jumpei_ikegami:20180412134455j:plain 電子決済の大敵、電池切れを防ぐための、モバイルバッテリー自販機も、その合理性の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的な製品やサービスが社会にインストールされていました. 遅かれ早かれ、いずれは日本を含む世界の多くの国が、似たような方向に進むのだと思います.

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

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

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

参考

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

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

jumpei-ikegami.hatenablog.com