ionicアプリ開発入門 -環境構築- コードを書く時、エディタ何使う？私はvisual studio code

2018-10-02

visual studio codeのインストール

前回ionicをインストール！と書きましたね。

　　　 ﾐ ヽヽヽﾘﾘﾉノノノ
　　 彡ﾐｲ　￣￣’`￣ヾﾐ
　　 彡ﾐi　)　　　　　　;|ﾐ
　　 彡ﾐ〉 _,,,,,,,,, i,i ,,,,,_ｲﾐ
　 　 rﾐi 　_-・-　l-・-､ｖ
　 　 {6〈`┬　 ､_」_ 　イ　　　あれは嘘だ。
　　　ヾ|　 (　 ,-ー-､) |
　　　　＼　`-　⌒-´ﾉ　、 '　 ’
　　　　／i＼ ＿＿ﾉ　- ∩_____ ’
　　 ／＼_　　_ﾉ＼　　　（ ｲ___ヨ　-　ﾊﾟｯ
　　(＿Y　 ヽﾉ　)イ⌒ニ　,ノ 　
　　( 　)_＿＿_/ `ー-ー´　　　
ー-',..-'ー.-,ー!..ー,,-._ー.,-ー.,-ー-…,,____
　　 l　　　　　　 　 |　　　i　　　　　 　i　　 "i,,_

ionicをやるにしても～
vimだと生産性わるいし～
ちょうどエラーで詰まったから先にvisual studioのインストールからやっちゃいまーーす。
GOMENNE

debファイルをダウンロード

まずは公式ページからdebファイルを持ってきます
firefoxを開いて

visual studioのダウンロードはこちら

.debをダウンロードしましょう
visual studio code ダウンロードサイト　スクリーンショット

ダウンロードが始まります。
ダウンロード開始

私はこのままプログラムで開くを選択し、OKを押しました。
インストールボタンあるよね
しかし、待てども待てどもなにも起こりません。

なんか、よくわかんね

この動作を2.3回やりましたが一向に反応してくれません。
最終的に
ググって、解決しました。

dpkgコマンド

参考にさせていただいたサイトはこちら
https://vscode-doc-jp.github.io/docs/setup/linux.html

見なくてもインストールできるように書くと

sudo dpkg -i ほにゃらら.deb
sudo apt-get install -f

sudo apt-get update

sudo apt-get install code

dpkgとはなんぞや

dpkg（ディーピーケージー）とはDebianのパッケージ管理システムの基礎となるソフトウェアである。 dpkg は .deb の拡張子を持ったパッケージをインストール、削除し、そしてパッケージの情報を得るために使われる。 dpkg 自身は低水準のツールである。

ちなみに
Debian Packageの略らしいです。
mjkYO

dpkgを使うには事前時debファイルをダウンロードしておく必要があります。
えーと、あるじゃんdebファイル
firefoxで落としてきたじゃん

というわけでfirefoxのダウンロードディレクトリを開きます。
っていうかさ、そろそろくろーむインストールしたいよね。

ディレクトリを開くにはfirefoxの右上
ダウンロードボタン
ここから開くと楽です。

該当のファイルのフォルダアイコンをクリックするとダウンロードディレクトリが開けるはず
ディレクトリを開く

ディレクトリを開いたら、右クリックで
端末の中でクリックを選択。ターミナルを開きましょう

ls

するとdebファイルがありますよね
ではF2で名前を控えて先程のコマンドを叩きましょう。

sudo dpkg -i code_1.26.1-1534444688_amd64.deb

code~~の部分はダウンロードした自分のファイル名にしてください。

その後もサクサク進めていきましょう

sudo apt-get install -f
sudo apt-get update

ではcodeをインストールしましょう

apt-get でインストール

sudo apt-get install code

はい、詰まったー
以下のパッケージには満たせない依存関係があります。
ここで詰まったー

でも直し方が書いてますね。
apt --fix-broken install

apt –fix-broken install

だめでしたね。
答えは簡単sudo付けてください。

sudo apt –fix-broken install

これでvisual studio codeがインストールできたのではないでしょうか。

visual studioのショートカット

次こそは、ionicの導入を…

2018.09.11追記　visual studioが起動しなくなったのでアンインストール

なぜかvisual studio codeが動かなくなった。
直前にubuntu mateのアップデートとかしたのでそれの影響かもしれません。
ググるとファイル権限が変わったかもーという記事を見つけたので、一旦ファイルを消して再インストールを行います。

visual studioはdpkgでインストールしたのでdpkgで削除する

dpkg -l code*

解説:dpkg で、-l 一覧表示 codeから始まる*ワイルドカード

一覧が表示されますが

ii  code                      1.27.1-1536226049 amd64             Code editing. Redefined.

これしかないです。

削除する

dpkg -r code

さて、最新のdebファイル持ってきて再インストールしよう。

更に追記:結局起動しなかった。
sedoコマンドでギリギリ解決するらしいけど

https://www.ainoniwa.net/pelican/2016/0828a.html

ちなみに、発見したのはvncserverのログを見たから

Xlib:  extension "XInputExtension" missing on display ":1".

2018.09.12追記　vscode実は起動してた説

どうしてもvscode使いたかったからOS再インストールまでしたのにorz
やっぱり詰まっているときにウダウダしていても解決しませんね。

1日開けて、改めて色々しらべてたらですね、見つかりました。
私の環境はubuntuのPCを用意して、そこにvncというリモートデスクトップをつないで色々しているのですが
実機にモニタをつないでvs codeを実行すると起動するんです。
でもvncだと起動しない。
これ完全にvncだよなー、と結論付けました。
色々ググって見つけた記事
ググったキーワードはこれ
visual studio code ubuntu vnc

Visual StudioコードはVNC ＃9016 でDebian 8.5で起動しません
英語が苦手な私はもちろん翻訳

更にこの記事を追っていくと
ああ、これは＃3451の複製です。＃3451（コメント）の回避策があります
回避策の記事はこれ
XRDPを使用して接続したときにVSコードがUbuntuで動作しません
抜粋

Open up "/usr/lib/x86_64-linux-gnu/libxcb.so.1.1.0" and remove BIG_EXTENSIONS to something else like FIG_EXTENSIONS.
sudo vi /usr/lib/x86_64-linux-gnu/libxcb.so.1.1.0
s/BIG_EXTENSIONS/FIG_EXTENSIONS
This is a total hack, but it does work.
@Tyriar maybe you can put this in your release notes or something. The reason is that XRDP only works with Ubuntu MATE (or XFCE, etc.) lighter weight desktops, and there this BIG REQUEST thing doesn’t seem to work.

上記翻訳すると

" /usr/lib/x86_64-linux-gnu/libxcb.so.1.1.0 "を開き、BIG_EXTENSIONSをFIG_EXTENSIONSのようなものに削除してください。
sudo vi /usr/lib/x86_64-linux-gnu/libxcb.so.1.1.0
s / BIG_EXTENSIONS / FIG_EXTENSIONS
これはトータルのハックですが、うまくいきます。
@Tyriarおそらく、あなたのリリースノートなどにこれを入れることができます。その理由は、XRDPはUbuntu MATE（またはXFCEなど）の軽量デスクトップでしか動作しないため、このBIG REQUESTの問題は機能していないようです。

XRDPはUbuntu MATE（またはXFCEなど）の軽量デスクトップでしか動作しないため、このBIG REQUESTの問題は機能していないようです。

XRDPはUbuntu MATE（またはXFCEなど）の軽量デスクトップでしか動作しないため、このBIG REQUESTの問題は機能していないようです。

XRDPはUbuntu MATE（またはXFCEなど）の軽量デスクトップでしか動作しないため、このBIG REQUESTの問題は機能していないようです。

なにこれ
読み進めていくと使っているクライアントが悪いから別のTigerVNCなど別のクライアントを使ってみれば動くぜってことみたい。

普段はpoderosaしか使わないから知らん。
結局のところvncとディスプレイ設定？の問題なのかしら

こんなところで詰まってても仕方ないので
改めて解決策を書きましょう。

参考にさせていただいたサイトはこちら
リモートデスクトップ先のUbuntuでVisual Studio Codeが動くようにする方法

sudo cp /usr/lib/x86_64-linux-gnu/libxcb.so.1 /usr/share/code/

sudo cp /usr/lib/x86_64-linux-gnu/libxcb.so.1.1.0 /usr/share/code/

sudo sed -i 's/BIG-REQUESTS/_IG-REQUESTS/' /usr/share/code/libxcb.so.1

sudo sed -i 's/BIG-REQUESTS/_IG-REQUESTS/' /usr/share/code/libxcb.so.1.1.0

　　　　　　　　　　　　　　　　　，’　 . : : : : : : : : : ｀丶
　　　　　　　　　　　　 　 　 　 ／: : : : /: :／| : : : : : : ＼　，
　 　 　 　 　 　 　 　 　 　 ， . : : : : :Ｘ{: :/_,u| : : :∧ : : : ヽ‘,
　　　　　　　　　　　　　　　/: : : :／,〃 0ヽ八: :人_iノ : : :ﾊ ’
　　　　　　　　　　　 　 ,‘　|: : : /　 iｉ{　　 ﾘ　∨〃0∨ : : 😐
　　　　　　　　　　　 　 　 ⊥:|: ′　 ` 　_/u 　 ｉ{　　ﾘ : : : |　｝
　　　　　　　　　 　 　 ｛ ｛ {　|│ｕ ////　　 　 `　_/　〉: :,′ うごいたーーーーー！！
　　　　　　　　　　　　　　 ､ 人|　　　　　　　　 //// 厶|/　,’
.　　　　 　 　 ,‘ '⌒i　＿_ノｰﾍu　 /⌒::::::::ー- 、　u厶’/⌒}　 _
　　　i⌒ヽ. 　　 |　 |　＼.: : : :.:＼/::::::::::::::::::::＼｝　ノ: :/　 / /　} ；
.　 　 ＼　丶 　 |　 l　 ＿＞＜ﾚ个ー　　､＿_ノ＜＼/　 / /　/
　　　 　 ヽ　　、|　 |-ﾍ　〈　　 ｛┘　 　 厶｝　 / 厂/　 / /　/
　　　　　　ヽ　 J　 ﾏ　} } {＼＿＼　　　／＿/ / 〃　 ,し　厶　 '，
　　　 ,‘ /⌒＼ ｘ‐く∨|│|＼＿＿＼／＿＿_/ /　　ヘ、/　 ｝　 }
　 　 　 （　＼ （__,,、　V 　|､＿__＿＞＜＿＿／|　　,､＿） ／ﾞ）
　　　　　＼＿)┘/　　｝ ｌ |　　　　〈_ 　 〉　　 /八　　ヽ└(_／ ,‘

昨日の時点で動いてたけどね。
ともあれ原因がわかったので助かりました。
根本的な解決方法を模索中

ところでこのAAって何？

ionic

Posted by ogin