タグ

ブックマーク / mixiengineer.hatenablog.com (17)

  • 総行数57,000の巨大CSS群をLessに書き換えた軌跡 - mixi engineer blog

    こんにちは!フロントエンド闇祓いの Kuniwak です。 この投稿はmixiグループ Advent Calendar 2015の20日目の記事です。 今年の9月に、スマートフォン Web ブラウザ版 mixi「mixi Touch」の巨大 CSS を Less (CSS プリプロセッサー)でビルドする環境へと移行しました。 書き換えた CSS の行数は、なんと 56,725行 です。😵 ということで、今回は弊社の大規模 CSS → Less 移行事例についてお話しします。 背景 スマートフォン版 mixi は、2010年5月に始まりました。 この頃のスマートフォンは、iPhone 端末であれば iPhone 3GS、Android 端末であれば Nexus One という時期です。 また、スマートフォンの世界では、Webkit ベースのブラウザーが席巻していた時代ということになります。

    総行数57,000の巨大CSS群をLessに書き換えた軌跡 - mixi engineer blog
    hamaco
    hamaco 2016/01/07
  • VimConf 2014 と Vim と mixi - mixi engineer blog

    こんにちは。エンジニアVimmer、Kuniwak です。11月08日(土)、Vim の国際的な会議「VimConf 2014」が弊社でおこなわれました。 VimConf では、Vim の機能の詳細な解説や、自作プラグインの紹介、Vim の未来など、多くの Vim に関するディープな知識が発表されています。また、登壇者陣も非常に豪華で、Vim のコントリビュータから、Github で 1,500 もの☆がつく有名プラグインの作者など、Vim をとりまくさまざまな開発者が登壇しています。 発表タイトル一覧は、Timetable - VimConf 2014 をご覧ください。 なお、ミクシィも Vim に支えられている一企業として、Vim との関係についてお話ししました。 それぞれの発表の様子 動画 #VimConf2014 - YouTube 会場の反応 VimConf2014まとめ -

    VimConf 2014 と Vim と mixi - mixi engineer blog
    hamaco
    hamaco 2014/11/14
  • OpenStackとLXCを導入した話 - mixi engineer blog

    こんにちは、運用部 アプリ運用グループの清水です。Golang鋭意勉強中です。 今回は、SNS「mixi」に限った話ではなく、ミクシィ社全体として利用している仮想環境について紹介したいと思います。パブリッククラウドも一部のサービスで利用していますが、今回は、自社で運用している仮想環境にフォーカスして書いてみようと思います。 今まで利用してきた仮想環境 今まで利用してきた仮想環境というと、手作業で構築したKVM(Kernel-based Virtual Machine)環境が中心でした。手作業といってもある程度手軽に構築できるように、シェルスクリプトとCobblerでVMを構築できるようになっています。構築の流れは以下のとおりです。 CobblerにVMのIPやホスト名などをスクリプトで登録する。 KVMのホスト上でスクリプトを実行(koanコマンドでCobblerと連携してVMをセットアッ

    OpenStackとLXCを導入した話 - mixi engineer blog
    hamaco
    hamaco 2014/04/01
  • Gradleプラグイン作ってみた - mixi engineer blog

    こんにちは!最近暑すぎて外に出たくなさすぎて家でPCといちゃいちゃしてるリア充のhentekoです! 現在DeployGate開発チームでインターンとして開発に参加させてもらい、色々させてもらっています。 このミクシィのエンジニアブログ、インターンとして参加する前から結構見てたのですが、まさか正社員になる前に書くことになるとは思ってなかったので結構緊張してます。 そんな僕が作ったものがつい先日リリースされました! GradleからDeployGate APIを簡単に操作できるGradleプラグインです。 GitHubにてソースコードを公開してます。 https://github.com/DeployGate/gradle-deploygate-plugin 今回はこのGradleプラグインについて話したいと思います。 Androidアプリ開発必須ツール、DeployGate まずは簡単にD

    Gradleプラグイン作ってみた - mixi engineer blog
    hamaco
    hamaco 2013/07/27
  • Androidの機種依存問題を吸収するプロジェクトAndroid-Device-Compatibilityを公開したお話 - mixi engineer blog

    こんにちは。Androidユニットで開発とスクラムマスターをしています、横幕です。すっかり寒くなって、朝起きるのが辛い季節になりました。 先日、Android(TM)の様々な機種に依存する問題を吸収するためのライブラリプロジェクトをmixi, IncのGitHubリポジトリで公開しました。 今回は、このライブラリプロジェクトを公開するに至った経緯をお話しようと思います。 様々な種類の端末に対応するために乗り越えてきた困難 現在、Androidを搭載した端末には、多種多様なものがあります。 そして、OSのバージョンごとの違いだけでなく、同じAndroidを搭載していても、端末ごとに微妙に挙動が異なることがあります。 mixi公式クライアントアプリでも、端末ごとに微妙に挙動が異なることで発生する問題にいくつか直面してきました。 特定の端末で、文字が9,000文字までしか入力できない EditT

    Androidの機種依存問題を吸収するプロジェクトAndroid-Device-Compatibilityを公開したお話 - mixi engineer blog
    hamaco
    hamaco 2013/01/24
  • mixiの年末年始対策2012-2013 - mixi engineer blog

    はじめまして、運用部アプリ運用グループのainoyaと申します。 今年4月に新卒で入社して以来、はじめてエンジニアブログを書きます。 この記事は、デスクトップ版も大変使いやすいFedoraから書いています。 はじめに ~ mixi vs 正月 ~ mixiを支えるバックエンドには、mixiを影で支えるエンジニアによって 大量のアクセスをさばききる頑丈なシステムが構築されていました。 ですが、年末年始にはその頑丈なシステムを打ち破るほど想定外な負荷が押し寄せてきます。 それは、月間利用者1,400万人以上のユーザの方々が、mixi上で交わす年末年始の挨拶です。 mixi vs 正月 ~ 戦いの歴史 ~ これまで、mixiのエンジニアによって行われてきた正月の負荷急増対策は、毎年毎年必ず乗り越えなければならない 戦いとして、脈々と受け継がれてきた歴史です。 それでは簡単になってしまいますが、今

    mixiの年末年始対策2012-2013 - mixi engineer blog
    hamaco
    hamaco 2013/01/09
  • mixiのサーバOS移行のお話 - 前回補足&インストール編 - mixi engineer blog

    こんにちは。新しもの好きが集まる運用部アプリ運用グループの清水です。 前回の記事では、多くの反響をいただきました。ありがとうございます。 Twitterや、はてブのほとんどのコメントを読ませていただきました。 みなさんのOSの宗派が垣間見えた気がします。 さまざまなコメントをいただいていた中で、よくある代表的なコメントについて、改めてこの場を借りてお答えしたいと思います。 2012年12月28日追記: 以下のQAにつきまして、いわゆる"ネタ"として書きましたが、誤解を招き、不適切な表現で不快な思いをされた方々へ深くお詫び申し上げます。 また、QAの一部に関わるところですが、OS標準のパッケージを否定するつもりは全くございません。 Linuxを安心して使うことができるのは、Linuxディストリビューションに携わっているデベロッパーの方々の素晴らしい活動や成果によるもの、というのが揺るぎない事

    mixiのサーバOS移行のお話 - 前回補足&インストール編 - mixi engineer blog
    hamaco
    hamaco 2012/12/27
    「OSデフォルトのRPMをそのまま使うのは小学生まで」 まじか…… 結構OSデフォルトの使ってる……
  • なぜ @kotarok さんは mixin より extend を推すのか - mixi engineer blog

    こんにちは。最近、実は JavaScript よりも Perl が好きなたんぽぽグループの大形です。 Perl の、仕様書など無いところがたまりません。勉強しても勉強しても...。いえ、今回は Perl の話ではありませんでした。 一昨日の土曜日ですが、会社にお金を出して貰って、 SwapSkills さんの『CSSを便利に使うための LESS入門』にお邪魔してきました。 何を隠そう、いや、隠すことは何も無いのですが、私は今「クライアントサイドのバックエンド担当」として働かせていただいてます。つまるところ、デザイナさんやコーダさんが日々目の前の案件と戦い続けている中で、一歩引いたところからお助けユーティリティを作ったり、俯瞰して工程を見直してみたり、デザインにおける継続テストの仕組みを考えたり、新しく何かの役に立ちそうなものをどこからか引っ張ってきたりするお仕事です。 そんなお仕事の一環と

    なぜ @kotarok さんは mixin より extend を推すのか - mixi engineer blog
  • mixiのコードレビューについてご紹介 - mixi engineer blog

    こんにちは技術部たんぽぽグループのmasartzです。でも今日はコードレビューアのmasartzとしてお送りします。 mixiの開発フローにはコードレビューという工程が含まれています。 今回はこの工程を行うコードレビューアな人々と、その業務内容、今後(の予定)などをお話しようと思います。 コードレビュー業務 mixiのサービスがスタートしたのは2004年2月の事ですが、コードレビュー業務が始まった正確な日時は残念ながらわかりません。 レビューツールもemailのやりとり->Tracのチケット->JIRAチケットと変遷があるため、最古のものをトラッキングできないのですが、おそらく5年以上前から様々な変遷を経て、今に至ります。 開発者が増えると、開発されるコード量も増えます。つまりレビューする量が増えるため、コードレビューアも増加します。 そんなこんなで現在ではアプリ開発者に対して、コードレビ

    mixiのコードレビューについてご紹介 - mixi engineer blog
  • プランニング・ポーカーで始める楽しい見積り - mixi engineer blog

    こんにちは、UX統括部の横幕です。すっかり春になって、桜を眺めるのが気持ち良いですね。 最近、社内で活発に「デイリースクラム」が行われるようになりました。 日々、チームメンバーの持っているタスクの進捗を確認し合うことで、スケジュール感の共有・調整、あるいは、チームメンバー同士でタスクの振り分けを見なおしたりなどができ、チームの有機的な動きを作ることが出来るようになってきています。 さて、そんななかで、今回は、プロジェクトを進める上で、また日々のデイリースクラムをする上で重要な「タスクの見積り」についてお話しようと思います。 これが実際のPlanning Pokerです。アメリカのMountain Goat社が企画発売し、ライセンスしています。 1. 見積る前に 1-1. 計画を立てよう タスクの見積りをする前に、何をするのか、その計画を立てていきます。 ・フィーチャーを考える フィーチャー

    プランニング・ポーカーで始める楽しい見積り - mixi engineer blog
    hamaco
    hamaco 2012/04/10
  • 新社会人のためのバグレポートの基本 - mixi engineer blog

    はじめまして、品質管理部門の柿崎です。 最近、Skyrim にハマってしまい、人生一回休みになりかけています。 季節は春ということで、新社会人になられる方も多いと存じます。 新社会人が会社勤めをするようになって、初めて書くビジネス文書といえば...... そうですね!「バグレポート」ですね。 今回はバグレポートの基について書きたいと思います。 近年、開発現場ではバグトラッキングシステムが定着し、ドッグフーディングのような社内テストを行う現場も増え、テスト担当者以外の方でもバグレポートを提出する機会が増えています。そして前衛的なバグレポートによって、プログラマ達が理不尽かつ不可解なバグ地獄に叩き込まれる機会も増えています。 バグレポートは諸刃の剣です。 良いバグレポートはアプリケーションの問題を速やかに解決まで導きますが、反対にダメなレポートは現場に混乱をもたらします。 良いバグレポートを

    新社会人のためのバグレポートの基本 - mixi engineer blog
    hamaco
    hamaco 2012/03/21
  • めくるめくDvorakJPの世界 - mixi engineer blog

    初めまして。QWERTYの入力できないyuzuemonです。 先日社内LTにてDvorakJPについてのお話をしようとしたのですが、ローマ字テーブル拡張の話も盛り込んで紹介をしようとしたら伝えたいことが多すぎて5分を優に過ぎてしまいました。 今回はこの場を借りてDvorakJPへの熱い想いを語らせていただきます。 Dvorak配列(以下、Dvorak)とは そもそも「Dvorakってどんな配列なの?」とよく訊かれますので、まずはDvorakの配列を見ていただきたいと思います。 こんな配列をしています。 ホームポジション上の凸がある位置のキーは "U" と "H" です。 大きな特徴としては以下の2つです。 母音が左手のホームポジション上に集中している ハードウェア機構はQWERTYと変わらない OSでの対応もされており、Mac, Linuxではキーボード設定からDvorakに変更可能です(

    めくるめくDvorakJPの世界 - mixi engineer blog
    hamaco
    hamaco 2012/01/19
  • Sinon.JS を使った JavaScript のテスト - mixi engineer blog

    初めましてこんにちは。ソーシャルクライアント開発の tanabe と申します。 今回は?Sinon.JS を使った JavaScript のテスト方法を紹介したいと思います。 Sinon.JS って何? Sinon.JS はノルウェーのエンジニア Christian Johansen さんが書かれた、JavaScript 用のライブラリです。スタブやモック、フェイクオブジェクトの提供に特化していて、QUnit などのテスト用のフレームワークや実行環境に依存しない所が特徴です。Christian Johansen さんは?Test-Driven JavaScript Development の著者でもあり、こちらは近々翻訳版 が登場するようです。 では早速、Sinon.JS を使ったテスト手法をご紹介していきたいと思います。稿ではテストフレームワークは QUnit を採用しています。 時間

    Sinon.JS を使った JavaScript のテスト - mixi engineer blog
  • ヘッドマウントディスプレイで仕事してみた - mixi engineer blog

    こんにちは、机の上が汚いといつも怒られている森@たんぽぽグループです そんなに言うなら!という訳でスッキリさせてみました。 ガジェット好きなみなさんならご存知だと思いますが、先日SonyよりHMZ-T1というヘッドマウントディスプレイ(以後HMD)が発売されました。今までもHMDが発売されてきましたが、残念ながら視野角・解像度の面で満足できるモノではありませんでした。しかし今度は違います。何と視野角45度、解像度1280x720と実用上まったく問題のないモノになっています。発表と同時に予約をしたおかげで無事発売日に入手することができたので、さっそく仕事で使って見ました。 ちまたのブログにもかかれているとおりHMZ-T1が綺麗に見えるスイートスポットはかなり狭く感じました。ピタッと決まるととてつもなく綺麗に見えますがちょっとずれるとたちまち画面端がぼやけたりします。このあたりは慣れが必要で

    ヘッドマウントディスプレイで仕事してみた - mixi engineer blog
  • きっと何者にも成れないモジュールたちに告げる~静的解析、しましょうか~ - mixi engineer blog

    たんぽぽグループのhirokiです。たんぽぽグループとはmixi内の「刺身にたんぽぽをのせる仕事をなくす」ことを目的とした技術者集団です。 「あれは、たんぽぽではない用菊である」 「スーパーの生鮮品バックヤードが片手間にやってるよ。」 というご批判・ご指摘をうけ、今後は「道路に片方だけの軍手を落とす仕事をなくす」ことを目的としていこうかなどの検討を重ねました結果、「細けぇこたぁいいんだよ。」という結論に至ったことをこの場を借りてご報告させていただきます。今後ともたんぽぽグループを御ひいきによろしくお願いいたします。 と、ご報告をさせていただいたところで、題にはいります。 YAPC::Asia Tokyo 2011 先日Perlのお祭りことYAPC::Asia Tokyo 2011においてLTをさせていただきました。その資料のご紹介とちょっとした解説をさせていただきます。 静的解析、し

    きっと何者にも成れないモジュールたちに告げる~静的解析、しましょうか~ - mixi engineer blog
  • mixi Engineers' Blog » スマートフォンブラウザのWebInspectorをリモートで実現するweinreが凄い

    こんにちは、寝過ごして長野まで行きそうになったソーシャルクライアント開発のtakimoこと瀧です。 先週弊社数名がアメリカで行われていたVelocity 2011 - O'Reilly Conferencesに参加しました。 そこではモバイル端末のテストやパフォーマンスについての講演やLTがあったようです。 自分もお土産話を色々聞きたいので詳しくは誰かが書いてくれるはず...です。 その中で気になったプロダクトがあったので紹介したいと思います。 weinre - Web Inspector Remote weinreはFirebug(Firefox)やWebKitのWebInspectorのようなデバッグ機能をリモートで提供してくれるプロダクトです。 iPhoneAndroid(2.1以上)には一応コンソール機能のようなものがありますが 基的には出力だけ ソフトキーボードでデバッグ用

    mixi Engineers' Blog » スマートフォンブラウザのWebInspectorをリモートで実現するweinreが凄い
    hamaco
    hamaco 2011/06/22
  • Jenkins はじめました + ほか3つ - mixi engineer blog

    こんにちは。加藤和良です。 まずあの話を書いて、それを前提にあの話を書いて、みたいなキューが筆者の中にはあったのですが、正直キューの先端につまってる話はだんだん個人的な関心および記憶がうすれてきました! 昔のはなしですからね。 というわけで、最近のまとめをさらっと書いて、新しいネタをすぐ書ける状態にリセットしたいと思います。 Jenkins mixi ではバージョン管理システムとして Subversion を使っています。安定した、いつでもリリースできるバージョンを trunk に、開発中の機能は branches 以下に作業ブランチをつくり、レビューや QA などの後に trunk にマージする、という運用です。 Buildbot はこのうち trunk だけを追っていたのですが、徐々に「このブランチBuildbot で追うようにして、結果をこの IRC チャンネルに書きこんでほしい

    Jenkins はじめました + ほか3つ - mixi engineer blog
    hamaco
    hamaco 2011/06/07
  • 1