カテゴリーアーカイブ TECH

takahashi 著者:takahashi

USBメモリ 容量表記の罠

USBメモリやポータブルHDDなどを買う際に、そのストレージの容量を確認してから買っている方がほとんどだと思います。

今回はこのUSBメモリの容量についてのネタです。

USBストレージを刺すと、パッケージに書かれている容量と、PCに刺した時に表示される容量が異なって見えることがよくあります。

USBストレージに不可視の容量が設定されていて少なく表示されている場合もありますが、例えば64GBのストレージを買ったのにPCにつないだら58GBぐらいの容量で表示され、”えっ、6GBも少ないじゃん…”となってしまう場合もあります。

この違いの一番の原因は、実はストレージの総容量を出すときの計算方法の違いにあるようです。

容量を表すByteという単位ですが、実はこの単位は特殊な部分があり、2つの計算方法が存在しています。

1000バイト=1KB、1000KB=1MB…

のように、1000単位で次の位に上がる”SI接頭辞”と、

1024バイト=1KB、1024KB=1MB…

のように、1024単位で位が上がっていく”二進数接頭辞”

の2種類です。

つまり、同じ100GBというデータ量でも、

100GB = 100 × 1000 × 1000 × 1000 (B)

の場合と

100GB = 100 × 1024 × 1024 × 1024 (B)

の場合があるということです。

(※11/27修正:計算式が間違っていました。申し訳ありません…)

ややこしいですよね…(;´∀`)

そして、USBストレージのパッケージに書かれている容量にはよくSI接頭辞が用いられていて、PC内での容量計算には二進数接頭辞が使われているので、実際は少なく表示されるようになっているわけです。

(PC上でSI接頭辞なんて普段ほとんど使う機会がないのになんでこればっかり使われるんでしょうね(;´∀`))

なので、例えば合計60GBのデータをバックアップしようとして、64GBのUSBメモリを購入したら、実際は58GBしかなかった…なんてことが起きたりもしますので、データの保存に必要な容量に合わせてストレージを購入する場合は、かなり余裕をもった容量のものを購入されることをお勧めします。

参考:
USBメモリについて(2)バイト単位について補足 – 【IT運用保守】サポーターズBlog

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

【GitHub】目的に合ったスニペットをフレームワークの観点から探す

 GitHubの検索機能には様々なオプションが付いています。その中の一つにCode optionsのIn this pathがあります。これはその名の通りコードファイルが置いてあるファイルパスで絞込検索をするオプションです。
 フレームワークには大なり小なり型にはまった作法があります。よくある作法の種類に、特定の種類のコードを特定のフォルダに配置する、というものがあります。Laravelのコンソールコマンドならばapp/Console/Commands、Composerを使うなら外部ライブラリはvendor、といった具合です。
 Artisanコンソール 6.x Laravel
 この二つを合わせると特定の種類のコードと果たしたい目的の語で検索をすることができます。例えば、次のようなことができます。FuelPHPにはコンソールコマンドoilが用意されています。oilのサブコマンドとして様々なことをコンソール上で行えます。
はじめに – Oil パッケージ – FuelPHP ドキュメント
 oilは便利なのですがルーティングを確認する機能がありません。Laravelのartisan route:listの様にコンソールで一覧を見たいものです。GitHubで次のようにググるとそれを実現したコードが見つかります。

route path:fuel/app/tasks


 このコードらをたどっていくとリポジトリkenjis/fuelphp-tools: Tools for FuelPHP 1.xにたどり着きます。このリポジトリのtaskコードの一つにルーティングをコマンドライン上で表示する機能が入っています(残念ながらmodule以下のルーティング解析は未実装です)。
 このおかげで次の様にroutingの大部分をいい感じに見れるようになりました。

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

Cookieを規制する法案が浮上 Webサービスへの今後の影響が心配…

先日、気になるニュースを見かけました。

CookieはステートレスであるWebの仕組み上ユーザーを識別する数少ない手段となっています。

例えば、会員制サイトでアクセスしてきたユーザーがログイン済みなのか、まったく関係のない(会員ではない)部外者なのか、の判別にはCookieの存在が不可欠です。

Cookieがなければ、ログインを前提とした会員制サイトを作ることは事実上難しくなるでしょう。

正確にはCookieのURLにセッションIDを乗せることで、Cookieを使用しない状態の管理行うことはできますが、URLはCookieよりも漏れやすい情報(ユーザーがURLを意図的に保存しなくても、ブラウザの履歴に残ったり、リファラーという仕組みで分かってしまったりする)ため、URLを盗まれてしまうと第三者が正規のユーザーに成り代わって会員サイトを操作できてしまう”セッションハイジャック”が発生しやすくなってしまいます。

ただし、クッキーレス・セッションにはセキュリティ上の問題がある。というのも、クッキーレス・セッションを利用した場合、(当たり前の話であるが)セッションIDが一般ユーザーの目に直接さらされることになる。つまり、URLさえ分かってしまえば、第三者による「なりすまし」も可能であるということだ。
 ただし、このクッキーレス・セッションの脆弱性の問題は、クッキー経由でセッションIDの受け渡しを行った場合でもさほど事情は変わらない。ネットワークをモニタすることで、クッキーの内容などは簡単に盗聴できてしまうからだ。ただ、URLの方が「なりすまし」も「盗聴」も簡単であるという意味で、より危険であるといえる。しょせんは相対的なものといってしまえばそれまでだが、安全性がより重視される局面で、無用にクッキーレス・セッションを採用するべきではない

[ASP.NET]クッキーをサポートしないクライアントでセッション機能を利用するには? – @IT

もちろんURLによるクッキーレス・セッションもシステムによっては適用できる場合もありますが、セキュリティに気を使いたいサイトの場合は当然 Cookieという選択肢が存在しなければなりません。

Cookieという選択肢が取れなくなってしまった場合は、非常に大きな問題です。

そのような技術的な裏側を知ってか知らずかわかりませんが、昨今”個人情報保護”という観点だけを重視してしまい、Cookieを規制しようとする政治的な動きが出てきていますが、正直言って理解に苦しみます。

もっとも、現在多くのサイトで行われている”Cookieを使用することに同意を求める”だけであれば(めんどくさいですが)画面を追加するだけなので問題ありません。

しかし、Cookieの使い方そのものを規制するような動きが万が一出てきた場合、ITインフラそのものを崩壊に追い込んでしまうことも考えられます。

現状”Cookieを規制するようだ”という動きだけニュースになっていて、具体的にどのような規制が行われるのかを説明しているところはまだないようですが、いくらITに詳しくないとはいえ、”知らないから”という言い逃れは許されない問題です。

関係者の方には是非Webの技術やCookieをなぜ使用するのかをきちんと勉強していただいた上で議論していただきたいと思います。

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

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

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

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

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

 

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

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

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

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

 

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

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

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

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

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

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

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

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

こんな画面になります。

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

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

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

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

他にも

ねこはもちろん、

ライオンや

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

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

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

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

‎Google アプリ
‎Google アプリ
Developer: Google LLC
Price: Free
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”

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

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

Windy.com

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

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

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

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

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

‎Windy.com
‎Windy.com
Developer: Windyty, SE
Price: Free+

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

  • この記事いいね! (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)