Skip to main content
Version: v8

開発者向けのヒント

Permission Errors の解決​

パッケージをグローバルにインストールすると、 EACCES パーミッションエラーが発生する可能性があります。このような場合は、管理者権限なしで動作するように npm を設定する必要があります。

note

sudo と npm の併用は、さらなる問題を引き起こす可能性があるため、推奨されません。

このガイドには、パーミッションの問題を解決するための 2 つのオプションがあります。詳細なドキュメントと追加オプションについては、npm docs を参照してください。

Option 1​

権限の問題を回避する最善の方法は、 node version manager を使用して NodeJS と npm を再インストールすることです。

このガイドでは、 nvm のインストールと使用方法について説明します。完全なドキュメントについては、 nvm docs for full documentation. See the npm docs を参照してください。Windows の追加オプションと手順については、npm のドキュメントを参照してください。

  1. nvm のインストール

    $ curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.34.0/install.sh | bash

  2. 新しい端末は nvm を使うようになります。確認するには、新しいターミナルを開き、次のコマンドを実行します。何かが表示されれば、インストールは成功です。

    $ command -v nvm

  3. NodeJS の最新の LTS リリースをダウンロードしてインストールするには、次のコマンドを実行します:

    $ nvm install --lts

  4. 新しくインストールした NodeJS をデフォルト環境として設定します:

    $ nvm alias default lts/*

  5. 新しい端末は nvm コントロールの NodeJS を使うようになりました:

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

グローバルパッケージが ~/.nvm にインストールされます。 sudo なしで npm を使用している限り、パーミッションエラーは発生しません。

Option 2​

Windowsでは利用できません

npm のディレクトリの所有者を現在のユーザに変更します:

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

これらのグローバルディレクトリは root が所有しなくなったため、 sudo を使用せずにパッケージをグローバルにインストールできます。

依存モジュールの更新​

npm dependency をアップデートするためには、<package-name> をアップデートしたいパッケージ名に変更して以下を実行します:

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
}

アプリが起動すると、この機能で一時停止します。その後、開発者ツールを使用して、JavaScript を 1 行ずつ実行し、関数が正確にどこで中断するかを調べることができます。

モードの変更​

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

note

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

Chrome DevTools showing the device mode with iPhone X selected.

デバイスのドロップダウンからデバイスを選択すると 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 やカメラなどのネイティブ機能へのアクセスを許可します。

Contents

Edit this page