オープンデータ活用サービス開発日誌~08~

 皆さんこんにちは、MBAインターナショナル インターン生の岩岬です。今回で8回目です。苦戦続きで疲れました。

 前回はアコーディオンを付ける実装は「時間かかったら恥さらし」とか嘯いて余裕でしたが、翻って今回はそれだけで一日かかりました。今回は時間が掛かった言い訳がテーマです。

 アコーディオンメニューを作ってみるところまでは、インターネットを頼ってですが、前回の時点で何とかなっていましたが、その時はjavascriptで書いていたため、これまでに作っていたプログラムとの兼ね合いが問題でした。
 具体的に言うと、その時のアコーディオンメニューはhtml起動時に存在しているp要素を参照して、メニューを作成していました。対して私が作っていたプログラムは、検索がなされたときに、html内に要素を追加していました。メニュー作成には起動時に要素があるべき、しかし、要素は起動時にはない。何とか起動時に要素がなくても動くようにしようと躍起になりましたが、うまくいきませんでした。こうして書きながら振り返ると、根本からしてサーバーサイドが作れないせいで、ページ読み込み時に要素が揃ってないとかいう奇怪なアプリを作っているのが全部悪い気がしてきました。
 とはいえ一朝一夕でサーバー完全理解出来たら苦労しないわけで、今回はCSSで実装できるアコーディオンメニューを作る方法をネットで見つけてきて、そちらを参考に実装しました。こちらの実装にあたってlabelのfor属性とか、divやpのid属性を動的にいじくる必要が出てきたのですが、こちらの方法に関してもネットで見つけたものを参考にしました。今回色々参考にした部分が多いので、まとめてご紹介させていただきます(一人じゃ何にもできないんです、ゆるして)。

以下 参考資料
 ジャングルオーシャン 【コピペOK】jQueryのアコーディオンメニュー実装サンプル10選!
 https://www.jungleocean.com/programming/180618jquery-accordion(8/29 アクセス)

 サルワカ CSSだけでアコーディオンを作る方法(レスポンシブ&矢印付)
 https://saruwakakun.com/html-css/reference/accordion(8/29 アクセス)

 COOL PROGRAMMING [jQuery]HTMLタグのidを動的に生成(or変更)する方法
 https://dive-into-programming.blogspot.com/2011/04/jqueryhtmlidor.html(8/29 アクセス)
参考資料ここまで。

コピペさせていただいたり、参考にさせていただいたり、本当にありがたい限りです。次々回が最終回、完成に向けてしっかり進めていきたいところです。

興味を持たれた方はお気軽にお問い合わせください。

インターンシップへの申し込み・お問い合わせ先

インターンシップへの申し込み・お問い合わせ先
メールでのお問い合わせは、下記フォームに入力して送信してください。
ご氏名 (例)山田 太郎
メールアドレス 半角英数字:ご入力間違いのないようにご注意ください
メールアドレス(確認用) 半角英数字:ご入力間違いのないようにご注意ください
電話番号 (例)0354339211 ※ハイフン抜きで入力してください
題名
お問合わせ内容

アーカイブ

カテゴリー