IEでhistory.backで戻るとフォームの内容が消えるバグ対応

Android開発が久々すぎてテンパッてる状態のシステム部中村です。

昔からAndroidアプリの開発は、Verの違いで作り方と仕様が色々変わったり、機種によって違いがあったり、エクリプス上でのGUIの作りこみがわかりにくいなどであまり手を出したくなったのですが、お仕事なので、がんばってます。

といいながらAndroid開発で詰まったので、ブログを書くことで気分転換!!

 

 

さて、本日お問合せフォームの新設を病院チームからお願いされたので、ささっと片付けるつもりが、

デバック作業中に、なぜかIEでhistory.back()を使ってページ繊維すると(戻る)と入力されていたフォームが空になるという症状を発見。

よくよく調べてみるとIEのタブブラウザー化してから良く出る症状のようでした。

HTMLのキャッシュ設定を正しく指定していないと、空白になるようです。

 

症状の発生に関しては

1:inputフォームに値を入れる

2:submit で次の画面へ移動する

3:history.back()で前のページに戻る

結果:入力した内容が消えて空になっている

という流れなのですが、 FireFoxやchorome では発生しない現象なので、見落としやすい落とし穴です。

 

対処方法は

メタタグに

<meta content="86400" http-equiv="Expires" >

このタグをいれて明示的にキャッシュさせてやれば、OKです。

これで、症状が改善されました。

 

history.backを使わなければいいのですが、どうしても使用する際は症状が現れる前にタグを打っておくことにしておきます。

 

iOS開発 storyboard使用時のステータスバーのズレ対処法

システム部の中村です。

Xcodeでの開発を行う際、iOS7からステータスバーの一判断がiOS6と大きく変わっており、

iOS6と7を共通のストーリーボードで開発する際webviewなどのオブジェクトがステータスバーにかぶさるという自体が発生します。

OSのVerを判断して位置を移動させるコードで逃げている方もいますが、極力コードには手を出さないように書きたい自分は

下記のようなやり方で逃げています。

iOS6/7 Detail にステータスバーの20PX分マイナス値を与えてやるという方法です。

ios6 7のステータスバー分の移動

iOS6/7 Detail とは iOS6の場合どのくらいストーリーボードで設定した位置から動かしますか?という場所なので

ここに、-20を与えるとよいわけです。

ようはこのiOS6/7のY軸を-20pxと指定することで、iOS7の場合だけ位置を動かしてくれるようになります。

 

iOS67ステータスバー判断

結構検索してみると皆さんあまりここを使われていないようでして、、layoutで強制していたりする方もいますが、これが一番簡単ではないかなと思います。

 

IE11でJavaScriptやjqueryのコードが動かなくなった場合の緊急対処法

IE11がWindows7などでも使えるようになって、早2ヶ月を過ぎようとしております。

ちらほらと今迄動いていたJSのプログラムが動かない・動作が不安定など色々と問題が発生しているようですが、みなさんはいかがでしょうか。

特にIE11からユーザーエージェントも変更となりUAでプログラムのフローを制御している場合などは必ず問題が発生するのではないでしょうか。

ロジックもIE11からIE10からかなり変わっておりjavascriptの動作に関しても大幅に変わっています。

IE11の大きな変更点としてまとめると

1 ユーザーエージェントの変更

2 JavaScriptで取得可能なブラウザー名の変更

3 ドキュメントモード(描画エンジン)の変更

ではないでしょうか。

Continue reading

グラフ生成ライブラリー Flotr2

現在開発中の自社プロジェクト向けにグラフを出力する箇所が発生しそうだったので、少しばかり調べてみるとFLASHを使わずにグラフを生成できるライブラリーを発見

Flotr2  ダウンロード先: http://humblesoftware.com/flotr2/

少しいじってみましたが、思いのほか使いやすいです。

何より公式のサンプルが多いので、そのままどおりにコピペして数値をPHPなどで変換してやれば色々できますね。

その上わかりやすいサンプルとなっており、プログラムが苦手なコーダーさんでも対応できそうです。

5角形のチャート式グラフのサンプル

グラフサンプル

昔はグラフを表示する場合は、ほとんどの場合でFLASHにデータを送りFLASHによって表示させていましたが、ほんと世の中便利になる一方ですね。

ただ IE11ドキュメントモード: Edge の場合で小さな不具合を見つけたのでアップデートを待ちたいです。

 

ちなみにすでに自社で動いているアクセス解析ツールにも利用できるのではないか!そうすればスマートフォン対応(タブレット含む)も可能だし・・ 

今度時間を作って埋め込み実験等やってみたいな。

 

出張記録:神戸編 デジタルサイネージ 構築・構成編

寒い日が続いておりますが、皆様いかがお過ごしでしょうか。

自分は風邪を引きその上急にお腹が痛くなるという謎の症状に涙させられました。

さて先日出張の記事の続きとして、

今回の記事では、現在神戸市立医療センター中央市民病院様にて運用いただいています、デジタルサイネージの構成方法をご紹介します。

弊社ではサイト製作・紙媒体等の製作以外にも、デジタルサイネージなどの導入実績がありますが、この神戸市立医療センター中央市民病院様の案件はその中でもかなり一般の方にご利用されている商材です。実際メンテナンス業務時に利用者様の数をカウントしてみますと、かなりの方が使っていただいている事もあり大変ありがたいことです。

ちなみに弊社ではiPadなどによる小規模のデジタルサイネージシステムを構築することも可能です。ご質問いただければ、最適なプランをご提案させていただきます。

 

Continue reading

出張記録:広島編 ネットワーク構築と端末の納品

先日 広島 の せのお循環器科・心臓血管外科様の院内のネットワークを構築とあわせ端末を3台納品する案件がありました。

IT部門等専門の方が居られない施設様でも、現状を調査の上最適なプランを提供させていただく事を目指しておりますが、その際必ず必要なのが下記のような簡単な図です。

せのお循環器科・心臓血管外科院内ネットワーク

IT関係の資料は業界外の方からすると、まったく意味のわからない物と認識されることが多く、できる限り専門用語を使わない資料をめざし作ってまいりましたが、その結果が上記のような図だけの資料を1枚提案させていただくという事にたどり着きました。

下手に ルーターやモデム など書くと ご理解いただくのにお時間がかかる場合があります。簡単な資料を元にあとは口答で補足説明をさせていただき、詳細なプランを別途提出させていただくとお話が早く進む場合が多くあります。

資料は シンプルイズベストだなと、日々思うしだいであります。

 

ホットペッパーAPI

年末に都内へ集まってくる友人達との忘年会を開く関係で、先日ホットペッパーやいろんな飲食店のレビューサイト見ていたのですが、レビューサイト見てると、ホットペッパーの情報をブログパーツ的に表示しているサイトが数サイトあったので、

?APIでも提供してるのか?

と調べたところ、

リクルートWEBサービスなるものが、http://webservice.recruit.co.jp/hotpepper/

APIを提供してくれていました。

 

Continue reading

WEBのRetina対応

新型のiPad MiniもRetina化されたので128Gモデルを買いたいシステムの中村です。

最近のスマートフォン・タブレットはかなりの数が高精細ディスプレイ(Apple製品ではRetina)化されていますが、それに伴いWEB製作の現場にもRetina対応の案件もちらほら出てきてるようです。

iOS ネイティブアプリ開発ではかなり前からAppleがretina対応しないと審査を通さないなど積極的に動いていますが、どうしてもサイト作成だとどうしてもなかなか費用対効果がよく無いのではありますが、これからのご時勢必要になってくる技術だと思います。

さて前置きはさておいて

実際に実験してみます。


標準 Retina対応
<img src="/images/pretz.png" width="250" />

横幅250ピクセルの画像を横幅250で表示(等倍)

<img src="/images/pretz@2x.png" width="250" />

横幅500ピクセルの画像を横幅250で表示(2倍)


通常のモニターではわかりにくいのですが、retina対応モニター等で見ると違いがわかります。画像を拡大していただくと如実にわかります。

ほかにもjqueryを使った方法などもありますが、それはまた別の機会に書きます。

このネタをまとめて一度社内で勉強会を開きたいなと思っているので、その時の資料も一緒に公開できればと・・・・時間を見つけてまとめるかうんそうしよう

Google MAP ナビゲーション

先日、某病院様からスマートフォンサイトにGoogleMAPを使ったナビゲーションマップをサイトへ設置できないかという依頼されたのですが、Googleのナビゲーションが思いのほかAPIによっては精度がまちまちであることにビックリです。

APIによるGoogleMAPの精度の実験ページを簡単に準備してみました。

https://blog.medical-design.co.jp/gmap/

ゴール地点は 弊社 メディカルデザインとなっています。

 

当初はマップの上に、上位レイヤーとしてナビゲーションルートを表示させるつもりでしたが、サイト内に埋め込むGoogleマップでは精度がでませんでした。場所によっては海の上を走行する場合等もあったりと;;;これでは使い物にならないと・・・・・

ただこの段階で疑問が!GoogleMAPやAppleMAPではちゃんとルート検索してるじゃないか!という疑問です。

サイト内に埋め込むタイプのGoogleMAPで良い精度がでないなら、制度の良いナビゲーションアプリにゴール地点をおくってやればいいじゃないかそしてサイトからアプリを起動すれば、いいだけでは?

そこで、 地図アプリでナビゲーション リンクの実装です。

これでスマートフォンなら地図アプリが起動し、PCなどのブラウザーであれば、GoogleMAPが開き案内を行ってくれます。

URLスキームの自動生成のフォームも簡単に作ってみました。

 

サイト内に地図を表示する際ナビゲーションボタンなどを実装してあげるほうが、スマートフォンユーザーには親切かなと思います。

今はコールバック等も着々と実装されつつあるので、アプリ内の連携もやりやすくなりそうです。

 

 

[Xcode]iOSアプリ開発 チュートリアル:ストーリーボードの使い方(下)

MAC Book Ai(初代)をインストールする間に貯めていたブログ記事を書かせてもらいます。

こんにちは システム中村です。

ストーリーボードの使い方(下)ということで最後となります。

次は当初の予定通りカメラアプリの作り方を書く予定ではありますが、その前にGoogleMapのナビゲーションネタを書くかもしれません・・・・

 

さて話を戻し、

WEBページをアプリ内で表示するためにWebView機能を使います。

まずクラスファイルを作ります。

スクリーンショット 2013-09-05 11.09.40スクリーンショット 2013-09-05 11.12.03

IBOutletを準備しておきます。

スクリーンショット 2013-09-05 11.13.17

スクリーンショット 2013-09-05 11.13.35スクリーンショット 2013-09-05 11.13.54

IBOutlet接続でストーリーボード上で連携します。

あとは、WEBを表示するためのコードを書けば終わりです。

スクリーンショット 2013-09-05 11.22.29

(ここで初心者が戸惑う self delegate が出てきますが、それはまたそのうち)

スクリーンショット 2013-09-05 11.23.23

一通りこれでストーリーボードを使った開発は終わりです。

あとはこれをベースに機能をついかしていけばいろんなアプリが作れるはずです。