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

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

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

デモのキャプチャ

Termic -GitHub

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">
        
		
    </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は先週くらいに公開され、昨日ドキュメントが追加されたので、このタイミングで紹介しました。現在も鋭意開発中で、これからさまざまな機能が追加されていく予定です。
楽しみですね :-)

top of page

©2017 coliss