Chromebook にプログラミング環境をセットアップ
Chromebook を使ってプログラミング学習をしたり、Web サービスを作ることができます。
ざっくり言うと以下の流れで行います。
Linux 環境環境を ON にする (Chromebook に元々ある機能)
オンライン／ローカル IDE 環境をセットアップ
- プログラミング学習を再開
- Chromebookでシステム開発
- Windows が無くても仕事できます
- Chromebook に開発環境を準備する
- Linux のセットアップ【共通】
- Visual Studio Code (コードエディタ) のセットアップ → Web アプリも出たよ
- ※Android Studio のセットアップはこちら
- ※No-code アプリ開発環境についてはこちら
- Chrome でデバッグ
- 拡張機能 のインストール
プログラミング学習を再開
「IT系フリーランス」とプロフに書いておきながら、実はここ 10 年ほどエンジニアらしきことはしていませんでした。現役時代はハード／ネットワークから業界に入り、長いことソフト開発をし、ユーザー対応まで一人でやっていたのですが・・・今やすっかり浦島太郎状態に。
その後は全然違う業界で、全然違うことをしてきました。せいぜい VBA をいじって業務改善ツールを作ったり、CMS を利用した Website 作成、その中でほんのり HTML やらをいじるくらいしか・・・
それでも一般企業にいると「パソコンに詳しい人」ポジションにいられるけど、「エンジニア」とはもはや名乗れない状態です。
ただ作りたいものも溜まって来たし、趣味としてプログラミング学習を再開することにしました。この自分に自信が全く無い状態からスタートし、自分のプロダクトを作ってリリースする所まで、本業と育児の傍ら、マイペースでやって行こうと思います。
Chromebookでシステム開発
ただ私のメインマシン、Chromebook なんですよね( Acer Chromebookを個人輸入 )。ブラウザ上でできることしかできません。
これで、どうやってシステム開発しようかな？
「基本、オンラインで。ローカルストレージも最低限しか用意が無い」 Chromebook の考え方には合っているのだろうけど、クラウド IDE ってまだ情報が少ない感じだし、制限もありそうだぞ？
かといってスペックの高いマシンを買い足して開発環境を入れるのだと、Windows とコストが変わらなくなってしまいますねー・・・。
ベストな方法が今は見つからないので、色々「お試し」してみることにしました。とりあえずコーディングの真似事だけでもできれば嬉しい。Chromebook で十分なことがわかったら、開発機としての Chromebook をお迎えすることにします。
Windows なら簡単だとしても、私は Google が大好きなのと、人がやっていない新しいことに挑戦したいので、Chromebook を極めるぞー✊
Windows が無くても仕事できます
付き合う取引先や仕事の内容次第ですが、Windows が無くても仕事はできます。
とはいえ、周りは Windows ばかり。なので、この機会に
- Windowsでしていたことが、Chromebook でどこまでできるか？
- スマホとブラウザだけで、どこまで仕事ができるか？
そんなことを試しています。まぁ会社に所属しなくなったこともあり、その結果ここ 2 年ほど Windows をほぼ使っていません。→ こうやってフルリモートで仕事しています。
Windows を使ったのは一度だけ。10 年前に組んだ VBA の改修を頼まれた時だけです。Excel も Google Spread Sheet や Office Live で閲覧・編集できますが、VBA で組んだマクロだけは Windows で開かなければ編集できませんでした。
Chromebook に開発環境を準備する
以下は敢えて英語環境で作業しようとする人向けの説明ですが、日本語環境でも基本的は流れは同じかと思います。
ちなみにAndroidアプリ開発がしたい人は、以下「1.Linux のセットアップ【共通】」をした後、こちら の手順で Android Studio を入れることもできます。
1.Linux のセットアップ 【共通】
Linux は Chromebook に元々ついています(古いものにはついていない)。Chromebook を開発機として使いたい場合(開発環境をマシンにインストールしない場合も)、この機能を Active 状態にする必要があります。
まずは "Settings" 画面を開きます。ブラウザじゃなくて、PC の。すると一番下に "Linux (Beta)" とあります。"Turn on" を押下。
インストーラーが開きます。"OK" を押下。
"Install" を押下。インストールが完了すると、コンソール画面が立ち上がります。例の黒い画面です。
※ この後 Android Studio を入れる場合は、「2」を飛ばして以下をご覧ください。
2.Visual Studio Code (コードエディタ) のセットアップ
メモ帳やブログ編集画面でもコーディングはできるけど、エディタがあった方が、見やすいし便利です。
以下は Microsoft の無料エディタですが、Chromebook でも使えます。".deb" からダウンロードします。 → この後 Web アプリ(VS Code Online) が公開され、重い開発環境のインストールは不要になりました〜！
Chromebook に Linux を入れると、"Linux files" というディレクトリが現れます。ダウンロードしたファイルは "Downloads" にあります。ファイルを "Linux files" に移動し、Wクリック。
Visual Studio Code のセットアップが完了しました。デスクトップにアイコンが登場します。嬉しい。
アイコンをクリックすると、app が立ち上がって来る。立ち上げ時とログアウト時に少し重くなりましたが、Chromebook で開発ができるなんて嬉しい。
Chrome でデバッグ
この後 Visual Studio Code エディタ上で Javascript コードをデバッグしようとしたら、デバッグ環境が整っていないことに気付きました。[Run] → [Start Debugging] から環境を選ぶと、「無い」と言われてしまいます。
Windows と違って、セットアップがそんなに簡単じゃないのか笑。「コマンド叩かなくてもできるよ〜誰にでも使えるよ〜 Chromebookいいよ〜皆 Chromebook で開発しよ〜 」と言いたかったのに。Linux 系のサイトって、素人には「？？？」ってものばかりだよね。
※この後色々試し、結局コマンド叩いたりする必要は無かったのですが。
1.拡張機能 のインストール
このページの「ローカルにWebサーバーを起動して実行する」という方法で、Chrome上でデバッグできました。
[Qiita] Visual Studio Code でフロントエンドの開発環境を構築してデバッグする - @C3REVE
コメント欄などが無かったので、ここでお礼を言わせてください！！本当にありがとう！！！！
私これで国内外のサイトを調べまくって、でも皆と同じ方法だと上手く行かなくて、ここ数日気持ちが落ち込んでいました。だから、とにかく一つでも方法が見つかってホッとしている所。
VS Code 上で、サイドバーの Extensions より以下をインストール。
- Debugger for Chrome
- Live Server
Qiitaにある手順通り VS Code上の対象ファイルからデバッグを実行すると、自分が立ち上げている Chrome に新しいタブでファイルが開かれます。あとは [Ctrl + Shift + I] で Developer Tool を立ち上げて検証。
ということで。
コマンドを叩いたり、Jsonファイルを編集したり、色々とやっていました。だけど結局はそんなの使わずに Visual Studio Code から Chromeデバッグを行うことができました！マジでマジでありがとう！！これで楽しく快適な開発ライフが再開できました。
まずは ドットインストール を見てみます。Web アプリが作りたいです。ちなみにドットインストールには Visual Studio Code 入門もありましたよ。
【関連記事】
Chromebook にアプリ開発環境の準備：Android Studio
No-Codeアプリ開発プラットフォーム
0 comments:
Post a Comment