シリーズ判定最前線 - ✘╹◡╹✘
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の本番環境を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の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を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のビルドに時間が掛かるようになった これはわりとしんどい。CircleCIのDockerのバージョンが古く、イメージのキャッシュをしづらいため、毎度新規にイメージをビルドしていることが原因。キャ
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-
天井照明を改造してプロジェクタを付けた - ✘╹◡╹✘
いろいろ試行錯誤してプロジェクタを取付けた記録です。 つい先日引越した ところ、新居にいい壁があり、またいいところに照明用のレールがありました。賃貸物件で天井に穴を開けられないため、このレールを利用してプロジェクタを取付けられないかどうか調べてみることにしました。ネットで見てもほとんど事例が出てこないので暗中模索です。 前の住居で利用していた照明器具が運良く余っていたので、これを分解し、天井の引掛け金具とプロジェクタ用のアダプタとを繋ぐ部品として利用することにしました。 DI CLASSE(ディクラッセ) Ferrico flat3 フェリコ フラット3 シーリングライト LC5101ST 出版社/メーカー: ディクラッセメディア: ホーム&キッチンこの商品を含むブログを見る ちなみに部品を取り外した照明はこれで、そこそこの重さがある照明だったので、それなりに (5kg程度) までは耐えら
amakanをUnicornからPumaに移行した - ✘╹◡╹✘
移行したぞ、というだけで特に技術的な知見の無い記事です。 移行の背景 https://amakan.net/ という、レビューの無いシンプルな読書管理サービスを2016年7月から運営している。 5ヶ月ほど運用している中で、利用してくれている人達に色々な意見をもらうことができて、これに対応して年末に時間を取って大きく改善しようとしている。しかし「年末に時間を取ってやろうとしていて...」という発言は明らかに危険信号で、高確率で「結局やれなかったよHAHAHA」ということになるのが目に見えている。そこで、年末に向けて小さな改善を徐々に積み重ねていくことで、モチベーションを高めつつ、新たに変更を加えることへの心理的障壁を無くそうと目論んでいる。今回はその一環として、amakanを動かすWebサーバをUnicornからPumaに変更することで、改善を図ることにした。 amakanの事情 amaka
作業用に買った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
エンジニア立ち居振舞い: 気持ちよりも行動を評価する - ✘╹◡╹✘
「エンジニア立ち居振舞い」 というお題に対しての投稿。 立ち居振る舞いというか、姿勢、それも比喩的な意味での姿勢の話なのだけど、所謂やっていく気持ちよりも、行動した事実に価値を見出すように努めている。エンジニアと言うとその職業柄、仕事の所作みたいな話が多くなりがちだけれど、何も仕事に限った話ではなくて、例えばブログ記事を書くときなどもそうであると思う。こういうものを頑張ってつくっている最中であるとか、こういうところで困っていて大変といった気持ちを吐露したくなることがある訳だけど、そこは矜持としてグッと我慢して、早くいいものを完成させてみんなを驚かせたいとか、苦しい気持ちはひた隠しにして反骨精神を高めるとか、そういう気持ちに変換して、より大きな成果を上げられるようにしたいと思っている。 自分に限らず他人の行動についてもそうで、何かやりたいと言っている人や、あるいは筋の良さ悪さについて考えあぐ
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を見せない という要求に
掲示板の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表現に
開発中に求めること - ✘╹◡╹✘
7月1日にCookpadにインターンとして参加してから1週間が経過した。「インターンに参加する」では齟齬があり、「インターンとして参加する」が最もしっくりくる雰囲気。ここでは時間が過ぎていくのが速すぎて恐ろしい。月と太陽まで高速なサイクルを回さなくてもいいのに。 今まではてなで働いた経験しかなかったけど、今回クックパッドで働いた経験が1週間貯まった。これまでは「はてなだからこうしているのかもしれない」という捉え方しか出来なかったけど、この時点で「ああどこも共通してこうなっているのかも」という視点に立って考えることが出来る状態になった。その視点から考えてみて、幾つかの共通する意見が明確になってきた。 学習コスト Cookpadの開発は、途中からJoinしやすい環境が整っていた。Railsを採用しているところは特に、内製フレームワークに対する理解の為の学習コストが発生することなく、開発に取り掛
Node.jsでWebアプリ開発体験してる - ✘╹◡╹✘
URLにタグを付けるやつ 8月頃からAmazon API Gateway, AWS Lambda, Electronと、徐々にJavaScriptを触る機会が増えてきて結構面白くなってきたので、サーバサイドでの開発も試してみようと思い、一昨日から暇を見つけて簡単なWebアプリをつくってみてる。いまは習作としてURLにタグを付けられるだけのサービスをつくってみてる。コメントとか無くて、タグで情報整理して互いの役に立つことだけでコミュニケーションする。どうしても会話したかったらタグで会話すれば良さそう。公共性のある徳の高いタグをつけた人には何らかの承認をしてあげたいけどまだ特にアイデアが無い。構造的には、ユーザ入力があるし、データは永続化する必要があるし、そこそこ検索も必要だし、キャッシュのしがいもあるし、ログイン機能があるのでセッション管理とかも考えられて、練習に丁度よい。 凝りすぎて進捗ダ
エディタの実装をcycle.jsでMVIベースにしてみた話 - ✘╹◡╹✘
最近Electronでエディタをつくっており、最初はReact.jsを使いながらゆるいFlux風の設計でつくっていたのを、cycle.jsを使いながら一部をMVI風の設計に置き換えてみた。400行程度の一画面のコードだったので3時間ぐらいで置き換えられて、前よりも責務が適切に分割されるようになったので、本体部分も次の機能追加時に置き換えようと思っている。 とりあえずプレビュー画面だけ置き換えた 置き換えたのは、編集中のファイルを別画面でプレビューとして表示する画面で、ただプレビューするだけの機能のほかに連続したスライドとして表示するプレゼンテーション機能もある。1つ前のブログ記事を見てもらうとわかりやすいと思うけれど、次の画像のようなやつ。ボタンをクリックしてモードを切り替えたりキーボードを使って移動したり、またエディタ側でファイルの内容が書き換わったりと、それっぽく言えば幾らか動きのある
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風のデザインを
fluctでAPI GatewayやLambdaと仲良くやる - ✘╹◡╹✘
https://github.com/r7kamura/fluct というのをつくってて、これを使ってAmazon API GatewayとAmazon Lambda上に簡単にWebアプリをつくれるようにしたいなあと思っている。そうなると、Amazon API GatewayとAmazon Lambdaが適したWebアプリをつくるにあたっては、サーバの用意や管理が要らず、簡単にWebアプリを公開でき、複数の検証環境を手軽に用意でき、エンドポイントごとに独立してデプロイでき、まあまあスケールし、24時間自分専用のサーバを動作させないぶんそれなりに安く、AWSと運命を共にできるといった環境が手に入る。 インストール fluctはNode.jsで書かれていて、npm経由でインストールできる。なぜNode.jsかと言うと、Amazon LambdaでNode.jsかJava 8しか動かないのでNo
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
