Panic Inc.

Panic Blog

Wanted: Support Agents (2013)

As we head into 2014, a new opportunity to join the Panic team has arisen. Love Panic’s apps? Love problem solving? Love typing? And love making people feel good by helping?

We’ve been looking for you.

We are seeking front-line technical support agents to promptly answer emailed or tweeted inquiries about our entire product line.

Ideally, you’ve got:

  • Excellent problem-solving, and ability to “read between the lines” of customer emails
  • Substantial Mac OS X, iOS, and internet experience
  • Familiarity with FTP, SFTP, WebDAV and troubleshooting of computer networks
  • A professional, courteous, and personable email disposition
  • A pleasant personality, patience, and sense of humor

Bonus Points for:

  • Engineering / computer science experience
  • Familiarity with the Panic product line
  • Ability to enter zen-like state of high-speed e-mail answering

You must live in Portland, Oregon or be willing to relocate to Portland. It’s honestly a very nice place.

In addition to base salary, Panic offers:

  • Bi-annual profit-sharing bonuses
  • Annual retirement plan contributions
  • Full medical/vision/dental insurance
  • Flexible vacation policy
  • Reasonable, life-compatible hours
  • A very nice work environment, we think

Sound good? E-mail your resume to us and if we’re interested, we will send you additional details and possibly schedule an interview. UPDATE 2/2014: This position has been filled. Thanks!

While we won’t be able to write back to everyone, we really thank you for your interest!

Posted at 3:26 pm 9 Comments

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. 〜本社オフィスについて〜 はコメントを受け付けていません。

Wanted: iOS / OS X Engineers (2013)

Panic Inc has a very special opportunity for nice, creative, super-talented engineers to join our amazing, award-winning-even development team.

Are you our experienced OS X / iOS engineer?

Our ideal candidate will:

  • Care deeply about both form and function
  • Debug, refine, and extend our existing apps
  • Contribute code and passion to new apps
  • Look for opportunities to improve our process
  • Play well with our existing team
  • Be excited and mostly eyeroll-free when tackling new challenges
  • Feel a strong sense of self-motivation
  • Love making things for people

We also prefer candidates who have shipped an app — no matter how small the app, or how small your part.

In addition to base salary, Panic offers:

  • Bi-annual profit sharing bonuses
  • Annual retirement plan contributions
  • Full medical/vision/dental insurance
  • Flexible vacation policy
  • Reasonable, life-compatible hours
  • A very nice work environment we think

Take note: this position is in Portland, OR. (We’ll pay for your move if you need to.)

Sound interesting? E-mail your resume to us (Update 8/5: thanks for your interest! We’ve reached our candidate limit!) and attach or link us to an app you’ve created or worked on. (Make sure to tell us what you did in that app, no matter how small.)

Also let us know if you’re more experienced with iOS or OS X development.

If we’d like to talk further, we will follow-up with additional details!

While we can’t write back to everyone, we thank you in advance for your interest.

Posted at 5:08 pm 31 Comments

From the desk of Cabel
Portland, Oregon 97205

The Panic Status Board: 2013年度版

すべてはここから始まりました: the status board we put on our Panic office wall in 2010

現在、その電子掲示板は Status Board と呼ばれる iPad アプリケーションとして生まれ変わりました。そして誰もが自身のデータをデスクで、または壁に設置された画面で美しく、クールに活用することができるようになりました。

アプリケーションのリリース後、私たちはオフィスの Status Board をリビルトしました!

Panic Status Board

2枚のモニタディスプレイを設置しました。

なかなかに壮麗です。

パネルについて

私たちのボードに表示されているパネルについて詳しくご説明します:

Status Board - Revenueこれまで Panic では売上データについて特に意識してきませんでした。視覚化してみると売上高グラフパネルはとても魅惑的なことに気付きます。毎日、直販版の売上高を集計し、その後で App Store 版の売上高を AppFigures とそこで準備されている API を利用し集計しています。それぞれの集計データの合計をデータベースにダンプし、簡単な PHP スクリプトによって Status Board で利用可能な JSON データに変換されています。複雑に見えるかも知れませんが実装は約1日で完了しました。
Status Board - UnitsUnits(販売数)グラフパネルは我々の iOS ソフトウエアの経済状況を別の角度から明らかにし、興味深い姿を現します。我々の iOS アプリケーションの販売数は、Mac アプリケーションの販売数に匹敵しています。しかし売上グラフでは相当な開きがあります。私たちは iOS アプリケーションのシェアの改善に取り組み、新しいアイディアに挑戦します!グラフの自作方法についてはこちらの書類をご参照ください。
Status Board - Inboxこちらは Email パネルで、IMAP サーバを参照しています。セットアップはたった 3分で完了しました。日々、サポートに届くメールの状況を把握するのにとても役立っています。(サポートチームでは共通のヘルプ用アカウントがあり、それをスクリプトで個々のメンバーに分配し、集計しています。)
Status Board - Sentお客様への返信数はこのグラフパネルで表示されます。(競争や成績を争うためでなく、単に面白いので表示しています。)メールおよび Twitter での返信数を個々のメンバーごとに集計し、JSON で出力しています。
Status Board - Projectsこちらはプロジェクトリストで、サーバ上の HTML ファイルをパネルで表示しています。(表パネルの自作方法についてはこちらの書類をご参照ください)もちろんこれがすべてではなく、秘密のプロジェクトについては隠されています。プロジェクトリストは流動的で手動での更新が必要ですが、誰がどのプロジェクトに関わっているのかを知ることができ楽しいです。
Status Board - Sparkle
StatHat と連携し、使用されている OS X のバージョンをグラフで表示しています。
Status Board - Car2Goこれは car2go マップです。オフィス近くのどこに車が駐車されているかをひと目で確認できます。こちらは完全にカスタマイズされたオリジナルで、Do-It-Yourself パネルを利用しています。car2go API と Google マップを組み合わせ、加えて CSS アニメーションで実装されています。希望があれば将来、公開するかも知れません。(あなたの街では car2go が利用できますか?)
Status Board - TriMetこれも Do-It-Yourself パネルを使用したバスの時刻表です。ボードの前でミーティングに熱中しても終バスを逃す心配がありません!Logan の作成した TriMet panel も便利です。
もちろん最初から準備されている天気Twitter そして RSS パネルも使用しています。さらに、カンファレンスコールのために世界時計パネルで Portland、 Seattle そして San Francisco の時間をわざわざ表示しています。

ハードウエアについて

Back

その人や組織ごとのボードがあり、それは常に変化し続けています。実際、このブログの写真から更新されており、現在は GoSquared パネルが追加されています。みなさんの周りにあるデータをぜひ Status Board を通して見てみてください。新しい発見や議論が生まれ(それは良くもあり悪くもありますが!)時間を忘れてそのデータから様々なことを読み取ろうとしてしまうでしょう。

あなたがもし自身のボードやクールなパネルを制作しましたら、ぜひお知らせください!

[原文]

Posted at 3:50 pm The Panic Status Board: 2013年度版 はコメントを受け付けていません。

From the desk of Cabel
Portland, Oregon 97205

海外の Status Board マニア達!

私たちが Status Board をリリースしてから約1日が経ちました。驚くべきことに、既にたくさんの人々の手によって非常に多くのクールで役立つパネルが作成されています。

ここに偉大な数々をご紹介します。

banner

Dead Simple Greatness. クリックするだけで追加完了:

  • TubeTracker — an incredible one-click layout for people in the UK who rely on the tube (pictured above)
  • AAPL — simple module for Apple’s stock price (don’t follow too closely or you’ll go crazy)
  • LastFM — see your last-listened track
  • App Store Review Times —  a great way to see how busy Apple is
  • WWDC Alert — but really, how fast are tickets going to sell out this year
  • Bart Arrival Times — for those of you in San Francisco

New Native Sources. 情報の供給元によって Status Board の為に準備されました:

  • LeafPing — output your Envato sales data to Status Board. An example.
  • uri.lv — track your podcast statistics on the big screen.
  • AppViz — this must-have app for App Store sales tracking can now output to Status Board
  • Don’t forget our amazing launch sources: StatHat (so useful!) and Hockey.

Sources/Conduits. 動作には少々のコーディングが必要となります:

  • Nest — a quick look at the temperatures on N
  • Server Statistics — keep an eye on your server loads
  • OmniFocus — a Python conduit to get your tasks up and running
  • Google Analytics — 7-day website stats
  • Jenkins — display running jenkins jobs in a table
  • TimeTiger — interestingly, a Windows app for time tracking
  • Mint Analytics  — a Pepper to create Status Board-compatible web stats
  • Mite — time tracking reports
  • Things — a way to get your Things to-do lists up and running
  • AppFigures 1 — a conduit for displaying your AppStore sales data
  • AppFigures 2 — another simple PHP conduit for AppStore sales data
  • BitBucket Issues — track open issues in Git/Mercurial hosted source

(And you can always add a new Do-It-Yourself widget and point it to always-running Mario.)

さらにファンタスティックな Web サービスが Status Board でネイティブに利用可能になるようです。詳しくは後日お知らせします!

また、オフィシャルではありませんが 以下のまとめサイトもご紹介します: Pinboard, StatusBoardWidgets.comStatusBoardApp.info.

最後に、私たちは Status Board が実際に活躍している写真が大好きです!こちらはバイクメーカー Ducati のディーラー:

BHmy3FyCIAA8FAj.jpg-large

あなたのセットアップを @panic や @panicjapan を付けてツイートしたりメールでお知らせください!

また日本のサービスに対応したウィジェットに期待しています!

[原文]

Posted at 3:53 pm 海外の Status Board マニア達! はコメントを受け付けていません。

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 はコメントを受け付けていません。

From the desk of Cabel
Portland, Oregon 97205

The Transmit Model

ある日、私は Panic 日本オフィスの 3D アイコンマスターことケンイチからのメールを受信しました。

“HDRI マッピングと + システムライトソースを使った新しいライティング、がんばってます。このシステム、良いんだけどアイコンではうまくいかない時があって厄介で、もう少し勉強が必要そうです。”

彼は3枚の画像を送ってきました。見たことの無いであろう角度からの Transmit トラックをお楽しみください!

Transmit トラックトイ、作ってみたい..かも…


Posted at 4:01 pm 1 Comment