2017-02-25

npmパッケージで開発して公開

このビデオで基本的な流れがわかる。

www.youtube.com

利用したコマンドの一覧がまとまっているGistもある https://gist.github.com/rockbot/d62fbd256a12b54dac08c00b738e4158

npm link
npm publish --access=public
npm version minor
など。

より詳細な話はこの記事がよさそう。peerDependenciesの話とか。
Reactコンポーネントをnpmパッケージとして開発する - Hatena Developer Blog

2017-02-17

VS CodeにTypeScript用のエクステンションを追加

してみた。

globalに展開していたライブラリ群をimportにするために、importer系エクステンションを追加。

いくつか試してみて、追加したものは以下2つ。

一番賢くimportしてくれたのが、TypeScript Importer。（少なくとも自分の環境下では）
TypeScript HeroはAdd import to current fileとAdd all missing imports for the open documentが便利そう。

2017-02-16

ui-routerを読み直し

（1年前にまとめたもの。こっちに転載。最新のUI-Routerについては Angular UI-Router v1さわる - ryotah’s blog から）

動機

ui-router のこと、実はあまり把握していなかった
Nested States & Views とか Multiple & Named Views とか一応使っているけどあんまりよくわかっていない
ひとまず angular-ui/ui-router Wiki に目を通すか ← イマココ

書いてあること

仕事で利用したTips
angular-ui/ui-router Wiki の以下ページから、役立ちそうなものと面白そうなもの抜粋

仕事で利用したTips

遷移時にデータを渡したい

How to pass custom data in $state.go() in angular-ui-router? · Issue #1949 · angular-ui/ui-router
- stateConfig の params を利用する
- additional non-url parameters を定義できる

// foo.ts
$stateProvider
.state('foo', {
  url: '/foo',
  template: '<foo></foo>',
  params: {
    // non-url parameter
    data: null,
  }
})

// bar.controller.ts
go() {
  this.$state.go('foo', {
    data: {
      // ...
    },
  });
}

動的にtemplateUrlを変更したい

$templateProvider を使う

$stateProvider
.state('foo', {
  url: 'foo',
  controller: 'FooController',
  /*@ngInject*/
  templateProvider: function($templateFactory, BarService) { 
    return $templateFactory.fromConfig({
      templateUrl: BarService.getBool() ? 'a.html' : 'b.html'
    });
  }
});

履歴、location bar のコントロール

location - {boolean=true|string=} - If true will update the url in the location bar, if false will not. If string, must be “replace”, which will update url and also replace last history record.

http://angular-ui.github.io/ui-router/site/#/api/ui.router.state.$state
- urlを変えたい、履歴も変えたい (true)
- 何も変更したくない (false)
- urlを変えたいが、遷移したことを履歴に残したくない (replace)

遷移先を途中で変更する

$stateProvider.state の resolve 内で遷移先を変更する

resolve: {
  /*@ngInject*/
  data: function($stateParams, $state, $q, $timeout) {
    const data = $stateParams.data;
    if (data) {
      return "something";
    }
    // go to xxx if no data
    $timeout(() => {
      $state.go("xxx");
    }, 0);
    return $q.defer('error message');
  }
}

副作用なく、location barのクエリだけを変更したい

$state.go('.', { query: "query" }, { notify: false });
- $stateChangeStart と $stateChangeSuccess events を broadcast しない

ui-sref, ui-sref-active

ui-sref 　- You just need to be aware that the path is relative to the state that the link lives in
ui-sref-active
- A directive working alongside ui-sref to add classes to an element when the related ui-sref directive’s state is active

State Manager

Resolve
- ui-routerにおけるresolveの威力 #AngularJS - Qiita がわかりやすい。
onEnter and onExit callbacks

Nested States and Nested Views

Nested Statesの設定

Dot Notationによる設定

$stateProvider
  .state('contacts', {})
  .state('contacts.list', {});

<a ui-sref="contacts">Go Contacts</a>
<a ui-sref="contacts.list">Go Contacts List</a>

Parent Propertyによる設定

$stateProvider
  .state('contacts', {})
  .state('list', {
    parent: 'contacts'
  });

<a ui-sref="contacts">Go Contacts</a>
<!-- "contacts.list" にはならない -->
<a ui-sref="list">Go Contacts List</a>

stateに設定している名称は違うが、両方とも contacts（親）、list（子）の関係になっている。このへんちょっとややこしい。

親Statesから引き継げるもの

Abstract States

子Stateを持つことができるが遷移できないState。

利用例として考えられるもの:

urlを子Stateに追加したい場合
ui-viewを含むtemplateを子Stateで利用したい場合
Resolved dependencies via resolve を子Stateで利用したい場合
Custom data properties via data を子Stateで利用したい場合
To run an onEnter or onExit function that may modify the application in someway.

Multiple Named Views

Absolute Names

viewname@statename の形式を利用すると ui-view を絶対名で指定できる。例えば、Nested States だけど Views を入れ子にしたくない場合、以下のような書き方が可能。

<div ng-app="ngapp">
  <div ui-view></div>
  <div ui-view="list"></div>
</div>

$stateProvider
.state('state1', {
  url: '/state1',
  template: 'state1'
})
.state('state1.list', {
  url: '/list',
  views: {
    // このケースのように State がルートの場合、@の後ろには何もかかない
    'list@': {
      template: 'state2'
    }
  }
});

URL Routing

Basic Parameters
- /user/:id, /user/{id}, /user/{id:int}
Query Parameters
- /contacts?myParam1&myParam2
Absolute Routes
- url: '^/list' のようにすると、Nested State でも Url は結合されない
$stateParams は親Stateのパラメーターなどは取得できない（自分自身のパラメーターのみ取得可能）
- 親Stateで resolve すれば取得可能

$stateProvider.state('contacts.detail', {
   url: '/contacts/:contactId',   
   controller: function($stateParams){
      $stateParams.contactId  //*** Exists! ***//
   },
   resolve:{
      contactId: ['$stateParams', function($stateParams){
          return $stateParams.contactId;
      }]
   }
}).state('contacts.detail.subitem', {
   url: '/item/:itemId', 
   controller: function($stateParams, contactId){
      contactId //*** Exists! ***//
      $stateParams.itemId //*** Exists! ***//  
   }
})

2017-02-16

わいのスプレッドシート力

レベルが1つ上がった。

数式を利用しているセルの背景色を変更させる方法。

Google スプレッドシートの関数リストがあるのでそれを利用して、Conditional format rules（条件付き書式ルール）を設定すればいいらしい。

f:id:ryotah:20170216200236p:plain

2017-02-09

Swiftの勉強（3日目）

f:id:ryotah:20170209093830j:plain

うなぎうまい。ひょうたん屋 6丁目店。

2017-02-08

Swiftの勉強（2日目）

引き続きSwift。今日は昨日スキップしたシンタックスについて。

昨日のログ
Swiftの勉強（1日目） - ryotah’s blog

Part 2: Swiftのシンタックス

馴染みやすいです。軽く読んだだけである程度把握できる気がします。

とはいえ、タプル、オプショナル、関数の定義、文字列操作、クロージャの書き方、レイジーコピー、プロパティオブザーバーなどなど、触ってみないことには覚えにくいところは多数あるので、実際にコードをごにょごにょ書いて覚えてました。

今回はIBM Swift Sandboxを利用してみました。Playgroundよりさらに気軽に書けて便利です。

2017-02-07

Swiftの勉強（1日目）

3日かけて詳細！ Swift 3 iPhoneアプリ開発入門ノートサポートサイトをやることにしました。
Flasherにはお馴染みと思われる、大重さんの本です。

計画

「Part 1: 概要」「Part 2: Swift シンタックス」「Part 3: 実践入門」という3部構成になっているので、1 -> 3(一部) -> 2 の順番で進めていこうと思います。

Part 2を後回しにしたのは、シンタックスを詳しく把握していなくても他のPartは進められそうだったから。
Part 3を一部だけにしたのは、すぐには使わなそうな機能の説明もけっこう含まれていそうだから。

初日やったこと

Part 1: 概要

何も知らないので、まずはここから。

Xcodeについて
- プロジェクト
- ワークスペース、各ビューの説明
- 行番号の表示、Code folding
- 便利ショートカット
シュミレーター操作
サンプルつくり
- ライブラリ
- 関連づけ
Playground
- グラフ

Part 3: 実践入門

各UIの利用方法を把握しつつ、Xcodeの使い方についても習得できます。 Viewの構造や、シーンの扱い方なども。

Ch 11 オートレイアウト

整列のやり方
- Align
- Add New Constraints
あとから修正できる
- Resolve Auto Layout …

Ch 12 アシスタントエディタとUI部品の使い方

アシスタントエディタ

使い方（結び付け方）
結び付けを消す場合は右クリor Connections inspector
Connection -> Outlet or Action

`UILabel`

Attributesみればだいたいわかる

`UIButton`

画像、背景画像
コード上での生成方法
- ボタンタイプ
イベントリスナーの設定
背景画像のスライス

`UIStepper` `UISwitch` `UISegmentedControl` `UISlider`

（すっとばし）

`UITextField`

各種設定内容
- キーボード種類
- クリアボタンの表示、など
デリゲート処理について
- UITextFieldDelegate
キーボードをさげるために
- Tap Gesture Recognizer
- 改行で閉じる

`UIPickerView`

（すっとばし）

UIのクラス継承図

Attributesインスペクタでは固有の設定が一番上に表示される
カスタム設定について

Ch 13 ビューと画像

ビューの作成と表示

基本はFlash

画像

UIImageViewとUIImage
UIImageView
- UIImageView(frame: CGRect(…))
UIImage
- UIImage(named:)
背景画像にパターン
- view.backgroundColor = UIColor(patternImage: UIImage)

座標と領域

center(CGPoint型) frame(CGRect型) bound(CGRect型)
viewDidLayoutSubviews
- viewDidLoadより前に実行
frame
- origin(CGPoint型), size(CGSize型)
- minX midX maxX width heightなども利用できる（取得のみ）
convert

`UIStackView`

HorizontalとVertical
- 切り替え可能
Stackツールボタン
コードでの書き方

`UITableView`

UITableViewDataSourceとUITableViewDelegate
UITableViewDataSource
- セクションごとの行数を決める
- セルを作る
- セクションのタイトルを決める
- セクションの個数を決める
UITableViewDelegate
- タップしたら内容を表示

UIScrollView

配置しやすくするために一旦縦長のViewにする
実行時
- scrollViewのframeを設定（画面サイズを利用）
- scrollView.contentSizeを設定（コンテンツのboundsを利用）
キーボードに合わせて、画面をスクロール
- 詳細はコード確認を (uiScrollView_keyboard.xcodeproj)

Ch 14 シーンの作成と移動

（ざっと読み）

Ch 15 - Ch 19

アニメーション（ざっと読み）
フィンガーアクション（ざっと読み）
図形の描画（ざっと読み）
- 矩形、角丸、線、弧
データの保存（ざっと読み）
デバイスの機能（すっとばし）

まとめ

いい本です。ありがたいことやで。

動機