amakan の React コンポーネント設計 - ✘╹◡╹✘
説明用の図 例として、amakan anime のトップページ https://anime.amakan.net/ の構造を挙げながら説明する。(ところで amakan anime は今月中に完成予定のサービスで実験的に公開している状態なので、まだまだ至らないところが多々あります…) 登場するコンポーネント一覧 React.Component クラスを継承したクラスをコンポーネントと呼ぶ。主に登場するコンポーネントは以下の通り。 Header Layout Router VideoPrograms Router コンポーネント 最上位のコンポーネントとして、Router コンポーネントが存在する。このコンポーネントを利用して、ページごとにどのコンポーネントを表示すべきかを分岐させる。amakan anime のトップページでは VideoPrograms コンポーネントを描画し、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の周辺環境は大変で、何をやるに
サメを支える技術 - ✘╹◡╹✘
写真のサメのぬいぐるみの購入方法についてです。 1. 本体 Original Chumbuddy のやつです。本家サイトでは品切れで買えないことが多いので、Amazon.com: Original Chumbuddy Skin (Stuffing Not Included): Toys & Games で買えます。結構な値段します。 2. 綿 上記の商品は皮だけなので中に詰める綿が必要です。8kgぐらいあると安心でしょう。結構な値段します。自分は Amazon | フックラ手芸綿ソフィア 3キロ（300g入り10袋セット） クリスマス飾りつけにも最適 | 手芸わた 通販 を2つ買いました。お腹のところにジップがあるので簡単に詰められます。もうちょっと綿詰めてふっくらさせたい感じもしますが満足しています。ぐったりしてきたら買い足す予定です。 おわり 以上です。掃除のときとかには持ち上げる必要
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を見せない という要求に
汎用絵文字ライブラリ 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
最終掲示板戦争 - ✘╹◡╹✘
こんにちは、r7kamuraです。26年なにも考えずに生きてきて、レールに沿った人生を歩んできました。 さて、数日前からなんとなく気が触れてRuby on Railsで掲示板をつくってみている。上の画像はいまつくりかけのもの。CSS全部手で書いてみてるからまだ見てくれがかなりショボい。最初に手を動かしはじめたきっかけは、2007年頃に「Railsを使って15分で掲示板をつくってみよう！」という記事を見たのを思い出したのがきっかけ。いまのところ10時間ぐらい経過している。15分はちょっと無理そう。2016年にもなって10時間以上かけて掲示板つくってるのは皮肉すぎる事実。もはや何故掲示板をつくっていたのか分からなくなってきつつある。とりあえず濁り切らない内に考えていることを書いておく。最近なんで掲示板つくってんのって聞かれることが増えてきたので、そのときにこの記事のURL出せると多分便利。 掲
SoundCloudの曲を一緒に聴けるやつをつくってみた - ✘╹◡╹✘
https://syncbeats.herokuapp.com/ ※利用者も減ってきたということで、現在は公開を停止しています。 syncbeats というのを作ってみました。端的に言うとSoundCloudの曲をみんなで同時再生する君 です。部屋をつくってSoundCloudのURLを適当に突っ込むと順番に再生してくれて、あとから部屋に入ってきた人も同じ位置から再生されるというやつ。試しに曲を入れてリロードしてみると、途中から再生されるのが分かる。曲が無くなると、新しい曲が追加されるのを待ち受ける状態になる。たまに壊れるんでリロードすると治る。SlackやTwitterで部屋のURLを共有して一緒に聴くみたいな使い方がいいんじゃないでしょうか。 背景 前にシェアハウスに居たときにたまにリビングで音楽掛けることがあったんだけど、SoundCloudだとその場限りのセットリストつくるのも難し
amakanでKindle Unlimitedの上位100件を集めた - ✘╹◡╹✘
近年、Kindle Unlimited の日本上陸により、我々の進捗はますますダメになっている。理想状態において、無限に漫画を読み続けることができれば、人は進捗を完全に停止させることができる。しかしこの仮定は、如何にして読みたい作品を発見するかという問題に我々を導く。 Kindle Unlimitedで作品を探す方法として、masawadaの日記 では「刊行数が少ない出版社順にタブを開く」「星4以上の書籍に限定する」「あとはがんばって全部みる」という手法が紹介されている。id:masawada はこの課題について新たな試みを行ったが、多くの人間はがんばる気概を持ち合わせていない。 先月から開発を始めた amakan.net では、それぞれの作品ごとに、漫画やラノベのシリーズ判定、Kindle Unlimited対応判定、読みたい本・読んだ本の管理を行っている。そこで、このデータを利用して「
全てが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
httpd.confについて調べたのでまとめたよ - とある技術の備忘録
最近学科の友人3人とサーバ/セキュリティについての勉強会を週1で行っていて、毎回何か調べてくることになっており、今回は apache の設定について少し調べてきました。初心者がまとめたので間違っている部分があるかもしれませんが、勉強の役に立てて頂ければ幸いです。 httpd.confはどこにある？ 最小限のhttpd.conf 3つのセクション セクション1: GlobalEnvironment セクション2: MainServerConfiguration セクション3: VirtualHosts モジュールの追加 外部設定ファイルの読込み サーバリソースの監視方法 httpd.confはどこにある？ OSによって異なりますが、以下の階層に置いてある可能性が高いです。 CentOS、FedoraなどRed Hat系 /etc/httpd/conf/ SUSE系、MacOSX /etc/a
エディタの実装をcycle.jsでMVIベースにしてみた話 - ✘╹◡╹✘
最近Electronでエディタをつくっており、最初はReact.jsを使いながらゆるいFlux風の設計でつくっていたのを、cycle.jsを使いながら一部をMVI風の設計に置き換えてみた。400行程度の一画面のコードだったので3時間ぐらいで置き換えられて、前よりも責務が適切に分割されるようになったので、本体部分も次の機能追加時に置き換えようと思っている。 とりあえずプレビュー画面だけ置き換えた 置き換えたのは、編集中のファイルを別画面でプレビューとして表示する画面で、ただプレビューするだけの機能のほかに連続したスライドとして表示するプレゼンテーション機能もある。1つ前のブログ記事を見てもらうとわかりやすいと思うけれど、次の画像のようなやつ。ボタンをクリックしてモードを切り替えたりキーボードを使って移動したり、またエディタ側でファイルの内容が書き換わったりと、それっぽく言えば幾らか動きのある
最近のAPI活動 - ✘╹◡╹✘
進捗 2015-07-27 API Gateway用にRubyでSwagger触るやつ書いた 2015-07-30 Node.jsの練習にHTTPクライアントつくった 2015-07-31 Node.jsでAWSのAPIで認証するやつ書いた 2015-08-02 Node.jsでAmazon API Gatewayのクライアント書いた 2015-08-03 Amazon API Gatewayに自動で定義するやつ 2015-08-04 Amazon Lambdaにまとめてアップロードするやつ 2015-08-05 SwaggerをAPI Gatewayに反映させるやつ 2015-08-06 LambdaとAPI Gatewayまとめて管理するやつ 2015-08-07 LambdaとAPI Gateway用のWAF 2015-08-08 fluctでAPI GatewayやLambdaと仲
デザイン変更するときキャプチャ撮りまくると捗る - ✘╹◡╹✘
これまではどちらかと言うとDBやWeb APIみたいな開発作業が多かったけど、最近はHTML/CSSを触るようないわゆるWebデザイン的な作業をする機運が高まってきた。あんまりちゃんとやったことが無いために年始から色々と考えてて、まあその結実としてキャプチャ撮ると捗るという体験があったので書き残しておく。ちなみにキャプチャは無い。あとでデザイン変えたやつ公開したら過程を整理して紹介できると良いと思う。 過程を残すと意見をもらいやすい 『藤村龍至 プロトタイピング-模型とつぶやき』という本の中に、プロトタイプとして建築模型をつくっていく過程の話がある。与えられた条件を元にまず最もシンプルな状態から始め、課題を見つけながら少しずつ改善を加えていく様子が実例とともに紹介されている。この作業を反復しながら適用していくことで、模型の状態を都度更新していく。この方法には、設計者以外の人でも設計過程を見
リゾートワーク - ✘╹◡╹✘
1週間ほど休みとって沖縄旅行いってきた。 快適な空の旅 同乗者と空港でゆっくり朝ごはん食べてたら普通に飛行機もう飛んじゃっててウケた。 ギークハウス沖縄 2日間泊めてもらったり近場の飯屋に連れて行ってもらったりとにかくお世話になった。 台風で落ちてきたココナッツ割って食べた。 屋上の見晴らしが良くて羨ましい。 東京に来る機会があれば卓球ハウスに是非。 レール 那覇空港から首里城付近まで、ゆいレールというモノレールが通っているので初日は主にこれで移動。 700円で24時間のあいだ乗り放題で重宝した。 主要なところしか通っていないのでモノレールだけでは行けないところもあるけど、 特にめっちゃここに行きたいみたいな願望は無くて漠然と沖縄吸いたいという感じだったから、 むしろレールが引いてあって便利だった。 首里城 観光地にしてはそこまで観光色が強くなくて印象が良い。 城壁 城壁好きなので一周出来
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
