taki のすべての投稿

スマホアプリのタブ数の表示上限

スマートフォンアプリ制作の仕事をやっていると、
盛り込みたい機能が沢山あり、
それぞれの機能をタブ(tabGroup)で切替表示したいと依頼がある。

しかし、iPhone、Androidそれぞれでタブ数には表示上限がある。
iPhoneでは5つが表示上限だ。
この表示上限を超えると、
下記の赤枠のように、「・・・(more)」が出てしまう。

more

この「more」はユーザ受けが良くない。

一方、Androidは端末に依存し、
XperiaのSOL24 等では5つあるが、ほとんど4つの表示上限だ。
表示上限を超えると、下記の赤枠のタブバー(tabBar)が横スクロールし、隠れていたタブの選択ができる。

Android tabGroup

この横スクロールもユーザ受けが良くない。

そのため、事前に表示上限を超えないよう、仕様変更してもらうか、
タブバーを非表示にして、オリジナルで作成する方法になりそう。。

同一画面でバージョンの異なるjQueryを共存させる方法

Web制作の仕事をやっていると、
動きのある機能を導入したいと御客様から要望がある。
しかも、高度な技術が必要なのに、おカネも期間も掛けずにというワガママ付き。。
そんな難題の要望に応えてくれるのが「jQueryを利用したツール」なのだ。

しかし、そんな便利なツールだが、当然問題もいくつかある、、
その問題の一つに、
同一画面で、動きのある機能が複数ある場合だ。 ※ 特にTOPページで
問題が発生した状態としては、片方(もしくは両方)の機能が動作しないこと。
※ 前提として、どちらか片方のみの導入ではうまくいっている

その動作しない原因の多くは、

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
  $・・・
</script>

というように、異なるjQueryのバージョンが「1.7.1」と「1.9.0」で共存しているためだ。
まず、簡単な解決方法としては、新しいバージョンのみ有効とし、
バージョンの古い「1.7.1」のjQueryをコメントアウトしてみる。
※ 「jQueryを利用したツール」ではなく、

<!-- script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script -->

のように、こちらのみコメントアウトする。
これで解決すれば儲けもの。
しかし、解決する可能性はそれほど高くはないのが現状。。
そこで下記を試してもらいたい。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
    var $171 = $.noConflict(true);
</script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$171(document).ready(function(){
  $171・・・
</script>

こちらのように修正するとそこそこ解決するはず!!

それでも まだ解決されない方は、下記を試してもらいたいが、
この話は別の機会に

(function($){
// ライブラリ自体のJavaScript
})($171)