フルスタックエンジニアに

フルスタックエンジニアを目指すブログです。主にRuby on RailsやJavaScriptについて書いていきたいと思います。

ipaファイルとapkファイルを解析するgemを作った

ipaファイルとapkファイルを解析する必要があって、軽く調べてみたところどちらか片方を解析するgemは見つかったが、 両方を透過的に扱えるものがなかったので作ってみた。

gemを作るのは初めてなので作法とかあってるかわからないが、結構簡単に公開することができた。

github.com

続きを読む

VimでVue.jsを書く環境を整える

VimでVue.jsを書く環境を整える1

Vue.jsの特徴の一つに、 Single File Componentsというものがあります。

これはテンプレートスタイルスクリプトを1つのファイルにまとめて記述して、コンポーネントを定義できるというものです。

この.vueファイルVueifyVue-loader を通すことによって、実行可能なコードになります。

続きを読む

JavaScriptフレームワーク比較用サンプルアプリ 「TODO-Module-Vue」を作る

TODO-Module-Vue-eye-catch

今回はTODO-ModuleのSPA(シングルページアプリケーション)クライアントをVue.jsを使って作っていきます。

Vue.jsとはViewModelに特化したフレームワークです。AngularJSやKnockoutJSに影響を受けており、似ているところも多々あります。

続きを読む

JavaScriptフレームワーク比較用サンプルアプリ 「TODO-Module-Marionette」を作る

TODO-Module-Marionette-eye-catch

今回は前回作ったTODO-Module-BackboneMarionetteを導入していきます。
Backboneは薄いライブラリなので、オレオレ実装になってしまうことが多いです。
Marionetteを導入するとBackboneのベストプラクティスに乗っかれるので、大規模アプリには非常に有用です。

例えば

  • 自動で描画をしてくれるので、自分でrenderメソッドを定義する必要がない
  • ビューの管理をしてくれるので、破棄し忘れてゾンビViewが生まれる危険性が減る
  • ヘッダー領域・メイン領域などを管理するRegion機能がある

などさまざまなメリットがあります。

前回の記事 www.full-stack-engineer.com

デモアプリとソースコードはこちらに公開しています。

続きを読む

JavaScriptフレームワーク比較用サンプルアプリ 「TODO-Module-Backbone」を作る

TODO-Module-Backbone-eye-catch

前回TODO-ModuleのクライアントをAngularJSで作成しましたが、 今回はBackbone.jsを使って作っていきます。 Backbone.jsAngularJSとくらべて薄いフレームワークで、シンプルな作りになっています。 そのため自由度が高いフレームワークになっています

デモアプリとソースコードはこちらに公開しています。

続きを読む

JavaScriptフレームワーク比較用サンプルアプリ 「TODO-Module-AngularJS」を作る

TODO-Module-AngularJS-eye-catch

前回TODO-ModuleのAPIを作成しましたが、今回はそのAPIを使ったSPA(シングルページアプリケーション)のクライアントを AngularJSを使って作っていきたいと思います。

デモアプリとソースコードはこちらに公開しています。

続きを読む

JavaScriptフレームワーク比較用サンプルアプリ 「TODO-Module」を作る (3/3)

TODO-Module-Rails-eye-catch

前回までで作成したRailsアプリケーションのAPIを作っていきます。

www.full-stack-engineer.com

ユーザーのモデルに認証トークンを追加する

Webアプリケーションの場合は、セッションを利用してログイン状態を保持していますが、 APIの場合はそれができません。
何らかの方法でリクエストごとに認証してユーザーを特定する必要があるのですが、 これにメールアドレスとパスワードを使ってしまうのはセキュリティ上よくありません。
これらに代わる認証トークンを作成し、それで認証を行いようにします。 認証トークンを保存するカラムをusersテーブルに追加し、 ユーザー作成時に自動的に認証トークンも生成されるようにしましょう。

続きを読む

JavaScriptフレームワーク比較用サンプルアプリ 「TODO-Module」を作る (2/3)

TODO-Module-Rails-eye-catch

前回の続きです。

www.full-stack-engineer.com

ログイン画面ができたので次はユーザー登録機能を作っていきます。

続きを読む

JavaScriptフレームワーク比較用サンプルアプリ 「TODO-Module」を作る (1/3)

TODO-Module-Rails-eye-catch

実用的なJavaScriptフレームワーク比較用サンプルアプリTODO-Module」を公開しましたが、 この解説を何回かに分けてしていきたいと思います。

www.full-stack-engineer.com

ソースコードはこちらで公開しています。
デモはこちらです。

サーバーサイドはRuby on Railsを使っていきます。動作環境は以下のようになっています。

動作環境

  • OS X Yosemite
  • ruby 2.2.1p85
  • Rails 4.2.0
  • MySQL 5.6.19

目的はAPIを作ることですが、まずは普通のRailsアプリケーションを作ってその後にそれをAPI化していきます。

続きを読む

実用的なJavaScriptフレームワーク比較用サンプルアプリ「TODO-Module」を作ってみた

TODO-Module-eyecatch

リッチなWebアプリケーションを作る上でJavaScriptフレームワークは欠かせませんが、 次々と新しいものが出てきてどれを使えばいいかわからないという方も多いと思います。
様々なフレームワークでシンプルなToDoアプリケーションを公開している TodoMVCというサイトがありますが、 大規模なアプリケーションをつくろうとした時、これでは少しシンプル過ぎてイメージが湧きにくいのではないでしょうか。

なので、もう少し実用的なToDoアプリケーション TODO-Module (source) というのを作ってみたので公開します。 また、このAPIを使ったSPA(シングルページアプリケーション)のクライアントも作りました。

現状はこの3つだけですが、今後増やしていく予定です。
ユーザー登録にメールアドレスが必要になっていますが、 メールは送られませんし実在しなくてもメールアドレスの形をしていればOKですので 自由に試してみてください。

[追記 2015/05/23]
Vue.jsを使ったクライアントを作りました。

TODO-Module デモ

これらの解説記事も今後書いていきます。

www.full-stack-engineer.com