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

ITかあさん

最新記事

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にしか対応していないアプリも画面をサブディスプレイ化させることでペンタブでお絵かきができました。

 

遅延は発生するか

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

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

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

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

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

Atomをやめて、Visual Studioに切り替えた話

Atomをやめて、Visual Studioを使い始めました

Dreamweaverを卒業した後はずっとAtomをエディタとして使ってきて、拡張機能は色々お世話になってきました。
が、、Atomを卒業することにしました。

Atom 卒業を決意した理由

Atomの卒業を決意した理由はここ最近、とにかく重たいことでした。ファイル名検索も、文字列検索をかけてもとにかく遅く Atom HelperによるCPUの圧迫も問題でした。

Microsoft製のVisual Studioを使うよ!

Visual Studio Community版なら無料で使うことが可能です。

無料は2つあり、Visual Studio CommunityとVisual Studio Expressがありますが、無料版は年商1億円未満で5人まで無料、とのことなので、何台インストールしても無料ということではないです。個人事業主であれば問題なくVisual Studio Communityをインストールできます。

(Expressは目的ごとにエディションが用意されています。今回はCommunity版をインストールします。

home brewでインストール

$ brew cask install visual-studio-code

インストール直後の状態。左に並ぶアイコンのうち、上から3番目がgit 1番下のアイコンが拡張機能。gitは何も拡張機能を追加しなくてもデフォルトでついてるようです。

 

あったほうが良い拡張機能

拡張機能の検索フォームで拡張機能を検索するとインストール可能なパッケージが表示されるので、次々に好みのパッケージをインストールすることができます。

Git History

デフォルトの状態ではgit logを確認することができないのでインストール

Guides

SCSSとか、インデントがわかりにくい。インデントごとにガイド線を出力してくれる

Ruby関連

erb

elbのシンタックスハイライト

Ruby Language Colorization

Ruby シンタックスハイライト

AtomではCPUあがりすぎて、いつもsafeMODEで起動したり、落としたりを繰り返していましたがVSCODEはとっても軽くて軽快。まだ使い始めたばかりですが、タスクランナーもとても便利なようで、Sassのコンパイルに便利なようです。

Vue.jsによるformのselectによるリンクメニューの実装

jQueryでformのselectタグによるリンクメニューを実装した場合


プルダウンを変更した時をonChangeでうけとってlocation.hrefでページを遷移させる、これ。これをVue.jsで実現したい。

Vue.jsによるformのselectによるリンク

Vue.jsでselectフォームを実装する場合、フォーム入力バインディングを使います。


v-forを使って繰り返し処理を行い、
v-bindでselectのoptionの設定を行います。

v-modelを使うと、formのdefault値が無視される性質があるため、valueの空をセットしています。