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 も作成できますが、 とりあえず説明用のブレッドボード図をおこすために使用しています。
結果
こんな感じになりました。
部品追加の説明
Raspberry Pi などの有名なボードはライブラリにあるので、 そこから持ってくるだけで図がかけます。
ただし、秋月のボードなどは無いので、自分で絵を描く必要があります。 SVG ファイルで記述すれば良いので、Inkscape で描きました。 どうも自前のエディタで絵を描くのは諦めて、外部ツールに任せたようです。
今回は2つのセンサボードを追加していますが、Fritzing 側の説明だけに絞ります。
手順
"mm" 単位で作成した部品の SVG 画像ファイルはもう作成済みとします。 また、アイコン(ライブラリから選択するときの画像)も 32x32ピクセルで準備してください。
- ブレッドボードのタブで、汎用IC を追加する。
- ICを選択して、プロパティの "pins"(ピン数)と、"パッケージ"( SIP or DIP )を選択する。
- IC を右クリック(コンテキストメニュー)で、"Edit"を選択する。
- Parts Editor のブレッドボード図を表示して、"ファイル" -> "Load image for View" で SVG ファイルを選択する。
- 画像のpin 位置をを認識させるために、Parts Editor のブレッドボード図右側で "Select graphic" をクリックして、画像の適当なアイテムをクリックする。
- 同様に、アイコンタブでアイコンを登録する。
ブレッドボードのタブで、汎用IC を追加する。
IC を右クリック(コンテキストメニュー)で、"Edit"を選択する。
SVG ファイル の登録
pin位置の登録
Inkscape の補足情報
別記事にしようと思っていますが、作成した画像サイズにドキュメントサイズを変更するやり方だけメモしておきます。
ドキュメントのプロパティでページタブを表示して、"Resize page to content..." をクリックして表示される "Resize page to drawing or selection" をクリックするとリサイズされます。
Chart JS V2.0 Scatter chart base
目的
散布図の書き方のベースを作成する。
結果
概要
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' }] },
全体
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 したファイル内において
Webサーバの URL( ex. http://example.com/hoge/ )で、index.htmlをデフォルトで読み込むような感じなのだろう。
configurable.js
EventDrop のエントリポイントである eventDrops.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 を使っています。
回路
当然こんな回路です。 電源電圧は 5 v で、スイッチ(SW) は
です。
結果
1ms もないくらいでチャタリングは収束していました。 ちなみに、タクトスイッチも試したのですが、 今回の回路と測定条件ではほぼチャタリングを確認できませんでした。
個人的な経験が不足しているため、妥当な結果かどうか判断できていません。
あとはリレーで試してみたいですが。
追加実験(おまけ)
ソフトに頼らず CR 回路でフィルタリングしてみた結果です。
時定数を 1ms くらいで設計したので、十分チャタリングは除去できています。
個人的な記録
以下の点が悲しい。
- ハンダ付けが下手になっている。
- 数値解析能力が低下している。
以下の点は勉強する。
- Linux 上で、Spice 解析する方法
SmartScope
紹介
LabNation が作っている USB 接続のオシロです。 もともと、クラウドファウンディングのkickstarter で資金調達して制作されて、今は通常販売しています。
確か売り文句は「既存のUIから脱却して、新しい操作方法を提供する。」みたいなことが書いてありました。 サイトで確認してもらえばわかりますが、そこそこ良いソフトだと思います。
Mono の成果を利用したソフトが提供されていて、Linuxでも動きます。 私は普段から Linux で作業しているので、重宝しています。 また、どの程度サポートできているのかわからないのですが、Android でも動くようです。
どのくらい売れているのかわかりませんが、 既存のUSBオシロよりも画面が見やすくて趣味で使う程度なら文句ありません。
この記事は操作方法の覚書です。
UI 紹介
全体像
他のUSBオシロも持っているのですが、圧倒的に UI が良いです。 ちなみにデジアナになるし、プロトコルアナライザーにもなります。
波形表示の左側にある丸印は、対応するプローブの 0 V となります。 波形表示の右側にある丸印は、対応するプローブのトリガー電圧となります。
画面サイズは自在に変更できて、左下の丸いマークを押すと左側のメニューの表示、非表示を切り替えられます。
チャネル、ステータスの表示、非表示切り替え
これらの表示を、
右下にあるこのボタンで項目毎に切り替えられます。 また、その表示は好きな場所へ、ドラッグできます。
波形(トリガ、AC/DC など)の切り替え
左側の丸いマークをクリックすると、
こんなメニューが出てきます。 hide を押すと波形が消えます。
トリガ設定
右側の丸いマークをクリックすると、
トリガの設定ができます。
波形の幅などの計測
波形表示領域の外側(灰色)領域から、ドラッグすると補助線が出てきます。
上下端からドラッグすると、電圧側に補助線が出て、 左右端からドラッグすると、時間軸側に補助線が出ます。
これがなかなか便利で気に入ってます。