中安拓也のブログ

プログラミングについて書くブログ

NOTエンジニアPC(Windows7)にIonic2を入れる

プログラミング Angular Ionic

開発に使っていないPCにIonic2を入れようとしたら、時間がかかったので、つまづいた部分をメモ。

開発環境

  • OS: Windows7 64bit
  • Ionic version: 2.0.0-beta.11
  • Ionic CLI version: 2.0.0

Ionic2環境構築手順

  1. Node.jsのインストール
  2. Gulp、Typingsのインストール
    npm install -g gulp typings
  3. Ionic2とCordovaのインストール(Ionicは諸事情により古いバージョン)
    npm install -g ionic@2.0.0 cordova
  4. 過去にIonic2で作成したプロジェクトに移動して、ライブラリをインストール
    npm install
  5. Ionicアプリを起動
    ionic serve

つまづいた点

  • 手順4のnpm installで下記2点のエラーが発生
    • Python2.7が見つかりません
    • WindowsSDK8.1が見つかりません
      error MSB8036: The Windows SDK version 8.1 was not found. Install the required version of Windows SDK or change the SDK version in the project property pages or by right-clicking the solution and selecting "Retarget solution".

対応策

  • Python2.7が見つかりません

    1. Python2.7.xをダウンロードしてインストール(環境変数も設定)
    2. コマンドプロンプトでnpm config set python python2.7を実行
    3. npm config listで正常に設定されていることを確認

  • WindowsSDK8.1が見つかりません

    1. Visual Studio 2015がインストール済みの場合、Visual Studioのアンインストールが必要
    2. VC++ Build Tools Technical Previewのインストールを実施
    3. カスタムインストールを選択してWindows 8.1 SDKとWindows 10 SDKのチェックを入れる
    4. コマンドプロンプトを起動してnpm config set msvs_version 2015 --globalを実行
    5. npm config listで正常に設定されていることを確認

http://landinghub.visualstudio.com/visual-cpp-build-toolslandinghub.visualstudio.com

参考サイト

overmorrow.hatenablog.com

TypeScript2.0.2 + Visual Studio Codeの設定メモ

qiita.com

エラーが発生しちゃったので、自分用にメモ。

エラー内容

Angular2に入門しようと、上記サイトを見ながらVSCodeで写経をしていたら下記エラーが発生。

Experimental support for decorators is a feature that is subject to change in a future release. Specify '--experimentalDecorators' to remove this warning.

実行時には上記エラーは発生せず、VSCode上でのみエラーが表示される状態だったので、TypeScript向けの設定をVSCodeにしていないのが原因なんだろうな〜という感じ。

開発環境

  • Visual Studio Code: 1.5.3
  • TypeScript: 2.0.2

解決手順

ググったら、解決方法がわかったので、以下に列挙。

  • tsconfig.jsonに"experimentalDecorators": trueを追記
// tsconfig.json
{
  "compilerOptions": {
    "declaration": false,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": ["es6", "dom"],
    "mapRoot": "./",
    "module": "es6",
    "moduleResolution": "node",
    "outDir": "../dist/out-tsc",
    "sourceMap": true,
    "target": "es5",
    "typeRoots": [
      "../node_modules/@types"
    ]
  }
}
  • VSCodeのユーザ設定でtypescript.tsdkのパスを指定
    typescript.tsdkのパスは、Visual Studio Codeの [Code]->基本設定->ユーザ設定 で設定可。
// settings.json
// 既定の設定を上書きするには、このファイル内に設定を挿入します
{
    "typescript.tsdk": "node_modules\\typescript\\lib"
}

参考サイト

stackoverflow.com

qiita.com

Segmented Controlの選択状態を解除する

Swift iOS プログラミング

表題の件で困ったのでメモ。

 

Segmented Controlは、状態の切り替えに使われるボタンであり、現在どの状態なのかも選択されているセグメントの色を変更することで教えてくれます(下記の画像だと、「赤」が選択されている)。

f:id:l08084:20160614003030p:plain

 

ただ、カレンダーの移動でSegmented Controlを使う場合などは、現在の状態とセグメントが一致しないため、選択状態に変更する設定はいりません。

※赤枠のような状態にしたい

f:id:l08084:20160614010054p:plain 

下記解決策。

 

Segmented ControlのAttributes Inspectorで下記の操作をします。

  1. Momentaryをチェック
  2. 全SegmentのSelectedのチェックを外す

これで、Segmented Controlのセグメントが選択状態になることはなくなります(押した瞬間以外)。

f:id:l08084:20160614004001p:plain

 

以上

UICollectionViewセルのイベントを無効にする

iOS Swift プログラミング

表題のしょーもない問題に時間をかけてしまったのでメモ。

開発環境

  • Xcode: 7.3
  • Swift: 2.2
  • OS X EI Capitan(10.11.4)

    前回記事の家計簿アプリで曜日と前月/次月の日付も選択できてしまう問題があったため解決策を調べていたんですが、TableViewのCellを選択不可にする方法がのっているサイトしか見つかりませんでした。。。

    ※赤枠部分のタッチイベントのみを無効にしたいf:id:l08084:20160529173206p:plain

検索に引っかからなかった理由としては、UICollectionViewに限らず、UIImageView、UILabelなどと共通のやり方でできるからですね（基礎っぽい）。

以下解決策

CollectionViewにあるすべてのセルの選択を不可にする

CollectionViewのCellのUser Interaction Enabledのチェックを外します。

f:id:l08084:20160529173454p:plain

CollectionViewにある特定のセルの選択を不可にする

コードで指定します。

// Cellのタッチイベントを無効にする

cell.userInteractionEnabled = false

Swift2で家計簿アプリを作った(2)

iOS Swift プログラミング

前回記事の続き。

開発環境 

前回作成した家計簿アプリに下記2点の機能を追加した。

  • 月別支出額のグラフ
  • 支出が発生した日時が登録できるようにカレンダーを表示

スクリーンショットはこんな感じ

f:id:l08084:20160524201106p:plain

f:id:l08084:20160524201120p:plain

 

月別グラフの部分はチャート表示ライブラリのios-chartsを使用した。

github.com 

学んだこと

  • Collection Viewを初めて利用
  • ios-chartsスゴイ

作成期間

長期休暇中に作成して10日間

Toggl曰く作業時間の合計は26時間

※なお前回記事のプロジェクトファイルは流用せず新規に作成した

参考にさせていただいたサイト

qiita.com

なんか、日記書きました。 » 初心者がswiftで作ったカレンダーアプリ ~目次~

qiita.com

 

Githubのソースは下記となります。

github.com

 

 

Swift2で家計簿アプリを作った

iOS Swift プログラミング

家計簿アプリを作成したのでメモ。

開発環境

アプリのスクリーンショットはこんな感じ。

初期画面では、今月に入ってから使用した金額の合計が表示されている。

 f:id:l08084:20160509145732p:plain

買い物の金額をテキストボックスに入力して、「金額入力」ボタンを押すと。。。

f:id:l08084:20160509150141p:plain

アラートが表示されるので、金額について何か説明を入力する。

f:id:l08084:20160509150306p:plain

なお、各月の使用金額合計を閲覧することもできる

 アプリの機能

  • 使用金額の入力
  • 何にお金を使ったのかをメモできる
  • 月ごとに集計し、合計金額を表示

学んだこと

  • UIAlertController、NSCalendar
  • AppDelegateでの値の受け渡し
  • reduceメソッドを初めて使用した
  • Xcodeでの置換
  • Githubのissueとcommitの関連づけ

作成期間

8日間(GW期間を利用したため、全て休日)

Toggleいわく作業時間の合計は22時間

参照させていただいたサイト

totutotu.hatenablog.com

llcc.hatenablog.com

qiita.com

 GithubのURLは下記となる。

github.com