Node.jsの「http-server」が便利すぎる

タイトルの通りですｗ

最近のJSのフレームワーク開発などでは、結構当たり前のように使ってるのですが、それ以外で外部へのajaxでデータなどを取得するサンプルとかを動かすのに楽だったので、ちょっとしたメモ

インストール

npm install http-server

実行

./node_module/.bin/http-server

これだけで、簡易のhttpサーバが立てられるので楽ってそれだけの話。 昔は検証するためだけに、Apacheとかを頑張って設定していたのに楽になったものだ。

Svelteを使ってみる（２）

Svelte JavaScript

Svelteを使ってみる（１） - hinosita's diary で、「Svelte」の導入と簡単なコンパイルの行い方をやってみたので、公式ドキュメント的には次はComponet APIの説明ですね。

各APIの概要と説明は Learn Svelte を読んで頂だければよいかと思うのですが、各APIを実際に動作させるとどうなるかを見ていこうかと。

component.set

こちらのAPIはコンポーネントのdataオブジェクトの値を追加したり、更新したりするAPIですね。

初期状態

let component = new HelloWorld({
  target: document.querySelector('main'),
  data: {
    name: '太郎',
    answer: 42
  }
});

このような感じで、dataオブジェクトがあったとします。

新規データの追加

component.set({
  answer2: '50'
});

ブラウザの開発モードのコンソールからこのコマンドを打つと、dataオブジェクトが以下のようになります。

data: {
  name: '太郎',
  answer: 42,
  answer2: 50
}

answer2: 50 という値が追加されているのがわかります。 取得できるか以下のコマンドで確認できます。 componet.get は後ほど説明します。（値を取得するAPIなんですけど。

追加された値の確認

data: {
  name: '太郎',
  answer: 42,
  answer2: 50
}

値の更新

既存のkeyに対して、set APIを呼ぶと値の更新になります。

component.set({
  name: '一郎'
});

observer

  • observerの設定 値に変更があった際に、何か処理をしたい時などに利用する感じですね。
console.log('answer 変数の初期値');
  const observer = component.observe('answer', answer => {
    console.log(`the answer is ${answer}`);
});

このコードだと、answer の値が更新される度に、console.logが出力されます。

任意のイベントの登録とイベント発火

  • 任意のイベント登録
const listener = component.on('thingHappened', event => {
  console.log(`A thing happened: ${event.thing}`);
});

これだけでは、このイベントは実行されません。 次の fire というAPIでイベント発火させます。

  • イベントの発火
component.fire('thingHappened', {
  thing: 'this event was fired'
});

コンポーネントの削除

コンポーネントを削除と、削除した際の後処理を行えるAPIです

component.on('teardown', () => {
  alert( 'goodbye!' );
});

こちらのサンプルコードだと、コンポーネントが削除され、ブラウザのアラートが表示されます。

このあたりのAPIのサンプルをgithubにあげておりますので、こちらを見ていただければなんとなくイメージできるかと。 私が各APIがどのように動くかを確認するために、サッと書いたコードなので、ほとんどconsoleにしか結果が出ないのですが…

GitHub - rakuda-daraku/svelte_sampole at componetAPI_sample

Svelteを使ってみる（１）

JavaScript Svelte

最近ちらほらと名前を聞く「Svelet」というフレームワーク？ の導入の仕方のメモ （個人的にはコンポーネント トランスファという方がしっくり来るんだが）

おそらく話題になってる経緯は、 In 2017 expect... · Front-end Developer Handbook 2017 に「Svelet」の名前が出てきているからなんだろうな〜というくらいにしか思ってないです。 そのため、今後他のフレームワーク（React, Angular, Vue, Riot など)みたいに普及するかはわからないです。 ただ、他のフレームワークよりもデザイナーさんとかは扱いやすいと思ってます。

まだ、検証してはいないので今後利用していく上で意見が変わるかもしれませんが、現段階では他のフレームワークやライブラリにほぼ競合しないのでは？と思い、その辺りが個人的に注目度が高いです。 このあたりは今後いろいろ試してみてブログで報告できたらいいなー。

当面は公式https://svelte.technology/guide#getting-started の getting-startedに従っていきます。

前提条件

  • node.js (npm) がインストールされていること。 *1

Svelte CLIをインストール

npm の場合

npm install  svelte-cli

※ 任意でグローバルインストールしてください。

yarn の場合

yarn add  svelte-cli
yarn

インストール結果

├── node_modules
│   ├── .bin
│   │   └── svelte -> ../svelte-cli/bin.js

svelteというコマンドがインストールされます。

コンポーネントを用意する

  • コンポネント用のHTML HelloWorld.html ファイルを用意します。
<h1>Hello {{name}}</h1>

ほぼ、普通のHTMLファイルです。

コンポーネントファイルをコンパイルする

コンポーネントをコンパイルして、JSファイルへ変換します。

svelte compile --format iife HelloWorld.html > HelloWorld.js

index.html からコンポーネントのJSファイルを読み込む

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My first Svelte app</title>
</head>
<body>
  <main></main>
  <script src="HelloWorld.js"></script>
  <script>
    var app = new HelloWorld({
        target: document.querySelector('main'),
        data: {
            name: 'test'
        }
    });
  </script>
</body>
</html>

実行結果

f:id:hinosita:20170304010354p:plain

コンポーネントファイルで「{{name}}」と実装した箇所も、変換されてます。

動くとこまでは、確認が取れましたので今回はここまで。

*1:ただし、私はyarnでインストールしました。

Swagger Editorをローカルで動かしてみた

Swaggerってもう馴染みになってるツールだけど、私の開発環境ではまだまだ導入されてはおらず APIのドキュメントなんて、まだまだExcel or スプレッドシートという状況で。。。

先日mtgで、ちょっとSwaggerの話を出したのでローカルとかで動かす準備をしてみようかと。 公式のドキュメント に書いてある通りなんですが…

Swaggerインストール

やることは以下のことのみ

  1. swagger-editorを稼働させるwebサーバをインストール

  2. githubからswagger-editorのソース一式をダウンロード

  3. swagger-editorのソースを解答

  4. swagger-editorを起動

webサーバのインストール

npm install http-server

swagger-editorをダウンロード

wget https://github.com/swagger-api/swagger-editor/releases/download/v2.10.4/swagger-editor.zip

zipファイルの解凍

unzip swagger-editor.zip

これで環境の準備は完了です。

swagger-editorを起動

./nodo_module/.bin/http-server swagger-editor

個人的にnpmのツールをグローバルインストールしたくないので、起動コマンドが少し長めになってます。 任意でhttp-serverをグローバルにインストールするなり、npm scriptを記述するなどで、ここはもっと短いコマンドになります。

実行結果

f:id:hinosita:20170212011707p:plain

公式で公開されているswagger-editorと同様のモノがローカルで稼働させられます。

Dropzone.jsとRailsでファイルアップローダを作ってみた

Ruby Rails Dropzone

久しぶりにブログ書きますね。 いろいろやってるけど、次々と新しいことが振ってきたりで中々纏める時間が無い（という言い訳）

ちょっと仕事でファイルアップローダを作成する必要が出てきて、仕様として複数の画像ファイルを一括でアップロード出来て、 プレビューも表示行うということで、フロント側をどうしようかなって思っていろいろ調べていてDropzone.jsにたどりついたわけです。 試行錯誤しながらやっていたので作業まとめメモ的な内容です。

Dropzone.jsとは

公式サイト Dropzone.js

ざっくりまとめるとこんな機能があるものです。

  • ドラッグドロップ or クリックでファイルアップロード
  • 複数ファイルのアップロードが可能
  • デフォルトでプレビュー機能が付いてる
  • JSON形式でバックエンドのシステムにファイルを送る

環境構築

検証様の環境構築を構築

バックエンド(Rails環境）

  1. Railsアプリを作成
rails new dropzoon_sample --skip-bundle

作成されたRailsアプリに必要なgemを追加します。

2.Gemfileの編集

gem 'carrierwave'
gem 'dropzonejs-rails'

「dropzonejs-rails」ではなく、公式サイトからJSファイルをダウンロードしてassetsに追加しても動作しますが、今回はgemで行ってます。 dropzone.jsの利用方法は変わりません。

3.bundle installを実行

bundle install

4.scafoldでサンプルアプリの雛形を作成

rails g scaffold picture_store picture:string

これでCRUDアプリの雛形が出来ます。

5.carrierwaveのUploaderクラスを作成し、モデルに紐付ける

rails g uploader picture

app/model/picture_store.rb

class PictureStore < ApplicationRecord
  mount_uploader :picture, PictureUploader
end

6.RailsアプリからDropzone.jsを読み込むように設定する app/assets/javascripts/application.js内に以下の内容を追加する

//= require dropzone

app/assets/stylesheets/application.css

 *= require dropzone/basic
 *= require dropzone/dropzone

CSSは必須ではないのですが、サンプルアプリの見た目を良くするために

7.コントローラの編集 createメソッドのインスタンスを作成する部分を以下の様に修正する app/controllers/picture_stores_controller.rb

@picture_store = PictureStore.new({'picture' => params.require(:file)})

8.ビュー部分の編集 app/views/picture_stores/_form.html.erb フォームを編集する

<%= form_tag(picture_stores_path, class: 'dropzone', id: 'upload-dropzone') do %>
  <div class="fallback">
    <%= file_field_tag('attach[file]') %>
  </div>
<% end %>

実行

f:id:hinosita:20161011223237p:plain

まとめ

dropzone.jsは読み込みformタグに所定のid等が設定されているとデフォルトのままでも画像ファイルをセンタするたびに非同期でアップロード処理が動作します。 dropzone.jsを動かすところまでのまとめです。 デフォルト設定を変更して、submitボタンをクリックしてから全ファイルを送ったりファイルの種類やサイズ制限なども容易に可能です。

Docker for Macアプデしたら動かなくなった

Docker

何でだろう？

こんなログが出てるんだが、追いきれてない

Diagnostic ID: FEBB2914-A2A5-4BA0-B08D-127C44CB59D0
Docker for Mac: 1.12.0-a (Build 11213)
macOS: Version 10.11.6 (Build 15G31)
[ERROR]  docker-cli
         cannot find docker
         docker-cli check failed with: Failure("docker -v: timeout after 10.00s")
[OK]     app
[OK]     moby-syslog
[ERROR]  disk
         disk check failed with: Failure("exec: /Applications/Docker.app/Contents/Resources/bin/../../../Contents/MacOS/qemu-img check /Users/aaaa/Library/Containers/com.docker.docker/Data/com.docker.driver.amd64-linux/Docker.qcow2 > /tmp/FEBB2914-A2A5-4BA0-B08D-127C44CB59D0/20160814-090504/qemu-img-check.stdout 2> /tmp/FEBB2914-A2A5-4BA0-B08D-127C44CB59D0/20160814-090504/qemu-img-check.stderr: exit 1")
[OK]     virtualization
[OK]     system
[OK]     menubar
[ERROR]  osxfs
         com.docker.osxfs is not running
[ERROR]  db
         /Users/aaaa/Library/Containers/com.docker.docker/Data/s40 does not exist
         Unexpected error (No such file or directory) connecting to /Users/aaaa/Library/Containers/com.docker.docker/Data/s40
         com.docker.db is not running
[ERROR]  slirp
         /Users/aaaa/Library/Containers/com.docker.docker/Data/s51 does not exist
         Unexpected error (No such file or directory) connecting to /Users/aaaa/Library/Containers/com.docker.docker/Data/s51
         com.docker.slirp is not running
[OK]     moby-console
[OK]     logs
[ERROR]  vmnetd
         /var/tmp/com.docker.vmnetd.socket does not exist
         Unexpected error (No such file or directory) connecting to /var/tmp/com.docker.vmnetd.socket
         /private/tmp/vmnetd/com.docker.vmnetd is not running
[OK]     env
[ERROR]  moby
         /Users/aaaa/Library/Containers/com.docker.docker/Data/com.docker.driver.amd64-linux/console-ring does not exist
[ERROR]  driver.amd64-linux
         Docker.app/Contents/MacOS/com.docker.driver.amd64-linux -db is not running

同じようなエラーが出てる人もいるけど、どう解決するんだろう？

Angular2 RC5出ましたね

Angular2 RC5が出ましたね。

RC5からmoduleが追加されたということで、早速公式のチュートリアルをやってみようかと。 あと、手元にRC4の頃のチュートリアルのソースが残っていたので、簡単に比較してみようかと。

  • 開発環境作

package.jsonの中身が変わってますね

"@angular/common": "2.0.0-rc.4"
"@angular/compiler": "2.0.0-rc.4"
"@angular/core": "2.0.0-rc.4"
"@angular/platform-browser": "2.0.0-rc.4"
"@angular/platform-browser-dynamic": "2.0.0-rc.4"
"@angular/router": "3.0.0-beta.2"
"core-js": "^2.4.0"
"rxjs": "5.0.0-beta.6"
"systemjs": "^0.19.25"
"zone.js": "0.6.12"
  • RC5
"@angular/common": "2.0.0-rc.5"
"@angular/compiler": "2.0.0-rc.5"
"@angular/core": "2.0.0-rc.5"
"@angular/forms": "0.3.0"
"@angular/http": "2.0.0-rc.5"
"@angular/platform-browser": "2.0.0-rc.5"
"@angular/platform-browser-dynamic": "2.0.0-rc.5"
"@angular/router": "3.0.0-rc.1"
"@angular/router-deprecated": "2.0.0-rc.2"
"@angular/upgrade": "2.0.0-rc.5"
"systemjs": "0.19.27"
"core-js": "^2.4.0"
"reflect-metadata": "^0.1.3"
"rxjs": "5.0.0-beta.6"
"zone.js": "^0.6.12"
"angular2-in-memory-web-api": "0.0.15"
"bootstrap": "^3.3.6"

取り込むのモジュールが増えていますね。。。

  • アプリの構成

  • RC4

root
 |
 | - app
 |    |-app.componetn.ts
 |    |-main.ts
 |
 |- index.html
  • RC5
root
 |
 | - app
 |    |-app.componetn.ts
 |    |-main.ts
 |    |-app.module.ts
 |
 |- index.html

app.module.tsが増えてますね。詳細後々

  • 各ファイルの変更点 app.component.ts

import { Component } from '@angular/core';

@Component({
    selector: 'my-app',
    template: '<h1>My First Angular 2 App</h1>'
})
export class AppComponent { }
  • RC5
import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: '<h1>My First Angular 2 App</h1>'
})

export class AppComponent {}

このファイルは変更がありません。

app.module.ts

  • RC5 　RC5で新規追加されたもの
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';

@NgModule ({
  imports: [BrowserModule],
  declarations: [ AppComponent ],
  bootstrap: [ AppComponent ]
})

export class AppModule { }

main.ts

import { bootstrap }    from '@angular/platform-browser-dynamic'
import { AppComponent } from './app.component'

bootstrap(AppComponent);
  • RC5
import{ platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app.module';

platformBrowserDynamic().bootstrapModule(AppModule);

微妙に変わってますね。

ざっくりと変更点だけを上げてみました。

バージョンが上がるたびに変更されると、なかなか大変だけどなんとかおってくしかないんだろうな。。。