2017年5月15日 - ✘╹◡╹✘
関数型プログラミングの基礎 関数型プログラミングの基礎 作者: 立川察理出版社/メーカー: リックテレコム発売日: 2016/11/18メディア: Kindle版この商品を含むブログを見る 読み終わった。JavaScript を題材に関数型プログラミングについて説明してくれる本で、最初の方では部分適用や高階関数について説明していって、後半ではジェネレータやモナドなどについて少し触れる、という内容だった。JavaScript に少し触れたことがある程度の人であれば理解できる内容なのが良かった。 関数プログラミング実践入門 [増補改訂]関数プログラミング実践入門 ──簡潔で、正しいコードを書くために (WEB+DB PRESS plus) 作者: 大川徳之出版社/メーカー: 技術評論社発売日: 2016/09/24メディア: 単行本（ソフトカバー）この商品を含むブログ (1件) を見る 『関数
amakan の React コンポーネント設計 - ✘╹◡╹✘
説明用の図 例として、amakan anime のトップページ https://anime.amakan.net/ の構造を挙げながら説明する。(ところで amakan anime は今月中に完成予定のサービスで実験的に公開している状態なので、まだまだ至らないところが多々あります…) 登場するコンポーネント一覧 React.Component クラスを継承したクラスをコンポーネントと呼ぶ。主に登場するコンポーネントは以下の通り。 Header Layout Router VideoPrograms Router コンポーネント 最上位のコンポーネントとして、Router コンポーネントが存在する。このコンポーネントを利用して、ページごとにどのコンポーネントを表示すべきかを分岐させる。amakan anime のトップページでは VideoPrograms コンポーネントを描画し、amaka
石川県の和倉温泉に合宿に行った - ✘╹◡╹✘
温泉地での開発合宿、通称シバ温泉ソンを敢行した。 予習 和倉温泉のある能登半島はアニメ『花咲くいろは』の舞台となった場所と聞いていたので、前日にTSUTAYAに入会してDVDを全巻借りて観ておいた。 京都駅から和倉温泉駅 サンダーバードに乗って終点まで行くと和倉温泉駅に着きます。最近だと新幹線で金沢まで行けるので、東京からも早い。意外と混んでいるので、デッキで立つ羽目になりたくなければ指定席を取っておいたほうが良い。ネットでJ-WEST会員になって早めに予約しておくと1000円ぐらい安くなります。 和倉温泉駅周辺 駅から温泉街までの数kmはこういう感じで、半島の海沿いにホテルが立ち並んでいる以外は、なんというかこう、土地が余っている。道の脇にいきなり70度の湯が湧き出ていたりする。 鳥 温泉卵を大量に抱えたわくたま君という恐ろしいキャラが居る。公園の奥に行くと海が見える足湯がある。 温泉街
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を見せない という要求に
ソフトバンクからIIJmioに乗り換えた - ✘╹◡╹✘
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
掲示板の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表現に
非同期連絡手段ブレスト - ✘╹◡╹✘
Slackで周知してもお知らせが流れてしまう Slackには受け取ったmention一覧があり便利 レスポンスが早く欲しい場合もある レスポンス速度と人事評価を結びつける 我々はコミュニケーションにおいてもレスポンスを200ms以内に返す 速度が落ちてくるとSlackにパフォーマンスエラーが出る PagerDutyでパフォーマンス監視 ステータスページ お知らせだけの場合とリアクションが欲しい場合がある リアクションが欲しいかどうかシステム的にわかると便利 リアクションしてほしいのかどうか分からないことが多い リアクションが終わったものと思っているかどうか分からない多い レビューとかでコメントついたときにそれでレビュー終わった感じなのかどうか分からない TODOリストを相手に送れるやつはどうか 「AさんがこのPull Requestのレビューをする」というタスクをつくる Aさんはレビューが
SoundCloudの曲を一緒に聴けるやつをつくってみた - ✘╹◡╹✘
https://syncbeats.herokuapp.com/ ※利用者も減ってきたということで、現在は公開を停止しています。 syncbeats というのを作ってみました。端的に言うとSoundCloudの曲をみんなで同時再生する君 です。部屋をつくってSoundCloudのURLを適当に突っ込むと順番に再生してくれて、あとから部屋に入ってきた人も同じ位置から再生されるというやつ。試しに曲を入れてリロードしてみると、途中から再生されるのが分かる。曲が無くなると、新しい曲が追加されるのを待ち受ける状態になる。たまに壊れるんでリロードすると治る。SlackやTwitterで部屋のURLを共有して一緒に聴くみたいな使い方がいいんじゃないでしょうか。 背景 前にシェアハウスに居たときにたまにリビングで音楽掛けることがあったんだけど、SoundCloudだとその場限りのセットリストつくるのも難し
京都に引っ越した - ✘╹◡╹✘
こんにちは、卓球ハウスアドベントカレンダー14日目です。前に住んでいた卓球ハウスというシェアハウスが12月で解散するので、先日シュッと京都に引っ越してきました。 シェアハウスは2013年の6月からやっていたので、2年半ぐらい住んでいたことになる。1月ぐらいに2人に声をかけて、そのあと3月ぐらいから住居を探してたので、準備云々を含めると大体3年ぐらい色々やっていた。人や家を探していたときの記憶が色濃く残っていて、振り返るとすぐそこにありそうなくらいつい最近のことのように思える。 3年というと、この辺りではちょうど人材の流れるスピードと同じぐらいで、実際入居してから職場が変わった人のほうが多いくらい。通勤環境が変わったり、身辺に大きな変化があったり、周辺環境に慣れてしまったり、また新しい変化への期待が込み上げてきたりということで、集まったときと同じくらいのノリで、まあ解散してみますかということ
アプリの外側とのやりとりをModelから取り除く - ✘╹◡╹✘
変更前 これはクライアントサイドのアプリケーションの例で、Modelの背後でWeb APIやonpopstate/pushStateを利用しており、Modelが太くなってる様子。 HTTP History | ^ | ^ | | | | v | v | .---- View <-- M o d e l <-- Intent <--. | | `----------------> DOM -------------------' 変更後 Web APIもonpopstate/pushStateもアプリケーションの外側にあり、DOMと同レイヤに存在するものであると位置づける。アプリケーションの外界とのやりとりを行う、ビジネスロジックを含まないアダプタを、ドライバーと呼んで抽象化する。ドライバーには入力を受け取る機能と出力を購読させられる機能がある。いまつくってるアプリでは以下の2つのドライバー
エディタの実装をcycle.jsでMVIベースにしてみた話 - ✘╹◡╹✘
最近Electronでエディタをつくっており、最初はReact.jsを使いながらゆるいFlux風の設計でつくっていたのを、cycle.jsを使いながら一部をMVI風の設計に置き換えてみた。400行程度の一画面のコードだったので3時間ぐらいで置き換えられて、前よりも責務が適切に分割されるようになったので、本体部分も次の機能追加時に置き換えようと思っている。 とりあえずプレビュー画面だけ置き換えた 置き換えたのは、編集中のファイルを別画面でプレビューとして表示する画面で、ただプレビューするだけの機能のほかに連続したスライドとして表示するプレゼンテーション機能もある。1つ前のブログ記事を見てもらうとわかりやすいと思うけれど、次の画像のようなやつ。ボタンをクリックしてモードを切り替えたりキーボードを使って移動したり、またエディタ側でファイルの内容が書き換わったりと、それっぽく言えば幾らか動きのある
最強の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:
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
Serverkitつくった - ✘╹◡╹✘
ChefやAnsible、Puppet、Itamaeなどの構成管理ツールをあまり使ったことがなく、勉強のためにServerkitというのをつくってみたので、現状こういう感じでやってみましたというのを書き残しておく。作り手の気持ちになればこそわかるものがあるだろうと思う。 ところで去年も似たような記事を書いた。 概要 Serverkitというのは、前述した通りChefやAnsibleのような構成管理ツール。マシンの理想的な状態をレシピと呼ばれるファイルに定義しておき、現在のマシンの状態と比較してその差分を埋めるためのもの。Rubyで書かれていて、手元にversion 2.0.0以上のRubyと、Serverkit、それからServerkitが利用している幾つかのライブラリが入っていれば動作する。Serverkitを動かすマシンと同じマシン、もしくはSSHで接続できるマシンに対して実行できる。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
multiple selections - ✘╹◡╹✘
