著者アーカイブ 杉浦

著者:杉浦

調和のとれた色のセットを出力してくれるAdobe Color CC

カラーホイール | カラースキーム – Adobe Color CC
“Adobe Kuler の使用方法”
 Adobe Color CCは調和のとれた色のセットを出力してくれるwebアプリです。画面上のカラーホイール中のルーペをぐりぐり動かせば、他のルーペも連動して動いて、調和を維持したまま様々な色のセットを出力してくれます。Colorハーモニーが調和の種類の変更です。モノクロからきれいな多色まで様々です。

 画像の読み込みでは画像からは、その画像に沿った色のセットを読み込んでくれます。

 探索からは多数のユーザが作成した色のセットを探せます。

著者:杉浦

CSSの適用優先度

 CSSはHTMLに装飾を付ける仕組みで、主にその詳細度から適用の優先順位が決まります。要素名、クラス、ID、HTML中の直書きと適用される範囲が狭く詳細になるほど優先されます。定義はSelectors Level 3でされていますが、ご存知、ないのですか?CSSの優先順位の説明が大変分かりやすかったです。
 次の図は”ご存知、ないのですか?CSSの優先順位”からの引用です。


 図の様に指定方法の種類別総和が優先度になっています。この優先度の特徴として、IDの様なより詳細な種類の指定方法が用いられていた場合、どれだけクラスの様なより詳細でない種類の指定方法を重ね掛けても優先度で上回れないという点があります。優先度が同値の場合、後から読み込まれた方が優先されます。
 生のCSSではこの優先度を表記してくれません。人間がこの優先度を理解しながらCSSを読み解くのは難しいです。Specificity Calculatorは優先度計算ページです。下図の様に、CSSコードを書きこめば優先度を出力してくれます。計算機を増やしたいならば、Duplicateボタンで複製しましょう。

著者:杉浦

計算に強い質問応答システムwolfram alphaの紹介

 wolfram alphaは計算に強い質問応答システムです。質問応答システムとは既に用意してある解答を返すのではなく、質問に応じて解答を作成して返すシステムのことです。wolfram alphaは複雑な計算問題でも解答を教えてくれます。wolfram alphaはまるで検索エンジンの様にふるまいます。下図の様に、調べたいものの文字列を入れれば、調べたいものの様々なデータ(実画面の下の方にはアクセス数とかも)が、数式を入れれば、数式に関する解答が、返ってきます。


 大変、便利なのですが、これはどうやって質問すればよいのだろう、と悩むことが往々にしてあります。
※What is the fifty-second smallest country by GDP per capita?の様なシンプルな質問なら自然言語で対応してくれます。
次の文は線形計画問題に関する質問文です。

Minimize[{x + 2 y, -5 x + y == 7 && x + y >= 26 && x >= 3 && y >= 4}, {x, y}]

 予備知識なしにこの構文で質問を行える人はまずいないでしょう。これはwolframalphaがMathematicaという製品の上に成り立っているからです。Mathematicaの簡単なリファレンスは次です。
Wolfram言語 & システム ドキュメントセンター
 MathematicaはWolfram言語という言語で動作する製品です。ここに載っている変数に値を格納する必要がない数式系のコードは大体そのままの構文で動きます。

著者:杉浦

プログラミングに関する知識を記録・共有するサイト、Qiitaの紹介

 Qiitaはを知っている人がプロアマ問わずに様々な記事を投稿しているサイトです。
Qiitaは、プログラミングに関する知識を記録・共有するためのサービスです。
Qiitaより引用。
 この様に書いてありますが、Qiitaに投稿されている記事はプログラミングに関する記事が主流というだけで、職業技術者向けのマネジメントだったり、技術で遊びたい人向けアプリケーションの使い方の記事だったり、プログラミング以外の記事も少なくないです。ぱっと見のこのサイト自体はいささか質素ですが用意されている検索機能やAPI、Qiitaに投稿されているQiitaをローカル側のみでより便利に使うプログラム、などを用いることで特に便利に使えます。

著者:杉浦

色の表現、RGBとRGBA

 コンピュータが色を表す方式の中にはRGB、RGBAというものがあります。RGB表現はR(赤)、G(緑)、B(青)の三色の要素の強さで色を表しています。RGB全て取りうる範囲は[0,255]で、要は8bitで整数になる範囲です。RGBA表現はRGB表現にAlphaという要素を加えた色の表し方です。ほぼ全ての場合でAlphaは透明度として扱われます。A=[0,1]であり、非透明度の割合を示します。A=1(非透明度=100%)の場合、RGBA表現のRGB要素の値はRGB表現のRGB要素の値と全く同じになります。bitmapフォーマットは各ピクセルのRGBA値が延々と並んでいて、古い画像は8bit*4=32bit/pixelなデータが多いです。ハードの強化、高画質化に伴って64bit/pixelなデータも増えてます。
 RGBAによって表現される色は、自身の持つA要素である透明度、自身の持つRGB要素である描画色、重ねて塗られる対象のRGB要素である背景色、の計算から導かれます。計算はいたって単純な重みづけ平均で、次式の通りです。

(1 - A) * rgb_of_background + A * rgb_of_drawing = rgb_of_output
                A:透明度。RGBA表現のAlpha要素。スカラー。
rgb_of_background:背景色。RGB表現。3x1行列。
rgb_of_drawing   :描画色。RGBA表現のRGB要素。3x1行列。
rgb_of_output   :出力される色。RGB表現。3x1行列。

先ほど”A=1(非透明度=100%)の場合,RGBA表現のRGB要素の値はRGB表現のRGB要素の値と全く同じになります。”と述べました。A = 1ならば

rgb_of_drawing = rgb_of_output

あり出力される色は描画色と等しくなり、描画色のRGBの三要素のみで色を表しているわけです。
 透明度を使用することで背景色を考慮した色を出力することができます。これは例えばデザインに用いるような汎用的なライブラリで使われます。
 例えば、googleの公開しているマテリアルデザイン用ライブラリ、Material Design Liteでは
rgba(0,0,0,0.12)、rgba(158,158,158, 0.20)の様な、色の濃淡のみを変更するような使い方にrgbaを活用しています。

著者:杉浦

画面切り抜きツールSnippingToolの紹介

 Snipping Tool を使ってスクリーン ショットをキャプチャする – Windows Help
 SnippingToolはPCのスクリーンショットを行う便利なツールで、Windowsで標準提供されています。詳しい機能は上のリンクにあるWindows Helpを見ればよいかと思います。
 SnippingToolの利点は画面の一部を保存するという作業を容易に行えることです。PrtScrで画面をクリップボードに保存、ペイントを開いて貼り付け、ペイント内で操作して画像を加工、保存、という手間な作業はほとんどSnippingTool上で行えます。(あんまり複雑な画像の加工はできません。ペイントの部分がもっと多機能な画像処理ソフトだったりするとクリップボード→画像処理ソフトの方が楽だったり)
 SnippingToolを開く。Ctrl+Nで新規作成、範囲選択、Ctrl+Sで保存画面へ移動、名前変更、Enterかクリックで保存、がショートカットキーを使った基本動作になります。
以下覚えておくと便利な機能

操作 機能 使用状況の例
切り抜き画面でShift + 方向キー カーソルを移動して、四角形の領域切り取りの領域を選択する 絶妙な範囲を切り抜きたい時に使用
Alt + D キャプチャを 1 ~ 5 秒遅延する クリック中のみポップアップの様な何かしらのSnipping Toolの動作と競合する状態の画面を撮りたい時に使用
著者:杉浦

javascriptの論理演算子

 javascriptは暗黙的な型変換を行うことによってboolean(真偽値)でない値が格納されている変数をboolean同然に記述することを許しています。javascriptの論理演算子はこの仕組みを利用することで便利な拡張がなされています。javascriptの論理演算子&&、||についての記述の引用が次です。

Note

The value produced by a && or || operator is not necessarily of type Boolean. The value produced will always be the value of one of the two operand expressions.

引用:ECMAScript 2017 Language Specification 12.13 Binary Logical Operators
意訳すると、”&&や||によって返される値が真偽値である必要はありません。返り値は常に2つの被演算子のうちの片方の値になります。”、となります。
具体的に&&や||はMDNの論理演算子のページにある次の表の通りに動作します。

演算子 使用法 説明
論理 AND(&&) expr1 && expr2 expr1 を false と見ることができる場合は、expr1 を返します。そうでない場合は、expr2 を返します。したがって、真偽値と共に使われた場合、 演算対象の両方が true ならば、&& は、true を返し、そうでなければ、false を返します。
論理 OR (||) expr1 || expr2 expr1 を true と見ることができる場合は、expr1 を返します。そうでない場合は、expr2 を返します。したがって、真偽値と共に使われた場合、 演算対象のどちらかが true ならば、|| は、true を返し、両方とも false の場合は、false を返します。
論理 NOT (!) !expr 単一の演算対象が true と見ることができる場合は、false を返します。そうでない場合は、true を返します。

引用:論理演算子 – JavaScript | MDN
論理値の真偽が確定した時点の被演算子が返されるわけですね。この論理演算子を用いて真偽値以外の値を得ようとする際に注意するべきなのが論理 NOT (!)です。この論理演算子は被演算子を真偽値として見たときの値(true or false)を返すため、論理式に!が含まれていた場合、被演算子のいずれかが返ってくる保障が薄くなります。
論理演算子を真偽値以外の目的で使用している例:

<script>window.jQuery || document.write('<script src="js/libs/jquery-1.7.2.min.js"><\/script>')</script>

このコードは、window.jQueryが実行可能ならばwindow.jQueryを、window.jQueryが実行できないならばdocument.write(‘<script src=”js/libs/jquery-1.7.2.min.js”><\/script>’)を実行する、というコードになります。

著者:杉浦

javascriptの真偽値

 javascriptは暗黙的な型変換をよくしてくれる言語です。javascriptで真偽値が入りそうな演算を真偽値でない値で実行した場合、真偽値でない値を真偽値に暗黙的に変換します。javascriptである値を引数として真偽値に変換をする関数は次の表に従って変換を行います。

Table 9: ToBoolean Conversions
Argument Type

Result

Undefined

Return false.

Null

Return false.

Boolean

Return argument.

Number

If argument is +0, -0, or NaN, return false; otherwise return true.

String

If argument is the empty String (its length is zero), return false; otherwise return true.

Symbol

Return true.

Object

Return true.

引用:ECMAScript® 2017 Language Specification 7.1.2 ToBoolean
この表の肝要なところは引数が存在している様な値(なにか適当な実体がある感じ)ならtrue、存在していない様な値(未定義、null、NaNなど)ならfalseを返してくれるところです。このためjavascriptは

if(hoge !== '' && hoge !== null){console.log('hogeはtrue';)}

とのようにしなくとも

if(hoge){console.log('hogeはtrue');}

とするだけで存在の判定を大体やってくれます。ただ、int型等の数値を同じ様に書くのは注意です。0ならばfalseという変換にひっかかります。C言語やら01の世界やらで0(int)は大概、偽とされており、おそらくこの考えを引き継いでいるためjavascriptでは0ならばfalseに変換されます。

著者:杉浦

オープンソース配信サービス、Google Hosted Librariesの紹介

 Google Hosted LibrariesはHosted Librariesという名のGoogleのサービスの一つです。Google Hosted LibrariesはオープンソースのJavaScriptライブラリを配信しているサービスです。

<script src="https://jax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

の様に配信されている各アドレスを宣言することで対応するライブラリを使用できます。
 これをブックマークレットに用いることで便利なライブラリを使って楽にブックマークレットを作れます。また、管理者が異なるサイトであってもライブラリ部分のキャッシュを用いることができる場合がある、ライブラリの配置の手間を省ける、といった利点もあります。一方でGoogle Hosted Librariesを使うことはライブラリを用いたものの管理の一部をgoogleに任せるということでもあります。CDN(Content Delivery Network)が使用不能な対策はネット上に多く転がっていますが、Google Hosted Librariesの場合は次の様に

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/libs/jquery-1.7.2.min.js"><\/script>')</script>

引用:jQueryをロードする際のナイス!と思った書き方
存在確認とローカルのライブラリを呼び出すコード追加をorで結べばよいでしょう。

著者:杉浦

ブックマークレットの紹介

 多くのブラウザ(IE、Chrome、Firefoxなど)にはブックマークレットという仕組みが備わっています。ブックレートとは、おおまかにはjavascriptのコードを実行してくれるブックマークです。ウェブページの代わりにスクリプトをブックマークするようなものです。
 ブックマークレットの書き方は次の画像の通り

URL欄にjavascript:と宣言した後にjavascriptのコードを入れて、保存するだけです。画像はページ中の全てのdivタグを含んだNodelistをコンソールに表示するコードです。何かいい感じのコードをググって使ってよし、自分で作ってよしです。
 ブックマークレットは生のjavascriptコードを利用するものです。そのためそのままでは便利なライブラリが使用できません。また、複雑な処理をするには文字数制限が壁になる時があります。その時は

javascript:(function(){var scr=document.createElement("script");scr.src="http://hoge.com/hogehoge.js";document.body.appendChild(scr)})(); 

の様に、外部からjavascriptのコードを呼び出しして書き込む、コードをを入れるとよいです。ライブラリにはjQueryの様なメジャーなライブラリもあります。そのような衝突が起きかねないコードを安全に呼び出すには

(function(func) {
    var scr = document.createElement("script");
    scr.src = "//ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js";
    scr.onload = function() {
        func(jQuery.noConflict(true));
    };
    document.body.appendChild(scr);
})(function($) {
    console.log($().jquery);
});
(引用ブックマークレットで jQuery を使う魔法の 210 文字 - Qiita

といったコードがよいです。