FAX送信 製品比較検討

はじめに

イメージマジックの宮川です。

寒暖差があって、体調崩しがちですね。
風邪、気を付けてくださいね。(ひきました 笑)

さて!ということで!今回は業務で検討したFAX送信製品の比較についてです。

FAX送信 製品比較検討

弊社で開発中のWebアプリからFAX送信可能なAPIを検証しました。
基本的には、FAX送信時にFAXする対象をpdfに変換して、PDFのURLやファイル自体を送信する必要があります。
(PDF以外も対応可能)

調査したところ、以下の3製品がHITしましたので、それぞれ検証してみました。
twilio
eFax
interfax(日本サイト)

※interfaxは日本サイトと海外サイトで若干記載が異なりましたが、日本サイト版の結果を記載します。

弊社では、twilioを導入しました。理由は、pdfしか使用しない点、HTTPリクエストに対応していて、導入が簡易的だったからです。
(固定コストが安く、サービスのスイッチもしやすい。また、他サービス(電話)なども使用可能)

以下、検証結果です。参考までに。
※コストなど、社内では細かく算出しましたが、記述粒度が細かくなりすぎるため、ここでは割愛しました。

製品名 言語 形態 対応形式 特徴
twilio C#、Curl、Java、Node.js、PHP、Python、Ruby HTTPリクエスト(pdfダウンロードurlを指定) pdf 固定コストが安いが、従量が高い
eFax なし(e-mail) メール送信 pdf、doc、xls、ppt、jpg、gif、psd コストが安い
interfax Java、ASP.NET、VB.NET、Perl、PHP、C# HTTPリクエスト、メール送信 pdf、html、txt、office系 多機能だが高コスト

twilioサンプルコード(php)

以下のようなサンプルで、twilioでFAX送信できます。

<?php

// Update the path below to your autoload.php,
// see https://getcomposer.org/doc/01-basic-usage.md
require_once '/path/to/vendor/autoload.php';

use Twilio\Rest\Client;

// Find your Account Sid and Auth Token at twilio.com/console
$sid    = "ACXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX";
$token  = "your_auth_token";
$twilio = new Client($sid, $token);

$fax = $twilio->fax->v1->faxes
  ->create("+15558675310", // to
    "https://www.twilio.com/docs/documents/25/justthefaxmaam.pdf", // mediaUrl
    array("from" => "+15017122661")
);

print($fax->sid);

参照:
Twilio Programmable Fax Quick Start

Elastic Search基本まとめ@2018/07/30

はじめに

こんにちは。イメージマジックの宮川です!
最近は暑くて、アイスみたいに溶けそうですね。

ということで!記事第2弾です。今回は業務で使用したElasiticSearchについてです。
基本を改めて簡単にメモ的にまとめたいと思います。

ElasticSearchとは

https://www.elastic.co/jp/products/elasticsearch

Elastic社が開発しているオープンソースの全文検索エンジンです。(Java 7.X以上)
SQLの代わりに、RESTful インターフェースを使って独自のクエリを使って検索します。執筆時点の最新Versionは6.3.2になります。

ちなみに弊社では、Symfonyで使用するため、FOSElasticaBundleを使用しています。

ElasticaというPHP用にElasticsearchを使いやすくしたライブラリがありますが、これをSymfonyに合わせてBundle化したものがFOSElasticaBundle。

ElasticSearch特徴(RDBと比較して)

〇Good Point

・パフォーマンスがRDBと比較して速い(10倍速い場合もある)
・スキーマレス(ドキュメントで扱う)
・外部システムとの連携性〇(curlなどRESTful経由で操作できる)
・スケーラブル(クラスタ構成が前提で実装)

×Bad Point

・トランザクション使用不可

ElasticSearchの論理的構成

1. Index  ∋  2. Type  ∋  3. Filed

RDBで言うとIndex=Database、Type=Table、Document=Row

参照 https://dev.classmethod.jp/server-side/elasticsearch-getting-started-06/

・1. Documentの集合
・2. Indexに登録するDocumentを分類する型や定義を持つ
・3. データの最小単位。複数のフィールドから構成される

※注意 6.Xから1Indexに対して、1Typeのみ作成可能。

ElasticSearchの物理的構成

1. Cluster  ∋  2. Node   ∋  3. Shard

・1. 複数のNodeを一つのESとして動作させる。
・2. ESのインスタンス。ここにデータを格納する。イメージとしてはサーバ。
・3. Indexを分割したもの。primaryとreplicaがある。

primary: インデックスの書き込みと参照処理で使用。これをreplicaにコピー。
replica: インデックスと参照処理で使用。

ElasticSearchの全文検索の仕組み

1. Analyzer  ⊇  2. Char Filters, Tokenizer, Token Filters

・1. 形態素解析(※1)やN-gram(※2)等、データ格納・検索方法を指定。
・2. Char Filters → Tokenizer → Token Filtersでデータを検索する

Char Filters: 正規表現等で文章を検索。
Tokenizer: NGramやスペース等で単語を分ける。(=トークン化という)
Token Filters: 小文字に正規化したり、トークンをフィルタリングする。

※実際に全文検索で単語を分割していくイメージ

参照 https://blog.shibayu36.org/entry/2016/08/15/122913

※1 文章を意味を持つ最小限の単位(=単語)に分解する手法です。
例)
「私は、宮川という名前です。」
⇒ 私 / は / 、 / 宮川 / と / いう / 名前 です / 。

※2 指定文字数で文章を分割する手法です。
例(2gram))
「私は、宮川泰三という名前です。」
⇒ 私は / は宮 / 宮川 / 川と / とい / いう / う名 / 名前 / 前で / です / す。

コマンドサンプルたち

1. 状態確認のコマンド

#elasticsearchの状態
curl 'localhost:9200/'

# index 確認
curl 'localhost:9200/_cat/indices?v'

# node 確認
curl 'localhost:9200/_cat/nodes?v'

# cluster 確認
curl 'localhost:9200/_cat/health?v'

2. 作成系のコマンド


# index作成
curl -X PUT 'localhost:9200/newindex'

# type作成
# ?prettyをつけると結果をformatしてくれます。
curl -X PUT 'localhost:9200/newindex/newtype/1?pretty' -d '
{
  "name": "sample"
# elastic seach6.X系より以下が必須です。
}' -H 'Content-Type: application/json'

# insert or update
curl -X PUT 'localhost:9200/newindex/newtype/1?pretty' -d '
{
  "name": "John Doe"
}' -H 'Content-Type: application/json'

# delete
curl -X DELETE 'localhost:9200/newindex/newtype/1?pretty'

3. 検索系のコマンド

## query
curl -X POST 'localhost:9200/newindex/_search?pretty' -d '
{
  "query": {
	"bool": {
		"must": [
			{
				"match": {
					"name": {
						"query": "sample",
						"operator": "and"
					}
				}
			}
		]
	}
  }
}
' -H 'Content-Type: application/json'

参考:
ElasticSearch入門

Vue.js 実務でハマったところ @2018/05/21

はじめに

こんにちは!
株式会社イメージ・マジックの技術ブログ、今回担当の宮川です。

本ブログでは、イメージ・マジックがどんな技術を扱っているのかを知ってもらうために、業務で得た知識のまとめやハマって解決したこと、技術選定理由、最新技術動向などや、社内の雰囲気が伝わる内容を書いていきたいと思います。

今回は、社内のプロジェクトで採用している、Vue.jsについて書きます。

Vue.js所感

Vue.js使い始めて2カ月ですが、所感として良いところは概ね以下かなと思ってます。

  • データバインディングが簡潔
  • 部品化しやすい
  • 機能の分類が細やかで配慮が行き届いている
  • だいたいライフサイクルがいい感じにやってくれる

Vue.js ハマったところ

以下、まとめました。

1. Arrayの更新は、以下の方法で更新しないとVue.jsが検知してくれない

// Vue.set
Vue.set(vm.items, indexOfItem, newValue)

// Array.prototype.splice
vm.items.splice(indexOfItem, 1, newValue)

https://www.elastic.co/jp/products/elasticsearch

2. DOMレンダリングが完了したタイミングで処理したい

Vue.nextTick(function() {
  //処理
})

参考:いつ DOM が更新されますか?

 

3. 親子間のデータの受け渡し

// 親はプロパティを渡す
<children customprop="parent.child"></children>

// 子はcustompropを受け取る
Vue.component('my-component', {
   template: `<input type="text" value="customprop">`
})

 

4. 「input type=”file”」は、値をbindできない


// NG v-modelでbindできない
<input type="file" v-model="property.file"/>

// ファイルを取得する場合は、onChangeでイベントを受け取る
<input type="file" @onChange="storeFile($event)"/>

// js
...
storeFile: function(event) {
   const file = event.target.files[0]
},
...

 

5. $.emit()には、キャメルケースは使用できない

// NG(キャメルケースは不可)
$.emit('updateParent')

// OK(チェインケース(ハイフン区切り)は可。)
$.emit('update-parent')

 

6. Vue.jsのtemplateの最上位タグには v-forは使用不可

// NG
Vue.component('my-component', {
   template: `
<li v-for="item in items">
                {{ item.message }}
              </li>

`

})

// OK
// 最上位タグの子タグで、v-forを使用する。
Vue.component('my-component', {
  template: `
<ul>
               
<li v-for="item in items">
                 {{ item.message }}
               </li>

             </ul>

`
})

 

7. webpackで複数のjsファイルでそれぞれ定義したVueが読み込めない

webpackで分割すると、Vue自体のインスタンスが異なるためイベントが発生できない。importすれば問題無く動作する。

import {EventBus} from '../Util/EventBus';
import AutoCompleteInput from '../AutoCompleteInput.vue';
import AutoCompleteList from '../AutoCompleteList.vue';
...

 

8. Webpackで単一ファイルコンポーネントをcompileすると、cssがjs以下に出力

× public/js/...
○ public/css/...

 

9. Vue.jsの初期化後に、動的に追加したhtmlにVue.jsは適用できない

図のInitでEventsのAttach等行うため