Bitbucket、スクリーン幅が可変に

fluid-width-bitbucket

スクリーン上により多くのコードが表示されればされるほど仕事はしやすくなるものです。私たちがこれまで採用していたページ横幅を固定する方式をやめて、スクリーンの幅をブラウザーで表示できる最大限まで使えるように Bitbucket のすべてのページを再デザインしたのはこのためです。

できるだけたくさんのコードを表示

side-by-side-diff

集中して仕事をしているときに、画面全体を見るための横方向のスクロール操作が必要になると注意力が散漫になってしまうものです。Bitbucket の広くなった新画面では、ソースコードの閲覧、コードレビューの実施、ファイルの編集などが簡単になりました。その他、未終了のプルリクエストリストなどのページにおいても、読みやすさが大幅に改善されました。

サイドバー方式のナビゲーション

スクロール操作を減らすために、これまでページの上部に置いていたナビゲーションリンクとアクションリンクを、左側のバー (非表示にすることも可) に移しました。Bitbucket のキーボードショートカットを使用して、"[" を押すたびにサイドバーの表示・非表示を切り替えることができます。

sidebar

表示状態にあるか非表示状態にあるかにかかわらず、バーはリポジトリ表示領域の左側に固定されていて、プルリクエストなどよく使用するアクションをすばやく実行できます。たとえ diff 画面のずっと下の方までスクロールしていたとしてもそれが可能なのです。

実に簡単に使える README

README はプロジェクトの質を高め、新たにチームに参加した開発者がすぐに仕事を始められるようにするために有用なものです。そのため私たちは、これについても工夫が必要だと考えました。

create-a-readme

プロジェクトに README が作成されていない場合でも、実に簡単に作ることができます。Bitbucket が持つオンラインのコード編集機能を使用し、インストールや設定に関する説明、連絡先情報、ライセンス情報、謝辞など、必要リポジトリ項目のガイドが記載されたテンプレートを利用するだけです。

online-editing

リポジトリに既に README が作成されている場合は、オンラインエディターへのダイレクトリンクが設けられており、プロジェクト情報を最新の状態に保つ作業が簡単にできます。README の記述にはデフォルトでは Markdown が使用されます。ただし、ASCII や reStructured で書かれたファイルを使用することもできます。

工夫されたダッシュボード

私たちの多くは、日々大規模化するリポジトリを抱え、作業箇所を見つけることを苦痛に感じていることでしょう。今回デザインを一新したダッシュボードではリポジトリが見やすくなり、最近アクティブになったリポジトリが一番上に表示されます。また、以前と同様のクイック検索機能とフィルター機能も備えており自分が所有するリポジトリや注目するリポジトリを簡単に探すことができます。

dashboard

ダッシュボードへの迅速なアクセスを可能にするためにグローバルヘッダーにショートカットリンクを設けており、Bitbucket のどのページからでもジャンプすることができます。また、アクティビティフィードは右側に移し、チームが作業中のすべてのリポジトリに対して起きていることが概観できるようになっています。

Git を無料で試してみよう

Bitbucket を用いてコードをホストすることによって開発者間の連携強化を図っているチームは増加の一途にあります。その一員に加わってみましょう。5 ユーザーまで無料でプライベートリポジトリを無制限に利用できます。自社のサーバーで Git を利用する場合は、安全、高速でエンタープライズ対応の Git 向けオンプレミス型ソースコード管理ツール Stash を用意しています

Screen Shot 2014-05-22 at 10.24.58 AM

あるいは

Twitter でこの話題をつぶやく


*本ブログは Bitbucket Blog の翻訳です。本文中の日時などは投稿当時のものですのでご了承ください。
*原文 : 2014 年 5 月 20 日 "Introducing the new fluid width Bitbucket"