タグ

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

  • 総行数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
    efcl
    efcl 2015/12/20
    -webkit- prefixから標準への書き換えを行った話。 CSS:fixmeで標準記法へ直し、Autporefixerでプリフィック対応し、Lessで構造的に管理しやすくしていく
  • 絵文字だョ! 符号化文字集合(前編) - mixi engineer blog

    先日取り上げて頂いたテック総研のインタビューでは残念ながら時間の都合で、ろくろを回す事が出来なかった、iPhoneアプリ開発担当の七尾です。いやー残念。 先日お伝えしたAppleカラー絵文字文字コード表にUnicodeコードポイント、UTF-8、SoftBankUnicodeも追加したので、お知らせします。 iOS Emoji - GitHub Pages ついでに各種変換処理なども書いたり、Unicodeの仕様を調べたりしたので、文字コードのおさらいとして、いくつかUnicode絵文字を扱う上での注意点についても、メモしておこうと思います。と思ったら結構な分量になってしまったので、前半と後半に分けてお送りします。 UnicodeSet そもそも絵文字ってどこからどこまで?という問いに答えてくれるのが、UnicodeSetです。 よく使われるものだと\p{Han}(漢字の範囲を示す)だとか

    絵文字だョ! 符号化文字集合(前編) - mixi engineer blog
    efcl
    efcl 2013/08/22
    絵文字をカウントしてないで文字を数える
  • スマートフォン開発研修教材の公開について - mixi engineer blog

    クラフトワークの来日公演3-D CONCERTS 1 2 3 4 5 6 7 8を観にいったら、顔が大きいのか、3Dメガネがきつくて切なかったもりもとです。 株式会社ミクシィでは、新卒入社スタッフをはじめ、これからスマートフォンアプリ開発を行っていく全スタッフを対象に、社内で「スマートフォン開発研修」を始めています。その研修資料をこのたびgithubで公開させていただきました。 mixi-inc/iOSTraining · GitHub https://github.com/mixi-inc/iOSTraining mixi-inc/AndroidTraining · GitHub https://github.com/mixi-inc/AndroidTraining これら文書は、それぞれCC BY-SA 3.0およびApache License 2.0とCC 2.5 Attributi

    スマートフォン開発研修教材の公開について - mixi engineer blog
    efcl
    efcl 2013/05/15
    mixiのiOSとAndroid向けの学習ドキュメント
  • UIView拡張カテゴリによるUIコーディングの簡略化 - mixi engineer blog

    はじめまして、佐野です。僕は2006年10月にメンバー4人でネイキッドテクノロジー社を創業し、5年間ガラケーからスマホに渡るまでモバイル関連の技術・サービス開発に携わり、去年の10月にミクシィ社にジョインし、現在はmixiのiPhoneアプリの開発に携わっております。このブログではiOSプログラミングの初級者~中級者向けに、さらなる上達の助けになるようなことを書いていきたいと思います。 Apple 製の iOS/Mac アプリの統合開発環境であるXCodeは、ver4 から GUI ベースの UI 開発ツールである Interface Builder が組み込まれ、非常に快適にUI開発ができるようになりました。mixi の iPhone/iPad アプリも基的には各画面が IB ファイルで構成されています。静的な画面であればこれだけで済むのですが、アニメーションを多用したインタラクティブ

    UIView拡張カテゴリによるUIコーディングの簡略化 - mixi engineer blog
    efcl
    efcl 2012/06/20
    CGRectMakeで冗長に指定する代わりにUIViewのカテゴリ拡張をして、シンタックスシュガー的なものを用意する
  • AssetsLibraryについて私が知っている二、三の事柄 - mixi engineer blog

    こんにちは。mixiのiPhone版公式クライアントアプリを開発している七尾です。 私たちが開発しているmixiのiPhone版公式クライアントアプリは「つぶやき」や、「日記」、「フォト」、「チェックイン」などさまざまなサービスに対応しており、今後もどんどん機能を追加していく予定です。 今月リリースされたVer9.0ではプッシュ通知にも対応し、感慨もひとしおなのですが、実は同じくVer9.0では、写真の同時複数選択にも対応しており、目立たない機能の割に実装が大変だったので(笑)、新機能のご紹介がてら、実装で利用したAssetsLibraryフレームワーク周りで苦労した話や注意点などを書いておこうと思います。 AssetsLibraryはiPhone/iPadに保存された動画や写真に自由にアクセスする為の仕組みです。従来の標準で用意されているイメージピッカーだと、一枚しか選択できないのですが

    AssetsLibraryについて私が知っている二、三の事柄 - mixi engineer blog
    efcl
    efcl 2012/06/14
    フォトアルバムを触るAssetsLibraryについて。複数枚選択
  • Blocksを使ったHTTPリクエスト - mixi engineer blog

    聖闘士星矢Ωが、思ったより面白くて小宇宙が軽く爆発しそうなk_kinukawaです。 今回は、iOSアプリでHTTP通信を行うときの話です。 2012年4月27日 「メインスレッド上で処理している」について一部修正 従来のNSURLConnectionは、レスポンスをdelegateでハンドリングしていました。 そのため、リクエストを投げる箇所とレスポンスを受ける箇所がコード上で離れてしまい、可読性がよくありませんでした。 また、レスポンスを受け取ったあとの処理についても、delegate内で条件分けをして処理をしているうちに分岐/ネスト地獄になりがちでした。 一方、iOS5からNSURLConnectionにsendAsynchronousRequest:queue:completionHandler:というメソッドが誕生しました。 引数を見る限り、GCDを使って非同期リクエストをする系

    Blocksを使ったHTTPリクエスト - mixi engineer blog
    efcl
    efcl 2012/04/28
    BlockRequest
  • なぜ @kotarok さんは mixin より extend を推すのか - mixi engineer blog

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

    なぜ @kotarok さんは mixin より extend を推すのか - mixi engineer blog
    efcl
    efcl 2012/03/05
    mixinとextendの違い。 "スタイルルール群が先にありきで「それをどこに当てるか?」を考えるのが本来の姿。その、「どこに当てるか」を増やしていくメンタルモデルに、 extend が近い。”
  • 詳細 ECMA-262-3 第8章 評価戦略 - mixi engineer blog

    全国20人の ECMA セオリストのみなさま、おつかれさまです。大形尚弘です。 ついに Dmitry 先生の ES3 シリーズも最終章となりました。この後に ES5 シリーズが5章続きますが、それらは基的に今シリーズの補足として書かれたものですので、ここまでお読みいただいたみなさまは、ほぼ ECMAScript の理論的側面を理解したと言えます。 もしそうでない部分があったとしても、実際に ECMAScript の仕様書をご覧いただければ、これまでとは全く理解度が違っていて、あっという間に足りない知識を補足できると思います。端的に、「仕様が読める」ようになっているはずです。 ES5 であれば、PDF である仕様書を、有志の方が es5.github.com にて「注釈付きの」 HTML 形式で公開し、頻繁に更新されています。注釈の一つはもちろん我らが Dmitry 先生の ES シ

    詳細 ECMA-262-3 第8章 評価戦略 - mixi engineer blog
    efcl
    efcl 2012/02/04
    詳細 ECMA-262-3 シリーズ翻訳 最終章
  • mixi for iPad Ver 2.0 リリース記念 iPad 風フォトビューアの作り方 - mixi engineer blog

    初めまして。11 新卒の田村と申します。 好きなべ物は卵でございます。 現在は iOS 公式クライアントアプリ開発を行っており、主に mixi for iPad の開発を行っております。 そんなおり、12/14 に mixi for iPad Ver. 2.0 がリリースされましたー!88888 今回のアップデートの目玉機能は コメント、メッセージのプッシュ通知機能 mixi フォト用フォトビューア機能 でございます。私はこのフォトビューアの開発を行っておりましたので簡単に宣伝させていただきます。 今回の mixi フォト用フォトビューアは、mixi にアップロードされている写真を iPad の大きな画面で閲覧することができ、更にそこからその写真に対してイイネ、コメントを簡単に行うことができます。iPad ならではのシームレスな操作感を実現しておりますので iPad をお持ちの方は是非お

    mixi for iPad Ver 2.0 リリース記念 iPad 風フォトビューアの作り方 - mixi engineer blog
    efcl
    efcl 2011/12/25
    サムネイルを下部に並べる画像ビューアーの作り方
  • 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
    efcl
    efcl 2011/11/17
    スタブ、モック、フェイクオブジェクトを利用できるテスト向けライブラリSinon.JSの紹介
  • mixi Engineers' Blog » 詳細 ECMA-262-3 シリーズ・第1章 実行コンテキスト/第2章 変数オブジェクト

    初めましてこんにちは。たんぽぽグループの大形尚弘と申します。好きな言語は Dart です。どうぞよろしくお願いします。 さてもう昨年のことになりますが、私個人のブログにて、 Dmitry A. Soshnikov さんの JavaScript. The Core. という記事を翻訳させていただきましたところ、予想以上の反響をいただきました。 JavaScript の実装部分、例えば今なら HTML5 の色とりどりな API といったキラキラした部分だけでなく、 ECMAScript の仕様そのものに興味のある方が、こんなにいたなんて! と、いうわけで、日では、先日上梓されました『パーフェクト JavaScript 』でのみ触れられているような、 ECMAScript の言語仕様そのものについて、同じく Dmitry さんが書かれた ECMAScript3 および 5 に関する詳細記事シリ

    mixi Engineers' Blog » 詳細 ECMA-262-3 シリーズ・第1章 実行コンテキスト/第2章 変数オブジェクト
    efcl
    efcl 2011/11/03
    oogattaさんによるDmitry A. Soshnikov さんのES3についてのシリーズ記事の翻訳
  • 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が凄い
    efcl
    efcl 2011/06/21
    ローカルにコンソール用のサーバを立てて、トラッキング用コードを埋めたサイトにモバイル端末からアクセスして、コンソールからの変更をアクセスしてる画面に反映させる。 JSConsoleににている感じ
  • 1