ブックマーク / r7kamura.hatenablog.com (27)

  • MastodonをAWSでシュッと動かすやつ - ✘╹◡╹✘

    MastodonAWS で動かしたい人のために、https://github.com/r7kamura/mastodon-terraform というのをつくった。簡単に動かすという目的以外に、MastodonAWS で動かすために必要な設定をコードで表現することで、どういうインフラが必要になるのかを共有しようというねらいもある。 使い方 https://github.com/r7kamura/mastodon-terraform を fork する CircleCI と連携する 適当な環境変数を与えてビルドする マストドン動く ✌(‘ω'✌ )三✌('ω’)✌三(✌'ω')✌ 別に必ず fork しないといけない訳ではなくて、copy して使ったり terraform module として参照したりしても良い。 構築される環境 ┌---------------┐ | Web B

    MastodonをAWSでシュッと動かすやつ - ✘╹◡╹✘
  • シリーズ判定最前線 - ✘╹◡╹✘

    10 日ほど前から amakan books の再設計に着手しており、最近ようやく実装を終えた。いまデータ移行処理を実行している最中で、20時間ぐらい掛かるのでゆっくり待ちながらこの記事を書いている。変更理由についておさらいするという意味も含めて、変更内容と意思決定の背景について書き記しておく。 テーブルの変更 旧 DB スキーマ では以下のようなテーブル群を利用していた。 amazon_product_link amazon_product_responses author_product_list_memberships author_product_memberships authors evaluations product_links product_lists products 新 DB スキーマ では以下のようなテーブル群を利用するようになった。 book_authors b

    シリーズ判定最前線 - ✘╹◡╹✘
  • amakan の React コンポーネント設計 - ✘╹◡╹✘

    説明用の図 例として、amakan anime のトップページ https://anime.amakan.net/ の構造を挙げながら説明する。(ところで amakan anime は今月中に完成予定のサービスで実験的に公開している状態なので、まだまだ至らないところが多々あります…) 登場するコンポーネント一覧 React.Component クラスを継承したクラスをコンポーネントと呼ぶ。主に登場するコンポーネントは以下の通り。 Header Layout Router VideoPrograms Router コンポーネント 最上位のコンポーネントとして、Router コンポーネントが存在する。このコンポーネントを利用して、ページごとにどのコンポーネントを表示すべきかを分岐させる。amakan anime のトップページでは VideoPrograms コンポーネントを描画し、amaka

    amakan の React コンポーネント設計 - ✘╹◡╹✘
  • amakanをDocker化した感想 - ✘╹◡╹✘

    https://amakan.net/ のこの辺の改善の続き。 amakanをUnicornからPumaに移行した - ✘╹◡╹✘ amakanでyarnを使うようにした - ✘╹◡╹✘ amakanでRuby 2.3.3を使うようにした - ✘╹◡╹✘ amakanを Ruby 2.3.3 から 2.4.0-preview3 に移行した - ✘╹◡╹✘ amakanのフロントエンドを色々改善した - ✘╹◡╹✘ amakanをSidekiqに移行した - ✘╹◡╹✘ amakanの開発環境をDockerに移行した - ✘╹◡╹✘ amakanの番環境をDockerに移行した - ✘╹◡╹✘ CIのビルドに時間が掛かるようになった これはわりとしんどい。CircleCIDockerのバージョンが古く、イメージのキャッシュをしづらいため、毎度新規にイメージをビルドしていることが原因。キャ

    amakanをDocker化した感想 - ✘╹◡╹✘
  • amakanのフロントエンドを色々改善した - ✘╹◡╹✘

    https://amakan.net/ のこの辺の改善の続き。 amakanをUnicornからPumaに移行した - ✘╹◡╹✘ amakanでyarnを使うようにした - ✘╹◡╹✘ amakanでRuby 2.3.3を使うようにした - ✘╹◡╹✘ amakanを Ruby 2.3.3 から 2.4.0-preview3 に移行した - ✘╹◡╹✘ react_on_rails amakan ではサーバサイドで React.js で記述したコードを使ってHTMLを生成していて、このために react_on_rails というライブラリを使っている。このライブラリの最新バージョンが v5 から v6 に上がっていたので、まず v6 を使うように変更を加えた。 v5 までは、サーバサイドとクライアントサイドで別々の Webpack の設定ファイルを用意するような設計になっていたが。しかし

    amakanのフロントエンドを色々改善した - ✘╹◡╹✘
  • 天井照明を改造してプロジェクタを付けた - ✘╹◡╹✘

    いろいろ試行錯誤してプロジェクタを取付けた記録です。 つい先日引越した ところ、新居にいい壁があり、またいいところに照明用のレールがありました。賃貸物件で天井に穴を開けられないため、このレールを利用してプロジェクタを取付けられないかどうか調べてみることにしました。ネットで見てもほとんど事例が出てこないので暗中模索です。 前の住居で利用していた照明器具が運良く余っていたので、これを分解し、天井の引掛け金具とプロジェクタ用のアダプタとを繋ぐ部品として利用することにしました。 DI CLASSE(ディクラッセ) Ferrico flat3 フェリコ フラット3 シーリングライト LC5101ST 出版社/メーカー: ディクラッセメディア: ホーム&キッチンこの商品を含むブログを見る ちなみに部品を取り外した照明はこれで、そこそこの重さがある照明だったので、それなりに (5kg程度) までは耐えら

    天井照明を改造してプロジェクタを付けた - ✘╹◡╹✘
  • FF15の感想 - ✘╹◡╹✘

    ネタバレは避けてますが、代わりにかなり歯切れの悪い感想に仕上がってます。 TL;DR 最高 はじめに 発売日に買って翌日までやり込んでようやくクリアしたんだけど、釣りや散策などの横方向への広がりが意外と奥深く、最短でクリアして良かった良くなかったみたいな話をするのは勿体無いなと思ってしばらく黙っていた。特に釣りはやり込むと面白くて、この魚達との熱い戦いをメインの戦闘部分にももっと活かせなかったのかと悔やまれるほどによく出来ている。しかし1週間ほど経ってようやく落ち着いてきたので、この辺りで感想を書くことにした。 書こうとしてみて思ったけど、物事の駄目なところって簡単につつけるのに、いいところを紹介するのって難しい。同意を得たいのであれば、昨今のゲーム業界的な背景とか、制作側の意図、それから経済的な事情みたいなもの──つまり政治的な背景に参照を張り巡らした上で、言いたいことを言う、というのが

    FF15の感想 - ✘╹◡╹✘
  • エンジニア立ち居振舞い: 気持ちよりも行動を評価する - ✘╹◡╹✘

    エンジニア立ち居振舞い」 というお題に対しての投稿。 立ち居振る舞いというか、姿勢、それも比喩的な意味での姿勢の話なのだけど、所謂やっていく気持ちよりも、行動した事実に価値を見出すように努めている。エンジニアと言うとその職業柄、仕事の所作みたいな話が多くなりがちだけれど、何も仕事に限った話ではなくて、例えばブログ記事を書くときなどもそうであると思う。こういうものを頑張ってつくっている最中であるとか、こういうところで困っていて大変といった気持ちを吐露したくなることがある訳だけど、そこは矜持としてグッと我慢して、早くいいものを完成させてみんなを驚かせたいとか、苦しい気持ちはひた隠しにして反骨精神を高めるとか、そういう気持ちに変換して、より大きな成果を上げられるようにしたいと思っている。 自分に限らず他人の行動についてもそうで、何かやりたいと言っている人や、あるいは筋の良さ悪さについて考えあぐ

    エンジニア立ち居振舞い: 気持ちよりも行動を評価する - ✘╹◡╹✘
  • サメを支える技術 - ✘╹◡╹✘

    写真のサメのぬいぐるみの購入方法についてです。 1. 体 Original Chumbuddy のやつです。家サイトでは品切れで買えないことが多いので、Amazon.com: Original Chumbuddy Skin (Stuffing Not Included): Toys & Games で買えます。結構な値段します。 2. 綿 上記の商品は皮だけなので中に詰める綿が必要です。8kgぐらいあると安心でしょう。結構な値段します。自分は Amazon | フックラ手芸綿ソフィア 3キロ(300g入り10袋セット) クリスマス飾りつけにも最適 | 手芸わた 通販 を2つ買いました。お腹のところにジップがあるので簡単に詰められます。もうちょっと綿詰めてふっくらさせたい感じもしますが満足しています。ぐったりしてきたら買い足す予定です。 おわり 以上です。掃除のときとかには持ち上げる必要

    サメを支える技術 - ✘╹◡╹✘
  • katatema.js - ✘╹◡╹✘

    次のようなコードを書いて、 import React from "react" export default () => <div>Hello!</div> 次のようなコマンドを叩くと、 katatema build 次のようなファイルが生成されるという、katatema というツールをつくった。 <!DOCTYPE html> <html> <head> </head> <body> <div>Hello!</div> </body> 最先端の消耗 前に キーボードショートカットをカスタマイズするブラウザ拡張 - ✘╹◡╹✘ で、こういうことを書いた。 id:moznion へ、寒い日が続きますがお元気ですか。ともあれChrome拡張を1つこさえれば、大の大人が寄ってたかってモダンと言い合う類のものが一通り学べるだろうと思います。 最近のJavaScriptの周辺環境は大変で、何をやるに

    katatema.js - ✘╹◡╹✘
  • 掲示板のJavaScriptこういう風に最適化しました - ✘╹◡╹✘

    最近Rails掲示板つくってて、サボって後回しにしていたJavaScriptの最適化をやりました。 掲示板の構成 Webpackを使っている Reactを使っている Server-Side Renderingをやっている Railsを使っている Sprocketsを使っていない 作業内容 webpack-bundle-size-analyzerで容量の大きいpackageを調査 HTTPクライアントに利用していたjQueryを撤廃 HTTPクライアントにaxiosを採用 lodashを一部しか読み込まないように変更 moment.jsの不要なlocaleを読み込まないように設定 変更結果 これでminify後の容量が770KB→476KBに。gzip圧縮状態では202KB→125KB。 $(npm bin)/webpack --profile --json | webpack-bundl

    掲示板のJavaScriptこういう風に最適化しました - ✘╹◡╹✘
  • どれだけ知性を落とせるか - ✘╹◡╹✘

    アニメ見るときとか、いやアニメに限らないんだけど、何らかの作品と向き合うときには「楽しんだほうが勝ち」というスタンスを強く守ろうとしている。自分はあまり物事を信じる方ではないから、このスタンスの正しさに対する信仰心はとても強い方だと思う。 例えば、科学的な突っ込みどころは多いものの見せたい部分を思い切り描いてくる作品に対しては、細かいところを無視してどれだけ世界観に入り込めるか、どれだけ上手く騙されるか、どれだけ意識せずにそういう状態になれるか、自分の中で整理を付けられるか、そういう気持ちになれる自分かどうか、というところをものすごく大事にしている (まあ結局後から小難しい顔して考察してたりするんだけども)。説明が面倒だから、誤解を恐れずに言うと「どれだけ知性を落とせるか」という風に表現することが多い。この表現は完全に誤解されがちなので別の言い回しを考えようとしたけど、考えた上でこれしか出

    どれだけ知性を落とせるか - ✘╹◡╹✘
  • モデルからJSON生成するときこうやってます2016 - ✘╹◡╹✘

    最近RubyReact.jsをよく利用していて、Rubyで扱っている値をJSONとして表現したいケースが増えてきた。こういうのどうやっていますかと人に聞きたいので、自分はこうやっていますよというのを説明のためにまとめておくことにする。 概観 自分の場合、次のような方法で実装することが多い。 JSONとして表現したいオブジェクトをコンストラクタで受け取るクラスを定義する クラスに #as_json を定義して適当なHashを返すようにする Object#to_json が再帰的に #as_json を利用するようにする (ActiveSupportがやってくれる) コード 具体的には、以下のようなクラスをつくっている。これは最近つくっている掲示板での例で、Megaboard::Resources::Comment はコメントのJSON表現のためのクラスである。いわばコメントのJSON表現に

    モデルからJSON生成するときこうやってます2016 - ✘╹◡╹✘
  • Podcastのやっていきかた - ✘╹◡╹✘

    9mとsoramugiから、やっていきエフエム という名前でPodcastをやりませんかという話を承け、Podcastをやることになった。既にサイトが公開されていて、https://yatteiki.fm からアクセスできる。昨日できたばかりで準備中なところが幾つかあるが、サイトを開いて音を聴けるという点では最低限の体験は保証されている。 10月25日にSlackチームを立ち上げ 10月28日に練習でSkypeで通話 10月29日に1回目を収録 10月30日に公開用のサイトを作成 という流れで、発足から企画、収録、公開まで進み、この順調さには当の我々ですら驚かされた。 個人的には、雑談レベルの会話が淡々と展開されていくような、例えばカンファレンスの懇親会での会話を隣で聴いているような、あるいは飯屋での雑談を隣で聴いているような、更に言えばマックで隣の女子高生のガールズトークを聴いているよう

    Podcastのやっていきかた - ✘╹◡╹✘
  • Ruby on Rails on React on SSR on SPA - ✘╹◡╹✘

    amakan での設計を例に、RailsでSingle-Page Applicationをつくるときの自分のやり方をまとめてみます。 GemJavaScriptで書かれたReactのコンポーネントからHTMLを生成する」というのをRubyでやるために、RubyのV8エンジン実装であるmini_racerというGemを使う。この処理を楽に実行するために、react_on_railsというGemも使う。 gem "mini_racer" gem "react_on_rails" View body要素内のHTMLは全てReactで生成するので、layout以外にviewのテンプレートは存在しない。 Controller 初回リクエストの場合はHTMLを返す ページ遷移時に呼ばれるリクエストの場合はJSONを返す 外部サイトからブラウザバックで戻ってきたときにJSONを見せない という要求に

    Ruby on Rails on React on SSR on SPA - ✘╹◡╹✘
  • 急に高まって深夜にiOSアプリつくった - ✘╹◡╹✘

    ※当方iOSアプリ開発経験無し react-native、デモ見たときタップしたら画面上の数が増えるぐらいのアプリしかつくれなさそうという印象だったけど、いま丁度タップして読んだ数が増える程度のアプリつくりたいんで使いたい— 生産職 (@r7kamura) 2016年8月23日 とち狂ってreact-nativeのチュートリアルに沿ってインストールはじめてしまった、死にたい— 生産職 (@r7kamura) 2016年8月23日 殺してくれ 殺してくれ— 生産職 (@r7kamura) 2016年8月23日 アプリ完成した pic.twitter.com/bep81pzWAR— 生産職 (@r7kamura) 2016年8月23日 とりあえずバナナでも表示してみるか— 生産職 (@r7kamura) 2016年8月23日 なるほどなるほど pic.twitter.com/mgLilyL09

    急に高まって深夜にiOSアプリつくった - ✘╹◡╹✘
  • SoundCloudの曲を一緒に聴けるやつをつくってみた - ✘╹◡╹✘

    https://syncbeats.herokuapp.com/ ※利用者も減ってきたということで、現在は公開を停止しています。 syncbeats というのを作ってみました。端的に言うとSoundCloudの曲をみんなで同時再生する君 です。部屋をつくってSoundCloudのURLを適当に突っ込むと順番に再生してくれて、あとから部屋に入ってきた人も同じ位置から再生されるというやつ。試しに曲を入れてリロードしてみると、途中から再生されるのが分かる。曲が無くなると、新しい曲が追加されるのを待ち受ける状態になる。たまに壊れるんでリロードすると治る。SlackTwitterで部屋のURLを共有して一緒に聴くみたいな使い方がいいんじゃないでしょうか。 背景 前にシェアハウスに居たときにたまにリビングで音楽掛けることがあったんだけど、SoundCloudだとその場限りのセットリストつくるのも難し

    SoundCloudの曲を一緒に聴けるやつをつくってみた - ✘╹◡╹✘
  • 作業用に買った4Kディスプレイが届いた - ✘╹◡╹✘

    43型4Kディスプレイ注文したので決め手を書いとく - ✘╹◡╹✘ で書いてたやつが届いたので、様子を紹介します。はてなブログの貼り付け機能便利ですね。全然文章書かなくても貼り付けていくだけで何かが生成される。 購入したやつ Philips 43型ワイド液晶ディスプレイ (4K対応/IPSパネル/5年間フル保証) BDM4350UC/11 出版社/メーカー: Philips(フィリップス)発売日: 2016/04/15メディア: Personal Computersこの商品を含むブログを見る 他の検討候補 DOSHISHA 43型 4K液晶ディスプレイ D431US 出版社/メーカー: DOSHISHA発売日: 2015/10/20メディア: Personal Computersこの商品を含むブログを見る I-O DATA 40型ワイド液晶ディスプレイ (HDMI端子4K/60Hz・HDC

    作業用に買った4Kディスプレイが届いた - ✘╹◡╹✘
  • アプリの外側とのやりとりをModelから取り除く - ✘╹◡╹✘

    変更前 これはクライアントサイドのアプリケーションの例で、Modelの背後でWeb APIやonpopstate/pushStateを利用しており、Modelが太くなってる様子。 HTTP History | ^ | ^ | | | | v | v | .---- View <-- M o d e l <-- Intent <--. | | `----------------> DOM -------------------' 変更後 Web APIもonpopstate/pushStateもアプリケーションの外側にあり、DOMと同レイヤに存在するものであると位置づける。アプリケーションの外界とのやりとりを行う、ビジネスロジックを含まないアダプタを、ドライバーと呼んで抽象化する。ドライバーには入力を受け取る機能と出力を購読させられる機能がある。いまつくってるアプリでは以下の2つのドライバー

    アプリの外側とのやりとりをModelから取り除く - ✘╹◡╹✘
  • 『ソフトウェアテスト技法ドリル』読んだ - ✘╹◡╹✘

    ソフトウェアテスト技法ドリル―テスト設計の考え方と実際 作者: 秋山浩一出版社/メーカー: 日科技連出版社発売日: 2010/10メディア: 単行購入: 7人 クリック: 153回この商品を含むブログ (19件) を見る 『知識ゼロから学ぶソフトウェアテスト』読んだ - ✘╹◡╹✘ を書いたところ、知り合いのテストエンジニアにこれオススメだよと勧めてもらい『ソフトウェアテスト技法ドリル』を読んだ。読みながら、どこでテストを書くのを満足すれば良いのか、このトレードオフはどんな条件下でどういう状態になるのか、テストについて常に信じられるものは何なのか、ということを考えていた。 なんでテスト書いてるのか まあ四年前のなのでググればレビューも沢山出てくるしとりあえずのことは置いといて、テスト書くときにいかに雑な仕事してるかという話でもしたい。日々コードを書いていると、たまに「なんでテスト書い

    『ソフトウェアテスト技法ドリル』読んだ - ✘╹◡╹✘