Webナントカ

個人開発、読んだ本、サービスの話などを書きます╭( ･ㅂ･)و ̑̑

Rails Developers Meetup #2 （東京会場）に参加してきた

勉強会

概要

【増枠】Rails Developers Meetup #2 （東京会場） - connpass

所感

  • @onkさんの話が日常の開発で大切だと感じた
    • ドリコムでの共通認識の作り方が参考になった
      • bundle update当番や野良コードレビューとかはやってみたい
    • 開発環境を良くしていくために投資していきたい
  • DB制約大事
  • 今関わっている案件的にshibaraku使えそう

『クラシルのwebサイトをちょっとした改善で100倍速にした話』

奥原 拓也さん（dely株式会社 リードRailsエンジニア）

  • webの表示改善
    • 59.7sec => 0.70 sec
  • キャッシュの導入
  • 画像の最適化
  • 不要なimportの削除

キャッシュの導入

  • ページキャッシュ
    • 廃止
  • アクションキャッシュ
    • 廃止
  • フラグメントキャッシュ
    • 期間を指定してキャッシュできる
    • 1549ms => 131ms
    • key/valueがあったら読み、なかったら書く
    • 更新したい場合は？
      • 特定のフラグがあるとキャッシュを更新する

画像の最適化

  • 画像の圧縮
    • TinyPNG
    • brew install jpengtim
    • brew install pngguant
  • 画像の最適化
    • デバイスに最適なサイズを読む

不要な外部ファイルの削除

結果

  • 早くなった

その他

  • テックブログ書いてる
  • denyはRailsエンジニア一人らしい

『ふつうのRailsアプリケーション開発』

大仲 能史さん（株式会社ドリコム スペシャリスト） @onk

  • RailsエンジニアがRailsエンジニアらしい仕事ができること
  • bin/setup, bin/update
    • 1コマンドで開発準備が整うようにしておけという話
  • SimpleとEasyの違い
    • 設計に筋が通っていて、すっきり（絶対的）
    • 使う時に、簡単（相対的）
  • Kaminari
    • 各環境向けのコードをプラグインとして切り出すことで、コアの設計指針をSimpleに保つ
    • 認証系のgemはそうなっていないのでは

RailsとEasy

  • CoCを知っている人にとってはEasy
  • 90%のことをやる
  • 一般的でなくても、使う時にEasyなら取り入れていく
    • rails5.1のsecrets.ymlのshared機能
  • 共通認識の元でEasyであることを加速させていくフレームワーク

ドリコムとEasy

  • Will2Kaminari
  • to_id
  • count_by
  • activerevord-unsigned-column-ext
  • activerecord-turntabke
  • ユーザ認証
    • 自作するが、deviseとIFを合わせる

共通認識を作る

  • まずは個人で始める
    • 自分の認識と世の中の認識を揃える
      • 大量にインプットする
      • はてブ
      • Qiita
  • bundle update当番
    • 使っているgemがどんなもので、どのように開発しているかを眺める
      • 面白い
      • 興味が湧く
  • 野良コードレビュー
    • 社内の複数アプリを全体的に眺める
    • 同じ轍を踏まない
    • not null
    • unique
    • Datetime -> Time
    • ユーザの持ち物はcurrent_userから辿る
    • ユーザの持ち物のモデルにはUserを付ける
  • 重複コードをgem化する
  • 最後まで直しきる
  • 複雑なことはしない
    • MVC
    • FromObject以外はほとんど使わない
    • Serviceはやりきるなら導入する
      • あまり導入しない
  • OSS文脈に乗る
    • onkcop
    • CI/CD

Easyを作る

  • 発生しないようにする
  • 自動化の鬼になる
    • 手順書を見かけたら自動化可能だと思え
    • 全自動が無理ならせめてスクリプト化する
  • 時間がかからないようにする
    • db:migrate:resetではなくdb:setupを使う
  • デフォルト値を入れる
    • 書きたくないものを書かなくても良いようにしたい
  • 認証をbefore_actionでやっているなら、ApplicationControllerに書けないか検討する
    • すべてに適用してから一部を外す
  • 一般的かどうかを意識する
    • DHHに習う
      • 基本はそうだけど、こっちのほうが便利じゃない？

Easyを作る体制を作る

  • 楽をするための努力を惜しまない
  • 足回りは最初に整える
  • テスト
    • もちろん書く
  • CI/CD
    • もちろん回す
  • メトリクス
    • もちろん取る
  • シンプルに始める
    • routes
      • REST準拠
    • schema
      • 正規化を崩さない
    • ブランチ運用
      • github flow
    • Issue / PRのテンプレートを書いておく
  • 改善がまわる環境づくり
    • ふりかえり
    • 定点観測

『技術的負債とリファクタリング』

@sinsoku_listyさん（株式会社grooves）

  • DB制約
  • 変更しやすいコード
  • リファクタリングいつする？

DB制約

  • null: falseは基本的に必須
  • null: falseがつけられなければ、Tableを分ける
  • unique制約

変更しやすいコード

  • コードの可視性
    • private
    • Refinement
  • 読みやすいコード
    • 命名
    • ABCSize
    • 過剰なDRYより分かりやすさ

リファクタリングいつやるか

  • 良いコードは伝説
  • ソフトウェア開発は難しい
  • 少しずつ直していく
  • コードを読んでいくタイミングで
    • 理解した内容をコードに反映する
    • スコープを狭くする（未使用なら消す）

『ドリコムで使ってるgem一覧』

@sue445さん（株式会社ドリコム）

ドリコムで使ってるgem一覧 #railsdm

  • 11アプリのGemfileを集計
    • 集計スクリプト書いた
    • 社内gemは除く
  • メジャーどころ集まりすぎたので、マイナーどころを紹介
  • komachi_heartbeat
    • 死活監視
  • global
    • yamlの設定をいい感じに扱う
  • onkcop
    • ドリコムのrubocop
  • spec-parameterized
    • パラメタライズをテストする
  • shibaraku
    • start_at/end_atがあるmodelを扱うgem
  • activerecord-simple_index_name
    • index名からtable名を除く
  • activerecord-turntable
    • DBを水平分散する

『ペパボで使ってるgem一覧』

@kenchanさん（GMOペパボ株式会社）

  • shu-cream.net
  • こちらもメジャーどころではなくテーマを絞る
  • 文字系
    • moji
    • makimoto/romaji
    • mwunsch/rumoji
    • willnet/gimei
      • 日本語のテストデータ作成
  • ペパボ発
    • hsbt/minitest-power-asert
    • yml_ref_resolver
    • capistrano-release-notification
    • rspec-default_http_header
    • global_sign

『データフィードの現場で書く Rails アプリケーション』

@284kmさん（株式会社フィードフォース）

  • Webmockの話
  • データフィードの現場とは
    • データフィードとは
      • 保有している商品などのデータを外部サービス（広告配信先など）のフォーマットに変換して送信する仕組みのこと
  • ふつうでありたい
  • とはいえ、特殊もある
    • koala
    • google
  • テスト
    • http
    • web mockを使う
      • httpリクエストがあたかも行われたかのように振る舞う

初めてOSSにコントリビュートをした

やっていき

対象PR

Fix auto diagram generation by kikunantoka · Pull Request #252 · voormedia/rails-erd

経緯

  • 下記のように、公私で作るRailsアプリケーションは大体、タスクを追加して、rails db:migrateするとER図が自動出力されるようにしていた
  • ただ、プロジェクト毎に、同じタスクを生成するのも面倒なので、ジェネレータを作ろうと試みている時に、本家にジェネレータがあることに気づいた
  • しかし、下記issueにもある通り、動作していないようだった
  • issue内に修正方法が提示されていたので、修正を行い、ドキュメントを追記し、PRを送った
  • 1ヶ月ぐらい放置された後、しれっとマージされて、リリースされていた

結果

rails-erd 1.5.1からrails generate erd:installするとタスクが生成され、開発環境で、rails db:migrateする際にER図を出力できるようになった。

しれっとマージされた様子

今後

RailsやReactでアプリケーションを書くようになって、OSSにはお世話になりっぱなしなので、ドキュメントでもなんでも構わないので、機会があれば、貢献していきたい所存。

mochaを買った

サービス 買った

MacのHatena Blog用のMarkdownエディタとして、mochaを買った。240円。

mocha

mocha

  • Reo Hokazono
  • ライフスタイル
  • ¥240

使い初めて3ヶ月ぐらい経ったけど、継続して使っている。

それまでMarkdownエディタとして、kobitoでHatena Blogの記事も書き、タグで管理していたが、Hatena Blogといい感じに同期をして欲しかったので、探してみた。

要件として、

  • Hatena Blogと同期を取ってくれる
  • Markdownで書けて、プレビューできる
  • シンプル

の3点があり、mochaはこれらを満たしていた。

ウィジェット系はサポートされていないので、下書き専用として使っていて、公開時にWeb上からウィジェットを追加して、予約投稿を行っている。

ウィジェット系と予約投稿のサポートと少しのUI改善があれば、文句なしだが、現状でも240円出す価値は十分あると思う。

以下、購入時の感想

MacのTwitterクライアントをTweetDeckにした

サービス

今まで何の気なしに、5年前くらいにMacを買った時におすすめされた夜フクロウを使っていたが、社内で各自が使っているTwitterクライアントの話になり、それを機に見直してみた。結果、Macアプリの中だと、TweetDeckが使い心地が良く、乗り換えた。

TweetDeck

TweetDeck by Twitter

TweetDeck by Twitter

  • Twitter, Inc.
  • ソーシャルネットワーキング
  • 無料

Twitter公式になったアプリなだけあって、機能は必要なものが揃っていて、UIも非常に分かりやすい。カラムを自由に追加でき、ドラッグ&ドロップで入れ替えられるので、勉強会の時は、ハッシュタグでサーチした結果をメイン画面に持ってきたり、コンテキストに応じて、メイン画面に持ってくるカラムを入れ替えたりしている。TweetDeckを使い始めてからリストをちゃんと活用するようになった。

夜フクロウ

夜フクロウ

夜フクロウ

  • aki-null.net
  • ソーシャルネットワーキング
  • 無料

ミニビューで表示している時のタイムラインの情報量が多くて良かった。基本的に不満もなかったのだが、画像が展開されない点が気になった。アイコンかわいい。

Janetter

Janetter for Twitter

Janetter for Twitter

  • Jane, Inc.
  • ソーシャルネットワーキング
  • 無料

機能としては十分そうだったが、アイコンがRetina対応してなくてｳｯってなった。Retina使ってなかった時は、Retina対応とか全然意識してなかったけど、Retina対応大事だと思った。

Proもあるようだが、Proは試していない。

Janetter Pro for Twitter

Janetter Pro for Twitter

  • Jane, Inc.
  • ソーシャルネットワーキング
  • ¥600

Tweetbot for Twitter

Tweetbot for Twitter

Tweetbot for Twitter

  • Tapbots
  • ソーシャルネットワーキング
  • ¥1,200

気になっていたが、無料で使えるTweetDeckで満足してたので、試すに至らなかった。

おすすめがあれば、ぜひ教えてください。

iPhoneのTwitterクライアントに関する記事はこちら。

iPhoneのTwitterクライアントをfeatherにした - Webナントカ

React Native Meetup#5 に参加してきた

勉強会
  • ReactNative触ったことなかったので、情報収集目的で参加した
  • あくまで、個人のメモ書きです
  • 誤字脱字、認識齟齬はご了承ください

概要

19:00    会場＆受付開始
19:30-19:40 オープニング
19:40 - 20:00   Why not React Native    Pramendra Gupta
20:00 - 20:20   Our choice in ReactNative   joe_re
20:20 - 20:30   async/await 構文を使った Android とのブリッジ   nullpoo
20:30 - 20:40   Animated入門  nolick1219
20:40 - 20:50   react-navigation について   hotchpotch
20:50 - 21:00   ReactNativeで8個アプリを作って、1個リリースして、使ったおすすめツールを紹介  mat_aki
21:00 - 21:10   Web開発者がReact Nativeで開発から運用までして辛かった事 DotEarl
21:10 - 21:20   スポンサーLT
21:20 - 22:00   懇親会
22:00 - 22:30   完全撤収

所感

  • 普段RailsなどのWebを触っている人が多かった
  • Nativeのブリッジもできる
  • 少人数のWebエンジニアでネイティブアプリを書く際に使われるケースが多い
  • AndroidとiOS両方の事例が紹介されていた
  • Router周りの話多かったので、この辺りがHotそう
    • react-navigationが良さそう
  • 結局ネイティブのコードは触らざるを得なさそう

Why not React Native Pramendra Gupta

Why not React Native - EN // Speaker Deck Why not React Native - JP // Speaker Deck

  • ユーザも開発者の体験も良い
  • Micrsoftのクラッシュレポート
  • デモ
    • 物体認識アプリのreact native app
      • メガネを撮るとメガネのサジェスチョン
      • ハサミを撮ると挟むのサジェスチョン
  • Maya-kai
  • 今こそreact native！

Our choice in ReactNative joe_re

Our choice in ReactNative // Speaker Deck

  • freeeのエンジニア
    • 最近electronの本を書いた
  • 交通費の経費精算のAndroidアプリをreact nativeで実装した
  • クロスプラットフォームの話はしない
    • suica対応
    • iOSはまだNFCの読み取りAPIが開いていない
  • 3ヶ月 * 2人
  • webの知見で作れる？
    • △
    • nativeの資産を使う場合はnativeの知識が必要
    • List Viewとか
  • 効果的だった？
    • ○
    • 今回の開発体制体に、正解だった
  • middleware
    • redux-promise-middleware
  • nativeアプリケーションとReduxStateとの相性は良い
  • routerはreact-native-router-flux
    • 不満はなかった
    • react-navigation良さそう
  • クラッシュレポートはCrashlytics
  • yarnによるlicensesコマンドで雛形を作ると良い
  • Railsのrails consoleのように扱えるnodeのREPLアプリケーションを作った

async/await 構文を使った Android とのブリッジ nullpoo

async / await 構文を使った Android とのブリッジ - Qiita

  • 音声入力するためにインテントを使って、処理結果を受け取りたい
  • Android側でjs側に公開するメソッド
    • @ReactMethodを付ける
  • パッケージを作成、登録
  • async awaitを使って、呼び出す
  • kotlinでもブリッジできそう？
    • アノテーション書けるからできると思う

Animated入門 nolick1219

  • 5月からreact native使い始めた
  • animatedValueを定義する
  • アニメーションのデモとAPIの解説
  • Animations

react-navigation について hotchpotch

ReactNativeで8個アプリを作って、1個リリースして、使ったおすすめツールを紹介 mat_aki

  • 1個iOSでアプリをリリースした
  • sonic gardenの人
  • ツールなどについて
  • Hot Reload
    • シミュレータでCmd+d
  • デバッガー
    • シミュレータでCmd+d
    • 実機だと振る
  • React Naative Debugger
  • Firebase
    • PUSH通知
    • 感想はもう一歩
      • 届いたかどうかの測定がいまいち？
  • CodePush
    • storeの審査なしにアプリをバージョンアップできる
  • Bugsnag
    • エラー検知
  • React Native Router Flux
  • Atom
  • eslint
  • Redux
  • Expo
  • Ducks
  • component色々
  • fastlane

Web開発者がReact Nativeで開発から運用までして辛かった事 DotEarl

  • toggetterの人
  • 辛かった点
    • 広告SDKの組み込み
      • 結局自分でBridge書いた
    • 結局ネイティブのコード触らないといけない
    • RNのアップグレード
    • 当時安定してなかった
  • 良かった点
    • Web感覚
    • 公開されてる機能で大体作れる

スポンサーLT

トップへ戻る