タグ

ブックマーク / r7kamura.hatenablog.com (10)

  • Ruby on Rails on React on SSR on SPA - ✘╹◡╹✘

    amakan での設計を例に、RailsでSingle-Page Applicationをつくるときの自分のやり方をまとめてみます。 GemJavaScriptで書かれた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を見せない という要求に

    Ruby on Rails on React on SSR on SPA - ✘╹◡╹✘
  • 掲示板の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

    掲示板のJavaScriptこういう風に最適化しました - ✘╹◡╹✘
  • モデルからJSON生成するときこうやってます2016 - ✘╹◡╹✘

    最近RubyReact.jsをよく利用していて、Rubyで扱っている値をJSONとして表現したいケースが増えてきた。こういうのどうやっていますかと人に聞きたいので、自分はこうやっていますよというのを説明のためにまとめておくことにする。 概観 自分の場合、次のような方法で実装することが多い。 JSONとして表現したいオブジェクトをコンストラクタで受け取るクラスを定義する クラスに #as_json を定義して適当なHashを返すようにする Object#to_json が再帰的に #as_json を利用するようにする (ActiveSupportがやってくれる) コード 具体的には、以下のようなクラスをつくっている。これは最近つくっている掲示板での例で、Megaboard::Resources::Comment はコメントのJSON表現のためのクラスである。いわばコメントのJSON表現に

    モデルからJSON生成するときこうやってます2016 - ✘╹◡╹✘
  • WYSIWYG & Markdownなエディタ - ✘╹◡╹✘

    Preview画面とエディタ画面の両方を並べてリアルタイムプレビューとかやるのはだるいけど、かといってWYSIWIGエディタを使ってボタンをクリックしたりキーボードショートカットを覚えるのもだるい。Markdownを書いているつもりで記述したら勝手にWYSIWYGのようにスタイルが適用されてくれるエディタは無いかなと思って、既存のものを調べたあと試しに酷く簡単なものをつくってみた。 既存の実装 検索して見つけた近いものはこの辺り。 Pen - What You See Is What You Get (WYSIWYG) ZenPen ~ Minimal Distraction, Maximim Zen grande.js Medium.js ZenPenはシンプルなWYSIWYGエディタを実現するための実装。文書の編集にはcontentEditable属性とdesignMode属性を利用。

    WYSIWYG & Markdownなエディタ - ✘╹◡╹✘
  • Node.jsでAWSのAPIで認証するやつ書いた - ✘╹◡╹✘

    https://github.com/r7kamura/aws-signer-v4 Amazon API GatewayのREST APIを利用したかったんだけど、Node.js用のaws-sdkにはまだその機能が入っていないこともあり、自分で認証するためのライブラリを書いた。リクエストのメソッド、URL、ヘッダ、ボディ、AWSのAccessKeyID、SecretAccessKey、リージョンを、決められた手順に従って加工し、Authorizationリクエストヘッダに入れることで認証が通るようになる。その決められた手順を実装した。詳しい仕様は AWS Signature version 4 のページに記載されているがほとんどの人間は読む必要は無い。自分でこのロジックを実装したいなら、JavaScriptの場合は aws-sdk-js/lib//signers/v4.js にAWSのSD

    Node.jsでAWSのAPIで認証するやつ書いた - ✘╹◡╹✘
  • 全てが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

    全てがJSONになる - ✘╹◡╹✘
    aki77
    aki77 2014/06/10
  • ElasticSearch Serverを読んだ - ✘╹◡╹✘

    高速スケーラブル検索エンジン ElasticSearch Server (アスキー書籍) 作者: Rafal Kuc (lにストローク符号、cにアクサン・テギュ付く),Marek Rogozinski (nにアクサン・テギュ付く)出版社/メーカー: KADOKAWA / アスキー・メディアワークス発売日: 2014/03/25メディア: Kindle版この商品を含むブログを見る 高速スケーラブル検索エンジン ElasticSearch Server というを読んだ。読んだ理由は、タイミングが良かったから。効率的に学ぶのに丁度いい時機というものがあると思う。何かを学ぶのには動機と情報源が必要。動機が無ければ勉学は長続きしないし、無理矢理覚えようとしても楽しくない。Elasticsearchに対しては何か面白そうという気持ちを最近少しだけ感じていて、こういう気持ちが湧くのは貴重なことだから大

    ElasticSearch Serverを読んだ - ✘╹◡╹✘
  • streamerというCUIアプリを作っています - ✘╹◡╹✘

    https://github.com/r7kamura/streamer 概要 ストリームっぽいもの全般を何でもTerminalで流そうよというCUIアプリです。 jugyoさんの作られたTwitterクライアントEarthquake.gemを改造してつくりました。 ストリームっぽいものの例としては、twitterや、2chや、ソーシャルブックマーク、 各種ログ、IRCEmail、RSSなどを想定しています。 スクリーンショット インストール Ruby 1.9以上を利用して下さい。 rvmを利用している方は日語表示の為にreadlineオプションを有効化してrubyを入れる必要があります。 Gemでは提供していないので適当なディレクトリに置いて起動してください。 $ git clone git://github.com/r7kamura/streamer.git $ cd stream

    streamerというCUIアプリを作っています - ✘╹◡╹✘
  • zshのautoload - ✘╹◡╹✘

    zsh autoload 意味— 人月さん (@r7kamura) 11月 25, 2012 使い方 % echo $fpath /usr/local/Cellar/zsh/4.3.12/share/zsh/functions /usr/local/Cellar/zsh/4.3.12/share/zsh/site-functions % cat $fpath[1]/a echo 1 % autoload a % a 1 仕組み autoload aが呼び出される autoload用に関数名aを記録する 関数aが呼び出される 配列$fpathを元に、ファイルaを探す ファイルaが見つかる ファイルaの中身を関数aの実装としてメモリ上に読み込む 関数aが実行される -U オプション aliasを無効化 % alias echo='shutdown -h now' % autoload a %

    zshのautoload - ✘╹◡╹✘
    aki77
    aki77 2012/11/27
  • 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

    httpd.confについて調べたのでまとめたよ - とある技術の備忘録
    aki77
    aki77 2011/03/18
  • 1