SpotifyAPIを使いプレイリストを簡単に作成してくれるツールDJ-Kin29リニューアルしました!

以前に作成した、アーティスト名を入力するだけでいい感じのSpotifyプレイリストを作成してくれるツールDJ-Kin29を改良しました!

是非、使ってみてください!!!
https://dj-kin29.herokuapp.com/

今回の改良にあたって、認可フローを見直しました。
前回の記事でまとめたので、よかったら参考にしてください。
SpotifyWebAPIの認可フローをまとめてみた

Githubも公開しまーす。
コントリビュート待ってます🍺
https://github.com/kin29/dj-kin29

Before

  • プレーンなPHP
  • Spotify認可のタイミングがフォームを入力後というおかしなタイミング
入力フォーム (index.php)
↓
↓ 作成 (旧:action先=create.php)
↓
(spotifyの認可画面)
redirect_uri: https://dj-kin29.herokuapp.com/create.php
→ 拒否されたら、 https://{redirect_uri}?error=access_denied
↓
↓ 許可されたら、
↓
プレイリスト作成成功
プレイリスト作成完了画面 (complete.php)
or
プレイリスト作成失敗
プレイリスト作成失敗画面 (failed.php)
↓
↓ more create / retry
↓
入力フォーム (index.php)に戻る

After

  • Symfony4を使用
  • Spotify認可のタイミングを、フォーム入力前にした。
1. / (クエリパラメータにcode=xxxを含まない)
- 「Authorization to Spotify」ボタンで、Spotifyとの連携(認可)をスタートする。(リンク先:/auth_spotify)
※ボタン押さずとも連携スタートさせたかったけど、spotify側の認可URLにリダイレクトさせてたらTwitterカードPreviewでエラーになったので、やめました😓

2. /auth_spotify
- Spotifyの認可がスタートする
  - 認可を許可したことがある場合:リダイレクトURL (/code=xxx)に遷移する。
  - 許可していない場合:Spotifyログイン画面 or 認可しますか画面に遷移する。
    - 認可の許可をした場合:/code=xxxにリダイレクトする。
    - 認可を拒否した場合:/error=xxx(エラーページ)にリダイレクトする。(→Re-Tryボタンで再チャレンジ可能)

3. /code=xxx
- フォーム画面。post先は、/create。

4. /create
- SpotifyWebAPIを使って、プレイリストを作成する。
  - 作成成功した場合;完了画面
  - 作成失敗した場合;失敗画面(→Re-Tryボタンで再チャレンジ可能)
- 「More create」ボタンでさらにプレイリスト作成可能(2に戻る)

さいごに

  • Tweetボタン設置しました^^
  • GAを充実させたくて、GTMと格闘しました。
  • 引き続きherokuを使っているので、初動に時間がかかります、、、🙇‍♂️
  • アーティスト名検索では、該当するアーティストの一番上だけを取得し、それに紐付く曲を取得するので、アーティスト名が被っていると期待したプレイリストができないことがあります、、、🙇‍♂️
    (日本のガールズバンドHumpBackのつもりで入力したところ、まだサブサクは解禁してないようで、違うバンドの曲が入っていました。)

 

Symfony4をHerokuにデプロイしてみる

 

Symfony Advent Calendar 2019の14日目です。(間に合わすつもりでしたが、過ぎてしまいました…)

 

ほとんど、Herokuのドキュメント通りですが、 Apache設定に関して忘れがちなので同じ経験をしている方の助けになればと思います!

Githubにコミットしてるので、参考にどうぞ!
kin29/symfony4-heroku

 

使うもの

– Symfony4.4
– Heroku (Apacheを想定)

 

確認事項

Symfony4.4はPHP7.1.3以上が必要です。

$ php -v  //ローカルのPHPのバージョンを確認
PHP 7.1.30 (cli) (built: Jul 4 2019 21:55:42) ( NTS )

 

※ 今のHerokuのデフォルトPHPバージョンは7.3.12でした!

-----> PHP app detected
-----> Bootstrapping...
-----> Installing platform packages...
       - php (7.3.12)
       - apache (2.4.41)
       - nginx (1.16.1)

 

手順

1.composer経由でプロジェクトの作成

$ composer create-project symfony/website-skeleton symfony4-heroku/

ビルドインサーバーを立ててローカルで確認してみる。

$ cd symfony4-heroku/
$ php -S 127.0.0.1:8888 -t public/

welcomeページ見れましたー!

 

2.Herokuにデプロイしてみる

Githubにpushして、masterをdeployしてみます。

なんかエラーになって、deployできない。

...
     Script cache:clear returned with error code 255
       !!  Symfony\Component\ErrorHandler\Error\ClassNotFoundError {#29
       !!    #message: """
       !!      Attempted to load class "WebProfilerBundle" from namespace "Symfony\Bundle\WebProfilerBundle".\n
       !!      Did you forget a "use" statement for another namespace?
       !!      """
       !!    #code: 0
       !!    #file: "./src/Kernel.php"
       !!    #line: 23
       !!    trace: {
       !!      ./src/Kernel.php:23 {
       !!        App\Kernel->registerBundles(): iterable
       !!        › if ($envs[$this->environment] ?? $envs['all'] ?? false) {
       !!        ›     yield new $class();
       !!        › }
       !!      }
       !!      ./vendor/symfony/http-kernel/Kernel.php:449 { …}
       !!      ./vendor/symfony/http-kernel/Kernel.php:133 { …}
       !!      ./vendor/symfony/framework-bundle/Console/Application.php:169 { …}
       !!      ./vendor/symfony/framework-bundle/Console/Application.php:75 { …}
       !!      ./vendor/symfony/console/Application.php:148 { …}
       !!      ./bin/console:42 { …}
       !!    }
       !!  }
       !!  2019-12-14T12:26:54+00:00 [critical] Uncaught Error: Class 'Symfony\Bundle\WebProfilerBundle\WebProfilerBundle' not found
       !!  
       Script @auto-scripts was called via post-install-cmd
 !     WARNING: There was a class not found error in your code
 !     ERROR: Dependency installation failed!
 !     
 !     The 'composer install' process failed with an error. The cause
 !     may be the download or installation of packages, or a pre- or
 !     post-install hook (e.g. a 'post-install-cmd' item in 'scripts')
 !     in your 'composer.json'.
 !     
 !     Typical error cases are out-of-date or missing parts of code,
 !     timeouts when making external connections, or memory limits.
 !     
 !     Check the above error output closely to determine the cause of
 !     the problem, ensure the code you're pushing is functioning
 !     properly, and that all local changes are committed correctly.
 !     
 !     For more information on builds for PHP on Heroku, refer to
 !     https://devcenter.heroku.com/articles/php-support
 !     
 !     REMINDER: the following warnings were emitted during the build;
 !     check the details above, as they may be related to this error:
 !     - There was a class not found error in your code
 !     Push rejected, failed to compile PHP app.
 !     Push failed

 

herokuのdeployではcomposer require-devのほうは、インストールしてくれないそうなので、symfony/profiler-packがないよーって言っています。

横着ですが、
require-devのパッケージを、requireの方にも入れます。

       !!  Symfony\Component\ErrorHandler\Error\ClassNotFoundError {#29
       !!    #message: """
       !!      Attempted to load class "WebProfilerBundle" from namespace "Symfony\Bundle\WebProfilerBundle".\n
       !!      Did you forget a "use" statement for another namespace?
       !!      """

 

こっちも、composer.jsonのscript部分の消しちゃって逃げます💦

-    "scripts": {
-        "auto-scripts": {
-            "cache:clear": "symfony-cmd",
-            "assets:install %PUBLIC_DIR%": "symfony-cmd"
-        },
-        "post-install-cmd": [
-            "@auto-scripts"
-        ],
-        "post-update-cmd": [
-            "@auto-scripts"
-        ]
-    },

で、どうにかHerokuにデプロイできるようになりました😎

 

3.env=prodにする

heroku config:set APP_ENV=prod --app [herokuのapp名]

4.Apacheの設定 ←ここ大事💡

以下コマンドでProcfileを作成します。

$ echo 'web: heroku-php-apache2 public/' > Procfile

さらに、composer require apache-packを実行し、質問にはyesで答えます。
そうすると、.htaccessが追加されます。

git pushしてherokuにdelpoyされたら、ブラウザで確認してみます。
env=prodでは、welcomeページはないので404になります。

 

5.コントローラー作成

下記コマンドで、コントローラを作成することができます。

$ php bin/console make:controller HogeController

 created: src/Controller/HogeController.php
 created: templates/hoge/index.html.twig

           
  Success! 
           

 Next: Open your new controller class and add some pages!

deploy後にheroku bashで、routerを一応確認してみます。良さそう😏

~ $  bin/console debug:router
 ------ -------- -------- ------ -------
  Name   Method   Scheme   Host   Path
 ------ -------- -------- ------ -------
  hoge   ANY      ANY      ANY    /hoge
 ------ -------- -------- ------ -------

6.ブラウザチェック

作成した/hogeにアクセスしてみると、、、見れたー!!!!!🎉

つまづきポイント

deployできたはずなのに、herokuでsymfonyコマンド使ってみると、 最初のエラーが再び….
Attempted to load class “WebProfilerBundle” from namespace “Symfony\Bundle\WebProfilerBundle”.\n
Did you forget a “use” statement for another namespace?
heroku run bashして、サーバに入ってrm -rf vendor/からのcomposer installでどうにかsymfonyコマンドは動作するようになりました。

 

参考

https://devcenter.heroku.com/articles/deploying-symfony4
https://github.com/heroku/heroku-buildpack-php/issues/278#

 

SpotifyAPIでクイックプレイリスト作成ツールを作ってみた

 

お久しぶりです。長いことサボってました…😓
ちょっと怠けてる今日この頃です、、
残りの2019年気を引き締めて頑張ります🙌

 

サボってる間、何をしていたかというと、ただただライブに行きまくってました。
ライブのはしごとかもしちゃってました!疲れましたけど、幸せでした😇

行くライブは対バンが多かったので、ライブ前の予習にプレイリストを作ってました。(ライブ後に作ることもありますが)
わたしは横着なので、そのプレイリストを作ることさえ面倒でした。
そこで、アーティスト名を入力するだけで、Spotifyプレイリストを作成してくれるツールを作りましたー!✨

https://dj-kin29.herokuapp.com/

 

ぜひ対バンや小さめのフェス前に、全出演アーティストを入力してサクっとプレイリスト作って楽しんじゃってください✊!!

 

使い方

  1. https://dj-kin29.herokuapp.com/にアクセスし、各項目の入力をする。
    • アーティスト名 ( 必須 ) [5個まで入力可]
    • プレイリスト名 ( 任意 ) [default: dj-kin29-日時]
    • cookie使用の許可 ( 必須 )

  2. (初回のみ)Spotifyログインをし、アクセス許可を同意する。
  3. プレイリスト(非公開)が作成されます!!!
    リンクより、プレイリストに飛ぶことができます。

 

※ アーティスト名検索は、ヒットした一番上のものとするので意図しないアーティストでプレイリストが作成されることがありますので、ご注意ください ⚠️

 

余談ですが、ここで入力したアーティストは、今私がはまっているアーティストさん達です☺️
ぜひ聞いてみてください🎧⚡️

 

使ったもの

参考

 

SpotifyAPIの使い方や、実装内容はまた別記事で書きたいと思います!

 

Herokuのアドオン「Heroku Postgres」を使ってみる

 

どうも!
大好きな宮崎を旅立ちまして、名古屋市民になりました。
4日間荷物が来なかったので、
床に毛布一枚でねるという生活で腰が痛かったです。
荷物がきた時は嬉しくて、
4時間以内にすべてダンボールを開封し部屋完成させました。

Heroku好きなんですが、DB使えるの知らなかったです。
!! アドオンでPostgreSQLを使えるのです !!(無料枠あり)

使い方

1.Heroku Postgresの導入・データベースの作成

– コマンドより

$ cd [APP_NAME]
$ heroku addons:create heroku-postgresql:hobby-dev
Creating heroku-postgresql:hobby-dev on ⬢ [APP_NAME]... ⣾
Creating heroku-postgresql:hobby-dev on ⬢ [APP_NAME]... free
Database has been created and is available
 ! This database is empty. If upgrading, you can transfer
 ! data from another database with pg:copy
Created [DATABASE_NAME] as HEROKU_POSTGRESQL_GRAY_URL
Use heroku addons:docs heroku-postgresql to view documentation

データベースが作成されます。
[DATABASE_NAME]の部分に具体的なデータベース名が入ります。

$ heroku pg:info
(node:6031) [DEP0066] ...
=== DATABASE_URL
Plan:                  Hobby-dev
Status:                Available
Connections:           0/20
PG Version:            11.3
Created:               2019-06-19 01:54 UTC
Data Size:             8.1 MB
Tables:                3
Rows:                  1/10000 (In compliance)
Fork/Follow:           Unsupported
Rollback:              Unsupported
Continuous Protection: Off
Add-on:                [DATABASE_NAME]

 

– Herokuダッシュボードより
Herokuダッシュボード > Heroku Postgresを導入したいAPPを選択後、
Resorce  > Add-ons に遷移する。
「Heroku Postgres」を検索し、プランを選んでをProvisionする
今回はフリープランの、「Hobby Dev – Free」を選びました。

データベースが作成されます。
[DATABASE_NAME]の部分に具体的なデータベース名が入ります。

 

2.データベース操作

– コマンドより
※ローカルPCより、HerokuPostgresに接続して直接SQL操作をしたい場合、
ローカルPCにpsqlコマンドが導入されていないとできませんので以下を参考に導入してください。
参考:https://qiita.com/ucan-lab/items/fb74af3d78e71407db7b

$ heroku pg:psql [DATABASE_NAME]  //データベースに接続
(node:6110) [DEP0066] DeprecationWarning: OutgoingMessage.prototype._headers is deprecated
--> Connecting to [DATABASE_NAME]
psql (11.3)
SSL connection (protocol: TLSv1.2, cipher: ECDHE-RSA-AES256-GCM-SHA384, bits: 256, compression: off)
Type "help" for help.



-- テーブル作成
[APP_NAME]::DATABASE_URL=> CREATE TABLE member_tb (id serial PRIMARY KEY,user_id TEXT NOT NULL,display_name TEXT NOT NULL);
CREATE TABLE

[APP_NAME]::DATABASE_URL=> SELECT * FROM member_tb;
 id | user_id | display_name
----+---------+--------------
(0 rows)



-- レコード挿入
[APP_NAME]::DATABASE_URL=> INSERT INTO member_tb(user_id, display_name) VALUES ('abc123', 'taro');
INSERT 0 1

[APP_NAME]::DATABASE_URL=> SELECT * FROM member_tb;
 id | user_id | display_name
----+---------+--------------
  1 | abc123  | taro
(1 row)

 

– Herokuダッシュボードより
Datestoresにてデータベースを選択後、
Dataclips > Create a new dataclip

ここでは、読み込み(SELECT)のみ実行可能。
書き込み(CREATE TABLEやINSERT)はできませんでした・・・。

 

 

3.アプリとデータベースの接続例

データベースが作成されると自動で、
Setting > Config Varsに「DATABASE_URL」が追加されます。
これをgetenvで使用します!
※データベースが複数存在する場合、「HEROKU_POSTGRESQL_GRAY_URL」「HEROKU_POSTGRESQL_MAROON_URL」のように追加されます。

PHP Data Objects (PDO) 拡張モジュールを使いました。

<?php

$url = parse_url(getenv('DATABASE_URL'));
$dsn = sprintf('pgsql:host=%s;dbname=%s', $url['host'], substr($url['path'], 1));
$pdo = new PDO($dsn, $url['user'], $url['pass']);


$stmt = $pdo->prepare("SELECT * FROM member_tb WHERE id = ?");
$stmt->execute([$id]);
$result = $stmt->fetch();

 

参考:

http://neos21.hatenablog.com/entry/2018/12/06/080000
https://qiita.com/ucan-lab/items/fb74af3d78e71407db7b

まとめ

無料枠あるのすごいありがたいです^^
これでいっぱいアプリ作れますね。
わたしはHerokuPostgresを使ってLINEBOT作成中です。
近々、BOTの記事投稿できるように頑張りまーす!

slackコマンドを作ってみた!

どうも、今週は#Webナイト宮崎でLTしてきました!
そのLTの内容を書きます!

にしても、connpassのプロフィールにLTする人の一覧がありますが、
自分のアイコン画像(Facebookの)が高校の時の写真なので
そろそろ変えないとですね

 

本題に入ります!

今回は、heroku(+SendGrid) +  PHP + slack
でslackコマンドを作ってみました。
ソースはこちら→[kin29/slack_command]

 

こんなslackコマンド

slackの投稿エリアにて、

/(設定したcommand) [メール件名]|[メール内容]

と入力し、エンターを押すと、

1. herokuサーバにキックされる。
2. herokuのadd-onであるSendGridから、メールを送信する。
送信先:WordPressメール投稿機能(プラグインPostie)で設定されたメールアドレス
2′. WordPress(ブログ)に記事が下書きの状態で投稿される。
3.メール送信結果を、slackに投稿する、

 

使ったもの

– Slack

– heroku
今回はPHP 7.2.12を使用しました。

– SendGrid…メール機能が使えるherokuのadd-onです。
freeプランがあり、最大12,000通/月送信することができます。
※herokuはデフォルトでメール機能が使えません。

 

作った理由

私はブログを週1は更新する!という目標があります。
そこで、ブログ(kin29.info)のネタを
忘れないうちに、サクッと貯めておきたかったので作りました。

slackで技術的なお話をしてる時や、
レビューの返しなどをもらった時に
「これ使える!」ってネタが思くので、
その時に使いどきかなって思います!

 

作り方

ソースはこちら→[kin29/slack_command]

 

1.heroku経由でSendGridを導入する。

  • herokuダッシュボードよりCreate new appを押下し、
    プロジェクトを作成します。
    プロジェクト名がサブドメインになります。
    イメージ:https://[プロジェクト名].herokuapp.com/
  • herokuダッシュボード > Resources > Add-onsにて、
    「SendGrid」を検索し導入する。
    Starter – Free(送信通数上限12,000通/月)を選択し、
    Provisionを選択。
  • SendGridダッシュボード > 左ナビのSettings > API Keys より
    「Create API Key」を押下する。
    ※API Keyはコピーしておく。

 

2.slack app を新規作成する。

https://api.slack.com/apps より、Create New Appを押下する。

  1. AppName と 導入するSlack Workspaceを選択する。
    ※Verification Tokenをコピーしておく。
  2. Slash Commands の設定
    – Command :設定したいslack コマンド
    – Request URL :commandが投稿された時に実行されるURL
  3. Install Appより、「Install App to Workspace」を押下する。
    → Incoming Webhookが設定されます。
    メール送信結果を投稿するslackチャンネルを選択し、
    投稿をAuthorize(許可)する。
    ※Webhook URL をコピーしておく。

 

3.heroku でデプロイ

  1. コードを書く → [kin29/slack_command]
  2. herokuダッシュボード > Setting > Config Varsより
    環境変数を設定する。
  3. herokuダッシュボード > Deploy よりデプロイする。
    Heroku Git(Githubでもできます。)
    $ git push heroku master  //これでデプロイされます。
  4.  

    4.Postie(WordPressプラグイン)を導入し、メール投稿設定をする

    Postieは、WordPressのプラグインです。
    これにより、メール投稿を使って
    Wordpressに記事を投稿することができます。

    参考:http://nb-style.info/?p=3072

     

    !!完成!!

     

    最後に

    もっともっとslackコマンドつくって、
    作業時短化や自動化していきたいです!