僕は、とあるプロダクトの開発メンバーで、1月からの画面の刷新プロジェクトに入りました。設計フェーズになってもデザインは確定せず...ですが、企画の段階でほぼほぼ画像のスライダーがあることは確定していました。拡張性がないなど、満足できるものがありませんでした。Bootstrapなどは利用せず、Riot.jsだけで動かすことができます。Chromeに対応しているため、それらの環境でも動くようにしました。表示したい画像をimage-sliderタグ内に入れるだけで動きます。オプションを設定してあげることで、スライド速度やボタンの非表示などもできます。汎用性の高いタグを作成することでの知見カスタムタグはblock要素ではないユーザ側で大きさを指定できる方が汎用性は高いと思います。最初上手くいきませんでした。200px;にはなりませんでした。</style></not-block>原因はカスタムタグ(not-blockタグ)がBlock要素ではなかったからです。block;を指定してあげると上手く動きます。要素検索を行い、その要素にイベントが起きた際の処理を追加していました。同じタグを複数表示した際に、問題が起きました。</script></custom-tagu>一つ目の<custom-tag>をクリックした際に、consoleには、clickが2回出てしまいます。documentから参照をしているため、document.querySelectorは両方とも、1つ目のcustom-tag内のcustom-classを参照してしまうのです。後述する<yield/>などを利用する場合、そうもいきません。riot.js.orgRiot.jsの機能である、名前付き要素を利用することも考えたのですが、mountイベント内では、まだ参照できませんでした。結論としては、Riot.jsのリファレンス内でも使われている、this.rootから検索するようにしました。this.rootはカスタムタグを参照しているので、カスタムタグ内でしか検索を行わなくなるので、自分の意図した通りの動きになりました。</script></custom-tag>clearIntervalやcancelAnimationFrameを忘れないようにカスタムタグ内でsetIntervalやrequestAnimationFrameを利用することがあると思います。当たり前ですが、setIntervalなどはwindowオブジェクトのメソッドですので、タグが消えても動いてしまいます。思わぬバグを生まないためにも、タグが消えた際にはちゃんとクリアするようにしましょう。拡張性が高いカスタムタグを作るには、<yield/>はとても重要な機能です。軽い説明に関しては、他に記事を書いているので、そちらの参照をお願いいたします。思ったより多くの学びがありました。何を当たり前のことを言っているんだと思われるかもしれません。何か他に良い手法などがあれば、Twitterなどで教えていただけると幸いです。タグをカスタム...2018-08-11pyinstallerで躓いたところ~Pythonコードをexe化~サイト移行しました。Messaging(FCM)を使ったPWA化が簡単で衝...サイトを移行しました。blog.toru-takagi.dev2017-09-18Eclipseを使ってSelenium-WebDriverを使ってみたサイト移行しました。(1)はてなブログをはじめよう!kurowasi2525さんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。