読者です 読者をやめる 読者になる 読者になる

元エンジニア・ちゃんみどの素人テックブログ

Web系無職がエンジニアに返り咲くための限りなく素人に近いテックブログ。 夢は旦那さんとslackで生活すること。

花嫁修業という名のslackbot作り。Herokuでデプロイ後編。

Git heroku hubot slack プログラミング 花嫁修業

前回、デプロイ途中でエラーになったからslackにhubotの設定をしました。

chanmid0.hatenablog.jp

今回はこの設定もろもろと、デプロイ行います。

slackからもらったTOKENをHerokuに設定

その前に、redisっていうメモリ上で動くDBが必要らしいから落とします。

https://redis.io/

heroku addons:create redistogo:nano

エラー…連日のエラーでブロークンハート気味です。

先にhubotのTOKENセットしようかな!と思ってやってみるも。

同じエラー!「Could’t find that app.」アプリが見つからんと。

そういえば、前にheroku createしたときに、間違えて一回このままコマンド打っちゃって、

テキトーなURLでApp作られちゃってた。

だから、そのURLを読みにいくと、今あるAppを見つけられてないんじゃないかなと。

heroku git:remote -a [App名]

お、セットされたっぽいな。もう一回redisのコマンド!

違うエラーだけど進みました!

今度は、クレジットカード登録してねって…え?

んーちょっと抵抗あるなーいったん諦めようかなー

じゃあTOKENの設定をもう一回。

成功!heroku apps:infoでAppの情報みてみましょう。

こんなかんじ。

デプロイしませう!

昨日失敗しちゃったけど、再度デプロイ挑戦。

git push heroku master

昨日と同じね。ぐぐったらいくつか困ってる人のブログが出てきました。

heroku auth:token と入力して、続けて表示された文字列をコピーします。 http://qiita.com/mobilebiz/items/f333772622ac28d58e95 自分のアカウントに紐づくAPI_KEYをパスワードに入力せろやということらしい。Windowsだけ特殊なので困る。http://bontyun.tumblr.com/post/119017992381/windows-herokuにpushする

コマンド入れると、Gitの認証が出て来るんだけど、

普通にGitのアカウント情報入れてもダメだった。

そこで、パスワードをherokuのTOKEN出して入れてあげると進んだ。

コングラッチェ!Warning出てるけど終わったみたい。

Herokuのアクティビティでも成功しているかどうか見れます。

ビルドできた!さっそくhubotに話しかけてみる。

ただの屍のようだ…

そもそもローカルで動いてないがな。

次やること

デプロイまでは出来たので、動くようにしたいと思います。

 

花嫁修業という名のslackbot作り。Herokuでデプロイ前編。

Git heroku slack プログラミング 花嫁修業

前回、Herokuを導入してGitにコミットするとこまでいきました。

chanmid0.hatenablog.jp

今日は、Herokuへデプロイして動かしてみたいな!

その前に。コマンドプロンプトだっせーから代替を探した

「お前のコマンドプロンプトだっせー!」

…ってかんじだったから代替を探したんだけど、

PowerShellっていうの、PC探したら入ってたから立ち上げた。

ネイビーのおしゃれさん。でもエラーが出るとおどろおどろしく教えてくれます。

Herokuにデプロイしよう!前準備

こちら参考にさせていただきました。

qiita.com

さっそくheroku create [hubotのappの名前]で、ッターン!!

そうするとエラー。「Name is already taken

もしかして、Herokuでユニークなのかな?そしたら絶対取れないだろー。

こうして自分のアカウントとかで作れば通りました。

URL見る限りHeroku全体でユニークでした

HerokuのDashboardに行くと、さっき作った名前で何かが出来ました。

クリックすると

こんなかんじ。ちゃんとAppが作れてるみたいです。

GitとHerokuの連携

GitとHerokuの準備が出来たので、2つを連携します。

連携させるためのアダプターをインストールします。

npm install hubot-slack –save

またバーっとインスールしたものを吐き出していって、

node_modulesの「@slack」フォルダを見るとこんなかんじでした。

で、ついにデプロイのとき!呪文はgit push heroku master

一発でそんなうまくいかないよね!!エラー見ていこう。

上のパスは、GitExtensionsってある。昔入れてたやつで今は使ってない。

あれ?じゃあGitが読みにいってる場所が違うのかな?

と思ってキャッシュを消すコマンド。git -rm -r –cached

これは不発。次に使ってない「.gitignore」ファイルを全部消す。

(何故かPC内に点在してた…)

そしたらちょっとエラーが変わる。

後半同じエラーか。うまくいかないから、先にslackの設定をいじることにする。

slackに連携するための設定

hubotをslackで使うよ!っていう設定をしました。

https://アカウント名.slack.com/apps」でこの画面へ。

hubotを検索して、出てきたものをクリック。

installします。

※「sackbot」になっちゃってたからあとで直しました。笑

ユーザー名を聞かれて一回自分のアカウント名入れたら、

「もうあるんだけど…」って言われた。よくみたらhubotのユーザー名だってよ。てへ!

ちょっとかわいくこんなかんじで設定。

ちなみに小文字しか使えないから注意です。

そうするとslackbotが話しかけてきた。

あんだって?翻訳してみた。

今すぐあなたのチームの誰もが新しいメンバーを招待することができます。 必要に応じて、管理者だけに制限することができます。

それいま言う必要あるの?!?!まあいいや。ありがとう。

それはさておき、ユーザーネームが通ったhubot連携のほうは、

トークンとか、他にもアイコン・名前とか設定できる設定画面になりました。

こんなかんじ。おっけ!

次やること

エラー無視して次のことやっててデプロイまで行けなかったな~

なんやかんやこの記事、半日かかって書いてます。笑

Herokuでデプロイしてみる

Gitと連携

Gitのアカウント取る

node.jsをインストール

Yaemanのことをもっと知る

hubot入れる

花嫁修業という名のslackbot作り。Heroku導入・Gitへcommit編。

Git heroku slack プログラミング 花嫁修業

前回、ローカルにhubotを入れました。

chanmid0.hatenablog.jp

その次は、Gitとの連携いろいろ!

herokuを使ってGitからデプロイできるように

devcenter.heroku.com

herokuは、デプロイ(Webへの展開)が超簡単に出来るプラットフォーム。

(引用:http://qiita.com/opengl-8080/items/9dc9243c4e68cd0674f8

Gitにコミットしたものを、GitからHerokuにプッシュすると、

展開してくれて、Web上で動くようになる、ってしくみ。

どうでもいいけど…デプロイはSIer時代によく聞いた…

デプロイ中だからテストちょっと待って!みたいな。

 

それはさておき、さっそく入れましょう。

公式からインストーラーを落とします。開くとこちら。

とりあえずチェック入ってるのをインストール!次。

場所はデフォで。

インストールしてたらGitのインストーラーも。この通りインストール

このあといろいろ聞かれたけど、全部デフォで進みました。

そうこうしてるうちにHerokuもFinishしました。

コマンドプロンプトherokuって打ったらちゃんと出てきました。

よしよし。

次にアカウント取得してログイン。こんな画面です。

node.jsを選びます。

スタートします。

プルダウンをWindowsにします。

下にいくとインストールがあーだこーだいうボタンがあったので押します。

サンプルアプリを用意しろとのこと。前回作ったhubotのアレを使いたい。

また一番下のボタンを押すとこちら。

デプロイの話か。と思ったところで気付いた。

…あれ?なんかこれ話聞いてるだけ感はんぱない…

ボタンさっさと進められそうだから全部進めちゃった。

なので、コマンドでGitをあれこれHerokuをあれこれちゃうぜ!!

Gitにコミット。でもエラー??

不便だったから「c:users>slackbot」に階層変更。

git initリポジトリ作成コマンド。フォルダに「.git」ファイルが出来るけど、

上から2番目の通り、fatalエラーでパーミッションエラーです…

上から3番目もパーミッションエラーあれあれ。

そもそもフォルダ内に「.git」がすでに出来てた。なんでかはわからん。

でも、できてるってことはinitしなくていいのかな?

addしてみる。またパーミッションエラー!!

そこで、「slackbot」フォルダの権限を見直す。

こんなかんじで。

今度は無言で先に行きましたね!!何をしたのかな!!

次はコミット。したら…

エラーどーん!!warningだらけです。「LF will be replaced by CRLF in .editorconfig.

だって。

よくわかんないけど、もっかい同じコマンド叩いてみた。

あ、なんやかんやコミット出来てかんじかな?ならいいや。

pushするとGitの認証が出て来るから入れる。

終わった!エラーもなし、100%と出ている。どれどれ。

GitHubに行くと、ばっちりファイルが入りました!わーい!

次やること

次はHerokuでデプロイしたいな!

Herokuでデプロイしてみる

Gitと連携

Gitのアカウント取る

node.jsをインストール

Yaemanのことをもっと知る

hubot入れる

 

花嫁修業という名のslackbot作り。hubot入れるyo編。

hubot node.js slack プログラミング 花嫁修業

前回はnode.jsを入れました。

chanmid0.hatenablog.jp

node.js、jsと同じ書き方でいいのかしら?

とりあえずその辺すっ飛ばして。hubot入れますよ!!

qiita.com

こちら参考にしました!

hubotってなんぞ?

HUBOT

GitHub社が開発しMITライセンスで公開しているNode.jsでbotを作り動かすためのフレームワークです。http://gihyo.jp/dev/serial/01/hubot/0001?ard=1487128734

なるなる!概要はOK!その構造はどうなっているのさ?

  • Robot…核になるところ。スクリプトを動かしたり、入力されたメッセージを受け取ったり。
  • Script…ライブラリみないなものでしょうか?
  • Adapter…Robot、Script間の入出力?

こうなるそうな。(ちょっとわかんないとこもありましたが)

hubot入れるにはnpmっていうのが必要らしい

hubotの公式言ったらこんなこと書いてあったよ。

You will need node.js and npm. (https://hubot.github.com/docs/

OMG!!npm!!

またわからない言葉出てきた!頑張って調べよう!

npm とは Node Package Manager の略で Node で 作られたパッケージモジュールを管理するためのツールです. 基本 Node.js をインストールすれば一緒にインストールされます. ターミナル or コマンドプロンプト$npm -v を実行するとバージョンが表示されるのが分かるかと思います. (http://phiary.me/node-js-package-manager-npm-usage/

お!じゃあもう入ってるってことかな?!

いらっしゃらない…

どうしよう。

でも、普通のコマンドプロンプトでは動くっぽい

あー!!なんでじゃー!!!謎だー!!!

そもそも、最初のnode.jsってソフトで昨日は出来てたよね?!

PC電源落としたらできなくなってもうた…

ま、でもnpmあるのはわかったし、とりあえずコマンドプロンプトでやるか。

 

いざhubot導入!!

HUBOT

公式を参考にコマンド叩いてくよー!

% npm install -g yo generator-hubot

インストールが始まる!

いろいろ文字が動いてるんだけど、最後いろんなものを吐き出して終わった。

% mkdir myhubot % cd myhubot % yo hubot

で、mkdirで「slackbot」っていうディレクトリを作って、

cdでさっき作ったディレクトリに移動して、

yoで…yo?yoコマンド?な、なにするんだyo?!

イエスかノーか迫られたからイエスと言うマン。

あら!こんにちは!

ここから質問攻めよ。あはん。

待ってると、どうやら終わったぽい。

いろいろ吐き出して静まった。

作ったディレクトリを見てみると…

いろいろ作られたー!やったー!!

次やること

Yeomanってyoしたらもう入ったのか?よくわかんない!

次は、Gitと連携したりその辺かな! Gitと連携

Gitのアカウント取る

node.jsをインストール

Yaemanのことをもっと知る

hubot入れる

花嫁修業という名のslackbot作り。node.jsをインストール編。

node.js slack 花嫁修業

前回の記事でGit入れたので、次はnode.jsをインストールしますよっと!

chanmid0.hatenablog.jp

node.jsとは?

Node.js

…ということです。

つまり?jsなんだけどフロント以外のことも軽々やっちゃうよ~?ってことかな?

ひとまずこれインストールするか

Nextで進めていきます。

インストールなう。

終わりました!Finish!

終わると、Node.jsというアイコンが出来る。そのまんまやん!

「Node.js コマンドプロンプト」っつーのも出来るけどそれはおいとく。

Node.jsを開くとコマンドプロンプトが出て来る。

これを参考にコンソールにいつものあれを出す。

blog.codecamp.jp

jsみたいな書き方で、とりあえずいつもの、ください!!

出たね!undefineとか言われちゃってるけど出たね!

というわけで、ローカルにnode.js入った!

次にやること

次は、この記事を参考にhubotのことを知りたい。

qiita.com

もうちょっと進めたかったけど、PCの電源が切れそうだからまた明日!笑

次やること

Gitのアカウント取る

node.jsをインストール

Yaemanのことをもっと知る

hubot入れる

あれ、Yaemanってどこで出て来る?

 

ココナラでSNSアイコン作ってもらった話

coconala リモートワーク 仕事のこと

 

今日はプログラミングから離れた話をさせてくれ。

SNSアイコン迷子だったちゃんみどを救ってくれたココナラ

ブログとかSNSとかやろうと思ったとき、

あ、SNSアイコンどうしよ…」ってまず考えません?

いろんなアカウント持ってるから、もうネタ切れなんですよ。

それに、自分らしいアイコンってなくって。自撮りを載せる勇気もないですし。

そこでふと思いついた。「そや、誰かに書いてもらおう」と…

リアルに頼める人はいないから、ネットで探そうと思って、

たどり着いたのはココナラでした。

クラウドワークスとはちょっと違う、出品ベースのサービス

ココナラって、出品ベースなのがおもしろい。

「こんなことやります!出来ます!」っていうことをカテゴライズして、

サービスにしてるから、依頼者から仕事を頼みたい人を探しに行ける

で、わたしは要望がピンポイントすぎたのでリクエストボードにいって依頼してきた。

[blogcard url=“https://coconala.com/requests”]

リクエストボードはその名の通り、

「こういうの作ってくれる人募集!」っていうのを書けるところ。

さっそく依頼してみたら、1時間もしないで一人のイラストレーターさんから提案が。

ちょっぱやで1000円で作ってくれました

提案をもらったイラストレーターさん、

提案時には、もう既にラフを書いてくれていて、

依頼前専用の窓口からさっそく見せてくれました。

このとき、依頼から1時間も経ってなかったと思います。

見た瞬間そっこー気に入って、早速色づけしてもらい、

依頼から3時間も経たず購入完了SNSのアイコンにセットしました!

軽い修正込で、料金は1000円でした。お手頃です!

データにお金を払う感覚、最初は不思議だけど価値あり。

なんとなく、ホントになんとなく、データにお金を払うって抵抗あったんです。

Amazonみたいに、モノが届くわけじゃないし、無料でなんでも使えちゃうし。

でも、自分の生活に密接してるものってネットの中・データの中のものの割合が、

ものっそいでかい。だったらそこに金掛けるの全然ありじゃん!

って思ったんです。

 

今回使ってみてよかったから、わたしもなんか出品してみよーと思って、

軽いノリでこれを出しました。

coconala.com

500円。購入すると3日間質問し放題にしました!

就活生とかに役立つかな~と思って。早速一人買ってくれたから嬉しい。

 

ココナラおもしろい!

他にも、SEOとかプログラミングとか教えてくれるカテゴリもあるみたい。

個人的には、SEOのこともっと知りたいから近いうち使ってみたいな~

花嫁修業という名のslackbot作り。Gitのアカウント取って学ぶ編。

Git slack 花嫁修業

前回の記事で、slackの作り方を学んでいたけど、

わからないことが点在してたから、ひとつひとつ解決していこうと思います。

chanmid0.hatenablog.jp

Gitのアカウントを取る

リポジトリに、slackbot用のを早々に作りました。

 

そもそも、エンジニア時代のバージョン管理って、

ほとんど亀のあれ(名前忘れた)だったから、Git使ったことほぼなかったっていう。

一回、ナウい開発環境がお好きな客先のプロジェクトに入ったときに、

ちょっといじったくらい。言われるがままやってたからほぼ覚えてません。

バージョン管理のしくみはわかってるけど、GitとSVNどう違うの?ってところから、

学び直そう。うんそうしよう。

GitとSVN、比較してどう違う?何がメリット?

ナウでヤングなGitさん。

Googleさんに「Git SVN 違い」と聞いてみましたよっと。

qiita.com

一番上のわかりやすいQiitaを参考にしました。

まずひとつ「ローカルコミット出来る」これはいい!!

そっか、確かにローカルで作ってるものときに差分の確認が出来ると、

間違いを探しやすいです。

あと「ブランチが切りやすい」これも開発規模が大きくなったときよいですな。

そうそう、一回Git使ったときは、レビューとマージ作業がすっごい楽だった。

どっか有名なツールと連携してて、視覚的に作業出来るからゆとりエンジニア歓喜でした。

 

ちょっと話はずれるけど、開発ディレクターだったとき、

開発ディレクターといっても制作部の中間管理職もやってたとき、

デザイナーさんにGitのバージョン管理勧めたんですよね。

でも、やっぱエンジニア向けのものだから抵抗あったみたいで流されました

バージョン管理って、エンジニアだけのものじゃなくて、

デザイン、文書、他にもいろんなことに使えますよね。

うん、なんとなくいいことはわかった

こうなったら、実際触ってみないとどうしようもないよね!

ということで、次はGitにさわってみたい。

もし調子良ければ、node.jsも入れてみながら。

 

やることリストはこうなりまった。

Gitのアカウント取る

node.jsをインストール

Yaemanのことをもっと知る