2021-12-22

CSSで任意サイズの枠線を％指定のボックスぴったりに収める

背景

％指定等で枠線をつけると、枠線は対象の外側に引かれるためサイズがぴったりにならない
これの防止をする。

主として健忘症である未来の自分へのメモ

実装

※Chromeでのみ動作確認済み

main

.class{  
  --b:5px;                              /* 枠線のサイズ指定 */  
  Width:calc(100vw - calc(var(--b)*2)); /* 枠線は左右に2本入るため枠線のサイズかける2をした数を引く */  
  Height:calc(50vh - calc(var(--b)*2)); /* 枠線は上下に2本入るため枠線のサイズかける2をした数を引く */  
  border: var(--b) solid #fff;          /* 枠線指定 */  
}

See the Pen border perfect by hashito (@hashito) on CodePen.

追記

背景

@takamoso 様からコメントを頂き、「そこまでしなくても、box-sizing を使えばできますよ。」とのこと…

調査

box-sizingがわからなかったので調べてみると
「ボックスサイズの算出方法の指定、border-boxに指定すればpaddingとborderの幅を含める」
ということで探していたのはまさにこれです

例／デモ

例としてコードも頂きましたので、下記に転記させていただきます。

main

div{  
  box-sizing: border-box;  
  width: 100%;  
  height: 100%;  
  border: 5px solid #f00;  
  background: #000;  
}

デモ

See the Pen border perfect2 by hashito (@hashito) on CodePen.

@takamoso 様コメントありがとうございました。

2021-12-22

人工知能・機械学習►AI実装技術

vue-routerでURL 引数を受け取る方法

はじめに

少し詰まってしまったので備忘録

やりたいこと

URLがhttp://xxx.xxx.xxx.xxx?test=vで{test:'v'}を受け取りたい。

やり方

main

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>  
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>  
<script>  
    // routerを初期化  
    var router　=　new VueRouter({  
        mode: 'history',  
        routes: []  
        });  
    var app = new Vue({  
        router,// router を追加  
        el: '#app',  
        data:{},  
        created: function () {  
            // routerから読み込み  
            console.log(this.$route.query)  
        }  
    })  
</script>

詰まったところ

VueRouterを初期化し作らなければならない
VueRouterのインスタンスをVueインスタンスに渡さなければならない

2021-12-11

人工知能・機械学習►AI実装技術

ブログにYoutubeを貼り付ける方法

概要

自身のYoutubeを自分のブログに貼り付けたのでメモ

動画にもしてみました。
(完全に個人趣味なので見応え0かも…)

結論

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

https://hashito.biz/

ソースコード

main


<p class="subtitle">@Youtube</p>  
<script src="https://apis.google.com/js/platform.js"></script>  
<div   
class="g-ytsubscribe"   
data-channelid="UC9ZSQjR4502aRkU5rJpJ7dg"   
data-layout="full"   
data-count="default"></div>  
  
<iframe   
width="560"   
height="315"   
src="https://www.youtube.com/embed/?list=UU9ZSQjR4502aRkU5rJpJ7dg"   
frameborder="0"   
allow="autoplay; encrypted-media" allowfullscreen>  
</iframe>

調べた結果

Code.penにまとめてあります。

See the Pen youtube by hashito (@hashito) on CodePen.

動画埋め込み

基本的に3種類程度ありらしく、

「単品動画としての埋め込み」  
「リスト動画としての埋め込み」  
「チャンネル最新動画の埋め込み」

の3種類があります。
今回、私は「チャンネル最新動画の埋め込み」を行っています。
この場合、list=UU9ZSQjR4502aRkU5rJpJ7dgの部分がチャンネルIDを表すのですが、
元のIDから下記のような変更が必要です。

元：UC9ZSQjR4502aRkU5rJpJ7dg  
変換後：UU9ZSQjR4502aRkU5rJpJ7dg  
※頭２文字「UC」から「UU」に変更

あとは、文字を表示したりしなかったり…
アイコンを表示したりしなかったりもあるらしいですがそこは今回こだわっていないです。

登録ボタン

下記のホームページでチャンネル名またはIDを入力すれば作れます。

https://developers.google.com/youtube/youtube_subscribe_button?hl=ja

2021-12-10

ツール・技術►開発ツール

CSSのtransformrotateZ,rotateX,rotateZそれぞれの動き

背景

transform:rotateのX,Y,Zの動きが分かりにくかったのでまとめました。
完全の個人的なメモ…

transform:rotate各種動き

下記のような縦軸、横軸にして交差したところは足しこんでいます。
縦軸：Z>X>Yの順でそれぞれ４５°設定
横軸：Z>X>Yの順でそれぞれ４５°設定

See the Pen transform:rotata by hashito (@hashito) on CodePen.

［電子工作］999円で温度計を作ってみた

概要

手元に温度センサーとLEDがあったので…
温度計を作ってみた。

部品

温度センサ:BME280
Amazon
227円

表示機:TM1637が組み込まれた7セグLED
Amazon
73円

コンピュータ:Arduino UNO互換機
699円

配線

今回利用する温度センサはI2Cという通信を利用します。
近距離で利用するシリアル通信規格で、Arduino工作だとよく利用されるものです…
(多分通常の開発でも利用されるかと思いますが…)

ジャンパケーブル
¥762

ソースコード

main

  
#include <Arduino.h>  
#include <BME280I2C.h>  
#include <Wire.h>  
#include <TM1637Display.h>  
#define SERIAL_BAUD 115200  
  
BME280I2C::Settings settings(  
   BME280::OSR_X1,  
   BME280::OSR_X1,  
   BME280::OSR_X1,  
   BME280::Mode_Forced,  
   BME280::StandbyTime_1000ms,  
   BME280::Filter_Off,  
   BME280::SpiEnable_False,  
   0x76  
);  
BME280I2C bme(settings);  
  
#define CLK 2  
#define DIO 3  
TM1637Display display(CLK, DIO);  
  
void setup() {  
  Serial.begin(SERIAL_BAUD);  
  while(!Serial) {}  
  
  Wire.begin();  
  while(!bme.begin()){  
    Serial.println("not find BME280");  
    delay(1000);  
  }  
  settings.tempOSR = BME280::OSR_X4;  
  bme.setSettings(settings);  
  
  uint8_t data[] = { 0xff, 0xff, 0xff, 0xff };  
  display.setBrightness(0x0f);  
  display.setSegments(data);  
  delay(1000);  
}  
  
void loop() {  
   float temp(NAN), hum(NAN), pres(NAN);  
   BME280::TempUnit tempUnit(BME280::TempUnit_Celsius);  
   BME280::PresUnit presUnit(BME280::PresUnit_Pa);  
  
   bme.read(pres, temp, hum, tempUnit, presUnit);  
   display.showNumberDec((unsigned int)(temp*100), false); //温度  
//   display.showNumberDec((unsigned int)(hum*100), false); // 気圧  
   Serial.print("Temp: ");  
   Serial.print(temp);  
   Serial.print("°"+ String(tempUnit == BME280::TempUnit_Celsius ? 'C' :'F'));  
   Serial.print("\t\tHumidity: ");  
   Serial.print(hum);  
   Serial.print("% RH");  
   Serial.print("\t\tPressure: ");  
   Serial.print(pres);  
   Serial.println(" Pa");  
   delay(100);  
}

github

動作確認

gif動画で上げても分かりにくかったので、Youtubeにて確認いただけると幸いです。

2021-12-06

人工知能・機械学習►AI実装技術

リーンキャンバスをマークダウンで書く

背景

個人的にもリーンキャンバスを作る機会が多くなったので忘れないようにメモ。
HTMLも使っちゃっているので…ご了承ください

結論

ところどころ改行入ってしまっているけどこんな感じ

コード

<table  border="1">  
<tr><td rowspan="2">  
  
## PROBLEM  
## 課題  
・ここに文字列  
  
## 既存の代替品  
・ここに文字列  
  
</td><td>  
  
# SOLUTION  
## 何を提供するか？  
・ここに文字列  
  
</td><td rowspan="2" colspan="2">  
  
# UNIQUE VALUE PROPOSITION  
## 独自の価値提案  
・ここに文字列  
  
# HIGH-LEVEL CONCEPT  
## ハイレベルコンセプト  
・ここに文字列  
  
  
</td><td>  
  
# UNFAIR ADVANTAGE  
## 圧倒的な優位性  
・ここに文字列  
  
  
</td><td rowspan="2">  
  
# CUSTOMER SEGMENTS  
## 顧客セグメント  
・ここに文字列  
  
## アーリーアダプター  
・ここに文字列  
  
</td></tr>  
<tr><td>  
  
# KEY METRICS  
## 評価基準  
・ここに文字列  
  
  
</td><td>  
  
# CHANNELS  
## チャンネル  
・ここに文字列  
  
</td></tr>  
  
<tr><td colspan="3">  
  
# COST STRUCTURE  
## コスト構造  
・ここに文字列  
  
  
</td><td colspan="3">  
  
# REVENUE STREAMS  
## 収益構造  
・ここに文字列  
  
</td></tr>  
</table>  
```  
  
  
  
## 注意  
* 方言によっては```##```とかが聞かないので別のに置き換えてください。  
  
## コメント  
あぁ、テキストで管理出来るって素敵…  
  
  
# 追記  
`qiita`さんの方でも上手く動かないようなので`#`をなくしたものも追記させていただきます。  
  
```markdown
<table  border="1">  
<tr><td rowspan="2">  
<b>PROBLEM</b> <br>  
<b>課題</b> <br>  
・ここに文字列 <br><br><br>  
   
<b>既存の代替品</b> <br>  
・ここに文字列 <br><br><br>  
  
</td><td>  
<b>SOLUTION</b> <br>  
<b>何を提供するか？</b> <br>  
・ここに文字列 <br><br><br>  
  
</td><td rowspan="2" colspan="2">  
<b>UNIQUE VALUE PROPOSITION</b><br>  
<b>独自の価値提案</b> <br>  
・ここに文字列 <br><br><br>  
  
<b>HIGH-LEVEL CONCEPT</b> <br>  
<b>ハイレベルコンセプト</b> <br>  
・ここに文字列 <br><br><br>  
  
</td><td>  
<b>UNFAIR ADVANTAGE</b> <br>  
<b>圧倒的な優位性</b> <br>  
・ここに文字列 <br>  
<br><br>  
</td><td rowspan="2">  
<b>CUSTOMER SEGMENTS</b><br>  
<b>顧客セグメント</b> <br>  
・ここに文字列 <br>  
 <br><br>  
<b>アーリーアダプター</b> <br>  
・ここに文字列 <br><br><br>  
  
</td></tr>  
<tr><td><br>  
<b>KEY METRICS</b>   
<b>評価基準</b> <br>  
・ここに文字列 <br><br><br>  
  
</td><td>  
<b>CHANNELS</b> <br>  
<b>チャンネル</b> <br>  
・ここに文字列 <br><br><br>  
  
</td></tr>  
<tr><td colspan="3">  
<b>COST STRUCTURE</b> <br>  
<b>コスト構造</b> <br>  
・ここに文字列 <br><br><br>  
  
</td><td colspan="3">  
<b>REVENUE STREAMS</b> <br>  
<b>収益構造</b> <br>  
・ここに文字列 <br><br><br>  
  
</td></tr>  
</table>

表示

PROBLEM 課題・ここに文字列既存の代替品・ここに文字列	SOLUTION 何を提供するか？・ここに文字列	UNIQUE VALUE PROPOSITION 独自の価値提案・ここに文字列 HIGH-LEVEL CONCEPT ハイレベルコンセプト・ここに文字列		UNFAIR ADVANTAGE 圧倒的な優位性・ここに文字列	CUSTOMER SEGMENTS 顧客セグメント・ここに文字列アーリーアダプター・ここに文字列
	KEY METRICS 評価基準・ここに文字列			CHANNELS チャンネル・ここに文字列
COST STRUCTURE コスト構造・ここに文字列			REVENUE STREAMS 収益構造・ここに文字列

2021-11-09

人工知能・機械学習►AI実装技術

振動センサモジュール使ってみた

概要

振動センサーを購入したので試してみました。

部品

振動センサー:振動センサーモジュール
49円

表示機:TM1637が組み込まれた7セグLED
73円程度

コンピュータ:Arduino UNO互換機
699円程度

配線

ソースコード

main

  
#include <Arduino.h>  
#include <Wire.h>  
#include <TM1637Display.h>  
#define SERIAL_BAUD 115200  
  
#define CLK 2  
#define DIO 3  
TM1637Display display(CLK, DIO);  
  
void setup() {  
  Serial.begin(SERIAL_BAUD);  
  while(!Serial) {}  
  
  uint8_t data[] = { 0xff, 0xff, 0xff, 0xff };  
  display.setBrightness(0x0f);  
  display.setSegments(data);  
  delay(1000);  
  pinMode(4,INPUT);  
}  
  
void loop() {  
  int _ao = analogRead(A0);  
  int _do=digitalRead(4);  
  
  display.showNumberDec(_do, false);   
  Serial.print("\nDO: ");  
  Serial.print(_do);  
  Serial.print(" AO: ");  
  Serial.print(_ao);  
  delay(1);  
}

github

少し感想

AOの方の入力が下がるとDOが0になるような動きをします。

すぐに検知が終了するため、実際に利用する場合には処理をかませる必要があると思います。
また、私のぶつ不良かもしれませんが、連続して点灯してしまう状態が何度かあったので、これが発生するとなかなか復旧しません。

動作確認

gif動画で上げても分かりにくかったので、Youtubeにて確認いただけると幸いです。

2021-09-11

人工知能・機械学習►AI実装技術

しずく感なCSS

背景

オッシャレなフロントエンドな方々のポートフォリオサイトを見ていたら作りたくなったので
いろいろな演出を模索していた。

思いついたのは液体のしずくのようなアニメーション…
これをCSSのみで実装したい…

結論

いろいろと悩んだ結果、下記でそれっぽい演出は可能…

main

<div class="t1">  
  <div class="t2"></div>  
  <div class="t3"></div>  
 </div>

main

.t1{/*水滴を表現するためのステージ*/  
    position:absolute;  
    left:100px;  
    margin-top: 100px;  
    filter: blur(30px) contrast(100);/*<- ここが肝です*/  
    margin:auto;  
    width: 200px;  
    height:500px;  
    background-color:#333;  
}  
.t2{/*上に固定される水滴*/  
    position:absolute;  
    margin-top: 50px;  
    margin-left: 50px;  
    width: 100px;  
    height:100px;  
    background-color:#00f;  
}  
.t3{/*垂れる水滴*/  
    position:absolute;  
    width: 60px;  
    height:60px;  
    margin-top: 50px;  
    margin-left: 70px;  
    background-color:#00f;  
    animation: anime 1s linear infinite !important;  
}  
@keyframes anime{/*たれ方のアニメーション*/  
    0%  {margin-top: 100px; }  
  100% {margin-top: 300px; }  
}

See the Pen Waterっぽい by hashito (@hashito) on CodePen.

残った課題

背景色を変えるとfilterがうまくかからず、思った色にできない
サイズを小さくしすぎるとfilterで水滴が消失してしまう
良い解決策があればコメントいただけると助かります…

［追記］テキストでもやってみました。

テキストでも同様のことができることに気づいたので、「I’ll be back」を溶岩に落とすアニメーションをつくってみました。

See the Pen Drop "I'll be back" in the melting furnace by hashito (@hashito) on CodePen.

結構無理矢理感…
フォントサイズがかなりデカくないと駄目なのでfontsizeを200pxにしてtransform:scale(0.2,0.2);にて縮小しています。

あと、'が小さすぎで見えなくなってしまっています。

2021-08-11

ツール・技術►開発ツール

節分のときに食べる豆の数を正確に計算できるアプリ

概要

私も齢30超えた頃から歳の数だけ豆を食べるのがつらくなってきました。

年々増え続ける食べる必要のある豆…

単純に考えると２月１日生まれの人は２月３日には豆をそこまで食べる必要は無いはず…
誕生日に依存して食べる豆の１個以下の部分は上下したりするんじゃないかなぁ

そう思って、単純なアプリを作ってみました。

完成品

codepenの方に作りました！

See the Pen setubunBean by hashito (@hashito) on CodePen.

懸念点

wikiによると2020年以降の節分は2月3日ではなくなる事があるらしい…
ですので2月3日固定になっている年に指定させていただいております。

時間があれば…
個数を豆のイラストにしたいなぁ…

2021-07-11

人工知能・機械学習►AI実装技術

トイレ利用時間を計測するハードを作った話

概要

なにか動くものを作ってみたい。
ということで「トイレのドアにつけると利用時間が見える機械」を作ってみました。

動画も作成してみましたのでよろしくおねがいします。

結論

このような仰々しい形になりました。

利用した部品

総額2,336円です。
ただ、ジャンパワイヤキットが高いので…
もう少し圧縮できるかと思います。

※2020年3月15日の価格です。
Digispark Kickstarter Attiny85
249円+100円

Door Sensor
62円

4セグLED
68円

ブレッドボード
231円

ジャンパケーブル系
180円

抵抗セット
121円

スイッチ
131円

ジャンパワイヤキット
1,043円

電池ケース
41円

電池(100円ショップの安物です)
110円

手順

1.Digispark Kickstarter Attiny85への書き込み準備

Digispark Kickstarter Attiny85はArduinoの標準として利用できないため、下記のサイトを参考に進めます。
https://digistump.com/wiki/digispark/tutorials/connecting

【Windowsの方のみ】
ドライバが必要ということなので、こちらからダウンロード
https://github.com/digistump/DigistumpArduino/releases/download/1.6.7/Digistump.Drivers.zip

[Arduino]>[Preferences]

[追加のボードマネージャーのURL]

こちらに下記のJSONファイルURLを追加します。

http://digistump.com/package_digistump_index.json

【MACの方のみ】
これだけだとコンパイルでErrorが発生します。

***** bad CPU type in executable

下記のフォーラムにある通り、「MACが32bitをサポートしなくなったため発生している」ということらしいです。
https://digistump.com/board/index.php?topic=3249.0

フォーラムの最後に書いてあるコマンドを実行したところ、改善しました。

main

1
2
3

cd ~/Library/Arduino15/packages/arduino/tools/avr-gcc  
mv 4.8.1-arduino5 orig.4.8.1  
ln -s /Applications/Arduino.app/Contents/Java/hardware/tools/avr 4.8.1-arduino5

2.[7セグLED]ライブラリ準備

7セグLEDに関しても標準のものでは動作しません。

こちらのフォーラムを参考にさせていただきました。
https://forum.arduino.cc/index.php?topic=442087.0

こちらのGITHUBにあるコードで動作するということでしたので、ZIP形式でダウンロードしてLibraryフォルダにコピーしました。
https://github.com/reeedstudio/libraries/tree/master/DigitalTube

Libraryは下記のPathにあるそうです

C:\Users\{user name}\Documents\Arduino\libraries

/Users/{user name}/Documents/Arduino/libraries

3.図面

下記のような図面で作成しました。

ドアセンサがD0でLEDはD3,D4を利用しています。
注意点としては電池以外でテストする場合電圧が安定しないもので行うと、表示がうまく出来ません。
ご注意ください。

4.コーディング

main

#include "TM1637.h"  
#define CLK 3  
#define DIO 4  
  
TM1637 tm1637(CLK,DIO);  
unsigned long opentm = millis();  
      
void setup()  
{  
  pinMode(0, INPUT);  
  tm1637.init();  
  tm1637.set(BRIGHT_TYPICAL);  
  tm1637.point(1);  
}  
  
void loop()  
{  
  unsigned long nowtm = millis();  
  uint8_t door = digitalRead(0);  
  if(!door){  
    opentm = nowtm;  
  }  
    
  tm1637.display(3,((nowtm-opentm)/1000%60)%10);  
  tm1637.display(2,((nowtm-opentm)/1000%60)/10);  
  tm1637.display(1,((nowtm-opentm)/1000/60)%10);  
  tm1637.display(0,((nowtm-opentm)/1000/60)/10);  
  delay(1000);  
}

millis()で起動からのmsが取得できるため、doorに依存して初期化するような単純なコードです。
表示に関しては0が一番上らしいので、この様になっています。

5.動作確認

YOUTUBEの方にもう少し長い動画も細かいところも乗っているので参考いただけると幸いです。
ありがとうございました

背景

実装

追記

背景

調査

例／デモ

はじめに

やりたいこと

やり方

詰まったところ

概要

結論

ソースコード

調べた結果

動画埋め込み

登録ボタン

背景

transform:rotate各種動き

関連する記事

概要

部品

配線

ソースコード

動作確認

背景

結論

コード

表示

概要

部品

配線

ソースコード

少し感想

動作確認

背景

結論

残った課題

［追記］テキストでもやってみました。

概要

完成品

懸念点

概要

結論

利用した部品

手順

1.Digispark Kickstarter Attiny85への書き込み準備

2.[7セグLED]ライブラリ準備

3.図面

4.コーディング

5.動作確認