2015年7月31日金曜日

アプリ表示名の多言語化(Android)

標準の機能としてはできないようです。Cordova5で以下の方法でできることを確認しています。
英語(ディフォルト)と日本語の表示を切り替える場合を記載しています。
  • /platforms/android/res/ に values-ja というフォルダを作ります。
  • 同じ階層にあるvaluesの中にあるstrings.xmlをコピーしてきます
  • app_nameを変更します
    • launcher_name 表示名(app_nameと同じになっているので個別に変更する場合のみ変更)

ビルドではファイルがなくならないので一度設定すれば良い作業ですが、platform rm android のようにandroidフォルダ毎消すと当然ながらなくなります。

投稿者 時刻: 0 件のコメント:

2015年7月30日木曜日

UIフレームワークを選ぶ

Cordovaで使用する際に検討しましたUIフレームワークを記載します。ライセンスはMITかApache2となっています。
選ぶポイントになりそうな箇所を黄色マーカーで注意する箇所をオレンジマーカーで書いています。

Cordovaアプリにした際の動きを確認してみたかったので、色々なUIフレームワークアプリを試すことができるアプリ「UI Framework Catalog」を作成いたしました。
Get it on Google Play

Framwrok7

  • Android(Material Design), iOS
  • x AngularJS (Template7という独自のフレームワーク)
コンポーネントの数がとても多く、UIの再現度もかなり高いです。
1点個人的に残念なことにAngularJSではなく独自のフレームワーク(Template7)を使用しているという点です。Angularを使用に慣れてる方には機能が足りないかなと思います。
iOS UIデモ Material UIデモ 

ionic2(preview版)

  • UIはOS別にネイティブルック
ver1と違い一気にネイティブの見た目に近づきました。Android,iOS,Windowsの３つの見た目を備えています。Angularjs2の使用が前提となっています。

  • UIはOS別ではなく独自
  • AnguarJS使用前提
  • Githubのスターが２万近く
最もポピュラーなフレームワークではないでしょうか。使う人も多い分フォーラムやサンプルも充実しています。UIはiOSともAndroidともいえない独自の見た目です。

Quasar

調査中。ionicのように専用のコマンドツールを持つ大きめのフレームワーク。コンポーネントの数も豊富です。パンくずリスト、ツリー表示、ページネーションなど他のフレームワークにはないものも含まれています。

OnsenUI

  • OS別(iOS,Android)別に若干デザインが変わる 
  • AngularJS前提(一応知識がなくても使用可能)
  • コンポーネント数はionicとほぼ同じ
日本のアシアル社がメンテナンスしているため、日本語のドキュメントがあります。ネイティブライクなUIですが見た目もコンポーネントの数もFramework7の方が上です。
次のバージョンOnsenUI2ではMaterialDesignに対応になり、Angularjsが必須でなくなるようです。[公式ブログ]

Phonon

  • 軽量が売り。AngularJS,Reactなど組み合わせは自由
  • デザインはマテリアルデザインに若干似ているフラットデザイン
  • コンポーネントはAndroid系が一通り揃っている
2016年8月現在開発が活発なフレームワークです。軽量かつ、AngularJSやReactなどに縛られないため、自由に選択ができます。タブレット様にスプリットビュー風にも対応しているなど、ニーズに合わせてよく考えられていると思いました。ただ、Form周りのコポーネントは１行テキスト入力、シンプルなラジオ・チェックボックスと、入力がメインのアプリには物足りないと思いました。

Material Design Lite

  • 名前の通りMaterial Design
  • x AngularJS
スマホでもさくさく動きますがコンポーネントは少ないです。あくまでUIのみなので画面遷移時のアニメーションなどは別途ライブラリが必要になります。
CSS Classで定義していくので別途テンプレートライブラリがないと記述量が多くなる印象です。

jQuery Mobile

  • UIは独自
  • x AngularJS(組み合わせて使用するプロジェクトは既に開発終了)
古いIEなども含めて幅広いブラウザに対応しているためか動作は遅め。幅広いブラウザに対応する必要のあるWebアプリも作成する場合に検討するとよいかもしれません。バージョンアップの頻度も落ちているので将来性は(?)
デモ

OpenUI5

  • UIは独自
ERPパッケージ世界最大のソフトウェア企業SAPの作ったものだけに業務アプリ向けのコンポーネントが揃っている。動作速度は遅めで個人が使用することは難しそうです。

Angular Material

  • マテリアルデザイン
  • Angularjs
コンポーネントは豊富ですが、若干重いです(1.2Ghz x 4core)。また、モバイルで使用するとアプリとしては動作が不自然な箇所があるので、スマホアプリとしては使用は難しそうです。

ChocolateChip-UI

  • iOS,Android,WindowsPhone
現在は開発は特に積極的に行われていないようです。

App.js

  • iOS,Andorid別のネイティブルックですがタイトルバー,ダイアログぐらいの違いです
  • コンポーネントの数はかなり少ないですが軽いです
スマホ向けのちょっとした画面を作る際などには軽いので個人的には重宝しています。学習コストも非常に低く、すぐに使い始めることができます。
iOS UIデモ Android UIデモ


Mobile Angular UI

  • Bootstrap3を使用したiOSライクなUI
  • 名前のとおりAngularjsが使用の前提
どちらかというとWebアプリ向きのフレームワークだと思います。

その他

投稿者 時刻: 0 件のコメント:

2015年7月29日水曜日

デバイスを指定してiOSシュミレータを起動する

--target　オプションに起動したいデバイスを指定すると指定したiOSシュミレータが起動します。

cordova emulate ios --target="iPhone-6-Plus"

デバイスのリストは ios-sim showdevicetypes で表示できました。

デバイス名サンプル
iPhone-4s
iPhone-5s
iPhone-6
iPhone-6-Plus
iPad-2
iPad-Retina
iPad-Air
iPad-Air-2
iPad-Pro 　

投稿者 時刻: 0 件のコメント:

2015年7月28日火曜日

アイコン・スプラッシュスクリーン作成サイト

iOS,Androidでアプリをリリースするためにはアイコンやスプラッシュスクリーンが必要ですがこれらを生成できるサイトをリストしていきます。
基本的にどのサイトも大きな画像をアップロードして、縮小するものがほとんどです。

Icon Generator for Corona SDK

  • iOS, Android向けのアイコン生成
  • 最低1024x1024の画像使用を推奨
  • 装飾の選択は不可

Launcher Icon Generator


  • Android向けのアイコンを作成
  • ShapeはBevelの方がSquareより大きさがちょうど良くなる

Android Feature Graphic Generator

  • Androidの紹介画像(1024x500)を作成できます


投稿者 時刻: 0 件のコメント:

外部サイトをブラウザ(safari)で開く(iOS)

Cordova5 Cordova iOS 3.8　についての情報です。(バージョンによってやり方が違うため他のバージョンでは別のやり方があるようです)

自サイトのお問い合わせなどアプリからSafariを起動してWebページを開きたい場合がありました。一見簡単にできそうですが、Cordovaのバージョンによってやり方が頻繁にかわっているようで、Web上でも情報が錯綜して多くの方が困っていました。

inAppBrowserプラグインを使用する方法

こんなことにプラグインを追加したくはないことは全ての人に共通する思いだと思いますが、inAppBrowserを使用するとあっさり解決できました。

プラグインのインストール
cordova plugin add cordova-plugin-inappbrowser

WebページをSafariで開く
cordova.InAppBrowser.open(url, "_system");

Cordova5では既に駄目だった方法


iOS9 App Transport Security 対応

inAppBrowserを使って上記のようにsafariを別途立ち上げて開くのは何も設定が必要ありませんでした。
しかし、せっかくinAppBrowserをいれたのだからと内部にinAppBrowserを立ち上げて開こうとするとHttpの場合Transport Securityに引っかかります。

投稿者 時刻: 0 件のコメント:

2015年7月27日月曜日

cordova iosアプリ作成時の注意事項

たくさんあるかと思いましたがほとんどありませんでした。

画面全体がスクロール時にバウンドするのを防ぐ

アプリとしてあり得ない動きとなるので防がなければなりません。

config.xml
<preference name="DisallowOverscroll" value="true" />

CSP調整

frame-src gap:;
を追加
投稿者 時刻: 0 件のコメント:

2015年7月26日日曜日

iosで"violates the following Content Security "が出る場合

下記のようなエラーが出てCordovaアプリが起動しない場合

Refused to frame 'gap://ready' because it violates the following Content Security Policy directive: "frame-src 'self'".

CSPタグのframe-srcにgap:を追加する。(Whitelistプラグインの公式ドキュメントにも書いてありました)

<meta http-equiv="Content-Security-Policy" content="frame-src gap:;">

frame-src以外も適宜追加する必要があります。
投稿者 時刻: 0 件のコメント:

2015年7月5日日曜日

ChromeのSame Origin Policy を無効化する

開発中にローカルのAPIサーバへ接続したい場合などに同じオリジンを作るのが面倒な場合があります。その際にはChrome起動時に無効化オプションを設定することでアクセスできるようになります。

Macの場合
open -a Google\ Chrome --args --disable-web-security -–allow-file-access-from-files


open -a Google\ Chrome --args --disable-web-security --user-data-dir

Chromeのプロセスがしっかり無くなっているのを確認してから起動します。起動後にWebサイトを開くと警告が表示されるのでオプションが効いている事を確認できます。

開発中の自分のサイト以外を開かないように注意が必要です。

Mac Safari9 ではメニューとして「クロスオリジンの制限を無効にする」があります。使ったことはありませんがiOS向けのテストの場合はこちらの方が手頃でしょうか。
投稿者 時刻: 0 件のコメント:

2015年7月1日水曜日

Crosswalkのサイズが半分になるLiteについて(検証中)

Crosswalkの欠点の一つであるサイズが巨大になるという課題を克服するためにCrosswalk Liteというブランチプロジェクトがあります。
APKのサイズは10-15M, 端末でのメモリは40Mと公式ブログではなっていますので期待して検証しておりますが現在ビルドが通っておりません。
とりあえず調査状況をメモしておきます。

Crosswalk Lite関連HP

使用できなくなる機能

サイズを小さくするためにいくつかの機能が省かれているそうです。(ビルドが通っていないため未確認)

個人的に気になったのは Web Inspector ぐらいでしょうか。

投稿者 時刻: 0 件のコメント:
ラベル:
登録: 投稿 (Atom)