Search docs/

開発者向けのヒント

Contents

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 を利用することをおすすめします。

エディタ

選ぶべきエディタがたくさんあります。

  • Ionic Studio: the fastest and easiest way to build Ionic apps
  • VS 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
}

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 を追加します: http://localhost:8100/?ionic:mode=ios<

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

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

デバイスのドロップダウンからデバイスを選択すると 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やカメラなどのネイティブ機能へのアクセスも可能にする代替のエミュレーターです。

リモートデバッグ - iOS と Safari

Safari は iOS デバイス上で実行されている Ionic アプリケーションと接続しながらデバッグするために使用できます。

はじめに、接続しているデバイス上で Web インスペクタを有効にする必要があります。

Web インスペクタは 設定 > Safari > 詳細 で見つけることができます。

次に、Mac の Safari に進み、Safari > 環境設定 > 詳細 から メニューバーに開発者メニューを表示 を有効にします。

接続されたデバイスが 開発 メニューに表示されます。

以上で、Safari の開発者ツールを用いてアプリケーションの調査とデバッグができます。

リモートデバッグ - Android と Chrome

Chrome の DevTools は、ionic serve というコマンドを介してブラウザ上で実行している時、またはエミュレーターか実機でにデプロイされている時、アプリケーションのデバッグに使用できます。

エミュレーターや実機を調査するには、Chrome で chrome://inspect にアクセスし、実行中のアプリケーションをターゲットとして選択してください。

メモ: 実機では、Chromeからデバッグするために開発者モードを有効にする必要があります。

リモートデバッグ - VS Code プラグイン

VS Code has a dedicated plugin for debugging apps built with Cordova.

The plugin creates a bridge between the device and the VS Code Devtools and allows debugging to be done right in the editor.

VSCode には Cordova で作られたアプリケーションのデバッグ専用のプラグインがある。 そのプラグイン はデバイスと VSCode の Devtools の間にブリッジを生成し、エディタ内でデバッグを行えるようにします。

Previous
Security