日本企業の苦しみを25年前から味わっていたアメリカ企業 - My Life in MIT Sloan


Bylineから

日本企業の苦しみを25年前から味わっていたアメリカ企業 - My Life in MIT Sloan

先週、ボストンに住んでいる日本人研究者が月一で集う異分野交流会があって、そこで講演させていただいた。 100人以上が集まる大盛況でした。 来てくださった方は本当に有難うございます。講演の内容は、大企業が、どのように新しい技術に対して、経営の舵取りをしていくべきか、というもの。 前半では、日本の大企業が各分野で最近競争力を失い、シェアを減らしている、 でも実はそれは日本に限らず、世界中の大企業が陥...

はてなブックマーク - 日本企業の苦しみを25年前から味わっていたアメリカ企業 - My Life in MIT Sloan はてなブックマークに追加



iPhoneから送信

livedoor Techブログ : デザイナー・ディレクターと共有したいAndroidのUI仕様

Bylineから



デザイナー・ディレクターと共有したいAndroidのUI仕様

2011年02月16日10:00
カテゴリ
ブックマーク数

開発部の井上(@inonb)です。12月に位置情報サービス・ロケタッチのAndroidアプリをリリースしました。スマートフォンと非常に相性がいいサービスですので、ぜひお試しいただければと思います。


さて、今回はAndroidアプリのUI仕様について書いてみたいと思います。

Androidは端末ごとにディスプレイサイズや解像度が違うため、iPhoneアプリと比べても画面デザインの仕様が複雑です。ロケタッチAndroidの開発にあたっては、事前にUI仕様についてデザイナーやディレクターと確認を行いました。


マルチディスプレイ対応、HTMLと似たところもあるレイアウトXML、画像表示のしくみなど、とくに重要な5点について整理してみます。


■さまざまなディスプレイ


Androidは端末ごとにディスプレイのサイズ、解像度が違います。これはディスプレイサイズが固定で解像度も2種類しかないiPhoneと大きく異なるところです。


主な現行機種のディスプレイは次の通りです。

インチ数 ドット数 解像度
Galaxy S 4型 480×800 240dpi
IS03 3.5型 640x960 320dpi
Lynx 3D 3.8型 480×800 240dpi
Xperia 4型 480×854 240dpi
Galaxy Tab 7型 600×1024 240dpi


UIのレイアウトでも、Androidではさまざまなディスプレイを前提に、その差異を吸収するような作り方をします。


■レイアウトXML


UIの構成はレイアウトXMLと呼ぶファイルに記述します。これはiPhoneのxibファイル、WebアプリケーションのHTMLテンプレートにあたります。

サイズとポジション



サイズはlayout_width(height)、ポジションはgravityで指定します。





■pxにかわる単位 dp



レイアウトのサイズ指定では、px(ピクセル)やmm(ミリ)などいろいろな単位が使えるのですが、dpを使うのが推奨されています。


dpとは「density independent pixcel」の略です。ディスプレイの解像度の高さ(density)をpxにかけ合わせたものです。


dpでサイズをきめると、解像度が異なる端末でも、ほぼ大きさが揃って表示されるようになっています。

解像度 density dp
Galaxy S 240dpi 1.5 320×533
IS03 320 dpi 2.0 320×480
Lynx 3D 240dpi 1.5 320×533
Xperia 240dpi 1.5 320×569
Galaxy Tab 240dpi 1.5 400×683


たとえばGalaxy Sだと、densityが1.5なので、1dpは1.5pxになります。ディスプレイのドット数は480x800なので、画面サイズをdpで表すと320dp×533dpとなります。


■画像表示のしくみ



たとえば40dp角のコンテナに画像を配置するという場合でも、元画像の大きさ、配置のポジショニングなどで、選択肢がわかれます。


画像の描画にあたり、Androidはまず元画像のスケーリング(拡大縮小)を行い、その後設定にしたがって配置を行います。スケーリングはプレスケールとオートスケールの2つがあります。

スケーリング



Androidは端末の解像度の高さを4つに区分しますが、それぞれの解像度用のリソースフォルダを設定することができます。

低(120dpi) ldpi
中(160dpi) mdpi
高(240dpi) hdpi
最高(320dpi) xhdpi




アプリケーションアイコンであれば、mdpi用は48px角、hdpi用は72px角になります。それぞれの画像をres/drawable-mdpiとres/drawable-hdpiディレクトリに入れておくと、hdpi端末では72pxの画像が選択されます(プレスケール)。


もしhdpiディレクトリに画像がない場合、他のディレクトリから画像を探して、160dpiを基準に拡大縮小を行います(オートスケール)。


配置バリエーション



ImageViewに画像を配置するポジショニングが8種あり、scaleType属性で指定します。HTMLのimgタグに比べて自由度がかなり高いです。

MATRIX 左上からベタに配置
CENTER 中央に配置
CENTER_CROP 中央に配置し、短辺をコンテナに合わせる
CENTER_INSIDE 中央に配置し、長辺をコンテナに合わせる
FIT_CENTER 長辺をコンテナに合わせ、短辺を中央寄せ
FIT_START 長辺をコンテナに合わせ、短辺を上(左)寄せ
FIT_END 長辺をコンテナに合わせ、短辺を下(右)寄せ
FIT_XY 両辺をコンテナに合わせる




■ ナビゲーション



アプリ全体の遷移、流れとしてのUIの組み立てという点では、昨年7月にGoogle IOで行われたAndroid UIのセッション資料があります。


Twitterの公式アプリをケーススタディに、ダッシュボードやアクションバーといった、Androidのデザイントレンドが具体的に解説されています。



GoogleAndroidチームによるプレゼンなので、ドキュメントではわかりづらいAndroidのデザイン上の思想といったあたりも述べられていて、おすすめです。


ということで、Android UI仕様のおもなところを駆け足でまとめてみました。


ちなみに、上の画像はロケタッチでタッチをするともらえるシールです。現在「ローソンからあげクンキャンペーン」中ですので、よろしくお願いします。


レスポンス
inonb
コメント(0)
トラックバック(0)





コメントする



このブログにコメントするにはログインが必要です。
              





RSSリーダーで見るために変換しています


iPhoneから送信

お気に入りの壁紙を使ってChromeテーマを作成する方法 : ライフハッカー[日本版]

Bylineから



Chromeのテーマギャラリーがローンチしてからというもの、素敵なテーマが溢れんばかりの今日この頃ですが、それでもやはり自作してみたい、という方のためにChromeテーマの自作方法をご紹介。思っているよりも全然簡単ですよ。

実際、ChromeテーマはJavaScriptもHTMLコードも含まない単純なアドオンで、2つの構成エレメントからなっています

 








その2つとは

  1. 画像 x 数枚
  2. .jsonマニフェストファイル x 1個

これらのエレメントが.crx形式にパッケージされています。.crxファイル形式とはGoogle Chromeが使用しているZIPファイルのバリエーションの一つです。

下の画像を使って作成したChromeテーマが、そのもう一つ下の画像です。このテーマは下記に記したやり方で作成しました。

<ビフォー>


<アフター>



お気付きの方もいるかもしれませんが、背景画像に対して新規タブページ上の全てのリンクがくっきりと表示されるように、画像を少し暗く加工しています。

Chromeテーマ作成に必要なものは下記の通りです。:

  • テーマに使用したい壁紙
    画像を加工したい場合、画像エディター(Aviary Phoenixが個人的にはおすすめですが、他にもオプションは多数あります。MSペイントでも簡単なことであれば出来ますが、もう少しパワフルなものが欲しい方は優秀でしかもフリーで使えるPaint.netを試してみて下さい)。
  • Notepadのようなベーシックなテキストエディター(NotepadまたはNotepad++あたりが個人的にはおすすめですが、これも選択肢は多数あります)。
  • テーマ作りの基盤となるクリエイティブなアイデア

必要なツールが揃ったら、下記の手順に沿って挑戦を。:


手順1: テーマ名を付けたフォルダを作成

このフォルダが作成出来たら、その中にもう一つフォルダを作り、"images"という名称にします。このフォルダにはテーマで使用する画像を格納します。以後の説明に出てくる"マイテーマ"とはこのテーマ名を付けたフォルダを示します


手順2: テーマ用の画像を作成

注:最初に注意する必要があるのが、Chromeテーマで使用する画像は全てPNG画像である、ということです。JPG画像の場合、オンラインツールなどを使って、PNGへ変換して下さい。

きゅうりのようにクールなテーマを作成するためには4つの画像エレメントが必要です。五番目のテーマ作成者ロゴはオプションで追加可能、という参考までにのお話です。それぞれの必須サイズとスクリーンショットを一緒に掲載しておきます。


  1. テーマフレーム - この画像はChromeテーマのフレーム、「閉じる」、「最大化」、「最小化」ボタンの背景画像として表示されます。この画像を指定しない場合、デフォルトChromeテーマのネイティブOSタイトルバーを表示します(画像要件: 高さ30px以上、幅制限なし)

  2. テーマツールバー - この画像は次へ、戻る、再読み込みボタン、アドオンツールバーの背景として表示されます。現在のタブ、ツールバーの両方に使用されます(画像要件: 高さ120px以上、幅制限なし)。

  3. テーマタブ背景 - この画像は複数のタブが開いている際、表示されていないタブ上に表示されます(画像要件: 高さ65px以上、幅制限なし)。

  4. 新規タブページ背景 - 新規タブを開いた際のメイン画像として表示されます。奨励されている画像サイズは800x600以上ですが、スクリーンの解像度にあったものがベストです。

  5. テーマ属性 - これはChromeテーマの右下の隅に表示される画像です。これはオプションなのでテーマ作成者のロゴを入れたい場合などに便利です。

これらの画像の準備が出来たら、手順1で作成したimagesフォルダにペーストします。




テーマフォルダに画像をペーストするとimagesフォルダは上の画像のようになります。

背景画像とマッチした画像を作成するためのコツ:

  • テーマに最も近いマッチングカラーを使用しましょう。自分が選んだ壁紙とどの色がマッチするのかは、メイン画像のカラーパレットを作成する、などを試してみると分かりやすいです。
  • 画像エディターを使ってメイン画像の一部の切り取り、サイズ変更を行います。例えば、「Ethereal 2」というテーマを作成した時にはメインの背景とフレーム画像に同じものを使用しました。
  • 画像の一部にグラデーションを使いたい場合、『Dynamic Drive』というツールを使うとグラデーション画像がいとも簡単に任意のサイズで作成出来ます。
  • 基本的なルールとしてフレームに最も暗い色、背景タブ画像が最も明るい色を使うと良いです(もちろん、これは背景画像として選んだ画像にもよりけりですが)。


手順3: マニフェストファイルの作成

Chromeアドオン、インストール可能なウェブアプリおよびテーマには必ず「manifest.json」という名のJSON形式のマニフェストファイルが含まれています(JSONデータ形式に気取った名前を付けているだけなので、恐れる必要はありません)。

このファイルには画像、色、色調、プロパティが含まれています。全てのテーマに使えるベーシックなマニフェストを下記に掲載しているので、使ってみて下さい。またここからサンプルテーママニフェストもダウンロード出来ます。

{

"version": "1.0",

"name": "My Theme",

"theme": {

"images" : {

"theme_frame" : "images/frame.png",

"theme_toolbar" : "images/toolbar.png",

"theme_ntp_background" : "images/background.png",

"theme_tab_background" : "images/tab.png",

"theme_ntp_attribution" : "images/theme_ntp_attribution.png"

},

"colors" : {

"ntp_link": [255,255,255],

"ntp_text": [255,255,255],

"ntp_section_link": [255,255,255],

"ntp_section_text": [10 , 17 , 27],

"ntp_background": [10 , 17 , 27],

"frame": [10 , 17 , 27],

"toolbar": [10 , 17 , 27],

"tab_text": [255,255,255],

"tab_background_text": [10 , 17 , 27],

"bookmark_text": [255,255,255]

},

"tints" : {

"buttons" : [0.33, 0.5, 0.47]

},

"properties" : {

"ntp_background_alignment" : "bottom",

"ntp_background_repeat": "no-repeat"

}

}

}


コードを見てもらったなら、次はそれぞれのセクションが、どうテーマを変更させていくのかを解読していきましょう。


  1. 画像 - テーマに使用される画像エレメントはmanifest.json fileの"images"セクションで定義されます。これらは手順2で作成し、imagesフォルダに保存された画像です。imagesフォルダ内で付けた名前をここから指定する必要があります。

  2. 色 - このセクションのそれぞれのエレメントはテーマで使用される様々な色を定義します。どのエレメントがテーマのどこに紐づけられているかを下記に示します。
    テーマ用の色を選ぶ際には下記の3つのコツを参考にしてみて下さい。:
    ○ ステータスバーの背景色は選択したツールバーと同色にする。
    ○ ステータスバーのテキスト色は選択したタブテキストの色と同じにする。
    ツールバーボタン(ダウンロードツールバー)テキスト色はブックマークテキストの色と同じ。

  3. 色調 - この色調エレメントはツールバーの全てのボタン内(戻る、次へ、再読み込み、など)の色調を指定します。色調の値は0から1または-1の範囲内の浮動値。このマニフェストファイルではもっとも頻繁に使用される「ボタン」エレメント一つのみを使用しています。
  4. 色調の値は0から1または-1の浮動値です。-1を使用するとエレメントの色は変化しません。色調値は[色調、彩度、輝度]の順に構成されているので0.346, 0.1, -0.5などの値が使用できます。ボタンが目立つように、またはうまく調和するようにこれらの値を調整します。

  5. プロパティ - テーママニフェストではプロパティセクションを使って、メイン背景画像の動作を調整します。画像を上、下、または中央に配置し、x軸、またはy軸に沿って画像を繰り返す、または繰り返さないなどの調整が出来ます。

ブログ「不定期日記」さんでも解説がありましたので、合わせて参照してください。

これでマニフェストファイルは作成済みとなるのでこれを「マイテーマ」フォルダに保存します。




マニフェストファイルを保存した後のフォルダは上の画像のようになるはずです。マニフェストとClassic Chromeテーマ用の画像が入ったシンプルテーマパッケージはここからダウンロード出来ます(ZIPファイル)。このファイルを初期段階の参考にして新しいテーマの作成に活用してみて下さい。


手順4: テーマのパッケージ作成およびプレビュー

ここまでの手順で、画像ファイル、マニフェストファイルは揃いました。ここからはテーマのテストを行って行きます。まず最初にGoogle Chromeを立ち上げ、アドオンページを開きます。これは"chrome://extensions/"とアドレスバーに入力し、エンターキーを押すと開くことが出来ます。

そこから右にある"開発者モード"リンクの隣にある+サインをクリック。ページの上部にいくつか新しいオプションが表示されるので"アンパックアドオンを読み込む"をクリックし、"マイテーマ"フォルダへナビゲートします。

マイテーマフォルダをクリックし、OKをクリックするとテーマがブラウザに読み込まれます。全てが思い通りに出来ているかどうかを確認して下さい。

トラブルシュート: アドオンを読み込めませんでした、というエラーダイアログが表示された場合、マニフェストファイルのJSON形式が有効かどうかを確認して下さい。manifest.json.txtやmanifest.json.rtfではなくmanifest.jsonが正しい形式です。マニフェストファイルの形式に問題があるかどうかはJSON validatorで検証することが出来ます。エラーメッセージがある場合、エラーが怒った行数が表示されるので、修正はさほど難しくありません。

プレビューを見て満足の出来映えであった場合、パックアドオンボタンをクリックすると、Chromeはテーマを作成し、マイテーマフォルダのペアレントフォルダに保存します。

この操作によりテーマ用のPEMまたはプライベートキーが作成されます。これはChromeアドオンギャラリーにアップロードした後にアプリを更新する際に必要となります。万事順調であれば.crxファイル、.pemファイルが作成されました、というメッセージが表示されるはずです。またこれらのファイルの場所も表示されます。

上記の手順を何度かやってみると、Chromeのテーマ作成がいかに簡単か、どれほどのカスタマイズが可能なのかが良く理解出来るかと思います。

上記のマニフェストにはクールなテーマ作成に便利なエレメントがいくつか含まれているのでぜひ活用してみて下さい。またテーマ作成についてより深く知りたい方はテーマ作成ガイドこちらのブログを参考にしてみて下さい。

Chromeテーマ作成用のリソースはオンラインにもデスクトップにもありますが、それぞれに制限があります。一番大きな制限は2MB以上のファイルをアップ出来ない、ということです。オフラインのテーマ作成ツールもかなりベーシックなものしかなく、バグも多いのが現状です。しかも最初のリリースからChromeはどんどん変化して行っているのに対してこれらのツールはこの変化に追いつけていない感じです。

今回紹介した手順でどんなテーマが作成出来るのかをもっと見てみたい、という方はGoogle Chromeテーマギャラリーで私たちが作成したテーマをご覧下さい。

この手順は一見、難解そうに見えますが、やってみるとさほど難しくもないです。基本的な画像編集やシンプルなコードのコピペに慣れている方であれば問題なく出来るかと。

やってみた方は感想をぜひコメントで教えて下さい。また、質問がある方、補足説明などもぜひコメントでお寄せ下さい。



Vikram Kinkar (原文/まいるす・ゑびす)

 













RSSリーダーで見るために変換しています


iPhoneから送信

iKnow! - 覚えやすく、忘れにくい、確実に身につく英語学習サービス

Bylineから


脳科学に基づいた

学習メカニズム

覚えやすく、忘れにくい
確実に身につく英語学習サービス
それが”iKnow!”です。


無料トライアルキャンペーン中!

無料トライアルはこちら

通常月額料金 \1,000(税込)のところ、

2011年2月28日まで無料でご利用頂けます。

会員ログイン


Smart.fm会員の方へ
Smart.fmのIDでログインすることにより、
キャンペーン中は無料でご利用いただけます。
※2011年3月31日まで

iKnow! 英語学習の特徴

覚えやすく、忘れにくい

効果的な学習

覚えやすく、忘れにくい 効果的な学習

TOEICに、ビジネスに

目標に合わせたコンテンツ

あなたの目標に合わせた学習コンテンツ

充実した機能で
あなたの学習をサポート

充実した機能で学習をサポート

覚えやすく、忘れにくい 効果的な学習

従来の学習方法では、せっかく覚えたことも時間が経つにつれて忘れてしまいます。iKnow! では記憶の低下を計算し、最適な学習タイミングをお知らせするので、効率よく学習を行なうことができます。それだけでなく、学習した英単語や文章を長期的に記憶し、必要なときに引き出せるようになります。

あなたの目標に合わせた学習コンテンツ


iKnow! の学習コンテンツは、さまざまな目的に対応できる幅広いラインナップ。英語力の基礎固めや日常英会話、TOEIC対策からハイレベルなビジネス英語まで、具体的な目標に合わせた学習が可能です。
全てのコースをみる

充実した機能で学習をサポート

学習を効率的に進める、iKnow! アプリケーション

iKnow! では、脳科学に基づいたテクノロジーと学習効果を上げるのに有効な工夫が満載の「iKnow! アプリ」を使って学習を進めていきます。

あなたの学習をナビゲート

ユーザーそれぞれの学習をナビゲートするメッセージが表示され、一目で自分の次にやるべきことを確認できます。メッセージに従ってスムーズに学習を進められます。

iKnow! を持ち歩いて、どこでも学習

学習状況を同期させ、スマートフォンタブレットPCでも学習できる専用のアプリケーションを使えば、通勤、通学中や外出先でもiKnow!の学習を進めることができます。
※近日リリース予定

スキルアップレーニン

iKnow! アプリで習得した語彙力をベースに、総合的なスキルアップに役立つトレーニングを行うことができます。


RSSリーダーで見るために変換しています


iPhoneから送信

スーパーエンジニア達の習慣 | HIROKI.JP

Bylineから




`

RSSリーダーで見るために変換しています


iPhoneから送信

定番ツールをまとめてダウンロードしてくれるサービス「Allmyapps」*二十歳街道まっしぐら

Bylineから




定番ツールをまとめてダウンロードできる


Allmyapps」は定番ツールをまとめてダウンロードできるサービスです。
よく使うツールがたくさん揃っており、必要なものを選択してダウンロードできますよ。

自分が必要なツール一覧でも作っておけば便利です。

専用のツールを使ってダウンロード&インストールができます。
ウェブからもマイリストの作成などが可能です。
自分が作ったツールリストは、友達と共有することができますよ。

以下に使ってみた様子を載せておきます。


「Allmyapps」で好みのツールをダウンロード


まず「Allmyapps」にアクセスしましょう。
あとで必要なので、無料登録しておきます。

無料登録後、ウェブから必要なツールを選択してマイリストを作ることができます。


ウェブからインストールしようとすると、専用のツールはいれていますか?と警告がでます。

専用のツールを入れてない場合は、そのときにインストールしちゃいましょう。

専用のツールを入れると、ツールからも利用することができ便利です。

カテゴリに分かれていて、絞り込みやすいです。検索機能も備わっています。

必要なものを選択したら、ダウンロードしてインストール。

まとめて必要なアプリをダウンロードしてくれますよ。


ひとつずつダウンロードしてインストールしてを繰り返すのが面倒な方は是非ご利用下さい!

 本記事で紹介したサイト

 この記事をみた人はこんな記事も見ています

 前後の記事もどうぞ

 この記事をブックマーク/共有する







 このブログを購読しますか?
GoogleリーダーなどのRSSリーダーを使うと、このブログの更新情報をいち早くキャッチできます。このブログのRSShttp://20kaido.com/index.rdf)を登録すれば、更新されるたびに概要(記事タイトル・冒頭)が手に入ります。

また、メールマガジンによる更新情報の配信もおこなっております。下記フォームよりご登録ください。

 管理人へ連絡する
・メール

 20kaido@gmail.com


Twitter

 @kamekiti


・お問い合わせフォーム

 http://...

何か気になることがありましたら、お気軽にご連絡ください。


記事公開日:2010年12月25日 コメント(0)


RSSリーダーで見るために変換していますo


iPhoneから送信