mytag

はじめに

マイタグは簡易的なコンポーネントシステムです。IE11でも動作します

データバインドやバーチャルDOMみたいな高度な機能はありませんが、その代わりに簡単に利用できるようになってます

ダウンロードと設定

ダウンロード： mytag.js

設定： mytag.jsを開いてmytag.urlの値を設定します。

設定例

呼び出し側

mytag.jsを読み込みます。どこに記述してもOK

例

コンポーネントを貼り付けたい場所に、my-から始まるタグを書きます。

例

呼び出し側での作業は以上です。
これで設定したURLからマイタグファイルがダウンロードされ、その内容が本ドキュメントに追加されます

ダウンロードは初回のみで2回目以降はキャッシュされます

呼び出される側

マイタグ名.htmlファイルを作成します。普通のHTMLファイルです。

このファイルには<style>タグ1つと<my-tag>タグ1つを記述します。
呼び出し側からはこの2つのタグを取得します。それ以外は取得しません

my-sample.html

マイタグファイルを作成したら、設定したURLに配置してください

基本的なタグが書かれていませんが、このHTMLはvalidで標準に準拠しています

styleタグについての諸仕様

マイタグファイル内における、styleタグについての説明です

• 初回時のみ本ドキュメントに追加されます。2回目以降は無視されます
• ファイル内で最初にあるタグが取得対象です。2番目以降は無視されます
• 内容は解析され、変換されます。独自の記法を使う必要があります
  • CSSは行単位で記述します
  • セレクタ開始行、セレクタ終了行、プロパティ行の3種類あります
  • セレクタ行は空白文字以外で始めてください
  • プロパティ行は空白文字で始めてください。タブもOK

CSS解析例

変換ルールは次の2点です

1. 全行において"my-tag"という文字列が、現在のマイタグ名に変換されます
2. セレクタ開始行において、現在のマイタグ名から始まっていなければ、現在のマイタグ名＋空白が付与されます

scriptタグについての諸仕様

マイタグファイル内における、scriptタグについての説明です

• 外部ファイルタイプは、初回時のみ実行されます。2回目以降は無視されます
  • 実行されるタイミングは、即時になります
• インラインタイプは、毎回実行されます
  • 自動的に関数にラップされて実行されます
  • 呼び出し元のマイタグ要素がthisにセットされます
  • 実行されるタイミングは、マイタグの作成が(子コンポーネントを含め)すべて完了した時になります

インライン例

属性を利用したデータ授受

コンポーネントにおいてデータを授受する方法はいろいろありますが、属性を利用するのが最も標準的でしょう

呼び出し側

呼び出される側

その他

• マイタグにfile属性を付けてURLを記述すると、そのURLからファイルをダウンロードするようになります
• マイタグの作成が(子コンポーネントを含め)すべて完了すると、そのマイタグからmytagloadイベントが発生します
• マイタグを手動で作成するには、次のように行います

  例

キャッシュ

マイタグファイルが増えると読み込みが重たくなりますが、キャッシュを利用すると読み込まずに済むようになります

mytag-setting.js

キャッシュ設定をHTML内に記述すると、"</script>"という文字列があった場合にブラウザが誤判定するので、外部jsファイルに書いてください。
CSS解析のためファイルの改行コードは保持してください。改行コードを\nに変換したり、"'には\を付けてエスケープする必要があります