モーダルウィンドウをJSで実装したかった
モーダルウィンドウを実装したい
前回のエントリーで、モノポリー支援ツールのチャンスカード、共同基金カードの内容をalertで設定すると、ポップアップする文字が小さい上に編集できないということを書きましたが、それを改善するためにモーダルウィンドウというものを実装してみました。
大正義wikipedia先生に聞いてみると「モーダルウィンドウとは、子ウィンドウとして開かれるもののうち、ユーザがそれに対して適切に応答しない限り親ウィンドウに戻さないもの」ということらしいです。
そういう意味では、『閉じる』を押さない限り消えてくれないalertによるポップアップウィンドウもモーダルウィンドウのような気がします。
…ということはこの表題は間違っているんでしょうか？
まぁ、とにかくやりたかったことは、モノポリーで使用するカードの内容について
1. 任意の書式で表示させる機能を実装したい
2. 同じ画面上ではなくポップアップさせたい
という２点です。
Java ScriptとCSSを使って、このモーダルウィンドウを実装することができました。
今回もどこかの誰かのスクリプトを盗んだ
何か新しいことに向き合うときや勉強するときは、常に「ないなら作れ、出来ないなら盗め」という言葉を胸に何かを模倣して、自分の求める形になるまでいじり倒すということをしてきました。
今回も、まずは盗むところから始めました。
"Java Script モーダルウィンドウ ランダム"という非常にアホっぽい検索をかけた結果、
「jQueryでモーダルウィンドウの中身をランダムに表示したい」という知恵袋の投稿が目に飛び込んできました。
ベストアンサーの方は、とても優しい方のようでサンプルコードまで挙げてくださってます。
これに飛びつかない手はない、そう思ってコピペして貼り付けます。
すると今までとは違うことに気がつきます。
<script></script>って何
どういうことでしょう、先に挙げた知恵袋の回答では、HTML内に<script></script>で囲ったJava ScriptとCSSが！
こんなものは初めて見ました…すみません、初学者なもので…
ということで、こいつをJSのファイルとCSSのファイルに分解することから始めました。
というか、至って単純で、<script></script>で囲われた部分をそれぞれ別のファイルにして、srcとして設定するだけです。
でもうまくいきませんでした。
うーんどうしてだ？と悩みながら、いじくり回していると、どうやらCSSのsrcがstylesではなく、styleとなっていてリンクされていないだけでした。
ここで学んだことは、CSSとJS(jQuery)が相互に働くということです。
勝手に点でバラバラの支持をHTMLに対して、こっちからあっちからしているだけだと思い込んでいたので、JSのファイルだけでモーダルが動かないことに焦りました。
Java ScriptとCSSに分解したのでモノポリーツールに適応させる
ここからは割と簡単でモノポリーツールのHTML、Java ScriptとCSSに分解した要素をコピペしていくだけでした。
一つ工夫した点としては、input要素で作っていたカードのボタンをbutton要素に書き換えて、type=imageから<button></button>の間に<img>で画像を指示し直したくらいです。
あとは、サンプルコードの通り、15個くらいある要素をHTMLに記述して、終わりのはずでした。
でも、どうやってもモーダルウィンドウがウィンドウとして機能せず、HTMLに記述した内容がそのまま表示されてしまいます。
どうやら、jQueryが適応される範囲の中に、自分で書いた.jsファイルとCDNで記述したbootstrapのJava Scriptの部分が競合していたようで、書いた方のjQuery要素が効いていないようでした。
「Bootstrapを使うときはjQuery、popper、JavaScriptを必ず記述しましょう！」とあったので、非常に不安ですが「欲しいのは、gridだけでCSSっぽいし、いいや！えいや！」と消してしまいました。
その結果、gridで指示した書式は保ったまま、自分で書いたコードが動きました。
やったね！これで小さな文字からは解放されました。
またGithubに丸投げ
いつも通りGithubに放り投げてsafariでpagesを確認すると、
「えーーー！モーダルウィンドウになるはずの部分が全部表示されてるー！！」という状況に。
検証するためにchromeで開きなおすとうまく表示されています。
"Safari Chrome モーダル"で検索すると「chromeではうまくいくのにSafariでは…」というような文言が散見されていたので「あーこれは仕方ないな諦めよう」と諦めました。
諦めて「まぁダメ元で」とipadのsafariで開いてみるとうまく表示されています。
「これは自分のmac book airがおじいさんすぎてsafariのアップデートが出来てないのかぁ？」と思いつつ再度pagesを開くとうまく表示されていました。
なんだったんでしょうね、よく分かりませんがうまく表示されたのでOKです。
これからの課題
jQueryを使ってモーダルウィンドウを実装することはできましたが、内容はよくわかっていません。この辺りの学習が最優先事項なのは確実として、まだ問題は山積みです（自分で積んでいるだけですが…）。
サイコロ問題
Pagesを表示して、最初にサイコロを振ると、書式が一瞬だけ崩れる問題が発生するようになりました。
これを解決したいな、というのがまず第一です。
次は、前回のエントリーでも書いた「３回ゾロ目でGO TO JAIL」の実装です。
あとは、ウィンドウサイズが小さくなっても小さくならないサイコロの画像問題です。
iPhoneの画面上でみると、サイコロがおばけのように大きく表示されます。
(まぁ、正直小さい画面で使うのを想定していないのでいいですが…)
カード問題
カードの内容をモーダルウィンドウにすることはできました。
これで、HTMLに書いた内容をCSSで修飾することが可能になったと思います。
また、画像を挿入することもできそうなので、凝った表示をすることも可能になりました。
HTMLがどんどん長くなっていくことは仕方ないとして、デザイン面では趣向を凝らしたいところですね。
ロジック面では、カードの内容が重複して何度も表示される問題は解決していないので、関数をイジって重複のないランダムの関数に変更する作業が必要になります。
まとめ:HTML内にscriptで書かれるとやっかいだった
表題は非常に勝手な感想ですが、JSとCSSに分ける方法がよく分からず苦戦しました。
単純にリンクが変だっただけですが、それでもすごく悩みました。
こんな表記もあるんだな、ということが知れてお得だったのでありがたい限りです。
モーダルウィンドウで表示されるようになったので「閉じる」を毎回押す必要もなく、ウィンドウの外をタップして復帰できるようになりましたし、文字の大きさや任意の修飾ができるようになったのでゲーム性も向上すると思います。
一つ気になったのは、今回の方法だとHTMLが長くなっていくことです。
マークアップ言語に書いて、それを後から修辞していく方法なので理にかなっているような気もしますが、書方次第では「もう少し短くできないかな？」と感じています。
