Author: RockinWoolWalker

Ubuntuのカスタマイズ#1 LINEの追加とGUIの変更

今週は頭痛がひどく殆ど寝ていたRockinWoolです。寝る→PCいじる→妻と生活→寝るという最高に幸せな環境で体調は少し改善していますが、それでも頭痛が残っています。なので悪い人の下で働き続けてダメージを受けるとこうなるのだなと体感しながら日々を過ごしています。さて、今回のテーマは「Ubuntuを新規インストールした際にやっておきたいこと その1」です。まずはLINEのインストールとGUIの変更について、参考になったサイトを紹介しながら説明していきます。 LINEのインストール Qiitaにある「【UbuntuでLINE!?】 UbuntuでLINEを使う方法を画像付きで説明する(@north_redwingさん)」を参考に進めます。基本的には書いてあることをまったくそのままやれば上手く行きます。しかし、この方法には一つ落とし穴がありました。 LINEの更新時にアイコンが透明になる問題について LINEのアイコンは、/home/""username""/.local/share/applications/chrome-"app-id"-Default.desktopに対して、Icon=/home/"username"/.config/google-chrome/Default/Extensions/"app-id"/"app-ver"/res/img/line_logo_128x128_on.pngを書き込むことによって設定していました。察しの良い方は気づかれたかもしれませんが、Iconのパスに”app-ver”が含まれていますね。これによって、LINEに自動更新が入りバージョンが上がるとパスが失効してしまいます。結果としてアイコンが透明になるわけです。 LINEアイコンの透明化を回避するための策について さて、原因が分かれば対策は簡単です。要はapp-verの含まれない場所に画像をコピーし、そこを参照すれば良いわけです。なので、/home/"username"/.config/google-chrome/Default/Extensions/"app-id"/"app-ver"/res/img/line_logo_128x128_on.pngを/home/"username"/.config/google-chrome/Default/Extensions/"app-id"/ディレクトリへ移動し、Iconのパスをそこへ設定すれば解決します。 GUIの変更 「【Linux】Ubuntu22.04をMac風にカスタマイズする(macOS Ventura風)」さんを参考に進めます。ただし、この記事にある内容は結構ボリューミーなので、少し選んで入れていきました。 お気に入りアプリを表示する場所を画面下に変更する 上記記事を紹介しておきながら、早速その中に存在しないGUI設定になります。これはUbuntuの設定から変更できます。実は今回の目的はこれを達成することでした。複数ディスプレイでUbuntuを使う際に、メインにしか表示場所が無いと不便でしたので。下記に設定方法がわかる画像をおいて置きます。 まとめ 今回もここまで読んでくださってありがとうございました。皆様のPC遊びライフの一助になれば幸いです。 参考文献 【UbuntuでLINE!?】 UbuntuでLINEを使う方法を画像付きで説明する【Linux】Ubuntu22.04をMac風にカスタマイズする(macOS Ventura風)

DockerDesptopから画面を取るまで

今回はDocker Desktop for Linuxから画面を取るまでの試行錯誤、およびシンプルなdockerからの変更点などを解説します。4/15から4/24までの格闘日誌になります。ちょうど職場でのプレッシャが起因した休職に入ったのですが、今もすごく頭が痛いです。治るのかなこれ? 普通のDockerから画面を取る場合 普通のdockerから画面を取る場合は、下記3つが必要になります。 まずは1つ目、ソケットファイルの共有から解説します。まずはホストにあるソケットファイルの実体ですが、こちらは簡単に見つけることができます。先頭がd(directory)ではなく、s(socket)になっていることが証拠です。 2つめの$DISPLAY変数ですが、こちらはホストでは下記のようになっています。 $DISPLAY変数の構成は(ホスト名):(ディスプレイ番号).(スクリーン番号)で表現されます。今回はローカルホストであるため、ホスト名は省略されており、理由は良くわかりませんがスクリーン番号も省略されています。コンテナから画面を取る際も、localhostの画面へ表示を行いたいので$DISPLAY変数は同じで良いということですね。最後の画面表示の許可ですが、通常Xサーバへは決められたユーザしかログインできないのでそれを解除する作業になります。単純にxhost+と端末で入力するだけなので、非常に簡単な作業ではあります。ここまでの作業を自動でやってくれるプログラムはここで公開してあります。 DockerDesktopではうまく行かない 表題の通り、上記の手法をDockerDesktopで再現しようとしてみてもうまくいきません。エラーメッセージは下記の通りです。 このエラーは$DISPLAYで指定されている:0の画面へアクセスしようとしたら開けなかったというメッセージになり、通常はxhost + を行わなかった時に発生します。念の為xhost + を再度やってみても同じ回答が来るので、今回は違う原因で発生していると推測できます。幸いなことに、前回DockerDesktopは通常版とは違い、VM上で動作している説が発見できているので、今回は「別マシンから自マシン上へ画面を転送する」という技術で解決する必要がありそうです。 DockerDesktopからホストへのSSHを可能にする さて、情報の転送といえばSSHですね。今まで横着してSSH関連についてあまり勉強してこなかったのですが、今回はOpenSSH入門(河本安武さん著)を使ってしっかり活用して行こうと思います。まず、コンテナ側にあるアプリがssh-client, ローカルマシン側がssh-serverになるため、コンテナにopenssh-clientが入っているか確認しました。ここはデフォルトで入っていたので特筆する作業は無いです。一方でローカルホストの方にopenssh-serverが必要なのに入れていなくてかなり長い間格闘しました。ChatGPT先生の介抱もあってなんとか気づけたのですが、皆様もこのような初歩的なミスに引っかからないようにしましょう。ローカルホストへのssh-serverのインストールは下記の通りになります。 sudo apt install openssh-server ホスト上のSSH開通実験 まずはsshが正しく可能かどうか確認しましょう。私の場合、最初にこの開通実験を行っていなかったため、問題の切り分けに時間がかかりました。反省を兼ねてここで当たり前の確認作業を記述します。このセクションでやっておくべきことは「ホスト端末」→「ホスト端末」へのSSHが成功するかどうかの確認になります。これ自体は下記の方法で実行できます。 ssh username@localhost ホスト→コンテナへのSSH ホスト→ホストのSSHが成功することが確認できたあとは、ホスト→コンテナのSSHを試してみましょう。ちなみに私はここで躓きました。まずはエラーメッセージから。 $ssh…

WordPressのカスタマイズ@2023.04.10

こんにちは。RockinWoolです。WordPressでサイトを運営する上で、日々気になるのが閲覧数。これを効率良く上昇させるためには、デザインを良くする必要があると考えています。今回は大胆にサイトを更新しましたので、その一部始終をまとめました。 メニューバーを追加 今回のサイト更新は、「メニューバーを作りたい」という目的がありました。旧デザインでは投稿記事が増えるにつれて、本当に知りたい情報にアクセスしにくくなります。例えば、上図のように技術日誌と環境構築記事を分ければ、特定のソフトウェアインストールを知りたい方などが早く記事にたどり着けるかなと考えました。 外観→メニューが見つからない 一般的なサイトではWordPressの管理画面にて、外観→メニューとたどることによってメニューが設定できると説明があります。しかし、私のWordPressの画面では外観→メニューというのが出てきません。回答としては、サイトのデザインテーマによってはメニューが出てこないものがあるということのようです。今回は下記のNewsWayというテーマを採用することによって、デザインを一新しつつメニューを追加することに成功しました。また、完全に追加ですがTwitterとの連携も行いました。 目次の追加 Qiitaのような技術ブログの中には、説明の目次があらかじめ上部に用意されているものがあります。自分のブログでも同じことをしたくなり調査した結果、Table of contents plusという拡張で自動的に可能であることがわかりました。 https://www.conoha.jp/lets-wp/wp-tableofcontents/ バックアップ 前回の記事でも書きましたが、WordPressのテーマや投稿記事、プラグイン等をすべてバックアップするAll-in-One WP Migrationを見つけました。管理画面のプラグイン追加からすぐに取り入れることができるので、説明は割愛します。それにしてもWordPressのプラグインはとても便利なものが多いですね。 リンク切れの検出 こちらもBroken Link Checkerという拡張を入れるだけですぐ実現できます。ブログ作成者としてはメンテコストが上がりますが、その分ユーザへの恩恵も大きいものだと思います。 その他プラグイン ちなみにこれら以外のプラグインについてはこちらのサイトに記載されておりますので、ご興味がありましたらご参考にしてください。自分の場合はデフォルトで入れているもの等もありましたので、ここでは限定して紹介させていただきました。また、バックアップ系のプラグインについてもこちらのサイトがより詳しく記載しておりますので、自分の好みに合わせてインストールしていただければと思います。 それでは、今回はここまで。また何かしら更新したら記事にします。今後ともよろしくお願いします。##

Electronの開発環境 (Ubuntu)

先日、ノートPCに続きデスクトップPCも更新しました。もちろんこちらにもUbuntuをインストールして使っているのですが、せっかくですのでアプリでも作ってみたいなあと思い、最近流行りのElectronを使ってみることにしました。しかし、Ubuntu×Electronの導入方法を説明した日本語Webサイトが乏しく苦戦したので、日記を兼ねてここに示します。 Ubuntuへのnodejsインストール Electron導入はUbuntu DesktopにElectron環境を構築する(Qiita)を参考にしながた進めていきます。しかし、nodejsのインストール部分でnodebrewコマンドを打っても権限の関係で上手く行かない場所がありました。記事もだいぶ古いですし、このときのnodejsバージョンが6.x、現在が19.xなのでそのままでは上手くいかないのも頷けます。したがって、別の方法でUbuntu×nodejsの環境を構築することになります。こういうときは公式サイトが最強だと思うので、公式サイトのDL場所を見に行きます。しかし、置いてあるのは謎のTar.gzファイルだけ。どうすればいいのか・・・? 外人エンジニアの動画を参考にして成功 ここで日本語でのドキュメントを探してみたのですが一向に見つからず。そこで、Youtubeにて検索してみると「NodeJS Installation on Ubuntu 22.04」という完璧なタイトルの動画を発見。視聴してみると、設定方法が詳しく説明されていました。英語自体も簡単な単語で説明されているのでわかりやすかったです。 導入方法解説(日本語) まずは公式サイトへ行き、LTSバージョンを右クリック→リンク先を保存でDLします。 その後、ダウンロード先のディレクトリで下記コマンドを実行して解凍します。このときに、すでにビルド済みのバイナリが展開されます。 ここから先はちょっとしたアレンジになります。今回のように解凍したバイナリに対し、直接/usr/binや/usr/local/binなどに置くことや、ディレクトリにPATHを通すことがよくおすすめされます。しかし、個人的には管理が面倒であるので避けたいと考えています。そこで、代わりにシンボリックリンクファイルを/usr/binに配置することを推奨します。まずは先程解凍したnodejsのバイナリを/optへ移動しましょう。 そしてバイナリのシンボリックリンクを/usr/binに配置しましょう。nodejsのバイナリはnode-v18.15.0….の中にあるbinフォルダに実体があります。 ここまで操作することで、nodejsのインストールに成功します。試しにnodeコマンドを打ってみると動作することがわかります。 Electronのインストール Level1: 実行環境の準備 nodejsのインストールに成功したら、次はElectronの導入に移ります。ここから先はElectronの公式サイトにあるチュートリアルに沿って進めます。まず、作業用ディレクトリを適当に作りnpm initします。 npm init実行後に、いくつかインタラクティブ入力を要求されます。重要なのは、entorypointをmain.jsに変更し、authorとdiscriptionを適切に入力することだそうです。自分はついでにgithubのURL等も入れておきました。nodejsでの初期化が完了したら、いよいよElectronのインストールを実行します。下記コマンドを入力しましょう。 また、nodejsでのアプリ起動時にelectronが発動するようにpackage.jsonのscripts項に追記します。※この辺はまだ私もよく理解できていないのですが、雰囲気はそんな感じです。 Level2: パッケージ化環境の準備 まだアプリの作成も行っていない段階で気が早いですが、Electronで作成したアプリケーションをパッケージ化するための拡張も先に入れておきます。 ここで注意していただきたい点がひとつ。上記のコマンドを実行することで生成されるforge.config.jsにはpackage化のためのmakeを実行した際に、どのようなパッケージを出力するかが規定されています。この中の設定でRPMパッケージを作ることになっていますが、そこを削除してください。そうしないとRPMパッケージを作ろうとしてエラーを吐いて止まってしまいます。UbuntuではDEBパッケージが標準ですが、Web上では「RPMを入れれば良い」などのトンチンカンな回答も多く見られるので本当に注意。最悪システムを管理しきれなくなります。この情報はWebには無く自分で挙動を見ながら解決したので、同じ轍を他の人がふまないよう記して置きます。 サンプルアプリの作成 サンプルアプリ起動まで…

WordPressの構成を, DD4Lを使って学び直す

こんにちは。最近、精力的に活動しているRockinWoolです。今日はDocker Desktop for Linuxを使ってWordPressをより理解し、上手に活用することを目標に調査していきます。WordPressを雰囲気で使っている人々、Docker Desktop for Linuxに興味がある方に刺さってくれれば嬉しいですね。(逆にいえば、皆様には私のスキルの低さを温かい目で見守ってもらえばと思います) 1. 現在のWordPress環境:予測と懸念 現在、ロリポップさんのサーバをお借りし、WordPressを使って記事を作成しています。WordPressはロリポップさんのサーバ側に用意していただき、LocalのWeb browserからアクセスしております。ロリポップさんのサーバにはムームーさんのドメインをお借りしてアクセスしておりますので、現在の環境構成は下図のようになっていると予測しております。この時点で危惧すべきことは、資産がサーバ側にあるということです。つまり、何らかの状況でLolipopさんへの支払いが遅れたりした際には、一発でこの記事を含めたすべての情報が失われる危険性があるということです。 2. WordPress環境を試しに構築してみる 理解できないものに関しては、まずローカルで環境を作ってみるのが一番良いと思います。ただし、なるべく新品のローカルUbuntu環境を荒らしたくないので、Dockerを使って再現していきます。 2.1 Docker Desktop for Linux(DD4L)環境の構築 今回はこちらを使いながら確認していきます。まずはDocker Desktopをインストールしていきます。普段はCLIでdockerコンテナを使っているのですが、かねてよりナウな仕組みを使って高速化を狙うべくDockerDesktopも触ってみたいと思っていました。ちなみにDockerDesktopの有料化が先日話題になっておりましたが、FAQでは個人レベルであれば無料である旨が記載されています。 インストール作業は非常に簡単で、公式配布サイトに行ってdebパッケージを取得&apt installでインストールするだけです。 2.2 WordPressコンテナの作成 WordPressコンテナについても公式サイトからGithubの説明ページに飛ぶことで作り方がわかるようになっているようです。試しにやっていきましょう。まずは空のプロジェクトを作れと言われているので、単純に作業場所を作ります。その上でdocker-compose.ymlを作ることを指示されています。docker-compose.ymlの記述は下記の通りです。 雑な解説ですが、このdocker-compose.ymlではdb(database)とwordpressの2つのserviceが動いています。また、volumesでホストのdb_dataとwp_dataフォルダを各コンテナと共有しています。ちなみにcommand行がイマイチよくわかっていなくて、デフォルトのコマンドの上書きとしか日本語公式には書かれていないんですよね。ちょっと宿題にしておきます。 2.3 コンテナの起動とWordPressの設定 上記のいつものコマンドをdocker-compose.ymlのあるディレクトリで実行すればコンテナが作成され、自動的に動き出します。今回はここでDocker…

ノートPCの分解と更新

先週末、日本ソーシャル・データサイエンス学会に参加してきました。その中で計算時間の話になり、自分もノートPCを更新しなければと思い立ちました。結論としては、1.5万円でQoL爆上がり!起動時間も数分だったのが5秒程度まで改善されました。 更新したノートPC TOSHIBA Dynabook R731という2011年春モデルのノートPCです(古すぎぃ)。2コア4スレッドでメモリ4GB, 500GBのHDDストレージということで、12年前にしてはそこそこのスペックを持っています。それ故長く使ってしまったというか、Ubuntuを入れて動かす分には結構十分な力を持っていたんですよね。しかし、さすがに年をとって重くなってしまったので、更新することにしました。 更新方針 まずCPUです。R731はcore-i3の2.1GHz, キャッシュが3MBというそこそこのスペックを持っています。CPUは他部品に比べれば頑丈で長持ちするイメージなので、今回は節約を兼ねて現行のままにします。次にメモリ。こちらは4GBなので、現代のアプリを動かすには少し弱いと考えて買い足します。ただし、12年前のノートPCなのでDDR 3Lというあまり耳にしないメモリが必要です。ちょうどCrutial製のモデルがAmazonに残っていたので約6000円で購入しました。 その次はストレージ。2011年ではSSDはデータの揮発性が心配で、データ損失を避けるためにHDDが推奨されていました。しかし、2023年では技術が進歩しているため問題なくSSDが使用できます。SSDもCrutial製(SATA2.5)のものを近場のPCショップで購入しました。こちらもおよそ4000円程度。最後にバッテリー。これはもう7年くらい前から死んでいました。今では電源ケーブルを外すと1分しないうちに落ちてしまいます。なぜか現在でも互換性のあるパーツが販売されていたのでAmazonで購入しました。3000円程度。 分解に必要な工具 作業レポ 最初にPC裏面のドライバを外していきます。Dynabook R731はメンテナンス性を重視して設計されているようで、ウラ面のうち#0の+ドライバーで開けられる部分だけ外せばストレージとメモリは交換できます。CPUを交換する場合は大きめのドライバも必要なので注意。メモリは交換前の時点で2GB2枚がついていることを想定していたのですが、なんと4GB1枚という構成だったので4GB2枚を新規購入する意味はなかったですね。ネットの情報を鵜呑みにせずに事前に確認しておけば良かったと後悔しました。ストレージは下記画像の左側に引っこ抜く感じで取り外しできます。ガイドとなる透明シールもあるので非常にかんたん。メモリは固定レバーを外側にやる感じで外します。下のメモリから入れていくとかんたんですね。 OSのインストール あらかじめ作っておいたUbuntu22.04イメージが入ったUSBを刺して、電源をつないだ直後にF2を連打してBIOSモードに入ります。その後起動順を変更してUSB内のUbuntuが優先的に起動するように変更を加えます。ちなみにUbuntuのイメージは北陸先端科学技術大学院大学JAISTの管理しているやつが断然おすすめです。これを使っておけば日本語にまつわる設定に苦しまなくなります。また、USBに起動可能なUbuntuを焼くためにはRufusがおすすめです。 更新後の動作所感 冒頭に書きましたが、起動時間の短縮がすごい。HDD→SSDとメモリ倍増の効果によって、数分単位だった起動時間が5秒程度に。また、この記事を書いている際に使用しているChromeもサクサクになりました。この快適さを文章では伝えきれないですが、単純に処理速度が上がっただけで買い替えに匹敵する快適さを手に入れていると思います。しかも1万3000円で。 その後 docker、Chrome、Cmake、VSCodeのインストールをとりあえず行いました。dockerのインストール方法がだいぶ変わっていたので戸惑いました。ubuntu等ではあまり積極的に対応していないようですね。このサイトに詳細な方法が記載されていたので、これに従うと良いと思います。ChromeやVSCodeは古いバイナリでインストールしても自動更新があるので安心です。Cmakeはver3.19をインストールしました。 最後に ここまで読んでくださってありがとうございました。PCの改造はコストの割にリターンが大きいので、自信がある方はやってみたほうがお得だと思います。ただし、DDRは今や5であるのに旧式のDDR3を使わなければならないなどの制約が重くのしかかるので、あまりゾンビにさせずに20年後にはスパッと切らないといけないですね。それでは次回もよろしくお願いします!