「REST祭 - WordBench大阪&京都&長野@さくらインターネット大阪本社」に参加して #wordbench #wb_rest

今回は遠隔会議（Google Hangouts）を使った三拠点同時開催。
筆者は WordBench大阪（第６７回）会場である、さくらインターネット大阪本社へ訪れました。



グランフロント大阪タワーAの35階から眺める景色はなかなかいい感じですね！

プログラム

• https://wbosaka.connpass.com/event/62060/

個人的には「WordPress ログインにVoice Overな２段階認証をつけてみる」あたりに興味ありですが、そろそろ REST API についても詳しくなりたいなぁと思って参加しました。

以下、発表された内容を筆者なりの解釈をして速記したメモです。

筆者自体のコメントは # を付けます。

WP REST APIの仕様からみる正しくRESTfulなAPIの設計

WP REST API と React Native を使ってマガジンアプリを作る

React.js でアプリを作ることができる
1つのコードで iOS と Android で動く

CSS で見た目を作る

React Navigation と React Native Router Flux ライブラリがナビゲーションをつかうのに使いやすかった。

NativeBase で見た目を作る。このようなコンポーネントを使ったほうがやりやすい。

# React Native を使うまで（うまくいかず）

以下結局セッション中にはうまくいなかったが、それはそういうケースもあるよって事例になるかもしれないので、実際に試したことをそのまま列挙しておきます。

https://facebook.github.io/react-native/docs/getting-started.html を参考

早速筆者も試してみた（MacOS Sierra 10.12.6、XCode 8.3.3 を導入済み）

1. Node.js をインストール（npmコマンドが導入される）

2. XCode をインストール

3. npm install -g create-react-native-app （ターミナル アプリで）

4. create-react-native-app AwesomeProject（ターミナル アプリで）
5. cd AwesomeProject
6. npm start

アレ、、エラーでるな。

仕方がないので、

React Native入門 ─ Hello,Worldからネイティブ連携まで を参考にして

7. npm install -g react-native-cli
8. react-native init AppByWebTech2016

9. cd AppByWebTech2016

10. react-native run-ios

おっ、なんか出た。

 どうやらビルドは成功してシミュレーターは動作したが、しかし No bundle URL present ということでエラーになってますね。watchman をいれるのをさぼったからかなぁ。

React Nativeに入門してサンプルアプリを動かす

を参考に再チャレンジ。

brew update は最新。

11. brew install watchman （Homebrew導入が必要）
12. react-native init ReactNativeSample （ターミナルアプリ）
13. cd ReactNativeSample （ターミナルアプリ）
14. react-native run-ios （ターミナルアプリ）

一瞬アプリでて、シミュレーターのホーム画面になった。ぬぅ。
再度アプリを起動しても落ちる。

さすがにセッション中＋セッション終了の休憩時間ではサンプルコードを動かせなかった T_T;

でもちょっと悔しいので再々チャレンジ。

ReactNative事始めから簡単なサンプルを読み解くまでの実践記録ノート
を読みながら実践。

15. brew install node （Note.js をパッケージからいれてたので）
16. react-native-cliの入れなおし
$ npm uninstall react-native-cli -g
$ npm install npm@latest -g
$ npm install react-native-cli -g
17. react-native init ReactNativeSample
18. cd ReactNativeSample
19. react-native run-ios
child_process.js:495
    throw err;
    ^
Error: spawnSync /Users/kitani/ReactNativeSample/node_modules/react-native/local-cli/setup_env.sh EACCES

とかエラーでるな〜。なかなか難しいものです。
Node.js からとってきたのは、3.10.10 (パッケージの 6.11.2 推奨版）ですが、brew  install node では、5.4.0 （パッケージの 8.4.0）なんですよね。
で環境破壊したように思うので、一旦 brew の node を削除して、Node.js のパッケージ版へ置き換えてみた。

20. brew uninstall node
21. Node.js より5.4.0 （パッケージの 8.4.0） をインストール。
22. react-native init ReactNativeSample2
23. cd ReactNativeSample2
24. react-native run-ios

で、シミュレーターは動作した、よしよし。

ただサンプルアプリはクラッシュしますね。

まぁ今日の所はここで終わっておくか。

REST API な WordPress テーマについて考える。

固定ページと投稿をどう区別するのか。

Vue.js と SSR とサイト設計とフレームワークの使い所の話

Foodion のインタービューサイトの構成の話し。

多言語に Bogo を使っていたが、 ?lang=言語 で管理するようしたら、 /en/ とか URL構成が気持ち悪いものになる。

なので、言語ごとにURLをわけないという選択肢をとった。

マルチサイトで言語の対応をした。

Public Post Preview で公開前にレビューしてもらっている。

# これはつかえそうだ。

WordPress をアプリにして持ち歩こう

昔はスマホのサイズでレスポンシブデザインできたらモバイルファーストだと言われていたが、今はそれぞれのモバイルで違和感なく使ってもらうためにはどうすればいいのかという意味合いに変わってきている。

Google が「もっとモバイルファースト」のために次の２つを提唱している。

1. AMP (Accelerated Mobile Pages）
 HTML5ではなく、Google が指定する AMP形式で書いたら爆速表示になるよ。かつ、検索から Google のキャッシュを返すから更に爆速！

2. PWA (Profressive Web Application）
　モバイルアプリ市場飽和されてダウンロードされない。Webアプリをモバイルアプリみたに表示サせたほうが、ユーザー体験向上する

PWAについて
　自宅で確認していたウェブサイトを、あとで見直そうと思ったら、そのときネット接続が切れていて表示できていない。そういうのはダメでしょう。
Push 通知したいからアプリ化していた。でもブラウザで Push 通知できるようになっているよ！
　FacebookやTwitter (Twitter Lite）が実装している。

# Twitter Lite を iPhone に入れてみた！

PWA は AWPと違って爆速でなくてもいいのか。いや速いほうがいい。
Google は Lighthouse というチェックツールを提供している。
# Twitterのつぶやきで、Chrome 60から Lighthouse がデベロッパーツールに組み込まれたらしい。確かに Google、LighthouseをChromeに統合。デベロッパーツールでPWAを検証可能に（海外SEO情報ブログ）などに紹介されていた！

# Google の モバイルサイト速度チェックツール　（Twitterでつぶやかれていた）

wp pocket をためしてみて〜とのこと。

WordPress ログインにVoice Overな２段階認証をつけてみる。

Amazon エコーを持ってきて、そのデモをされた。
これと WordPress のログイン画面と連携させてみる！というもの
ユーザーとパスワードに加えて２段階認証つぃて、Amazon エコーを使った音声認識を加えるという感じ。

1. ユーザーがログイン画面を表示
2. ログイ画面表示時に、ワンタイムパスワードの生成をリクエスト
3. パスワードをpush通知
4. ユーザーはAmazon Echo にパスワードを言う
5. ユーザーが発話したパスワードを認証
6. ユーザーは、ユーザーとパスワードを入力してログイン
7. 認証が通過しているかチェック
8. 通常のWP認証と6. の認証が通過していればログインを許可

① WordPress がログインしたときに、ワンタイムパスワードの発行をリクエストするプラグインが必要。
WP voice authentication
40行ぐらい。。
# 公開はされていない模様

② パスワードの発行、失効、認証を行なうバックエンドが必要。今回は AWSを利用しサーバーレスで構築。

130行ぐらいでかいたよ！（AWS側）
パスワードの発行はダイナモで管理

③ ユーザーからの発話を受け付ける Alexa Skill が必要。

140行ぐらい（AWS側）

最後にログインのデモをされた（動画等）。凄い！

デメリットは電車内で資料作成のためにログインしようとしたら、Amazonエコーが使えないのでログインできなかったというオチを話されました。なかなかやりますね！
（アプリもあるから、それを使ってログインもできるようです）

日本では購入できるかという質問があった
＊まだ発売されていないということ。直接現地で購入しないといけないみたい。

何故 Alexa を選んだのかの質問については、Raspberry Pai に組み込めるからだそうだ。
# Amazon Echoを6,000円で自作する 〜Raspberry Pi 3 + Alexa Voice Services (AVS)〜  とかをみるとほほ〜って感じですね。

2017年9月3日 @kimipooh