PHP Laravel bladeとvuejsと。

いよいよ花粉症の季節がやってきますね。
> 花粉さん、今年は注射治療しますがお手柔らかにお願いしますね。
マエダです。

さてこのタイトルなんなのかとご説明させていただきますと、みんな大好きLaravelのBladeテンプレートにControllerから渡された変数を利用して、vuejsの変数名を生成して、vuejsの変数を表示したい!

僕の日本語がヘンくてわかりませんね。(変)

Bladeテンプレートの変数の表示

こちら利用したことある方はおなじみの記述方法ですね。

<span>
{{ $name }}
</span>

Vue.jsの変数の表示(Blade内)

Laravel利用者はおなじみだと思いますが、BladeとVue.jsの波括弧とで構文エラーとなるのを先頭に「@」を付けることで回避する記述方法を利用します。

<span>
@{{ name }}
</span>

Vue.jsの変数をPHP変数で変更して表示

上記を踏まえまして、これってどうかなーってBladeテンプレートに書くと・・・

<span>
@{{ users.{{ $user_id }}.name }}
</span>

「[Vue warn]: Error compiling template」

波括弧の閉じるがどっちやねん!って怒られてしまいますね。。。

そこでの回避方法として、

<span>
@php echo("{{ users.{$user_id}.name }}") @endphp
</span>

急に波括弧を使わない!という選択。( ー`дー´)キリッ

そもそもそんなPHPとJavaScriptどっちつかずの設計にするなよとかのツッコミは受け付けません。
こうやったらどうですか?という優しいツッコミだけお願いします。

以上、vuejsに触れてみようのコーナーでした。

\\優しくツッコミをいれてくれる仲間を募集中です!!//
vuejsビギナーの僕がよくわからない利用方法を実験しているときに優しくツッコミいれてくれるそこのあなた。
以下ページよりご応募お待ちしております。
https://splout.co.jp/recruit/


SolrCloudのエイリアス機能(その2)

はじめに

SolrCloudのエイリアス機能には大きく分けて Standard Aliases と Routed Aliases があります。基本的な機能はどちらも共通で、Routed Aliases には特定のフィールドの値に応じて特定のコレクションを対象として指定できるという特徴があります。

この記事では、Routed Aliases の中の Time Routed Aliases を採り上げます。

Time Routed Aliases の作成

Time Routed Aliases を作るときの基本的なリクエストは以下のようなものです。

$ curl -s 'http://localhost:8983/solr/admin/collections?action=CREATEALIAS&name=timedata&router.start=NOW/DAY&router.field=date&router.name=time&router.interval=%2B1DAY&router.maxFutureMs=3600000&router.autoDeleteAge=/DAY-90DAYS&create-collection.collection.configName=aliasConfigSet&create-collection.numShards=1'

指定されているパラメータの説明

  • action=CREATEALIAS
  • router.name=time
    • Time Routed Aliases の場合は “time” を指定
  • name=timedata
    • エイリアス名
    • コレクション名は、この文字列をプレフィックスとして”timedata_2019-12-25″のようになる
  • router.field=date
    • 振り分けの基準にするフィールド名
  • router.start=NOW/DAY
    • 起点の時刻
    • この時刻を含むコレクションが最初のコレクションとして生成される。それより古いデータはエラーになる。
  • router.interval=+1DAY
    • 1つのコレクションが受け持つ時間の範囲
  • router.maxFutureMs=3600000
    • 現在時刻よりもどのくらい先の時刻までのデータを受け入れるか(ミリ秒)
    • 3600000が指定された場合、1時間先のデータまでは受け入れる
  • router.autoDeleteAge=/DAY-90DAYS
    • ここで指定された期間を過ぎたコレクションは自動的に削除される
  • create-collection.collection.configName=aliasConfigSet
    • Time Routed Aliases に属するコレクションが共通して持つコンフィグセットの指定
  • create-collection.numShards=1
    • Routed Aliases では CREATEALIAS の際にコレクションを作成するので、CREATE アクションでコレクションを作成する際に指定できるパラメータをcreate-collection.* という形で指定できる。

たとえば2019年12月25日に上に示したリクエストを実行したとすると、以下のような運用になります。

  • エイリアス名 timedata
  • コレクション名 timedata_2019-12-25
  • 現在時刻から1時間先のデータまで受け付る
  • 2019年12月26日のデータを受け付けると timedata_2019-12-26 が作られる
  • 90日よりも古くなったコレクションは削除

コレクションの自動追加

上述の通り、最新のコレクションが timedata_2019-12-25 であるときに12月26日のデータを追加しようとすると、新しく timedata_2019-12-26 が作られます。 新しいコレクションの作成には数秒を要し、その間 timedata_2019-12-26 への更新処理はブロックされます。

秒あたりのデータ数が多く、このブロック発生が許容できない場合には、CREATEALIAS アクションのオプションとして router.preemptiveCreateMath を指定できます。ここで例えば60分を指定しておくと、12月25日の23:00のデータを処理した時点で先に timedata_2019-12-26 を非同期に作成しておくことができます。

おわりに

Time Routed Aliases は以下の特徴を持つ Routed Aliases です。

  • エイリアス配下のコレクションそれぞれが一定の時間範囲のデータを担当する
    • (例)12月10日用のコレクション、11日用のコレクション、12日用のコレクション…
  • 時刻のフィールドによる振り分け
  • 更新を許容する時間範囲の設定
  • 現在時刻に応じて自動的に新しいコレクションを追加
  • 現在時刻に応じて古いコレクションを自動的に削除

時間的に連続するログデータやセンサの計測データなどを扱うのに向いています。


SolrCloudのエイリアス機能(その1)

はじめに

SolrCloudにはコレクションにエイリアスを設定する機能があります。
このエイリアスが役に立つ場面として、リファレンスでは以下の3つが挙げられています。
・新しく作った、再生成したインデックスをダウンタイム無しで既存のものと差し替える
・コレクション名の変更がクライアントプラグラムに影響を与えないようにする
・同じスキーマの複数のコレクションに1回だけクエリを発行する

1つめと2つめについては経験がありますが、3つめの複数のコレクションを対象にエイリアスを設定するパターンは使ったことは無かったので、その挙動等を調べてみました。

複数コレクションにエイリアスを設定する

まずalias_test1とalias_test2の2つのコレクションを作成してエイリアスalias_testを設定。

$ curl -s 'http://localhost:8983/solr/admin/collections?action=CREATE&name=alias_test1&numShards=1&replicationFactor=1&wt=json'
$ curl -s 'http://localhost:8983/solr/admin/collections?action=CREATE&name=alias_test2&numShards=1&replicationFactor=1&wt=json'
$ curl -s 'http://localhost:8983/solr/admin/collections?action=CREATEALIAS&name=alias_test&collections=alias_test1,alias_test2'

エイリアスを確認。

curl -s 'http://localhost:8983/solr/admin/collections?action=CLUSTERSTATUS' | jq .cluster.aliases
{
  "alias_test1": "alias_test1",
  "alias_test2": "alias_test2",
  "alias_test": "alias_test1,alias_test2"
}

エイリアスに対するスキーマ変更

コレクションではなくエイリアスを指定してフィールドを追加してみます。

$ cat add_field.json
{
  "add-field":{
     "name":"date",
     "type":"pdate",
      "stored":true },
  "add-field":{
     "name":"body",
     "type":"string",
      "stored":true }
}
$ curl -s -X POST -H 'Content-type:application/json' -d @add_field.json 'http://localhost:8983/solr/alias_test/schema'

各コレクションのスキーマを確認。

$ curl -s 'http://localhost:8983/solr/alias_test1/schema/fields?omitHeader=true'
{
  "fields":[
    {
      "name":"_root_",
      "type":"string",
      "docValues":false,
      "indexed":true,
      "stored":false},
    {
      "name":"_text_",
      "type":"text_general",
      "multiValued":true,
      "indexed":true,
      "stored":false},
    {
      "name":"_version_",
      "type":"plong",
      "indexed":false,
      "stored":false},
    {
      "name":"body",
      "type":"string",
      "stored":true},
    {
      "name":"date",
      "type":"pdate",
      "stored":true},
    {
      "name":"id",
      "type":"string",
      "multiValued":false,
      "indexed":true,
      "required":true,
      "stored":true}]
$ curl -s 'http://localhost:8983/solr/alias_test2/schema/fields?omitHeader=true'
{
  "fields":[{
      "name":"_root_",
      "type":"string",
      "docValues":false,
      "indexed":true,
      "stored":false},
    {
      "name":"_text_",
      "type":"text_general",
      "multiValued":true,
      "indexed":true,
      "stored":false},
    {
      "name":"_version_",
      "type":"plong",
      "indexed":false,
      "stored":false},
    {
      "name":"id",
      "type":"string",
      "multiValued":false,
      "indexed":true,
      "required":true,
      "stored":true}]

dataフィールドとbodyフィールドが追加されたのはalias_test1の方だけでした。alias_test2にはコレクション名を指定してフィールドを追加しておきます。

$ curl -s -X POST -H 'Content-type:application/json' -d @add_field.json 'http://localhost:8983/solr/alias_test2/schema'
$ curl -s 'http://localhost:8983/solr/alias_test2/schema/fields?omitHeader=true'
{
  "fields":[{
      "name":"_root_",
      "type":"string",
      "docValues":false,
      "indexed":true,
      "stored":false},
    {
      "name":"_text_",
      "type":"text_general",
      "multiValued":true,
      "indexed":true,
      "stored":false},
    {
      "name":"_version_",
      "type":"plong",
      "indexed":false,
      "stored":false},
    {
      "name":"id",
      "type":"string",
      "multiValued":false,
      "indexed":true,
      "required":true,
      "stored":true},
    {
      "name":"body",
      "type":"string",
      "stored":true},
    {
      "name":"date",
      "type":"pdate",
      "stored":true}]

エイリアスに対する更新

エイリアス alias_test を指定してデータを投入してみます。

$ cat data.json
[
    {"id":"1",
     "date":"2019-01-01T00:00:00Z",
     "body":"body1"
    }
]
$ curl -s -X POST -H 'Content-type:application/json' -d @data.json 'http://localhost:8983/solr/alias_test/update/json/docs?commit=true'

それぞれのコレクションの内容を確認。

$ curl -s 'http://localhost:8983/solr/alias_test1/select?q=*%3A*&omitHeader=true'
{
  "response":{"numFound":1,"start":0,"docs":[
      {
        "id":"1",
        "date":"2019-01-01T00:00:00Z",
        "body":"body1",
        "_version_":1653627228838166528}]
  }}
$ curl -s 'http://localhost:8983/solr/alias_test2/select?q=*%3A*&omitHeader=true'
{
  "response":{"numFound":0,"start":0,"docs":[]
  }}

やはりalias_test1の方だけ更新されている。

エイリアスに対する検索

コレクションalias_test2を指定して別のデータを投入しておきます。

$ cat data2.json
[
    {"id":"2",
     "date":"2019-01-02T00:00:00Z",
     "body":"body2"
    }
]
$ curl -s -X POST -H 'Content-type:application/json' -d @data2.json 'http://localhost:8983/solr/alias_test2/update/json/docs?commit=true'
$ curl -s 'http://localhost:8983/solr/alias_test2/select?q=*%3A*&omitHeader=true'
{
  "response":{"numFound":1,"start":0,"docs":[
      {
        "id":"2",
        "date":"2019-01-02T00:00:00Z",
        "body":"body2",
        "_version_":1653898674683510784}]
  }}

エイリアスを指定して検索。

$ curl -s 'http://localhost:8983/solr/alias_test/select?q=*%3A*&omitHeader=true'
{
  "response":{"numFound":2,"start":0,"maxScore":1.0,"docs":[
      {
        "id":"1",
        "date":"2019-01-01T00:00:00Z",
        "body":"body1",
        "_version_":1653627228838166528},
      {
        "id":"2",
        "date":"2019-01-02T00:00:00Z",
        "body":"body2",
        "_version_":1653898674683510784}]
  }}

コレクション alias_test1 と alias_test2 の結果が統合されていることが分かります。

おわりに

複数のコレクションを対象にしたエイリアスの挙動を探ってみました。
検索では1回のリクエストで統一的に結果を得ることができます。
更新の場合は最初に指定されたコレクションがUPDATEリクエストを処理するようになっており、更新先を指定したい場合にはコレクション名を使う必要があります。

同じスキーマのコレクションを複数に分けたい使い方というのは、ログ等の時系列のデータが典型例です。実はSolrではこのような使い方に便利なRouted Aliasという機能が用意されています。Routed Aliasの詳細については別の機会に採り上げたいと思います。


未来の自分のためのユニバーサルカラーデザイン

こんにちは、3年目デザイナーのはなです。

このブログで度々ユニバーサルカラーについての記事を書いていますが、今回はその中でも加齢に伴うの色の見え方の変化について書きたいと思います。

(前に書いたやつ:https://blog.splout.co.jp/2790/ https://blog.splout.co.jp/5932/

生きている限り加齢は誰でも避けられません。

つまり、高齢者に配慮したデザインづくりは回り回って未来の自分のために役に立つということですね。

水晶体の黄変

水晶体は人間の眼のレンズの部分です。

例えば、透明なスマホケースなどを使用していると、時間が立つにつれてだんだん黄ばんできますよね。

それと同じことが人間の眼でも起こります。

水晶体が黄ばんでくると、薄い黄色と白の判別がつきにくくなったり深緑のような暗い色と黒色の判別がつきにくくなります

感覚としては、黄色がかったサングラスで世界を見ている感じに近くなります。

黒地に紫の文字や、白地に黄色の文字などは避けたほうが良いでしょう。

この組み合わせは高齢者以外でもとても見分けづらいのでやらないのが無難です!

装飾としてなら使用しても大丈夫です。

白内障

歳を取ると白内障になりやすくなります。

白内障の原因には疾患や薬の影響、外傷などがありますが、最も多いのが加齢です。

白内障の発症率は、60歳代で66~83%、70歳代で84~97%、80歳以上ではほぼ100%と言われています。

長生きするならほぼ避けられないということですね。

白内障は水晶体が白く濁ってくる病気です。

水晶体が濁ってくると、光に対して眩しさを感じやすくなります

つまり、画面が明るい状態で真っ白なページを見たときに不快感を感じやすくなるということです。

高齢者がよく見る可能性のあるサイトなどは、背景に薄いグレーを敷くなどするとよいかもしれません。

ただ、文字色とのコントラストもしっかり確保しないといけないので、本当にうっすらぐらいが良いと思います。

また、背景色が暗いページから明るいページにいきなりパッと変わる、というのも避けたほうが良いでしょう。

まとめ

私は、この世のすべてのデザインにユニバーサルカラーがいつも必ず意識されている必要はないと考えています。

若い人向けに作られたページであれば、多少高齢者への配慮がなくても大丈夫だと思います。

ただ、ターゲティングを行ったときに、高齢者の人が含まれる可能性があるなら配慮が必要です。

業務での使用が義務付けられているツール」「不特定多数の人が見る情報の掲示」などには気を使ったほうが、より優しい世界になると思います。

ユニバーサルカラーというものが意識され始めたのはわりと最近の話ですが、未来ではもっとポピュラーな概念になっていると思います。

そういう未来になるように、私も微力ながら頑張っていきたいです!


オレオレ証明書の入ったサーバーで Service Worker のテストをしたいとき

This work is licensed under a Creative Commons Attribution 4.0 International License. Web Fundamentals | Google Developers

こんな状況。

  • テストはイントラネット内にあるサーバーを使用。
  • 自己署名証明書 (通称: オレオレ証明書) が入っている。
  • ブラウザは Chrome。

普通に Chrome で開こうとするとエラーが出て動作しません。

どうすればいいか。

Chrome の起動オプションで以下を指定します。

--user-data-dir="D:\ユーザーデータディレクトリ" --unsafely-treat-insecure-origin-as-secure="https://テストサーバー.site"

これは何をしているの?

Service Worker は、その強大な力を抑えるために localhost であるか、https でないと動作しないという制限が課せられています。

しかし、https であっても、オレオレ証明書の場合には以下のようなエラーにより Service Worker は動作しません。

An SSL certificate error occurred when fetching the script.

–unsafely-treat-insecure-origin-as-secure を起動オプションに指定することで、エラーを出さずに Service Worker が動作させることができるようになります。

あまり重要そうに見えませんが –user-data-dir は必須です。

証明書の警告なんとかならないの?

確認の度に証明書の警告が表示されるのは非常に煩わしいものです。

これも起動オプションで非表示にします。

--ignore-certificate-errors 

これで Service Worker も動いて存分にテストできますね。

めでたしめでたし。

・・・

余談ですが、これらは Chrome の GUI からも設定できます。

ただ、GUI から設定すると状態が残ってしまうため、外部のインターネットに接続する際に戻し忘れが発生し危険です。

テスト用に専用のプロファイルを作るか、ショートカットやエイリアスを用意することをお勧めします。

Portions of this page are reproduced from work created and shared by Google and used according to terms described in the Creative Commons 4.0 Attribution License.