Panic Inc.

Panic Blog

Copywriter: Noby.

The Panic Office. 〜本社オフィスについて〜

本社オフィスについてお話しましょう。

厳密に言うとPanic IncのスタートはSteveのベッドルームでした。その後アパートのスペースを共有し始め、別のアパートに引っ越し、小さなオフィスに引っ越しました。そしてついに、数年前のことになりますが、スケルトン状態から内装工事を行った新しいオフィスをオープンさせました。これまで、この新しいオフィスについてインターネット上で紹介してきませんでした。いつまでも特別な気分でいたかったですし、写真ばかりの長い長いスクロールが大変なページも避けたく、何より訪れるゲストの皆さんを驚かせたかったのです。しかし時間も経ちましたし、すべての皆さんをランチにご招待するのも難しい。

という訳で、私たちパニックの本社オフィスのフォトツアーをお楽しみください。

The History. 〜歴史〜

入居しているビルは、ポートランドの幹線道路であるBurnside通りの’一部’です。床のペンキを剥がした際、等間隔のオイル染みを作業員が見つけました。間違いなく、私たちはかつての駐車場の上に座っています。

Office-History-1

The Planning. 〜計画〜

私たちはいくつかのことが分かっていました。皆で共有できるオープンなスペース(はい、私たちのオフィスは通常とても静かです。まれにある会話はTwitter用のジョークに関してが少々、残りのほとんどは我々のチームにとって重要なインプットとなる対話が多いです。)が必要です。また会議室、ナイスなキッチン、そして屋上からすばらしい景色を眺められるようにすることも必要でした。

さらに“パニックらしさ”も欲しい。しかしそれはとても難しい注文です。

設計者であるChrisは見事に私たちのカギとなる3つのポイント: 厳粛過ぎないクールさ、バカバカし過ぎない楽しさ, そして貫禄ある雰囲気を実現してくれました。さらにLouis Kahnによるエール大学アートギャラリー(と、個人的にはEpcotセンターからも)インスピレーションを受け、私たちの夢はスケッチになり、レンダリングされていきました。

Office-Concept-10

Office-Concept-2

Office-Concept-6

Office-Concept-5

Office-Concept-11

Office-Desks-1

The Buildout. 〜締切〜

私は常に自分を抑えることができませんでした。工事の進捗を毎日チェックしました。作業員たちは本当に嫌だったと思います。しかも最後の最後、ウォールマウントされたコンジットとライトの追加を余計にもリクエストしました。

office-buildout-1v2

Office-Buildout-9

Office-Buildout-5

Office-Buildout-4

The Grand Opening. 〜オープニング〜

ついに、約1年をかけた計画が完了しました。

引っ越しを完了し、本当にいい気分でした。

初日の様子です:

Office-Finished-4

Office-Finished-3

Office-Finished-5

Office-Finished-6

Office-Finished-2

Office-Finished-17

Office-Finished-10

Office-Finished-11

Office-Party-1

Office-Party-2

The Signage. 〜サイン〜

Nevenと私はオフィスの各サインを8-bitテイストにしたくて仕方ありませんでした。いつか自社ゲームのキャラクターに使いたいと思います。

Instagram-Sign2Instagram-Sign1Instagram-Sign3Instagram-Sign4Instagram-Sign5Instagram-Sign6Instagram-Sign10Instagram-Sign12Instagram-Sign13Instagram-Sign14

The Living Room. 〜リビング〜

オフィスの工事は完了し、引っ越しも完了。しかしそれで終わりではありません。(実際、私たちは考えが足りていませんでした。)

インテリアデザイナーであるAndeeの助けを借り、リビングルームエリアに少々の生活感を加えることにしました。統一したパターンのラグ、テーブル、カーテン、クッション…

Office-Pattern

Office-Finished-8

Office-Finished-9

(パターンを注意深く見ると、私たちの古くからの友人が散りばめられていることに気付くかも知れません。)

The Planning of Something Interesting. 〜さらに、いくつかの計画〜

極々まれにある電話のために、電話スペースを準備しました。角の極小スペースに3つのシーリングライト、明るい窓…

Office-Founders-1

そうするうち、このスペースをよりスペシャルにするアイディアを思いつきました。Andeeの力を借りつつ作業を進めます。

Office-Founders-2

Office-Founders-3

Office-Founders-5

Office-Founders-4

The Founders Room. 〜社長室〜

隠し扉の後ろに…

founders-door

…ちょっとスペシャルな空間が:

Office-Founders-6

(奥にある油絵には古い海軍の制服のSteveと私に似た老紳士が描かれています。これは我々の写真を元に、中国の大芬で油絵として書き上げられたという驚くべき物です。さらに酒が隠されたキャビネットがあります。)

The New Carpet and The New Wall. 〜新しい壁とカーペット〜

その後、元々のグリーンのチェス盤調カーペットに、ある種のエネルギーを奪われるように感じ交換されました。カーペットは奥の壁に続き、ライトを埋め込みました。

office-carpet

Office-NewCarpet-2

The Rooftop Hills. 〜屋上庭園〜

屋上デッキは気分転換に新鮮な空気を吸える素晴らしい空間です。しかし天気が良い日はオフィス内に光が入り、眩し過ぎることがありました。その問題を解決するための唯一の方法: スーパーマリオ3スタイルの人工芝の丘を設置することにしました。

office-rooftop-0

office-rooftop-4

office-rooftop-1

office-rooftop-3

The Guests. 〜ゲスト〜

このようなオフィスを構築することの最たる意味は、打ち合わせやオープンハウスなどで訪れたゲストの皆さんがこの空間をどのように見ているか、Instagramを通してチェックできることかも知れません。

Instagram-24Instagram-25Instagram-26Instagram-28Instagram-29Instagram-30Instagram-31Instagram-32Instagram-33Instagram-36Instagram-37Instagram-38Instagram-39Instagram-40Instagram-41Instagram-42Instagram-45Instagram1Instagram2Instagram7Instagram8Instagram10Instagram12Instagram13Instagram15Office-Instagram-BonusInstagram19Instagram20Instagram21Instagram35

最後に、ボーナス: パノラマ.

工事中と完成後の 360° パノラマ写真がご覧いただけます!

私たちのオフィスにお越しいただき、ありがとうございました。

Credits

Principal Architect: Chris Hodney, Holst Architecture
Interiors, Founders Room, Hills: Andee Hess, Osmose Design
General Contractor: R&H Construction
Founders Room Contractor: GRADA Inc.
Living Room Pattern: Pattern People
Ridiculous Oil Painting: QPaintings.com
Panoramas: Matt D. Smith
Photo Credits: Chris Hodney, Buzz Andersen, Andee Hess, Instagram

[原文]

Posted at 11:48 pm The Panic Office. 〜本社オフィスについて〜 はコメントを受け付けていません。

From the desk of Cabel
Portland, Oregon 97205

Coda 2.0.7 Beta 1

Coda 2.0.7b1  (51MB).

UPDATE 12/10: ご協力ありがとうございました。直販版がリリースされ、Mac App Store 版は Apple に申請されました。

主な変更点: 動作速度と安定性の全体的な向上。

もし不具合を見つけられた場合は、私たちのバグトラッカーである Hive にログインしてレポートをお願いします!(開発担当が直接閲覧しますので、すべて英語でご入力ください。)

PS: 引き続き Twitter 経由で、まもなくリリース予定の iCloud および Dropbox 経由でお気に入りを同期する Transmit とまったく新しい iPad アプリケーションのベータテストを募集しておりますので、ぜひご協力ください!

Posted at 5:00 pm Coda 2.0.7 Beta 1 はコメントを受け付けていません。

From the desk of Cabel
Portland, Oregon 97205

Coda and Sandboxing

Mac App Store版の Coda 2 に新機能を追加する前に、我々はそれを“サンドボックス化”しなければなりません。Apple は OS X のセキュリティ向上を目的としてガイドラインに定めています。

それは何を意味するでしょうか?

サンドボックス化されたアプリケーションは、ユーザから明示的に許可が与えられるまでローカルファイルへのアクセスが限定されます。許可を与えるとそれは記憶されます。Coda で言い換えると、ユーザから許可を与えられるまで、一般的な選択ダイアログからであってもローカルファイルを参照することができなくなります。また Coda には“サイト”という設定があり、その設定にはローカルパスが含まれています。この設定でもまず、最初にローカルファイルへのアクセス許可を明示的に与える必要があります。これはバッドニュースでしょうか?既存のサイト設定のすべてで再度ローカルパスを設定する必要があり、サイト設定を使用しない(そんなユーザは居ないと思いますが)場合、都度、アクセス制限に作業が中断されることが予想されます。

これらの変更は Mac App Store 版のみです。直販版では変更ありません。

以下、相違点を詳しくご説明します:

1 ローカルルート

サイト設定の “ローカルルート” がリセットされます。初回の設定時にアクセスを許可するか訊ねられます。

この設定は初回の1度きりです!

2 フォルダに移動

プルダウンメニューから直接フォルダに移動することはできなくなり、従来の “選択パネル” が現れます。

3 パスポップアップ

サイドバーおよびファイルブラウザから利用可能な “パス” ポップアップですが、定義されたローカルルートより上位の階層は表示されなくなります。

サイト設定を利用していない場合、サンドボックス化されたホームディレクトリが表示されます。継続する為には他のフォルダを選択します。

フォルダ選択操作は初回の 1度きりです!

4 パスバーブラウザ

ローカルルート設定外のフォルダを選択しようとすると、アクセスを許可するための選択画面が現れます。

フォルダ選択操作は初回の 1度きりです!

5 ファイルの保存

書き込み権限の無いファイルを保存できません。またこれを回避する方法も Coda から提供することができません。

これは、書き込み権限を一般的に付与しない Web ページを含む、すべてのファイルに適用されます。

Mac App Store による制限です。

6 情報を見る

Coda の情報を見るウインドウから、アクセス権の変更を行えなくなります。

編集する前にあらかじめ Finder の情報を見るウインドウで変更してください。

Mac App Store による制限です。

7 場所(プレイス)

サイドバーの“場所(プレイス)”のローカル設定がすべてリセットされ、再定義が必要です。

NOTE: 本設定はコンピュータ毎に定義されています。そのためコンピュータ毎にリセットと再定義が必要です。

8 SVN と GIT

ツールパスのリセットと再設定が必要になります。

以上です。いかがでしょうか?

これらの変更をご体験いただくために、Coda 2 のスペシャルビルドを準備しました。

実験スタート

サンドボックス化された Coda をお試しいただく前に、このビルドが実験版でベータ品質であることをご理解ください。必ず、システム全体のバックアップを準備してからお試しください。

また、現在 Coda 2.0.6 以降の Mac App Store 版をお使いいただいている必要があります。またこの実験版を起動する前に、Coda 2 の iCloud 同期機能をオフにしてください。

実験版をダウンロードするにはここをクリックしてください。(50 MB .zip)

お試しいただけましたら、ぜひご意見をお聞かせください。サンドボックス化された Coda 2 がほとんどのユーザ様にとって大きな影響が無いことと予想していますが、皆さんの率直なご意見をお聞かせください(開発担当が直接閲覧しますので、すべて英語でご入力ください。):

Take Our Survey!

最後までお読みいただき、また Coda 2 をご選択いただき、ありがとうございます。サンドボックス化された Coda 2 をご紹介できることに興奮しており、新しく、素晴らしいものになるよう開発を続けます!

Posted at 4:59 pm Coda and Sandboxing はコメントを受け付けていません。

From the desk of
Cabel
Engineering Dept.

iTunes 11 and Colors from Wade

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

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

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

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

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

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

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

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


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

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

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

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

[原文]

Posted at 4:59 pm iTunes 11 and Colors from Wade はコメントを受け付けていません。

From the desk of Cabel
Portland, Oregon 97205

Top 20 Secrets of Coda 2

あなたの知らない Coda 2 の機能があるかも知れません。この記事で Coda 2 をより深く知り、これまで以上に使いこなしてください!

1. 新規ファイルを分割ウインドウで開く

新規分割ウインドウボタン  で追加された分割ウインドウに、以下の 3つの方法で任意のファイルを表示させることが可能です:

  1. サイドバーかパスバー、もしくはファイルタブで option + ダブルクリックする
  2. パスバー上にドラッグ&ドロップする
  3. コンテキストメニューから “分割ウインドウで開く” を選択する

ボーナス Tip: “Option” キーを押しながら新規分割ウインドウボタンを押すと、分割方向が切り替わります。デフォルトの設定は Coda 環境設定 ▸ 一般(タブ)▸ 分割ウインドウで変更可能です。

2. HTML + CSS + ライブプレビュー

エディタを 3つに分割し HTML ソースコードと CSS ソースコード、プレビューを並べて作業を行えます。まず編集したいあなたの HTML ファイルをエディタで開きます。次に新規分割ウインドウボタンを押し新規書類を分割ウインドウで開きます。ここで先ほど #1 で紹介した方法で編集したい CSS ファイルをいま追加した分割ウインドウ上に(パスバーにドラッグするなどして)開きます。最後に、最初の HTML 書類に戻って選択した後、新規分割ウインドウ ボタンからプレビューを選択します。

ライブプレビュー機能により編集された HTML や CSS はすぐにプレビューに自動的に反映され表示されます!

3. 環境設定を探検する

はい、これはそれほど “尖った” Tips ではありません。しかし私たちはこれを強く強くオススメします。ぜひ数分の時間をかけて Coda 環境設定を隅々まで確認してみてください。恐らく知らなかった、気づかなかった “あの” 設定が見つかると思います!

4. サイトグループを作成する

サイト設定が増えてくると整理したくなってくるかも知れません。そんな時はサイト設定を別のサイト設定上にドラッグしてください。iOS アプリケーションの様にサイト設定を整理することが可能です。以前の項目をまとめたり、案件毎にまとめたりすることができます!

5. テキストタブを使用する

タブバーをリサイズできることをご存知でしょうか?タブバーの下部を上下にドラッグするだけです。では上いっぱいまでドラッグするとどうなるでしょうか?エディタをスクリーン一杯にして作業を行えます。

6. 特定のファイル形式の書類を表示・隠す

サーバ上のすべての隠しファイルを確認する必要は無いのに .htaccess ファイルは編集する必要があるので “不可視ファルを表示” オプションをオンにしたりオフにしたりしていませんか?

そんな面倒は必要ありません!Coda 環境設定 ▸ ルール(タブ)▸ ルール設定から、転送のスキップや表示、非表示を設定することが可能です!

7. iPhone/iPad 上の表示をシミュレート

プレビュー中に “ユーザエージェント” を iPhone や iPad に変更してみてください。こんな風に変わります:

これは近似された表示ですがモバイルページの初期レイアウトをちょっと試すのにちょうど良いかも知れません。

ユーザエージェントを変更するには、プレビュー下端にあるギアメニューをクリックしてください

8. パスバーからコードナビゲータにアクセスする

既にコードナビゲータを活用されているかも知れません。これはコードの任意の場所にジャンプするのに役立つサイドバーツールです。

実はこれ、パスバーのファイル名からもアクセス可能なんです。ファイル名の右をクリックしてみてください!

9. ナビゲータにカスタムブックマークを追加する

ナビゲータには HTML 書類内で使用されているエレメント名でリストされますが、任意の文字列でナビゲータに表示させるブックマークを作成することが可能です。以下の様に記述してください:

<!-- !Page start -->

もしくは、1行コメントスタイルでも可能です:

// !Bookmark

こうすることでコードナビゲータにブックマークを表示させることができます:

10. 素早く指定の行にジャンプする

エディタの下端にある行番号をダブルクリックします。ポップアップウインドウが現れますので、移動したい行番号を入力してください。(ショートカット ⌘⇧L も利用可能です)

11. ブックを探求する

ビルトインブック機能に “隠れた機能” はありませんが、Coda 2 で大幅にオーバーホールされたのでぜひチェックしてください。

タブにブックを追加するには、タブ追加ボタンを押しブックを選択します。

ボーナス Tip: オンラインで利用可能です。必要に応じてご活用ください: HTMLCSSPHPJavascript

12. インラインで CSS スタイルをブラウズする

私の様な CSS ルールをいくつも覚えられない場合、どうしたら良いでしょうか?CSS スタイル宣言の後、以下の様に “esc” キーを押し現れたポップアップで “Styles” を選択してみてください:

便利です!

13. 新規ウインドウでプレビュー

Gもし大きなスクリーンをお持ちでしたらプレビューギアメニューから、このアプリケーションで開く ▸ 新規ウインドウを選択してください。

14. テキストをタグで囲む

テキストを入力しそれを選択します。書式 ▸ タグで囲むを選択するかショートカット ⌘< を入力します。すると <div> タグで囲まれます。それで終わり?いいえ、Coda 2 は “div” の開始タグを選択した状態で待機しています。指定したいタグを入力してください。すると自動的に終了タグも書き換えます!

15. ブロック編集で複数行をまとめて編集

Q複数の行をまとめて編集したいなら、ブロック編集機能が便利です。編集したいテキストを Option キーを押しながら選択してください。編集内容がすべての行に反映されます!

“esc” キーを押すとブロック編集モードを終了できます。

16. すばやく開く

ローカルで作業を行っているなら、パスバーの左端をクリックすると “すばやく開く” ウインドウが現れます。ファイル名の一部を入力してみてください。入力内容と一致する項目がリストアップされます!ショートカット Control +Q からも利用可能です。

17. 加工処理メニューを探求する

文字列のエンティティ化や改行コードの削除をする必要がありますか?もしそうなら、書式 ▸ 加工処理メニューをご活用ください!

18. よく使うフォルダを場所(プレイス)に登録する

サイトの構築中、頻繁にアクセスするフォルダがある場合はサイドバー項目の場所(プレイス)にドロップして追加することができます。サイト設定毎のフォルダ版 “お気に入り” としてご活用ください。

19. プレビューから CSS スタイルにジャンプ

(Note: この tips は Coda 2.0.2 以降で利用可能です。)

プレビュー上で右クリックし、表示されるコンテキストメニューから即座に CSS のスタイルにジャンプしてエディタで開くことが可能です。

Bベストポイント: CSS ファイルが開かれていない場合は Coda が当該 CSS ファイルをエディタで開き表示します!

20. ボーナス Tip: キーボードショートカットのカスタマイズ

最後に、OS X の知られざる素晴らしい機能をご紹介しましょう。これはほぼすべてのアプリケーションで利用可能です。

システム環境設定 ▸ キーボードから “キーボードショートカット” を選択します。

左のリストから “アプリケーション” を選択し、”プラス”  ボタンを押します。

現れたダイアログで Coda 2 を選択して、ショートカットを割り当てたい、変更したいメニュータイトルを正確に入力の上、任意のショートカットを入力してください!

(メニュー項目に … が利用されている場合、それはピリオド 3つでは無く 1文字です! option + セミコロンで入力できます。)

新たに追加したショートカットを利用する前に Coda アプリケーションを再起動してください。

それぞれぜひお試しください!

[原文]

Posted at 4:58 pm Top 20 Secrets of Coda 2 はコメントを受け付けていません。