Chrome Life

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

Facebookアプリ「Paper」を先取り!加速度センサーによる写真のチルト機能を実現するphotoTilt.js

先日、Facebookの新しいアプリ「Paper」が米国でリリースされました。(日本ではまだですが)

「Paper」のプレビュー動画も公開されています。

[vimeo]http://vimeo.com/85421325[/vimeo]

その中でも新しいジェスチャーのUXは斬新なものです。

今までスマートフォンなどの小さいディスプレイで写真を閲覧する場合、ピンチオープン(2本の指を使ってズームインする)やピンチクローズ(2本の指を使ってズームアウトする)のジェスチャーで拡大・縮小して写真を確認していました。

しかし、どちらのジャスチャーも2本の指を使うので、片手で操作することはできません。

「Paper」では、加速度センサーによって写真のチルト機能を実現するジャスチャーを搭載しています。

「Paper」のプレビュー動画内では下記のような使い方をしています。

これであれば、片手で左右に傾けるだけで、写真の隅々まで確認することができるので便利です。

このUIは単純だけど良いアイデアだと思います。そこで、これを実現してくれるJavaScriptのライブラリーがないか調べてみると、なんと見つかりました!

JavaScriptで加速度センサーによる写真のチルト機能を実現する「photoTilt.js」です。

Facebookの「Paper」からインスパイアして作られたようで、GitHubにソースが公開されています。

実際にデモが用意されていたので、iPad miniで試してみました。(もちろんiPhoneでも動作しました)

本体を傾けるだけで写真のチルト機能が実現できています。

デモのソースを確認すると、下記のように画像ファイルを指定するだけなので簡単に使えそうです

<script src="photoTilt.js"></script>
<script>
    (function() {
        var photoTilt = new PhotoTilt({
            url:'http://farm5.staticflickr.com/4016/4251578904_f13592585c_b.jpg',
            lowResUrl: 'http://farm5.staticflickr.com/4016/4251578904_f13592585c_m.jpg'
        });
    })();
</script>

photoTilt.js」を使えば、簡単にこのようなチルト機能が組み込めると思います。

是非、試してみてください。

それでは、また!

Googleドライブ内のZipファイルを直接解凍できるChromeアプリ「Zip Extractor」

最近では、Googleドライブや、Dropbox、SkyDriveなどクラウド上のストレージにファイルを保管している人も多くなってきました。

その中でもGoogleドライブは、Googleのサービスということもあり利用している人も多いと思います。

Gmailと連携しているので、添付ファイルをGoogleドライブ上に保管しておけば、Microsoft OfficeファイルやPDFなど様々なファイルをプレビューして確認できるので便利です。

しかし、メールでのやりとりでは圧縮されたZipファイルが添付されることも多いのですが、Googleドライブのビューアーでは圧縮ファイル内のファイルをプレビューすることはできるのですが、実際にファイルを解凍することまではできません。

そこで今回ご紹介するのが、Googleドライブ内のZipファイルを直接解凍できるChromeアプリ「Zip Extractor」です。

Zip Extractor」を使えば、ローカルを経由せずに圧縮ファイルをGoogleドライブ上に解凍することができます。

事前に「Zip Extractor」をインストールしてアプリを起動させて、Googleドライブとの認証を行う必要があります。

Googleドライブ上にあるZipファイルを選択すると、フッター部分に「開く」ボタンがあるので、その横の三角をクリックします。 接続済みアプリに、「Zip Extractor」が表示されるので選択します。

圧縮されているフォルダー、ファイル構造が表示されるので、どのファイルを解凍するか選択します。 デフォルトで全てのファイルが解凍できるようにチェックされています。

「Change destination folder」ボタンをクリックすると、解凍先フォルダを変更することができます。 デフォルトでは、Zipファイルが保存されているフォルダに解凍されます。

「Extract」ボタンをクリックすると、解凍が始まります。 さすがに、クラウド上で解凍処理を行っているので少し遅いです。

解凍が完了すると、「View extracted files」ボタンをクリックして解凍後のファイルを確認できます。

わざわざ、Googleドライブ上に直接解凍しなくてもローカルにダウンロードしてから解凍すればよいのでは?と思うかもしれませんが、Chromebookを使う場合はそうはいきません。

Chromebookの場合は、ローカルでの処理が基本的にはできませんので、クラウド上で完結しなくてはいけません。

そういったシーンでは、「Zip Extractor」のようなGoogleドライブと連携してクラウド上でファイルを操作するようなアプリやサービスが必要になってきます。

今後は、ChromebookをターゲットにしたChromeアプリがますます増えてくるかもしれませんね。

ちなみに現時点では、パスワード付きのZipファイルには対応していないようです。この辺は今後に期待ですね。

是非、チェックしてみてください。

それでは、また!!

ソースコードからゴージャスなスナップショットが作れるChromeアプリ「Marmoset」

開発者の方は、よくブログなどでソースコードを貼り付けて記事を書くことも多いと思います。

しかし、ソースコードがメインの記事だとどうしても画像が無いそっけない記事になってしまうため、FacebookGoogle+でシェアされた時に目立ちにくくなってしまいます。

そこで今回ご紹介するのが、ソースコードからゴージャスなスナップショットが作れるChromeアプリ「Marmoset」です。

Marmoset」を使えば、自分のソースコードから下記のような立体的でゴージャスなスナップショットを生成することができます。

「Marmoset」はChromeアプリとして提供されています。起動すると、左にソースコード、右側にスナップショットが表示されます。

コードを貼り付けてテーマや、言語を選択します。

スナップショットのエリアをドラッグすると角度が変更でき、ホイール操作で拡大・縮小が行えます。

調整が完了したら、Save asでPNGファイルに出力します。詳しい使い方は動画を見て下さい。


Marmoset Demo

Marmoset」は、Web GLを利用して作られていて高速に立体的なスナップショットを出力できます。

Marmoset自体のソースコードも公開されているようなので、興味がある方はチェックしてみてください。

それでは、また!

待望のiGoogle代替サービスが登場!クールで高度なカスタマイズが可能なスタートページ「iChrome」

昨年の11月にグーグルが提供していたiGoogleのサービスが終了しました。

スタートページとして利用していた人も多く、終了後は類似サービスであるigHomeMy YahooNetvibesに移行するか悩んだと思います。

しかし、どれも一長一短でiGoogleの代替とまではいかず、

今ではスタートページを使っていない人が多い

と思います。

そんな方にオススメしたいのが、iGoogleの代替を目指して作られたクールで高度なカスタマイズが可能なスタートページ「iChrome」です。

iChrome」は、Chromeのエクステンションとして提供されています。

現在のGoogleのデザインやインターフェースを意識して作られているので、Googleが提供しているのではないかと見間違えるほどクールな仕上がりになっています。

26種類のHDテーマ、17種類のウィジェット、複数タブ機能、音声検索の対応などスタートページとして十分な機能が備わっています。

エクステンションをインストールすると、使用するウィジェットの選択を行います。(ウィジェットはあとで自由に追加することが可能です。)

上部に検索ボックスと設定メニューが並び、デフォルトではウィジェットが3列で表示されます。

ここで注意なのですが、インストールして画面が表示された後にブックマークに登録しておいてください。iChromeは自動でタブページにならないようなのでChromeの設定でURLを指定してホーム画面に自分で設定する必要があります。(ここは改善してほしいところですね)

右上のバンドルをつまんでドラッグするとウィジェットを移動できます。Removeの場所にドラッグするとウィジェットを削除することができます。

右上の設定アイコンをクリックしてウィジェット毎の設定を行います。

新しいウィジェットをインストールすることもできます。ウィジェット一覧からウィジェットを選択します。

iChromeが提供しているウィジェット

  • 天気:現在の天気と、次の4日間予報を表示。(日本の天気が間違っている気がする^^;)
  • 時刻と日付:現在の日付と時刻を表示。(タイムゾーンの切替は可能)
  • 解析: Google Analyticsのプロファイルを表示し、さまざまなメトリックを表示。
  • ニュース:カテゴリとエディションによって現在のトップニュースを表示。(日本のニュースは未対応)
  • ウォルフラムAlpha: 何に使うのか不明??
  • GmailGmailの未読メール数を表示。
  • iframeが:インラインフレーム内で選択したウェブページを表示。
  • RSSRSSまたはAtomフィードの表示。
  • トラフィック:自宅や職場までの経路時間を表示。(日本は未対応?)
  • カレンダー:Googleカレンダーの直近イベントを表示。
  • アプリ:現在インストールされているGoogle Chromeのアプリケーションを表示。
  • トップサイト:あなたが最も訪問するトップサイトを表示。
  • メモ帳:簡単な編集可能なノートを挿入。
  • 株:任意の銘柄記号を表示。
  • スポーツ:スポーツのスコア、選択したリーグのゲーム情報。(日本は未対応)
  • ブックマーク:リンク集を表示。
  • TO- DO :To Doリストを表。

ウィジェットの説明が表示されるので、サイズのエリアをドラッグするとウィジェットを配置できます。

複数のタブに分けてウィジェットを管理することもできます。

共通設定では、検索時のURLや音声検索の有効・無効などの設定が行えます。

ビジュアルの設定では、ウィジェットを配置するレイアウトを切り替えられます。

テーマも26種類の中から選択することができます。(おすすめは、Nexusですw)

タブ毎にレイアウトやテーマも変更できます。

iGoogleが終了してスタートページの導入を諦めていた人は、是非、「iChrome」を試してみてください。

iFrameのウィジェットも設置できるので、自分の好きなスタートページに仕上げられると思いますよ!

アメリカでは、Chromebookのシェアが急上昇してラップトップ分野の21%を占めるようになりました。東芝も参入するというニュースがあり、今年はChromebookがさらに活気づく可能性があります。

iChrome」のような便利なChromeエクステンションもさらに増えてくるのではないでしょうか。

ブラウザだけで何でもできる時代が、もうすぐそこまで近づいてきましたね。

ソースコードをブログで公開している方へ】 ソースコードがメインの記事だとどうしても画像が無いそっけない記事になってしまうため、FacebookGoogle+でシェアされた時に目立ちにくくなってしまいます。そんな時は、ソースコードからゴージャスなスナップショットが作れるChromeアプリ「Marmoset」が便利です。 ソースコードからゴージャスなスナップショットが作れるChromeアプリ「Marmoset」

それでは、また!

一日のやるべき事に集中できる!クールなタスク管理ダッシュボード「Momentum」

なかなか仕事が思うどおりに進まない。やるべきタスクが消化できずに溜まっていく一方で困っている方も多いと思います。

そんな人の多くは、

やるべき事の整理がうまくできていない!

ことがほとんどです。

筆者は昔、タスク管理やGTDを少しかじっていた時期がありました。その時のブログはこちら

誰もがタスク管理でハマってしまうのが、あれもこれも一気に片付けてしまおうと意気込んでしまい、結果的にどれも達成できずに終わってしまうパターンです。

筆者もこのような状況に陥ったことがあるので、分かるのですが。忙しい時ほど、空回りしてなかなか前に進まないものです。

そこでオススメしたいのが、

一日の中で最もフォーカス(注目)してやるべき仕事を1つだけ決めて進める

という方法です。

もちろん、複数の仕事を掛け持ちでこなしている人もたくさんいると思いますが、その中でも優先度が高く重要なものを1つだけ絞ってゴールを決めます。

そうすることで頭の中が整理されて、実は今日しなくてもよい仕事や人に任せれば良い仕事が見えてきます。

ゴールを達成する上での細かなタスクをToDoリストに起こしていき、それを順番にこなしていくことに集中するのです。

もちろん、それが終われば次のゴールを決めて先に進めていけばよいのですが、重要なのが

「少なくとも1つはクリアーする」

ということです。

この仕事の進め方を補助してくれる素晴らしいChromeのエクステンションがあるのでご紹介したいと思います。

一日のやるべき事に集中できる!クールなタスク管理ダッシュボード「Momentum」です。

ブラウザを開くと、今日最もフォーカスしてやるべき仕事が目に飛び込んでくるので、何をするんだっけ?と考えることもなくなります。

見た目もクールで、現在時刻や、天気までもが表示されています。

Momentum」をインストールすると、最初にあなたの名前を聞いてきますので、入力してください。

その後に、今日最もフォーカスしてやるべき仕事を入力します。

こうすることで、あなたが今日何をすべきかが、ブラウザのタブを開くたびに提示されるようになります。

次に、ToDoリストを設定していきます。

あとは、仕事を進めてToDoを完了させていくだけです。画面上にいくつのToDoを完了できているかのカウントも表示されます。

翌日になると、その日にフォーカスしてやるべき仕事を入力することになるので、必然的にやるべきことを決めるという流れになります。 この時に、背景も変わるので気分もリフレッシュされて挑むことができます。

もちろん、前日に積み残したToDoはそのまま繰り越して表示されています。

高機能なToDo管理のアプリもありますが、使いこなせなければ意味がありません。

Momentum」を使えば、重要な仕事にフォーカスできるので、仕事が空回りせずに、地に足の着いた進め方ができます。

機能的にシンプルなので、複雑な使い方を覚える必要もありません。

重要なことは、タスクを管理することではなく、やるべき事を消化することです!

まさしくMomentumの意味である「推進力」になってくれるツールだと思いますよ。

タスク管理がうまくいかない人は、是非インストールして試してみて下さい。

それでは、また!!

iOS7ホーム画面をChromeのタブページに再現できる「IOS 7 New Tab Page」

iPhoneiPadがiOS7になって少し時間が経ちましたが、もうフラットデザインに慣れましたでしょうか?

筆者は違和感がなく使っています。設定画面やメニューなどでボタンなのかラベルなのか判断に苦しむところもありますが、慣れれば極端に使いにくいということもないように感じます。

むしろ、フラットデザインの方が透明感もあり、スッキリしているのでデザイン的には好きです。

そこで今回は、iOS7のホーム画面をChromeの新しいタブページで再現できるChromeエクステンションがリリースされていたのでご紹介したいと思います。

IOS 7 New Tab Page」をインストールすると、iOS7のホーム画面風のフラットデザインでWebアプリケーションのアイコンが表示されます。

ちなみに時計は現在時刻を表示してくれていますが、電波状態やバッテリー状態は飾りのようですw

デフォルトでYahooやAmazonTwitter、Instragramなどのアイコンが表示され、クリックするとそのサイトが開きます。

アイコンをクリックしたままにしておくとiOSのようにアイコンが揺れた状態になるので、ドラッグして配置を変更したり、アイコンを削除することができます。ダブルクリックすると確定します。

Dockの中にあるSettingsのアイコンをクリックすると、ホーム画面の背景画像や、アプリケーションの追加を行うことができます。設定したアプリケーションのリストをエクスポートしたりインポートすることもできるようです。(筆者の環境だと少しデザインが崩れて表示されてしまいました)

Dockの中にあるApp Storeのアイコンをクリックすると、インストール可能なWebアプリケーションの一覧が表示されます。ここからインストールするとクリック一発でホーム画面に追加されます。

Chromeの新しいタブで開く画面はもっさりしているので、iPhoneユーザーの方は「IOS 7 New Tab Page」の方が好きかもしれませんね。


How to bring IOS 7 to your Chrome new tab page - IOS 7 New Tab

是非、インストールして試してみて下さい。

それでは、また!!

Chrome Developer Toolsのテーマを開発者好みに切り替える裏ワザ

Chromeをメインで使っている開発者の方は、Developer Toolsを開く機会も多いと思います。

一昔前はFirefoxでFirebugsを使っていた人も、Chromeのバージョンが上がったことによりDeveloper Toolsでも同等のことができるようになりました。

Chrome Developer Toolsを使えば、WebインスペクターでDOMツリーの確認やCSSの微調整、JavaScriptのソースデバッグなどができるので非常に便利です。

しかし、開発者であれば、使えば使いこなすほど自分好みのスタイルに合わせたくなるものです。

特にソースを見る時のカラーリングは、開発スピードにも影響するほどです。

できれば、Chrome Developer Toolsのスタイルも普段使っているエディタと同じスタイルに変更したいですよね。

そこで今回は、Developer Toolsのテーマを変更する裏ワザをご紹介したいと思います。

Chromeには、ユーザ用のスタイルシートを用意することで、ブラウザの見た目をカスタマイズする機能が予め用意されています。

下記の場所にカスタムスタイルシートが格納されています(スタイルシートは、OSによって格納場所が違います。)

Mac~/Library/Application Support/Google/Chrome/Default/User StyleSheets/Custom.css

WindowsC:/Users/YourUsername/AppData/Local/Google/Chrome/User Data/Default/User StyleSheets/Custom.css

Ubuntu~/.config/chromium/Default/User StyleSheets/Custom.css

初期状態では、空のスタイルシートファイルが用意されています。 (プロファイルを複数使い分けている場合は、Defaultの部分が各プロファイルフォルダになります)

スタイルシートファイルを編集する前に、Chromeを終了してください。 (直接ファイルをエディタで編集する場合は終了しなくても問題ありません。ファイルを上書きコピーする場合は終了しておく必要があります)

自分でスタイルシートをいじっても良いのですが、既に様々なテーマのスタイルシートが配布されているので、ダウンロードして利用してみましょう。

MNML Theme

Monokai Dark

Tomorrow Theme

IR_Black Theme

Solarized Dark

Ruby Blue

Expresso

Inversion

Dark Theme

Dark Dev

WebLight Theme

スタイルシートのファイルをコピーしてから、Chromeを起動するとDeveloper Toolsのスタイルが変わります。

これで、Chromeでソースを確認するのも違和感なく使えるようになりますねw

それでは、また!