WordCamp PWAの振り返り


WordCampWordCamp WordCampは、WordPressに関連するあらゆることを扱う、地域で気軽に開催されるカンファレンスです。WordPressコミュニティが集まり、年間を通じて学んだことを互いに教え合い、喜びを分かち合う場のひとつです。詳しくはこちら Europeに向けて、運営チームはWordCamp.orgを強化しプログレッシブウェブアプリケーション(PWA)にする作業に懸命に取り組みました。

これはキャンプ開催直前の数日間にデプロイデプロイ ローカルの開発環境から本番のウェブサーバーへコードを公開し、訪問者が利用できるようにすること。され、イベント中にも調整が行われました。このプロジェクトの目標は、WordCamp Europe 2019向けのMVP実用最小限の製品 「実用最小限の製品(MVP)とは、初期の顧客を満足させ、将来の製品開発に向けたフィードバックを得るのに十分な機能だけを備えた製品です。」- Wikipediaを提供し、その後も開発を継続して、PWAの機能をすべてのWordCampで役立つものにすることでした。

現在の状況

PWA機能の作業は当初、独立したプラグインとして行われ、現在はWordCamp.orgのコードリポジトリに統合されています。基盤となるフレームワークとしてPWA機能プラグインを使用し、その上に追加のカスタムコードを加えています。現時点ではWordCamp Europe 2019のウェブサイトでのみ有効であり、まだ広く利用できる状態ではありません。

サイトを強化するPWA機能は次のとおりです。

  • オフラインコンテンツ:
    • オンライン中にページを訪問すると、そのページがデバイスに保存され、オフラインでもアクセスできるようになります。たとえば、イベント中に会場のWi-Fiが使えなくなった場合などです。(注意点:12
    • オフライン中に保存されていないページを訪問すると、スケジュールを含む特別なページテンプレートが表示されます。将来的には、イベントの日付や場所など、その他の重要な情報も掲載される予定です。
  • 静的アセットのキャッシュ。頻繁に変更されないファイルやREST APIREST API REST APIは、HTTPリクエストを使用してデータのGET、PUT、POST、DELETEを行うRESTfulアプリケーション・プログラム・インターフェース(API)の略称です。アプリケーションのフロントエンド(「スマートフォンアプリ」や「ウェブサイト」など)がデータストア(「データベース」や「ファイルシステム」など)と通信するための仕組みです。
    https://developer.wordpress.org/rest-api/
    エンドポイント(例:CSSCSS CSSはカスケーディング・スタイル・シートの略称です。サイトのデザインや外観を制御します。JavaScriptJavaScript JavaScript(JS)は、ウェブブラウザー内でインタラクティブな効果を作成するためによく使われるオブジェクト指向のコンピュータープログラミング言語です。WordPressでは、ユーザー体験を向上させるためにJSを幅広く使用しています。PHPがサーバー上で実行されるのに対し、JSはユーザーのブラウザー内で実行されます。
    https://www.javascript.com
    、画像ファイルなど)はより積極的にキャッシュされるため、次回以降の訪問時にページがより速く読み込まれます。
  • ホーム画面に追加。ネイティブアプリをインストールするのと同じように、モバイルデバイスにWordCamp.orgを「インストール」して、すばやくアクセスできるようにできます。将来的には、インストールした訪問者がすべてのコンテンツをオフラインで保存したり、その他の機能強化を利用したりできるようになる予定です。
    • 古いバージョンのiOSiOS iPhoneやiPadで使用されているオペレーティングシステム。は、この機能をサポートしていません。

これらの従来のPWA機能に加えて、チームは「イベント当日」用のカスタムページテンプレートも作成しました。イベント開催中に使用すると、現在行われているセッション、次に予定されているセッション、WordCampのブログからの最新投稿をリアルタイムのスケジュールとして表示できます。ブラウザーが古くPWA機能をサポートしていない場合でも、すべての訪問者が利用できます。

サイトをホーム画面に追加する機能を除き、上記の機能はデバイスに関係なく訪問者が利用でき、デスクトップやノートパソコンでもモバイルデバイスと同じように動作します。

検討されたものの、期限内に構築できなかった追加機能は次のとおりです。

  • セッション情報とスピーカー情報をデフォルトでオフラインキャッシュする機能(つまり、最初に関連ページを訪問する必要がない機能)
  • モバイル向けに最適化されたサイトのヘッダーヘッダー サイトのヘッダーは、通常、訪問者が最初に目にするものです。ページ上部にあるマストヘッドやヘッダーアートは、ウェブサイトの外観の一部です。コンテンツや、あなたまたは組織のブランドに対する訪問者の印象に影響を与えることがあります。また、画面サイズによって見え方が異なる場合があります。とフッター
  • ユーザーがお気に入りに登録した、今後開催されるセッションのプッシュ通知
  • 重要なお知らせのプッシュ通知

デザインの作成、ワイヤーフレームへのフィードバック、指針の提供、アイデアの提案、コードの記述など、PWAプロジェクトに関わってくださった皆さんに感謝します。

@mburridge@ziontrooper@avillegasn@Iceable@tfrommen@macloune@marcusjwilson@vdwijngaert@westonruter@hlashbrooke@iandunn@tjnowell@jb510@coreymckrill@andreamiddleton@sippis@melchoyce@karmatosed@garyj@webcommsat

プロセスを振り返る

WordCamp Europeが終了した今、開発プロセスとその全体的な進み方を振り返ると役立つでしょう。何らかの形でプロジェクトに関わった方からのフィードバックは貴重です。以下の質問に答える形で、ぜひコメントしてください。

  1. PWA開発プロジェクトでうまくいったことは何ですか?(何を続けるべきでしょうか?)
  2. あまりうまくいかなかったと思うことは何ですか?(何をやめるべきでしょうか?)
  3. WordCamp.org向けに新しい機能やツールを開発する際、どのように変えるとよいと思いますか?(どのような新しいことや実践を始めるべきでしょうか?)

#pwa