タグ

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

  • 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でシュッと動かすやつ - ✘╹◡╹✘
  • 2017年3月15日 - ✘╹◡╹✘

    ゼルダの伝説 一旦クリアしたのでゆっくり暇を見つけては少しずつやっている。ゼルダの伝説をクリアしてからというもの、個人開発の時間が無限にあるように思えてくる…。 amakan anime 自動で収集してきた作品画像の精度があまりにも低いので、利用者が自由に画像を差し替えられるようにした。懸念していた放送情報の取得部分などは、今のところ上手く動いている模様。サイドバーの領域に後でコンテンツを幾つか用意しようと思っていたのがまだ着手できていないので、暇を見つけて着手したい。 amakan books amakan anime の方そろそろ完成しそうなので、書籍の方に anime で得た DB 設計の知見を反映して、Kindle 版やシリーズ判定のデータ揺れを吸収する作業に取り掛かりたいと思う。 React amakan の React コンポーネント設計 - ✘╹◡╹✘ を書いた。 チーズタル

    2017年3月15日 - ✘╹◡╹✘
    tofu-kun
    tofu-kun 2017/03/17
    ハイブリッドフリーランス
  • 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のCIをShippableに移行した - ✘╹◡╹✘

    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化した感想 - ✘╹◡╹✘ CircleCIからShippableに移行した amakanをDocker化した感想 - ✘╹◡╹✘ で触れた「CIのビルドに時間が掛かるよう

    amakanのCIをShippableに移行した - ✘╹◡╹✘
    tofu-kun
    tofu-kun 2017/03/13
  • 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に移行した - ✘╹◡╹✘
    tofu-kun
    tofu-kun 2017/02/16
  • 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にstylelintを導入した - ✘╹◡╹✘
    tofu-kun
    tofu-kun 2017/01/28
  • 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 - ✘╹◡╹✘
  • 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 - ✘╹◡╹✘
  • 掲示板の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こういう風に最適化しました - ✘╹◡╹✘
    tofu-kun
    tofu-kun 2016/10/04
  • 最終掲示板戦争 - ✘╹◡╹✘

    こんにちは、r7kamuraです。26年なにも考えずに生きてきて、レールに沿った人生を歩んできました。 さて、数日前からなんとなく気が触れてRuby on Rails掲示板をつくってみている。上の画像はいまつくりかけのもの。CSS全部手で書いてみてるからまだ見てくれがかなりショボい。最初に手を動かしはじめたきっかけは、2007年頃に「Railsを使って15分で掲示板をつくってみよう!」という記事を見たのを思い出したのがきっかけ。いまのところ10時間ぐらい経過している。15分はちょっと無理そう。2016年にもなって10時間以上かけて掲示板つくってるのは皮肉すぎる事実。もはや何故掲示板をつくっていたのか分からなくなってきつつある。とりあえず濁り切らない内に考えていることを書いておく。最近なんで掲示板つくってんのって聞かれることが増えてきたので、そのときにこの記事のURL出せると多分便利。 掲

    最終掲示板戦争 - ✘╹◡╹✘
  • 全てがJSONになる - ✘╹◡╹✘

    TL;DR JSON Schemaを使ってこういうことが実現可能になった。 ダミーAPIサーバの提供 ドキュメントの自動生成 APIクライアントの動的定義 APIサーバのバリデータの動的定義 APIサーバのレスポンスの自動テスト JSON Schemaとは JSON SchemaというのはあるJSONのデータ構造を記述するための方法および書式の仕様で、 JSON SchemaもJSONで記述される。 これを利用すれば、リソースベースの(=RESTfulライクな)APIの仕様が簡便に記述できる。 例えば、我々のAPIレシピとユーザというリソースを扱っていて、 それぞれCRUDのAPIを備えており、レシピはidとtitleとdescriptionという属性を持つ、 という旨をJSON Schemaで表現できる。 なんで最近ちょっと流行ってんの Mobile First、 Service Or

    全てがJSONになる - ✘╹◡╹✘
  • XMPP界 - ✘╹◡╹✘

    XrcというRubyのXMPPクライアントライブラリをつくったので、XMPP界の知見を共有します。 WHY RubotyというBOT開発用のフレームワークを最近つくっていて、 これをSlackというチャットサービスで利用していた。 SlackにはXMPP GatewayIRC Gatewayが用意されており、 どちらかのプロトコルを利用すればBOTとして動作するにはひとまず十分だった。 Rubyで一般的なIRCライブラリと言えばnet-ircだけど、 自分でZirconというIRCクライアント用ライブラリを作って、 ruboty-slackでは最初はこれを使ってた。 IRCは雑に全部屋に適当にJOINしてくれたりするのでBOTとして運用するにはわりと楽だったんだけど、 メッセージに改行を簡単に含められないというところが気に入らなくてXMPPを検討することにした。 改行が含められないとどう

    XMPP界 - ✘╹◡╹✘
    tofu-kun
    tofu-kun 2014/05/14
  • 1