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
シリーズ判定最前線 - ✘╹◡╹✘
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
2017年3月15日 - ✘╹◡╹✘
ゼルダの伝説 一旦クリアしたのでゆっくり暇を見つけては少しずつやっている。ゼルダの伝説をクリアしてからというもの、個人開発の時間が無限にあるように思えてくる…。 amakan anime 自動で収集してきた作品画像の精度があまりにも低いので、利用者が自由に画像を差し替えられるようにした。懸念していた放送情報の取得部分などは、今のところ上手く動いている模様。サイドバーの領域に後でコンテンツを幾つか用意しようと思っていたのがまだ着手できていないので、暇を見つけて着手したい。 amakan books amakan anime の方そろそろ完成しそうなので、書籍の方に anime で得た DB 設計の知見を反映して、Kindle 版やシリーズ判定のデータ揺れを吸収する作業に取り掛かりたいと思う。 React amakan の React コンポーネント設計 - ✘╹◡╹✘ を書いた。 チーズタル
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
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の周辺環境は大変で、何をやるに
キーボードショートカットをカスタマイズするブラウザ拡張 - ✘╹◡╹✘
この文章は https://github.com/r7kamura/keyworks/ の製作記である。Keyworksはキーボードショートカットをカスタマイズするための凡庸なブラウザ拡張であり、つい先日、思いつきによりつくられた。 いま見ているページをTwitterで共有するとき、あるいはMarkdownで書いた文書にページのリンクを載せるとき、皆どのようなツールを利用しているのだろう。この話題を出すと、それ専用のChrome拡張や、秘蔵のブックマークレット、VimやEmacs風のキーバインドを実現するツールのプラグインなど、みな懐から様々なツールを取り出して楽しませてくれる。自分はというと、これまでKeyconfigというChrome拡張を使っていた。 Keyconfig - Chromeウェブストア https://github.com/os0x/ChromeKeyconfig Ke
Podcastのやっていきかた - ✘╹◡╹✘
9mとsoramugiから、やっていきエフエム という名前でPodcastをやりませんかという話を承け、Podcastをやることになった。既にサイトが公開されていて、https://yatteiki.fm からアクセスできる。昨日できたばかりで準備中なところが幾つかあるが、サイトを開いて音を聴けるという点では最低限の体験は保証されている。 10月25日にSlackチームを立ち上げ 10月28日に練習でSkypeで通話 10月29日に1回目を収録 10月30日に公開用のサイトを作成 という流れで、発足から企画、収録、公開まで進み、この順調さには当の我々ですら驚かされた。 個人的には、雑談レベルの会話が淡々と展開されていくような、例えばカンファレンスの懇親会での会話を隣で聴いているような、あるいは飯屋での雑談を隣で聴いているような、更に言えばマックで隣の女子高生のガールズトークを聴いているよう
掲示板の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
モデルからJSON生成するときこうやってます2016 - ✘╹◡╹✘
最近RubyとReact.jsをよく利用していて、Rubyで扱っている値をJSONとして表現したいケースが増えてきた。こういうのどうやっていますかと人に聞きたいので、自分はこうやっていますよというのを説明のためにまとめておくことにする。 概観 自分の場合、次のような方法で実装することが多い。 JSONとして表現したいオブジェクトをコンストラクタで受け取るクラスを定義する クラスに #as_json を定義して適当なHashを返すようにする Object#to_json が再帰的に #as_json を利用するようにする (ActiveSupportがやってくれる) コード 具体的には、以下のようなクラスをつくっている。これは最近つくっている掲示板での例で、Megaboard::Resources::Comment はコメントのJSON表現のためのクラスである。いわばコメントのJSON表現に
最強のTwitterクライアント戦争に参戦 - ✘╹◡╹✘
r7kamura/retro-twitter-client 最強のTwitterクライアント作り始めた - 9mのブログ でkosugeさんが最強のTwitterクライアント作り始めたのを見て、丁度明日 YAPC::Asia 2015 Hackathon | Peatix でやるネタを探してたので自分も勝手に参戦することにした。とにかくNode.jsとElectronを覚えることに必死で、SlackっぽいUIにするというところまで完全に真似ており、もはや何の余裕もないことが伺える。利用者がアプリケーションを容易に分解・構築でき、自分好みに組み替えられるようなプラガブルなTwitterクライアントができると良いと思う。特に具体案は無い。主に increments/qiita-coat がQiitaの外でもうまく活用できることを示すためという側面もあり、Kobito for Windows の
最終掲示板戦争 - ✘╹◡╹✘
こんにちは、r7kamuraです。26年なにも考えずに生きてきて、レールに沿った人生を歩んできました。 さて、数日前からなんとなく気が触れてRuby on Railsで掲示板をつくってみている。上の画像はいまつくりかけのもの。CSS全部手で書いてみてるからまだ見てくれがかなりショボい。最初に手を動かしはじめたきっかけは、2007年頃に「Railsを使って15分で掲示板をつくってみよう！」という記事を見たのを思い出したのがきっかけ。いまのところ10時間ぐらい経過している。15分はちょっと無理そう。2016年にもなって10時間以上かけて掲示板つくってるのは皮肉すぎる事実。もはや何故掲示板をつくっていたのか分からなくなってきつつある。とりあえず濁り切らない内に考えていることを書いておく。最近なんで掲示板つくってんのって聞かれることが増えてきたので、そのときにこの記事のURL出せると多分便利。 掲
cycle.jsでのMVI分割時にどう考えてるか - ✘╹◡╹✘
実装していくうちにレイヤやシステムの境界に対する認識が変わってきたので現状を整理。 Intent アプリ外部から受け取った入力をアプリ内部で使える語彙・データ形式に変換するためのアダプタ。アプリ外部からの入力を解釈して、アプリに何をしてほしくてそれを入力したのかを判断し、その要求をModelに伝える。「xxxが起こった」という形式ではあまり良くなくて、「xxxしてほしい」という形式になるのがベストという理解をしている。 例: ボタンがクリックされたので記事を作成してほしい (DOM経由の入力に反応する例) 例: 記事が作成されたので記事を表示するページに遷移してほしい (HTTP経由の入力に反応する例) Model Intentからの入力をもとに状態の管理を行う。状態は変数に格納するとかではなくて、Observableの中に生き続ける。Elixir/Erlangやったことがある人は、Age
最強のTwitterクライアント戦争進捗 - ✘╹◡╹✘
二週間ほど前からなぜか急にElectronを触りはじめたんですが、題材につくっているretro-twitter-clientというTwitterクライアントの v0.0.12 を出しました。別に各バージョンごとにブログで報告しているとかそういうことはなくて、急にv0.0.12を報告しています。ありがとうございます。折角なので最近の変更点を紹介します。 キーボードショートカット タブを移動するためのキーボードショートカットを追加しました。Macの場合は ⌘+] で次、⌘+[ で前のタブに移動できます。よく使う検索語句を登録しておくカスタムタブ機能など、今後もタブを便利にしていく可能性があるので、いまのうちに便利機能を付けておこうという気持ちです。他に、検索ボックスにフォーカスするとか、DevToolsを開いて内部実装を調べるとか、いろいろ便利なものを適当に付けています。メニューに項目も追加さ
最強のTwitterクライアント戦争情報 - ✘╹◡╹✘
kkosuge 最強のTwitterクライアント作り始めた - 9mのブログ kkosuge/slack-like-twitter-client r7kamura 最強のTwitterクライアント戦争に参戦 - ✘╹◡╹✘ r7kamura/retro-twitter-client k0kubun ElectronでYoruFukurou風のTwitterクライアントを作った - k0kubun's blog k0kubun/Nocturn airtoxin 最高のツイッタークライアントを求めて airtoxin/twitter-client rhysd rhysd/Stream khrtz ツイッタークライアント「light」を作り始めた - インターネットの人になりたい khrtz/light-twitter-client bokuweb 最強のTwitterクライアント戦争にこっそり
Qiitaのトップページのフィードの設計 - ✘╹◡╹✘
@ainame user.articles.preload(:comments, :stocks_count) みたいにstocks_countのようなassociationを生やしており、stocks_countの内部実装はPreloaderが弄られていてIDだけ取ってる— 内製フレームワーク (@r7kamura) 2015, 8月 23 @ainame これを抽象化するために、Article.has_many(:stocks, counter: true) みたいにすると、article.stocksとarticle.stocks_countがほぼ同じSQLで同時に定義されるようになってる— 内製フレームワーク (@r7kamura) 2015, 8月 23 @ainame それを実現している実装がこれです / k0kubun/activerecord-precount https:
UIコンポーネント集 Qiita:Coat - ✘╹◡╹✘
LTを聞いているという感覚でご覧ください。 Qiita:Coat Qiita用のUIコンポーネント集 GitHub用のUIコンポーネント集をForkしてつくりはじめた レポジトリ: https://github.com/increments/qiita-coat デモサイト: http://increments.github.io/qiita-coat/ 今週月曜からやってる これはcommit数 Qiita:Coatが必要に感じた背景 全ての開発者に共通する願い 高速に開発したい 秩序がほしい (a.k.a. 最低限度の品質の保証) 開発体制の情勢に起因する理由 開発人数が徐々に増えつつある 社員11人+アルバイト3人 四半期に1人ぐらい増えてる 50人が51人になるとかならともかく、5人が6人とかになると大きく変わる その他の理由 サポートサイトや採用サイトなどQiita風のデザインを
コード読むとき - ✘╹◡╹✘
コード読むとき普段どうやってるんですか、って今日聞かれた。そのときは喫茶店でお茶飲みながらiPhoneでGitHubのページ開いてぼーっと見ているような感じで、特にツールとかなくてlib/vagrant/bundler.rb とか lib/vagrant/pre-rubygems.rb とか見てた。ページ遷移するときにまた見たいファイルのときは必ず次のタブで開いていって履歴を視覚的に残す的な小賢しい細工は適宜やっていっているかも。コードジャンプする機能とかは使ったことなくて、雑にファイル開いたり閉じたりしながら見てることが多い。ボトムアップに読むほうなので、CLIツールだったら実行ファイルとか、Webアプリだったらリバースプロキシとの通信部分から処理の順序にしたがって読んでいくことが多い。あまりツールを使わない方なので、逆に命名規則が統一されていないとか、ファイル名とクラス名の対応が取れて
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
