Author Archive

{ 2012.12.10 }

Android キーボードの出現と同時に画面がスクロールしないときに

    category：Android｜author：｜tag：｜comment：non

    はてなブックマーク - Android キーボードの出現と同時に画面がスクロールしないときに
    このエントリーをはてなブックマークに追加

    こんにちは、山本です。
    最近はUXに興味をもち、勉強会を開催しているのですが、今回はAndroidのEditTextに関わるお話です。

    Objective-cにおけるUITextFieldとキーボードの関係

    Androidと言いながらまずはiPhoneの話ですが、iPhoneを作られた方なら一度はこんな経験ありませんか？

    “テキストフィールドにフォーカスを当てると、キーボードで隠れる”

    とくに意識せず作っちゃうと、キーボードの高さ分画面が上部に動くことは無いので
    ・UIScrollViewにする
    ・キーボードの高さを計算して、キーボードの出現と同時に手動で画面を上部に移動させる
    のような対処が必要です。

    ※ページの下部にあるテキストフィールドが


    ※キーボードの出現で隠れる

    Androidは機種によって挙動が違う！

    これがAndroidなら、単純に作ってもオンフォーカスと同時に、もしテキストフィールドがキーボードで隠れるようなら勝手に画面を押し上げてくれます。(OS4.0で作成時）
    しかし、一部の機種ではキーボードの出現と同時に画面が動かない！　いわゆる機種依存ということになるのでしょうか。
    ああ、こまった。。

    EditTextの背景色と右寄せに注意

    なぜそういうことが起きるのか。まずは以下のソースをご覧ください。

    <EditText
        android:id="@+id/editText1"
        android:layout_width="200dp"
        android:layout_height="25dp"
        android:background="#00ffffff"
        android:gravity="right" />

    このようなEditTextの定義にしていると動かない機種があります。
    注目は「背景色」「右寄せ」のプロパティを付けているところです。
    このダブルコンボこそが、どうも諸悪の根源のようなのです。
    どちらかを外す、もしくは「左寄せ」にすると画面が動いてくれました。
    しかし、要件定義上、この2つを外すワケにはいきません。

    paddingRightのプロパティを付けると解決

    背景色を付けるためには、色の付いた画像を用意してそれを背景画像にすればいいので、”background”プロパティを使わなくて済みます。ですが、その方法以外で解決しました。

    <EditText
        android:id="@+id/editText1"
        android:layout_width="200dp"
        android:layout_height="25dp"
        android:background="#00ffffff"
        android:gravity="right"
        android:paddingRight="1dp" />

    新たに”paddingRight”プロパティを定義しました。ポイントは、dp値を必ず1以上にすることです。0だと書かないのと同じですので。
    こうすると、テキストフィールドの右辺からすこーしだけずれてテキストが表示されることになります。

    Viewの工夫だけで解決

    「背景色」「右寄せ」のせいでスクロールしない原因は不明ですが、この現象だけ切り取って考えると、テキストポインタが右辺にくっついちゃっていると、テキスト入力モードだと認識されないのかな、と思います。現に「背景色」「右寄せ」のEditTextでも、文字が入ってる状態にしてテキストポインタが文字の左側にいくようにタップするとスクロールします。

    ちなみに、解決にあたっては、
    ・AndrodManifest.xml に windowSoftInputMode=”adjustPan” のプロパティを付ける
    ・ScrollViewにする
    も試しましたが、結果は変わらずでした。

    また、
    ・iPhoneのように、キーボード出現イベントをトリガーにViewを上に動かす
    も検討しましたが、機種によってキーボードの形状が異なると思うので現実的ではないかなと。

    結果、Viewの調整でうまくいきました。
    お困りの方がいたらお役立てできればと思います。

    { Page Top }

    { 2012.8.17 }

    ボックス間移動のUI考

      category：JavaScript｜author：｜tag：｜comment：non

      はてなブックマーク - ボックス間移動のUI考
      このエントリーをはてなブックマークに追加

      こんにちは山本です。
      なんとも小難しいタイトルにしてしまいましたが、今回は技術というよりはUIについて書きたいと思います。

      要素を左から右へ移動させる

      Webに携わっている方なら誰もが以下のようなUIを見た・扱ったことがあるんじゃないでしょうか。

      ※ボタン押しても動作はしません

      複数の選択肢から、任意の項目だけ選びたい場合によく使われますね。

      最近では、上のようなHTMLだけのシンプルなUIは見かけなくなりましたが、これだと何が問題なんでしょうか。
      自分なりにちょっと考えてみたいと思います。

      ■問題点
      1,左のリストが膨大な量だった場合、探すのが大変
      2,移動させるのに「選んで」「ボタン」の２クリック必要
      3,ぱっと見て、何をしたらいいのかわからない
      4,左の領域と右の領域の意味がそれぞれわからない
      5,項目名が長い場合、デザインが崩れる可能性
      6,普通

      かなり主観も混じっています。
      6なんかは、普通と言ってもシンプルですし好む人もいるでしょう。
      3や4は、アフォーダンス（※）に絡むことで、「右へ」ボタン一つとっても、何をどうしたらどういう動きをするのかが予測しづらいです。

      ※アフォーダンス
      環境がユーザーに対して与える「意味」のこと

      blog.livedoor.jp/lunarmodule7/archives/3283889.html

      の記事がわかりやすかったです。

      ただ、1と2は優先度が高いのかなと思います。
      項目が100個あったら探す気も失せますし、100個全部右に移そうと思ったら200クリック必要です。

      1の解決策としては、絞り込み機能の付加でしょうか。
      項目名を対象に、文字入力による絞り込み機能を付けたいところです。

      2については色々あると思います。
      ドラッグアンドドロップでの移動、選択と同時に移動、複数同時選択して移動、など。
      最近の傾向が何かはわからないですが、ドラッグアンドドロップはよく見る気がします。
      ただ、それだとジェスチャーに制約のあるスマホでは操作が難しいですね。
      選択と同時に移動、もアクションは減りますが、但し書きを徹底しないと逆にユーザーのストレスになるかもしれません。

      う〜ん、大変。。。

      解消策

      以上の1,2の問題を解消したのが以下のUIになります。

      弊社JavaScriptの巨匠・島田が作ってくれたものをベースに改良して作りました。
      ポイントとしては、左のリストの絞り込みを行う機能を付け、ボタンの操作で左右の移動が可能となってます。
      移動のアクションのためのボタンにはラベル名を付けています。
      ここは、文字よりも、押すことで次のアクションが予測できるようなアイコンを当てるとよりいいのでしょう。

      ただ、しっかりとメッセージ性のある簡潔な文字をあてています。「選択」とすることで、ユーザーはこのリストから選択するんだ！ということを自覚し、「解除」も、リストから外すことを明確に意識させることができるかなと思います。
      また、項目名が長くなっても折り返すのでデザイン崩れは起きないのと、補助的に「全選択」「全解除」ボタンもあります。

      ボタンの色は妥当か、複数同時に選択する場合はどうするか、といった課題もありますが、かなり使いやすくなったのではないかと思います。

      よりよい使い勝手を求めて

      上記の解消策でも、実際に使ってみると問題も出たりするでしょうし、改良していく必要があると思います。
      ちょっとした機能一つとっても考慮することが多いので、他にも、いろんな人がいろんなケースで、どのようにしていけばいいか、何がより正解に近いか、頭を悩ましていることと思います。
      UXデザインという言葉がよく聞かれるようになり、製品の使い勝手が重視されるようになってきたので、いろんな方との意見交換や事例の収集ができればなと思います。

      { Page Top }

      { 2012.2.22 }

      rails3.2でdeviseのインストール手順を間違えたら面倒だった話

        category：ruby｜author：｜tag：｜comment：non

        はてなブックマーク - rails3.2でdeviseのインストール手順を間違えたら面倒だった話
        このエントリーをはてなブックマークに追加

        この前Rails3.1がリリースされたと思ったら、もうRails3.2です。
        バージョンが上がると、重宝して使っていたgemやプラグインが対応に追いつくのかが不安なんですが、その内のひとつ「devise」に関してのちょっとしたエントリーです。

        deviseとは

        github.com/plataformatec/devise

        deviseはシステムのログイン管理を担ってくれるRubyのパッケージです。
        ログイン認証が必要なシステムに対して、ユーザー登録・パスワードの暗号化・パスワードリセットなどの処理を担ってくれるので便利です。

        そのdeviseを使用したプロジェクトを作ります。
        Railsは3.2です。

        rails new sample

        で、プロジェクト作成。データベースも作成しておきます。

        Gemfileに、deviseに関する行を追加。

        gem &#039;devise&#039;

        その後、本来は

        rails generate devise:install

        とすべきところを、

        rails generate devise user

        と、いきなりモデルの作成をしました。
        すると、

        /home/user/.rvm/gems/ruby-1.9.2-p180@rails32/gems/execjs-1.3.0/lib/execjs/runtimes.rb:50:in `autodetect&#039;: Could not find a JavaScript runtime. See https://github.com/sstephenson/execjs for a list of available runtimes. (ExecJS::RuntimeUnavailable)

        本編とは関係ないエラーが出てしまいました。
        JavaScriptのランタイムが無いと。
        Gemfileから

        # gem &#039;therubyracer&#039;

        のコメントアウトを外します。

        で、再度

        rails generate devise user

        を実行。
        すると、必要なファイルが作成されます。
        そして、アプリを起動すると。。

        /home/user/.rvm/gems/ruby-1.9.2-p180@rails32/gems/devise-2.0.1/lib/devise/rails/routes.rb:406:in `raise_no_devise_method_error!&#039;:User does not respond to &#039;devise&#039; method. This usually means you haven&#039;t loaded your ORM file or it&#039;s being loaded too late. To fix it, be sure to require &#039;devise/orm/YOUR_ORM&#039; inside &#039;config/initializers/devise.rb&#039; or before your application definition in &#039;config/application.rb&#039; (RuntimeError)

        何か怒られました。
        ここで、「ああ、『rails generate devise:install』をしてなかった。。」と、インストールコマンドを実行。

        rails generate devise:install

        すると、

        /home/yama/.rvm/gems/ruby-1.9.2-p180@rails32/gems/devise-2.0.1/lib/devise/rails/routes.rb:406:in `raise_no_devise_method_error!&#039;: User does not respond to &#039;devise&#039; method. This usually means you haven&#039;t loaded your ORM file or it&#039;s being loaded too late. To fix it, be sure to require &#039;devise/orm/YOUR_ORM&#039; inside &#039;config/initializers/devise.rb&#039; or before your application definition in &#039;config/application.rb&#039; (RuntimeError)

        同じエラーです。どつぼにはまりかけです。

        エラーをよく読むと、
        config/initializers/devise.rb　か、
        config/application.rb　に、
        require 'devise/orm/YOUR_ORM'　を書いてね、と言われているようです。
        どのO/Rマッパーを使うのかがわからないと起動できないみたいですね。
        なので、
        config/application.rb　に

        require &#039;devise/orm/active_record&#039;

        を記述後、インストールコマンドを実行。
        無事、必要なファイルが生成され、deviseを使えるようになりました。

        何事も順序どおりに、端折っちゃだめよというお話でした。

        { Page Top }
        «- 以前の記事