タグ

ブックマーク / techblog.kayac.com (10)

  • デーモン管理をdaemontoolsからsystemdに移行させる - KAYAC Engineers' Blog

    SREチームの竹田です。Tech Kayac Advent Calendar Migration Track 9日目の記事になります。 カヤック社内では デーモン管理ツールとしてdaemontoolsが愛用されてきました。 ソフトウェアとして枯れており、 自動起動や各シグナルを送ることができるので大変重宝されています。 経緯 AmazonLinux1のEOLに伴い、稼働中のアプリケーションを移行させる必要がでてきました。 最近はコンテナ(ECS)へ移行させる事がほとんどですが、運用やアプリケーションの都合上AmazonLinux2へ移行させる場合もあります。 デーモン管理としてdaemontoolsを利用する事も考えましたが、ドキュメントの整備状況やインストールに難があることもあり、systemdに変更する事にしました。 設定 systemdの詳しい説明は省きますが、 以下のような設定ファ

    デーモン管理をdaemontoolsからsystemdに移行させる - KAYAC Engineers' Blog
    potato777
    potato777 2019/12/09
  • React Componentのスタイルガイドを自動生成してパーツの再利用をしやすくする - KAYAC engineers' blog

    こんにちは。カヤックのReactおじさんこと島津です。 最近はVue.jsにも浮気し始めましたが、Reactについての記事を書きます。 Reactのコンポーネントが増えてきて管理が大変 Reactを使うとコンポーネントの部品化が捗りますが、 開発規模が大きくなってくるとその数も増えてきて管理が大変になってきます。 スタイルガイドを導入 スタイルガイドとは、UIパーツの用例と実表示例をまとめたドキュメントのことです。 これがあるとパーツの再利用性が高まります。 例:Codepenのスタイルガイド 人力で手書きしていっても良いのですが、更新が追いつかなかったりするので自動生成する仕組み化ができるツールを使いましょう。 代表的なものとしては、CSSのコメントからドキュメントを自動生成してくれるkss-node などがあります。 今回はCSSだけではなく、Reactのコンポーネント単位でドキュメン

    React Componentのスタイルガイドを自動生成してパーツの再利用をしやすくする - KAYAC engineers' blog
  • #11 MySQL Master HA を AWS で動作させる場合のフェイルオーバー支援ツール MHA::AWS のご紹介 - KAYAC Engineers' Blog

    こんにちは、@fujiwara です。 2013年を振り返ると、春の新卒研修での社内ISUCON、秋のISUCON予選と選でずっとISUCONをやっていたような気がしていまして、さてそれ以外になにか……そういえばインフラ回りの仕事もしていましたね。 カヤックのサーバインフラ全体としては、Amazon Web Service(AWS) への移行が進んだ1年でした。いままで自社サーバでやっていたソーシャルゲームや、比較的アクセスが多いとある自社サービス(これは後ほど事例公開されるかも知れません) を、AWS上で構築したり移行したり、という仕事が多かったです。 AWSでサービスを構築する場合、MySQL については RDS を利用する EC2 インスタンス上に MySQL サーバを稼働させる というどちらかの手段を取ることになります。 RDSはフェイルオーバーやバックアップを自動でやってくれま

    #11 MySQL Master HA を AWS で動作させる場合のフェイルオーバー支援ツール MHA::AWS のご紹介 - KAYAC Engineers' Blog
  • #8 「iOSのバージョン間の溝を埋めるテクニック」 tech.kayac.com Advent Calendar 2012 - KAYAC Engineers' Blog

    こんにちは、iOSプログラマーの_ishkawaです。 このエントリは tech.kayac.com Advent Calendar 2012 8日目の記事です。 テーマは「私の中のマイイノベーション 2012」です。 12月。恋人たちが心の溝を埋めていく中、僕はiOSバージョンの溝を埋めております。 今日はそのテクニックを紹介したいと思います。 それと、紹介するテクニックを使ったマイイノベーションも紹介します。 基中の基 iOSでは、バージョンによってクラス/メソッドの有無やプロトコルへの適合状況が異なります。 これらの状況の違いは以下の方法で判別することができます。 メソッドが存在するかどうか: respondsToSelector: クラスが存在するかどうか: [Class class] プロトコルに適合しているか: conformsToProtocol: これらの条件を以下のよ

    #8 「iOSのバージョン間の溝を埋めるテクニック」 tech.kayac.com Advent Calendar 2012 - KAYAC Engineers' Blog
    potato777
    potato777 2012/12/09
  • jQueryのCSSセレクタAPIを高速に扱う方法 - KAYAC Engineers' Blog

    最近Androidとの抗争が激化しているago(@kyo_ago)です。 jQueryはCSSセレクタを多用する特徴がありますが、jQuery内では実行ブラウザやCSSセレクタの記述によって呼び出されるブラウザAPIが変わり、それによって実行速度にも影響が出ます。 この記事では「セレクタAPIとはなにか」、「CSSセレクタの記述によって呼び出されるセレクタAPIの種類」、「高速なセレクタAPIを使用するための方法」、「高速なセレクタAPIが使われるかどうか確認する方法」などを紹介したいと思います。 (※この記事はJavaScript Advent Calendar 2011 (フレームワークコース) : ATNDの1日目の記事です) セレクタAPIとはなにか セレクタAPIとは「#hoge .huga」のようなCSSセレクタから、DOM上に存在する要素を取得するためのAPIです。 jQue

    jQueryのCSSセレクタAPIを高速に扱う方法 - KAYAC Engineers' Blog
  • SVG Girlの公開と内部実装 - KAYAC engineers' blog

    乗り換え以外で初めてアメリカ行きました。ago(@kyo_ago)です。 すでに先週のこととなってしまいましたが、jsdo.it上でSVG Girlというコンテンツを発表したのでご紹介させていただきます。 (現在IE9のリリースに合わせて英語版のみ公開しています。日語版は26日の日語版IE9リリースにあわせて公開を予定しています) SVG Girlって? SVG GirlはSVGを使ったアニメーション作品で、動画コンテンツの中身をすべてSVGのみで表現しています。 先週開催されたMicrosoft主催のMIX11のキーノートでも発表され(00:08:40ぐらいからご覧いただけます)、大画面に表示されたアニメーションで会場をわかせました。 SVGって? SVGはテキストで表現されたベクターデータで、XMLで線画情報を保持しています。 ブラウザ上からは通常のDOM API経由で操作すること

    SVG Girlの公開と内部実装 - KAYAC engineers' blog
  • モテるJS系女子力を磨くための4つの心得 - KAYAC Engineers' Blog

    1. あえてECMAScript3.0以前の実行環境を使う あえてECMAScript3.0の実行環境を使うようにしましょう。そしてATNDで好みの男がいたらLT参加を告知し、わざとらしく発表準備段階でコンソールを出していじってみましょう。そして「あ~ん! この実行環境当にマジでチョームカつくんですけどぉぉお~!」と言って、男に「どうしたの?」と言わせましょう。言わせたらもう大成功。「ECMAScriptとか詳しくなくてぇ~! ずっとコレ使ってるんですけどぉ~! Object.keysが使えないんですぅ~! ぷんぷくり~ん(怒)」と言いましょう。だいたいの男は新しい実行環境を持ちたがる習性があるので、ECMAScript5の実行環境を使っているはずです。 そこで男が「新しい実行環境にしないの?」と言ってくるはず(Object.prototypeの拡張を勧める男はその時点でガン無視OK)。

    モテるJS系女子力を磨くための4つの心得 - KAYAC Engineers' Blog
  • FlashLite 動的生成の全てを教えます(その1?) - KAYAC engineers' blog

    こんにちは。 カヤック自転車部盛り上げ担当でおなじみのaragaです。 自転車好きの方は是非一緒にヤビツ峠を登りましょう 今回は、いつか公開しようと2年間暖め続けていた、携帯サービスのFlashLite動的生成についてお話しします。 携帯サービスのFlash合成技術は、スマートフォンブームの普及により、この先の寿命は長くない技術かもしれません。しかし、モバゲーやGREEのガラケーソーシャルゲームの人気により現在進行形では最も熱い分野とも言えます。 今回はPHPライブラリの公開と、動的生成でできることの紹介をさせていただきます。 もし、携帯コンテンツのFlashで技術的に諦めて困っている人がいたら、少しでも参考になれば幸いです。 その前に、全ての機能を説明する為に、今回サンプルとして使用したサービスを簡単に紹介させてください。 ポケットフレンズコンチ 愛をモチーフにした可愛いペットのきせかえ

    FlashLite 動的生成の全てを教えます(その1?) - KAYAC engineers' blog
  • IEのデバッグツール : tech.kayac.com - KAYAC engineers' blog

    最近記憶力の低下が著しいkusagayaです。 最近は専らJavaScriptを書くことが多いんですが、皆さんどのようなデバッグツールを使っていますか? FirefoxであればFirebugというのが一般的だと思いますが、 IEで一般的なデバッグツールと言えば?と言われると、ちょっと答えられないです。 そこでIEで使えるデバッグツールをいくつか紹介したいと思います。 ■DebugBar ・DOMのInspectやJavaScriptCSSのソース、レイアウトなどを見ることが可能(Iframe内までInspectできるのは多分これだけ) ・HTTP Requestが見れる ・JavaScriptのコンソールがあるので、アドレスバーから実行する必要がない ■CompanionJS ・Firebugのコンソール機能のみを再現しているようなもので、Firebug同様にconsole.logが使え

    IEのデバッグツール : tech.kayac.com - KAYAC engineers' blog
  • 細かすぎて伝わらないjQueryの機能5選 - KAYAC Engineers' Blog

    実は技術部ではなく、演出部所属のagoです。 先日jQuery 1.3.2のソースを読む機会があり、そのときいくつか気づいたことがあったのでまとめてみました。 1 .addClass, removeClassはスペース区切りで複数のclassを渡せる .addClass, removeClassにはスペース区切りで複数のclass nameが渡せます。 //classの順番は保持します。 //<div class="hoge gege">があった場合、<div class="hoge gege huga">になります。 $('div').addClass('hoge huga'); //<div class="hoge gege huga">があった場合、<div class="gege">になります。 $('div').removeClass('hoge huga'); ただし、hasC

    細かすぎて伝わらないjQueryの機能5選 - KAYAC Engineers' Blog
  • 1