ゆーじぇいブログ

ゆーじぇいブログ

プログラミングとか色々

［Nuxt］［Vue］Twitter風カウンターをvue-twitter-counterを使って実装する！

Nuxt.js JavaScript Vue.js

f:id:jyouj:20181124165447p:plain

最近、いろんなVue.js用パッケージを見つけるのにハマってます。今回、面白そうだなと思ったのはTwitter風のカウンターが簡単に実装できるvue-twitter-counterというパッケージです。

GitHub - LucasLeandro1204/vue-twitter-counter: Counter component inspired in Twitter with Vue

ツイートする時いつも見る文字数円カウンターをいざ実装！

Nuxt.jsを使って実装していきますが、Vue.jsでも簡単に行けます。

導入

npmで導入します。

$ npm install vue-twitter-counter --save

nuxt.config.jsに記述。

module.exports = {
  // add
  plugins: [
    { src: '~plugins/vue-twitter-counter.js', ssr: false }
  ],

では、plugins/vue-twitter-counter.jsを作成します。

import Vue from 'vue'
import VueTwitterCounter from 'vue-twitter-counter'

Vue.component('vue-twitter-counter', VueTwitterCounter)

これで準備は整いました。

実装

さあ実装していきます。 pages/index.vueに記述していきましょう。

<template>
   <div>
     <textarea v-model="message" rows="5"></textarea>
     <vue-twitter-counter :current-length="message_length"></vue-twitter-counter>
   </div>
</template>

<script>
import Logo from '~/components/Logo.vue'

export default {
  components: {
    Logo
  },
  data () {
    return {
      message: '',
    };
  },
  computed: {
    message_length () {
      return this.message.length;
    },
  },
}
</script>

npm run devで実行してみると！

f:id:jyouj:20181230160057p:plain

おお！できました！

140文字制限とかはどうやるんだろう、と思ってみると、

<vue-twitter-counter :current-length="message_length" :danger-at="140"></vue-twitter-counter>

これで行けますね！

何かあれば、じぇい👨‍💻 (@jyouj__) | Twitterに！

投げ銭も待ってまーす！-> jyouj__さんの投げ銭ビスケット募集中！

Nuxt．jsビギナーズガイド Vue．jsベースのフレームワークによるシングルペ [ 花谷拓磨 ]

Nuxt．jsビギナーズガイド Vue．jsベースのフレームワークによるシングルペ [ 花谷拓磨 ]

［Nuxt］［Vue］ボタンをクリックするとボタンが出る！vue-circle-menuが便利！

Nuxt.js Vue.js JavaScript

f:id:jyouj:20181124165447p:plain

メニューボタンをオシャレにデザインしたい時ってありますよね？そんな時、活躍しそうなVueのモジュールがあったので紹介します。

GitHub - OYsun/VueCircleMenu: A beautiful circle menu powered by Vue.js

この記事ではNuxt.jsを利用していますが、Vue.jsでも導入は簡単です。

導入

とりあえずNuxtのプロジェクトディレクトリにインストールします。

npm install vue-circle-menu

nuxt.config.jsに設定を書いていきましょう。

module.exports = {
  // 追記
  plugins: [
    { src: '~plugins/vue-circle-menu', ssr: false }
  ],
  // ...
}

そして、plugins/vue-circle-menu.jsを作成して、こう記述。

import Vue from 'vue'
import CircleMenu from 'vue-circle-menu'

Vue.component('circle-menu', CircleMenu)

これで使えるようになりました。

実装

今回はReadmeにあるようにシンプルに使ってみます。

fontawesomeを利用しているのですが、くわしいfontawesomのNuxt.jsでの利用方法は下記の記事を参考にしてみてください。

nuxt-fontawesomeを使って Nuxt.jsへFont Awesome 5を導入する - Qiita

pages/index.htmlのデフォルトのものに追記してみましょう。

 <section class="container">
    <div>
      <logo/>
      <h1 class="title">
        connfidenss
      </h1>
      <h2 class="subtitle">
        Connpass Client Service
      </h2>
      <div class="links">
        <a
          href="https://nuxtjs.org/"
          target="_blank"
          class="button--green">Documentation</a>
        <a
          href="https://github.com/nuxt/nuxt.js"
          target="_blank"
          class="button--grey">GitHub</a>
      </div>
      <!-- add -->
      <circle-menu type="middle" :number="4" animate="animated jello" mask='white' circle>
        <button type="button" slot="item_btn"></button>
        <font-awesome-icon slot="item_1" icon="dollar-sign"/>
        <font-awesome-icon slot="item_2" icon="yen-sign"/>
        <font-awesome-icon slot="item_3" icon="euro-sign"/>
        <font-awesome-icon slot="item_4" icon="lira-sign"/>
      </circle-menu>
    </div>
  </section>

npm run devをしてみると、 f:id:jyouj:20181229222142p:plain

右下のピンクのボタンを押すと、 f:id:jyouj:20181229222223p:plain

うまく動きました！

何かあれば、じぇい👨‍💻 (@jyouj__) | Twitterに！

投げ銭も待ってまーす！-> jyouj__さんの投げ銭ビスケット募集中！

Nuxt．jsビギナーズガイド Vue．jsベースのフレームワークによるシングルペ [ 花谷拓磨 ]

Nuxt．jsビギナーズガイド Vue．jsベースのフレームワークによるシングルペ [ 花谷拓磨 ]

［Golang］絵文字を簡単に表示できるemojiパッケージが便利！

Go

f:id:jyouj:20181216184046p:plain

簡単にGoで絵文字を表示させることができるパッケージがあったので紹介します。

GitHub - kyokomi/emoji: emoji terminal output for golang

導入

とりあえずインストールしてみます。

$ go get github.com/kyokomi/emoji

早速書いていきましょう。

試す

main.goを作成して、下のように書いていきましょう。

package main

import (
  "fmt"

  "github.com/kyokomi/emoji"
)

func main() {
  i := 0
  sushi := emoji.Sprint(":sushi:")
  for {
    fmt.Println(sushi)
    i++
    if i == 10 {
      break
    }
  }
}

10回、寿司の絵文字をターミナルに表示させます。:sushi:が寿司の絵文字になります。使える絵文字というのは、

www.webfx.com

これを見たら良さそうですね！

実行してみます。

$ go run main.go

f:id:jyouj:20181228174016p:plain

こんな感じでうまくいきました！

echoフレームワークでも試す

ターミナルには表示できたのですが、echoフレームワークでもうまく動くのか試してみたいと思います。

server.goに書いていきましょう。

package main

import (
  "net/http"

  "github.com/labstack/echo"
  "github.com/kyokomi/emoji"
)

func hello(c echo.Context) error {
  sushi := emoji.Sprint(":sushi:")
  return c.String(http.StatusOK, sushi)
}

func main() {
  e := echo.New()

  e.GET("/", hello)

  e.Logger.Fatal(e.Start(":1323"))
}

ちゃんとローカルホストにアクセスすると表示されました！

f:id:jyouj:20181228174620p:plain

emojiパッケージめっちゃいいですね！

何かあれば、じぇい👨‍💻 (@jyouj__) | Twitterまで！

スターティングGo言語 （CodeZine　books） [ 松尾愛賀 ]

スターティングGo言語 （CodeZine　books） [ 松尾愛賀 ]

［Golang］echoフレームワークを試してみた！

Go echo

f:id:jyouj:20181227164744p:plain

Go言語はフレームワークを使わずとも、ライブラリの機能が高いのでOKと聞いたのですが、せっかくなのでGoのフレームワークにもちょっと触ってみようかなと思い、評判の良さそうなechoを使ってみることにしました。

インストール

echoフレームワークを導入しようと思います。

$ go get -u github.com/labstack/echo

準備ができましたね。

実装

とりあえず書いていきます。echo-sample/server.goに書いていこうかと。

package main

import (
  "net/http"

  "github.com/labstack/echo"
)

func main() {
  e := echo.New()

  e.GET("/", func(c echo.Context) error {
    return c.String(http.StatusOK, "Hello, Go!")
  })

  e.Logger.Fatal(e.Start(":1323"))
}

http://localhost:1323にアクセスするとHello, Go!と表示されます！手っ取り早い！！

違うページとかにもできるかな？と思って、下のように追加してみます。

package main

import (
  "net/http"

  "github.com/labstack/echo"
)

func main() {
  e := echo.New()

  e.GET("/", func(c echo.Context) error {
    return c.String(http.StatusOK, "Hello, Go!")
  })

  // 追加
  e.GET("/next", func(c echo.Context) error {
    return c.String(http.StatusOK, "Next!")
  })

  e.Logger.Fatal(e.Start(":1323"))
}

http://localhost:1323/nextにちゃんとNext!って表示されました。

あれ？でもこれだとmain()が膨らみそうだなあ、と思ったので、切り分けます。

package main

import (
  "net/http"

  "github.com/labstack/echo"
)

func hello(c echo.Context) error {
  return c.String(http.StatusOK, "Hello, Go!")
}

func next(c echo.Context) error {
  return c.String(http.StatusOK, "Next!")
}

func main() {
  e := echo.New()

  e.GET("/", hello)

  e.GET("/next", next)

  e.Logger.Fatal(e.Start(":1323"))
}

おお、いい感じにできました！

調べてみるとAPI開発に使っている記事が多かったので、次はそっちの方をechoで作ってみようと思います。

何かあれば、じぇい👨‍💻 (@jyouj__) | Twitterに！

スターティングGo言語 （CodeZine　books） [ 松尾愛賀 ]

スターティングGo言語 （CodeZine　books） [ 松尾愛賀 ]

［JavaScript］iTyped.jsでタイピングアニメーションをサクッとつくる

JavaScript

f:id:jyouj:20181213001422g:plain

面白いアニメーションを実装できるJavaScriptのライブラリがあったので紹介します。簡単にタイピングアニメーションを実装できるiType.jsです。

github.com

早速実装しよう！

まずは導入してみましょう！

bodyタグの上ら辺に。

<script src="https://unpkg.com/ityped@1.0.2"></script>

それでは作っていきましょう。

<div id="app">
   <h1><span id="ityped"></span></h1>
</div>

HTMLはこんな感じで、JSとCSSにもこう記述しましょう。

ityped.init(document.querySelector("#ityped"), {
      loop: false,
      showCursor: false,
      strings: ["My name is jyouj__!"]
    })

loopをfalseにして繰り返し処理をしていませんが、繰り返してタイピングアニメーションをつけたい時はtrueにして置いてください。

    .ityped-cursor {
      font-size: 2.2rem;
      opacity: 1;
      -webkit-animation: blink 0.3s infinite;
      -moz-animation: blink 0.3s infinite;
      animation: blink 0.3s infinite;
      animation-direction: alternate;
    }
    @keyframes blink {
      100% {
        opacity: 0;
      }
    }
    @-webkit-keyframes blink {
      100% {
        opacity: 0;
      }
    }
    @-moz-keyframes blink {
      100% {
        opacity: 0;
      }
    }

サクッとできていい感じですね。感動！！

何かあれば、 じぇい👨‍💻 (@jyouj__) | Twitterに！

投げ銭も待ってまーす！-> jyouj__さんの投げ銭ビスケット募集中！

徹底マスター JavaScriptの教科書 プログラミングの教養から、言語仕様、開発技法までが正しく身につく [ 磯 博 ]

徹底マスター JavaScriptの教科書 プログラミングの教養から、言語仕様、開発技法までが正しく身につく [ 磯 博 ]