【4時間くらいでなんかつくる】Chimei Show!編

今回のきっかけ

就活も終わり、現職も休みに入り、次のお仕事が始まるまでに2週間ほどの無職期間が発生。

時間も体力もあるうちに何かしたい。

旅行したい。

でも、国内に縛ると行きたいところが思いつかない。

……ボタンを押すだけで行き先を決めてくれるツールをつくろう。


今回の制作物

Chimei Show!

GitHub - fujitami/chimeiShow

f:id:osouonna:20181122194129g:plain

ランダムで空港の名前が出てくるツール。

出てきた空港名をマウスオーバーすると景気付けしてくれる。

制作期間 : 11/20 AM0:00頃から3:00過ぎまで(約3時間?)

主な使用ツール : Ruby on RailsJavaScript(jQuery含む)


反省点

  • CSSまで手が回らなかった

  • 生のJavaScriptjQueryの記法とが中途半端に混在している

→最初スクリプトは全てJavaScriptでやろうとした、挫折。

  • 『「(空港名) + 航空券」で検索』というリンクも自動生成させたかった

  • 休眠中の空港と現役の空港の区別がついておらず、定期便が出ていない空港が出てきてしまうことがあった

f:id:osouonna:20181122184330p:plain

礼文空港 - Google 検索

寧ろ行きたいかもしれない。


嵌ったところのメモ

ほとんどリンク集ですが。

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でいう$?

window.onload - Web API | MDN

javascript - Uncaught TypeError: Cannot set property 'onclick' of null - Stack Overflow


お久しぶりでした。

就活なりなんなりで忙しさにかまけていました、かまけた甲斐あり、12月からのお仕事が決まりました。

やっていくぞ!


突発的に思いついたアイデアを時間縛って形にするやつ、

やってみると自分のおろそかにしがちなところとか、

ここはもう少し適当で良かったんじゃないかとか、いろいろ見えてきますね。

また何か思いついてそこに4時間くらいの時間があった際には、トライしてみたいと思います。


これで礼文行ってみていればオチとして綺麗なのですが、

普通に就職の諸準備とか、予習とか、不定愁訴とかで時間なくなりそうです。

無職は計画的に。