はてなブックマーク

はじめに iOSアプリ開発においてUICollectionViewは頻繁に使用するコンポーネントです。 これまで何度かUICollectionViewを使った画面の開発をしましたが、なんとなく制約をつけたりするだけでイメージに合った画面が作れてしまうので、UICollectionViwe自体を深く理解せずに使用していました。 AppleはCollectionViewプログラミングガイドというドキュメントを用意してくれていますが、これがなかなかボリュームが多く、実際開発にもそれほど困っていなかったので読むのを避けていたのですが、Material ComponentsなどのUI系ライブラリを使うにあたってUICollectionViewへの深い理解が必要になったので、プログラミングガイドを参考に色々と実装を試しながら理解を進めていきました。 ここでは私と同じようにUICollectionVie

現在開発中の個人アプリにRxSwiftとReSwiftを使ったMVVM+Reduxアーキテクチャを採用しています。 「MVVM+Reduxアーキテクチャ」といっても、特に新しいアーキテクチャを考えたわけではなく、MVVMとReduxを組み合わせてアプリを実装しているということです。 MVVMとReduxは解決しようとしている課題が異なるため、併用することが可能です。 本記事では、なぜMVVM+Reduxアーキテクチャを採用したのか、どのようにMVVM+Reduxアーキテクチャを実装しているのかについてご紹介します。 なぜMVVM+Reduxアーキテクチャを採用したのか MVVMで開発して感じていた課題 会社では数人の開発者でiOSアプリの開発を行っており、アーキテクチャにはMVVMを採用しています。 規模としては小さいアプリなのですが、MVVMで1年ほど開発を行ってきて、ずっと感じていた課

iOSアプリの開発版とリリース版で別々のFirebaseプロジェクトを使うとき、GoogleService-Info.plistを環境ごとに切り替えてあげる必要があります。 この切り替え方法についてまとめます。 環境ごとに別々のターゲットを使用する場合 ターゲット設定 Firebaseに開発用とリリース用の２つのプロジェクトを作成しておきます。 ここではBundleIDは共通にすることとします。 開発版のターゲット名はFireApp-Debug、リリース版のターゲット名はFireApp-Releaseとします。 GoogleService-Info.plistの配置 Configs/DebugとConfigs/Releaseといったように、環境ごとにディレクトリを作成し、そこにそれぞれのGoogleService-Info.plistファイルを配置します。 詳しくは後述しますが、「Goog

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? RxTestとRxBlocking、プロジェクトにRxSwift導入している人はみんな使っていますよね 私の関わっているプロジェクトでもRxSwiftを使用しており、もちろんテストコードを書く際にはこの2つのライブラリを使っています。 RxTestとRxBlockingを使ったテストコードの書き方にはいくつか基本的なパターンがあり、それらを覚えておけば、Rxなコードのテストは簡単にかけるはずです。 本記事では、RxTestとRxBlockingを使ったテストコードの基本パターンと、実際のプロジェクトで出てくるようなプロダクションコードに

はじめに WebpackやBrowserifyなどのモジュールバンドラーは最近のWeb開発ではなくてはならない存在ですが、基本的には設定ファイルを書いてコマンドをたたくだけでバンドルができてしまうので、それらがどのようにモジュールの依存関係を解決しバンドルを作成しているのかという裏側の仕組みまで知る機会はあまりないかと思います。 私自身もVue.jsアプリを作っていたりしますが、Webpack周りはvue-cliにお任せしてしまっているので、Webpackについてはあまり詳しくありません。 しかし先日Webpackによるビルドがうまくいかないことがあり、何が原因なのか調べるのにバンドルのソースを確認しようとしたのですが、どこに何が書いてあるのかよくわからず非常に苦労しました。 そんな時にTwitterでminipackというリポジトリを見つけました。 https://github.com/

随時更新します 既存のプロジェクトにすぐに導入できるちょっとしたリファクタリングのアイディアを集めてみました。 こうしたアイディアを積極的に取り入れて、シンプルで美しいコードを目指しましょう。 How to slim down your viewDidLoad() method ネットワーク通信やビューの設定等、多くの初期化処理で膨らんだviewDidLoad()メソッドをスリムにしようという話。 override func viewDidLoad() { super.viewDidLoad() // 各ビューの設定など... // APIからデータを取得 let request = ListOrders.FetchOrders.Request() interactor?.fetchOrders(request: request) // 他の何か... }

'use strict'; const puppeteer = require('puppeteer'); (async() => { const browser = await puppeteer.launch(); const page = await browser.newPage(); await page.setRequestInterception(true); page.on('request', request => { if (request.resourceType() === 'image') request.abort(); else request.continue(); }); await page.goto('https://news.google.com/news/'); await page.screenshot({path: 'news.png', fu

キーボードでリターンキーをタップした時、入力されている文字列が2回ストリームに流れてくるので、UITextField.rx.textをサブスクライブしてAPIリクエストを行うなどの処理をしている場合は余計な通信が発生しないよう注意が必要です。 下記で紹介しているコードを見ていただければと思いますが、こうした余計なイベントへの対応としてUITextField.isEditingプロパティが使えるかもしれません。 また、UITextField.textにコードから文字列を代入した場合、UITextField.sendActions(for: .valueChanged)を実行しないとUITextField.rx.textイベントが流れてこない点も気をつけましょう。 画面とコード テストに使用した画面とコードを以下に載せておきます。 画面は一つのUITextFieldと二つのUIButtonで構

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

既存のPHPサイトにチャットボットを追加しようという話があるのだが、そのサイトにはユーザ認証機能があり、チャットボットに関しても認証済みのユーザしかアクセスさせたくないという要件がある。 PHPサイトはCMSを利用しているため、こちらにはほとんど手を入れずに実装したいと考えているので、チャットボットとの会話インターフェースはPHPサイトにiframeを埋め込むこととし、iframeでロードするページはNode.jsから配信、Node.jsで配信されたページ内でSocket.ioを使ったチャットを行うという構成を考えている。 ここで問題になるのが、PHPとNode.js+Socket.io間でのセッションの共有をどうするかということ。それぞれ個別に認証機能を持つというのはあまりに利便性が悪いため、PHPで認証したユーザをNode.js側も認識できるようにしたい。 セッション共有の戦略 上記要

先日、Ansible2.0がリリースされました。アップデートの詳細はこちらのリリース記事訳を参照していただくとして、ここではその中でも大幅に強化されたOpenStack API操作モジュールについて、その概要や簡単な使い方を紹介します。 OpenStack上でシステムを構成する一通りのモジュールが揃った これまでのバージョン1.X系でも、OpenStack上でのインスタンス作成・削除やネットワーク作成・削除といった簡単な機能を提供するモジュールはあったようですが、操作できるAPIは限られていました。しかし、今回のアップデートでは、OpenStackのIaaSとしての機能ほとんどをカバーしているようです。 これにより、 Ansibleだけでインフラのプロビジョニングからアプリケーションのデプロイまで 可能になったことになります。これまでは、インフラのプロビジョニングはHeatやVagrant

環境 Node.js: v4.3.2 MongoDB: 3.2 Express.js: 4.13.1 Bootstrap: 3.3.6（ビューで使用） 準備 express-generatorでひな形を作成し、追加のパッケージをインストールしておきます。MongoDBへのアクセスにはmongooseを使用します。 Expressでページネーションを行うために、express-paginateというパッケージを使用します。また、mongoose-paginateをあわせて使用することで楽にページネーション出来るようになります。

Node.jsアプリからMongoDBを操作するためのライブラリであるmongooseについて、その使い方をまとめる。 試したバージョン Node.js: v0.10.40 mongoose: 4.4.9 MongoDB: 3.0.7 前提 MongoDBがlocalhost:27017で動いている Node.jsがインストールされている Mongooseがインストールされている スキーマ 登録するドキュメントは日本酒データ。 日本酒の銘柄brand、特定名称typeおよび飲んだ感想impressionsを複数登録できるようにする。 特定名称および飲んだ時の温度帯temperatureについては別コレクションを参照するようにする。 日本酒 var Sake = new Schema({ brand: String, type: { type: Number, ref: 'SakeType'

LoopBack.jsはサクッとREST APIを作るためのNode.jsフレームワークです。コマンドラインのジェネレーターを駆使してモデルを作っていくので、コーディングが少なく済みます。また、REST APIのオンラインドキュメントを生成してくれるSwaggerが組み込まれていて非常に便利です。 作成するモデル 今回はシンプルなToDoアプリを作ることを想定して、以下の様なモデルを作成します。 Accountモデル: ToDoアプリのユーザ ToDoモデル: ToDoタスク LoopBack.jsではビルトインのUserモデルが用意されていて、認証機能などがあらかじめ組み込まれています。今回AccountモデルはこのUserモデルを継承させるため、特に追加のプロパティは持たせません。 ToDoモデルについては以下のプロパティを持たせます。 プロパティ名 型 説明