こつこつMR!

医療業界のDXをチャンスに。デジタルヘルスの先を目指すあなたへお役に立てる情報を。

「'ionic'は、内部コマンドまたは外部コマンド…として認識されていません。」の解決方法

f:id:mrtofire:20210406211155j:plain

OKのジェスチャーをする若い女性(写真AC 様より)

今日もお疲れ様です。先日から勉強しているIonic-Angularですが、一つ壁にぶち当たっていました。この壁のせいで丸3時間は頭を抱えていましたかね…。いろいろな原因があるかと思いますが、僕の場合、こうしたら解決した!という方法がありましたので、それをシェアさせていただきます

(目安:2分)

【目次】

経緯

Android Studioのインストールで「おや?」

初めてのモバイルアプリ開発のために勉強中です。先日の記事にも書きましたが、開発環境を整えるところから開始しています。その中で、Androido Studioをインストールしました。その時はすぐには使わないということで全く触っていなかったのですが、「どんな機能があるんだろう?」ということで開いてみてビックリ。

f:id:mrtofire:20210406203209p:plain

Selecet SDKs

Android SDKまでのパスを構築してくれ、という注意。キャンセルしようとすると

「機能使いたいならちゃんと選んで!」

と食い下がられる。ただこれがなかなか選べない。初期値のままインストールしているので、そのままのフォルダ選んでくれたらいいのに、とも思いましたが、どのファイルをしらみつぶしに選んでみてもそのレジストリはダメです!というエラーメッセージ。正直ここで1時間くらい詰まってました。しょうがないのでググってみることに。

SDKのパスに「日本語」を含めることは出来ない

このエラーメッセージで詰まってしまう人、割と多いみたいですね。というのも、SDKのパスに「日本語」を含めることが、仕様上出来ないようで。にも拘わらずAndroid Studio絡みのファイルは Users¥名前(日本語) ¥… に作られてしまうので、そりゃあ詰みますよね。

 

仕方がないので再インストールやら保存先やらをUsersの下に置かないようにやり直してみました。ダウンロード自体は上手くいくのですが、その後の「SDKのパスを~」でどうしても詰まる。他にもいろいろな先駆者たちのQ&Aを漁ってみましたが、海外サイトが非常に多く、日本後での解決法がまだまだ少ないみたいですね。

 

かろうじて見つけたQ&Aには、上記のように日本語の直下を避けるようにというアドバイスもありました。ただ、可能であればユーザー名もアルファベットのみのアカウントにしたほうが今後のためですよ、という記載を発見。

そういうこともあって、Windowsアカウントでもう一つ新しいものを作成してトライしてみました。

別アカウントを作成したけど「おや?」

アルファベットのみの新しいアカウントを作成して、またイチからAndroid Studioにトライ。すると案外すんなりとAndroid SDKのインストールに成功!保存場所なども初期値のままでスッキリ。アカウントを新規で作成しただけであって、PC自体は同じものなので、以前ダウンロードしてあるGitやら開発環境がらみのモノは一式そのままです。

 

よし、これでいよいよ本格的に取り掛かれるぞ!と思ってコマンドプロンプトを開き、いつものように「 ionic serve 」コマンドで始めようとすると…。

f:id:mrtofire:20210406204830p:plain

'ionic'は、内部コマンドまたは外部コマンド…として認識されていません

えええ!?

予想外過ぎました。今まで何の問題もなく開始出来ていたコマンドが、なぜか認識されず…。ここが通ってくれないと、Android Studioがいかにきちんとインストールされていようが全然進みません。本当に困りました。

 

大分前置きが長くなりましたが、今回はこの壁を突破するまでの解決法を、自分のケースに沿って書いていきます。

解決法

Ionic CLIを再インストール:×

テキストに従って、再度コマンドプロンプトに以下の通り入力してみました。

> npm install ionic -g

このコマンドによるIonic CLIのインストールは無事終了。最新バージョンも表示されているし、これは間違いなく完了しているはず。それなのにIonicコマンドを入力しても上記の画像と同じく「認識されていません」の一点張り。どうやら僕の場合これが原因ではないんだな、という風に判断しました。

パスを通してみる:◎

続いて、Ionicに限らず「内部コマンドまたは外部コマンド…として認識されていません」とググった時に出てきたアンサーとしてよく目にした「パスを通してみては?」に取り掛かってみます。結論から申しますと、これによって解決しました!

お恥ずかしながら「パスを通すとは?」というレベルだったのでそこから調べ始めていましたが、今回はその部分については割愛します。要は「どこにファイルがあるかをPCに教えてあげる」ということですよね。僕はそう理解しました。

システムから環境変数を変更

実際に行った手順を記載していきます。

まずはコントロールパネルからシステムを開きます。

f:id:mrtofire:20210406210011p:plain

コントロールパネル システムとセキュリティをクリック

f:id:mrtofire:20210406210107p:plain

システムとセキュリティ システムをクリック

 

f:id:mrtofire:20210406210141p:plain

システム左端 システムの詳細設定をクリック

f:id:mrtofire:20210406210220p:plain

環境変数をクリック

f:id:mrtofire:20210406210500p:plain

Pathを選択し、編集をクリック

f:id:mrtofire:20210406210548p:plain

新規をクリックし、2行目のパスを追加

 

以上です。

最後の画像で入力した2行目のパスは、メインのアカウント(ユーザー名が日本語の方)では記載されていたものの、サブで作ったアカウントでは記載されていませんでしたので、コピー&ペーストで張ってみました

このような流れで実施した結果、無事にIonicコマンドを読み込んでくれるようになりました。

まとめ

 

いかがでしたでしょうか。

Android StudioSDKから始まり、様々なところで詰まる要素が盛りだくさんのようです。調べてみようとしても日本語での解説サイトはまだ少ない方で、なかなかすっきりとした答えに行き当たることは少ないです。今回の僕のケースでは、パスを通すということで解決しましたので、その事例を紹介させていただきました。ご参考になりましたら幸いです。