![見出し画像](https://assets.st-note.com/production/uploads/images/92355579/rectangle_large_type_2_06853a5ba239a6d7c292c24defbe6773.png?width=800)
新しいクロームブックがやって来た【Linuxユーザー向け:Gimp/VSCode インストール 編】
本記事の概要
概要
『新しいクロームブックがやって来た』は以下の3回に分けて書いていきます。
【一般人向け:英字キーボードの洗礼 編】← 前回
【Linuxユーザー向け:Gimp/VSCode インストール 編】 ← いまココ
【エンジニア向け:Node.js/Vite インストール 編】 ← 次回
今回は、クロームブックへLinuxコンテナを導入し、その中に「Gimp」と「VSCode」をインストールしていきます。
● Gimp
画像編集にて、四角枠やテキスト挿入が出来る。
● VSCode
アウトライン機能や自動保存が出来る
・アウトライン機能
文章は長くなると、移動も大変になります。
そこで、見出しごとの目次のようなものをサイドメニューに表示し、それをクリックすると対象見出しに移動出来れば便利です。
・自動保存にする
手動保存だと面倒だし、何より保存し忘れて、今までの編集が消えてしまう等のリスクがあります。
そこで「自動保存」という機能を使います。
うれしいお知らせ
前回の
ですが、何とnoteマガジンの
『買ってよかったもの(ガジェット) 記事まとめ』に掲載されました📝
『noteマガジン』のアカウントからも見れる
![](https://assets.st-note.com/img/1669866401542-Y3ByMszx01.png?width=800)
どの辺りが評価されたのだろう❓
英字キーボードがツボにはまったとか(笑)
Linuxコンテナを導入する
Linuxコンテナを導入しましょう。
前回の記事でも説明しましたが、ここで言うLinuxコンテナとは、Crostini(ChromeOSのLinux仮想環境)を指します。
「設定 - 詳細設定 - デベロッパー」での設定を試すことに『Linux 開発環境を』オンにします。
![](https://assets.st-note.com/img/1669866591900-XU3bqVWxFe.png?width=800)
「オンにする」ボタン押下
![](https://assets.st-note.com/img/1669866623674-phwqJDWYOt.png?width=800)
『Linux 開発環境をセットアップする』で「次へ」ボタン押下
![](https://assets.st-note.com/img/1669866670481-CMbsQgYAY3.png?width=800)
・ユーザー名
デフォルトではアカウント名となります。
アカウント名のままでも良いのですが、ここでは「test」にします。
・ディスクサイズ
Linuxコンテナのディスクサイズは各自クロームブックの空き容量次第。
「C425TA」の場合では、ストレージが64GBなので、今回は『 推奨(10.0 GB)』のまま「インストール」ボタン押下します
![](https://assets.st-note.com/img/1669866783086-xUaaKvc4ES.png?width=800)
『 Linux をインストールしています… 』と出るので数分待つ
![](https://assets.st-note.com/img/1669866825938-KGXCLfQner.png?width=800)
インストール完了すれば、ターミナルが立ち上がります。
![](https://assets.st-note.com/img/1669866854496-mFW7OnJ08V.png?width=800)
また、ランチャーの一番下の方に「Linux アプリ … 」が追加されてます
これをクリックすると「ターミナル」アイコンがアップされ
![](https://assets.st-note.com/img/1669866890532-s4Do5CMLb1.png?width=800)
「ターミナル」アイコンをクリックすると
![](https://assets.st-note.com/img/1669866919291-e1f5t0zYCH.png?width=800)
メニューっぽい画面がでてきます。
Linux - penguin あたりをクリックすると
![](https://assets.st-note.com/img/1669866980952-65enYucvBE.png?width=800)
ターミナルのウィンドウが立ち上がります
![](https://assets.st-note.com/img/1669867011904-xAzuyE1Oil.png?width=800)
上の方の「+」ボタンクリックで、新規タブで立ち上がります
ブラウザのタブのように、複数の切り替えが出来るわけです
cat /etc/os-release
OSの情報を見てみる
![](https://assets.st-note.com/img/1669867132638-rzg3ZAaFLI.png?width=800)
Debian 11 (bullseye) となります(本記事執筆時点)
pwd
カレントディレクトリの確認
![](https://assets.st-note.com/img/1669867206050-7WUYy5sPxK.png?width=800)
インストール時にユーザー名「test」としたので、HOMEディレクトリはここになる。
ここから「Gimp」と「VSCode」をインストールしていきます。
その前にパッケージ管理のコマンドをアップデートし
sudo apt-get update
apt-get のアップデート
![](https://assets.st-note.com/img/1669867291255-dPnhb5XN8m.png?width=800)
Gimp
Gimpをインストールする
sudo apt-get install gimp
「Gimp」をインストール
![](https://assets.st-note.com/img/1669867458777-vGoVKlY6Xh.png?width=800)
目にも留まらぬ速さで、ログメッセージが流れていきます。
何か聞かれたら、とりあえず「Y」(はい)で進める。
まあ、駄目だったらやり直せば良いだけ。
もっとも、今回は ” 253MB使うけど大丈夫っすか❓ ” という質問なのが一目瞭然なんですけどね。
しばらく、ログメッセージ流れます。
ていうか、長い。数分掛かった。
![](https://assets.st-note.com/img/1669867538079-X8gDPrhRP0.png?width=800)
終わるとこんな感じ
ランチャーを確認してみると
![](https://assets.st-note.com/img/1669867604523-5AIDzkEon6.png?width=800)
Gimpがインストールされているぞ💡
Gimpを立ち上げる
![](https://assets.st-note.com/img/1669867649266-XgHCGWDaRx.png?width=800)
すっげー😳
こんな本格的なツールがフリーだなんてありがたい。
先のほどのランチャーのキャプチャ画像を編集してみましょう
なおファイル名はlauncher.pngとしておいた
![](https://assets.st-note.com/img/1669868688821-EEycO8y7HB.png)
ああそういうことか
![](https://assets.st-note.com/img/1669868736850-IfeUhIOvLG.png?width=800)
編集したい画像ファイルは、Linuxコンテナ内に持っていく必要がある
とはいえ、Crostiniの場合、簡単に出来る。
先程のLinuxコンテナ導入後には「Linuxファイル」という場所が出来ているので、ここに画像ファイルをコピーする。
![](https://assets.st-note.com/img/1669868810285-h4T7fKYRAm.png?width=800)
そうすると、ユーザー名「test」の場合、そのHOMEディレクトリである /home/test にコピーが出来る
これで画像ファイルをGimpから開くことが出来る
![](https://assets.st-note.com/img/1669868895449-rU7obElFwl.png?width=800)
いいですね〜、素晴らしい
![](https://assets.st-note.com/img/1669868942031-pUWI9GsjPq.png?width=800)
「赤い四角枠」を付ける
「赤い四角枠」を付けましょう
パレット色のデフォルトは「黒」なので「赤」にします。
左メニューのパレットをクリック。
![](https://assets.st-note.com/img/1669869015411-jNlbaZuEY9.png)
こんな感じで「赤」に設定
![](https://assets.st-note.com/img/1669869062058-BzqmaYV3W9.png)
黒 → 赤 へとなる
![](https://assets.st-note.com/img/1669869091611-eupxRsbuFZ.png)
上段の左から2番めの四角をクリック
![](https://assets.st-note.com/img/1669869116300-ktMw9piZXy.png)
こんな感じで対象を囲んで
![](https://assets.st-note.com/img/1669869177737-kIa3xf4Zpu.png)
メニューの「Edit」から、この「Stroke Selection」で
![](https://assets.st-note.com/img/1669869219614-VMCIgWWDBO.png)
このように設定すると
![](https://assets.st-note.com/img/1669869241234-62Q58XbQnG.png)
赤い四角枠が入る
![](https://assets.st-note.com/img/1669869285712-MpLJiL0bku.png?width=800)
「テキスト」を挿入する
テキスト挿入をしましょう
左メニューの「A」アイコンをクリック(画面でいう左上)
![](https://assets.st-note.com/img/1669869408272-kRqAJkvZda.png?width=800)
こうなるので「あいうえお」と入力したいのだが
![](https://assets.st-note.com/img/1669869529964-UrfQKpsUhz.png?width=800)
日 本 語 が 入 力 出 来 な ー い 😂
日本語を入力出来るようにする
fcitx-mozcをインストールする
これは、C425TAが英字キーボードだとかは関係なく、Debianの環境的な問題となります( もちろん、Debianにも色々な種類があって一概には言えませんが … )。
とはいえ、Crostiniの場合、日本語入力メソッドをインストールして、設定するだけで解決できます。
ここでは「fcitx-mozc」という日本語入力メソッドをインストールしたいと思います。
sudo apt-get install fcitx-mozc -y
fcitx-mozcをインストールする
![](https://assets.st-note.com/img/1669870363594-YZPsL7sOoA.png?width=800)
fcitx-configtool
fcitx-configtoolを開く
(※ 注意:散々嵌った後から気づいたのですが、fcitx-configtool の前に fcitx を実行する必要があります。実際の臨場感を出したいので、記事としては失敗例としてこのまま進めていきます )
![](https://assets.st-note.com/img/1669870565283-s2VSgsiOG8.png?width=800)
空白ですね。これは、あやしい …
何かエラーが出てるし
![](https://assets.st-note.com/img/1669870636558-3oLCPcnpBg.png?width=800)
てか、何この「GDBus.Error」って❓
sudo apt-get remove gnome-calendar
グーグル先生に聞いたたどり着いたサイトから、出てきたコマンド。
試しに gnome-calendar を削除してみたらって、やつですね。
![](https://assets.st-note.com/img/1669870753037-WW9JlCNnwV.png?width=800)
まだ直らない
![](https://assets.st-note.com/img/1669870821761-z2Hr3onzSW.png?width=800)
sudo apt-get install -y gnome-keyring
このコマンドは、クロームブックのLinuxコンテナに「VSCode」をインストールする記事でよく見かけるもの。
要は「Gnome Keyring」というキーリングツールをインストール。
関係あるかもしれない、試してみよう。
![](https://assets.st-note.com/img/1669871118948-EzwUk10WPr.png?width=800)
まだなおらない
![](https://assets.st-note.com/img/1669871172063-7pk58DiSaa.png?width=800)
sudo apt-get remove fcitx-mozc -y
一旦、アンインストールする
![](https://assets.st-note.com/img/1669871207665-P0d2fVvcZL.png?width=800)
sudo apt install fcitx-mozc
「 apt-get 」でなく「 apt 」の方でインストールしてみるテスト(とりあえず sudo apt update はしないまま)
![](https://assets.st-note.com/img/1669871304679-Zb27gS0NW9.png?width=800)
fcitx-configtool
で、もう一度試す
![](https://assets.st-note.com/img/1669871364479-p5O5GOTt8B.png?width=800)
やっぱだめか。
もう、心が折れそうです orz
再度、いろいろと技術系サイトを徘徊して情報収集をすると
ランチャーの「Fcitx」のクリックからとありますね。
先ほど fcitx-mozc をインストールした段階で出来たもの。
![](https://assets.st-note.com/img/1669871420032-V3DeUxHi86.png)
ランチャーの「Fcitx」をクリックしてみる
・・・
・・・
・・・
特に何も起こらない。
一応、起動はされているのでしょうね。
まあここで再度
fcitx-configtool
![](https://assets.st-note.com/img/1669871632681-6AmWfDITCZ.png?width=800)
エ ラ ー が 起 き な ー い ✨
しかも「Keyboard - English(US) English」の表示もされているぞ💡
そうなんです❗
そもそも「 fcitx-configtool 」の前に「 fcitx 」を実行すべきなのです。
Fcitx本体を起動せずに、Fcitx設定ツールだけ起動しても、そりゃあ駄目だわな🤣
こんな、しょうもないケアレスミスの解決に2時間近く掛かったわ(笑)
Input Method 画面で、下メニューの「+」ボタン押下
![](https://assets.st-note.com/img/1669871758972-DVpjRvmGuv.png?width=800)
色々出ている〜😳
これ、エラーが出ていた時は何も出なかったんです。
「Only Show Current Langage」 のチェックを外し
サーチ欄に「Mozc」と入力すると
![](https://assets.st-note.com/img/1669871845748-0lfXEsDD6h.png?width=800)
「Mozc Japanese」が出てくるのでOKを押す
![](https://assets.st-note.com/img/1669871874704-fowlo25LIT.png?width=800)
「Mozc Japanese」が追加されているので
「Keyboard - English(US) English」を選択し、下メニューの「ー」ボタンで削除する
![](https://assets.st-note.com/img/1669871927788-mDtmUelCEf.png?width=800)
ターミナルが再起動された時でも、反映するように環境変数を設定しましょう。
ここでは、以下のコマンドで .profile (ログインシェルの終盤候補)に設定します。
echo "fcitx > /dev/null 2>&1" >> ~/.profile
![](https://assets.st-note.com/img/1669871978368-U69Ln0Sy7o.png?width=800)
cat .profile
一応、確認
![](https://assets.st-note.com/img/1669872029630-a48E5FGGuq.png?width=800)
これにより、ターミナルが再起動された際に fcitx コマンドが実行されるようになります。
さっきの続き
いやはや、長い戦いだった。
Gimpで日本語入力出来るか試してみましょう。
今度こそ、今度こそ …
・・・
・・・
・・・
![](https://assets.st-note.com/img/1669872182155-ogUytO1Eci.png?width=800)
日 本 語 の 入 力 が 出 来 た じ ょ ー 😭
教訓
ちょっと愚痴を言っていいですかね。
まずね、中途半端にFcitx設定ツールだけ起動しちゃうのがいけないんですよ。
起動せずに ” Fcitx本体が起動されいてません ” 的な分かりやすいエラーを吐いて欲しかったわ〜。
それが、中途半端に設定ツールが起動できちゃって、エラーもマニアックなもの吐くしさ😒
【教訓】何かがおかしかったら、一から順番を考え直そう
ちょっと一息
腹がへったので、ちょっと一息🍔
![](https://assets.st-note.com/img/1669872488329-A7qFYLNfoS.jpg?width=800)
VSCode
VSCodeをインストールする
●Gnome Keyring
sudo apt-get install -y gnome-keyring
まず、クロームブックのLinuxコンテナに「VSCode」を入れる場合、まず「Gnome Keyring」というキーリングツールをインストールします。
公式にも色々書かれてます。
( もっとも、私の場合は、先ほど「Gnome Keyring」のインストールは済ませましたが )
●CPUアーキテクチャ
VSCodeですが、Debian用に .debパッケージ が用意されてます。
CPUアーキテクチャ別となるので、あらかじめ確認しておきま
lscpu
![](https://assets.st-note.com/img/1669872880838-po1zLhYUkq.png?width=800)
「 Architecture: x86_64 」
なので『 amd64 』に該当します。
●ダウンロード
にアクセス
![](https://assets.st-note.com/img/1669872960469-0VLh5MLacM.png?width=800)
amd64( C425TA の場合)なので .debパッケージの「 64bit 」をクリックでダウンロードします。
●インストール
ダウンロードされた .debパッケージ をダブルクリック
![](https://assets.st-note.com/img/1669879163903-d2N9zN1LGC.png?width=800)
「インストール」をクリック
![](https://assets.st-note.com/img/1669879209147-ccPG3hsUUk.png?width=800)
「OK」をクリック
![](https://assets.st-note.com/img/1669879264239-VyEXE05sdm.png?width=800)
インストールが完了すると、ランチャーにアイコンが追加される
![](https://assets.st-note.com/img/1669879293519-d4VDmmbIoS.png?width=800)
起動させましょう
![](https://assets.st-note.com/img/1669879317726-S3CbRz2vrb.png?width=800)
初回起動時には「Get Started」なるタブが開かれてます
簡単なチュートリアルです。これはテーマ選択。
こういうのもある。
![](https://assets.st-note.com/img/1669879377218-K6bwAf7H8G.png?width=800)
Web系ファイルの説明もあります。
![](https://assets.st-note.com/img/1669879405343-q9S4pcCdeD.png?width=800)
ちなみに App.tsx の「.tsx」拡張子は、ReactのJSX記法のTypeScript版。
テキストファイル
テキストファイルを作成してみましょう
File - New Text File で新規作成
![](https://assets.st-note.com/img/1669879515878-hCuJ5LGXju.png)
タブには「Untitled-1」となっている
![](https://assets.st-note.com/img/1669879553287-TdGN8HkOj2.png?width=800)
「Ctrl + S」での保存時にファイル名を付けます
![](https://assets.st-note.com/img/1669879597929-JirXit27wc.png?width=800)
「 test.txt 」とでもしておきましょう。
![](https://assets.st-note.com/img/1669879638629-YxxfrJUxqE.png?width=800)
「Save」ボタン押下で保存します
![](https://assets.st-note.com/img/1669879716788-Xi17ZgfevN.png?width=800)
日本語入力は、さっきのGimpで対応済みなのでばっちりだぜ👍️
![](https://assets.st-note.com/img/1669879747151-iiOpVVCeL2.png?width=800)
アウトライン機能
先程も説明しましたが、文章は長くなると、移動も大変になります。
そこで、見出しごとの目次のようなものをサイドメニューに表示し、それをクリックすると対象見出しに移動出来れば便利です。
●拡張機能をインストール
『 Markdown 』という拡張機能をインストールしたいと思います。
左サイドバーの拡張機能ボタン押下
![](https://assets.st-note.com/img/1669879857839-3SfYrJCf72.png)
拡張機能の検索欄が開かれるので
![](https://assets.st-note.com/img/1669879900388-nMyDqDIoWr.png)
「 markdown 」と入力、結果一覧より『 Markdown 』を選択
![](https://assets.st-note.com/img/1669879977358-rqPtaLy7uI.png)
『 Markdown 』がインストールされます
「Plain Text」をクリック
![](https://assets.st-note.com/img/1669880029260-wAiYFnf6rx.png)
形式一覧が出てくるので
![](https://assets.st-note.com/img/1669880097761-ud2vozH1tw.jpg?width=800)
「Mark down」を選択
![](https://assets.st-note.com/img/1669880160840-IKtYVL67XG.jpg?width=800)
「Mark down」になる
![](https://assets.st-note.com/img/1669880193547-MN3VtoyDxh.png)
Markdown記法が使えるようになります。
![](https://assets.st-note.com/img/1669880235119-XzXukT3H0u.png)
「Ctrl + B」でサイドメニューを開く
![](https://assets.st-note.com/img/1669880269706-oTnhSRlSEx.png)
「OUTLINE」をクリック
![](https://assets.st-note.com/img/1669880300800-4pmNmfYOFl.png)
「# 」(シャープと半角スペース)を先頭につけると、見出しとなります。
# 大見出し1
## 小見出し1-1
## 小見出し1-2
ポメラのアウトライン機能でいう「.」(ピリオド)に該当
※ VSCodeの場合、シャープの後に半角スペースも入れる点に注意
こんな感じです
![](https://assets.st-note.com/img/1669880472551-bXvmL9UF5P.png?width=800)
階層を開く
![](https://assets.st-note.com/img/1669880499993-l6rA2hEaeY.png?width=800)
階層は、シャープの数で調整。
![](https://assets.st-note.com/img/1669880529520-Fx2mftRYJP.png?width=800)
機能検証のため、適当に長文
![](https://assets.st-note.com/img/1669880607045-R17gSfGxvy.png?width=800)
アウトラインの「小小見出し1-1-1」クリックで、エディタの該当箇所に移動します。
![](https://assets.st-note.com/img/1669880644701-pJRSRz9aZZ.png?width=800)
「小見出し2-1」クリックで、見出しワープだぜ❗
![](https://assets.st-note.com/img/1669880678373-VeREoXS0NT.png?width=800)
ライターや作家にとっては必須の機能ともいえよう。
自動保存にする
では、自動保存にしましょう。
上部メニューより File - Preferences - Settings の順でクリックし、設定画面を開きます
( ※「Ctrl + , (カンマ) 」でも可 )
![](https://assets.st-note.com/img/1669880767787-jFsXdNkVMq.png?width=800)
Search settings 欄に「auto save」と入力
![](https://assets.st-note.com/img/1669880798074-3C2SRE0cG0.png?width=800)
自動保存の設定欄が表示されます
![](https://assets.st-note.com/img/1669880823512-EgwTm7s0Yb.png?width=800)
この off の部分をクリックすると選択リストが出ます
![](https://assets.st-note.com/img/1669880852801-vGMpMnj4Ai.png?width=800)
off : 自動保存をしない(デフォルト)
afterDelay : 編集後「Auto Save Delay」で設定したミリ秒経過後に自動保存
onFocusChange : エディタからフォーカスがはずれた時に自動保存
onWindowChange : ウィンドウからフォーカスがはずれた時に自動保存
![](https://assets.st-note.com/img/1669880899615-6DEpjjYCuT.png?width=800)
ここでは「afterDelay」を選択します。
その下に「Auto Save Delay」項目があり値が 1000 となっています(値は調整可)。
編集後、1秒(1000ミリ秒)経過に自動保存ということになります。
おまけ
いや〜、ここまでお読みいただきありがとうございます。
トマトナーラは、いかがでしょうか🍅🧀🍝
![](https://assets.st-note.com/img/1669881007236-B9CTflqJLY.jpg?width=800)
次回は【エンジニア向け:Node.js/Vite インストール 編】乞うご期待❗
【辛島信芳の著書】
IT技術などに興味のある方は、是非ご覧になってください。
この記事が気に入ったらサポートをしてみませんか?