Reactに慣れるためにReact.js Koansをやってみた
Code 20 January, 2016
React.js KoansというReactの練習プログラムがあるのでやってみました。 exercisesディレクトリの中にある問題を解いていって、npm run testとやると正解かどうかのチェックをしてくれるシンプルなものです。npm run startでローカルサーバーを起動してそこで見た目の確認ができるのも良いです。開発環境は後で述べるセットアップをすればとりあえずのものが揃うので、Reactの学習に専念できます。 こんな感じで問題を解いていきます 簡易的な見た目はこのように確認します 問題はこんな感じです[…]
Reactのチュートリアルをもう一回やってみた（ESLint & Webpack）
Code 12 January, 2016
ReactのチュートリアルをTypeScripで書いてみたんですが、やっぱりES6(ES2015)版で書いた方がいいかもということでもう一度チュートリアルをやってみることにしました。今回はコンパイルをwebpackにやらせようと思います。コードのチェックはESLintにやってもらって、スタイルはAirbnbのReact/JSXスタイルガイドに沿ってやろうと思います。 最近やったReactの学習 React.jsを学んでみたメモ – Morizotter Blog TypeScript-ReactのHelloWorldメモ – Morizotter Blog[…]
scraperjsを使ってみたよ
Code 11 January, 2016
ただ、使ってみたというだけの話です。JavaScriptで簡単に指定したサイトの中から欲しい情報を取得することができるライブラリのようです。JavaScriptあまり詳しくないのでちょっと調べてよさそうなので使ってみました。 ruipgil/scraperjs 使い方 $ npm install scraperjs して、利用する際には、 var scraperjs[…]
AWS Lambdaで一つファンクションを作ってみた
Code 11 January, 2016
モバイルから欲しい情報があって、サーバー立てるのも大げさだし最近良く聞くLambdaを使ってみることにしました。ちょっと調べたらいろいろわかりやすい情報が出てきて本当に助かりました。 手元で動かしてテスト 初めてのJavaScript、初めてのAWS Lambda ｜ Developers.IO AWS Lambdaのための関数のローカル開発とテスト – Qiita[…]
はぁはぁ、、、ReactをTypeScriptで書いてみたはぁはぁ…
Code 10 January, 2016
TypeScriptとか見よう見まねで、Reactもいろいろ把握していない状態でぶつかりながら進んでみた。いろいろダメだと思うけどやったことの記録をしておく。このブログは匿名のつもりでやってる。恥ずかしいこと書き出す。 今までJavaScriptはちょっとやっては、やめるというのを繰り返してて全然基礎体力ついていない。よくない。 やったこと＆ハマったこと ReactのTutorialをTypeScriptで書き換えてみる。自己流->挫折->参考サイトを見ていろいろ取り入れてなんとかできました。 React TutorialをTypeScriptで書いてみる – Qiita Visual Studio上のTypeScript[…]
TypeScript-ReactのHelloWorldメモ
Code 10 January, 2016
いろいろ把握しないまま頑張ってHello Worldを作ったのでメモ。参考にしたのは、Angular2のチュートリアルと、React+TypeScriptのチュートリアル 出来上がったものは、js-study/react-hello-worldに置いておきました。 package.json 最初に作ったのは、package.json。Angular2のチュートリアル見てたら、scriptのところ使ってて、良さそうだったので取り入れた。tscは後で書くけどTypeScriptのコンパイルツール。 concurrentlyは、複数のコマンドを非同期で実行できるパッケージらしい。今回は、tscのwatchとローカルサーバーのlite-serverを同時に動かしている。concurrentlyは引数も取れて便利ぽい。 reactとreact-domを入れた。これがないとReactが書けないようだったので。 gulpを使う方法もいくつか目にしたけれど、gulpを使うとどんどん肥大化して行ってよくわからなくなったりするので、今回は最初だし簡単そうなこちらの方法を試してみた。そのうちいろんなタスクをやりたくなったらgulpを使わなきゃいけないのかな。 package.json {[…]
React.jsを学んでみたメモ
Code 10 January, 2016
JavaScriptもあんまり慣れてなければ、Reactも初めて書くのですが書いてみることにしました。 Getting Started & Tutorial 公式のGetting Started | Reactを読んでとりあえず始めます。まず、必要なツールをnpmで入れます。 環境構築[…]
AngularJS2.0 のチュートリアルをやってみたメモ（1）5 MIN QUICKSTART
Code 3 January, 2016
AngularJS2.0のことを思い出したのでちょっとやってみました。まだbetaなのでチュートリアルの内容も変わるかもしれません。とりあえず現時点でのメモです。思ったことを書いていくだけのスタイルです。 チュートリアルは大きく2部構成になっていて、「5 Min Quickstart」と「Tutorial: Tour of Heroes」に別れています。言語は、TypeScript, JavaScript, DARTが選べますが、今回はTypeScriptを利用することにしました。 5[…]
Node.js + Express + MongoDB + Herokuで簡単なAPIを作ってみる
Code 3 January, 2016
JavaScriptでサーバーサイドを作ってみたくてやってみた。 下準備 まず、下準備。 $ mkdir node-express-mongodb-heroku $ cd node-express-mongodb-heroku $[…]
Node.js周りちょっとだけ触ってみたメモ
Code 1 January, 2016
半年くらい前にAngularを少しだけ書いていたけどそれ以来めっきりかかなくなっていたので久しぶりに学んでみました。でも、そもそも基礎体力がないので周辺の環境などの学習メモを取っておきたいと思います。しょぼい記事です。 環境 node nodeは普通に入れたらいいかもしれないけれど、前から使ってたnodebrewで行った。 $ nodebrew install v5.3.0 atom atom-jshint[…]
UIRefreshControlの代わりになるSwfitRefresherを作った！
Code 1 January, 2016
SwiftRefresherというライブラリを作りました！ UIRefreshControlのように引っ張って更新ができるライブラリです。このライブラリは一つの大きな問題を解決し、一つのデベロッパーの自由を拡張する特徴を備えています！ 問題の解決: UIViewControllerの中のUITableViewにおいても綺麗に動く UIRefreshControlはUITableViewControllerで使うと、意図した通り綺麗に動きます。しかし、UITableViewControllerをそのまま使うことは少なく、実際は、UIViewControllerの上にUITableViewを置いて使うことになります。UIRefreshControlはUITableViewControllerで使うことが想定されており、UITableView上で使うことはできるけれども、たくさん引っ張らないとRefreshのイベントが発動しなかったり回転しないActivityIndicatorが最初から見えてしまっていたり、不自然な挙動になります。 SwiftRefresherはこの問題を解決します。UITableView上に単独でおいても意図したように綺麗に動きます。指定した高さ（デフォルトでは44px）を超えた時に指を離すとRefreshのイベントが走ります。 自由の拡張: Refresherのビュー単位でのカスタマイズができる SwiftRefresherでは、Refresherのビュー単位でのカスタマイズが出来ます。SwfitRefresherEventReceivableプロトコルに準拠したUIViewのサブクラスをRefresherに渡すことで、プル状態、ローディング状態などに応じて見た目をカスタマイズできます。SwfitRefresherEventReceivableに準拠するとdidReceiveEventのメソッドを書く必要があります。これはRefresherのデリゲートになっています。下記のコード例はライブラリのデフォルトで使っているビューでの実装です。 public[…]
iOSのキーボード周りの扱いを簡単にするKeyboardObserverを作りました
Code 16 December, 2015
Swiftでライブラリを公開するという記事を書いた際に、手元のコードを一つマイクロライブラリ化してみました。それが、 KeyboardObserver です。 特徴 iOS開発で面倒なキーボードのイベントの処理を簡潔にします。キーボードのイベントはまず UINotificationの通知を監視 して、 渡ってくる辞書から値を取得してキャストして やっと高さ計算などをしてビューのサイズやinsetを変えると思います。やりたいことは、ビューの高さを変えることだけなのですが、そのための準備が面倒です。それを簡単に扱えるようにしたのが KeyboardObserver[…]
Swiftでライブラリを公開する
Code 16 December, 2015
Qiitaに投稿した記事です。自分のブログにも貼っておきます。 Swiftがオープンソース化されて、Swift3.0のロードマップが公開されたり、Swift package managerが出てきたり色々変化が起こりそうな（というか起こる）昨今ですが、今日（もう直ぐ朝）は、今現在使えるツールを利用してSwiftで書いたライブラリを公開する僕なりの方法を書いておこうと思います。オープンソース活動が趣味なので、書きます。 対象読者は、ライブラリをまだ公開したことがない人です。 この記事を読んでできること Carthage でライブラリを公開できる 同時にCocoapodsでライブラリを公開できる ライブラリを公開するときのディレクトリ構成のイメージができる[…]
Swiftの非同期処理を簡単に書けるBrightFuturesをコード例を多用して解説する
Code 16 December, 2015
Qiitaに書いた記事と同じ記事です。 Swiftの非同期処理を非常に簡単に書けるBrightFuturesですが、日本語の記事があまりないので、応援の意味も込めて書いてみようと思いました。 最新版である、3.1.2 の解説になります。 第一部：基本的な説明 簡単な例 READMEにもありますが、この例がまずわわかりやすいと思うので。 下記の例では、logInとfetchPostsで非同期処理が行われます。 BrightFuturesを使わない場合 User.logIn(username,[…]
Swift APIのavailabilityチェックはextensionでもできた〜
Code 22 November, 2015
状況に応じて #available や @available を使うことで、OSのバージョンによって処理を分けることができます。が、今日、コードを書いていてこれがextension単位でも効くことを知りました。 ドキュメントにも載ってる頻出の使い方 guard #available(iOS 8.0, OSX[…]
TouchVisualizerがSwift2.1に対応しました（遅><）
Code 18 November, 2015
iOSの画面タッチ可視化ライブラリTouchVisualizerがSwift2.1に対応しました！ 詳細 >> morizotter/TouchVisualizer 結構遅くなってしまった。。。それも、変更はとても面倒だという思い込みがあったから。実際は、プルリクをもらったんだけど、変更点はは大したことなかったです。また、以前からちょっとおかしかった画像のtemplate color設定も直っています。 ぜひおためしを〜。