rcmdnk's blog

20130619_apple_200_200

OctpressでMacのキーボードの様な表示をさせるプラグインを作りました。 キーボード表示自体は簡単なCSSで実装して、 プラグインを使う事でCommand:⌘(⌘)等の記号を キーコードを覚えずにLiquidタグで簡単に書ける様になります。

Sponsored Links

インストール

以下のレポジトリからファイルを取ってきてREADMEに従ってプラグインと scssファイルを導入して下さい

使い方

導入したらkeyとう言うLinquidタグが使える様になるので 好きなアルファベットなり単語をkeyの後に入れるだけです。

文字列をキーボード化

  • {% key a %}:             a
  • {% key A %}:             A
  • {% key Enter %}:     Enter

記号

文字列だけだと直接html書いても余り変わらないわけですが、 プラグインでは以下の記号について、symbolという引数を与えた後に 適当なワードを与えると記号に変換します。

  • {% key symbol apple %}:                    
  • {% key symbol cmd %}:                        
    • cmd等いくつかの記号については複数の1つの記号に対して複数のワードが用意されています
      • {% key symbol command %}:                
    • その他全てのワードについてはkeyboardkey.rbの中身を見てみて下さい。
  • {% key symbol opt %}:                        
  • {% key symbol shift %}:                    
  • {% key symbol ctr %}:                        
  • {% key symbol tab %}:                        
  • {% key symbol esc %}:                        
  • {% key symbol bs %}:                          
  • {% key symbol return %}:                  
  • {% key symbol delete %}:                  
  • {% key symbol clear %}:                    
  • {% key symbol eject %}:                    
  • {% key symbol capslock %}:              
  • {% key symbol pageup %}:                  
  • {% key symbol pagedown %}:              
  • {% key symbol home %}:                      
  • {% key symbol end %}:                        
  • {% key symbol left %}:                      
  • {% key symbol up %}:                          
  • {% key symbol right %}:                    
  • {% key symbol down %}:                      
  • {% key symbol eacute %}:                   é
  • {% key symbol clock %}:                    
  • {% key symbol gear %}:                      
  • {% key symbol space %}:                      
  • {% key symbol asterisk %}:              
  • {% key symbol not %}:                         ¬
  • {% key symbol sup2 %}:                       ²
  • {% key symbol sup3 %}:                       ³
  • {% key symbol times %}:                     ×
  • {% key symbol divide %}:                   ÷
  • {% key symbol radic %}:                    
  • {% key symbol sdot %}:                      
  • {% key symbol middot %}:                   ·
  • {% key symbol 3dots %}:                    
  • {% key symbol check %}:                    
  • {% key symbol diamond %}:                
  • {% key symbol diamond_white %}:    
  • {% key symbol quote %}:                     "
  • {% key symbol amp %}:                         &
  • {% key symbol lt %}:                           <
  • {% key symbol gt %}:                           >
  • {% key symbol lsquare %}:                 [
  • {% key symbol rsquare %}:                 ]
  • {% key symbol lbrace %}:                   {
  • {% key symbol rbrace %}:                   }
  • {% key symbol lparensesis %}:         (
  • {% key symbol rparensesis %}:         )
  • {% key symbol copy %}:                       ©
  • {% key symbol deg %}:                         °

サイズの変更

  • {% key a key_half %}:       a
  • {% key a key_small %}:     a
  • {% key a key_large %}:     a
  • {% key a key_2x %}:           a
  • {% key a key_3x %}:           a
  • {% key a key_4x %}:           a
  • {% key a key_5x %}:           a

黒キーボード

  • {% key a key_black %}:     a

文字列を強制的に全て大文字化

  • {% key a key_uppercase %}:     a

複数の組み合わせ

  • {% key symbol cmd key_large key_black %}:    

表示を変えたいとき

表示が気に喰わない場合はsass/custom/_keyboardkey.scssを調整して下さい。

Octopress以外で使う方法(plugin無しで使う方法)

上の方法ではOctopressプレグインを使ってLiquidタグで簡単に 書ける様にしましたが、 keyboardkeyレポジトリにある keyboardkey.scssと言うscssファイルを導入すれば Octopress関係なく簡単に記号を含めたキーを書ける様になります。

こんな感じでi要素を書くと上にあるのと同じようなキーを表示します。

<i class='key'>A</i>
<i class='key key_ctrl'></i>

key_largekey_black等はそのままクラス名なのでclassの所に加えて上げると 上と同じようになりますが、symbolに関してはLiquidで変換するための引数なので 記号変換したい場合は上の様にkey_+記号名の様なクラスが定義してあるので それを加えて下さい。 どの記号が使えるかはこれもkeyboardkey.scssを参照、ということで。

Sponsored Links
Sponsored Links

« ファイル名やディレクトリ名の大文字小文字 Vimを使う上でのIME(日本語入力)の取り扱い »