WordCamp Haneda 2019 参加レポート

WordCamp Haneda 2019の1日目セッションデイに一般参加してきましたので、簡単にレポートを書き留めておきます。

全体

電車の都合で11時半前に現地入りし、1つセッションを聞いてお昼。スポンサーブースを回って情報収集し、3つセッションを聞いてまた情報収集。 ……という感じで、聞いたセッションの数は4つと少な目、その代わり休日なのにわりとガチめな仕事のお話と情報収集を行っていました。 その後懇親会に参加し、帰路の都合で途中退場しました。 以下、セッションについて。

WordPressコンテンツ配信の新しい在り方　Webサイト・コンシェルジュ（音声UI）の実装　〜 スマートスピーカー + WordPress REST API + WordPress AIプラグイン 〜

• 自己紹介をAmazon Echo(Alexa)を使って喋らせるデモからスタート
• 登壇者はプラグイン「SNS Count Cache」などの開発を行っている方
• 新しいコンテンツ配信形態
  • 状況の変化
    1. WPについて
       • WPの市場: 32%
       • ver.4.7でREST APIがコアに統合
       • ver.5.0でエディタがブロックエディタに変更
    2. スマートスピーカー普及率41%(アメリカ)
    3. AIの民主化(TensorFlowなど各種ライブラリで提供され、ある程度の技術者であれば開発が行える環境が整ってきている)
  • こうした状況の変化から、スマートスピーカーによるコンテンツ配信という形態が可能に
• 「Webサイトコンサルジュ」とは
  • ユーザの要望に応じてコンテンツを提供する音声UI
    • スマートスピーカーに話しかけるとコンテンツを応答してくれる
  • メリット:
    • 音声を利用できる
      • 忙しい時間の合間に利用できる
      • 目や手の不自由な方でも利用しやすい
      • PCやスマホが扱いづらいお年を召した方でも抵抗感が少ない
  • できること:
    • 最新記事の紹介
    • 最近投稿された記事の取得
    • etc.
  • 対話型で進められるので、最初は記事の取得、次に取得した記事のうち何件目や、記事の週間ランキング……と深堀りしていくこともできる
• デモ
• WP側: REST APIで記事データを配信
  • 人気記事などはデフォルトには機能がないのでプラグイン使用。一部AI併用(記事の要約など、後述)
• スマートスピーカー
  • Amazon Echo(ハード)
  • Alexaスキル(ソフト)
    • Alexa: 音声の認識・生成(話しかけられた音声データをJSONにしてエンドポイントへ)
      • 音声インターフェースの設計
    • エンドポイント: スキルの処理(コンテンツデータの取得)
      • 処理ロジックの開発
    • 双方を紐付け
      • Alexaスキルを有効化
  • これらの各種ロジック実装の説明
• WPプラグイン × AI
  • AIとは: 知的なコンピュータプログラムを作る科学と技術
  • 記事の取得(AI使用部分)
    • 関連記事
    • 要約
• まとめ
  • WPの進化、スマートスピーカーの普及などの状況の変化
  • REST API等を応用して音声UIの仕組みを実装
  • スマートスピーカーを利用した新しいコンテンツ配信形態を検討してみてはいかがでしょうか？

所感

1つ目のセッションからかなり上級な内容を聞きました。スマートスピーカーからWordPressで構築されたサイトの情報を取得し、スマートスピーカーに喋らせる……ということを技術的にどう実現したか、というお話。 複合的な技術なため自分からすれば難易度はかなり高いと感じましたが、ユースケースによっては非常に高い効果を得ることができるのではないかと夢を感じさせました(行きつけのカフェの営業情報を車内でキャッチしたりとか……)。

WordPress で IoTをはじめよう

• IoTとは
  • Internet of Things(モノのインターネット)
  • なんでもネット接続して制御
    • スマホで色が変えられる照明
    • スマホで施錠・解錠できる鍵
• 背景:
  • 小型コンピュータの普及
    • Raspberry Piなど
  • 無線技術
    • WiFi
    • Bluetooth
    • BLE
    • LPWA
    • ZigBee
  • これらを使う
• IoT器具とWPの通信手段
  • REST API
    • ヘッダ長が長い
  • WebSockets
  • MQTT
    • ヘッダ長が短い
    • 1対多が可
• WPのREST API(エンドポイント)をカスタマイズしてRasPiのデータを投稿
• サンプル
  • わぷーの画像を流す
    • 画像をセットするものと画像を読みだすものの2つのREST APIを作成・カスタマイズ
    • RasPIのPythonでURLから取得、表示させる
  • 温度・湿度ロガー
    • RasPiのセンサーで取得した温度などのデータをカスタム投稿に温度を突っ込む
    • 不快指数をSVGでグラフ描画
  • フライトレーダー
    • 電波を受信
    • カスタム投稿で保存
    • 地図に表示

所感

最近Raspberry Piを真面目に触っていないですが、IoTを使ってWebと上手く繋げることができれば、新しい世界が開けるのではないかと感じました。 個人的にはLPWAが個人で使えると夢が広がりそうなきがします。AWSダッシュボタンとか……。

WordPress で Webサービスの構築

• 登壇者は社交ダンス教師の方
• Webサービス開発の経緯
  • 協議団体から採点についての新システムの協力依頼
    • 今まで紙だったのをタブレットでやることに
• 管理画面で集計(PC)・採点(タブレット)を行う設計
  • 最初はWebサービスではなく売り込む予定だった
• システム概要
  • 予選はチェック法なのでチェックボックスで実装
  • 決勝は順位法なのでダイヤル(iPhoneの日時指定)のUIにした
    • デフォルトのinput要素でWindowsのブラウザにはそのようなデザインはなかったため、jQueryプラグインを使用
• 1つのメールアドレスで複数ユーザ登録できるようにカスタマイズ
  • 親ユーザと子ユーザでグループ
• フィルターフックを利用して諸々の動作を実現
• 課金対応(PayPal, Stripe)
• 社交ダンスの大会は休日に行われる可能性があるため、6日間でユーザ・データを削除するようにした
  • 重複ログイン禁止のため

所感

登壇者ご自身の経歴と経緯から、あるWebサービスを構築することになったのでその経緯と技術的な話でした。 WordPressも使い方によってはこういったサービスの構築に活用できる、と言うことを改めて感じました。 また、ユーザの作成周りがわりとトリッキーなカスタマイズになっているのが驚きでした。

ブロックエディターを「削る・飾る・加える」

• ブロックエティタの「+」を押して開くブロック一覧の中身について
  • よく使うものをリストアップしたり
  • いらないものを削ったり
  • といったカスタマイズ・整理をするというニーズ
• 削る
  • ブロックの個数: 69個(ver.5.2 Beta3)
    • 半分以上埋め込みのブロック
  • 方法:
    • ブロックを管理するプラグイン
      • Disable Gutenberg Block Manager
      • Gutenberg Manager
    • コードを書く
      • 例: フィルターフックにブロックのホワイトリストを指定してreturnする
      • 投稿タイプごと、日時で指定など、細やかな制御ができる
    • 5.2からコアに実装されるブロック管理機能
      • コアで管理機能が増えるはず
  • ブロックエディタから省くのではなく、ブロックの選択肢一覧から隠す、という方向性
  • 適用される範囲は？バッティングする？→要確認
    • ユーザごとに適用
      • コードで書く場合は全ユーザ適用になるのでは
• 飾る
  • ブロックスタイルを既存のブロックに追加し、見た目のバリエーションを増やす
  • 方法:
    • コードを書く
      • 現時点ではプラグインはない？
      • React？
        • そんなことはなかった  
  • ブロックスタイルはクラス付与
    • JSでクラス名を変更できるように、cssは対応するクラスにスタイル適用
  • ブロックを加えなくても、スタイルを変更することで実現できる場合はその方が楽かも
• 加える
  • ブロックの種類(ブロックタイプ)を増やす
  • 方法:
    • ブロックタイプを追加するプラグイン
      • Block Gallery
      • GuidePost
        • ページ内リンクのアンカー
          • ToCを自動生成してくれるプラグイン
    • 数種類のブロックを追加するプラグイン
      • ブロック以外の機能も付いてくる
      • Snow Monkey Blocks
    • 既存プラグインが対応したケース
      • The Events Calendar: ブロックエディタのUXだがデータの入る場所はpost_metaのまま
    • 自分で作って追加
      • 全て自作
        • 静的ブロックは簡単
        • より高機能なブロックは難易度が跳ね上がる
        • React力は必要になってくる
      • 支援プラグインを使う
        • カスタムフィールド製造系プラグインが対応している
        • 新しいブロック製造系プラグイン
• まとめ
  • デフォルトは基本セット
  • ブロックを「削る」「飾る」「加える」方法はそれぞれ。方法は複数
  • まだみんな手探り状態。情報収集と情報共有していくことが大事

所感

みんな手探りなブロックエディタについての話。 ブロックをユーザの要望に応じてカスタマイズするというのは今後必ず出てくると思うので、どういう方法と道筋があるのか、ということで非常に参考になる内容でした。 個人的にGutenberg(プロジェクト名、および5.0より前のプラグインの名前)とブロックエディタ(5.0で正式に導入された際の名称)をごっちゃにしていたので、気を付けようと思いました。

全体のまとめ

今回はセッション数をそこそこに抑えて休憩を多めに入れた、かつスポンサーブースを多めに見て回った、という感じの参加の仕方でしたが、欲しい情報を仕入れることができたのと、今後のWebコンテンツ配信と活用の仕方について参考になる情報を聞くことができたので非常に有意義なイベントとなりました。 私情ですが、ここ最近多忙だったので、行く気力がかなり削がれており行くかどうか悩んでいたのですが、参加して良かったです。

写真

以下会場や懇親会の写真を。

• 

• 

• 

• 

• 

• 

• 

•