昨年うっかり抱負として書いたサイトリニューアルをなんとか年末に実現させました。その中で気になったことなどまとめてみます。技術寄りになりますが、普段の制作ではあまり公表することはないので。
サイト内で利用しているJavaScript
FullCalendar
カレンダーを綺麗に表示するプラグインです。お問い合わせページで使用しています。Googleカレンダーも表示できます。ただ出力されるHTML（DOM）はかなり複雑でスタイル調整が難しくなっています。
jquery.inview
長いページをスクロールした際、現れたものを操作するプラグイン。仕様がシンプルな反面、あまりチューニングできません。非力なモバイル端末で見たりすると動きが追いつかない時があります。時間があれば上手く自作したい。
slick
画像などをスライドさせるプラグイン。トップと実績ページで使用しています。スライダーはbxSliderもよく使いますが、slickの方が動きをコントロールしやすいと思います。
それからslickのレスポンシブ機能で一つ気になった点。オプションの中でブレークポイント（breakpoint）を指定できますが、なぜか数値に該当する画面ではそのオプションが有効になりません。例えば、iPadのポートレート（縦）にあたる「768」で指定したオプションが、iPadのポートレートでは動作しません。一つ数字を増やし「769」とすると動作します。「以下」ではなく「未満」という設定になっているようです。
zoom.js
画像を拡大する仕組み。これだけjQueryのプラグインではありません。画像拡大の中でも動きが綺麗で、理にかなっていると思います。ただ周辺のレイヤーや他の仕組みと相性の問題もあるので注意。動作させるための属性はjQueryで補完できます。
SVGについて
今回SVGもいろいろ試してみました。結局imgとして読み込むことしかしていませんが、その中でいくつか気になった点。
- 出力を操作する際にSVGの中に書ける範囲とCSSから操作できる範囲が重なっていてわかりづらい。まだ仕様の勉強が必要
- テキスト表現はブラウザによって異なるようなので細かな配置が難しそう
- Illustratorから出力したSVGは中のコードがあまりきれいでない
- 「Lazy Line Painter」のラインを引くアニメーションは面白い表現ができると思います。今回使うつもりでしたが、CSSのアニメーションで十分だったのでやめました
IEの旧バージョンへの対応や、高速化できる余地がまだあるので時間を見つけて徐々に進めていきます。
