うなすけとあれこれ

2015年10月23日

Fitbit Chargeを買った

Fitbit Charge

Fitbit Chargeとは

一言で言ってしまえば高性能万歩計だと思います。 Fitbit Charge™ ワイヤレス活動量計・睡眠計リストバンド

隣の席の人が買ってて羨ましくなったので買いました。

使ってみての感想

つけごこち

もともと鬱陶しいからと腕時計をせずに今までの人生を歩んできました。そこに突然こういうものを身につけ生活するようになると、とても違和感があります。 まずノートパソコンのキーボードが使いづらいです。手首をべたりと密着させながらキータイプするほうなので、左手が動かしにくいです。金属製の留め具で傷をつけるのもいやですし。 なので、Tex Yoda(外付けキーボード)を使うことが一気に増えました。持ち運びも運動になるしいいのかも…… 大きさはLでちょうどいい感じです。

情報

僕がFitbit Chargeで一番魅力的だと思っている機能は、睡眠時間の計測とアラーム機能です。特に何も設定しなくても、睡眠を自動で感知して記録してくれるので、自分が何時間眠ったかなどがわかって便利です。

Fitbit アプリ画面

他にも、登った階数、歩数、距離を自動で計測してくれます。歩数は、同期している状態で歩くとリアルタイムに数値が更新されていくので見ていて楽しいです。

とれない情報

Fitbit Chargeでは、心拍数、体重、体脂肪率、摂取カロリー、摂取した飲料の量は計測できません。自分で入力してやる必要があります。体重と体脂肪率(身長を設定しているとBMIも)くらいは1日にそう何度も量らないので、都度入力してやるのはいいとします。しかしそれ以外の摂取カロリーなどの値はまったく計測できません。自分で入力してやればいいとしても、それはちょっと面倒すぎると思います。

いつか体内に機器を埋め込んでこういう値も取れればいいな……

まとめ

いろいろな数値が可視化されるのは見ていて楽しいです。

来月の健康診断に引っかかりたくない……

2015年10月23日
2015年09月23日

middlemanとh2oとVPSによるブログ構築

h2oのbuild

wordpressからmiddlemanへ

wordpressからmiddlemanへの移行は、今まで(はてなダイアリーからtumblrへ、tumblrからwordpressへ)のお引越しとは違う、極めて大規模な物になることが予想されました。理由は、 「記事の移行が発生する」 からです。

むしろ何故いままでのブログ移転では記事の引っ越しをしていないか、という話ではあります。しかし、今回の移転は記事の移行が必要になる理由が2つありました。

維持費がかかる

wordpressはさくらのレンタルサーバー スタンダードを使って運営していました。これを残しておくとなると、月額515円の維持費が発生します。なので、新しいブログに移転するタイミングでサーバーを解約してしまいたかったのです。

アクセス数の多い記事がある

Slackに関する記事、windowsとubuntuのdualbootに関する記事などは定期的なアクセスが発生しており、検索流入もそれなりにあるのでぜひとも残したいという気持ちがありました。

移行にあたって考慮した点

以前の記事を残しつつ、新しくブログを作るにあたって考慮したのが、以下の項目です。

以前のURLからアクセスできるようにする

ありがたいことに、記事へのリンクを記載していただいているwebページもありました。それらのリンクを変更することなく新しいブログへ誘導させたいと思いました。

記事はmarkdownで書く

wordpressの頃は、markdownモードがあるにも関わらず、直接htmlを書くか、あるいはmarkdownで書いてからhtmlに変換して編集エリアにペーストしていました。それをやめ、すべてmarkdownで書くことにしました。

ブログの外見は自分で書く

すでに存在するテーマ等は使わず、自らSassを書いて一からデザインすることにしました。

最新の技術を取り入れていく

最新の技術を勉強する上で重要なのは、実際に使ってみることだと思っています。h2oの使用を決めたのも、この理由によります。

ブログ移行

それでは、ブログ移行までの道のりを綴っていきます。

現状確認

worpressで運営していたunasuke.comは、78個の記事、309の画像、日ごとに100前後のアクセス数をもつブログでした。ドメインはお名前.comで取得したものをさくらに登録して使用していました。主な流入は検索によるものでした。使用しているwordpressのバージョンは4.2系、有効になっているプラグインは13個ありました。

wordpressから、なにに移行するのか

静的サイト構築ツールはいくつも存在します。その多さはStatic Site Generatorsを見ていただけると分かります。僕が候補として考えたのは、以下の5つです。

Octopressは、その特徴的なfaviconで使用しているブログがすぐ分かります。あのfaviconが好きになれなくて使わないことにしました。Hugoは、記事生成のスピードが凄まじいと話題ですが、Goで書かれていることもあり、Goのエコシステムが未知なことと、今後の記事生成で不満が出てきたら乗り換え先として考えることにし、今回は使わないことにしました。SpinaはRails製CMSとのことで少し触ってみましたが、(unasuke/spina-test)ドキュメントが殆ど無いこと、そもそもCMSであることから使わないことにしました。最終的に残ったJekyllとmiddlemanでだいぶ悩みましたが、会社や所属するコミュニティでmiddlemanを使っていること、先輩にmiddlemanを勧められたことにより、middlemanを使用することに決定しました。

さくらのレンタルサーバーから、なにに移行するのか

レンタルサーバーをやめ、自由度の高いVPSに移行することは決めていましたが、その先は3つ候補があると思っています。

ConoHaは不安定であることが友人の使用例からわかっていたので使わないことにしました。AWSとさくらで迷いましたが、これまで使っている会社であること、信頼性に関して実績があることからさくらのVPSを使用することに決定しました。

Apacheから、なにに移行するのか

これについても3つの選択肢がありました。

これについては、最新の技術を取り入れていくという目標があるので、迷わずh2oを使用することに決定しました。

wordpressから記事と画像のエクスポート

記事の移行のために、wordpressから記事を移行する作業をしました。移行にはmdb/wp2middlemanを使用しました。エクスポートしたXMLを、

% wp2mm wordpress.2015-07-25.xml

とし、すべての記事について手作業でmarkdownに変換しました。markdownに変換する、以下の様なオプションもありましたが、試したところ画像の処理がうまくいっておらず、やはり手作業は必要でした。

% wp2mm wordpress.2015-07-25.xml --body_to_markdown true

また、画像も撮影した時点のファイル名となっていたのを、意味のある名前に変更、年ごとにディレクトリを分割などの作業を行いました。

体感では、この作業が一番長く時間がかかったように思います。markdownized · unasuke/blog@e0658de

middlemanの設定を整える

middlemanは素で使うのではなく、ブログ用の拡張であるmiddleman-blogを適用させて使うことにしました。記事のURLをwordpressの頃とほとんど変えないなどの設定をconfig.rbに書いていきました。他にも、livereloadの設定や、layoutの設定などを整えていきました。History for config.rb - unasuke/blog

サイトのデザインをしていく

デザインをする上で、以下の条件をつけました。

これは、色が増えると調和を取るために考えなければいけないことが増えるのを避けるためと、画面サイズ、解像度になるべく依存しないようにするためです。Sassは慣れているし、bootstrapもSassに移行するとのことでAltCSSのデファクトスタンダードとなりつつある(ような気がする)からです。

また、会社のデザイナーさんに教わったことですが、白と黒(#fffと#000)の組み合わせはコントラストが強くて良くないそうなので、純粋な白、黒は使用しないことにしました。

結果的に現在のようなものになりましたが、これで決まったわけではなく、今後も修正は続けていきます。

web fontをどうにかする

web fontも興味があったので使ってみることにしました。どのフォントを使うにせよ、サブセット化(使う文字だけ収録されたフォントファイルをつくる)は日本語を使う以上は避けられないと考えました。3846masa/japontを使って動的にfontを生成しようかとも考えましたが、とりあえずはM+Web FONTS Subsetterを使うことにしました。それにあたって、ブログ内で使われている文字を抽出する必要があり、以下の様なスクリプトを使って文字を抽出し、web fontを作成しました。

VPS serverの初期設定

server OSにはUbuntu 14.04 LTS amd64を選択しました。

まずはOSのインストール、SSHの設定、iptablesの設定を行いました。

% sudo vim /etc/ssh/sshd_config
% sudo service ssh restart
% sudo apt-get install iptables-persistent
% sudo invoke-rc.d iptables-persistent save

h2oのビルド

以前の記事URLから、新しい記事のURLにリダイレクトさせるために、正規表現が必要になると考えました。具体的には、

# old url
http://unasuke.com/diary/2015/yapc-asia-tokyo-2015/

# new url
http://blog.unasuke.com/2015/yapc-asia-tokyo-2015/

このようになります。categoryがすべてtagに統一されたので、URLからcategoryを除いたものへとリダイレクトさせてやりたいのです。

まずは、h2oが素で正規表現を用いたroutingを行えるかどうか確認します。

# h2oのビルド
% sudo apt-get install locate git cmake build-essential checkinstall autoconf pkg-config libtool python-sphinx wget libcunit1-dev nettle-dev libyaml-dev libuv-dev
% sudo apt-get install unzip zlib1g-dev bison
% wget https://github.com/h2o/h2o/archive/v1.5.0-beta4.zip
% unzip v1.5.0-beta4
% cd h2o-1.5.0-beta4
% cmake -DWITH_BUNDLED_SSL=on .
% make
% sudo make install
% h2o -v
h2o version 1.5.0-beta4
OpenSSL: LibreSSL 2.2.2

はいりました。ひとまずexampleの設定を使って立ち上げてみましょう。

% pwd
/home/hoge/h2o-1.5.0-beta4
% h2o -c ~/h2o-1.5.0-beta4/examples/h2o/h2o.conf # conf内のpath指定があるので注意

これで8080番ポートにアクセスするといい感じになにか見れると思います。ちなみに、example/h2o/h2o.confを以下のように書き換えると、URLにポートを指定せずに接続することができますが、h2oの起動に管理者権限が必要となります。

# to find out the configuration commands, run: h2o --help
# 秘密鍵とかも消す
listen: 80
hosts:
  "127.0.0.1.xip.io:80":
    paths:
      /:
        file.dir: examples/doc_root
    access-log: /dev/stdout

では、このyamlでワイルドカードが使えるかどうか試してみます。

# to find out the configuration commands, run: h2o --help
# 秘密鍵とかも消す
listen: 80
hosts:
  "127.0.0.1.xip.io:80":
    paths:
      /:
        file.dir: examples/doc_root
      "/test/test":
        file.dir: examples/doc_root
      "/*/test":
        file.dir: examples/doc_root
    access-log: /dev/stdout

この設定でh2oを立ち上げたところ、/test/testにはアクセスができましたが、/hoge/testにはアクセスできませんでした(not found)。なので、mrubyなどでなんとかしてやる必要があると感じました。

ひとまず、mrubyをインストールします。

% sudo apt-get install mruby libmruby-dev

mrubyのインストールができたら、h2oをmrubyを使えるようにしてもう一度buildします。

% cmake -DWITH_BUNDLED_SSL=on -DWITH_MRUBY=on .
% make
% sudo make install
% h2o -v
h2o version 1.5.0-beta4
OpenSSL: LibreSSL 2.2.2
mruby: YES

なにも考えずにh2oの最新版Release H2O version 1.5.0-beta4 · h2o/h2oをbuildしたら、どうやらmruby拡張のAPIがRackベースのものに変更になったらしく、そのサンプルコードを動かしてみてもどういう動作をするのかが全く読めなかったので、Rack based APIに変わる前でvulnerability修正がされているRelease H2O version 1.4.5 · h2o/h2oを使うことにしました。

ひとまずexamples/h2o_mruby/h2o.confを以下のように変更します。

# to find out the configuration commands, run: h2o --help

listen: 80
# host名はサーバーのドメインに設定してもよい
hosts:
  "127.0.0.1.xip.io:80":
    paths:
      /:
        mruby.handler-file: examples/h2o_mruby/hello.rb
    access-log: /dev/stdout

そしてアクセスすると、次のような文字列が返ってきます。

hello from h2omruby. User-Agent:Mozilla/5.0 (Macintosh; Intel Mac OS X 10105) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/45.0.2454.99 Safari/537.36 New User-Agent:new-Mozilla/5.0 (Macintosh; Intel Mac OS X 10105) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/45.0.2454.99 Safari/537.36-h2omruby path:/ host:hoge method:GET query:

では、mrubyをつかって旧URLから新URLへのリダイレクトをさせるように、やっていきます。

まず、旧URLの形式ですが、次のようになっています。

http://unasuke.com/#{カテゴリー(diary,howto,info,review,about-me)}/#{記事公開年(2013から2015)}/#{記事タイトルっぽい英文}/

これに一致する正規表現を以下のように作成しました。

reg = Regexp.compile("(diary|howto|info|review|about-me)(/.*)")

さて、mrubyはrubyとは違い、組み込み向けなので正規表現は標準の状態では使用できません。mgemというmruby用のgemを組み込んでmrubyをコンパイルし直す必要があります。しかしh2oがbuildするmrubyには既にmattn/mruby-onig-regexpが組み込まれているので、正規表現が使えます。(気付かずに自前でbuildしてた)

class HelloApp
  def call(env)
    h = "hello"
    m = "from h2o_mruby"

    ua = env["HTTP_USER_AGENT"]
    new_ua = "new-#{ua}-h2o_mruby"
    path = env["PATH_INFO"]
    host = env["HTTP_HOST"]
    method = env["REQUEST_METHOD"]
    query = env["QUERY_STRING"]

    # この辺を追記
    reg = Regexp.compile("(diary|howto|info|review|about-me)(/.*)")
    result = "#{reg =~ path}\n $1=#{$1}\n $2=#{$2}\n"

    msg = "#{h} #{m}.\n User-Agent:#{ua}\n New User-Agent:#{new_ua}\n path:#{path}\n host:#{host}\n method:#{method}\n query:#{query}\n"

    [200,
     {
       "content-type" => "text/plain; charset=utf-8",
       "user-agent" => new_ua,
     },
     ["#{msg}\n\n#{result}"]
    ]

  end
end

HelloApp.new

正規表現の結果

できました。これをドメインを見てリダイレクトさせるかどうか判断させ、さらに実際にリダイレクトさせればいいわけです。リダイレクトさせるには、301を返してやればいいので、このようになります。

class HelloApp
  def call(env)
    path = env["PATH_INFO"]
    reg = Regexp.compile("(diary|howto|info|review|about-me)(/.*)")
    result = "#{reg =~ path}\n $1=#{$1}\n $2=#{$2}\n"

    [301,
      {
        "Location" => "https://blog.unasuke.com#{$2}"
      },
      []
    ]
  end
end

HelloApp.new

無駄な部分もありますが、実際にこれでリダイレクトができました。

このmrubyを使用した最終的なh2o設定ファイルは次のようになりました。

listen: 80
listen:
  port: 443
  ssl:
    certificate-file: /hoge/path
    key-file: /hoge/path
hosts:
  "unasuke.com:80":
    paths:
      /:
        mruby.handler-file: /home/blog/redirect.rb
  "unasuke.com:443":
    paths:
      /:
        mruby.handler-file: /home/blog/redirect.rb
  "blog.unasuke.com:80":
    paths:
      /:
        redirect: https://blog.unasuke.com/
  "blog.unasuke.com:443":
    listen:
      port: 443
      ssl:
        certificate-file: /hoge/path
        key-file: /hoge/path
    paths:
      /:
        file.dir: /hoge/path
    access-log: /hoge/path

access-log: /hoge/path
error-log: /hoge/path
pid-file: /hoge/path

あとは、middlemanでbuildした記事を適当なディレクトリに配置してやれば完成となります。(疲れたのでまた後で書きます)

参考

middleman

ubuntu

h2o

mruby

SSL

2015年09月23日
2015年09月23日

ブログをblog.unasuke.conに移動しました

引っ越し

3回めの移動

はてなダイアリーから、tumblr、さくらのレンタルサーバー上のwordpressと渡り歩いてきた"うなすけとあれこれ"が、さらにもう一回引っ越しをしました。今回は、さくらのVPSとmiddlemanを組み合わせたものとなっています。

移動の理由

仕事でwebサービスを構築していくうちに、webサイトを構築する上で必要となる様々な知識が、以前と比べて格段に増えました。それに伴い、今までは用意された編集エリア、用意されたブログテーマには満足できなくなり、一から構築してみたい、という気持ちが大きくなってきました。

また、wordpressを使っていると、その管理が思ったよりも手間がかかるものであることがわかりました。定期的なアップデート、セキュリティ対策、壊れた時の対処などに振り回されるのには嫌気が差しました。

http://t.co/rE9z6Wrxzu 見れない

— うなすけ(偏差値6) (@yu_suke1994) 2015, 6月 3

http://t.co/rE9z6Wrxzu 復活しました

— うなすけ(偏差値6) (@yu_suke1994) 2015, 6月 3

http://t.co/rE9z6Wrxzu のメンテナンス時間は10分間でした。

— うなすけ(偏差値6) (@yu_suke1994) 2015, 6月 3

ということで、静的なhtmlを生成することによる懸念事項の減少、新しい技術の勉強なども兼ねて、middlemanでブログを構築することにしました。

移動の顛末

middlemanとh2oとVPSによるブログ構築

2015年09月23日
2015年08月24日

YAPC::Asia Tokyo 2015に参加した

夜の東京ビッグサイト

前夜祭

PHP帝国の逆襲!(を願うPHPerが話す最近のPHPについてのクイックツアー PHP7対応版)

PHPはこわくないよ PHPerが話す最近のPHPについてのクイックツアー #yapcasia #yapcasiaE - Togetterまとめ

途中で来て、最後の方だけ聞いていました。 PHP7が速いとか、最近のモダンなサービス(Slack)でもPHPを使っているところはまだあるとか、負債のない言語はないとか、グワッとつくり上げるにはやはりPHPでは?みたいな話でした。 自分はPHPは書いたことがなくて、使ってると言ってもWordpressぐらいなものですし(近々捨てる)、あまり興味が無いです。 けどこういうアツい人がいる言語、とても幸せものだなと思います。こういうでかいカンファレンスでD言語のアツい人とか見たこと無いもの……(需要を優先という面で見れば仕方ないのかもしれないけれども)

はてなブックマークのトピックページの裏側

はてなブックマークのトピックページの裏側 in YAPC::Asia Tokyo 2015

はてブのトピックページはこう作られている! 中の人による実装解説 #yapcasia #yapcasiaE - Togetterまとめ

とんでもなく学術!って感じでした。形態素解析とか……うわぁ……わからないぞ はてブ10週年とのことですが、使ってないです。

技術ブログを書くことについて語るときに僕の語ること

ホッテントリ入りの極意から哲学まで! はてなエンジニアが語る技術ブログを書くことについて #yapcasia #yapcasiaE - Togetterまとめ

まとめると、

だいたいこんな感じなように思いました。

僕(ら)はやはり多くの人に読んでもらいたい文章を書くし、その指標のひとつとしてはてブ数を見ます。なので、はてブ数はあればあるほどうれしいものです。そのためにはタイトルとか工夫しないと読んでもらいづらいから、勉強になりました。

ssig33.com - Docker についてアメリカの大学で工学博士から英語で話を聞いてきました 一方で、

「先頭しか読まない」って分かってるならちゃんと人々がエントリ読んでいくような仕組み作るのがはてなのお前らの仕事なんじゃないのかと思って、それについても質問しようと思ったのだけどもう無駄だなと思って聞かなかった。

これも至極まっとうな意見だと思っています。タイトルによらず、いい記事はいい記事で、そういう小手先の細工でリーチしにくいとかしやすいとか本質ではないのでは?と思います。

「ブログは俺の場所」というのはすごく納得できるのです。じゃなきゃなんで僕ははてなダイアリーを捨てtumblrを捨て、わざわざ面倒でお金のかかるWordpress in レン鯖を選んだのだという感じです。俺の場所は俺が作る。

1日目

メリークリスマス!

Perlの父 Larry Wall が描く『指輪物語』 そしてメリークリスマス! #yapcasia #yapcasiaA - Togetterまとめ

ちょっと遅れて入ったら同時通訳の機械がなくてウオーとなってました。 とりあえずLoRの映画とか小説読みたくなりました。

I FAIL GOOD

しましょう。

Effective ES6

Effective ES6

これからのJavaScriptを知ろう! Effective ES6 #yapcasia #yapcasiaC - Togetterまとめ

はじめから柔軟性のある言語として設計されたのが功を奏したのかここまで広まったけど、反面罠や謎が多くなってしまったのでしょうか。開眼する必要まで出てきたJavaScript。 ES5から6年経ち、ES6では何が新しくなったのでしょう。

ではAltJSの立場はどうなるんでしょう?多分syntaxの好みぐらいになって、わざわざcoffeeを選ぶ理由もなくなっていくかもしれないですね。かといって最新のブラウザでES6はまだサポートされていません。だからbabel。

TypeScriptの立ち位置はまだでかいかも……でもどうせbabeるのならAltJS使おうがES6だろうが関係ないのかも?と思いました。この辺どうなんでしょう。

HTTP/2 & クラウド時代のウェブアプリケーション実行基盤

HTTP/2時代のウェブサイト設計

H2Oは先を行く!HTTP/2時代にむけたウェブサイト設計のポイント #yapcasia #yapcasiaD #http2 - Togetterまとめ

HTTP/2最高ですね。描画までが速いし、配信も速いし、とにかく速い。 はやくぼくのかんがえたさいきょうのブログをh2oでやりたいです。個人ブログのくせして暗号化とかめっちゃ頑張りたいです。無駄に差先端を走っていたいです。 Let’s Encryptのスケジュール、遅れているような??

【sponsored contents】若手エンジニア達の生存戦略

若さは特権!?~若手エンジニアの生き方~#yapcasia #yapcasiaD - Togetterまとめ

papixさんは若手なのか…… 言語は違えどだいたい感じてることは同じで、お金がほしいし貢献していきたいしいろいろなことに手を出していきたいし。

Electron: Building desktop apps with web technologies

WEB技術を使ってデスクトップ開発!Electronとは!? #yapcasia #yapcasiaA - Togetterまとめ

こんな大規模化カンファレンスで40MBのgit clone薦めてくるし正気かよ、と思いました。案の定回線は不安定になったようです。 Nuclide こんなのあったのか。 electronで何ができるのか、ということに始終徹した発表だったように思う。 クロスプラットフォームなデスクトップアプリも簡単に作れる時代になって、とてもいい。

esa.io - 趣味から育てたWebサービスで生きていく

esa.io - 趣味から育てたWebサービスで生きていく // Speaker Deck

趣味からサービスへ!esa.ioの中の人に学ぶプロダクト開発 #yapcasia #yapcasiaA - Togetterまとめ

とにかく開発の仕方の違いを思い知らされました。Heroku使っているのもあって、出先でスマホだけで変更のcommitからdeployまで出来るのは超カッコイイし、価値の提供がとにかく速いと感じました。 自分プロダクツも、たぶんURLを持つと意気込みや愛着が違うのでしょう。Herokuで自動生成されるstill-hoge-7828.herokuapp.comなんてURLのプロダクトに愛着が湧くでしょうか。

2日目

3分でサービスのOSを入れ替える技術

突然のCM放映に対応せよ!3分でOSを入れ替える技術 #yapcasia #yapcasiaE - Togetterまとめ

インフラをコードで表現していく、とにかく自動化できるように。 このノウハウ(Blue-Green deploymentなどなど)が必要になるくらいtmixも周知されたいものだなぁ。ばんばかスケールアウトしたいです。

ソーシャルゲームにおける AWS 移行事例

209分かかった処理を90分に!?実例に見る、RDS移行 #yapcasia #yapcasiaE - Togetterまとめ

Single-AZにした後からMulti-AZにするまでの変更も複数のAZに保管されるならまあ、一時的にはいいんじゃないでしょうか? しかし稼働中のものを入れ替えるのは考えることが多くて大変(sessionの保存とか)だと思いました。

カンファレンスネットワークの作り方

YAPCの2000人をインターネットに繋げる!! CONBUが語るネットワーク構築舞台裏 #yapcasia #yapcasiaB - Togetterまとめ

カンファでのネットワーク、非常にありがたいもので、どのように構築しているのか気になったので見に行きました。 意外や意外、機材はconbu側が持っているとのことです。それで2000人規模のカンファに対応できるのすごいな…… コアネットワークのライブラリ化、クラウド時代の勝利という感じがします。

感想

前夜祭と2日目には銅鑼Tシャツを着て行きました。esaの方々、鶉さん、naoyaさん、その他いろいろな方に銅鑼を叩いていただけたので嬉しかったです。すみませんでした。 サイン入り銅鑼Tシャツ

Perlと銘打っておきながら何もかもを受け入れるYAPCはすごいです。いろいろな方と交流出来ました。懇親会ではしらなかった分野の話、これからどうしていくべきななどの話、アレは本当にダメみたいな話をして、楽しかったです。なぜ僕は懇親会に銅鑼Tシャツを着て行かなかったのでしょう。本当に悔やまれます。

ちはみに、1日目と2日目の間に出来事がありました。LTぐらいはできそうな感じなので、どこかで話します。

さて、Beaconはどうなるのでしょう。

2015年08月24日
2015年08月19日

C88に行ってきた話

コミケ初体験

ビッグサイト

コミケの存在は知っていたけど、毎夏毎冬にまとめを読んだり大量のツイート群を読んだりで満足していました。

そこに、友人のふーゆた君がサークル参加するということなので、僕も売り子をするかわりにサークルチケットで入場させてもらうことになりました。

またそれとは別に、情報共有おじさんの発案によりコミケでtmixのチラシを配る事にもなりました。

よって、コミケ初体験で、サークル側、設営側、一般側の3つの体験をすることになりました。設営というのも違う気がするけれど。

-1日目 チラシ配布

配布許可証 とにかく疲れたのであまり思い出したくない。

ビッグサイト、人がいない状態でも汗がダラダラ止まらないので当日ヤバい

— うなすけ(new daybreak) (@yu_suke1994) 2015, 8月 13

1日目 売り子

売り子やってます https://t.co/vUPf0D57F8

— うなすけ(new daybreak) (@yu_suke1994) 2015, 8月 14

はーい pic.twitter.com/jb6VQZ27VB

— うなすけ(new daybreak) (@yu_suke1994) 2015, 8月 14

目の前でドンドン新刊が消えていくのは見ててとても気持ちのいいものです。

この後にチラシ配りもありましたが、とにかく疲れたのであまり思い出したくない。

2日目 チラシ配布

2日目には参加せず、チラシを配るだけでした。とにかく疲れたのであまり思い出したくない。

3日目 一般参加

この日は音楽系のサークルがたくさんあるので、始発参加することにしました。

後ろの奴らの延々と続くアニメ批判聞いててゲンナリしてきた

— うなすけ(new daybreak) (@yu_suke1994) 2015, 8月 15

後ろの奴らの話、とにかく聞いてゲンナリする内容しかない

— うなすけ(new daybreak) (@yu_suke1994) 2015, 8月 15

もう「ぼくのかんがえたいちばんおもしろいアニメ」でも作ってろよ……

— うなすけ(new daybreak) (@yu_suke1994) 2015, 8月 16

待機列はこんな感じでした。とにかく汗がどんどん出てきて体力がガンガン減っていきます。東から並んで、入場即西の壁サークルに向かいましたが、まったく並ばずに買えて(かめりあさんにCD渡してもらって、「がんばってください!」って言えて感激)最高の体験をしました。

昼ごろ、ぶらぶらしてたら突然「かにTの人ですよね!それ欲しいんですけど、どこで買えますか?!」みたいなことを聞かれました。ちなみにこんなTシャツです。

今日は かに pic.twitter.com/CcqxFTEAAL

— うなすけ(new daybreak) (@yu_suke1994) 2015, 8月 15

戦利品

戦利品 CDが多いですね。まだ全然聴けてません。

感想

また行きたいです。

ふーゆた、はたっく、本当にありがとうございます。

2015年08月19日
2015年07月20日

情報共有おじさんとサバゲーにいったら

武器とか

あらすじ

入社後すぐにサバゲ部に入部し、何もかもをレンタル&貸してもらって屋内フィールドでサバゲデビューをしたうなすけ。適度に物欲を刺激された直後、追い打ちを掛けるように予定される屋外サバゲ。その日程は、給料日の数日後であった。そして給料日当日、情報共有おじさんと共にサバゲショップに向かったうなすけの運命やいかに……

武器を買いました

散財だよ〜〜٩(ˊᗜˋ*)و pic.twitter.com/6z9eHMcuTm

— うなすけ(借金予定有) (@yu_suke1994) 2015, 7月 15

買ったのは、東京マルイ MP7A1(フルセット)と、東京マルイ コルト M1911A1ガバメント(エアーコッキングガン)、あとBB弾とか手袋とかです。

給料日ということでテンション上がりつつも、使い過ぎはヤバいと自分に言い聞かせた結果、出費は6万円強に収まりました。よかったですね。

サバゲ当日

いつの間にか参加人数が膨れ上がって(計5人)、レンタカーを借りることになったりしました。情報共有おじさんのお陰で、集合場所、遅刻勢のピックアップ、会場までの道のり案内がスムーズにfacebook messenger上で執り行われました。

実際の会場がこちらです。サバイバルゲームフィールド HEADSHOT(ヘッドショット)

写真など

会場パノラマ 会場パノラマその2 蜂の巣

蜂の巣とか蜘蛛の巣があって虫苦手な人は絶対無理だなって思いました。

tweetたち

うなすけ「なにいってんですか!みなごろしですよ!!」

— ゆーけー/赤松 祐希 (@ukstudio) 2015, 7月 19

ものを壊す若者とサバゲーにきたら、リードエンジニアの銃が壊れた

— ゆーけー/赤松 祐希 (@ukstudio) 2015, 7月 19

物を壊す伝説をつくってる新卒の隣に座ったばかりに僕のエアガンが壊れた… pic.twitter.com/peJCdEjxs0

— あそなす (@asonas) 2015, 7月 19

新卒の隣に座るのをやめたらめっちゃ調子良くなってきた…

— あそなす (@asonas) 2015, 7月 19

朝の7時に集まって乗り合いで会場に向かって、一日中スポーツして、夕方には温泉に入って汗を流すの、昔の人たちはゴルフというスポーツでこれをしていたらしいが、現代人はサバゲでこれをします。

— Atom(アトム) (@FromAtom) 2015, 7月 19

新卒、俺が後部座席で寝てたらいきなりゆびならしながら「You!You!」とか言って指差してくるし、「water」とか言ってくるしほんと治安わるい

— ゆーけー/赤松 祐希 (@ukstudio) 2015, 7月 19

うなすけくんに3000円貸してるから財布に金が少ない

— ゆーけー/赤松 祐希 (@ukstudio) 2015, 7月 20

感想

今回のイベントは、カウント戦(撃たれたら自陣に戻ってカウンターを押して復活)とかフラッグ戦(撃たれたら退場、敵陣のフラッグを取ったら勝ち)を何回もやっていく感じでした。初心者の僕はあまり立ち回りとかもわかってないので、撃たれたけど、どこからかがわからないということも多く、復活できるカウント戦のほうが好きです。(適度に退場しないと暑さでやられてしまうので、やり過ぎないよう注意)

それでも回数を重ねていくうち、1対1の打ち合いになったり、自分が見つかるより先に相手を見つけることもできるようになりました。

フィールド内ではマスクをつけるので、顔がだいぶ隠れます。そのおかげか?知らない人に話しかけられる(話しかける)ことのハードルがずいぶん下がる気がします。なんかフィールド内では男性より女性と多く話してました。何なんでしょうね。

あと、迷彩 + 武器 + 眼鏡 + ポニテとか最強だなって思いました。

夏場の屋外はとても暑く、熱中症対策もしっかりしていく必用があることを思い知らされました。水分はたくさんとってるはずなのに頭が痛くなったりするので、逸る気持ちを抑えて休憩をこまめに取っていきました。

テンションが上って、サバゲ終わったあと温泉行こうとなったのは結果的にすごく良かったと思います。帰ってベッドにダイブ出来ましたから。

まとめ

サドンを糞ゲー糞ゲー言いながらやってる人、一度サバゲしたらいいと思う

— うなすけ(借金予定有) (@yu_suke1994) 2015, 7月 19
2015年07月20日
2015年07月12日

vimべんきょうにっき その2

vim logo

dotfilesの整理から

ukstudio先輩のdotfile(ukstudio/dotfiles)見てたら、stowを使ってdotfileへのsymlinkを貼っていてマジヤベエって気持ちになって、とりあえずstowを使えるようにしました。(Using stow instead of shell script:c97f1f8)

lightlineの設定を見直す

atomに代わってvimをメインのエディタにしていく決意をしたので、本格的に環境を整えていくことにします。これが今までのstatuslineです。 以前のstatusline

とりあえず作者さんの、作者が教える! lightline.vimの導入・設定方法! 〜 初級編 - インストールしよう - プログラムモグモグを参考にして、サクッとvimrcをコピペした結果がこちらになります。(Update lightline setting:c2461db) statusline変更後

こちらからは以上です。

あの……fugitive使って現在のbranchを表示させるのってどうやって……

2015年07月12日
2015年07月11日

6月辺りに買った漫画

本棚がない

漫画を買う量が一気に増えた

職場の先輩(HolyGrail先輩)がこんなエントリ(今買うべきおすすめのラブコメ漫画(追記あり))を書いたり、職場におすすめの漫画(1巻目だけ)を持ってきたりすすので、どうにも欲しい漫画が増えていきます。

オフィスで試し読み業が始まりました。1巻のみになるのでよさを感じたらみなさん買っていきましょう。

Kuniaki Horiさん(@holygrail)が投稿した写真 -

それに加え、社会人となったことで、学生時代に比べ自由にできるお金も増えたので、自制しないと際限なく漫画を買ってしまいそうになります。そんな僕が6月あたりに買った漫画を列挙します。

買った漫画

※画像は大抵amazonへのリンクです

恋と嘘

試し読み マンガボックス (MangaBox) / 人気マンガ家の新作連載が無料で読める!

政府通知届かないしなにをやっても駄目。禁じられた恋的な感じでもないけど、いけないことって感じがする。3人の関係がこれからどうなっていくのか……いや4人か?とりあえず買って読んでください。

不器用な匠ちゃん

試し読み 不器用な匠ちゃん - pixivコミックで漫画を無料試し読み

いいですね、趣味の話になるととたんに饒舌になる感じ。僕らそのものじゃないですか。それでいて、こう「私なんかが」みたいな意識が見える気がして、なんかすごく感情移入しやすい。とりあえず買って読んでください。

制服あばんちゅーる

試し読み 制服あばんちゅーる / さぬいゆう、伊丹澄一 / まんがライフWIN

は〜なんだこのハッキリ表には出さないけどお互いがお互いを好き合ってる感じ!!学生って感じがして読んでて「は~」ってなりました。とりあえず買って読んでください。

お前ら全員めんどくさい!

試し読み お前ら全員めんどくさい! | 日本最大級の無料Webコミック[COMICメテオ]

確かに登場人物全員めんどくさいし、読者から見れば國立先生も十分めんどくさい。めんどくさかわいい。webで試し読みもできますし、とりあえず買って読んでください。

つるつるとザラザラの間

試し読み つるつるとザラザラの間/月子 - モーニング・アフタヌーン・イブニング合同Webコミックサイト モアイ

虻川さん、本当に白瀬くんのこと好きなんだな……というのが1巻の終盤から2巻にかけての話とかでわかります。HolyGrail先輩も言ってますが、ヒロインの虻川さやちゃんがかわいいのでとりあえず買って読んでください。

第13保健室

試し読み 「第13保健室 1」 | ゲッサン少年サンデーコミックス | 小学館

マンモス校すぎて、保健室が12もある学校の話。個性的すぎる保健室の先生がまだ全員登場していないあたり恐ろしい。2巻が出てるようですが、まだ買ってないです。何かと2人の先生が絡み合うのでとりあえず買って読んでください。

ダンジョン飯

独特の世界観というか、説得力というか、食べてみたくなるというか。「ヤダーーーーッ!!」ってなる気持ちもわかりますが、ちょっと好奇心のほうが勝っちゃいそう。とりあえず買って読んでください。

くまみこ

試し読み くまみこ - 無料コミック ComicWalker

これは前々から欲しかったけど、amazonで品薄で、店頭で見つけてアッアッとなって一気に買いました。4巻以降、一体どうなるんだ…… まちがかわいいのでとりあえず買って読んでください。

とりきっさ

試し読み とりきっさ!|月刊COMICリュウ

これは友人のふゆたくんにおすすめされて買った漫画。ラブコメばっか読んでるせいか、「ここからどういう恋に発展するんだ?」と考えてしまいますがほのぼの系漫画だと思うのでずっとこのまま……なのかな?数日後に2巻が出るので、とりあえず買って読んでください。

あせびと空世界の冒険者

試し読み あせびと空世界の冒険者|月刊COMICリュウ

これは上の本を見てた時に同じ出版社のページで紹介されてて気になって買ってしまった漫画。異世界ファンタジー系で、絵が綺麗です。あと、あせびさんが変形してカッコイイです。とりあえず買って読んでください。

まとめ

これ以外にも「とんかつDJアゲ太郎」とか「ジョジョ」とか買わないといけないので財布がマッハ。とりあえず買って読んでください。この記事書くためにamazonアソシエイトに参加しました。

2015年07月11日
2015年07月10日

atom plugin "do-not-use-atom"を作った

do-not-use-atom

結局vimを使おうという目標

結局、hackableなeditorとは言ってもかゆいところに手が届かない、という事態がありました。具体的には、「拡張子のない、とあるファイルをrubyとみなしてsyntax highlightしてほしい」という願いです。vimであれば、filetypedetectなどで設定できますが、atomだと……その手のプラグインを入れてみましたが、バグかなにかで期待通りの動作をしてくれませんでした。

vim(emacs)での設定法は後ろの席の人に聞けばすぐわかるのですが、atomだとどこを設定すればいいのかわからず、stackoverflowを見てもなにやらよくわからないディレクトリに潜って設定しなければいけないような解説がいくつも出てきて、結局わかりません。

やはり……vimか……

atomを起動すると警告が出るatom package

そこで、「atomを起動すると警告が出るatom package」を作りました。と言いたいのですが、まだそこまではできていません。プラグインを起動するとアラートが出て、atomが閉じるプラグインを作りました。

do-not-use-atom

do-not-use-atom page

こんな感じで動作します。

do-not-use-atom 動作

ctrl + alt + o でアラートが出ます。閉じているのはatomのウィンドウのみで、プロセスは死んでいません。

まとめ

機能増やすためにはatom使わなくちゃいけないしなんのために作ったか全くわからないのにもうstarが付いている。

2015年07月10日
2015年06月15日

esaの日報から勤務時間を計算するRubyスクリプトをつくった

esaとは

弊社では、業務日報はesa(https://esa.io)で管理しています。

さてそのesaですが、先日APIがpublic β公開されました(release_note/2015/05/27/esa API v1をβ公開しました)。同時にAPI docsとRuby Gem(esaio/esa-ruby)も公開されました。

ということで、勤務時間を計算するRubyスクリプトを作れそうだったので、作ることにしました。

スクリプト作成までの道のり

access token取得

まず、今回は読めればいいだけなのでread onlyでaccess tokenを取得します。右上にある自分のアイコンを押して飛ぶ画面でaccess tokenを発行します。 access token

とりあえずサンプルコードを実行

access tokenが取得できたら、githubのREADMEに記載されているusageに記載されているコードを試してみます。

require 'esa'

client = Esa::Client.new(access_token: "xxxxxxxxxxxxxxxxxxxxxxxx", current_team: "xxxxxx")
puts client.posts

このコマンドで、esaに投稿されている記事がガッと取得出来ました。多すぎますね。

検索クエリで絞り込む

欲しい記事のカテゴリ、投稿者はわかっている(日報なので)ので、検索クエリを用いて特定の記事を取得します。usageを読むと、postsに引数としてクエリを渡してやると良さそうです。

require 'esa'

client = Esa::Client.new(access_token: "xxxxxxxxxxxxxxxxxxxxxxxx", current_team: "xxxxxx")
puts client.posts(q: "user:unasuke category:日報/2016/06")

これで、投稿者が"unasuke"で、カテゴリが"日報/2015/06"の記事(今月の日報)が取得できます。15分毎にAPIリミットがリセットされるとはいえ、あんまり何回もGETするのもアレなので応答を何かに格納しておきましょう。

require 'esa'

client = Esa::Client.new(access_token: "xxxxxxxxxxxxxxxxxxxxxxxx", current_team: "xxxxxx")
response = client.posts(q: "user:unasuke category:日報/2015/06")

記事の本文を取得する

取得ができたので、本文の解析に移ります。まず本文はどこに入っているかというと、こうなっています。

{"posts"=>
    [{"number"=>3949,
      "name"=>"unasuke",
      "full_name"=>"日報/2015/06/15/unasuke",
      "wip"=>true,
      "body_md"=>"markdown文字列",
      "body_html"=>"html文字列",
      "created_at"=>"2015-06-15T20:05:50+09:00",
      "message"=>"Update post.",
      "url"=>"https://hoge.esa.io/posts/3949",
      "updated_at"=>"2015-06-15T20:34:16+09:00",
      "tags"=>[],
      "category"=>"日報/2015/06/15",
      "revision_number"=>2,
      "created_by"=>
...

解析するのに便利なのはmarkdownなので、markdownでの記事内容を取得します。このようにします。

require 'esa'

client = Esa::Client.new(access_token: "xxxxxxxxxxxxxxxxxxxxxxxx", current_team: "xxxxxx")
response = client.posts(q: "user:unasuke category:日報/2015/06")

for i in 1...response.body["posts"].size do
  puts response.body["posts"][i]["body_md"]
end

日報の中から時間が書いてある部分を抜き出す

日報の中から合計勤務時間が書いてある部分を抜き出します。僕は日報の勤務時間を

# 勤務時間

| 場所 | 時間 | 小計 |
| --- | --- | --- |
| オフィス | 10:50 - 13:00 | 2:10 |
| オフィス | 14:00 - 20:30 | 6:30 |
| 合計 |  | 8:40 |

このように書いているので、「合計」が含まれる行を持ってくれば良さそうです。また、その中でも、コロンで区切られている数字のみを持ってくればいいので、以下の様に正規表現オブジェクトを作成して抜き出しました。

require 'esa'

client = Esa::Client.new(access_token: "xxxxxxxxxxxxxxxxxxxxxxxx", current_team: "xxxxxx")
response = client.posts(q: "user:unasuke category:日報/2015/06")

for i in 1...response.body["posts"].size do
  puts response.body["posts"][i]["body_md"].scan(/^.*合計.*$/)[0].scan(/\d+:\d+/)
end

これで、以下の様な配列が得られました。

["8:00", "9:10", "8:00", "10:00", "7:30", "7:50", "7:30", "7:30", "8:30", "8:00"]

時間の計算をする

あとは簡単で、時間の計算をしてやれば合計勤務時間が求まります。最終的なコードはこのようになりました。

まとめ

esaがどんどん便利になっていきます。(scriptの名前はアイドルマスターシンデレラガールズの三好紗南から取りました)

2015-06-21 追記

sana.rbの動作を修正しました。

2015年06月15日
新しい投稿
古い投稿