Posted:
Addy Osmani は Twitter のフォロワー数 10 万人を誇るフロントエンド界隈の有名人で、 Google の Staff Engineer です。JavaScript デザインパターンの執筆者としてご存知の方も多いかもしれません。TodoMVCWeb Starter KitYeomanMaterial Design Lite といったオープンソースプロジェクトに携わってきました。そんな彼は、数多くの開発に役立つツールを使い分けることでも有名で、Totally Tooling Tips というビデオシリーズも公開しています。

今回はそんな彼が普段使っているツール類についてインタビューしましたのでご紹介します。ぜひみなさんの開発環境の参考にして下さい。

OS / Hardware は何を使っていますか?

El Capitan の Mac をメインで使ってます。最近は、週の半分 Windows も使っています。Microsoft Surface Pro 3 の Windows 10 です。
ブラウザはすべてのチャンネルの Chrome、Firefox の Stable と Nightly、Opera も Stable と Next、Safari と WebKit Nightly を使っています。Mac の VM には Windows 7、8.1、10 を入れて、なるべく多くのバージョンの IE と Edge を試せるようにしています。

Mac で使っているツール類を教えてもらえますか?

Alfred

Alfred は欲しい物をすぐに探せるプロダクティビティツールです。ショートカットを設定することでアプリケーションのコントロールができたりします。プラグインに巨大なエコシステムがあって、例えば Zeno Rocha のプロジェクト alfred-workflows で便利なプラグインを多数ダウンロードすることができます。
SublimeText のプラグインはもちろん、Package Managers では、npm、bower、gulp などのパッケージやプラグイン、CanIUse など、手先の操作でいろんなものを検索して利用することができます。他にも Colors で色のプレビューをしたり、Dashドキュメントを検索したりといったこともできます。

Spotlight / Flashlight

Alfred の代替として最近注目しているのが Spotlight です。Spotlight は Mac 標準の検索ツールで、Yosemite で Apple が大幅な機能追加をしたことで、Alfred の基本的な機能と同程度であれば、これで十分使えます。Flashlight というアプリを使えば、Spotlight にプラグインアーキテクチャを持ち込むことができるので、ウェブサイト内を検索をしたり、ノートを取ったり、リマインダーを設定したりといったことが Spotlight 内でできるようになります。

BetterTouchTool

BetterTouchTool は Mac 用のトラックパッドで、ジェスチャーをカスタマイズできるツールです。例えば 2 本指で横にスワイプするジェスチャーで Chrome のような特定のアプリを起動するといった用途に使うことができます。Yosemite のデフォルト設定よりもパワフルなのが特徴です。

Spectacle

最近はウィンドウ管理も重要になってきています。小さな画面を有効に活用するためには、画面をうまく分けたいですよね。そんな時に使えるのが Spectacle です。キーボードショートカットと組み合わせて使うことが多いのですが、みんなが使いたいようなオプションは大体揃っています。画面の左右半分に表示したいとか、そんな場面に便利です。

Sip

私はデザインすることもあるのですが、アプリやデモ、プレゼンテーションなどで適切なカラーパレットを使う必要があります。システムワイドで使えるカラーパレットツールとして使っているのが Sip です。最後に使った色のセットを覚えておいてくれるところが便利です。また、設定項目がたくさんあって、どんな色の組み合わせをデフォルトにしたいのかを選ぶことができます。今となっては Chrome 本体の DevTools が Color Picker 機能を提供しているので、以前と比べて使う機会は減りましたが、それでも便利なツールです。

Sketch + Framer.js

プロトタイピングとデザインをするのに使っているのは、Bohemian Coding の Sketch です。複数アートボード、ベクター、SVG 出力、グリッドなどのサポートが充実しているため、Framer.js と合わせて愛用しています。Framer.js は CoffeeScript に似たハイレベル言語を使ってモーションプロトタイプが作れるツールです。実はこれ、Google のデザイナーの間でもすごく人気で、広く使われています。例えばこの Material Design Contacts のサンプルアプリを見てみると、ただのプロトタイプにも関わらず、ブラウザでスクロールの動作を試すことができます。Framer.js がコピーペーストできるコードを生成してくれるわけではありませんが、デザイナーはこれをデベロッパーに渡すことで、最終的なコードを書いてもらうことができます。

Dr.Cleaner

たくさんのアプリを立ち上げていると、メモリ不足が問題になることがあります。TrendMicro が提供している無料の Dr.Cleaner を使えば、メモリとディスクの使用量を最適化してくれます。

Mou

ブログポストを書く時、Markdown アプリの Mou を使っています。Mou はシンプルな UI で、片側にソース、もう片側にプレビューを表示します。コードのハイライト機能もあります。HTML、PDF へのエクスポートにも対応していて、Tumblr にもポストできます。私はこれでポストを Google Drive や Dropbox に保存しています。もちろん GitHub Flavored Markdown にも対応しています。

ImageOptim

開発者ならフル解像度の画像を受け取るケースが多いと思います。ビルドプロセスでデバイスに合わせた解像度の最適化ができるのがもちろん良いのですが、ちょっとだけ試したい場合もありますよね。そういった時に使うのが ImageOptim です。PNGOut や PNGCrush、OptiPNG など、最新のツールもサポートしています。

Chrome Extension は何を使っていますか?

SnappySnippet

SnappySnippet は DOM から直接 CSS や HTML を抜き出すことができる拡張機能です。例えばあるページにとても素敵なボタンがあって、それがどうやって作られているのか知りたいと思ったとします。そんな時にこれを使って DOM ノードを選択すると、再現するのに必要な CSS と HTML を抜き出してくれる、というわけです。また、JSBin のような別サーバーへの送信機能もサポートされています。

DOMListener

TodoMVC のテストに DOMListener が大活躍しています。これは DOM の変更点を監視、ブラウズ、フィルタすることができる拡張機能です。DevTools の Timeline  で変更点を監視するのによく似ていますが、DOMListener では同じことを DOM の変更に対して行うことができます。例えばシングルページアプリケーションで 新しい UI ピースを挿入したり、新しいビューを差し込んだりした場合、どんな DOM コンテントが追加されたのか、スタイルやテキストコンテントが追加されたのか、確認したり、フィルターすることもできます。これによりデバッグが非常に簡単になります。問題が発見できたら、DevTools に戻ってくる、というワークフローはとても便利です。

The Great Suspender

これはある意味私の生活を変えた拡張機能です。Chrome チームが消費メモリーの最適化に取り組んでいることはご存知と思います。作業は順調に進んでいるようですが、そうしている間にも、私のようにタブを大量に使う人間にとっては、これらのタブを消す必要があります。そこで役立つのが The Great Suspender です。
これはタブを一定時間後に自動的に一時停止することで、Chrome のメモリや GPU のフットプリントを削減してくれるツールです。例えば 50 個のタブが開いていたとしても、実際に同時に使うのは 2 〜 3 個です。この拡張機能はそういったタブを軽量のプレースホルダーページに置き換え、Chrome が表示する必要のないページを見せないことでメモリーの消費を抑えてくれるものです。そしてバッテリーにも優しい。使い続けたいタブに戻ると、リロードするリンクが表示され、その URL に戻ることができます。
この拡張機能に何より感謝しているのは、そういったタブに自分が滅多に戻らないということを教えてくれたことです。ページを開いても、実際に自分がそこに戻ることは非常に少ないということに気付かせてくれました。

Page Ruler

Page Ruler は Polymer チームの同僚がおすすめしてくれた拡張機能です。あるページを開いていて、何かのサイズを測りたい場合は、クリックしてエリアを選択するだけ。画面下部にバーが表示されて、幅や高さ、上下左右位置といった様々なサイズ情報を教えてくれます。もちろんガイドを表示するかも選ぶことができます。


全二回のインタビューの前編として、今回はツール編をお届けしました。後編は開発環境編として、エディタやプラグイン、シェルについてのインタビューをお届けします。


Posted by Eiji Kitamura - Developer Relations Team

Posted:
先日告知した Udacity のオンライン学習コンテンツを使った Study Jams プログラムは、インタラクティブな動画が好評ですが、コンテンツが英語です。今回のプログラムでは、初級から上級までの下記の 7 コースが日本語字幕付きになりました。

*Study Jams への参加はこちらから


初級コース

中級コース

上級コース

コースが英語だからと昨年のコース受講を諦めていた方は、ぜひ字幕付きコースに挑戦してみてください。


Takuo Suzuki - Developer Relations Team

Posted:
[この記事は、DoubleClick Publisher ブログの記事を紹介した Google Developers Blog の "Mobile Bootcamp Part IV: Effectively monetize your app" を元に翻訳・加筆したものです。詳しくは元記事をご覧ください。]

ユーザーは、プラットフォームやスクリーンの間を絶えず移動しています。現在、私たちのプラットフォーム上のクエリの半分以上はモバイル端末からで、モバイル ウェブとモバイル アプリの両方が使用されています。アプリの収益化とユーザー エクスペリエンスの向上は簡単には両立しませんが、必要不可欠です。

前回の記事では、ユーザーのために高品質なアプリを作成する方法に注目しました。今日は、Google のモバイル パブリッシャー ソリューション部門のトップである Mark Wolly によるアプリ収益化のためのアドバイスを取り上げます。今日の記事を読んで、効果的な収益化と優れたユーザー エクスペリエンスを上手に両立させる方法を見つけましょう。
  1. アプリの UX に配慮した広告を作成する
    広告をうまく配置すれば、ユーザー エクスペリエンスを犠牲にすることなく、確実に収入を得られます。アプリ内でのユーザー エンゲージメントの流れを確認して、たとえば記事閲覧アプリなら遷移画面など、流れを妨げない場所に広告を配置しましょう。広告の表示頻度や配置をいろいろと試してみることで、ユーザーにとって適切な場面で適切なエクスペリエンスを提供できるようになります。広告をインタラクティブ アプリのコンテンツと、ナビゲーション / メニュー ボタンの間に配置するのは避けましょう。

  2. アプリのコンテンツ構造に最適な広告フォーマットを選ぶ
    画面サイズが限られているなか、特に広告がアプリのルック アンド フィールとなじんでいないと、ユーザーの気が散ってしまいます。

    Native Ads を使用して、コンテンツと広告のルック アンド フィールに共通性をもたせるようにしましょう。Native Ads をモバイル アプリのコンテンツやビジュアル デザインに合うようフォーマットすれば、ユーザーが見てクリックする可能性が高くなります。eBay が最近、当社の Native Ads on DoubleClick を採用したところ、広告エンゲージメント率の平均が 3.6 倍になり、一部のキャンペーンではクリックスルー率が最大で 5% 向上しました。

    「Native Ads は、最高品質のモバイル プレースメントやモバイル クリエイティブをリセットする機会をもたらしてくれます。パブリッシャーの多くは、ダイレクト セールスのために独自フォーマットを構築済みですが、プログラマティック チャネルを経由した広告主へのリーチにまではまだ拡大していません」と Mark は確信しています。

  3. プログラマティック ダイレクト戦略を立てる
    プログラマティック ダイレクトは、上等な広告主から高品質なクリエイティブ フォーマットを得られるため、アプリは新たな広告収入を獲得でき、広告の運用もさらに簡単になります。Mark は、「多くのパブリッシャーは、優秀な広告主から高い CPM を集める良質のカスタム モバイル フォーマットを構築しています。そうしたパブリッシャーは、プログラマティック チャネルを通じてこうしたフォーマットを新しい広告主に提供することにより、同じ CPM とコントロールを維持しつつ、広告主へのリーチを大幅に拡大できます」と説明しています。

消費者のモバイル利用は抜本的に変化しており、消費者のモバイル エクスペリエンスにとってアプリが重要であることに議論の余地はありません。デスクトップ ユーザー数の増加率は 1% ですが、モバイル ユーザーは 41% という驚くべき増加率を示しています。

「モバイル ブートキャンプ」シリーズの記事では、アプリの発見力を高める、ユーザー エンゲージメントについて理解する、アプリ品質を最適化する、アプリを効率的に収益化する方法に焦点を当て、モバイル アプリを強化するための重要なステップを説明しています。



Posted by Eiji Kitamura - Developer Relations Team

Posted:
[この記事は Wesley Chun (@wescpy)、Google アプリ デベロッパー アドボケートによる Android Developers Blog の記事 "Google Drive: Uploading & downloading files plus the new v3 API redux" を元に翻訳・加筆したものです。詳しくは元記事をご覧ください。]

前回の記事でご紹介したとおり、Google Drive チームは API の最新バージョンのリリースを発表しました。この記事では、このリリースついてデベロッパー向けに詳しくご案内します。デベロッパー向けの動画シリーズ Launchpad Online の最新回では、API の最新バージョン(v3)について知っておくべきことだけでなく、最新バージョンと旧バージョン(v2)との関係についてもお話ししています。

この新しいエピソードは盛りだくさんの内容で、新しい API の紹介、API の設計についての Google Drive 担当エンジニアへのインタビュー、そして、すぐに使える実際のソースコードのウォークスルー(私の Launchpad Online ではウォークスルーを行うのはおなじみですね)をしています。今回は、 Google Drive にファイルのアップロードやダウンロードを実行するコマンドライン スクリプトを紹介しています。最初に v2 でお見せし、次に、v3 へ移行する方法をステップ バイ ステップで説明しています。さらに、アップロードの説明では、Google Apps フォーマットに変換するオプションも取り上げています。ダウンロードに関しては、PDF® などの代替フォーマットへのエクスポートについても紹介しています。


Google Drive API を初めて使用する場合、上記のリンク先から公式文書(v2 または v3)を確認してください。サイトの左側には、多様なプログラミング言語に対応したクイックスタート サンプルもあります。この動画で紹介している、v3 への移行を含む Python のコードサンプルについての詳細は、私 Wesley Chun のブログの関連記事のうちの最初の 2 件をまずお読みください。

Launchpad Online では、新しいアプリの開発に役立つ話題のツールやコードの一部など、Google デベロッパー初心者向けの技術的なコンテンツを提供しています。

Posted by Eiji Kitamura - Developer Relations Team

Posted:
Google では、Google Maps APIs をこれから使ってみたいというデベロッパーの皆様を対象としたハンズオンセミナーを開催します。Google Maps APIs を使ったアプリ開発を本格的に始めたいと思っている方におすすめの内容です。


本セミナーでは、Google Maps APIs を活用したソリューション構築に詳しいエキスパートが、わかりやすく、丁寧に解説します。好奇心旺盛で新たな知識を求めているデベロッパーの皆様のご参加をお待ちしております。

■概要


【名称】     Maps ハンズオンセミナー ~ Google Maps APIs をマスターしよう~
【日程】     毎月最終火曜日 17:00-19:00
                    2016 年 2 月 23 日、3 月 29 日、4月26日 以降順次開催予定
【場所】     グーグル株式会社 六本木オフィス
【定員】     20 名程度
【参加費】 無料
【主催】     グーグル株式会社
【対象】
  • Google Maps APIs をこれから使ってみたいと思われている開発者の皆様
  • Google Maps APIs にご興味があり、ウェブ開発の経験をお持ちの方

■コース内容

101 Google Maps APIs を知ってみよう!(フロント エンドエンジニア向け)

  • Google Maps APIs の入門 
  • JavaScript によるフロント実装(Key の取得から言語の設定、Tips など) 

※内容は予告なく変更させていただく可能性があります。あらかじめご了承ください。

■申し込み方法 


こちらのフォームよりお申し込みください

多くの皆様のご参加をお待ちしております。

Posted by 丸山 智康 (Tomoyasu Maruyama) - Google Maps Solution Architect, Google Maps API for Work

Posted:
[この記事は、DoubleClick Publisher ブログの記事を紹介した Google Developers Blog の "Mobile Bootcamp Part III: Focus on quality" を元に翻訳・加筆したものです。詳しくは元記事をご覧ください。]

アプリのユーザーを増加させ、惹きつけるアドバイスは既に読んでいただいたものと思います。技術的な側面には、アプリを成功へと導くものとそうでないものがあります。たとえばスピードはアプリの成功にとって極めて重大であり、ユーザーは、アプリが 1 秒以内に応答することを期待しています

先日の第 2 部では、ユーザーを魅了し、夢中にさせ、つなぎ留めるための推奨事項をお伝えしました。今日は、高品質のアプリをユーザーに提供するヒントを、Google のモバイル ソリューション コンサルタント マネージャーである Dev Gogate が教えてくれます。

  1. アプリのサイズは小さいほどよい
    ユーザーの帯域幅とデータ ストレージは限られているため、サイズの大きなアプリはインストールに失敗する可能性があります。アプリストアにはサイズ制限があり、携帯ネットワークの接続を介しての場合、特定のサイズ以下のアプリしか配信しません。Google では各 APK に対して 50MB の制限(メディア サポートのための 2 GB の拡張ファイルは許可)があり、Apple ではアプリのサイズを 100MB に制限していますProGuard ツールを使用して Android コードを最適化し、リソース圧縮を有効にして、依存関係ライブラリから未使用の不要なリソースを削除しましょう。App Thinning は、iOS 上のアプリサイズを縮小する同様のソリューションを提供しています。

  2. 端末リソースを最適に使用するアプリを作成する
    ディスプレイがハードウェア コンポーネントとどのようにやり取りするかを考慮せずにアプリを作成すると、バッテリー寿命などの貴重なリソースが浪費する可能性があります。Dev は、「アプリのパフォーマンスは非常に重要です。設計が不適切なアプリは、ユーザビリティに著しくネガティブな影響を与え、アンインストールにつながります」と述べています。Dev は、測定値のリストを作成し、アプリをテストすることを 推奨しています。YouTube のこの Android パフォーマンス チャンネルGoogle+ コミュニティには、パフォーマンスの高いアプリをビルドするための優れたヒントがあります。

  3. アプリがすべての端末で機能することを確認する
    一部の端末にのみ影響を及ぼすバグがあったり、クラッシュが発生すると、ユーザーは即座に否定的なフィードバックを返し、アプリの評価は下がります。Dev は、Cloud Test Lab を使用して、Android 端末のほぼすべてのブランドおよびモデル、複数の言語、さまざまな画面の向き、異なる Android API バージョンでのアプリ テストを推奨しています。アプリ用のインスツルメンテーション テストを記述していない場合でも、Robo テストを使用してユーザー アクションをシミュレートすることにより、アプリをテストできるというのが、Dev の専門家としてのヒントです。

  4. A/B テストを使用して実際のユーザー フィードバックを取得する
    アプリを試験運用すると、ユーザーがアプリを使用する方法と、アプリがテストラボの外でどのように動作するかについて、早期に知見を得ることができます。一方、ベータテストでは、熱心なユーザーからのフィードバックを収集できます。これはユーザー向けのテストなので、プロセスをシンプルにして、参加するユーザーを多数確保する必要があります。このふたつを組み合わせることによって、アプリを広範にリリースする前に、ユーザーからの初期フィードバックを得ることができます。

  5. 新しいアプリ バージョンを段階的にリリースして注意深く監視する
    アプリの新バージョンを導入する可能性のあるユーザー数と、その使用レベルを過小評価しないでください。Dev は段階的ロールアウトを使用して異なるアプリ バージョンのベータテストを行い、選択したユーザー グループを対象にアプリのアップデートを徐々にリリースすることを推奨しています。Cloud Test Lab では、開発中にフィードバックが得られる仮想デバイスと、実際の端末で問題を検出できる物理デバイスを使ってテストを行うことができます。

アプリのファンを獲得して維持するには、高品質のアプリ作成が必要不可欠です。Dev のアドバイスに従ってアプリの品質を最適化しましょう。また、今後投稿予定の効率的な収益化に関する記事にもご期待ください。



Posted by Eiji Kitamura - Developer Relations Team

Posted:
[この記事は Laurence Moroney、デベロッパー アドボケートによる Google Developers Blog の記事 "How Twitter used Doze in Android 6.0 Marshmallow to Improve Notification Performance" を元に翻訳・加筆したものです。詳しくは元記事をご覧ください。]

昨年11 月のブログ記事で、パフォーマンスとユーザビリティの向上をユーザーにもたらすために、Google Cloud Messaging(GCM)が Android 6.0 Marshmallow の Doze(居眠り)モードと呼ばれる節電機能をどのように扱うかについて紹介しました。優先度が「標準」のメッセージの場合は、端末を Doze モードのままにしておき、優先度が「高」のメッセージの場合は端末を Doze モードから起こし、アクティブにするというものです。本機能の Android における好例とベストプラクティスについて、Twitter 社のエンジニアリング チームと話し合いました。

Twitter 社は、Doze モードの端末をアクティブにする、優先度「高」を付すべきメッセージはどれなのかについて徹底的にリサーチしました。Twitter 社で使う特定のニーズを満たすために、Twitter 社は、ダイレクト メッセージは優先度「高」で、メンションは優先度「標準」で配信する必要がありました。

Twitter 社の Android エンジニアリング マネージャーである Luke Millar 氏は次のように述べています。「Android M を使用するとバッテリーの寿命が伸び、良き市民としての責任を果たすことにつながります。この機能により、どの通知が Doze モードの端末をアクティブにし、どの通知がアクティブにしないかを指定できます。通常は、ユーザーの携帯端末が次回アクティブになるまでプッシュ通知の配信を保留するように GCM を設定します。ただし、ユーザーはダイレクト メッセージなどの一部のプッシュ通知を即座に受け取ることを求めているため、これらの通知には優先度を「高」に設定します。この機能は、これらの通知がユーザーに配信されるタイミングと方法を指定できるので便利です。」

Twitter 社のエンジニアは Doze モードをテストするため、Android デベロッパー サイトに記載されているステップを実行しました。このサイトには、adb コマンドを使用して物理端末または仮想端末で Doze モードをシミュレートする方法が示されています。Twitter 社はこの方法を使用して、メッセージングの優先度が実際の環境でどのように機能するかをテストできました。

また同社は、Twitter ハイライトを配信するなどの大きなペイロードの送信時にもう 1 つのベスト プラクティスを使用しました。それは、通知でメタデータを渡し、そのメタデータを使用してアプリを同期し、リクエストしたハイライトを取得するということです。言い換えると、通知でハイライトのコンテンツを送信せず、同期メカニズムをトリガーして、アプリのコンテンツをアップデートしました。

スタンバイ環境にあるアプリで GCM を使用する場合の詳細については、このドキュメントをご覧ください。

GCM の詳細と、Android、iOS、ウェブ アプリケーションで GCM を通知に使用する方法については、こちらの Google デベロッパー サイトをご覧ください。

Posted by Eiji Kitamura - Developer Relations Team