サイト内検索

 

プロジェクト

 

スタッフのネタ帳

 

リンク

 

スタッフのネタ帳: 記事一覧

皆様あけましておめでとうございます。
本年もよろしくおねがいいたします。
 
昨年末に開発中のWindows Mobile®対応ゲームアプリケーション試作版の
Touch Diamondによるプレイ動画をyoutubeにアップいたしましたので、
こちらにも掲載させていただきます。
 
「キセキどろっぷ」

テストデータを入れての1ステージプレイです。
 
3種類のジェスチャー(軌跡)による魔法で敵を倒します。
 
【岩】閉じた円形を描くと、岩が出現します
【雷】縦に線を描くと、雷が出現します
【水】横に線を描くと、水が出現します
 
更に組み合わせる事で強力なコンボ攻撃が発生します。
 
短時間で遊べるステージクリア型のシンプルなパズルアクションゲームとして目下制作中です。
 
「RagingGEAR」

基本機能を実装したプレビューバージョンです。
 
【画面タッチ】移動&攻撃
【アイコンタッチ】武器切り替え・アイテム使用。
 
プレイ感はディアブロやMMORPGのマウス操作に近い形です。
 
撮影したカメラの性能が悪く所々ぶれてしまっていますが、2D俯瞰視点のマップ描画&多数のモンスター表示でも、まずまずスムーズに動いています。
 
Windows Mobile®向けゲーム開発では、
グラフィックの描画速度が一つの懸案事項だと思いますが、
ファインでは若干余裕を持たせて15fpsでの動作を想定しています。

コメントする

カテゴリー: こんなんできます!   投稿者:finelab
 

こちらの記事で紹介させて頂きましたWindowsMobile®対応ビリヤードゲーム「Fine Shot!」ですが、本日より発売を開始いたしました。
 
BBソフトダイレクト様のサイトからご購入頂けます。
 
詳細はコチラ
 
無料体験版(フリー)もご用意しておりますので、TouchDiamond[TM]をお持ちの方は是非お試しください!
 

ファインでは引き続きWindowsMobile®向けゲームソフトウェアの開発を行っております。

◆第二弾は「キセキどろっぷ」

kiseki_001.jpg


ガイコツだけどちょっぴりカワイイ魔法使いが主人公のアクションパズルゲームです。
Touch操作ならでは楽しみが詰まったゲームを目指し、制作を進めています。ご期待ください。

コメントする

カテゴリー: こんなんできます!   投稿者:finelab
 

ファインではプレスリリースにて発表させて頂いた通り、
「Windows Mobile®」向けコンテンツの開発に取り組んでおります。
 
Touch操作で本格派ビリヤード 『Fine Shot!』


 
第一弾は直球勝負のビリヤードゲームです。

現段階で対応端末としておりますのはX04HT(Touch Diamond[TM])ですが、Windows Mobile 6 Professional相当が搭載されている端末で動作するものと思います。
※ベースになっているゲームのシステムはWindows Mobile5.0端末でも動作するコードを書いています。(東京ゲームショウ2008で展示させて頂きました)
 
『無料体験版もご用意いたしますので「なんだビリヤードか」なんて言わず、ちょっと遊んでみて頂けると有難いです。丁寧に組み込んだ「リアルな玉の動き」を体感して頂けると思います。
 
開発会社が参入しアプリケーション市場が充実していくためには、ユーザー様からのご意見や支援、そして何よりご購入頂く事が重要です。
 
もうちょっとで発売できると思いますが・・・今暫くお待ちください。

ゲームに関する詳細はこちら
http://game.fine-net.com/smartphone/

コメントする

カテゴリー: こんなんできます!   投稿者:h.kusumoto
 

kusumoto@FINEです。
 
ファインの取り組んでいるビジネスは、ネットワークを中心として多岐に渡っています。
 
事業内容としては以下の通りです。
   1. 携帯電話向けコンテンツ(アプリ・サイト)制作
   2. ネットワークゲームサーバーおよびライブラリの開発・販売・運用
   3. WEBコンテンツ制作・運用
   4. ブロードバンド映像配信ソリューションの開発・販売
   5. 携帯・WEB・紙媒体の執筆、撮影活動およびイベント演出プランニング
 
ここではもっと具体的なレベルの
 
「こんなんできます!」を、
 
私の営業活動の一環として書かせて頂きます。
 
クライアントの皆様、検索エンジンからいらっしゃる皆様、
面白いお仕事お声掛けください!!
 
案件のご相談やお見積⇒お問い合わせはこちらから

コメントする

カテゴリー: こんなんできます!   投稿者:h.kusumoto
 

オツカレサマです
FINEのhoriですよ

 

いやー、、、
かなり更新しない日が続いてしまいました。
これじゃ本当に三日坊主になるとこでしたよ
アブナイアブナイ

 

かなり久しぶりになってしまいますが、
【horiが感じたデバッガーの心得言葉】3回目でいきますよ。

 

◆【テストはなるべく二人三脚以上で】 by とある本の中身
品質管理の仕事を始めてから、ソフトウェアのテスト関連の本を
読むようになったのですが、
ある本の中にこの言葉が書かれてました。

 

今、horiは品質管理部門内で、
テスト作業メンバーの振り分け等も行っていますが、
テスト端末が足りない!とかや『人数がいないよっって時以外は、
なるべく、一つのプロジェクトに二人以上で、
担当してもらうように分担しております。

 

なぜ、一人ではダメなのか、、、?
その本にも、この理由が書かれておりましたが、
今回はあえてhoriなりの解釈で解答させていただきます。

 

テスト担当者同士で足りない知識を共有できる
例えば、ゲームのデバッグに特化したスタッフと、
プログラムの知識があるスタッフが組んだ場合、
これはすごい効率的になると思われます。
他にも、プロのデバッガーと新人さんとの組み合わせは、
簡易的ながら師弟関係を結ぶことができます。

 

担当者同士で共同戦線が張れる
これに限っては共同戦線が対立戦線に化ける可能性がありますが、
お互いに一つの目標に向かって作業を進行できることは、
なによりも建設的です。

 

お互いをフォローしあえる
やはり、一人で黙々と作業を行うよりかは、
同じ仕事を行う仲間がいるほうが
作業効率的・精神的に色々と心強いです。

 

ただ、プロジェクトが回りすぎてしまうと、
上記の内容も霞みに霞んで夢物語になってしまう可能性が大ですが、
せっかく同じ職場にいるわけなので、
(ちょっと青春ドラマ的になってしまいますが、、、)
一緒に楽しく作業ができる仲間がいてくれた方が、
楽しくハッピーに仕事が送れるとhoriは思いますよ。

コメントする

カテゴリー: デバッガーの独り言   投稿者:hori
 

第2回です。
前回でAIRを作成する環境を作成しましたので、
今回はAIRファイルを作成し、アプリケーションをインストールできるようにするところまで
解説したいと思います。

 

■下準備(flaファイルの作成)
1.ファイルの新規作成
 AIRではActionScript3.0を使用しますので、
 ファイル→新規から「新規ドキュメント」ウィンドウを開き、
  Flashファイル(AS3.0)を選択します。

2.パブリッシュの設定を変更
 プロパティからパブリッシュ設定を開き、
  バージョンを「Adobe AIR1.0」に設定します。
  (AIR1.1に対応させても、この部分は変更されないようです。)

以上で下準備が完了です。
次からの設定はファイルが保存されている必要があるため
ここで1度ファイルを保存しましょう。

半角英数字のみでファイルパスを表せる場所(C:直下など)に保存し、
ファイル名も半角英数字で設定しておくと、このあとの設定が簡単です。
ここでは仮に「airtest.fla」とします。

AIRではファイル名やファイルパスに2バイト文字が使えませんので
日本語のファイル名を使ったり、日本語のフォルダに入れると後で警告がでてしまいます。

AIR_2_1.jpg

 

■設定
1.「コマンド」から「アプリケーションとインストーラの設定」を開き、
  インストーラ設定の電子署名を設定します。
  「変更」を押して「電子署名」のウィンドウを開きます。

2.「電子証明書付きのAIRファイルに署名」にチェックが付いていることを確認し、
  「作成」から開くウィンドウの各項目に情報を記載します。
  入力が完了したら、「OK」を押して証明書を作成します。

3.「電子署名」ウィンドウのパスワード欄に、先ほどの電子証明書の設定画面で登録したパスワードを入力します。
  これでAIRファイルを作る準備が完了しました。

4.「コマンド」から「AIR - AIRファイルを作成」を実行します。
  「airtest.fla」と同じフォルダに「airtest.air」が出力されていると思います。
  これでインストール用ファイルが作成されました。
 
  AIRのランタイムが入っているPCならば、ダブルクリックで
  作成したアプリケーションをインストールすることができます。

AIR_2_2.jpg

※アプリケーションとインストーラの設定のその他設定項目
  以下の項目は特に変更しなくても問題はありませんが、
  簡単にわかりやすいもののみ紹介します。

  ・ファイル名
    デスクトップに作られるショートカットや、プログラムメニューで表示される名前になります。
  ・名前
    インストール時に表示されるアプリケーション名を設定します。
  ・説明
    インストール時に表示されるアプリケーションの説明文を設定します。
  ・ウィンドウスタイル
    AIRを実行した時のウィンドウの状態について設定します。
    システムクローム:OS標準の枠がつきます。(閉じる、最大化、最小化など)
    カスタムクローム(不透明):OS標準の枠がつかなくなります。
    カスタムクローム(透明):OS標準の枠がつかず、さらに背景が透過されます。
  ・アイコン
    AIRアプリケーションをインストールした際に表示されるアイコンを設定できます。
    環境にもよりますが、Windowsでは16*16のアイコンはプログラムメニューで、
    32*32のアイコンはデスクトップのショートカットなどに使用されます。

 

次回は実際に簡単なAIRアプリケーションの開発に入っていきたいと思います。

コメントする

カテゴリー: Adobe Air   投稿者:ichida
 

はじめまして。
FINEのスタッフ「ichida」です。このコラム、「スタッフichidaのAIR・REAL!!」では、普段FlashやAIRのアプリケーション作成を仕事としている私が感じたことや直面した問題、それらの回避方法などの「リアル」な話を定期的に掲載していきたいと思います。
一応AIRで…とのことなので、AIRメインになるとおもいますが。

さて、今回はまずAdobe AIRの紹介とインストール方法について書いています。
ガチガチの文章で読みづらい部分があるかもしれませんが、第1回ということで御了承を。。

 

 

■Adobe AIRとは

Adobeが開発したアプリケーションの実行環境で、WindowsやMac、将来的にはLinuxや携帯電話もサポートする計画が進行しています。
各OSの環境の違いをAIRが吸収し、同じアプリケーションが同じように動作することがおおきなメリットとして上げられます。
また、開発にはWEB系開発技術者になじみの深い、ActionScriptやJavaScript、HTMLが使用できるため、これらを理解していれば新しい言語として1から学ぶ必要が無く、非常に敷居の低い環境といえます。

かくいう私も、ブラウザに頼らずに表現できるアプリケーションを作りたいと思いつつもWindowsのプログラミングを勉強するのには二の足を踏んでいた状態だったため、AIR(当時Apollo)が発表された時は歓喜したものです。(笑)

 

 

■準備

AIRの開発を行うためには下記ような環境のいずれかを整える必要があります。
・Flex Builder
・Flash
・Dreamweaver

上記は有償のツールですが、これ以外にも無償のAdobe AIR SDKとテキストエディタを使って制作する方法もあります。
ですが、ここでは一番普及しており、かつデザイナでもプログラマでも触りやすい、Flashに絞って説明します。

1.Flash CS3 Professionalのインストール
まず、Adobe Flash CS3 Professionalをインストールしてください。
バージョンに注意してください。これは、このバージョンでしか今のところAIRの開発環境が提供されていないためです。
有償のツールですが、Adobeのサイトには無償の体験版も公開されているので、Flash CS3をお持ちでない方はまずそちらをインストールして試してみるのがいいかもしれません。
体験版ですが、使用日数に制限があるものの機能的には有償版と違いがありません。

 

 

2.AIR用アップデート
次にAIR用アップデートを実行しましょう。
「Adobe AIR:ツール http://www.adobe.com/jp/products/air/tools/」の
「Flash CS3 Professional用Adobe AIRアップデート」リンクから「Adobe Flash Support Center(英語)」へ移動し、
対応する「Adobe AIR Update for Flash CS3 Professional」をダウンロード・実行します。

AIR_1_1.jpg
AIR_1_2.jpg

 

 

3.AIRのバージョンアップ
2までで、AIRアプリケーションを作れる環境が整いました。
ですが、このままではAIR1.0で、アプリケーション名や説明等に日本語を使用することができません。
「Adobe AIR 1.1 Update for Flash CS3 Professional」の「Installing Adobe Air 1.1 Update for Flash CS3 Professional」から
http://www.adobe.com/go/getaikwin」にアクセスし、AIR1.1アップデート用ファイルをダウンロードしてください。
このあとのインストール方法は「Adobe Flash Support Center(英語)」の「Adobe Flash Support Center(英語)」にある「日本語」リンクからダウンロードできるpdfの説明に細かく記載されていますので省略します。

AIR_1_3.jpg

以上でAIRを制作するための全ての設定が完了しました。
次回からはAIRの設定について解説します。

 

つづく(ichida)

コメントする

カテゴリー: Adobe Air   投稿者:ichida
 

Mac miniを手に入れた直後に知っておくと良い事、
既に作業PCを持っているWindowsユーザーを想定して書きます。
(続き…)

コメントする

カテゴリー: iPhoneネイティブアプリ開発   投稿者:h.kusumoto
 

FINEの携帯電話

08-08-27(Wed)

オツカレサマです
FINEのhoriですよ

 

2週間続いて、デバッガー言葉な記事でしたので、
今回はちょっとそれはお休み。
代わりに、FINEの携帯電話事情な記事でいきますよ。

 

FINEの業務の一つに、携帯電話上で動く
コンテンツ開発を請け負ってますよ。

 

もちろん、携帯電話での実機チェックが沢山発生します。
これが、今のFINEの携帯電話置き場ですよ。

携帯電話1.jpg

いーーーっぱい端末がありますが、
これでも、全体の30%くらいですよ。
これ以外の端末は、他の人の机に出張中ですよ。

携帯電話2.jpg

(FINEの某社員の方の机ですよ)

みなさんの会社では、
docomoSoftBankのSIMカード管理ってどうされていますか?

 

アレって、カードが入ってないと通信が出来なかったり、
カードごとに電話番号やメールアドレスがかわっちゃったりで、
なかなか慣れてないと、難しいものですよね。

 

FINEでは、【ドッグタグ作戦】で
カードの入ってる端末を認識してますよ。

携帯電話3.jpg

カードが入ってる端末にタグを取り付けて、
カードが他の端末に移動するときに、カードとタグを取り外し、
移動先の端末に、
カードとタグを取り付けますよ。

 

これをやる前は、カードが入ってるか入ってないかで、
一個一個、端末の電池パックを開けて調べて開けて調べて,,,
だったので、タグがついてからは、
その手間が省けてかなり楽チンに!

 

タグの一個一個には、
そのカードの電話番号メールアドレスも記載されてるので、
番号調査の手間も省けて一石二鳥です。
さながら、軍人さんのドッグタグと、
あんまり変わらない感じですよ。

 

みなさんも、
うちの会社じゃ、こんな感じにやってるよっ
みたいなのがありましたら、
ぜひとも教えてください。

 

 

コメントする

カテゴリー: デバッガーの独り言   投稿者:hori
 

iPhoneアプリの開発を行うにあたって必要なハードウェア、
開発マシン用Mac(Intel社製CPU搭載)について。
(続き…)

コメントする

カテゴリー: iPhoneネイティブアプリ開発   投稿者:h.kusumoto
 

オツカレサマです
FINEのhoriですよ

 

先週に引き続き、
【horiが感じたデバッガーの心得言葉】2回目でいきますよ。

 

◆【テスト担当者は推測で不具合報告をしてはいけない】 by レジェンドな人
この言葉も、先週の言葉とおんなじ先輩の社員の方が、
言ってくれたことですよ。

 

『推測は×』といえども、
自分の中で推測する分には、全然OKなのですよ。

 

なにがNGなのかというと、
その推測の分を、検証・確認をしないまま、
不具合報告してしまうことですよ。

 

そもそも、不具合の報告をする時って、
製作担当の方の手元で、その不具合を完全に再現してもらうために、
行うものと考えております。

 

それを推測で不具合報告してしまうと、
かえって混乱を招いてしまうことが多いですよ。

 

例えば、これの悪い例をバグペで表すと,,,
こんぼう・鉄の剣を装備したときに、
 
 仕様ではこんぼうは+10、鉄の剣は+30の攻撃力があがりますが、
 
 現在は、それぞれ仕様の値から-5された攻撃力があがります。
 
 たぶん、武器の全部の武器の攻撃力が-5されてると思います。

上記のバグペでは、前半の内容はOKなのですが、
後半の【たぶん〜〜】からの内容がNGですよ。

 

もしかしたら、数値が-5されているのは、
こんぼうと鉄の剣だけかもしれないし、
他の武器にも元データと数値が違うものが、ないとも言い切れない状態です。

 

このバグペを提出すると、
製作担当の方に、もう一度仕様書を見直してねって言ってるようなものなので、
テスターチェック⇒【担当者チェック⇒【修正】で
チェックに二度手間が発生してしまいますよ。

 

コレに限っては、
テスターの方で武器の数値を洗い出して、
元データとは違う武器を報告すれば、
テスターチェック⇒【修正
で、余計な手間がなくなりますよ。

 

不具合報告は、ありのままで真実だけを報告したほうが、
修正に至るまでの時間が短時間ですむ場合が多々あると思いますよ。

しかし、推測分は推測分で重要な情報であったりするので、
そっちの分は、バグペに書かずに、
メモを取っておくなり、口頭で担当者に報告するなりすると、
二重にパーフェクトですよ。

 

 

コメントする

カテゴリー: デバッガーの独り言   投稿者:hori
 

オツカレサマです
FINEのデバッガーのhoriといいますよ

 

ここのページは、FINEの品質管理業務において、
思ったりしたことを、ソロリソロリと書いていきますよ。

 

最初の内容は、
【horiが感じたデバッガーの心得言葉】ですよ。
アルバイト時代を入れて、だいたい5年くらいになった、
デバッガー人生の中で、『これはッ!!』っと思ったものを、
備忘録も兼ねて記載しますよ。

 

◆【バグペは客観的に書く by 尊敬する人 
これは、horiがアルバイトで品質管理業務を初めて触れたときに、
先輩の社員の方が言ってくれたことです。
基本中の基本ですけど、
この言葉はやはり忘れられないですよ。

 

いまだから、実感できるのですけど、
主観で書かれたバグペほど、技術者(SEさんやデザイナーさん)に、
提出できなくなってしまいますよ。

 

たとえば、あるアクションゲームの制限時間の要望のバグペを提出するときに、

ステージ3で時間がたりません。

 修正してください

っと書いてしまうと、自分の主観の感想になってしまいます。
きっと製作している方も、どう修正すればいいのかわかんなくなってしまいますよ。
(↑最初のhoriのバグペもこんな感じでした,,,  猛省)

 

もし、上記の文を今のhoriが書くとしたら,,,

ステージ3にて、スタート地点からまっすぐゴールに向かった場合に、

 残り時間が約10秒の状態でクリアすることができます。

 上記の状態だと、アイテムを探したり、

  ボーナスステージに侵入することが困難な状況ですので、

 ステージ3の初期の制限時間を30秒程、

  加算していただけますでしょうか

っと書くと思いますよ。

 

最初の書き方だと、
今の状況(自分主観)だけですけど、
2番目のやつだと、
今の状況(客観)】⇒【これがやりたい(できない)】⇒【だからこうして欲しい

的確に伝えることができると思いますよ。

 

いまの内容は、全部先輩の社員の方の受け売りですけど、
仕事に慣れてきちゃうと、どうしても忘れがちになっちゃいます。
horiも『初心忘れるべからず』で精進していきたいです。

 

まだまだ、未熟者なhoriですけど、
地道に更新がかけれたらいいなっと思うので、
よろしくお願いしますね。

次回も、引き続き
【horiが感じたデバッガーの心得言葉】でいきますよ。

コメントする

カテゴリー: デバッガーの独り言   投稿者:hori
 

iPhone/iPod touchとAppStoreの登場は、モバイル業界各社にとって大きなビジネスチャンスです。

ここではiPhoneネイティブアプリ(以降このカテゴリではiPhoneアプリと表記します)の開発を考えている方や開発に取り組もうとしている方々へ向けての記事を掲載していきます。
(続き…)

コメントする

カテゴリー: iPhoneネイティブアプリ開発   投稿者:h.kusumoto
 

ヒューマンインターフェースとは、人間の特性に合わせてインターフェースを創造していこうという考え方を指します。

iPhone向けコンテンツの場合は特に、インターフェースの良し悪しがコンテンツ自体の出来を左右するといっても過言ではないでしょう。
操作感の気持ちよさがウリのiPhoneなので、インターフェースが最悪なウェブサイトやアプリケーションを作っても、全く意味がありません。

ヒトが最も自然に理解でき、最短距離で欲しい情報を提供できるUIってどんなものなのか?
指を使って操作するって、どういうことなのか?

タッチパネルで使いやすいインターフェースを設計するために、
理解しておきたいことをまとめてみました。


 

 

  • スマートなWEBアプリってどんなの? (準備中)

 

 

  • iPhoneウェブコンテンツにおける「ユーザーエクスペリエンス」とは (準備中)

 

 

  • カッコよくて使いやすいUIを実現するには  (準備中)

 

コメントする

 

やはり、デスクトップ版Safariにはない制限が色々あります。


  • GIF、PNG、TIFF画像のデコードサイズ制限は2メガピクセル。
    つまり、width × height ≤ 2 × 1024 × 1024 でなければいけません。

 

  • サブサンプリングで圧縮されたJPGのデコードサイズは32メガピクセルまでOK。
    サブサンプリングで圧縮すれば、サイズが16分の1になります。
    デジカメの写真を大きいまま表示させたい場合は、こちらがよいでしょう。

 

  • アニメーションGIFのデコードサイズは2MBまで。
    それより大きいものは最初のフレームだけしか表示されません。

 

  • canvas要素は2MBまで。
    大きさ指定なしだと150×300ピクセルとなります。

 

  • HTML、CSS、JavaScript、ストリーミングなしのメディアファイル等、それぞれ10MBまで。

 

  • JavaScriptの実行時間は10秒未満であること。
    10秒以上経過するとSafariから強制ストップがかかり、思わぬ結果につながる事があります。
    ※iPhone OS 1.1.4までは、5秒未満で割り当てサイズは10MB

 

  • Safariのウインドウは1度に8個までしか開かない。

 

  • 画像の拡大・縮小をブラウザ上で行わないこと。
    表示サイズ=元画像サイズであること。
    背景画像を使う場合、大きい画像を使うのではなく、小さい画像のタイルで対応してください。

 

  • Web Fonts は使えない。
    デスクトップ版Safariで対応している「Web Fonts」(サーバー上にあるフォントでサイトを表示すること)は使えません。

 

  • showModalDialog() と、print()メソッドはサポートされてない。

 

  • 全てのマウスオーバーイベントとHoverスタイルは使えない。ツールチップも。
    マウスの概念がないので対応していません。

 

  • Javaアプレット・Flash・SVG・XSLTは使えない。

 

  • プラグインのインストールはできない

 

  • カスタムのx.509証明書もサポートされない。

 

  • WML(Wireless Markup Language)はサポート外。
    代わりに、XHTMLのモバイルプロフィールのドキュメントタイプを使用します。
    < !DOCTYPE html PUBLIC “-//WAPFORUM//DTD XHTML Mobile 1.1//EN” “http://www.openmobilealliance.org/tech/DTD/xhtml-mobile11.dtd”>

 

  • デフォルトでは、ポップアップブロックがONになっている。
    設定画面でOFFにすることができます。



原文は、Safari Web Content Guide for iPhone OSを参照してください。

 

コメントする

カテゴリー: iPhoneとWebコンテンツ   投稿者:murase
 

iPhoneで使いやすいインターフェースを設計するために、知っておきたいことをまとめてみました。

(更に詳しい情報は、iPhone Human Interface Guidelines を参照してください。)

 

 

メタファ(比喩的表現)を効果的に取り入れる


  • iPhone OS上に存在するメタファー(スイッチやスライダなど)を作成コンテンツ内で使用する場合、見た目や使い方を勝手に変えないこと。
  • 無理にメタファを取り入れることで、操作がわかり辛くなっていないか注意すること。誰にでも理解できるものであること。

例えば、デスクトップにあるゴミ箱のアイコン、これがメタファーです。(ちなみにAppleが発案し、今ではどのパソコンにもこのアイコンがあります)
またiPhoneでは、指タップでのコントロールやスイッチをスライドすることでON/OFF切り替えを行うなどのメタファーを取り入れています。現実世界の行動を基にしているので、とても分かりやすいですね。

直接的に操作できるか?



  • ユーザーが操作しているオブジェクトは、常に画面上に表示させておくこと
  • アクションに対しての結果をすぐに画面へ反映すること

iPhoneでは、画面上のオブジェクトを指で直接操作するため、アクションに対する結果が理解しやすくなっています。マウスなどの中間デバイスを介さないことで、ユーザーとコンテンツの距離を縮めています。

入力事項が多すぎないか?



  • テキストの入力フォームは最小限に抑え、ポップアップリスト等で代用すること。

ユーザーにテキストをチマチマ入力させるのではなく、選択肢のリストから選ばせることで操作がシンプルになります。また、不要なテキスト入力を省き、最小限にとどめることで制作時のデバッグも楽に行うことができます。

フィードバックを忘れないで



  • ユーザーが時間のかかる処理をする場合は、その経過(「送信中・・・」等のステータスレポート)を表示し、操作の結果をすぐ画面に反映すること。
  • 例えばタップしたリストアイテムをハイライトで表示させるなど、ユーザーのアクションに対して視覚的にレスポンスをする。
  • 音声によるレスポンスも効果的であるが、ユーザーが音声をOFFにする場合もあるので、上記のような視覚的レスポンスと必ず併用すること。
  • ユーザーが聴き慣れているiPhone OSのシステムアラートの音と競合しないよう気をつけること。
  • アプリケーション内での処理時間が2〜3秒間以上に及ぶときは、経過を画面に表示し、必要に応じてテキストで説明すること。

インターフェースの世界のフィードバックとは、人間のアクションに対して機械が返答することを指します。テキストメッセージやアニメーション等の視覚的なもの、プッシュ音等の聴覚的なもの、あるいはバイブレーション等による触覚的なものもあります。 
 

快適に使ってもらうために



  • なるべくユーザーが既に慣れているスタンダードな操作方法を採用すること。
  • 操作して処理が始まる前に、その操作をキャンセルできる機会を設けること。特に、重大な処理の場合(データの消去など)、その処理を本当に行うかどうかの確認が必要である。また可能であれば、処理途中でもキャンセルできるようにしておく。

 

コンテンツの見た目について


  • iPhoneのコンテンツは、見た目がとても大事である。といっても、単に美しいグラフィックかどうかではなく、そのアプリケーションの機能に相応しいデザインが必要ということである。

アプリケーションの外観は、機能面において多大な影響を持ちます。たとえば、意味も併せて一般的に認識されている色使いがありますが(黄色と黒の「警告」等)、これらの扱いにも注意が必要です。見た目が非論理的で無秩序なコンテンツは使い辛いものになってしまいます。

コメントする

 

ウェブサイト/ウェブアプリのショートカットとして、iPhoneのHome画面にアイコンを追加することができる。

iPhone ウェブクリップとは

別に何もしなくても自動でサムネイルを作ってくれるが、トップページを縮小してあるだけだしちょっと味気ない。  せっかくiPhoneに特化したサイトやウェブアプリケーションを作るのなら、アイコンもカスタマイズしてみよう。

◆ アイコン画像を用意する
下記条件を満たした元画像を用意すれば、iPhoneが自動的に変換してくれる。

  • PNGフォーマット
  • 57×57ピクセル
  • 角は直角
  • グロス効果やドロップシャドウ等は無し

 

◆アイコン画像の格納と設定
サイト全体のアイコンを設定するには、上記のPNG画像を”apple-touch-icon.png”と名前を付けてウェブサイトのルートフォルダに入れる。これだけで、サイト内の どのページをウェブクリップされても、カスタマイズされたアイコンで表示される。

iPhone Webclipアイコン・・・iPhone側で視覚効果をつけてくれる

一方、ページごとに特定のアイコンを設定する場合は、htmlヘッダ内に下記コードを記載する。

<link rel="apple-touch-icon” href="/custom_icon.png"/>

custom_icon.png は 任意の名前をつけ、ルートフォルダにアイコン画像を入れる。
ルートフォルダ以外に格納する場合は、パスを指定してやるとよい。

コメントする

カテゴリー: iPhoneとWebコンテンツ   投稿者:murase