#author("2025-06-13T14:05:59+09:00;2025-06-13T10:13:38+09:00","default:member","member") #author("2025-06-13T16:31:42+09:00;2025-06-13T10:13:38+09:00","default:member","member") *Sway-wmガイド Sway-wmを使ったデスクトップ環境の構築方法の解説サイト #image(main-tmp.jpg) -''角田 雄一'' -'''Keywords：Arch Linux, Sway, Window Manager, Desktop Environment''' -[[サンプルサイト>https://yuichi-853.github.io/arch-sway-custom/]] ~ //[[&color(red){__プレゼン用ページ！__};>角田雄一/卒業研究/プレゼン1]] ~ **概要 ***これは何？ __[[Arch Linux>https://ja.wikipedia.org/wiki/Arch_Linux]]__ と __[[Wayland>https://ja.wikipedia.org/wiki/Wayland]]__ 向けのタイリングウィンドウマネージャー「__[[Sway>https://ja.wikipedia.org/wiki/Sway_(%E3%82%A6%E3%82%A3%E3%83%B3%E3%83%89%E3%82%A6%E3%83%9E%E3%83%8D%E3%83%BC%E3%82%B8%E3%83%A3)]]__（以下、Sway-wm）」を使った、コーディング作業用途に特化したデスクトップ環境の構築方法を日本語で解説したWebサイト //&color(red){これは何か・・を簡潔に}; ~ ***背景と目的 以前、Sway-wmというタイリングウィンドウマネージャーを自分のデスクトップ環境に導入するため、設定方法を調査・検証していたことがあった。その際、Arch LinuxやSway-wmに関して、日本語の情報源が少ないことや、__[[公式Wiki>https://wiki.archlinux.jp/index.php/%E3%83%A1%E3%82%A4%E3%83%B3%E3%83%9A%E3%83%BC%E3%82%B8]]__をはじめとする情報共有サイトでは情報が一元的に整理されていることから、初学者が連続的かつ統合的に情報を収集し、全体像を把握するのが難しいという現状を、実際に体験し目の当たりにした。 そこで、日本のユーザーがSway-wmを使ったデスクトップ環境を自分でカスタマイズし、最適化するための情報源を増やすため、デスクトップ環境の構築方法を日本語で体系的に詳しく解説したWebサイトを作成することにした。 //&color(red){プロジェクトの背景と目的}; ~ ***コンセプト -記事はMarkDown形式で記述・管理できるようにする。 -MarkDownファイルで書かれた記事をHTMLに変換する機能を、JavaScriptを使ってブラウザ上で動作するように実装する。 -Github Pagesを使い、ローカルのGit RepositoryでMarkDownファイルに変更を加えた際、GithubにPushするだけで記事を更新できるようにする。 //&color(red){基本的な考え方、枠組み、視点など}; ~ ***成果物の仕様 Webサイト //&color(red){&small(成果物の形式・サイズ・時間尺等);}; ~ //***メンバー //&color(red){共同プロジェクトの場合のみ｜メンバーと役割分担を明記}; //~ ***制作ツール ThinkPad (PC) NeoVim (テキストエディタ) //&color(red){使用するツール｜ハードウエア・ソフトウエア}; ~ ***プロジェクトの期間 //&color(red){プロジェクトの期間｜20XX.XX.XX - 20XX.XX.XX }; ~ ***まとめ //&color(red){プロジェクトが完結したら「まとめ」を記載して下さい。}; 中間報告の際、JavaScriptを使って、MarkDownでWebページを作るというコンセプトが珍しいため、それをテーマにしたプロジェクトに路線変更してはどうかと提案された。それを踏まえて、テーマ変更する際どんなアプローチができるのか探っていきたい。 ~ ~ **調査 ***現状調査 ''Sway-wmに関する日本語の情報源の調査'' -Googleで、「arch linux sway 設定」をキーワードとして日本語指定で検索した際、Arch LinuxでのSway-wmの設定方法に関連する''日本語の検索結果はわずか７件''であった。 -動画サイトYouTubeにおいては、バニラの（追加の設定やテーマ、アプリを含まない、素の状態の）Sway-wmに関する''日本語の動画はひとつも無かった''。 //&color(red){プロジェクトのテーマに関わる社会の現状と問題の洗い出し}; ~ ***先行事例 -IT情報共有サイト 代表的なものとして__[[Zenn>https://zenn.dev/]]__と__[[Qitta>https://qiita.com/]]__がある。 -Sway-wmの設定ファイルの紹介・解説サイト --https://zenn.dev/haxibami/articles/wayland-sway-install --https://zenn.dev/eloy/articles/342e8e390e01b3 --https://zenn.dev/reviq07/articles/5736cb799b3ffc#bluetooth //&color(red){プロジェクトのテーマに該当する先行事例の紹介、傾向分析など}; ~ ***技法・技術情報 -MarkDownからHTMLへの変換ライブラリ: __[[Marked>https://github.com/markedjs/marked]]__ -構文ハイライトのライブラリ: __[[highlight.js>https://highlightjs.org/]]__ //&color(red){プロジェクトの遂行に必要な技法・技術に関する調査}; ~ ~ **プロジェクト管理 -__[[スケジュール（進行管理表）>https://docs.google.com/spreadsheets/d/1E9fFEPCkIFqWmT_iNE0cEh-c3_qAvQ33HUpLjEOpElE/edit?usp=sharing]]__ //&color(red){計画的な遂行のために、進行管理表を作成してリンクして下さい。}; -__[[TODOリスト>https://github.com/yuichi-853/arch-sway-custom/blob/main/docs/TODO.md]]__ //&color(red){やるべきこと（タスク）を箇条書きにします。}; //&color(red){完了後は「%%取り消し線%%」あるいは「// コメントアウト」」}; //***NotToDo //&color(red){やらないこと：何をするかではなく「何をしないか」を考える}; //&color(red){例：10人以上の会議には出ない。苦手なことは誰かに頼む・・}; ~ ~ #hr CENTER:''進捗記録'' //&color(red){最新の情報を一番上に記載して下さい（古い記事が下へ沈む）。}; #hr ~ ~ **2025.06.06 ***目次リンク自動生成 MarkDownファイルの「見出し１（#）」と「見出し２（##）」を自動で読み取って、目次が自動生成されるようにした。（画像左部） #image(marked_test_7.jpg) ~ ~ **2025.05.23 ***ライブラリ動作検証 画像のパスを指定することで、画像を埋め込むことができるようにした。 MarkDown記法に則った記法で埋め込めるようにした。  #image(marked_test_6.jpg) ~ ~ **2025.05.16 ***ライブラリ動作検証 JavaScriptを使って、MarkDownファイルにYouTube動画のリンクをテキストとして貼るだけで、サイト上ではYouTube動画のサムネイルを表示し、再生できる状態で埋め込まれるようにした。 ~ #image(marked_test_5.png) ~ ~ **2025.05.09 ***コンテンツ書き出し -Arch Linuxのインストール方法の簡単な紹介とSway-wmとその他ツールのインストール方法。 -日本語入力メソッドの設定 -Sway-wmの基本的な設定 -Waybar（ステータスバー）の設定 -Gnu Stowを用いた設定ファイルの複数デバイスでの管理法 -wofi（ランチャー・メニュー）の設定 -mako（通知デーモン）の設定 -xkbを用いたキーマップの貼り替え ~ ***ライブラリ動作検証 YouTubeリンクをMDファイルに貼り付けHTMLに変換したところ、リンクの文字列がそのまま表示された。学科サイトのように動画枠とサムネイルを表示し、そのまま再生できるようにしたい。 動画URLから自動的に動画を埋め込むプログラムを書いているが、まだうまくいっていない。 #image(marked_test_4.png) ~ ***プレゼン準備 [[__プレゼン用ページ__>角田雄一/卒業研究/プレゼン1]] ~ ~ **2025.05.02 ***ライブラリ動作検証 ''highlight.js'' の実装及び動作検証 -✅ コードブロックの構文ハイライト機能（画像はbash文） #image(marked_test_3.png) ~ ***プレゼン準備 [[__プレゼン用ページ__>角田雄一/卒業研究/プレゼン1]] ~ ~ **2025.04.25 ***ライブラリ動作検証 ''Marked'' の実装及び動作検証 -✅ MarkDown文書をHTMLに変換する機能 #image(marked_test_1.png) -✅ コードブロック表示機能 #image(marked_test_2.png) ~ ~ **2025.04.18 ***サイトの要件 Arch Linuxに関する情報は移り変わりが激しく、サイト情報の頻繁な更新が想定されるため、以下の要件を設定する。 -記事はMarkDown形式で記述・管理できること。 -Github Pagesを使い、ローカルのGit RepositoryでMarkDownファイルに変更を加えた際、GithubにPushするだけで記事を更新できること。 ~ ***実装予定機能 -ブラウザ上で動作するJavaScriptのMarkDown文書をHTMLに変換する機能 -MarkDownファイルから各章の見出し情報を取得し、目次を生成する機能 -記事をMarkDownからHTMLに変換して表示した際、コードブロックの構文ハイライト機能 -画像表示機能 -YouTube動画リンク埋め込み&表示機能 ~ ***技法・技術調査 -__[[Marked>https://github.com/markedjs/marked]]__という、MarkDown文章をHTMLに変換できるライブラリがあり、CDNか、JavaScript圧縮ファイルをサイトに組み入れることで利用できる。 -__[[highlight.js>https://highlightjs.org/]]__という、構文ハイライトのライブラリがあり、__[[この記事>https://www.nxted.co.jp/blog/blog_detail?id=1]]__によると、上記"Marked"と非常に相性が良いそうである。 ***試作 __[[サイトマップ>https://docs.google.com/presentation/d/1UMsg5QQ3sMK1BGgppFM8X8qStwkTZXpFVh0Ux7-v4BI/edit?usp=sharing]]__ ~ ~ **2025.04.11 ***テーマ決定 -Arch LinuxとSway-wmを使ったデスクトップ環境の構築方法を日本語で解説したWebサイトの制作 ~ ***現状調査 ''Sway-wmに関する日本語の情報源の調査結果'' -Googleで、「arch linux sway 設定」をキーワードとして日本語指定で検索した際、Arch LinuxでのSway-wmの設定方法に関連する''日本語の検索結果はわずか７件''。 -動画サイトYouTubeにおいては、バニラの（追加の設定やテーマ、アプリを含まない、素の状態の）Sway-wmに関する''日本語の動画はひとつも無かった''。 ~ ***先行事例調査 -IT情報共有サイト 代表的なものとして__[[Zenn>https://zenn.dev/]]__と__[[Qitta>https://qiita.com/]]__があり、どちらのサイトもMarkDown記法で、左に記事、右に目次のレイアウト。 左に目次のほうが見やすいかも。 -Sway-wmの設定ファイルの紹介・解説サイト --https://zenn.dev/haxibami/articles/wayland-sway-install 日本語の解説の中で最も詳しい。 --https://zenn.dev/eloy/articles/342e8e390e01b3 ArchLinuxのインストール方法から書かれている。Sway-wmの解説は少しだけ。 --https://zenn.dev/reviq07/articles/5736cb799b3ffc#bluetooth 設定ファイルをGithubで公開し、サイトでは実装コマンドだけ書くスタイル。各設定の詳細な解説はない。 ~ ~ ~