朝霞市在住のWEB系エンジニアかあさんのPHPメインの雑記帳

ITかあさん

最新記事

Vuetify.jsでマテリアルデザインことはじめ

Vuetify.jsでマテリアルデザインことはじめ

スクリーンショット 2018-05-24 11.01.40.png (249.0 kB)

昨日Nuxt.jsの環境構築の記事を書かせて頂きましたが、テンプレートの変更や、ページの追加に触れてNuxt.jsの入門は終了したいと思います。

自分の作ったアプリケーションにcdで移動

$cd jsfes_nuxt/your-app-name

 

Nuxtのプロジェクトはこんな感じです。

your-app-name $ls -ll
total 752
-rw-r--r--    1 chihiro.matsuda  staff     376  5 19 00:42 README.md
drwxr-xr-x    3 chihiro.matsuda  staff      96  5 19 00:42 assets
drwxr-xr-x    5 chihiro.matsuda  staff     160  5 19 00:42 components
drwxr-xr-x    4 chihiro.matsuda  staff     128  5 19 00:42 layouts
drwxr-xr-x    3 chihiro.matsuda  staff      96  5 19 00:42 middleware
drwxr-xr-x  808 chihiro.matsuda  staff   25856  5 19 00:43 node_modules
-rw-r--r--    1 chihiro.matsuda  staff    1655  5 19 00:42 nuxt.config.js
-rw-r--r--    1 chihiro.matsuda  staff  369890  5 19 00:42 package-lock.json
-rw-r--r--    1 chihiro.matsuda  staff     702  5 19 00:42 package.json
drwxr-xr-x    5 chihiro.matsuda  staff     160  5 19 00:42 pages
drwxr-xr-x    4 chihiro.matsuda  staff     128  5 19 00:42 plugins
drwxr-xr-x    5 chihiro.matsuda  staff     160  5 19 00:42 static
drwxr-xr-x    3 chihiro.matsuda  staff      96  5 19 00:42 store

 

Sassを使えるようにする

生でCSSはもう書きたくないですね。そこで、Sassを使えるようにする必要があります。
package.jsonのあるディレクトリでnpmでパッケージをインストールします

$ npm install --save-dev node-sass sass-loader

 

nuxt.config.jsで使えるスタイルシートを追加する

assetsにディレクトリにscssフォルダを切って、そこにtodo.scssを追加することにしました。

  /*
  ** Global CSS
  */
  css: [
    'vuetify/src/stylus/main.styl',
    '@/assets/scss/todo.scss'
  ],

 

scss

sassが無事使えることだけを確認したいので、文字色を赤くするだけで試します

$red: red;
blockquote {
    color: $red;
}

 

スクリーンショット 2018-05-24 10.58.23.png (21.3 kB)
http://localhost:3000/inspire
にアクセスすると、更新ボタンを押さずにリアルタイムにブラウザに変更が保存されますね(SSRさまさまやで)

新規テンプレートの追加

現在はVuetifyのデフォルトテンプレートですので、白地にVuetifyのグリッドデザインでサンプルを作ってみます。

出来上がりの様子

スクリーンショット 2018-05-24 11.01.40.png (249.0 kB)
DoorKeeper のAPIを使って、イベントを取得してVuetifyのグリッドで表示してみました。もちろん、APIを叩くにはNuxt.jsの環境構築の際にインストールしたaxiousを使っています。

テンプレートの追加

テンプレートの追加は非常に簡単です。layoutsフォルダがありますので、新たにファイルを追加するだけです。
スクリーンショット 2018-05-24 11.06.10.png (8.3 kB)

event.vue

を追加しました

ファイルの中身についてはこちらのgistをご確認ください。

いよいよオリジナルページの追加

いよいよオリジナルページの追加です。pagesディレクトリに.vueファイルを追加するだけ
スクリーンショット 2018-05-24 11.11.13.png (10.8 kB)

さきほど追加したテンプレートでpageを読み込むにはこれだけ。

<script>
  export default {
    layout: 'event',
  }
</script>

 

こちらもAPIの接続のソースコード含めてgistからご確認ください。

今度はゆっくりとaxiousの解説記事を書きたいと思います。

Nuxt.jsではじめるSSRことはじめ

Nuxt.jsではじめるSSRことはじめ

※このブログは先日 5月19日(土)初夏のJavaScript祭のLTコーナーでITかあさんが超駆け足でSSR紹介したネタの解説版です。
73314_normal_1524055009_jsfes201805eyecatch01.png (202.4 kB)

運営以来最大のチェック員数になりました!
ご参加くださった皆さまありがとうございます!

この模様はJavaScript祭公式Twitterから実況されておりましたので、ぜひこちらのTwitterアカウントもチェックしてください

LT内容 Nuxt.jsではじめるSSRことはじめ

仕事でAPIゴリゴリ、フロントエンドはモダンなJS FWを使う必要がでてきて、
重い腰をあげて「Nuxt.jsをいっちょやったろ!」と思ったらあまりにも環境の構築が楽なうえ、SSRも簡単すぎてもうSSRナシのコーディングは到底考えられなくなるほどだったので、そんな話をLTでしゃべりました。

なので、今回の記事はLTの補足説明です

Nuxt.jsをインストール

Nuxt.jsをインストールするだけで、なんとSSRも使えるようになります。(楽だね!
NPMはすでにインストール済であることを前提に話を進めます。

$ npx create-nuxt-app your-app-name

Node.jsがバージョン8.2.0以降であれば基本的にnpxのコマンドは使えるはずです。
任意のディレクトリにcdで移動して、npxコマンドを叩きます
your-app-nameに自分のアプリケーション名をつけてあげましょう
ビルドされたアプリケーション名のフォルダ(todoという名前を付けたらtodoというディレクトリができます)

$ cd todo
$ npm run build
$ npm start

 

あとは以下のURLにAccessすればNuxt.jsのトップページが表示されるようになります。

ここまでの手順は画面のキャプチャを動画にしましたのでよろしければご確認ください。

動画の途中、
Use axiosを使うか、eslintを使うか、を質問しているのですが、どちらもyesで使うことにしました。
UI frameworkもWeb app作るなら欠かせない、API接続のaxiosも一緒に入れることができ、createコマンドだけで環境が整うことにただただ感動します

GoogleCloudVisionAPIの画像認識APIを5分で遊ぶ

GoogleCloudVisionAPIの画像認識APIを5分で遊ぶ

GoogleCloudVisionはGoogle製のお手軽な画像認識のAPIです。
画像を指定すると、その画像が一体どのような画像なのかを認識してくれます。


たとえばこんなカンジの先日食べた牛カツの写真。


アップロードすると食べ物、フライ、といったカンジにどんな画像なのかレスポンスを返してくれるAPIです

どんな情報が返却されるかは下記リンクより直接画像をアップロードすることで試すことができます。

さっそくGoogleCloudVisionAPIを使ってみる

GoogleCloudのダッシュボードからAPIとサービスを選びます

APIリストから今回のGoogleCloudVisionAPIを選びます。

あとは手順に従って追加するだけ。すぐにキーを発行してもらえます。


GoogleCloudPlatformsからGoogleCloudVisionAPIの利用を追加します。設定が完了するとキーが発行されるので発行されたキーをコピーします。

利用するにはGoogleCloudに登録済のGoogleアカウントが必要です

なお、APIのキーはGoogleCloudVisionAPI専用のキー発行もできるし、GoogleCloudPlatformsから使えるAPIすべてに対して共通のキーでもOKのです。

さっそくAPIを叩いてみる

キーさえそろえばAPIを叩く準備は整いました。

試しに最近飼い始めた犬さんの画像から、何の画像なのかラベルを抽出したいと思います

APIのアクセス

https://vision.googleapis.com/v1/images:annotate?key=YourKey

json

APIを叩くにはAPIのURLの最後に自分のキーをパラメータとしてセット、データはjson形式で渡します。
画像の渡し方はbase64 エンコード文字列、Google Cloud Storage URI, HTTPまたはHTTPSでアクセス可能な画像URLです。
詳しくはこちらのドキュメントをご確認ください

{
  "requests": [
    {
      "image": {
        "source": {
          "imageUri": "http://www.kaasan.info/..../IMG_4348-e1522818735397.jpg"
        }
      },
      "features": [
        {
          "type": "LABEL_DETECTION"
        }
      ]
    }
  ]
}

レスポンス

戻りはこんなカンジでかえってきます。スコアが高い順に「どんな画像なのか」を認識してラベルを返してくれるようです。

{
  "responses": [
    {
      "labelAnnotations": [
        {
          "mid": "/m/0kpmf",
          "description": "dog breed",
          "score": 0.93450874,
          "topicality": 0.93450874
        },
        {
          "mid": "/m/0bt9lr",
          "description": "dog",
          "score": 0.9185607,
          "topicality": 0.9185607
        },
        {
          "mid": "/m/02xl47d",
          "description": "dog breed group",
          "score": 0.9120572,
          "topicality": 0.9120572
        },
        {
          "mid": "/m/01z5f",
          "description": "dog like mammal",
          "score": 0.8630419,
          "topicality": 0.8630419
        },
        {
          "mid": "/m/05mqq3",
          "description": "snout",
          "score": 0.7132316,
          "topicality": 0.7132316
        },
        {
          "mid": "/m/01z0mh",
          "description": "norwegian lundehund",
          "score": 0.632862,
          "topicality": 0.632862
        },
        {
          "mid": "/m/0cqg0t",
          "description": "akita",
          "score": 0.5387146,
          "topicality": 0.5387146
        }
      ]
    }
  ]
}
なお、90%以上犬ですが、70%の確率で snout 鼻面と認識されました。

もちろんラベル以外にも色合い、いかがわしい画像ではないか、などの認識してくれます。
さらに詳しい情報やAPIの叩き方、フィールドについては入門ガイドを読むといいですよ

入門ガイド

iPadがサブディスプレイにもペンタブレットにもできるアプリDuet

iPadがサブディスプレイにもペンタブレットにもできるなんて!

iPadで動画編集とか楽そうと思って導入したんですが、現在はサブディスプレイとしても活用してます。

 

iPadとMacそれぞれにDuetというアプリをインストールすることで使えるようになります。

iPad非対応のMacのアプリがiPadから操作できる

最近、デザイナーではないのですがデザインとプログラム両方を兼務するお仕事を頂きましてiPadでデザインできたら楽しそうだなあと思っていたのですが、対応アプリ、スペックに限界があり叶いませんでしたが、サブディスプレイ化させることでAdobeソフト、SketchもMacに繋いだ状態ならペンタブレットのようにiPadを使うことができます。

iPadでSketchを開いている状態。問題なくすべての機能がつかえました。

もちろんApple Pencileも使えるよ!

Sketchで現在はデザインを行うのですが、DuetをMac iPadそれぞれ起動させてつなぐことでSketchの操作がiPad上でできました!

私の絵心ではこれが限界ですが、Macにしか対応していないアプリも画面をサブディスプレイ化させることでペンタブでお絵かきができました。

 

遅延は発生するか

この手のアプリは遅延してカクカクするんですけれど、あまり気になりません。(あまり、という意味で全く気にならないわけではないです。たまにもたつくくらいで、ペンタブ代わりにちょっとお絵かきするくらいなら全然あり)

接続には有線が必要ですよ

データ転送ができる純正のケーブルが一本必要です。(純正じゃなくてもいいかもしれないけど、試してません)

有線でつなぐからこその速度感かのかもしれません。

サブディスプレイにもペンタブにも欠かせないアイテムになりそう。