読者です 読者をやめる 読者になる 読者になる

vaguely

和歌山に戻りました。ふらふらと色々なものに手を出す毎日。

UbuntuでAngular

Angular Xubuntu

はじめに

突然ですがラップトップのOSをUbuntuに変更しました。

VirtualBoxXubuntuを入れたりして遊んでいたのですが、Gnome3を使ってみたくなったので。

Unityの正式版がないことだけが問題なのですが、外で書くことは少ないため、
まぁMac miniで書くことにしても良いかと。

開発版Unityは依存関係の問題でインストールに失敗したのですが、こちらもおいおい試してみる予定です。

まぁ以前もXubuntuなどを使っていたこともあり、概ね問題なくやっぱり新しいマシンで表示するときれいだな〜と思ってはいるのですが、一点ディスプレイが時々点滅するのが気になってはいます。
Gnome3だけでなく、Unityにした場合も、Waylandにした場合も再現するため、ディスプレイマネージャーの問題ではないのか。。。?と思っています。

こちらも問題が解決すれば記事にしたいと思います。

さてさて、今回の本題ですが、ふとAngular.jsに挑戦してみることにしました。
ver.1系は以前少しだけ触ったことがありましたが、今回は2系です。

Angular-cliを使ってHello world(正確にはApp works)を表示するところまでをまとめることにします。

設定

ディレクトリ名

とりあえずディレクトリ名を英語に変更します。

Mozc

また、Gnome3の場合デフォルトだと日本語入力(Mozc)が起動しないようです。

設定 > 言語サポート で追加のパッケージをインストールし、「キーボード入力に使うIMシステム」を「fcitx」に変更します。
一旦ログインし直すとMozcが使えるようになる。。。はず。

ショートカット

設定 > キーボード > ランチャー で、「ホームフォルダ」のショートカットを「Super + E」にします。
これでWindowsと同じくWindowsキー + Eキーでファイルエクスプローラが開きます。

開発ツール

開発するにあたって使用するエディタはVisual stutio codeとします。

以前参加した勉強会でもおすすめされていたので、まずはそこに乗っかってみようかと。
インストール自体はdebパッケージをダウンロードして、ダブルクリックでインストール

https://code.visualstudio.com/download

ということで、細かいことを考えなければほとんどWindows同様にインストールが可能になります。

プラグインとしては「Angular 2 + Snippets」をインストールしました。

Node.jsのインストール

Angular.jsの環境を整える前に、まずはNode.jsのインストールですね。

ここを参考にaptでインストールしてみることにします。

パッケージマネージャを利用した Node.js のインストール - Node.js

curl -sL https://deb.nodesource.com/setup_7.x | sudo -E bash -
sudo apt update
sudo apt install -y nodejs

完了後、「node -v」や「npm -v」でバージョン番号が返ってくるかを確認しておきます。

Angular-cliのインストールに失敗する

さて、準備が整ったらAngular-cliをインストールします。

npmを使ってインストールするだけなので、簡単簡単…。

npm install -g @angular/cli

※「npm install -g angular-cli」としている情報が多いのですが、実行してみるとそれはDeprecatedになったから「@angular/cli」にしてね、とWarningが出ていました。

失敗しましたorz

エラーメッセージをたどると、どうやら権限エラーの様子。

ググッてみたら出てきました。

私の場合は「対策2」で解決できました。
Node.jsのインストールを管理者として行っているから…?

インストールに成功したら、「ng help」でヘルプが表示されることを確認します。

問題がなければ「ng new プロジェクト名」でプロジェクトを作成します。

IP Addressで開く

作成したプロジェクト直下で、「ng serve」を実行すると「localhost:4200」で「App works!」というページが表示されます。

これだと他の端末(スマホとか)からアクセスできないので、「localhost」部分をIP Addressに変更してアクセスしてみよう!

失敗しましたorz

どうもアクセスが拒否されている様子。

う〜ん、と思っていつつググったら方法が見つかりました。

ng serve --host 0.0.0.0

全ホストからのアクセスを許可することで、他の端末からでもアクセスすることができるようになりました。

そういえばSinatraでも同じ仕様で、同じ対処法を適用した覚えが…。

とにかくこれで、PC・スマホからアクセス可能になりました。

次回からは実装部分のお話になる…はず。

参考

Ubuntu設定

Node.js

Angular.js