SPLOUT BLOG - Part 42

「RubyWorld Conference 2020」に協賛させていただきます

「RubyWorld Conference 2020」に、Goldスポンサーとして協賛させていただきます。
<期間>
2020年12月17日（木）
<開催形式>
オンライン
<主催>
RubyWorld Conference開催実行委員会
https://2020.rubyworld-conf.org/ja/

Vue.jsと別ライブラリの共存方法(模索中)

こちらの方法は模索中であり一般的な解決方法ではないかもしれません。とりあえず動作するというレベルになります。既存の処理を置き換えつつも代替えライブラリが見つからない、または容易に実装できない際に取れる手段の1つとして考えてください。

まず例として郵便番号を住所に変換するライブラリがあるとします。zip_codeを書き込むと自動でaddressのinput要素に対してvalueで住所を自動的に設定する系になります。

<input type="tel" v-model="zip_code" name="zip_code">
<input type="tel" v-model="address" name="address">

こちらVueで上記を作成しライブラリも同様に利用した場合はzip_codeを入力した時点では自動でaddressにデータは設定されますが、Vue側にデータは渡っていないので他の要素に対して入力等イベントが発生した時にVue側に保存されているデータで上書きされます。

こちらの解決方法として再描写がされる前にVue側にデータを設定する
// 再描写(re-render)される前に呼ばれる関数
beforeUpdate: function(){
// vueと連携していないinput要素を反映する
this.reflectInputValues();
}
methods: {
// vueと連携していないinput要素を反映する
reflectInputValues: function(){
this.zip_code = $('[name=zip_code]').val();
this.address = $('[name=address]').val();
}
}

ただし注意点として
・入力が完了しただけでは「reflectInputValues」が呼ばれないので対象となるデータを触りたい場合は「reflectInputValues」を明示的に呼ぶ必要がある
・Vue側から直接データを設定しても先にbeforeUpdateが呼ばれる為反映されないのでinput要素に直接valueを設定して「reflectInputValues」を呼び出す必要がある

動作はしますがVueの旨味を消している形になるので基本的にはVue用のライブラリを探す等をお勧めします。他にいい方法はないかな。

SolrのJSON Facet API

検索条件が複雑になりがちなファセット検索ではJSON APIが威力を発揮します。

以下は、大阪市の施設情報のデータを使った区のフィールドによるファセット検索の例です。

$ curl -s http://localhost:8983/solr/test/query?omitHeader=yes -d '{
    "query" : "*:*",
    "offset" : 0,
    "limit" : 0,
    "facet" : {
        "areas" : {
            "type" : "terms",
            "field" : "area",
            "limit" : 3
        }
    }
}' |jq .
{
  "response": {
    "numFound": 9238,
    "start": 0,
    "docs": []
  },
  "facets": {
    "count": 9238,
    "areas": {
      "buckets": [
        {
          "val": "平野区",
          "count": 610
        },
        {
          "val": "北区",
          "count": 566
        },
        {
          "val": "中央区",
          "count": 509
        }
      ]
    }
  }
}

複数のクエリによるファセット検索もすっきりと書けます。
以下は、大阪市役所の直線距離(0m～300m, 300m～500m, 500m～1km)で作成したファセットです。

$ cat request.json
{
    query: "*:*",
    offset: 0,
    limit: 0,
    facet: {
        "300m": {
            type: "query",
            q: "{!frange l=0 u=0.3}geodist()",
        },
        "500m": {
            type: "query",
            q: "{!frange l=0.3 u=0.5}geodist()"
        },
        "1km": {
            type: "query",
            q: "{!frange l=0.5 u=1}geodist()"
        }
    }
    params: {
	pt: "34.6938,135.502002777777", /* 大阪市役所 */
        sfield: "address_p"
    }
}

$ curl -s http://localhost:8983/solr/test1/query?omitHeader=yes -d @request.json
{
  "response":{"numFound":9238,"start":0,"docs":[]
  },
  "facets":{
    "count":9238,
    "300m":{
      "count":28},
    "500m":{
      "count":27},
    "1km":{
      "count":185}}}

ファセットのネストも書けます。
以下の例では、上の例で作ったファセットのサブファセットとして施設タイプを指定しています。

$ cat request.json
{
    query: "*:*",
    offset: 0,
    limit: 0,
    facet: {
	    "300m": {
	        type: "query",
	        q: "{!frange l=0 u=0.3}geodist()",
	        facet: {
		    average_distance: "avg(geodist())",
		    types: {
		        type: "terms",
		        field: "type",
                        limit: 3
		    }
                }
	    },
	    "500m": {
	        type: "query",
	        q: "{!frange l=0.3 u=0.5}geodist()",
	        facet: {
		    average_distance: "avg(geodist())",
		    types: {
		        type: "terms",
		        field: "type",
                        limit: 3
		    }
                }
	    },
	    "1km": {
	        type: "query",
	        q: "{!frange l=0.5 u=1}geodist()",
	        facet: {
		    average_distance: "avg(geodist())",
		    types: {
		        type: "terms",
		        field: "type",
                        limit: 3
		    }
                }
        }
    }
    params: {
	    pt: "34.6938,135.502002777777", /* 大阪市役所 */
	    sfield: "address_p"
    }
}
$ curl -s http://localhost:8983/solr/test1/query?omitHeader=yes -d @request.json
{
  "response":{"numFound":9238,"start":0,"docs":[]
  },
  "facets":{
    "count":9238,
    "300m":{
      "count":28,
      "average_distance":0.18667141635662304,
      "types":{
        "buckets":[{
            "val":"駅・バス停",
            "count":8},
          {
            "val":"文化・観光",
            "count":5},
          {
            "val":"官公庁",
            "count":4}]}},
    "500m":{
      "count":27,
      "average_distance":0.39623014517757793,
      "types":{
        "buckets":[{
            "val":"駐車場・駐輪場",
            "count":12},
          {
            "val":"文化・観光",
            "count":6},
          {
            "val":"官公庁",
            "count":2}]}},
    "1km":{
      "count":185,
      "average_distance":0.7759130600495204,
      "types":{
        "buckets":[{
            "val":"駐車場・駐輪場",
            "count":62},
          {
            "val":"駅・バス停",
            "count":46},
          {
            "val":"文化・観光",
            "count":24}]}}}}

JSON API は複雑な検索リクエストをプログラム的に生成する場合に非常に有効なので、活用していきたいところです。

SolrのJSON Request API

Solrに検索リクエストを送る場合、検索用のパラメータはリクエストバラメータで指定するのが通常の方法です。

curl -s 'http://localhost:8983/solr/test/select?fl=id,type,name&q=area:中央区&fq=type:官公庁'

これとは別に、検索パラメータをJSON形式で指定する方式も用意されています。
上記の例はJSON方式だと以下のようになります。

curl -s http://localhost:8983/solr/test/query -d '
{
  "query" : "area:中央区",
  "filter" : "type:官公庁",
  "fields" : "id,type,name"
}'

ファイルで指定することもできます。

$ cat request.json
{
  "query" : "area:中央区",
  "filter" : "type:官公庁",
  "fields" : "id,type,name"
}
$ curl http://localhost:8983/solr/test/query -d @request.json

リクエストパラメータによる検索条件の指定とJSONによる指定は併用できます。同じパラメータに対してそれぞれで異なる値を指定した場合、基本的にはリクエストパラメータの方が優先されますが、複数の値を許すパラメータについては両方が使われます。

つまり、以下の2つは同じ内容のリクエストです。

curl 'http://localhost:8983/solr/test/query?json.limit=5&json.filter="area:中央区"' -d '
{
  "query" : "name:自動車",
  "limit" : 3
  "filter" : "type:官公庁",
  "fields" : "id,type,area,name"
}'

curl 'http://localhost:8983/solr/test/query' -d '
{
  "query" : "name:自動車",
  "limit" : 5
  "filter" : ["type:官公庁","area:中央区"],
  "fields" : "id,type,area,name"
}'

通常の検索方法と比べると、JSON方式には可読性や柔軟性の高さという利点があります。記号文字のエスケープやURLエンコーディングにもあまり気を使わなくて済みます。

また、Solr で使われている JSON 用の Noggit パーザの拡張機能により、JSONの標準から外れた便利な記法を利用できます。たとえば、シングルクォートの文字列を使えるのでフレーズ検索のときに便利です。

curl http://localhost:8983/solr/test/query -d '
{
  "query" : 'address:"中央区大手前"',
  "filter" : "type:官公庁",
  "fields" : "id,type,name"
}'

JSON Request API の仕様についてはリファレンスに詳しい記述があります。

モニターアームはじめました。

こんにちは。デザイナーのMです。
弊社では新型コロナウイルスの感染拡大防止の為、在宅勤務が基本の勤務体系になっており、4月ごろからずっと在宅で勤務しています。

そして最近、引越しをしました🏡
引越しの理由としては、以前の家ではリビングで仕事をしていて仕事とプライベートのオンオフが切り替えづらく、オンラインミーティングなども頻繁に行うので、作業部屋が必要になってきたためです。
そして何より作業部屋（自分の部屋）を持てるのが嬉しいです😂

引越しの荷解きもだいたい終わったので、休日は作業部屋のカスタマイズに勤しんでいるのですが、せっかく引越したので心機一転やりたかったことを実践してみようと思いました！
やりたかったことの一つとして、今回のブログネタのモニターアーム設置がありました。
今回は、初めてのモニターアーム設置について、ざっくりですが記事にしてみました！

モニターアームとは

モニターアームをモニターに接続すると、モニターの位置を前後左右、そして上下に自由に移動できるようになります。
通常のスタンドでは実現できない角度や高さをモニターアームを使用すれば簡単に実現できるようになるアイテムです。
モニターアームにもいろいろな種類がありますが、私が購入したのはモニターアーム界の中でもメジャーなErgotron（エルゴトロン）社製のモニターアームを購入しました。エルゴトロンって名前の響きが男心をくすぐりますよね😉
価格はAmazonで約14,000円（2020年7月29日現在）で、他の中華製のモニターアームなどよりは少し価格設定は高めです。ただその価格分、精度の高さや堅牢性はとても満足できるものと思います。

いざ、開封の儀

結構大きい箱で届きました。

パカッ。開封！！

モニターアーム、ネジ類、説明書というシンプルな内容です。

表面が少しザラザラしたマットな質感でイケてます。ひんやりしているのでずっとスリスリしていたい（）

いよいよモニターアームを設置！

まず既存のモニターに付いているスタンドを外します。私が使っていたモニターはネジが1本だけで止められていたのですぐ外すことができました。

モニターの裏側に取付ネジがあります。

取り外されたスタンドくん。
今まで支えてくれてありがとう。そしてさようなら、お元気で😂

続いてモニターアームを接続します。
付け方は簡単。付属のネジで4箇所止めるだけです。

VESA規格のモニターだったので特に問題なく付けることができました。（VESA規格以外のモニターでもアダプターを使えば付けることはできます）

次にモニターアームの土台をクランプを使ってテーブルに固定します。
土台はまぁまぁ重いので、天板はある程度の厚さが合ったほうが安定して良さそうです。あ、天板の耐荷重も一応見ておきましょう👆
そして今回はモニターアームの補強板も購入して安定感をプラスするようにしました！
補強板があるのとないのとでは、個人的によりがっしり固定してくれてるような気がしました。（補強板なくてもグラつきなどはなかったですが精神安定上つけました）