MastodonをAWSでシュッと動かすやつ - ✘╹◡╹✘
Mastodon を AWS で動かしたい人のために、https://github.com/r7kamura/mastodon-terraform というのをつくった。簡単に動かすという目的以外に、Mastodon を AWS で動かすために必要な設定をコードで表現することで、どういうインフラが必要になるのかを共有しようというねらいもある。 使い方 https://github.com/r7kamura/mastodon-terraform を fork する CircleCI と連携する 適当な環境変数を与えてビルドする マストドン動く ✌(‘ω'✌ )三✌('ω’)✌三(✌'ω')✌ 別に必ず fork しないといけない訳ではなくて、copy して使ったり terraform module として参照したりしても良い。 構築される環境 ┌---------------┐ | Web B
amakanをUnicornからPumaに移行した - ✘╹◡╹✘
移行したぞ、というだけで特に技術的な知見の無い記事です。 移行の背景 https://amakan.net/ という、レビューの無いシンプルな読書管理サービスを2016年7月から運営している。 5ヶ月ほど運用している中で、利用してくれている人達に色々な意見をもらうことができて、これに対応して年末に時間を取って大きく改善しようとしている。しかし「年末に時間を取ってやろうとしていて...」という発言は明らかに危険信号で、高確率で「結局やれなかったよHAHAHA」ということになるのが目に見えている。そこで、年末に向けて小さな改善を徐々に積み重ねていくことで、モチベーションを高めつつ、新たに変更を加えることへの心理的障壁を無くそうと目論んでいる。今回はその一環として、amakanを動かすWebサーバをUnicornからPumaに変更することで、改善を図ることにした。 amakanの事情 amaka
amakan new relic 2017-03-19 - ✘╹◡╹✘
amakan books のDBスキーマを新しく設計するにあたり、性能面で問題となっているところを洗い出す活動を始めた。第三者にとっても何かの参考になるかもしれないと思い、無償版の New Relic で計測した過去24時間のデータのキャプチャを貼ってみることにする。 Overview リクエストの少ない小規模なサービスなので、平均値や中央値で見るとまあそこそこ妥当な結果だと思う。ちなみに Docker, Puma, Rails, MySQL, Redis, t2.micro という感じの構成。DB 設計の歪さから、大量の MySQL のレコードを取得している箇所があり、しかもサボって各レコードごとに Ruby の豪華なクラスのインスタンスを割り当てているので、そこがボトルネックになっているかもしれないなという推測をしている。 Transactions 新刊リストの iCalendar の
amakan の React コンポーネント設計 - ✘╹◡╹✘
説明用の図 例として、amakan anime のトップページ https://anime.amakan.net/ の構造を挙げながら説明する。(ところで amakan anime は今月中に完成予定のサービスで実験的に公開している状態なので、まだまだ至らないところが多々あります…) 登場するコンポーネント一覧 React.Component クラスを継承したクラスをコンポーネントと呼ぶ。主に登場するコンポーネントは以下の通り。 Header Layout Router VideoPrograms Router コンポーネント 最上位のコンポーネントとして、Router コンポーネントが存在する。このコンポーネントを利用して、ページごとにどのコンポーネントを表示すべきかを分岐させる。amakan anime のトップページでは VideoPrograms コンポーネントを描画し、amaka
amakanにstylelintを導入した - ✘╹◡╹✘
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に移行した - ✘╹◡╹✘ amakanをDocker化した感想 - ✘╹◡╹✘ amakanのCIをShippableに移行した - ✘╹◡╹✘ amakan の CSS は勘で書いていて、何となく気が向いたので style
石川県の和倉温泉に合宿に行った - ✘╹◡╹✘
温泉地での開発合宿、通称シバ温泉ソンを敢行した。 予習 和倉温泉のある能登半島はアニメ『花咲くいろは』の舞台となった場所と聞いていたので、前日にTSUTAYAに入会してDVDを全巻借りて観ておいた。 京都駅から和倉温泉駅 サンダーバードに乗って終点まで行くと和倉温泉駅に着きます。最近だと新幹線で金沢まで行けるので、東京からも早い。意外と混んでいるので、デッキで立つ羽目になりたくなければ指定席を取っておいたほうが良い。ネットでJ-WEST会員になって早めに予約しておくと1000円ぐらい安くなります。 和倉温泉駅周辺 駅から温泉街までの数kmはこういう感じで、半島の海沿いにホテルが立ち並んでいる以外は、なんというかこう、土地が余っている。道の脇にいきなり70度の湯が湧き出ていたりする。 鳥 温泉卵を大量に抱えたわくたま君という恐ろしいキャラが居る。公園の奥に行くと海が見える足湯がある。 温泉街
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に移行した - ✘╹◡╹✘ 本番環境で使うDockerイメージ これまで開発環境でのみDockerを動かしていたが、本番環境でDockerを動かすには、本番環境で利用できるようなDockerイメージを用意する必要がある。そこでamakanでは、こういう方法を取った。 開発環境と本番環境で同
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に移行した - ✘╹◡╹✘ 環境構築 docker が動く環境なら、git clone して bin/setup を叩けば開発が始められる。 $ cat bin/setup #!/bin/bash set -ex docker-compose up -d docker-compose run --rm node yarn install 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 の設定ファイルを用意するような設計になっていたが。しかし
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の周辺環境は大変で、何をやるに
エンジニア立ち居振舞い: 気持ちよりも行動を評価する - ✘╹◡╹✘
「エンジニア立ち居振舞い」 というお題に対しての投稿。 立ち居振る舞いというか、姿勢、それも比喩的な意味での姿勢の話なのだけど、所謂やっていく気持ちよりも、行動した事実に価値を見出すように努めている。エンジニアと言うとその職業柄、仕事の所作みたいな話が多くなりがちだけれど、何も仕事に限った話ではなくて、例えばブログ記事を書くときなどもそうであると思う。こういうものを頑張ってつくっている最中であるとか、こういうところで困っていて大変といった気持ちを吐露したくなることがある訳だけど、そこは矜持としてグッと我慢して、早くいいものを完成させてみんなを驚かせたいとか、苦しい気持ちはひた隠しにして反骨精神を高めるとか、そういう気持ちに変換して、より大きな成果を上げられるようにしたいと思っている。 自分に限らず他人の行動についてもそうで、何かやりたいと言っている人や、あるいは筋の良さ悪さについて考えあぐ
Podcastのやっていきかた - ✘╹◡╹✘
9mとsoramugiから、やっていきエフエム という名前でPodcastをやりませんかという話を承け、Podcastをやることになった。既にサイトが公開されていて、https://yatteiki.fm からアクセスできる。昨日できたばかりで準備中なところが幾つかあるが、サイトを開いて音を聴けるという点では最低限の体験は保証されている。 10月25日にSlackチームを立ち上げ 10月28日に練習でSkypeで通話 10月29日に1回目を収録 10月30日に公開用のサイトを作成 という流れで、発足から企画、収録、公開まで進み、この順調さには当の我々ですら驚かされた。 個人的には、雑談レベルの会話が淡々と展開されていくような、例えばカンファレンスの懇親会での会話を隣で聴いているような、あるいは飯屋での雑談を隣で聴いているような、更に言えばマックで隣の女子高生のガールズトークを聴いているよう
Ruby on Rails on React on SSR on SPA - ✘╹◡╹✘
amakan での設計を例に、RailsでSingle-Page Applicationをつくるときの自分のやり方をまとめてみます。 Gem 「JavaScriptで書かれた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を見せない という要求に
汎用絵文字ライブラリ Somemoji - ✘╹◡╹✘
ここ最近絵文字で遊んでいて、Somemoji というライブラリをつくったので知見を共有します。 さまざまな絵文字セット 様々なプラットフォームのために、様々な組織が、様々な絵文字セット (絵文字画像の集合) を提供しています。 Apple emojidex EmojiOne Facebook Google HTC LG Microsoft Mozilla Samsung Twitter 大抵の絵文字セットはUnicodeのEmojiの仕様に則って実装されていて、このコードポイントに対応する絵文字画像はこれ、というように互換性があります。Unicode 6.0, Unicode 7.0, Unicode 8.0, ... とバージョンが増えるに従って定義されるEmojiの数も増えていっているので、それぞれの絵文字セットごとに対応具合はまちまちという状況ではあるものの、よく使う主要なものについ
掲示板の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
最終掲示板戦争 - ✘╹◡╹✘
こんにちは、r7kamuraです。26年なにも考えずに生きてきて、レールに沿った人生を歩んできました。 さて、数日前からなんとなく気が触れてRuby on Railsで掲示板をつくってみている。上の画像はいまつくりかけのもの。CSS全部手で書いてみてるからまだ見てくれがかなりショボい。最初に手を動かしはじめたきっかけは、2007年頃に「Railsを使って15分で掲示板をつくってみよう！」という記事を見たのを思い出したのがきっかけ。いまのところ10時間ぐらい経過している。15分はちょっと無理そう。2016年にもなって10時間以上かけて掲示板つくってるのは皮肉すぎる事実。もはや何故掲示板をつくっていたのか分からなくなってきつつある。とりあえず濁り切らない内に考えていることを書いておく。最近なんで掲示板つくってんのって聞かれることが増えてきたので、そのときにこの記事のURL出せると多分便利。 掲
SoundCloudの曲を一緒に聴けるやつをつくってみた - ✘╹◡╹✘
https://syncbeats.herokuapp.com/ ※利用者も減ってきたということで、現在は公開を停止しています。 syncbeats というのを作ってみました。端的に言うとSoundCloudの曲をみんなで同時再生する君 です。部屋をつくってSoundCloudのURLを適当に突っ込むと順番に再生してくれて、あとから部屋に入ってきた人も同じ位置から再生されるというやつ。試しに曲を入れてリロードしてみると、途中から再生されるのが分かる。曲が無くなると、新しい曲が追加されるのを待ち受ける状態になる。たまに壊れるんでリロードすると治る。SlackやTwitterで部屋のURLを共有して一緒に聴くみたいな使い方がいいんじゃないでしょうか。 背景 前にシェアハウスに居たときにたまにリビングで音楽掛けることがあったんだけど、SoundCloudだとその場限りのセットリストつくるのも難し
amakanでKindle Unlimitedの上位100件を集めた - ✘╹◡╹✘
近年、Kindle Unlimited の日本上陸により、我々の進捗はますますダメになっている。理想状態において、無限に漫画を読み続けることができれば、人は進捗を完全に停止させることができる。しかしこの仮定は、如何にして読みたい作品を発見するかという問題に我々を導く。 Kindle Unlimitedで作品を探す方法として、masawadaの日記 では「刊行数が少ない出版社順にタブを開く」「星4以上の書籍に限定する」「あとはがんばって全部みる」という手法が紹介されている。id:masawada はこの課題について新たな試みを行ったが、多くの人間はがんばる気概を持ち合わせていない。 先月から開発を始めた amakan.net では、それぞれの作品ごとに、漫画やラノベのシリーズ判定、Kindle Unlimited対応判定、読みたい本・読んだ本の管理を行っている。そこで、このデータを利用して「
作業用に買った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
43型4Kディスプレイ注文したので決め手を書いとく - ✘╹◡╹✘
おおよそ間違いが幾つか含まれてそうな知見 HDMI 2.0 か Display Port で出力するとほぼ最高の状態で出力できる HDMI 2.0 で出力できるマシンは今のところ少ない (例えば最近のMacbook ProでもHDMI 1.4) Macbook Proでは代わりにDisplay Port経由で出力すると良い 4つの入力を受け取って1画面に4分割する機能を備えたディスプレイもある (PBP4in1というらしい) IPS液晶とVA液晶では基本的にはIPSのほうが視野角が優秀だが最近はそこまで顕著に違いはない 40型前後の4Kディスプレイは5万円から9万円ぐらいのものが多い TV寄り製品かPC寄り製品かでリモコンの有無や自動電源オフなどの使い勝手が異なる 注文したもの はい / 次の商品を購入しました：Philips(フィリップス) 『Philips 43型ワイド液晶ディスプレイ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
