先日jsonファイルで外部ファイル化したレスポンシブWebデザインに対応したカルーセルjsですが、jsonp形式にすることでクロスドメイン対応できるようにしましたのでご紹介させていただきたいと思います。先日ご紹介させていただいたスクリプトおよびjsonでは、同一ドメイン内にjsonを格納しないと機能しなかったのですが、jsonpに対応することでより拡張性を持たせ、別ドメインにjsomを格納しても読み込めるようにしました。変更になったコードjsoncarouselJSON()で括ったこと以外は大きく変わっていません。});});※jQueryを読み込んでいる場合のスクリプトとなります解説jsonで外部ファイル化した前回から変わっている点は、dataTypeを「json」から「jsonp」に変更している点と、jsonpCallbackの値に「carouselJSON」というコールバック関数を指定している点です。jsonpについてjQueryなど、jsファイルをクロスドメインで読み込むことはWeb制作の現場では一般的に行われていると思います。jsonpは要はこれとやっていることは同じで、jsonファイルを「スクリプトとして」実行します。jsonファイルを任意の名前の関数で括っておき、これをコールバック関数としてスクリプト側で呼び出します。スクリプトを読み込んだ際にコールバック関数で引数にjsonを入れた状態で呼び出すことで、クロスドメインによるjsonデータの扱いが可能になります。デモ実際に動作を確認できるデモページも公開しておりますのであわせてご確認ください。レスポンシブWebデザインに対応したカルーセルjsをjsonpでクロスドメイン対応できるようにしたまとめjsonファイルを同一ドメインに格納して扱うのであれば前回ご紹介したスクリプトで事足りるのですが、実際に現場ではクロスドメインを求められるケースが少なくありません。こようにjsonpを活用してデータを扱えるテクニックを知っておくと、制作の幅がかなり広がりますので、ぜひご参考にしていただければ幸いです。ため、即時には反映されません。住宅ローン2019年5月7日さらに見る記事を書いている人フォローするRSSを購読するWebデザイナー/フロントエンド・エンジニアのMasaです。独学でWebデザインを勉強後Web業界へ就職し、今の会社に勤めて12年目になりました。2016年4月にマイホームを購入し、休日は芝生いじりと育児に励んでいます。