著者アーカイブ 杉浦

著者:杉浦

プログラミングに関する知識を記録・共有するサイト、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かクリックで保存、がショートカットキーを使った基本動作になります。
以下覚えておくと便利な機能

著者:杉浦

オープンソース配信サービス、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）

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

著者:杉浦

ブラウザ対応状況参照サイトCan I useの紹介

　Can I use… Support tables for HTML5, CSS3, etc
　このサイトはIE、Chrome、Firefox等の各ブラウザがCSS、HTML5、JavaScript等の各技術をサポートしているかどうかを容易に調べることのできるサイトです。
　使い方はCan I use ____?とある検索ボックスに調べたい要素を打ち込むだけ。画面に出てきたブラウザとバージョンが示された箱の色が緑なら対応、赤なら非対応を示します。Settingでは表示されるブラウザの最小シェアや地域におけるシェア、特定のブラウザ、技術のカテゴリ、などの表示非表示などを設定することができます。

　一度に一文字列しか検索できない、大きな検索結果を一つずつ表示する、といった形のためあるページ中に使用されている技術を網羅する、の様な使い方には手間がかかるのが玉に瑕ですが、それを除いても便利です。また、検索結果の各技術にはresourcesの名で仕様、リファレンスなどのリンクがあり詳しく調べたい際に有用です。