2020年11月26日木曜日

ワードプレスのページネーションについて

 あまプロではWrodpressでウェブサイトを構築する事が有ります。
ワードプレスで少し躓いたんであメログ。

 ワードプレスでは投稿を一定数のページ単位で表示するページネーションという機能が備わっています。
公式の基本的な例にPHPのプログラムが載っていて、それをコピペしたらページネーションのHTMLが生成される
筈なんですが、何故か私の環境ではURLのクエリ部分が
https://amahiroba.info/?page_id=721&category=ボランティア募集#038;category=ボランティア募集&paged=2
の様にcategoryが繰り返されて正しいURLになりませんでした…。

原因を調べてみるとesc_url( get_pagenum_link( $big))でURLをエスケープしている箇所が有るんですが、そこにマルチバイト文字列(日本語)等#038;が入っているとエスケープ出来ないそうです。
なので、エスケープ出来る様にhtml_entity_decode( get_pagenum_link( $big))に改修すると

正しいURLが生成されました。
https://amahiroba.info/?page_id=721&category=ボランティア募集&paged=2

2020年7月18日土曜日

Ubuntuの追加したユーザでの日本語入力について

あまプロではUbuntuを使ってプログラミング教室を行っています。
Ubuntuの日本語入力で躓いたのであメログ。

Ubuntuのインストール時に入力言語の設定を行います。
ここで日本語を設定すると、キーボードに日本語レイアウトを選択して、全角半角の切り替えが出来る様になります。

通常はこれだけで日本語が行えるんですが、新たなユーザを追加した場合にハマりポイントが有ります。
 インストール時に日本語入力の設定を行っていれば、正しく日本語入力出来て、
 地域と言語設定もこの様になってます。
キーボードレイアウトも日本語キーボードになってます。
なんですが、後からユーザを追加した場合は、地域と言語設定が
 この様になって、キーボードレイアウトも
英語キーボードになってまうんですね…。
なもんで、新たにユーザを追加した場合は、一度入力ソースを全部削除して
日本語を追加します。
これで日本語キーボードレイアウトになります。
次に日本語(Mozc)を追加します。

これでログアウトしてログインすると、無事に日本語入力が出来る様になります。

通行止めするらしい


2020年6月2日火曜日

要素のクリアボタンについて

あまプロではウェブシステムの保守を行う事があります。

先日、ChromiumのUIが変更されたのであメログ。

HTML5の<input type="time">タグをChromiumで開くと🅧のクリアボタンが表示されていたのが、最近のアップデートで時計アイコンに変わっていた。
ワンクリックで時間をクリアできなくなり不便という要望が出たので、何とか回避してみました。

inputの隣に×アイコンを追加して、それがクリックされたらJavaScriptでinputの値を空にしています。
ESCキー押下でもクリアする様にしてます。
<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <title>てすと</title>
        <style type="text/css"><!--
            .clear { color: gray; position: relative; left: -0.4em;}
            @-moz-document url-prefix() {
              .clear {
                display: none;
              }
            }
        --></style>
    </head>
    <body>
        <input type="time" id="time0" name="time0">
        <span id="clear0" class="clear">&#127335;</span>
        <br>
        <input type="time" id="time1" name="time1">
        <span id="clear1" class="clear">&#127335;</span>

        <script type="text/javascript"><!--
            function downEscape() {
                if( event.key == 'Escape') this.value = '';
            }
            function clickEscape() {
                this.previousElementSibling.value = '';
            }
            function changePointerDefault() {
                this.style.cursor = 'default';
            }
            document.getElementById( 'time0').addEventListener(
                'keydown', downEscape, false
            );
            document.getElementById( 'clear0').addEventListener(
                'click', clickEscape, false
            );
            document.getElementById( 'clear0').addEventListener(
                'mouseover', changePointerDefault, false
            );
            document.getElementById( 'time1').addEventListener(
                'keydown', downEscape, false
            );
            document.getElementById( 'clear1').addEventListener(
                'click', clickEscape, false
            );
            document.getElementById( 'clear1').addEventListener(
                'mouseover', changePointerDefault, false
            );
        --></script>
    </body>
</html>

表示するとこんな感じ。
mozilla系のfirefoxでは今でもクリアボタンが表示されてるので、追加クリアボタンは非表示にしてます。

こんな感じ。

ワンライナーでHTMLとCSSとJavaScriptをごちゃまぜにするのがお好みな方は

 <!DOCTYPE html>
<html lang="ja">
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <title>てすと</title>
    </head>
    <body>
        <input type="time" id="time0" name="time0" onKeyDown="if( event.key == 'Escape') this.value = '';">
        <span id="clear0" class="clear" style="color: gray; position: relative; left: -0.4em;" onClick="this.previousElementSibling.value = '';" onMouseover="this.style.cursor = 'default';">&#127335;</span>
        <br>
        <input type="time" id="time1" name="time1" onKeyDown="if( event.key == 'Escape') this.value = '';">
        <span id="clear1" class="clear" style="color: gray; position: relative; left: -0.4em;" onClick="this.previousElementSibling.value = '';" onMouseover="this.style.cursor = 'default';">&#127335;</span>
    </body>
</html>

こちらをどうぞ。

2020年5月10日日曜日

JavaScriptとCSSのミニファイ化について

あまプロでは市内のお持ち帰り配達お店マップを作っています。

開発が進むに連れて、JavaScriptファイルとCSSファイルとHTMLファイルが肥大化して来ました。
そこでファイルサイズを抑えるミニファイを行ったのであメログ。

CSSやJavaScriptやHTMLには可読性を上げる為にコメントやインデントを入れていますが、ブラウザで実行する際にはそれらは不要になります。
なので、サイトにリリースする際にはミニファイしてファイルサイズを小さくします。
そうすると、当然ダウンロード時間が減り、結果ウェブサイトの応答が早くなります。

CSSやJavaScriptのミニファイを行うツールがオープンソースで公開されてますので、それを使います。
HTMLのミニファイツールも有るのですが、今回は割愛。

先ず、ミニファイツールをインストールする前に、npmをインストールします。sudo apt install npm
でインストールしておきます。
aptが依存するパッケージを自動的にインストールしてくれるので便利です。

続きまして、npmでCleanCSSUglifyESをインストールします。
npm install clean-css-cli -g
npm install uglify-es -g
 
基本的な使い方はこちら 
cleancss -o takeaway.min.css takeaway.css
uglifyjs -c -m -o takeaway.min.js -- takeaway.js
 
*.cssや*.jsがミニファイ前のファイルで、*.min.css*.min.jsがミニファイ後のファイルです。 
比較してみると
-rw-r--r-- 1 root root 2.5K May  9 23:35 takeaway.css
-rw-r--r-- 1 root root 1.7K May  9 23:35 takeaway.min.css
-rw-r--r-- 1 root root 5.0K May  9 23:35 takeaway.js
-rw-r--r-- 1 root root 2.8K May  9 23:35 takeaway.min.js
-rw-r--r-- 1 root root  26K May  9 23:35 takeawayLib.js
-rw-r--r-- 1 root root  12K May 10 00:14 takeawayLib.min.js
ミニファイ後はサイズが約半分になってます。
たかが半分されど半分…塵も積もれば山となります。

ミニファイ後のファイルを開いてみると改行や空白が削除された長〜い一行のファイルになっています。
CSSはこれで良いのですが、JavaScriptはこのままでは開発し難いです。
JavaScriptは開発中にブレークポイントで停止して変数をウォッチしてデバッグする事が有りますが…これ、一行のファイルだととてもデバッグし難いんです。
なので、今時のブラウザにはJavaScriptの整形機能が有ります。
ブラウザの開発ツール(Ctrl + Shift + I)のデバッガータブの下に{ }のアイコンが有ります。
これを押下するとソースを整形してくれます。
整形はしてくれるんですが、ミニファイ時に難読化のオプション-mを指定しているので、変数名が一文字になって非常に理解し難いです。
これには、デバッグ時に変数名やfunction名を復元するソースマップを作成して対応します。
ソースマップはミニファイ時にuglifyjs -c -m -o takeaway.min.js --source-map "url='takeaway.min.js.map'" -- takeaway.js
のオプションを指定するだけです。 

すると、ミニファイ時にソースマップが作成されます。
-rw-r--r-- 1 root root 2.5K May  9 23:35 takeaway.css
-rw-r--r-- 1 root root 5.0K May  9 23:35 takeaway.js
-rw-r--r-- 1 root root 1.7K May  9 23:35 takeaway.min.css
-rw-r--r-- 1 root root 2.8K May  9 23:35 takeaway.min.js
-rw-r--r-- 1 root root 3.0K May  9 23:35 takeaway.min.js.map
-rw-r--r-- 1 root root  26K May  9 23:35 takeawayLib.js
-rw-r--r-- 1 root root  12K May 10 00:14 takeawayLib.min.js
-rw-r--r-- 1 root root  16K May 10 00:14 takeawayLib.min.js.map

先程と同様にブラウザの開発ツールのデバッグタブを表示すると
*.min.jsに加えて*.jsが表示され、*.jsの方は変数名やfunction名が理解し易い形式で表示されます。

開発用のdevelopブランチではJavaScriptをデバッグしますので、ソースマップ有りで。
リリース用のgh-pagesブランチではJavaScriptをデバッグしないので、ソースマップ無しで。
という風に使い分けます。

2020年5月8日金曜日

vimで並べ替えについて

あまプロではvimでテキストファイルを操作する場合が有ります。

vim単体の機能ではないんですが、vimには外部コマンドを実行する機能が有ります。
方法は
:!コマンド
です。
これを使ってテキストファイルをソート出来ます。

基本編

テキストファイル全体を昇順で並び替え(ソート)を実行するには
:%!sort
になります。
%が全体を指します。
降順で並び替えるには
:%sort!
です。

例えば





というテキストファイルに
:%!sort
すると





になります。

応用編

全体以外の範囲を指定する場合は開始行と終了行をカンマ区切りでしていします。
例えば現在の行から下3行をソートするには
:.,+3!sort
とします。(相対範囲)
例えば現在の行から上3行をソートするには
:.,-3!sort
とします。

例えば1行目から3行目をソートするには
:1,3!sort
とします。(絶対範囲)

ちなみにファイルの行数を越えた範囲を指定したソートをするとエラーになります…。

2020年5月7日木曜日

LXC環境でのコマンド補完について

あまプロではLXCで仮想環境を構築する事が有ります。

先日、仮想環境ではまったのであメログ。

プロジェクト毎に環境を構築出来る仮想環境、めっちゃ便利です。
でも、仮想環境下のgitでオプションや引数の補完が出来なくて、困ってました。
gitのgit-completionというパッケージをインストールするとオプション補完してくれるらしいんですが、そんなパッケージはインストールしてへんし、
別の環境ではgit-completion無しでもオプション補完してくれてるんです…。

ちなみに
lxc launch ubuntu:20.04 newContainer
で構築しました。

諦めずに探してたら有りました。
~/.bashrc怪しいコメントが!

# enable programmable completion features (you don't need to enable
# this, if it's already enabled in /etc/bash.bashrc and /etc/profile
# sources /etc/bash.bashrc).
#if [ -f /etc/bash_completion ] && ! shopt -oq posix; then
#    . /etc/bash_completion
#fi
試しにここのコメントを解除して
# enable programmable completion features (you don't need to enable
# this, if it's already enabled in /etc/bash.bashrc and /etc/profile
# sources /etc/bash.bashrc).
if [ -f /etc/bash_completion ] && ! shopt -oq posix; then
    . /etc/bash_completion
fi
とすると、無事にオプション補完出来ました。

~/.bashrcの再読込には再ログインが必要です。

追伸
ホストのSSHキーをコンテナでも使いたい場合は
lxc file push ~/.ssh/* newContainer/root/.ssh/
してます。
これで秘密鍵公開鍵がコピーされます。

Impressの元に戻す(Ctrl+Z)の不具合について

あまプロではLibreOfficeでスライドを作成する事が有ります。

セマセミスライドを作成してる時にはまったのであメログ。

インプレスでスライドを作成する際に、スライドを複製したり追加したりすると思いますが、
既存のスライドをコピペして増やすと動作がおかしくなります。
元に戻す(Ctrl+Z)と先頭スライドに遷移してまうんですよ…。
スライドが多くなれば成程行き来が増え、地味にイラッとするバグです。
バグ管理システムには既にバグ報告されてました。
次期リリースでは改修されているそうです(^-^)

2020年5月2日土曜日

JavaScriptで連想配列の配列から重複を削除する方法について

あまプロではJavaScriptで市内の持ち帰り配達マップを作る事が有ります。

JavaScriptで連想配列の配列から重複を削除する方法が解らなかったのであメログ。

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="utf-8">
        <script type="text/javascript">
            let aaa = [
                {
                    name: 'hoge',
                    age : 10
                },
                {
                    name: 'hogehoge',
                    age : 11
                },
                {
                    name: 'hoge',
                    age : 12
                }
            ];
            console.log( 'フィルタ前');
            console.log( aaa);
            console.log( 'フィルタ後');
            console.log(
                aaa.filter(
                    function ( x, i, self)
                    {
                        return self.findIndex( y => y.name == x.name) == i;
                    }
                )
            );
        </script>
    </head>
    <body>
    </body>
</html>
この例ではnameが重複している連想配列を消したいとします。
方法はfilterfindIndexを使います。
時々使う事も有ろうかと思います。

2020年4月28日火曜日

ウェブサイトに吹き出しを表示する方法について

あまプロではHTMLを使ってウェブサイトを作成する事が有ります。
HTML + CSS + JavaScriptでボタンクリック時に少しだけ通知を表示する機能をあメログ。

ボタンクリック時に通知を少しだけ表示するにはアニメーションを使います。

HTML
<button
 type="button"
 onclick="document.getElementById( 'msg').classList.add( 'clicked');"
 title="クリックして下さい"
 onanimationend="document.getElementById( 'msg').classList.remove( 'clicked');">
    くりっく
    <span id="msg">クリックしました</span>
</button>

CSS
#msg {
    color: gray;
    background-color: aqua;
    padding: 0.5em;
    left: 10em;
    width: 19em;
    position: absolute;
    z-index: 2;
    opacity: 0;
}
.clicked {
    animation: clickAnime 2s;
}
@keyframes clickAnime {
    0% { opacity: 1;}
    50% { opacity: 1;}
    100% { opacity: 0;}
}
JQueryを使っている場合は
document.getElementById( 'msg').classList.add( 'copied');
document.getElementById( 'msg').classList.remove( 'copied');

$( '#msg').addClass(  'copied');
$( '#msg').removeClass(  'copied');
の様に簡略化出来ます。

説明すると、
「クリックしました」メッセージは手前のレイヤz-index: 2;にopacity: 0で透明つまり非表示にしときます。ボタンの側に絶対座標position: absolute;で配置します。
onclickのイベントでclickedクラスを追加します。
clickedクラスにはアニメーションのclickAnimeが定義されてます。
clickAnimeは段々透明つまり非表示にしていくアニメです。 これを2秒間で一回再生します。
onanimationendのイベントで、clickedクラスを削除します。クラスを削除する事で、何度でもクラスを追加する事が出来、つまり何度でもアニメーションを再生、つまり何度でもメッセージを表示さす事が出来ます。



JQueryにするならTooltipsterの様な吹き出しツールチップ用のプラグインも有って表現も豊富になります。
ですが、仕組みを理解していれば何でも好きに作れる様になるのが利点です。

vimで二つのファイルを比較する方法

あまプロではvimを使ってテキストファイルを比較する事が有ります。
便利な機能なんであメログ。

例えば、memo0.txtとmemo1.txtを比較したいとします。

  1.  vimでmemo0.txtを開いて
  2.  :vert diffs memo1.txt


こんな感じです。
左右のウインドを移る時はCtrl + w wです。
なかなか便利です。

2020年4月20日月曜日

OpenStreetMapで尼崎市内の何かを検索するについて

あまプロではOverpassTurboを用いてOpenStreetMapの情報を取得する場合が有ります。

ちょっとはまったんであメログ。
OverpassTurboでは矩形範囲を使って範囲内の地物を取得する事が出来ます。
でも四角なんでちと使い勝手が悪いです。
例えば尼崎市内のお持ち帰りや配達を行っているお店を取得する場合には困ります。

それにはこんな感じのクエリにします。

[out:json][timeout:25];
// gather results
area[admin_level=7]["name"="尼崎市"]->.searchArea;
(
  node["takeaway:covid19"~"[^no]"](area.searchArea);
  node["delivery:covid19"~"[^no]"](area.searchArea);
);
// print results
out body qt;
);
wikiには一応載ってるんですが、かなり解り難いので手こずりましたわ…。

2020年4月14日火曜日

近所の持ち帰りや配達してくれるお店マップについて

あまプロではOpenStreetMapを使って地図を描く事が有ります。
昨今の感染症の流行に対抗して、近所の持ち帰りや配達可能してくれるお店マップを作ってみたのであメログ。

  1. 先ず、Overpass Turboで近所の持ち帰りか配達が可能なお店をエクスポートする
    1. 地図上で地元を表示する
    2. 矩形範囲を手動で選択するアイコンを押下して、範囲を指定する
    3. ウィザードで抽出したいタグのkeyとvalueを設定する
      今回はお持ち帰り不可ではない"takeaway"~"[^no]"か
      配達不可ではない"delivery"~"[^no]"に一致する所を抽出する

      wiki
      ではOverpassクエリで否定の正規表現は出来ないと載っているが、何故か出来ます…
      クエリはこんな感じ
      /*
      This has been generated by the overpass-turbo wizard.
      The original search was:
      */
      [out:json][timeout:25];
      // gather results
      (
        node["takeaway"~"[^no]"]({{bbox}});
        way["takeaway"~"[^no]"]({{bbox}});
        relation["takeaway"~"[^no]"]({{bbox}});
        node["delivery"~"[^no]"]({{bbox}});
        way["delivery"~"[^no]"]({{bbox}});
        relation["delivery"~"[^no]"]({{bbox}});
        node["takeaway:covid19"~"[^no]"]({{bbox}});
        way["takeaway:covid19"~"[^no]"]({{bbox}});
        relation["takeaway:covid19"~"[^no]"]({{bbox}});
        node["delivery:covid19"~"[^no]"]({{bbox}});
        way["delivery:covid19"~"[^no]"]({{bbox}});
        relation["delivery:covid19"~"[^no]"]({{bbox}});
      );
      // print results
      out body;
      >;
      out skel qt;
    4. エクスポートする

      後述のインポートと形式を揃えれば何でも良いが、今回はOSM形式にしてコピー
  2. 次に、uMapで地元にお持ち帰りか配達が可能なお店のレイヤをインポートする
    1. 地図上で地元を表示する
    2. インポートでエキスポートしたデータを貼り付けて
      OSM形式を選択して

      インポートボタンを押下するとマーカがプロットされる
      インポートデータの修正等で、レイヤ内容を差し替えるにチェックを付けてインポートする
    3. インポートデータは矩形選択なので、恐らく地元外の市のお店も含まれる筈
      そのまま残しても構へんけど、消したい場合はマーカを右クリックで地物を削除する
    4. お好みでレイヤ管理で表示の設定を変更する

      個人的にはポップアップコンテントスタイルをテーブルにして、ラベル表示をホバー時にするのが好き
    5. 名前を付けて保存する

    後はURLをシェアするなり画像を印刷するなりして色々使えます。
    共有時の短縮URLはhttpしか出来へんけど、地図自体はhttps表示出来るので、シェアするなら短縮でないURLの方が良いです。

    ちなみに今回作成した地図はこちら

2020年3月31日火曜日

ロボットブログラミングについて

あまプロではArduinoを使ってロボットブログラミングを行う場合が有ります。

生徒が既成品を買うて来て、作り方等を教える場合も有りますが、日本橋で部品を購入して独自のロボットで行う場合も有ります。
独自というても、ArduinoとDCモータ2個とモータドライバ超音波距離センサの組み合わせなんですけど、色々と嵌まる所が有ったのであメログ。
 
Arduinoだけなら角型乾電池(9V)のみで動くんですが、モータを回すとなると電圧が足らなくなるので単3乾電池(1.5V)が2個要ります。
Arduinoと角型乾電池、モータ2個と単3乾電池2個、それらをつなぐモータドライバ
簡単にはこんな仕組みです。

Arduinoは5Vと3.3Vの電圧を出力する事が出来ますが、今回はArduino自体を角型乾電池(9V)で動かそうとしてるので、モータ2個を回すにはどうしても電圧不足になります…無理に動かすとArduinoやモータドライバが不安定になり最悪壊れてまいます。
なもんで、ドライバを介して単3乾電池2個の電圧でモータを回します。
もう一つ超音波距離センサを動かすにも電圧が要るのですが、これはArduinoの5Vで動作し、Arduinoが不安定になる事も有りませんでした。
その他、ギアボックスやキャタピラやブレードボードやビニール線や電池ボックス等々…全部で日本橋で7000円(税込)で買えました。

工具は半田ごてセットとニッパとラジオペンチとネジドライバ(モータドライバとはちゃうよ) 合わせて2000円くらいかな?百均ならもうちょい安く揃えられるかも。

これらを駆使して、頑張ってロボットを組み立てます。

では次、いよいよプログラミング。
ArduinoはC言語みたいなのでプログラミング出来るんですが…正直子供向けのプログラミング教室には敷居が高過ぎます。
なもんで、Scratchに慣れた子どもにはBlocklyDuinoでプログラミングしてもらいます。
こちらScratchの様に予め用意されたブロックを組み合わせるだけで、Arduinoのコードを生成してくれる優れ物です。
日本語やにほんごにも対応してくれますので、これとArduinoIDEが有れば簡単なロボットプログラミングは出来てしまいます。
固有のライブラリをインクルードするとかは(今の所)無理なので、その場合は直接ArduinoIDEでコーディングするしかないんかな?

距離を測る場合は、標準のBlocklyDuinoでは出来ないんですが、設定画面で機能追加する事で距離センサのブロックが追加されます。
他にもサーボとかイーサネットの機能追加ブロックも有るみたいです(使た事ないけど)。

モータドライバを介して前進後進や右回転左回転をするにはドライバの各端子に接続したピンをオンオフ(Hight/Low)して制御します。
動力用電源端子1つと制御用電源端子1つとGND1つとモータ用入力端子4つとモータ用出力端子2つ…モータは2個でモータ用入力は一つ共有なんで…計15端子!
ビニール線を同じ色にすると、訳解らんくらいゴチャゴチャになります。
始めから一気に完成を目指すんやなくて、モータ1つずつ動かすと良ぇと考えます。

今回のロボットは右輪を右モータ、左輪を左モータで動かします。
どの端子をオンにしてどの端子をオフにしたらモータがどちらに回るかはデータシートに載ってます。
しかし、前進後進の度にピンを個別にオンオフしてたらコードも見難くなるので、前進後進停止右回転左回転は関数化して、都度呼び出す様にすると良ぇでしょう。
例えばこんな感じ。
ここで嵌りポイント
関数名を大文字にするとコンパイルエラーになりました。
良く解らんけど、諦めて関数名は小文字にしてます。

もう一つ嵌まりポイント
ピンのオンオフを切り替えたら、即モータが回ってロボットが動…きません。
0.5秒程待つくらいが丁度良ぇみたい。

もう一つハマりポイント
距離センサは超音波で距離を測ります。
モータ選りかは高速に結果を出すけど、それでもCPUの処理速度に比べたら遅いです。
loopの中で制御の度に距離を取得すると、結果取得に間に合わず不正確な距離を返すみたいです。
繰り返しの中では、毎回センサから距離を取得するのではなく、一度距離を取得したら変数に保存しておき変数の距離を参照する様に実装しました。

もう一つハマりポイント
UbuntuのarduinoIDEは偶にUSBでArduinoを接続しても認識せぇへん時が有ります。
そんな時は、ツールのシリアルポートのチェックを付けると良いです。

そんなハマりポイントを何とか解決して、BlocklyDuinoが生成してくれたコードからこちら。

int kyori;

int Sonic_Time_out = 3000;

long Sonic_Timing(){
  digitalWrite(12, LOW);
  delayMicroseconds(2);
  digitalWrite(12, HIGH);
  delayMicroseconds(10);
  digitalWrite(12, LOW);
  long duration = pulseIn(13,HIGH,Sonic_Time_out);
  if ( duration == 0 ){
    duration = Sonic_Time_out;
    digitalWrite(0, HIGH);
    delay(25);
    digitalWrite(0 ,LOW);
    delay(225);
  }
  return duration;
}

void foward() {
  digitalWrite(5, HIGH);
  digitalWrite(6, LOW);
  digitalWrite(7, HIGH);
  digitalWrite(8, HIGH);
  digitalWrite(9, LOW);
  digitalWrite(10, HIGH);
}

void right() {
  digitalWrite(5, HIGH);
  digitalWrite(6, HIGH);
  digitalWrite(7, LOW);
  digitalWrite(8, HIGH);
  digitalWrite(9, LOW);
  digitalWrite(10, HIGH);
}

void stop() {
  digitalWrite(5, LOW);
  digitalWrite(10, LOW);
}

void left() {
  digitalWrite(5, HIGH);
  digitalWrite(6, LOW);
  digitalWrite(7, HIGH);
  digitalWrite(8, LOW);
  digitalWrite(9, HIGH);
  digitalWrite(10, HIGH);
}

void back() {
  digitalWrite(5, HIGH);
  digitalWrite(6, HIGH);
  digitalWrite(7, LOW);
  digitalWrite(8, LOW);
  digitalWrite(9, HIGH);
  digitalWrite(10, HIGH);
}

void setup()
{
  pinMode(11, OUTPUT);
  pinMode(12, OUTPUT);
  pinMode(13, INPUT);
  pinMode(0, OUTPUT);
  digitalWrite(11, HIGH);
  pinMode(2, OUTPUT);
  pinMode(5, OUTPUT);
  pinMode(6, OUTPUT);
  pinMode(7, OUTPUT);
  pinMode(8, OUTPUT);
  pinMode(9, OUTPUT);
  pinMode(10, OUTPUT);
}


void loop()
{
  kyori = Sonic_Timing()/29/2;
  if (kyori > 20) {
    foward();
    delay(500);

  } else if (kyori > 10) {
    stop();
    delay(500);
  } else {
    digitalWrite(2, HIGH);
    if (kyori % 2 == 0) {
      right();

    } else {
      left();

    }
    delay(1000);
    back();
    delay(500);
    digitalWrite(2, LOW);

  }

}
これをArduinoIDEへコピペしてArduinoへアップロードするだけです。

センサで距離を測って、20cmより離れてたら前進して、20cm〜10cmの場合は停止して、それより近くなったら方向転換して戻らせてみました。
ちょっと動かしただけで、直ぐに線が外れて動かへん様になるし、ソースは100行以上あるしで、全然子ども向けではないけど…。
大人なロボットプログラミング入門には良ぇんちゃうかな?

2020年3月22日日曜日

LibreOfficeの参照について

あまプロではLibreOfficeを使って表を作る事が有ります。
先日、リブレオフィスのCalcで表計算をしてた時に、数式のコピペではまったのであメログ。

Calcでセルの値を他のセルでも参照したい場合は、数式を使います。
例えば下記の様に左のセルの1を右のセルでも表示したい場合には、右のセルで=B2と入力すれば左のセルの値が右のセルにも表示されます。
例では1にしたけど1とか漢字でも何でも可能
これ便利やねんけど、他のセルでも1を参照したい場合には一手間要ります。
=B2を他のセルへコピペすれば簡単かと思いきや、コピペするとこんな感じに
=B2をコピペしたのに=A4になる
参照が相対的に計算されてずれてまうのね。そう、ずれるんです。
一行上に貼り付けると=B1
一列左に貼り付けると=A2     =B2     一列右に貼り付けると=C2
一行下に貼り付けると=B3
これCalcでは相対参照(デフォルト)って呼びます。
2つ左のセルの参照をコピーしたので、貼り付けたセルでも2つ左のセルを参照します。
便利な時にはめっちゃ便利やねんけど、不便な時にはめっちゃ不便。
ローカル変数みたいにコピーした参照を使いたい時には良ぇけど、グローバル変数(例えば消費税とか)みたいに参照したい時に使えない。

その問題を回避するには絶対参照と呼ばれる方法を使います。
相対参照との違いは、
  • 相対参照は基準となるセルからの参照
    基準となるセルが変われば参照先も変わる
    二列二行目やとB2
  • 絶対参照はシート全体のからの参照
    基準となるセルが変わっても参照先は同じ
    二列二行目やと$B$2
こんな感じ。頭に$を付けるだけ
で、相対参照と絶対参照の切り替えは、手打ちで$を付けても良ぇけど、ショートカットが便利。
古い公式にはShift+F4と載ってて、新しい公式には載ってへんけど、バージョン6.3ではF4で切替可能です。

F4押下の度に相対参照(B2)->行列絶対参照($B$2)->行絶対参照(B$2)->列絶対参照($B2)を切り替えます。
解り易く色分けして並べてみるとこんな感じ。
B2が参照先のセルね。
 それらを色んな所にコピペしてみるとこんな感じ。
青字の行列絶対参照は何処にコピペしてもB2を参照する
その参照結果はこんな感じ。
青字の行列絶対参照は何処にコピペしても1を表示する
消費税とか重力とか定時とか…シート内のどのセルからも決まったセルを参照したい場合には絶対参照を使いましょ。

今回使たリブレはこちら。
早く来い来い6.4

2020年3月17日火曜日

LibreOfficeのフォントの色を変更できない

あまプロではLibreOfficeで表を作る事が有ります。
リブレオフィスのフォントの色ではまったのであメログ。

Ubuntu19.10版のリブレでは
こんな感じで、フォントの色を指定しただけでは文字色を変更出来ません。
ツール > オプション > アクセシビリティの
システム設定のフォント色を画面表示に使用
のチェックを外さなければフォントの色選りシステム設定が優先されてしまいます。

何故かデフォで「システム設定のフォント色を画面表示に使用」が有効になっているのと
「システム設定のフォント色を画面表示に使用」が有効の為に反映されない「フォントの色」が有効になっているのが変なのですが…ちょっと不親切です(-.- )

2020年2月20日木曜日

二次元配列の横順を縦順にする

あまプロではアプリ開発をお受けする事が有ります。

先日、二次元配列を横順から縦順に変換する機能を実装したのであメログ。
<!doctype html>
<html lang="ja">
    <head>
        <meta http-equiv="Content-type" content="text/html; charset=utf-8">
        <title>二次元配列縦横入換</title>
        <script type="text/javascript">
            let array = [
                [ 1,  2,  3,  4],
                [ 5,  6,  7,  8],
                [ 9, 10, 11, 12]
            ];
            let rowLength = array.length;
            let colLength = array[ 0].length;
            console.log( '横順');
            for( let row = 0; row < rowLength; row++)
            {
                let line = '';
                for( let col = 0; col < colLength; col++)
                {
                    line += array[ row][ col] + ', ';
                }
                console.log( line);
            }
            console.log( '\n縦順');
            for( let row = 0; row < rowLength; row++)
            {
                let line = '';
                for( let col = 0; col < colLength; col++)
                {
                    line +=
                        array[ parseInt( ( rowLength * col + row) / colLength)]
                            [ ( col * rowLength % colLength + row) % colLength] +
                        ', ';
                }
                console.log( line);
            }
        </script>
    </head>
    <body>
    </body>
</html>
JavaScriptやとこんな感じ。
他の言語の場合は適宜方言を脳内変換して下さい。

二次元配列を出力すると通常左上から始めます。
これを右上、左下、右下から始める方法もあります。
これらを組み合わせると結構楽しく二次元配列で遊べます。