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を見せない という要求に

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

移行したぞ、というだけで特に技術的な知見の無い記事です。 移行の背景 https://amakan.net/ という、レビューの無いシンプルな読書管理サービスを2016年7月から運営している。 5ヶ月ほど運用している中で、利用してくれている人達に色々な意見をもらうことができて、これに対応して年末に時間を取って大きく改善しようとしている。しかし「年末に時間を取ってやろうとしていて...」という発言は明らかに危険信号で、高確率で「結局やれなかったよHAHAHA」ということになるのが目に見えている。そこで、年末に向けて小さな改善を徐々に積み重ねていくことで、モチベーションを高めつつ、新たに変更を加えることへの心理的障壁を無くそうと目論んでいる。今回はその一環として、amakanを動かすWebサーバをUnicornからPumaに変更することで、改善を図ることにした。 amakanの事情 amaka

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

iPhone 7を購入するついでにSIMフリー版を選択し、ついでにソフトバンク回線を解約してIIJmioを契約した。 ソフトバンク利用状況 2009年にiPhone 3GSが発売された頃から、iPhone経由でソフトバンクの回線をずっと利用していた。最近の平均的な月額利用料金は8,200円ぐらい。毎月の通信量は3GB強。以下は8月の利用料金の内訳。まあ高い。 通話料 140円 基本料 (ホワイトプラン) 934円 パケットし放題フラット for 4G LTE 5,700円 PCダイレクト 1,000円 S!メール (MMS) 100円 S!ベーシックパック 300円 テザリングオプション 500円 IIJ mio IIJ mioにしたのは、周りの信頼できる人間が利用していたからという感じです。SIM1枚でdocomo回線で月3GBの通信量のプランを選んだので、月額利用料金は税抜きで1,60

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

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

二週間ほど前からなぜか急にElectronを触りはじめたんですが、題材につくっているretro-twitter-clientというTwitterクライアントの v0.0.12 を出しました。別に各バージョンごとにブログで報告しているとかそういうことはなくて、急にv0.0.12を報告しています。ありがとうございます。折角なので最近の変更点を紹介します。 キーボードショートカット タブを移動するためのキーボードショートカットを追加しました。Macの場合は ⌘+] で次、⌘+[ で前のタブに移動できます。よく使う検索語句を登録しておくカスタムタブ機能など、今後もタブを便利にしていく可能性があるので、いまのうちに便利機能を付けておこうという気持ちです。他に、検索ボックスにフォーカスするとか、DevToolsを開いて内部実装を調べるとか、いろいろ便利なものを適当に付けています。メニューに項目も追加さ

藤村龍至 プロトタイピング-模型とつぶやき (現代建築家コンセプト・シリーズVOL.19) 作者: 藤村龍至出版社/メーカー: LIXIL出版発売日: 2014/09/16メディア: ペーパーバックこの商品を含むブログ (2件) を見る 『進化するアカデミア「ユーザー参加型研究」が連れてくる未来』 を読んでいる中で、研究や開発におけるプロセスそのものを共有するための方法が気になったことから、超線形設計プロセス論を提唱する建築家 藤村龍至氏の『プロトタイピング-模型とつぶやき』を読んだ。 過程を残していく プロトタイプとして建築模型をつくっていく過程の話で、与えられた条件を元にまず最もシンプルな状態から始め、課題を見つけながら少しずつ改善を加えていく様子が実例とともに紹介されている。この作業を反復しながら適用していくことで、模型の状態を都度更新していくという設計手法。本書は、この模型の変化の

Rafal Tomalの書いた『The Essential Web Design Handbook』という本を読んだ。初心者のためにWebデザインの基本となる知識を広く紹介している。構成としては、筆者がWebデザインを行うときのプロセスをまず最初に紹介し、その各段階を追っていきながら、「この作業は無視されがちだけどこういう点で効率的だからやった方がいい」「これを考えるときにはこういう知識を使う。今回の例ではこうやって考えた」という具合に進んでいく。 プロセス 筆者が推奨するWebサイトのデザインプロセスは次の通り: 調査して計画をつくる 発想を膨らませる スタイルガイドをつくる ワイヤーフレームを組む モックアップをつくる コードを書く 調査と計画 調査するというのは、明確なクライアントがいる場合は要求を聞くことであったり、競合サイトの様子を調べてくることであったり、使えそうな資料を広範に

オブジェクト指向でなぜつくるのか 第2版 作者: 平澤章出版社/メーカー: 日経BP社発売日: 2014/03/05メディア: Kindle版この商品を含むブログ (2件) を見る TL;DR 多くの人の「この本を読むべきかどうか」という関心事に先に回答しておくと、「万人が読んでおいて損は無いとまでは言い切れないけれど、オブジェクト指向に興味があって元気もあるという奇特な人間は読んでも良い」です。 オブジェクト指向とは何か 平澤 章さんが書いた「オブジェクト指向でなぜつくるのか」という本を読みました。オブジェクト指向を「難しいソフトウェア開発を楽に行うための総合技術」と表現しながら、「オブジェクト指向とは何か」という問いに対して現実的な解を与えようという一貫した姿勢に親しみを覚えました。 保守や再利用を目的とした技術 目的という側面では「オブジェクト指向はソフトウェアの保守や再利用をしやす

1枚目: https://twitter.com/ainame/status/482517515914854400 by @ainame 2枚目: https://twitter.com/hiraguri718/status/482532042937094144 by @hiraguri718

ARST ARSW: Star Wars sorted alphabetically - YouTube よく出る単語は出た数だけ再生してくれるし、動画見てたらどういうコンテキストで使うか思い出せるし、 ABC順で覚えやすいし、とにかく便利。

背景 レビューに時間を掛けているわりにあまり成果が出ていない 問題意識を感じる レビューという行為にもっと周りから理解があればいいのに、という風に考える 原因を外部に求めるのは良くないなと考え直す これまで自分が発言したコメントを読み返す 過度にフォーマル過ぎたり、コードの表層しか指摘していないところが多々あることが分かる 問題 GitHubのPull RequestやIssueでのコメントに、出来るだけ間違いや誤解が無いように気を付けられた丁寧な文章で書いてしまうことが多い。しかしながら、もっと普段互いに会話するときに使うような雑な言葉で書いて、コミュニケーションの量を増やした方が良いんだろうなと思う。 そもそもコミュニケーションの量が足りていないせいで、レビュアーがそのドメインについてあまり理解が得られず、問題の表面的な部分についてのみしか発言出来ないということが沢山ある。サービスごと

この記事には、Rubyを書いているときに「これは言語化されたり公式化されたりしていないけれど基本的には必ずこのパターンに則ってプログラムを書いているな」ということをふと思い出したときにやってきてそのパターンを書く。多分3パターンぐらいで終わると思う。ウケが良ければ思い出す確率が高くなると思う。題材さえあれば何も考えずに書けるので、これを書くコストは全然高くない。 名前が"?"で終わるメソッドは必ずtrueまたはfalseのどちらかを返す trueとfalse以外(例えばnil)が返る可能性がある場合は、必ず式の先頭に!!を付けてtrueかfalseになるようにしてる。 このパターンを守ることがとても大事だという風には全く考えていないけど、もしhas_user?がuserを返すとして、has_user?という名前のメソッドがUserオブジェクトを返すというのは一体どういう意味を持っているのだ

テスト書きすぎ問題 - hitode909の日記 階層が増えるとテストが増える - はこべブログ ♨ テストと対応関係 - $shibayu36->blog; 最近書いているWebアプリは、HTTPリクエストを送ってレスポンスと状態をテストする、というテストだけ書くようにしてる。リクエストするとブログエントリを返す、というサービスだとこういう風なテストを書いてる。(HTMLを返すようにすると話が広がって説明が面倒なのでJSONを返すAPIで説明する) describe "Entry resource" do let(:params) do {} end let(:env) do { "HTTP_AUTHORIZATION" => "Bearer: #{access_token.token}" } end let(:access_token) do AccessToken.make(user

プログラミングどうやって覚えたんですか？って聞かれて、そういう情報少ない気がしたので書く。 チラシの裏みたいな長文だらだら書くの、はてなブログでも1回やってみたかった。 最初は、大学のサークルみたいなやつで先輩がRailsをつかってて、Railsっていうサイト作るためのフレームワーク(?)っていうのがあるから覚えようって聞かされて、MVCみたいな話をされた。サッパリだった。それ自体の概念もサッパリだったが、それを使う理由も分からなくてメタサッパリもあった。3時間くらい教えてもらったけど、サッパリだった。その後そこでは結局Railsを使うことはなかった。並行してRubyというものも教えてもらって、irbというのがあってそこで色々試すということをした。面白いなー会話してるみたいだなーと思って教えてもらっているときは少し弄っていたけど、使う理由も分からなかったので使わなくなった。ちなみにWind