それマグで!

知識はカップより、マグでゆっくり頂きます。 takuya_1stのブログ

習慣に早くから配慮した者は、 おそらく人生の実りも大きい。

JSでモーダルダイアログなポップアップを出すやつ

モーダルウインドウ出すやつで良いのがない。

jQuery に依存してたり、細かなイベントが取れなかったり、設定が煩雑だったり、もっと簡単に出来るだろう。と思ってたけど

ネット探して片っ端から試したけど、これ。というのがない。

仕方ないので作った。画像を真ん中に寄せたり、要素を真ん中に寄せてポップアップするのにどれだけ苦労したら良いんだ。。。 そもそも画像のモーダルウインドウのポップアップってあんまり好きじゃないのですよね。

要は、画像をクリックして拡大したり、画面の orientation(向き)を変えても追従してくれたり、画面をリサイズしても追従してくれたり、ちゃんと真ん中でてくれて、jQueryを不要なやつで、DOM API のちょっと古いやつでも動くやつ*1がほしいわけです。

それも、画像じゃなくて指定したElementをポップアップさせたいわけですよ。

サンプル

↓画像をクリックして拡大

使い方

拡大したい要素に、data-modal-image 属性を追加する。

<div style='width:150px'>
<img src='path/to/image' data-modal-image >
</div>
<script>
document.addEventListener('DOMContentLoaded',function(){
       var md = new ModaLayer({});
       md.add_lisnters();
})
</script>

指定した要素をポップアップするので、Width指定すると意図しない動作になることが有るのでdivで囲っておくと良い。

modal.js

gist.github.com

*1:などと言いつつflexbox使ってますが

要素のスタイルをそのまま取り出して、要素をコピーして保存する

要素のスタイルを見た目をそのまま保存したくないですか?

出来るんですよ。 computedStyle を使えば出来ます。

大昔は 紙Copiとかあったし、あの人はそのまま、カーリル作ったりGyazo買収して忙しそうですけど。ScrapBoxはちょっと依存強すぎてすきになれないので、自前で作るかと昔のソース引っ張り出してた。

要素の見た目保持したやつ、現代のDOM API だととても簡単にかける。

cloneNode に少し細工する

cloneNode だと要素は取れてもスタイルは取れないので、要素のスタイルを取ってきて、見た目をそのままに、完全にコピーするような感じで、取ってくる。

キャプチャ画像にはかなわないけど、ある程度までは近くなる。

スタイルをそのまま、要素を取り出す方法。

これだけです。

   var clone_node_recursively = function( src, deep, with_css ){
        var src = src
        var dst = src.cloneNode(deep);
        if (with_css){
            dst.style.cssText = document.defaultView.getComputedStyle(src, "").cssText;
            var a = src.querySelectorAll('*');
            var b = dst.querySelectorAll('*');
            var c = Array.from(a).map( function (e,idx) {
                return [a[idx], b[idx]]
            } )
            c.forEach(function (e,i) {
                e[1].style.cssText = document.defaultView.getComputedStyle(e[0], "").cssText;
            })
        }
        return dst
    }

ポイント

ここで、要素に当たってるCSSの情報をテキストファイル化してる。

 document.defaultView.getComputedStyle(src, "").cssText

あとは、子要素をたどるだけ。簡単。ただ、親要素の背景の上に乗ってたりするので、背景色は取ってこれないのが難点ですね。背景がなかったらかなり印象が違ってしまう。

動作例

←右のサイドバーからデータ取ってくる(PCのみ

出力例

出力されたHTML

なつかしい

昔は、これでサービス作って一儲けだみたいな某K氏と夢を語ってたけど、あれからもう10年かー早いな。

当時のブラウザだと、body を見た目のままソノママ取り出そうとすると、計算量と出力HTMLが膨大になって使い物にならなったけど、現代のブラウザとCPUだと軽々動くんですよねー、生まれる時代を間違えたんじゃないか。

JSON をシリアライズ・デシリアライズ で関数を含めてObjectをコピーする

以前、JSONのstringify の 第二引数の話を書いた。

takuya-1st.hatenablog.jp

そういえば、完成形を書いてない。

JSONで関数も含めてシリアライズする例はこれ。

関数も含めてシリアライズしてコピーする。

var a = {
  name: "takuya",
  say: function() { console.log( this.name ) },
  tel : { name:'iphone', display: function(){ console.log(this.name) } }
}
var str = JSON.serialize(a)
var b = JSON.deserialize(str)
b.say() // => takuya

serialize/ deserialize はこれ。

//serialize/deserialize ツール
JSON.serialize = function(obj){
  try{
    var str =  JSON.stringify(obj, function replacer (k,v){
        if(typeof v === "function"){ return v.toString() };
        return v ;
      })
    return str

  }catch(e){
    return "";
  }
}
JSON.deserialize=function(str){
  try{
    var obj = JSON.parse( str ,function reciever (k,v ) {

    if ( typeof v === "string" && v.match(/^function/) ){
        return Function.call(this, "return "+ v  )();
      }
      return v
    })

    return obj;


  }catch(e){
    return null
  }
}

こういうの、公式にアレば良いんだけどなかったんだっけ?

grepコマンドでファイル名だけを取り出す。

grep してマッチした行ではなく、ファイル名が欲しい

検索したキーワードを含むファイル名を取り出して、それを全部開いて処理したいときに

grep -l 

-l をつけるとファイル名だけを取り出すことが出来る。

覚え方

l なので line ですね

関連資料:その他のgrep コマンドの活用方法など

grep で特定のディレクトリを外す - それマグで!

特定の拡張子(*.php)のファイルだけをGrepして検索したい。 - それマグで!

grepで逆検索 (マッチするモノを除外)でマッチしないものを探す - それマグで!

unar/lsar コマンドで指定したファイルを取り出す。ほとんどのアーカイブファイルを扱える。

unar / lsar コマンドが便利

unar コマンドで展開すると文字化けがあまり発生しない。

unar とペアになってる lsar コマンドも文字化けを余り起こさずにファイルを取り出せる。

また展開できる

指定したファイルだけを取り出すには

lsar で一覧したファイルの中から、指定したファイルを取り出すには次の方法で出来る。

unar sample.zip 'img001.jpg' 

指定したファイルを標準出力に取り出すには

いちいちディレクトリを作られるのが面倒なので、指定したファイルだけをぱぱっと取り出して標準出力に取り出してしまうと便利だった。

unar sample.zip 'img001.jpg' -r -o - > out.jpg

ただし日本語は通らなかった。

これは動かなかった。( mac 版での確認 )

unar sample.zip 'サンプル/img001.jpg' -r -o - > out.jpg

かわりにワイルドカードが使える。

日本語が入ってた場合はもう絶望的ですが、ワイルドカードを使うことである程度は回避することが出来る。

unar sample.zip '*/img001.jpg' -r -o - > out.jpg

ちょっとしたトリックですが、アーカイブディレクトリ内部にファイルがかぶってなければだいたいうまくいく。

日本語がマッチしないのは文字コードの問題かも

日本語がマッチしないのは、ZIP内部のファイル名がCP932 でLinux文字コードUTF-8 のためかもしれない。 windows め・・・

関連資料

http://takuya-1st.hatenablog.jp/entry/2016/08/03/145534

mac wifi を再起動するコマンド( 切断、起動、指定したSSIDに接続など無線LANコマンドのマトメ

macWifi をコマンドから操作できると楽だよね

切断して、オフして再起動して、接続する。

sudo airport -z
sudo networksetup -setairportpower en0 off
sudo networksetup -setairportpower en0 on
networksetup -setairportnetwork en0 0001docomo

これをスクリプトにしておけば、びっくりしなくて済む。macOS XWifiは優先度を高く設定してても、電波が強い方を優先するので、意図しないSSIDに繋いだりするので、注意が必要ですね。

切断

iOS 11 のコントロール・センターのWifiボタン相当

sudo airport -z

ネットワークオフ

ifdown コマンド相当

sudo networksetup -setairportpower en0 off

ネットワークオン

ifup コマンド相当

sudo networksetup -setairportpower en0 on

指定したSSIDにつなぐ

networksetup -setairportnetwork en0 0001docomo

WiFi DHCPを再取得

sudo /usr/sbin/networksetup -setdhcp Wi-Fi

これをまとめて使うって公衆無線LANと戦う

公衆無線LAN飛んでるととんでもないところにつなぐので、これで確実に接続を試行できる。

なぜか、再起動を挟まないとMacWifiDHCPや802.1認証でタイム・アウトしちゃうとその後の接続が全ておかしくなるんだよね。。。。

公衆無線LANが飛んでると便利な半面で、適当な業者は本当に迷惑だわ。

php のエルビス演算子を初期化以外の用途で使ったら・・・

エルビス演算子が便利だけど。

三項演算子の省略形 elbis operator が便利だけど

<?php
$a[0] = $a[0] ?: 10 ;
var_dump($a);

// array(1) {
//  [0]=> int(10)
//}

変数初期化チェックがシンプルになって嬉しいよね。empty 相当だよねーってウキウキして empty の代わりの使ってみたり。

三項演算子を省略する使うとちょっとね。

<?php
$a[0] = empty($a['a']) ?: 10 ;
var_dump($a);
// array(1) {
//  [0]=> true
//}

そうか、true になるのか。三項演算子の省略形としては「初期化」以外で使うと絶対ダメですね。。。

一時的にaliasをオフ無効にする バックスラッシュ

一時的にalias をオフにしたいとき

grep や ls などを使っていて、一時的にalias をオフにしたいことないですか?

私は結構たくさんあります。 grep や ls にいっぱいオプションを付けていて普段はそれを使っているのですが、素のgrep がほしいときはある。

そんなときは back slash を入れます。

\grep . -R 

このような、エイリアスがあったとしても、素のgrep が動いてくれます。

takuya@:www-data$ alias grep
alias grep='grep -i -E -a --color=auto -n '

これを知って、安心して rm や ls までどんどん alias にしていくことが出来ました。

不必要に エイリアスが呼び出されてしまわないように バックスラッシュをつけるのが良いです。

ただし、同名の関数が定義されているときは関数が優先されます。

シェルから一時的に使うと便利。

バックスラッッシュは、エイリアスがあるために意図した動作にならないときに、対話的prompt で使うと便利です。本当に便利です。

互換性を維持する目的であれば フルパス

alias しまくってると不意に動作することがあるので、シェルスクリプトにバックスラッシュを書きたくなると思います。別環境に持っていくときに alias が発動しないようにバックスラッシュを付与したスクリプトファイルにしても構わないのですが。。。。

互換性を目的にするのであれば、バックスラッシュよりもフルパスが好ましいと思います。

## これはalias発動するのでポータビリティに向いてない。
ls *.jpg | grep aaa| xargs identify

## これだと、alias なしで実行される。が、function grep {   ... } があればそちらが使われてしまう。
## またPATH優先順位にも左右されてしまう。
ls *.jpg | \grep aaa| xargs identify

##  フルパスで指定が無難
ls *.jpg | /bin/grep aaa| xargs identify

このように、シェルのコマンドの優先度を考えたら、ポータビリティを維持する目的でではバックスラッシュは向いていません。

2019-08-23

互換性についての記述を追加。

MySQLの基本的コマンド(ユーザ・DB・権限・パスワード)の設定削除作成の早見表 -- sql 版

MySQLをぱぱっと管理したときに困らないように

データベース作成したり削除したりで困らないように、チートシート的にコピペで使えるようなものを用意しておきます。

ユーザーの新規作成・削除・パスワードを変更などはよく使うのでどこかにメモっておくといい感じ。

ユーザーの確認

ユーザーの一覧を見ます。

select User,Host, Password from mysql.user;

データベース一覧

データベース表示するには、専用コマンド show databaseを使います。

show databases ;

テーブル一覧

テーブル一覧は、専用コマンド show tabales が便利です。

use my_db;
show tables ;

ユーザー作成

ユーザー作成は create user をつ使います。

create user 'your name' identified by 'your pass'

権限の追加

grant all on my_db.* to your_name@'%'

権限の確認

権限を委譲(grant) したら専用コマンドで権限の割当を確認します。

show grants for your_name;

権限の反映

データベースを作成したりユーザーを割り当てたあとは、権限(Privileges)を更新します。

FLUSH PRIVILEGES 

ペアで覚える

作成と削除はペアで使うことが多いのでまとめて掲載しておきます。

データベースの作成・削除・確認

create database YOUR_DB_NAME;
show databases;
drop database YOUR_DB_NAME;

作成・削除と確認はペアで覚えておかないと複数個作ったり消したりしてるとパニックになるので最初に覚えること

ユーザ作成・削除

作成削除はまとめて覚えておくといいので create user と drop user はペアで掲載しておきます。

create user 'your name' identified by 'your pass'

select User,Host, Password from mysql.user;

select User,Host, Password from mysql.user where User like  '%yourname%'

drop user 'your name' 
drop user takuya@'hostoname'

パスワードの変更

ALTER USER 'user'@'hostname' IDENTIFIED BY 'this_is_my_new_password';

設定したパスワードを忘れた場合は、パスワードを再設定するときや紛失・盗難でパスワードを変更する必要があるとき。といっても大抵の場合では、初期設定の時点でメモを忘れてパスワードを紛失するんだけど。

権限の追加削除と確認

grant all on my_db.* to your_name@'%'
revoke all on my_db.* from your_name@'%'

権限削除って余り使わないかも。Allつけておいて不要な権限だけ削除する感じ? それだったら必要な権限だけつけたら良いわけで。

root 権限をもつユーザーの作成

 grant all on *.* to 'takuya'@'%'  WITH GRANT OPTION;

GRANTをGRANTする。権限のGRANTを許可できるroot と同じ管理者権限を付与するには、with grant option をつける

2020-08-04

mysql のパスワード忘れの場合の、パスワードの初期化・変更を追記。

2021-03-30

revoke に記述ミスがあったので修正。

2021-05-28

検索エンジンにこのエントリが無視されるので、微妙にキーワードを追加する。

フルカラーと白黒のプリントやコミックスのzipを判別する

以前、画像の白黒判定をやった

takuya-1st.hatenablog.jp

白黒判定が出来るから、スキャンした画像が「プリント」か「雑誌」か判定していけば便利なんじゃないかと

ScanSnap

ScanSnap でスキャンしたときに、学校のプリントか、教科書やカラー資料か判定して仕分けたい。

http://amazon.jp/dp/B00T2B5L52/?tag=takuya-hateblo-22

富士通 ScanSnap iX500 (A4/両面)

富士通 ScanSnap iX500 (A4/両面)

zip にしておけば、簡単に判別できそう

機械学習とか使わなくてもプリント程度なら、ぱぱっと判定できた。

これでzipコミックスを仕分けできそうで便利。

ScanSnapで白黒を自動調整しておけば確実にモノクロと判別できて楽だった。

#!/usr/bin/env ruby
#
#


dirname  = Dir.pwd


require 'tmpdir'
require 'pry'
require "tmpdir"

def check( f_name )
  # binding.pry

  # Dir.chdir dirname

  is_color_comic = false
  Dir.mktmpdir("check-color-", '/tmp') do |dir|

    cmd = %%unar -o "#{dir}"   "#{f_name}"  %
    # puts cmd
    `#{cmd}`

    list = Dir.glob("#{dir}/**/*")
    # puts list
    list = list.grep(/jpe?g|png|gif|png/).sort
    unless list.size > 10 then
      return false
    end

    mid =  ((list.size.to_f-1)*0.666).floor
    names = list.slice( (mid-2)..(mid+2) )
    puts names

    color_page = names.map{|e|
      cmd = <<-"EOS".gsub(/\s+/, ' ').gsub(/^\s+/,'')
      convert '#{e}' \
        -colorspace HSB \
        -separate -delete 0 \
        -fx "u*v" -blur 2x2 \
        -threshold 30% \
        -format '%[fx:mean]\n' info:
      EOS
      # p cmd
      ret = `#{cmd}`
      puts ret.to_f
      (ret.to_f  > 0 ) ? 1 : 0

    }.inject(0){|sum,x| sum + x }
    puts color_page
    is_color_comic = color_page  > 3
  end

  return is_color_comic
end

path = './*.zip'
Dir.glob(path).sort.reverse.each{|e|
  # begin
    if File.directory? e
      next
    end

    puts e
    ret = check(e)
    if ret then
      puts :color
      `sudo mv "#{e}" 'プリント' `
    end
}

node.jsを野良ビルドした記録

node を野良ビルドした

debian jessie の node が古いので野良ビルドした。 jessie そろそろ捨てるけど、ちょっと急ぎで node 使う必要があったので。

コンパイルとインストー

checkinstall を使った

sudo apt install checkinstall 

作業ログ

wget https://nodejs.org/dist/v6.11.1/node-v6.11.1.tar.gz
tar zxvf node-v6.11.1.tar.gz
cd node-v6.11.1
./configure
checkinstall

configurepython 3.6 で動くかよ! って怒られたので pyenv で変えた

pyenv local system
./configure --prefix=/home/takuya/.usr/local

raspberry pi で初期ユーザー pi 以外のユーザーを自動ログインする。

raspi W 届いた!

raspi W を買ったので初期設定した。

ユーザー takuya を追加して代わりに使うことにした

ユーザー pi は絶対狙われるので、ssh がグルーバルから接続できないように設定して、ログインは最低限した。

自動ログインユーザーを決める方法を変えた

自動ログインのユーザーを交換するには、 raspi-confg などでは出来なくて /etc を弄る必要があった。

/etc/lightdm/lightdm.conf

   113 #greeter-setup-script=
    114 #session-setup-script=
    115 #session-cleanup-script=
    116 #autologin-guest=false
    117 autologin-user=takuya
    118 #autologin-user-timeout=0
    119 #autologin-in-background=false
    120 #autologin-session=UNIMPLEMENTED
    121 #exit-on-failure=false
    122
    123 #

これで、raspi で自動ログインするユーザーを決められて、takuya ユーザーで自動ログイン出来るようになった。

omxplayer を ssh 経由で呼び出すのにとても重要だった。

MySQL の blob型に入ったStringを文字列(utf-8)にして取り出す。

blob に長い文字列が入ってます。

mysql で varchar や textを使えばいいのに、blob で文字列を埋め込んでいるソースコードがありまして。

そこに入ってる文字列を取り出しても blob なので hex になってるだけです。これを文字列として SELECT したい

convertを使えば出来る

select convert (path using utf8)  from my_table;

blob を使うのはutf-8MySQLの文字列変換を抑制させるのにバッドノウハウとしてよく使われていたらしい。

convert コマンドで String に出来るのでまぁいいか。

SQLで連番を作成や配列をカラム・行に展開する

SQL で連番を扱うときに

SQL で連番を扱うときに、数字が入った配列が有るととても便利です。ただしソレを作成するのは不便です。

0..9

これを、次のようなテーブル行に展開したい。

:id
0
1
2
3
4
5
6
7
8
9

SQLで配列を展開するように行にする。

select 0
 union select 1
 union select 2
 union select 3
 union select 4
 union select 5
 union select 6
 union select 7
 union select 9
 union select 9
;

結果

0
----------
0
2
3
4
5
6
7
9

N個に展開してJOINすると

N個に展開して直積を取ってあげると、結構好きにテーブル展開を扱えるようになる。テーブルのピボットや、空席を調べたり欠番を埋めるのに作りやすくなる。

便利

ちょっといじれば10x10x10 の直積で

1000行作ったり出来る。なんか楽しい

select * from (
select 0 
 union select 1
 union select 2
 union select 3
 union select 4
 union select 5
 union select 6
 union select 7
 union select 9
 union select 9
) as  a
left join  (
select 0 
 union select 1
 union select 2
 union select 3
 union select 4
 union select 5
 union select 6
 union select 7
 union select 9
 union select 9
) as b
left join  (
select 0 
 union select 1
 union select 2
 union select 3
 union select 4
 union select 5
 union select 6
 union select 7
 union select 9
 union select 9
) as c
;

参考

https://stackoverflow.com/questions/1564956/how-can-i-select-from-list-of-values-in-sql-server

https://codezine.jp/article/detail/1076

0001docomoのdocomoWiFiにパソコン(iPad)接続のID/PWの確認

docomo Wifiはパソコンから使える

ありがとう、ドコモ。ドコモのWiFiはパソコンやタブレット(ipad)から使えます。

auソフトバンクが軒並み接続サポートを消していく中にあって ドコモはちゃんと接続させてくれます。

しかも電波も管理もしっかしてて確実につながる ソフトバンクみたいに「とりあえず」のWiFiとは質が違う。

ドコモ契約者は無料

無料で使える。ただし設定が必要。

0001docomo はSIMカード認証なので、パソコンから使うには設定がひつよう

id/password は下記サイトから

パスワードとログインユーザ名は、ドコモIDとは別管理になっていて、そのID/PWのペアはMyDocomoから確認することが出来る。

https://www.nttdocomo.co.jp/mydocomo/sp_setting/index.html#accordion-8

ここから確認できる。

f:id:takuya_1st:20170703162430p:plain:w200

接続IDとパスワードを保存したら

0001docomo につなぐときに、上記サイトで書くにしたID/PWを入力すると、とても簡単につながる。

月額300円のWiFiサービスでは優秀

月額300で使えるWiFiとして見た場合とても、とても優秀。

近所に電波が飛んでいたら固定回線の契約は要らないんじゃないかと思うレベル。

おまけ

公衆WiFiを使うコツ「人通りの多さを見ておく」

大勢のひとが「通過」する道路や駅コンコースの無線LANは、たくさんの人のスマホが接続しては切断したり、スマホが接続可能をチェックしている間に通り過ぎたりするので、2.4GHz電波の利用率高い。また大勢がくると、古い接続から順に親機側で切られてしまう。

1分間に30人程度が出入りしてるともう結構厳しい。もちろんここには道路を通過する車が含まれたり、電車が接近すると上客のスマホが含まれたり、バスが複数台通過すると「切断接続の嵐が吹き荒れる」・・・ってことになる。

つまり、1分間程度通信をしないと接続(認証)を切られてしまう。パソコンの接続チェックより早いタイミングで切断されてたりするので、画面上では接続になってるのに通信できないで、タイムアウト処理まで待たされて何も出来なことが有る。たとえばMacWiFiは想定外らしく全く動かなくなっておかしな動作を繰り返したりする。(再起動しないと治らない)

もしWiFiを使いたいと思ったら、2F/3Fの店舗や、地下街で店の奥側など人通りを気にした方がいいでしょうね。

また定期的な通信をすればいいので

watch -n 10 dig google.com 

などとして定期的通信をしておかないとすぐ切断されちゃう。

スマホゲでリアルタイム通信する厨房集団が現れると一気に帯域持っていかれて、電波が枯れちゃうので無線LANは途端に接続できなくなったりするので、負けないようにパケットを投げまくらないと行けない感じある。不毛だ。