【4時間くらいでなんかつくる】Chimei Show!編
今回のきっかけ
就活も終わり、現職も休みに入り、次のお仕事が始まるまでに2週間ほどの無職期間が発生。
時間も体力もあるうちに何かしたい。
旅行したい。
でも、国内に縛ると行きたいところが思いつかない。
……ボタンを押すだけで行き先を決めてくれるツールをつくろう。
今回の制作物
Chimei Show!
ランダムで空港の名前が出てくるツール。
出てきた空港名をマウスオーバーすると景気付けしてくれる。
制作期間 : 11/20 AM0:00頃から3:00過ぎまで(約3時間?)
主な使用ツール : Ruby on Rails、JavaScript(jQuery含む)
反省点
CSSまで手が回らなかった
生のJavaScriptとjQueryの記法とが中途半端に混在している
→最初スクリプトは全てJavaScriptでやろうとした、挫折。
『「(空港名) + 航空券」で検索』というリンクも自動生成させたかった
休眠中の空港と現役の空港の区別がついておらず、定期便が出ていない空港が出てきてしまうことがあった
寧ろ行きたいかもしれない。
嵌ったところのメモ
ほとんどリンク集ですが。
Railsのバージョン5.1以上のときのjquery-rails導入
jQuery導入時、Gemfileの記述以外にもapplication.jsでrequireする必要があるが、
Rails5.1以上ではrails-ujsにjquery_ujsの内容が含まれているので、以下をrails-ujsの前に記述するのみで良い。
//= require jquery
GitHub - rails/jquery-rails: A gem to automate using jQuery with Rails
Railsで remote: true と js.erbを使って簡単にAjax(非同期通信)を実装しよう!(いいね機能のデモ付) - Qiita
jQueryを使用しないでappendメソッドの挙動を実装
※下記の方法、Railsのインスタンス変数をjsonでもらってきて、
jsで追加するDOM要素に盛り込もうとするとうまくいかない、
テンプレートリテラル使わなかったから?
function letsGo() { chimei = document.getElementById('chimei'); chimei.addEventListener('mouseover', () => { chimeiField.insertAdjacentHTML('beforeend', '<h1 id="letsGo">最高の旅</h1>'); }); chimei.addEventListener('mouseleave', () => { document.getElementById('chimeiField').removeChild(document.getElementById('letsGo')); }); }
→検索結果の空港名がマウスオーバーされた際メッセージを出し、外れたら消えるという クソ 機能に使用。
- insertAdjucentHTML('beforeend', 'HTML')
指定した要素の終了タグの前に、HTMLを挿入する。
element.insertAdjacentHTML - Web API | MDN
HTML要素の追加方法いろいろ 挿入位置で分類 - Qiita
マウスオーバーをトリガーとしたイベント
イベント | 説明 |
---|---|
mouseover | 要素の中に移動した時 |
mouseenter | 要素上を移動した時(連続性はない) |
mousemove | 要素上を移動した時(連続性がある) |
mouseout | 要素の外に移動した時 |
mouseleave | 要素の外に移動した時 |
【JavaScript】マウスオーバー(ホバー)をトリガーにしたイベント | なるほど。
三章第六回 mouseoverとmouseout — JavaScript初級者から中級者になろう — uhyohyo.net
HTMLで設定する際の属性としては、onmouseoverなど?
[JavaScript] マウスポインタが触れた/離れたイベントを取得する(onMouseOver, onMouseOut) – コピペで使える JavaScript逆引きリファレンス
と思いきやonmouseoverメソッドもあるっぽい。何を信じれば……。
.onmouseover | JavaScript 日本語リファレンス | js STUDIO
- element.removeChild(child)
生のJavaScriptで特定の子要素を削除する場合に使用するメソッド。
親要素、子要素共にid名で対象を指定する。
.removeChild() | JavaScript 日本語リファレンス | js STUDIO
ライブラリを使わない素のJavaScriptでDOM操作 - Qiita
window.onload
ページが読み込まれた際存在しているものに対してスクリプトを実行したい時は(ボタンクリック時の挙動など)、
その記述をwindow.onload = function(){};
で囲む。jQueryでいう$?
javascript - Uncaught TypeError: Cannot set property 'onclick' of null - Stack Overflow
お久しぶりでした。
就活なりなんなりで忙しさにかまけていました、かまけた甲斐あり、12月からのお仕事が決まりました。
やっていくぞ!
突発的に思いついたアイデアを時間縛って形にするやつ、
やってみると自分のおろそかにしがちなところとか、
ここはもう少し適当で良かったんじゃないかとか、いろいろ見えてきますね。
また何か思いついてそこに4時間くらいの時間があった際には、トライしてみたいと思います。
これで礼文行ってみていればオチとして綺麗なのですが、
普通に就職の諸準備とか、予習とか、不定愁訴とかで時間なくなりそうです。
無職は計画的に。