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スキームの自動生成のフォームも簡単に作ってみました。

 

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

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

 

 

スマホ・タブレットで縦横の表示切り替えに応じてレイアウトを変えつつ画面ぴったりに表示させたい

先日担当した某病院様の案件で使用したTipsです。

その案件はWordPressでのCMSサイト構築だったのですが、PC/スマホの2デバイスでのレスポンシブ対応という事でした。
そこでメディアクエリで各デバイス毎のスタイルを作成していたのですが、
しかしその後でiPadなどのタブレットの場合にのみまた別のレイアウトにする+ランドスケープ表示の場合にはPC用のレイアウトにするということになりました。

これを整理すると以下のパターンになります。

  • PCで閲覧/タブレットでランドスケープ表示:PC用のスタイル
  • スマホで閲覧(縦横問わず):スマホ用のスタイル
  • タブレットでポートレート表示:タブレット用のスタイル

ここで困ったのが、タブレットでのviewportをどうするか?という問題です。

Continue reading

PHP開発でのMVCについて

行き帰りの電車の時間がわりと長いためよくGunosyで配信された記事を色々とみてるのですが
ちょっと前にPHP開発者のいうMVCについて物申す的な記事があり興味深く読んでました。

私もPHPでの開発はそこそこやってきていて、自分なりの考え方みたいなものもいっちょまえにもってたりするので
そんなものを今回は書いてみようかと思います。
 

Continue reading

[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

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

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

 

 

JavaScript でリッチなUIを作る場合の覚書(その1)

Webアプリケーションでネイティブアプリに近い操作感を実現したいとなると
Ajaxで取得したデータを使ってコンテンツを描画、さらにそれを操作というのはよくありますね。

例えばajaxでjsonを取得して、handlebars.jsなどを使って一覧を作成したんだけど
各行を jQuery.UI で draggable にしたいんだけど動かない、なんてときの覚書です。

 

Continue reading

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

Retinaディスプレイに慣れてしまったiPad2を見てると液晶が荒いな と日々開発を行いながら思っている中村です。

こんにちは

前回の続きで今回はストーリーボードにコードを埋め込んでいきます。

SBview

前回までで作ったストーリーボードです。

ではitem1側のUiTextView エリアにコードで文字列を表示させる流れですが、

まず適応するコードとなるファイルを新規追加します。ファイルを追加したい箇所でマウス右ボタンで

NewFileを選択し、Objetcitve-C classを選択します。

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

Nextをクリックしファイル名を確定させます。

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

今回は標準の UIViewController を選択肢、class名に TopViewControllerとします。

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

これでストーリーボードへ取り付けるコードの準備はできました。準備ができたので、TopViewController をストーリーボードへ関連づけます。

 

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

コードを取り付ける箇所にマウスをあて全体が青色になる事を確認し、左メニューからclass(作ったファイル)を関連づけます。

これだけで完了です。

次はUITextViewの部品単位をひも付けます。h m両ファイルに書き込みします。

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

IBOutletがひもづけるために必要なものです。ソースができたら、

今度はストーリーボードでIBOutletとUITextViewをひもづけます。

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

これで完成です。ビルドをすると下の様な結果画面が出来ます。

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

コード側でUITextViewの設定をかえるなどする事も可能です。

 

次の(下)は UIWebViewを使った WEB表示画面を作っていきます。

 

 

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

カメラアプリを作るにあたって、まずはXcodeでの簡単なアプリの作り方から書いていこうと思っているシステム部 中村です。こんにちは

Xcode とは アップルがデベロッパツールとして無料で配布している開発作業環境です。Verがかわると仕様もかわるため開発者泣かせなIDEではありますが、現状iOSの開発を行えるのはこの環境だけです。
Xcode に関しては https://developer.apple.com/jp/technologies/ から参照してください。

iOS7からは開発に関してはストーリーボード必須となってしまったため、まずはストーリボードを使いtabアプリケーションを作っていきたいと思います。
ここで覚えられるのは
標準viewを止め、新規にtabviewcontrollerを実装し、タブで切り替えるViewにカスタマイズしたクラスファイルをひもづけての動作一連までが覚えられると思います。

同じ内容で詳しく書かれているページも多数ありますが、今回は本当に初めてXcodeを使う人にわかりやすく書きます。

まずは、Xcodeを開いてテンプレートを選択します。最初からTabbed Applicationを選択してもいいのですが、今回はチュートリアルのためSingle Vew Application を選択します。

Xcode

Continue reading