中〜大規模なSPAを開発する時に抑えておきたい10のポイント - KAYAC engineers' blog
こんにちは。カヤックのSPAおじさんこと島津です。 今年はReactとVueを使ったSPA開発プロジェクトをいくつか担当してきたので、そこで得た知見の総まとめをしたいと思います。 ※ ここでのSPAとはすべてのViewをJavaScriptで書くWebアプリのことを指します。サーバーサイドMVCを主軸にViewの一部をReactやVueで書くこともありますが、今回はそのケースではありません。 1. フレームワーク 数年前とは事情が変わり、 フレームワークを使わないという選択肢は昨今だともう無いでしょう。丸腰のJSでDOMを弄っていた時代に比べると、かなり安定したフロントエンドの開発ができるようになりました。 人気フレームワークの台頭になっている React + Redux Vue + Vuex をこの1年使ってきましたが、書き方は違えどFluxアーキテクチャ・仮想DOM・コンポーネント志向
#6「Shardingマジ怖い」tech.kayac.com Advent Calendar 2012 - KAYAC engineers' blog
最近子供が産まれたaraga(@ken39arg)です｡ このエントリはtech.kayac.com Advent Calendar 2012 6日目の記事です。 テーマは「私の中のマイイノベーション 2012」 2日目の記事を見て、条件反射的に僕もおっぱいについての記事を書こうと思いましたが、 産まれた子供が「お父さんはいつもおっぱいのことばっかり考えていて気持ち悪い」と思ってしまったらと思うと、こんな危険な橋を渡るわけには行かず、 実際いつもおっぱいのことばかり考えているんですけど、おっぱいのことなんて全然興味ないです。 息子よ、父さんはいつだってまじめに働いているよ！ というわけで今年作った"まじめな"ツールのMySQL::Sharding::Clientを自画自賛したいと思います。 MySQL::Sharding::Client MySQL::Sharding::Clientは一言
jQueryを読むために知っておきたい6つの知識 : tech.kayac.com - KAYAC engineers' blog
夏休みはタイ古式マッサージセミナーに参加してきました。agoです。 先週日曜日若手IT勉強会に参加させていただき、jQueryのコードリーディングを行ってきました。 そこでjQueryのコードを読むときの基礎知識に関して簡単にまとめてみたいと思います。 1 変数の複数同時宣言と代入 まず、JSでは変数の宣言は以下のような形式で行います。 var hoge; この場合は単一の変数の宣言ですが、以下のような記述を行うと複数の変数を同時に宣言することが可能です。 var hoge, huga; また、変数宣言と同時に値の代入を行うことも可能で、その場合以下のような記述になります。 var hoge = 'test'; さらに複数の変数宣言と、値の代入は同時に行うことが可能で、その場合以下のような記述になります。 var hoge = 'test1', huga = 'test2'; jQuery
jQuery使いが陥りやすい罠 : tech.kayac.com - KAYAC engineers' blog
肩こり歴20年のagoです。 社内でもjQueryを使う人間が増えてきたので、jQueryを使う人が陥りやすい罠をいくつかあげてみたいと思います。 （私が過去にはまったり、今はまっている罠です） 1 グローバルの名前空間を使わない jQueryはwindow objectの汚染が少なくほかのライブラリとの共存が行いやすいですが、特定のサイト向けに開発する場合window objectを使用してもそれほど問題は発生しません。 しかしjQueryに慣れるとwindow objectの使用をいかに避けるかを考えるようになり、jQueryと関係ないfunctionや変数まで$.hogehogeに実装しようとしてしまいます。 これはwindow objectの代わりにjQuery objectを汚染しているだけなので、素直にwindow objectを使用したほうが普通に実装しやすいでしょう。 2
安全なバッチ処理の作り方 - KAYAC engineers' blog
このまえ登り坂の途中でロードバイクのタイヤが破裂しました。ながたです。 今回はバッチ処理について書いてみようと思います。 バッチ処理？ Webサービスの処理開始条件は、大まかに次の2つに分けることができます。 ユーザーのアクションに起因するもの ユーザーのアクションに起因しないもの このうち後者の処理をバッチ処理が担当することになります。 バッチ処理の担当分はさらに、 特定の条件（時間やサービスの状態）で実行するもの 手動で実行するもの の2つに分けられます。 今回はこの「手動で実行するもの」について書きたいと思います。 バッチを手動実行するのはどんなとき？ バッチ処理を手動で実行するのは、十中八九イレギュラーな状況が発生したときです。 ルーチンワークや実行の条件が決まっているものは何らかの方法で自動化できるはずです。 そしてイレギュラーな状況のほとんどは不具合が発生したとき。 つまり 重
node.jsつかいました - KAYAC engineers' blog
こん＊＊は、taiyohです。 さて、先日のsugyanのエントリ「node.jsはじめました」にて 本日2/25(金) 20:00から行われる、弊社のオンライン説明会もリアルタイム技術を駆使しています！ 新卒採用企画 オンライン会社説明会 2012 | 面白法人カヤック ぜひ見に来てみて下さい！ とありましたが、この説明会で僕はnode.jsを使ったリアルタイムシステムを担当し、説明会の盛り上げに携わっていました。 【何がリアルタイムか】 このイベントでは、講演をustreamにて配信しました。この時、閲覧者はこちらが用意したいくつかのアクションを実行することができます。この情報は自前のストリーミングサーバを経由し、同じようにページを閲覧している別の閲覧者のflashで表示されます。弊社デザイナの林（@barimi）の登場時、スゴイ数のアクションが送信され、かなりわいわいやっていた様子が
node.jsはじめました - KAYAC engineers' blog
はじめまして！ 技術部2年目のsugyanと申します。 初めてtech.kayac.comに投稿します！ 先日自分のブログで書いた記事が思いのほか好評だったので、これについてもう少し詳しく書いてみようと思います。 node.js+socket.ioを使ったライブコーディングwebアプリを作ってる - すぎゃーんメモ node.jsについて 最近話題の、サーバーサイドJavaScript「node.js」。みなさん触ってみてますか？ 「Google V8 JavaScript Engineによるイベント駆動の…」と、どんなものかは知っているものの実際には触っていない、という人がまだ多いような気がします。 僕も昨年の12月くらいにようやく触ってみた という程度なのですが、意外にお手軽で簡単に使えるし面白いので、 「JavaScriptはまだニガテで ＞＜」というヒトでも安心して始められるのでは
vimに欠かせない３つのプラグイン - KAYAC engineers' blog
Ark Advent Calendar で、今回こそPerlデビューをもくろんでいるアルバイトの北原です。 僕は普段エディタにvimを利用しています。巷では高まるvim熱のはずなのですが、社内ではEmacs派の方々が大半で、さらにvimを使っているともてないという話まで出てきています。この悲しい現実を打破すべく普段vimを使っている方にも、使ってない方にも、これから使おうと思っている方にもオススメできる３つのプラグインを紹介したいと思います。 1. quickrun.vim quickrun は編集中のファイルの全体もしくは一部を実行する Vim プラグインです。 実行するためのコマンド |:QuickRun| が提供されます。 quickrun.vim help 概要より引用 quickrun.vimはthinca氏によるプラグインです。同名のプラグインをujihisa氏が以前から公開さ
FlashLite 動的生成の全てを教えます(その1?) - KAYAC engineers' blog
こんにちは。 カヤック自転車部盛り上げ担当でおなじみのaragaです。 自転車好きの方は是非一緒にヤビツ峠を登りましょう 今回は、いつか公開しようと２年間暖め続けていた、携帯サービスのFlashLite動的生成についてお話しします。 携帯サービスのFlash合成技術は、スマートフォンブームの普及により、この先の寿命は長くない技術かもしれません。しかし、モバゲーやGREEのガラケーソーシャルゲームの人気により現在進行形では最も熱い分野とも言えます。 今回はPHPライブラリの公開と、動的生成でできることの紹介をさせていただきます。 もし、携帯コンテンツのFlashで技術的に諦めて困っている人がいたら、少しでも参考になれば幸いです。 その前に､全ての機能を説明する為に、今回サンプルとして使用したサービスを簡単に紹介させてください。 ポケットフレンズコンチ 愛をモチーフにした可愛いペットのきせかえ
今日から始めるCoffeeScript - KAYAC engineers' blog
こんにちは。毎年花粉症になりかけている飯塚です。 最近のNode.jsの普及などによってサーバサイドJavaScript界隈が盛り上がっています。 そんなホットなJavaScriptをラクにかつエレガントに書くためのCoffeeScriptという言語をチュートリアル風に紹介します。 何かしらのライブラリを自分で書く程度にJavaScriptで開発している人は絶対に使ったほうがいいと思います。 JavaScriptを知っていれば1-2時間程度で十分駆使できるようになります。 （2011/6/28：@m_satyr様にご指摘頂いた箇所を修正しました。） 目次 CoffeeScriptとは？ インストール Hello World 構文 関数 変数展開 Objectの生成 ループ 存在チェック ヒアドキュメント thisのバインド クラス 無名関数 {var} Tips ?の使い分け 存在チェック
instagramAPI公開！OAuth触りました - KAYAC engineers' blog
ついに21歳になりました！itaniです。 みなさん！！ つい先日、iPhoneで気軽に写真を共有できるサービス「instagram」のAPIが一般公開されましたね。 というわけで、さっそくOAuthを触ってみたので自分なりにまとめてみました。 なにができるの？ instagramAPIを使えば以下のようなことが簡単にできます。 ユーザー情報を取得 ユーザーの写真を取得 写真に対してコメントやいいねを投稿する フォローしている人、フォローされている人を取得 上で挙げたものはほんの一例です。 まだ調査不足ですが、リアルタイム系のAPIも用意されています。面白そうですよね。 OAuthってなんだ！？ 最近twitterやfacebookでよく聞く『OAuth認証』という言葉。 果たしてこれはなんなのか。お願いしますgoogle先生。 OAuth (オー オース) は、ブレイン・クックとクリス・
smartchr.el を使って生産性を上げる - KAYAC engineers' blog
人生初めての萌え神社メイドカフェ体験で、「なむなむ、にゃんにゃん、ラブ込め〜」という呪文(唱えた人の味覚を鋭敏にし、ケーキの味を引き立たせる効果があるらしいです)をテレビ取材で唱えさせられそうになったので、丁重に断りました。今年1年の中でも3本の指に入るほどの真面目に人と話した場面だったのではないかと思います。 そんな事があったのが、six days ago! agoではありません、IMAKADOです。 さて、皆さんはプログラム中に = を書くとき、両端にスペースを入れているでしょうか？ 私は、入れています。入れないより入れた方が、プログラムがずっと読みやすくなるからです。 ですが、前後にスペースを入れない時と比べて、2回タイプ数が増えてしまうという問題があります。 そういった問題を解決する smartchr.el というemacs拡張をリリースしました。 smartchr.elを使う事で
jQuery.stopのjumpToEnd引数が便利すぎてやばい（JavaScript Advent Calendar 2010 5日目） - KAYAC engineers' blog
JavaScript Advent Calendar 20105日目のago（@kyo_ago）です。 jQueryのソースを眺めててjQuery.stopに引数があることに気づいたので調べてみました。 まず、簡単なスライドダウンメニューを作ってみたいと思います。 jQuery.stop 1 - jsdo.it - share JavaScript, HTML5 and CSS JS部分は以下の通りです。 $(function () { $('div').hover(function () { $(this).find('ul').slideDown(); }, function () { $(this).find('ul').slideUp(); }); }); 少し触ると分かると思いますが、マウスがmenuから外れた後も何度も.slideDown、.slideUpが実行されるため非常に
vimプラグインでよりよいコーディングを - KAYAC engineers' blog
こりなくvimプラグインの紹介をします。北原（@soh335）です。 たかが、エディタですがプログラムを書く際には一番触っている道具です。イチローも道具は大切にすることが重要と言ってますし、メンテナンスしながら良い状態にしておきたいですね。 今回はvimプラグインの管理、プログラム書く自体には関係ないけど便利なプラグイン、実際にエディタを使っている際に便利なプラグインの紹介をします。 vimプラグインの管理 vim-pathogen http://www.vim.org/scripts/script.php?script_id=2332 vimプラグインは、windows環境はで$HOME/vimfiles/、mac等では$HOME/.vimのディレクトリの下にインストールしていきますが様々なプラグインを一つのディレクトリにいれると のようになり例えばこのプラグインが更新されたのでアップデ
emacsのM-!とM-|の使い方 - KAYAC engineers' blog
来週ようやく夏休み！のnagata (@handlename) です。 シェルコマンドを実行したいとき、どうしてますか? emacsを使って開発する場合、 ターミナルとemacsを行ったり来たりすることはよくあると思います。 現在のディレクトリのパスがほしかったり(pwd)、 IPアドレスを調べたかったり(ifconfig)、 あるいは編集中のテキストを処理したかったり。 そんな場合、いちいちターミナルに移動して、 出力結果を確認（場合によってはコピー）して、 あらためてemacsに戻ってくるのは面倒です。 それ、emacsからできます！ 往復するのが面倒ならば、すべてemacs上で完結させてしまえばいいのです。 shell-mode を使うという手もありますが、 今回はもっとお手軽な M-! (shell-command) と M-| (shell-command-on-region)
.emacs分割のすゝめ - KAYAC engineers' blog
最近ロードバイクを買いました。nagata（@handlename）です。 前回、安易にも無防備な.emacsを晒したら、我らがtypester先生に 「.emacsに全部書くのは小学生までだよね〜」（大幅に誇張あり） と言われてしまったので、早速.emacsを分割してみたいと思います！ （設定ファイル群をgithubにあげました） なんで分割するの? そもそもなんで分割するんでしょうか? メリットとしては、こんなものがあります。 見通しがよくなる 環境依存の設定を切り分けられる 一部のファイルにエラーがあっても他のファイルの設定は適用される それぞれ個別にbyte compileできる 一部のエラーが全体に影響しないっていうのはいいですね。とっても。 では、実際に分割する方法を見ていきましょう。 分割してみよう 分割した設定ファイルを読み込むために、IMAKADOさん謹製のinit-lo
.emacsを、晒してみようと、思った。 - KAYAC engineers' blog
最近確実に左手小指が強化されてきました、nagataです。 さてさて、今回は.emacs紹介というベタなテーマです。 いいんです。自分はまだやってないんで。 とりあえず、マイ.emacsの全貌はこちら。 Mac OS X 10.6上のemacs23で使ってます。 せっかくなので上から解説していきますよ！ 基本的に、.emacsに書いてる内容→解説、の順です。 解説、というか一言コメント 初期設定 (let ((default-directory "~/.emacs.d/site-lisp/")) (setq load-path (cons default-directory load-path)) (normal-top-level-add-subdirs-to-load-path)) お決まり。 elispがつまったディレクトリを指定しています。 normal-top-level-add
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
