Posted on

レスポンシブデザインのブレイクポイントを考える

昨今のHPデザインに置いて避けて通れぬ課題になりつつあるのが、スマホ・タブレット等でも、ストレスなく閲覧できるように可変レイアウトとするレスポンシブデザイン。
ひと昔前のように、「スマホ用サイト」を別に作る必要がないので、整備が楽(SEO的にも効果があるとか…)。

 

で、そのレスポンシブ機能でどうデスクトップだの、スマホだのを見分けているかというと、ズバリ、ブラウザの横幅である。
なので、デスクトップにてレスポンシブ機能を備えるサイトを表示して、ブラウザの横幅を縮めてみると、疑似的なスマホ閲覧ができるのである。(そんなことしてどうするのって話は置いといて)

 

さて、ここからが本題。

 

webページにレスポンシブ機能を持たせるにあたって、ブラウザの横幅のどの範囲をデスクトップ・タブレット・スマホと区切るかという話。
ちなみに、ブラウザを縮めていって、デザインが切り替わる起点となる横幅を「ブレイクポイント」と呼んでいたりする。

 

で、そのブレイクポイントの決め方、サイトによっても割といろいろあり、デスクトップorスマホの2択で区切っているところもある。
参考になりそうなのが、このサイト、StatCounter(http://gs.statcounter.com/)世界単位で使用ブラウザや使用端末の統計が見ることができる。もちろん、国ごとの絞り込みもできる。

 

例して、2017年1月~2017年3月の日本国内における、モバイル端末のメーカー統計がこれ。

Apple強すぎである。

 

与太話はさておき、下図が上から、2017年1月~2017年3月の日本国内における、デスクトップ・タブレット・スマホの横幅分布図である。

これを例としてブレイクポイントを決めていけばいいのである。

 

これを以て、今回自分は、ブレイクポイントを960px・600pxとしてみた。

 

ただ、スマホもタブレットも、大型化していく傾向にあるので、随時、ブレイクポイントの見直しは必要だと思われる。

 

書きながら、もしかしてこの数値はもう古いんじゃないのかと思いつつ、今日はここまで。

Posted on

androidアプリをEclipseで作成しました。

◎Android開発準備
1.JDK(Java Development Kit)のセットアップ
  jdk-6u25-windows-i586.exeをインストールしました。
2.Android SDK(Software Development Kit)のセットアップ
  android-sdk_r10-windows.zipをインストールしました。
3.Eclipse のセットアップ
  eclipse-java-helios-SR2-win32.zipをインストールし、
  日本語化で、pleiades_1.3.2.zipをインストールしました。
◎補足
Android SDKで、インストール後エミュレータを動作させようとすると、
adb.exe が見つからないとエラーになってしまいます。
そこで、platform-tools にあるadb.exeとAdbWinApi.dllを tools フォルダに
コピーするとエミュレータが正常に動作します。
◎サンプルアプリの作成
Buttonを押したら、TextViewに会社が表示され、editTextに奥進システムが表示し、
Button名を表示に変更するアプリを作成してみましょう。
1.「ファイル」メニュー>新規>プロジェクトを選択する。
2.新規プロジェクトのダイアログが表示する。
  AndroidのAndroidプロジェクトを選択し、「次へ」をクリックする。
3.プロジェクト名:hellooku
    【内容】
  「ワークスペース内に新規プロジェクトを作成」を選択する。
  「デフォルト・ロケーションを使用」をチェックする。
  「ビルドターゲット」Android2.2をチェックする。
  アプリケーション名:Hellooku
  パッケージ名:jp.co.okushin.android.hellooku
  Create Activity:HellookuActivity
  Min SDK Version:8
  に設定して「完了」をクリックする。
4.レイアウトの作成
  hellooku/res/layout/main.xmlを編集します。
  上記ファイルをクリックすると、Graphical Layoutタブが出てきますので、
  そこで画面レイアウトを作成します。TextViewを配置して、Plain Text(editText)を配置して、
  Buttonを配置します。ここで、main.xmlを保存しますが、
  これだけでは、配置した部品にIDが振られていない状態となり、
  実行しようとしても実行時にエラーとなります。
  そこで、main.xmlを修正した場合は、プロジェクト->プロジェクトのビルドを実行してください。
  この操作により、 hellooku/gen/jp.co.okushin.android.hellooku/R.javaのIDが自動で生成されます。

続きを読む androidアプリをEclipseで作成しました。

Posted on

AndroidアプリをApp Inventorで作成してみました。

【環境】
OS Windows 7 professional
【準備】
(1)JDKのインストール
1.ORACLEの公式ページからjdk-6u25-windows-i586.exeをダウンロードする。
2.jdk-6u25-windows-i586.exeを実行してJDKをインストールします。
3.Windows7の環境変数PathにC:\Program Files\Java\jdk1.6.0_25\binを追記します。
4.Windows7の環境変数JAVA_HOMEを新たに作成し、C:\Program Files\Java\jdk1.6.0_25を作成します。
(2)App Inventorのインストール
1.Windows Setup – App Inventor for Android よりappinventor_setup_installer_v_1_2.exeをダウンロードします。
2.appinventor_setup_installer_v_1_2.exeを実行してApp Inventorをインストールします。
3.インストールが完了しましたら、http://appinventor.googlelabs.com/へアクセスします。
 表示されない場合は、更新を押してください。※Gmailのアカウントが必要です。
4.DesignerとBlocks Editorにてプログラムを作成します。(雑誌や、チュートリアルのサンプル参考)
5.プログラムの作成が完了したら、New emulatorでAndroidエミュレータを起動
6.Connect to Deviceで立ち上がっているAndroidエミュレータを選択すると、プログラムがエミュレータにインストールされます。
7.動作確認して完了となりました。
(3)実機へインストール
1.HTC Desire SoftBank X06HTへアプリケーションをインストールしました。
2.HTC Desire SoftBank X06HTの設定として、設定->アプリケーション->不明な提供元をチェックします。
 また、設定->アプリケーション->開発->USBデバッグをチェックします。
3.HTC Desire SoftBank X06HTの公式サイトより、HTC Sync.exeをダウンロードし、インストールします。
4.App InventorのDesignerの右にあるpackage for Phoneをクリックし、Download to this Computerを選択します。
 xxxxxx.apkファイルが作成されます。
5.HTC syncで、[アプリケーションインストーラ]->[次へ]で、[参照]からインストールするapkファイルを選択します。
6.これで実機で動作すれば完成になります。
【感想】
App Inventorは取っ付き易いツールです。お試しなアプリケーション作成には、丁度よいツールだと思います。
しかし、もっと検証が必要だとおもいますが、業務アプリを作成するのには向いていない感じがします。
Posted on

スマートフォンに関係する開発をはじめて試してみました。

【スマートフォンの標準ブラウザーの動作検証】
どのような開発の方法があるか調査しました。
以下のような方法で実際に表示させてみました。
(1)jQuery Mobileとsencha Touchです。
jQuery Mobileは、jQueryのプラグインです。オープンソースで提供されています。
sencha Touchは、JavaScriptフレームワークです。
(2)検証
jQuery Mobileは、サンプルのHTMLを作成して公開し、android端末とiphone4端末で動作を確認しました。
sencha Touchは、サンプルのJavaScriptが用意されていたためそのまま公開して、android端末とiphone4端末で動作を確認しました。
共に、標準のブラウザーでは、問題なく動作しました。しかし、Androidのfirefoxでは、うまく動きませんでした。
主に確認したかったのは、チェックボックス、ラジオボタン、セレクトボックスがどのように動作するかでした。
スマートフォンらしい?動作をしていました。
(3)感想
もうすこし、詳しく検証する必要はあると思うのですが、ブラウザーの表示内容がスマートフォンらしく表示できるので、利用を検討したいと考えています。
ただ、標準のブラウザーしか、この2つは、動作しないので、Androidなどで、firefoxなどを利用されている場合は、
パソコン用のページを見るなりして頂かないといけない点が残念なところでした。
【スマートフォンエミュレーターのインストール】
残念ながらiphoneのエミュレーターは、見つかっていません。
androidは、SDKの中にエミュレーターが含まれているので、それを動作して上記の検証も行いました。
●androidエミュレーターのインストールと起動方法
1.まず、http://developer.android.com/sdk/index.html
より、android-sdk_r11-windows.zip を入手します。
2.android-sdk_r11-windows.zipを解凍します。
3.解凍した、android-sdk_r11-windows\android-sdk-windowsへ移動します。
4.SDK Manager.exeを実行します。
5.立ち上がったAndroid SDK and AVD Managerの左の一覧からAvailable packagesを選択し、
右上部のAndroid Repositoryにチェックを入れInstall Selectedボタンを押下します。
数十分インストールが動作します。
6.Android SDK and AVD Managerの左の一覧からInstalled packagesを選択して、Update All…ボタンを押下し、
ダイアログが表示されたPackagesをInstallします。
7.Android SDK and AVD Managerの左の一覧からVirtual devicesを選択して、New…ボタンを押下し、
Create new Android Virtual Device(AVD)が表示します。そのNameとTargetを決定して、Create AVDを押下します。
8. Android Virtual Devices Managerダイアログで確認し、OKを押下します。
9.Android SDK and AVD Managerの左の一覧からAVD Nameが指定したものを選択して、Start…を押下します。
10.Launch Optionsダイアログが表示されますので、Launchを押下します。するとエミュレーターが表示します。
(1)検証
このエミュレータについているブラウザーでも、上記jQuery Mobileとsencha Touchは問題なく動作しました。(ローカル検証用に利用可能です。)
(2)感想
エミュレータは縦に表示されるので、横にした時の動作などは、確認できませんでした。(まだ、調査が足りないかもしれませんが。。。)
デバックするには、十分使えるエミュレータだと思います。今度は、Androidアプリを試してみたいです。