Search docs/

開発者向けのヒント

Resolving Permission Errors

EACCES permission errors can occur when packages are installed globally. If this is the case, npm may need to be set up to operate without elevated permissions.

Using sudo with npm is not recommended because it can lead to further complications.

This guide offers two options for resolving permission issues. See the npm docs for full documentation and additional options.

Option 1

The best way to avoid permission issues is to reinstall NodeJS and npm using a node version manager.

This guide will document nvm installation and usage. See the nvm docs for full documentation. See the npm docs for additional options and instructions for Windows.

  1. Install nvm.

     $ curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.34.0/install.sh | bash
  2. New terminals will now use nvm. To verify, open a new terminal and run the following. If something prints, the installation was successful.

     $ command -v nvm
  3. To download and install the latest LTS release of NodeJS, run:

     $ nvm install --lts
  4. Set the newly installed NodeJS as the default environment:

     $ nvm alias default lts/*
  5. New terminals will now use the nvm-controlled NodeJS. To verify:

     $ node -v  # will print the version installed above
     $ which npm  # will print a path somewhere within the ~/.nvm folder

Global packages will now be installed in the ~/.nvm directory, so permission errors should no longer occur as long as npm is used without sudo.

Option 2

Does not apply to Windows

Change the owner of npm's directories to the current user:

$ sudo chown -R $(whoami) /usr/local/{lib/node_modules,bin,share}
$ sudo chown -R $(whoami) ~/.npm ~/.npmrc

Since these global directories are no longer owned by root, packages can be installed globally without sudo.

依存モジュールの更新

To update an npm dependency, run the following, where <package-name> is the package to update:

$ npm install <package-name>@<version|latest> --save

例えば、@ionic/angular パッケージを 最新 リリースのものに更新するには、以下を実行してください:

$ npm install @ionic/angular@latest --save

npm は最初に package.lock.json からパッケージのバージョンを読み込みにいきますので、パッケージを更新する際は CLI を利用することをおすすめします。

エディタ

選択できるコードエディターはたくさんあります。ここに私たちのお気に入りのいくつかがあります:

  • Visual Studio Code: a popular and free text editor made by Microsoft
  • Atom: a hackable text editor made by GitHub
  • WebStorm: a powerful non-free editor by JetBrains

デバッガの利用

デバッガ というキーワードはアプリケーションをデバッグするために利用されます。ほとんどのブラウザがデバッガステートメントに直面する時、 実行中の JavaScript の処理は停止され、ブラウザはデバッガをロードします。これはアプリケーションに"ブレークポイント"をセットするために使用されます。

例えば、ある関数が正しい値を返さない時は、デバッガを使用してコードをステップ実行し、変数を調べることができます。

function myBrokenFunction() {
  debugger;
  // do other stuff
}
CopyCopied

When an app runs, it will pause at this function. From there, the developer tools can be used to run pieces of JavaScript, line by line, and inspect where exactly the function breaks.

モードの変更

デフォルトでは、アプリケーションがブラウザで表示されると、Ionic は MD モードを適用します。しかし、Ionic コンポーネントはそれぞれのプラットフォームに応じて接続されるため、そのアプリケーションが iOS でどのように見えているか確認できると便利です。そのために、アプリケーションが起動しているURL に ?ionic:mode=ios を追加します。例えば、アプリが 8100 ポートで起動している場合は、URLはこうなります: http://localhost:8100/?ionic:mode=ios

しかし、どのプラットフォームが現在使用されているかをブラウザがどのように認識するか、ということは変わらないでしょう。プラットフォームはデバイスの検出とユーザーエージェントの検査によって決定されます。そのため、プラットフォームを変更するには、ユーザーエージェントを変更する必要があります。これを行うには、Chrome DevTools を開き、Ctrl+Shift+i(Mac では Cmd+Option+I) でデバイスのモードをオンに切り替えでください。デバイスモードの切り替えは、Ctrl+Shift+M(Cmd+Option+M on Mac)で行います。

別のモードのアプリケーション

デバイスのドロップダウンからデバイスを選択すると viewport の大きさと同様に、ユーザーエージェントも変更されます。

iOS シミュレータを使用する

iOS シミュレータは実際のデバイスに届く前にアプリケーションのテストとデバッグを可能にします。

シミュレータを利用可能にする前に、Xcode、アップルの IDE をインストールする必要があります。

Ionic CLI を用いて、シミュレータ上の現在のディレクトリでアプリケーションを実行可能にします:

$ ionic cordova emulate ios -lc

-lc フラグを渡すことでライブリロードを有効にし、かつログコンソールををターミナルに出力することができます。

また Xcode を利用することでエミュレータを起動し、アプリケーションをデバッグすることもできます。

Xcode を開き、../path-to-app/platforms/ios/myApp.xcodeproj を開きます。

アプリケーションが読み込まれると、コンソール出力とデバイスのログが Xcode の出力ウィンドウに表示されます。

Genymotion Android エミュレーターを使用する

Android SDKには標準のエミュレーターが付属していますが、速度が遅く、応答しない場合があります。

Genymotion はより高速な代替エミュレータであり、GPSやカメラなどのネイティブ機能へのアクセスを許可します。

Previous
Developing for Android