amakan の React コンポーネント設計 - ✘╹◡╹✘
説明用の図 例として、amakan anime のトップページ https://anime.amakan.net/ の構造を挙げながら説明する。(ところで amakan anime は今月中に完成予定のサービスで実験的に公開している状態なので、まだまだ至らないところが多々あります…) 登場するコンポーネント一覧 React.Component クラスを継承したクラスをコンポーネントと呼ぶ。主に登場するコンポーネントは以下の通り。 Header Layout Router VideoPrograms Router コンポーネント 最上位のコンポーネントとして、Router コンポーネントが存在する。このコンポーネントを利用して、ページごとにどのコンポーネントを表示すべきかを分岐させる。amakan anime のトップページでは VideoPrograms コンポーネントを描画し、amaka
Ruby 製の DMM Web サービス用のライブラリをつくりはじめた - ✘╹◡╹✘
DMM Web サービスとは https://affiliate.dmm.com/api/ に公式の情報があります。下手な説明はできないので、こちらを読んでください。 ホスティング 今回つくりはじめたライブラリ rdmm のソースコードは、GitHub にホスティングされています。最低限の使い方も README に（自分が忘れたときに思い出せる程度には）記述してあります。 https://github.com/r7kamura/rdmm 利用時は rubygems.org から Gem として取得できます。執筆時点でのバージョンは 0.0.3。 https://rubygems.org/gems/rdmm rdmm の機能 現時点では以下の2つのエンドポイントに対応しています。 商品情報検索 API シリーズ検索 API 商品情報検索 API は、名前の通り DMM の扱っている商品を検索
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
石川県の和倉温泉に合宿に行った - ✘╹◡╹✘
温泉地での開発合宿、通称シバ温泉ソンを敢行した。 予習 和倉温泉のある能登半島はアニメ『花咲くいろは』の舞台となった場所と聞いていたので、前日にTSUTAYAに入会してDVDを全巻借りて観ておいた。 京都駅から和倉温泉駅 サンダーバードに乗って終点まで行くと和倉温泉駅に着きます。最近だと新幹線で金沢まで行けるので、東京からも早い。意外と混んでいるので、デッキで立つ羽目になりたくなければ指定席を取っておいたほうが良い。ネットでJ-WEST会員になって早めに予約しておくと1000円ぐらい安くなります。 和倉温泉駅周辺 駅から温泉街までの数kmはこういう感じで、半島の海沿いにホテルが立ち並んでいる以外は、なんというかこう、土地が余っている。道の脇にいきなり70度の湯が湧き出ていたりする。 鳥 温泉卵を大量に抱えたわくたま君という恐ろしいキャラが居る。公園の奥に行くと海が見える足湯がある。 温泉街
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をSidekiqに移行した - ✘╹◡╹✘
https://amakan.net/ のこの辺の改善の続き。 amakanをUnicornからPumaに移行した - ✘╹◡╹✘ amakanでyarnを使うようにした - ✘╹◡╹✘ amakanでRuby 2.3.3を使うようにした - ✘╹◡╹✘ amakanを Ruby 2.3.3 から 2.4.0-preview3 に移行した - ✘╹◡╹✘ amakanのフロントエンドを色々改善した - ✘╹◡╹✘ Sidekiq amakanでは、Webサーバのバックグラウンドで処理を行うためにこれまでResqueを使っていたが、Sidekiqに変えた方がパフォーマンスが良くなる可能性があったので変えてみた。必要なメモリ量がかなり減ったように見える。 https://github.com/resque/resque https://github.com/mperham/sidekiq Si
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 の設定ファイルを用意するような設計になっていたが。しかし
amakanでyarnを使うようにした - ✘╹◡╹✘
amakanをUnicornからPumaに移行した - ✘╹◡╹✘ に引き続き、小さい改善を加えた。 変更の概要 https://amakan.net/ への今後の変更に備えて、テストやデプロイに掛かる時間を短くする恩恵が良いだろうと思い、node_modulesの管理に使うツールとしてyarnを使うことにした。結果的に、テスト用ビルドの所要時間が130秒から70秒に、デプロイ用ビルドの所要時間が300秒から200秒になった。 CircleCIの設定変更 継続的なテストとデプロイ作業の実行のために、amakanではCircle CIを利用している。Circle CIを使っている理由は、仕事でも使っている上にPrivateでも無料だから。 yarnを利用するためにCircle CIに追加する必要があった設定は、以下の通り。 指定したバージョンのyarnが入っていない場合はインストールする グ
amakanをUnicornからPumaに移行した - ✘╹◡╹✘
移行したぞ、というだけで特に技術的な知見の無い記事です。 移行の背景 https://amakan.net/ という、レビューの無いシンプルな読書管理サービスを2016年7月から運営している。 5ヶ月ほど運用している中で、利用してくれている人達に色々な意見をもらうことができて、これに対応して年末に時間を取って大きく改善しようとしている。しかし「年末に時間を取ってやろうとしていて...」という発言は明らかに危険信号で、高確率で「結局やれなかったよHAHAHA」ということになるのが目に見えている。そこで、年末に向けて小さな改善を徐々に積み重ねていくことで、モチベーションを高めつつ、新たに変更を加えることへの心理的障壁を無くそうと目論んでいる。今回はその一環として、amakanを動かすWebサーバをUnicornからPumaに変更することで、改善を図ることにした。 amakanの事情 amaka
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の周辺環境は大変で、何をやるに
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を見せない という要求に
汎用絵文字ライブラリ Somemoji - ✘╹◡╹✘
ここ最近絵文字で遊んでいて、Somemoji というライブラリをつくったので知見を共有します。 さまざまな絵文字セット 様々なプラットフォームのために、様々な組織が、様々な絵文字セット (絵文字画像の集合) を提供しています。 Apple emojidex EmojiOne Facebook Google HTC LG Microsoft Mozilla Samsung Twitter 大抵の絵文字セットはUnicodeのEmojiの仕様に則って実装されていて、このコードポイントに対応する絵文字画像はこれ、というように互換性があります。Unicode 6.0, Unicode 7.0, Unicode 8.0, ... とバージョンが増えるに従って定義されるEmojiの数も増えていっているので、それぞれの絵文字セットごとに対応具合はまちまちという状況ではあるものの、よく使う主要なものについ
ソフトバンクから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
モデルからJSON生成するときこうやってます2016 - ✘╹◡╹✘
最近RubyとReact.jsをよく利用していて、Rubyで扱っている値をJSONとして表現したいケースが増えてきた。こういうのどうやっていますかと人に聞きたいので、自分はこうやっていますよというのを説明のためにまとめておくことにする。 概観 自分の場合、次のような方法で実装することが多い。 JSONとして表現したいオブジェクトをコンストラクタで受け取るクラスを定義する クラスに #as_json を定義して適当なHashを返すようにする Object#to_json が再帰的に #as_json を利用するようにする (ActiveSupportがやってくれる) コード 具体的には、以下のようなクラスをつくっている。これは最近つくっている掲示板での例で、Megaboard::Resources::Comment はコメントのJSON表現のためのクラスである。いわばコメントのJSON表現に
最終掲示板戦争 - ✘╹◡╹✘
こんにちは、r7kamuraです。26年なにも考えずに生きてきて、レールに沿った人生を歩んできました。 さて、数日前からなんとなく気が触れてRuby on Railsで掲示板をつくってみている。上の画像はいまつくりかけのもの。CSS全部手で書いてみてるからまだ見てくれがかなりショボい。最初に手を動かしはじめたきっかけは、2007年頃に「Railsを使って15分で掲示板をつくってみよう！」という記事を見たのを思い出したのがきっかけ。いまのところ10時間ぐらい経過している。15分はちょっと無理そう。2016年にもなって10時間以上かけて掲示板つくってるのは皮肉すぎる事実。もはや何故掲示板をつくっていたのか分からなくなってきつつある。とりあえず濁り切らない内に考えていることを書いておく。最近なんで掲示板つくってんのって聞かれることが増えてきたので、そのときにこの記事のURL出せると多分便利。 掲
勤怠管理アプリブレスト - ✘╹◡╹✘
パケットでやる 携帯のMACアドレスで分かる 監視カメラで分かる Slackで発言してたら働いてる Googleアカウントでログイン シングルサインオン そもそも働きを管理する社会にしたくない 勤怠は管理したくないもの 法律周りがたいへん 36協定があるからたいへん 36signals とりあえずrails newすればいい 無駄にSPA化 Reactでヌルヌル出勤 Reactでヌルヌル退勤 社労士を借りてこればいい 社労士 なり方 電気工事士からなれる派生ルートがある スフィア盤みたいなもの 電気工事士ルートからの社労士派生は異常なビルド 暇な法学部サークル 無料 管理側の負担を減らすのが大事 申請フローが大事 Slackボタンで承認 DMでやる 上長のDMに飛ばす Gmailのボタンで承認 自動承認bot IBMの人工知能で自動承認 e就業をバックエンドにしてフロントエンドだけつくる
43型4Kディスプレイ注文したので決め手を書いとく - ✘╹◡╹✘
おおよそ間違いが幾つか含まれてそうな知見 HDMI 2.0 か Display Port で出力するとほぼ最高の状態で出力できる HDMI 2.0 で出力できるマシンは今のところ少ない (例えば最近のMacbook ProでもHDMI 1.4) Macbook Proでは代わりにDisplay Port経由で出力すると良い 4つの入力を受け取って1画面に4分割する機能を備えたディスプレイもある (PBP4in1というらしい) IPS液晶とVA液晶では基本的にはIPSのほうが視野角が優秀だが最近はそこまで顕著に違いはない 40型前後の4Kディスプレイは5万円から9万円ぐらいのものが多い TV寄り製品かPC寄り製品かでリモコンの有無や自動電源オフなどの使い勝手が異なる 注文したもの はい / 次の商品を購入しました：Philips(フィリップス) 『Philips 43型ワイド液晶ディスプレイ
近況 - ✘╹◡╹✘
近況報告です。 WikiHub 今年の2月につくりはじめた https://wikihub.io/ の開発がまだ順調に続いている。全ての変更を CHANGELOG - WikiHub Help に書くようにしているので、最近WikiHubの開発の様子が見たければこれを見るのが早い。数日に1つ新機能を追加しながら、1つ不具合を潰すぐらいの速度で元気。 https://wikihub.io/@r7kamura を見るとわかるけど、利用者としてもほぼ毎日何らかの記事を書いている状態。最近 https://nippo.wikihub.io/ という日報を書くためのコミュニティが少しずつ流行ってきている。公開された場で書くとわりとちゃんとしようという気持ちが湧くのでオススメ。良かったら皆さん日報書きましょう。誰でも書けます。日本人には日記より日報。 あとは https://gaming.wikihu
WikiHubの開発意外と続いてる - ✘╹◡╹✘
前回の記事 あのWikiHubが天下Wiki武道会に参戦 - ✘╹◡╹✘ で触れたけど、先月から WikiHub というWikiをつくっていて、趣味程度ではじめたものの結構な勢いで開発が続いてる。 最近の変更点 ここ最近の新機能として、 SSL対応 GitHubアカウントでのログイン エクスポート機能 ページテンプレート機能 Markdownでチェックボックスつけられるやつ HipChat・Slack連携 Webhook 二段階認証 などを実装してみたりしていた。CHANGELOG - WikiHub Help に変更点を書いていってあるので、ここ見るともっと詳しい様子が分かって便利。今日これやったぞーっていうのまとめて公開しておくとがんばった感が出るので、WebサービスとかでもCHANGELOGを書いて公開していくのは良い取り組みだと思いました。よく考えたらやってない感も出るので諸刃の剣
routes.rbをシンプルに書き直したいときのアレ - ✘╹◡╹✘
Rails - Resource Routingつらくね？ - Qiita というのがあり、更に ルーティング定義時の変数名のアレ - ✘╹◡╹✘ というのもあるので、最近Railsアプリのルーティング部分をリファクタリングすることが多い。 最近のRailsだと、開発環境で存在しないパスにアクセスすると、No route matches [GET] "/a/b/c" みたいな赤い画面が出ると思うんですが、そこで既存のルーティングはこれですよというのがtable要素で表示される。それを画面上で適当にコピーすればtsv形式になるので、Googleスプレッドシートにペタッと貼って、列を入れ替えたりソートしたりして (基本的にはパスの辞書順で並べるのが楽) TSVをエクスポートすると、なんかいい感じのデータが得られます。それを適当にRubyで加工して、最終的にroutes.rbにペタッと貼ってテス
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
