「作りながら学ぶ React入門」というReactの入門書を書きました。 Reactの情報は Reactのホームページ の Docs や中級者向けの入門 Tutorial にまとまっていますが、初心者には敷居が高いかもしれません。 私自身も Reactの教育を行うのに良い日本語書籍はないかなぁ？ と探していたのですが見つからないので、自分で書くことにしました。 「作りながら学ぶ React入門」の紹介 各章毎に作者の思いを込めつつ紹介記事を書きます 0. まえがき 原稿校正の最終段階で「まえがき」お願いいたします〜 と言われ、一般的な事を書いてもなぁ・・・と、とても悩みました。そこで素直に私とReactの関わりを書きました。 私自身が2万行のjQueryベースの ■■なSPAコードをReactに置き換えた経験が、この本には込められています。 1. はじめに 「前提知識」に書いているように本

現在の仕事で作ってるiOSアプリの中に、マイクからの音をm4a (AAC) で録音する機能が必要なので、 適当なサンプルコードはネット上に在るだろうと思い探したのですが、案外みつかりませんでした。 なぜ見つからないかというと 今回はいろいろな理由から、安易な AVFoundation ではなく AudioQueueを使う必要があった Objective.c のサンプルは見つかるが、Swiftは少ない、さらに Swift 3.0 のコードは絶望的 また録音フォーマットが PCMのものばかり オーディオ周りが好きなiOS(mac OS)プログラマーは少ないの？ 私もオーディオ周りの知識は極めて低い Google先生が教えてくれたのは以下でした Appleの Audio Queue Services公式ドキュメント コードは Objective.c ですが、確実に信頼できる情報 Swift で

世の中もうDockerの時代なのかもしれませんが、ある案件で使うサーバーのプロビジョニングツールとしてAnsibleを使ってみました。 今まではChefを使っていましたがChefはRubyでガリガリ書けるので何でもできますが、メンテや構成管理情報を伝えるのに難があるかなと思ます。そこでシンプルという噂のAnsibleを使って、Ruby on Railsの動くサーバーを構築するAnsibleを書いてみました。 本家のドキュメント もちゃんとしてますし、ネット上にはたくさんの情報があるので楽に作れましたがそれでも何点か苦労したのでそこを中心に書きます。Playbooksは以下のようにroleに分けて書きました。 ├── roles │   ├── apps │   │   ├── files │   │   │   ├── logrotate │   │   │   └── unicorn │

今更という感じもありますが、私の会社のホームページ をレスポンシブウェブデザインに対応しました。 レスポンシブ CSS フレームワークの選定 レスポンシブウェブデザインにするのには、何らかの レスポンシブ CSS フレームワーク を使うのが早道です、 ネットを検索すると、たくさんの レスポンシブ CSS フレームワーク がありま、有名どころは Bootstrap でしょうか。 会社のホームページは複雑なフォーム等はないので、 CSSのサイズが小さい JQueryやJSを前提としてない シンプル という条件で調べてみましたところ、 Kube, Skeleton, Pure などが候補になりました。 Kube は以前、「お問い合わせフォーム」で使っていたのですが、ホームページに Version 5.0 があるのに GitHubは Version 4.03 だったので怪しいと思い止めました。Sk

あるセミナー向けに作った、React Nativeアプリを別のMacで git clone して実行しようとしたら 下の画像のエラーが出て解決まで時間がかったのでメモしておきます。 React Native 開発環境の構築 React NativeのGetting Startedにある手順で $ npm install -g react-native-cli $ brew install watchman $ brew install flow インストールされた react-nativeコマンドでプロジェクトを作成 $ react-native init react_native ボタンやTabBarのアイコンが使いたかったので、以下をインストール。 react-native-vector-icons をプロジェクトに設定するにのrnpm (React Native Package Ma

React.js + Photon.css + Webpack で Electronのサンプルアプリを作ってた時のメモです。 開発環境 まず、以前書いた サーバーサイドプログラマーのためのReact.js 入門 2. 開発環境の構築の続き のように React.js の開発が出来る環境を準備します。 追加するのは electron-prebuilt と Mac OS X風なUIが作れる Photon を追加するのみです。 npm install photon で入る Photon は違うものなので注意して下さい。 インストール $ npm install --save react react-dom $ npm install --save-dev babel-loader babel-preset-es2015 babel-preset-react $ npm install --sav

教育の仕事でGitLab(プライベートでpull requestなどが出せる安いサービス)が必要になり、サーバーを立ち上げました。以前は自社のコードもGitLabで管理していたのですが、今は 改造版Ginatra を使っているので、教育の期間のみGitLab用のサーバーを立ち上げる事にしました。 GitLabのインストール 以前はGitLabのインストールはたいへんでしたが、今は apt や yum でインストールできます。 IaaSクラウドサービスでサーバーを準備し、インストールすれば簡単に完了です。 RDB(PostgreSQL), nginx 等もインストールされます。 私は Ubuntu が慣れているので、Ubuntu 14.04 にインストールしましました。 $ sudo apt-get update $ sudo apt-get -y dost-upgrade $ sudo a

私は仕事がら、人前でコード作成のデモを行う事がよくあります。その場でバリバリとライブ・コーデイング出来るとカッコ良いですが、間違えたり、コードを書くことに気を取られ説明がおろそかになったりすることも起こりがちです。 そこで説明のストーリに沿ってコード作成の過程をgitにコミットしておき、コマンドで簡単に git reset を行い、その時点でのコードを説明したり、動かしたりできるツールを作りました。 上の画像のように、このコマンドを起動するとgit logが表示され、現在のコミットが赤い色で表示されます、ここで n キーを押すと次のコミットに git reset できます。また p キーで前のコミットに git reset したり、カーソル上下キーでコミットを移動して RETURNキーでそこにgit reset できます。 このコマンドを実行すると git reset されてしまうので、

React.js + Photon.css + Webpack で Electronのサンプルアプリを作ってた時のメモです。 開発環境 まず、以前書いた サーバーサイドプログラマーのためのReact.js 入門 2. 開発環境の構築の続き のように React.js の開発が出来る環境を準備します。 追加するのは electron-prebuilt と Mac OS X風なUIが作れる Photon を追加するのみです。 npm install photon で入る Phot… …プログラマーのためのReact.js 入門 1. 開発環境の構築で基本は書いたもの 開発期間 約1.5ヶ月 (普通にやったら 2.5ヶ月くらい？ 詰め過ぎて腰を痛めました ^^;) 移行後のJSは 11K行 感想など 既存アプリは構成など初期設計は良く出来ている感じで実はそれほど悪いものではないが、実装はコピーぺ

ここ数ヶ月、久々に詰めて行っていた Recat.js の仕事がほぼ終わりました !! 仕事の詳細は書けませんが。 既存のjQueryベースのWebアプリがメンテナンス不可能に近くなっているので Recat.js に置き換えました。 既存のアプリは Backend は Ruby on Rails jQueryで作られてた Frontend の JS は約 14K 行 ＋ テンプレート 4K 行 アプリは大きく3つに別れるが、共有部分無しでコピーペーストで作られている 今回の仕事 Backend は 落ちていたテストを修正したくらい End to End テストが無かったので書いた Turnip(RSpec, Gherkin) + Capybara + Poltergeist + Phantom.js Featureファイル 2K行、 steps 1.2K行 開発期間 約1ヶ月 jQuery

React.jsの仕事の納期におわれ1ヶ月ぶりになってしましたましたが、今回は react-router の導入 更新系ページの追加 を行い、Todoアプリを完成したいと思います。 react-router JSで作られたアプリはSPA(Single Page Application)と呼ばれているように物理的には1つのページ(URL)内で動作します。しかしアプリがURLに対応してないとブラウザーのbackボタンに対応出来ないないですし、プログラムの構成を考えるのも面倒です。 そこで、URLとアプリ(JS)を対応づける react-router を使うと Rails の routes のように URLにアプリを対応づけ出来、今ままで Rails 等で開発してきた人にはとても嬉しいことです。 react-router には チュートリアル や充実したドキュメント がありますので、しっかり理解

いよいよ React.js 入門 開発環境作成に2回も使いましたが、今回から React.js を始めます。 開発環境というかエディターですが、主なエディターは JSX, ES6 をサポートする拡張パッケージ、マクロ等があると思いますので入れておきましょう。もちん WebStorm のようなIDEも良いかもしれません。 これから作るTodoアプリはRuby on Railsのサーバーとhttpプロトコルで通信する必要があります。そこで今回は通信部分には、Promisベースの今風なHTTP clinet ライブラリー axios を使ってみます、 使い方は極めてシンプルです。 インストールは $ npm install --save-dev axios まずは、超簡単なReact.js アプリを動かす 前回書いた index.js を以下のように変更してください。もちろんターミナルでは we

最近、バリバリと jQueryベースのフロントエンドを React.js に置き換えています。 私も主に Ruby on Rails等の サーバーサイドエンジニアで、最近のフロントエンド開発を本格的に開発するのは初めてです。いろいろとつまずきながら進んできました。 まずは node.js をインストールし npm を知る 環境構築のためのツールは node.js の上で動きます、そこで node をインストールします。 ツールを動かすだけなので node のバージョンはあまり気にしなくて良いと思います。(2016-02-04日現在ではバージョン5.5.0が入ります) $ brew install node node をインストールすると npm コマンドもインストールされます。npmは node.js用ライブラリーと、その管理を行うコマンドです。 Rubyの gem に相当するものですが、

Turnip, Cucumber, RSpec feature などを使った end-to-end テスト のテストデータをどう作るかについて、今までの経験を書いてみます。 RSpecなどを使ったモデルのテストであれば、テストデータは factory_girl 等を使い、テストに必要なデータを it, describe単位でテストで作成する事が多いと思います。 しかし、end-to-endテストでは人がそのアプリを使う手順、シナリオに沿ってのテストにり、モデルのテストのように個々のテストで個別のデータを必要になることはあまりなく、いくつかのデータを作っておけば済みます。また、モデルのテストでは必要になるモデル(テーブル)は少数ですがend-to-endテストではほとんどのモデル(テーブル)にデータが必要になります。 そこで、今まで作ったアプリのend-to-endテスト用のデータをどのよう

Chef から Itamae ？ EY-Officeではサーバーソフトの構築を行うプロビジョニングツールとして現在は Chef-solo を使っています。しかし Chef-solo は終了するらしいのですが、その移行先が良いように思えず悩みながら使い続けてきました。 そんなとき登場してきた Itamae はシンプルでとても魅力を感じました。詳しくは クックパッド開発者ブログのItamae記事 をご覧下さい。 今回時間があったので、EY-Officeの開発支援サーバー (Redmine, Git/Gnatara, CI ...)の全プロビジョニングをChefからItamaeに置き換えてみました。書き換えたレシピは約700行です、そこで感じた事を書きます。 Itamaeの良いところ、良くないところ 1. 情報が貧弱 まず良くない点ですが、Chefのドキュメント に比べると情報の量、質ともに低い

Textile vs Markdown 軽量マークアップ言語にはたくさんの種類があります。私も教育で使うテキストの作成やRedmineのWikiでは長年 Textile を使って来ました。 しかし、最近はGithubの標準のマークアップ言語がMarkdownだったり、Atom(エディター)をはじめたくさんのMarkdownをサポートするツールが現れ、私も MacDownというツールが気に入り開発ドキュメント等のMarkdown化がどんんどん進んでいます。このブログもはてな記法ではなくMarkdownを使っています。 TextileとMarkdownを比べると 標準のMarkdown は記述能力が低くテキストを作るには能力不足ですが、 GitHubの拡張 や php Markdown Extra などの拡張機能を使えば、ほぼ同等です。 Redmine Redmineのマークアップ言語のデフォ

iOS開発者の勉強会 yidev 第１８回勉強会 で iOS 開発者のためのバックエンド入門 (1) という発表をしました。 iOSだけでなく、Androidの開発者の方にも参考になる話だと思います。 今回の発表で伝えたかった事は バックエンドを作るにはいろいろな選択肢がある Parse.comに代表される BaaS (Backend as a Service)を使うとプログラミングやサーバーの構築なしにバックエンドが持てます。ただしBaaS側が提供している機能(データ共有、プッシュ通知...)出来ることには限界があります。 BaaSの中には StrongLoopのように、プログラミング出来る自由度の高いものもあります。 たいていのBaaSは、お試し的な利用は無料ですが負荷が高くなると課金されます。ビジネスの場合にはコスト的にも独自のバックエンドを作るという選択もあります。 独自のバックエ

ある仕事でスマフォ用のAPIサーバーを作る事になり、REST-like APIが簡単に作れるフレームワーク grape を調査してみました。grapeの良さは、DSLで簡単にAPIサーバーが書ける点とRackで動く軽いフレームワークなのでRuby on Railsに比べ高いパフォーマンスが期待できる点です。 システム構成 Grapeは Mounting に書かれているようにいくつかの構成で動かせます Rack: Rack上で動かす ActiveRecord without Rails: Rackの上で動かすけど ActiveRecord を使う Rails: Ruby on Railsの中で動かす ... 今回のシステムでは管理者用のWebアプリは Ruby on Railsで作るので、モデルを共有できるRuby on Railsに組み込み使うのが魅力的です。 評価用コードを作ってみた 準

SwiftでEvernote APIを使うiOSアプリを作ろうとして、なかなか上手く行かなかったので、今回行った手順をまとめておきました。 基本的には Using the Evernote API from Swift に書かれた手順ですが、上手く行かなかったので少し追加しました。 手順 1. Evernote Cloud SDK for iOS の追加 GitHubのEvernote Cloud SDK for iOS を submodule としてプロジェクトに追加します % git submodule add https://github.com/evernote/evernote-cloud-sdk-ios.git Cloning into 'evernote-cloud-sdk-ios'... ... % git submodule 804c0ff4221a430fa5e9619

昨晩から、約4時間をこの問題の解決に費やしてしまいまいました 。。。。他の人が同じ間違いしないように記録しておきました。 あるアプリに下のような動きをする、簡単なアニメーションを付けました(この画像、コードは説明用サンプルです)。 失敗のはじまり コードは以下のように書きました。 @interface ViewController () @property (weak, nonatomic) IBOutlet UILabel *scrollLabel; @property (weak, nonatomic) IBOutlet UILabel *statusLabel; - (IBAction)touchStartButton:(id)sender; @end @implementation ViewController - (IBAction)touchStartButton:(id)se

一昨日のMP3ファイルのID3タグを一度に変更できるツールを作ってみた に続き、iTunes ライブラリファイル (iTunes Music Library.xml) を編集するMac OS X アプリをSwiftで作ってみたので、簡単にSwift言語とQuickというBDDフレームワークに付いて書きます。 コードはGitHubに置きました 。Xcode6 beta6で動作確認しています このアプリの使い方 起動するとTunes ライブラリファイルiTunes Music Library.xmlを読み込み上のような画面が表示されます。Alubm Title名を入力しSearchボタンを押すと、そのアルバムの曲がテーブルに表示されます。ここでタイトルを変更したい場合は、AmazonでCDを検索し下のような曲名一覧をコピーし、テキストビューにペーストしてReplaceボタンを押すと、アプリ内の

わけあって昔作ったKeynoteを眺めていたら、かなり良い資料だと思い再掲載してみました (はてなダイアリー|ブログには初めてです)。 RubyWorld Conference 2013 の発表資料です。 Ruby、Ruby on Rails開発者を増やしたいと考えている開発マネージャーやリーダーの方は是非読んでみて下さい。社内で教育いくして行く際に役立つヒントがたくさん書かれていると思います (自画自賛 ^^;)。