僕は、とあるプロダクトの開発メンバーで、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などで教えていただけると幸いです。JavaScriptyieldとは?カスタムタグ内で</yield>を入れることで、タグをカスタムタグで囲うことで、中身が<yield>部分に出力されます。<p>ここに内容を記載します。</yield></custome>上記を実行すると、以下のように部分に入ります。<p>ここに内容を記載します。</custome></body>テンプレート変数が使えない!?カスタムタグ内で、他のカスタムタグを呼び出すことは、よくあると思います。そこで、テンプレート変数を使おうとするとうまく動きません。'ここに内容を記載します。'ここに内容を記載します。'ここに内容を記載します。}テンプレート変数でオプションを参照するように修正opts.contentsキャメルケースにすると参照されない子要素のタグにデータを渡す際に、キャメルケースで記載すると上手く動かなくなります。'ここに内容を記載します。</script></caller>ケバブケースで記載をすれば上手くいきます。'ここに内容を記載します。(今更...)本当にシンプルなのに高機能!Vue.jsに負けず劣らず、触っていて楽しい。21:58Riot.jsのyield内でテンプレート変数を利用する方法Tweet広告を非表示にするもっと読むコメントを書く2018-08-11pyinstallerで躓いたところ~Pythonコードをexe化~サイト移行しました。Pythonはじめに2018年5月頃に突然、高校の友達Aから連絡が来て食事をすることになった。Aさんはとあるお店を持つまで出世していて、業務を自動化して欲しいというお話だった。1件目はスプレッドシートだったのでGASを書いて納品。2件目はWebブラウザをimacrosで自動化している作業があるのだが、そのプログラムの作成者がメンテナンスできなくなったため、対応して欲しいとのこと。提案して、合意してもらえた。外注していたので、これをいじれる人間になれば社内価値があがるかもと思い、Pythonに変更した。(相談済み)初めてPython、Seleniumでちゃんと納品できるものを作成したので、そこで得たTips集を残そうと思う。間違っていることも多くあると思いますが、何卒ご容赦くださいsleepではなくWebDriverWaitを使おうSeleniumは所詮プログラムなので、ボタンが読み込み終わる前にボタンを押してしまうことがあります。僕の場合はラズパイ&Wifiでの納品だったので、読み込み速度は不安定です。そこでsleepを使いたくなってしまいますが、SeleniumにはWebDriverWaitという便利なものがあります。一つのメソッド内に2回以上WebDriverWaitを記述すると、上手くいかない場合があります。Hoge().do()上記の書き方だと2つ目以降が動かず、Timeoutしてしまう時があります。別のメソッドに分けるとうまくいきます。'別ウィンドウで開く'))).click()self.browser.switch_to_window(self.browser.window_handles[1])WebDriverのwindow_handlesは立ち上がってるブラウザを配列として持っている。switch_to_windowで参照するウィンドウを変えることができる。自動化実行→閉じる→自動化実行→閉じる→...のような処理を行いたい場合、close()だと自動化→閉じる→何も起きない。quit()で困ったことはないので、基本quit()でいいんじゃないかと思う。WebDriverには使う時に接続しようWebDriverへの接続をインスタンス生成時に行っていました。Hoge(v).main()上記のようなコードだったため、自動化コードを実行するタイミングではなく、プログラムが起動したタイミングでWebDriverと接続をしていました。起動時に100件以上インスタンスが作成され、接続を行い重くなってしまいました。当たり前のことですが、実行するタイミングで接続するようにしましょう。追記Seleniumは、ページ内に表示されていないもの?はクリックできないときがあるみたい。そこで解決として、JavaScriptでスクロールするという方法がある。2018でも、僕の場合は設定ファイルによってクリックする場所が違う。初期状態で表示されていない場合もある。スクロールで一番下までみたいのはできない。場所によってスクロールする場所を決めたりする方法もあるが面倒。僕は、ウィドウサイズを大きくすることで解決した。scheduleschedule.every().monday.at('21:00').do(実行したい関数)最後に初めてのPython&Seleniumのため、間違っている部分は多くあると思います。変なところ、質問・ご意見などありましたら、Twitterにご連絡くdさい。VuePressブログサイトを移行しました。Vue.jsサイトを移行しました。Node.jsサイトを移行しました。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。