目次

　

1. 作ったもの

1.1. デモ

https://mtside01.github.io/VueClock/

上記で公開しています。

現在の西暦/和暦と日時を表示します。

最近よく署名等で令和何年かを書かされることが多いのですが、 いつも分からなくなるのでスマホのホーム画面にAppとして置いておきたくて作りました。

VueClock

1.2. ソースコード

https://github.com/mtside01/VueClock

　

2. ポイント（備忘録）

2.1. CDNでのVue.js導入

CDNを使ってサクッとVue.jsを使えるようにします。 Body内に以下を記載するだけです。

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>

※ 最新版は以下公式ページを確認

https://jp.vuejs.org/v2/guide/installation.html

　

2.2. HTML要素とVueインスタンスを連動させる

2.2.1. HTML要素に記載したidとVueインスタンスのel（エレメント）オプションを紐づける

これを行うことで、id指定した要素内でVueが扱えるようになります。

以下のように"app"/"#app"を指定することで紐づけています。

<div class="wrap" id="app">

var app = new Vue({
    el: "#app",

2.2.2. マスタッシュ構文を使ってVueで定義したdata変数を埋め込む

マスタッシュ構文{{ 変数名 }}を使うことで、Vueで定義したdata変数をHTML要素に埋め込むことが出来ます。

今回は、{{year}}、{{date}}、{{time}}の3つを用意しました。

<p class="year">{{year}}</p>
<p class="date">{{date}}</p>
<p class="time">{{time}}</p>

data:{
        year:"",
        data:"",
        time:"",
        week:["(日)","(月)","(火)","(水)","(木)","(金)","(土)"]
    },

　

2.3. Vue mountedを使用して、DOM生成後をトリガーに関数を実行する

Vue mountedを使用することで、DOM(Document Object Model)が生成され、画面描画されたタイミングをトリガーとして呼び出す関数を作成しています。 更にその関数内でsetInterval()を実行することで、一定間隔で時刻表示の更新を行っています。

mounted: function(){
    setInterval(this.updateTime,1000);
}

ちなみに似たような機能にcreatedがあるが、これはDOM生成前がトリガーとなるらしい。

　

2.4. スマホ用のサイズ調整

スマホ表示用にサイズ調整する場合、Google Chromeのデベロッパーツールが便利だった。

htmlファイルをGoogle Chromeで開き、三点リーダから、「その他のツール」→「デベロッパーツール」を選択

Developer Tool

左上から確認したい画面サイズを選択する

Dimensions

　

3. 感想・改善したい点

  • Vue.jsは結構シンプルな記載で画面に動きを付けられるのがとても良い。今後も多用する予感。
  • 作ったAppをPWA化しないとスマホのホーム画面に表示できないかなあ、とか考えてたけど何も工夫せず普通に出来てしまった。

AddToHome

Home

  • あと何個かApp作って慣れてきたらもうちょっとロジックが複雑なものを作ってみようかな

　

4. 参考