角田雄一/卒業研究

Sway-wmガイド

Sway-wmを使ったデスクトップ環境の構築方法の解説サイト

• 角田 雄一
• Keywords：Arch Linux, Sway, Window Manager, Desktop Environment
  
  
  プレゼン用ページ！

概要

これは何？

Arch Linux と Wayland 向けのタイリングウィンドウマネージャー「Sway（以下、Sway-wm）」を使った、コーディング作業用途に特化したデスクトップ環境の構築方法を日本語で解説したWebサイト

背景と目的

以前、Sway-wmというタイリングウィンドウマネージャーを自分のデスクトップ環境に導入するため、設定方法を調査・検証していたことがあった。その際、Arch LinuxやSway-wmに関して、日本語の情報源が少ないことや、公式Wikiをはじめとする情報共有サイトでは情報が一元的に整理されていることから、初学者が連続的かつ統合的に情報を収集し、全体像を把握するのが難しいという現状を、実際に体験し目の当たりにした。
そこで、日本のユーザーがSway-wmを使ったデスクトップ環境を自分でカスタマイズし、最適化するための情報源を増やすため、デスクトップ環境の構築方法を日本語で体系的に詳しく解説したWebサイトを作成することにした。

コンセプト

• 記事はMarkDown形式で記述・管理できるようにする。
• Github Pagesを使い、ローカルのGit RepositoryでMarkDownファイルに変更を加えた際、GithubにPushするだけで記事を更新できるようにする。
  
  

成果物の仕様

Webサイト

制作ツール

ThinkPad (PC)
NeoVim (テキストエディタ)

プロジェクトの期間

まとめ

調査

現状調査

Sway-wmに関する日本語の情報源の調査

• Googleで、「arch linux sway 設定」をキーワードとして日本語指定で検索した際、Arch LinuxでのSway-wmの設定方法に関連する日本語の検索結果はわずか７件。
• 動画サイトYouTubeにおいては、バニラの（追加の設定やテーマ、アプリを含まない、素の状態の）Sway-wmに関する日本語の動画はひとつも無かった。
  
  

先行事例

• IT情報共有サイト
  代表的なものとしてZennとQittaがある。
• Sway-wmの設定ファイルの紹介・解説サイト
  • https://zenn.dev/haxibami/articles/wayland-sway-install
  • https://zenn.dev/eloy/articles/342e8e390e01b3
  • https://zenn.dev/reviq07/articles/5736cb799b3ffc#bluetooth
    
    

技法・技術情報

• MarkDown→HTML変換ライブラリ: Marked
• 構文ハイライトのライブラリ: highlight.js

プロジェクト管理

• スケジュール（進行管理表）
• TODOリスト

2025.05.16

ライブラリ動作検証

JavaScriptを使って、MarkDownファイルにYouTube動画のリンクをテキストとして貼るだけで、サイト上ではYouTube動画のサムネイルを表示し、再生できる状態で埋め込まれるようにした。

2025.05.09

コンテンツ書き出し

• Arch Linuxのインストール方法の簡単な紹介とSway-wmとその他ツールのインストール方法。
• 日本語入力メソッドの設定
• Sway-wmの基本的な設定
• Waybar（ステータスバー）の設定
• Gnu Stowを用いた設定ファイルの複数デバイスでの管理法
• wofi（ランチャー・メニュー）の設定
• mako（通知デーモン）の設定
• xkbを用いたキーマップの貼り替え
  
  

ライブラリ動作検証

YouTubeリンクをMDファイルに貼り付けHTMLに変換したところ、リンクの文字列がそのまま表示された。学科サイトのように動画枠とサムネイルを表示し、そのまま再生できるようにしたい。
動画URLから自動的に動画を埋め込むプログラムを書いているが、まだうまくいっていない。

プレゼン準備

プレゼン用ページ

2025.05.02

ライブラリ動作検証

highlight.js の実装及び動作検証

• ✅ コードブロックの構文ハイライト機能（画像はbash文）
  
  
  

プレゼン準備

プレゼン用ページ

2025.04.25

ライブラリ動作検証

Marked の実装及び動作検証

• ✅ MarkDown文書をHTMLに変換する機能
  
• ✅ コードブロック表示機能
  
  
  
  
  

2025.04.18

サイトの要件

Arch Linuxに関する情報は移り変わりが激しく、サイト情報の頻繁な更新が想定されるため、以下の要件を設定する。

• 記事はMarkDown形式で記述・管理できること。
• Github Pagesを使い、ローカルのGit RepositoryでMarkDownファイルに変更を加えた際、GithubにPushするだけで記事を更新できること。
  
  

実装予定機能

• ブラウザ上で動作するJavaScriptのMarkDown文書をHTMLに変換する機能
• MarkDownファイルから各章の見出し情報を取得し、目次を生成する機能
• 記事をMarkDownからHTMLに変換して表示した際、コードブロックの構文ハイライト機能
• 画像表示機能
• YouTube動画リンク埋め込み&表示機能
  
  

技法・技術調査

• Markedという、MarkDown文章をHTMLに変換できるライブラリがあり、CDNか、JavaScript圧縮ファイルをサイトに組み入れることで利用できる。
• highlight.jsという、構文ハイライトのライブラリがあり、この記事によると、上記"Marked"と非常に相性が良いそうである。

試作

サイトマップ

2025.04.11

テーマ決定

• Arch LinuxとSway-wmを使ったデスクトップ環境の構築方法を日本語で解説したWebサイトの制作
  
  

現状調査

Sway-wmに関する日本語の情報源の調査結果

• Googleで、「arch linux sway 設定」をキーワードとして日本語指定で検索した際、Arch LinuxでのSway-wmの設定方法に関連する日本語の検索結果はわずか７件。
• 動画サイトYouTubeにおいては、バニラの（追加の設定やテーマ、アプリを含まない、素の状態の）Sway-wmに関する日本語の動画はひとつも無かった。
  
  

先行事例調査

• IT情報共有サイト
  代表的なものとしてZennとQittaがあり、どちらのサイトも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で公開し、サイトでは実装コマンドだけ書くスタイル。各設定の詳細な解説はない。