pplogがキッカケで形になった本があるらしい #わかばちゃんと学ぶwebサイト制作の基本

pplogがキッカケ?

まじかよッて感じでずっと楽しみにしていた本がやっと届いた!

ので読みました。読みながらの感想はツイッターに書いてたのでその辺を適当に貼っておく。

まとめ

Webデザインという単語は、知っていて何となくカッコイイし興味を持っている人が、Webサイト制作〜運用までの一連の流れを知る取っ掛かりとしては、すごく良くまとまっていると思った。

Webサイトを作る目的をマーケティング視点で考えてからサイトを作り始める流れもちゃんと押さえつつ、最後には運用時のマーケティングにも触れててヨカッタ。

もしかしたら、子供とかにお父さん(やお母さん)はこういう仕事しているんだっていう説明をザックリする時とかにも良いかもしれない。

たぶん、インターネットの事業会社でもクリエイター以外の人がザックリとインターネットのシステムがどうやって動いているのかなどを知る意味でもスゴくいいなと思った。つまりウチの会社とかでもオススメできる内容かなと思ったのと、湊川さんがこの本を引っさげて新人研修の導入とかしに行くとかいう未来も見えた。ヨサソウ。

随所に割と大事なことがサラッと書いてあって、例えばノンデザイナーズ・デザインブックに書いてあるようなこと。割と頭の中でこうやって整理して理解するわな、みたいなことを綺麗にとめてて、ポイント高い。図解が多いのも、そういう理解するときにこうやるよなーという図が最初から書いてある。だからサラッとしてるのにスッと大事なことが入ってくる。

pplogってのは、

自分の思いを好きなように書ける場所が欲しい。 引用元: 俺たちのゆるふわインターネット「pplog」 をリリースしました(してました) - 納豆には卵を入れる派です。

という想いで作った なので、そこで何か思考が整理されたり、何かを始めるキッカケになったり人生の何かが変わるってのはは自分自身でも本当によくある。自分の作ったそういう場所で同じ想いを感じてくれたことがただ純粋に嬉しい。pplogでポエム書いたおかげでナニカを始めようと思った、みたいなことがただただ嬉しい。ありがとう。

Rubyちゃんが登場してたので、Railsちゃんを見てみたいな。「わかばちゃんと学ぶRuby on Rails」だな。

わかばちゃんと学ぶ Webサイト制作の基本〈HTML5・CSS3〉

わかばちゃんと学ぶ Webサイト制作の基本〈HTML5・CSS3〉

trelloのboardにwebhookを登録する

雑なWebhook Docsの先にあるAPI referenceも、そっすね、という感想しか湧かないドキュメントで、まあ読めば分かるだけどさって感じ。

てなわけで、どう考えても忘れるので、Webhook登録するだけの作業をまとめておく。

ちなみに、この作業では、https://github.com/jeremytregunna/ruby-trello を使う。

gemをinstall

cd ~
mkdir setup_trello_integration && cd setup_trello_integration
bundle init
echo "gem 'ruby-trello'
gem 'launchy'" >> Gemfile
bundle

下準備

bundle exec irb
require 'trello'
Trello.open_public_key_url # API key が表示される以下で渡すkeyはコレ
Trello.open_authorization_url key: 'yourpublickey'
exit

Trello.open_public_key_urlで表示される画面はこんな。ここのKEYを使うので覚えておこう。

f:id:naoto5959:20160402003946p:plain

Trello.open_authorization_url key: 'yourpublickey'で表示される画面はこんな。OAuthのアレ。よろしければ、Allowを。

f:id:naoto5959:20160402003958p:plain

TOKENが表示されるので、こやつを後で使う。

f:id:naoto5959:20160402004008p:plain

webhookを作る

環境変数に、先ほど最初に取得したKEYと最後に取得したTOKENを指定。

echo "export TRELLO_DEVELOPER_PUBLIC_KEY=************************\nexport TRELLO_MEMBER_TOKEN=*********************************************" > .envrc
direnv allow
bundle exec irb
require 'trello'

Trello.configure do |config|
  config.developer_public_key = ENV['TRELLO_DEVELOPER_PUBLIC_KEY']
  config.member_token = ENV['TRELLO_MEMBER_TOKEN']
end

board_id = Trello::Board.find('****').id # TrelloのURLの`/b/:board_shortlink/*`の:board_shortlinkの部分でboardを探す

callback_url = 'http://example.com' # 普段はPOSTで来るが、Webhook登録時はHEADに200を返すようにしておくこと。
webhook = Trello::Webhook.create(callback_url: callback_url, id_model: board_id)
webhook.id # 設定変更したい場合などに使うのでメモっておく

コメントに書いたとおり、受け側のwebhookは初回だけHEADリクエストに200を返す必要がある。なんなの。

わからん

webhookのid忘れたらどうなっちゃうわけ?

githubやesaのmentionをslackでmentionするよ

f:id:naoto5959:20160319010013p:plain

githubやesaでmentionがあったら、slackbotにこんな感じのmentionを飛ばさせたいんですよ。

f:id:naoto5959:20160319004631p:plain

やむを得ない理由だったり、ナンカついウッカリだったりで

  • githubとslackのidが違う
  • esaとslackのidが違う

なんてことが、あったりなかったりするわけですが、そんな時でも

-
  github: ppworks
  esa: koshikawa_naoto
  slack: koshikawa.naoto

みたいなidのmappingがあれば

  • githubのmentionをslackで通知
  • esaのmentionをslackで通知

することが出来るんじゃないかなーと思って作ってみました。heroku buttonでササッと構築したかったのでなるべくDBを使わずに設定ができるようにしています。

準備

github.com

へアクセスして、heroku buttonをクリックします。herokuではないどこかにホスティングしたい場合は、怪しげな英語のナニカで書かれたREADMEにそれっぽいことが書いてあります。

heroku buttonで入力を促される以下の環境変数にいろいろ設定していきます。

  • MENTIONS_MAPPINGS_FIlE_PATH
  • SLACK_WEBHOOK_URL
  • GITHUB_TO_SLACK_TOKEN
  • ESA_TO_SLACK_TOKEN

MENTIONS_MAPPINGS_FIlE_PATH

以下の様な感じの、githubとesaとslackのmappingをしたyamlファイルを置いたgist(ちゃんとrawにしてね)などのURLを記載します。

-
  github: ppworks
  esa: koshikawa_naoto
  slack: koshikawa.naoto

たとえば、こんな。

https://gist.githubusercontent.com/ppworks/49f6ce44efb09d5fc8e9/raw

SLACK_WEBHOOK_URL

通知したいslackのIncoming WebHooksを作って、埋めます。

たとえば、こんな。

https://hooks.slack.com/services/xxxxxx/yyyyyy/zzzzzz

GITHUB_TO_SLACK_TOKEN

githubのmentionをslackに通知したい場合埋めて下さい。

ruby -r 'securerandom' -e 'puts SecureRandom.hex'

の結果などを入れるとよいです。

githubに設定すべきwebhookは以下のようになります。

https://your-heroku-application-name.herokuapp.com/webhooks/**ここが今作ったtoken**

githubでは以下の様なEventにhookするようにwebhookを設定して下さい。

githubのwebhook設定

  • githubのissue, pull requestでmentionされたとき
  • githubのissue, pull requestでassignされたとき

mappingが存在すれば、slackにslackbotの個別チャットでmentionが飛びます。

f:id:naoto5959:20160319004539p:plain

ESA_TO_SLACK_TOKEN

esaのmentionをslackに通知したい場合埋めて下さい。

ruby -r 'securerandom' -e 'puts SecureRandom.hex'

の結果などを入れるとよいです。

githubに設定すべきwebhookは以下のようになります。

https://your-heroku-application-name.herokuapp.com/webhooks/**ここが今作ったtoken**

esaでは以下の様なEventにhookするようにwebhookを設定して下さい。

esaのwebhook設定

  • esaのpost, commentでmentionされたとき

mappingが存在すれば、slackにslackbotの個別チャットでmentionが飛びます。

f:id:naoto5959:20160319004631p:plain

@allのときは、#general@everyone宛のmentionが飛びます。

感想

ウッカリ勢いで意味もなくRails5で作ってしまったけども、今のところそれなりに便利に運用出来ているのでよしとする。

割と便利です。

要望とかはPR頂ければ喜びますので、何卒(\( ⁰⊖⁰)/)

Circle CIでbundle updateのPull Request作成を自動化する手順

日々、bundle updateしてますか!

circleci-bundle-updatecircleci-bundle-update-prを使って、bundle updateの Pull Requestを自動化する手順をまとめてみます。作者の記事を読めばいいっちゃいいんですが、地味に抜けていた手順と各ステップは何のために必要かを整理してみました。

このgemは、Pull Requestに各gemの差分リンクを貼ってくれるのが便利だな!って思って採用してます。素敵なgemをありがとうございます。

github.com github.com

ステップは

  1. CircleCI経由でbotからgithubにpush出来るようにしておく
  2. CircleCI経由でbotからgithubにPR作れるようにしておく
  3. 外部からCircleCIへbuild指示できるようにする
  4. 外部からcronでCircleCIへbuild実行する
  5. CicleCIのbuild時にPRを送るようにする

といった感じです。

CircleCI経由でbotからgithubにpush出来るようにしておく

CircleCIからgithubgit pushするのが目的です。

  1. githubでPRを送りたいユーザーでログインする
  2. CircleCIにてPRを送りたいprojectを登録する or Followする
    f:id:naoto5959:20151223211412p:plain
  3. CircleCI経由でbotからPR出来るように鍵を登録する。Project SettingsからCheckout SSH keysからAdd user keyする
    f:id:naoto5959:20151223211426p:plain
  4. もし、まだAuthorizeしていなかった場合は、次に「Create and add nekodayo user key」をクリックして鍵を追加
    f:id:naoto5959:20151223211439p:plain
  5. こんな感じでkeyが追加されていればok
    f:id:naoto5959:20151223211447p:plain

CircleCI経由でbotからgithubにPR作れるようにしておく

CircleCIからgithubのAPIを叩けるようにするのが目的です。

  1. githubでPRを送りたいユーザーでログインする
  2. access_tokenをrepo grantで作る
    f:id:naoto5959:20151223211458p:plain
  3. 生成されたAccess Tokenをコピーしておく
    f:id:naoto5959:20151223211452p:plain
  4. CircleCIの該当Project SettingsからEnvironment variablesにてGITHUB_ACCESS_TOKENという名前で環境変数を設定する
    f:id:naoto5959:20151223211506p:plain

外部からCircleCIへbuild指示できるようにする

つまり、CircleCIのAPIを叩けるようにするのが目的です。

  1. CircleCIの該当Project SettingsからAPI Permissionsで、Allを選択し、bundle update cron用とか適当にラベルを付ける
    f:id:naoto5959:20151223211513p:plain
  2. 出来上がったTOKENをcron botから使う

外部からcronでCircleCIへbuild実行する

  1. ci-bundle-updateのheroku buttonでデプロイ
  2. 指示通りに環境変数を設定
    • GITHUB_USERNAME=botのユーザー名
    • GITHUB_REPONAME=projectの名前
    • CIRCLECI_TOKEN=先ほどのTOKEN
  3. heroku schedulerにbundle exec ruby ci-bundle-update.rbを設定

CicleCIのbuild時にPRを送るようにする

github.com

を参考に、pplogではこんな感じに設定しています。

deployment:
  production:
    branch: master
    commands:
      - |
        if [ "${BUNDLE_UPDATE}" ] ; then
          gem update bundler --no-document
          gem install circleci-bundle-update-pr
          circleci-bundle-update-pr
        fi
test:
  override:
    - |
      if [ -z "${BUNDLE_UPDATE}" ] ; then
        bundle exec rspec --fail-fast
      fi

こんな感じのPull Requestが届くようになります。

f:id:naoto5959:20151223220030p:plain

余談

設定している際に、botのACCESS_TOKENを持っている状態でワザワザgithu user_nameとemailを指定している箇所が無駄だなと思ったので、Pull Request送ったりしてました。

github.com

まとめ

Railsを選択するには、「それでもRailsを選択する3つの理由 - pblog」といった理由があるはずで、そのためには

  • テストを書く
  • 周辺gemの更新に追随し続ける

必要があります。そのためにも自動でbundle updateをして日常的に最新のgemを使うようにしたいですね。

pplogの「ちょっと足跡が見えちゃう」機能を偲んで( ˘ω˘)

f:id:naoto5959:20151216001632p:plain

そこには足跡があった。

そう、名前の下に「最後に読んだよしたあしあと」が出ていたのだ。正確には、「最後のあしあとの最後の20文字」が出ていた。ウッカリおしりが見えちゃっている感じだ。

何故作ったか

ツイッターの名前欄にはロマンがあるんですよ。

名前欄とは、Koshikawa Naoto とか書いちゃうところである。しかし、なんでそれ名前欄に書いたのって言う文字列を名前欄に入れている人々がいるのだ。なんていうかMNS MessengerとかSkypeにあったアレ、ムードみたいなアレ。間違ってアレ目的で名前欄を書き換えている。それも頻繁に書き換えている。そんなNAMAE-RAN FREAKSがいるんですよ。

正直ツイッターにおける一番いい機能である名前欄で遊ぶという機能を、我々はそんな機能を、pplogに搭載したくなったのですよ。

(当時の会話です)

f:id:naoto5959:20151216002142p:plain

そうですね、一時期「コントレックス」という文字列を入力していたことがありますね。今はもう飲んでいないコントレックスよ。

どう作るか

名前欄を変更できる機能を作ろう。

違う、そんなんじゃない。pplogに欲しい機能はそんなんじゃない!設定なんてさせるなよ!何が名前の設定だ!アホか!ポエム書きにきてんだよ、ポエム読みに来てんだよ!ふざけんなよ!

そんな気持ちから産み出した機能。

「最後に読んだよしたあしあと」を表示する機能。

気づかない人には、うっかりおしりが見えてしまっているような。しかし気づいた人はふざけて遊べる、そんな機能。くすっと笑えるお遊び機能。コレだ!って思ったんですよ(当時)

どやPull Requestの様子です

どうですか。私のツイッターIDの下には「ほしぶどう」という称号のような何かが。何なんですか、これは!バカバカしい!

f:id:naoto5959:20151216001820p:plain 

成功かと思った

無駄に回遊率が上がった(感覚値です)表示したい文字列を探し集めるためにポエムをあさった。ホネを回し続けた。ホネをフォワードし続けたのだ。そして、皆の名前欄の下を見たくてたまらなくなった。無駄に人のページヘ行った。

f:id:naoto5959:20151216003023p:plain

ヨサソウ、ッテ思った。

いやまて

足跡を必要以上に選び始める自分が居た。今までと違う気持で「読んだよ」していた。違った。それは違った。なんなら最高の「読んだよしたあしあと」のあとは、「読んだよ」したくなくなったりしてた。

思ったのと違う行動をし始めていた。ポエムを読めよ。おもいっきり、心置きなく「読んだよ」しろよ。なにやってんだよ!!!

おれの作りたい世界はコレじゃない。

やめよう

f:id:naoto5959:20151216001632p:plain

ひっそりと始まった機能はひっそりと消えた。それは儚い。ポエムのように、その機能は消えた。pplogの機能はそのコンセプトのように、儚く去っていった。

記憶にだけ残る君よ。

「ちょっと足跡が見えちゃう」機能よ。安らかに眠れ。