RubyKaigi2016 3日目レポート

2016年09月26日
区分
ruby
報告者:
endo

こんにちは、endoです。

3日目のレポートになります。

ホテルの感想

まずはホテルの感想から始めます。

食堂が刑務所みたいな雰囲気を感じ、個人的には好きでした。 初日はwifiが繋がらない部屋に当たり、すぐさまフロントに電話をして部屋の移動を願い出ました。

なお、同じ階の部屋移動するだけでwifiが繋がるようになりました。 なんだったんだ、あの部屋は・・・

ホテルのフロントの方の対応が良く、満足しました。 トラブル起きた時の対応が親切だと、よかったなって思えますね。

では、レポートを開始します。

Ruby Committers vs the World

Ruby Committersの質疑応答

gitに移行しないの?

redmineとsvnが連携しており、それを紐解いていくほどの効果が見受けられない。 実際にCommiterはgitで運用をしており、現状での管理に問題があるとは認識していない。

Python3のリリースはどう思いますか?

互換性を保つようにしたい 見習うところはあるので、そこは見習うようにする

rbenvのような機能は?

rbenvはrubyの外側なので、rubyに入っても嬉しくないと思う

Ruby3x3: How are we going to measure 3x?

発表者:Matthew Gaudet

正しいベンチマークの取り方

CPU・温度によっても変化する。 タイポで早くなったと勘違いすることがある。

High Tech Seat in mruby

発表者:Yurie Yamane

mrubyでウォッシュレットを作る

状態遷移は開始位置によって、結果が異なったりする。 ロゴブロックでデモをしてくれました。 ガチの組み込み系の話でした。

It’s More Fun to Compute

発表者:Julian Cheal

rubyで音楽を奏でる

rspecの結果により、音を出したり出さなかったりして、メロディーを奏でる その他にもアルゴリズムで音楽を作成していました。

Optimizing Ruby

発表者:Urabe, Shyouhei

rubyの処理速度を早くする

メソッド実行時に処理の最適化がされていない部分がある。 最適化できる部分は最適化をして、処理速度を早めた。

Dive into CRuby

発表者:NARUSE, Yui

Crubyへの関わり方

新機能(メソッドの追加や既存メソッドの拡張)、最適化、トラブルシューティング補助などがある。

新機能は必要?

rubyにtouchを入れてほしいという要望があった。 ファイルの更新時刻を変更したいからです。 touchには次のような効果があります。

  • ファイルの更新時刻を修正する
  • ファイルを作成する

touchだと、余計な機能が入るのでお互い不幸になるという話でした。

感想

自分は初参加でしたが、普段話すことはないだろうエンジニアの方たちと交流ができて楽しかったです。

コードについては、rubyの仕組みの部分が大きく占めていたので、調べておけばよかったなと思ってます。 単純に書くだけではなく、なぜ必要になったのかの背景があるとメソッドの使う場面がわかりやすくなると思うので、言語の部分を今後は学んでいきたいと思います。

英語はエンジニアにとって必須科目のようなものなので、ここは普段からなんとかしたい・・・orz

Ruby会議に参加してから、OSSに貢献してみようかな?と思い、gem作ったり、使用したgemにpull reqを送るようになりました。 自分の中でプログラミングに関わる意識の変化があったので、参加してよかったです!

補足

現在では公式サイトから講演が見ることができます。 参加することができなかった人や、もう一度聞きたいという方にはピッタリですね。

RubyKaigi2016 2日目レポート

2016年09月23日
区分
ruby
報告者:
kawaguchi

こんにちは、kawaguchiです。
2日目レポートをお送りいたします。

開場直後、企業ブースの様子

2日目のendoさんの様子です rubykaigiのスポンサーになった企業は、企業ブースという部屋で自社の宣伝ができます。
11時くらい以降に行くと企業の担当者がいらっしゃるので話をすることができるのですが、朝早いと担当者がまだ到着していません。

担当者不在をいいことに写真をたくさんとってきました。

会場の様子

机には電源コンセントが埋め込まれていました。

会場限定ガチャ

2回分のコインを投入したのですが、よくわからない缶バッチがあたったので3回目はやりませんでした。

昼ごはん

お昼になるとお弁当の配布が始まります。運営の角谷さんがお弁当の手渡しをしておりました。
お弁当は室内でも食べれるのですが外でも食べることができます。

無限コーヒー

企業ブースには、コーヒーポットとスポンサーによるお菓子が並んでおりました。
ありがたく頂戴しました。

行ってきましたよ、高倉二条に

感想

自分の観測範囲外にあるRubyを知ることができて大変興味深かったです。 さっそく東京に戻ってからrubyメーリングリストに登録しました。

最後に宿泊所の夕食で食べたトマトの写真を貼って終わりにしたいと思います。

以上です。

RubyKaigi初日レポート

2016年09月15日
区分
ruby
報告者:
endo

こんにちは、endoです。

今回は「RubyKaigi2016」に参加したレポートになります。 当社では、RubyKaigiの費用の「チケット代」「交通費」「宿泊費」「懇親会」は全て会社で負担していただきました。 このような対応をしていただいた会社と、出張している間に業務を行ってくれたチームメンバーに感謝です!

では、初日のレポートを行っていきます。 なお、講演は英語が多く、内容を把握するのに苦戦しました(´・ω・`)

英語は重要だ・・・orz

Ruby3 Typing

発表者:Yukihiro “Matz” Matsumoto

Ruby3の目指す方向性

  • パフォーマンス
  • 並列処理

今回はこの中でも「型」についてのお話でした。

ダックタイピング

Rubyにはダックタイピングと呼ばれる考え方があります。 「アヒルのように歩き、アヒルのように鳴くものはアヒルに違いない」という考え方です。 ダックタイピングは柔軟性が高く、期待される振る舞いのみを考えればいいです。 期待される行動は、自分たちの頭の中にあります。

動的型言語のデメリット

実行するまでエラーかどうかがわからない。 エラーメッセージが親切ではない。 エラーが起こるかどうかわからないので、テストでカバーするようになっている。 静的型言語はメソッドに型が書かれているので、どのような値が必要かどうかがわかる。

型を導入する方法

型はほしいけど、型を記入することは避けたい。 現状の型推論ではない方法での、型推論を導入する。 100%の精度はできないが、0→80%までの精度になれば、ないよりはマシになる。 失敗した場合は、元に戻せばいい。

リリース時期

ケネディ大統領が月に行くという目標を定めてから、実現した。 目標は必要。 東京オリンピックが始まる頃にはリリースしておきたい。

dRuby in the last century.

発表者:Masatoshi SEKI

RubyとWebをつなぐ

HTTPをアプリに埋め込むことを楽しんでいた。 RubyとWebをつなぐ作業をしていて、翻訳作業をすることが嫌になってきた。

dRubyの紹介

分散オブジェクトシステム プロセス越しにメソッドが呼べる プロセス間でオブジェクトが送れる

Welcome to haconiwa - the (m)Ruby on Container

発表者:Uchio KONDO

haconiwa

mRubyで作成したコンテナ技術 もともとはCRubyで作っていたがsyscallsの限界があり、mRubyに書き換えた。

haconiwaを作った背景

docker/lxcでバグに遭遇したが、なかなか理解できなかった。 コンテナ技術を理解するためにhaconiwaを作成。

A proposal of new concurrency model for Ruby 3

発表者:Koichi Sasada

rubyの並列処理について

rubyの並列処理はGVL(Giant VM Lock)の関係でI/O待ちが発生している このため、rubyの並列処理は遅いということがよく言われる

guild

rubyの並列処理を早くするための新しい概念 GVLを解放することで、並列処理を早くするようにする

Isomorphic web programming in Ruby

発表者:Yoh Osaki

railsでreact likeに書けるようにする

jsが嫌いなので、rubyでreactを使いたいということで、作成 デモ講演を披露してくれました

Scalable job queue system built with Docker

発表者:Takashi Kokubun

Job Queueシステムを作成

カジュアルにJobが実行されていて、一元管理ができていなかった。 一元管理をするために、新しいJob Queueシステムを作成した

懇親会

この後は懇親会がありました。 個人的には海外の参加者の方と話をしてみようと思い、海外の参加者の方に話しかけていました。 ただ、日本語が普通に喋れる方だったので、日本語で会話をしていましたorz

海外の参加者の方との交流も図れるのがいいですね!

ちなみに自分がお話をした海外の参加者の方は、普段使う言語がPython・Goでした(`・ω・´)

こういう方でも参加しているのに驚きました。

初日感想

ノベルティが配布され、自分はステッカーを漁りまくっていました。 ブースではコーヒーが飲み放題で、交流も図れるので情報交換ができました。 このような対応していただいたスタッフの皆様に感謝です!

コミッターの方々は当たり前のように英語で話をするので、レベル差を感じました。 なんで英語そんなにできるんだ・・・

あと、見ている層が違うんだなーと感じた1日でした。

現場からは以上です。

iko-yo.netをruby2.3.1にアップグレードしました

2016年09月14日
区分
ruby
報告者:
kawaguchi

kawaguchiです。

本番サーバのRubyを2.1.0から2.3.1にアップグレードしたことで変わったことについて書いていきます。

CPU

昼間はdeployによる変動が大きいので夜間の時間帯を切り取っています。 アクセス解析を見たところ、比較した時間帯のアクセスは同じくらいでした。

CPU使用率の平均が370から210へ下がりました。

2.1.0

2.3.1

レスポンスタイム

281msから262msへ下がりました。

2.1.0

2.3.1

まとめ

すごい

いこーよの記事をAMP化しました~デザイナー編~

2016年09月13日
区分
HTML
報告者:
ojika

デザイナーのojikaです。

エンジニアakiyama氏とは別の知見(?自分が勝手にひっかかったともいえる失敗談)をご紹介したいと思います。

記事に関しては、探すもCSSやデザイン的な部分はあまり記述ありませんでした。英語の記事ならあったのかもしれませんが、英語ヨメマセン(´・ω・`)スミマセン 前編の記事が完結にまとまっていてスバラシすぎるので、アレな内容が加わることをお許し下さい。 (やめて!!電車のホームで後ろから刺さないで!!)

AMPのCSSについて

公式ドキュメントはこちら https://www.ampproject.org/docs/guides/responsive/style_pages.html
制約は少ないので、こちらを確認して進めていけばほぼ問題なくできます。

いこーよのAMP化ではCSSでアニメーションさせたり、webフォント(本体サイトではアイコンに使用)を使用したりはしませんでした。矢印などもcontent:'>'で対応してしまいました。 AMPは軽くないと!ですね( ´∀`)bグッ!

つまづきポイント1:slimにインラインでCSSを書く

AMPCSSはインラインでかくものと公式に書いてあったので、とりあえず.slimファイルに直接書くことにしました。

style amp-custom

html出力結果

<style>amp-custom</style>

あっハイだめですよね~。(;・∀・)ワカル
styleの中はテキスト扱いなので、上記のように|(パイプ)も必要ですよね。 ↓ ということで

style(amp-custom)
  | 
    header {
      margin: 0;
    }

html出力結果

<style amp-custom>
  header {
      margin: 0;
  }
</style>

( ´∀`)bグッ!きちんと認識してくれました。 slimにインラインでCSSなんて書いたことなかったのでこんな初歩でヨクワカラナイ!!!となっていました。初心にかえろう(;´д`)トホホ…

つまづきポイント2:backgroundでLINEボタン画像を読み込む

akiyama氏も書いていましたが、amp-social-shareにはLINEボタンがありません。 そのためボタンの画像もLINE公式の設置方法ページから画像をダウンロードして設置する形になります。

↓ テキストだしとりあえずいつもどおりやってみました。

amp-social-share[type=line] {
  background-image: image-url("s/articles/amp_line.png");
}

↓ CSS出力結果

amp-social-share[type=line] {
  background-image: image-url("s/articles/amp_line.png"); 
}

パス展開されてません!当然画像表示されてません!(;・∀・)

どうやらviews配下のファイルにCSSを書くときはimage-urlを使って書くとAsset Pipelineにのらないので、デプロイされた時にフィンガープリントがつかずに表示されないのだそうです。 そのかわりにimage_pathというものが使えます。

↓ このように。

amp-social-share[type=line] {
  background-image: url('#{image_path("s/articles/amp_line.png")}');
}

↓ CSS出力結果

amp-social-share[type=line] {
  background-image: url('/assets/s/articles/amp_line.png');
}

ワー(^O^)assetsさんコンニチワー! ということで、表示されました! いこーよのボタンは角丸ですのでtwitterとFacebookにもradiousを指定してならべました。 仲良く並んでいますね。ε-(´∀`*)ホッ

つまづきポイント3:各種iframeの高さ調整

いこーよの記事にはinstagramとyoutubeとgooglemapが使われていることがあります。akiyama氏も書いていましたが、今回amp-iframeを使用しました。

そこで、widthとheightを指定するのですがyoutubeは横長(googlemapはyoutubeにあわせました)instagramは正方形だったり縦長だったりでビシっと決められません(´・ω・`) 結局iframewidth="320"height="320"と固定値を指定して、CSSで高さを指定したのでした。

↓ instagramとyoutube・googlemapのCSS振り分けは本体でもやっていたので同じようにやりました。こんなかんじです。

amp-iframe[src^="https://www.instagram.com/"] {
  margin: 20px auto;
  ....
}
amp-iframe[src^="https://www.youtube.com/"],
amp-iframe[src^="https://www.google.com/maps/"] {
  margin: 20px auto;
  ....
}

instagramの高さに関しては、あまり数もないことから、現時点で記事に上がっている一番縦長なものが表示されるようにしました。 今後変更があるかもしれません。

つまづきポイント4: つまづきポイント2の修正

途中で管理の都合からCSSがインラインにベタ書き~ではなくrenderで読み込みに変更されました。そりゃそうですねー何百行もあるんですから… そしてakiyama氏の神の一言「slimはインデントが一つ無駄に深くなるから」でerbになりました(´ω`)フフ

ファイルをわけたところで、おやLINE画像ちゃんがまた表示されていない、ということに気づきました。erbになったので画像読み込みのパス部分を変更しなくてはなりません。

amp-social-share[type=line] {
  background-image: url('#{image_path("s/articles/amp_line.png")}');
}

amp-social-share[type=line] {
  background-image: url("<%=image_path('s/articles/amp_line.png')%>");
}

はい、ふつうのslim→erbの変換でしたね。でもはじめきづかなかったので悩んでいました…。

つまづきポイント5:つまづき ポイント3の修正

akiyama氏の記事にもありましたが、instagramの読み込みがiframeからamp-instagramに変更になりました。 よって、つまづきポイント3も若干修正をしました。

amp-iframe[src^="https://www.instagram.com/"] {
  margin: 20px auto;
  ....
}

amp-instagram {
  margin: 20px auto 0;
  ....
}

特に難しいことはありませんでした。むしろ前より楽だったぐらいです。

以上がCSSでつまづいたことでした。 あとは本体のCSSをコピペコピペして必要なものだけを移植したのですが、 地味にresetを選ぶのが面倒でした┐(´д`)┌

画像

AMPページに表示するヘッダーロゴについて

ヘッダー部分に表示されるロゴを作るのですが、それに関しては公式ドキュメント通りにすすめればヨサソウです。 https://developers.google.com/search/docs/data-types/articles#amp-logo-guidelines

↓ ざっくりとこのような要件でした。

  • ファイルは.jpg .png または.gifのような、ラスタデータでなければならない。 .svgみたいなベクターデータはダメです。
  • アニメーションはダメです。
  • アイコンではなくフルワードマークまたは完全なロゴを使用しましょう。
  • 白または明るい背景で見やすいものにしましょう。
  • サイズは60x600px矩形に収まるように作りましょう。
  • 正確に60px高(推奨)または正確に600px幅でなくてはならない。 例えば450x45pxは、600x60px矩形に収まりますが、ダメです。
  • 60ピクセルの高さを維持することで幅が600px以上になる場合には、幅600pxにダウンスケールし、高さは元の縦横比を維持するために60px内で余白を取ります。
  • 単語ベースのロゴは上下に余白を6pxずつとるため最大48pxとなり、高さ60px高に対して垂直方向に中央揃えなければなりません。
  • 単色の背景とロゴはワードマークの周りに6px最小のパディングを含める必要があります。

上記の要件だったのですが、いこーよのロゴは四角で囲まれており、60px+上下余白6pxずつをとっても、AMP対応している他社のロゴに比べて大きく圧迫感があったため、90%縮小し中央にそろえてしまいました。

またAMPはスマホ特化のページですが、画像の対応については書いておらず、言われたとおりのサイズで表示するとロゴがボヤけます。 特にダメとも書いていなかったと判断したので、倍の大きさでロゴ画像を制作し、縦60pxと縦横比そのままの横幅を指定しています。 (ここは実際にAMP記事としてgoogleに表示されたときに確認し、なにか問題がありそうなら変更しようと思っています。)

AMPページに静的に画像を読み込む

slimに静的に書く場合、amp-imgタグを使う以外は意外とふつうでした。 通常はimage_tagを使っていたりするのですが、amp-imgタグを使う必要があるためasset_pashを使用しました。

amp-img src=asset_path("s/articles/amp_logo.png") alt="子どもとおでかけ情報いこーよ" width="127" height="60"

これで問題なく表示されました。チャンチャン

Google Analytics

公式ドキュメントはこちら https://developers.google.com/analytics/devguides/collection/amp-analytics/ こちらも公式ドキュメント通りにちまちま進めていきました。

↓ このような形で値の部分も|パイプでslimに対応させています。

amp-analytics type="googleanalytics" id="analytics1"
  script type="application/json"
    |
      {
        "vars": {
          "account": "UA-xxxxxxx"
        },
        "triggers": {
          "任意の名称": {
            "on": "visible",
            "request": "pageview"
          },
          "任意の名称": {
            "selector": "クリックをとる箇所のセレクタ",
            "on": "click",
            "request": "event",
            "vars": {
              "eventCategory": "任意のカテゴリ名",
              "eventAction": "任意のアクション名"
            }
          }
        }
      }

まとめ

一度形を作ってしまえば特にこれといって難しかったなーということはないのですが、slimだとかerbだとかで作っているという記事は殆ど無かった(&デザイナーがやってる記事はほぼなかった、とおもう)のでそのあたりで何度かつまづきました。 そういう地味なところでつまづく人はあまりAMP化を対応しないのではと思ったのですが、どこかの誰かのためになればいいな、と思い恥を忍んで書きました☆(ゝω・)vキャピ

全てのAMP化仲間に幸あれ☆ミ

 | 

技師部隊からの
お知らせ

【求人】エンジニア募集しています。

本頁の来客数
八十七万千百七十六名以上(計測停止中)

メンバー一覧

アクトインディ技師部隊員名簿

アクトインディ技師部元隊員

アクトインディへ

カテゴリー

アクトインディ

aaaa