いかにして問題を解くか

このサイトはGoogle Analyticsを利用しています。

openBD (https://openbd.jp/)

前置き

ここで言及するのは日本の書籍情報を取得できる API であるところの openBD です。JAVAのライブラリの方ではありません。

とりあえず

書籍「いかにして問題をとくか」をISBNで取得する。

 スクリプト

    function clickGet(){
       genRequest( uri, function(resp){
          var output_area = document.getElementById("output");
          output_area.value = JSON.stringify(resp);
       });
    }

    function genRequest( uri, callback){
       var xhr = new XMLHttpRequest();

       xhr.onreadystatechange = function(){
          if (this.readyState==4 && this.status==200) {
             callback(this.response);
          }
       };

       xhr.responseType = 'json';
       xhr.open('GET',uri,true);
       xhr.send();
    }

var uri = "https://api.openbd.jp/v1/get?isbn=4621045938?pretty";

Fritzing 0.9.2 - Basic

目的

ブレッドボードの綺麗な図を書けるようになる。

Fritzing は EDA ツールで、PCB も作成できますが、 とりあえず説明用のブレッドボード図をおこすために使用しています。

Fritzing Fritzing

結果

こんな感じになりました。

f:id:katogiso-tech:20170109215623p:plain

部品追加の説明

Raspberry Pi などの有名なボードはライブラリにあるので、 そこから持ってくるだけで図がかけます。

ただし、秋月のボードなどは無いので、自分で絵を描く必要があります。 SVG ファイルで記述すれば良いので、Inkscape で描きました。 どうも自前のエディタで絵を描くのは諦めて、外部ツールに任せたようです。

今回は2つのセンサボードを追加していますが、Fritzing 側の説明だけに絞ります。

手順

"mm" 単位で作成した部品の SVG 画像ファイルはもう作成済みとします。 また、アイコン(ライブラリから選択するときの画像)も 32x32ピクセルで準備してください。

  1. ブレッドボードのタブで、汎用IC を追加する。
  2. ICを選択して、プロパティの "pins"(ピン数)と、"パッケージ"( SIP or DIP )を選択する。
  3. IC を右クリック(コンテキストメニュー)で、"Edit"を選択する。
  4. Parts Editor のブレッドボード図を表示して、"ファイル" -> "Load image for View" で SVG ファイルを選択する。
  5. 画像のpin 位置をを認識させるために、Parts Editor のブレッドボード図右側で "Select graphic" をクリックして、画像の適当なアイテムをクリックする。
  6. 同様に、アイコンタブでアイコンを登録する。

ブレッドボードのタブで、汎用IC を追加する。

f:id:katogiso-tech:20170109221009p:plain

IC を右クリック(コンテキストメニュー)で、"Edit"を選択する。

f:id:katogiso-tech:20170109221107p:plain

SVG ファイル の登録

f:id:katogiso-tech:20170109221150p:plain

pin位置の登録

f:id:katogiso-tech:20170109221202p:plain

Inkscape の補足情報

別記事にしようと思っていますが、作成した画像サイズにドキュメントサイズを変更するやり方だけメモしておきます。

ドキュメントのプロパティでページタブを表示して、"Resize page to content..." をクリックして表示される "Resize page to drawing or selection" をクリックするとリサイズされます。

f:id:katogiso-tech:20170109221643p:plain

Chart JS V2.0 Scatter chart base

目的

散布図の書き方のベースを作成する。

結果

f:id:katogiso-tech:20161231141427p:plain

概要

Charjs で line chart を指定して、データは x,y データを保持したオブジェクトの配列、[{x: n, y, m}, ...] を指定する。ただし、options.scales.xAxes を指定し忘れると散布図にならないので注意する。

サンプル概要

2つのデータセットJavascript のランダム値を使って自動で生成している。そのためブラウザでリロードするたびにグラフは変化する。

データ

genData() で [{x:..,y:..},...] のデータを生成できる。 サンプルではそのデータを2組利用している。

また、異なるプロット表示にするため、pointStyle を使って、"1st Data" は 'star' に指定している。

data: {
    datasets: [
        {
            label:             "1st Data",
            data:              firstData ,
            pointStyle:        'star',
            pointRadius:       5,
            pointBorderRadius: 5,
            borderColor:       '#000',
            showLine:          false
        },

xAxes

オプション指定が無いと散布図にならない。

options: {
    scales: {
        xAxes:[{
            type: 'linear',
            position: 'bottom'
        }]
    },

全体

gistdc1329a83e31d8ef2c7f724ffbc6a1a7

wavedrom

目的

Web 上にディジタル波形を描画できるようになるJavascript ライブラリを導入する。

Hatena Blog 上で使えることの確認

記事の編集はMarkdown で行っているが、直接 HTML タグを埋め込めるので記述できる。

表示

一時的に非表示

ソース

直接以下の記述を記事内に書いている。 4つある script タグのうち、最後の記述が波形の内容で、それ以外は一回書けば大丈夫なはず。

<script src="https://cdnjs.cloudflare.com/ajax/libs/wavedrom/1.3.0/skins/default.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/wavedrom/1.3.0/wavedrom.min.js" type="text/javascript"></script>

<script type="text/javascript">
window.onload = WaveDrom.ProcessAll;
</script>

<script type="WaveDrom">
{ signal: [
  { name: "clk",         wave: "p.....|..." },
  { name: "Data",        wave: "x.345x|=.x", data: ["head", "body", "tail", "data"] },
  { name: "Request",     wave: "0.1..0|1.0" },
  {},
  { name: "Acknowledge", wave: "1.....|01." }
]}
</script>

他の記事でも利用する場合

一つの記事だけなら上記のようにその場で読みこめば良いが、 複数の記事で共通して使うならはてなブログのデザイン設定でタイトル下に入れ込んでしまうのが良いと思う。

EventDrops のソースコードを読んでいる時のメモ

おことわり

この記事はメモ書きなので、特に誰向けかを意識して記述していません。 どこかの段階で正式な記事にしたいとは思うのですが。

スクランナー

ビルドスクリプトとほぼ同じようなもの。 そもそもこの言葉(タスクランナー)の定義もあまり明確にわかっていないが、単に make と目的自体は変わらない。

EventDrop では WebPack を使用している。 他にもたくさんあるが、流行り廃りが激しく2016年時点での流行に乗っている感じである。

Javascript 界隈でのタスクランナーにおける主な目的は、

  • require/import などを使って複数ファイルに分割しているJavascriptファイル群をまとめ上げる

ことになる。

require/import などの文法(?)は CommonJs(これ自体はルールの名前) や、node.js などの処理系によって定義されている。2016年時点でブラウザはこのルールを実装していないため、require/import を展開、変換する必要がある。

webpack の依存関係など

package.js を見るとわかる。

import

import <object name> from 'filename or Directory name'

import したファイル内において で参照できるようになる。 from 以降がディレクトリ名だった場合は、そのディレクトリ内の index.js を参照して解決する。

Webサーバの URL( ex. http://example.com/hoge/ )で、index.htmlをデフォルトで読み込むような感じなのだろう。

configurable.js

EventDrop のエントリポイントである eventDrops.js で読み込まれている。

configurable.js

どこにソースがあるのかよくわからず困った。

ボックス化

意味は値型(非オブジェクト)をオブジェクト型に変換すること。

MDN で apply() についての記述で現れた表現。

不勉強だった。

スプレッド演算子

...array

ドット(.) が3つで一つの演算子となり、スプレッド演算子と呼ぶ。 array をその場で展開してくれる。

解説は MDN で。

BABEL

EventDrops で使われている Javacript は BABEL で拡張されている。

BABEL

'Babel is a JavaScript compiler. Use next generation JavaScript, today.'

で、最新仕様 + 拡張? Javascript を現状の多くのブラウザで動く Javascript に変換するツールである。 Javascript から Javascript を生成する。

Javascript の初期化イディオム

 a = a || {}

a が nil や undefined であった場合、 {} を a に代入する。 BABEL が a = { ...b, ...c } をコンパイルすると、この初期化イディオムが生成される。

var _extends = Object.assign || function (target) { 
    for (var i = 1; i < arguments.length; i++) { 
       var source = arguments[i]; 
       for (var key in source) { 
            if (Object.prototype.hasOwnProperty.call(source, key)) { 
                target[key] = source[key]; 
            } 
        } 
    } 
    return target; 
};

Javascriptの処理系(ブラウザ etc.) が Object.assign を実装していない場合、 function以降が _extends に入る。

Rest parameters

スプレッド演算子に似てるけど、こちらはメソッド定義時に使う。

something( a, b, ...args ){}

こちらはa,b (3番目) 以降の可変長引数部を配列にしてしまう。 スプレッド演算子とは意味合いが逆転している。

ちなみに、javascript では基本的に可変長引数なので、 "可変長引数"なんて言葉を使うべきではないかもしれない。

解説は MDN で。

アロー演算子

// 無名関数基本
function( a, b, c ) { }

// アロー演算子で表現
( a, b, c ) => { }

// 引数が一つなら () を省略できる。
a => { }

ただし、this の評価タイミングが異なるため、全く同一表現でもない。

Enhanced Object Literals

変数を使って動的にオブジェクトプロパティを定義できる。

var inst = { "property": 1};

これを、

var key  = "property"
var inst = { [key]: 1 };

と記述できる。 key をユーザーの入力によって動的に変更が可能。

Chattering

目的

マイコンの話をしていると必ずチャタリングの話が出てきます。 ただ、あまり実感したことがないので、少し回路を組んで測定してみました。

測定器

SmartScope を使っています。

katogiso-tech.hatenablog.com

回路

f:id:katogiso-tech:20161106204522p:plain

当然こんな回路です。 電源電圧は 5 v で、スイッチ(SW) は

です。

結果

f:id:katogiso-tech:20161106204752p:plain

1ms もないくらいでチャタリングは収束していました。 ちなみに、タクトスイッチも試したのですが、 今回の回路と測定条件ではほぼチャタリングを確認できませんでした。

個人的な経験が不足しているため、妥当な結果かどうか判断できていません。

あとはリレーで試してみたいですが。

追加実験(おまけ)

f:id:katogiso-tech:20161106205357p:plain

ソフトに頼らず CR 回路でフィルタリングしてみた結果です。

f:id:katogiso-tech:20161106205532p:plain

時定数を 1ms くらいで設計したので、十分チャタリングは除去できています。

個人的な記録

以下の点が悲しい。

  • ハンダ付けが下手になっている。
  • 数値解析能力が低下している。

以下の点は勉強する。

  • Linux 上で、Spice 解析する方法

SmartScope

紹介

LabNation が作っている USB 接続のオシロです。 もともと、クラウドファウンディングのkickstarter で資金調達して制作されて、今は通常販売しています。

確か売り文句は「既存のUIから脱却して、新しい操作方法を提供する。」みたいなことが書いてありました。 サイトで確認してもらえばわかりますが、そこそこ良いソフトだと思います。

Mono の成果を利用したソフトが提供されていて、Linuxでも動きます。 私は普段から Linux で作業しているので、重宝しています。 また、どの程度サポートできているのかわからないのですが、Android でも動くようです。

どのくらい売れているのかわかりませんが、 既存のUSBオシロよりも画面が見やすくて趣味で使う程度なら文句ありません。

この記事は操作方法の覚書です。

UI 紹介

全体像

他のUSBオシロも持っているのですが、圧倒的に UI が良いです。 ちなみにデジアナになるし、プロトコルアナライザーにもなります。

f:id:katogiso-tech:20161106154937p:plain

波形表示の左側にある丸印は、対応するプローブの 0 V となります。 波形表示の右側にある丸印は、対応するプローブのトリガー電圧となります。

画面サイズは自在に変更できて、左下の丸いマークを押すと左側のメニューの表示、非表示を切り替えられます。

チャネル、ステータスの表示、非表示切り替え

f:id:katogiso-tech:20161106202226p:plain

これらの表示を、

f:id:katogiso-tech:20161106202253p:plain

右下にあるこのボタンで項目毎に切り替えられます。 また、その表示は好きな場所へ、ドラッグできます。

波形(トリガ、AC/DC など)の切り替え

左側の丸いマークをクリックすると、

f:id:katogiso-tech:20161106202530p:plain

こんなメニューが出てきます。 hide を押すと波形が消えます。

トリガ設定

右側の丸いマークをクリックすると、

f:id:katogiso-tech:20161106202653p:plain

トリガの設定ができます。

波形の幅などの計測

f:id:katogiso-tech:20161106202929p:plain

波形表示領域の外側(灰色)領域から、ドラッグすると補助線が出てきます。

上下端からドラッグすると、電圧側に補助線が出て、 左右端からドラッグすると、時間軸側に補助線が出ます。

これがなかなか便利で気に入ってます。