Pixi.jsでマスク処理
結論
Container.maskにスプライトとか登録すれば簡単にできます。#FFFFFFの部分が表示。#000000は非表示。中間の色は半透明になります。
デモサイト
マスク画像の例
こんな感じで、表示したい部分を#FFFFFFにした画像を用意します。
実際のコード
すごく簡単にできてうれしいですね。
document.getElementById("version").innerText = `Pixi.js Version ${PIXI.VERSION}`; const app = new PIXI.Application({ width: 800, height: 600, transparent: false }); document.getElementById('canvas_wrapper').appendChild(app.view); const container = new PIXI.Container(); app.stage.addChild(container); const img1 = document.getElementById("img1"); const sprite = new PIXI.Sprite(PIXI.Texture.from(img1)); sprite.anchor.set(0); sprite.x = 0; sprite.y = 0; container.addChild(sprite); const maskSprites = (() => { maskMap = {}; ['mask1', 'mask2', 'mask3', 'mask4', 'mask5'].forEach((id) => { const maskImg = document.getElementById(id); const sprite = new PIXI.Sprite(PIXI.Texture.from(maskImg)); maskMap[id] = sprite; }); return maskMap; })(); container.mask = maskSprites['mask1']; $('.mask-btn').on('click', (e) => { const $btn = $(e.currentTarget); const maskId = $btn.data('mask'); container.mask = maskSprites[maskId]; });
マスクしたら
こんな感じになります。
山崎実業のハンディーワイパースタンド「tower」がイケてる
机の上のお掃除どうしてますか？
普段リモートワーク（在宅ワーク、テレワーク）なので、仕事部屋の掃除も自分でやらないといけないんですよね。
デスクの周辺のホコリが気になるので、普段からハンディタイプのクイックルワイパーを使ってました。
クイックルワイパー フロア用掃除道具 ハンディ ブラック 本体
- 発売日: 2019/10/21
- メディア: ヘルスケア&ケア用品
これめちゃくちゃ取れるんですよね。 ハンディワイパーっていっぱいあるし何なら100均にも売ってるけど、これはしっかりホコリが取れるんで気に入ってます。
ただこれをそのへんにポイッっておいてるのは、ちょっと見た目悪いなーと思ってたので、 スタンドを買ってみました。
山崎実業 ハンディーワイパースタンド タワー ブラック 2770
- メディア: ホーム&キッチン
山崎実業のハンディワイパースタンド。2020年3月時点で ￥1,430 でした。
ただのスタンドに1,400円はちょっとお高いんですが、これ金属製なんですよね。 そのおかげで、ハンディワイパーを取り出すときにスタンドが倒れない。 プラスチック製の安い商品とかだと、倒れて使いにくそうですよね。 細かいポイントだけどこれのおかげで非常に快適。
あと見た目もシンプルで、普段見えるところに置いても全然かっこ悪くない。 スマート。イケてる！ 買ってよかった。
ASUS Chromebook C523NAを買いました！ 使用感レビュー
最近、日本でもChromebookがゴリゴリにCMされてますね。
私はTVをほとんど見ませんが、YouTubeで何回もCMを見ました。
ということで、先日Chromebook C523NAを衝動買いしてしまったので、そのレビューです。
Chromebook ASUS ノートパソコン 15.6型フルHD液晶 英語キーボード C523NA シルバー グーグル Google
- 発売日: 2019/09/15
- メディア: Personal Computers
今回は Chromebook 全般に関してというよりは、このC523NA自体の評価をしていきたいと思います。
Chromebook（Chrome OS）全般に関しては過去記事で色々書いてますので、そちらもどうぞ。
スペックとか
「RAMとROMがちょっとだけ多いエントリーモデル」という感じの機種です。
ポイントは、15インチと大型サイズであること、キーボードがUS配列であること、重量が1.43kgと軽いこと。
サイズ感
ベゼルが結構狭く、薄型・軽量なので、十分持ち運びが可能です。
Macbook Air 13inch 2013年モデルと比べるとこんな感じ。13インチと15インチですが、比べてもそこまでサイズに差はありません。
重量はMacbook Airのほうが軽いですが、 実際に持ってみるとMacbook Airのほうがサイズに対して重量がある分「詰まっている」感じがして、 C523NAのほうが持ち運びやすいです。
インターフェース類
左側にはUSB Type-C、Micro SDカードリーダ、4pinイヤホンジャック、USB 3.0。 右側にはUSB Type-C、USB 3.0のみ。
充電はUSB Type-Cポートで行います。今どきっぽいですね。 左右どちらのUSB Type-Cポートからでも給電できます。これ便利ですよね。 Macbook Proなんかも同じ仕様ですが、作業場所によってポートを使い分けられるので、 狭いスペースでも充電しながら作業できます。
映像出力もUSB Type-Cから。付属品としてUSB Type-C→HDMIの変換ケーブルが付属しているので、困ることはなさそうです。
キーボードの使用感
実は今回この機種を選んだ理由の一つが、キーボードがUS配列であること。 普段からUS配列のキーボードを使っているので、ここはマストです。 最近のChromebookは日本語配列のキーボードが増えたみたいで、逆にUS配列の機種のほうが少なくて選択肢が少なかったですね。
肝心の打鍵感ですが、「かなり安っぽいが、十分使える範囲」かなと思います。
まず、使っていると結構たわみます。打鍵感も「パチパチ」というよりは「ヘコヘコ」という表現のほうが合う感じ。 自分が他に持っているノートPCは Macbook Air 2013モデルしかないんですが、それと比べるとかなーーーーり安っぽいです。
配列はごくごく普通のUS配列で、変な位置にFNキーがあったりもせず、すぐに馴染みました。 ストロークも Macbook Air と同じくらいで、総じて「まぁ普通に使えるキーボードだな」という感想です。
あと、この機種に限った話ではないですが、Chromebookはキーボードのキー数が少なく、シンプルに整理されていて、 ここは非常に良いポイントだなぁと思いました。ちゃんとCapsLockをCtrlと入れ替えることもできるし、配列に不満はないです。
もう一つ不満を言うと、買った直後の状態だとChrome OS上では日本語配列になっていて、 キーボードの印字と違う文字が入力される状態になってたので、ここはちゃんと設定した状態にしておいてほしかったですね。 （Chrome OSの制限なのかもしれないですが）
ディスプレイ
買う前からわかっていたことですが、ここはあまり褒めるところがありません。
まず良いところから書くと、15インチというサイズはやはり作業しやすいです。 ディスプレイは、可搬性を損なわない範囲で可能な限り大きいサイズが正義です。 そういう意味でC523はベゼルも狭く、15インチノートパソコンとしてはかなりコンパクトなので、ここは非常にグッドです。
ただこのディスプレイ、TN液晶なんですよね。そのためか、非常に視野角が狭い。ベストポジションを外れると、かなり見えづらくなります。 液晶の発色自体もあまり褒められてものではなく、かなりギラギラしてて目がつかれます。せっかくのノングレアなのに……
まぁ、あえてこの液晶を採用してコストを抑えたりバッテリー駆動時間を伸ばしたりしてるんだろうから、あまり文句は言えません。 ただ買う人はちゃんとこの辺を把握しておいたほうがいいですね。でないと絶対後悔すると思います。
タッチパッド
最近のノートPCによくある、どこでもクリックできる＆マルチタップ対応のタッチパッドです。
Chromebookはタッチパッドでの操作が色々用意されていて便利ですね。 2本指・3本指でドラッグすることで、いろんな操作ができて快適です。
C523NAのタッチパッドはというと、まぁ可もなく不可もなくといったところ。 サイズが大きいのは非常に良いですが、若干滑りが悪いです。 見た感じはMacbookとソックリなタッチパッドですが、圧倒的にMacbookのほうが滑りが良くて操作しやすいです。
細かい作業がしたければマウスを使いましょう。
総評
- スペックはエントリーモデルとしては一般的で、使用には問題なし。
- 15インチと大型でありながら、1.43kgと軽く、比較的薄い。
- キーボードがUS配列。
- 液晶がマジで見づらい。
- 全体的に安っぽく、曲がる・たわむ。
悪い点も目立ちますが、個人的には結構良い機種だと思っています。 やっぱ液晶は大きけりゃ大きいほどいいんだよ！ と声を大にして言いたい。
Chromebook ASUS ノートパソコン 15.6型フルHD液晶 英語キーボード C523NA シルバー グーグル Google
- 発売日: 2019/09/15
- メディア: Personal Computers
ChromebookにLinuxを入れてまともなターミナルを得る
Chromebookを買って持ち歩いたりしていると、
「ちょっとした開発なんかもこのマシンでできないかなー」
なんて思ったので、ターミナルの環境を整えてみました。
はじめに
今回の目的は、あくまでターミナルを得ることです。 なんでターミナルがほしいかというと、そっからメインPCなりクラウドなりにsshして作業したいからです。
最初はGoogle Chromeの拡張機能とかでsshできればそれで済ませるつもりでしたが、 日本語入力に難があり、結局Linuxを入れることになりました。
でも、LinuxにVSCode入れたり とかはせずに、あくまでsshで作業することを目的にしてます。 でないと、ただでさえChromebookはストレージ容量が少ないのに、Linux入れてRuby入れてNode.js入れて……なんてやってたら あっという間にストレージが枯渇してしまいます。 なので、あんまり余計なアプリを入れずにきれいな環境にしておいたほうが無難だと個人的には思います。
SecureShellじゃだめなのか？
Google Chrome拡張機能のssh クライアントに、SecureShellというのがあります。
最初はこちらを導入したんですが、どうも Ctrl + Space での日本語切り替えが動かないっぽいです。
日本語が打てないのは作業に支障が出るので、SecureShellは今回は不採用。
補足1：SecureShellのウィンドウからフォーカスを外して、別のアプリ上で日本語に切り替えてからSecureShellに戻ってくると、一応日本語が打てる。 けど日本語入力のたびにウィンドウを切り替えるのはさすがに……
補足2：私が使っているのはUSキーボードのChromebookなので、日本語切り替えは Ctrl + Space で行います。
JIS配列のChromebookだとどうなんでしょ？ 知ってる方いたら教えてほしいです。
Linuxを有効にする
まずChromebookの設定画面からLinuxを有効にします。
有効にすると、Linuxのダウンロードとインストールが自動で進みます。 インストールが完了すると、ターミナルが立ち上がります。
ただ、残念ながらこのターミナルだとSecureShellと同じように日本語が打てません。無念すぎる。 しょうがないので、Linuxアプリ向けの日本語入力アプリケーションをインストールして日本語が打てるようにします。
フォントの追加など
Linuxインストール直後は日本語対応など中途半端なので、色々やっときます。
$ sudo apt update $ sudo apt upgrade -y $ sudo apt install -y task-japanese locales-all fonts-noto-cjk $ sudo localectl set-locale LANG=ja_JP.UTF-8 LANGUAGE="ja_JP:ja" $ source /etc/default/locale
fcitx-mozcのインストールと設定
fcitx-mozc をインストールします。
インストール後、 fcitx-autostart で起動して、その状態で fcitx-configtool で設定を開きます。
$ sudo apt install -y fcitx-mozc fcitx-frontend-all $ fcitx-autostart $ fcitx-configtool
ここで、左下の＋ボタンから mozc を追加して、日本語入力できるようにします。
追加で、LinuxのGUIアプリでfcitxが動作するように設定します。
/etc/systemd/user/cros-garcon.service.d/cros-garcon-override.conf で環境変数を設定すればいいみたいです。
$ sudo sh -c 'echo Environment=\"GTK_IM_MODULE=fcitx\" >> /etc/systemd/user/cros-garcon.service.d/cros-garcon-override.conf' $ sudo sh -c 'echo Environment=\"QT_IM_MODULE=fcitx\" >> /etc/systemd/user/cros-garcon.service.d/cros-garcon-override.conf' $ sudo sh -c 'echo Environment=\"XMODIFIERS=fcitx\" >> /etc/systemd/user/cros-garcon.service.d/cros-garcon-override.conf'
最後に、fctixが自動起動するように、 ~/.sommelierrc に追記します。
$ echo '/usr/bin/fcitx-autostart' > ~/.sommelierrc
ターミナルを入れる
念願のターミナルを入れます。
インストール候補としては、
このあたりかなと思います。 色々試しましたが、どうも一部のアプリ*2だとfcitxの変換候補が表示されなかったり、 表示されても位置がおかしいことがありました。 今回は変換候補がちゃんと表示されるmate-terminalを使うことにしました。
mate-terminalをaptでさくっと入れます。
$ sudo apt install -y mate-terminal
インストールすると、ランチャーにアプリが追加されるので、そこから起動できます。
Ctrl + Space で日本語入力へ切り替えられます。
余談：Cicaフォントを導入する
いつも使っているCicaフォントにフォントを変更します。 Nerd Fonts や絵文字、アイコンなどがごっそり合成された便利フォントです。
wgetで取ってきて /usr/share/fonts の下にフォントファイルをコピーします。
$ mkdir ~/cica $ cd ~/cica $ wget https://github.com/miiton/Cica/releases/download/v5.0.1/Cica_v5.0.1_with_emoji.zip $ unzip Cica_v5.0.1_with_emoji.zip $ rm Cica_v5.0.1_with_emoji.zip $ sudo mv Cica* /usr/share/fonts/ $ fc-cache -f -v $ cd ~/ $ rm -rf ~/cica
mate-terminalの設定からフォントをCicaに変更して、いつもどおりの環境を手に入れられました。
これで色々捗ります。
なんとなくChromebookを買ったら、結構便利に使えているという話
最近日本でもCMが流れて猛烈プッシュされてるChromebook。
「もうMacbook Air持ってるし、別にいらないかなー」
とか言ってたのに……
気がついたらAmazonでポチっていました。
衝動買いした割には結構便利に使っているので、Chromebook（ChromeOS）について思ったことを書いておこうと思います。 同じようにChromebookが気になっている人の参考になれば。
購入したのは ASUS C523NA という、エントリー向けの機種になります。 *1
Chromebook ASUS ノートパソコン 15.6型フルHD液晶 英語キーボード C523NA シルバー グーグル Google
- 発売日: 2019/09/15
- メディア: Personal Computers
| CPU | インテル® Celeron® プロセッサー N3350 |
|---|---|
| メモリ | 8 GB |
| ストレージ | eMMC: 64GB |
| ディスプレイ | 15.6インチ LEDバックライト FHD (1920x1080) ノングレア |
エントリーモデルということで性能は控えめ。とはいえ一応15インチのフルHDだし、最廉価ゾーンよりは少しだけメモリもストレージも多い感じです。
正直買う前は「Celeronとかでほんとに大丈夫なんか」と思ってましたが、今のところあんまり不満はないです。やっぱりChrome OS軽いですね。
多分これにWindowsが乗ってたら、速攻でハードオフに売りに行くか、実家の両親に押し付けていたと思います。*2
基本はGoogle Chrome専用機という印象
「Chromebookで何ができるのか？」については他のブログなどでも散々語られているのでそちらを見てもらうとして、 私が使っていて感じたことをつらつらと。
結局のところ、Chromebookは基本的にGoogle Chrome専用機です。
Androidアプリをインストールして使うこともできますが、そちらはやはりスマホやタブレットに最適化されたインターフェースなわけで、あくまで補助的な意味合いが強そうです。
2-in-1モデルや完全にタブレットタイプのモデル、専用ペンがついているモデルなどもあるみたいですが、2-in-1はまだしも、 AndroidタブレットがiPad + Apple Pencilに勝ってるところは（現時点では）ほぼないと思います。
というわけで、やはりキーボードやマウスやトラックパッドがついてる以上は、メインの用途はGoogle Chromeでのブラウジングになるかなーと思います。
Webで完結するならChromebookは有用
「じゃあ普通の安いWindowsマシンでええやんけ」と思うかもしれませんが、やはりそこは専用OSということで、意外なほどキビキビ動きます。
今回買った機種だと所詮はCeleronなので、重量級のサイトやWebアプリケーションを動かすには厳しいときもありますが、 普通にWebで生活している範囲で困ることはあんまりなさそうです。実際このブログ記事もChromebookで書いています。
同じ値段の安物Windowsを買うなら、Chromebook買うほうが幸せになれると思います。 ただChromebookは「できることが少ない分、できることは快適にできる」という代物なので、それも当然か、という気もします。
ようは、やりたいことがすべてブラウザ＝Webで完結するなら、Chromebookは最も優れたPC足り得るな、というのが私の感想です。
大体のことはブラウザでやれる時代のPC
2020年現在、なにかPCでやりたいことがあったとして、 「これブラウザでできないのかな」って思って調べてみると、大体のことはできる気がします。
Webサイトを作ることも、絵を描くことも、音楽を作ることも、小説を書くことも、ゲームで遊ぶことも、 今は何でも専用のWebサイトやサービスがあり、ブラウザ上で何でもできてしまいます。
もちろん専用のアプリケーションには敵わないことも多いですが、 そういうときはChromebookじゃなくて、ハイエンドなノートPCだとかデスクトップPCだとかを使えばいいわけです。 スマホは持っていてもパソコンは持っていない人が急増しているという現実を見れば、 Chromebookは今求められているPCの形の一つなんじゃないか？ と思います。
とはいえ、まだまだ使い込んだとは言えないレベルでしか触れていないです。せっかく買ったものだし、使い倒していきたいと思います。
手始めにブログの更新から！ ということでこの記事を書いたのでした。おしまい。
10.組み立て＆完成【手配線で自作キーボードを作る講座】
この記事は、【手配線で自作キーボードを作る講座】の第10回目です。 そのほかの記事はこちら↓
フタ取り付け
完成へ向けてキーボードを組み立てていきます。
まずは筐体のフタをして、ネジ止めします。
配線の仕方が悪いと、フタが閉まらないこともあるかもしれません。 そのような場合、スペースに収まるように配線しなおすか、少し背のあるフタに作り直すなどの対処が必要です。
滑り止めを張る
滑り止め用のシリコンシールを貼っておきましょう。
張らなくても使えなくはないですが、3Dプリントした筐体は意外と滑ります。 キーボードの使用環境に合わせて張る・張らないを決めてください。 個人的には張っておいたほうが無難だと思います。
シリコンシールはAmazonで買えるほか、ホームセンター、100円ショップなどでも入手できます。
3M しっかりつくクッションゴム 8x2mm 台形 22粒 CS-04
- 出版社/メーカー: スリーエム(3M)
- 発売日: 2015/04/20
- メディア: Tools & Hardware
- この商品を含むブログを見る
今回は100円ショップで購入したシリコンシールを貼りました。
キーキャップ取り付け
満を持してキーキャップ取り付けです。
取り付け自体は難しくないですが、 力を入れて無理やり嵌めようとすると、まれにキーキャップ側の十字溝が割れてしまうことがあります。 あまり力を入れすぎないように注意してください。
ホームポジションが分かりにくいとき
無刻印のキーキャップの場合、ホームポジション用の突起がないものがほとんどです。 慣れればそのままでも使うことはできますが、あったほうがいいという方は、ラインストーンシール（デコレーションシール）を張るのがおすすめです。 こちらもAmazonのほかに、100円ショップなどでも入手できます。
オフィス・プロ ラインストーンシール リボン DRR-12 3mm シャンパンゴールド
- 出版社/メーカー: オフィス・プロ
- メディア: オフィス用品
- この商品を含むブログを見る
完成
最終動作確認して問題なければ、晴れて自作キーボードの完成です！
ぜひ、自分オリジナルの自作キーボードを使い込んでください。 そして、不満点が出てきたら、どんどん改良していってください。
- キー配置を変更してみる
- キーキャップを取り換えてみる
- キーキャップも自作してみる
- 筐体を塗装してみる
- 別の配列の自作キーボードを作る
まだまだ自作キーボードの道は始まったばかりです。
自分が「これだ！」と思うキーボードが完成するまで、試行錯誤しながら頑張ってください！
9.配線その2（ProMicro部分）【手配線で自作キーボードを作る講座】
この記事は、【手配線で自作キーボードを作る講座】の第9回目です。 そのほかの記事はこちら↓
3.5mm ミニジャックの固定
配線の前に、3.5mm ミニジャックを筐体に固定しておきます。
グルーガンで固定します。 あまりたくさんつけるとミニジャックの穴の中に入ってしまうので注意してください。
ProMicroのモゲ対策
ProMicroのMicroUSB端子は耐久性が低いことで有名です。 強い力が加わると、基板から剥がれて壊れてしまうことがあります。（いわゆる "モゲMicro"）
モゲ対策のために、ホットボンドで補強をします。 ホットボンドはそこまで接着力が強くはないので、あまりに強い力がかかるとやはり壊れてしまいますが、 何も対策しないよりは断然強度が上がります。
端子の穴にホットボンドが入らないよう、マスキングテープで保護してからホットボンドで補強します。
完璧に対策したい場合は、エポキシ系接着剤で固定するとよいでしょう。 もしくは、マグネット式のケーブルを使って端子の抜き差しをしないようにするのも有効です。
配線の手順について
配線の手順ですが、2パターン考えられます。
- ProMicroにケーブルをはんだ付けして、次にスイッチと配線する
- スイッチに配線して、次にProMicroに配線する
簡単なのはProMicroから先に配線する方法だと思います。
またどちらの手順でも、電線はあらかじめカットしておいたほうが作業しやすいと思います。 最後に無駄な部分はカットするために少し電線が無駄になりますが、作業のしやすさを優先します。
ProMicroへのはんだ付け
ProMicroから配線を伸ばします。
前述のとおり長めにカットした同線の被膜を剥いで 細く捻じってから、 先に電線だけをはんだ付けしておきます。
ProMicroに差し込んで、はんだ付けします。 作業しやすいようにアームなどで固定すると良いでしょう。
あまりきれいにできてませんが、とりあえずはんだ付けできました。 この調子で、使用するピンすべてに電線を取り付けていきます。
最後にはみ出た部分をニッパーで切り落として、はんだ付け完了です。
キースイッチとProMicroの配線
以前に作成した回路図を見ながら、キースイッチとProMicroを配線していきます。
この時注意が必要なのが、回路図がキーボードを表から見た時の図になっていることです。
この回路図を実際のキーボード上に重ねると、次のようになります。
列方向は左から、A2、A1、A0、15、14、16、10となっています。 しかし実際に配線するときは裏面から作業するので、列方向の順番が見た目逆になります。
このように、左から10、16、14、15、A0、A1、A2となるように配線します。
それでは実際に配線していきます。 電線をケースの隙間に這わせるようにしながら、各キースイッチの行と列にはんだ付けしていきます。
はんだ付けの際は、あらかじめ電線のほうに予備はんだをしておきます。 細かい作業になるので、テープやクリップなどで電線の位置を固定しながら作業するとやり易いでしょう。
すべての電線を配線し終えたのが次の写真です。
今回の例ではちょっと電線が長すぎました。 短くて届かない状況よりはマシですが、配線時に必要十分な長さにカットすればよかったです。
ProMicroの固定
配線が終わったら、ProMicroをグルーガンで固定します。
これで片手分完成です！ もう片手分、頑張りましょう。
動作確認
両手分の配線が完了したら、動作確認していきましょう。
- フタはちゃんと閉まりますか？
- すべてのキーが正しく動作するか？
動作しない場合の確認点
- 電線が干渉してフタが閉まらない
- スペースを探して電線を這わせましょう。
- 特定のキーのみ動かない
- 動かないキーの配線はきちんとできていますか？
- キースイッチ自体の品質は問題ないですか？ テスターなどで確認してみましょう。
- キースイッチ自体に問題があるなら取り替えましょう。
- 特定の列／行のキーのみ動かない
- 動かない列／行のProMicroへの配線はきちんとできていますか？
- ProMicroのピンと、QMK Firmwareで指定したピンは一致していますか？
- 右側のキーボードが反応しない
- 右側のキーボードを直接つないだ時は動作しますか？
- 右側だけつないだときは、左手用として動作します。
- 問題なく動くなら、左右の接続が正しくできていないと思われます。
- 右側単体でも動かないなら、まずは右側のどこに問題があるか調査しましょう。
- VCC、GND、通信用ピンが正しく配線できていますか？
- QMK Firmwareで指定した通信用ピンの配線はあっていますか？
- Micro USBケーブル、オーディオケーブルを変えてみても発生しますか？
- 右側のキーボードを直接つないだ時は動作しますか？
問題なく動作したら、あとはもう最後の仕上げだけです！