2016年7月31日日曜日

Mac Bookの空き容量を増やす方法リンク集

128GByteの開発用のMacbookAirがいつの間にか残り3Gになっていました。特にアプリケーションをたくさん入れているわけではないので空き容量増やす方法を調べました。

Xcode関連の不要ファイルを削除してディスクスペースを節約 Qiita

必ず行った方がいいと思います。
記載されている全項目を確認して、不要なものを削除すると8G以上はサイズが空きました。

ハードディスクの空き容量が極端に少なくなる場合の対処方法 Apple コミュニテイ

必ず行った方がいいと思います。
特に大きなフォルダの検索は不要なディレクトリの発見がありました。

以下個人的に行っていること


  • Androidの不要なエミュレーター用のイメージ削除


jQuery Mobile1.5デモサイト

開発中であるjQuery Mobile1.5のデモサイトができていました。

http://view.jquerymobile.com/1.5-dev/demos/

もう2年近くjQuery Mobileはメジューバージョンアップされていませんが、Githubでのコミットも続いているので近くリリースされるのではないでしょうか。

2016年7月30日土曜日

Crosswalk18に注意 overflow-xが効かない

Cordova Android 1.7のディフォルトで使用される Crosswalk18はChrominium48がベースとなっていますが、このバージョンでoverflow-xが効かないなどの不具合が出ました。

config.xmlの記載を以下のうように20以上が読み込まれるようにすると解消されました。
ただしこのバージョンからはandroidの最小バージョンが4.1(SDK 16)となることに注意が必要です。
<preference name="xwalkVersion" value="20+" />

2016年7月6日水曜日

ionic2で日本向けのをアプリを作成するためのカスタマイズ

ionic2で日本向けのアプリを作成していると、いくつか気になる箇所が出てきました。

フォント設定

ios,android向けのみでWebアプリを作成しない場合は変える必要はないと思います。

フォントサイズ

全体的にはそのままでよさそうですが、一部文章を記入する箇所などで文字が小さすぎるように感じましたので変えました。

app.md.scss

ion-card ion-card-content{
  font-size: 1.6rem;
}

WebStormでionic2開発時にCPU使用率が高い場合

プロジェクトのインデックス対象からビルド後のディレクトリを除外する。これで私の環境(Macbook Air2011)は収まりました。
  1. メニュー「Preference」
  2. 「Directories」選択
  3. www/build を選択して「Excluded」を選択

/platformsがexcludedになっていると思いますが、なっていない場合はexcludedにしておきます。

ionic2開発のためのAngularjs2 チートシート



  • () view -> controller
  • [] controller -> view
  • [()] view <-> controller 双方向

繰り返し

*ngFor="let item of items"

スイッチ

<div [ngSwitch]="fruit">
  <div *ngSwitchWhen="'apple">
  </div>
  <div *ngSwitchWhen="'banana">
  </div>
</div>

クリックイベント

(click)="openNewPage(val)"

入力項目変更時イベント

(ionChange)="onChanged($event)"

cssスタイルをセット

[ngStyle]="{'background-color': colorVal}"




2016年7月5日火曜日

ionic2でブラウザ表示時にプラットフォームのテーマを切り替える

ionic serve でブラウザ表示するとandroid用の見た目で表示されますが、以下のようにurlを変更することでiosやwindowsの見た目へ切り替えられます。

ios
http://localhost:8101/?ionicPlatform=ios
windows
http://localhost:8101/?ionicplatform=windows

ionic2でページをコマンドで作成


ionic g page new-page

app/pages/ に以下のディレクトリとファイルができます。
new-page/
  +- new-page.html
  +-new-page.scss
  +-new-page.ts

コマンド実行後に注意書きが表示されますが、app_core.scssには自動的にimport文が追加されないようです。

Don't forget to add an import for new-page.scss in app/themes/app.core.scss:
  @import "../pages/new-page/new-page.scss";

ionic g コマンドは他にも
 ionic g provider
があります。

参考
http://ionicframework.com/docs/v2/cli/generate/