読者です 読者をやめる 読者になる 読者になる

Goleiro

子育て / 読書 / 生き方 / デジモノ etc.

React.jsとcreate-react-appを使ってタダでAWS S3にイケてる動的サイトをサクッと作る方法(環境構築編)

AWS S3 ReactJS

 

f:id:HAGIZO:20170321005802p:plain

低コストでイケてるサイトを作りたい

AWSが流行り始めて久しいが、そろそろサクッとイケてるサイトを作りたくなってきたので環境整えてみた。ここではReact.jsを使ったサンプルページをAWSのS3からホスティングして公開するまでの流れを解説しよう。React開発環境はcreate-react-app,デプロイはAWS CLIで実現している。開発環境はOS X 10.11.6 (15G1004) - ELCapitan

続きを読む

Swift3対応!RxSwiftとStoryBoard(InterfaceBuilder)を使ってUIScrollViewとUIPageControlを連携させる方法

InterfaceBuilder Swift3 iOS

f:id:HAGIZO:20170106183902g:plain

このUI。

よく見かけるんですがRxSwift使うってなると意外と実装を理解するのに時間がかかりました。。

ということで今回も実装方法をメモしておきます。

 

詳解 Swift 改訂版

詳解 Swift 改訂版

 

 

主なポイントは以下の通り。

  • UIPageControlの実体はStoryBoard側に定義して、参照とUIControlEventsのValueChangedをコード側でハンドル
  • ScrollViewのページインデックスはInt型のプロパティで管理しておき、関数内でOffsetの考慮をしなくても良いようにする
  • UIPageControlからUIScrollViewのオフセットを操作する場合はアニメーション付きにする
  • UIScrollViewのContentOffsetはRxで監視
  • UIPageControlのCurrentPageもRxで監視、専用のプロパティに値を格納

サンプルコードはこちらです。

manage UIPageControl and UIScrollView with RxSwift

 

詳解 Swift 改訂版

詳解 Swift 改訂版

 

InterfaceBuilderでUIScrollViewをPagingしようとしたらクッソはまったのでメモしておく

iOS XCode InterfaceBuilder

f:id:HAGIZO:20161229172256p:plain

UIScrollViewにそれより大きいサイズでSubViewを指定するとスクロールが可能となるが、このSubViewとUIScrollViewの制約を間違えるとスクロールが一切効かなくなるので注意が必要。

以下、横スクロールさせたい場合の解説。

 

ハマりポイント

  • SubViewのWitdthはScrollViewより大きくしておく
  • SubViewのHeightはScrollViewと同じ高さ
  • SubViewとScrollViewのConstraintsのうち、trailingとleadingは0に指定する

SubViewの幅はScrollViewのそれより大きい値を設定しているので、SubViewのtrailingはSubViewの幅からScrollViewの幅を引いた値では?と思ってしまいこれを指定したら動かなくなってしまった。。

 

肝に銘じておこう。