【アプリ開発】InstagramのStoryのようにスマホ画面上で移動可能な文字入力フォームのプログラミング

Question

現在、初めてのアプリ制作中のプログラミング初心者です。

Monaca(HTMLモバイルアプリ開発)というアプリ開発ソフトの無料版を使用し、HTMLとJava Scriptでプログラミングに勤しんでおります。
アプリの機能として、InstagramのStoryのようにスマホ画面上で指でスライドさせると動いたり大きさが変わったりする文字入力フォームを反映させたいという段階です。
一応のところ、文字入力フォームに関しては、

<form>タグで作れるようなWebアンケートによく見られる簡単なものであれば反映できました。ですが、ここから動かしたりできるようにするには、ネットから集めた知識では限界を感じており、Java Scriptの発展した知識が必要であると考えております。 このタグを使えば実現できるのでは？といったご意見などいただければ幸いです。 アドバイスをいただける上で必要となる情報は適宜掲載いたします。 よろしくお願いいたします。

。

Answer 1

InstagramのStoryのようにスマホ画面上で指でスライドさせると動いたり大きさが変わったりする文字入力フォームを反映させたいという段階です。

どのような動きかはわかりませんが、JavaScript のみで動かすのではなく、CSSも利用しているのでは。

【CSS アニメーション - Google 検索】
https://www.google.co.jp/search?num=100&safe=off&q=CSS+%E3%82%A2%E3%83%8B%E3%83%A1%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3

JavaScript で複雑な描画をするなら canvasなどもありますが、基本的にUIまでcanvasにしていないと思われるので、タッチイベントを拾ってCSSを動的に変化させているか、SVGを使っているかだと思います。

【javascript canvas アニメーション - Google 検索】
https://www.google.co.jp/search?num=100&safe=off&q=javascript+canvas+%E3%82%A2%E3%83%8B%E3%83%A1%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3

【javascript タッチイベント - Google 検索】
https://www.google.co.jp/search?num=100&safe=off&q=javascript+%E3%82%BF%E3%83%83%E3%83%81%E3%82%A4%E3%83%99%E3%83%B3%E3%83%88

【javascript svg アニメーション - Google 検索】
https://www.google.co.jp/search?num=100&safe=off&q=javascript+svg+%E3%82%A2%E3%83%8B%E3%83%A1%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3

Comments

[anopurihana]

kei344さん
ご返事ありがとうございます。
ご紹介していただいたリンクは一通り目を通しましたが、これらのアニメーションの手法はどれも私にとって新しいものでとても勉強になりました！特に、タッチイベントというものは私がここで求めている動作に一番近い気がします。依然解決までは程遠いですが、更に読み込んで知識を増やしていきたいと思います。ご協力感謝いたします！