amp-bind
bindと聞いてピンと来る方もいはるのではないだろうか。
そうです。イベントです。いやしかし面倒やなこれ
プラグインの読み込み
amp-bindを使用する場合は別途プラグインの読み込みが必要です。
amp.jsの後にでも読み込ませましょう。
<script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>
基本構文と動作
どんな書き方でどんな動きすんのかを。まず簡単なものを。
<p [text]="'Hello ' + foo">Hello World</p> <button on="tap:AMP.setState({foo: 'エビフライ'})">ボタン</button>
結果だけ先にお伝えすると[ボタン]クリックで、[pタグの中身]が[Hello エビフライ]に変わります。
へぇ。
単純に fooって文字を置換してるようなイメージです。
<p [text]="'Hello ' + foo">Hello World</p> <p [text]="'うるせぇ!' + foo +'ぶつけんぞ!'">Hello World</p> <button on="tap:AMP.setState({foo: 'エビフライ'})">ボタン</button>
こうすると、[Hello エビフライ]と[うるせぇ!エビフライぶつけんぞ!]に変化します。
無差別で全置換するので、キーに関しては何か独自ルール化が必要そうです。
[text]の部分について
textとすることで、【その要素のtext部分を差し替えるよ】の意味となります。
ここはtextだけでなく、以下の指定ができます。
また、タグによって指定できるものが異なります。
一気に羅列してもアレなのでとりあえず以下基本だけで
text |
その要素のテキスト(表示部分)の内容を変更することを指します。 内容を全部置換するので元々の文字列は消え去ります。 |
---|---|
class |
その要素のclass名を変更することを指します。 内容を全部置換するので元々のクラスは消え去ります。 |
width | widthプロパティを変更させます。 |
height | heightプロパティを変更させます。 |
ちょっと使い所がわかりにくくなってきておりましてですね。
以下の例を見てみます。
<amp-img alt="A view of the sea" src="/common/img/illust/1.jpg" width="100" height="100" [src]=foo [width]=foo2></amp-img> <button on="tap:AMP.setState({foo2: '/common/img/illust/2.jpg'})">ボタン1</button>
これ、ボタン部分にはfoo2しかなくて、画像部分には [src]=foo [width]=foo2が存在しています。
で、この状態でボタンポチーすると、なんと、setStateに記述のなかった[src]=fooの部分も差し替わります。
ちなみに指定ないのでnullになります。
ミラクルに使いにくいですねw指定には気をつけましょう。
後、関数使えたりします
JSっぽい感じのピンときそうな関数。
<p class="hoge" [text]="foo">Hello World</p> <button on="tap:AMP.setState({foo: 'あいうえおかきく'.slice(0,5)})">ボタン1</button>
こうすると、sliceが0~5なので、pの中身は あいうえお に変化することになります。
使用できる関数は以下ですよぉ
Array |
【concat】【includes】【indexOf】【join】【lastIndexOf】【slice】 配列に対してのみ使用できます。 |
---|---|
String |
【charAt】【charCodeAt】【concat】【indexOf】【lastIndexOf】【slice】【split】【substr】【substring】【toLowerCase】【toUpperCase】 String型(文字列)に対してのみ使用できます。 |
Math |
【abs】【ceil】【floor】【max】【min】【random】【round】【sign】 JavaScriptとちがって、Mathオブジェクトなんかないので、関数名だけ使用し、引数に値ブチ込む感じです <p class="hoge" [text]="foo">Hello World</p> <button on="tap:AMP.setState({foo: floor(random(100)*100)})">ボタン1</button> |
Global | 【encodeURI】【encodeURIComponent】 |
setStateの中が煩雑になるな
例のようにベタでベタベタしているとやっぱソースコード的にはきたない事になります。
なので、この辺のをjson形式でまとめてしまいませう
amp-state
<amp-state id="myTexts"> <script type="application/json"> { "hoge1": { "hoho1": "ホゲー", "hoho2": "ほげげー" }, "hoge2": { "gege1": "はぇ~", "gege2": "彡(^)(^)" } } </script> </amp-state> <p class="hoge" [text]="foo">Hello World</p> <button on="tap:AMP.setState({foo: myTexts['hoge2']['gege2']})">ボタン1</button>
こんな感じで、amp-stateを使用しjsonで管理することができます。
また、データの指定方法は、ドットでの連結でも大丈夫です。
上記例であれば myTexts.hoge2.gege2 の記述方法となります。
ちなみにここに関数ブチこめたら便利かと思われる方がいるかもしれませんが、JSON構文エラーになるので諦めて下さい