2017年1月30日月曜日

Zapier + RSS で Twitter のツイートを音声読み上げをやってみたけど微妙だった話




ということで、Slack ではないですが Twitter のツイート読み上げをやってみました。
(Slack でも outgoing webhook があるので Zapier で繋げられるはず)

が、結論を先に書くと
求めていたものとは違うものでした。

Twitter → RSS → 音声読み上げ
なぜこの構成にしようと思ったのか?
音声読み上げは PC 上でやっても良かったのですが、スマホで読み上げてくれたら XFD 的な感じで通知にも使えるしいいかなぁと思ったからです。
(あと、PC は作業用BGMとかかけてたりするとフロア全体には流せないですしね)


Zapier の設定
Zapier はサービスとサービスをつなげるハブサービスです。
以前書いた「ブログズミ: CIサービスの結果を Twitter に投稿する」に細かいことは書いてあるのでそちらも参考にしてください。

今回は Twitter → RSS の設定です。


まだトライアル版の期間内でしたので、フィルターも設定してみました。


ちなみに、無料プランだと 2 step までしかできないです。(うーん、ずるいなぁ。フィルター絶対欲しくなるもん…


これで設定は完了。

RSS Reader で読ませてみる
今回使ったアプリは WalkReader です。
こんな感じに読み上げてくれます。(ブログでは声出ませんけど…)



結果
本当に欲しかったのは、とあるトリガー(今回は Twitter のつぶやき)に対して
(ある程度)リアルタイムに反応して、自動でその内容を喋ってくれるもの」でした。
で、出来上がったのは
5分~15分の更新頻度で、手動でその内容を喋ってくれるもの」でした。
全然ダメでした…
(まぁ、サービス連携を覚えたので色々やってみたかったんです。ダメでしたけど…)


まず、RSS Reader 側は自動で読み上げてくれるようなものを作ったり、既にそのようなものがあったりすると思います。
なので、解決できなくもないのですが、
Zaiper の更新頻度が有料プランでも "5分" であること、今回選択した RSS では受け側も常にポーリングしている必要があることなど、ちょっと下調べ不足でした。

つづく・・・
読み上げは個人的にやってきたいことの1つでもあるので、今後もいろいろ試していこうと思います。

では。

2017年1月23日月曜日

[Jenkins] オフライン理由にリンクを貼れなくなって困っている

いつ頃からかわからないのですが、Jenkins のスレーブをオフラインにするときの理由にリンクを貼っても、テキストとして表示されるようになってしまってました。
この前の第7回大阪Jenkins勉強会で川口さんに直接聞いてみたら、OWASP Markup Formatter Plugin 入れたら出るはずと教えてもらったのですが、オフライン理由のところはやっぱりダメでした。
実は、OWASP ってデフォルトで入っていたような気がしていて、私の環境でも既にインストール済みでした。


試しに、 OWASP を無効にしてみたところ、ジョブの説明やビルドの説明のところはリンクが無効になったので、プラグインはこれであっていると思うのですが…

どなたか解決方法あればコメントくださいm(__)m

2017年1月16日月曜日

reveal.js + Markdown のちょっとしたメモ - その4

ブログズミ: reveal.js + Markdown のちょっとしたメモ」の4回目です。
今回は、昨年12月に行われた第8回大阪Jenkins勉強会でしゃべったときに、reveal.js でスライドを作成したのでそのときやったことのメモです。
参考:ブログズミ: 「第8回大阪Jenkins勉強会」で発表してきた

その3は、
  • Zoom
  • fragment を使う
  • レイアウトのカスタマイズ

その2は、
  • HTML 変換後の表示
  • PDF に出力
  • テーマの作成
  • 背景付きテーマ
  • Notes を使う
  • App::revealup

その1は、
  • 表題が大文字表記にならないようにする
  • 空行を入れる
  • タグを直接記述する
  • 公開する
を紹介しました。


背景を変える
すべてのページの背景を変える場合は、テーマで指定するのが良いと思います。
方法は その2 の背景付きテーマを参照してください。

一部のページの背景を変える場合は、セクション(section)の属性で指定をします。
---
<!-- .element data-background="#000000" -->
data-separator(---),data-separator-vertical(--) の直後に .element コメントで設定します。

背景に指定できるのは、画像だけでなく単色、ビデオも指定できます。

スライドするごとに背景がずれていくようなことをしたい場合は、Parallax Background を利用することになります。
こちらは、Reveal.initialize で設定することになります。
やり方は、Github のドキュメントを参考にしてください。


変えた背景に合わせてフォントカラーを変える
さて、背景を変えることができましたが、明るい色のテーマのスライドに黒背景のページを挟む場合に、背景だけ変えるとフォントカラーはそのままで見えなくなってしまいます。



そこで、背景に合わせてフォントカラーも変えたいと思います。
それには、 reveal.js 3.0.0 から追加されたで「has-light-background/has-dark-background」を利用します。
これは背景色を部分的に変更した場合に、デフォルトより明るくなれば「has-light-background」が、暗くなれば「has-dark-background」クラスが section に付与される機能です。
これを使って、以下のような css を用意すれば背景色に合わせてフォントカラーを変更できます。
(reveal.js 付属のテーマで対応済みのものもあります。white.css, black.css)

.reveal .has-dark-background {
  color: #CCCCCC;
}/
例:第8回大阪Jenkins勉強会発表資料


埋め込み
作ったスライドをどこか別のところ(ブログなど)に埋め込みする方法です。
単純に iframe タグを使うだけで問題なさそうでした。
上でスライド表示しているのも iframe でやっています。

最後に
もうほとんど Markdown は関係ありませんでしたね…すみません。
まぁでも、また機会があったら「その5」を書きたいと思います。
ではでは。


2017年1月11日水曜日

CIサービスの結果を Twitter に投稿する

あけましておめでとうございます。本年もよろしくお願いしますm(__)m

さて、今年は酉年ということなので
新年一発目は「鳥」繋がりで、CIサービスと Twitter の連携をやってみたいと思います。



とはいえ、このネタは二番煎じでございます。

ほぼこちらの記事を参考にしております。
が、この記事ではちゃんと成功するところまでやってみました

では、(上記記事に書いてあることもありますが)詳しく説明をしていきます。

Webhook Notification + Zapier + Twitter
CIサービスでは、E-MAIL の他に Slack や HipChat などの Notification に対応しているところがほとんどですが、Twitter をサポートしているものがなかったため(※)、大抵のCIサービスで利用可能な Webhook を使って連携をさせます。
そして、Webhook と Twiiter を繋ぐ役割を担うのは、 Zapier です。



Zapier は複数サービスを連携するサービスの1つで、この手のサービスで有名なのは IFTTT だそうです。
今回 Zapier を選択したのは、参考記事にもあるように Webhook を使うためです。

また、今回 CI サービスには Travis CI を使用します。理由はメインで使っている CI サービスだから。
(他の Webhook Notification に対応した CI サービスでも同様に連携することができます。)


それでは早速連携の設定をしていきましょう。

※ iutest で使用している CIサービスのドキュメントを確認。その他、検索しても出てこないので多分ない

MAKE ZAP!
まずは、Zapier にサインアップします。


サインアップしたら、右上の「MAKE A ZAP!」ボタンを押して連携を作ります。


最初にトリガーになるアプリケーションを選択します。
今回は Webhook を使うので検索ボックスに Webhook といれて選択。


続いて、トリガーは「Catch Hook」を選択して、「Save + Continue」を押します。


次はオプション設定になります。今回は特に設定する必要がありませんので、空のまま「Continue」を押します。


これでトリガーの設定としては完了です。Webhook URL が生成されているので、これを CI サービス側から叩くことになります。
(この URL は後から確認できるので必要なときにコピーしにいきましょう)

ここでは、さらに Webhook のテストも行います。
テストページはスキップもできますが、ツイート内容を設定するときに Webhook の payload の内容を利用したいので、ここで一度テストしておきます。

Travis CI が Webhook Notification で送ってくる payload は公式ドキュメントから確認でき、 json フォーマットのサンプルが Gist からダウウンロードできるので、それを取得します。
(ここで実際に Travis CI から Webhook しても問題ありませんが、まだ機能していないのに Webhook 通知を .travis.yml に入れるのは嫌な方は以下のように curl で擬似的に送信します。)
ダウンロードしたら、gistfile1.json の先頭と末尾を以下のように少し編集します。
{
"payload": {

~~~~~~~~
   略
~~~~~~~~

}
}

編集したら、以下のように curl で送信します。
curl -v -X POST -d @gistfile1.json https://hooks.zapier.com/hooks/catch/ほげほげ

送信が成功したら、Zapier の「OK, I did this」ボタンを押します。

少しすると以下のテスト成功画面になります。



これでトリガーアプリケーションの設定は終わりです。「Continue」を押して次に進みましょう。

次はアクションアプリケーションの設定をしていきます。

まず、アクションアプリケーションに Twitter を選択します。


次に、アクションを選択します。今回は単純にツイートするだけなので「Create Tweet」を選択します。


続いて、アカウントを選択します。まだ Zapier と Twitter のアカウント連携をしていない場合は、「Connect a New Account」ボタンから連携を承認します。


最後に、ツイートする内容を設定します。



Message の右上にあるボタンを押すと、Webhook のパラメータ候補が出てきます。
Webhook のテストで送った payload の要素が選択できるようになっているはずなので、お好きなメッセージを入力してください。
編集できたら、「Continue」ボタンを押してください。


最後に、ZAP を ON にしたら完成です!





Travis CI の設定
Travis CI 側の設定でやることは1つだけで、Webhook Notification の設定を .travis.yml に追加するだけです。
ただし、Webhook URL をそのまま載せてしまうと誰でも URL を叩けてしまうので、暗号化をします。

やり方は簡単です。以下のコマンドを .travis.yml のあるディレクトリで実行すれば、勝手に設定を追加してくれます。
(travis コマンドはインストールしておいてください。)
travis encrypt "<webhook url>" --add notifications.webhooks
勝手にフォーマットされるのが気に食わない場合は、 --add オプションなしで実行すると暗号化された文字列がコンソールに出力されますので、それを以下のように .travis.yml に追記してください。

notifications:
  webhooks:
    secure: ほげほげ
    on_success: change # default: always
    on_failure: always # default: always

デフォルトだと、on_success/on_failure ともに常に通知になってますので、お好みで変更してください。

結果

ツイートできました!!

今回は以上です。では。