🍓 🎫 👩🏿‍🍳 ハイテクコード 🚜 👘 👶🏿

運指を完了するタスクはささいなことではないため、非常に興味深いものです。私はそれが正しいと思うので、それを解決する誘惑に抵抗することもできませんでした。

ブラウザー間の互換性、スケーラビリティ、印刷性、コンパクトさなどの標準的な要件に加えて、たとえば、運指を単純にコピーして、たとえばテキスト文書に貼り付けることもできるようにしたいと思います。つまり、テキスト形式では、コードは次のようになります。

 午前
 O---
 OF--
 O-R-
 O-M-
 O---
 X---

Oは開いた弦、Xはくぐもった音、残りの文字は指を示します。

コピーを可能にし、ブロック間の接続性を低くするために、レイアウトはやや面倒です：弦は首の内側に配置され、各フレットは内側に配置され、フレットでは押された指または押されていないことを示すブロックです。すべてのブロックには、クラス属性でhiqus文字列として指定された追加パラメーターがあります。これにより、視覚化をそれらにバインドする機能が提供され、適切なライブラリーを使用してjavascriptを使用して便利に変更できます。

まず、コードバンクを作成します。

<! DOCTYPE html > <? xml-stylesheet type ="text/xsl" href ="styles.xsl?rev:123" ? > < html xmlns:ch ="urn:markup:chords" > < head > < title > </ title > < link href ="styles.css" type ="text/css" rel ="stylesheet" /> </ head > < body > < ch:fingerboard id ="Am" > < ch:title > Am </ ch:title > < ch:string class =" number=1 " > < ch:head > O </ ch:head > < ch:flet class =" number=1 " > < ch:clear > - </ ch:clear > </ ch:flet > < ch:flet class =" number=2 " > < ch:clear > - </ ch:clear > </ ch:flet > < ch:flet class =" number=3 " > < ch:clear > - </ ch:clear > </ ch:flet > </ ch:string > < ch:string class =" number=2 " > < ch:head > O </ ch:head > < ch:flet class =" number=1 " > < ch:finger class =" name=fore " > F </ ch:finger > </ ch:flet > < ch:flet class =" number=2 " > < ch:clear > - </ ch:clear > </ ch:flet > < ch:flet class =" number=3 " > < ch:clear > - </ ch:clear > </ ch:flet > </ ch:string > < ch:string class =" number=3 " > < ch:head > O </ ch:head > < ch:flet class =" number=1 " > < ch:clear > - </ ch:clear > </ ch:flet > < ch:flet class =" number=2 " > < ch:finger class =" name=ring " > R </ ch:finger > </ ch:flet > < ch:flet class =" number=3 " > < ch:clear > - </ ch:clear > </ ch:flet > </ ch:string > < ch:string class =" number=4 " > < ch:head > O </ ch:head > < ch:flet class =" number=1 " > < ch:clear > - </ ch:clear > </ ch:flet > < ch:flet class =" number=2 " > < ch:finger class =" name=middle " > M </ ch:finger > </ ch:flet > < ch:flet class =" number=3 " > < ch:clear > - </ ch:clear > </ ch:flet > </ ch:string > < ch:string class =" number=5 " > < ch:head > O </ ch:head > < ch:flet class =" number=1 " > < ch:clear > - </ ch:clear > </ ch:flet > < ch:flet class =" number=2 " > < ch:clear > - </ ch:clear > </ ch:flet > < ch:flet class =" number=3 " > < ch:clear > - </ ch:clear > </ ch:flet > </ ch:string > < ch:string class =" number=6 mute=true " > < ch:head > X </ ch:head > < ch:flet class =" number=1 " > < ch:clear > - </ ch:clear > </ ch:flet > < ch:flet class =" number=2 " > < ch:clear > - </ ch:clear > </ ch:flet > < ch:flet class =" number=3 " > < ch:clear > - </ ch:clear > </ ch:flet > </ ch:string > </ ch:fingerboard > </ body > </ html >

コードは1つだけです。残りは近くに追加されます。それにはbr-kiが必要です。そうでなければ、すべてを1行で構築します。残念ながら、Operaは、コピー時に、インラインブロック=（

スタイルはブロックに設定され、修飾子によって指定されます：

ch \：文字列 {
ボーダーボトム：1pt黒一色。
ディスプレイ：ブロック;
マージン：0 0 1.3em 0;
空白：nowrap;
パディング右：2em;
}
ch \： string .number \ = 1 {border-width：1.0pt}
ch \： string .number \ = 2 {border-width：1.2pt}
ch \： string .number \ = 3 {border-width：1.4pt}
ch \： string .number \ = 4 {border-width：1.6pt}
ch \： string .number \ = 5 {border-width：1.8pt}
ch \： string .number \ = 6 {border-width：2.0pt}
ch \： string .mute \ = true {
ボーダーカラー：ライトグレー;
}

ルートブロックの特別な修飾子を使用すると、文字列と指を強調表示できます。例：

ch \：fingerboard.highlight \ =指\ = \ =親指ch \：finger.name \ =親指、
ch \：fingerboard.highlight \ = finger \ = \ = fore ch \：finger.name \ = fore、
ch \：fingerboard.highlight \ = finger \ = \ = middle ch \：finger.name \ = middle、
ch \：fingerboard.highlight \ =指\ = \ =リングch \：finger.name \ =リング、
ch \：fingerboard.highlight \ = finger \ = \ = little ch \：finger.name \ = little {
背景色：赤;
ボーダーカラー：赤;
}

銀行からページコードに接続します。

<！ DOCTYPE html >
<？ xml-stylesheet type = "text / xsl" href = "styles.xsl？rev：123" ？ >
< html xmlns：ch = "urn：マークアップ：コード" >
< 頭 >
< title >和音</ title >
< link href = "styles.css" type = "text / css" rel = "stylesheet" />
</ 頭 >
< 本体 >
< ch： fingerboard src = "chords.xml＃Am" srctype = "text / xml" >
<a href = "chords.xml＃Am"> Amコード</ a >
</ ch：指板 >
< ch： fingerboard src = "chords.xml＃Am" srctype = "text / xml" class = "highlight = string == 1 highlight = string == 2" >
<a href = "chords.xml＃Am"> Amコード</ a >
</ ch：指板 >
< ch： fingerboard src = "chords.xml＃Dm" srctype = "text / xml" >
<a href = "chords.xml＃Dm">コードDm </ a >
</ ch：指板 >
< ch： fingerboard src = "chords.xml＃Dm" srctype = "text / xml" class = "highlight = finger == fore highlight = finger == middle" >
<a href = "chords.xml＃Dm">コードDm </ a >
</ ch：指板 >
</ body >
</ html >

xhtml-inclusionsのテクノロジーのおかげで、各ページでコードのレイアウトをロードするのではなく、コードのバンクをロードした後です。新しい実装は別のファイルに残されており、指定された識別子を持つドキュメントのフラグメントのロードもサポートしています。

< t：template match = "* [@src and contains（@srctype、 'xml'）]" mode = "content" >
< t：変数名 = "doc" select = "substring-before（@src、 '＃'）" />
< t：変数名 = "id" select = "substring-after（@src、 '＃'）" />
< t：選択 >
< t： test = "$ id"の場合 >
< t：apply-templates select = "document（$ doc）// * [@id = $ id] [1] / node（）" />
</ t：いつ >
< t：それ以外の場合 >
< t：apply-templates select = "ドキュメント（@src）/ * /ノード（）" />
</ t：それ以外の場合 >
</ t： >を選択します
</ t：テンプレート >

そこには、Mozillaのハックがあります。これにより、要素のスタイルがすべてのブラウザーで等しく重ねられます。

<t：テンプレートマッチ= "ボディ"モード= "コンテンツ" >
<t：apply-templates select = "*" />
<script> <！[CDATA [
新機能（）{
if （！ document .getElementsByTagNameNS） return ;
var nsList = [ "urn：markup：chords" ];
for （ var nsI = nsList.length; nsI--;）{
var els = document .getElementsByTagNameNS（nsList [nsI]、 '*' ）;
while （xel = els [0]）{
var el = document .createElement（xel.nodeName）;
varノード;
while （node = xel.firstChild）el.appendChild（node）;
var sa = xel.attributes;
for （ var i = 0; i <sa.length; ++ i）{
var node = sa.item（i）;
el.setAttribute（node.nodeName、node.nodeValue）;
};
xel.parentNode.replaceChild（el、xel）;
};
};
};
]]> </ script>
</ t：テンプレート>

もちろん、ページをテキスト/ htmlとして提供することもできます。ユーザーは、運指の代わりに、銀行の対応するコードへのリンクを見ることができます。

ハイテクコード

More articles: