2016-05-05

Vue.jsをちょこっといじってみた

AngularJSとReactは使ったことがあるけど、Vueを触ったことがなかったので練習がてらシングルページのポートフォリオサイトを作ったりしてる。で、トランジションについてやり方が分かったのでメモしておく。

表示と非表示のコンポーネントが干渉してカクカクするのを解決しようと調べたらin-out, out-inというオプションがあることがわかったが、つけてみてもなぜか適用されない。だいぶハマったがこれはv-transitionに対するオプションのよう。

今回使ったのはtransition属性。違いがいまいちわかってないがCSSでanimation-delayを指定するとうまくいった。
で、サンプルを作ってQiitaに記事を投稿した。

qiita.com

ソース置き場とサンプルページ

github.com

vue transition sample

2016-04-24

cloud9で整えるPerl開発環境

プログラミング Perl cloud9 mojolicious amon2

Cloud9

c9.io

基本無料で使えるウェブ上のIDEサービス。しかし、その実態はほぼVPS。
VMコンテナを立ててくれて、sudoできるので追加で必要なものを普通にapt-getでインストールできる。
プライベートなワークスペースを２個立てる場合は料金がかかる。

gyazo.com

plenv

Perlのバージョンを管理するためのツール。システムにデフォで入ってるバージョンが古かったりすると新しいパッケージが使えなかったりするので入れておくと便利。
ちなみにcloud9のコンテナはUbuntu 14.04でPerlのバージョンは5.18.2
RubyとかPythonとか大体の言語には同様のバージョンマネージャがあると思う。

$ git clone https://github.com/tokuhirom/plenv.git ~/.plenv
$ echo 'export PATH="$HOME/.plenv/bin:$PATH"' >> ~/.bashrc
$ echo 'eval "$(plenv init -)"' >> ~/.bashrc
$ git clone https://github.com/tokuhirom/Perl-Build.git ~/.plenv/plugins/perl-build/

GitHubのREADMEでは.bash_profileに追記しているがcloud9の初期設定しているbashの構成が崩れるので.bashrcに追記する。
最後の行はPerlをビルドするために必要なプラギン。

んで最新の安定バージョンをビルドする。

$ plenv install 5.22.1

入ったらデフォで使用するバージョンをこれに変更。

$ plenv global 5.22.1

cpanm

Perlモジュールのパッケージマネージャ。作者はrebuild.fmでおなじみのMIYAGAWAさん。
モジュールのレジストリであるCPANからよしなにパッケージをインストールしてくれる。
GitHubからクローンして使うこともできるけどplenvが入っているので以下のコマンドでOK

$ plenv install-cpanm

Carton

プロジェクトルートにcpanfileという名前の依存パッケージリストを置いておけば、それらをコマンド一発でインストールしてくれるツール。
Rubyでいう所のbundler。
cpanmでインストール。

$ cpanm Carton

WAF

Web Application Frameworkの略。ウェブ開発のための大枠。RubyだとRuby on Rails一択みたいな感じだがPerlでは次の２つが現実的な選択肢としてある。

Mojoliciousは重厚長大なフレームワーク。Railsに近い。Amon2はこれよりは薄い。Sinatraとかそのへんかな。

んで、両方ともcpanmで簡単にインストールできる。

$ cpanm Mojolicious
$ cpanm Amon2

プロジェクト作成

$ mojo generate app Hoge #Mojolicious
$ amon2-setup.pl Hoge #Amon2

$ cd Hoge/
$ carton install

おまけ

毎回コンテナ作るたびに同じコマンドを打つのが面倒だったのでまとめたやつを置いておく。

setup perl env

2016-04-13

Elixir+Phoenixを試してみる

プログラミング Elixir phoenix

聞いたことあるけど全く触ってなかったElixir言語のウェブフレームワーク Phoenixを試してみた。
ElixirはErlangVMの上で動作する言語でRubyのような書きやすいシンタックスを目指した言語らしい。
でもってログでレスポンスタイムをマイクロ秒で表示するくらい爆速らしい。

準備

Elixirインストール

brewで入る。便利。

$ brew install elixir

Phoenixインストール

elixirをインストールするとmixというパッケージマネージャが自動で入る。
これを使ってhexという依存解決ツールとphoenixをインストールする。

$ mix local.hex
$ mix archive.install https://github.com/phoenixframework/archives/raw/master/phoenix_new.ez

これでインストールはおk

Phoenixプロジェクトを作る

Railsを参考に作られているようなので基本的にはRailsと同じ流れ。
ちなみにデフォだとPostgreSQLを使うのでMySQLを使う場合はオプションで指定する。

$ mix phoenix.new project_name --database mysql

development環境のデータベースを変更する

これは僕の趣味。Railsでもいつもdevelopment環境はsqliteを使っている。
データベースを作り直すときにdbファイルを削除するだけでいいので楽。
変更するにはmix.exsを編集してsqliteのアダプタをインストールした後 config/dev.exs を編集する。

というわけでmix.exsを編集、

  defp deps do
    [{:phoenix, "~> 1.1.4"},
     {:mariaex, ">= 0.0.0"},
     {:sqlite_ecto, "~> 1.1.0", only: :dev}, #これを追加
     {:phoenix_ecto, "~> 2.0"},
     {:phoenix_html, "~> 2.4"},
     {:phoenix_live_reload, "~> 1.0", only: :dev},
     {:gettext, "~> 0.9"},
     {:cowboy, "~> 1.0"}]
  end

からのインストール、

$ mix deps.get

からの config/dev.exs を編集。

# Configure your database
config :project, Project.Repo,
  adapter: Sqlite.Ecto,
  database: "priv/repo/dev.sqlite3"

DBマイグレーション

設定ファイルで出てきているEctoというのがRailsにおけるActiveRecord相当のものらしい。

$ mix ecto.create

とやることでデータベースが作られる。

Phoenixアプリを立ち上げてみる

$ mix phoenix.server

デフォルトでは4000番ポートで待ち受けている。
http://localhost:4000でアクセスするとウェルカムページが表示される。
gyazo.com

というわけで今回はここまで。
次はデータベースを使ってユーザページでも実装してみようかと思う。

2016-04-06

npmプロジェクトを0からはじめるメモ

プログラミング Node.js gulp webpack

yeomanとか使うと便利ですが、いらない設定がされていたりタスクランナーがgulpじゃなくてgruntだったりと不都合があるのでnpmプロジェクトを自分で0から作る方法をまとめておくことにした。

準備

適当な名前でプロジェクトディレクトリを用意して npm init するのです(`・ω・´)

$ mkdir node-project
$ cd node-project
$ npm init

ディレクトリ構造

Railsプロジェクトを模して作る

/- app/
|  |- index.coffee
|  |- assets/
|- config/
|- public/
|- package.json

package.json

scriptsセクションにstartタスクを追加。

"scripts": {
    "start": "node ./dist/index.js",
    "test": "echo \"Error: no test specified\" && exit 1"
}

gulp一式インスコ

D を忘れずに。

$ npm i gulp gulp-coffee gulp-shell gulp-webpack webpack coffee-loader -D

webpackの設定

フロント側のjsはwebpackで固めるよ(`・ω・´)

module.exports = {
  entry: './app/assets/javascripts/main.js',
  output: {
    filename: 'bundle.js'
  },
  module: {
    loaders: [
      { test: /\.coffee$/, loader: 'coffee' }
    ]
  }
};

タスクランナー

最近はgruntよりgulpが主流！
gulpfileはCoffeeScriptやTypeScriptでも書けるよ！

var gulp    = require('gulp');
var coffee  = require('gulp-coffee');
var webpack = require('gulp-webpack');
var shell   = require('gulp-shell');

gulp.task('default', ['build:server', 'build:assets']);
gulp.task('build:server', () => {
  gulp.src([
    'app/**/*.coffee',
    '!app/assets/**/*.coffee'  // クライアント側はwebpackで固める
  ])
  .pipe(coffee())
  .pipe(gulp.dest('dist'));
});

gulp.task('build:assets', () => {
  gulp.src(['app/assets/javascripts/**/*.coffee'])
  .pipe(webpack(require('webpack.config')))
  .pipe('public/assets/javascripts');
});

gulp.task('run', shell('npm run start'));

オフトゥン大好き。

惰眠系プログラマの作業ログで( ˘ω˘ ) ｽﾔｧ…