Webアプリ開発日記 -5ページ目

Webアプリ開発日記

e-veryStudyシステム(Java)をiPhoneに搭載されているSafari[WebKit]に対応する為の、ソフト開発日記。

第9章 [WebKit活用術] iPhoneでURL表示を消す


iPhoneでは、ハイパーリンクが張られているとこに指で長押しすると


下記の様な画面が表示されURLがフルパスで表示されてしまいます。


セキュリティ上、WebサイトとしてURLの表示はよろしく無いので消したい。


Webアプリ開発日記





















PC版のフレームを使ってフォルダ構成(URL)を特定できない表示していましたが、


iPhoneではフレーム画面が望ましくないためNGです。


Body部のCSSに下記の一行を追加することで、指で長押ししてもURLが表示されなくなります。


none指定でcalloutを非表示にできます。


-webkit-touch-callout: none;


第8章 [WebKit活用術]アプリケーションキャッシュの利用


iPhone用Safariには、Webアプリをオフラインで実行させる機能が実装されているようです。


本システムでは、2回目以降のアクセスで画像ファイル読み込まず高速でアクセスできることを


試してみたいと思います。




【手順】


① ManifestFileを用意して個別ファイル毎に記述します。

  例)

   # comment line

   http://www .xxxx.cp.jp/image/header.gif

   http://www .xxxx.cp.jp/image/title.gif

       ・

       ・

       ・

② Manifest Fileは「text/cache-manifest」でサーブする必要があるので、「.htaccess」で

   「AddType text/cache-manifest .manifest」と記述します。


③  各画面(機能)のHTMLヘッダーに下記のように記述します。

   <html manifest="cache.manifest">

   


【結果】

 本システムでは、①で個別ファイルのしてではなくimageフォルダまでを記述して検証。


 画面が表示されるまでの時間が5秒ぐらいかかっていたが2回目のアクセス以降は


 3秒ぐらいで表示されるので成功かな。


 もう少し検証が必要なきがします。次回に報告。

第7章 [WebKit活用術]ピンチイン・ピンチアウトについて

iPhoneでは、ピンチイン・ピンチアウトというユーザインタフェースを


用意してます。これにより、画面サイズが小さいことで携帯電話で


読むことが困難だったコンテンツが十分に読めるようになりました。


ピンチアウト(pinch-out)は、ピンチオープン(pinch-open)とも呼ば


れる操作方法で、2本 の指を画面上に載せて指と指の間を広げる


動作のことです。その逆で、ピンチイン(pinch-in)は2本の指を画面上


に載せてその間隔を縮める動作のことです。


本システム(e-veryStudy)でもこのインターフェスのお陰で各段に


進歩しました。下記の点を注意して下さい。


<meta name="viewport" content="width=320, user-scalable=yes /">


このyesnoにするとピンチイン・ピンチアウトが効かなくなります。