Chrome Life

Chrome OS, Chrome Web Store などChrome関連の話題、Google+などの新しいGoogleサービス、HTML5, JavaScript, CSS3によるWebアプリ開発、ChromeBook、MacBook Air、クラウドの活用方法などを紹介

Web開発者のための現場で使える10個のウェブアプリまとめ

先日、Chrome OS搭載PC「Chromebook」が、海外で発売されましたね。Amazon.comにあったので予約しようとしたら日本には発送できませんとなってしましました。

Chromebookの日本での発売が待ち遠しいですね。

それまでにChromeの環境を整えておき、普段からChromeだけである程度のやりたいことができるようになっておけば、Chromebookを起動したとたんすぐに自分の環境が使えるようになるはずです。

そこで今回は、筆者がWeb開発者として普段使っているChromeウェブアプリの中から、皆さんの現場で使えそうなもの10個を厳選してご紹介したいと思います。

今回ご紹介するウェブアプリのほとんどは、FirefoxSafariなど他のブラウザでも使えますので、是非試してみてください。

(オフィス系は、定番のGoogle DocsGmailなどで十分だと思うので、それ以外の現場で使えるものだけをピックアップしています)

Simplenote(メモ帳)

Simplenote」は、素早く書けて整理がしやすいメモ帳アプリです。

利用するには、Simplenoteのアカウントが必要です。 左側にメモの一覧、右側が編集エリアとなっていて、編集したメモは入力中でも自動的に保存されています。

作成したメモはクラウド上(Simplenote)に保存されるので、他のPCでも同じメモにアクセスできます。 さらに、iPhoneiPad用の無料アプリも用意されているので外出先からでもアクセスできて便利です。

保存したメモを間違って編集したとしても、履歴が残っているので元に戻すことができます。 メモの検索や、タグを付けて管理したり、ピンを立てて常にリストの上に表示させることもできます。

最近のバージョンアップで、Markdownのプレビューがサポートされました。 さらに、メモを公開するためのURLの発行もできます。

有料のプレミアムアカウントを取得($19.99/年)すると、Dropboxとの同期や、RSSのフィードが配信できます。

APIも用意されているので、開発者がSimplenoteのメモにアクセスするアプリケーションを自分で作れるのはうれしいですね。


Simplenote

Chrome以外のブラウザをお使いの方は、
下記のリンクからウェブアプリにアクセスできます。
Simplenote

Calculator(電卓)

Calculator」は、オフラインでも使えて計算履歴が残るキー操作メインの電卓アプリです。

電卓アプリとしては珍しく、数字のボタンがいつもありません。 計算式をキーボードで入力するシンプルなインターフェースの電卓です。

その代わり、キーボードだけであらゆる計算が行えます。 計算式に関数を入力すれば関数電卓としても使えます。関数は、sin、cos以外にも様々なものが用意されています。

「Calculator」がすごいのは、関数を自分でカスタマイズできる部分です。 構文はJavaScriptなので誰でも簡単に増やせるので、よく使う計算式を登録しておくと便利です。

他にもコンバーターがついているので、単位変換にも困りません。

計算式は、アドレスバーを使って計算もできるようになります。 calc[TABキー]の後に計算式を入力するだけで、サクッと計算できるのはうれしいですね。

Calculatorは、Chrome専用アプリなので他のブラウザをお使いの方は利用できません。
下記の電卓アプリであればChrome以外のブラウザでもご利用いただけます。
scientific-calculator

Listhings(付箋)

Listhings」は、ボードをリアルタイム共有することができる付箋アプリです。

利用するには、Listhingsのアカウントが必要です。 起動すると、コルクボードに付箋が張りつけられたイメージの画面が表示されます。

付箋は、ボードをダブルクリックして増やすことができ、ドラッグアンドドロップで好きな場所に移動できます。 付箋の色は10色から選べます。

付箋が多くなった場合は、キーワード検索で付箋を絞り込むことができます。

ボードは複数作ることができるので、用途別に付箋を管理しやすくなっています。

なんといっても、このアプリのすごいところは、ボードを友人と共有することができる点です。 付箋を編集したり移動した場合でも、リアルタイムに共有相手に反映されます

このアプリを大型ディスプレイなどに表示しておけば、みんなで共有したい情報やタスクなどが簡単に見える化できるようになります。「タスクかんばん」としても使えるんじゃないかと思います。

Chrome以外のブラウザをお使いの方は、
下記のリンクからウェブアプリにアクセスできます。
Listhings

Timer Tab(タイマー)

Timer Tab」は、音とポップアップで通知してくれるシンプルなタイマーアプリです。

時間(時、分、秒)を入力してスタートボタンでタイマーが開始されます。

残り時間はタブに表示されているので、他の作業中でも残り時間が分かって便利です。

タイムアップしたらポップアップとアラーム音(鐘の音)で通知してくれます。 アラーム音は、Youtubeのムービーを再生してだけなので、再生するムービーを変更して別の音に変えることもできます。

他にも指定時間にアラームを鳴らしたり、ストップウォッチのように時間を計ることもできます。

仕事中に「あと何分で仕上げなければいけない!」といったシーンは多いので、Timer Tabで計測しておくと仕事に集中できますね。

Chrome以外のブラウザをお使いの方は、
下記のリンクからウェブアプリにアクセスできます。
Timer Tab

Wunderlist(ToDoリスト)

Wunderlist」は、iPhoneiPadAndroidとも同期できるTodoアプリです。

利用するには、Wunderlistのアカウントが必要です。 日本語メニューが用意されているので、Setting>Languageで日本語を選んでおきます。

使い方は普通のTodoアプリと同じです。タスクを入力していくとInboxに追加されていきます。 タスクは、ドラッグアンドドロップで優先度を変更することもでき、スターを付けたり、ノートを設定しておくこともできます。

タスクに期日を設定しておくと、「今日」「明日」「今後7日間」「後で」「期限指定なし」でフィルターすることができます。

タスクを管理するためのリストも複数作れるので、用途別にタスクを分けておくこともできます。 リストは、共有設定ができます。友人と同じタスクを簡単に共有できるので便利です。

さらに、タスクリストを印刷したりメールで送れるので、このアプリを利用していない人に見てもらう際にも使えます。

Wunderlistが、すごいのはiPhoneiPadAndroidのアプリが無料で用意されていることです。 外出先からでもタスクをチェックしたり編集ができるので、これ1つあればTodo管理に困ることがなくなります。

こういったアプリは毎日使うアプリなので、Wunderlistのように見た目がクールでシンプルなものが良いですね。


Wunderlist Demo

Chrome以外のブラウザをお使いの方は、
下記のリンクからウェブアプリにアクセスできます。
Wunderlist

SourceKit(ソースコードエディタ)

SourceKit」は、Dropboxと連携したソースコードエディタアプリです。

SourceKitを利用するには、Dropboxのアカウントが必要です。 (現状では、Dropboxとの認証の際に、Dropboxの表示言語をEnglishにしておかないとうまく接続できないようです)

Dropboxのフォルダ構造がツリー表示されるので、ファイルを選びます。 編集エリアは、様々な言語に対応したシンタックスカラーリングがされていてソースコードが見やすくなっています。

対応している言語は、C/C++C#、CofeeScript、CSS、HTML、JavaScriptPerlPHPPythonRuby、PlainText、XMLです。 カラーリングのテーマ変更や、行番号表示、折り返し文字数の変更などソースコードエディタに必要な機能もそろっています。

ファイルは、Dropboxに格納しているのでバージョン管理も自動的にされるので、間違って編集してしまっても問題ありません。

Eclipseのような統合開発環境まではいきませんが、ちょっとしたソース編集と共有であれば十分に使えるアプリです。

以前の記事で、SourceKitを使ったプロトタイピングの方法をまとめていますので、ご参考までに。

SourceKitは、Chrome専用アプリなので他のブラウザをお使いの方は利用できません。
ソースコードエディタではありませんが、Dropboxのファイルが編集できる下記のアプリであれば、Chrome以外のブラウザでもご利用いただけます。
TextDrop

Gantter(ガントチャート

Gantter」は、小さなプロジェクト管理に最適なMS Projectのインポート・エクスポートができるガントチャートアプリです。

登録したタスクをMS Projectのようなガントチャートで表示してくれます。 タスクは、期間や担当者、達成率などを登録していきます。

タスクのインデントや前提タスクの設定、リソースの配分、マイルストーンの設定なども行えます。 WBS番号も自動的に付加されます。

作成したガントチャートのプロジェクトデータは、XML形式のファイルでローカルに保存します。 Google Docsにこのデータを保存しておくこともできるので、ガントチャートの共有も可能です。

MS Project形式でのエクスポートやインポートにも対応しているので、既存のMS Projectで作成したプロジェクトファイルを別の環境で見る場合にでも利用できるので便利です。

ガントチャートといえば、印刷用途が多いと思います。 Gantterでは、印刷用のガントチャートをPDFとして出力することができます。 改ページもきっちりとしてくれるので配布資料としても使えます。

他にも、PNG形式やHTML形式で出力することも可能です。

大規模なプロジェクトでは難しいかもしれませんが、小さなプロジェクトを管理するのであれば十分使えるガントチャートアプリですよ。


Gantter

Chrome以外のブラウザをお使いの方は、
下記のリンクからウェブアプリにアクセスできます。
Gantter

Pixlr Editor(画像編集)

Pixlr Editor」は、Photoshopのようなレイヤーに分けて加工ができる画像編集アプリです。

Pixlr Editorは、ローカルにある画像やインターネット上の画像を読み込んで加工することができます。

画像ファイルは、JPEGPNGBMPTIFF、PXD(レイヤー化した専用形式)形式でローカルに保存することができます。 他にも保存先として、FlickrPicasaFacebookなどが選べるので、いつも使っている画像共有サービスへ簡単にアップロードできます。

画像の色調補正やコントラスト、トーンカーブの変更ができ、様々なフィルターをかけることもできます。 メニューも日本語になっていて、テキストツールでも日本語のフォントが使えるので、Photoshopの代用として十分使えますよ。

Chrome以外のブラウザをお使いの方は、
下記のリンクからウェブアプリにアクセスできます。
Pixlr Editor

Aviary Vector Editor(ベクターツール)

Aviary Vector Editor」は、Illustratorのようなベクター形式のドローツールです。

Illustratorのようにパスを自由に変形させてイメージを作成することができます。

レイヤーを作成して、透明度を変更したり、ペンの太さや色、塗りつぶしのグラデーションなどの細かな設定ができます。 テキストの日本語フォントも問題なく使えるので、Illustratorの代替としても十分使えるアプリだと思います。

作成した画像は、ローカルに専用のベクター形式のファイルとして保存できます。 Aviaryのアカウントを作成しておけば、オンライン上にデータを保存できます。

他にもSVGやPDF、EPS、Bitmapにエクスポートすることもできます

Chrome以外のブラウザをお使いの方は、
下記のリンクからウェブアプリにアクセスできます。
Aviary Vector Editor

Cacoo(作図ツール)

Cacoo」は、ネットワーク図やサイトマップワイヤーフレームフローチャートなどが作れるVisioのような作図ツールです。

Visioのように豊富なステンシルが用意されているので、様々なビジネスシーンで使う図を簡単に作成することができます。

図を作る上でかかせない、オブジェクトの整列やグルーピング、コネクターの形状など細かな調整が行えます。

作成した図を公開したり、友人と図を共有して、リアルタイムに共同編集が行えます

Cacooのアカウントを登録しなくても、GoogleTwitterFacebookのアカウントを持っていればログインできるのですぐに利用できますね。 有料プランに申し込むとエクスポートできるファイル形式が増えたり、図の編集履歴が表示できるようになります。

無料プランでも十分使えるので、提案書や設計書を作る人にとっては役立つアプリだと思います。


Cacoo Japanese

Chrome以外のブラウザをお使いの方は、
下記のリンクからウェブアプリにアクセスできます。
Cacoo

まとめ

いかがでしたでしょうか?

筆者も最初使い始めた時には「ウェブアプリでここまでできるのか?!」と驚かされました。

まだまだ、クライアントアプリでしか実現できないことも多いのですが、使い方を限定すればある程度の作業はウェブアプリだけでできるようになってきたと思います。

Chromebookが普及してくれば、Chromeウェブストアのラインナップももっと増えてくるはずです。 ブラウザさえあれば、何でもできる時代はそう遠くないのかもしれませんね。

Chromeのエクステンションについてのまとめ記事もありますので、こちらも参考にしてみてください。

HTML5で新しくサイトを作る人にオススメ】 「HTML KickStart」を使えば、ベースとなる要素が整備されているので、スクラッチでサイトを素早く作ることができますよ。是非チェックしてみてください。 人と違うデザインのサイトをスクラッチで作るならHTML KickStartをベースにするといいですよ!

【用紙ピッタリに印刷する方法】 ブラウザで印刷するには、この方法が一番です。まだ知らない人はチェックしておいてくださいね。 新入社員が知っておくべきホームページを崩さず綺麗に印刷する裏ワザ