【jsonファイル化!】レスポンシブWebデザインに対応したカルーセルjsをjsonファイル読み込みに対応Web2017年7月5日レスポンシブWebデザインに対応したカルーセルjsですが、さらに改良し、情報をjsonファイルで外部ファイル化する機能を加えました。これでメンテナンス性が向上しさらに使いやすくなったと思いますので、ご紹介させていただきたいと思います。先日ご紹介させていただいたスクリプトではhtmlに直接内容を記述していましたが、以下の情報についてjsonファイルで管理できるように改良しました。画像のファイルパスリンク先target="_blank"の有無サンプルコードhtmlhtmlは大きく変わっていません。唯一各アイテムのソースだけ削除されています。class="list-indicator"></ul></div><!--carousel-->json今回のサンプルでは以下のような書式のjsonファイルを扱えるようにしてあります。true}]csscssについては以前ご紹介させていただいたソースそのままです。});});※jQueryを読み込んでいる場合のスクリプトとなります解説ほとんど以前のスクリプトの流用です。$.ajax()を使ってjsonファイルを読み込み、DOM生成後にdone()でつなげてそれ以降はほぼ同じソースです。一応jsonファイルの読み込みエラーを検知できるよう、thenを使って読み込み成功時と読み込み失敗時の処理を分けています。こちらについて詳しくは以下の記事をご参照ください。【コーダー必見!】jQueryでAJAX通信を行う際のナウでヤングな書き方また、別窓同窓を設定できるよう"target"~をjsonに記述することでコントロールできるようにしています。デモ実際に動作を確認できるデモページも公開しておりますのであわせてご確認ください。レスポンシブWebデザインに対応したカルーセルjsをjson読み込みできるようにしたまとめ実案件で更新頻度の多いカルーセルですと、毎回直接htmlを触るのはリスクがありますし、他の更新とバッティングする可能性があります。このようにjsonファイルで更新したい箇所だけ外部ファイル化すると更新頻度や更新箇所の多いページでも柔軟にメンテナンスすることが可能です。カルーセルjsでjsonファイルなどの外部ファイルを扱いたい場合は、どうぞ本記事をご参考にしていただければ幸いです。追記(2017年7月14日)本記事のスクリプトをさらに改良し、クロスドメイン対応しました。あわせてお読みください。ため、即時には反映されません。住宅ローン2019年5月7日さらに見る記事を書いている人フォローするRSSを購読するWebデザイナー/フロントエンド・エンジニアのMasaです。独学でWebデザインを勉強後Web業界へ就職し、今の会社に勤めて12年目になりました。2016年4月にマイホームを購入し、休日は芝生いじりと育児に励んでいます。