• Twitter
  • Facebook
  • Google+
  • RSS

「はてブ」アプリ開発裏話も。はてなスタッフのオススメ Chrome ウェブアプリ 15選



(※この記事は、グーグル提供によるPR記事です)

——司会の深山です。皆さん、本日はお時間ありがとうございます。まずは軽く自己紹介をお願いします。


id:chris0043(くりす)とid:chira_rhythm55(ちら)

くりす id:chris4403です。人力検索はてなのディレクションとエンジニアリングを担当しています。

ちら id:chira_rhythm55です。うごメモはてなのデザインを担当しています。

くらげ id:kudakurageです。はてなブックマークのデザインを担当しています。今回、公式 Chrome ウェブアプリ「はてなブックマーク」は自分がデザインをさせていただきました。

——ありがとうございます。くらげさんの開発裏話も是非、後ほど。

■ 急なプレゼンでも安心!? プレゼン作成&タイマーアプリ

——では早速、皆さんのオススメアプリを紹介していただきましょう! まずは「仕事でも使えるかも?」というアプリをお願いします。

くらげ まずは僕から、メジャーなやつで、「SlideRocket」を。

くらげ PowerPointやKeynote並みにプレゼン資料が作れてすごいなーと。完成度が高くてすごいですよね。素材を簡単にシェアができるのが面白いんです。その他、トランジションとかも含めて、プレゼン資料を作るための基本機能はすべてそろっています。

ちら 日本語もきれいに表示されるんですか?

くらげ 最近はちゃんときれいに表示されるようになりました。テキストフォームのところで、右側の「Font」で「International」を選ぶと日本語が入力できます。まだ明朝体とゴシック体しか使えないので、もうちょっと増えるといいですね。あとすごいのが、TwitterのTLを入れられるんですよ。

くりす お、これはすごい。

くらげ 左側の「Plugin」で「TwitterFeed」を選んで、検索したいキーワードを入れると、自動的に表示されます。プレゼン中にイベントのハッシュタグ検索で表示しておくとか、面白そうですね。

くりす プレゼンなら、このアプリも合わせて使うと良いですよ。「Timer Tab」っていうんですけど。

くりす すごくシンプルな、タイマーとアラームとストップウォッチが並んでいるアプリです。で、これの面白いところがですね、タブを見てください。

——タブですか?

くりす なんと、ファビコンがね……。

くらげ あ!

くりす ファビコンがアニメーションして、ちゃんとカウントダウンとかをしてくれるんですよ(どや顔)。

ちら 本当だ!

——これはすごい!

くりす これのおかげで、「固定されたタブで開く」で開いて、ファビコンだけが表示されているタブを端っこに置いておくだけでも、ちゃんと時間が分かるんです。

くらげ これ面白いですね……。だから「Timer Tab」なんですね。

くりす 急にプレゼンしないといけない、なんてシチュエーションで便利です。

ワンポイント用語集

トランジション - 切り換え効果のこと。ここでは、プレゼンテーション資料のスライドを切り替える際のアニメーションなどの効果を指す。
ファビコン - Webサイトにアクセスした際、Webブラウザのタブやアドレスバー、お気に入り(ブックマーク)に表示されるアイコンのこと。FAVorite ICONの略。
「固定されたタブで開く」 - Google Chromeの機能の1つ。ファビコンのみの小さなタブで左側に固定される。Chrome ウェブアプリを開く際に右クリックで選択できる。

■ 「NYTimesオススメ」「読んでるの?」「読んでません!」

くりす 続いて、テキストエディタアプリの「Write Space」を。

——おお、背景が真っ黒で、シンプルですね。

ちら エンジニアっぽい!

くりす とにかく書くことに集中できるのがポイントです。余白や背景なんかは、設定で細かくいじれます。かっこいいし、シンプルで、しかも勝手に保存してくれます。

くらげ 僕は、仕事関連ということで、「NYTimes」。

ちら かっこいい!

くりす 読んでるんですか〜?

くらげ 読んでません(キリッ)。

くりすちら (爆笑)

ちら あっさりと言い切りましたね(笑)。

くらげ はてなブックマークアプリを作るにあたって、ディレクターのid:nagayamaさんと話していて、「NYTimesアプリはデザインが優れているので、ここから良いものを取り入れられると良いね」という話になったんですよ。

——お、開発裏話ですね。

くらげ NYTimesは、Flashじゃなくて、HTMLとJavaScriptで作られているんです。僕は最初、CSSで頑張って作ってるのかなと思ったんですけど、案外JavaScriptで頑張っている。で、サクサク動くんです。文字サイズを変えたりすると、カラムが動的にガンガン変わっていって、すごいなーと。


id:kudakurage(くらげ)

ちら 本当だ。すごい。

くらげ 右下の「SHORTCUTS」ってところに、キーボードショートカットがまとまってますよ。

くりす すごい、ちゃんと「j」「k」で動くし、「l」で横に行く。

くらげ 右側に並んでいるカテゴリを選択すると、紙面がずれるようにアニメーションするんですよ。

■ デザイナー2人が選ぶ、オススメグラフィック&デザインアプリ

——続いては、グラフィックやデザイン系のアプリのオススメを、デザイナーの2人にお聞きしたいです。

ちら じゃあ私から。まずは「Cacoo」を。

ちら モックとかを作れるサービスですね。図を書けて、シェアできる。リアルタイムでシェアできるので、作りながら「こんな感じでどうですか」とかってメンバーに投げて、「うーん、ここはもうちょっと……」とかいって操作してもらって、私も変更部分をリアルタイムで見られる、と。

——リアルタイムで、というのは良いですねえ。

ちら モックを作るにあたって、部品がたくさんあるのが良いんです。iPhoneのカタチとか、いちいち書くの面倒くさいじゃないですか。そういうのも入ってるので、すぐ使えます。他にも、Webサービスのアイコンとか。

——本職じゃない人、例えば営業の人なんかが、提案資料用にサクっとモックを作りたいときとかに便利そうですね。

ちら もう1つ、「3DTin」っていうアプリがあるんですけど……。

ちら 簡単に言うと、3Dのグラフィックを作れるアプリです。

くらげ これ、使いこなせました!?

ちら まだ使いこなせてないです(笑)。右の方に、ほかのユーザーさんが作ったやつが並んでいるので、それを参考にしつつ。

くりす これは使いこなすのが大変そう……。

ちら 大変なんですけど、普通に売っている3D系のソフトよりはずっと簡単なので、3Dでお遊びには向いてそうですね。新規作成を選んでもらって、左側のペンツールで適当に書くと……。

——あ、描くのが気持ちいいですね。

ちら ドット絵みたいな感じで書けて気持ちいいんですよ。左側の矢印がついているアイコンを選ぶと、高さを作れます。

くりす おお! これすごいですね。

ちら ひたすら頑張っていくと、力作が作れるはずです(笑)。視点とか、光の位置も変えられます。3Dのレンダリングは遅いというイメージがあったんですけど、まったくそんなことがなくて、サクサク動いて面白いなーと思いました。

くらげ これもFlashじゃないですね。canvasを使ってるのかな。僕もこのアプリ、いいなーと思ったんですけど、まったく使いこなせなかったので挙げるのやめたんです……(笑)。ということで、もうちょっと簡単な「Bomomo」を。

くらげ 良い感じに絵が描けちゃうアプリです。学生のときにProcessingを勉強していたので、似た感じで面白そうだなと思って、使ってみました。

くりす うわー、不思議な絵が描けますね。

——アブストラクトアートっぽい絵が描けて面白いです。

くらげ これもFlashじゃないんです。

ちら Flashじゃないことにこだわりますね(笑)。

くらげ もうひとつ、デザイン系のアプリで、「CS Designer」。

くらげ 配色を簡単に選べるアプリです。Webデザインのときに便利そうですね。

ちら アイコンからは想像できないくらいカッコいいですね。使いやすそう。

くらげ 右下の「Light page example」をクリックすると、選んだ配色をサンプルページに当てはめたものをパッと見せてくれるんです。分かりやすいですよね。

——ちなみにこれは……。

くらげ Flashではありません!

ワンポイント用語集

モック - モックアップの略。製品の機能やデザインを確認するために作られる「模型」。ここでは、Webサイトやアプリのモックを指す。
canvas - HTML5で新たに追加された、Webブラウザ上に図形を描画するために策定された仕様。
Processing - コンピュータグラフィックやビジュアルデザインのための、オープンソースのプログラミング言語。
アブストラクトアート - 抽象的な絵画や彫刻などの芸術。

■ 見てるだけで楽しい、エンタメ系アプリ

——次は、ソーシャル/エンタメ系のアプリのオススメ、いきましょうか。

くらげ メジャーですが、やっぱり「TweetDeck」は出来が良いので、挙げておきたいです。

——いかにも「アプリ」っぽいですよね。

くらげ これも、はてなブックマークアプリを作る際に参考にしました。インターフェイスがシンプルで良いですね。リプライやDMがデスクトップに通知される機能も便利です。

ちら 私は「ブクログのパブー」を挙げます。

くりす パブーはユーザーさんが電子書籍を作れるサービスでしたっけ。

ちら そうですね。このアプリは閲覧に特化したビューワなんですよ。画面全体に、表紙がばーっと並んでいるんです。

——おおーっ、並ぶと壮観ですね。

ちら 検索とかランキングとかが無いので、目的のものを探すのには向いていないんですけど、ばーっと並んでいて、眺めて面白そうなものを探すという意味では面白いですよ。

くらげ こうやって並んでいると、普段見ないような、面白そうなものに手が伸びますね。

ちら 写真とか、可愛いものが結構多くて、良いですよ。

——ネコの写真集とかありますね。可愛い!

ちら 井上のきあさんの「アネモネ」という写真集がオススメです。この方はフリーのイラストレーター兼デザイナーさんで、Photoshopの解説書籍とかも書いていらっしゃいます。この人の写真が無料で見られるので、ファンとしてはすごくうれしいです。

くらげ 中身も、ポップアップで縦にスクロールして見ていくの、見やすいですね。

ちら 見るだけなら、通常のWebサイトよりもこっちの方が見やすいし、面白いです。

くりす 見てて面白いアプリは良いですね。「Flixster」も良いですよ。

くりす 海外の映画の予告編とか、評判とかを見られるアプリです。残念ながら日本版は無いんですけどね。「Play Trailer」をクリックすると予告編を見られます。

くらげ これもアプリっぽいUIなので、はてブアプリを作るときに気になってました。

ワンポイント用語集

UI - ユーザーインターフェースの略。ユーザー(主に人間)がコンピュータを操作する際のインターフェースのこと。

■ 定番から意外なものまで、ゲームアプリのオススメは?

——最後はゲーム部門です。オススメゲームを教えてください!

くりす 「Angry Birds」! これは鉄板でしょう。

——有名なゲームですね。といいつつ、実は私、やったことないんです。どんなゲームなんですか?

くりす 鳥をパチンコで引っ張って飛ばして、豚を倒すゲームです。もともとiPhoneアプリとしてリリースされて、世界中でヒットしたんですよね。これは無料で、しかもChrome専用のステージがあるんですよ。

ちら 本当だ。“Chrome Dimension”っていうのがありますね。

くりす Chromeの面は、ブロックもChromeのアイコンの色なんですよ。小さな画面でやってたのが、ブラウザで無料でできるんだから、オススメですよー。それからもう1つのオススメが「Mahjong Solitaire」です。

くらげ これは……上海ですよね?

くりす 上海です! まだChrome ウェブストアが海外版だけだったころ、初めて見たときに一番目立つところにこれがあって、インストールしてから30分くらいずーっとやってたんです。ハマるとやめられないですよ。

ちら グラフィックがすごくきれいですね。

くりす ソリティアに飽きた方にオススメです!

ちら 私も1つオススメを。「MathBoard Addition」です。

——あれ? 黒板アプリですか?

ちら これは、次から次へと出てくる足し算の問題を、ひたすら解いていくというアプリです。

くらげ 本当だ。筆算が出てきましたね。

——えーと、これは65、と。なるほど、これで全20問の正答率とタイムを競うんですね。

ちら 黒板っぽいデザインがすごく良いんですよ。可愛いですよね。

くりす これ、はてなで優勝決定戦したいですね!

ワンポイント用語集

上海 - 積み上げられた麻雀牌の山から、ルールに従って牌を取り除いていくパズルゲーム。

■ 公式 Chrome ウェブアプリ「はてなブックマーク」の裏ワザ

——皆さん、面白いオススメアプリを挙げていただいて、ありがとうございました! さて、くらげさんがいますので、はてなブックマークアプリについても少しお聞きしたいです。

——くりすさん、ちらさん、使ってみて、いかがでしたか?

くりす アプリ内で完結してて、キーボードの「j」と「k」でどんどん“だら見”できるのが良いですよね。あと、タグ登録が便利。僕、B'zが好きなんですけど、はてブで追いかけたことは無かったんです。このアプリで「B'z」タグを登録して、情報を追いかけやすくなったのはうれしいですね。

くらげ キーボードショートカットは、アプリ内のヘルプにまとまっています。便利なのでぜひ使ってください。

ちら カテゴリを並べ替えられるのが、すごく良い! 興味の無いカテゴリは非表示にしたりとか。

くりす アプリとして、正当進化してるなーっていう感じがしますよね。

——くらげさん、苦労したポイントは?

くらげ やっぱり、「プレビューをどう見せるか」に悩みました。選択肢がたくさんあって、最初は「TwitterのiPadアプリみたいにしようか」というアイデアもあったんです。でも、いろいろなページをアプリ内で見せることを考えると、プレビュー画面のサイズは大きくしたかったんです。それで、最終的に現在の形に落ち着きました。UI周りは本当に悩みましたね。

——何か裏ワザっぽい使い方はありますか?

くらげ さっきくりすさんも言っていましたが、キーボードショートカットが便利なので、使ってみてください。それと、裏ワザというほどではありませんが、デスクトップ通知を使うと面白いですよ。

——左側のカテゴリやタグのところにある吹き出しにチェックを入れておくと、新着エントリーがデスクトップに通知されますね。

くらげ 個人的に好きなのが、「お気に入り」にチェックを入れること。自分がお気に入りに登録した他のユーザーさんが、何かをブックマークするたびに通知が出るんです。

——おお、これは面白いですね。使ってみます! ということで、ぜひ皆さんも面白いウェブアプリを探してみてください。本日はありがとうございました。

[PR]企画・制作:はてな
写真:深山こよみ
文: 深山こよみ