2014-11-23

hubot×hipchatでJenkinsのジョブを実行する

前回の続き

hubot×hipchatでChatOps的なアレ - 恥知らずのウェブエンジニア

今回はチャットからjenkinsのジョブを実行して、
結果をチャット上に出力するようにします。

まずはチャットからjenkinsのジョブを実行できるようにします。

チャットからjenkinsのジョブを実行する

どうやらデフォルトでjobを実行するscriptがあるようなのでそれを利用させてもらいます。

jenkins.coffee を有効にする
環境設定設定

jenkins.coffee を有効にする

hubot-scripts.jsonにjenkins.coffeeを追記

cd BOT_DIR
vi hubot-scripts.json


[
  "jenkins.coffee"
]

こうすることで、
node_modules/hubot-scripts/src/scripts/jenkins.coffee
が有効になるようです。
src/scripts以下に他にもscriptがあるのでいろいろできそうです。
Hubot Script Catalog

環境変数設定

指定された環境変数を設定します。
起動script内に記述してもいいかも。

export HUBOT_JENKINS_URL="http://jenkins.hoge/"
export HUBOT_JENKINS_AUTH="username:password"

これだけでおkです！
さっそくhipchatからジョブを実行してみます。
コマンドは下記になります。

hubot jenkins list => ジョブリスト出力
hubot jenkins b <jobNumber> => ジョブ実行
hubot jenkins build <job> => ジョブ実行
hubot jenkins describe <job>  => ジョブ情報出力
hubot jenkins last <job>  => 最後のジョブ結果出力

f:id:ogataka50:20141123214600p:plain

よさげです。
でもこれだとジョブの結果がわからないので、
次はジョブ結果もチャットに出力するようにします。

ジョブ結果をチャットに出力する

こちらはhubotではなく、jenkinsから直接hipchatに通知を送るようにします。

流れは下記です。

[jenkins]hipchatプラグインをインストール
[hipchat]APIトークン生成
[jenkins]通知を送るように設定

[jenkins]hipchatプラグインをインストール

jenkins側でプラグインをインストールします。
jenkinsの管理 => プラグインの管理
からHipChat Pluginをインストールします。

[hipchat]APIトークン生成

次hipchat側でjenkinsがアクセスするためのトークンを生成します。
hipchatのページでGroup Admin => API => Create new token
でトークンを生成します。

f:id:ogataka50:20141123222706p:plain

[jenkins]通知を送るように設定

次はjenkins側で通知を送るように設定します。
jenkinsの管理 => システムの設定 => Global HipChat Notifier Settings
で先ほどのトークンと等を設定します。

また通知を送りたいジョブを個別で設定します。
ジョブの設定 => HipChat Notifications
で通知を送るroomとStart Notificationにチェックを入れます。
また、ビルド後の処理の追加から「HipChat Notifications」を追加します。

これで設定は完了です。

さっそくhipchatからジョブを実行してみます。

f:id:ogataka50:20141123223629p:plain

出力内容は要調整ですが、一旦できたっぽいです！
ちょっとずつChatOps感出てきました！

感謝致します。

f:id:ogataka50:20141017160631j:plain

2014-11-23

Raspberry PiでLED点灯させてみる

raspberry pi

なんかアレなのでこちらの商品買ってみました。

<a href="http://www.amazon.co.jp/gp/product/B00G86DOP8?">Amazon.co.jp：ハックラズベリーパイ Raspberry Pi 電子工作入門キット。: パソコン・周辺機器</a>
Amazon.co.jp：ハックラズベリーパイ Raspberry Pi 電子工作入門キット。: パソコン・周辺機器

さっそくLEDを点灯させてみました。

同封されていた説明所にある通り下記のサイトを参考に進めてみました。

<a href="http://lchikaamazon.hatenablog.com/entry/2013/11/18/171637">Raspberry PiでLED点灯（Lチカ）してみよう。 - Raspberry Pi 電子工作</a>
Raspberry PiでLED点灯（Lチカ）してみよう。 - Raspberry Pi 電子工作

手順通りやったらLEDぴかぴかできました。

その際のちょっとメモ。

抵抗をちゃんと計算しないとLEDが割れる＞＜
GPIOはここを参考に

The Pi4J Project - Control Example

進める毎に更新していくやーつ

感謝致します。
f:id:ogataka50:20141123151535j:plain

2014-11-19

hubot×hipchatでChatOps的なアレ

chatops hipchat hubot

最近よく聞くChatOps

chatのbotを利用して色々なオペレーションを自動化するワークフローで、
githubがやりはじめたってやつです

chatopsとはなんぞや的なことは下記を一読

ChatOps at GitHub // Speaker Deck

ちょっと思うとこがありやってみました。

hhubot側の設定

hubotインストール

まずはインストール。
node,redisが必要なのでない場合はインストールしてください。
以前はhubotをnpmでインストールしたような気がするのですが、
現在は下記でインストールできるようです。
hubot/docs at master · github/hubot · GitHub

npm install -g yo generator-hubot

nodeのバージョンが低いとインストールできませんでした。
自分はv0.10.26にすることでインストールできました。

bot作成、起動、確認

さっそくbotを作成と起動。
redisも起動しておいてください。

mkdir myhubot
cd myhubot
yo hubot

./bin/hubot

Hubot> hubot ping
Hubot> PONG
Hubot> hubot pug me
Hubot> http://27.media.tumblr.com/tumblr_lsvlcmTElk1r1z2mqo1_500.jpg

起動後,pingなど打つとbotから返答があります。
これで一旦hubot側の設定はできました。

hipchat側の設定

次はhipchatの内容をhubotが受け取れるようにしていきます。

hipchatアカウント作成

なにはともあれhipchatのアカウントをつくりましよう。
自分とbot用のアカウントを作成します。
プライベートグループチャットと IM サービス | Atlassian HipChat (アトラシアンヒップチャット)

Jabber ID取得

上でつくったbotが反応できるようにするにはJabber IDなるものが必要だそうです。
下記からメモります。
https://username.hipchat.com/account/xmpp

hipchatアダプターインストール

hipchatの内容を受け取れるようにアダプターをインストール

npm install hubot-hipchat --save

hipchat用環境変数設定

下記のようにhipchat用の環境変数の設定が必要ありだそうです。

export HUBOT_HIPCHAT_JID="hogehoge@chat.hipchat.com"
export HUBOT_HIPCHAT_PASSWORD="xxxxxxxxxx"

アダプタ設定してのhipchat起動

aでアダプタ設定するとのこと

cd ~/test_bot
bin/hubot -a hipchat

問題なければhipchatからpingやってみます。
f:id:ogataka50:20141119004641p:plain

イケマシタ。

ついでに新しいscript作ってみます。
対象のbotディレクトリのscriptの下に作成します。

cd myhubot
vi scripts/hello.coffee

module.exports = (robot) ->
    robot.hear /hello/i, (msg) ->
    msg.send 'hello!!!'

coffeescriptで書きます。
botがhelloという文言を受け取るとhello!!!と返します。

作成したscriptを反映させるためには、botを再起動する必要があるみたいです。

f:id:ogataka50:20141119005355p:plain

robot.hearなので@をつけなくても反応します。

こんな感じでscriptを作成していって、自動化してけばよさそうです。

感謝致します。

f:id:ogataka50:20141119005613j:plain

2014-11-16

Raspberry Piにssh接続できなくなった君へ

raspberry pi

君は今、困っているだろうか。

その困りごとはRaspberry Piにssh接続できなくなったことだろうか。

もしそうであるなら、君は私の友人であり、兄妹になる。
もしそうであるなら、これはブログではなく、君への手紙になる。

私も同じくRaspberry Piにssh接続できなくなったのだから。

以前までなんの不自由もなく、sshできていて変更も何もしてなないのに突然接続できなくなったんだ。

物語は私が確認した順番にそって進めていく。
この物語は私の物語と同時に君の物語でもあるだろう。

先に結論を書こう。
明確な解決策はわからなかった。
ただ対処法がわかっただけだ。
重要なのは一歩を進めることだ。

話を進めよう。

いつだって問題はシンプルだ。
突然、Raspberry Piにsshできなくなった。

まず確認したのは、wifiが接続できるかだ。
というのも私の家のwifiは時々つながらないことがあるからだ。

だか他のPCからはネットにつながるし、ルーターも問題なさそうだ。

次に確認したのは、pingが通るかだ。

結果はこうだ。
mac => pi　通らない
pi => INTERNET　通る

どうやらpiの無線LANは有効になっていることはわかった。

次に確認したのは、ファイヤーウォールの設定だ。
というのも、セキュリティのためsshのポートをデフォルトから変更して、
他のポートを使用していたからだ。

ufw status

確認したが問題なしだ。

次に確認したのはログだ。
/var/log以下のログを確認すると、いくつかに[UFW BLOCK]の記述があった。

やはりファイヤーウォールがあやしい。
いっそのことファイヤーウォールを無効化してみる。

ufw disable

この状態でssh,pingをしてみるとただただtimeoutするだけだった。
ログも更新されない。

この辺りから暗礁に乗り上げた。

謎にmac,piを再起動などして何か起こらないか試してみたが、何も変化はなかった。
何度もifconfigを打ち、何度もipアドレスを確認した。

そして次に行ったのは、OS再インストールだ。
<a href="http://youngforever.hatenablog.com/entry/2014/08/13/235151">Raspberry PiにRaspbianをインストールん - 恥知らずのウェブエンジニア</a>
Raspberry PiにRaspbianをインストールん - 恥知らずのウェブエンジニア

前回行ったのと同じことをしてみた。

結果は変化なしだ。

この後様々試してみたが、あまり覚えていない。
私は頭に血が上り、完全にキレていた。

そして一度頭を冷やすために、たまっていた洗濯をすることにした。

そして洗濯物を洗濯機に入れる時に、ふとルーターの電源が目に入った。

ルーターの電源は埃がたまっていた。

なんとなく気になって、ルーターの電源を落としほこりを掃除した。

そして洗濯物を洗濯機に入れ、洗剤を多めに入れ（これは私の癖だ）洗濯機を回した。

その後、再度この問題に向き合った。

そしてsshコマンドを実行した。
そのときsshが通った。
何が起きたか最初はわからなかった。
しかしsshが通った。
pingも通った。

いつだって問題はシンプルだ。
それ以上に答えはシンプルだ。

ルーターの再起動
これが現状の答えだ。

明確な理由を見つけるためには、ネットワーク周りの勉強が必要だろう。
勉強すべきことがあるってことはいいことだよな。

明日やれることが増えたんだ。
面倒だけど、ないよりはマシだよな。

ようやく本当にやりたいことが進められそうだ。

もう一度書いておく。
ルーターの再起動
これが現状の答えだ。

あーあ、週末の半日無駄にしたー

感謝致します。
f:id:ogataka50:20141116122946j:plain

2014-11-09

jqueryセレクター、取得・変更、イベントまとめ

jquery javascript

業務では基本あまりフロント周りを触らないので、
管理画面とかでちょろっとフロント周りも書くときにいつも忘れちゃうのでまとめメモ。

セレクター

  //タグ
  $("div")
 //ID
  $("#targetId")
  //クラス
  $(".targetClass")

 //組み合わせ
  $("div .targetClass")
 //複数まとめて
  $("#targetId1, #targetId2")

値の取得、変更系

  //text取得、変更
  $("div").text()
  $("div").text('変更')
  //html取得、変更
  $("div").html()
  $("div").html(<p>変更</p>)

  //要素の取得、変更
  $("a").attr('href', 'http://google.co.jp')
  $("a").attr('href')

  //class追加、削除
  $("#targetId").addClass('Class')
  $("#targetId").removeClass('Class')

フォーム系

  //value取得,変更
  $("select").val()
  $("select").val('すた丼')
  $('input[name='postName']').val()  
  //値の変更時
  $("select").change(){}
  //submit実行
  $("select").submit(){}

  //チェックボックス選択中
  $(:checked)
  //セレクトボックス選択中
  $(:selected)

イベント系

  //クリック
  $("#targetId").click(){}
  //ダブルクリック
  $("#targetId").dbclick(){}
  //マウスup,down
  $("#targetId").mouseup(){}
  $("#targetId").mousedown(){}
  //マウスオーバー、アウト
  $("#targetId").mouseover(){}
  $("#targetId").mouseout(){}

ほかにも使うごとに追加していこう。

感謝致します。

f:id:ogataka50:20141103105147j:plain

2014-11-07

twitterとアプリ連携をして、ツイートとかする

twitterとアプリ連携をして、アプリ側からツイートさせるなどを実装したのでメモ。
今後も何かとやりそうでもあるので。

流れの概要は下記、

twitter側でアプリ作成
作成したアプリを連携させるページへ飛ばす
連携ページからのコールバックからアクセストークン取得
取得したアクセストークンでツイートとかとか

twitter側でアプリ作成

<a href="https://apps.twitter.com/">Twitter Application Management</a>
Twitter Application Management

こちらからアプリを作成します。
作成したアプリのConsumer Key等をメモります。
Consumer Key (API Key)
Consumer Secret (API Secret)

ツイートさせる時は、アクセスレベル等も変更しておきます。

作成したアプリを連携させるページへ飛ばす

ここからはコチラ側のアプリの実装。

下記からlibraryがいくつかあるので有難く使わせてもらいます。
Twitter Libraries | Twitter Developers

今回使用したのはコチラ。
<a href="https://github.com/abraham/twitteroauth">abraham/twitteroauth</a>
abraham/twitteroauth · GitHub
いい顔してます。

さっそくリクエストトークン、連携ページへのリンクの取得

require_once(twitteroauth/twitteroauth.php');

$consumer_key = 'xxxxxxxxxxx';
$consumer_secret = 'xxxxxxxxxxx';
$callback_url = 'http://hogehoge/callback';

$connection = new TwitterOAuth($consumer_key, $consumer_secret);
//リクエストトークン
$request_token = $connection->getRequestToken($callback_url);
//認証ページのURL
$auth_url = $connection->getAuthorizeURL($request_token);

連携ページからのコールバックからアクセストークン取得

ユーザが上記のページで連携承認すると、
設定したcallback_urlにリクエストがきます。
クエリストリングにoauth_verifierというものが付加されているので、
それを利用してアクセストークンを取得します。

//リクエストトークンはsession等に保存しておいたものを使う
$connection = new TwitterOAuth($consumer_key, $consumer_secret, $request_token['oauth_token'], $request_token['oauth_token_secret']);

//アクセストークン取得
$access_token	= $connection->getAccessToken($_GET['oauth_verifier']);

//暗号化とかした後にDB等に保存

取得したアクセストークンでツイートとかとか

ツイートさせてみる

$connection = new TwitterOAuth($consumer_key, $consumer_secret, $access_token['oauth_token'], $access_token['oauth_token_secret']);

$tweet_text = 'すた丼最強説';

$parameters = array('status' => $tweet_text);
$result = $connection->post('statuses/update', $parameters);

対象ユーザをフォローさせてみる

$connection = new TwitterOAuth($consumer_key, $consumer_secret, $access_token['oauth_token'], $access_token['oauth_token_secret']);

$target_screen_name = 'フォローさせたいユーザ名';
$parameters = array('screen_name' => $target_screen_name);
$result = $connection->post('friendships/create', $parameters);

その他

pinコードでの認証バージョン

コールバックからアクセストークンを取得する方法のほかに、
ユーザにpinコードを入力してもらいアクセストークンを取得する方法もあります。
違いは、
・リクエストトークンを取得するときの引数に'oob'を指定
・※tiwitterアプリ側のcallback_urlを空にする

上記を行うと認証したあとにpinコードが表示され、
それを元にアクセストークンを取得できます。

$access_token	= $connection->getAccessToken($_POST['pin_code']);

アクセストークンの有効期限

OAuth FAQ | Twitter Developers
基本的には有効期限はないようです。
が、ユーザがtwitter側からアプリ連携を削除などもできるので、

下記のようにユーザ情報が正常に取得できるかで有効かどうかをチェックしたほうがよさそうです。

$connection = new TwitterOAuth($consumer_key, $consumer_secret, $access_token['oauth_token'], $access_token['oauth_token_secret']);
$user_info	= $connection->get('account/verify_credentials');

感謝致します。

f:id:ogataka50:20141107183252j:plain

2014-10-12

FuelPHP,AdminLTE,Chart.jsで管理画面的なものを作る[1]雰囲気作り

php FuelPHP Chart.js AdminLTE

雰囲気作りといえば、これですね。

いろいろアレなことがあり、FuelPHP,AdminLTE,Chart.jsでサービスの管理画面的なものを作ろうと思います。
具体的にはもろもろの指標をグラフとかで表示する感じです。

今のとこのイメージは
・各指標でグラフで表示
・期間変更をajaxで反映
・グラフをマウスオーバーすれば、詳細な表示が見れる
・比較する指標、期間を重ねて表示
あたりを考えています。

まずは環境作りから。

FuelPHPインストール

インストール方法 - インストール - FuelPHP ドキュメント
ドキュメントにある通り、単純にclone

プロジェクトのディレクトリはadminでいこうと思います

$ cd PROJECT_DIR/admin
$ git clone git://github.com/fuel/fuel.git .
$ ./composer.phar update

Chart.js導入

<a href="https://github.com/nnnick/Chart.js">nnnick/Chart.js</a>
nnnick/Chart.js · GitHub
上記からDownload ZIPし、中に入っているChart.jsを先ほどのFuelPHPのpublicの下に置きます。
今回は下記のように置いてみました。

public/assets/js/lib/Chart.js

AdminLTE導入

<a href="http://www.moongift.jp/2014/03/adminlte-%E3%81%93%E3%81%93%E3%81%BE%E3%81%A7%E5%A4%9A%E3%81%91%E3%82%8C%E3%81%B0%E4%BD%95%E3%81%A7%E3%82%82%E3%81%A7%E3%81%8D%E3%81%9D%E3%81%86%E3%80%82%E5%A4%9A%E6%A9%9F%E8%83%BD%E3%81%AAbootstrap/">AdminLTE·ここまで多ければ何でもできそう。多機能なBootstrapベースの管理画面テンプレート</a>
AdminLTE·ここまで多ければ何でもできそう。多機能なBootstrapベースの管理画面テンプレート MOONGIFT
AdminLTEは管理画面向きのbootstrapになります。

こちらも下記からDownload ZIP。
<a href="https://github.com/almasaeed2010/AdminLTE">almasaeed2010/AdminLTE</a>
almasaeed2010/AdminLTE · GitHub

中に入っているcss,img.jsをそれぞれ下記のように設置しました。
とりあえずlibの下に。
imgはとりあえずimg直下にそのままコピー。必要あり次第変更で。

js

public/assets/js/lib/
├── AdminLTE
├── Chart.js
├── bootstrap-slider
├── bootstrap-wysihtml5
├── colorpicker
├── datatables
├── datepicker
├── daterangepicker
├── flot
├── iCheck
├── input-mask
├── ionslider
├── jqueryKnob
├── jvectormap
├── misc
├── morris
├── slimScroll
├── sparkline
└── timepicker

public/assets/js/lib/AdminLTE/
├── app.js
├── dashboard.js
└── demo.js

css

public/assets/css/lib/AdminLTE
├── AdminLTE.css
├── bootstrap-slider
├── bootstrap-wysihtml5
├── colorpicker
├── datatables
├── datepicker
├── daterangepicker
├── iCheck
├── images
├── ionslider
├── jvectormap
├── morris
└── timepicker

AdminLTEのサンプルを表示させてみる

ここまできたので、AdminLTEのサンプルページをFuelPHPで表示させてみます。

とりあえずfuel/app/classes/controller/admin.phpをつくり下記のように
fuel/app/views/admin/index.phpを表示するよう。

class Controller_Admin extends Controller
{
	public function action_index()
	{
		return Response::forge(View::forge('admin/index'));
	}
}

でfuel/app/views/admin/index.phpは、解凍したAdminLTEの直下にあるindex.htmlをコピーします。

合わせてcss,js,imgのパスを変更します。
css,js,imgは下記のようにassetクラスを使ったものに変更
Asset 使い方 - クラス - FuelPHP ドキュメント

<?php echo Asset::css('lib/AdminLTE/morris/morris.css'); ?>
<?php echo Asset::js('lib/morris/morris.min.js'); ?>
<?php echo Asset::img('avatar3.png', array('id' => 'logo', 'class' => 'img-circle', 'alt' => 'User Image')); ?>

こちらでひとまず、AdminLTEのサンプルページをFuelPHPで表示することができました。

次回は、実際にDBからデータ取得し、グラフ表示をしていきたいと思います。

感謝致します。
f:id:ogataka50:20141012180841j:plain

恥知らずのウェブエンジニア -web engineer, shameless

これは一歩を踏み出すことができない者たちのブログ

hubot×hipchatでJenkinsのジョブを実行する

チャットからjenkinsのジョブを実行する

jenkins.coffee を有効にする

環境変数設定

ジョブ結果をチャットに出力する

[jenkins]hipchatプラグインをインストール

[hipchat]APIトークン生成

[jenkins]通知を送るように設定

Raspberry PiでLED点灯させてみる

hubot×hipchatでChatOps的なアレ

hhubot側の設定

hubotインストール

bot作成、起動、確認

hipchat側の設定

hipchatアカウント作成

Jabber ID取得

hipchatアダプターインストール

hipchat用環境変数設定

アダプタ設定してのhipchat起動

Raspberry Piにssh接続できなくなった君へ

jqueryセレクター、取得・変更、イベントまとめ

セレクター

値の取得、変更系

フォーム系

イベント系

twitterとアプリ連携をして、ツイートとかする

twitter側でアプリ作成

作成したアプリを連携させるページへ飛ばす

連携ページからのコールバックからアクセストークン取得

取得したアクセストークンでツイートとかとか

その他

FuelPHP,AdminLTE,Chart.jsで管理画面的なものを作る[1]雰囲気作り

FuelPHPインストール

Chart.js導入

AdminLTE導入

js

css

AdminLTEのサンプルを表示させてみる