$ls tags で記事を探す。学習サイトのUXをLinuxに寄せてみる【tukumolog-ぺちぺち改修記 #2】

はじめに、

こんにちは、tukumolog管理人 lumenheroです。

今回は、開発中のlinux academyの記事検索機能について、とりあえずデモ版を作ってみたので、そのテスト状況などを共有していけたらいいなと思っています。

普通の”検索欄”は面白くない。

記事の検索機能は、”～の解決法”、”~の使い方”をすぐに知りたい人にとっても、サイト運営者としても使い勝手やUXに直結するので重要です。この検索機能を作るにあたり、普通に記事検索させるというのもいいのですが、linuxの入門サイトなのだからもっと面白く、且つこのサイトを見てくれている人にとって使いやすいものにしたいと考えました。

そこで思いついたのが、「検索窓そのものをターミナルにしてしまう」というアイデアです。

1. コマンドで「探す」体験

一般的なサイトなら、ヘッダーに虫眼鏡アイコンがあって、そこにキーワードを打ち込みますよね。でも、Linuxを学ぼうとしている人が最初に触れるべきは、やはりコマンドラインです。

今回実装したデモ版では、検索窓をただの入力フォームではなく、簡易的なシェルとして機能するようにしました。

$ ＋コマンド　で検索しているデモ動画

• $ls tags：サイト内の記事タグをディレクトリのように一覧表示します。
• $history：自分が過去に読んだ記事の履歴を、ターミナルの履歴コマンド感覚で呼び出せます。

2. どんなコマンド？ $ls と $history

ただの遊び心だけではなく、実用的なUX（ユーザー体験）も考慮しています。

• 「何があるか」を能動的に探す $ls 初心者にとって、最初は「何を検索すればいいか」すら分からないものです。とりあえず $ls を打てば、どんなカテゴリ（タグ）があるか視覚的に把握できる。これは、Linuxサーバーにログインして最初に行う「中身の確認」と同じ体験です。
• 「さっきの続き」にすぐ戻れる $history 技術記事は一度読んで終わりではありません。コマンド一発で最近読んだ記事をリストアップできれば、ブラウザの戻るボタンを連打したり、履歴を漁ったりする手間が省けます。

このほかにも、今使えるコマンド一覧を見れる $help や検索とコマンドの出力結果などをクリアする$clearなども動作するようにしています。もちろん、普通の検索もできますよ。

3. 実装の裏側（ぺちぺちメモ）

今回はデモ版ということで、フロントエンド側で入力された文字列をパースして、特定のコマンドにヒットしたら結果を返すという仕組みを構築しました。ゆくゆくは、パイプ(｜)やリダイレクト(>>)なども使えるように(需要があれば）拡張してみてもいいかなと考えています。

例えば、$history の場合はブラウザのローカルストレージと連携させて、「どの記事IDにアクセスしたか」をスタックに積んでいく形式をとっています。linuxコマンドを学ぶ上で知ることも大事ですが、知っているだけだとダメで、知る→使う→理解するという１連の流れを少し体験してもらえるような検索機能にできたらなぁと思っています。

おわりに

「わざわざコマンドを打つのは面倒ではないか？」という意見もあるかもしれません。しかし、Linuxを習得する一番の近道は、「日常的にコマンドに触れること」です。

検索という当たり前の動作を少しだけ「Linuxっぽく」変えることで、サイトを訪れるたびに指がコマンドを覚えていく。そんな学習サイトを目指して、これからもぺちぺちと改修を続けていこうと思います。サブページの実装をすべて作っているといつ公開できるかわからないので、メインとサブページ２つくらいが完成したらひとまず公開してみようと思っています。