Chrome Life

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

オリジナルの国旗が作れるジェネレーター「Flag Designer」

ホームページをデザインする上で必要な素材を自分でイチから作るのは大変です。

そういう時は、ボタンや背景画像を生成するジェネレーターを使うと便利です。

他にも様々なジェネレーターがあるのですが、今回は少し風変わりのジェネレーターをご紹介したいと思います。

オリジナルの国旗が作れるジェネレーター「Flag Designer

世界の国旗を見ると、独特のカタチをしたものもありますが、配色やカタチが少しだけ違う国旗もたくさんあります。

Flag Designer」を使えば、模様や色、マークを組み合わせてオリジナルの国旗を作ることができます。

色とパターンの組み合わせは無数にあるので、いろいろ試してみると面白いですよ。

SVG形式で出力できたり、ランダムで生成することもできます。

ゲームの素材として使えそうですね。

それでは、また!

ニュース記事から人物の関連情報が検索できるセマンティックなエクステンション「Summer」

最近では、ブログやニュースサイトなどから情報を収集する人が多くなってきました。

もちろん新聞やテレビの情報も重要なのですが、ネットの方が手軽に必要な情報だけを得ることができるので便利です。

大量の情報を収集できるようになってくると、もっと効率よく集めたくなってきます。

Googleでは、Knowledge Graphを利用してキーワードに関連した人物の情報を検索結果に表示する機能を提供しています。

これはユーザーが何を求めているのか意味を理解し、検索結果に必要な情報を表示するセマンティック検索の流れを作ろうとしています。

しかし、Googleが用意したセマンティック検索は、あくまでもGoogleのサイト上でしか役にたちません。

他のサイトを閲覧中でも、同様にサイト内の記事の意味を理解し、関連する情報を表示してくれると便利です。

そこで今回ご紹介するのが、ニュース記事から人物の関連情報が検索できるChromeエクステンション「Summer」です。

Summer」は、人物検索に特化していますが、ニュース記事のテキスト中にある人名を自動的に判断し、関連する様々な情報を表示してくれるエクステンションです。

エクステンションをインストールした状態で、TechCrunchのページにアクセスします。

右上にある[S]をクリックすると、記事内で紹介されている人物のリストが表示されます。

リストから人物を選ぶと、関連情報を見ることができます。

関連情報には、所属している組織や、人物の紹介、Twitterのツイート、会社概要、Youtube、書籍などがピックアップされます。

人物データには、芸能人やスポーツ選手など幅広いジャンルの著名人が含まれているようです。

残念ながら「Summer」が対応しているサイトはアメリカのニュースサイトなので、海外で活躍している日本人しか表示されません。

しかし、「Summer」が実現しているコンテンツからメタデータ(人物)を抽出し、関連する情報を集めることはセマンティック検索の流れに通じるものを感じます。

日本では、人物データベースとして有名な「SPYSEE」が、同様のエクステンションを提供すると面白いんじゃないかなw

セマンティック検索が充実してくると、キーワードを必死に考えて検索するような能力は不要になるかもしれません。

誰でも必要な情報を調べることができる時代がくれば、有用なメタデータを提供できるサービスや企業が勝つことになり、SEOなど考えなくてもよくなるでしょう。

こういったことを考えながら、「Summer」をチェックしてみると面白いですよ。

それでは、また!

iPhone5に飛びつくのはちょっと待った!iPhone4Sユーザーが買い換える前に考えるべきこと

iPhone5の発売日(9月21日)が迫ってきましたね!

予約状況もiPhone4Sを超える2倍のスピードで200万台突破したそうです。(Yahooニュース

もちろんApple信者の皆さんは予約しましたよねw

しかし、まだ2年縛りの契約が残っている人や、キャリア変更で悩んでまだ予約していない人もいると思います。

今回も孫さんの「やりましょう!」の一声で、Softbankからは端末の下取りプログラムが用意されて、買い替え意識が高ぶってきました。

筆者は、iPhone4Sユーザーで2年縛りが残っている状態ですが、

何度も心が動かされそうになりました。

auiPhone5テザリングに対応しているのも魅力ですよね。

しかし、冷静に考えて本当にiPhone5に買い替えすべきか考えてみることにします。

同じように買い替えを迷っている方の参考になればうれしいです。

iPhone5はものすごく魅力的な端末です。

スペックの比較を見る限り、iPhone5は魅力的な端末に仕上がっていると思います。

今回のバージョンアップで一番インパクトが大きかったのは、なんといっても4インチディスプレイになって解像度が大きくなり、端末サイズが縦長になり、今までよりも薄く軽くなった部分だと思います。

しかし、端末の形状が変わることにより不具合が出る可能性は高くなります。

iPhone4が発売された時を思い出してみましょう。

iPhone4ではRetinaディスプレイ採用やフロントカメラ搭載により、端末の形状も3GSから大きく変わりました。

これにより発売当初、

iPhone4の初期ロットの不具合が問題になりました。

1つ目がアンテナの問題です。iPhone4の本体周囲のステンレス部がアンテナになっているため、ちょうどアンテナの途切れる接点に手が触れ続けてしまうと電波の受信状況が悪くなる現象がおきました。

2つ目が液晶の黄ばみ問題です。液晶が変色して黄色く見えるという現象で、接着剤の問題ではという説が浮上しました。

この他にも、蛍光灯の下で撮影すると、青いシミが出てくる。10分程使ってると、本体が物凄く熱くなる。など様々な症状が報告されました。

これらが直接、端末形状の変更によるものかは分かりませんが、iPhone4Sの時にはこれほどの不具合が発生しなかったことを考えると、少なからず何らかの影響が出る可能性が高くなります。

さらに通信がLTEに対応したことによる影響も考えられるでしょう。

もちろんiPhone5が完璧な仕上がりの可能性もあります。

しかし、多少のリスクが考えられる状況で、iPhone4Sユーザーが買い急ぐ必要があるかというと疑問がわきます。

買い換えるべきか最終的に判断するのは自分自信なのでお任せしますが、1つだけ自分に質問をしてみてください。

今使っているiPhone4Sに不満はあるか?

もし、不満がなければiPhone5Sの発売まで待っても良いのではないでしょうか。

筆者は、自分自身にも言い聞かせる意味でこの記事を書きながら、今回は見合わせることにしました!

でも、実機を見た瞬間、心変わりしたら許してくださいねww

それでは、また!

BootstrapのUIがドラッグアンドドロップだけで組める!最速でウェブのユーザーインターフェースが構築できるエディタ「Jetstrap」

先日、Twitter Bootstrapが2.1.1にアップデートされました。

Bootstrapが2.1になって大幅に機能も追加され、ウェブサイトを構築する上で必要なUIがほとんど揃っている感じがします。

最近では、スタートアップ系のWebサービスを作る人にとっては、Bootstrapが必要不可欠な存在になりつつあります。

とはいっても、Bootstrapに慣れていない人が、実際にページを作っていくにはコンポーネントのタグ構造やClass名を意識して作らないといけないので、少し難しい部分もあります。

Bootstrapのサイトを見ればマークアップのサンプルがあるので、それを見ながら作れば良いのですが1つ1つ確認しながら行うのも手間です。

そこで今回ご紹介するのが、BootstrapのUIをドラッグアンドドロップだけで簡単に組めるエディタ「Jetstrap」です。

jetstrap - Broadband from Max Lynch on Vimeo.

Jetstrap」を使えば、Bootstrapベースのページデザインが、ブラウザ上でパーツを組み合わせていくだけで作ることができます。

Bootstrap版 Dreamweaver

のようなものです!

手軽にページデザインができるので、サイトのモックアップを作る段階などに使うと効果的です。

それでは、実際に使い方をみていきましょう。

Jetstrap」にアクセスして「Try it now」のボタンをクリックします。

Twitterアカウント、Googleアカウント、GitHubアカウントの何れかでログインします。

ログインすると、Jetstrapのエディタが開きます。 初期状態で、NavbarとHero Unitが設置されています。

Hero Unitの「Hello, World!」の部分をダブルクリックすると、テキストを編集することができます。 書体(太字、斜体、下線)やリスト、リンクのツールバーが用意されています。

Navbarの部分をクリックすると、コンポーネントの属性が編集できるダイアログが開きます。 TypeをDefaultからInverseにすると背景が黒に変更できました。

Componentsの中から追加したいコンポネントをドラッグアンドドロップで配置することができます。 Buttonをドラッグするとボタンが配置できました。

Componentsには、Bootstrapで使えるコンポーネントが全て用意されているので、簡単にタブやパンくず、フォーム、グリッド、テーブルなどを追加することができます。

Responsiveデザインの確認を行うこともできます。 上部にある4種類の解像度別ボタンをクリックすると、そのサイズで確認ができます。

PreviewをOnにすると、ボタンやリンクなどの動作を確認することができます。

CSSを編集する機能もあります。 配置したコンポーネントにIDやClass名を予め設定しておき、CSSボタンをクリックするとCSSの編集エリアが表示されるので、自由にデザインを調整することが可能です。

最後に、Exportボタンをクリックして、生成されたHTMLを確認します。 「Download .zip」ボタンを押すと、HTMLとBootstrapの一式をダウンロードすることができます。

今まで、Bootstrapのコンポーネントを覚えるのが大変だった人や、初めてBootstrapを使う人にとっては重宝するエディタだと思います。

Jetstrap」はBootstrapをうまく融合した

最速でウェブのユーザーインターフェースを構築するツール

すごく便利なので、デザイナーもプログラマーの方も是非、チェックしてみてください。

それでは、また!

ChromeのSSHクライアント「Secure Shell」が公開鍵認証に対応!ブラウザだけでサーバー管理ができる時代に近づいた

以前の記事でご紹介したChromeSSHクライアント「Secure Shell」が、バージョン0.8.2にアップデートされました。

今回のバージョンアップで、

公開鍵認証が使えるようになりました!

今まではパスワード方式だったので、サーバーによっては使えなかったのですが、秘密鍵をインポートして認証できるようになったので、SSHクライアントとして十分使えるレベルに近づいたと思います。

Secure Shell」を起動すると、接続先の設定ができるようになっています。

ここで接続先の名称(接続情報の記憶用)、ログインユーザー名、ホスト名、ポートを入力し、秘密鍵ファイルをインポートし、Enterキーでサーバーに接続します。

接続に成功すると、接続先情報は保存されるので次回からはワンクリックで接続できるようになっています。

筆者の運営しているサーバーに秘密鍵を利用して接続することができました!

他にも今回のバージョンアップで下記の機能が追加されています。

  • Ctrl+Shift+Nキーで新しいウインドウを開く
  • マウス選択でクリップボードにコピー
  • クリップボードへのコピー&ペースト
  • 新しい接続ダイアログ
  • 接続情報の記憶
  • フォーカス中のカーソルスタイル切替
  • いくつかのバグの修正

Secure Shell」はネイティブクライアントの技術を使って高度なネットワーク接続を実現しているのがすごいですね。

サーバーに接続するので、本当に安全なのか? 心配な方はSecure ShellのFAQに目を通しておくことをおすすめします。

ブラウザからSSH接続したい時には使えるエクステンションなので、インストールしておくと便利ですよ!

ブラウザだけでサーバー管理ができる時代

に一歩近づきましたねw

あとは、WinSCPやTransmitのようなファイル転送ソフトがあると完璧ですね。

それでは、また!

これはすごい!一枚の顔写真から自分の顔の3Dモデルが作れるサービス「Vizago」

最近は、3Dネタの記事が多くなってきましたが、気にしないでくださいねw

もちろん今回も3Dネタなのですが、めちゃくちゃスゴイです!

一枚の顔写真から高品質な3Dモデルが作れる!

このテクノロジーを開発したのが、ヨーロッパの会社「Vizago」です。

Vizagoが持っている特許モーフィングモデルテクノロジーは、単一ユーザーの写真から3D面を作成することができます。

これは、専用のスキャナハードウェアを使用せずにバーチャルキャラクターを作成することができる画期的な技術です。


Vizago - 3D faces from a single image

どれほど簡単に3Dモデルが作れるか試してみましょう。

Vizagoデモにブラウザでアクセスし、loginのリンクをクリックします。

facebookアカウントでログインします。

ログイン後に、3D Reconstructionをクリックします。

写真アップロードの説明ページが開きます。 アップロードする写真は、パスポートで撮影する際と同様の正面を向いた写真を使います。 用意ができれば、continueをクリックします。

アップロードページで、画像ファイルをアップロードします。 画像のURLを指定することもできます。 今回は、オバマ大統領の写真を使ってみます。

アップロード後に性別を選択します。 今回は男性なのでmaleを選択します。

次に写真の顔にポイントを付けていきます。

左耳の下、右耳の下、左の目尻、右の目尻、鼻の左端、鼻の中央、鼻の右端、口の左端、口の右端、左顎、右顎、顎先のポイントを選び、最後にSubmitボタンをクリックします。

3Dモデルの生成が始まります。これには数分かかりますので少し待ってから、Resultsのリンクをクリックします。

生成された3Dモデルは、ものすごくリアルです。 髪の毛はありません!かならずハゲになりますw

マウスをドラッグしてみてください。 正面からの写真しかアップロードしていないのに横顔を見ることができます。

ページの下の方には、3Dモデルに髪の毛やヒゲを重ねあわせたサンプルも表示されています。 3Dモデル化してしまえば、あとはいろんなコスチュームや装飾を重ね合わせるだけで、バーチャルな世界に登場させることが可能です。

メールで問い合わせてプロモーションキーを入手すると、生成した3Dモデルデータをダウンロードすることもできるようです。

Vizago」が開発したテクノロジーを使えば、ヘアースタイルをシミュレーションしたり、服のフィッティングをバーチャルで行ったりが簡単にできるようになるでしょう。

それも、高価な専用のハードを利用せずに、ブラウザからサービスが提供されるとなるといろんな用途で発展しそうな技術だと思います。

まずは、自分の顔写真を3Dモデル化して試してみてください。驚くと思いますよ!

それでは、また!

3Dモデルが簡単に共有できるWebGLを使った3Dモデルビューア「3dfile.io」

WebGLを使えば、ブラウザ上で3Dグラフィックスを表現することができます。

Chrome Lifeでも3Dゲーム3D人体解剖図などでWebGLが活用されていることをご紹介しました。

最近のゲームや映画などでは、3Dによる表現が当然のように使われ、クオリティーもリアルなものと見間違うほど高くなってきています。

こういった3Dグラフィックスの現場では、ベースとなる3Dのモデルデータを作る必要があります。

小さなチームでこういった3Dモデリングを分担して作業する際に簡単に共有してチェックできると便利です。

そこで今回ご紹介するのが、3Dモデルが簡単に共有できるWebGLを使った3Dモデルビューア「3dfile.io」です。

3Dグラフィックスの現場で使えるサービス

3dfile.io」は、様々な3Dファイルフォーマットに対応しており、ファイルをアップロードすると専用のURLが発行され、3Dモデルの共有ができるサービスです。

3Dファイルのアップロード

今回は、サンプルデータとしてArtec 3Dスキャナのサンプルモデルダウンロードサイトから靴のSTLファイルをダウンロードして試してみます。

3dfile.io」にアクセスし、upload filesボタンをクリックして3Dファイルをアップロードします。(アップロードできるファイルは最大10Mbyteまでです)

対応している3Dファイルのフォーマットは、STL (binary), PLY, 3DS, OBJ and SolidWorks, Pro/Engineer Creo, Siemens NX, CATIA, Autodesk Inventor, IGESです。

アップロードが完了すると、共有用のURLが発行されます。Open the Linkボタンをクリックすると3Dモデルビューアが開きます。

3Dモデルビューアの操作

3Dモデルビューアを開くとWebGLを使って3Dレンダリングされた結果が表示されます。右側に操作パネルがあります。

表示モードをSolidからSolid+Wireに変更すると、下記のように表示されます。

マウスでドラッグするとアングルが調整できます。Dキーを押しながらドラッグで移動ができます。 マウスホイールでズームイン・アウトができます。

その他にも操作パネルでアングルの切替や透過率の調整などが可能です。

メニューからシェアを選んで、FacebookTwitterでシェアしたり、ホームページへの埋め込み用のタグを発行することが可能です。

3dfile.io」は、3Dモデルが簡単にシェアして閲覧できる実用的なWebサービスです。

3D CADなどにも応用できるかもしれませんね!

ログインなども不要なので、是非、チェックしてみてください。

【画期的な3Dモデルテクノロジー】 顔写真をアップロードするだけで簡単に3Dで動く顔が生成できる技術です。デモが用意されているので是非試してみてください。 これはすごい!一枚の顔写真から自分の顔の3Dモデルが作れるサービス「Vizago」

それでは、また!