この前作った「チンチロリンお得度チェッカー」にOP画面とTwitterでの共有機能つけました。
OPは、このページにアクセスした際に画面の中央にロゴがひょこっと出てくる感じになってます。
以下の記事を参考にしました。
【簡単】cssで作るオープニングエフェクト・アニメーション【コピペでOK】
- 左からカーテンのように開くアニメーション
- ロゴ入り背景がフェードアウトするアニメーション
- 四隅が縁取られるアニメーション
と３つあるうちの「ロゴ入り背景がフェードアウトするアニメーション」を使わさせていただきました。
どれもサイトに訪れた時に「おっ」となるようなOP画面で、いい感じです。
ちょっとの手間で、よりかっこよくみせられますね！
そして、Twitterの共有機能も追加しました。
最初は以下の記事を参考に作業を進めていました。
[HowTo]Twitterへのリンクシェア機能をお手軽に実装する！
ただ、Vue.jsでモーダルウィンドウとか、算出した値とかをHTMLのタグに反映させる必要があって、ボタンが表示されないなど、なかなかうまいこといきませんでした…（そういう処理なかったらめっちゃ簡単にTwitter共有機能つけれる！）
Vue.jsでv:bindとか使って、投稿内容に算出された値を埋めこめようとしましたが、これもうまいこと動作せず…
（参考：vue.jsでタグ属性値の文字列の一部を置き換える方法）
代入のタイミングとかの問題なんだろうな～
次に試した方法として、以下の記事を参考に進めました。
【Vue初心者向け】Vue.jsのシンプルなTwitterのシェアボタンの実装
Vue.jsでの共有機能のつけ方を紹介されていて、ピッタリの記事でした！
投稿内容の埋め込みも成功しました！
こんな感じで、何円お得に飲めたかが投稿内容に反映されるようになりました。
そして、この「チンチロハイお得度チェッカー」はcee-lolin-checker.comというドメインを買って、そちらで公開しました！
ひとり立ちですね…！
ブログのURLを経由しないので、友達にも見せやすいですね。
コメント