Javascript製スライダー「Siema」を使った時のメモ

##これは飽くまで私個人が特定の環境下で使った場合のメモです
なので「自分でやったときはこれこれこうで違ってたんだけど。」てのは必ずあるはず。
その時は「こういう状況下でこれやったらこうなった」てのをコメントとして投げてもらえると情報が増えるので助かります。

##どんな環境で使ったの？
Railsで開発されたLP。
既に土台となる仕組みはできていたのと、そこに私は関わっておらず、既にViewやasset周りを自由にいじれる状況だったので実際にはJSファイルとHamlファイルしか触っていない。

##「Siema」ってなんぞ
公式ページ
[https://pawelgrzybek.github.io/siema/]
Git hub
[https://github.com/pawelgrzybek/siema]

とにかくめっちゃ軽いスライダー。
使い方も簡単な上、いろいろ設定もできる。そして無償で商用利用可能。

##使用時の注意点
ここからが私にとっての本題だったりする。
（なんでもそうだけど）サンプル見るとほんと簡単なんだが実際に何かに組み込もうとすると結構引っかかる。というか引っかかった。
「サービスの土台から全部自分で作りました！」って場合なら話は変わるかもしれないが。

###HTML（今回はHaml）に埋め込まないと動かなかった
パーシャルファイルに記述すると
Something wrong with your selector 😭
（絵文字含めて原文ママ）
がコンソールに表示されて一切動かなくなってしまった。
こちらの環境が問題なのかそういう仕様なのかは不明。

###divタグで使わないと動かない？
今回のスライドはフォーム形式だったので最初はこのようにやってみた。

<form class="siema">
　<div class="inner01"></div>
　<div class="inner02"></div>
　<div class="inner03"></div>
</form>

まぁそもそもサンプルでdiv使ってるんだからそっちに合わせろよ、てのはごもっとも。

結局こんな感じで。

<form class="form">
　<div class="siema">
　　<div class="inner01"></div>
　　<div class="inner02"></div>
　　<div class="inner03"></div>
　</div>
</form>

試してないけど恐らく同じブロック要素同士で中と外を組めば反応するのだろうか？

###オプションの「onChange」に引数付関数は使えない
Siemaには現在地を拾ってこれるパラメータ「currentSlide」がある。これはthis.currentSlideと記述することで呼び出して使うことが可能。

それを引数とした関数をonChange = スライド切替時に発生する処理に記述したら
uncaught typeerror cannot read property 'call' of undefined
と出て処理ができなかった。

実際には、引数の有無に関わらず
onChange:hoge()
といった記述をすると発生する模様。

因みにイニシャライズ後の処理を入れられる「onInit」は括弧付の記述をしても引数を付けても特にエラーは出なかった。

なので、onChangeで関数処理を使いたい場合は、短いものならサンプル通り直接記述するか、長いものは引数無し・括弧記述無しにするとよさげ。

###Siemaのオプションで使う関数にはjQueryは使えない
例えheadで最新のjQueryを呼び出してページ内に埋め込んでSiemaを使っていてもSiemaのオプション（onInitやonChange）で使う場合は素のJavascriptで記述しないと処理してくれない。

今回、スライド本体と連動して動かす必要のあった別パーツもあったのでひたすら「document.querySelector」を使った。

とはいえ最近はjQueryから離れる流れも強めになってきてるし、フレームワーク無しでも動かせるのが利点なのでそこは割り切りで。

###スライドの開始位置はオプションで変えられるけど素直にそのまま使ったほうがいいかもしれない
前述の「スライド本体と連動して動かすパーツ」はスライド位置に応じてクラスを切り替える必要があった。

（あまりいいことではないのかもしれないが命名方法の云々については一旦置いておく）
クラス名にはスライドの位置に合わせて番号が振ってあったんだが最初1始まりで付けてたらややこしいことに……。
処理の中で「+1」などと調整するのもありだったかもしれないが結局クラス名をゼロに合わせる方を選んだ…。
もっとスマートな方法があるであろうことは重々承知してる。

###スライドの前後移動だけでなくピンポイント移動もSiemaの関数でできる
goto() を使うことで、任意のスライドに直接移動させることができる。

公式によるサンプル
[https://codepen.io/pawelgrzybek/pen/gWYLXP]

##最後に
私が使ったのは本当にごく一部の機能だけだが、公式を見るとわかるように結構いろんな機能がある。
今回は使わなかったけどループ制御もこういったスライダー系UIにはよくありそう。
また使った時にはメモ増やすかも。

##追記
2018-06-15：
・シンタックスハイライトのご指摘ありがとうございます。反映致しました。

###スマホでも動くものの、Android（最新版で確認）上ではテキストボックスに入力できない現象が発生。
キーボードは立ち上がるが入力しようとすると弾かれてしまう。原因は不明だがコードを見るとタッチ関係のイベントを制御していると見られる箇所があるのでその辺のせいかもしれない。
iPhone（Chrome／Safari）は特に問題なく動く。

###minではなく通常の「siema.js」を使う場合はES6に対応必須
大抵は高速化のためなどでminの方を使うと思うのだが、もし何かの理由で圧縮前のコードを使いたい場合はES6に対応した環境が必要。