IT Office Nishimiyahara

個人用スマホから商用プログラミングまでなんでもお任せ下さい

OwlCarouselを使うと簡単にカルーセルが実装できた

   

追記:Mojoliciousについての記述で一部間違っていた部分がありました。一部修正してあります。

@nqounetです。

画像を使った何かを作ろうと思い、過去に自分自身で作ったサンプルを眺めていたのですが、どれもイマイチなので、カルーセル(スライダー?)を簡単に作れるライブラリである「OwlCarousel」を試してみました。

このライブラリ自体はとても簡単だったのですが、JSONを返すAPIのプログラムを作ったり、それらを動作させる開発環境を作ったりするのが結構大変でした。

やってみたかったのは画像とJSON

画像ファイルは、以前使っていたサイズが揃ったものがあるので、それを流用するとして、そのリストをどのようにして作成するのか、というのを考えました。

また、昨今のアプリ事情を鑑みて、サーバからはHTMLではなくJSONを主に返すことにして、AJAXでリストを取得できるようにしようと思いました。

開発するときは、JavaScriptのSame Origin policyが問題になってきます。

実際の運用では、同じサーバにAPIを設定すればよいのですが、開発時は、例えばlocalhost:3000で起動させておいたサーバに対して、gruntで起動したサーバからAJAXで取得しようとするとエラーになります。

というわけで、grunt-connect-proxyを使って開発してみました。

JSONを返すプログラム

APIを返すプログラムは作ったことがほぼないのですが、HTMLではなくJSONを返すのがメインになるようなプログラムもそんなに大したことはありませんでした。

使ったのはいつものMojolicious。

最初はMojolicious::Liteで作ったのですが、APIを増やすとわかりにくそうな気がしたので、普通に作りました。

ただ、基本的にはHTMLを返すプログラムなので、404エラーなどはHTMLで返ってきます。

この初期値を変更するのをどこでやればよいのかについて、結構調べましたが、route情報の設定で、formatを指定すればよかったようです

Mojolicious::Rendererのdefault_formatで初期値を設定できるようです。下記のソースは書き換えてあります。

久しぶりに作ると、色々と忘れていて、ますますメモの大切さが身にしみてきますね。

また、nginxの設定で、nqou.netのサブディレクトリ(/api/v1)にアプリサーバを割り当てたのですが、その場合に、アプリサーバへ渡るpathの情報にもサブディレクトリがついていることに気が付かなくて、ずっと404エラーになっていて困りました。

かといって、route情報をアレコレ変えたくなかったのですが、幸いにも、その辺を簡単に処理できるメソッドもありました。便利ですね。

それも踏まえてroute情報は以下のようになりました。

フレームワークは先人の知恵が詰まっていて、後に続く私のような者を助けてくれます。

参考になる資料

respo

respo link

ZenBackWidget

 - 情報技術について , , , , , ,