spotifyとLast.fmを接続する

Last.fm知っていますか？様々なアプリやソフトウェアから音楽を再生すると専用のソフトをインストールすることで自分の音楽遍歴を見返すことができるWebサービスです。

Spotifyでももちろん聞いた曲履歴をLast.fmに登録することが可能で、設定さえきちんとすれば勝手にたまっていくので重宝して使っていたのですが、Spotifyアプリ内からは５月のアップデートからLast.fmの方に登録出来てなかったみたい。

なんで？とは思ったものの、調べてみるとどうやらそもそもLast.fmというサービス自体知らない方からの問い合わせが多かったらしく、アプリ内でのLast.fmのログインを廃止したとのことでした。

ではLast.fmにはもう登録できなくなったかというとそうでもなく、今度はLast.fm側からの登録が必要となりましたので、それを解説していきます。

１．まずはLast.fmにログインし、「設定」ページを開きます。

ページは右上の自分のアイコンをクリックしたら出てきます。

２．設定内のアプリケーションをクリックします。

一番右のタブです。

３．アプリケーション内の「SpotifyでScrobble」の右の「接続」をクリック

４．Spotifyの画面に代わりますのでログイン後、接続してください。

以上です。ちょっと面倒になりましたが変わらず出来たので安心でした。

PythonでResasAPIにアクセスする

アイデアソンがあるみたいなので・・

resas.go.jp

さくっとPythonでrequests使って問い合わせてみた。

ここを参考にした。
www.kmiura.net

都道府県表示させるやつよりも少しふみこもうとしたらわからんかったのでメモ

import requests
import json

def resas_api_request():
    api_key = "【API_KEY】"
    url = "https://opendata.resas-portal.go.jp/"
    
    url += "api/v1/cities"
    
    head = {
        "Content-Type":"application/json",
        "X-API-KEY":api_key
    }
    
    payload = {'prefCode':1}
    
    req = requests.get(url,headers=head,params=payload)
    
    print(req)
    json_obj = json.loads(req._content.decode('utf-8'))
    print(json_obj)
    
    return

resas_api_request()

みんなで分析しようぜ

ベイズ統計学

図解・ベイズ統計「超」入門 あいまいなデータから未来を予測する技術 (サイエンス・アイ新書)

 なんとなく買ってみて読んでいるが、ベイズ更新のやり方だけでも十分に旅館の計数管理には役に立ちそうな気がする。

たとえば宴会の原価を推定するのにベイズ更新を使えば月ごとに結構正確な原価率が推定できるんじゃなかろうかとか

まぁ原価率なんて実際に使用額／売上で算出できるので力技でもいいけど、計画立てるときにはもう少しふわっとしているしね

確率も原価も同じ％だから勘違いしそうになるていうか、ベイズ更新的な手法だとどのような形になるのだろうか？

同じように計画をベイズ的に解くには？なんか色々興味が湧いてきます。

React周りの必要なモジュール

React

•  react-dom

Redux

• react-redux
• redux-thunk

React-router

• react-router-dom
• react-router-redux
• history

このあたりの使い方はちゃんと押さえておく。

あとはreduxのreducerでどこまでの処理を書くかってところが知りたい。

 これほんとわかりやすかった。

React入門 React・Reduxの導入からサーバサイドレンダリングによるUXの向上まで (NEXT ONE)

web extensions書き直した。

どうにも昨日作ったweb extensionがきもちわるいかったので書き直した。

popup.jsでどうこうするやつはスコープの生き死にがわかりづらかった。

てことで現在はpopup.jsではなくbackground scriptsで管理するようにした。

async/awaitとfetchAPIを使って書き直した。

非同期はわかりづらいけど最終的には各スクリプトにイベントリスナを追加する形で受ければ上手くいった。
イベントリスナで受けるのは思い付きだったけどうまくいった。よかった。

popup.js

//background scriptにリクエストを送る。
browser.runtime.sendMessage({text:''},function(response){
  document.getElementById('title').innerText = `you have selected ${response.artist}`
})

//background script からリクエストが来たらその通りにレンダリングする。
browser.runtime.onMessage.addListener(function(request,sender,sendResponse){
  console.log(request)
  render(request)
  sendResponse({text:'message received'})
})

function render(request){
  const similar_artist = request.state.similar_artist
  console.log(similar_artist)
  document.getElementById('title').innerText = `you have selected ${request.artist}`
  let html = ''
  for (key in similar_artist){
    html += `<br /><div><img src = ${similar_artist[key].image[1]['#text']}>${similar_artist[key].name}</div>`
  }
  document.getElementById('artist').innerHTML=html
}

background.js

//初期値の設定、選んだアーティストと似ているアーティスト

console.log('background start!')

//まずはAPIを叩くFunctionを作る。asyncなやつ
async function getSimilarArtist(artist) {
  var state = {
    artist_name: artist,
    status: "none",
    similar_artist: "",
  }
  const api_key = '6365215872671c325787a220ef38ae1c'
  var url = `http://ws.audioscrobbler.com/2.0/?method=artist.getsimilar&artist=${artist}&api_key=${api_key}&limit=10&format=json`
  fetch(url).then(async(response) => 　{
    var results = await response.json()
    state.status = "fetched"
    state.similar_artist = results.similarartists.artist
    //console.log(state)
    //最後にmessageをpopupに送る
    browser.runtime.sendMessage({
      artist: artist,
      state: state
    })
  })
}

browser.runtime.onMessage.addListener(function(request, sender, sendResponse) {
  //現在のタブを取得する
  browser.tabs.query({
    currentWindow: true,
    active: true
  }, function(tab) {
    browser.tabs.sendMessage(tab[0].id, {
      text: ''
    }).then(function(response) {
      getSimilarArtist(response.str)
    })

  })
})

content-script.js

//単純にメッセージが来たらそこにレスポンスを返すだけ
browser.runtime.onMessage.addListener(function(msg,sender,sendResponse){
    title = document.title
    str = document.getSelection().toString()
    console.log(str)
    sendResponse({title:title,str:str})
})

web extensions 作ってみた。

how to use lastfm extension

これ以上web extensions勉強しても知見が得られそうにないので実際に作ってみた。

generator-web-extension使用。

インストール方法はコチラ

やりたいことはボタン押したら選択範囲を検知してその選択範囲がアーティストならlast.fmAPIを利用して

似たアーティストを返すというもの。

ソースはこっち

github.com

やっぱ実際に書いてみるのが非常にわかりやすくてよかった。

つまづいたところ、というかなおしたいところ

popup.js

import LastFM from 'last-fm'

browser.tabs.query({
    currentWindow: true,
    active: true
}, function (tab) {
    browser.tabs.sendMessage(tab[0].id, {
        text: ''
    }).then(function (response) {
            const title = response.title
            const str = response.str
            document.getElementById('title').innerText = `you have selected ${str}`
            searchSimilarArtist(str)

        }

    )
})

function searchSimilarArtist(artist) {
    //authentificate
    const auth = new LastFM('6365215872671c325787a220ef38ae1c')
    // for debug:console.log(artist)
    //return artist similar to given name
    const data = {
        isFound: false,
        result: "ea"
    }
    auth.artistSimilar({
        name: artist
    }, (err, data) => {
        if (err) {
            data.isFound = false
            data.result = err
            console.log(data)
        } else {
            data.isFound = true
            data.result = data
            //for debug:console.log(data)
            let html = ""
            for (var i = 0; i < 10; i++) {
                html += `<br /><div>${data.artist[i].name}</div>`
            }
            console.log(html)
            document.getElementById('artist').innerHTML = html
        }
    })
}

この中のfunction searchSimilarArtistのauth.artistSimilar関数のコールバック処理

ここで全部分けてるからそれを別の処理に移したいのだけどlet html ~の部分をdataをreturn するまでのfunction にして以降にdataをレンダリングfunctionに切り分けたいのだがうまくいかない。

dead objectがどうのって怒られた。

多分非同期的にプログラムが進んでてdataが返ってくる前に次に進んじゃっているのが原因のはず。

うまくレンダリングできるようにならないかな。

これからやりたいこと：

• これをreduxのフローに沿って書き直してみたい。
• うまくフローに乗せれたら次は色々（アーティストの画像とか）も表示できるようにしたい。

さてうまくいくかな

generator-web-extension使ってみよう。

なぜ？

いきなりQiita

qiita.com

とあったのでgithubページ見に行くとなんかdeprecatedなページを見た気がしたので。（気のせいでした）

どうやらgenerator-chrome-extension-kickstartと勘違いしたらしい。

でもchromeではなくFirefox派なのでgenerator-web-extensionを使ってみようと思う。

インストール

npm install -g yo generator-web-extension

使い方

最初に

ディレクトリを作り、そこでターミナルを開いてコマンドを打つ

mkdir myfirstextension

cd myfirstextension

yo generator-web-extension

すると会話形式でScafoldingが始まった。適当にポチポチしていくとひな形が作成される

どうやらこれで開発するとnodeのモジュールなどが使えるようだ。

ホットリロード

コマンドはnpm run dev firefox

これで./dist/firefox/フォルダが出現する。

これをabout:debugging内の

一時的なアドオンを読み込めば

あとは勝手にホットリロードされる。