Q&A
そもそも提示のものですらWeb「アプリ」なわけですが、もともと「アプリ」自体、唯一の意味を示すものではないので表現は具体的にしてください。
知りたいこと
以下のサイト上でのお気に入りボタンをクリックした後、
アプリライクな挙動でお気に入りカウンター（丸ポチバッジ）に数字が変化しますが、
どういった技術がつかわれているのか、わかる方教えていただけないでしょうか。
該当サイト
https://bucketlist.austria.info/jp/
詳しい方、ご教授頂けると幸いです。
回答3件
0
どういった技術がつかわれているのか、わかる方教えていただけないでしょうか。
どういった技術といっても、
いろいろな方法がありますので・・・。
技術の話などは他の回答者さんがお答えしている通りなので、
ある程度、自分でもどういった技術が使われているか確認する方法をお答えしますと、
ブラウザのデベロッパーツールを使い、要素を検証などを行い、HTMLの構造、適用されているCSS、JavaScript構文などを見ていく、です。
お見受けしたところ、ユーザー別に、お気に入り的なものを追加する、といったものなので、
セッションなどのサーバーサイド技術も関わっている可能性があります。
投稿2019/05/14 04:59
総合スコア9528
0
ベストアンサー
例によって中身見てないですけど，まず言えることは，（基本的には）CSSでアニメーション+カウントアップはJSなどだろうなということですね．
逆に言うと，ソースを見ずに言えることはそこまでです（笑）
なぜなら，同様の機能を実装する方法がたくさんあるからです．
最近は環境が整ってきているおかげで，プログラムを実行するための「ツール」は，素のJS（Vanilla JSとも言う）一択ではなくなり，Typescriptだったり，Elmだったり，ReactやVueなどのフレームワークだったりと，様々な選択肢を選べるようになっています
また，各ツールの仕様によって，実装方法は異なるので，どの技術を使って実装したいか，という前提を質問者様自身が指定しなければ，回答しきれない部分もあったりします．
ここで使われている技術は分かりませんが，動作内容は比較的単純です
１．ボタンの押下を検知
２．ボタンの押下に合わせて，アニメーションを実行
３．ボタンの押下に合わせて，Cookie等にデータを保存
４．Cookie等のデータに合わせて，数字を書き換え
これらの動作それぞれについて，素のHTML,CSS,JSで実装するには？フレームワークを使って実装するには？という形式で調べてみてはどうでしょう？
また，Web上の技術は（WASIを除き，）ブラウザ上で実行する際には全て，HTML,CSS,JSとなって処理されます．つまり，どのツールも，同じものをベースに動いているので，特殊な動作をさせたいということでない限りは，どの技術が使われているかを気にする必要はないと思います．
投稿2019/05/13 15:10
総合スコア1284
ご丁寧にご回答いただきありがとうございます。大変、勉強になりました。本質問は少し丸投げ感があり、質問が雑だったかと存じます。もう少し自分で調べさせていただきます。今後ともよろしくお願いいたします。
0
過去の質問にjqueryがあるようなのでjquery使えるんですよね？それなら以下の回答で多分分かる。
アイコン（imgタグかな？）を生成した後、そのタグを下の座標から右上の座標に向かって移動させてる（アニメーションの為にsettimeoutとかを使っている）
目的の座標についた時点で、エフェクトかかるようにimgタグを消しつつ、カウンターの値を取得して加算している
※[追記]貼られてる画像のように実装出来る方法を記載しただけです。元サイトは見てません。
投稿2019/05/13 11:12
編集2019/05/13 11:14
総合スコア170
あなたの回答
tips
プレビュー
