share facebook facebook twitter menu hatena pocket slack

2011.10.20 THU

iPhone、iPad用Webアプリ作成の際の注意点

櫛田 草平

WRITTEN BY 櫛田 草平

以前、案件でiPad用のWebアプリをほぼJavascriptベースで構築したのですが、
その際に苦労した点や注意事項を列挙します。

1. フォームのテキストフィールドに明示的にfocus出来ない

Javascriptで処理を書き、その後『このテキストフィールドにフォーカス』するということのが出来ませんでした。
ボタンクリックイベント等でfocus()が効くという一部例外がありますが、
私がやっていた案件ではそれ以外のシチュエーションで実現したかったので残念です。
出来たとしてもその度にソフトウェアキーボードが立ち上がってしまうという状態になりますが。

2. テキストフォームの入力値を明示的に全選択状態に出来ない

PCブラウザなどで、次のテキストフィールドに移動する際にタブを押すと
移動先の入力値が全選択状態になり、Deleteしなくても上書き出来ますが、
iPadでは出来ませんでした。
既に入力した値を修正する際などに、もう一度テキストフィールドをタップしたら
自動的に全選択状態にしたかったのですが、これは不便に感じました。

3. BlueTooth接続のバーコードリーダー系には注意が必要

私が担当した案件ではBlueTooth対応のバーコードリーダーを使って、
バーコードを読み込んで自動的にSubmitをかける事などをしていたのですが、
バーコードの内容が半角数字だけではなくて半角英字が入っている仕様だったのです。
それ自体は問題ないのですが、ソフトウェアキーボードが日本語モードになっている状態で
且つ読み込み値の先頭がアルファベットの母音(aiueo)から始まっていた場合、
勝手に『a→あ』に変換されて送信されてしまいました。
内部的に正規表現で再置換かけようとしましたが、なかなか意図する通りに動いてくれません。

4. スクリプトに起因する緩慢化

無限ループを引き起こしてしまうようなプログラムを書いてしまった場合、
iPad上では画面が固まります。ちなみにこれをPCのsafariで実行してみると、
『スクリプトに起因する緩慢化』というエラーダイアログが出ます。

私のケアレスミスでループの中にループを書く処理で、どちらのキーも同じ変数名を
間違えて使ってしまった際に発生してしまいました。

他にもいくつか細かい注意事項があったと思うのですが、
またの機会に紹介したいと思います。

※この記事は、なかの人(piro556)が書いています。

櫛田 草平

櫛田 草平

cloudpackで運用、保守、構築、夜間対応を担当しており、日々様々な課題に対応していますのでこの経験を記事にしていけたらと思います。 櫛田 草平

cloudpack

cloudpackは、Amazon EC2やAmazon S3をはじめとするAWSの各種プロダクトを利用する際の、導入・設計から運用保守を含んだフルマネージドのサービスを提供し、バックアップや24時間365日の監視/障害対応、技術的な問い合わせに対するサポートなどを行っております。
AWS上のインフラ構築およびAWSを活用したシステム開発など、案件のご相談はcloudpack.jpよりご連絡ください。