青魔道士SEのブログ

PHPエンジニアです。得意技はラーニング。ITと日常のことつぶやきます。

促す・捗る・退く

いままで
「そくす・あるる・ひく」
と読んでいました。

最近ようやく
「うながす・はかどる・しりぞく」
と読めるようになってきました。

35歳、社会人頑張ってます。

LINE DEVELOPER DAY 2017 に参加してきた!

渋谷ヒカリエで開催されたLINEによる開発者向けイベントに行ってきましたー。

linedevday.linecorp.com

総括

基調講演はClovaの話がメインでした。

LINEに限らずですが、時代はAIだなーと。

LT専用ホールもあったので楽しみにしていたのですが、立ち見だったので残念。体力的に長時間は諦めました。

それにしても圧倒的LINEクオリティ!!!

ノベルティに加え、ランチ、カフェ解放、clova抽選50名、懇親会などなど、サービスサービスー♪

セッションメモ

以下はセッションメモです。

A-1 Opening Session

LINEの現在の全体的な話

Clova

クラウドAIプラットフォーム

WAVE

Clovaの第一弾

LINE API EXPERT

外部によるAPIエキスパート

A-2 The Technologies in Clova

Clovaについての説明

What is Clova?

サッカーアジア最終予選日本vsオーストラリアのハーフタイムに流れたClocaのCM

  • WAVE
    • Smart Speaker
  • Clova
    • AI Platform

LINEにおけるAIの定義

  • AI != Machine Learning
  • AI = Virtual Assistant in our life

Clova is a Cloud-based virtual assistant.

History

1年で開発。

なぜできたのか?

SMART PORTALにより下記のような技術知識はすでにLINEが持っていた

  • web search
  • crawling
  • big data
  • machine learning
  • bot

Technology

Clovaは4つのコンポーネントで構成されている

  • CLIENT
    • ユーザーの入力を受け取る
  • BRAIN
    • 音声をテキスト化、ユーザーの意図を理解、出力するテキストを音声化。AIの基本機能を提供
  • SKILL
    • ユーザーに様々なサービスを提供する
      • 電気を消したり
      • 音楽をかけたり
      • LINEを送ったり
  • Platform

これらはCIC、CEKの2つのコンポーネントとしても表せる

  • CIC
  • CEK
    • Clova Ectension Kit
      • LINEやLINE Musicなどのスキル
    • 開発することでユーザーが様々なスキルをのせることが可能

数々の困難があった

  • 世界的な知識
    • 曲名やアーティスト
    • 場所、ランドマーク
    • マンガなどのコンテンツ
  • ユーザーの言い回し
    • 時間や数値
    • 方言など
  • JAPANESE PROBLEMS
    • 発音を解析ミスしたり、同じ音でも意味が違ったり、読み間違えたり

Future

キーワードはGROWTH

  • CHAMP

    • WAVEに続くデバイス第2弾
    • WAVEよりもCUTEで持ち運びやすい
  • 話者認識

    • 家族には「こんにちわ」
    • お客さんには「はじめまして」
  • 日付などの理解

    • 朝は「おはよう」夜は「こんにちは」
    • メリークリスマス
  • スキルの増加

  • Gatebox連携

  • エンジニアのみなさんにClovaを成長させてもらいたい

A-3 Gateboxのこれまでとこれから

Gateboxの説明と構成する技術について

AZUMA HIKARI

機械やロボットと本当にコミュニケーションとりたいかな...

自分だったらかわいいキャラクターとだったらコミュニケーションとりたい!

初回予約の300名様のことを『マスター』と呼んでいる

Living with Characters

「キャラクターと一緒に暮らせる世界」を実現したい

  • 初音ミクバージョンも
  • 今後もさまざまなキャラクター

Technology

  • projection
  • sensing
  • talk
  • network

gatebox inside

cloud side

  • nodeJS
  • などなど

Gatebox x Clova

CIC,CEKそれぞれの3rd Partyとして連携

ユーザー体験の部分、Gateboxはキャラクターのアクションがあるので、そこが技術的なチャレンジとなる

LT LINEnotify x IoT

imageに対応した。

画像用のストレージサーバー不要でNotifyできる

玄関に人がきたら写真をLINEに通知するIoT

A-5 なぜLINEではウェブトラッキングシステムがフロントエンド開発チームによって構築されたのか

ログ情報のユーザー判別はLINE IDではなくcookieデータを使用している。

LINE IDを使用すると、個人情報の観点などで利用に制約が出てきてしまうため。

A-6 HBase at LINE 2017

HBaseの使用箇所とバージョンアップで苦労した話。

HBaseをLINEのどこで使用しているか

  • GAME
  • Messaging
  • Timeline
  • Statistics

今回はMessagingでの話

0.90.6->1.2.5へどのようにアップデートしたか

  • rooling upgradeできない

    • バージョンでプロトコル変わったため、動かしながらのアップグレード不可能
  • 旧と新両方にDual-writeして

  • Bulk copy existing dataして
    • データ移行の整合性チェック。データ確認とアプリケーションを通しての確認の2パターン実施
  • 新に切り替えた

A-7 LINE Login - new features and mechanism

LINE Loginの新機能紹介

features

  • Login Session enabled

    • メアド、パスワード不要でブラウザごとにログインできる
  • active sessions

    • バイス、ブラウザごとにセッション管理、ログアウトできる
  • OpenID Connect

  • Friending with bots

    • ログインを通じて、botと友達になれる
    • 最近はe-mailよりもチャットが好まれる
      • リンククリックもチャットのほうが4倍高い
    • ユーザーがブロックしていたらアンブロックすることができる

A-10 BOT and the new Comfortableness

botAPIの新機能について

line botの現在

  • 13万のbotが存在
  • 20億人と会話している(累計。ユニークユーザーではない)
  • 100億のメッセージ

line bot awards

  • グランプリ
    • &HAND(アンドハンド)
      • 目の不自由な人の杖や、妊婦のマークにbeaconを入れて、人々が助ける

botで使えるコミュニケーション

  • Sticker(スタンプ
  • 画像、動画、位置情報
  • ルーセル
    • はい、いいえ
    • 選択
    • 日付選択(開発者の声により追加された)
  • Imagemap
    • オセロのようなものも作れる

Messaging API with LINE Login

  • 体重と歩数を管理するbot

    • ログインをもとにwebと連携できるので、グラフなどのよりリッチなインターフェースを提供できる
  • グループ内botでユーザー識別可能となった

    • ゼミの教授が課題出して、生徒が提出。特定の生徒にメッセージ送信なども可能。

Flexible Rich Menu

リッチメニューに比べ

  • デザインの自由度
    • half-sizeのリッチメニュー
    • imagemapを使用して自由なボタン配置
      • ヒカリエのホールマップ
      • 牛の部位
      • 電卓
      • ゲームのコントローラー

Rich Menu API

  • static
  • keyboard

LINE bot studio

  • プログラミングレスなbotプロトタイプ作成ツール
  • 開発者ではなくデザイナや企画向け
  • PCアプリケーションとして提供予定

LINE API EXPERT

なると、特典として

  • 非公開のAPI、β版を共有

A-11 Closing Session

Progressive Web Apps Roadshow Tokyo 2017に参加してきたよ!

PWAは来る!絶対来る! (自分がアプリ作れないからwebの技術でやりたいだけ)

ということでgoogle主催のPWA勉強会に参加してきましたー。

https://events.withgoogle.com/pwa-roadshow-tokyo-2017/

内容としては、前半のPWAセッションでたくさん知識を詰め込まれ、後半のコードラボで実際に書いて触って復習して身につけるといった感じのステキな勉強会でした。

SERVICE WORKERのサの字も知らなかった私としては非常に勉強になりました。(PEACE WALKERじゃないよ)

会場が映画館みたいw

f:id:naoqoo23:20170923134814j:plain

以下はいつものメモと写真です。

9:30am キーノート: Progressive Web Apps: What, Why and How

スピーカー:ロバート

f:id:naoqoo23:20170923132712j:plain

ajaxの革命。google mapsなどが可能となった。

ネイティブアプリがwebを上回った。使用時間。

  • 13% mobile web
  • 87% native app

PWA

素晴らしいユーザーエクスペリエンス

4つのポイント。FIREと呼ばれている。

  • Fast
  • Integrate
  • Reliable
  • Engaging

Fast

  • 3秒以上かかるサイトはユーザーの53%が離脱する
  • ページが読み込まれていないので離脱したことも計測できない

Integrate

  • webで支払いもできるようになった
  • 再生もホーム画面でできる

Reliable

  • webはネットにつながっていないといけない
    • chrome恐竜が出てきてはダメ
  • Lie-Fi
    • 繋がってると思ってるけどデータが入ってこないのがLie-Fi

Engaging

  • webからPUSH通知ができるようになった

PWAの例

  • Twitter lite
    • PUSH通知
    • 写真撮影して投稿
    • アプリに比べサイズ

Servise Workers

  • js。ネット接続する前にキャッシュを使用する
  • クライアントサイドのプロキシ
  • PUSH通知など、さまざまなことができる

PWAをはじめるアプローチ

3つのおすすめ

  • from the ground up
    • ゼロからデザイン
  • a simple version
    • 一部の機能、ページ
  • a single feature
    • 重要な部分のみ。PUSH通知のみとか

10:00am セッション 1: Integrated Experiences

スピーカー:Eiji

f:id:naoqoo23:20170923132808j:plain ※写真撮り忘れたのでピートの時のでw

ホーム画面に追加

  • 80%

    • ホーム画面のアプリを意図的に移動したユーザー
  • Web App Manifest

    • home画面にどう見せるか
    • 起動画面がどうなのか
    • といったことを定義できる
  • ホーム画面に追加するよう促す仕様はブラウザごとに異なる

    • chromeの場合
      • Web App Manifest
      • Offline support(with servise worker)
      • Engaged User
        • 何度もユーザーが訪れたときに促す。たまたま来た時は出さないようになっている

Web Payment(お金を支払う)

  • 66%がwebで行われている。(ネイティブアプリではない)

    • ただしデスクトップとスマホで、スマホのコンバージョン率は1/3ほど。
  • スマホでユーザー情報を入力するのが手間。なので家に帰ってデスクトップでやる。改善すべき。

    • Autofill
    • autocomplete属性
      • inputタグに属性追加するだけ。非常に手軽にできる
  • でも結局はフォームとユーザーの戦い。これを劇的に改善したい。
    • PaymentRequest API
      • フォーム不要。全てのサイトで同じUX
      • 注意!あくまでフォームの代わりとなるもの。お金のやりとりをするところまでを解決するわけではない
      • jsで書く。上記のこともあり金額は文字列。計算する場合はjsでガリガリ書く必要あり
      • promissでPaymentResponseでユーザー情報が帰ってくる。この情報をサーバーやpaymentゲートウェイに渡して処理する(支払い可能か)

10:25am セッション 2: Reliable Experiences

スピーカー:ピート

f:id:naoqoo23:20170923133008j:plain

必要なときにネットに繋がらないとユーザーの信頼性を失う

Service Worker

  • サービスワーカーは2回目から働く
  • 1回目はたたずんでいる。idle。
  • 非同期のリクエストでアップデートバージョンがあるか聞きに行く

実装

  • register
  • install
  • activate
    • 古くなった情報は消したい。キャッシュキーにマッチしないものは削除
    • fetch event handler
      • キャッシュにリクエストがあればそれを返す
    • Scope
      • サービスワーカーがどのページを管理するか。
      • 1ページや複数指定など高度な指定もできるが、まずはルートから指定がおすすめ
      • sevice-worker.jsを指定することになる。script/ディレクトリに入っているとindex.htmlやimageがキャッシュされないのでsevice-worker.jsはルートに置くとよさげ。

キャッシュとネットワークの関係性

  • コントロールすることができる。サービスによって判断する必要がある
    • キャッシュとネットワーク同時に行く
    • まずキャッシュのデータをユーザーに見せる
    • その後ネットワークで更新があれば新しい情報を準備
    • ユーザーのアクションを待って最新情報を表示

Tool

  • chrome dev tools
    • 何か問題が起きたらストレージなど全てにチェックを入れてリフレッシュする
  • Workbox

11:00am 休憩

11:15am セッション 3: Engaging Experiences

スピーカー:Alex

f:id:naoqoo23:20170923133540j:plain

ユーザーに再びアプリを使ってもらうために。

Web Push Notifications

通知を見て、時間の無駄となるのはサイテー

重要な3つのポイント

  • timely
  • precise(中断して見ても良いものであるべき)
  • personal(パーソナル化している)

通知許可をユーザーが拒否したら2度とチャンスはない

そのためまず独自に通知必要かを確認し、実際の通知許可を出す。

12:00pm セッション 4: Secure Experience

スピーカー:kosamari

f:id:naoqoo23:20170923132917j:plain

httpsであるメリット

  • Identity
  • Confidentiality
  • Integrity

httpsにする上での懸念

  • そもそもhttpsにする必要ある?

    • Man-in-the-Middle Attacks
      • フィッシング攻撃を防げる
  • パフォーマンス問題

    • httpsを確率するために3往復必要。工夫すれば削減できる
    • HTTP/2

コスト

  • 証明書

    • let’s encrypt
      • 無料
  • search ranking

    • 同じサイトで別URLあると良くない
      • httpは301でhttpsにリダイレクトするように
      • canonicalタグ

Maintenance

12:30pm ランチ

f:id:naoqoo23:20170923133638j:plain

選べる喜び。

f:id:naoqoo23:20170923133651j:plain

1:30pm セッション 5: Tooling - Lighthouse and Beyond

スピーカー:ケース

f:id:naoqoo23:20170923133751j:plain

Lighthouse

  • PWAページのパフォーマンス解析

Service Workerとchrome dev tools

networkパネル

from service-worker となっていればキャッシュから取って来ている

Applicationパネル

  • Service Workersの操作ができる

    • Offlineにしたり最新のService Workerにアップデートしたりできる
    • サービスワーカーをOFF(常にネットワークを見る)ようにしたり
    • どのファイルがいつキャッシュされたかといったことも確認できる
  • Manifestのテストもできる

2:00pm コードラボ

f:id:naoqoo23:20170923133845j:plain

4:30pm セッション 6: AMP

スピーカー:Yoshi

f:id:naoqoo23:20170923134432j:plain

PWAは2回目以降を早くしたい

1回目から早くするためにAMP

77%のサイトが10秒以上かかっている(リクエストが200超えてたり、、Adとか)

AMP

Start fast, Stay fast

スクロールできないとか、ページ読み込んだあと画面上部に広告挿入されたりとかをなくしたいというモチベーションがある

  • AMP HTML
    • タグの中にイナズマの絵文字
  • AMP JS
    • ビューポートを計算しファーストビューの表示を第一に考える
    • 画像の遅延ロードとかもよしなにやる。そのためのamp-img
    • amp-imgにwidthとheight必須なのは画面全体のレイアウトを把握するため
  • AMP Cache
    • HTTP2とか裏側でやってる?から早くなったり。(一般的に普及してないから対応した的な)

AMPとService Worker

<amp-install-serviceworker>

AMPページでサービスワーカーをインストール。 AMPページからリンク押した時にすでにServiceWorkerがページをキャッシュしておく。だから高速。

3つのパターン

  • AMP as PWA
    • AMPそのものをPWAに
  • AMP to PWA
    • AMPからPWAのページへ遷移させる。
  • AMP in PWA
    • PWAの中の要素をAMPで。(AMPをコンテンツとして使う)
      • iframe
        • 遅くなる(AMPを複数読み込んだ際、jsとかも重複して読まれるため)
      • Shadow DOM
        • こちらがおすすめ

5:00pm クロージング

f:id:naoqoo23:20170923134521j:plain

Future Web APIs

  • Credential Management API

    • サインインを改善
      • ID,passを入力するのをやめる
      • 別のデバイスでも解決
      • One-tap
      • Auto
  • WebVR

  • Web Assembly
  • and more…

5:10pm オープン Q&A

  • 通知はユーザーが設定拒否したら次はないが、ホームに追加はどうか。

    • 2度目ある。ユーザーが、
      • ウィンドウの×を押すと14日後
      • 拒否を洗濯すると90日後
    • 今後変わる必要あり
  • PWAはアプリと同じようにアンインストールが可能。ストレージも消える。

  • PWAはアナリティクスで解析できますか?

    • 可能。workbox.jsにライブラリがある。オフライン時のアクションを取っておいてオンライン時に送信。
  • service worker v2で熱い機能

    • バックグラウンド
      • オフラインで書いたメールをオンラインになった時に送信
    • サイレント通知
      • ファイルのダウンロードとか?

5:45pm 閉会

お疲れ様でした。ありがとうございました!

エンジニアサポートCROSS2017に行ってきたよ!

国内最大級のIT系勉強会!

ということで参加してきましたCROSS2017!

最大級かどうかは置いておいて、 会場はみなとみらいの大さん橋!場所が良い!海気持ち良す!

2017.cross-party.com

普段のカンファレンスでは聞けない多種多様なセッション。 ランチに懇親会のビール&フード、そしてスポンサー企業のノベルティも充実でお土産いっぱいw

業務として参加している企業を書くホワイトボードが印象的でした。 素敵な企業が多いですねー。

全体的にゆる〜い仕上がりでしたが、エンジニアの文化祭っぽい感じで楽しかったです。

ぜひみなさんも来年参加してみてはいかがでしょうか。

以下はメモ。写真もあるよー。

参加したセッションのメモ

Design × IoT

運送会社より、IoTで安全を買えないのか

では危険とは何か

事故。事故を減らせないか

なぜ事故が起きるのか

眠気や興奮

心拍でわかる

体に何か装置をつけるのはイヤ

非接触で検知できる機器がある

  • Input 心拍
  • Logic 眠気や興奮を検知
  • Output 業務指示(休憩を勧めたり、代行)

Gatebox

バーチャル彼女的な。家にいる。コミュニケーションを重視。

  • 今日雨が降るかもしれないよ
  • この前買ったアウター着て行ったら
    • 天気を雨や晴れとかでは伝えない

あえて魅せる電源タップ

隠しておきたいものをあえてスタイリッシュに。

「ちょっと違うんだよな」発言はデザイナーがイラっとしちゃうので注意

これエンジニアもイラっとするね。 誰でもイラっとするか。

デザイナーは感性で勝負しているわけではない

エンジニア同様、依頼者の仕様や背景があって、それをもとに作り上げていく。

造形のデザインだけでなくシステムのデザインやビジネスのデザインもしていく。

それがデザイナー。

3Dプリンターで自転車を作りたい

金属の3Dプリンターがある。いま熱い。

コスト高い。GTR2台分くらい。 自転車なんだからそれっぽい値段にしろ。

自転車のパーツ

  • before:2kg
  • after:350gくらい

負荷がかかるところは密度高く、強度は以前より1.7倍になった。

強度をシミュレーションできるソフトも作った。 新しいことをやると知識を最大限に生かして無料でやってくれる企業も多い。

sakura.io

webの人はwebの技術のまま、やれるものを作った。

[ランチ]One Life

IoTと生活

  • 冷蔵庫のIoT

    • 田舎暮らしの老夫婦、2時間開けなかったら救急隊が様子を見にいく
    • 冷蔵庫の中身を判断して自動注文
  • 洋式トイレ

    • 排泄物で健康判断
    • 座ったら脈拍や体温も取れる

音声AIアシスタントがもたらす未来とは。

amazon alexa

音声認識自然言語理解の音声AI

  • skills kit
    • サーバー側
  • voice service

音声AIはどんな変化をもたらしたか

  • 使う上で学習コストがない

    • キーボードとかを覚える必要もないので子供でも使える
  • 寿司屋の予約とか

    • いまはアプリを使える人がファストパスのように順番待ちを回避できる
    • 音声UIであれば誰でも使えるようになる

ブロックチェーン技術を使った開発 〜エンジニアからみたブロックチェーン技術の実際と展望

ブログ記載NGとのことなので秘密❤️

アンカンファレンス

さいごに

運営&関係者のみなさま、お疲れ様でした。

来年も楽しみにしています!

ありがとうございました!

amazonバーチャルダッシュはじまた!

amazomダッシュボタンのweb版!

ものすごいポチポチしちゃいそうw

今日はそれだけ。ちょっとテンション上がっちゃったのでついw

LINEってクリップボードにコピーした画像貼り付けれるんですね!

いまiPhone操作してたらビックリしたので投稿。

いつも友達とかにURLコピーして共有してたので衝撃でした。

もしかして昔からできたのかな…?

LINEはクリップボードから画像コピペできて、しかも画像加工もできる!

さて、なにを言ってるかわからないと思うのでキャプチャで解説。

解説

画像をクリップボードにコピーして、

トークルームで貼り付けるとー?

加工して送信できる!(^ω^)

これでわざわざ画像をiPhoneに保存して投稿する必要もありませんね!ステキ!

おまけ

最近LINEで「花火」って送るの流行ってますね。

知らない人はやってみてね。

【運営報告】今日という日は一度しかない

たまたま見たら…ラッキー(*´∀`)♪