カテゴリーアーカイブ TECH

村上 著者:村上

【Webサービス】日本の伝統色の一覧が載っているサイト「和色大辞典」

今日はアプリのボタン色などを決めるときに参考にさせていただいているサイト「和色大辞典」のご紹介です。
ひと口に「」や「」と言っても色々あるので、こう言った色見本がずらっと並んだサイトは非常に重宝しています。
で、その中でも個人的に気に入っているのが、今回紹介する「和色大辞典」というサイトです。

サイトは下記からご確認ください。

日本の伝統色 和色大辞典 – Traditional Colors of Japan
https://www.colordic.org/w

 

サイトにアクセスすると、色見本がずらりと並んでいるのですが、色の名前が色々あって面白いんですよね。
中には全く聞いたこともないような名前もあって、伽羅色(きゃらいろ)とか初めて聞きました…。

また、色を選択すると、その色の配色パターンを確認することもできます。
パッと目についた「桔梗色」の配色パターンを見てみるとこんな感じ。

彩度を変更した色一覧や、明度を変更した一覧のほかに、色相環を元にした配色パターンも表示されています。
色相環の反対にある補色や、隣り合う類似色等も掲載されているので、アクセントカラーを選んだりするときにもちょうど良いですね。

こちらのサイトでは、和色の他にも洋色やパステルカラー、ビビットカラーの一覧も載っています。
また、今日のラッキーカラーなんてページもあるので、この中から色を選んでみるのも面白いかもしれません。

 

以上、WEB色見本のサイト「和色大辞典」のご紹介でした。
色を選ぶのって結構難しいので、こういったサイトで色の名前も含めて探してみるのも面白いと思います。

  • この記事いいね! (0)
takahashi 著者:takahashi

Google検索でARで動物を現実世界上に表示できる機能が利用可能に


Warning: in_array() expects parameter 2 to be array, null given in /home/cs13185/cpoint-lab.co.jp/htdocs/wp-content/plugins/wp-appbox/inc/getappinfo.class.php on line 997

最近のAR/VR周りの盛り上がりがかなりホットになってきていますが、そんな中、Google検索アプリにとても面白い機能が追加されました…!

Google検索アプリで動物を検索すると…

“実物大のイヌが目の前に迫ってきます。”

のようなとても興味をそそる表示が。

“3D表示”をタップすると

こんな画面になります。

“周囲のスペースに表示する”をタップすると…

殺伐とした(?)オフィスにワンちゃんが!!!

自分の好きな位置、向きにすることもできます。

シャッターボタンをタップすると写真を撮ることもできます。

他にも

ねこはもちろん、

ライオンや

鷹なども呼び出すことができます…!

このAR機能、実際に使ってみるとわかるのですが、一度空間を認識できると、結構ぐりぐり動かしても、3Dオブジェクトの動きも現実にかなり精密に追従するので、結構リアリティを感じることができますし、影もちゃんと地面を認識して描画されているのはすごいと感じました。

なにより、こういった普段動物園などに足を運ばないとお目にかかれない動物もじっくり見ることができるのは楽しいですね。

ポケモンGOのように、普段はありえない場所に動物をよびだして写真撮影してみるのも面白いかもしれないですね。

The app was not found in the store. 🙁
Google
Google
Developer: Google LLC
Price: Free
  • この記事いいね! (0)
村上 著者:村上

【Google】ハングアウトで音声が聞こえない時に確認する事

今日遭遇した機材トラブルについてです。
Web 会議でハングアウトを利用したのですが、接続先の方の音声が聞こえず、30分くらい奮闘しました。
ので、次回こうなったときの確認事項をまとめ。

公式のサポートページもありますので、基本的にはこちらを参考にすればOKです。

音声通話やビデオハングアウトの問題を解決する – ハングアウト ヘルプ
https://support.google.com/hangouts/answer/1355579?hl=ja

 

まず確認する事項は、マイク、スピーカーなどの機材と接続している場合はそれが ON になっているかです。
もし、PC 内臓のマイク、スピーカーを使用している場合は、それらが OFFミュートになっていないかを確認します。
また、ハングアウト以外のプログラムでマイク、カメラ、スピーカーが使用中になってる場合、可能であれば一旦終了します。

上記を確認して問題がなかった場合は、ハングアウトの設定を確認します。
画面上に歯車アイコンがあると思うので、そちらから各種設定が正しいかを確認します。
今回はスピーカーに問題ありだったので、スピーカーの出力先を確認し、「テストサウンドを再生」します。これでスピーカーが正しく設定されているかが確認できます。

それでもだめな場合は、ハングアウトの再接続とパソコンの再起動を試してください。
また、接続先の方にも上記の確認をしてもらうと良さそうです。
ここまで確認してもトラブルが解決しないなら、相手側の問題も疑った方が良いですね。

なお、今回の場合は、どうやら接続先の方のマイクトラブルが原因だったようでした。
音声のみスマートフォンで接続していただいたら解決できました!

 

以上、ハングアウトで音声が聞こえない場合に確認する事の一覧でした。
参考になれば幸いです。

  • この記事いいね! (0)
著者:杉浦

【Git】package.json上でコマンドとGitを連携させるためのhusky, lint-staged

 husky – npm
 lint-staged – npm
 huskyはGitのフックのほぼ全てをpackage.json上で定義できるパッケージです。フックできない部分はいずれもGitリポジトリを管理するサーバサイド用フックのみです。huskyのインストールと使い方は次の引用の通りです。

Install

npm install husky --save-dev
// package.json
{
  "husky": {
    "hooks": {
      "pre-commit": "npm test",
      "pre-push": "npm test",
      "...": "..."
    }
  }
}

typicode/husky: 🐶 Git hooks made easy#multiple-commands

 複数コマンドを実行するときはtypicode/husky: 🐶 Git hooks made easy#multiple-commandsにある様に、コマンド間を&&で区切るcmd && cmdかhusky個別の設定ファイルを用意します。すべてをpackage.jsonで完結させつつも、コマンドを&&で無理やり繋げない小技にnpm-run-all – npmを用いるやり方があります。次の様にあらかじめ小さいスクリプトを定義してnpm-run-allを介してまとめてhuskyで呼び出します。

{
    "scripts": {
        "php-cs-fix": "./vendor/bin/php-cs-fixer fix -vvv",
        "eslint": "./node_modules/.bin/eslint resources/**/*.{ts,js,vue} --fix",
        "php-unit-test": "php ./vendor/phpunit/phpunit/phpunit --configuration phpunit.xml tests/Unit --teamcity",
        "pre-commit": "npm-run-all eslint php-cs-fix",
        "pre-push": "npm-run-all php-unit-test"
    },
    "husky": {
        "hooks": {
            "pre-commit": "npm run pre-commit",
            "pre-push": "npm run pre-push"
        }
    }
}

 huskyだけでもコミット前のスクリプト起動漏れを防げて楽ですが、コミットのたびにフルでlintが走る上にlintで修正された分はコミット内容に含まれません。lint-stagedでこの問題を解決できます。
 lint-staged – npm
 lint-stagedはコミット用にステージングされたファイルの内、globで特定した対象のファイルについてのみ特定のコマンドを実行するパッケージです。対象ファイルはglob形式で指定します。大体*.{拡張子A,拡張子B}の様に指定するだけです。test絡みで通常のlintの対象にしたくない場合は!(*test).jsの様に!()を使います。!(*test).jsならばhogehoge.jsはlint, hogehoge.test.jsはnot lint。
 lint-staged実例として次のような設定をし、Hoge.jsとFoo.phpファイルをコミットしようとするとします。

{
    "lint-staged": {
        "*.{js,ts,vue}": [
            "eslint --fix",
            "git add"
        ],
        "*.php": [
            "php ./vendor/bin/php-cs-fixer fix -vvv --config .php_cs",
            "git add"
        ],
        "*.{json,css,scss}": [
            "prettier --write",
            "git add"
        ]
    }
}

 その様な場合、まず”*.{js,ts,vue}”の表現にマッチしたHoge.jsを引数として”eslint –fix Hoge.js”, “git add Hoge.js”が実行されます。Hoge.jsがESLintの自動修正によって修正され、Hoge.js全体がコミット対象になるわけです。これでコミット前に自動でlintが走り、lintの修正結果もコミット内に反映されます。Foo.phpでもphp-cs-fixerで同様にlintによる修正がかけられ、両方が終わった後に改めてコミットされます。
 husky, lint-staged, 各Linterを導入してpackage.jsonに次の様な記述を加えるとコミットのたびにLintが便利な形で走ってくれます。

{
    "husky": {
        "hooks": {
            "pre-commit": "lint-staged"
        }
    },
    "lint-staged": {
        "*.{js,ts,vue}": [
            "eslint --fix",
            "git add"
        ],
        "*.php": [
            "php ./vendor/bin/php-cs-fixer fix -vvv --config .php_cs",
            "git add"
        ],
        "*.{json,css,scss}": [
            "prettier --write",
            "git add"
        ]
    }
}
  • この記事いいね! (0)
takahashi 著者:takahashi

風の強さなどをわかりやすく視覚的に表示してくれるWebサービス “Windy.com”


Warning: in_array() expects parameter 2 to be array, null given in /home/cs13185/cpoint-lab.co.jp/htdocs/wp-content/plugins/wp-appbox/inc/getappinfo.class.php on line 997

台風などが発生した際、自分の地域やこれから向かう場所がどういう状況なのか、またこれからどうなっていくのか、知りたくなることがあると思います。

最近、風の動きを超感覚的に見ることができるWebサービスを見つけたので、ご紹介したいと思います。

Windy.com

実際にサイトにアクセスしていただければ、白い粒子が地図上を飛び交っているのがわかるかと思います。

この粒子一つ一つの動きが風の流れであり、粒子が進む方向に、粒子の進む速さが早いほど強い風が吹いています。

左下に再生ボタンがありますが、こちらをクリックすると画面下部のプログレスバーが動いていき、現在時刻以降の、風の動きの予測を見ることができます。

内容としては日本で公開されている予測サービスとぱっと見差はないのですが、細かい風の流れを見ることができるため、例えば台風が来た際の自分の住んでいる地域への深刻度がどれぐらいなのかが、他サービスとくらべて実感しやすく、いろいろな判断材料にしやすいのではないかなと思いました。

ちなみにアプリもリリースされているので、スマートフォンからはこちらを利用すると便利そうです。

The app was not found in the store. 🙁

もうこれ以上台風はまったくもって御免ですが、まだもう少し台風シーズンが続きますので、こういったアプリを利用して、防災について考えてみるのもいいかもしれませんね。

  • この記事いいね! (0)
takahashi 著者:takahashi

MySQL 8.0に更新したらownCloudがMySQLに接続できなくなった場合の対処法

先日Ubuntu(18.04)をアップデートしたところ、インストールしてあったMySQLが5系から自動で8.0に更新されました。

この状態で普段から使用しているストレージサービスをサーバー上で動作させることのできる”ownCloud”を動かしたところ…

SQLSTATE[HY000] [2054] Server sent charset unknown to the client. Please, report to the developers

上のようなエラーが発生。

調べたところ、どうやらMySQL8.0ではデフォルトの文字コードが設定ファイルで未定義になっているとエラーになるようです。

ということで、/etc/mysql/my.cnfに下記のように指定を追記します。(文字コードは必要に応じて変更した方がよさそうな気がします。)

[mysqld]
collation-server = utf8mb4_unicode_ci
character-set-server = utf8mb4

ただし、これだけだと

SQLSTATE[HY000] [2054] The server requested authentication method unknown to the client

といったエラーが出てしまいますので、もう一行

default_authentication_plugin=mysql_native_password

の追記が必要です。

つまり合わせると、下記の4行を追記すればOKです。

[mysqld]
collation-server = utf8mb4_unicode_ci
character-set-server = utf8mb4
default_authentication_plugin=mysql_native_password

これでエラーが消えて正常に動作するようになりました。

参考: MySQL 5.7 → MySQL 8.0 に更新した&メモ – 犬ターネット

  • この記事いいね! (0)
著者:杉浦

【GitHub】サンプルコードの付属していないライブラリのサンプルコードの探し方

 npmやらcomposerやらpipやら最近のプログラミングではパッケージマネージャを用いて簡単に外部ライブラリを扱うことができます。簡単に扱えるようにできるのですが、目的に合わせた使い方をするためには可能ならば中身。少なくとも使い方を把握する必要があります。大体は説明ドキュメントぐらいあるのですが、実際に動くサンプルコードとなるとないこともままあります。そういった時はGitHubの中を探して、すぐに動かせるサンプルコードを見つけて、動かしながら確かめます。
 GitHubの検索機能ではいくつかの単位でGitHubに存在するモノを探せます。
 見つけたいのはあるライブラリを実際に用いているプロジェクトのコードです。このためコード単位で直接ライブラリ名を打ち込むだけで近い対象がヒットします。例えば、leaflet(JavaScriptの地図用ライブラリ)なら次のようになります。

 AltJSなどの拡張言語の場合における使い方を探すならば言語指定を行います。URLのGETパラメータにl=vueなどとl={言語の代名詞(拡張子とか)}を入れると更に絞り込まれ具体的になります。

 この方法を用いるとcommit数1の様なメモ帳代わりのポジトリも見つけられ中々助かります。JavaScriptの場合、package.jsonの中を探すつもりで組み合わせたいライブラリ名とjson形式コード指定で検索するというやり方もあります。他言語でも設定ファイルで同様のことができます。

  • この記事いいね! (1)
takahashi 著者:takahashi

Microsoftが開発したターミナルアプリ “Windows Terminal” を試してみた!

GitやWSL、SSHなど、最近は開発や保守などで、GUIメインなWindows上でもCUIを使用する機会が増えてきました。

しかし、LinuxやMacOSなどでは現在に至るまで伝統的にCUIが使われてきたためか、標準の仮想コンソールアプリケーションでもそこそこの機能を持つものが多いのですが、Windowsに標準で装備されている仮想コンソールアプリ(cmdなど)は必要最低限という印象で、しかもSSHなどで繋げた際にUnix系のOSとの互換性が微妙だったりという欠点が目立っていました。

そんな中、Microsoftが公式にWindows Terminal のプレビュー版をリリースしました。

Windows Terminal(Preview) – Microsoft Store

このアプリはWindows 10 1903以降でのみ利用可能となっていますが、従来のWindows標準ターミナルアプリの欠点をほぼすべて補うような内容になっています。

例えば、ほかのUnix系アプリでは標準で備えているタブ機能のほか、 SSHの標準サポート、さらに新規タブを開く際に使用するシェルを選択できたり、デザインのカスタマイズを行ったりといったことも可能になっています。

従来では、Windowsのコマンド操作はcmd/Powershellアプリを使い、WSLはコマンドで起動、SSHはTeratermで…といった形でかなり使い勝手が悪かったのですが、Windows Termialを使えばすべて1つのアプリで完結できるようになるのでとても便利そうです。

現状、ターミナルの動作設定はjsonファイル直接編集する形でのみ提供されているため少々扱いづらいです。ただ、多彩な設定が可能なので、GUIの設定画面が装備されたら最強のターミナルアプリになるかも…?

正直、Windowsのコンソールアプリは一つの悩みの種にもなっていたため、新しいターミナルをMicrosoft公式でリリースされるのはとてもありがたいです。

今後の動きが楽しみですね。

  • この記事いいね! (0)
takahashi 著者:takahashi

スマホ上で描いたキャラクターをゲーム上に登場させられるゲーム”ラクガキキングダム”

また凄いゲームを見つけてしまいました…

ラクガキ キングダム

このゲームの特徴は、なんと自分で描いたキャラクターをゲーム内で3Dキャラクターとして登場させられるという点!!!

従来は、3Dキャラクターを作るためには操作の難しいモデリングソフトを使って、時間をかけて作りこむ必要がありました。

このゲームでは、スマホ上で輪郭を描くだけで簡単に3Dオブジェクトを作ることができ、ゲーム内のモデリングツールに付属する汎用のパーツを組み合わせることで、かなり思い通りに近いキャラクターを作れるようです。

3Dモデリング機能だけを見ても、かなり画期的なシステムに思えますね。

キャラクターデザインというと、才能や技量をもったプロの人だけができる、という高尚なイメージが個人的にはありました。

以前にもVRoidという別のキャラクター生成ツールをご紹介しましたが、最近はこういった一般の人向けのキャラクター創作を支援するようなツールが多数出てきて、一般の人でも”創作”を行うことができるような仕組みがどんどん発達してきていて素晴らしいな、と感じました。

もしかしたら、VRもののSF作品にあるような、”1人1キャラクターを持てる”世界がもうすぐそこまで迫っているのでは…!?

そう考えるととてもワクワクしますね!!!

…もっとも、僕は絵心がないので、まずは絵の練習から始める必要がありそうですが(;´∀`)

  • この記事いいね! (0)
takahashi 著者:takahashi

Excelなどで作成した表をMarkdown形式の表に変換できるサイト “Tables Generator”

Markdown記法は手軽にリッチな装飾ができるため、開発者を中心に人気がある記述方法です。しかし、表の記述についてはちょっと不便を感じることがあります。

Markdownでは表を記述する際、1カラムを | | で囲んで表現します。

簡単な表であれば不便を感じることはないのですが、これがカラム数が増えたりしてくると…

写真のデータはなんちゃって個人情報で生成したダミーデータ

画像のようにエディタによっては途中で折り返してしまい、カラムの対応がわかりにくくなります。

また、データの長さがバラバラのものが入ってきても読みづらくなりますし、手動でインデントを直すとしてもデータ数が多いととっても大変です。

またExcelのように、入力完了後にEnterキーやTabキーを押しても別のセルにカーソルが移動してくれたり…といった機能も基本的には使えません。(VSCodeの場合はText Tablesというプラグインを使えばある程度はExcelっぽい操作ができるようになります。)

ということで、表はやっぱりExcelなどでサクッと作って、それをMarkdownに変換してしまった方が楽です。

ExcelからMarkdownに変換するのはいろいろ手段がありそうですが、今回はTables GeneratorMarkdown Tables Generatorを使用します。

まずはExcelで表を作成して、全部コピーします。

次に、 左上のFileから、Paste Table Data をクリックします。

表示されたダイアログに、Excelでコピーした表をそのまま貼り付けます。

貼り付けたらLoadをクリックします。

するとこんな感じで、Markdown用の表を、インデントも揃えた形に一括変換してくれます。
後は右上の”Copy to clipboard”をクリックすればクリップボードに表がコピーされるので、

エディタに貼り付ければOKです。

インデントもいい感じですね。

ということで、Markdownで表をの是る際にお困りの方は是非試してみてください。

  • この記事いいね! (0)