ラック
Home > CMS > 記事 > 2018年9月 > WordCamp Tokyo 2018 参加レポート

WordCamp Tokyo 2018 参加レポート

カテゴリ: WordPress

WordCamp Tokyo 2018に一般参加してきたのでレポートをまとめたいと思います。

WordCampTokyo2018わぷーの顔出しパネル
WordCampTokyo2018わぷーの顔出しパネル

⁠PHPの今とこれから 2018 ~WordPress スペシャル版~

WPを使う上でPHPを知るメリット

  • 自力で拡張できる
  • セキュリティを高める
  • パフォーマンスチューニング

PHPの歴史

  • 2009:
    • 5.3: 普通のプログラミング言語として確立
  • 2015:
    • 7.0: 大幅高速化

バージョンについて

  • PHP7: 19.4%
  • EOL(End OF Life)となった5.5以下: 63%
    • WordPressの推奨環境: PHP 7.2, MySQL5.6, HTTPS
  • PHP5.6が2018/12でEOL、これで5.x系は全てEOLとなる
    • 速やかに移行を
  • PHP7に移行するにあたって
    • 大きなメリット: パフォーマンス大幅改善
    • 7.3でheredoc構文が柔軟に

PHPのこれから

  • 7.4開発開始
  • PHP8開発用コードを公開(2016/9/1)

PHPのカラー

  • 学習が容易
  • 常に役に立つ
  • PHP Conference Tokyo 2018: 12/15

私見

WordPressでサイトを構築し、公式テーマからテーマを選択し、必要な機能をプラグインをインストールすることで賄い、実際にコンテンツを作る(記事を書く)……と、ライトな使い方をするならばPHPの知識や、そもそもPHPがWordPressの下でプラットフォームとして存在していることさえ気にしないということも可能です。

しかし、自分で色々とやりたいことを盛り込んだり、開発を行うのであればPHPの知識はあった方が断然良いです。そうした意味でも、PHPの歴史的経緯や多様な言語の中での位置付け、今後の方針などについて分かりやすくまとまった内容だと感じました。

少なくともこれからのPHPは7.x系ですね。

PHP フレームワークから学ぶ WordPress 運用改善

PHPフレームワーク例

  • CakePHP
  • Laravel
  • FuelPHP
  • Symfony

WPとPHPフレームワーク

  • WPの利点
    • 簡単な拡張ならばfunctions.phpで済む
    • フックが豊富
  • CakePHPの場合
    • オブジェクト指向(Ruby on Railsの影響)
    • O/Rマッピング
      • オブジェクトとRDBSをマッピングしてくれる
    • MVC
      • モデル、ビュー、コントローラ
      • WPの場合:
        • functions.phpが全てに関わる
        • 1つのファイルにまとまってる
          • 行数が増えるに連れてカオスなコードに。保守が非常に大変なので止めましょう
      • ファイルを役割ごとに分割・構造と名前に意味を持たせて分かりやすい構造にする
        • 関連する関数がひとまとめにできる
        • コードがすっきりする
          • 階層構造で対応するコードを判別できる
            • ヘルパーはどこでも使うものをまとめたり
          • 複数人開発時の可読性の上昇
            • これが一番大事

命名規則

  • コメントで変更履歴を残すな
  • Git使え!!!
  • 作成する関数名は統一し、類推できるものに
    • キャメルケースとスネークケース
  • 関数名を見て用途を想像できること
  • WPのコーディング規約はPHPの規約と比べて独自

私見

PHPフレームワークを使用した開発に長く携わっていた登壇者の経験から、WordPress開発でも気を付けるとよりチームでの開発がしやすくなるポイントがまとまっていたと思います。

特にCMSはユーザがコンテンツの作成を続けるため、保守運用や改善の場面が静的サイトに比べて増えると想定されます。その上で、チームでの開発や保守をやりやすいようにルールを策定し、コミュニケーションを円滑化、ひいては作業の効率化に繋がると思います。

  • 命名規則をしっかり
    • 今回はPHPファイルの配置(フォルダ名・階層構造)やファイル名についてでした。
      しかし、PHPに限らずに他のことでも同じ知識が使えると思います。例えばcss設計のBEMやFLOCSSなどです。オレオレルールでもきちんとドキュメントが残されていれば通じるかもしれませんが、そうしたローカルルールよりも「広く普及しているルールを取り入れる」ことで、余計な作業を増やさずに円滑に作業を行う下地を作ることができると思います。
        - この視点で行けば、インデントをきちんとつける、複数のプロパティの指定を1行にまとめない(今のご時世でしたらどうせ自動でminifyしますし)、などの基本的なこともきちんとルールにしたいですね。
      
  • バージョン管理を使う
    • コメントで履歴を残すと行数が無用に増えてしまうので可読性が下がります
    • どうせならばバージョン管理、特に広く普及しているGitを使うのが良いと思います
      • フォルダ丸ごとコピーして日付を付けてバックアップとかいう前時代的な運用もなくなると良いですね……

WP REST API と React で始めるリモートワークでの有料 Web メディア開発

  • 講談社でWebメディアの開発に携わる
    • COURRIER JAPON
      • 海外メディアを日本語訳して配信するWebメディア
  • WP, AWSで動作
    • WP REST API + React

WP REST APIを選択した理由

  • 登壇者がジョインした数か月後に新規メディア開発が開始
    • こちらもWP
      • WP2つ別個に存在
    • URL: COURRIER JAPONのサブディレクトリで対応することに
    • URLの表示やデータの受け渡しの問題
      • WP REST APIを使うことに

React.jsを選択した理由

  • WP REST APIでデータをやり取りする
  • 見た目の方をどうするか
  • 候補
    • Angular, React, Vue
      • Google Trendを見る
        • React.jsが息が長い
      • エンジニア採用
        • 開発体制的にベンダーと副業者だけなのでエンジニアを増やしたい
        • 転職サイトの掲載求人数
          • React.jsのエンジニアの求人数が多かった
      • React.jsを採用

副業・リモートワークの工夫

  • リモートワークの問題点
    • 色々 ― Trello
      • Zeplin
      • Kibela
      • etc
        • 全てSlackのIncoming Hookで通知
          • 顔の見えない環境ではしつこいくらい通知を飛ばす
    • 情報共有が大事

私見

メディアサイトの開発に当たり、使用している技術やそれを選択するまでの経緯、工夫についてのお話でした。

リモートワークで行っているということで、個人的には興味深い内容でした。

また、Trelloを使っていたり、SlackのIncoming Webhookを使っていたりと個人的には最近取り組んでいるツール・サービスの名前が出たので他者の実践例を知ることができたという点でも貴重なお話でした。

より便利に、効率よく ! WordPress 次期エディター「Gutenberg」の基本的な操作を知って、今日から使い始めよう

Gutenbergの概要

  • 新しいエディタ

何が変わるか?

  • 編集画面が変わる
  • 要素を「ブロック」として用いるのでページの作り方がまるっきり変わる

操作デモ

  • ブロック追加
  • 他のブロック変換
  • スポットライトモードでブロックを強調
  • エディタモード変更
    • コードエディタではGutenberg専用のコメントタグが入るので注意
  • ソーシャルメディア・動画の埋め込み
  • ショートコード埋め込み
  • 旧エディタで作成したものをブロックに変換
    • クラスが外れるので注意
      • デザインが意図しないデザインになることも
  • ショートカットキーで操作

リリース前の準備

  • リリースしていきなり作りましょう、は難しい
    • 両方エディタを使えるようにClassic Editorをインストール
    • 旧エディタの編集のリンクを作る(設定画面で設定)
  • いずれはGutenbergを使う方向に
  • 慣れること
  • 旧エディタで作った内容をブロック変換をしてみる
    • 変換されるかどうかテスト
      • カスタムHTMLブロックを作ってコードを維持する

私見

Gutenbergによる変更点や使い方のデモなど、Gutenbergに備えるための基本的な情報が揃っているセッションだったと思います。

いずれはGutenbergに移行しないといけないので、React.jsを触り始めないと、と改めて感じました。

個人的には、現状Markdownで記事を流し込んでいるため個人サイトではあまりGutenbergの恩恵がなさそうなのですが、その辺りはどうなっていくのでしょうか、と後でふと思いました。

WordPress で EC サイトを作る実践的な知識と技術【WooCommerce 編】

1. ECサイトを作る前の準備

  • 売れるサイトと売れないサイトの差
    • 最初から意識を持っておくことが必要
      • 100万売り上げ目標ならば1割は運営コストなどで消えると思う
      • 原価率高い、価格競争激しい商品はECが向かない
        • ストーリーを売れる会社ならば行けそう
    • amazon: 地球上でもっともお客様を大切にする企業
      • お客様目線
        • カッコ良くし過ぎる→ページの表示速度落ちる→1秒遅くなると売り上げが下がる
          • 表示速度を気にする必要がある。あくまで売りたい側ではなく、消費者目線で何がうれしいのかを考える
  • 必要なもの
    • 顧客、店舗、仕入れ業者、開発者
    • 顧客と店舗: 決済と配送が重要
      • 顧客の支払いやすさ、受け取りやすさ
        • 7~8割はクレジット、他代引き・コンビニ・モバイル決済・Amazon Pay(Amazonに登録されている情報で済む→住所入力不要=決済しやすい)
        • 男性はEC、女性は楽天ポイントが強い
      • 開発者が気にするところ
        • 顧客・店舗・仕入れ
          • 仕入れ割と重要
            • 例: 仕入れにかかる日数
              • 法律的に発送できない状態でお金を取ってはいけないとあるので、予約販売などで発送が1か月先で決済する等の状況には注意
        • 商品購入の必要なことを洗い出す
          • リードタイムを読む
          • 例: 使うシチュエーションに対応することができるか?使い捨てのもので「すぐほしい」というニーズに即日配送できるか?
        • 法的資格も必要
          • 例: お酒
            • 生年月日入力必須、という制約もある
    • セキュリティ&マーケティング
      • 20~15年くらい前はECサイトを立ち上げれば売れた
        • 今は色々なサイトから選ばれるように
          • 売り上げを上げても情報漏えいで倒産や合併させられるなど……
      • WPは自動アップデートがあるのでセキュリティは高め
        • とはいえ、守るべきことは守ること
          • コア・プラグインのアップデートは必ずする
          • 最新のコードを書くようにする
          • 親テーマを使う場合は子テーマを作る
          • コアは触らない
          • 定期的なバックアップは必ず取る
        • 必ず動作検証・テスト環境(ステージングサイト)を作ること
      • マーケティング&ブランディング
        • 検索トレンド
        • SNSでの注目度の確認
          • 一時的すぎないもの
        • 競合他社は?
        • リピート商品ならばリピート率は?
          • ストーリーを付けることでリピート商品にできる場合も

2. 準備を元に実際に構築する

  • クライアントの要望、マーケットの現状、将来的な成長性
  • ECシステムは大きく3つ
    • 運用保守のコストがかけられない場合: ASP
    • OSS: デザイン・機能の拡張性。工夫をしたい
      • 運用保守にコストをかけられること
      • 販売方法が複雑
      • コンテンツの多いECサイトはWooCommerce向き
      • UI/UXの工夫
    • MALL: 楽天など
  • WooCommerceのスペック
    • 5注文/秒
    • 1時間18,000注文
    • 同時ログイン5,000
  • OSSの方がセキュリティが高い
    • カーメロギー大学・スタンフォード大学の研究結果
  • オススメ方法
    • テーマ: 子テーマ作る
      • SnowMonkey
    • 拡張プラグイン
      • 公式で300ある
      • 日本語対応がされていないことが多い……
    • カスタマイズ
      • 英語が読めればドキュメントを読んで
  • 時代はスマホファースト
    • 女性向け: 9割スマホで購入
    • PCよりもスマホ
      • スマホでどれだけかっこよく、早く見られる、決済できるか
    • スマホのUI/UXの黄金律はまだない
      • テスト・検証は必要
      • 常に改善
        • 運用保守が大切

私見

ECサイト開発を行うに当たって気を付けることを網羅的に押さえた内容だったと思います。個人的にはECサイトにはあまり縁がないので、こういった話を聞くことができたのは興味深かったです。

技術だけでなく、経営や法律的な観点からの話は技術一辺倒の世界ではなかなか聞くことができないと思うので、その点でも興味深かったです。

Challenge PWA!! Web の舞台はホーム画面へ進撃する !

PWAとは

  • ローカルにインストールしたアプリになるイメージ
    • ホーム画面にアイコン
    • インストール時にWebコンテンツやリソースのキャッシュ
    • キャッシュされたJSがオフラインでアプリを制御
    • 今のところAndroidのみ
      • バックグラウンドでの動作(Background Sync)
      • Push通知
  • キャッシュとオンラインコンテンツをService Workerが仲立ち

メリット

  • 速い
    • オフラインキャッシュ
  • 導入が早い
    • 既存コンテンツにちょっと足す
  • ホーム画面にアイコン
    • ブックマークってあまり利用しない……
  • Push通知
  • バックグラウンド
  • Webのいいところをとれる
    • 検索に載る
    • 更新が容易
    • 多様なプラットフォームに対応
  • 導入コストが低い
  • 通信料を抑えられる

何故今年PWA?

  • ServiceWorkerがほぼすべてのブラウザで対応
    • IE?そんなものはなかった
    • Safariで使える=iPhoneで使える
      • 海外ではAndroidシェア率8割とかあるのでPWA導入率も高かったりする
    • 日本・世界共にスマホに絞れば99%

注意点

  • iPhoneでPWAでアドレスバーを表示しないとき
    • 戻るボタンがないので戻れない
    • ナビゲーションを付けることを心がける

導入

  • 段階的導入
    • 0から作らなくても良い
    • SPAでなくても良い
      • 愛称は良いが
  • Progressive Enhancement
    • 環境の差異を受け入れて多くの環境で情報表示できるように
  • アプリ化は必須ではない
    • ServiceWorkerはアプリ化しなくても動く
  • 2つのファイルとコード追加
    • ファイルの構成は3つ
      • コンテンツアセット
        • 普通のコンテンツ(レスポンシブ)
        • キャッシュするもの・しないもの
        • アイコンはお忘れなく
        • オフライン時に表示するコンテンツの用意
      • Manifest
        • jsonで設定ファイル
      • ServiceWorker
        • JSコード
    • HTTPS必須
    • HTTPSサイトならばManifestとServiceWorker追加でひとまずPWAになる

最低限設定するところ

  • サイト名・短縮名
  • 色、アイコン
  • オフラインページ
    • JSでゲームを用意するなど
  • キャッシュプラン
  • キャッシュのコントロール
    • Cache First: キャッシュがあればキャッシュ優先
    • Online First: ネット上の情報優先
    • No Cache: キャッシュしない
  • Cache API
    • 有効期限ない
    • 自分でコントロールしないと消えない
      • 同期・更新・削除は自分で行う
  • 一般的なキャッシュ削除
    • Activate時に削除
      • ServiceWorkerはオンライン時に同期、次回起動時に更新されたものが動作
      • Cacheは明示的に更新orServiceWorkerがActivate時間に削除・再取得
    • 考慮
      • 更新タイミング
      • インタラクティブな動作

PWA for WordPressプラグイン

  • キャッシュの有効期限を設定
    • IndexedDB使用
  • キャッシュの除外が柔軟にできる

私見

イマイチどういう仕組みなのかを理解しておらず、やや遠巻きだったPWAの初歩について知識を得ることができました。個人的に雑にnode.jsでチャットを作ってService Workerに触ったことがあったので、意外とすんなり納得することができました。

どんなものか実際の動作を見るために、小さなサイトで実験的にPWAを試してみるのも面白そうだと感じました。

アクセス解析で WordPress サイトをぐるぐる成長させよう

アクセス解析ツールは何のため?

  • 解析の本質はコミュニケーション
    • 絶対的な正解はない
      • 自分の納得できる答えを探せるように
  • 自分の考えを言語化できるように
  • Google Analytics導入率: 上場企業の84%
    • ユーザ
      • 難解アクセスしてるか
      • どんな環境か
      • どう動いているのか
    • 集客
      • どれだけ認知・成長しているか
    • 行動
      • コンテンツが意図したものになっているか
      • ユーザを逃がしていないか
    • コンバージョン
      • 成果
      • 目標達成率
      • 必ず最初に設定する

解析に使えるツール

  • Google Search Console
    • Google Analyticsとセット
  • Google Trend
  • ヒートマップツール
    • 大体有料

アクセス解析をどう使うか

  • 次に進むための判断材料
    1. 戦略(スタート・ゴールを定義)
    2. 仮説
    3. 施策
    4. 集計
    5. 解析
      • 解析から仮設、以下ループへ
      • 仮説が間違えているならば、1.を見直す必要があることも

ユーザのシナリオ

  • シナリオから考える
    • HPを新人から信頼される営業マンに鍛えるようなもの
  • いきなり本格的にストーリーを考えるのは難しいので、ステップ的に考える
    • 例: Google Analyticsのカテゴリ
      • 集客・行動・コンバージョン
    • 集客→行動→コンバージョン、とステップを進ませるには?
  • スタート・ゴール: 誰にいつ何をどうやって売るの?

手段を目的にしない

  • サイトを成長させるデータを識別・判断する
    • 本当に仮設通りにステップが進んでいるか?
    • 評価できる項目を洗い出す
      • 例:
        • キーワード流入
          • 検索流入セッション数と変化割合
        • キーワードでどれだけ表示されたか
          • キーワード別表示回数
    • 次にどうするかを考えることが大切
      • 良かったね、悪かったねという結果を見るだけでは×
      • 未来を考える。数字だけを見ては見逃す
      • 成長を判断できる指標を見付ける
  • 戦略を基にKPIを見付けよう

私見

周りの人とのシンキングタイムが設けられた、一方方向一筋縄では行かなかったセッション。限られた時間の中で自分の考えをまとめ、意見として発表することで頭の別の部分を使いました。

それはそうとして、「手段を目的にしない」といううっかりすると陥りがちなところはきちんと押さえており、改めて意識と最初のゴールの定義の重要性を感じました。

全体の私見

今回のWordCamp Tokyo 2018のテーマが「Challenge!」だったので、ECやPWAなど、個人的には普段あまり聞かない分野のセッションを聞いてみました。

新たな発見や気づきがあり、知識も得ることができたので有意義な時間にできたと思います。

また、毎回思うのは人数もさることながら熱量が凄い。この熱量を持ち帰って、新たな動力源にできればと思います。

アフターパーティ入口の張り紙
アフターパーティ入口の張り紙

え、この地下なの……?という感じの入り口
え、この地下なの……?という感じの入り口

今回は懇親会ではなくアフターパーティということで、渋谷のハウスクラブで大音量のBGMと光、ミストが乱れ飛ぶ中での話というのはこれもまた斬新でした。普段そんな場所行くことがないので余計にですね!

アルコールは諸事情によりNGだったのでオレンジジュースで
アルコールは諸事情によりNGだったのでオレンジジュースで

乱れ飛ぶスポットライト、レーザー、そして降り注ぐミスト。その中にWordCamp Tokyo 2018の文字が流れる不思議空間
乱れ飛ぶスポットライト、レーザー、そして降り注ぐミスト。その中にWordCamp Tokyo 2018の文字が流れる不思議空間

タグ: イベント

 



関連する記事一覧