Clone Gutenberg

  1. git clone git@github.com:WordPress/gutenberg.git

Install node and npm

複数のJSプロジェクトで作業している場合、ノードバージョンマネージャーを使用することが理にかなっているかもしれません。マネージャーを使用すると、選択した異なるノードおよびnpmのバージョンに切り替えることができます。

[推奨するのはnvmです。

nvmをインストールした後、クローンしたプロジェクトのトップレベルディレクトリから以下を実行します: 

  1. nvm install 'lts/*'
  2. nvm alias default 'lts/*' # sets this as the default when opening a new terminal
  3. nvm use # switches to the project settings

次に依存関係をインストールします: 

  1. npm ci

Do you have an older existing Gutenberg checkout?

既存のGutenbergチェックアウトがある場合は、node_modulesを完全にクリーンアップし、依存関係を再インストールしてください。

これにより、将来のエラーを回避できる可能性があります。 

  1. npm run distclean
  2. npm ci

iOS

CocoaPods

CocoaPodsは、Reactおよびサードパーティの依存関係を取得するために必要です。インストール手順は、Rubyがマシンでどのように管理されているかによって異なります。

System Ruby

MacOSに付属のデフォルトのRubyを使用している場合、Cocoapodsのようなgemをインストールするためにsudoコマンドを使用する必要があります: 

  1. sudo gem install cocoapods

注意: Mac M1はCocoapodsと直接互換性がありません。問題が発生した場合は、ffiパッケージをインストールするためにこれらのコマンドを実行してみてください。これにより、適切なアーキテクチャでポッドをインストールできるようになります: 

  1. sudo arch -x86_64 gem install ffi
  2. arch -x86_64 pod install

Ruby Manager

Rubyバージョンマネージャーを使用している場合、Cocoapodsやffiパッケージを手動でインストールする必要はないかもしれません。選択したマネージャーのドキュメントを参照してガイダンスを得てください。

rbenvは、WordPress iOSアプリ内でGutenbergを実行している場合に推奨されるマネージャーです（デモアプリのみではなく）。

Set up Xcode

Xcodeをアプリストアからインストールし、開いてください:

  • ライセンス契約に同意します。
  • Xcode > Preferences > Locations > Command Line Toolsが現在のXcodeバージョンを指していることを確認します。

Xcodeコマンドラインツール設定のスクリーンショット。

react-native doctor

react-native doctorは、開発環境に不足しているものを特定するために使用できます。Gutenbergチェックアウトから、または/packages/react-native-editor folderに対して、次のコマンドを実行します: 

  1. npx @react-native-community/cli doctor

ターミナルで実行中のreact-native-community/cli doctorツールのスクリーンショット。 

  1.  <a name="run-the-demo-app"></a>
  3. ### Run the demo app
  5. すべての一般的な問題とiOSの問題が解決されたら、次を試してください:  
  8. ``````bash
  9. npm run native start:reset #starts metro
  10. `

別のターミナルで次のように入力します: 

  1. npm run native ios

すべてがビルドされるのを待った後、デモアプリはiOSシミュレーターから実行されるはずです:

iOSシミュレーターでのブロックエディタのスクリーンショット。

Android

Java Development Kit (JDK)

React Nativeドキュメントで推奨されているJDKはAzul Zuluと呼ばれています。これはHomebrewを使用してインストールできます。Homebrewをインストールした後、ターミナルで次のコマンドを実行してインストールします: 

  1. brew tap homebrew/cask-versions
  2. brew install --cask zulu11

システムにJDKがすでにインストールされている場合、それはJDK 11以上である必要があります。

Set up Android Studio

Androidアプリをコンパイルするには、Android Studioをダウンロードします。

次に、既存のプロジェクトを開き、クローンしたGutenbergフォルダーを選択します。

ここから、次のスクリーンショットで強調表示されているキューブアイコンをクリックしてSDKマネージャーにアクセスします。SDKマネージャーへの別の方法は、Tools > SDK Managerに移動することです:

Android Studioでのパッケージマネージャーボタンの位置を強調表示したスクリーンショット。

この画面でSDKプラットフォーム、パッケージ、その他のツールをダウンロードできます。特定のバージョンは「パッケージの詳細を表示」チェックボックスの背後に隠れているため、チェックを入れてください。私たちのビルドにはE2Eおよび開発用の特定のバージョンが必要です:

Android Studioのパッケージマネージャーのスクリーンショット、パッケージの詳細を表示するチェックボックスを強調表示。

build.gradleから関連するすべてのパッケージをチェックしてください。「適用」をクリックしてアイテムをダウンロードします。node_modules内のbuild.gradleファイルから他の関連依存関係があるかもしれません。

ファイルを掘り下げたくない場合、スタックトレースは不足しているパッケージについて不満を言いますが、このルートを通るにはかなりの数の試行が必要です。

build.gradle構成ファイルのスクリーンショット。

SDKプラットフォームを表示するパッケージマネージャーのスクリーンショット。

SDKツールを表示するパッケージマネージャーのスクリーンショット。

Update Paths

次の環境変数をエクスポートし、$PATHを更新します。通常、ターミナルでzshを使用している場合は、これを~/.zshrcファイルに追加できます。

in our terminal, or ~/.bash_profile if the terminal is still using bash. 

  2. ### Java that comes with Android Studio:
  4. export JAVA_HOME=/Applications/Android\ Studio.app/Contents/jre/Contents/Home
  6. ### Android Home is configurable in Android Studio. Go to Preferences > System Settings > Android SDK
  8. export ANDROID_HOME=$HOME/Library/Android/sdk
  9. export PATH=$PATH:$ANDROID_HOME/emulator
  10. export PATH=$PATH:$ANDROID_HOME/tools
  11. export PATH=$PATH:$ANDROID_HOME/tools/bin
  12. export PATH=$PATH:$ANDROID_HOME/platform-tools

保存してからソースを取得するか、新しいターミナルを開いて変更を反映させます。 

  1. source ~/.zshrc

または 

  1. source ~/.bash_profile

SDKパスが見つからない場合は、Android Studio > Preferences > System Settings > Android SDKを訪れてその場所を確認できます。

Android StudioでSDKパスが見つかる場所のスクリーンショット。

Create a new device image

次に、仮想デバイスイメージを作成します。右下のAndroidのアイコンが付いた電話アイコンをクリックします。

Androidデバイスマネージャーボタンの位置を示すスクリーンショット。

これにより、「Android仮想デバイスマネージャー」（AVD）が表示されます。「仮想デバイスを作成」をクリックします。お好みの電話タイプを選択してください:

仮想デバイス構成設定のスクリーンショット。

ターゲットSDKバージョンを選択します。これはbuild.gradleファイルに設定されているtargetSdkVersionです。

Androidデバイスマネージャーのワークフローでシステムイメージを選択するスクリーンショット。

トグルできるいくつかの高度な設定がありますが、これらはオプションです。完了をクリックします。

Run the demo app

メトロを開始します: 

  1. npm run native start:reset

別のターミナルで次のコマンドを実行して、Androidエミュレーターでデモアプリを起動します（エミュレーターがまだ実行されていない場合、このコマンドの一部としても起動されます）: 

  1. npm run native android

少し待つと、次のような画面が表示されます:

Androidシミュレーターでのブロックエディタのスクリーンショット。

Unit Tests

  1. npm run test:native

Integration Tests

Appiumには独自のドクターツールがあります。これを実行するには: 

  1. npx appium-doctor

ターミナルで実行中のappium-doctorツールのスクリーンショット。

必要な依存関係を解決します。

iOS Integration Tests

iOSローカル環境を問題なく実行できることがわかっている場合、iOSのE2Eは簡単です。実行中のメトロプロセスを停止します。これは以前にnpm run native start:resetで起動されました。

次に、ターミナルで次のように入力します: 

  1. npm run native test:e2e:ios:local

ファイル名を渡すことでも、テストのサブセットを実行できます: 

  1. npm run native test:e2e:ios:local gutenberg-editor-paragraph.test.js

すべてがうまくいけば、次のようになります:

video src=”https://user-images.githubusercontent.com/1270189/137403353-2a8ded47-5c7c-4f99-b2cc-fa6def4b4990.mp4“ data-canonical-src=”https://user-images.githubusercontent.com/1270189/137403353-2a8ded47-5c7c-4f99-b2cc-fa6def4b4990.mp4“ controls=”controls” muted=”muted” class=”d-block rounded-bottom-2 width-fit” style=”max-height:640px”>

Android Integration Tests

新しい仮想デバイスを作成します packages/react-native-editor/device-tests/helpers/caps.jsで指定されたデバイスに一致します。この執筆時点では、これはAndroid 9（API 28）を使用したPixel 3 XLイメージです。

最初に仮想デバイスを起動します。電話アイコンをクリックしてAVDに戻り、緑の再生ボタンをクリックします。

Androidシミュレーターを起動する方法のスクリーンショット。

メトロプロセスが実行されていないことを確認してください。これは以前にnpm run native start:resetで起動されました。

次に、ターミナルで次のように実行します: 

  1. npm run native test:e2e:android:local

ファイル名を渡すことでも、テストのサブセットを実行できます: 

  1. npm run native test:e2e:android:local gutenberg-editor-paragraph.test.js

少し待つと、次のような画面が表示されるはずです:

Androidシミュレーターでのブロックエディタ統合テストのスクリーンショット。