ナオトインティライミを動かすと前置詞がわかるようにする
この画像を見たことがある方いると思います。
英語の前置詞が一目でわかる画像ですね。一時期ツイッターなどを目に触れた覚えがあります。
Webアプリのネタを考えていた時に、“マリトッツォで学ぶ前置詞”（↓これです）というワードを聞いて、このネタ画像を思い出しました。
ちょうど、Webブラウザ上で画像を動かせるアプリを学んで作りたいと思っていたこともあり、
ナオトインティライミを動かすと、前置詞を教えてくれるwebアプリを開発しました。
完成品
まずはこちらをアクセスして触ってみてください
ナオトとティライミの位置関係によって表示される前置詞が変わります。
ナオトをdrag&dropで動かしてみてください。
※マウスポインタで判定しているのでナオトの鼻あたりを掴んでください
※スマホだとナオトは動きません。解像度によってずれる場合があります。
（11/9バージョンアップ変更点）
・ナオトがティライミの中に入るようになりました
・ナオト into ティライミを実装
・ナオト ouf of ティライミを実装
操作動画はこちらを参照ください。
ソースコード
See the Pen Naoto Inti Raymi_v2 by tishiyama (@tishiyama) on CodePen.
解説
使用しているJSライブラリは「Anime.js」
初めて使用しましたが、素人にも使いやすいと感じました。
公式サイト：https://animejs.com/
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.0/anime.min.js"></script>
<link rel="stylesheet" href="dom.css" />
Anime.jsを使用した画像操作の一例は以下、targetsで対象を指定して動かします。直観的でわかりやすい。
function over(){
anime({
targets: ".naoto", // 対象を指定
translateX: 300,
translateY: -200,
duration: 3000, // ミリ秒指定
easing: "easeInOutExpo" // 加減速の種類
});
}
ナオトをぐりぐり動かす処理はこのあたり。
CodePenを「Drag&Drop」で検索して見つけたサンプルをほぼそのまま使用しています。
ここで取得した座標を元に前置詞の判定をしています。
長いので省略
(function($) {
var elements = document.getElementsByClassName("mes");
$.fn.drags = function(opt) {
opt = $.extend({handle:"",cursor:"move"}, opt);
if(opt.handle === "") {
var $el = this;
} else {
var $el = this.find(opt.handle);
}
return $el.css('cursor', opt.cursor).on("mousedown", function(e) {
if(opt.handle === "") {
var $drag = $(this).addClass('draggable');
} else {
var $drag = $(this).addClass('active-handle').parent().addClass('draggable');
}
var z_idx = $drag.css('z-index'),
drg_h = $drag.outerHeight(),
drg_w = $drag.outerWidth(),
pos_y = $drag.offset().top + drg_h - e.pageY,
pos_x = $drag.offset().left + drg_w - e.pageX;
$drag.css('z-index', 1000).parents().on("mousemove", function(e) {
$('.draggable').offset({
top:e.pageY + pos_y - drg_h,
left:e.pageX + pos_x - drg_w
}).on("mouseup", function() {
$(this).removeClass('draggable').css('z-index', z_idx);
//console.log(pos_y,e.pageY,e.pageX);
//高さ250-500、横幅500-800 in:300-400_600-700
if(300 < e.pageY && e.pageY < 400 && 600 < e.pageX && e.pageX < 800){
elements[0].innerHTML = "ナオト in ティライミ";
}else if(250 < e.pageY && e.pageY < 500 && 500 < e.pageX && e.pageX < 1000){
elements[0].innerHTML = "ナオト on ティライミ";
}else if(250 < e.pageY && e.pageY < 500 && 500 > e.pageX){
elements[0].innerHTML = "ナオト by ティライミ";
}else if(250 < e.pageY && e.pageY < 500 && 1000 < e.pageX){
elements[0].innerHTML = "ナオト by ティライミ";
}else if(e.pageY > 500 && 500 > e.pageX){
elements[0].innerHTML = "ナオト near ティライミ";
}else if(e.pageY > 500 && 1000 < e.pageX){
elements[0].innerHTML = "ナオト near ティライミ";
}else if(e.pageY < 250 && 500 > e.pageX){
elements[0].innerHTML = "ナオト over ティライミ";
}else if(e.pageY < 250 && 1000 < e.pageX){
elements[0].innerHTML = "ナオト over ティライミ";
}else if(e.pageY < 250 && 500 < e.pageX && e.pageX < 1000){
elements[0].innerHTML = "ナオト above ティライミ";
}else if(e.pageY > 500 && 500 < e.pageX && e.pageX < 1000){
elements[0].innerHTML = "ナオト under ティライミ";
}
});
});
e.preventDefault(); // disable selection
}).on("mouseup", function() {
if(opt.handle === "") {
$(this).removeClass('draggable');
} else {
$(this).removeClass('active-handle').parent().removeClass('draggable');
}
});
}
})(jQuery);
$('div').drags();
感想
Webアプリ開発初体験でした。ただただ難しいかったという感想しかありません。htmlとCSSとJavaScriptをまとめて考えるのがとても難解で、今もよくわかっていないです。あ、CodePenもものすごく便利でした。
そんな中でサンプルを流用して改変して何とか動くものができるというのはすごい時代になったと感じます。（毎回感じている気がする）
アイデア探しから迷走しまくった結果、なぜかナオトインティライミにたどり着く結果となりましたが、日頃からアイデアを育てておくことが重要。
素材
