回路図が完成したら、次はいよいよ実物制作です。KiCadで作成し、InkScapeで調整したpng画像をグラフィックソフトなどを介してレーザープリンターで出力します。まずは普通紙に印刷して、位置やサイズを調整します。実際に印刷すると1%位小さいサイズで出力されることが多いので、ピンの位置が合わなければ、1%単位で画像を拡大していきましょう。今回の事例では裏側にパターンを生成するため、反転印刷をする必要はありません。

調整ができたらトナー転写紙に印刷します。用紙を小分けにして印刷する場合は、少なくとも横幅を合わせ、両面テープで印刷紙と重ねて固定させると紙詰まりのリスクはグッと減ります。
基板に付着している汚れや油脂などを掃除します。プラスチックトレイに水を入れ、適量のクエン酸を溶かしたら、それに基板を漬けて数分待ち、液体から出したらタオルなどで拭いて乾燥させます。
これを基板に熱転写します。私の場合は、アイロンで中~高の間に温度を設定しました。木の板など堅く平たい台の上に乗せたら、はじめはアイロンを真上から優しく押さえ、剥離剤と基板を熱で密着、固定させます。アイロンを多少こすっても用紙がずれないのを確認したら、徐々に力を加えて、まんべんなく圧力をかけてゴシゴシこすっていきます。個人的な経験では、表面が黒ずむまでこすった方が用紙のトナーが残ることなく転写できました。
真水に漬けて用紙をふやかします。
水から取り出して、用紙を引き剥がすことになりますが、用紙にトナーがついて行ってしまわないように、まずは指でこすって用紙の表面を丁寧に削り取ります。そして、トナーの黒色がはっきり見えるようになったら、隅からゆっくりと用紙を剥がします。
トナーが剥がれてしまったなど、転写に失敗したなら、除去液を少し付けて硬めのブラシでこすっていけば元の状態に戻せます。
トナーのかすれた箇所は油性ペンで修正します。
どうでもいいですが、海外の通販サイトでは「基板用レジストペン」としてこんな偽物が売られているので、油性ペンはゼブラのマッキーが最善の選択肢のようです。
転写が終わったらエッチングです。腐食液が衣服についたらまずとれないので、身だしなみを整えたら、チャック付きポリ袋に基板を入れて、銅板が液に触れる程度に腐食液を注ぎます。そして、お湯(40-50℃)をためたプラスチックトレイにポリ袋を入れて化学反応を促進させます。
時々袋を振って溶液をかき混ぜながら10分くらい様子を見、マスキングしていない部分が下地のプレートの色まで変化したら木の箸(たとえステンレスのピンセットでも、わずかでも傷があるとそこから錆びます!)で基板を取り出したら、銅板を傷つけないよう、柔らかいブラシを使って洗浄します。テスターやLEDを使って回路の通電テストをおこなったら、基板用フラックスを塗って酸化の抑制処理を施します。

ポリ袋に入った廃液はまだ銅を溶かす余力があるので、別に用意したプラスチックボトルに移して保管します。

空になったポリ袋には有毒かつ酸性の液体が残っているので、砕いた消石灰を入れ、チャックを閉じてよく振って中和させます。処理をしたポリ袋は、燃えないゴミとして自治体の指示に従って廃棄します。

繰り返し使っているうちに溶解能力がなくなった廃液はセメントを入れて固めます。ただし、化学反応によって高熱とガスが発生するので、反応が安定するまでは容器の蓋は絶対に閉めず、安定した場所に保管してください。こちらも燃えないゴミとして廃棄します。

千枚通しなどの鋭く尖ったもので目打ちをして、ハンディドリルでピン穴を開けていきます。
今回の基板の半田付け例。


PIC32MXでLチカができました。
 | 2018年9月13日

銅を除去することでマスク領域も浸食されることを考慮して、自作基板では作成した基板レイアウトにもう一手間加える必要があります。

ホールの直径と配線の太さを大きくしましょう。Pcbnewのプロパティーを変更するよりもテキスト置換の方が作業が早く済むので、ここではテキスト置換で変更しています。まずは、編集ファイルのバックアップをとったら、Visual Studio Codeなどのテキストエディタでkicad_pcbファイルを開きます。

segmentのwidthの値を0.6に変えて、配線の太さを0.6インチに統一します。
thru_holeのsizeを(2 2)に統一することで、すべての直径を2インチにします。
溶かす銅を最小限に抑えるためのマスキング処理をします。Pcbnewでファイルを開き直したら、「塗りつぶしゾーン」を追加して、外枠の隅をクリックします。
プロパティーのネットの値は通常は「GND」が推奨されていますが、「<no net>」のほうが視認性が高いので、自作基板の場合はこちらのほうがよいと思います。
引き続き基板の枠をなぞって四角形を作成すると、内側が塗りつぶされます。
これをsvg画像としてエクスポートします。左右反転のオプションはつけません。
ドリル穴を削除します。KiCad v5.0では、ドリル穴の情報はファイルの末尾あたりに記述されています。svgファイルをテキストエディタで開き、色が「#FFFFFF(白)」の「circle」タグをすべて削除すると、白い穴のみが無くなります。
鋭い角があると、そこから溶剤が浸入することがあるので、角を取るとよりよいでしょう。svgエディターのInkscapeでファイルを開き、メニューのフィルターから「ぼかし→ぼかし(強度100)」「Pixel Tools→ピクセル化」と続けて選択すると、いい具合に角が取れます。
あとはそのまま印刷したいところですが、InkScape 0.92ではこの状態で印刷するとモザイクがかかったような画像で出力されるので、一度png画像でエクスポートしましょう。解像度は600dpi以上が望ましいです。
, | 2018年9月13日

前回で作成した回路図を元に基板をデザインしましょう。

まずは回路図からリストを作成します。ツールバーより「ネットリスト」をクリックしてリストファイルを出力します。
メインウィンドウに戻ったら「基板レイアウトエディター(pcbnew)」を起動し、先ほど保存したネットリストファイルを読み込みます。
パーツが一度に配置されます。
パーツの位置を調整します。「R」「Shift+R」キーで選択中のパーツを回転します。
ホールの間隔を広くしたい場合は「フットプリントを変更」より、同じタイプのピッチ(間隔)の広いパーツを選びます。
互換品などを使っているなどで、データシート上とのピンの配置が違う場合は「フットプリントエディター(Ctrl+E)」でピン配列を変えることもできます。
理想のピン配列ができなければ、全く種類の違うパーツを代用する手法もあります。例えば、この例ではICの代わりにICピンを、USBコネクターの代わりに汎用ピンを用いています。
パーツのピン同士を結線します。レイヤーで「B.Cu(F.Cu)」を選択し、「配線」アイコンを選択してホール同士を結びます。配置済みの線上で「D」キーを押すと、45度の傾きを維持したまま線を変更できます。自由に変更したい場合は代わりに「G」キーを押します。
まだ配線していないピン間では白く細い線が表示されているので、これがすべてなくなり、デバッグ(デザインルールチェックを実行)で警告が表示されないように作業を繰り返します。
この例ではすべて手作業でつなぎましたが、こういった制約がないのであれば、自動配線ツールを利用するとよいでしょう。以下は配線ツールを使った例です。

  1. Javaランタイムを導入した上で、FreeRoutingを入手する。
  2. Pcbnewメニューの「エクスポート」より「Specctra SDNファイル(*.dsn)」形式でファイルを生成する。
  3. FreeRoutingの実行ファイルを開き、dsnファイルを読み込む。
  4. 片面だけ配線したいのであれば、「Parameter→Autoruter」の設定より「F.Cu/B.Cu」のいずれかのチェックを外す。
  5. パーツ同士の間隔を開ける、Edge.Cutsの枠を広げるなど、スペースに余裕を持たせるのが計算をより早く終わらせるコツです。
  6. ツールバーの「Autorouter」ボタンを押すと自動配線が実行されます。
  7. メニューの「Export Specctra Session File」でsesファイルを生成したら、Pcbnewにもどり、「インポート→Specttraセッション」で変更後のデータを取り込みます。

最後に枠を生成します。レイヤーより「Edge.Cuts」を選択して、「図形ライン(※図形ポリゴンではありません)を追加」を選択し、レイアウトを囲みます。この枠が、業者に発注したときに製作される基板の大きさになります。
, | 2018年9月13日

マイコンチップを配置したら、周辺の電子パーツを割り当てていきましょう。「シンボルを配置」が選択されているのを確認したら、チップの配置と同じ要領でマップの任意の位置をクリックします。これは余談ですが、抵抗は「register」、コンデンサーは「capacitor」で検索します。
ここでは、ピンソケット・3ピンメスを選んでいます。
パーツが配置されましたが、ピンの向きがチップの反対を向いています。
カーソルを配置したパーツに合わせてキーボードの「Y」キーを押すと、パーツが左右反転します。上下を反転させたい場合は「X」、90度回転させたい場合は「R」キーを押します。
パーツに合わせて「G」キーを押すと移動させることができます。「M」キーでも移動しますが、Gの場合は結線されているワイヤーも連動して移動します。
単純にピンを未使用のままにしたいのであれば「未設置フラグを配置」を使います。
配置したパーツの名称などは名前の部分をダブルクリックすることで変更しますが、ツールバーのアノテーションより自動で一括変更することもできます。基板図を作成するときは命名は必須です。
右側のツールバーより「ワイヤを配置」を選択して、ピン同士をつなぎます。青いケーブルの「バス(Bus)を配置」は複数のワイヤーを束ねて記述するためのツールで、多くのピンを一括して整理するのに使います。バスをピンに直結させることはできません。
ワイヤーが交差してごちゃごちゃする場合は、ラベルを使ってワイヤーを「ワープ」させることができます。右側ツールバーより「グローバルラベルを配置」を選択して配置し、ワイヤーでつなぎます。
「電源ポートを配置」の「PWR_FLAG」を電源近くに配置することで、それが電気の供給元であることを明示します。
GNDにつながるワイヤーは「電源ポートを配置」より「GROUND power-flag symbol」を選んで配置し、接続させます。マップに複数のGNDが配置されている場合は、それらすべてがつながっていると見なされます。
パーツの配置と配線が完了したらデバッグ(ERC)で短絡などの問題がないかを調べます。
今回の例ではいくつかの警告が出ますが、これはマイコンのピン定義で電源ピンが双方向(入力だけでなく出力もできる)と定義されているための衝突が原因です。
, | 2018年9月13日

それではまずは基板をパソコンでデザインしてみましょう。KiCadはオープンソース発のプロジェクトですが、このソフトで作られたファイル形式も受け付けている基板印刷業者が増えていますので、本格的に基板を制作する際にも役立ちます。ここではネットに散乱しているKiCadの一連の操作をひとつにまとめ上げています。

KiCadを起動したらまずはプロジェクトを作成します。
抵抗やコンデンサなど、基本的なパーツはソフトウェアに含まれていますが、ICなどの使う人が限られるパーツは自分で作成しなければなりません。ただ、電子パーツを取り扱うRSコンポーネンツでは、主要なチップのレイアウト図をライブラリーとして提供しています。なので、配布されているのであればライブラリーを使ってみましょう。 ライブラリー配布サイトに行き、型番を入力・検索します。ここでは32bitPICマイコン「PIC32MX220F032B」を検索しています。
お目当ての製品が見つかったら、「ECAD Model」にあるリンクより、製品詳細ページに行き、必要に応じてユーザー登録とログインをして、データファイルをダウンロードします。
ダウンロードしたアーカイブファイルの「KiCad」フォルダーにある一連のファイルをプロジェクトフォルダー(*.proファイルのある場所)にコピーします。共通フォルダーに保管したり、インポートする手法もありますが、これが一番手っ取り早いです。

プロジェクトウィンドウより「回路図レイアウトエディター」ボタンを押して、エディターを開きます。次に、ウィンドウの右端にある「シンボルを配置」を選択し、エディタ上の任意の位置をクリックします。
配置するパーツを選ぶダイアログが表示されるので、この中からダウンロードしたライブラリーのパーツを見つけます。
パーツを選択すると、レイアウトにパーツが追加されます。
, | 2018年9月10日

プリント基板印刷の技術が進み、個人でも精密な基板を安価に外注できるようになりました。それでも自宅での基板を自作することが盛んなのは「数枚しかいらないのなら、すぐに作れる」ことにあるでしょう。

秋葉原の電子パーツ店「aitendo」では、トナー転写シートが1枚10円ほどで売られており、トナー転写方式による基板制作が気軽にできます。今回はPIC32MXの開発基板の自作を通して身につけたテクニックをご紹介します。

制作に当たり、いろんな道具を試してみましたが、以下の道具や工具で最もきれいにできました。

 | 2018年9月10日

iOSの組み込みブラウザであるWKWebViewでは、標準状態ではクロスドメインアクセスを認めていないため、内部のJavaScriptからXMLHttpRequestを呼び出そうとするとエラーになります。これを解決するにはWKWebViewConfigurationで「allowUniversalAccessFromFileURLs」を定義します。

ここで注意したいのは「config.Preferences」ではなく「config」のキーとして登録すること。そうでないと、キーの定義が存在しないと例外が発生し、いつまで経っても有効になりません。

こちらはXamarin.iOSによるプログラム例です。
WKWebViewConfiguration config; WKUserContentController controller; public WKWebView WebView { get; private set; } public override void LoadView() { base.LoadView(); config = new WKWebViewConfiguration(); controller = new WKUserContentController(); config.UserContentController = controller; config.Preferences.SetValueForKey(FromObject(true), new NSString("allowFileAccessFromFileURLs")); config.SetValueForKey(FromObject(true), new NSString("allowUniversalAccessFromFileURLs")); WebView = new WKWebView(CGRect.Empty, config); WebView.Layer.RemoveAllAnimations(); WebView.UIDelegate = this; this.View = WebView; }
, | 2018年6月14日

従来のWindows 10におけるUWPアプリでは外部ストレージなどのフォルダーに強い制限がかかっており、ローカルフォルダーを除き、マニフェストで関連付けられた拡張子以外は一切参照できませんでした。ところが2018年4月より配信されたWindows 10 Spring 2018 Update(1803)では、ユーザーが許可していれば、すべてのファイルにアクセスできるようになっています。

UWPでフルファイルアクセスを実現には、appxmanifestで「rescap」名前属性を定義した上で「broadFileSystemAccess」を宣言するだけです。

<?xml version="1.0" encoding="utf-8"?> <Package xmlns="http://schemas.microsoft.com/appx/manifest/foundation/windows10" xmlns:mp="http://schemas.microsoft.com/appx/2014/phone/manifest" xmlns:uap="http://schemas.microsoft.com/appx/manifest/uap/windows10" xmlns:rescap="http://schemas.microsoft.com/appx/manifest/foundation/windows10/restrictedcapabilities" IgnorableNamespaces="uap mp rescap"> <Capabilities> <Capability Name="internetClient" /> <rescap:Capability Name="broadFileSystemAccess" /> </Capabilities> </Package>


これで、ウィンドウズの設定ウィンドウの「設定→プライバシー→ファイルシステム」にアプリが追加され、ユーザーに許可を求めることができるようになります。


ただし、注意することがあります。従来の外部フォルダーにアクセスする「Windows.Storage.StorageFolder.KnownFolders」でアクセスできるのは旧来のファイルシステムであるため、たとえマニフェストでライブラリーアクセスを定義済みでも、ここからはすべてのファイルを取得することはできません。

ライブラリーにアクセスしたい場合は「StorageFolder.path」で実体のあるパスを取得して「StorageFoloder.GetFolderFromPathAsync」でフォルダーオブジェクトを得るようにしましょう。

async void Exec() { var pf = await KnownFolders.PicturesLibrary.GetFoldersAsync(); var f = await StorageFolder.GetFolderFromPathAsync(pf[0].Path); var fs = await f.GetFilesAsync(); foreach(var ff in fs) { // 何らかの処理 } }

また、マイクロソフトのドキュメントによると、これを定義したアプリは審査に時間がかかるので、余裕を持って申請しましょうとのことです。
 | 2018年5月9日

2018年5月時点で、Universal Windows Appの標準APIでフォントを調べる命令はないため、DirectWriteを介して取得します。DirectWriteはCOMベースのAPIでC#のみで完結させるにはインターフェイスの作成などで骨が折れるので、C++/CXランタイムライブラリを別に作ってやりとりした方がよいでしょう。このプログラム例ではフォントの名前の一覧を文字列配列として返します。日本語名を優先的に取得したい場合、localenameには「ja-jp」を指定します(C#側での例:string[] fontnames = NativeFont.NativeFont("ja-jp");)。

#include <collection.h> #include <Dwrite.h> using namespace Platform; using namespace Platform::Collections; using namespace Windows::Foundation::Collections; namespace NativeFont { public ref class NativeFont sealed { public: static IVector<Platform::String^>^ Enum(String ^localename) { Vector<Platform::String^>^ res = nullptr; IDWriteFactory *dwf = nullptr; IDWriteFontCollection* fc = nullptr; HRESULT hr; hr = DWriteCreateFactory( DWRITE_FACTORY_TYPE_SHARED, __uuidof(IDWriteFactory), reinterpret_cast<IUnknown**>(&dwf) ); if (FAILED(hr)) goto EXIT; hr = dwf->GetSystemFontCollection(&fc); if (FAILED(hr)) goto EXIT; const int namelen = 512; wchar_t name[namelen]; UINT32 count = fc->GetFontFamilyCount(); res = ref new Vector<Platform::String^>(count); for (UINT32 i = 0; i < count; i++) { IDWriteFontFamily* ff = nullptr; hr = fc->GetFontFamily(i, &ff); if (SUCCEEDED(hr) == true) { IDWriteLocalizedStrings* fnames = nullptr; hr = ff->GetFamilyNames(&fnames); UINT32 index; BOOL exists; hr = fnames->FindLocaleName(localename->Data(), &index, &exists); if (SUCCEEDED(hr) && exists == FALSE){ hr = fnames->FindLocaleName(L"en-us", &index, &exists); } if (exists == FALSE) index = 0; fnames->GetString(index, name, namelen); res->SetAt(i, ref new String(name)); } } EXIT: if (fc) fc->Release(); if (dwf) dwf->Release(); if (res == nullptr) return ref new Vector<Platform::String^>(); return res; } }; }
こちらからダウンロードできるサンプルでは、C#のUWPプロジェクトのテキストエディタに、取得できたフォント名を列挙しています。

 | 2018年5月8日

HTMLの背景色。Chromeでは「-webkit-print-color-adjust:exact;」というCSSで強制的に印刷させることが出来ますが、Microsoft Edgeではユーザーが明示的に背景の印刷を指定しないと、background-colorプロパティーは反映されません。JavaScriptを使えば、Canvasやimgを動的に描画・生成してセルに重ねる方法もありますが、テーブルセルのような小さな枠であれば、以下のように太い内枠を描いた矩形を重ねることで代用が出来ます。

<style> th{ position:relative; overflow:hidden; } th .bg{ position:absolute; left:0;right:0;top:0;bottom:0; box-sizing:border-box; border:1em solid red; z-index:-1; } </style> <table> <tr> <th class="title" colspan="2"><div class="bg"></div>(Subtitle)</th> </tr> </table>


 | 2018年4月30日