Archive for the ‘Engineering’ Category

Violet Beep -秘密の警告音

木曜日, 3月 12th, 2015

わたくしCabelにはVioletという名の1歳の娘がいます。

理由は定かではありません。が、いつからか彼女をBeep、ある時はBeepyと呼ぶようになっていました。

昨日、私たちのSSHアプリPrompt 2.1に小さなイースターエッグがあると、AshurとHeatherから明かされました。

このイースターエッグを行うと通常の白いビジュアル警告音が… violet、つまりすみれ色になります。

Heatherがコードを書き、Ashurは説明のための以下のグラフィックを作成していました:

slack-imgs.com

すみれ色のフラッシュを見つけるたび、私はあなたをPanicファンだと密かに認定するでしょう。(さらにこのことを将来Violetに説明する時、彼女は「え?そんな風に呼んでたの?」と真っ先に言うに違いありません。)

私たちのアプリには通常このようなイースターエッグはほとんどありませんが、忘れずにお知らせしておきます。

(方法: 1. Prompt 2.1をインストールする。2. 起動し、設定アイコンをタップする。3. 警告音をタップする。4. 2本指でトリプルタップする。)

[原文]

EditorConfig for Coda 2.5

火曜日, 2月 17th, 2015

edcon_color_transbg2 EditorConfig はテキストファイルにコーディング時のエディタの設定を記述しておき、お気に入りのエディタ間でその設定を共有しよう、という賢いアイディアです。

例えば、通常はタブコードでインデントしているメンバーが、スペースを使用するようにルール決定されたあるプロジェクト(恐らくPython?)に参加するとしましょう。そのような場合、EditorConfigを利用してあらかじめ下記のような.editorconfigファイルをプロジェクトのルートに配置しておくと…

  1. # top-most EditorConfig file
  2. root = true
  3.  
  4. # 4 space indentation
  5. [*]
  6. indent_style = space
  7. indent_size = 4

…各エディタがその設定を自動的に参照し、その設定でコードを開きます。EditorConfigに対応したエディタであれば、誰でも推奨された設定でコードを開き、編集することが可能になります。

このクールな仕組みが私たちのユーザの皆さんも使えると便利だと考え、Coda 2.5用EditorConfigプラグインを開発しました!テキストエンコード設定以外のすべてをサポートしています。


上記のリンクが機能しなかったり、後でインストールしたい場合はプラグインページからもご入手いただけます。

設定の方法や記述フォーマットについてはこちらをご参照ください。 Enjoy it!

ShrinkIt(シュリンクイット)1.3

火曜日, 2月 17th, 2015

ShrinkIt 1.2 icon

私たちは以前、シンプルで便利なツール ShrinkIt® を無料で公開しました。

(名前の最後の®にお気付きか分かりませんが、実際に私たちはトレードマークを取得しました!)

ShrinkItはAppleのレンダラーによって着膨れした精細なPDFを極限まで品質ロスを抑えつつ、ファイルサイズを圧縮するツールです。

とは言え: 長い文章が詰まったPDF文章やビットマップ画像のものにはまったく向いておらず、圧縮されません。アプリケーション内で使用されるシンプルなシンボルやグリフのPDFを圧縮するのに向いています。

今回そのShrinkItがアップデートされました。リリースノートは以下です:

  • 処理がスレッド化され、より高速になりました。
  • 私たちのDeveloper IDで認証されました。
  • アイコンが新しくなりました。
  • Retinaディスプレイ対応。
  • 1.3 — ファイルパスにユニコードが含まれていると起こっていた問題を修正
  • 1.3 — クールなプログレスバーとアニメーションを無意味に追加

[重要] ShrinkItに関する追記:

  1. 圧縮した結果、オリジナルより小さくならない場合は書き出されません。
  2. 書き出された場合、オリジナルのファイル名に”_org_”が追加されます。

宜しければお使いください。

UPDATE 2/11: バージョン1.3をリリース。
UPDATE 2/13: OS X10.7および10.8で起こっていた問題を修正し、バージョン1.3.2としてリリース。

PunchClock: iBeaconで楽しむ

日曜日, 8月 31st, 2014

PunchClock時々、Panicでは社外で日の目を見ることのない社内向けアプリを作ります。今回紹介するPanicチームのための自動入退出トラッカー: これはそのようなプロジェクトのうちのひとつです。

はい、私たちのチームはそれほど人数が多くないので、入退出管理は大きな問題にはなりません。しかし面白いので試してみました。最初に私はSNMP、ARPテーブルの参照、そして一般的な昔ながらのポートスキャンを組み合わせ、理論上の“入室”を取得していました。しかしそれはそれほど期待通りではなく、結局私たちのStatus Boardから取り除かれました。Appleが間もなく、私たちの(それほどでない)クリティカルな問題の解決法を発表することを知らなかったのです。

iOS 7に搭載されたiBeaconの出現により、Appleはまったく新しいやり方で小売や公共スペースを明確に変化させようとしています。もはや買い物の際にその店のアプリは必要なく、アプリは店内のあなたの位置に反応します。一般的に、iBeacons自体は近くのあなたのデバイスに通知するためのIDを単に発信しています。このアイディアにより、比較的安く投げ売りされているビーコンを周辺に広めることで、iOSおよびクラウドサービスは訪問客が見るべきコンテンツを提供することができます。

さらにiOS 8では、Appleに登録された屋内位置追跡エリア内にいるとロックスクリーンにボタンが追加されます。ボタンをタップすると関連アプリが起動し、インストールされていない場合はApp Storeにジャンプします。すごい!

手のひらサイズのこの新しいテクノロジを利用した、まったく新しい入退出トラッカーPunchClockを作るのにそれほど時間はかかりませんでした。それはジオフェンスとiBeaconトラッキングを組み合わせ、さらにHerokuでホストされた単純なSinatraバックエンドを使用しています。省バッテリーで位置情報を提供するため、ポーリングの調整に多くの時間を要しました。

ひとたび信頼できる入退出データが取得されると、オフィスを誰が何時に出入りしたか、その瞬間に(可能な限り気持ち悪く無い方法で)通知すると面白いと考えました。さらにPunchClockの素晴らしい機能として“入室”とマークされると — 例えばオフィスがロックされてしまったり、トイレに閉じ込められたりした際、チーム全員にメッセージを送ることができます。NevenがUIを、Cabelが通知音を作り、このアプリは完成しました。

AppleのiBeaconテクノロジが大きな店舗やスタジアムでロールアウトされ続ける中、あなたの家やオフィスで試さない理由はありません。

皆さんがご自身で入退出トラッカーを作成できるよう、私たちはPunchClockをGithubで公開しました。バックエンドからアプリへ提供されるJSONデータはStatus BoardのDIYパネルでも利用可能です。

正直、PunchClockを自身でセットアップするには技術的な能力が必要です。これは私たちが提供する正式プロダクトではありません。しかしあなたがプログラマで、コーディングに暮れる夜を楽しむ準備ができているならば、みなさんが何を作るかを私たちはとても楽しみにしています。アプリとバックエンドについてはできる限り詳しくREADMEに記述しています。

PunchClockは私たちが楽しむためのアプリでしたが、皆さんも楽しんでいただけますように。


[原文]

iTunes 11 and Colors from Wade

金曜日, 4月 18th, 2014

iTunes 11 は以前のバージョンから大きく変わりました。新しいアルバムディスプレイモードはその最たる機能です。この新しい表示スタイルは、アルバムのカバーアートと視覚的にマッチしたトラックリストを生成して表示します。その結果、文字もアルバムのアートワークとシームレスに統合され、とても魅力的です。

iTunes を1日使ってみてふと、この機能  あるイメージを元にイメージとテキストテーマを生成する  を実装することは、どの程度大変だろうか?と考えました。

iTunes テーマのレプリカを作成する第1歩は明白で、トラックリストの背景色を取得することです。これは単純にアートワークの左端で最も使用されている色によって決定されています。色をカウントして抽出すると良い結果が得られましたが、iTunes では明確に、それ以外の何かがあります。最も使用されている色が黒か白の場合、ちょっとしたロジックを背景色に加えてみました。単なる黒や白の背景は単調で退屈なので、これによりちょっと面白いスタイルになりました。もちろん、ほとんどが黒もしくは白で支配されている場合はそのままで、少なくとも 30% はデフォルトの黒もしくは白と共通でした。

黒と白の背景をフィルタリングし始めると、だいぶ iTunes に近づいてきました。さらに分析を進めた結果、iTunes はアートワークの周りの枠を認識していることに気づきました。アートワークの周りに白い枠があると iTunes はそれを取り除き、内側の色をテーマのベースにします。私の最初のシンプルなデモアプリケーションではこの機能を含めていませんでした。

背景色が決まれば、次は背景色と対照的なテキスト色を見つける番です。再び、とりあえず色数をカウントして求めると中々の好結果が得られましたが iTunes の方がベターです。使われている頻度でのみ求めると、異なるタイプのテキスト(例えばプライマリテキスト、セカンダリテキスト、詳細等)で同じ色のバリエーションが使用されることになります。結果を改善するため、次に私は個々のテキストの色について確認しました。選ばれた背景色上で常に美しく表示されるテキストの色を決定するアスペクトを求めるには何が必要でしょうか?カラフルなテキストを確実にするため、私はテキストに使用される色が最小の彩度レベルを持つかどうかを確認するちょっとしたコードを加えました。これによってアピアランス的にベストではない白っぽい色や明るすぎるパステルカラーの使用が防がれました。これでテキストは背景に合う美しくユニークな色になりました。唯一残る問題は、判読に十分な背景とのコントラストが得られないかも知れないということでした。なので最後に、判読が十分可能かどうかの為の背景色とテキスト色のコントラストのチェックを加えました。あいにく、これによってテキスト色を見つける際、デフォルトの黒や白が使われるミスをまれに引き起こします。

最終的には以下の様になります:

これは iTunes と 100% 一致しません — が、時々こっちの方が良いです!異なる場合もありますが、全面的によく動作します。

以下の Xcode デモプロジェクトで実際にお確かめください:


このデモについていくつかの注意があります。私はランダムな色がテキスト色として現れるのを防ぐため、基本的な周波数フィルタリングを行いました。私のケースでは 1回しか現れない色を無視しています。小さすぎるイメージではサンプリングに十分なピクセル数を持たないので、このしきい値は入力されるイメージサイズに基づくことが望まれます。iTunes が行っているその他の加工テクニックとして、もしこれが出荷レベルのコードだとしたら私もしますが、イメージ外周の縁取りを見つけ圧縮しています。いくつかのカバーアートイメージには、色をサンプリングする前に無視されるべき 1ピクセルの白もしくはグレーの縁取りがあることに私は気づきました。

(このコードは数時間で書かれとても荒いです。なので速度や最適化について考えがあれば、これがアルゴリズムデザインのレッスンというよりも考察であることに注意してください。エンジニアは免責です。)

ちょっとでも楽しんでいただければと思います!少しのコードで高度なテーマデザインを得ることについてのお話でした。

アップデート: Aaron Brethorst 氏に感謝。コードは GitHub からもご入手いただけます。

[原文]