[JS]操作にマウスは不要、ターミナルのようにコマンド入力でナビゲートするスクリプト -Termic

ターミナルを愛する人のためにCoffeeScriptで開発されたオープンソースのjQueryのプラグインを紹介します。

デモはシンプルですが、いろいろ応用ができそうです。

Termic -GitHub

• Termicのデモ
• Termicの使い方

Termicのデモ

デモは非常にシンプルです。

デモページ

コンテンツを表示するには、コマンドを入力します。
まずは、「help」と入力し、コマンド一覧を表示します。

> help or Tab を入力

「about」を入力すると、about meのコンテンツが表示されます。

> about を入力

Termicの使い方

Step 1: 外部ファイル

jquery.jsと当スタイルシート・スクリプトを外部ファイルとして記述します。

<link rel="stylesheet" href="css/termic.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="js/termic.js"></script>
<script src="js/termic.jquery.js"></script>

Step 2: HTML

HTMLはコンテンツを表示するエリアとコマンドを入力するエリアを確保します。

<div id="container">
    <div id="terminal_container">
        
		

		
			

			

			

			

			

				

					

				

					
1
				
						
 
					
				
			
		
    </div>

    <div id="terminal_input_container">
        <div id="terminal_input_wrap">
            <input id="terminal_cmd" type="text">
        </div>
    </div>
</div>

Step 3: JavaScript

各コマンド入力で表示するコンテンツは、スクリプト内に記述します。

window.terminal_cmd = $ '#terminal_cmd'

terminal_cmd.Termic '#terminal', {
    '__init__': {
        description: 'Term init.',
        handler: () ->
            "Terminal initialized!"
    },
    'about': {
        description: 'About me'
        handler: () ->
            "Some text about you"
    },
    'test': {
        description: 'Basic test command just prints the params'
        handler: (params) ->
            params.join ", "
    }
}

Termicは先週くらいに公開され、昨日ドキュメントが追加されたので、このタイミングで紹介しました。現在も鋭意開発中で、これからさまざまな機能が追加されていく予定です。
楽しみですね 🙂